@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/TimePicker/TimePicker.js

@@ -22,54 +22,32 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "className", "disabled", "hideLabel", "id", "invalidText", "invalid", "labelText", "light", "maxLength", "onChange", "onClick", "onBlur", "pattern", "placeholder", "readOnly", "size", "type", "value"];
-var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function TimePicker(_ref, ref) {
-  var _objectSpread2, _cx2;
-
-  var children = _ref.children,
-      className = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      hideLabel = _ref.hideLabel,
-      id = _ref.id,
-      _ref$invalidText = _ref.invalidText,
-      invalidText = _ref$invalidText === void 0 ? 'Invalid time format.' : _ref$invalidText,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      labelText = _ref.labelText,
-      _ref$light = _ref.light,
-      light = _ref$light === void 0 ? false : _ref$light,
-      _ref$maxLength = _ref.maxLength,
-      maxLength = _ref$maxLength === void 0 ? 5 : _ref$maxLength,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-      _ref$pattern = _ref.pattern,
-      pattern = _ref$pattern === void 0 ? '(1[012]|[1-9]):[0-5][0-9](\\s)?' : _ref$pattern,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'hh:mm' : _ref$placeholder,
-      readOnly = _ref.readOnly,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      value = _ref.value,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _React$useState = React__default["default"].useState(value),
-      _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-      isValue = _React$useState2[0],
-      setValue = _React$useState2[1];
-
-  var _React$useState3 = React__default["default"].useState(value),
-      _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-      prevValue = _React$useState4[0],
-      setPrevValue = _React$useState4[1];
+const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function TimePicker(_ref, ref) {
+  let {
+    children,
+    className,
+    disabled = false,
+    hideLabel,
+    id,
+    invalidText = 'Invalid time format.',
+    invalid = false,
+    labelText,
+    light = false,
+    maxLength = 5,
+    onChange = () => {},
+    onClick = () => {},
+    onBlur = () => {},
+    pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?',
+    placeholder = 'hh:mm',
+    readOnly,
+    size = 'md',
+    type = 'text',
+    value,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const [isValue, setValue] = React__default["default"].useState(value);
+  const [prevValue, setPrevValue] = React__default["default"].useState(value);
 
   if (value !== prevValue) {
     setValue(value);
@@ -103,20 +81,34 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Time
     }
   }
 
-  var timePickerInputClasses = cx__default["default"]("".concat(prefix, "--time-picker__input-field"), "".concat(prefix, "--text-input"), [className], _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--light"), light));
-  var timePickerClasses = cx__default["default"](_rollupPluginBabelHelpers.objectSpread2((_objectSpread2 = {}, _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--time-picker"), true), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--time-picker--light"), light), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--time-picker--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--time-picker--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--time-picker--").concat(size), size), _objectSpread2), className && _rollupPluginBabelHelpers.defineProperty({}, className, true)));
-  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _cx2));
-  var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+  const timePickerInputClasses = cx__default["default"](`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [className], {
+    [`${prefix}--text-input--light`]: light
+  });
+  const timePickerClasses = cx__default["default"]({
+    [`${prefix}--time-picker`]: true,
+    [`${prefix}--time-picker--light`]: light,
+    [`${prefix}--time-picker--invalid`]: invalid,
+    [`${prefix}--time-picker--readonly`]: readOnly,
+    [`${prefix}--time-picker--${size}`]: size,
+    ...(className && {
+      [className]: true
+    })
+  });
+  const labelClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  var error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+  const error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--form-requirement`
   }, invalidText) : null;
 
   function getInternalPickerSelects() {
-    var readOnlyEventHandlers = {
-      onMouseDown: function onMouseDown(evt) {
+    const readOnlyEventHandlers = {
+      onMouseDown: evt => {
         // NOTE: does not prevent click
         if (readOnly) {
           evt.preventDefault(); // focus on the element as per readonly input behavior
@@ -124,33 +116,34 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Time
           evt.target.focus();
         }
       },
-      onKeyDown: function onKeyDown(evt) {
-        var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ']; // This prevents the select from opening for the above keys
+      onKeyDown: evt => {
+        const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ']; // This prevents the select from opening for the above keys
 
         if (readOnly && selectAccessKeys.includes(evt.key)) {
           evt.preventDefault();
         }
       }
     };
-    var mappedChildren = React__default["default"].Children.map(children, function (pickerSelect) {
-      var item = pickerSelect;
-      return /*#__PURE__*/React__default["default"].cloneElement(item, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, item.props), {}, {
+    const mappedChildren = React__default["default"].Children.map(children, pickerSelect => {
+      const item = pickerSelect;
+      return /*#__PURE__*/React__default["default"].cloneElement(item, { ...item.props,
         disabled: disabled,
-        readOnly: readOnly
-      }, readOnlyEventHandlers));
+        readOnly: readOnly,
+        ...readOnlyEventHandlers
+      });
     });
     return mappedChildren;
   }
 
-  var readOnlyProps = {
+  const readOnlyProps = {
     readOnly: readOnly
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+    className: cx__default["default"](`${prefix}--form-item`, className)
   }, label, /*#__PURE__*/React__default["default"].createElement("div", {
     className: timePickerClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--time-picker__input")
+    className: `${prefix}--time-picker__input`
   }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
     className: timePickerInputClasses,
     "data-invalid": invalid ? invalid : undefined,

package/lib/components/TimePickerSelect/TimePickerSelect.js

@@ -22,31 +22,33 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["aria-label", "children", "id", "disabled", "className"];
-var TimePickerSelect = /*#__PURE__*/React__default["default"].forwardRef(function TimePickerSelect(_ref, ref) {
-  var _objectSpread2;
-
-  var _ref$ariaLabel = _ref['aria-label'],
-      ariaLabel = _ref$ariaLabel === void 0 ? 'open list of options' : _ref$ariaLabel,
-      children = _ref.children,
-      id = _ref.id,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var selectClasses = cx__default["default"](_rollupPluginBabelHelpers.objectSpread2((_objectSpread2 = {}, _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--time-picker__select"), true), _objectSpread2), className && _rollupPluginBabelHelpers.defineProperty({}, className, true)));
+const TimePickerSelect = /*#__PURE__*/React__default["default"].forwardRef(function TimePickerSelect(_ref, ref) {
+  let {
+    ['aria-label']: ariaLabel = 'open list of options',
+    children,
+    id,
+    disabled = false,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const selectClasses = cx__default["default"]({
+    [`${prefix}--select`]: true,
+    [`${prefix}--time-picker__select`]: true,
+    ...(className && {
+      [className]: true
+    })
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: selectClasses
   }, /*#__PURE__*/React__default["default"].createElement("select", _rollupPluginBabelHelpers["extends"]({
     "aria-label": ariaLabel,
-    className: "".concat(prefix, "--select-input"),
+    className: `${prefix}--select-input`,
     disabled: disabled,
     id: id,
     ref: ref
   }, rest), children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-    className: "".concat(prefix, "--select__arrow"),
+    className: `${prefix}--select__arrow`,
     "aria-hidden": "true"
   }));
 });

package/lib/components/TimePickerSelect/index.js

@@ -32,7 +32,7 @@ function _interopNamespace(e) {
 
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var TimePickerSelect = FeatureFlags__namespace.enabled('enable-v11-release') ? TimePickerSelect$1["default"] : TimePickerSelect$1["default"];
+const TimePickerSelect = FeatureFlags__namespace.enabled('enable-v11-release') ? TimePickerSelect$1["default"] : TimePickerSelect$1["default"];
 
 exports.TimePickerSelect = TimePickerSelect;
 exports["default"] = TimePickerSelect;

package/lib/components/Toggle/Toggle.Skeleton.js

@@ -21,65 +21,76 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _defineProperty2, _defineProperty3;
-
-var _excluded = ["id", "labelText", "className", "size"];
-
-var ToggleSkeleton = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(ToggleSkeleton, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(ToggleSkeleton);
-
-  function ToggleSkeleton() {
-    _rollupPluginBabelHelpers.classCallCheck(this, ToggleSkeleton);
-
-    return _super.apply(this, arguments);
-  }
-
-  _rollupPluginBabelHelpers.createClass(ToggleSkeleton, [{
-    key: "render",
-    value: function render() {
-      var _this = this,
-          _div;
-
-      var _this$props = this.props,
-          id = _this$props.id,
-          labelText = _this$props.labelText,
-          className = _this$props.className,
-          size = _this$props.size,
-          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var toggleInputClassNames = cx__default["default"]("".concat(prefix, "--toggle ").concat(prefix, "--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle-input--small"), size === 'sm'));
-        return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-          className: cx__default["default"]("".concat(prefix, "--form-item"), className)
-        }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
-          type: "checkbox",
-          id: id,
-          className: toggleInputClassNames
-        }), /*#__PURE__*/React__default["default"].createElement("label", {
-          className: "".concat(prefix, "--toggle-input__label"),
-          htmlFor: id,
-          "aria-label": labelText ? undefined : _this.props['aria-label']
-        }, labelText ? _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null, labelText)) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--toggle__switch")
-        }, /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--toggle__text--left")
-        }), /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--toggle__appearance")
-        }), /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--toggle__text--right")
-        }))));
+class ToggleSkeleton extends React__default["default"].Component {
+  render() {
+    var _div;
+
+    const {
+      id,
+      labelText,
+      className,
+      size,
+      ...rest
+    } = this.props;
+    return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
+      const toggleInputClassNames = cx__default["default"](`${prefix}--toggle ${prefix}--skeleton`, {
+        [`${prefix}--toggle-input--small`]: size === 'sm'
       });
-    }
-  }]);
-
-  return ToggleSkeleton;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(ToggleSkeleton, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "size", PropTypes__default["default"].oneOf(['sm', 'md'])), _defineProperty2));
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        className: cx__default["default"](`${prefix}--form-item`, className)
+      }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
+        type: "checkbox",
+        id: id,
+        className: toggleInputClassNames
+      }), /*#__PURE__*/React__default["default"].createElement("label", {
+        className: `${prefix}--toggle-input__label`,
+        htmlFor: id,
+        "aria-label": labelText ? undefined : this.props['aria-label']
+      }, labelText ? _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null, labelText)) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--toggle__switch`
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--toggle__text--left`
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--toggle__appearance`
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--toggle__text--right`
+      }))));
+    });
+  }
 
-_rollupPluginBabelHelpers.defineProperty(ToggleSkeleton, "defaultProps", (_defineProperty3 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty3, 'aria-label', 'Toggle is loading'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "size", 'md'), _defineProperty3));
+}
+
+_rollupPluginBabelHelpers.defineProperty(ToggleSkeleton, "propTypes", {
+  ['aria-label']: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide an id that unique represents the underlying `<input>`
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   * `aria-label` is always required but will be undefined if `labelText` is also
+   * provided
+   */
+  labelText: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md'])
+});
+
+_rollupPluginBabelHelpers.defineProperty(ToggleSkeleton, "defaultProps", {
+  ['aria-label']: 'Toggle is loading',
+  size: 'md'
+});
 
 exports.ToggleSkeleton = ToggleSkeleton;
 exports["default"] = ToggleSkeleton;

package/lib/components/Toggle/Toggle.js

@@ -23,44 +23,31 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _path;
-
-var _excluded = ["aria-labelledby", "className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "readOnly", "size", "toggled"];
 function Toggle(_ref) {
-  var _classNames;
-
-  var ariaLabelledby = _ref['aria-labelledby'],
-      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,
-      readOnly = _ref.readOnly,
-      _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 buttonElement = React.useRef(null);
-
-  var _useControllableState = useControllableState.useControllableState({
+  let {
+    'aria-labelledby': ariaLabelledby,
+    className,
+    defaultToggled = false,
+    disabled = false,
+    hideLabel = false,
+    id,
+    labelA = 'Off',
+    labelB = 'On',
+    labelText,
+    onClick,
+    onToggle,
+    readOnly,
+    size = 'md',
+    toggled,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const buttonElement = React.useRef(null);
+  const [checked, setChecked] = useControllableState.useControllableState({
     value: toggled,
     onChange: onToggle,
     defaultValue: defaultToggled
-  }),
-      _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
-      checked = _useControllableState2[0],
-      setChecked = _useControllableState2[1];
+  });
 
   function handleClick(e) {
     if (!readOnly) {
@@ -72,20 +59,29 @@ function Toggle(_ref) {
     }
   }
 
-  var isSm = size === 'sm';
-  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
-  var renderSideLabel = !(hideLabel && !labelText);
-  var LabelComponent = labelText ? 'label' : 'div';
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), 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));
+  const isSm = size === 'sm';
+  const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
+  const renderSideLabel = !(hideLabel && !labelText);
+  const LabelComponent = labelText ? 'label' : 'div';
+  const wrapperClasses = cx__default["default"](`${prefix}--toggle`, {
+    [`${prefix}--toggle--disabled`]: disabled,
+    [`${prefix}--toggle--readonly`]: readOnly
+  }, className);
+  const labelTextClasses = cx__default["default"](`${prefix}--toggle__label-text`, {
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  const appearanceClasses = cx__default["default"](`${prefix}--toggle__appearance`, {
+    [`${prefix}--toggle__appearance--sm`]: isSm
+  });
+  const switchClasses = cx__default["default"](`${prefix}--toggle__switch`, {
+    [`${prefix}--toggle__switch--checked`]: checked
+  });
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     React__default["default"].createElement("div", {
       className: wrapperClasses,
-      onClick: !labelText ? function (e) {
+      onClick: !labelText ? e => {
         // the underlying <button> can only be activated by keyboard as it is visually hidden;
         // therefore, if this event's target is the <button>, it had to be triggered by
         // the keyboard event which already calls handleClick. if we wouldn't catch this, the
@@ -99,7 +95,7 @@ function Toggle(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
       ref: buttonElement,
       id: id,
-      className: "".concat(prefix, "--toggle__button"),
+      className: `${prefix}--toggle__button`,
       role: "switch",
       type: "button",
       "aria-checked": checked,
@@ -108,7 +104,7 @@ function Toggle(_ref) {
       onClick: handleClick
     })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
       htmlFor: ariaLabelledby ? null : id,
-      className: "".concat(prefix, "--toggle__label")
+      className: `${prefix}--toggle__label`
     }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
       className: labelTextClasses
     }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -116,14 +112,14 @@ function Toggle(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: switchClasses
     }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
-      className: "".concat(prefix, "--toggle__check"),
+      className: `${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"
     })))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(prefix, "--toggle__text"),
+      className: `${prefix}--toggle__text`,
       "aria-hidden": "true"
     }, sideLabel))))
   );

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -21,62 +21,68 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _path, _defineProperty2;
-
-var _excluded = ["id", "labelText", "className"];
-
-var ToggleSmallSkeleton = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(ToggleSmallSkeleton, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(ToggleSmallSkeleton);
-
-  function ToggleSmallSkeleton() {
-    _rollupPluginBabelHelpers.classCallCheck(this, ToggleSmallSkeleton);
-
-    return _super.apply(this, arguments);
+var _path;
+
+class ToggleSmallSkeleton extends React__default["default"].Component {
+  render() {
+    const {
+      id,
+      labelText,
+      className,
+      ...rest
+    } = this.props;
+    return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        className: cx__default["default"](`${prefix}--form-item`, className)
+      }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
+        type: "checkbox",
+        id: id,
+        className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
+      }), /*#__PURE__*/React__default["default"].createElement("label", {
+        className: `${prefix}--toggle__label ${prefix}--skeleton`,
+        htmlFor: id
+      }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--toggle__label-text`
+      }, labelText), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--toggle__appearance`
+      }, /*#__PURE__*/React__default["default"].createElement("svg", {
+        className: `${prefix}--toggle__check`,
+        width: "6px",
+        height: "5px",
+        viewBox: "0 0 6 5"
+      }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+        d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
+      }))))));
+    });
   }
 
-  _rollupPluginBabelHelpers.createClass(ToggleSmallSkeleton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          labelText = _this$props.labelText,
-          className = _this$props.className,
-          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-          className: cx__default["default"]("".concat(prefix, "--form-item"), className)
-        }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
-          type: "checkbox",
-          id: id,
-          className: "".concat(prefix, "--toggle ").concat(prefix, "--toggle--small ").concat(prefix, "--skeleton")
-        }), /*#__PURE__*/React__default["default"].createElement("label", {
-          className: "".concat(prefix, "--toggle__label ").concat(prefix, "--skeleton"),
-          htmlFor: id
-        }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--toggle__label-text")
-        }, labelText), /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--toggle__appearance")
-        }, /*#__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.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
-        }))))));
-      });
-    }
-  }]);
-
-  return ToggleSmallSkeleton;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelText", PropTypes__default["default"].string), _defineProperty2));
-
-_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "defaultProps", _rollupPluginBabelHelpers.defineProperty({}, 'aria-label', 'Toggle is loading'));
+}
+
+_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "propTypes", {
+  ['aria-label']: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide an id that unique represents the underlying `<input>`
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   * `aria-label` is always required but will be null if `labelText` is also
+   * provided
+   */
+  labelText: PropTypes__default["default"].string
+});
+
+_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "defaultProps", {
+  ['aria-label']: 'Toggle is loading'
+});
 
 exports.ToggleSmallSkeleton = ToggleSmallSkeleton;
 exports["default"] = ToggleSmallSkeleton;