@carbon/react 1.63.1 → 1.64.0-rc.0

package/es/components/{Slug → AILabel}/index.js

@@ -14,26 +14,26 @@ import { ToggletipContent, ToggletipActions, Toggletip, ToggletipButton } from '
 import { IconButton } from '../IconButton/index.js';
 import { Undo } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
+import deprecate from '../../prop-types/deprecate.js';
 
 var _Undo;
-const SlugContent = /*#__PURE__*/React__default.forwardRef(function SlugContent(_ref, ref) {
+const AILabelContent = /*#__PURE__*/React__default.forwardRef(function AILabelContent(_ref, ref) {
   let {
     children,
     className
   } = _ref;
   const prefix = usePrefix();
-  const hasSlugActions = React__default.Children.toArray(children).some(child => child.type?.displayName === 'SlugActions');
-  const slugContentClasses = cx(className, {
+  const hasAILabelActions = React__default.Children.toArray(children).some(child => child.type?.displayName === 'AILabelActions');
+  const aiLabelContentClasses = cx(className, {
     [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasSlugActions
+    [`${prefix}--slug-content--with-actions`]: hasAILabelActions
   });
   return /*#__PURE__*/React__default.createElement(ToggletipContent, {
-    className: slugContentClasses,
-    ref: ref
+    className: aiLabelContentClasses
   }, children);
 });
-SlugContent.displayName = 'SlugContent';
-SlugContent.propTypes = {
+AILabelContent.displayName = 'AILabelContent';
+AILabelContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
    */
@@ -43,22 +43,22 @@ SlugContent.propTypes = {
    */
   className: PropTypes.string
 };
-const SlugActions = /*#__PURE__*/React__default.forwardRef(function SlugActions(_ref2, ref) {
+const AILabelActions = /*#__PURE__*/React__default.forwardRef(function AILabelActions(_ref2, ref) {
   let {
     children,
     className
   } = _ref2;
   const prefix = usePrefix();
-  const slugActionBarClasses = cx(className, {
+  const aiLabelActionsClasses = cx(className, {
     [`${prefix}--slug-actions`]: true
   });
   return /*#__PURE__*/React__default.createElement(ToggletipActions, {
-    className: slugActionBarClasses,
+    className: aiLabelActionsClasses,
     ref: ref
   }, children);
 });
-SlugActions.displayName = 'SlugActions';
-SlugActions.propTypes = {
+AILabelActions.displayName = 'AILabelActions';
+AILabelActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar
    */
@@ -68,10 +68,11 @@ SlugActions.propTypes = {
    */
   className: PropTypes.string
 };
-const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
+const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, ref) {
   let {
     aiText = 'AI',
     aiTextLabel,
+    textLabel,
     align,
     autoAlign = true,
     children,
@@ -81,29 +82,30 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     revertActive,
     revertLabel = 'Revert to AI input',
     slugLabel = 'Show information',
+    ['aria-label']: ariaLabel = 'Show information',
     size = 'xs',
     ...rest
   } = _ref3;
   const prefix = usePrefix();
-  const id = useId('slug');
-  const slugClasses = cx(className, {
+  const id = useId('AILabel');
+  const aiLabelClasses = cx(className, {
     [`${prefix}--slug`]: true,
     [`${prefix}--slug--revert`]: revertActive
   });
-  const slugButtonClasses = cx({
+  const aiLabelButtonClasses = cx({
     [`${prefix}--slug__button`]: true,
     [`${prefix}--slug__button--${size}`]: size,
     [`${prefix}--slug__button--${kind}`]: kind,
-    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && aiTextLabel
+    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
   });
   const handleOnRevertClick = evt => {
     if (onRevertClick) {
       onRevertClick(evt);
     }
   };
-  const ariaLabel = !aiTextLabel ? `${aiText} - ${slugLabel}` : `${aiText} - ${aiTextLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: slugClasses,
+    className: aiLabelClasses,
     ref: ref,
     id: id
   }, revertActive ? /*#__PURE__*/React__default.createElement(IconButton, _extends({
@@ -115,24 +117,29 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     align: align,
     autoAlign: autoAlign
   }, rest), /*#__PURE__*/React__default.createElement(ToggletipButton, {
-    className: slugButtonClasses,
-    label: ariaLabel
+    className: aiLabelButtonClasses,
+    label: ariaLabelText
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slug__text`
-  }, aiText), aiTextLabel && /*#__PURE__*/React__default.createElement("span", {
+  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slug__additional-text`
-  }, aiTextLabel)), children));
+  }, aiTextLabel || textLabel)), children));
 });
-Slug.displayName = 'Slug';
-Slug.propTypes = {
+AILabel.displayName = 'AILabel';
+AILabel.propTypes = {
+  /**
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
+   */
+  AILabelContent: PropTypes.node,
   /**
    * Specify the correct translation of the AI text
    */
   aiText: PropTypes.string,
   /**
+   * @deprecated
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  aiTextLabel: PropTypes.string,
+  aiTextLabel: deprecate(PropTypes.string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
   /**
    * Specify how the popover should align with the button
    */
@@ -153,20 +160,24 @@ Slug.propTypes = {
   'right-end', 'right-top',
   // deprecated use right-start instead
   'right-start']),
+  /**
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
+   */
+  'aria-label': PropTypes.string,
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes.bool,
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
   children: PropTypes.node,
   /**
-   * Specify an optional className to be added to the AI slug
+   * Specify an optional className to be added to the `AILabel`
    */
   className: PropTypes.string,
   /**
-   * Specify the type of Slug, from the following list of types:
+   * Specify the type of `AILabel`, from the following list of types:
    */
   kind: PropTypes.oneOf(['default', 'inline']),
   /**
@@ -186,13 +197,14 @@ Slug.propTypes = {
    */
   size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * @deprecated
+   * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  slugContent: PropTypes.node,
+  slugLabel: deprecate(PropTypes.string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
   /**
-   * Specify the text that will be provided to the aria-label of the `Slug` button
+   * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  slugLabel: PropTypes.string
+  textLabel: PropTypes.string
 };
 
-export { Slug, SlugActions, SlugContent };
+export { AILabel, AILabelActions, AILabelContent };

package/es/components/{AiSkeleton/AiSkeletonIcon.d.ts → AISkeleton/AISkeletonIcon.d.ts}

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface AiSkeletonIconProps {
+interface AISkeletonIconProps {
     /**
      * Specify an optional className to add.
      */
@@ -16,8 +16,8 @@ interface AiSkeletonIconProps {
      */
     style?: React.CSSProperties;
 }
-declare const AiSkeletonIcon: {
-    ({ className, ...rest }: AiSkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonIcon: {
+    ({ className, ...rest }: AISkeletonIconProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
@@ -29,4 +29,4 @@ declare const AiSkeletonIcon: {
         style: PropTypes.Requireable<object>;
     };
 };
-export default AiSkeletonIcon;
+export default AISkeletonIcon;

package/es/components/{AiSkeleton/AiSkeletonIcon.js → AISkeleton/AISkeletonIcon.js}

@@ -12,20 +12,20 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonIcon from '../SkeletonIcon/SkeletonIcon.js';
 
-const AiSkeletonIcon = _ref => {
+const AISkeletonIcon = _ref => {
   let {
     className,
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const AiSkeletonIconClasses = cx(className, {
+  const AISkeletonIconClasses = cx(className, {
     [`${prefix}--skeleton__icon--ai`]: true
   });
   return /*#__PURE__*/React__default.createElement(SkeletonIcon, _extends({
-    className: AiSkeletonIconClasses
+    className: AISkeletonIconClasses
   }, rest));
 };
-AiSkeletonIcon.propTypes = {
+AISkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
@@ -36,4 +36,4 @@ AiSkeletonIcon.propTypes = {
   style: PropTypes.object
 };
 
-export { AiSkeletonIcon as default };
+export { AISkeletonIcon as default };

package/es/components/{AiSkeleton/AiSkeletonPlaceholder.d.ts → AISkeleton/AISkeletonPlaceholder.d.ts}

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface AiSkeletonPlaceholderProps {
+export interface AISkeletonPlaceholderProps {
     /**
      * Add a custom class to the component to set the height and width
      */
     className?: string;
 }
-declare const AiSkeletonPlaceholder: {
-    ({ className, ...other }: AiSkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonPlaceholder: {
+    ({ className, ...other }: AISkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Add a custom class to the component
@@ -21,4 +21,4 @@ declare const AiSkeletonPlaceholder: {
         className: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonPlaceholder;
+export default AISkeletonPlaceholder;

package/es/components/{AiSkeleton/AiSkeletonPlaceholder.js → AISkeleton/AISkeletonPlaceholder.js}

@@ -12,21 +12,21 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonPlaceholder from '../SkeletonPlaceholder/SkeletonPlaceholder.js';
 
-const AiSkeletonPlaceholder = _ref => {
+const AISkeletonPlaceholder = _ref => {
   let {
     className,
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const AiSkeletonPlaceholderClasses = cx({
+  const AISkeletonPlaceholderClasses = cx({
     className,
     [`${prefix}--skeleton__placeholder--ai`]: true
   }, className);
   return /*#__PURE__*/React__default.createElement(SkeletonPlaceholder, _extends({
-    className: AiSkeletonPlaceholderClasses
+    className: AISkeletonPlaceholderClasses
   }, other));
 };
-AiSkeletonPlaceholder.propTypes = {
+AISkeletonPlaceholder.propTypes = {
   /**
    * Add a custom class to the component
    * to set the height and width
@@ -34,4 +34,4 @@ AiSkeletonPlaceholder.propTypes = {
   className: PropTypes.string
 };
 
-export { AiSkeletonPlaceholder as default };
+export { AISkeletonPlaceholder as default };

package/es/components/{AiSkeleton/AiSkeletonText.d.ts → AISkeleton/AISkeletonText.d.ts}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface AiSkeletonTextProps {
+interface AISkeletonTextProps {
     /**
      * Specify an optional className to be applied to the container node.
      */
@@ -27,8 +27,8 @@ interface AiSkeletonTextProps {
      */
     width?: string;
 }
-declare const AiSkeletonText: {
-    ({ className, ...rest }: AiSkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+declare const AISkeletonText: {
+    ({ className, ...rest }: AISkeletonTextProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to be applied to the container node
@@ -52,4 +52,4 @@ declare const AiSkeletonText: {
         width: PropTypes.Requireable<string>;
     };
 };
-export default AiSkeletonText;
+export default AISkeletonText;

package/es/components/{AiSkeleton/AiSkeletonText.js → AISkeleton/AISkeletonText.js}

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import SkeletonText from '../SkeletonText/SkeletonText.js';
 
-const AiSkeletonText = _ref => {
+const AISkeletonText = _ref => {
   let {
     className,
     ...rest
@@ -25,7 +25,7 @@ const AiSkeletonText = _ref => {
     className: aiSkeletonTextClasses
   }, rest));
 };
-AiSkeletonText.propTypes = {
+AISkeletonText.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
@@ -48,4 +48,4 @@ AiSkeletonText.propTypes = {
   width: PropTypes.string
 };
 
-export { AiSkeletonText as default };
+export { AISkeletonText as default };

package/es/components/AISkeleton/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 AISkeletonPlaceholder from './AISkeletonPlaceholder';
+import AISkeletonIcon from './AISkeletonIcon';
+import AISkeletonText from './AISkeletonText';
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder };

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -48,7 +48,7 @@ const CheckboxGroup = _ref => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if ( /*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'Slug') {
+  if ( /*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/ComboBox/ComboBox.d.ts

@@ -4,8 +4,8 @@
  * 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 { UseComboboxProps } from 'downshift';
-import { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+import { UseComboboxProps, UseComboboxActions } from 'downshift';
+import React, { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
 import { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
@@ -57,12 +57,27 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift. Use with caution: anything you define
-     * here overrides the components' internal handling of that prop. Downshift
-     * internals are subject to change, and in some cases they can not be shimmed
-     * to shield you from potentially breaking changes.
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     *
      */
     downshiftProps?: Partial<UseComboboxProps<ItemType>>;
+    /**
+     * Provide a ref that will be mutated to contain an object of downshift
+     * action functions. These can be called to change the internal state of the
+     * downshift useCombobox hook.
+     *
+     * **Use with caution:** calling these actions modifies the internal state of
+     * downshift. It may conflict with or override the state management used within
+     * Combobox. Downshift APIs and internals are subject to change, and in some
+     * cases they can not be shimmed by Carbon to shield you from potentially breaking
+     * changes.
+     */
+    downshiftActions?: React.MutableRefObject<UseComboboxActions<ItemType> | undefined>;
     /**
      * Provide helper text that is used alongside the control label for
      * additional help

package/es/components/ComboBox/ComboBox.js

@@ -99,6 +99,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     className: containerClassName,
     direction = 'bottom',
     disabled = false,
+    downshiftActions,
     downshiftProps,
     helperText,
     id,
@@ -242,8 +243,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       case ToggleButtonClick:
         if (changes.isOpen && !changes.selectedItem) {
           return {
-            ...changes,
-            highlightedIndex: 0
+            ...changes
           };
         }
         return changes;
@@ -283,6 +283,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const showWarning = !invalid && warn;
   const className = cx(`${prefix}--combo-box`, {
+    [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly
@@ -303,7 +304,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   }]);
   const inputClasses = cx(`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
-    [`${prefix}--combo-box--input--focus`]: isFocused && !isFluid
+    [`${prefix}--combo-box--input--focus`]: isFocused
   });
 
   // needs to be Capitalized for react to render it correctly
@@ -311,23 +312,30 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
   }
   const {
+    // Prop getters
     getInputProps,
     getItemProps,
     getLabelProps,
     getMenuProps,
     getToggleButtonProps,
+    // State
     isOpen,
     highlightedIndex,
-    selectItem,
     selectedItem,
-    toggleMenu,
-    setHighlightedIndex
+    // Actions
+    closeMenu,
+    openMenu,
+    reset,
+    selectItem,
+    setHighlightedIndex,
+    setInputValue: downshiftSetInputValue,
+    toggleMenu
   } = useCombobox({
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
@@ -372,6 +380,22 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     },
     ...downshiftProps
   });
+  useEffect(() => {
+    // Used to expose the downshift actions to consumers for use with downshiftProps
+    // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
+    // A riff of https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509
+    if (downshiftActions) {
+      downshiftActions.current = {
+        closeMenu,
+        openMenu,
+        reset,
+        selectItem,
+        setHighlightedIndex,
+        setInputValue: downshiftSetInputValue,
+        toggleMenu
+      };
+    }
+  }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
     onClick: handleToggleClick(isOpen),
@@ -444,9 +468,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   }, getInputProps({
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
-    ref: {
-      ...mergeRefs(textInput, ref)
-    },
+    ref: mergeRefs(textInput, ref),
     onKeyDown: event => {
       if (match(event, Space)) {
         event.stopPropagation();
@@ -586,12 +608,28 @@ ComboBox.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Additional props passed to Downshift. Use with caution: anything you define
-   * here overrides the components' internal handling of that prop. Downshift
-   * internals are subject to change, and in some cases they can not be shimmed
-   * to shield you from potentially breaking changes.
+   * Additional props passed to Downshift.
+   *
+   * **Use with caution:** anything you define here overrides the components'
+   * internal handling of that prop. Downshift APIs and internals are subject to
+   * change, and in some cases they can not be shimmed by Carbon to shield you
+   * from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
+  /**
+   * Provide a ref that will be mutated to contain an object of downshift
+   * action functions. These can be called to change the internal state of the
+   * downshift useCombobox hook.
+   *
+   * **Use with caution:** calling these actions modifies the internal state of
+   * downshift. It may conflict with or override the state management used within
+   * Combobox. Downshift APIs and internals are subject to change, and in some
+   * cases they can not be shimmed by Carbon to shield you from potentially breaking
+   * changes.
+   */
+  downshiftActions: PropTypes.exact({
+    current: PropTypes.any
+  }),
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/es/components/ComposedModal/ComposedModal.js

@@ -246,7 +246,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
 
   // Slug is always size `sm`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm'
     });

package/es/components/DataTable/DataTable.js

@@ -15,7 +15,7 @@ import { getCellId } from './tools/cells.js';
 import denormalize from './tools/denormalize.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { defaultFilterRows } from './tools/filter.js';
-import setupGetInstanceId from './tools/instanceId.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { Table } from './Table.js';
 import TableActionList from './TableActionList.js';
 import TableBatchAction from './TableBatchAction.js';

package/es/components/DataTable/TableSelectRow.js

@@ -7,10 +7,11 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useId } from 'react';
+import React__default from 'react';
 import cx from 'classnames';
 import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
 import RadioButton from '../RadioButton/RadioButton.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 

package/es/components/DataTable/TableToolbarSearch.js

@@ -54,7 +54,7 @@ const TableToolbarSearch = _ref => {
   const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = useState(defaultValue || '');
-  const uniqueId = useId();
+  const uniqueId = useId('table-toolbar-search');
   const [focusTarget, setFocusTarget] = useState(null);
   const prefix = usePrefix();
   useEffect(() => {
@@ -101,7 +101,7 @@ const TableToolbarSearch = _ref => {
     disabled: disabled,
     className: searchClasses,
     value: value,
-    id: typeof id !== 'undefined' ? id : `table-toolbar-search-${uniqueId.toString()}`,
+    id: typeof id !== 'undefined' ? id : uniqueId,
     labelText: labelText || t('carbon.table.toolbar.search.label'),
     placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
     onChange: onChange,