@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/UIShell/SideNavMenu.js

@@ -0,0 +1,209 @@
+/**
+ * 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 iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var SideNavIcon = require('./SideNavIcon.js');
+var usePrefix = require('../../internal/usePrefix.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 }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _ChevronDown;
+var SideNavMenu = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(SideNavMenu, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(SideNavMenu);
+
+  function SideNavMenu(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, SideNavMenu);
+
+    _this = _super.call(this, props);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleToggleExpand", function () {
+      _this.setState(function (state) {
+        return {
+          isExpanded: !state.isExpanded
+        };
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyDown", function (event) {
+      if (match.match(event, keys.Escape)) {
+        _this.setState(function () {
+          return {
+            isExpanded: false
+          };
+        });
+      }
+    });
+
+    _this.state = {
+      isExpanded: props.defaultExpanded || false,
+      wasPreviouslyExpanded: props.defaultExpanded || false
+    };
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(SideNavMenu, [{
+    key: "render",
+    value: function render() {
+      var _cx;
+
+      var prefix = this.context;
+      var _this$props = this.props,
+          buttonRef = _this$props.buttonRef,
+          customClassName = _this$props.className,
+          children = _this$props.children,
+          IconElement = _this$props.renderIcon,
+          isActive = _this$props.isActive,
+          title = _this$props.title,
+          large = _this$props.large;
+      var isExpanded = this.state.isExpanded;
+      var hasActiveChild;
+
+      if (children) {
+        // if we have children, either a single or multiple, find if it is active
+        hasActiveChild = Array.isArray(children) ? children.some(function (child) {
+          if (child.props && (child.props.isActive === true || child.props['aria-current'])) {
+            return true;
+          }
+
+          return false;
+        }) : children.props && (children.props.isActive === true || children.props['aria-current']);
+      }
+
+      var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild && !isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        React__default["default"].createElement("li", {
+          className: className,
+          onKeyDown: this.handleKeyDown
+        }, /*#__PURE__*/React__default["default"].createElement("button", {
+          "aria-expanded": isExpanded,
+          className: "".concat(prefix, "--side-nav__submenu"),
+          onClick: this.handleToggleExpand,
+          ref: buttonRef,
+          type: "button"
+        }, IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "".concat(prefix, "--side-nav__submenu-title")
+        }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
+          className: "".concat(prefix, "--side-nav__submenu-chevron"),
+          small: true
+        }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
+          size: 20
+        })))), /*#__PURE__*/React__default["default"].createElement("ul", {
+          className: "".concat(prefix, "--side-nav__menu")
+        }, children))
+      );
+    }
+  }]);
+
+  return SideNavMenu;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "propTypes", {
+  buttonRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
+  })]),
+
+  /**
+   * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the menu should default to expanded. By default, it will
+   * be closed.
+   */
+  defaultExpanded: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
+   * considered active if one of its menu items are a link for the current
+   * page.
+   */
+  isActive: PropTypes__default["default"].bool,
+
+  /**
+   * 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,
+
+  /**
+   * Specify if this is a large variation of the SideNavMenu
+   */
+  large: PropTypes__default["default"].bool,
+
+  /**
+   * Pass in a custom icon to render next to the `SideNavMenu` title
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Provide the text for the overall menu name
+   */
+  title: PropTypes__default["default"].string.isRequired
+});
+
+_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "defaultProps", {
+  defaultExpanded: false,
+  isActive: false,
+  large: false
+});
+
+_rollupPluginBabelHelpers.defineProperty(SideNavMenu, "getDerivedStateFromProps", function (props, state) {
+  var derivedState = null;
+
+  if (props.isSideNavExpanded === false && state.isExpanded === true) {
+    derivedState = {
+      isExpanded: props.isSideNavExpanded,
+      wasPreviouslyExpanded: true
+    };
+  } else if (props.isSideNavExpanded === true && state.wasPreviouslyExpanded === true) {
+    derivedState = {
+      isExpanded: props.isSideNavExpanded,
+      wasPreviouslyExpanded: false
+    };
+  }
+
+  return derivedState;
+});
+
+var SideNavMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default["default"].createElement(SideNavMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
+    buttonRef: ref
+  }));
+});
+SideNavMenuForwardRef.displayName = 'SideNavMenu';
+var SideNavMenuClassic = SideNavMenuForwardRef;
+
+exports.SideNavMenu = SideNavMenu;
+exports["default"] = SideNavMenuClassic;

package/lib/components/UIShell/SideNavMenuItem.js

@@ -0,0 +1,67 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var SideNavLinkText = require('./SideNavLinkText.js');
+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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "className", "isActive"];
+var SideNavMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenuItem(props, ref) {
+  var _cx;
+
+  var prefix = usePrefix.usePrefix();
+
+  var children = props.children,
+      customClassName = props.className,
+      isActive = props.isActive,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var className = cx__default["default"]("".concat(prefix, "--side-nav__menu-item"), customClassName);
+  var linkClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__link"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__link--current"), isActive), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: linkClassName,
+    ref: ref
+  }), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
+});
+SideNavMenuItem.displayName = 'SideNavMenuItem';
+SideNavMenuItem.propTypes = {
+  /**
+   * Specify the children to be rendered inside of the `SideNavMenuItem`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify whether the link is "active". An active link is one that
+   * has an href that is the same as the current page. Can also pass in
+   * `aria-current="page"`, as well.
+   */
+  isActive: PropTypes__default["default"].bool
+};
+var SideNavMenuItem$1 = SideNavMenuItem;
+
+exports["default"] = SideNavMenuItem$1;

package/lib/components/UIShell/SideNavSwitcher.js

@@ -0,0 +1,90 @@
+/**
+ * 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 iconsReact = require('@carbon/icons-react');
+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 _ChevronDown;
+var SideNavSwitcher = /*#__PURE__*/React__default["default"].forwardRef(function SideNavSwitcher(props, ref) {
+  var prefix = usePrefix.usePrefix();
+  var customClassName = props.className,
+      labelText = props.labelText,
+      onChange = props.onChange,
+      options = props.options;
+  var className = cx__default["default"]("".concat(prefix, "--side-nav__switcher"), customClassName); // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: "side-nav-switcher",
+    className: "".concat(prefix, "--assistive-text")
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("select", {
+    id: "carbon-side-nav-switcher",
+    className: "".concat(prefix, "--side-nav__select"),
+    defaultValue: "",
+    onBlur: onChange,
+    onChange: onChange,
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement("option", {
+    className: "".concat(prefix, "--side-nav__option"),
+    disabled: true,
+    hidden: true,
+    value: ""
+  }, labelText), options.map(function (option) {
+    return /*#__PURE__*/React__default["default"].createElement("option", {
+      key: option,
+      className: "".concat(prefix, "--side-nav__option"),
+      value: option
+    }, option);
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--side-nav__switcher-chevron")
+  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
+    size: 20
+  }))));
+});
+SideNavSwitcher.displayName = 'SideNavSwitcher';
+SideNavSwitcher.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide the label for the switcher. This will be the first visible option
+   * when someone views this control
+   */
+  labelText: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide a callback function that is called whenever the switcher value is
+   * updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide an array of options to be rendered in the switcher as an
+   * `<option>`. The text value will be what is displayed to the user and is set
+   * as the `value` prop for each `<option>`.
+   */
+  options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired
+};
+var SideNavSwitcher$1 = SideNavSwitcher;
+
+exports["default"] = SideNavSwitcher$1;

package/lib/components/UIShell/SkipToContent.js

@@ -0,0 +1,67 @@
+/**
+ * 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 _excluded = ["children", "className", "href", "tabIndex"];
+
+var SkipToContent = function SkipToContent(_ref) {
+  var children = _ref.children,
+      customClassName = _ref.className,
+      href = _ref.href,
+      tabIndex = _ref.tabIndex,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--skip-to-content"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: className,
+    href: href,
+    tabIndex: tabIndex
+  }), children);
+};
+
+SkipToContent.propTypes = {
+  /**
+   * Provide text to display in the SkipToContent `a` tag
+   */
+  children: PropTypes__default["default"].string.isRequired,
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide the `href` to the id of the element on your package that is the
+   * main content.
+   */
+  href: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Optionally override the default tabindex of 0
+   */
+  tabIndex: PropTypes__default["default"].string
+};
+SkipToContent.defaultProps = {
+  children: 'Skip to main content',
+  href: '#main-content',
+  tabIndex: '0'
+};
+var SkipToContent$1 = SkipToContent;
+
+exports["default"] = SkipToContent$1;

package/lib/components/UIShell/Switcher.js

@@ -0,0 +1,55 @@
+/**
+ * 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 Switcher = /*#__PURE__*/React__default["default"].forwardRef(function Switcher(props, ref) {
+  var prefix = usePrefix.usePrefix();
+  var ariaLabel = props['aria-label'],
+      ariaLabelledBy = props['aria-labelledby'],
+      customClassName = props.className,
+      children = props.children;
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  var className = cx__default["default"]("".concat(prefix, "--switcher"), _rollupPluginBabelHelpers.defineProperty({}, customClassName, !!customClassName));
+  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: className
+  }, accessibilityLabel), children);
+});
+Switcher.displayName = 'Switcher';
+Switcher.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * expects to receive <SwitcherItem />
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<ul>` node
+   */
+  className: PropTypes__default["default"].string
+});
+var Switcher$1 = Switcher;
+
+exports["default"] = Switcher$1;

package/lib/components/UIShell/SwitcherDivider.js

@@ -0,0 +1,45 @@
+/**
+ * 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 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 = ["className"];
+
+var SwitcherDivider = function SwitcherDivider(_ref) {
+  var customClassName = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--switcher__item--divider"), _rollupPluginBabelHelpers.defineProperty({}, customClassName, !!customClassName));
+  return /*#__PURE__*/React__default["default"].createElement("hr", _rollupPluginBabelHelpers["extends"]({}, other, {
+    className: className
+  }));
+};
+
+SwitcherDivider.propTypes = {
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string
+};
+var SwitcherDivider$1 = SwitcherDivider;
+
+exports["default"] = SwitcherDivider$1;

package/lib/components/UIShell/SwitcherItem.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 React = require('react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["aria-label", "aria-labelledby", "className", "children", "isSelected", "tabIndex"];
+var SwitcherItem = /*#__PURE__*/React__default["default"].forwardRef(function SwitcherItem(props, ref) {
+  var prefix = usePrefix.usePrefix();
+
+  var ariaLabel = props['aria-label'],
+      ariaLabelledBy = props['aria-labelledby'],
+      customClassName = props.className,
+      children = props.children,
+      isSelected = props.isSelected,
+      _props$tabIndex = props.tabIndex,
+      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var className = cx__default["default"]("".concat(prefix, "--switcher__item"), _rollupPluginBabelHelpers.defineProperty({}, customClassName, !!customClassName));
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  var linkClassName = cx__default["default"]("".concat(prefix, "--switcher__item-link"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--switcher__item-link--selected"), isSelected));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: ref,
+    className: linkClassName,
+    tabIndex: tabIndex
+  }, accessibilityLabel), children));
+});
+SwitcherItem.displayName = 'SwitcherItem';
+SwitcherItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Specify the text content for the link
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the tab index of the Link
+   */
+  tabIndex: PropTypes__default["default"].number
+});
+var SwitcherItem$1 = SwitcherItem;
+
+exports["default"] = SwitcherItem$1;

package/lib/components/UIShell/_utils.js

@@ -0,0 +1,14 @@
+/**
+ * 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 CARBON_SIDENAV_ITEMS = ['SideNavFooter', 'SideNavHeader', 'SideNavItems', 'SideNavMenu'];
+
+exports.CARBON_SIDENAV_ITEMS = CARBON_SIDENAV_ITEMS;

package/lib/components/UIShell/index.js

@@ -0,0 +1,42 @@
+/**
+ * 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 FeatureFlags = require('@carbon/feature-flags');
+var HeaderNavigation$2 = require('./HeaderNavigation.js');
+var SideNavMenu$2 = require('./SideNavMenu.js');
+var SideNavMenu$1 = require('./next/SideNavMenu.js');
+var HeaderNavigation$1 = require('./next/HeaderNavigation.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var HeaderNavigation = FeatureFlags__namespace.enabled('enable-v11-release') ? HeaderNavigation$1.HeaderNavigation : HeaderNavigation$2["default"];
+var SideNavMenu = FeatureFlags__namespace.enabled('enable-v11-release') ? SideNavMenu$1.SideNavMenu : SideNavMenu$2["default"];
+
+exports.HeaderNavigation = HeaderNavigation;
+exports.SideNavMenu = SideNavMenu;