@carbon/react 1.63.1 → 1.63.2

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,
@@ -317,17 +318,24 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }
   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/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,

package/es/components/DatePicker/DatePicker.js

@@ -173,25 +173,42 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, []);
   const lastStartValue = useRef('');
+  const [calendarCloseEvent, setCalendarCloseEvent] = useState(null);
 
   // fix datepicker deleting the selectedDate when the calendar closes
-  const onCalendarClose = (selectedDates, dateStr) => {
-    endInputField?.current?.focus();
-    calendarRef?.current?.calendarContainer?.classList.remove('open');
-    setTimeout(() => {
-      if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
-        startInputField.current.value = lastStartValue.current;
-        calendarRef.current.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
-      }
-      if (onClose) {
-        onClose(calendarRef.current.selectedDates, dateStr, calendarRef.current);
-      }
+  const handleCalendarClose = useCallback((selectedDates, dateStr, instance) => {
+    if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
+      startInputField.current.value = lastStartValue.current;
+      calendarRef.current.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
+    }
+    if (onClose) {
+      onClose(selectedDates, dateStr, instance);
+    }
+  }, [onClose]);
+  const onCalendarClose = (selectedDates, dateStr, instance, e) => {
+    if (e && e.type === 'clickOutside') {
+      return;
+    }
+    setCalendarCloseEvent({
+      selectedDates,
+      dateStr,
+      instance
     });
   };
+  useEffect(() => {
+    if (calendarCloseEvent) {
+      const {
+        selectedDates,
+        dateStr,
+        instance
+      } = calendarCloseEvent;
+      handleCalendarClose(selectedDates, dateStr, instance);
+      setCalendarCloseEvent(null);
+    }
+  }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = useRef(null);
   const calendarRef = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
-  const savedOnClose = useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
   const savedOnOpen = useSavedCallback(onOpen);
   const datePickerClasses = cx(`${prefix}--date-picker`, {
     [`${prefix}--date-picker--short`]: short,
@@ -309,6 +326,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     } = endInputField;
     const flatpickerconfig = {
       inline: inline ?? false,
+      onClose: onCalendarClose,
       disableMobile: true,
       defaultDate: value,
       closeOnSelect: closeOnSelect,
@@ -343,7 +361,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
           savedOnChange(...arguments);
         }
       },
-      onClose: savedOnClose,
       onReady: onHook,
       onMonthChange: onHook,
       onYearChange: onHook,
@@ -440,7 +457,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnClose, savedOnOpen, readOnly, closeOnSelect, hasInput]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
@@ -487,6 +504,40 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
+  useEffect(() => {
+    //when value prop is set to empty, this clears the faltpicker's calendar instance and text input
+    if (value === '') {
+      calendarRef.current?.clear();
+      if (startInputField.current) {
+        startInputField.current.value = '';
+      }
+      if (endInputField.current) {
+        endInputField.current.value = '';
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    const handleMouseDown = event => {
+      if (calendarRef.current && calendarRef.current.isOpen && !calendarRef.current.calendarContainer.contains(event.target) && !startInputField.current.contains(event.target) && !endInputField.current?.contains(event.target)) {
+        // Close the calendar immediately on mousedown
+        closeCalendar();
+      }
+    };
+    const closeCalendar = event => {
+      calendarRef.current.close();
+      // Remove focus from endDate calendar input
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+      onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
+        type: 'clickOutside'
+      });
+    };
+    document.addEventListener('mousedown', handleMouseDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true);
+    };
+  }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   useEffect(() => {
     if (calendarRef?.current?.set) {
       if (value !== undefined) {

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -18,6 +18,15 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     inputTo,
     lastStartValue
   } = config;
+  /**
+   * Handles `click` outside to close calendar
+   */
+  const handleClickOutside = event => {
+    if (!fp.isOpen || fp.calendarContainer.contains(event.target) || event.target === inputFrom || event.target === inputTo) {
+      return;
+    }
+    fp.close();
+  };
   /**
    * Handles `keydown` event.
    */
@@ -111,6 +120,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.removeEventListener('blur', handleBlur, true);
     }
     inputFrom.removeEventListener('keydown', handleKeydown, true);
+    document.removeEventListener('click', handleClickOutside, true);
   };
 
   /**
@@ -127,6 +137,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.addEventListener('keydown', handleKeydown, true);
       inputTo.addEventListener('blur', handleBlur, true);
     }
+    document.addEventListener('click', handleClickOutside, true);
   };
 
   /**

package/es/components/Dropdown/Dropdown.d.ts

@@ -36,10 +36,12 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     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<UseSelectProps<ItemType>>;
     /**

package/es/components/Dropdown/Dropdown.js

@@ -360,10 +360,12 @@ Dropdown.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,
   /**

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -65,10 +65,12 @@ FluidMultiSelect.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,
   /**

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -48,10 +48,12 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     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?: UseMultipleSelectionProps<ItemType>;
     /**

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -622,10 +622,12 @@ FilterableMultiSelect.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.
    */
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -42,10 +42,12 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     disabled?: ListBoxProps['disabled'];
     /**
-     * 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<UseSelectProps<ItemType>>;
     /**

package/es/components/MultiSelect/MultiSelect.js

@@ -518,10 +518,12 @@ MultiSelect.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,
   /**

package/lib/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/lib/components/ComboBox/ComboBox.js

@@ -109,6 +109,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: containerClassName,
     direction = 'bottom',
     disabled = false,
+    downshiftActions,
     downshiftProps,
     helperText,
     id,
@@ -327,17 +328,24 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
   }
   const {
+    // Prop getters
     getInputProps,
     getItemProps,
     getLabelProps,
     getMenuProps,
     getToggleButtonProps,
+    // State
     isOpen,
     highlightedIndex,
-    selectItem,
     selectedItem,
-    toggleMenu,
-    setHighlightedIndex
+    // Actions
+    closeMenu,
+    openMenu,
+    reset,
+    selectItem,
+    setHighlightedIndex,
+    setInputValue: downshiftSetInputValue,
+    toggleMenu
   } = Downshift.useCombobox({
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
@@ -382,6 +390,22 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     ...downshiftProps
   });
+  React.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),
@@ -454,9 +478,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, getInputProps({
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
-    ref: {
-      ...mergeRefs["default"](textInput, ref)
-    },
+    ref: mergeRefs["default"](textInput, ref),
     onKeyDown: event => {
       if (match.match(event, keys.Space)) {
         event.stopPropagation();
@@ -596,12 +618,28 @@ ComboBox.propTypes = {
    */
   disabled: PropTypes__default["default"].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__default["default"].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__default["default"].exact({
+    current: PropTypes__default["default"].any
+  }),
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/lib/components/DataTable/TableSelectRow.js

@@ -15,6 +15,7 @@ var React = require('react');
 var cx = require('classnames');
 var InlineCheckbox = require('../InlineCheckbox/InlineCheckbox.js');
 var RadioButton = require('../RadioButton/RadioButton.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 
@@ -38,7 +39,7 @@ const TableSelectRow = _ref => {
     className
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const uniqueNameId = React.useId();
+  const uniqueNameId = useId.useId();
   const selectionInputProps = {
     id,
     name: name ? name : uniqueNameId,

package/lib/components/DataTable/TableToolbarSearch.js

@@ -64,7 +64,7 @@ const TableToolbarSearch = _ref => {
   const [expandedState, setExpandedState] = React.useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = React.useState(defaultValue || '');
-  const uniqueId = useId.useId();
+  const uniqueId = useId.useId('table-toolbar-search');
   const [focusTarget, setFocusTarget] = React.useState(null);
   const prefix = usePrefix.usePrefix();
   React.useEffect(() => {
@@ -111,7 +111,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,