@carbon/react 1.32.0-rc.0 → 1.32.0

package/es/components/Tabs/Tabs.d.ts

@@ -104,6 +104,10 @@ export interface TabListProps extends DivAttributes {
      * Specify whether component is contained type
      */
     contained?: boolean;
+    /**
+     * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+     */
+    fullWidth?: boolean;
     /**
      * If using `IconTab`, specify the size of the icon being used.
      */
@@ -132,7 +136,7 @@ export interface TabListProps extends DivAttributes {
      */
     scrollIntoView?: boolean;
 }
-declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): JSX.Element;
+declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): JSX.Element;
 declare namespace TabList {
     var propTypes: {
         /**
@@ -158,6 +162,10 @@ declare namespace TabList {
          * Specify whether component is contained type
          */
         contained: PropTypes.Requireable<boolean>;
+        /**
+         * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+         */
+        fullWidth: PropTypes.Requireable<boolean>;
         /**
          * If using `IconTab`, specify the size of the icon being used.
          */

package/es/components/Tabs/Tabs.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
+import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
@@ -24,6 +25,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { usePressable } from './usePressable.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { useEvent } from '../../internal/useEvent.js';
+import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowRight, ArrowLeft, Home, End, Delete } from '../../internal/keyboard/keys.js';
 
@@ -47,6 +49,7 @@ const TabContext = /*#__PURE__*/React__default.createContext({
   index: 0,
   hasSecondaryLabel: false
 });
+const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
 
 // Used to keep track of position in a list of tab panels
 const TabPanelContext = /*#__PURE__*/React__default.createContext(0);
@@ -156,6 +159,7 @@ function TabList(_ref2) {
     children,
     className: customClassName,
     contained = false,
+    fullWidth = false,
     iconSize,
     leftOverflowButtonProps,
     light,
@@ -183,12 +187,15 @@ function TabList(_ref2) {
       return isElement(child) && !!child.props.secondaryLabel;
     });
   }
+  const isLg = useMatchMedia(lgMediaQuery);
+  const distributeWidth = fullWidth && contained && isLg && React__default.Children.toArray(children).length < 9;
   const className = cx(`${prefix}--tabs`, {
     [`${prefix}--tabs--contained`]: contained,
     [`${prefix}--tabs--light`]: light,
     [`${prefix}--tabs__icon--default`]: iconSize === 'default',
     [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
-    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs
+    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
+    [`${prefix}--tabs--full-width`]: distributeWidth
   }, customClassName);
 
   // Previous Button
@@ -396,6 +403,10 @@ TabList.propTypes = {
    * Specify whether component is contained type
    */
   contained: PropTypes.bool,
+  /**
+   * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+   */
+  fullWidth: PropTypes.bool,
   /**
    * If using `IconTab`, specify the size of the icon being used.
    */
@@ -574,7 +585,8 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   })), /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--tabs__nav-item-label`
+    className: `${prefix}--tabs__nav-item-label`,
+    title: children
   }, children), /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
@@ -582,7 +594,8 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--tabs__nav-item-secondary-label`
+    className: `${prefix}--tabs__nav-item-secondary-label`,
+    title: secondaryLabel
   }, secondaryLabel));
 });
 Tab.propTypes = {

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" | "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" | "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/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/lib/components/Tabs/Tabs.d.ts

@@ -104,6 +104,10 @@ export interface TabListProps extends DivAttributes {
      * Specify whether component is contained type
      */
     contained?: boolean;
+    /**
+     * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+     */
+    fullWidth?: boolean;
     /**
      * If using `IconTab`, specify the size of the icon being used.
      */
@@ -132,7 +136,7 @@ export interface TabListProps extends DivAttributes {
      */
     scrollIntoView?: boolean;
 }
-declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): JSX.Element;
+declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): JSX.Element;
 declare namespace TabList {
     var propTypes: {
         /**
@@ -158,6 +162,10 @@ declare namespace TabList {
          * Specify whether component is contained type
          */
         contained: PropTypes.Requireable<boolean>;
+        /**
+         * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+         */
+        fullWidth: PropTypes.Requireable<boolean>;
         /**
          * If using `IconTab`, specify the size of the icon being used.
          */

package/lib/components/Tabs/Tabs.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var iconsReact = require('@carbon/icons-react');
+var layout = require('@carbon/layout');
 var cx = require('classnames');
 var debounce = require('lodash.debounce');
 var PropTypes = require('prop-types');
@@ -28,6 +29,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var usePressable = require('./usePressable.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
+var useMatchMedia = require('../../internal/useMatchMedia.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -58,6 +60,7 @@ const TabContext = /*#__PURE__*/React__default["default"].createContext({
   index: 0,
   hasSecondaryLabel: false
 });
+const lgMediaQuery = `(min-width: ${layout.breakpoints.lg.width})`;
 
 // Used to keep track of position in a list of tab panels
 const TabPanelContext = /*#__PURE__*/React__default["default"].createContext(0);
@@ -167,6 +170,7 @@ function TabList(_ref2) {
     children,
     className: customClassName,
     contained = false,
+    fullWidth = false,
     iconSize,
     leftOverflowButtonProps,
     light,
@@ -194,12 +198,15 @@ function TabList(_ref2) {
       return reactIs.isElement(child) && !!child.props.secondaryLabel;
     });
   }
+  const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
+  const distributeWidth = fullWidth && contained && isLg && React__default["default"].Children.toArray(children).length < 9;
   const className = cx__default["default"](`${prefix}--tabs`, {
     [`${prefix}--tabs--contained`]: contained,
     [`${prefix}--tabs--light`]: light,
     [`${prefix}--tabs__icon--default`]: iconSize === 'default',
     [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
-    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs
+    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
+    [`${prefix}--tabs--full-width`]: distributeWidth
   }, customClassName);
 
   // Previous Button
@@ -407,6 +414,10 @@ TabList.propTypes = {
    * Specify whether component is contained type
    */
   contained: PropTypes__default["default"].bool,
+  /**
+   * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+   */
+  fullWidth: PropTypes__default["default"].bool,
   /**
    * If using `IconTab`, specify the size of the icon being used.
    */
@@ -585,7 +596,8 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
   })), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--tabs__nav-item-label`
+    className: `${prefix}--tabs__nav-item-label`,
+    title: children
   }, children), /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"](`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
@@ -593,7 +605,8 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
   }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--tabs__nav-item-secondary-label`
+    className: `${prefix}--tabs__nav-item-secondary-label`,
+    title: secondaryLabel
   }, secondaryLabel));
 });
 Tab.propTypes = {

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" | "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" | "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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.32.0-rc.0",
+  "version": "1.32.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.15.0",
     "@carbon/icons-react": "^11.21.0",
     "@carbon/layout": "^11.15.0",
-    "@carbon/styles": "^1.32.0-rc.0",
+    "@carbon/styles": "^1.32.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -134,5 +134,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "fe40fbf428231bd35f6bc8cc871ea09c7afa5051"
+  "gitHead": "507ddae3074272a3be1ff98b3940532d74788d3c"
 }