@carbon/react 1.5.0 → 1.7.0-rc.0

package/lib/components/ListBox/ListBoxPropTypes.js

@@ -10,33 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var PropTypes = require('prop-types');
-var FeatureFlags = require('@carbon/feature-flags');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 var ListBoxType = PropTypes__default["default"].oneOf(['default', 'inline']);
-var ListBoxSize = FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']);
+var ListBoxSize = PropTypes__default["default"].oneOf(['sm', 'md', 'lg']);
 
 exports.ListBoxSize = ListBoxSize;
 exports.ListBoxType = ListBoxType;

package/lib/components/ListBox/ListBoxSelection.js

@@ -31,7 +31,7 @@ var _Close, _Close2, _defaultTranslations;
  * selection.
  */
 
-var ListBoxSelection = function ListBoxSelection(_ref) {
+function ListBoxSelection(_ref) {
   var _cx;
 
   var clearSelection = _ref.clearSelection,
@@ -98,7 +98,7 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
     "aria-label": description,
     title: description
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
-};
+}
 
 var translationIds = {
   'clear.all': 'clear.all',
@@ -153,7 +153,6 @@ ListBoxSelection.defaultProps = {
     return defaultTranslations[id];
   }
 };
-var ListBoxSelection$1 = ListBoxSelection;
 
-exports["default"] = ListBoxSelection$1;
+exports["default"] = ListBoxSelection;
 exports.translationIds = translationIds;

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -539,7 +539,6 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
   onOpen: function onOpen() {},
   menuOffset: getMenuOffset,
   menuOffsetFlip: getMenuOffset,
-  light: false,
   selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
 });
 

package/lib/components/Popover/index.js

@@ -13,6 +13,8 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -21,15 +23,22 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["align", "as", "caret", "className", "children", "dropShadow", "highContrast", "open"],
+var _excluded = ["align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
     _excluded2 = ["className", "children"];
-var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover(props, ref) {
+var PopoverContext = /*#__PURE__*/React__default["default"].createContext({
+  floating: {
+    current: null
+  }
+});
+var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover(props, forwardRef) {
   var _cx;
 
   var _props$align = props.align,
       align = _props$align === void 0 ? 'bottom' : _props$align,
       _props$as = props.as,
       BaseComponent = _props$as === void 0 ? 'span' : _props$as,
+      _props$autoAlign = props.autoAlign,
+      autoAlign = _props$autoAlign === void 0 ? false : _props$autoAlign,
       _props$caret = props.caret,
       caret = _props$caret === void 0 ? true : _props$caret,
       customClassName = props.className,
@@ -42,11 +51,121 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  var floating = React.useRef();
+  var popover = React.useRef();
+  var value = React.useMemo(function () {
+    return {
+      floating: floating
+    };
+  }, []);
+  var ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      autoAligned = _useState2[0],
+      setAutoAligned = _useState2[1];
+
+  var _useState3 = React.useState(align),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      autoAlignment = _useState4[0],
+      setAutoAlignment = _useState4[1];
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  useIsomorphicEffect["default"](function () {
+    if (!autoAlign) {
+      setAutoAligned(false);
+      return;
+    }
+
+    if (!floating.current) {
+      return;
+    }
+
+    if (autoAligned === true) {
+      return;
+    }
+
+    var rect = floating.current.getBoundingClientRect(); // The conditions, per side, of when the popover is not visible, excluding the popover's internal padding(16)
+
+    var conditions = {
+      left: rect.x < -16,
+      top: rect.y < -16,
+      right: rect.x + (rect.width - 16) > document.documentElement.clientWidth,
+      bottom: rect.y + (rect.height - 16) > document.documentElement.clientHeight
+    };
+
+    if (!conditions.left && !conditions.top && !conditions.right && !conditions.bottom) {
+      setAutoAligned(false);
+      return;
+    }
+
+    var alignments = ['top', 'top-left', 'right-bottom', 'right', 'right-top', 'bottom-left', 'bottom', 'bottom-right', 'left-top', 'left', 'left-bottom', 'top-right']; // Creates the prioritized list of options depending on ideal alignment coming from `align`
+
+    var options = [align];
+    var option = alignments[(alignments.indexOf(align) + 1) % alignments.length];
+
+    while (option) {
+      if (options.includes(option)) {
+        break;
+      }
+
+      options.push(option);
+      option = alignments[(alignments.indexOf(option) + 1) % alignments.length];
+    }
+
+    function isVisible(alignment) {
+      popover.current.classList.add("".concat(prefix, "--popover--").concat(alignment));
+      var rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
+
+      if (rect.x < -16) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      } // Check if popover is not visible at the top of the screen
+
+
+      if (rect.y < -16) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      } // Check if popover is not visible to right of screen
+
+
+      if (rect.x + (rect.width - 16) > document.documentElement.clientWidth) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      } // Check if popover is not visible to bottom of screen
+
+
+      if (rect.y + (rect.height - 16) > document.documentElement.clientHeight) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      }
+
+      popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+      return true;
+    }
+
+    var alignment = null;
+
+    for (var i = 0; i < options.length; i++) {
+      var _option = options[i];
+
+      if (isVisible(_option)) {
+        alignment = _option;
+        break;
+      }
+    }
+
+    if (alignment) {
+      setAutoAligned(true);
+      setAutoAlignment(alignment);
+    }
+  }, [autoAligned, align, autoAlign, prefix]);
+  return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref
-  }), children);
+  }), children));
 }); // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component
 
@@ -66,6 +185,11 @@ Popover.propTypes = {
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
 
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+   */
+  autoAlign: PropTypes__default["default"].bool,
+
   /**
    * Specify whether a caret should be rendered
    */
@@ -97,12 +221,17 @@ Popover.propTypes = {
    */
   open: PropTypes__default["default"].bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref, ref) {
+var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref, forwardRef) {
   var className = _ref.className,
       children = _ref.children,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
 
   var prefix = usePrefix.usePrefix();
+
+  var _React$useContext = React__default["default"].useContext(PopoverContext),
+      floating = _React$useContext.floating;
+
+  var ref = useMergedRefs.useMergedRefs([floating, forwardRef]);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: "".concat(prefix, "--popover")
   }), /*#__PURE__*/React__default["default"].createElement("span", {

package/lib/components/RadioButton/next/RadioButton.js

@@ -60,7 +60,8 @@ var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     id: uniqueId,
     ref: ref,
     disabled: disabled,
-    value: value
+    value: value,
+    name: name
   })), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: uniqueId,
     className: "".concat(prefix, "--radio-button__label")

package/lib/components/Select/Select.js

@@ -30,18 +30,25 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
 
   var className = _ref.className,
       id = _ref.id,
-      inline = _ref.inline,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
       labelText = _ref.labelText,
-      disabled = _ref.disabled,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       children = _ref.children,
-      noLabel = _ref.noLabel,
-      hideLabel = _ref.hideLabel,
-      invalid = _ref.invalid,
+      _ref$noLabel = _ref.noLabel,
+      noLabel = _ref$noLabel === void 0 ? false : _ref$noLabel,
+      _ref$hideLabel = _ref.hideLabel,
+      hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       invalidText = _ref.invalidText,
       helperText = _ref.helperText,
-      light = _ref.light,
+      _ref$light = _ref.light,
+      light = _ref$light === void 0 ? false : _ref$light,
       size = _ref.size,
-      warn = _ref.warn,
+      _ref$warn = _ref.warn,
+      warn = _ref$warn === void 0 ? false : _ref$warn,
       warnText = _ref.warnText,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 

package/lib/components/Tabs/next/Tabs.js

@@ -608,6 +608,11 @@ var TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPan
       tabIndex = _useState8[0],
       setTabIndex = _useState8[1];
 
+  var _useState9 = React.useState(false),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      interactiveContent = _useState10[0],
+      setInteractiveContent = _useState10[1];
+
   var _React$useContext3 = React__default["default"].useContext(TabsContext),
       selectedIndex = _React$useContext3.selectedIndex,
       baseId = _React$useContext3.baseId;
@@ -615,14 +620,47 @@ var TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPan
   var index = React__default["default"].useContext(TabPanelContext);
   var id = "".concat(baseId, "-tabpanel-").concat(index);
   var tabId = "".concat(baseId, "-tab-").concat(index);
-  var className = cx__default["default"]("".concat(prefix, "--tab-content"), customClassName); // tabindex should only be 0 if no interactive content in children
+  var className = cx__default["default"]("".concat(prefix, "--tab-content"), customClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tab-content--interactive"), interactiveContent));
+  useEffectOnce.useEffectOnce(function () {
+    if (!panel.current) {
+      return;
+    }
 
-  React.useEffect(function () {
-    var interactiveContent = useNoInteractiveChildren.getInteractiveContent(panel.current);
+    var content = useNoInteractiveChildren.getInteractiveContent(panel.current);
 
-    if (interactiveContent) {
+    if (content) {
+      setInteractiveContent(true);
       setTabIndex('-1');
     }
+  }); // tabindex should only be 0 if no interactive content in children
+
+  React.useEffect(function () {
+    if (!panel.current) {
+      return;
+    }
+
+    var node = panel.current;
+
+    function callback() {
+      var content = useNoInteractiveChildren.getInteractiveContent(node);
+
+      if (content) {
+        setInteractiveContent(true);
+        setTabIndex('-1');
+      } else {
+        setInteractiveContent(false);
+        setTabIndex('0');
+      }
+    }
+
+    var observer = new MutationObserver(callback);
+    observer.observe(node, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect(node);
+    };
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-labelledby": tabId,

package/lib/components/Toggle/Toggle.js

@@ -10,121 +10,160 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
 var React = require('react');
+var PropTypes = require('prop-types');
 var cx = require('classnames');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useControllableState = require('../../internal/useControllableState.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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _path, _defineProperty2, _defineProperty3;
-
-var _excluded = ["className", "defaultToggled", "toggled", "onChange", "onToggle", "id", "labelText", "labelA", "labelB", "size"];
-var getInstanceId = setupGetInstanceId["default"]();
-
-var Toggle = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(Toggle, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(Toggle);
-
-  function Toggle() {
-    _rollupPluginBabelHelpers.classCallCheck(this, Toggle);
-
-    return _super.apply(this, arguments);
-  }
-
-  _rollupPluginBabelHelpers.createClass(Toggle, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          className = _this$props.className,
-          defaultToggled = _this$props.defaultToggled,
-          toggled = _this$props.toggled,
-          _onChange = _this$props.onChange,
-          onToggle = _this$props.onToggle,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? this.inputId = this.inputId || "__carbon-toggle_".concat(getInstanceId()) : _this$props$id,
-          labelText = _this$props.labelText,
-          labelA = _this$props.labelA,
-          labelB = _this$props.labelB,
-          size = _this$props.size,
-          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var input;
-      var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, className, className));
-      var toggleClasses = cx__default["default"]("".concat(prefix, "--toggle-input"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle-input--small"), size === 'sm'));
-      var checkedProps = {};
-
-      if (typeof toggled !== 'undefined') {
-        checkedProps.checked = toggled;
-      } else {
-        checkedProps.defaultChecked = defaultToggled;
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: wrapperClasses
-      }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, checkedProps, {
-        "aria-label": null,
-        type: "checkbox",
-        id: id,
-        className: toggleClasses,
-        onChange: function onChange(evt) {
-          _onChange && _onChange(evt);
-          onToggle(input.checked, id, evt);
-        },
-        ref: function ref(el) {
-          input = el;
-        },
-        onKeyUp: function onKeyUp(evt) {
-          if (match.match(evt, keys.Enter)) {
-            input.checked = !input.checked;
-            _onChange && _onChange(evt);
-            onToggle(input.checked, id, evt);
-          }
-        }
-      })), /*#__PURE__*/React__default["default"].createElement("label", {
-        className: "".concat(prefix, "--toggle-input__label"),
-        htmlFor: id,
-        "aria-label": typeof labelText === 'string' ? null : this.props['aria-label']
-      }, labelText, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "".concat(prefix, "--toggle__switch")
-      }, size && /*#__PURE__*/React__default["default"].createElement("svg", {
-        className: "".concat(prefix, "--toggle__check"),
-        width: "6px",
-        height: "5px",
-        viewBox: "0 0 6 5"
-      }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
-        d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-      }))), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "".concat(prefix, "--toggle__text--off"),
-        "aria-hidden": "true"
-      }, labelA), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "".concat(prefix, "--toggle__text--on"),
-        "aria-hidden": "true"
-      }, labelB))));
+var _path;
+
+var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
+function Toggle(_ref) {
+  var className = _ref.className,
+      _ref$defaultToggled = _ref.defaultToggled,
+      defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$hideLabel = _ref.hideLabel,
+      hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+      id = _ref.id,
+      _ref$labelA = _ref.labelA,
+      labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
+      _ref$labelB = _ref.labelB,
+      labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
+      labelText = _ref.labelText,
+      onClick = _ref.onClick,
+      onToggle = _ref.onToggle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      toggled = _ref.toggled,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useControllableState = useControllableState.useControllableState({
+    value: toggled,
+    onChange: onToggle,
+    defaultValue: defaultToggled
+  }),
+      _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
+      checked = _useControllableState2[0],
+      setChecked = _useControllableState2[1];
+
+  function handleClick(e) {
+    setChecked(!checked);
+
+    if (onClick) {
+      onClick(e);
     }
-  }]);
-
-  return Toggle;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(Toggle, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "defaultToggled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelA", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelB", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onToggle", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "size", PropTypes__default["default"].oneOf(['sm', 'md'])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "toggled", PropTypes__default["default"].bool), _defineProperty2));
-
-_rollupPluginBabelHelpers.defineProperty(Toggle, "contextType", usePrefix.PrefixContext);
-
-_rollupPluginBabelHelpers.defineProperty(Toggle, "defaultProps", (_defineProperty3 = {
-  defaultToggled: false
-}, _rollupPluginBabelHelpers.defineProperty(_defineProperty3, 'aria-label', 'Toggle'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "labelA", 'Off'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "labelB", 'On'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onToggle", function onToggle() {}), _defineProperty3));
-
-var ToggleClassic = Toggle;
+  }
 
-exports["default"] = ToggleClassic;
+  var isSm = size === 'sm';
+  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
+  var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
+  var switchClasses = cx__default["default"]("".concat(prefix, "--toggle__switch"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
+    id: id,
+    className: "".concat(prefix, "--toggle__button"),
+    role: "switch",
+    type: "button",
+    "aria-checked": checked,
+    disabled: disabled,
+    onClick: handleClick
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: "".concat(prefix, "--toggle__label")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: labelTextClasses
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: appearanceClasses
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: switchClasses
+  }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: "".concat(prefix, "--toggle__check"),
+    width: "6px",
+    height: "5px",
+    viewBox: "0 0 6 5"
+  }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+  })))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--toggle__text"),
+    "aria-hidden": "true"
+  }, sideLabel))));
+}
+Toggle.propTypes = {
+  /**
+   * Specify a custom className to apply to the form-item node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the toggle should be on by default
+   */
+  defaultToggled: PropTypes__default["default"].bool,
+
+  /**
+   * Whether this control should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an id that unique represents the underlying `<button>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify the label for the "off" position
+   */
+  labelA: PropTypes__default["default"].node,
+
+  /**
+   * Specify the label for the "on" position
+   */
+  labelB: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an event listener that is called when the control is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide an event listener that is called when the control is toggled
+   */
+  onToggle: PropTypes__default["default"].func,
+
+  /**
+   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md']),
+
+  /**
+   * Specify whether the control is toggled
+   */
+  toggled: PropTypes__default["default"].bool
+};
+
+exports.Toggle = Toggle;
+exports["default"] = Toggle;

package/lib/components/UIShell/HeaderMenu.js

@@ -173,7 +173,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy
       };
-      var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _cx)); // Notes on eslint comments and based on the examples in:
+      var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx)); // Notes on eslint comments and based on the examples in:
       // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
       // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
       // users