@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/Toggle/Toggle.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -13,44 +13,31 @@ import { useControllableState } from '../../internal/useControllableState.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var buttonElement = useRef(null);
-
-  var _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();
+  const buttonElement = useRef(null);
+  const [checked, setChecked] = useControllableState({
     value: toggled,
     onChange: onToggle,
     defaultValue: defaultToggled
-  }),
-      _useControllableState2 = _slicedToArray(_useControllableState, 2),
-      checked = _useControllableState2[0],
-      setChecked = _useControllableState2[1];
+  });
 
   function handleClick(e) {
     if (!readOnly) {
@@ -62,20 +49,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("".concat(prefix, "--toggle"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), className);
-  var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
-  var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
-  var switchClasses = cx("".concat(prefix, "--toggle__switch"), _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(`${prefix}--toggle`, {
+    [`${prefix}--toggle--disabled`]: disabled,
+    [`${prefix}--toggle--readonly`]: readOnly
+  }, className);
+  const labelTextClasses = cx(`${prefix}--toggle__label-text`, {
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  const appearanceClasses = cx(`${prefix}--toggle__appearance`, {
+    [`${prefix}--toggle__appearance--sm`]: isSm
+  });
+  const switchClasses = cx(`${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.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
@@ -89,7 +85,7 @@ function Toggle(_ref) {
     }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
       ref: buttonElement,
       id: id,
-      className: "".concat(prefix, "--toggle__button"),
+      className: `${prefix}--toggle__button`,
       role: "switch",
       type: "button",
       "aria-checked": checked,
@@ -98,7 +94,7 @@ function Toggle(_ref) {
       onClick: handleClick
     })), /*#__PURE__*/React__default.createElement(LabelComponent, {
       htmlFor: ariaLabelledby ? null : id,
-      className: "".concat(prefix, "--toggle__label")
+      className: `${prefix}--toggle__label`
     }, labelText && /*#__PURE__*/React__default.createElement("span", {
       className: labelTextClasses
     }, labelText), /*#__PURE__*/React__default.createElement("div", {
@@ -106,14 +102,14 @@ function Toggle(_ref) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: switchClasses
     }, isSm && /*#__PURE__*/React__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.createElement("path", {
       d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
     })))), renderSideLabel && /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(prefix, "--toggle__text"),
+      className: `${prefix}--toggle__text`,
       "aria-hidden": "true"
     }, sideLabel))))
   );

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -5,67 +5,73 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
-var _path, _defineProperty2;
+var _path;
 
-var _excluded = ["id", "labelText", "className"];
-
-var ToggleSmallSkeleton = /*#__PURE__*/function (_React$Component) {
-  _inherits(ToggleSmallSkeleton, _React$Component);
-
-  var _super = _createSuper(ToggleSmallSkeleton);
-
-  function ToggleSmallSkeleton() {
-    _classCallCheck(this, ToggleSmallSkeleton);
-
-    return _super.apply(this, arguments);
+class ToggleSmallSkeleton extends React__default.Component {
+  render() {
+    const {
+      id,
+      labelText,
+      className,
+      ...rest
+    } = this.props;
+    return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
+      return /*#__PURE__*/React__default.createElement("div", _extends({
+        className: cx(`${prefix}--form-item`, className)
+      }, rest), /*#__PURE__*/React__default.createElement("input", {
+        type: "checkbox",
+        id: id,
+        className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
+      }), /*#__PURE__*/React__default.createElement("label", {
+        className: `${prefix}--toggle__label ${prefix}--skeleton`,
+        htmlFor: id
+      }, labelText && /*#__PURE__*/React__default.createElement("span", {
+        className: `${prefix}--toggle__label-text`
+      }, labelText), /*#__PURE__*/React__default.createElement("span", {
+        className: `${prefix}--toggle__appearance`
+      }, /*#__PURE__*/React__default.createElement("svg", {
+        className: `${prefix}--toggle__check`,
+        width: "6px",
+        height: "5px",
+        viewBox: "0 0 6 5"
+      }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+        d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
+      }))))));
+    });
   }
 
-  _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 = _objectWithoutProperties(_this$props, _excluded);
+}
+
+_defineProperty(ToggleSmallSkeleton, "propTypes", {
+  ['aria-label']: PropTypes.string.isRequired,
 
-      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
-        return /*#__PURE__*/React__default.createElement("div", _extends({
-          className: cx("".concat(prefix, "--form-item"), className)
-        }, rest), /*#__PURE__*/React__default.createElement("input", {
-          type: "checkbox",
-          id: id,
-          className: "".concat(prefix, "--toggle ").concat(prefix, "--toggle--small ").concat(prefix, "--skeleton")
-        }), /*#__PURE__*/React__default.createElement("label", {
-          className: "".concat(prefix, "--toggle__label ").concat(prefix, "--skeleton"),
-          htmlFor: id
-        }, labelText && /*#__PURE__*/React__default.createElement("span", {
-          className: "".concat(prefix, "--toggle__label-text")
-        }, labelText), /*#__PURE__*/React__default.createElement("span", {
-          className: "".concat(prefix, "--toggle__appearance")
-        }, /*#__PURE__*/React__default.createElement("svg", {
-          className: "".concat(prefix, "--toggle__check"),
-          width: "6px",
-          height: "5px",
-          viewBox: "0 0 6 5"
-        }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-          d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
-        }))))));
-      });
-    }
-  }]);
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className: PropTypes.string,
 
-  return ToggleSmallSkeleton;
-}(React__default.Component);
+  /**
+   * Provide an id that unique represents the underlying `<input>`
+   */
+  id: PropTypes.string,
 
-_defineProperty(ToggleSmallSkeleton, "propTypes", (_defineProperty2 = {}, _defineProperty(_defineProperty2, 'aria-label', PropTypes.string.isRequired), _defineProperty(_defineProperty2, "className", PropTypes.string), _defineProperty(_defineProperty2, "id", PropTypes.string), _defineProperty(_defineProperty2, "labelText", PropTypes.string), _defineProperty2));
+  /**
+   * 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.string
+});
 
-_defineProperty(ToggleSmallSkeleton, "defaultProps", _defineProperty({}, 'aria-label', 'Toggle is loading'));
+_defineProperty(ToggleSmallSkeleton, "defaultProps", {
+  ['aria-label']: 'Toggle is loading'
+});
 
 export { ToggleSmallSkeleton, ToggleSmallSkeleton as default };

package/es/components/Toggletip/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useContext } from 'react';
@@ -21,12 +21,13 @@ import { Escape } from '../../internal/keyboard/keys.js';
  */
 
 function ToggletipLabel(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'span' : _ref$as,
-      children = _ref.children,
-      customClassName = _ref.className;
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--toggletip-label"), customClassName);
+  let {
+    as: BaseComponent = 'span',
+    children,
+    className: customClassName
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--toggletip-label`, customClassName);
   return /*#__PURE__*/React__default.createElement(BaseComponent, {
     className: className
   }, children);
@@ -52,7 +53,7 @@ ToggletipLabel.propTypes = {
 }; // Used to coordinate accessibility props between button and content along with
 // the actions to open and close the toggletip
 
-var ToggletipContext = /*#__PURE__*/React__default.createContext();
+const ToggletipContext = /*#__PURE__*/React__default.createContext();
 
 function useToggletip() {
   return useContext(ToggletipContext);
@@ -65,38 +66,36 @@ function useToggletip() {
 
 
 function Toggletip(_ref2) {
-  var align = _ref2.align,
-      as = _ref2.as,
-      customClassName = _ref2.className,
-      children = _ref2.children,
-      _ref2$defaultOpen = _ref2.defaultOpen,
-      defaultOpen = _ref2$defaultOpen === void 0 ? false : _ref2$defaultOpen;
-  var ref = useRef();
-
-  var _useState = useState(defaultOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var prefix = usePrefix();
-  var id = useId();
-  var className = cx("".concat(prefix, "--toggletip"), customClassName, _defineProperty({}, "".concat(prefix, "--toggletip--open"), open));
-  var actions = {
-    toggle: function toggle() {
+  let {
+    align,
+    as,
+    className: customClassName,
+    children,
+    defaultOpen = false
+  } = _ref2;
+  const ref = useRef();
+  const [open, setOpen] = useState(defaultOpen);
+  const prefix = usePrefix();
+  const id = useId();
+  const className = cx(`${prefix}--toggletip`, customClassName, {
+    [`${prefix}--toggletip--open`]: open
+  });
+  const actions = {
+    toggle: () => {
       setOpen(!open);
     },
-    close: function close() {
+    close: () => {
       setOpen(false);
     }
   };
-  var value = {
+  const value = {
     buttonProps: {
       'aria-expanded': open,
       'aria-controls': id,
       onClick: actions.toggle
     },
     contentProps: {
-      id: id
+      id
     }
   };
 
@@ -104,7 +103,7 @@ function Toggletip(_ref2) {
     if (open && match(event, Escape)) {
       actions.close(); // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
 
-      var button = ref.current.children[0];
+      const button = ref.current.children[0];
 
       if (button && button.type === 'button') {
         button.focus();
@@ -125,12 +124,12 @@ function Toggletip(_ref2) {
   } // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
 
 
-  useWindowEvent('blur', function () {
+  useWindowEvent('blur', () => {
     if (open) {
       actions.close();
     }
   });
-  useWindowEvent('click', function (event) {
+  useWindowEvent('click', event => {
     if (open && !ref.current.contains(event.target)) {
       actions.close();
     }
@@ -185,13 +184,14 @@ Toggletip.propTypes = {
  */
 
 function ToggletipButton(_ref3) {
-  var children = _ref3.children,
-      customClassName = _ref3.className,
-      _ref3$label = _ref3.label,
-      label = _ref3$label === void 0 ? 'Show information' : _ref3$label;
-  var toggletip = useToggletip();
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--toggletip-button"), customClassName);
+  let {
+    children,
+    className: customClassName,
+    label = 'Show information'
+  } = _ref3;
+  const toggletip = useToggletip();
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--toggletip-button`, customClassName);
   return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip.buttonProps, {
     "aria-label": label,
     type: "button",
@@ -223,14 +223,16 @@ ToggletipButton.propTypes = {
  */
 
 function ToggletipContent(_ref4) {
-  var children = _ref4.children,
-      customClassName = _ref4.className;
-  var toggletip = useToggletip();
-  var prefix = usePrefix();
+  let {
+    children,
+    className: customClassName
+  } = _ref4;
+  const toggletip = useToggletip();
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
     className: customClassName
   }, toggletip.contentProps), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--toggletip-content")
+    className: `${prefix}--toggletip-content`
   }, children));
 }
 
@@ -252,10 +254,12 @@ ToggletipContent.propTypes = {
  */
 
 function ToggletipActions(_ref5) {
-  var children = _ref5.children,
-      customClassName = _ref5.className;
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--toggletip-actions"), customClassName);
+  let {
+    children,
+    className: customClassName
+  } = _ref5;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--toggletip-actions`, customClassName);
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
   }, children);

package/es/components/Tooltip/DefinitionTooltip.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState } from 'react';
@@ -16,29 +16,22 @@ import deprecate from '../../prop-types/deprecate.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["align", "className", "children", "definition", "defaultOpen", "id", "openOnHover", "tooltipText", "triggerClassName"];
-
-var DefinitionTooltip = function DefinitionTooltip(_ref) {
-  var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'bottom-left' : _ref$align,
-      className = _ref.className,
-      children = _ref.children,
-      definition = _ref.definition,
-      _ref$defaultOpen = _ref.defaultOpen,
-      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-      id = _ref.id,
-      openOnHover = _ref.openOnHover,
-      tooltipText = _ref.tooltipText,
-      triggerClassName = _ref.triggerClassName,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(defaultOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
-
-  var prefix = usePrefix();
-  var tooltipId = useFallbackId(id);
+const DefinitionTooltip = _ref => {
+  let {
+    align = 'bottom-left',
+    className,
+    children,
+    definition,
+    defaultOpen = false,
+    id,
+    openOnHover,
+    tooltipText,
+    triggerClassName,
+    ...rest
+  } = _ref;
+  const [isOpen, setOpen] = useState(defaultOpen);
+  const prefix = usePrefix();
+  const tooltipId = useFallbackId(id);
 
   function onKeyDown(event) {
     if (isOpen && match(event, Escape)) {
@@ -52,29 +45,29 @@ var DefinitionTooltip = function DefinitionTooltip(_ref) {
     className: className,
     dropShadow: false,
     highContrast: true,
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: () => {
       setOpen(false);
     },
-    onMouseEnter: function onMouseEnter() {
+    onMouseEnter: () => {
       openOnHover ? setOpen(true) : null;
     },
     open: isOpen
   }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
-    className: cx("".concat(prefix, "--definition-term"), triggerClassName),
+    className: cx(`${prefix}--definition-term`, triggerClassName),
     "aria-controls": tooltipId,
     "aria-expanded": isOpen,
-    onBlur: function onBlur() {
+    onBlur: () => {
       setOpen(false);
     },
-    onClick: function onClick() {
+    onClick: () => {
       setOpen(!isOpen);
     },
     onKeyDown: onKeyDown,
     type: "button"
   }), children), /*#__PURE__*/React__default.createElement(PopoverContent, {
-    className: "".concat(prefix, "--definition-tooltip"),
+    className: `${prefix}--definition-tooltip`,
     id: tooltipId
-  }, tooltipText !== null && tooltipText !== void 0 ? tooltipText : definition));
+  }, tooltipText ?? definition));
 };
 
 DefinitionTooltip.propTypes = {