@carbon/react 1.4.0 → 1.6.0-rc.0

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/TreeView/TreeNode.js

@@ -74,6 +74,10 @@ function TreeNode(_ref) {
   var toggleClasses = cx__default["default"]("".concat(prefix, "--tree-parent-node__toggle-icon"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tree-parent-node__toggle-icon--expanded"), expanded));
 
   function handleToggleClick(event) {
+    if (disabled) {
+      return;
+    }
+
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
       id: id,
       isExpanded: !expanded,
@@ -106,6 +110,10 @@ function TreeNode(_ref) {
   function handleKeyDown(event) {
     var _rest$onKeyDown;
 
+    if (disabled) {
+      return;
+    }
+
     if (match.matches(event, [keys.ArrowLeft, keys.ArrowRight, keys.Enter])) {
       event.stopPropagation();
     }

package/lib/components/TreeView/TreeView.js

@@ -182,7 +182,7 @@ function TreeView(_ref) {
       var nodeIds = [];
 
       if (match.matches(event, [keys.Home, keys.End])) {
-        if (multiselect && event.shiftKey && event.ctrlKey) {
+        if (multiselect && event.shiftKey && event.ctrlKey && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
           var _treeWalker$current$c;
 
           nodeIds.push((_treeWalker$current$c = treeWalker.current.currentNode) === null || _treeWalker$current$c === void 0 ? void 0 : _treeWalker$current$c.id);
@@ -191,7 +191,7 @@ function TreeView(_ref) {
         while (match.match(event, keys.Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
 
-          if (multiselect && event.shiftKey && event.ctrlKey) {
+          if (multiselect && event.shiftKey && event.ctrlKey && !nextFocusNode.getAttribute('aria-disabled')) {
             var _nextFocusNode;
 
             nodeIds.push((_nextFocusNode = nextFocusNode) === null || _nextFocusNode === void 0 ? void 0 : _nextFocusNode.id);
@@ -205,9 +205,11 @@ function TreeView(_ref) {
         treeWalker.current.currentNode = treeWalker.current.root;
 
         while (treeWalker.current.nextNode()) {
-          var _treeWalker$current$c2;
+          if (!treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+            var _treeWalker$current$c2;
 
-          nodeIds.push((_treeWalker$current$c2 = treeWalker.current.currentNode) === null || _treeWalker$current$c2 === void 0 ? void 0 : _treeWalker$current$c2.id);
+            nodeIds.push((_treeWalker$current$c2 = treeWalker.current.currentNode) === null || _treeWalker$current$c2 === void 0 ? void 0 : _treeWalker$current$c2.id);
+          }
         }
       }
 

package/lib/components/UIShell/HeaderGlobalBar.js

@@ -17,7 +17,9 @@ var wrapComponent = require('../../tools/wrapComponent.js');
 
 var HeaderGlobalBar = wrapComponent["default"]({
   name: 'HeaderGlobalBar',
-  className: "cds--header__global",
+  className: function className(prefix) {
+    return "".concat(prefix, "--header__global");
+  },
   type: 'div'
 });
 

package/lib/components/UIShell/SideNav.js

@@ -222,15 +222,15 @@ SideNav.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHe
    * @param {object} event
    * @param {boolean} value
    */
-  onToggle: PropTypes__default["default"].func,
-
+  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
+  // translateById: PropTypes.func,
+
 });
 var SideNav$1 = SideNav;
 

package/lib/index.js

@@ -18,16 +18,16 @@ var Button = require('./components/Button/Button.js');
 var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
 var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
-var index$g = require('./components/ClassPrefix/index.js');
+var index$f = require('./components/ClassPrefix/index.js');
 var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
 var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
 var ComboBox = require('./components/ComboBox/ComboBox.js');
-var index$h = require('./components/ComposedModal/index.js');
+var index$g = require('./components/ComposedModal/index.js');
 var index = require('./components/ContentSwitcher/index.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
 var DangerButton = require('./components/DangerButton/DangerButton.js');
-var index$i = require('./components/DataTable/index.js');
+var index$h = require('./components/DataTable/index.js');
 var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
 var DatePicker = require('./components/DatePicker/DatePicker.js');
 var DatePickerInput = require('./components/DatePickerInput/DatePickerInput.js');
@@ -45,8 +45,8 @@ var ListItem = require('./components/ListItem/ListItem.js');
 var Loading = require('./components/Loading/Loading.js');
 var index$2 = require('./components/Modal/index.js');
 var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
-var index$j = require('./components/MultiSelect/index.js');
-var index$k = require('./components/Notification/index.js');
+var index$i = require('./components/MultiSelect/index.js');
+var index$j = require('./components/Notification/index.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
 var NumberInput = require('./components/NumberInput/NumberInput.js');
 var OrderedList = require('./components/OrderedList/OrderedList.js');
@@ -55,7 +55,7 @@ var index$4 = require('./components/OverflowMenuItem/index.js');
 var index$5 = require('./components/Pagination/index.js');
 var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
 var PrimaryButton = require('./components/PrimaryButton/PrimaryButton.js');
-var index$l = require('./components/ProgressIndicator/index.js');
+var index$k = require('./components/ProgressIndicator/index.js');
 var index$6 = require('./components/RadioButton/index.js');
 var index$7 = require('./components/RadioButtonGroup/index.js');
 var index$8 = require('./components/Search/index.js');
@@ -69,7 +69,7 @@ var SelectItem = require('./components/SelectItem/SelectItem.js');
 var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
 var Switch = require('./components/Switch/Switch.js');
 var index$9 = require('./components/Slider/index.js');
-var index$m = require('./components/StructuredList/index.js');
+var index$l = require('./components/StructuredList/index.js');
 var index$a = require('./components/Tab/index.js');
 var TabContent = require('./components/TabContent/TabContent.js');
 var index$b = require('./components/Tabs/index.js');
@@ -78,13 +78,14 @@ var Tag = require('./components/Tag/Tag.js');
 var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
 var TextArea = require('./components/TextArea/TextArea.js');
 require('./components/TextInput/index.js');
-var index$n = require('./components/Tile/index.js');
+var index$m = require('./components/Tile/index.js');
 var RadioTile = require('./components/RadioTile/RadioTile.js');
 var index$c = require('./components/TileGroup/index.js');
 var index$d = require('./components/TimePicker/index.js');
 var index$e = require('./components/TimePickerSelect/index.js');
-var index$f = require('./components/Toggle/index.js');
-var index$o = require('./components/Toggletip/index.js');
+var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
+var Toggle = require('./components/Toggle/Toggle.js');
+var index$n = require('./components/Toggletip/index.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
@@ -99,21 +100,21 @@ var Search_Skeleton = require('./components/Search/Search.Skeleton.js');
 var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
-var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
 var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
-var index$p = require('./components/UIShell/index.js');
-var index$q = require('./components/FeatureFlags/index.js');
-var index$r = require('./components/Heading/index.js');
-var index$s = require('./components/IconButton/index.js');
-var index$t = require('./components/Layer/index.js');
+var index$o = require('./components/UIShell/index.js');
+var index$p = require('./components/FeatureFlags/index.js');
+var index$q = require('./components/Heading/index.js');
+var index$r = require('./components/IconButton/index.js');
+var index$s = require('./components/Layer/index.js');
 require('./components/Menu/index.js');
-var index$u = require('./components/OverflowMenuV2/index.js');
-var index$v = require('./components/Popover/index.js');
-var index$w = require('./components/Stack/index.js');
+var index$t = require('./components/OverflowMenuV2/index.js');
+var index$u = require('./components/Popover/index.js');
+var index$v = require('./components/Stack/index.js');
 var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
 require('./components/TreeView/index.js');
-var index$x = require('./components/Theme/index.js');
+var index$w = require('./components/Theme/index.js');
+var usePrefix = require('./internal/usePrefix.js');
 var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
 var Filename = require('./components/FileUploader/Filename.js');
 var FileUploaderButton = require('./components/FileUploader/FileUploaderButton.js');
@@ -208,17 +209,17 @@ exports.Button = Button["default"];
 exports.ButtonSet = ButtonSet["default"];
 exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
 exports.Checkbox = Checkbox["default"];
-exports.ClassPrefix = index$g.ClassPrefix;
+exports.ClassPrefix = index$f.ClassPrefix;
 exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
 exports.CodeSnippet = CodeSnippet["default"];
 exports.ComboBox = ComboBox["default"];
-exports.ModalFooter = index$h.ModalFooter;
-exports.ModalHeader = index$h.ModalHeader;
+exports.ModalFooter = index$g.ModalFooter;
+exports.ModalHeader = index$g.ModalHeader;
 exports.ContentSwitcher = index["default"];
 exports.Copy = Copy["default"];
 exports.CopyButton = CopyButton["default"];
 exports.DangerButton = DangerButton["default"];
-exports.DataTable = index$i["default"];
+exports.DataTable = index$h["default"];
 exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
 exports.DatePicker = DatePicker["default"];
 exports.DatePickerInput = DatePickerInput["default"];
@@ -236,13 +237,13 @@ exports.ListItem = ListItem["default"];
 exports.Loading = Loading["default"];
 exports.Modal = index$2["default"];
 exports.ModalWrapper = ModalWrapper["default"];
-exports.FilterableMultiSelect = index$j.FilterableMultiSelect;
-exports.ActionableNotification = index$k.ActionableNotification;
-exports.InlineNotification = index$k.InlineNotification;
-exports.NotificationActionButton = index$k.NotificationActionButton;
-exports.NotificationButton = index$k.NotificationButton;
-exports.NotificationTextDetails = index$k.NotificationTextDetails;
-exports.ToastNotification = index$k.ToastNotification;
+exports.FilterableMultiSelect = index$i.FilterableMultiSelect;
+exports.ActionableNotification = index$j.ActionableNotification;
+exports.InlineNotification = index$j.InlineNotification;
+exports.NotificationActionButton = index$j.NotificationActionButton;
+exports.NotificationButton = index$j.NotificationButton;
+exports.NotificationTextDetails = index$j.NotificationTextDetails;
+exports.ToastNotification = index$j.ToastNotification;
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
 exports.NumberInput = NumberInput["default"];
 exports.OrderedList = OrderedList["default"];
@@ -251,7 +252,7 @@ exports.OverflowMenuItem = index$4["default"];
 exports.Pagination = index$5["default"];
 exports.PaginationNav = PaginationNav["default"];
 exports.PrimaryButton = PrimaryButton["default"];
-exports.ProgressIndicator = index$l.ProgressIndicator;
+exports.ProgressIndicator = index$k.ProgressIndicator;
 exports.RadioButton = index$6["default"];
 exports.RadioButtonGroup = index$7["default"];
 exports.Search = index$8["default"];
@@ -265,12 +266,12 @@ exports.SelectItem = SelectItem["default"];
 exports.SelectItemGroup = SelectItemGroup["default"];
 exports.Switch = Switch["default"];
 exports.Slider = index$9["default"];
-exports.StructuredListBody = index$m.StructuredListBody;
-exports.StructuredListCell = index$m.StructuredListCell;
-exports.StructuredListHead = index$m.StructuredListHead;
-exports.StructuredListInput = index$m.StructuredListInput;
-exports.StructuredListRow = index$m.StructuredListRow;
-exports.StructuredListWrapper = index$m.StructuredListWrapper;
+exports.StructuredListBody = index$l.StructuredListBody;
+exports.StructuredListCell = index$l.StructuredListCell;
+exports.StructuredListHead = index$l.StructuredListHead;
+exports.StructuredListInput = index$l.StructuredListInput;
+exports.StructuredListRow = index$l.StructuredListRow;
+exports.StructuredListWrapper = index$l.StructuredListWrapper;
 exports.Tab = index$a["default"];
 exports.TabContent = TabContent["default"];
 exports.Tabs = index$b["default"];
@@ -278,22 +279,23 @@ exports.TagSkeleton = Tag_Skeleton["default"];
 exports.Tag = Tag["default"];
 exports.TextAreaSkeleton = TextArea_Skeleton["default"];
 exports.TextArea = TextArea["default"];
-exports.ClickableTile = index$n.ClickableTile;
-exports.ExpandableTile = index$n.ExpandableTile;
-exports.SelectableTile = index$n.SelectableTile;
-exports.Tile = index$n.Tile;
-exports.TileAboveTheFoldContent = index$n.TileAboveTheFoldContent;
-exports.TileBelowTheFoldContent = index$n.TileBelowTheFoldContent;
+exports.ClickableTile = index$m.ClickableTile;
+exports.ExpandableTile = index$m.ExpandableTile;
+exports.SelectableTile = index$m.SelectableTile;
+exports.Tile = index$m.Tile;
+exports.TileAboveTheFoldContent = index$m.TileAboveTheFoldContent;
+exports.TileBelowTheFoldContent = index$m.TileBelowTheFoldContent;
 exports.RadioTile = RadioTile["default"];
 exports.TileGroup = index$c["default"];
 exports.TimePicker = index$d["default"];
 exports.TimePickerSelect = index$e["default"];
-exports.Toggle = index$f["default"];
-exports.Toggletip = index$o.Toggletip;
-exports.ToggletipActions = index$o.ToggletipActions;
-exports.ToggletipButton = index$o.ToggletipButton;
-exports.ToggletipContent = index$o.ToggletipContent;
-exports.ToggletipLabel = index$o.ToggletipLabel;
+exports.ToggleSkeleton = Toggle_Skeleton["default"];
+exports.Toggle = Toggle.Toggle;
+exports.Toggletip = index$n.Toggletip;
+exports.ToggletipActions = index$n.ToggletipActions;
+exports.ToggletipButton = index$n.ToggletipButton;
+exports.ToggletipContent = index$n.ToggletipContent;
+exports.ToggletipLabel = index$n.ToggletipLabel;
 exports.UnorderedList = UnorderedList["default"];
 exports.SkeletonText = SkeletonText["default"];
 exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
@@ -308,27 +310,27 @@ exports.SearchSkeleton = Search_Skeleton["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
-exports.ToggleSkeleton = Toggle_Skeleton["default"];
 exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
 exports.IconSkeleton = Icon_Skeleton["default"];
-exports.HeaderNavigation = index$p.HeaderNavigation;
-exports.SideNavMenu = index$p.SideNavMenu;
-exports.unstable_FeatureFlags = index$q.FeatureFlags;
-exports.unstable_useFeatureFlag = index$q.useFeatureFlag;
-exports.unstable_useFeatureFlags = index$q.useFeatureFlags;
-exports.Heading = index$r.Heading;
-exports.Section = index$r.Section;
-exports.IconButton = index$s.IconButton;
-exports.Layer = index$t.Layer;
-exports.unstable_OverflowMenuV2 = index$u.OverflowMenuV2;
-exports.Popover = index$v.Popover;
-exports.PopoverContent = index$v.PopoverContent;
-exports.HStack = index$w.HStack;
-exports.VStack = index$w.VStack;
+exports.HeaderNavigation = index$o.HeaderNavigation;
+exports.SideNavMenu = index$o.SideNavMenu;
+exports.unstable_FeatureFlags = index$p.FeatureFlags;
+exports.unstable_useFeatureFlag = index$p.useFeatureFlag;
+exports.unstable_useFeatureFlags = index$p.useFeatureFlags;
+exports.Heading = index$q.Heading;
+exports.Section = index$q.Section;
+exports.IconButton = index$r.IconButton;
+exports.Layer = index$s.Layer;
+exports.unstable_OverflowMenuV2 = index$t.OverflowMenuV2;
+exports.Popover = index$u.Popover;
+exports.PopoverContent = index$u.PopoverContent;
+exports.HStack = index$v.HStack;
+exports.VStack = index$v.VStack;
 exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
-exports.GlobalTheme = index$x.GlobalTheme;
-exports.Theme = index$x.Theme;
-exports.useTheme = index$x.useTheme;
+exports.GlobalTheme = index$w.GlobalTheme;
+exports.Theme = index$w.Theme;
+exports.useTheme = index$w.useTheme;
+exports.usePrefix = usePrefix.usePrefix;
 exports.AspectRatio = AspectRatio["default"];
 exports.Filename = Filename["default"];
 exports.FileUploaderButton = FileUploaderButton["default"];

package/lib/tools/wrapComponent.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
+var usePrefix = require('../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,21 +25,22 @@ var _excluded = ["className"];
 
 var wrapComponent = function wrapComponent(_ref) {
   var name = _ref.name,
-      className = _ref.className,
+      getClassName = _ref.className,
       type = _ref.type;
 
-  var Component = function Component(_ref2) {
+  function Component(_ref2) {
     var baseClassName = _ref2.className,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
 
-    var componentClass = cx__default["default"](className, baseClassName);
+    var prefix = usePrefix.usePrefix();
+    var componentClass = cx__default["default"](typeof getClassName === 'function' ? getClassName(prefix) : getClassName, baseClassName);
     return /*#__PURE__*/React__default["default"].createElement(type, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
       // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
       // and so we have empty `class` attributes in the resulting markup
       // eslint-disable-next-line no-extra-boolean-cast
       className: !!componentClass ? componentClass : undefined
     }));
-  };
+  }
 
   Component.displayName = name;
   Component.propTypes = {