@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/UIShell/SideNavItem.js

@@ -0,0 +1,57 @@
+/**
+ * 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 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 SideNavItem = function SideNavItem(_ref) {
+  var _cx;
+
+  var customClassName = _ref.className,
+      children = _ref.children,
+      _ref$large = _ref.large,
+      large = _ref$large === void 0 ? false : _ref$large;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: className
+  }, children);
+};
+
+SideNavItem.propTypes = {
+  /**
+   * Provide a single icon as the child to `SideNavIcon` to render in the
+   * container
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify if this is a large variation of the SideNavItem
+   */
+  large: PropTypes__default["default"].bool
+};
+var SideNavItem$1 = SideNavItem;
+
+exports["default"] = SideNavItem$1;

package/lib/components/UIShell/SideNavItems.js

@@ -0,0 +1,66 @@
+/**
+ * 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 _utils = require('./_utils.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 SideNavItems = function SideNavItems(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      isSideNavExpanded = _ref.isSideNavExpanded;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"](["".concat(prefix, "--side-nav__items")], customClassName);
+  var childrenWithExpandedState = React__default["default"].Children.map(children, function (child) {
+    if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
+      var _child$type;
+
+      // 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 = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) ? {
+        isSideNavExpanded: isSideNavExpanded
+      } : {}));
+    }
+  });
+  return /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: className
+  }, childrenWithExpandedState);
+};
+
+SideNavItems.propTypes = {
+  /**
+   * Provide a single icon as the child to `SideNavIcon` to render in the
+   * container
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].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__default["default"].bool
+};
+var SideNavItems$1 = SideNavItems;
+
+exports["default"] = SideNavItems$1;

package/lib/components/UIShell/SideNavLink.js

@@ -0,0 +1,84 @@
+/**
+ * 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 Link = require('./Link.js');
+var SideNavIcon = require('./SideNavIcon.js');
+var SideNavItem = require('./SideNavItem.js');
+var SideNavLinkText = require('./SideNavLinkText.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 = ["className", "children", "renderIcon", "isActive", "large"];
+var SideNavLink = /*#__PURE__*/React__default["default"].forwardRef(function SideNavLink(_ref, ref) {
+  var _cx;
+
+  var customClassName = _ref.className,
+      children = _ref.children,
+      IconElement = _ref.renderIcon,
+      isActive = _ref.isActive,
+      large = _ref.large,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__link"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__link--current"), isActive), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  return /*#__PURE__*/React__default["default"].createElement(SideNavItem["default"], {
+    large: large
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: className,
+    ref: ref
+  }), IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
+    small: true
+  }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
+});
+SideNavLink.displayName = 'SideNavLink';
+SideNavLink.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
+  /**
+   * Specify the text content for the link
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].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__default["default"].bool,
+
+  /**
+   * Specify if this is a large variation of the SideNavLink
+   */
+  large: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an icon to render in the side navigation link. Should be a React class.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
+});
+SideNavLink.defaultProps = {
+  element: 'a',
+  large: false
+}; // eslint-disable-next-line react/display-name
+var SideNavLink$1 = SideNavLink;
+
+exports["default"] = SideNavLink$1;

package/lib/components/UIShell/SideNavLinkText.js

@@ -0,0 +1,51 @@
+/**
+ * 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 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 = ["className", "children"];
+
+var SideNavLinkText = function SideNavLinkText(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--side-nav__link-text"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: className
+  }), children);
+};
+
+SideNavLinkText.propTypes = {
+  /**
+   * Provide the content for the link text
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string
+};
+var SideNavLinkText$1 = SideNavLinkText;
+
+exports["default"] = SideNavLinkText$1;

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;