@carbon/react 1.63.0 → 1.63.2

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,9 +57,27 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift
+     * 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,19 +328,25 @@ 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({
-    ...downshiftProps,
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
@@ -360,13 +367,45 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         selectedItem
       });
     },
+    onHighlightedIndexChange: _ref5 => {
+      let {
+        highlightedIndex
+      } = _ref5;
+      if (highlightedIndex > -1 && typeof window !== undefined) {
+        const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+        const highlightedItem = itemArray[highlightedIndex];
+        if (highlightedItem) {
+          highlightedItem.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+        }
+      }
+    },
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     stateReducer,
     isItemDisabled(item, _index) {
       return item.disabled;
-    }
+    },
+    ...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),
@@ -439,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();
@@ -581,9 +618,28 @@ ComboBox.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift
+   * 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,

package/lib/components/DatePicker/DatePicker.js

@@ -185,25 +185,42 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }, []);
   const lastStartValue = React.useRef('');
+  const [calendarCloseEvent, setCalendarCloseEvent] = React.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 = React.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
     });
   };
+  React.useEffect(() => {
+    if (calendarCloseEvent) {
+      const {
+        selectedDates,
+        dateStr,
+        instance
+      } = calendarCloseEvent;
+      handleCalendarClose(selectedDates, dateStr, instance);
+      setCalendarCloseEvent(null);
+    }
+  }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = React.useRef(null);
   const calendarRef = React.useRef(null);
   const savedOnChange = useSavedCallback.useSavedCallback(onChange);
-  const savedOnClose = useSavedCallback.useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
   const savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
   const datePickerClasses = cx__default["default"](`${prefix}--date-picker`, {
     [`${prefix}--date-picker--short`]: short,
@@ -321,6 +338,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     } = endInputField;
     const flatpickerconfig = {
       inline: inline ?? false,
+      onClose: onCalendarClose,
       disableMobile: true,
       defaultDate: value,
       closeOnSelect: closeOnSelect,
@@ -355,7 +373,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
           savedOnChange(...arguments);
         }
       },
-      onClose: savedOnClose,
       onReady: onHook,
       onMonthChange: onHook,
       onYearChange: onHook,
@@ -452,7 +469,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     };
     // 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()
@@ -499,6 +516,40 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
+  React.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]);
+  React.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]);
   React.useEffect(() => {
     if (calendarRef?.current?.set) {
       if (value !== undefined) {

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

@@ -22,6 +22,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.
    */
@@ -115,6 +124,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.removeEventListener('blur', handleBlur, true);
     }
     inputFrom.removeEventListener('keydown', handleKeydown, true);
+    document.removeEventListener('click', handleClickOutside, true);
   };
 
   /**
@@ -131,6 +141,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       inputTo.addEventListener('keydown', handleKeydown, true);
       inputTo.addEventListener('blur', handleBlur, true);
     }
+    document.addEventListener('click', handleClickOutside, true);
   };
 
   /**

package/lib/components/Dropdown/Dropdown.d.ts

@@ -36,7 +36,12 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift
+     * 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/lib/components/Dropdown/Dropdown.js

@@ -32,10 +32,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const {
-  ToggleButtonKeyDownArrowDown,
-  ToggleButtonKeyDownArrowUp,
-  ToggleButtonKeyDownHome,
-  ToggleButtonKeyDownEnd,
   ItemMouseMove,
   MenuMouseLeave
 } = Downshift.useSelect.stateChangeTypes;
@@ -123,7 +119,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     isFluid
   } = React.useContext(FormContext.FormContext);
   const selectProps = {
-    ...downshiftProps,
     items,
     itemToString,
     initialSelectedItem,
@@ -132,28 +127,31 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     isItemDisabled(item, _index) {
       const isObject = item !== null && typeof item === 'object';
       return isObject && 'disabled' in item && item.disabled === true;
-    }
+    },
+    onHighlightedIndexChange: _ref3 => {
+      let {
+        highlightedIndex
+      } = _ref3;
+      if (highlightedIndex > -1 && typeof window !== undefined) {
+        const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+        const highlightedItem = itemArray[highlightedIndex];
+        if (highlightedItem) {
+          highlightedItem.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+        }
+      }
+    },
+    ...downshiftProps
   };
   const dropdownInstanceId = useId.useId();
   function stateReducer(state, actionAndChanges) {
     const {
       changes,
-      props,
       type
     } = actionAndChanges;
-    const {
-      highlightedIndex
-    } = changes;
     switch (type) {
-      case ToggleButtonKeyDownArrowDown:
-      case ToggleButtonKeyDownArrowUp:
-      case ToggleButtonKeyDownHome:
-      case ToggleButtonKeyDownEnd:
-        if (highlightedIndex > -1) {
-          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
-          props.scrollIntoView(itemArray[highlightedIndex]);
-        }
-        return changes;
       case ItemMouseMove:
       case MenuMouseLeave:
         return {
@@ -218,10 +216,10 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     id: helperId,
     className: helperClasses
   }, helperText) : null;
-  function onSelectedItemChange(_ref3) {
+  function onSelectedItemChange(_ref4) {
     let {
       selectedItem
-    } = _ref3;
+    } = _ref4;
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
@@ -372,7 +370,12 @@ Dropdown.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift
+   * 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,
   /**

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -75,7 +75,12 @@ FluidMultiSelect.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift
+   * 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,
   /**

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

@@ -48,7 +48,12 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift
+     * 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/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -360,7 +360,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   const {
     getDropdownProps
   } = Downshift.useMultipleSelection({
-    ...downshiftProps,
     activeIndex: highlightedIndex,
     initialSelectedItems,
     selectedItems: controlledSelectedItems,
@@ -376,7 +375,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             break;
           }
       }
-    }
+    },
+    ...downshiftProps
   });
   React.useEffect(() => {
     if (isOpen && !isMenuOpen) {
@@ -634,7 +634,12 @@ FilterableMultiSelect.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift
+   * 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__default["default"].shape(Downshift__default["default"].propTypes),

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -42,7 +42,12 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     disabled?: ListBoxProps['disabled'];
     /**
-     * Additional props passed to Downshift
+     * 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/lib/components/MultiSelect/MultiSelect.js

@@ -177,7 +177,6 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     });
   }, [items]);
   const selectProps = {
-    ...downshiftProps,
     stateReducer,
     isOpen,
     itemToString: filteredItems => {
@@ -189,7 +188,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     items: filteredItems,
     isItemDisabled(item, _index) {
       return item.disabled;
-    }
+    },
+    ...downshiftProps
   };
   const {
     getToggleButtonProps,
@@ -529,7 +529,12 @@ MultiSelect.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift
+   * 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,
   /**

package/lib/internal/useId.js

@@ -18,49 +18,70 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// This file was heavily inspired by Reach UI and their work on their auto-id
-const getId = setupGetInstanceId["default"]();
+// This file was heavily inspired by:
+
+// This tricks bundlers so they can't statically analyze this and produce
+// compilation warnings/errors.
+// https://github.com/webpack/webpack/issues/14814
+// https://github.com/mui/material-ui/issues/41190
+const _React = {
+  ...React__default["default"]
+};
+const instanceId = setupGetInstanceId["default"]();
 const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
 let serverHandoffCompleted = false;
+const defaultId = 'id';
 
 /**
- * Generate a unique ID with an optional prefix prepended to it
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
  * @param {string} [prefix]
  * @returns {string}
  */
-function useId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
-  const _prefix = useIdPrefix.useIdPrefix();
+function useCompatibleId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix.useIdPrefix();
   const [id, setId] = React.useState(() => {
     if (serverHandoffCompleted) {
-      return `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`;
+      return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
     }
     return null;
   });
   useIsomorphicLayoutEffect(() => {
     if (id === null) {
-      setId(`${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`);
+      setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
     }
-  }, [getId]);
+  }, [instanceId]);
   React.useEffect(() => {
     if (serverHandoffCompleted === false) {
       serverHandoffCompleted = true;
     }
   }, []);
-  if (typeof React__default["default"]['useId'] === 'function') {
-    const id = nativeReactUseId(_prefix, prefix);
-    return id;
-  }
   return id;
 }
-function nativeReactUseId(_prefix, prefix) {
-  const getId = React__default["default"]['useId']();
-  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
-  return id;
+
+/**
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+function useReactId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix.useIdPrefix();
+  return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
 }
 
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ */
+const useId = _React.useId ? useReactId : useCompatibleId;
+
 /**
  * Generate a unique id if a given `id` is not provided
+ * This is an internal utility, not intended for public usage.
  * @param {string|undefined} id
  * @returns {string}
  */
@@ -69,5 +90,6 @@ function useFallbackId(id) {
   return id ?? fallback;
 }
 
+exports.useCompatibleId = useCompatibleId;
 exports.useFallbackId = useFallbackId;
 exports.useId = useId;