@carbon/react 1.62.1 → 1.63.0

package/es/components/FormGroup/FormGroup.js

@@ -13,6 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const FormGroup = _ref => {
   let {
+    disabled = false,
     legendId,
     legendText,
     invalid = false,
@@ -24,7 +25,9 @@ const FormGroup = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const classNamesFieldset = cx(`${prefix}--fieldset`, className);
-  return /*#__PURE__*/React__default.createElement("fieldset", _extends({}, invalid && {
+  return /*#__PURE__*/React__default.createElement("fieldset", _extends({
+    disabled: disabled
+  }, invalid && {
     'data-invalid': ''
   }, {
     className: classNamesFieldset
@@ -46,6 +49,10 @@ FormGroup.propTypes = {
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes.string,
+  /**
+   * Specify whether the FormGroup should be disabled
+   */
+  disabled: PropTypes.bool,
   /**
    * Specify whether the <FormGroup> is invalid
    */

package/es/components/ListBox/ListBoxMenuIcon.d.ts

@@ -5,19 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { TranslateWithId } from '../../types/common';
 export type ListBoxMenuIconTranslationKey = 'close.menu' | 'open.menu';
-export interface ListBoxMenuIconProps {
+export interface ListBoxMenuIconProps extends TranslateWithId<ListBoxMenuIconTranslationKey> {
     /**
      * Specify whether the menu is currently open, which will influence the
      * direction of the menu icon
      */
     isOpen: boolean;
-    /**
-     * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in a ListBoxMenuIconTranslationKey and should
-     * return a string message for that given message id.
-     */
-    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
 }
 export type ListBoxMenuIconComponent = React.FC<ListBoxMenuIconProps>;
 /**

package/es/components/ListBox/ListBoxSelection.d.ts

@@ -6,7 +6,8 @@
  */
 import React from 'react';
 import { KeyboardEvent, MouseEvent } from 'react';
-export interface ListBoxSelectionProps {
+import { TranslateWithId } from '../../types/common';
+export interface ListBoxSelectionProps extends TranslateWithId<TranslationKey> {
     /**
      * Specify a function to be invoked when a user interacts with the clear
      * selection element.
@@ -30,18 +31,16 @@ export interface ListBoxSelectionProps {
      * whether the selection should display a badge or a single clear icon.
      */
     selectionCount?: number;
-    /**
-     * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in an id defined in `translationIds` and should
-     * return a string message for that given message id.
-     */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
 }
 export type ListBoxSelectionComponent = React.FC<ListBoxSelectionProps>;
 export declare const translationIds: {
-    'clear.all': string;
-    'clear.selection': string;
+    readonly 'clear.all': "clear.all";
+    readonly 'clear.selection': "clear.selection";
 };
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one

package/es/components/ListBox/ListBoxSelection.js

@@ -16,6 +16,11 @@ const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationIds['clear.all']]: 'Clear all selected items',
   [translationIds['clear.selection']]: 'Clear selected item'

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.d.ts

@@ -7,7 +7,16 @@
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
-export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType> {
+import { TranslateWithId } from '../../types/common';
+/**
+ * Message ids that will be passed to translateWithId().
+ * Combination of message ids from ListBox/next/ListBoxSelection.js and
+ * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
+ * because those components aren't Typescript.  (If you try, TranslationKey
+ * ends up just being defined as "string".)
+ */
+type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<TranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated
@@ -154,10 +163,6 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
     type?: 'default' | 'inline';
     /**
      * Specify title to show title on hover

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -9,9 +9,9 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 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';
@@ -52,6 +52,15 @@ const {
   DropdownKeyDownBackspace,
   FunctionRemoveSelectedItem
 } = useMultipleSelection.stateChangeTypes;
+
+/**
+ * Message ids that will be passed to translateWithId().
+ * Combination of message ids from ListBox/next/ListBoxSelection.js and
+ * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
+ * because those components aren't Typescript.  (If you try, TranslationKey
+ * ends up just being defined as "string".)
+ */
+
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     autoAlign = false,
@@ -460,9 +469,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, getMenuProps, refs.setFloating]);
   const handleFocus = evt => {
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);
@@ -488,6 +501,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 +510,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 +551,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.d.ts

@@ -9,11 +9,11 @@ import React, { ReactNode } from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
-import type { InternationalProps } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
-export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
+export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by

package/es/components/MultiSelect/MultiSelect.js

@@ -9,14 +9,14 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import { useSelect } from 'downshift';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 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/NumberInput/NumberInput.d.ts

@@ -5,12 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+import { TranslateWithId } from '../../types/common';
 export declare const translationIds: {
-    'increment.number': string;
-    'decrement.number': string;
+    readonly 'increment.number': "increment.number";
+    readonly 'decrement.number': "decrement.number";
 };
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
 type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
     /**
      * `true` to allow empty string.
      */
@@ -115,10 +120,6 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
     step?: number;
-    /**
-     * Provide custom text for the component for each translation id
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify the value of the input
      */

package/es/components/NumberInput/NumberInput.js

@@ -24,6 +24,11 @@ const translationIds = {
   'increment.number': 'increment.number',
   'decrement.number': 'decrement.number'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'

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/PaginationNav/PaginationNav.d.ts

@@ -5,7 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.pagination-nav.next': "Next";
+    readonly 'carbon.pagination-nav.previous': "Previous";
+    readonly 'carbon.pagination-nav.item': "Page";
+    readonly 'carbon.pagination-nav.active': "Active";
+    readonly 'carbon.pagination-nav.of': "of";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
+interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
     /**
      * Additional CSS class names.
      */
@@ -35,11 +47,6 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      * The total number of items.
      */
     totalItems?: number;
-    /**
-     * Specify a custom translation function that takes in a message identifier
-     * and returns the localized string for the message
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
 export default PaginationNav;

package/es/components/PaginationNav/PaginationNav.js

@@ -21,6 +21,11 @@ const translationIds = {
   'carbon.pagination-nav.active': 'Active',
   'carbon.pagination-nav.of': 'of'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return translationIds[messageId];
 }

package/es/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -6,6 +6,17 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import { TranslateWithId } from '../../types/common';
+declare const defaultTranslations: {
+    readonly 'carbon.progress-step.complete': "Complete";
+    readonly 'carbon.progress-step.incomplete': "Incomplete";
+    readonly 'carbon.progress-step.current': "Current";
+    readonly 'carbon.progress-step.invalid': "Invalid";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof defaultTranslations;
 export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
     /**
      * Provide `<ProgressStep>` components to be rendered in the
@@ -63,7 +74,7 @@ declare namespace ProgressIndicator {
         vertical: PropTypes.Requireable<boolean>;
     };
 }
-export interface ProgressStepProps {
+export interface ProgressStepProps extends TranslateWithId<TranslationKey> {
     /**
      * Provide an optional className to be applied to the containing `<li>` node
      */
@@ -112,11 +123,6 @@ export interface ProgressStepProps {
      * The ID of the tooltip content.
      */
     tooltipId?: string;
-    /**
-     * Optional method that takes in a message id and returns an
-     * internationalized string.
-     */
-    translateWithId?: (id: string) => string;
 }
 declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressStep {

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -22,6 +22,11 @@ const defaultTranslations = {
   'carbon.progress-step.current': 'Current',
   'carbon.progress-step.invalid': 'Invalid'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return defaultTranslations[messageId];
 }

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/Slider/Slider.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly autoCorrectAnnouncement: "carbon.slider.auto-correct-announcement";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = (typeof translationIds)[keyof typeof translationIds];
 /**
  * Distinguish two handles by lower and upper positions.
  */
@@ -14,7 +22,9 @@ declare enum HandlePosition {
     UPPER = "upper"
 }
 type ExcludedAttributes = 'onChange' | 'onBlur';
-export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
+    correctedValue?: string;
+}> {
     /**
      * The `ariaLabel` for the `<input>`.
      */
@@ -136,14 +146,6 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * which will be `(max - min) / stepMultiplier`.
      */
     stepMultiplier?: number;
-    /**
-     * Supply a method to translate internal strings with your i18n tool of
-     * choice. Translation keys are available on the `translationIds` field for
-     * this component.
-     */
-    translateWithId?: (translationId: string, translationState: {
-        correctedValue?: string;
-    }) => string;
     /**
      * The value of the slider. When there are two handles, value is the lower
      * bound.

package/es/components/Slider/Slider.js

@@ -72,8 +72,13 @@ ThumbWrapper.propTypes = {
 const translationIds = {
   autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(translationId, translationState) {
-  if (translationId === translationIds.autoCorrectAnnouncement && translationState?.correctedValue) {
+  if (translationState?.correctedValue) {
     const {
       correctedValue
     } = translationState;

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(() => {