@carbon/react 1.32.0-rc.0 → 1.33.0-rc.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/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/es/components/Toggle/Toggle.js

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

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

@@ -26,6 +26,9 @@ class HeaderMenu extends React__default.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "_subMenus", /*#__PURE__*/React__default.createRef());
+    /**
+     * Toggle the expanded state of the menu on click.
+     */
     _defineProperty(this, "handleOnClick", e => {
       const {
         current: subMenusNode
@@ -37,6 +40,9 @@ class HeaderMenu extends React__default.Component {
         expanded: !prevState.expanded
       }));
     });
+    /**
+     * Keyboard event handler for the entire menu.
+     */
     _defineProperty(this, "handleOnKeyDown", event => {
       // Handle enter or space key for toggling the expanded state of the menu.
       if (matches(event, [Enter, Space])) {
@@ -48,6 +54,11 @@ class HeaderMenu extends React__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.
+     */
     _defineProperty(this, "handleOnBlur", event => {
       // Rough guess for a blur event that is triggered outside of our menu or
       // menubar context
@@ -60,12 +71,24 @@ class HeaderMenu extends React__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.
+     */
     _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.
+     */
     _defineProperty(this, "handleItemRef", index => node => {
       this.items[index] = node;
     });
@@ -84,6 +107,12 @@ class HeaderMenu extends React__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.
+     */
     _defineProperty(this, "_renderMenuItem", (item, index) => {
       if ( /*#__PURE__*/React__default.isValidElement(item)) {
         return /*#__PURE__*/React__default.cloneElement(item, {
@@ -100,35 +129,6 @@ class HeaderMenu extends React__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 {
@@ -191,13 +191,6 @@ class HeaderMenu extends React__default.Component {
       className: `${prefix}--header__menu`
     }), React__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.
-   */
 }
 _defineProperty(HeaderMenu, "propTypes", {
   /**

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

@@ -16,15 +16,13 @@ function HeaderName(_ref) {
   let {
     children,
     className: customClassName,
-    prefix,
-    href,
+    prefix = 'IBM',
     ...rest
   } = _ref;
   const selectorPrefix = usePrefix();
   const className = cx(`${selectorPrefix}--header__name`, customClassName);
   return /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
-    className: className,
-    href: href
+    className: className
   }), prefix && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: `${selectorPrefix}--header__name--prefix`
   }, prefix), "\xA0"), children);
@@ -54,8 +52,5 @@ HeaderName.propTypes = {
    */
   prefix: PropTypes.string
 };
-HeaderName.defaultProps = {
-  prefix: 'IBM'
-};
 
 export { HeaderName as default };

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

@@ -55,5 +55,6 @@ const LinkPropTypes = {
 };
 Link.displayName = 'Link';
 Link.propTypes = LinkPropTypes;
+var Link$1 = Link;
 
-export { LinkPropTypes, Link as default };
+export { LinkPropTypes, Link$1 as default };

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;