@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/UIShell/HeaderContainer.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+interface HeaderContainerRenderProps {
+    isSideNavExpanded: boolean;
+    onClickSideNavExpand: () => void;
+}
+interface HeaderContainerProps {
+    isSideNavExpanded?: boolean;
+    render: React.ComponentType<HeaderContainerRenderProps>;
+}
+declare function HeaderContainer({ render: Children, isSideNavExpanded, }: HeaderContainerProps): JSX.Element;
+declare namespace HeaderContainer {
+    var propTypes: {
+        /**
+         * Optionally provide a custom class name that is applied to the underlying <header>
+         */
+        isSideNavExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * A function or component that is passed an object parameter with two
+         * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
+         * component can then use those properties to within the components it
+         * returns, such as with the HeaderMenuButton and SideNav components.
+         */
+        render: PropTypes.Validator<NonNullable<PropTypes.ReactComponentLike>>;
+    };
+}
+export default HeaderContainer;

package/es/components/UIShell/HeaderContainer.js

@@ -11,10 +11,10 @@ import { useWindowEvent } from '../../internal/useEvent.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
-const HeaderContainer = _ref => {
+function HeaderContainer(_ref) {
   let {
-    isSideNavExpanded,
-    render: Children
+    render: Children,
+    isSideNavExpanded = false
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
@@ -30,17 +30,19 @@ const HeaderContainer = _ref => {
     isSideNavExpanded: isSideNavExpandedState,
     onClickSideNavExpand: handleHeaderMenuButtonClick
   });
-};
-
+}
 HeaderContainer.propTypes = {
   /**
    * Optionally provide a custom class name that is applied to the underlying <header>
    */
-  isSideNavExpanded: PropTypes.bool
-};
-HeaderContainer.defaultProps = {
-  isSideNavExpanded: false
+  isSideNavExpanded: PropTypes.bool,
+  /**
+   * A function or component that is passed an object parameter with two
+   * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
+   * component can then use those properties to within the components it
+   * returns, such as with the HeaderMenuButton and SideNav components.
+   */
+  render: PropTypes.elementType.isRequired
 };
-var HeaderContainer$1 = HeaderContainer;
 
-export { HeaderContainer$1 as default };
+export { HeaderContainer as default };

package/es/components/UIShell/HeaderGlobalAction.js

@@ -21,7 +21,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
  *
  * Note: children passed to this component should be an Icon.
  */
-
 const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function HeaderGlobalAction(_ref, ref) {
   let {
     'aria-label': ariaLabel,
@@ -59,29 +58,24 @@ HeaderGlobalAction.propTypes = {
    * Required props for the accessibility label of the button
    */
   ...AriaLabelPropType,
-
   /**
    * Provide a custom icon for this global action
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Optionally provide a custom class name that is applied to the underlying
    * button
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the action is currently active
    */
   isActive: PropTypes.bool,
-
   /**
    * Optionally provide an onClick handler that is called when the underlying
    * button fires it's onclick event
    */
   onClick: PropTypes.func,
-
   /**
    * Specify the alignment of the tooltip to the icon-only button.
    * Can be one of: start, center, or end.

package/es/components/UIShell/HeaderGlobalBar.js

@@ -10,7 +10,6 @@ import wrapComponent from '../../tools/wrapComponent.js';
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-
 var HeaderGlobalBar = wrapComponent({
   name: 'HeaderGlobalBar',
   className: prefix => `${prefix}--header__global`,

package/es/components/UIShell/HeaderMenu.js

@@ -22,27 +22,21 @@ import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
  * with managing focus. It also passes along refs to each child so that it can
  * help manage focus state of its children.
  */
-
 class HeaderMenu extends React__default.Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "_subMenus", /*#__PURE__*/React__default.createRef());
-
     _defineProperty(this, "handleOnClick", e => {
       const {
         current: subMenusNode
       } = this._subMenus;
-
       if (!subMenusNode || !subMenusNode.contains(e.target)) {
         e.preventDefault();
       }
-
       this.setState(prevState => ({
         expanded: !prevState.expanded
       }));
     });
-
     _defineProperty(this, "handleOnKeyDown", event => {
       // Handle enter or space key for toggling the expanded state of the menu.
       if (matches(event, [Enter, Space])) {
@@ -54,34 +48,27 @@ class HeaderMenu extends React__default.Component {
         return;
       }
     });
-
     _defineProperty(this, "handleOnBlur", event => {
       // Rough guess for a blur event that is triggered outside of our menu or
       // menubar context
       const itemTriggeredBlur = this.items.find(element => element === event.relatedTarget);
-
       if (event.relatedTarget && (event.relatedTarget.getAttribute('href') && event.relatedTarget.getAttribute('href') !== '#' || itemTriggeredBlur)) {
         return;
       }
-
       this.setState({
         expanded: false,
         selectedIndex: null
       });
     });
-
     _defineProperty(this, "handleMenuButtonRef", node => {
       if (this.props.focusRef) {
         this.props.focusRef(node);
       }
-
       this.menuButtonRef = node;
     });
-
     _defineProperty(this, "handleItemRef", index => node => {
       this.items[index] = node;
     });
-
     _defineProperty(this, "handleMenuClose", event => {
       // Handle ESC keydown for closing the expanded menu.
       if (matches(event, [Escape]) && this.state.expanded) {
@@ -90,13 +77,13 @@ class HeaderMenu extends React__default.Component {
         this.setState(() => ({
           expanded: false,
           selectedIndex: null
-        })); // Return focus to menu button when the user hits ESC.
+        }));
 
+        // Return focus to menu button when the user hits ESC.
         this.menuButtonRef.focus();
         return;
       }
     });
-
     _defineProperty(this, "_renderMenuItem", (item, index) => {
       if ( /*#__PURE__*/React__default.isValidElement(item)) {
         return /*#__PURE__*/React__default.cloneElement(item, {
@@ -104,7 +91,6 @@ class HeaderMenu extends React__default.Component {
         });
       }
     });
-
     this.state = {
       // Used to manage the expansion state of the menu
       expanded: false,
@@ -114,10 +100,34 @@ 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;
@@ -134,6 +144,7 @@ class HeaderMenu extends React__default.Component {
       // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
+    const hasActiveChildren = React__default.Children.toArray(children).some(child => child.props.isActive || child.props.isCurrentPage);
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy
@@ -148,15 +159,16 @@ class HeaderMenu extends React__default.Component {
       [`${prefix}--header__menu-title`]: true,
       // We set the current class only if `isActive` is passed in and we do
       // not have an `aria-current="page"` set for the breadcrumb item
-      [`${prefix}--header__menu-item--current`]: isActivePage
-    }); // Notes on eslint comments and based on the examples in:
+      [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveChildren && !this.state.expanded
+    });
+
+    // Notes on eslint comments and based on the examples in:
     // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
     // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
     // users
     // - aria-haspopup can definitely have the value "menu"
     // - aria-expanded is on their example node with role="menuitem"
     // - href can be set to javascript:void(0), ideally this will be a button
-
     return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
       className: itemClassName,
       onKeyDown: this.handleMenuClose,
@@ -179,61 +191,50 @@ 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", {
   /**
    * Required props for the accessibility label of the menu
    */
   ...AriaLabelPropType,
-
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
-
   /**
    * Provide a custom ref handler for the menu button
    */
   focusRef: PropTypes.func,
-
   /**
    * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    */
   isActive: PropTypes.bool,
-
   /**
    * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    * @deprecated Please use `isActive` instead. This will be removed in the next major release.
    */
   isCurrentPage: deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenu` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
-
   /**
    * Provide a label for the link text
    */
   menuLinkName: PropTypes.string.isRequired,
-
   /**
    * Optional component to render instead of string
    */
   renderMenuContent: PropTypes.func,
-
   /**
    * Optionally provide a tabIndex for the underlying menu button
    */
   tabIndex: PropTypes.number
 });
-
 _defineProperty(HeaderMenu, "contextType", PrefixContext);
-
 const HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
     focusRef: ref

package/es/components/UIShell/HeaderMenuButton.js

@@ -26,7 +26,8 @@ function HeaderMenuButton(_ref) {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const className = cx({ ...(typeof customClassName === 'string' && {
+  const className = cx({
+    ...(typeof customClassName === 'string' && {
       [customClassName]: !!customClassName
     }),
     [`${prefix}--header__action`]: true,
@@ -54,18 +55,15 @@ HeaderMenuButton.propTypes = {
    * Required props for accessibility label on the underlying menu button
    */
   ...AriaLabelPropType,
-
   /**
    * Optionally provide a custom class name that is applied to the underlying
    * button
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the menu button is "active".
    */
   isActive: PropTypes.bool,
-
   /**
    * Optionally provide an onClick handler that is called when the underlying
    * button fires it's onclick event

package/es/components/UIShell/HeaderMenuItem.js

@@ -25,11 +25,9 @@ const HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMen
     ...rest
   } = _ref;
   const prefix = usePrefix();
-
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
-
   const linkClassName = cx({
     [`${prefix}--header__menu-item`]: true,
     // We set the current class only if `isActive` is passed in and we do
@@ -55,35 +53,29 @@ HeaderMenuItem.propTypes = {
    * custom `Link` element
    */
   ...LinkPropTypes,
-
   /**
    * Pass in children that are either a string or can be read as a string by
    * screen readers
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
-
   /**
    * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    */
   isActive: PropTypes.bool,
-
   /**
    * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    * @deprecated Please use `isActive` instead. This will be removed in the next major release.
    */
   isCurrentPage: deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
-
   /**
    * Optionally supply a role for the underlying `<li>` node. Useful for resetting
    * `<ul>` semantics for menus.
    */
   role: PropTypes.string,
-
   /**
    * Specify the tab index of the Link
    */

package/es/components/UIShell/HeaderName.js

@@ -29,30 +29,25 @@ function HeaderName(_ref) {
     className: `${selectorPrefix}--header__name--prefix`
   }, prefix), "\xA0"), children);
 }
-
 HeaderName.propTypes = {
   /**
    * Pass in a valid `element` to replace the underlying `<a>` tag with a
    * custom `Link` element
    */
   ...LinkPropTypes,
-
   /**
    * Pass in children that are either a string or can be read as a string by
    * screen readers
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
-
   /**
    * Provide an href for the name to link to
    */
   href: PropTypes.string,
-
   /**
    * Optionally specify a prefix to your header name. Useful for companies, for
    * example: IBM [Product Name] versus solely [Product Name]

package/es/components/UIShell/HeaderNavigation.js

@@ -35,13 +35,11 @@ HeaderNavigation.propTypes = {
    * Required props for accessibility label on the underlying menu
    */
   ...AriaLabelPropType,
-
   /**
    * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
    * or `HeaderMenu`
    */
   children: PropTypes.node,
-
   /**
    * Optionally provide a custom class to apply to the underlying <nav> node
    */

package/es/components/UIShell/HeaderPanel.js

@@ -41,12 +41,10 @@ HeaderPanel.propTypes = {
    * Required props for accessibility label on the underlying menu
    */
   ...AriaLabelPropType,
-
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the panel is expanded
    */

package/es/components/UIShell/HeaderSideNavItems.js

@@ -30,13 +30,11 @@ HeaderSideNavItems.propTypes = {
    * The child nodes to be rendered
    */
   children: PropTypes.node,
-
   /**
    * Optionally provide a custom class name that is applied to the underlying
    * button
    */
   className: PropTypes.string,
-
   /**
    * Optionally specify if container will have a bottom divider to differentiate
    * between original sidenav items and header menu items. False by default.

package/es/components/UIShell/Link.js

@@ -14,7 +14,6 @@ import React__default from 'react';
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-
 const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
   const {
     element,
@@ -22,7 +21,8 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
     // eslint-disable-line no-unused-vars
     ...rest
   } = props;
-  return /*#__PURE__*/React__default.createElement(element, { ...rest,
+  return /*#__PURE__*/React__default.createElement(element, {
+    ...rest,
     ref
   });
 });
@@ -32,7 +32,6 @@ const LinkPropTypes = {
    * alternative tag names or custom components like `Link` from `react-router`.
    */
   element: PropTypes.elementType,
-
   /**
    * Property to indicate if the side nav container is open (or not). Use to
    * keep local state and styling in step with the SideNav expansion state.

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

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