@carbon/react 1.31.3 → 1.32.0

package/lib/components/UIShell/HeaderPanel.js

@@ -14,6 +14,10 @@ var React = require('react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var usePrefix = require('../../internal/usePrefix.js');
+var useEvent = require('../../internal/useEvent.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,19 +30,61 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
     children,
     className: customClassName,
     expanded,
+    addFocusListeners = true,
+    onHeaderPanelFocus,
+    href,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const headerPanelReference = React.useRef(null);
+  const headerPanelRef = useMergedRefs.useMergedRefs([headerPanelReference, ref]);
+  const controlled = React.useRef(expanded !== undefined).current;
+  const [expandedState, setExpandedState] = React.useState(expanded);
+  const expandedProp = controlled ? expanded : expandedState;
+  const [lastClickedElement, setLastClickedElement] = React.useState(null);
   const className = cx__default["default"](`${prefix}--header-panel`, {
-    [`${prefix}--header-panel--expanded`]: expanded,
+    [`${prefix}--header-panel--expanded`]: expandedProp,
     [customClassName]: !!customClassName
   });
+  const eventHandlers = {};
+  if (addFocusListeners) {
+    eventHandlers.onBlur = event => {
+      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement.classList.contains('cds--switcher__item-link')) {
+        setExpandedState(false);
+        setLastClickedElement(null);
+        if (expanded) {
+          onHeaderPanelFocus();
+        }
+      }
+    };
+    eventHandlers.onKeyDown = event => {
+      if (match.match(event, keys.Escape)) {
+        setExpandedState(false);
+        onHeaderPanelFocus();
+        if (href) {
+          window.location.href = href;
+        }
+      }
+    };
+  }
+  useEvent.useWindowEvent('click', () => {
+    const focusedElement = document.activeElement;
+    setLastClickedElement(focusedElement);
+    if (children.type.__docgenInfo.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelRef?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+      setExpandedState(false);
+      onHeaderPanelFocus();
+    }
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
     className: className,
-    ref: ref
-  }), children);
+    ref: headerPanelRef
+  }, eventHandlers), children);
 });
 HeaderPanel.propTypes = {
+  /**
+   * Specify whether focus and blur listeners are added. They are by default.
+   */
+  addFocusListeners: PropTypes__default["default"].bool,
   /**
    * The content that will render inside of the `HeaderPanel`
    */
@@ -50,7 +96,17 @@ HeaderPanel.propTypes = {
   /**
    * Specify whether the panel is expanded
    */
-  expanded: PropTypes__default["default"].bool
+  expanded: PropTypes__default["default"].bool,
+  /**
+   * Provide the `href` to the id of the element on your package that could
+   * be target.
+   */
+  href: PropTypes__default["default"].string,
+  /**
+   * An optional listener that is called a callback to collapse the HeaderPanel
+   */
+
+  onHeaderPanelFocus: PropTypes__default["default"].func
 };
 HeaderPanel.displayName = 'HeaderPanel';
 var HeaderPanel$1 = HeaderPanel;

package/lib/components/UIShell/SideNav.d.ts

@@ -20,5 +20,5 @@ interface SideNavProps extends ComponentProps<'nav'> {
     onSideNavBlur?: () => void | undefined;
     enterDelayMs?: number;
 }
-declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "className" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "enterDelayMs" | "expanded" | "defaultExpanded" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addFocusListeners" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
+declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;

package/lib/components/UIShell/Switcher.js

@@ -15,6 +15,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,13 +23,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Switcher(props, ref) {
+const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Switcher(props, forwardRef) {
+  const switcherRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([switcherRef, forwardRef]);
   const prefix = usePrefix.usePrefix();
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     className: customClassName,
-    children
+    children,
+    expanded
   } = props;
   const accessibilityLabel = {
     'aria-label': ariaLabel,
@@ -37,10 +41,42 @@ const Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Swit
   const className = cx__default["default"](`${prefix}--switcher`, {
     [customClassName]: !!customClassName
   });
+  const handleSwitcherItemFocus = _ref => {
+    let {
+      currentIndex,
+      direction
+    } = _ref;
+    const enabledIndices = React__default["default"].Children.toArray(children).reduce((acc, curr, i) => {
+      if (Object.keys(curr.props).length !== 0) {
+        acc.push(i);
+      }
+      return acc;
+    }, []);
+    const nextValidIndex = (() => {
+      const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
+      switch (enabledIndices[nextIndex]) {
+        case undefined:
+          if (direction === -1) {
+            return enabledIndices[enabledIndices.length - 1];
+          }
+          return 0;
+        default:
+          return enabledIndices[nextIndex];
+      }
+    })();
+    const switcherItem = switcherRef.current.children[nextValidIndex].children[0];
+    switcherItem?.focus();
+  };
+  const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    handleSwitcherItemFocus,
+    index,
+    key: index,
+    expanded
+  }));
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     className: className
-  }, accessibilityLabel), children);
+  }, accessibilityLabel), childrenWithProps);
 });
 Switcher.displayName = 'Switcher';
 Switcher.propTypes = {
@@ -55,7 +91,11 @@ Switcher.propTypes = {
   /**
    * Optionally provide a custom class to apply to the underlying `<ul>` node
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify whether the panel is expanded
+   */
+  expanded: PropTypes__default["default"].bool
 };
 var Switcher$1 = Switcher;
 

package/lib/components/UIShell/SwitcherItem.js

@@ -16,6 +16,8 @@ var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var Link = require('./Link.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,17 +25,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const SwitcherItem = /*#__PURE__*/React__default["default"].forwardRef(function SwitcherItem(props, ref) {
-  const prefix = usePrefix.usePrefix();
-  const {
+const SwitcherItem = /*#__PURE__*/React__default["default"].forwardRef(function SwitcherItem(_ref, ref) {
+  let {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     className: customClassName,
     children,
     isSelected,
-    tabIndex = 0,
+    expanded,
+    tabIndex = expanded ? 0 : -1,
+    index,
+    handleSwitcherItemFocus,
+    onKeyDown = () => {},
     ...rest
-  } = props;
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--switcher__item`, {
     [customClassName]: !!customClassName
   });
@@ -44,9 +50,30 @@ const SwitcherItem = /*#__PURE__*/React__default["default"].forwardRef(function
   const linkClassName = cx__default["default"](`${prefix}--switcher__item-link`, {
     [`${prefix}--switcher__item-link--selected`]: isSelected
   });
+  function setTabFocus(evt) {
+    if (match.match(evt, keys.ArrowDown)) {
+      evt.preventDefault();
+      handleSwitcherItemFocus?.({
+        currentIndex: index,
+        direction: 1
+      });
+    }
+    if (match.match(evt, keys.ArrowUp)) {
+      evt.preventDefault();
+      handleSwitcherItemFocus?.({
+        currentIndex: index,
+        direction: -1
+      });
+    }
+  }
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
+    onKeyDown: evt => {
+      setTabFocus(evt);
+      onKeyDown(evt);
+    }
+  }, rest, {
     ref: ref,
     className: linkClassName,
     tabIndex: tabIndex
@@ -66,6 +93,18 @@ SwitcherItem.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * event handlers
+   */
+  handleSwitcherItemFocus: PropTypes__default["default"].func,
+  /**
+   * Specify the index of the SwitcherItem
+   */
+  index: PropTypes__default["default"].number,
+  /**
+   * event handlers
+   */
+  onKeyDown: PropTypes__default["default"].func,
   /**
    * Specify the tab index of the Link
    */

package/lib/index.js

@@ -10,12 +10,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('./feature-flags.js');
+var Accordion = require('./components/Accordion/Accordion.js');
+var AccordionItem = require('./components/Accordion/AccordionItem.js');
+var Accordion_Skeleton = require('./components/Accordion/Accordion.Skeleton.js');
 var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
+var Button = require('./components/Button/Button.js');
+var Button_Skeleton = require('./components/Button/Button.Skeleton.js');
+var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
 var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
 var index$3 = require('./components/ClassPrefix/index.js');
 var index$4 = require('./components/ComboButton/index.js');
+var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
+var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
+var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
 var index$5 = require('./components/ContentSwitcher/index.js');
+var DangerButton = require('./components/DangerButton/DangerButton.js');
 require('./components/DataTable/index.js');
 var DataTableSkeleton = require('./components/DataTableSkeleton/DataTableSkeleton.js');
 var DatePicker = require('./components/DatePicker/DatePicker.js');
@@ -35,17 +45,23 @@ var index$6 = require('./components/IdPrefix/index.js');
 var Link = require('./components/Link/Link.js');
 var ListItem = require('./components/ListItem/ListItem.js');
 var index$7 = require('./components/MenuButton/index.js');
+var Notification = require('./components/Notification/Notification.js');
 var OrderedList = require('./components/OrderedList/OrderedList.js');
 var index$8 = require('./components/OverflowMenu/index.js');
 var Pagination_Skeleton = require('./components/Pagination/Pagination.Skeleton.js');
 var RadioButton_Skeleton = require('./components/RadioButton/RadioButton.Skeleton.js');
 var Search = require('./components/Search/Search.js');
 var Search_Skeleton = require('./components/Search/Search.Skeleton.js');
+var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var index$9 = require('./components/Slider/index.js');
+var Tabs = require('./components/Tabs/Tabs.js');
+var TabContent = require('./components/TabContent/TabContent.js');
+var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
 var Tag_Skeleton = require('./components/Tag/Tag.Skeleton.js');
 var TextArea = require('./components/TextArea/TextArea.js');
 var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
 require('./components/TextInput/index.js');
+var Tile = require('./components/Tile/Tile.js');
 var index$a = require('./components/TileGroup/index.js');
 var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
@@ -72,9 +88,6 @@ var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
 var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInput.Skeleton.js');
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
 var Pagination = require('./components/Pagination/experimental/Pagination.js');
-var AccordionItem = require('./components/Accordion/AccordionItem.js');
-var Accordion_Skeleton = require('./components/Accordion/Accordion.Skeleton.js');
-var Accordion = require('./components/Accordion/Accordion.js');
 var Breadcrumb_Skeleton = require('./components/Breadcrumb/Breadcrumb.Skeleton.js');
 var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
 var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
@@ -99,7 +112,6 @@ var Loading = require('./components/Loading/Loading.js');
 var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
 var ProgressIndicator_Skeleton = require('./components/ProgressIndicator/ProgressIndicator.Skeleton.js');
-var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var TextInput = require('./components/TextInput/TextInput.js');
 var Toggle = require('./components/Toggle/Toggle.js');
@@ -136,14 +148,7 @@ var Text = require('./components/Text/Text.js');
 var TextDirection = require('./components/Text/TextDirection.js');
 var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 var BreadcrumbItem = require('./components/Breadcrumb/BreadcrumbItem.js');
-var Button_Skeleton = require('./components/Button/Button.Skeleton.js');
-var Button = require('./components/Button/Button.js');
-var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
 var ComboBox = require('./components/ComboBox/ComboBox.js');
-var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
-var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
-var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
-var DangerButton = require('./components/DangerButton/DangerButton.js');
 var DataTable = require('./components/DataTable/DataTable.js');
 var Table = require('./components/DataTable/Table.js');
 var TableActionList = require('./components/DataTable/TableActionList.js');
@@ -173,7 +178,6 @@ var Menu = require('./components/Menu/Menu.js');
 var MenuItem = require('./components/Menu/MenuItem.js');
 var Modal = require('./components/Modal/Modal.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
-var Notification = require('./components/Notification/Notification.js');
 var NumberInput = require('./components/NumberInput/NumberInput.js');
 var OverflowMenuItem = require('./components/OverflowMenuItem/OverflowMenuItem.js');
 var Pagination$1 = require('./components/Pagination/Pagination.js');
@@ -192,16 +196,12 @@ var SelectItem = require('./components/SelectItem/SelectItem.js');
 var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
 var SkeletonIcon = require('./components/SkeletonIcon/SkeletonIcon.js');
 var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
-var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
 var StructuredList = require('./components/StructuredList/StructuredList.js');
 var Switch = require('./components/Switch/Switch.js');
 var IconSwitch = require('./components/Switch/IconSwitch.js');
-var Tabs = require('./components/Tabs/Tabs.js');
-var TabContent = require('./components/TabContent/TabContent.js');
 var Tag = require('./components/Tag/Tag.js');
-var Tile = require('./components/Tile/Tile.js');
 var TimePicker = require('./components/TimePicker/TimePicker.js');
 var TimePickerSelect = require('./components/TimePickerSelect/TimePickerSelect.js');
 var Content = require('./components/UIShell/Content.js');
@@ -226,12 +226,27 @@ var Stack = require('./components/Stack/Stack.js');
 
 
 
+exports.Accordion = Accordion["default"];
+exports.AccordionItem = AccordionItem["default"];
+exports.AccordionSkeleton = Accordion_Skeleton["default"];
 exports.AspectRatio = AspectRatio["default"];
+exports.Button = Button["default"];
+exports.ButtonKinds = Button.ButtonKinds;
+exports.ButtonSizes = Button.ButtonSizes;
+exports.ButtonTooltipAlignments = Button.ButtonTooltipAlignments;
+exports.ButtonTooltipPositions = Button.ButtonTooltipPositions;
+exports.ButtonSkeleton = Button_Skeleton["default"];
+exports.ButtonSet = ButtonSet["default"];
 exports.Checkbox = Checkbox["default"];
 exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
 exports.ClassPrefix = index$3.ClassPrefix;
 exports.ComboButton = index$4.ComboButton;
+exports.ComposedModal = ComposedModal["default"];
+exports.ModalBody = ComposedModal.ModalBody;
+exports.ModalHeader = ModalHeader.ModalHeader;
+exports.ModalFooter = ModalFooter.ModalFooter;
 exports.ContentSwitcher = index$5["default"];
+exports.DangerButton = DangerButton["default"];
 exports.DataTableSkeleton = DataTableSkeleton["default"];
 exports.DatePicker = DatePicker["default"];
 exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
@@ -250,16 +265,36 @@ exports.IdPrefix = index$6.IdPrefix;
 exports.Link = Link["default"];
 exports.ListItem = ListItem["default"];
 exports.MenuButton = index$7.MenuButton;
+exports.ActionableNotification = Notification.ActionableNotification;
+exports.InlineNotification = Notification.InlineNotification;
+exports.NotificationActionButton = Notification.NotificationActionButton;
+exports.NotificationButton = Notification.NotificationButton;
+exports.ToastNotification = Notification.ToastNotification;
 exports.OrderedList = OrderedList["default"];
 exports.OverflowMenu = index$8["default"];
 exports.PaginationSkeleton = Pagination_Skeleton["default"];
 exports.RadioButtonSkeleton = RadioButton_Skeleton["default"];
 exports.Search = Search["default"];
 exports.SearchSkeleton = Search_Skeleton["default"];
+exports.SkeletonText = SkeletonText["default"];
 exports.Slider = index$9["default"];
+exports.IconTab = Tabs.IconTab;
+exports.Tab = Tabs.Tab;
+exports.TabList = Tabs.TabList;
+exports.TabPanel = Tabs.TabPanel;
+exports.TabPanels = Tabs.TabPanels;
+exports.Tabs = Tabs.Tabs;
+exports.TabContent = TabContent["default"];
+exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.TagSkeleton = Tag_Skeleton["default"];
 exports.TextArea = TextArea["default"];
 exports.TextAreaSkeleton = TextArea_Skeleton["default"];
+exports.ClickableTile = Tile.ClickableTile;
+exports.ExpandableTile = Tile.ExpandableTile;
+exports.SelectableTile = Tile.SelectableTile;
+exports.Tile = Tile.Tile;
+exports.TileAboveTheFoldContent = Tile.TileAboveTheFoldContent;
+exports.TileBelowTheFoldContent = Tile.TileBelowTheFoldContent;
 exports.TileGroup = index$a["default"];
 exports.ToggleSkeleton = Toggle_Skeleton["default"];
 exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
@@ -299,9 +334,6 @@ exports.unstable__FluidTextInput = FluidTextInput["default"];
 exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];
 exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
-exports.AccordionItem = AccordionItem["default"];
-exports.AccordionSkeleton = Accordion_Skeleton["default"];
-exports.Accordion = Accordion["default"];
 exports.BreadcrumbSkeleton = Breadcrumb_Skeleton["default"];
 exports.CheckboxGroup = CheckboxGroup["default"];
 exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
@@ -326,7 +358,6 @@ exports.Loading = Loading["default"];
 exports.ModalWrapper = ModalWrapper["default"];
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
 exports.ProgressIndicatorSkeleton = ProgressIndicator_Skeleton["default"];
-exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
 exports.TextInput = TextInput["default"];
 exports.Toggle = Toggle.Toggle;
@@ -363,15 +394,7 @@ exports.unstable_Text = Text.Text;
 exports.unstable_TextDirection = TextDirection.TextDirection;
 exports.Breadcrumb = Breadcrumb["default"];
 exports.BreadcrumbItem = BreadcrumbItem["default"];
-exports.ButtonSkeleton = Button_Skeleton["default"];
-exports.Button = Button["default"];
-exports.ButtonSet = ButtonSet["default"];
 exports.ComboBox = ComboBox["default"];
-exports.ComposedModal = ComposedModal["default"];
-exports.ModalBody = ComposedModal.ModalBody;
-exports.ModalFooter = ModalFooter.ModalFooter;
-exports.ModalHeader = ModalHeader.ModalHeader;
-exports.DangerButton = DangerButton["default"];
 exports.DataTable = DataTable["default"];
 exports.Table = Table.Table;
 exports.TableActionList = TableActionList["default"];
@@ -405,11 +428,6 @@ exports.MenuItemRadioGroup = MenuItem.MenuItemRadioGroup;
 exports.MenuItemSelectable = MenuItem.MenuItemSelectable;
 exports.Modal = Modal["default"];
 exports.MultiSelect = MultiSelect["default"];
-exports.ActionableNotification = Notification.ActionableNotification;
-exports.InlineNotification = Notification.InlineNotification;
-exports.NotificationActionButton = Notification.NotificationActionButton;
-exports.NotificationButton = Notification.NotificationButton;
-exports.ToastNotification = Notification.ToastNotification;
 exports.NumberInput = NumberInput.NumberInput;
 exports.OverflowMenuItem = OverflowMenuItem["default"];
 exports.Pagination = Pagination$1["default"];
@@ -429,7 +447,6 @@ exports.SelectItem = SelectItem["default"];
 exports.SelectItemGroup = SelectItemGroup["default"];
 exports.SkeletonIcon = SkeletonIcon["default"];
 exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
-exports.SkeletonText = SkeletonText["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
 exports.StructuredListBody = StructuredList.StructuredListBody;
@@ -440,21 +457,8 @@ exports.StructuredListRow = StructuredList.StructuredListRow;
 exports.StructuredListWrapper = StructuredList.StructuredListWrapper;
 exports.Switch = Switch["default"];
 exports.IconSwitch = IconSwitch["default"];
-exports.IconTab = Tabs.IconTab;
-exports.Tab = Tabs.Tab;
-exports.TabList = Tabs.TabList;
-exports.TabPanel = Tabs.TabPanel;
-exports.TabPanels = Tabs.TabPanels;
-exports.Tabs = Tabs.Tabs;
-exports.TabContent = TabContent["default"];
 exports.Tag = Tag["default"];
 exports.types = Tag.types;
-exports.ClickableTile = Tile.ClickableTile;
-exports.ExpandableTile = Tile.ExpandableTile;
-exports.SelectableTile = Tile.SelectableTile;
-exports.Tile = Tile.Tile;
-exports.TileAboveTheFoldContent = Tile.TileAboveTheFoldContent;
-exports.TileBelowTheFoldContent = Tile.TileBelowTheFoldContent;
 exports.TimePicker = TimePicker["default"];
 exports.TimePickerSelect = TimePickerSelect["default"];
 exports.Content = Content["default"];

package/lib/internal/keyboard/match.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *   }
  * }
  *
- * @param {Event} event
+ * @param {Event|React.SyntheticEvent} event
  * @param {Array<Key>} keysToMatch
  * @returns {boolean}
  */
@@ -57,7 +57,7 @@ function matches(event, keysToMatch) {
  *   }
  * }
  *
- * @param {React.KeyboardEvent|Event|number|string} eventOrCode
+ * @param {React.SyntheticEvent|Event|number|string} eventOrCode
  * @param {Key} key
  * @returns {boolean}
  */

package/lib/internal/useControllableState.js

@@ -23,7 +23,7 @@ var warning = require('./warning.js');
  * uncontrolled, or vice-versa.
  *
  * @param {object} config
- * @param {string} config.name - the name of the custom component
+ * @param {string} [config.name] - the name of the custom component
  * @param {any} config.defaultValue - the default value used for the state. This will be
  * the fallback value used if `value` is not defined.
  * @param {Function} config.onChange - an optional function that is called when
@@ -31,7 +31,7 @@ var warning = require('./warning.js');
  * controlled components that the value is requesting to be changed.
  * @param {any} config.value - a controlled value. Omitting this means that the state is
  * uncontrolled
- * @returns {[any, Function]}
+ * @returns {[any, (v: any) => void]}
  */
 function useControllableState(_ref) {
   let {

package/lib/internal/useMatchMedia.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var environment = require('./environment.js');
+
+function useMatchMedia(mediaQueryString) {
+  const [matches, setMatches] = React.useState(() => {
+    if (environment.canUseDOM) {
+      const mediaQueryList = window.matchMedia(mediaQueryString);
+      return mediaQueryList.matches;
+    }
+    return false;
+  });
+  React.useEffect(() => {
+    function listener(event) {
+      setMatches(event.matches);
+    }
+    const mediaQueryList = window.matchMedia(mediaQueryString);
+    // Support fallback to `addListener` for broader browser support
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    }
+
+    // Make sure the media query list is in sync with the matches state
+    setMatches(mediaQueryList.matches);
+    return () => {
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.removeEventListener('change', listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, [mediaQueryString]);
+  return matches;
+}
+
+exports.useMatchMedia = useMatchMedia;

package/lib/internal/wrapFocus.js

@@ -32,12 +32,12 @@ function elementOrParentIsFloatingMenu(node) {
 /**
  * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
  * @param {object} options The options.
- * @param {Node} options.bodyNode
- * @param {Node} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {Node} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {Node} options.currentActiveNode The DOM node that has focus.
- * @param {Node} options.oldActiveNode The DOM node that previously had focus.
- * @param {Node} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
+ * @param {HTMLElement|null} options.bodyNode
+ * @param {HTMLElement|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {HTMLElement|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {HTMLElement} options.currentActiveNode The DOM node that has focus.
+ * @param {HTMLElement} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
  */
 function wrapFocus(_ref) {
   let {