@carbon/react 1.28.0 → 1.29.0

package/es/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/es/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/es/components/Heading/index.js

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

package/es/components/Slider/Slider.d.ts

@@ -41,9 +41,13 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     inputType?: string;
     /**
-     * `true` to specify if the control is invalid.
+     * `Specify whether the Slider is currently invalid
      */
     invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the Slider is in an invalid state
+     */
+    invalidText?: React.ReactNode;
     /**
      * The label for the slider.
      */
@@ -119,6 +123,14 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * The value.
      */
     value: number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
 }
 interface CalcValueProps {
     clientX?: number;
@@ -160,9 +172,13 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         inputType: PropTypes.Requireable<string>;
         /**
-         * `true` to specify if the control is invalid.
+         * `Specify whether the Slider is currently invalid
          */
         invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the Slider is in an invalid state
+         */
+        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * The label for the slider.
          */
@@ -229,6 +245,14 @@ export default class Slider extends PureComponent<SliderProps> {
          * The value.
          */
         value: PropTypes.Validator<number>;
+        /**
+         * `Specify whether the Slider is in a warn state
+         */
+        warn: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the Slider is in an warn state
+         */
+        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static defaultProps: {
         hideTextInput: boolean;

package/es/components/Slider/Slider.js

@@ -16,6 +16,7 @@ import { matches } from '../../internal/keyboard/match.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { FeatureFlagContext } from '../FeatureFlags/index.js';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 const defaultFormatLabel = (value, label) => {
   return typeof label === 'function' ? label(value) : `${value}${label}`;
@@ -414,11 +415,14 @@ class Slider extends PureComponent {
       step,
       stepMultiplier: _stepMultiplier,
       inputType,
+      invalidText,
       required,
       disabled,
       name,
       light,
       readOnly,
+      warn,
+      warnText,
       ...other
     } = this.props;
     delete other.onRelease;
@@ -446,8 +450,9 @@ class Slider extends PureComponent {
       }, [enabled ? null : className]);
       const inputClasses = cx(`${prefix}--text-input`, `${prefix}--slider-text-input`, {
         [`${prefix}--text-input--light`]: light,
-        [`${prefix}--text-input--invalid`]: isValid === false,
-        [`${prefix}--slider-text-input--hidden`]: hideTextInput
+        [`${prefix}--text-input--invalid`]: !readOnly && isValid === false,
+        [`${prefix}--slider-text-input--hidden`]: hideTextInput,
+        [`${prefix}--slider-text-input--warn`]: !readOnly && warn
       });
       return /*#__PURE__*/React__default.createElement("div", {
         className: enabled ? cx(`${prefix}--form-item`, className) : `${prefix}--form-item`
@@ -469,7 +474,7 @@ class Slider extends PureComponent {
         onKeyDown: this.onKeyDown,
         role: "presentation",
         tabIndex: -1,
-        "data-invalid": isValid ? null : true
+        "data-invalid": !isValid && !readOnly ? true : null
       }, other), /*#__PURE__*/React__default.createElement("div", {
         className: `${prefix}--slider__thumb`,
         role: "slider",
@@ -506,10 +511,18 @@ class Slider extends PureComponent {
         onChange: this.onChange,
         onBlur: this.onBlur,
         onKeyUp: this.props.onInputKeyUp,
-        "data-invalid": isValid ? null : true,
-        "aria-invalid": isValid ? undefined : true,
+        "data-invalid": !isValid && !readOnly ? true : null,
+        "aria-invalid": !isValid && !readOnly ? true : undefined,
         readOnly: readOnly
-      })));
+      }), !readOnly && isValid === false && /*#__PURE__*/React__default.createElement(WarningFilled, {
+        className: `${prefix}--slider__invalid-icon`
+      }), !readOnly && warn && isValid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+        className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
+      })), !readOnly && isValid === false && /*#__PURE__*/React__default.createElement("div", {
+        className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
+      }, invalidText), !readOnly && warn && isValid && /*#__PURE__*/React__default.createElement("div", {
+        className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
+      }, warnText));
     });
   }
 
@@ -557,10 +570,15 @@ _defineProperty(Slider, "propTypes", {
   inputType: PropTypes.string,
 
   /**
-   * `true` to specify if the control is invalid.
+   * `Specify whether the Slider is currently invalid
    */
   invalid: PropTypes.bool,
 
+  /**
+   * Provide the text that is displayed when the Slider is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
   /**
    * The label for the slider.
    */
@@ -641,7 +659,17 @@ _defineProperty(Slider, "propTypes", {
   /**
    * The value.
    */
-  value: PropTypes.number.isRequired
+  value: PropTypes.number.isRequired,
+
+  /**
+   * `Specify whether the Slider is in a warn state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the Slider is in an warn state
+   */
+  warnText: PropTypes.node
 });
 
 _defineProperty(Slider, "defaultProps", {

package/es/components/StructuredList/StructuredList.Skeleton.js

@@ -16,15 +16,13 @@ var _span, _span2, _span3;
 const StructuredListSkeleton = _ref => {
   let {
     rowCount,
-    border,
     className,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const StructuredListSkeletonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
-    [`${prefix}--structured-list`]: true,
-    [`${prefix}--structured-list--border`]: border
+    [`${prefix}--structured-list`]: true
   });
   const rows = [];
 
@@ -59,11 +57,6 @@ const StructuredListSkeleton = _ref => {
 };
 
 StructuredListSkeleton.propTypes = {
-  /**
-   * Specify whether a border should be added to your StructuredListSkeleton
-   */
-  border: PropTypes.bool,
-
   /**
    * Specify an optional className to add.
    */
@@ -75,8 +68,7 @@ StructuredListSkeleton.propTypes = {
   rowCount: PropTypes.number
 };
 StructuredListSkeleton.defaultProps = {
-  rowCount: 5,
-  border: false
+  rowCount: 5
 };
 var StructuredListSkeleton$1 = StructuredListSkeleton;
 

package/es/components/StructuredList/StructuredList.js

@@ -30,7 +30,7 @@ function StructuredListWrapper(props) {
   const classes = cx(`${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.useState(null);
   return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
@@ -72,7 +72,7 @@ StructuredListWrapper.propTypes = {
   isCondensed: PropTypes.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.bool,
 

package/es/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/es/components/Theme/index.js

@@ -41,14 +41,13 @@ GlobalTheme.propTypes = {
    */
   theme: PropTypes.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
@@ -66,13 +65,14 @@ function Theme(_ref2) {
       theme
     };
   }, [theme]);
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: 1
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className
-  }), children)));
+  }))));
 }
 Theme.propTypes = {
   /**

package/es/components/UIShell/HeaderContainer.js

@@ -7,6 +7,9 @@
 
 import PropTypes from 'prop-types';
 import React__default, { useState, useCallback } from 'react';
+import { useWindowEvent } from '../../internal/useEvent.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 const HeaderContainer = _ref => {
   let {
@@ -15,6 +18,11 @@ const HeaderContainer = _ref => {
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
+  useWindowEvent('keydown', event => {
+    if (match(event, Escape)) {
+      setIsSideNavExpandedState(false);
+    }
+  });
   const handleHeaderMenuButtonClick = useCallback(() => {
     setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);

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

@@ -14,7 +14,6 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Menu, _Close;
-
 function HeaderMenuButton(_ref) {
   let {
     'aria-label': ariaLabel,
@@ -22,38 +21,34 @@ function HeaderMenuButton(_ref) {
     className: customClassName,
     renderMenuIcon,
     renderCloseIcon,
-    onClick,
     isActive,
     isCollapsible,
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const className = cx({
-    [customClassName]: !!customClassName,
+  const className = cx({ ...(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.createElement(Menu, {
     size: 20
   }));
   const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
     size: 20
   }));
-  return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, accessibilityLabel, {
+  return /*#__PURE__*/React__default.createElement("button", _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/es/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/es/components/UIShell/HeaderNavigation.js

@@ -12,29 +12,24 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function HeaderNavigation(props) {
-  const {
+function HeaderNavigation(_ref) {
+  let {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     children,
     className: customClassName,
     ...rest
-  } = props;
+  } = _ref;
   const prefix = usePrefix();
-  const className = cx(`${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.createElement("nav", _extends({}, rest, accessibilityLabel, {
+  const className = cx(`${prefix}--header__nav`, customClassName);
+  return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     className: className
   }), /*#__PURE__*/React__default.createElement("ul", {
     className: `${prefix}--header__menu-bar`
   }, children));
 }
-
 HeaderNavigation.propTypes = {
   /**
    * Required props for accessibility label on the underlying menu
@@ -53,4 +48,4 @@ HeaderNavigation.propTypes = {
   className: PropTypes.string
 };
 
-export { HeaderNavigation, HeaderNavigation as default };
+export { HeaderNavigation as default };

package/es/components/UIShell/HeaderSideNavItems.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 { type ReactNode } from 'react';
+import PropTypes from 'prop-types';
+interface HeaderSideNavItemsProps {
+    className?: string | undefined;
+    children?: ReactNode;
+    hasDivider?: boolean | undefined;
+}
+declare function HeaderSideNavItems({ className: customClassName, children, hasDivider, }: HeaderSideNavItemsProps): JSX.Element;
+declare namespace HeaderSideNavItems {
+    var propTypes: {
+        /**
+         * The child nodes to be rendered
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Optionally provide a custom class name that is applied to the underlying
+         * button
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Optionally specify if container will have a bottom divider to differentiate
+         * between original sidenav items and header menu items. False by default.
+         */
+        hasDivider: PropTypes.Requireable<boolean>;
+    };
+}
+export default HeaderSideNavItems;

package/es/components/UIShell/HeaderSideNavItems.js

@@ -10,11 +10,11 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const HeaderSideNavItems = _ref => {
+function HeaderSideNavItems(_ref) {
   let {
     className: customClassName,
     children,
-    hasDivider
+    hasDivider = false
   } = _ref;
   const prefix = usePrefix();
   const className = cx({
@@ -24,8 +24,7 @@ const HeaderSideNavItems = _ref => {
   return /*#__PURE__*/React__default.createElement("ul", {
     className: className
   }, children);
-};
-
+}
 HeaderSideNavItems.propTypes = {
   /**
    * The child nodes to be rendered
@@ -44,9 +43,5 @@ HeaderSideNavItems.propTypes = {
    */
   hasDivider: PropTypes.bool
 };
-HeaderSideNavItems.defaultProps = {
-  hasDivider: false
-};
-var HeaderSideNavItems$1 = HeaderSideNavItems;
 
-export { HeaderSideNavItems$1 as default };
+export { HeaderSideNavItems as default };