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

package/lib/components/Switch/Switch.js

@@ -21,46 +21,48 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "className", "disabled", "index", "name", "onClick", "onKeyDown", "selected", "text"];
-var Switch = /*#__PURE__*/React__default["default"].forwardRef(function Switch(props, tabRef) {
-  var children = props.children,
-      className = props.className,
-      disabled = props.disabled,
-      index = props.index,
-      name = props.name,
-      onClick = props.onClick,
-      onKeyDown = props.onKeyDown,
-      selected = props.selected,
-      text = props.text,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var handleClick = function handleClick(e) {
+const Switch = /*#__PURE__*/React__default["default"].forwardRef(function Switch(props, tabRef) {
+  const {
+    children,
+    className,
+    disabled,
+    index,
+    name,
+    onClick,
+    onKeyDown,
+    selected,
+    text,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+
+  const handleClick = e => {
     e.preventDefault();
     onClick({
-      index: index,
-      name: name,
-      text: text
+      index,
+      name,
+      text
     });
   };
 
-  var handleKeyDown = function handleKeyDown(event) {
-    var key = event.key || event.which;
+  const handleKeyDown = event => {
+    const key = event.key || event.which;
     onKeyDown({
-      index: index,
-      name: name,
-      text: text,
-      key: key
+      index,
+      name,
+      text,
+      key
     });
   };
 
-  var classes = cx__default["default"](className, "".concat(prefix, "--content-switcher-btn"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--content-switcher--selected"), selected));
-  var commonProps = {
+  const classes = cx__default["default"](className, `${prefix}--content-switcher-btn`, {
+    [`${prefix}--content-switcher--selected`]: selected
+  });
+  const commonProps = {
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     className: classes,
-    disabled: disabled
+    disabled
   };
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button",
@@ -69,7 +71,7 @@ var Switch = /*#__PURE__*/React__default["default"].forwardRef(function Switch(p
     tabIndex: selected ? '0' : '-1',
     "aria-selected": selected
   }, other, commonProps), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--content-switcher__label"),
+    className: `${prefix}--content-switcher__label`,
     title: text
   }, text !== undefined ? text : children));
 });
@@ -125,8 +127,8 @@ Switch.propTypes = {
 };
 Switch.defaultProps = {
   selected: false,
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {}
+  onClick: () => {},
+  onKeyDown: () => {}
 };
 var Switch$1 = Switch;
 

package/lib/components/Tab/Tab.js

@@ -42,88 +42,82 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["id", "className", "handleTabClick", "handleTabKeyDown", "disabled", "href", "index", "label", "selected", "tabIndex", "onClick", "onKeyDown", "renderAnchor", "renderButton", "renderContent", "role"];
-
-var Tab = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(Tab, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(Tab);
-
-  function Tab() {
-    _rollupPluginBabelHelpers.classCallCheck(this, Tab);
-
-    return _super.apply(this, arguments);
+class Tab extends React__default["default"].Component {
+  render() {
+    const {
+      context: prefix
+    } = this;
+    const {
+      id,
+      className,
+      handleTabClick,
+      handleTabKeyDown,
+      disabled,
+      href = '#',
+      index,
+      label,
+      selected,
+      tabIndex = 0,
+      onClick,
+      onKeyDown,
+      renderAnchor,
+      renderButton,
+      renderContent,
+      // eslint-disable-line no-unused-vars
+      role,
+      // eslint-disable-line no-unused-vars
+      ...other
+    } = this.props;
+    const classes = cx__default["default"](className, `${prefix}--tabs--scrollable__nav-item`, {
+      [`${prefix}--tabs__nav-item--disabled`]: disabled,
+      [`${prefix}--tabs__nav-item--selected`]: selected,
+      [`${prefix}--tabs--scrollable__nav-item--disabled`]: disabled,
+      [`${prefix}--tabs--scrollable__nav-item--selected`]: selected
+    });
+    const buttonProps = {
+      ['aria-selected']: selected,
+      ['aria-disabled']: disabled,
+      ['aria-controls']: id && `${id}__panel`,
+      className: `${prefix}--tabs--scrollable__nav-link`,
+      href,
+      tabIndex: !disabled ? tabIndex : -1,
+      ref: e => {
+        this.tabAnchor = e;
+      }
+    };
+    const renderElement = renderButton || renderAnchor;
+    return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, other, {
+      className: classes,
+      onClick: evt => {
+        if (disabled) {
+          return;
+        }
+
+        if (handleTabClick) {
+          handleTabClick(index, evt);
+        }
+
+        onClick(evt);
+      },
+      onKeyDown: evt => {
+        if (disabled) {
+          return;
+        }
+
+        if (handleTabKeyDown) {
+          handleTabKeyDown(index, evt);
+        }
+
+        onKeyDown(evt);
+      },
+      role: "presentation"
+    }), renderElement ? renderElement(buttonProps) : /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+      type: "button",
+      role: "tab"
+    }, buttonProps), label));
   }
 
-  _rollupPluginBabelHelpers.createClass(Tab, [{
-    key: "render",
-    value: function render() {
-      var _classNames,
-          _this = this,
-          _buttonProps;
-
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          id = _this$props.id,
-          className = _this$props.className,
-          handleTabClick = _this$props.handleTabClick,
-          handleTabKeyDown = _this$props.handleTabKeyDown,
-          disabled = _this$props.disabled,
-          _this$props$href = _this$props.href,
-          href = _this$props$href === void 0 ? '#' : _this$props$href,
-          index = _this$props.index,
-          label = _this$props.label,
-          selected = _this$props.selected,
-          _this$props$tabIndex = _this$props.tabIndex,
-          tabIndex = _this$props$tabIndex === void 0 ? 0 : _this$props$tabIndex,
-          _onClick = _this$props.onClick,
-          _onKeyDown = _this$props.onKeyDown,
-          renderAnchor = _this$props.renderAnchor,
-          renderButton = _this$props.renderButton;
-          _this$props.renderContent;
-          _this$props.role;
-          var other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var classes = cx__default["default"](className, "".concat(prefix, "--tabs--scrollable__nav-item"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tabs__nav-item--selected"), selected), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable__nav-item--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable__nav-item--selected"), selected), _classNames));
-      var buttonProps = (_buttonProps = {}, _rollupPluginBabelHelpers.defineProperty(_buttonProps, 'aria-selected', selected), _rollupPluginBabelHelpers.defineProperty(_buttonProps, 'aria-disabled', disabled), _rollupPluginBabelHelpers.defineProperty(_buttonProps, 'aria-controls', id && "".concat(id, "__panel")), _rollupPluginBabelHelpers.defineProperty(_buttonProps, "className", "".concat(prefix, "--tabs--scrollable__nav-link")), _rollupPluginBabelHelpers.defineProperty(_buttonProps, "href", href), _rollupPluginBabelHelpers.defineProperty(_buttonProps, "tabIndex", !disabled ? tabIndex : -1), _rollupPluginBabelHelpers.defineProperty(_buttonProps, "ref", function ref(e) {
-        _this.tabAnchor = e;
-      }), _buttonProps);
-      var renderElement = renderButton || renderAnchor;
-      return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, other, {
-        className: classes,
-        onClick: function onClick(evt) {
-          if (disabled) {
-            return;
-          }
-
-          if (handleTabClick) {
-            handleTabClick(index, evt);
-          }
-
-          _onClick(evt);
-        },
-        onKeyDown: function onKeyDown(evt) {
-          if (disabled) {
-            return;
-          }
-
-          if (handleTabKeyDown) {
-            handleTabKeyDown(index, evt);
-          }
-
-          _onKeyDown(evt);
-        },
-        role: "presentation"
-      }), renderElement ? renderElement(buttonProps) : /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-        type: "button",
-        role: "tab"
-      }, buttonProps), label));
-    }
-  }]);
-
-  return Tab;
-}(React__default["default"].Component);
+}
 
 _rollupPluginBabelHelpers.defineProperty(Tab, "contextType", usePrefix.PrefixContext);
 
@@ -213,8 +207,8 @@ _rollupPluginBabelHelpers.defineProperty(Tab, "propTypes", {
 _rollupPluginBabelHelpers.defineProperty(Tab, "defaultProps", {
   label: FeatureFlags__namespace.enabled('enable-v11-release') ? undefined : 'provide a label',
   selected: false,
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {}
+  onClick: () => {},
+  onKeyDown: () => {}
 });
 
 exports["default"] = Tab;

package/lib/components/Tab/index.js

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

package/lib/components/TabContent/TabContent.js

@@ -23,19 +23,14 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "selected", "children"];
 /**
  * Determine if the node within the provided ref contains content that is tabbable.
  */
 
 function useTabbableContent(ref) {
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      hasTabbableContent = _useState2[0],
-      setHasTabbableContent = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+  const [hasTabbableContent, setHasTabbableContent] = React.useState(false); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-
-  useIsomorphicEffect["default"](function () {
+  useIsomorphicEffect["default"](() => {
     if (ref.current) {
       setHasTabbableContent(ref.current.querySelector(navigation.selectorTabbable));
     }
@@ -43,16 +38,19 @@ function useTabbableContent(ref) {
   return hasTabbableContent;
 }
 
-var TabContent = function TabContent(props) {
-  var className = props.className,
-      selected = props.selected,
-      children = props.children,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var tabContentClasses = cx__default["default"]("".concat(prefix, "--tab-content"), _rollupPluginBabelHelpers.defineProperty({}, className, className));
-  var ref = React.useRef(null);
-  var hasTabbableContent = useTabbableContent(ref);
+const TabContent = props => {
+  const {
+    className,
+    selected,
+    children,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const tabContentClasses = cx__default["default"](`${prefix}--tab-content`, {
+    [className]: className
+  });
+  const ref = React.useRef(null);
+  const hasTabbableContent = useTabbableContent(ref);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "tabpanel"
   }, other, {

package/lib/components/Tabs/Tabs.Skeleton.js

@@ -21,30 +21,31 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "contained"];
-
 var _span;
 
 function Tab() {
-  var prefix = usePrefix.usePrefix();
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "".concat(prefix, "--tabs__nav-item")
+    className: `${prefix}--tabs__nav-item`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--tabs__nav-link")
+    className: `${prefix}--tabs__nav-link`
   }, _span || (_span = /*#__PURE__*/React__default["default"].createElement("span", null))));
 }
 
 function TabsSkeleton(_ref) {
-  var className = _ref.className,
-      contained = _ref.contained,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var tabClasses = cx__default["default"](className, "".concat(prefix, "--tabs"), "".concat(prefix, "--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tabs--contained"), contained));
+  let {
+    className,
+    contained,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const tabClasses = cx__default["default"](className, `${prefix}--tabs`, `${prefix}--skeleton`, {
+    [`${prefix}--tabs--contained`]: contained
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: tabClasses
   }, rest), /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "".concat(prefix, "--tabs__nav")
+    className: `${prefix}--tabs__nav`
   }, Tab(), Tab(), Tab(), Tab(), Tab()));
 }