@carbon/react 1.57.0 → 1.58.0

package/lib/components/ComboBox/ComboBox.js

@@ -23,8 +23,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
+var match = require('../../internal/keyboard/match.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
@@ -33,21 +33,19 @@ var keys = require('../../internal/keyboard/keys.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const {
-  keyDownArrowDown,
-  keyDownArrowUp,
-  keyDownEscape,
-  clickButton,
-  clickItem,
-  blurButton,
-  changeInput,
-  blurInput,
-  unknown
-} = Downshift__default["default"].stateChangeTypes;
+  InputBlur,
+  InputKeyDownEnter,
+  FunctionToggleMenu,
+  ToggleButtonClick,
+  ItemMouseMove,
+  InputKeyDownArrowUp,
+  InputKeyDownArrowDown,
+  MenuMouseLeave
+} = Downshift.useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
@@ -87,7 +85,7 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   const searchValue = inputValue.toLowerCase();
   for (let i = 0; i < items.length; i++) {
     const item = itemToString(items[i]).toLowerCase();
-    if (item.indexOf(searchValue) !== -1) {
+    if (!items[i]['disabled'] && item.indexOf(searchValue) !== -1) {
       return i;
     }
   }
@@ -95,7 +93,6 @@ const findHighlightedIndex = (_ref2, inputValue) => {
 };
 const getInstanceId = setupGetInstanceId["default"]();
 const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _Text;
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
@@ -117,7 +114,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onToggleClick,
     placeholder,
     readOnly,
-    selectedItem,
+    selectedItem: selectedItemProp,
     shouldFilterItem = defaultShouldFilterItem,
     size,
     titleText,
@@ -138,21 +135,20 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     initialSelectedItem,
     inputValue: '',
     itemToString,
-    selectedItem
+    selectedItem: selectedItemProp
   }));
   const [isFocused, setIsFocused] = React.useState(false);
   const [prevSelectedItem, setPrevSelectedItem] = React.useState();
   const [doneInitialSelectedItem, setDoneInitialSelectedItem] = React.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const savedOnInputChange = React.useRef(onInputChange);
-  if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
+  if (!doneInitialSelectedItem || prevSelectedItem !== selectedItemProp) {
     setDoneInitialSelectedItem(true);
-    setPrevSelectedItem(selectedItem);
+    setPrevSelectedItem(selectedItemProp);
     setInputValue(getInputValue({
       initialSelectedItem,
       inputValue,
       itemToString,
-      selectedItem
+      selectedItem: selectedItemProp
     }));
   }
   const filterItems = (items, itemToString, inputValue) => items.filter(item => shouldFilterItem ? shouldFilterItem({
@@ -160,16 +156,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     itemToString,
     inputValue
   }) : defaultShouldFilterItem());
-  const handleOnChange = selectedItem => {
-    if (onChange) {
-      onChange({
-        selectedItem
-      });
-    }
-  };
-  const handleOnInputValueChange = inputValue => {
-    setInputValue(inputValue || '');
-  };
   React.useEffect(() => {
     savedOnInputChange.current = onInputChange;
   }, [onInputChange]);
@@ -183,62 +169,80 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       textInput.current.focus();
     }
   };
-  const getHighlightedIndex = changes => {
-    if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
-      const {
-        inputValue
-      } = changes;
-      const filteredItems = filterItems(items, itemToString, inputValue || null);
-      const indexToHighlight = findHighlightedIndex({
-        ...props,
-        items: filteredItems
-      }, inputValue);
-      setHighlightedIndex(indexToHighlight);
-      return indexToHighlight;
-    }
-    return highlightedIndex || 0;
-  };
-  const handleOnStateChange = (changes, _ref3) => {
-    let {
-      setHighlightedIndex: updateHighlightedIndex
-    } = _ref3;
+  const filteredItems = inputValue => filterItems(items, itemToString, inputValue || null);
+  const indexToHighlight = inputValue => findHighlightedIndex({
+    ...props,
+    items: filteredItems(inputValue)
+  }, inputValue);
+  const stateReducer = React__default["default"].useCallback((state, actionAndChanges) => {
     const {
-      type
+      type,
+      changes
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
     switch (type) {
-      case keyDownArrowDown:
-      case keyDownArrowUp:
-        if (changes.isOpen) {
-          updateHighlightedIndex(getHighlightedIndex(changes));
-        } else {
-          setHighlightedIndex(changes.highlightedIndex);
+      case InputBlur:
+        if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue) {
+          return {
+            ...changes,
+            inputValue: ''
+          };
         }
-        break;
-      case blurButton:
-      case keyDownEscape:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case changeInput:
-        updateHighlightedIndex(getHighlightedIndex(changes));
-        break;
-      case blurInput:
+        return changes;
+      case InputKeyDownEnter:
         if (allowCustomValue) {
           setInputValue(inputValue);
+          setHighlightedIndex(changes.selectedItem);
           if (onChange) {
             onChange({
-              selectedItem,
-              inputValue
+              selectedItem: changes.selectedItem
             });
           }
+          return changes;
+        } else if (changes.selectedItem && !allowCustomValue) {
+          return changes;
+        } else {
+          return {
+            ...changes,
+            isOpen: true
+          };
+        }
+      case FunctionToggleMenu:
+      case ToggleButtonClick:
+        if (changes.isOpen && !changes.selectedItem) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
         }
-        break;
-      case clickButton:
-      case clickItem:
-      case unknown:
-        setHighlightedIndex(getHighlightedIndex(changes));
-        break;
+        return changes;
+      case MenuMouseLeave:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case InputKeyDownArrowUp:
+      case InputKeyDownArrowDown:
+        if (highlightedIndex === -1) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      default:
+        return changes;
     }
-  };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [allowCustomValue, inputValue, onChange]);
   const handleToggleClick = isOpen => event => {
     if (onToggleClick) {
       onToggleClick(event);
@@ -283,205 +287,208 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       size: 'mini'
     });
   }
-  return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, downshiftProps, {
-    onChange: handleOnChange,
-    onInputValueChange: handleOnInputValueChange,
-    onStateChange: function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      handleOnStateChange(...args);
-      downshiftProps?.onStateChange?.(...args);
+  const {
+    getInputProps,
+    getItemProps,
+    getLabelProps,
+    getMenuProps,
+    getToggleButtonProps,
+    isOpen,
+    highlightedIndex,
+    selectItem,
+    selectedItem,
+    toggleMenu,
+    setHighlightedIndex
+  } = Downshift.useCombobox({
+    ...downshiftProps,
+    items,
+    inputValue: inputValue,
+    itemToString: item => {
+      return itemToString(item);
+    },
+    onInputValueChange(_ref3) {
+      let {
+        inputValue
+      } = _ref3;
+      setInputValue(inputValue || '');
+      setHighlightedIndex(indexToHighlight(inputValue));
+    },
+    onSelectedItemChange(_ref4) {
+      let {
+        selectedItem
+      } = _ref4;
+      onChange({
+        selectedItem
+      });
     },
-    inputValue: inputValue || '',
-    itemToString: itemToString,
     initialSelectedItem: initialSelectedItem,
     inputId: id,
-    selectedItem: selectedItem
-  }), _ref4 => {
-    let {
-      getInputProps,
-      getItemProps,
-      getLabelProps,
-      getMenuProps,
-      getRootProps,
-      getToggleButtonProps,
-      isOpen,
-      inputValue,
-      selectedItem,
-      clearSelection,
-      toggleMenu
-    } = _ref4;
-    const rootProps = getRootProps(
-    // @ts-ignore this is not supposed to be a required property
-    {}, {
-      suppressRefError: true
-    });
-    const labelProps = getLabelProps();
-    const buttonProps = getToggleButtonProps({
-      disabled: disabled || readOnly,
-      onClick: handleToggleClick(isOpen),
-      // When we moved the "root node" of Downshift to the <input> for
-      // ARIA 1.2 compliance, we unfortunately hit this branch for the
-      // "mouseup" event that downshift listens to:
-      // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
-      //
-      // As a result, it will reset the state of the component and so we
-      // stop the event from propagating to prevent this if the menu is already open.
-      // This allows the toggleMenu behavior for the toggleButton to correctly open and
-      // close the menu.
-      onMouseUp(event) {
-        if (isOpen) {
-          event.stopPropagation();
-        }
+    stateReducer,
+    isItemDisabled(item, _index) {
+      return item.disabled;
+    }
+  });
+  const buttonProps = getToggleButtonProps({
+    disabled: disabled || readOnly,
+    onClick: handleToggleClick(isOpen),
+    // When we moved the "root node" of Downshift to the <input> for
+    // ARIA 1.2 compliance, we unfortunately hit this branch for the
+    // "mouseup" event that downshift listens to:
+    // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
+    //
+    // As a result, it will reset the state of the component and so we
+    // stop the event from propagating to prevent this if the menu is already open.
+    // This allows the toggleMenu behavior for the toggleButton to correctly open and
+    // close the menu.
+    onMouseUp(event) {
+      if (isOpen) {
+        event.stopPropagation();
       }
-    });
-    const inputProps = getInputProps({
-      disabled,
-      placeholder,
-      onClick() {
+    }
+  });
+  const handleFocus = evt => {
+    setIsFocused(evt.type === 'focus');
+  };
+  const readOnlyEventHandlers = readOnly ? {
+    onKeyDown: evt => {
+      // This prevents the select from opening for the above keys
+      if (evt.key !== 'Tab') {
+        evt.preventDefault();
+      }
+    }
+  } : {};
+
+  // The input should be described by the appropriate message text id
+  // when both the message is supplied *and* when the component is in
+  // the matching state (invalid, warn, etc).
+  const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
+    as: "label",
+    className: titleClasses
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
+    onFocus: handleFocus,
+    onBlur: handleFocus,
+    className: className,
+    disabled: disabled,
+    invalid: invalid,
+    invalidText: invalidText,
+    invalidTextId: invalidTextId,
+    isOpen: isOpen,
+    light: light,
+    size: size,
+    warn: warn,
+    warnText: warnText,
+    warnTextId: warnTextId
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--list-box__field`
+  }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
+    disabled: disabled,
+    className: inputClasses,
+    type: "text",
+    tabIndex: 0,
+    "aria-haspopup": "listbox",
+    "aria-owns": getMenuProps().id,
+    title: textInput?.current?.value
+  }, getInputProps({
+    placeholder,
+    ref: {
+      ...mergeRefs["default"](textInput, ref)
+    },
+    onKeyDown: event => {
+      if (match.match(event, keys.Space)) {
+        event.stopPropagation();
+      }
+      if (match.match(event, keys.Enter) && (!inputValue || allowCustomValue)) {
         toggleMenu();
-      },
-      onKeyDown: event => {
-        if (match.match(event, keys.Space)) {
-          event.stopPropagation();
+        if (highlightedIndex !== -1) {
+          selectItem(items[highlightedIndex]);
         }
-        if (match.match(event, keys.Enter) && (!inputValue || allowCustomValue)) {
+        event.preventDownshiftDefault = true;
+        event?.persist?.();
+      }
+      if (match.match(event, keys.Escape) && inputValue) {
+        if (event.target === textInput.current && isOpen) {
           toggleMenu();
-
-          // Since `onChange` does not normally fire when the menu is closed, we should
-          // manually fire it when `allowCustomValue` is provided, the menu is closing,
-          // and there is a value.
-          if (allowCustomValue && isOpen && inputValue) {
-            onChange({
-              selectedItem,
-              inputValue
-            });
-          }
-        }
-        if (match.match(event, keys.Escape) && inputValue) {
-          if (event.target === textInput.current && isOpen) {
-            toggleMenu();
-            event.preventDownshiftDefault = true;
-            event?.persist?.();
-          }
-        }
-        if (match.match(event, keys.Home) && event.code !== 'Numpad7') {
-          event.target.setSelectionRange(0, 0);
-        }
-        if (match.match(event, keys.End) && event.code !== 'Numpad1') {
-          event.target.setSelectionRange(event.target.value.length, event.target.value.length);
-        }
-        if (event.altKey && event.key == 'ArrowDown') {
           event.preventDownshiftDefault = true;
-          if (!isOpen) {
-            toggleMenu();
-          }
+          event?.persist?.();
         }
-        if (event.altKey && event.key == 'ArrowUp') {
-          event.preventDownshiftDefault = true;
-          if (isOpen) {
-            toggleMenu();
-          }
+      }
+      if (match.match(event, keys.Home) && event.code !== 'Numpad7') {
+        event.target.setSelectionRange(0, 0);
+      }
+      if (match.match(event, keys.End) && event.code !== 'Numpad1') {
+        event.target.setSelectionRange(event.target.value.length, event.target.value.length);
+      }
+      if (event.altKey && event.key == 'ArrowDown') {
+        event.preventDownshiftDefault = true;
+        if (!isOpen) {
+          toggleMenu();
         }
       }
-    });
-    const handleFocus = evt => {
-      setIsFocused(evt.type === 'focus');
-    };
-    const readOnlyEventHandlers = readOnly ? {
-      onKeyDown: evt => {
-        // This prevents the select from opening for the above keys
-        if (evt.key !== 'Tab') {
-          evt.preventDefault();
+      if (event.altKey && event.key == 'ArrowUp') {
+        event.preventDownshiftDefault = true;
+        if (isOpen) {
+          toggleMenu();
         }
       }
-    } : {};
+    }
+  }), rest, readOnlyEventHandlers, {
+    readOnly: readOnly,
+    "aria-describedby": ariaDescribedBy
+  })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+    className: `${prefix}--list-box__invalid-icon`
+  }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
+  }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
+    clearSelection: () => {
+      selectItem(null);
+    },
+    translateWithId: translateWithId,
+    disabled: disabled || readOnly,
+    onClearSelection: handleSelectionClear,
+    selectionCount: 0
+  }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
+    // @ts-expect-error
+    isOpen: isOpen,
+    translateWithId: translateWithId
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
+    'aria-label': deprecatedAriaLabel || ariaLabel
+  }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
+    const isObject = item !== null && typeof item === 'object';
+    const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
+    const itemProps = getItemProps({
+      item,
+      index: index$1
+    });
 
-    // The input should be described by the appropriate message text id
-    // when both the message is supplied *and* when the component is in
-    // the matching state (invalid, warn, etc).
-    const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: wrapperClasses
-    }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
-      as: "label",
-      className: titleClasses
-    }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
-      onFocus: handleFocus,
-      onBlur: handleFocus,
-      className: className,
-      disabled: disabled,
-      invalid: invalid,
-      invalidText: invalidText,
-      invalidTextId: invalidTextId,
-      isOpen: isOpen,
-      light: light,
-      size: size,
-      warn: warn,
-      warnText: warnText,
-      warnTextId: warnTextId
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--list-box__field`
-    }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
-      role: "combobox",
-      disabled: disabled,
-      className: inputClasses,
-      type: "text",
-      tabIndex: 0,
-      "aria-autocomplete": "list",
-      "aria-expanded": rootProps['aria-expanded'],
-      "aria-haspopup": "listbox",
-      "aria-controls": inputProps['aria-controls'],
-      "aria-owns": getMenuProps().id,
-      title: textInput?.current?.value
-    }, inputProps, rest, readOnlyEventHandlers, {
-      readOnly: readOnly,
-      ref: mergeRefs["default"](textInput, ref),
-      "aria-describedby": ariaDescribedBy
-    })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-      className: `${prefix}--list-box__invalid-icon`
-    }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
-      className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-    }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
-      clearSelection: clearSelection,
-      translateWithId: translateWithId,
-      disabled: disabled || readOnly,
-      onClearSelection: handleSelectionClear,
-      selectionCount: 0
-    }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
-      // @ts-expect-error
-      isOpen: isOpen,
-      translateWithId: translateWithId
-    }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
-      'aria-label': deprecatedAriaLabel || ariaLabel
-    }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
-      const isObject = item !== null && typeof item === 'object';
-      const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
-      const disabled = isObject && 'disabled' in item ? !!item.disabled : undefined;
-      const itemProps = getItemProps({
-        item,
-        index: index$1,
-        ['aria-current']: selectedItem === item ? 'true' : 'false',
-        ['aria-selected']: highlightedIndex === index$1 ? 'true' : 'false',
-        disabled
-      });
-      return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
-        key: itemProps.id,
-        isActive: selectedItem === item,
-        isHighlighted: highlightedIndex === index$1,
-        title: title
-      }, itemProps), ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
-        key: itemProps.id
-      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
-        className: `${prefix}--list-box__menu-item__selected-icon`
-      }));
-    }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      as: "div",
-      id: helperTextId,
-      className: helperClasses
-    }, helperText))));
-  });
+    // The initial implementation using <Downshift> would place the disabled attribute
+    // on disabled menu items. Conversely, useCombobox places aria-disabled instead.
+    // To avoid any potential breaking changes, we avoid placing aria-disabled and
+    // instead match the old behavior of placing the disabled attribute.
+    const disabled = itemProps['aria-disabled'];
+    const {
+      'aria-disabled': unusedAriaDisabled,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...modifiedItemProps
+    } = itemProps;
+    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+      key: itemProps.id,
+      isActive: selectedItem === item,
+      isHighlighted: highlightedIndex === index$1,
+      title: title,
+      disabled: disabled
+    }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+      key: itemProps.id
+    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
+      className: `${prefix}--list-box__menu-item__selected-icon`
+    }));
+  }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
+    id: helperTextId,
+    className: helperClasses
+  }, helperText));
 });
 ComboBox.displayName = 'ComboBox';
 ComboBox.propTypes = {
@@ -516,8 +523,7 @@ ComboBox.propTypes = {
   /**
    * Additional props passed to Downshift
    */
-  // @ts-ignore
-  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
+  downshiftProps: PropTypes__default["default"].object,
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -1,5 +1,4 @@
 import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
-import { ReactNodeLike } from 'prop-types';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
@@ -73,7 +72,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
 export default ComposedModal;