@carbon/react 1.27.0 → 1.28.0-rc.0

package/es/components/Switch/Switch.js

@@ -5,52 +5,54 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "className", "disabled", "index", "name", "onClick", "onKeyDown", "selected", "text"];
-var Switch = /*#__PURE__*/React__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 = _objectWithoutProperties(props, _excluded);
+const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tabRef) {
+  const {
+    children,
+    className,
+    disabled,
+    index,
+    name,
+    onClick,
+    onKeyDown,
+    selected,
+    text,
+    ...other
+  } = props;
+  const prefix = usePrefix();
 
-  var prefix = usePrefix();
-
-  var handleClick = function handleClick(e) {
+  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(className, "".concat(prefix, "--content-switcher-btn"), _defineProperty({}, "".concat(prefix, "--content-switcher--selected"), selected));
-  var commonProps = {
+  const classes = cx(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.createElement("button", _extends({
     type: "button",
@@ -59,7 +61,7 @@ var Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tabRe
     tabIndex: selected ? '0' : '-1',
     "aria-selected": selected
   }, other, commonProps), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--content-switcher__label"),
+    className: `${prefix}--content-switcher__label`,
     title: text
   }, text !== undefined ? text : children));
 });
@@ -115,8 +117,8 @@ Switch.propTypes = {
 };
 Switch.defaultProps = {
   selected: false,
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {}
+  onClick: () => {},
+  onKeyDown: () => {}
 };
 var Switch$1 = Switch;
 

package/es/components/Tab/Tab.js

@@ -5,7 +5,7 @@
  * 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, defineProperty as _defineProperty, extends as _extends } 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';
@@ -13,88 +13,82 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import deprecate from '../../prop-types/deprecate.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
-var _excluded = ["id", "className", "handleTabClick", "handleTabKeyDown", "disabled", "href", "index", "label", "selected", "tabIndex", "onClick", "onKeyDown", "renderAnchor", "renderButton", "renderContent", "role"];
-
-var Tab = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tab, _React$Component);
-
-  var _super = _createSuper(Tab);
-
-  function Tab() {
-    _classCallCheck(this, Tab);
-
-    return _super.apply(this, arguments);
+class Tab extends React__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(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.createElement("li", _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.createElement("button", _extends({
+      type: "button",
+      role: "tab"
+    }, buttonProps), label));
   }
 
-  _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 = _objectWithoutProperties(_this$props, _excluded);
-
-      var classes = cx(className, "".concat(prefix, "--tabs--scrollable__nav-item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--tabs__nav-item--selected"), selected), _defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable__nav-item--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable__nav-item--selected"), selected), _classNames));
-      var buttonProps = (_buttonProps = {}, _defineProperty(_buttonProps, 'aria-selected', selected), _defineProperty(_buttonProps, 'aria-disabled', disabled), _defineProperty(_buttonProps, 'aria-controls', id && "".concat(id, "__panel")), _defineProperty(_buttonProps, "className", "".concat(prefix, "--tabs--scrollable__nav-link")), _defineProperty(_buttonProps, "href", href), _defineProperty(_buttonProps, "tabIndex", !disabled ? tabIndex : -1), _defineProperty(_buttonProps, "ref", function ref(e) {
-        _this.tabAnchor = e;
-      }), _buttonProps);
-      var renderElement = renderButton || renderAnchor;
-      return /*#__PURE__*/React__default.createElement("li", _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.createElement("button", _extends({
-        type: "button",
-        role: "tab"
-      }, buttonProps), label));
-    }
-  }]);
-
-  return Tab;
-}(React__default.Component);
+}
 
 _defineProperty(Tab, "contextType", PrefixContext);
 
@@ -184,8 +178,8 @@ _defineProperty(Tab, "propTypes", {
 _defineProperty(Tab, "defaultProps", {
   label: FeatureFlags.enabled('enable-v11-release') ? undefined : 'provide a label',
   selected: false,
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {}
+  onClick: () => {},
+  onKeyDown: () => {}
 });
 
 export { Tab as default };

package/es/components/Tab/index.js

@@ -9,6 +9,6 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import { Tab as Tab$1 } from '../Tabs/Tabs.js';
 import Tab$2 from './Tab.js';
 
-var Tab = FeatureFlags.enabled('enable-v11-release') ? Tab$1 : Tab$2;
+const Tab = FeatureFlags.enabled('enable-v11-release') ? Tab$1 : Tab$2;
 
 export { Tab, Tab as default };

package/es/components/TabContent/TabContent.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState } from 'react';
 import cx from 'classnames';
@@ -13,19 +13,14 @@ import { selectorTabbable } from '../../internal/keyboard/navigation.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "selected", "children"];
 /**
  * Determine if the node within the provided ref contains content that is tabbable.
  */
 
 function useTabbableContent(ref) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasTabbableContent = _useState2[0],
-      setHasTabbableContent = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+  const [hasTabbableContent, setHasTabbableContent] = useState(false); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-
-  useIsomorphicEffect(function () {
+  useIsomorphicEffect(() => {
     if (ref.current) {
       setHasTabbableContent(ref.current.querySelector(selectorTabbable));
     }
@@ -33,16 +28,19 @@ function useTabbableContent(ref) {
   return hasTabbableContent;
 }
 
-var TabContent = function TabContent(props) {
-  var className = props.className,
-      selected = props.selected,
-      children = props.children,
-      other = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-  var tabContentClasses = cx("".concat(prefix, "--tab-content"), _defineProperty({}, className, className));
-  var ref = useRef(null);
-  var hasTabbableContent = useTabbableContent(ref);
+const TabContent = props => {
+  const {
+    className,
+    selected,
+    children,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const tabContentClasses = cx(`${prefix}--tab-content`, {
+    [className]: className
+  });
+  const ref = useRef(null);
+  const hasTabbableContent = useTabbableContent(ref);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     role: "tabpanel"
   }, other, {

package/es/components/Tabs/Tabs.Skeleton.js

@@ -5,36 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "contained"];
-
 var _span;
 
 function Tab() {
-  var prefix = usePrefix();
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("li", {
-    className: "".concat(prefix, "--tabs__nav-item")
+    className: `${prefix}--tabs__nav-item`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--tabs__nav-link")
+    className: `${prefix}--tabs__nav-link`
   }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null))));
 }
 
 function TabsSkeleton(_ref) {
-  var className = _ref.className,
-      contained = _ref.contained,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var tabClasses = cx(className, "".concat(prefix, "--tabs"), "".concat(prefix, "--skeleton"), _defineProperty({}, "".concat(prefix, "--tabs--contained"), contained));
+  let {
+    className,
+    contained,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const tabClasses = cx(className, `${prefix}--tabs`, `${prefix}--skeleton`, {
+    [`${prefix}--tabs--contained`]: contained
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: tabClasses
   }, rest), /*#__PURE__*/React__default.createElement("ul", {
-    className: "".concat(prefix, "--tabs__nav")
+    className: `${prefix}--tabs__nav`
   }, Tab(), Tab(), Tab(), Tab(), Tab()));
 }