@carbon/react 1.63.0 → 1.63.1

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

@@ -57,7 +57,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * to shield you from potentially breaking changes.
      */
     downshiftProps?: Partial<UseComboboxProps<ItemType>>;
     /**

package/es/components/ComboBox/ComboBox.js

@@ -329,7 +329,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     toggleMenu,
     setHighlightedIndex
   } = useCombobox({
-    ...downshiftProps,
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
@@ -350,12 +349,28 @@ 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
   });
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
@@ -571,7 +586,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
   /**

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

@@ -36,7 +36,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * 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,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
   /**

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -65,7 +65,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
   /**

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

@@ -48,7 +48,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * 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,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),

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

@@ -42,7 +42,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * 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,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * 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 };

package/lib/components/ComboBox/ComboBox.d.ts

@@ -57,7 +57,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * to shield you from potentially breaking changes.
      */
     downshiftProps?: Partial<UseComboboxProps<ItemType>>;
     /**

package/lib/components/ComboBox/ComboBox.js

@@ -339,7 +339,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     toggleMenu,
     setHighlightedIndex
   } = Downshift.useCombobox({
-    ...downshiftProps,
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
@@ -360,12 +359,28 @@ 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
   });
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
@@ -581,7 +596,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**

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

@@ -36,7 +36,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * 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,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -75,7 +75,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**

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

@@ -48,7 +48,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * 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,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * 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,10 @@ 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
+     * internals are subject to change, and in some cases they can not be shimmed
+     * 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,10 @@ 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
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**