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

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -21,18 +21,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["children", "isActive", "isHighlighted", "title"];
-
 function useIsTruncated(ref) {
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isTruncated = _useState2[0],
-      setIsTruncated = _useState2[1];
-
-  React.useEffect(function () {
-    var _ref$current = ref.current,
-        offsetWidth = _ref$current.offsetWidth,
-        scrollWidth = _ref$current.scrollWidth;
+  const [isTruncated, setIsTruncated] = React.useState(false);
+  React.useEffect(() => {
+    const {
+      offsetWidth,
+      scrollWidth
+    } = ref.current;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;
@@ -43,25 +38,27 @@ function useIsTruncated(ref) {
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-var ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
-  var _cx;
-
-  var children = _ref.children,
-      isActive = _ref.isActive,
-      isHighlighted = _ref.isHighlighted,
-      title = _ref.title,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var ref = React.useRef(null);
-  var isTruncated = useIsTruncated((forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref);
-  var className = cx__default["default"]("".concat(prefix, "--list-box__menu-item"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--active"), isActive), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--highlighted"), isHighlighted), _cx));
+const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
+  let {
+    children,
+    isActive,
+    isHighlighted,
+    title,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const ref = React.useRef(null);
+  const isTruncated = useIsTruncated((forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref);
+  const className = cx__default["default"](`${prefix}--list-box__menu-item`, {
+    [`${prefix}--list-box__menu-item--active`]: isActive,
+    [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     title: isTruncated ? title : undefined,
     tabIndex: -1
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--list-box__menu-item__option"),
+    className: `${prefix}--list-box__menu-item__option`,
     ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref
   }, children));
 });

package/lib/components/ListBox/ListBoxPropTypes.js

@@ -15,10 +15,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var listBoxTypes = ['default', 'inline'];
-var listBoxSizes = ['sm', 'md', 'lg'];
-var ListBoxType = PropTypes__default["default"].oneOf(listBoxTypes);
-var ListBoxSize = PropTypes__default["default"].oneOf(listBoxSizes);
+const listBoxTypes = ['default', 'inline'];
+const listBoxSizes = ['sm', 'md', 'lg'];
+const ListBoxType = PropTypes__default["default"].oneOf(listBoxTypes);
+const ListBoxSize = PropTypes__default["default"].oneOf(listBoxSizes);
 
 exports.ListBoxSize = ListBoxSize;
 exports.ListBoxType = ListBoxType;

package/lib/components/ListBox/ListBoxSelection.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -22,26 +21,29 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _Close, _Close2, _defaultTranslations;
+var _Close, _Close2;
 
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
-var ListBoxSelection = function ListBoxSelection(_ref) {
-  var _cx;
-
-  var clearSelection = _ref.clearSelection,
-      selectionCount = _ref.selectionCount,
-      t = _ref.translateWithId,
-      disabled = _ref.disabled,
-      onClearSelection = _ref.onClearSelection,
-      readOnly = _ref.readOnly;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--list-box__selection"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
-
-  var handleOnClick = function handleOnClick(event) {
+const ListBoxSelection = _ref => {
+  let {
+    clearSelection,
+    selectionCount,
+    translateWithId: t,
+    disabled,
+    onClearSelection,
+    readOnly
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--list-box__selection`, {
+    [`${prefix}--tag--filter`]: selectionCount,
+    [`${prefix}--list-box__selection--multi`]: selectionCount
+  });
+
+  const handleOnClick = event => {
     event.stopPropagation();
 
     if (disabled || readOnly) {
@@ -55,19 +57,21 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
     }
   };
 
-  var description = selectionCount ? t('clear.all') : t('clear.selection');
-  var tagClasses = cx__default["default"]("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+  const description = selectionCount ? t('clear.all') : t('clear.selection');
+  const tagClasses = cx__default["default"](`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
+    [`${prefix}--tag--disabled`]: disabled
+  });
   /* eslint-disable jsx-a11y/click-events-have-key-events */
 
   return selectionCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: tagClasses
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--tag__label"),
-    title: "".concat(selectionCount)
+    className: `${prefix}--tag__label`,
+    title: `${selectionCount}`
   }, selectionCount), /*#__PURE__*/React__default["default"].createElement("div", {
     role: "button",
     tabIndex: -1,
-    className: "".concat(prefix, "--tag__close-icon"),
+    className: `${prefix}--tag__close-icon`,
     onClick: handleOnClick,
     "aria-label": t('clear.all'),
     title: description,
@@ -82,11 +86,14 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
 };
 
-var translationIds = {
+const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
 };
-var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['clear.all'], 'Clear all selected items'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['clear.selection'], 'Clear selected item'), _defaultTranslations);
+const defaultTranslations = {
+  [translationIds['clear.all']]: 'Clear all selected items',
+  [translationIds['clear.selection']]: 'Clear selected item'
+};
 ListBoxSelection.propTypes = {
   /**
    * Specify a function to be invoked when a user interacts with the clear
@@ -124,9 +131,7 @@ ListBoxSelection.propTypes = {
   translateWithId: PropTypes__default["default"].func.isRequired
 };
 ListBoxSelection.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: id => defaultTranslations[id]
 };
 
 exports["default"] = ListBoxSelection;

package/lib/components/ListBox/index.js

@@ -17,7 +17,7 @@ var ListBoxMenuIcon = require('./ListBoxMenuIcon.js');
 var ListBoxMenuItem = require('./ListBoxMenuItem.js');
 var ListBoxSelection = require('./ListBoxSelection.js');
 
-var ListBox = Object.assign(ListBox$1["default"], {
+const ListBox = Object.assign(ListBox$1["default"], {
   Field: ListBoxField["default"],
   Menu: ListBoxMenu["default"],
   MenuIcon: ListBoxMenuIcon["default"],

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -22,9 +22,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _Close, _Close2, _defaultTranslations;
-
-var _excluded = ["clearSelection", "selectionCount", "translateWithId", "disabled", "onClearSelection"];
+var _Close, _Close2;
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
@@ -32,19 +30,23 @@ var _excluded = ["clearSelection", "selectionCount", "translateWithId", "disable
  */
 
 function ListBoxSelection(_ref) {
-  var _cx;
-
-  var clearSelection = _ref.clearSelection,
-      selectionCount = _ref.selectionCount,
-      t = _ref.translateWithId,
-      disabled = _ref.disabled,
-      onClearSelection = _ref.onClearSelection,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--list-box__selection"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
-  var description = selectionCount ? t('clear.all') : t('clear.selection');
-  var tagClasses = cx__default["default"]("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+  let {
+    clearSelection,
+    selectionCount,
+    translateWithId: t,
+    disabled,
+    onClearSelection,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--list-box__selection`, {
+    [`${prefix}--tag--filter`]: selectionCount,
+    [`${prefix}--list-box__selection--multi`]: selectionCount
+  });
+  const description = selectionCount ? t('clear.all') : t('clear.selection');
+  const tagClasses = cx__default["default"](`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
+    [`${prefix}--tag--disabled`]: disabled
+  });
 
   function onClick(event) {
     event.stopPropagation();
@@ -64,11 +66,11 @@ function ListBoxSelection(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: tagClasses
     }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(prefix, "--tag__label"),
+      className: `${prefix}--tag__label`,
       title: selectionCount
     }, selectionCount), /*#__PURE__*/React__default["default"].createElement("button", {
       "aria-label": description,
-      className: "".concat(prefix, "--tag__close-icon"),
+      className: `${prefix}--tag__close-icon`,
       disabled: disabled,
       onClick: onClick,
       tabIndex: -1,
@@ -88,11 +90,14 @@ function ListBoxSelection(_ref) {
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
 }
 
-var translationIds = {
+const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
 };
-var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['clear.all'], 'Clear all selected items'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['clear.selection'], 'Clear selected item'), _defaultTranslations);
+const defaultTranslations = {
+  [translationIds['clear.all']]: 'Clear all selected items',
+  [translationIds['clear.selection']]: 'Clear selected item'
+};
 ListBoxSelection.propTypes = {
   /**
    * Specify a function to be invoked when a user interacts with the clear
@@ -137,9 +142,7 @@ ListBoxSelection.propTypes = {
   translateWithId: PropTypes__default["default"].func.isRequired
 };
 ListBoxSelection.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: id => defaultTranslations[id]
 };
 
 exports["default"] = ListBoxSelection;

package/lib/components/ListBox/next/ListBoxTrigger.js

@@ -22,29 +22,32 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["isOpen", "translateWithId"];
-
-var _defaultTranslations, _ChevronDown;
-var translationIds = {
+var _ChevronDown;
+const translationIds = {
   'close.menu': 'close.menu',
   'open.menu': 'open.menu'
 };
-var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['open.menu'], 'Open'), _defaultTranslations);
+const defaultTranslations = {
+  [translationIds['close.menu']]: 'Close',
+  [translationIds['open.menu']]: 'Open'
+};
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
 
-var ListBoxTrigger = function ListBoxTrigger(_ref) {
-  var _cx;
-
-  var isOpen = _ref.isOpen,
-      t = _ref.translateWithId,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-icon"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-icon--open"), isOpen), _cx));
-  var description = isOpen ? t('close.menu') : t('open.menu');
+const ListBoxTrigger = _ref => {
+  let {
+    isOpen,
+    translateWithId: t,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [`${prefix}--list-box__menu-icon`]: true,
+    [`${prefix}--list-box__menu-icon--open`]: isOpen
+  });
+  const description = isOpen ? t('close.menu') : t('open.menu');
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-label": description,
     title: description,
@@ -69,9 +72,7 @@ ListBoxTrigger.propTypes = {
   translateWithId: PropTypes__default["default"].func.isRequired
 };
 ListBoxTrigger.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: id => defaultTranslations[id]
 };
 var ListBoxTrigger$1 = ListBoxTrigger;
 

package/lib/components/ListItem/ListItem.js

@@ -21,15 +21,14 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "className"];
-
-var ListItem = function ListItem(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--list__item"), className);
+const ListItem = _ref => {
+  let {
+    children,
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--list__item`, className);
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other), children);

package/lib/components/Loading/Loading.js

@@ -22,39 +22,39 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["active", "className", "withOverlay", "small", "description"];
-
 function Loading(_ref) {
-  var _cx, _cx2;
-
-  var _ref$active = _ref.active,
-      active = _ref$active === void 0 ? true : _ref$active,
-      customClassName = _ref.className,
-      _ref$withOverlay = _ref.withOverlay,
-      withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
-      _ref$small = _ref.small,
-      small = _ref$small === void 0 ? false : _ref$small,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? 'loading' : _ref$description,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var loadingClassName = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading--small"), small), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading--stop"), !active), _cx));
-  var overlayClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--loading-overlay"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--loading-overlay--stop"), !active), _cx2));
-  var loading = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  let {
+    active = true,
+    className: customClassName,
+    withOverlay = true,
+    small = false,
+    description = 'loading',
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const loadingClassName = cx__default["default"](customClassName, {
+    [`${prefix}--loading`]: true,
+    [`${prefix}--loading--small`]: small,
+    [`${prefix}--loading--stop`]: !active
+  });
+  const overlayClassName = cx__default["default"]({
+    [`${prefix}--loading-overlay`]: true,
+    [`${prefix}--loading-overlay--stop`]: !active
+  });
+  const loading = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-atomic": "true",
     "aria-live": active ? 'assertive' : 'off',
     className: loadingClassName
   }), /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: "".concat(prefix, "--loading__svg"),
+    className: `${prefix}--loading__svg`,
     viewBox: "0 0 100 100"
   }, /*#__PURE__*/React__default["default"].createElement("title", null, description), small ? /*#__PURE__*/React__default["default"].createElement("circle", {
-    className: "".concat(prefix, "--loading__background"),
+    className: `${prefix}--loading__background`,
     cx: "50%",
     cy: "50%",
     r: "44"
   }) : null, /*#__PURE__*/React__default["default"].createElement("circle", {
-    className: "".concat(prefix, "--loading__stroke"),
+    className: `${prefix}--loading__stroke`,
     cx: "50%",
     cy: "50%",
     r: "44"
@@ -83,7 +83,7 @@ Loading.propTypes = {
   /**
    * Provide an `id` to uniquely identify the label
    */
-  id: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `id` is no longer needed."),
+  id: deprecate["default"](PropTypes__default["default"].string, `\nThe prop \`id\` is no longer needed.`),
 
   /**
    * Specify whether you would like the small variant of <Loading>