Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(react): use useId instead of getInstanceId #16988

Merged
merged 2 commits into from
Jul 22, 2024
Merged

fix(react): use useId instead of getInstanceId #16988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9054244
fix(react): use useId instead of getInstanceId
tay1orjones Jul 17, 2024
2cc8c39
chore: update snaps
tay1orjones Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/react/src/components/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@ import classNames from 'classnames';
import { Text } from '../Text';
import { usePrefix } from '../../internal/usePrefix';
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { useId } from '../../internal/useId';
import { noopFn } from '../../internal/noopFn';

const getInstanceId = setupGetInstanceId();

type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type';

export interface CheckboxProps
Expand Down Expand Up @@ -127,7 +125,7 @@ const Checkbox = React.forwardRef(
const showWarning = !readOnly && !invalid && warn;
const showHelper = !invalid && !warn;

const checkboxGroupInstanceId = getInstanceId();
const checkboxGroupInstanceId = useId();

const helperId = !helperText
? undefined
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ import React, { ReactNode } from 'react';
import cx from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
import setupGetInstanceId from '../../tools/setupGetInstanceId';

const getInstanceId = setupGetInstanceId();
import { useId } from '../../internal/useId';

export interface CheckboxGroupProps {
children?: ReactNode;
Expand Down Expand Up @@ -54,7 +52,7 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
const showWarning = !readOnly && !invalid && warn;
const showHelper = !invalid && !warn;

const checkboxGroupInstanceId = getInstanceId();
const checkboxGroupInstanceId = useId();

const helperId = !helperText
? undefined
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/ComboBox/ComboBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import ListBox, {
} from '../ListBox';
import { ListBoxTrigger, ListBoxSelection } from '../ListBox/next';
import { match, keys } from '../../internal/keyboard';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { useId } from '../../internal/useId';
import mergeRefs from '../../tools/mergeRefs';
import deprecate from '../../prop-types/deprecate';
import { usePrefix } from '../../internal/usePrefix';
Expand Down Expand Up @@ -122,8 +122,6 @@ const findHighlightedIndex = <ItemType,>(
return -1;
};

const getInstanceId = setupGetInstanceId();

type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';

interface OnChangeData<ItemType> {
Expand Down Expand Up @@ -379,7 +377,7 @@ const ComboBox = forwardRef(
const prefix = usePrefix();
const { isFluid } = useContext(FormContext);
const textInput = useRef<HTMLInputElement>(null);
const comboBoxInstanceId = getInstanceId();
const comboBoxInstanceId = useId();
const [inputValue, setInputValue] = useState(
getInputValue({
initialSelectedItem,
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/DataTable/TableToolbarSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,11 @@ import React, {
RefObject,
} from 'react';
import Search, { SearchProps } from '../Search';
import setupGetInstanceId from './tools/instanceId';
import { useId } from '../../internal/useId';
import { usePrefix } from '../../internal/usePrefix';
import { noopFn } from '../../internal/noopFn';
import { InternationalProps } from '../../types/common';

const getInstanceId = setupGetInstanceId();

export type TableToolbarTranslationKey =
| 'carbon.table.toolbar.search.label'
| 'carbon.table.toolbar.search.placeholder';
Expand Down Expand Up @@ -150,7 +148,7 @@ const TableToolbarSearch = ({

const expanded = controlled ? expandedProp : expandedState;
const [value, setValue] = useState(defaultValue || '');
const uniqueId = useMemo(getInstanceId, []);
const uniqueId = useId();
const [focusTarget, setFocusTarget] = useState<RefObject<HTMLElement> | null>(
null
);
Expand Down
32 changes: 16 additions & 16 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
>
<h4
class="cds--data-table-header__title"
id="tc-:r5k:-title"
id="tc-:r63:-title"
>
DataTable with selection
</h4>
<p
class="cds--data-table-header__description"
id="tc-:r5k:-description"
id="tc-:r63:-description"
/>
</div>
<div
class="cds--data-table-content"
>
<table
aria-labelledby="tc-:r5k:-title"
aria-labelledby="tc-:r63:-title"
class="cds--data-table cds--data-table--lg"
>
<thead>
Expand Down Expand Up @@ -182,20 +182,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
>
<h4
class="cds--data-table-header__title"
id="tc-:r5e:-title"
id="tc-:r5t:-title"
>
DataTable with selection
</h4>
<p
class="cds--data-table-header__description"
id="tc-:r5e:-description"
id="tc-:r5t:-description"
/>
</div>
<div
class="cds--data-table-content"
>
<table
aria-labelledby="tc-:r5e:-title"
aria-labelledby="tc-:r5t:-title"
class="cds--data-table cds--data-table--lg"
>
<thead>
Expand Down Expand Up @@ -354,13 +354,13 @@ exports[`DataTable behaves as expected selection should render and match snapsho
>
<h4
class="cds--data-table-header__title"
id="tc-:r28:-title"
id="tc-:r2e:-title"
>
DataTable with selection
</h4>
<p
class="cds--data-table-header__description"
id="tc-:r28:-description"
id="tc-:r2e:-description"
/>
</div>
<section
Expand Down Expand Up @@ -571,7 +571,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
<button
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="tooltip-:r2f:"
aria-labelledby="tooltip-:r2m:"
class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
title="Settings"
type="button"
Expand Down Expand Up @@ -600,7 +600,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
<span
aria-hidden="true"
class="cds--popover"
id="tooltip-:r2f:"
id="tooltip-:r2m:"
role="tooltip"
>
<span
Expand All @@ -626,7 +626,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
class="cds--data-table-content"
>
<table
aria-labelledby="tc-:r28:-title"
aria-labelledby="tc-:r2e:-title"
class="cds--data-table cds--data-table--lg"
>
<thead>
Expand Down Expand Up @@ -797,13 +797,13 @@ exports[`DataTable renders as expected - Component API should render and match s
>
<h4
class="cds--data-table-header__title"
id="tc-:rc:-title"
id="tc-:rd:-title"
>
DataTable with toolbar
</h4>
<p
class="cds--data-table-header__description"
id="tc-:rc:-description"
id="tc-:rd:-description"
/>
</div>
<section
Expand Down Expand Up @@ -1002,7 +1002,7 @@ exports[`DataTable renders as expected - Component API should render and match s
<button
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="tooltip-:ri:"
aria-labelledby="tooltip-:rk:"
class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
title="Settings"
type="button"
Expand Down Expand Up @@ -1031,7 +1031,7 @@ exports[`DataTable renders as expected - Component API should render and match s
<span
aria-hidden="true"
class="cds--popover"
id="tooltip-:ri:"
id="tooltip-:rk:"
role="tooltip"
>
<span
Expand All @@ -1057,7 +1057,7 @@ exports[`DataTable renders as expected - Component API should render and match s
class="cds--data-table-content"
>
<table
aria-labelledby="tc-:rc:-title"
aria-labelledby="tc-:rd:-title"
class="cds--data-table cds--data-table--lg cds--data-table--visible-overflow-menu"
>
<thead>
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/components/DatePickerInput/DatePickerInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ import PropTypes, { ReactElementLike, ReactNodeArray } from 'prop-types';
import React, { ForwardedRef, useContext } from 'react';
import { usePrefix } from '../../internal/usePrefix';
import { FormContext } from '../FluidForm';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { useId } from '../../internal/useId';
import { ReactAttr } from '../../types/common';
import { Text } from '../Text';

const getInstanceId = setupGetInstanceId();
type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
export type ReactNodeLike =
| ReactElementLike
Expand Down Expand Up @@ -158,7 +157,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
} = props;
const prefix = usePrefix();
const { isFluid } = useContext(FormContext);
const datePickerInputInstanceId = getInstanceId();
const datePickerInputInstanceId = useId();
const datePickerInputProps = {
id,
onChange: (event) => {
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,14 @@ import deprecate from '../../prop-types/deprecate';
import { usePrefix } from '../../internal/usePrefix';
import { FormContext } from '../FluidForm';
import { ReactAttr } from '../../types/common';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { useId } from '../../internal/useId';
import {
useFloating,
flip,
autoUpdate,
size as floatingSize,
} from '@floating-ui/react';

const getInstanceId = setupGetInstanceId();

const {
ToggleButtonKeyDownArrowDown,
ToggleButtonKeyDownArrowUp,
Expand Down Expand Up @@ -335,7 +333,7 @@ const Dropdown = React.forwardRef(
return isObject && 'disabled' in item && item.disabled === true;
},
};
const { current: dropdownInstanceId } = useRef(getInstanceId());
const dropdownInstanceId = useId();

function stateReducer(state, actionAndChanges) {
const { changes, props, type } = actionAndChanges;
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import wrapFocus, {
} from '../../internal/wrapFocus';
import debounce from 'lodash.debounce';
import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { useId } from '../../internal/useId';
import { usePrefix } from '../../internal/usePrefix';
import { keys, match } from '../../internal/keyboard';
import { IconButton } from '../IconButton';
Expand All @@ -32,8 +32,6 @@ import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
import { useFeatureFlag } from '../FeatureFlags';
import { composeEventHandlers } from '../../tools/events';

const getInstanceId = setupGetInstanceId();

export const ModalSizes = ['xs', 'sm', 'md', 'lg'] as const;

export type ModalSize = (typeof ModalSizes)[number];
Expand Down Expand Up @@ -264,7 +262,7 @@ const Modal = React.forwardRef(function Modal(
const startTrap = useRef<HTMLSpanElement>(null);
const endTrap = useRef<HTMLSpanElement>(null);
const [isScrollable, setIsScrollable] = useState(false);
const modalInstanceId = `modal-${getInstanceId()}`;
const modalInstanceId = `modal-${useId()}`;
const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/components/MultiSelect/MultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
} from './MultiSelectPropTypes';
import { defaultSortItems, defaultCompareItems } from './tools/sorting';
import { useSelection } from '../../internal/Selection';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { useId } from '../../internal/useId';
import mergeRefs from '../../tools/mergeRefs';
import deprecate from '../../prop-types/deprecate';
import { keys, match } from '../../internal/keyboard';
Expand All @@ -52,7 +52,6 @@ import {
autoUpdate,
} from '@floating-ui/react';

const getInstanceId = setupGetInstanceId();
const {
ItemClick,
ToggleButtonBlur,
Expand Down Expand Up @@ -328,7 +327,7 @@ const MultiSelect = React.forwardRef(
) => {
const prefix = usePrefix();
const { isFluid } = useContext(FormContext);
const { current: multiSelectInstanceId } = useRef(getInstanceId());
const multiSelectInstanceId = useId();
const [isFocused, setIsFocused] = useState(false);
const [inputFocused, setInputFocused] = useState(false);
const [isOpen, setIsOpen] = useState(open || false);
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/components/Pagination/experimental/PageSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import setupGetInstanceId from '../../../tools/setupGetInstanceId';
import { useId } from '../../../internal/useId';
import Select from '../../Select';
import SelectItem from '../../SelectItem';
import { usePrefix } from '../../../internal/usePrefix';

const getInstanceId = setupGetInstanceId();
function PageSelector({
className = null,
currentPage,
Expand All @@ -24,7 +23,7 @@ function PageSelector({
}) {
const prefix = usePrefix();
const namespace = `${prefix}--unstable-pagination__page-selector`;
const instanceId = `${namespace}__select-${getInstanceId()}`;
const instanceId = `${namespace}__select-${useId()}`;

const renderPages = (total) => {
const pages = [];
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ import { Legend } from '../Text';
import { usePrefix } from '../../internal/usePrefix';
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
import mergeRefs from '../../tools/mergeRefs';
import setupGetInstanceId from '../../tools/setupGetInstanceId';

const getInstanceId = setupGetInstanceId();
import { useId } from '../../internal/useId';

export const RadioButtonGroupContext = createContext(null);

Expand Down Expand Up @@ -157,7 +155,7 @@ const RadioButtonGroup = React.forwardRef(
const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);

const { current: radioButtonGroupInstanceId } = useRef(getInstanceId());
const radioButtonGroupInstanceId = useId();

/**
* prop + state alignment - getDerivedStateFromProps
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,10 @@ import {
import deprecate from '../../prop-types/deprecate';
import { usePrefix } from '../../internal/usePrefix';
import { FormContext } from '../FluidForm';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { useId } from '../../internal/useId';
import { composeEventHandlers } from '../../tools/events';
import { Text } from '../Text';

const getInstanceId = setupGetInstanceId();

type ExcludedAttributes = 'size';

interface SelectProps
Expand Down Expand Up @@ -165,7 +163,7 @@ const Select = React.forwardRef(function Select(
const { isFluid } = useContext(FormContext);
const [isFocused, setIsFocused] = useState(false);
const [title, setTitle] = useState('');
const { current: selectInstanceId } = useRef(getInstanceId());
const selectInstanceId = useId();

const selectClasses = classNames({
[`${prefix}--select`]: true,
Expand Down
Loading
Loading