@carbon/react 1.32.0-rc.0 → 1.33.0-rc.0

package/lib/components/Toggle/Toggle.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright IBM Corp. 2021, 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 React, { KeyboardEventHandler, MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+type ExcludedAttributes = 'aria-labelledby' | 'aria-checked' | 'type' | 'role' | 'id' | 'size' | 'onClick';
+export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ExcludedAttributes> {
+    /**
+     * Specify another element's id to be used as the label for this toggle
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Provide an id that unique represents the underlying `<button>`
+     */
+    id: string;
+    /**
+     * Specify the label for the "off" position
+     */
+    labelA?: string | undefined;
+    /**
+     * Specify the label for the "on" position
+     */
+    labelB?: string | undefined;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control. This should be provided unless 'aria-labelledby' is set instead
+     * or you use an external <label> element with its "for" attribute set to the
+     * toggle's id.
+     */
+    labelText?: string | undefined;
+    /**
+     * If true, the side labels (props.labelA and props.labelB) will be replaced by
+     * props.labelText (if passed), so that the toggle doesn't render a top label.
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide an event listener that is called when the control is toggled
+     */
+    onClick: MouseEventHandler<HTMLDivElement> | KeyboardEventHandler<HTMLDivElement> | undefined;
+    /**
+     * Provide an event listener that is called when the control is toggled
+     */
+    onToggle?(checked: boolean): void;
+    /**
+     * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+     */
+    size?: 'sm' | 'md' | undefined;
+    /**
+     * Whether the toggle should be read-only
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Specify whether the toggle should be on by default
+     */
+    defaultToggled?: boolean | undefined;
+    /**
+     * Specify whether the control is toggled
+     */
+    toggled?: boolean | undefined;
+}
+export declare function Toggle({ 'aria-labelledby': ariaLabelledby, className, defaultToggled, disabled, hideLabel, id, labelA, labelB, labelText, onClick, onToggle, readOnly, size, toggled, ...other }: ToggleProps): JSX.Element;
+export declare namespace Toggle {
+    var propTypes: {
+        /**
+         * Specify another element's id to be used as the label for this toggle
+         */
+        'aria-labelledby': PropTypes.Requireable<string>;
+        /**
+         * Specify a custom className to apply to the form-item node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the toggle should be on by default
+         */
+        defaultToggled: PropTypes.Requireable<boolean>;
+        /**
+         * Whether this control should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * If true, the side labels (props.labelA and props.labelB) will be replaced by
+         * props.labelText (if passed), so that the toggle doesn't render a top label.
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an id that unique represents the underlying `<button>`
+         */
+        id: PropTypes.Validator<string>;
+        /**
+         * Specify the label for the "off" position
+         */
+        labelA: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the label for the "on" position
+         */
+        labelB: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the text that will be read by a screen reader when visiting this
+         * control. This should be provided unless 'aria-labelledby' is set instead
+         * or you use an external <label> element with its "for" attribute set to the
+         * toggle's id.
+         */
+        labelText: PropTypes.Requireable<string>;
+        /**
+         * Provide an event listener that is called when the control is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an event listener that is called when the control is toggled
+         */
+        onToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Whether the toggle should be read-only
+         */
+        readOnly: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the control is toggled
+         */
+        toggled: PropTypes.Requireable<boolean>;
+    };
+}
+export default Toggle;

package/lib/components/Toggle/Toggle.js

@@ -88,7 +88,7 @@ function Toggle(_ref) {
           handleClick(e);
           buttonElement.current.focus();
         }
-      } : null
+      } : undefined
     }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
       ref: buttonElement,
       id: id,
@@ -100,7 +100,7 @@ function Toggle(_ref) {
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
-      htmlFor: ariaLabelledby ? null : id,
+      htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
     }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
       className: labelTextClasses

package/lib/components/Toggle/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { default as Toggle, ToggleProps } from './Toggle';
+export * from './Toggle.Skeleton';
+export default Toggle;
+export { Toggle };
+export type { ToggleProps };

package/lib/components/UIShell/HeaderMenu.js

@@ -36,6 +36,9 @@ class HeaderMenu extends React__default["default"].Component {
   constructor(props) {
     super(props);
     _rollupPluginBabelHelpers.defineProperty(this, "_subMenus", /*#__PURE__*/React__default["default"].createRef());
+    /**
+     * Toggle the expanded state of the menu on click.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnClick", e => {
       const {
         current: subMenusNode
@@ -47,6 +50,9 @@ class HeaderMenu extends React__default["default"].Component {
         expanded: !prevState.expanded
       }));
     });
+    /**
+     * Keyboard event handler for the entire menu.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnKeyDown", event => {
       // Handle enter or space key for toggling the expanded state of the menu.
       if (match.matches(event, [keys.Enter, keys.Space])) {
@@ -58,6 +64,11 @@ class HeaderMenu extends React__default["default"].Component {
         return;
       }
     });
+    /**
+     * Handle our blur event from our underlying menuitems. Will mostly be used
+     * for toggling the expansion status of our menu in response to a user
+     * clicking off of the menu or menubar.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnBlur", event => {
       // Rough guess for a blur event that is triggered outside of our menu or
       // menubar context
@@ -70,12 +81,24 @@ class HeaderMenu extends React__default["default"].Component {
         selectedIndex: null
       });
     });
+    /**
+     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
+     * forward along the node.
+     *
+     * This is useful when this component is a child in a
+     * menu or menubar as it will allow the parent to explicitly focus the menu
+     * button node when that child should receive focus.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleMenuButtonRef", node => {
       if (this.props.focusRef) {
         this.props.focusRef(node);
       }
       this.menuButtonRef = node;
     });
+    /**
+     * Handles individual menuitem refs. We assign them to a class instance
+     * property so that we can properly manage focus of our children.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => node => {
       this.items[index] = node;
     });
@@ -94,6 +117,12 @@ class HeaderMenu extends React__default["default"].Component {
         return;
       }
     });
+    /**
+     * We capture the `ref` for each child inside of `this.items` to properly
+     * manage focus. In addition to this focus management, all items receive a
+     * `tabIndex: -1` so the user won't hit a large number of items in their tab
+     * sequence when they might not want to go through all the items.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_renderMenuItem", (item, index) => {
       if ( /*#__PURE__*/React__default["default"].isValidElement(item)) {
         return /*#__PURE__*/React__default["default"].cloneElement(item, {
@@ -110,35 +139,6 @@ class HeaderMenu extends React__default["default"].Component {
     };
     this.items = [];
   }
-
-  /**
-   * Toggle the expanded state of the menu on click.
-   */
-
-  /**
-   * Keyboard event handler for the entire menu.
-   */
-
-  /**
-   * Handle our blur event from our underlying menuitems. Will mostly be used
-   * for toggling the expansion status of our menu in response to a user
-   * clicking off of the menu or menubar.
-   */
-
-  /**
-   * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
-   * forward along the node.
-   *
-   * This is useful when this component is a child in a
-   * menu or menubar as it will allow the parent to explicitly focus the menu
-   * button node when that child should receive focus.
-   */
-
-  /**
-   * Handles individual menuitem refs. We assign them to a class instance
-   * property so that we can properly manage focus of our children.
-   */
-
   render() {
     const prefix = this.context;
     const {
@@ -201,13 +201,6 @@ class HeaderMenu extends React__default["default"].Component {
       className: `${prefix}--header__menu`
     }), React__default["default"].Children.map(children, this._renderMenuItem)));
   }
-
-  /**
-   * We capture the `ref` for each child inside of `this.items` to properly
-   * manage focus. In addition to this focus management, all items receive a
-   * `tabIndex: -1` so the user won't hit a large number of items in their tab
-   * sequence when they might not want to go through all the items.
-   */
 }
 _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
   /**

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

@@ -0,0 +1,39 @@
+/**
+ * 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 { type ElementType } from 'react';
+import PropTypes from 'prop-types';
+import { type LinkProps } from './Link';
+type HeaderNameProps<E extends ElementType> = LinkProps<E> & {
+    prefix?: string | undefined;
+};
+declare function HeaderName<E extends ElementType = 'a'>({ children, className: customClassName, prefix, ...rest }: HeaderNameProps<E>): JSX.Element;
+declare namespace HeaderName {
+    var propTypes: {
+        /**
+         * Pass in children that are either a string or can be read as a string by
+         * screen readers
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Optionally provide a custom class to apply to the underlying `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an href for the name to link to
+         */
+        href: PropTypes.Requireable<string>;
+        /**
+         * Optionally specify a prefix to your header name. Useful for companies, for
+         * example: IBM [Product Name] versus solely [Product Name]
+         */
+        prefix: PropTypes.Requireable<string>;
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        isSideNavExpanded: PropTypes.Requireable<boolean>;
+    };
+}
+export default HeaderName;

package/lib/components/UIShell/HeaderName.js

@@ -26,15 +26,13 @@ function HeaderName(_ref) {
   let {
     children,
     className: customClassName,
-    prefix,
-    href,
+    prefix = 'IBM',
     ...rest
   } = _ref;
   const selectorPrefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${selectorPrefix}--header__name`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: className,
-    href: href
+    className: className
   }), prefix && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${selectorPrefix}--header__name--prefix`
   }, prefix), "\xA0"), children);
@@ -64,8 +62,5 @@ HeaderName.propTypes = {
    */
   prefix: PropTypes__default["default"].string
 };
-HeaderName.defaultProps = {
-  prefix: 'IBM'
-};
 
 exports["default"] = HeaderName;

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?.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/Link.js

@@ -64,6 +64,7 @@ const LinkPropTypes = {
 };
 Link.displayName = 'Link';
 Link.propTypes = LinkPropTypes;
+var Link$1 = Link;
 
 exports.LinkPropTypes = LinkPropTypes;
-exports["default"] = Link;
+exports["default"] = Link$1;

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
    */