@carbon/react 1.31.3 → 1.32.0

package/es/components/UIShell/HeaderPanel.js

@@ -6,29 +6,75 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef, useState } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useWindowEvent } from '../../internal/useEvent.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {
   let {
     children,
     className: customClassName,
     expanded,
+    addFocusListeners = true,
+    onHeaderPanelFocus,
+    href,
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const headerPanelReference = useRef(null);
+  const headerPanelRef = useMergedRefs([headerPanelReference, ref]);
+  const controlled = useRef(expanded !== undefined).current;
+  const [expandedState, setExpandedState] = useState(expanded);
+  const expandedProp = controlled ? expanded : expandedState;
+  const [lastClickedElement, setLastClickedElement] = useState(null);
   const className = cx(`${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(event, Escape)) {
+        setExpandedState(false);
+        onHeaderPanelFocus();
+        if (href) {
+          window.location.href = href;
+        }
+      }
+    };
+  }
+  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.createElement("div", _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.bool,
   /**
    * The content that will render inside of the `HeaderPanel`
    */
@@ -40,7 +86,17 @@ HeaderPanel.propTypes = {
   /**
    * Specify whether the panel is expanded
    */
-  expanded: PropTypes.bool
+  expanded: PropTypes.bool,
+  /**
+   * Provide the `href` to the id of the element on your package that could
+   * be target.
+   */
+  href: PropTypes.string,
+  /**
+   * An optional listener that is called a callback to collapse the HeaderPanel
+   */
+
+  onHeaderPanelFocus: PropTypes.func
 };
 HeaderPanel.displayName = 'HeaderPanel';
 var HeaderPanel$1 = HeaderPanel;

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

@@ -6,19 +6,23 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props, ref) {
+const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props, forwardRef) {
+  const switcherRef = useRef(null);
+  const ref = useMergedRefs([switcherRef, forwardRef]);
   const prefix = usePrefix();
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     className: customClassName,
-    children
+    children,
+    expanded
   } = props;
   const accessibilityLabel = {
     'aria-label': ariaLabel,
@@ -27,10 +31,42 @@ const Switcher = /*#__PURE__*/React__default.forwardRef(function Switcher(props,
   const className = cx(`${prefix}--switcher`, {
     [customClassName]: !!customClassName
   });
+  const handleSwitcherItemFocus = _ref => {
+    let {
+      currentIndex,
+      direction
+    } = _ref;
+    const enabledIndices = React__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.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
+    handleSwitcherItemFocus,
+    index,
+    key: index,
+    expanded
+  }));
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref,
     className: className
-  }, accessibilityLabel), children);
+  }, accessibilityLabel), childrenWithProps);
 });
 Switcher.displayName = 'Switcher';
 Switcher.propTypes = {
@@ -45,7 +81,11 @@ Switcher.propTypes = {
   /**
    * Optionally provide a custom class to apply to the underlying `<ul>` node
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /**
+   * Specify whether the panel is expanded
+   */
+  expanded: PropTypes.bool
 };
 var Switcher$1 = Switcher;
 

package/es/components/UIShell/SwitcherItem.js

@@ -12,18 +12,24 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
-const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherItem(props, ref) {
-  const prefix = usePrefix();
-  const {
+const SwitcherItem = /*#__PURE__*/React__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();
   const className = cx(`${prefix}--switcher__item`, {
     [customClassName]: !!customClassName
   });
@@ -34,9 +40,30 @@ const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherIte
   const linkClassName = cx(`${prefix}--switcher__item-link`, {
     [`${prefix}--switcher__item-link--selected`]: isSelected
   });
+  function setTabFocus(evt) {
+    if (match(evt, ArrowDown)) {
+      evt.preventDefault();
+      handleSwitcherItemFocus?.({
+        currentIndex: index,
+        direction: 1
+      });
+    }
+    if (match(evt, ArrowUp)) {
+      evt.preventDefault();
+      handleSwitcherItemFocus?.({
+        currentIndex: index,
+        direction: -1
+      });
+    }
+  }
   return /*#__PURE__*/React__default.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({
+    onKeyDown: evt => {
+      setTabFocus(evt);
+      onKeyDown(evt);
+    }
+  }, rest, {
     ref: ref,
     className: linkClassName,
     tabIndex: tabIndex
@@ -56,6 +83,18 @@ SwitcherItem.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
+  /**
+   * event handlers
+   */
+  handleSwitcherItemFocus: PropTypes.func,
+  /**
+   * Specify the index of the SwitcherItem
+   */
+  index: PropTypes.number,
+  /**
+   * event handlers
+   */
+  onKeyDown: PropTypes.func,
   /**
    * Specify the tab index of the Link
    */

package/es/index.js

@@ -6,12 +6,22 @@
  */
 
 import './feature-flags.js';
+export { default as Accordion } from './components/Accordion/Accordion.js';
+export { default as AccordionItem } from './components/Accordion/AccordionItem.js';
+export { default as AccordionSkeleton } from './components/Accordion/Accordion.Skeleton.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
+export { default as Button, ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from './components/Button/Button.js';
+export { default as ButtonSkeleton } from './components/Button/Button.Skeleton.js';
+export { default as ButtonSet } from './components/ButtonSet/ButtonSet.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
 export { ClassPrefix } from './components/ClassPrefix/index.js';
 export { ComboButton } from './components/ComboButton/index.js';
+export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
+export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
+export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
+export { default as DangerButton } from './components/DangerButton/DangerButton.js';
 import './components/DataTable/index.js';
 export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as DatePicker } from './components/DatePicker/DatePicker.js';
@@ -31,17 +41,23 @@ export { IdPrefix } from './components/IdPrefix/index.js';
 export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { MenuButton } from './components/MenuButton/index.js';
+export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification } from './components/Notification/Notification.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
+export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as Slider } from './components/Slider/index.js';
+export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
+export { default as TabContent } from './components/TabContent/TabContent.js';
+export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
 import './components/TextInput/index.js';
+export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
 export { default as TileGroup } from './components/TileGroup/index.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
@@ -68,9 +84,6 @@ export { default as unstable__FluidTextInput } from './components/FluidTextInput
 export { default as unstable__FluidTextInputSkeleton } from './components/FluidTextInput/FluidTextInput.Skeleton.js';
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
-export { default as AccordionItem } from './components/Accordion/AccordionItem.js';
-export { default as AccordionSkeleton } from './components/Accordion/Accordion.Skeleton.js';
-export { default as Accordion } from './components/Accordion/Accordion.js';
 export { default as BreadcrumbSkeleton } from './components/Breadcrumb/Breadcrumb.Skeleton.js';
 export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
 export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
@@ -95,7 +108,6 @@ export { default as Loading } from './components/Loading/Loading.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
-export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { Toggle } from './components/Toggle/Toggle.js';
@@ -132,14 +144,7 @@ export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';
-export { default as ButtonSkeleton } from './components/Button/Button.Skeleton.js';
-export { default as Button } from './components/Button/Button.js';
-export { default as ButtonSet } from './components/ButtonSet/ButtonSet.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
-export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
-export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
-export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
-export { default as DangerButton } from './components/DangerButton/DangerButton.js';
 export { default as DataTable } from './components/DataTable/DataTable.js';
 export { Table } from './components/DataTable/Table.js';
 export { default as TableActionList } from './components/DataTable/TableActionList.js';
@@ -169,7 +174,6 @@ export { Menu } from './components/Menu/Menu.js';
 export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
-export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification } from './components/Notification/Notification.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';
 export { default as Pagination } from './components/Pagination/Pagination.js';
@@ -188,16 +192,12 @@ export { default as SelectItem } from './components/SelectItem/SelectItem.js';
 export { default as SelectItemGroup } from './components/SelectItemGroup/SelectItemGroup.js';
 export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
-export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as IconSwitch } from './components/Switch/IconSwitch.js';
-export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
-export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as Tag, types } from './components/Tag/Tag.js';
-export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
 export { default as TimePicker } from './components/TimePicker/TimePicker.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
 export { default as Content } from './components/UIShell/Content.js';

package/es/internal/keyboard/match.js

@@ -26,7 +26,7 @@
  *   }
  * }
  *
- * @param {Event} event
+ * @param {Event|React.SyntheticEvent} event
  * @param {Array<Key>} keysToMatch
  * @returns {boolean}
  */
@@ -53,7 +53,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/es/internal/useControllableState.js

@@ -19,7 +19,7 @@ import { warning } from './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
@@ -27,7 +27,7 @@ import { warning } from './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/es/internal/useMatchMedia.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+import { useState, useEffect } from 'react';
+import { canUseDOM } from './environment.js';
+
+function useMatchMedia(mediaQueryString) {
+  const [matches, setMatches] = useState(() => {
+    if (canUseDOM) {
+      const mediaQueryList = window.matchMedia(mediaQueryString);
+      return mediaQueryList.matches;
+    }
+    return false;
+  });
+  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;
+}
+
+export { useMatchMedia };

package/es/internal/wrapFocus.js

@@ -24,12 +24,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 {

package/es/prop-types/requiredIfGivenPropIsTruthy.js

@@ -6,7 +6,7 @@
  */
 
 /**
- * @param {Function} name The name of the prop that must exist to validate
+ * @param {string} name The name of the prop that must exist to validate
  * the current prop.
  * @param {Function} propType The original prop type checker.
  * @returns {Function} The new prop type checker for the current prop that

package/es/prop-types/types.js

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * @deprecated use ButtonKinds export from Button component instead
+ */
 const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
 
 export { ButtonKinds };

package/lib/components/Accordion/Accordion.Skeleton.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+interface AccordionSkeletonProps {
+    /**
+     * Specify the alignment of the accordion heading
+     * title and chevron.
+     */
+    align?: 'start' | 'end';
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Set number of items to render.
+     */
+    count?: number;
+    /**
+     * Specify whether an individual AccordionItem should
+     * be flush, default is false.
+     */
+    isFlush?: boolean;
+    /**
+     * `false` to not display the first item opened.
+     */
+    open?: boolean;
+}
+declare function AccordionSkeleton({ align, className, count, isFlush, open, ...rest }: AccordionSkeletonProps): JSX.Element;
+declare namespace AccordionSkeleton {
+    var propTypes: {
+        /**
+         * Specify the alignment of the accordion heading title and chevron.
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Set number of items to render
+         */
+        count: PropTypes.Requireable<number>;
+        /**
+         * Specify whether an individual AccordionItem should be flush, default is false
+         */
+        isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * `false` to not display the first item opened
+         */
+        open: PropTypes.Requireable<boolean>;
+    };
+    var defaultProps: {
+        open: boolean;
+        count: number;
+        align: string;
+    };
+}
+export default AccordionSkeleton;
+export { AccordionSkeleton };

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -26,11 +26,11 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _SkeletonText, _SkeletonText2, _SkeletonText3;
 function AccordionSkeleton(_ref) {
   let {
-    align,
+    align = 'end',
     className,
-    count,
+    count = 4,
     isFlush,
-    open,
+    open = true,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();