@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/UIShell/HeaderNavigation.js

@@ -0,0 +1,100 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
+
+var HeaderNavigation = /*#__PURE__*/function (_React$Component) {
+  _inherits(HeaderNavigation, _React$Component);
+
+  var _super = _createSuper(HeaderNavigation);
+
+  function HeaderNavigation(props) {
+    var _this;
+
+    _classCallCheck(this, HeaderNavigation);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleItemRef", function (index) {
+      return function (node) {
+        _this.items[index] = node;
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_renderNavItem", function (child, index) {
+      if ( /*#__PURE__*/React__default.isValidElement(child)) {
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          ref: _this.handleItemRef(index)
+        });
+      }
+    });
+
+    _this.items = [];
+    _this.state = {
+      selectedIndex: 0
+    };
+    return _this;
+  }
+
+  _createClass(HeaderNavigation, [{
+    key: "render",
+    value: function render() {
+      var prefix = this.context;
+
+      var _this$props = this.props,
+          ariaLabel = _this$props['aria-label'],
+          ariaLabelledBy = _this$props['aria-labelledby'],
+          children = _this$props.children,
+          customClassName = _this$props.className,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+      var className = cx("".concat(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
+
+      var accessibilityLabel = {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy
+      };
+      return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, accessibilityLabel, {
+        className: className
+      }), /*#__PURE__*/React__default.createElement("ul", _extends({}, accessibilityLabel, {
+        className: "".concat(prefix, "--header__menu-bar")
+      }), React__default.Children.map(children, this._renderNavItem)));
+    }
+    /**
+     * Render an individual menuitem, adding a `ref` for each child inside of
+     * `this.items` to properly manage focus.
+     */
+
+  }]);
+
+  return HeaderNavigation;
+}(React__default.Component);
+
+_defineProperty(HeaderNavigation, "propTypes", _objectSpread2(_objectSpread2({}, 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
+   */
+  className: PropTypes.string
+}));
+
+_defineProperty(HeaderNavigation, "contextType", PrefixContext);
+
+export { HeaderNavigation as default };

package/es/components/UIShell/HeaderPanel.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["aria-label", "aria-labelledby", "children", "className", "expanded"];
+var HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {
+  var _cx;
+
+  var ariaLabel = _ref['aria-label'],
+      ariaLabelledBy = _ref['aria-labelledby'],
+      children = _ref.children,
+      customClassName = _ref.className,
+      expanded = _ref.expanded,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  var className = cx("".concat(prefix, "--header-panel"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header-panel--expanded"), expanded), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
+    className: className
+  }, accessibilityLabel, {
+    ref: ref
+  }), children);
+});
+HeaderPanel.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the panel is expanded
+   */
+  expanded: PropTypes.bool
+});
+HeaderPanel.displayName = 'HeaderPanel';
+var HeaderPanel$1 = HeaderPanel;
+
+export { HeaderPanel$1 as default };

package/es/components/UIShell/HeaderSideNavItems.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var HeaderSideNavItems = function HeaderSideNavItems(_ref) {
+  var _cx;
+
+  var customClassName = _ref.className,
+      children = _ref.children,
+      hasDivider = _ref.hasDivider;
+  var prefix = usePrefix();
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav__header-navigation"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav__header-divider"), hasDivider), _cx), customClassName);
+  return /*#__PURE__*/React__default.createElement("ul", {
+    className: className
+  }, children);
+};
+
+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.
+   */
+  hasDivider: PropTypes.bool
+};
+HeaderSideNavItems.defaultProps = {
+  hasDivider: false
+};
+var HeaderSideNavItems$1 = HeaderSideNavItems;
+
+export { HeaderSideNavItems$1 as default };

package/es/components/UIShell/Link.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+
+var _excluded = ["element", "isSideNavExpanded"];
+/**
+ * Link is a custom component that allows us to supporting rendering elements
+ * other than `a` in our markup. The goal is to allow users to support passing
+ * in their own components to support use-cases like `react-router` or
+ * `@reach/router`
+ */
+
+var Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+  var element = props.element;
+      props.isSideNavExpanded;
+      var rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React__default.createElement(element, _objectSpread2(_objectSpread2({}, rest), {}, {
+    ref: ref
+  }));
+});
+var LinkPropTypes = {
+  /**
+   * The base element to use to build the link. Defaults to `a`, can also accept
+   * 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.
+   */
+  isSideNavExpanded: PropTypes.bool
+};
+Link.displayName = 'Link';
+Link.propTypes = LinkPropTypes;
+Link.defaultProps = {
+  element: 'a'
+};
+var Link$1 = Link;
+
+export { LinkPropTypes, Link$1 as default };

package/es/components/UIShell/SideNav.js

@@ -0,0 +1,227 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState } 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 { useMatchMedia } from '../../internal/useMatchMedia.js';
+
+var _excluded = ["expanded", "defaultExpanded", "isChildOfHeader", "aria-label", "aria-labelledby", "children", "onToggle", "className", "isFixedNav", "isRail", "isPersistent", "addFocusListeners", "addMouseListeners", "onOverlayClick"];
+// import SideNavFooter from './SideNavFooter';
+
+var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref) {
+  var _cx, _cx2;
+
+  var expandedProp = props.expanded,
+      defaultExpanded = props.defaultExpanded,
+      isChildOfHeader = props.isChildOfHeader,
+      ariaLabel = props['aria-label'],
+      ariaLabelledBy = props['aria-labelledby'],
+      children = props.children,
+      onToggle = props.onToggle,
+      customClassName = props.className,
+      isFixedNav = props.isFixedNav,
+      isRail = props.isRail,
+      isPersistent = props.isPersistent,
+      addFocusListeners = props.addFocusListeners,
+      addMouseListeners = props.addMouseListeners,
+      onOverlayClick = props.onOverlayClick,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useRef = useRef(expandedProp !== undefined),
+      controlled = _useRef.current;
+
+  var _useState = useState(defaultExpanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedState = _useState2[0],
+      setExpandedState = _useState2[1];
+
+  var _useState3 = useState(defaultExpanded),
+      _useState4 = _slicedToArray(_useState3, 2),
+      expandedViaHoverState = _useState4[0],
+      setExpandedViaHoverState = _useState4[1];
+
+  var expanded = controlled ? expandedProp : expandedState;
+
+  var handleToggle = function handleToggle(event) {
+    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+
+    if (!controlled) {
+      setExpandedState(value);
+    }
+
+    if (onToggle) {
+      onToggle(event, value);
+    }
+
+    if (controlled || isRail) {
+      setExpandedViaHoverState(value);
+    }
+  };
+
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  }; // TO-DO: comment back in when footer is added for rails
+  // const assistiveText = expanded
+  //   ? t('carbon.sidenav.state.open')
+  //   : t('carbon.sidenav.state.closed');
+
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav--expanded"), expanded || expandedViaHoverState), _defineProperty(_cx, "".concat(prefix, "--side-nav--collapsed"), !expanded && isFixedNav), _defineProperty(_cx, "".concat(prefix, "--side-nav--rail"), isRail), _defineProperty(_cx, customClassName, !!customClassName), _defineProperty(_cx, "".concat(prefix, "--side-nav--ux"), isChildOfHeader), _defineProperty(_cx, "".concat(prefix, "--side-nav--hidden"), !isPersistent), _cx));
+  var overlayClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay"), true), _defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay-active"), expanded || expandedViaHoverState), _cx2));
+  var childrenToRender = children; // if a rail, pass the expansion state as a prop, so children can update themselves to match
+
+  if (isRail) {
+    childrenToRender = React__default.Children.map(children, function (child) {
+      var _child$type$displayNa, _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)
+      var currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded; // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+
+      return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({}, CARBON_SIDENAV_ITEMS.includes((_child$type$displayNa = (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) !== null && _child$type$displayNa !== void 0 ? _child$type$displayNa : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) ? {
+        isSideNavExpanded: currentExpansionState
+      } : {}));
+    });
+  }
+
+  var eventHandlers = {};
+
+  if (addFocusListeners) {
+    eventHandlers.onFocus = function (event) {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        handleToggle(event, true);
+      }
+    };
+
+    eventHandlers.onBlur = function (event) {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        handleToggle(event, false);
+      }
+    };
+  }
+
+  if (addMouseListeners && isRail) {
+    eventHandlers.onMouseEnter = function () {
+      return handleToggle(true, true);
+    };
+
+    eventHandlers.onMouseLeave = function () {
+      return handleToggle(false, false);
+    };
+  }
+
+  var isSideNavCollapsed = useMatchMedia("(max-width: 1055px)");
+  var ariaHidden = expanded === false && isSideNavCollapsed;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFixedNav ? null :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React__default.createElement("div", {
+    className: overlayClassName,
+    onClick: onOverlayClick
+  }), /*#__PURE__*/React__default.createElement("nav", _extends({
+    "aria-hidden": ariaHidden,
+    ref: ref,
+    className: "".concat(prefix, "--side-nav__navigation ").concat(className)
+  }, accessibilityLabel, eventHandlers, other), childrenToRender));
+});
+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 = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+  /**
+   * Specify whether focus and blur listeners are added. They are by default.
+   */
+  addFocusListeners: PropTypes.bool,
+
+  /**
+   * Specify whether mouse entry/exit listeners are added. They are by default.
+   */
+  addMouseListeners: PropTypes.bool,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * If `true`, the SideNav will be open on initial render.
+   */
+  defaultExpanded: PropTypes.bool,
+
+  /**
+   * If `true`, the SideNav will be expanded, otherwise it will be collapsed.
+   * Using this prop causes SideNav to become a controled component.
+   */
+  expanded: PropTypes.bool,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  isChildOfHeader: PropTypes.bool,
+
+  /**
+   * Specify if sideNav is standalone
+   */
+  isFixedNav: PropTypes.bool,
+
+  /**
+   * Specify if the sideNav will be persistent above the lg breakpoint
+   */
+  isPersistent: PropTypes.bool,
+
+  /**
+   * Optional prop to display the side nav rail.
+   */
+  isRail: PropTypes.bool,
+
+  /**
+   * An optional listener that is called when the SideNav overlay is clicked
+   *
+   * @param {object} event
+   */
+  onOverlayClick: PropTypes.func,
+
+  /**
+   * An optional listener that is called when an event that would cause
+   * toggling the SideNav occurs.
+   *
+   * @param {object} event
+   * @param {boolean} value
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * Provide a custom function for translating all message ids within this
+   * component. This function will take in two arguments: the mesasge Id and the
+   * state of the component. From this, you should return a string representing
+   * the label you want displayed or read by screen readers.
+   */
+  translateById: PropTypes.func
+});
+var SideNav$1 = SideNav;
+
+export { SideNav$1 as default };

package/es/components/UIShell/SideNavDetails.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var SideNavDetails = function SideNavDetails(_ref) {
+  var children = _ref.children,
+      customClassName = _ref.className,
+      title = _ref.title;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--side-nav__details"), customClassName);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("h2", {
+    className: "".concat(prefix, "--side-nav__title"),
+    title: title
+  }, title), children);
+};
+
+SideNavDetails.propTypes = {
+  /**
+   * Provide optional children to render in `SideNavDetails`. Useful for
+   * rendering the `SideNavSwitcher` component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide the text that will be rendered as the title in the component
+   */
+  title: PropTypes.string.isRequired
+};
+var SideNavDetails$1 = SideNavDetails;
+
+export { SideNavDetails$1 as default };

package/es/components/UIShell/SideNavDivider.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+function SideNavDivider(_ref) {
+  var className = _ref.className;
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--side-nav__divider"), className);
+  return /*#__PURE__*/React__default.createElement("li", {
+    role: "separator",
+    className: classNames
+  });
+}
+
+SideNavDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+export { SideNavDivider as default };

package/es/components/UIShell/SideNavFooter.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { Close, ChevronRight } from '@carbon/icons-react';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _Close, _ChevronRight;
+/**
+ * SideNavFooter is used for rendering the button at the bottom of the side
+ * navigation that is a part of the UI Shell. It is responsible for handling the
+ * user interaction to expand or collapse the side navigation.
+ */
+
+var SideNavFooter = function SideNavFooter(_ref) {
+  var assistiveText = _ref.assistiveText,
+      customClassName = _ref.className,
+      expanded = _ref.expanded,
+      onToggle = _ref.onToggle;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--side-nav__footer"), customClassName);
+  return /*#__PURE__*/React__default.createElement("footer", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "".concat(prefix, "--side-nav__toggle"),
+    type: "button",
+    onClick: function onClick(evt) {
+      return onToggle(evt);
+    },
+    title: assistiveText
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--side-nav__icon")
+  }, expanded ? _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
+    size: 20
+  })) : _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default.createElement(ChevronRight, {
+    size: 20
+  }))), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, assistiveText)));
+};
+
+SideNavFooter.propTypes = {
+  /**
+   * Provide text to be read to screen readers and shown as a tooltip when
+   * interacting with the toggle button in the footer
+   */
+  assistiveText: PropTypes.string.isRequired,
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the side navigation is expanded or collapsed
+   */
+  expanded: PropTypes.bool.isRequired,
+
+  /**
+   * 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.
+   */
+  isSideNavExpanded: PropTypes.bool,
+
+  /**
+   * Provide a function that is called when the toggle button is interacted
+   * with. Useful for controlling the expansion state of the side navigation.
+   */
+  onToggle: PropTypes.func.isRequired
+};
+SideNavFooter.defaultProps = {
+  assistiveText: 'Toggle opening or closing the side navigation'
+};
+var SideNavFooter$1 = SideNavFooter;
+
+export { SideNavFooter$1 as default };

package/es/components/UIShell/SideNavHeader.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import SideNavIcon from './SideNavIcon.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var SideNavHeader = function SideNavHeader(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      IconElement = _ref.renderIcon;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--side-nav__header"), customClassName);
+  return /*#__PURE__*/React__default.createElement("header", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), children);
+};
+
+SideNavHeader.propTypes = {
+  /**
+   * The child nodes to be rendered
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * 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.
+   */
+  isSideNavExpanded: PropTypes.bool,
+
+  /**
+   * Provide an icon to render in the header of the side navigation. Should be
+   * a React class.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
+};
+var SideNavHeader$1 = SideNavHeader;
+
+export { SideNavHeader$1 as default };