@carbon/react 1.57.0-rc.0 → 1.58.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import Downshift from 'downshift';
+import { useCombobox } from 'downshift';
 import PropTypes from 'prop-types';
 import React__default, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
 import '../Text/index.js';
@@ -19,24 +19,23 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
+import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
 
 const {
-  keyDownArrowDown,
-  keyDownArrowUp,
-  keyDownEscape,
-  clickButton,
-  clickItem,
-  blurButton,
-  changeInput,
-  blurInput,
-  unknown
-} = Downshift.stateChangeTypes;
+  InputBlur,
+  InputKeyDownEnter,
+  FunctionToggleMenu,
+  ToggleButtonClick,
+  ItemMouseMove,
+  InputKeyDownArrowUp,
+  InputKeyDownArrowDown,
+  MenuMouseLeave
+} = useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
@@ -76,7 +75,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;
     }
   }
@@ -84,7 +83,6 @@ const findHighlightedIndex = (_ref2, inputValue) => {
 };
 const getInstanceId = setupGetInstanceId();
 const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
-  var _Text;
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
@@ -106,7 +104,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     onToggleClick,
     placeholder,
     readOnly,
-    selectedItem,
+    selectedItem: selectedItemProp,
     shouldFilterItem = defaultShouldFilterItem,
     size,
     titleText,
@@ -127,21 +125,20 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     initialSelectedItem,
     inputValue: '',
     itemToString,
-    selectedItem
+    selectedItem: selectedItemProp
   }));
   const [isFocused, setIsFocused] = useState(false);
   const [prevSelectedItem, setPrevSelectedItem] = useState();
   const [doneInitialSelectedItem, setDoneInitialSelectedItem] = useState(false);
-  const [highlightedIndex, setHighlightedIndex] = useState();
   const savedOnInputChange = 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({
@@ -149,16 +146,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     itemToString,
     inputValue
   }) : defaultShouldFilterItem());
-  const handleOnChange = selectedItem => {
-    if (onChange) {
-      onChange({
-        selectedItem
-      });
-    }
-  };
-  const handleOnInputValueChange = inputValue => {
-    setInputValue(inputValue || '');
-  };
   useEffect(() => {
     savedOnInputChange.current = onInputChange;
   }, [onInputChange]);
@@ -172,62 +159,80 @@ const ComboBox = /*#__PURE__*/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.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);
@@ -272,204 +277,208 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       size: 'mini'
     });
   }
-  return /*#__PURE__*/React__default.createElement(Downshift, _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
+  } = 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.createElement("div", {
+    className: wrapperClasses
+  }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({
+    as: "label",
+    className: titleClasses
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
+    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.createElement("div", {
+    className: `${prefix}--list-box__field`
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
+    disabled: disabled,
+    className: inputClasses,
+    type: "text",
+    tabIndex: 0,
+    "aria-haspopup": "listbox",
+    "aria-owns": getMenuProps().id,
+    title: textInput?.current?.value
+  }, getInputProps({
+    placeholder,
+    ref: {
+      ...mergeRefs(textInput, ref)
+    },
+    onKeyDown: event => {
+      if (match(event, Space)) {
+        event.stopPropagation();
+      }
+      if (match(event, Enter) && (!inputValue || allowCustomValue)) {
         toggleMenu();
-      },
-      onKeyDown: event => {
-        if (match(event, Space)) {
-          event.stopPropagation();
+        if (highlightedIndex !== -1) {
+          selectItem(items[highlightedIndex]);
         }
-        if (match(event, Enter) && (!inputValue || allowCustomValue)) {
+        event.preventDownshiftDefault = true;
+        event?.persist?.();
+      }
+      if (match(event, 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(event, Escape) && inputValue) {
-          if (event.target === textInput.current && isOpen) {
-            toggleMenu();
-            event.preventDownshiftDefault = true;
-            event?.persist?.();
-          }
-        }
-        if (match(event, Home) && event.code !== 'Numpad7') {
-          event.target.setSelectionRange(0, 0);
-        }
-        if (match(event, 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(event, Home) && event.code !== 'Numpad7') {
+        event.target.setSelectionRange(0, 0);
+      }
+      if (match(event, 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.createElement(WarningFilled, {
+    className: `${prefix}--list-box__invalid-icon`
+  }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
+  }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+    clearSelection: () => {
+      selectItem(null);
+    },
+    translateWithId: translateWithId,
+    disabled: disabled || readOnly,
+    onClearSelection: handleSelectionClear,
+    selectionCount: 0
+  }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
+    // @ts-expect-error
+    isOpen: isOpen,
+    translateWithId: translateWithId
+  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
+    'aria-label': deprecatedAriaLabel || ariaLabel
+  }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+    const isObject = item !== null && typeof item === 'object';
+    const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
+    const itemProps = getItemProps({
+      item,
+      index
+    });
 
-    // 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.createElement("div", {
-      className: wrapperClasses
-    }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({
-      as: "label",
-      className: titleClasses
-    }, labelProps), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
-      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.createElement("div", {
-      className: `${prefix}--list-box__field`
-    }, /*#__PURE__*/React__default.createElement("input", _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(textInput, ref),
-      "aria-describedby": ariaDescribedBy
-    })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-      className: `${prefix}--list-box__invalid-icon`
-    }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-      className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-    }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
-      clearSelection: clearSelection,
-      translateWithId: translateWithId,
-      disabled: disabled || readOnly,
-      onClearSelection: handleSelectionClear,
-      selectionCount: 0
-    }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
-      isOpen: isOpen,
-      translateWithId: translateWithId
-    }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
-      'aria-label': deprecatedAriaLabel || ariaLabel
-    }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
-      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,
-        ['aria-current']: selectedItem === item ? 'true' : 'false',
-        ['aria-selected']: highlightedIndex === index ? 'true' : 'false',
-        disabled
-      });
-      return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
-        key: itemProps.id,
-        isActive: selectedItem === item,
-        isHighlighted: highlightedIndex === index,
-        title: title
-      }, itemProps), ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
-        key: itemProps.id
-      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
-        className: `${prefix}--list-box__menu-item__selected-icon`
-      }));
-    }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default.createElement(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.createElement(ListBox.MenuItem, _extends({
+      key: itemProps.id,
+      isActive: selectedItem === item,
+      isHighlighted: highlightedIndex === index,
+      title: title,
+      disabled: disabled
+    }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+      key: itemProps.id
+    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
+      className: `${prefix}--list-box__menu-item__selected-icon`
+    }));
+  }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
+    id: helperTextId,
+    className: helperClasses
+  }, helperText));
 });
 ComboBox.displayName = 'ComboBox';
 ComboBox.propTypes = {
@@ -504,8 +513,7 @@ ComboBox.propTypes = {
   /**
    * Additional props passed to Downshift
    */
-  // @ts-ignore
-  downshiftProps: PropTypes.shape(Downshift.propTypes),
+  downshiftProps: PropTypes.object,
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/es/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;

package/es/components/ContainedList/ContainedList.d.ts

@@ -5,9 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+import ContainedListItem from './ContainedListItem';
 declare const variants: readonly ["on-page", "disclosed"];
-type Variants = (typeof variants)[number];
-interface ContainedListProps {
+interface ContainedListType extends React.FC<ContainedListProps> {
+    ContainedListItem: typeof ContainedListItem;
+}
+export type Variants = (typeof variants)[number];
+export interface ContainedListProps {
     /**
      * A slot for a possible interactive element to render.
      */
@@ -37,5 +41,5 @@ interface ContainedListProps {
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
 }
-declare const ContainedList: React.FC<ContainedListProps>;
+declare const ContainedList: ContainedListType;
 export default ContainedList;