@carbon/react 0.17.0 → 1.0.1

package/lib/components/UIShell/HeaderName.js

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var Link = require('./Link.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["children", "className", "prefix", "href"];
+
+var HeaderName = function HeaderName(_ref) {
+  var children = _ref.children,
+      customClassName = _ref.className,
+      prefix = _ref.prefix,
+      href = _ref.href,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var selectorPrefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(selectorPrefix, "--header__name"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: className,
+    href: href
+  }), prefix && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(selectorPrefix, "--header__name--prefix")
+  }, prefix), "\xA0"), children);
+};
+
+HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
+  /**
+   * Pass in children that are either a string or can be read as a string by
+   * screen readers
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide an href for the name to link to
+   */
+  href: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify a prefix to your header name. Useful for companies, for
+   * example: IBM [Product Name] versus solely [Product Name]
+   */
+  prefix: PropTypes__default["default"].string
+});
+HeaderName.defaultProps = {
+  prefix: 'IBM'
+};
+var HeaderName$1 = HeaderName;
+
+exports["default"] = HeaderName$1;

package/lib/components/UIShell/HeaderNavigation.js

@@ -0,0 +1,110 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
+
+var HeaderNavigation = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(HeaderNavigation, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(HeaderNavigation);
+
+  function HeaderNavigation(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, HeaderNavigation);
+
+    _this = _super.call(this, props);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleItemRef", function (index) {
+      return function (node) {
+        _this.items[index] = node;
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_renderNavItem", function (child, index) {
+      if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
+        return /*#__PURE__*/React__default["default"].cloneElement(child, {
+          ref: _this.handleItemRef(index)
+        });
+      }
+    });
+
+    _this.items = [];
+    _this.state = {
+      selectedIndex: 0
+    };
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      var className = cx__default["default"]("".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["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
+        className: className
+      }), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
+        className: "".concat(prefix, "--header__menu-bar")
+      }), React__default["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["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "propTypes", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
+   * or `HeaderMenu`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying <nav> node
+   */
+  className: PropTypes__default["default"].string
+}));
+
+_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "contextType", usePrefix.PrefixContext);
+
+exports["default"] = HeaderNavigation;

package/lib/components/UIShell/HeaderPanel.js

@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["aria-label", "aria-labelledby", "children", "className", "expanded"];
+var HeaderPanel = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  var className = cx__default["default"]("".concat(prefix, "--header-panel"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header-panel--expanded"), expanded), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
+    className: className
+  }, accessibilityLabel, {
+    ref: ref
+  }), children);
+});
+HeaderPanel.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the panel is expanded
+   */
+  expanded: PropTypes__default["default"].bool
+});
+HeaderPanel.displayName = 'HeaderPanel';
+var HeaderPanel$1 = HeaderPanel;
+
+exports["default"] = HeaderPanel$1;

package/lib/components/UIShell/HeaderSideNavItems.js

@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var HeaderSideNavItems = function HeaderSideNavItems(_ref) {
+  var _cx;
+
+  var customClassName = _ref.className,
+      children = _ref.children,
+      hasDivider = _ref.hasDivider;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__header-navigation"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__header-divider"), hasDivider), _cx), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: className
+  }, children);
+};
+
+HeaderSideNavItems.propTypes = {
+  /**
+   * The child nodes to be rendered
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className: PropTypes__default["default"].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__default["default"].bool
+};
+HeaderSideNavItems.defaultProps = {
+  hasDivider: false
+};
+var HeaderSideNavItems$1 = HeaderSideNavItems;
+
+exports["default"] = HeaderSideNavItems$1;

package/lib/components/UIShell/Link.js

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(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["default"].forwardRef(function Link(props, ref) {
+  var element = props.element;
+      props.isSideNavExpanded;
+      var rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(element, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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__default["default"].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__default["default"].bool
+};
+Link.displayName = 'Link';
+Link.propTypes = LinkPropTypes;
+Link.defaultProps = {
+  element: 'a'
+};
+var Link$1 = Link;
+
+exports.LinkPropTypes = LinkPropTypes;
+exports["default"] = Link$1;

package/lib/components/UIShell/SideNav.js

@@ -0,0 +1,237 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var _utils = require('./_utils.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var useMatchMedia = require('../../internal/useMatchMedia.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useRef = React.useRef(expandedProp !== undefined),
+      controlled = _useRef.current;
+
+  var _useState = React.useState(defaultExpanded),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      expandedState = _useState2[0],
+      setExpandedState = _useState2[1];
+
+  var _useState3 = React.useState(defaultExpanded),
+      _useState4 = _rollupPluginBabelHelpers.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__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--expanded"), expanded || expandedViaHoverState), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--collapsed"), !expanded && isFixedNav), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--rail"), isRail), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--ux"), isChildOfHeader), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--hidden"), !isPersistent), _cx));
+  var overlayClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay"), true), _rollupPluginBabelHelpers.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["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["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2({}, _utils.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.useMatchMedia("(max-width: 1055px)");
+  var ariaHidden = expanded === false && isSideNavCollapsed;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["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["default"].createElement("div", {
+    className: overlayClassName,
+    onClick: onOverlayClick
+  }), /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Specify whether focus and blur listeners are added. They are by default.
+   */
+  addFocusListeners: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether mouse entry/exit listeners are added. They are by default.
+   */
+  addMouseListeners: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * If `true`, the SideNav will be open on initial render.
+   */
+  defaultExpanded: PropTypes__default["default"].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__default["default"].bool,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  isChildOfHeader: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if sideNav is standalone
+   */
+  isFixedNav: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if the sideNav will be persistent above the lg breakpoint
+   */
+  isPersistent: PropTypes__default["default"].bool,
+
+  /**
+   * Optional prop to display the side nav rail.
+   */
+  isRail: PropTypes__default["default"].bool,
+
+  /**
+   * An optional listener that is called when the SideNav overlay is clicked
+   *
+   * @param {object} event
+   */
+  onOverlayClick: PropTypes__default["default"].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__default["default"].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__default["default"].func
+});
+var SideNav$1 = SideNav;
+
+exports["default"] = SideNav$1;

package/lib/components/UIShell/SideNavDetails.js

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SideNavDetails = function SideNavDetails(_ref) {
+  var children = _ref.children,
+      customClassName = _ref.className,
+      title = _ref.title;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--side-nav__details"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default["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__default["default"].node,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide the text that will be rendered as the title in the component
+   */
+  title: PropTypes__default["default"].string.isRequired
+};
+var SideNavDetails$1 = SideNavDetails;
+
+exports["default"] = SideNavDetails$1;