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

* fix(react): use useId instead of getInstanceId * chore: update snaps
carbon-design-system · Jul 22, 2024 · dff81f8 · dff81f8
1 parent 1be65d7
commit dff81f8
Show file tree

Hide file tree

Showing 18 changed files with 50 additions and 80 deletions.
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -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
@@ -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

diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -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;
@@ -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

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -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';
@@ -122,8 +122,6 @@ const findHighlightedIndex = <ItemType,>(
   return -1;
 };
 
-const getInstanceId = setupGetInstanceId();
-
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 
 interface OnChangeData<ItemType> {
@@ -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,

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.tsx b/packages/react/src/components/DataTable/TableToolbarSearch.tsx
@@ -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';
@@ -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
   );

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -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>
@@ -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>
@@ -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
@@ -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"
@@ -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
@@ -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>
@@ -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
@@ -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"
@@ -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
@@ -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>

diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -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
@@ -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) => {

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -41,16 +41,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,
@@ -336,7 +334,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;

diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -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';
@@ -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];
@@ -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}`;

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -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';
@@ -52,7 +52,6 @@ import {
   autoUpdate,
 } from '@floating-ui/react';
 
-const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
   ToggleButtonBlur,
@@ -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);

diff --git a/packages/react/src/components/Pagination/experimental/PageSelector.js b/packages/react/src/components/Pagination/experimental/PageSelector.js
@@ -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,
@@ -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 = [];

diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -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);
 
@@ -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

diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -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
@@ -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,