@carbon/react 1.62.1 → 1.63.0-rc.0

package/es/components/Checkbox/Checkbox.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className,
@@ -39,7 +38,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const prefix = usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId();
   const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -11,9 +11,8 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 
-const getInstanceId = setupGetInstanceId();
 const CheckboxGroup = _ref => {
   let {
     children,
@@ -33,7 +32,7 @@ const CheckboxGroup = _ref => {
   const prefix = usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId();
   const helperId = !helperText ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,

package/es/components/ComboBox/ComboBox.js

@@ -13,7 +13,7 @@ import React__default, { forwardRef, useEffect, useContext, useRef, useState, us
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -82,7 +82,6 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   }
   return -1;
 };
-const getInstanceId = setupGetInstanceId();
 const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
@@ -144,7 +143,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     isFluid
   } = useContext(FormContext);
   const textInput = useRef(null);
-  const comboBoxInstanceId = getInstanceId();
+  const comboBoxInstanceId = useId();
   const [inputValue, setInputValue] = useState(getInputValue({
     initialSelectedItem,
     inputValue: '',
@@ -383,6 +382,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
   const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
     'aria-label': deprecatedAriaLabel || ariaLabel,
     ref: autoAlign ? refs.setFloating : null

package/es/components/DataTable/DataTable.js

@@ -8,7 +8,7 @@
 import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 import getDerivedStateFromProps from './state/getDerivedStateFromProps.js';
 import { getNextSortState } from './state/sorting.js';
 import { getCellId } from './tools/cells.js';

package/es/components/DataTable/TableSelectRow.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useId } from 'react';
 import cx from 'classnames';
 import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
 import RadioButton from '../RadioButton/RadioButton.js';
@@ -28,9 +28,10 @@ const TableSelectRow = _ref => {
     className
   } = _ref;
   const prefix = usePrefix();
+  const uniqueNameId = useId();
   const selectionInputProps = {
     id,
-    name,
+    name: name ? name : uniqueNameId,
     onClick: onSelect,
     onChange,
     checked,

package/es/components/DataTable/TableToolbarSearch.js

@@ -8,14 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
-import setupGetInstanceId from './tools/instanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const getInstanceId = setupGetInstanceId();
 const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'
@@ -51,7 +50,7 @@ const TableToolbarSearch = _ref => {
   const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = useState(defaultValue || '');
-  const uniqueId = useMemo(getInstanceId, []);
+  const uniqueId = useId();
   const [focusTarget, setFocusTarget] = useState(null);
   const prefix = usePrefix();
   useEffect(() => {

package/es/components/DatePickerInput/DatePickerInput.js

@@ -12,11 +12,10 @@ import React__default, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
@@ -42,7 +41,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
   const {
     isFluid
   } = useContext(FormContext);
-  const datePickerInputInstanceId = getInstanceId();
+  const datePickerInputInstanceId = useId();
   const datePickerInputProps = {
     id,
     onChange: event => {

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useEffect, useContext, useRef, useState, useMemo } from 'react';
+import React__default, { useEffect, useContext, useState, useMemo } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -17,11 +17,10 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
-const getInstanceId = setupGetInstanceId();
 const {
   ToggleButtonKeyDownArrowDown,
   ToggleButtonKeyDownArrowUp,
@@ -125,9 +124,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       return isObject && 'disabled' in item && item.disabled === true;
     }
   };
-  const {
-    current: dropdownInstanceId
-  } = useRef(getInstanceId());
+  const dropdownInstanceId = useId();
   function stateReducer(state, actionAndChanges) {
     const {
       changes,

package/es/components/FluidSearch/FluidSearch.Skeleton.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+function FluidSearchSkeleton(_ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--text-input`
+  })));
+}
+FluidSearchSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidSearchSkeleton as default };

package/es/components/FluidSearch/FluidSearch.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import Search from '../Search/Search.js';
+import '../Search/Search.Skeleton.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+const FluidSearch = /*#__PURE__*/React__default.forwardRef(function FluidSearch(_ref, ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--search--fluid`, className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(Search, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidSearch.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes.string,
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes.node.isRequired,
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes.func,
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes.string,
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+var FluidSearch$1 = FluidSearch;
+
+export { FluidSearch$1 as default };

package/es/components/Modal/Modal.js

@@ -20,7 +20,7 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import debounce from 'lodash.debounce';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
@@ -31,7 +31,6 @@ import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 
-const getInstanceId = setupGetInstanceId();
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   let {
@@ -76,7 +75,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const startTrap = useRef(null);
   const endTrap = useRef(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}`;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useLayoutEffect, useRef, useEffect } from 'react';
+import React__default, { useContext, useState, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -460,9 +460,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       setInputValue('');
     }
   }));
-  const menuProps = getMenuProps({}, {
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
+  const menuProps = useMemo(() => getMenuProps({
+    ref: autoAlign ? refs.setFloating : null
+  }, {
     suppressRefError: true
-  });
+  }), [autoAlign]);
   const handleFocus = evt => {
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);
@@ -488,6 +492,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     disabled: disabled,
     light: light,
     ref: ref,
+    id: id,
     invalid: invalid,
     invalidText: invalidText,
     warn: warn,
@@ -496,7 +501,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     size: size$1
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`,
-    ref: refs.setReference
+    ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 &&
   /*#__PURE__*/
   // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
@@ -537,9 +542,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({}, menuProps, {
-    ref: refs.setFloating
-  }), isOpen ? sortedItems.map((item, index) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
       item,

package/es/components/MultiSelect/MultiSelect.js

@@ -11,12 +11,12 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState, useLayoutEffect, useMemo } from 'react';
+import React__default, { useContext, useState, useLayoutEffect, useMemo } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
 import { useSelection } from '../../internal/Selection.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -28,7 +28,6 @@ import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
 
-const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
   ToggleButtonBlur,
@@ -99,9 +98,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   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);
@@ -395,6 +392,11 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     });
   }
   const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
+  const menuProps = useMemo(() => getMenuProps({
+    ref: autoAlign ? refs.setFloating : null
+  }), [autoAlign]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -421,7 +423,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: multiSelectFieldWrapperClasses,
-    ref: refs.setReference
+    ref: autoAlign ? refs.setReference : null
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn,
@@ -444,9 +446,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
-    ref: refs.setFloating
-  }), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;

package/es/components/Pagination/experimental/PageSelector.js

@@ -9,13 +9,12 @@ import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
+import { useId } from '../../../internal/useId.js';
 import Select from '../../Select/Select.js';
 import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
-const getInstanceId = setupGetInstanceId();
 function PageSelector(_ref) {
   let {
     className = null,
@@ -27,7 +26,7 @@ function PageSelector(_ref) {
   } = _ref;
   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 = [];
     for (let counter = 1; counter <= total; counter += 1) {

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -13,9 +13,8 @@ import { Legend } from '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import mergeRefs from '../../tools/mergeRefs.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 
-const getInstanceId = setupGetInstanceId();
 const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     children,
@@ -41,9 +40,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
   const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
   const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
-  const {
-    current: radioButtonGroupInstanceId
-  } = useRef(getInstanceId());
+  const radioButtonGroupInstanceId = useId();
 
   /**
    * prop + state alignment - getDerivedStateFromProps

package/es/components/Select/Select.js

@@ -7,19 +7,18 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useRef } from 'react';
+import React__default, { useContext, useState } from 'react';
 import cx from 'classnames';
 import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
   let {
     className,
@@ -50,9 +49,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
   } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
   const [title, setTitle] = useState('');
-  const {
-    current: selectInstanceId
-  } = useRef(getInstanceId());
+  const selectInstanceId = useId();
   const selectClasses = cx({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,

package/es/components/Tag/DismissibleTag.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES, TYPES } from './Tag.js';
 import { Close } from '@carbon/icons-react';
@@ -20,7 +20,6 @@ import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
-const getInstanceId = setupGetInstanceId();
 const DismissibleTag = _ref => {
   let {
     className,
@@ -37,7 +36,7 @@ const DismissibleTag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagLabelRef = useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useLayoutEffect(() => {

package/es/components/Tag/OperationalTag.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
@@ -18,7 +18,6 @@ import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
@@ -45,7 +44,7 @@ const OperationalTag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagRef = useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useLayoutEffect(() => {

package/es/components/Tag/SelectableTag.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
@@ -18,7 +18,6 @@ import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const SelectableTag = _ref => {
   let {
     className,
@@ -33,7 +32,7 @@ const SelectableTag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagRef = useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const [selectedTag, setSelectedTag] = useState(selected);
   const tagClasses = cx(`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag