@carbon/react 1.63.0 → 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,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/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,19 +318,25 @@ 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({
-    ...downshiftProps,
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
@@ -350,13 +357,45 @@ const ComboBox = /*#__PURE__*/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
   });
+  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),
@@ -429,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();
@@ -571,9 +608,28 @@ ComboBox.propTypes = {
    */
   disabled: PropTypes.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.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,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/es/components/Dropdown/Dropdown.js

@@ -22,10 +22,6 @@ import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
-  ToggleButtonKeyDownArrowDown,
-  ToggleButtonKeyDownArrowUp,
-  ToggleButtonKeyDownHome,
-  ToggleButtonKeyDownEnd,
   ItemMouseMove,
   MenuMouseLeave
 } = useSelect.stateChangeTypes;
@@ -113,7 +109,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     isFluid
   } = useContext(FormContext);
   const selectProps = {
-    ...downshiftProps,
     items,
     itemToString,
     initialSelectedItem,
@@ -122,28 +117,31 @@ const Dropdown = /*#__PURE__*/React__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();
   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 {
@@ -208,10 +206,10 @@ const Dropdown = /*#__PURE__*/React__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
@@ -362,7 +360,12 @@ Dropdown.propTypes = {
    */
   disabled: PropTypes.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.object,
   /**

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -65,7 +65,12 @@ FluidMultiSelect.propTypes = {
    */
   disabled: PropTypes.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.object,
   /**

package/es/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/es/components/MultiSelect/FilterableMultiSelect.js

@@ -348,7 +348,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   const {
     getDropdownProps
   } = useMultipleSelection({
-    ...downshiftProps,
     activeIndex: highlightedIndex,
     initialSelectedItems,
     selectedItems: controlledSelectedItems,
@@ -364,7 +363,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             break;
           }
       }
-    }
+    },
+    ...downshiftProps
   });
   useEffect(() => {
     if (isOpen && !isMenuOpen) {
@@ -622,7 +622,12 @@ FilterableMultiSelect.propTypes = {
    */
   disabled: PropTypes.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.shape(Downshift.propTypes),

package/es/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/es/components/MultiSelect/MultiSelect.js

@@ -166,7 +166,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     });
   }, [items]);
   const selectProps = {
-    ...downshiftProps,
     stateReducer,
     isOpen,
     itemToString: filteredItems => {
@@ -178,7 +177,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     items: filteredItems,
     isItemDisabled(item, _index) {
       return item.disabled;
-    }
+    },
+    ...downshiftProps
   };
   const {
     getToggleButtonProps,
@@ -518,7 +518,12 @@ MultiSelect.propTypes = {
    */
   disabled: PropTypes.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.object,
   /**

package/es/internal/useId.js

@@ -10,49 +10,70 @@ import setupGetInstanceId from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
 
-// This file was heavily inspired by Reach UI and their work on their auto-id
-const getId = setupGetInstanceId();
+// 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
+};
+const instanceId = setupGetInstanceId();
 const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : 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();
+function useCompatibleId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix();
   const [id, setId] = 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]);
   useEffect(() => {
     if (serverHandoffCompleted === false) {
       serverHandoffCompleted = true;
     }
   }, []);
-  if (typeof React__default['useId'] === 'function') {
-    const id = nativeReactUseId(_prefix, prefix);
-    return id;
-  }
   return id;
 }
-function nativeReactUseId(_prefix, prefix) {
-  const getId = React__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();
+  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}
  */
@@ -61,4 +82,4 @@ function useFallbackId(id) {
   return id ?? fallback;
 }
 
-export { useFallbackId, useId };
+export { useCompatibleId, useFallbackId, useId };