@carbon/react 1.28.0 → 1.29.0-rc.0

package/es/components/UIShell/SideNav.js

@@ -6,35 +6,37 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState } from 'react';
+import React__default, { useRef, useState, isValidElement } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 // import SideNavFooter from './SideNavFooter';
 
-const SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref) {
-  const {
+function SideNavRenderFunction(_ref, ref) {
+  let {
     expanded: expandedProp,
-    defaultExpanded,
-    isChildOfHeader,
+    defaultExpanded = false,
+    isChildOfHeader = true,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     children,
     onToggle,
     className: customClassName,
     // TO-DO: comment back in when footer is added for rails
-    // translateById: t,
-    isFixedNav,
+    // translateById: t = (id) => translations[id],
+    isFixedNav = false,
     isRail,
-    isPersistent,
-    addFocusListeners,
-    addMouseListeners,
+    isPersistent = true,
+    addFocusListeners = true,
+    addMouseListeners = true,
     onOverlayClick,
     ...other
-  } = props;
+  } = _ref;
   const prefix = usePrefix();
   const {
     current: controlled
@@ -67,12 +69,11 @@ const SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, r
   //   ? t('carbon.sidenav.state.open')
   //   : t('carbon.sidenav.state.closed');
 
-  const className = cx({
+  const className = cx(customClassName, {
     [`${prefix}--side-nav`]: true,
     [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
     [`${prefix}--side-nav--rail`]: isRail,
-    [customClassName]: !!customClassName,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
     [`${prefix}--side-nav--hidden`]: !isPersistent
   });
@@ -84,19 +85,25 @@ const SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, r
 
   if (isRail) {
     childrenToRender = React__default.Children.map(children, child => {
-      var _child$type, _child$type2;
-
       // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
-      let currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded; // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+      const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
+
+      if ( /*#__PURE__*/isValidElement(child)) {
+        var _childJsxElement$type, _childJsxElement$type2;
+
+        const childJsxElement = child; // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+
+        return /*#__PURE__*/React__default.cloneElement(childJsxElement, { ...(CARBON_SIDENAV_ITEMS.includes(((_childJsxElement$type = childJsxElement.type) === null || _childJsxElement$type === void 0 ? void 0 : _childJsxElement$type.displayName) ?? ((_childJsxElement$type2 = childJsxElement.type) === null || _childJsxElement$type2 === void 0 ? void 0 : _childJsxElement$type2.name)) ? {
+            isSideNavExpanded: currentExpansionState
+          } : {})
+        });
+      }
 
-      return /*#__PURE__*/React__default.cloneElement(child, { ...(CARBON_SIDENAV_ITEMS.includes(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) ?? ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) ? {
-          isSideNavExpanded: currentExpansionState
-        } : {})
-      });
+      return child;
     });
   }
 
-  let eventHandlers = {};
+  const eventHandlers = {};
 
   if (addFocusListeners) {
     eventHandlers.onFocus = event => {
@@ -110,6 +117,12 @@ const SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, r
         handleToggle(event, false);
       }
     };
+
+    eventHandlers.onKeyDown = event => {
+      if (match(event, Escape)) {
+        handleToggle(event, false);
+      }
+    };
   }
 
   if (addMouseListeners && isRail) {
@@ -128,24 +141,10 @@ const SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, r
     ref: ref,
     className: `${prefix}--side-nav__navigation ${className}`
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
-});
+}
+
+const SideNav = /*#__PURE__*/React__default.forwardRef(SideNavRenderFunction);
 SideNav.displayName = 'SideNav';
-SideNav.defaultProps = {
-  // TO-DO: comment back in when footer is added for rails
-  // translateById: (id) => {
-  //   const translations = {
-  //     'carbon.sidenav.state.open': 'Close',
-  //     'carbon.sidenav.state.closed': 'Open',
-  //   };
-  //   return translations[id];
-  // },
-  defaultExpanded: false,
-  isChildOfHeader: true,
-  isFixedNav: false,
-  isPersistent: true,
-  addFocusListeners: true,
-  addMouseListeners: true
-};
 SideNav.propTypes = {
   /**
    * Required props for accessibility label on the underlying menu

package/es/index.js

@@ -94,6 +94,7 @@ export { default as TreeView } from './components/TreeView/TreeView.js';
 export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
 export { default as HeaderName } from './components/UIShell/HeaderName.js';
 export { default as HeaderNavigation } from './components/UIShell/HeaderNavigation.js';
+export { default as HeaderSideNavItems } from './components/UIShell/HeaderSideNavItems.js';
 export { default as SkipToContent } from './components/UIShell/SkipToContent.js';
 export { default as SideNavDivider } from './components/UIShell/SideNavDivider.js';
 export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js';
@@ -205,7 +206,6 @@ export { default as HeaderGlobalBar } from './components/UIShell/HeaderGlobalBar
 export { default as HeaderMenu } from './components/UIShell/HeaderMenu.js';
 export { default as HeaderMenuItem } from './components/UIShell/HeaderMenuItem.js';
 export { default as HeaderPanel } from './components/UIShell/HeaderPanel.js';
-export { default as HeaderSideNavItems } from './components/UIShell/HeaderSideNavItems.js';
 export { default as Switcher } from './components/UIShell/Switcher.js';
 export { default as SwitcherItem } from './components/UIShell/SwitcherItem.js';
 export { default as SwitcherDivider } from './components/UIShell/SwitcherDivider.js';

package/es/internal/useEvent.js

@@ -7,6 +7,25 @@
 
 import { useRef, useEffect } from 'react';
 
+function useEvent(elementOrRef, eventName, callback) {
+  const savedCallback = useRef(null);
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  useEffect(() => {
+    function handler(event) {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    }
+
+    const element = elementOrRef.current ?? elementOrRef;
+    element.addEventListener(eventName, handler);
+    return () => {
+      element.removeEventListener(eventName, handler);
+    };
+  }, [elementOrRef, eventName]);
+}
 function useWindowEvent(eventName, callback) {
   const savedCallback = useRef(null);
   useEffect(() => {
@@ -26,4 +45,4 @@ function useWindowEvent(eventName, callback) {
   }, [eventName]);
 }
 
-export { useWindowEvent };
+export { useEvent, useWindowEvent };

package/es/types/common.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type ReactAttr<T = HTMLElement> = React.HTMLAttributes<T>;
+export type ForwardRefProps<T, P = unknown> = React.PropsWithoutRef<React.PropsWithChildren<P>> & React.RefAttributes<T>;
+export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<ForwardRefProps<T, P>>;
+/**
+ * For "as" props.  Creates an "as" property that supports native html tags such as 'span', 'a', 'button' as well as custom functional components
+ * All native props for the supplied html tag/component are inferred as part of the base component props, allowing us to use props like `href` on an 'a' element ect
+ */
+export type PolymorphicProps<Element extends React.ElementType, Props> = Props & Omit<React.ComponentProps<Element>, 'as'> & {
+    as?: Element;
+};

package/lib/components/Checkbox/Checkbox.d.ts

@@ -44,7 +44,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
-    invalidText: React.ReactNode;
+    invalidText?: React.ReactNode;
     /**
      * Specify whether the Checkbox is currently invalid
      */
@@ -52,7 +52,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
-    warnText: React.ReactNode;
+    warnText?: React.ReactNode;
     /**
      * Provide an optional handler that is called when the internal state of
      * Checkbox changes. This handler is called with event and state info.

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

@@ -0,0 +1,51 @@
+/**
+ * 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 { type ElementType } from 'react';
+import type { PolymorphicProps } from '../../types/common';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type SectionBaseProps = {
+    level?: HeadingLevel;
+};
+type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
+export declare function Section<E extends ElementType = 'section'>({ as: BaseComponent, level: levelOverride, ...rest }: SectionProps<E>): JSX.Element;
+export declare namespace Section {
+    var propTypes: {
+        /**
+         * Provide an alternative tag or component to use instead of the default
+         * <section> element
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Specify the content that will be placed in the component
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify a class name for the outermost node of the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Overrides the level of the section
+         */
+        level: PropTypes.Requireable<number>;
+    };
+}
+type HeadingProps = JSX.IntrinsicElements[`h${HeadingLevel}`];
+export declare function Heading(props: HeadingProps): JSX.Element;
+export declare namespace Heading {
+    var propTypes: {
+        /**
+         * Specify the content that will be placed in the component
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify a class name for the outermost node of the component
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export {};

package/lib/components/Heading/index.js

@@ -18,21 +18,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const HeadingContext = /*#__PURE__*/React__default["default"].createContext(1);
-
 function Section(_ref) {
   let {
     as: BaseComponent = 'section',
     level: levelOverride,
-    children,
     ...rest
   } = _ref;
   const parentLevel = React__default["default"].useContext(HeadingContext);
-  const level = typeof levelOverride !== 'undefined' ? levelOverride : parentLevel + 1;
+  const level = levelOverride ?? parentLevel + 1;
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(HeadingContext.Provider, {
     value: Math.min(level, 6)
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, rest, children));
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, rest));
 }
-
 Section.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default
@@ -55,12 +53,10 @@ Section.propTypes = {
    */
   level: PropTypes__default["default"].number
 };
-
 function Heading(props) {
-  const level = React__default["default"].useContext(HeadingContext);
-  return /*#__PURE__*/React__default["default"].createElement(`h${level}`, props);
+  const HeadingIntrinsic = `h${React__default["default"].useContext(HeadingContext)}`;
+  return /*#__PURE__*/React__default["default"].createElement(HeadingIntrinsic, props);
 }
-
 Heading.propTypes = {
   /**
    * Specify the content that will be placed in the component

package/lib/components/StructuredList/StructuredList.Skeleton.js

@@ -26,15 +26,13 @@ var _span, _span2, _span3;
 const StructuredListSkeleton = _ref => {
   let {
     rowCount,
-    border,
     className,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const StructuredListSkeletonClasses = cx__default["default"](className, {
     [`${prefix}--skeleton`]: true,
-    [`${prefix}--structured-list`]: true,
-    [`${prefix}--structured-list--border`]: border
+    [`${prefix}--structured-list`]: true
   });
   const rows = [];
 
@@ -69,11 +67,6 @@ const StructuredListSkeleton = _ref => {
 };
 
 StructuredListSkeleton.propTypes = {
-  /**
-   * Specify whether a border should be added to your StructuredListSkeleton
-   */
-  border: PropTypes__default["default"].bool,
-
   /**
    * Specify an optional className to add.
    */
@@ -85,8 +78,7 @@ StructuredListSkeleton.propTypes = {
   rowCount: PropTypes__default["default"].number
 };
 StructuredListSkeleton.defaultProps = {
-  rowCount: 5,
-  border: false
+  rowCount: 5
 };
 var StructuredListSkeleton$1 = StructuredListSkeleton;
 

package/lib/components/StructuredList/StructuredList.js

@@ -40,7 +40,7 @@ function StructuredListWrapper(props) {
   const classes = cx__default["default"](`${prefix}--structured-list`, className, {
     [`${prefix}--structured-list--selection`]: selection,
     [`${prefix}--structured-list--condensed`]: isCondensed,
-    [`${prefix}--structured-list--flush`]: isFlush
+    [`${prefix}--structured-list--flush`]: isFlush && !selection
   });
   const [selectedRow, setSelectedRow] = React__default["default"].useState(null);
   return /*#__PURE__*/React__default["default"].createElement(GridSelectedRowStateContext.Provider, {
@@ -82,7 +82,7 @@ StructuredListWrapper.propTypes = {
   isCondensed: PropTypes__default["default"].bool,
 
   /**
-   * Specify if structured list is flush, default is false
+   * Specify if structured list is flush, not valid for selection variant, default is false
    */
   isFlush: PropTypes__default["default"].bool,
 

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

@@ -0,0 +1,62 @@
+/**
+ * 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, { ElementType, type PropsWithChildren } from 'react';
+import { PolymorphicProps } from '../../types/common';
+interface GlobalThemeProps {
+    theme?: 'white' | 'g10' | 'g90' | 'g100';
+}
+export declare const ThemeContext: React.Context<GlobalThemeProps>;
+export declare function GlobalTheme({ children, theme, }: PropsWithChildren<GlobalThemeProps>): JSX.Element;
+export declare namespace GlobalTheme {
+    var propTypes: {
+        /**
+         * Provide child elements to be rendered inside of `GlobalTheme`, this is
+         * typically the root of your app
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the global theme for your app
+         */
+        theme: PropTypes.Requireable<string>;
+    };
+}
+type ThemeBaseProps = GlobalThemeProps & {
+    className?: string;
+};
+type ThemeProps<E extends ElementType> = PolymorphicProps<E, ThemeBaseProps>;
+/**
+ * Specify the theme to be applied to a page, or a region in a page
+ */
+export declare function Theme<E extends ElementType = 'div'>({ as: BaseComponent, className: customClassName, theme, ...rest }: ThemeProps<E>): JSX.Element;
+export declare namespace Theme {
+    var propTypes: {
+        /**
+         * Specify a custom component or element to be rendered as the top-level
+         * element in the component
+         */
+        as: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactComponentLike | null | undefined>>;
+        /**
+         * Provide child elements to be rendered inside of `Theme`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be used on the outermost element rendered by
+         * the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the theme
+         */
+        theme: PropTypes.Requireable<string>;
+    };
+}
+/**
+ * Get access to the current theme
+ */
+export declare function useTheme(): GlobalThemeProps;
+export {};

package/lib/components/Theme/index.js

@@ -51,14 +51,13 @@ GlobalTheme.propTypes = {
    */
   theme: PropTypes__default["default"].oneOf(['white', 'g10', 'g90', 'g100'])
 };
+
 /**
  * Specify the theme to be applied to a page, or a region in a page
  */
-
 function Theme(_ref2) {
   let {
     as: BaseComponent = 'div',
-    children,
     className: customClassName,
     theme,
     ...rest
@@ -76,13 +75,14 @@ function Theme(_ref2) {
       theme
     };
   }, [theme]);
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(LayerContext.LayerContext.Provider, {
     value: 1
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
-  }), children)));
+  }))));
 }
 Theme.propTypes = {
   /**

package/lib/components/UIShell/HeaderContainer.js

@@ -11,6 +11,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var PropTypes = require('prop-types');
 var React = require('react');
+var useEvent = require('../../internal/useEvent.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 }; }
 
@@ -24,6 +27,11 @@ const HeaderContainer = _ref => {
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
+  useEvent.useEvent(window, 'keydown', event => {
+    if (match.match(event, keys.Escape)) {
+      setIsSideNavExpandedState(false);
+    }
+  });
   const handleHeaderMenuButtonClick = React.useCallback(() => {
     setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);

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

@@ -0,0 +1,38 @@
+/**
+ * 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 ComponentProps } from 'react';
+import PropTypes from 'prop-types';
+type HeaderMenuButtonBaseProps = Omit<ComponentProps<'button'>, 'title' | 'type'>;
+interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    renderMenuIcon?: JSX.Element;
+    renderCloseIcon?: JSX.Element;
+    isActive?: boolean;
+    isCollapsible?: boolean;
+}
+declare function HeaderMenuButton({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className: customClassName, renderMenuIcon, renderCloseIcon, isActive, isCollapsible, ...rest }: HeaderMenuButtonProps): JSX.Element;
+declare namespace HeaderMenuButton {
+    var propTypes: {
+        /**
+         * Optionally provide a custom class name that is applied to the underlying
+         * button
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the menu button is "active".
+         */
+        isActive: PropTypes.Requireable<boolean>;
+        /**
+         * Optionally provide an onClick handler that is called when the underlying
+         * button fires it's onclick event
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default HeaderMenuButton;

package/lib/components/UIShell/HeaderMenuButton.js

@@ -24,7 +24,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Menu, _Close;
-
 function HeaderMenuButton(_ref) {
   let {
     'aria-label': ariaLabel,
@@ -32,38 +31,34 @@ function HeaderMenuButton(_ref) {
     className: customClassName,
     renderMenuIcon,
     renderCloseIcon,
-    onClick,
     isActive,
     isCollapsible,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"]({
-    [customClassName]: !!customClassName,
+  const className = cx__default["default"]({ ...(typeof customClassName === 'string' && {
+      [customClassName]: !!customClassName
+    }),
     [`${prefix}--header__action`]: true,
     [`${prefix}--header__menu-trigger`]: true,
     [`${prefix}--header__action--active`]: isActive,
     [`${prefix}--header__menu-toggle`]: true,
     [`${prefix}--header__menu-toggle__hidden`]: !isCollapsible
   });
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
   const menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React__default["default"].createElement(iconsReact.Menu, {
     size: 20
   }));
   const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
     size: 20
   }));
-  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     className: className,
     title: ariaLabel,
-    type: "button",
-    onClick: onClick
+    type: "button"
   }), isActive ? closeIcon : menuIcon);
 }
-
 HeaderMenuButton.propTypes = {
   /**
    * Required props for accessibility label on the underlying menu button

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

@@ -0,0 +1,24 @@
+/**
+ * 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 ComponentProps } from 'react';
+import PropTypes from 'prop-types';
+type HeaderNavigationProps = ComponentProps<'nav'>;
+declare function HeaderNavigation({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className: customClassName, ...rest }: HeaderNavigationProps): JSX.Element;
+declare namespace HeaderNavigation {
+    var propTypes: {
+        /**
+         * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
+         * or `HeaderMenu`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Optionally provide a custom class to apply to the underlying <nav> node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default HeaderNavigation;

package/lib/components/UIShell/HeaderNavigation.js

@@ -22,29 +22,24 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function HeaderNavigation(props) {
-  const {
+function HeaderNavigation(_ref) {
+  let {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     children,
     className: customClassName,
     ...rest
-  } = props;
+  } = _ref;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"](`${prefix}--header__nav`, customClassName); // Assign both label strategies in this option, only one should be defined
-  // so when we spread that should be the one that is applied to the node
-
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
-  return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
+  const className = cx__default["default"](`${prefix}--header__nav`, customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     className: className
   }), /*#__PURE__*/React__default["default"].createElement("ul", {
     className: `${prefix}--header__menu-bar`
   }, children));
 }
-
 HeaderNavigation.propTypes = {
   /**
    * Required props for accessibility label on the underlying menu
@@ -63,5 +58,4 @@ HeaderNavigation.propTypes = {
   className: PropTypes__default["default"].string
 };
 
-exports.HeaderNavigation = HeaderNavigation;
 exports["default"] = HeaderNavigation;