@carbon/react 1.27.0 → 1.28.0-rc.0

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

@@ -5,16 +5,14 @@
  * 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 cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
-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
@@ -22,19 +20,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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--list-box__selection"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
-  var description = selectionCount ? t('clear.all') : t('clear.selection');
-  var tagClasses = cx("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+  let {
+    clearSelection,
+    selectionCount,
+    translateWithId: t,
+    disabled,
+    onClearSelection,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${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(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
+    [`${prefix}--tag--disabled`]: disabled
+  });
 
   function onClick(event) {
     event.stopPropagation();
@@ -54,11 +56,11 @@ function ListBoxSelection(_ref) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: tagClasses
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(prefix, "--tag__label"),
+      className: `${prefix}--tag__label`,
       title: selectionCount
     }, selectionCount), /*#__PURE__*/React__default.createElement("button", {
       "aria-label": description,
-      className: "".concat(prefix, "--tag__close-icon"),
+      className: `${prefix}--tag__close-icon`,
       disabled: disabled,
       onClick: onClick,
       tabIndex: -1,
@@ -78,11 +80,14 @@ function ListBoxSelection(_ref) {
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 }
 
-var translationIds = {
+const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
 };
-var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['clear.all'], 'Clear all selected items'), _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
@@ -127,9 +132,7 @@ ListBoxSelection.propTypes = {
   translateWithId: PropTypes.func.isRequired
 };
 ListBoxSelection.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: id => defaultTranslations[id]
 };
 
 export { ListBoxSelection as default, translationIds };

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

@@ -5,36 +5,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
-var _excluded = ["isOpen", "translateWithId"];
-
-var _defaultTranslations, _ChevronDown;
-var translationIds = {
+var _ChevronDown;
+const translationIds = {
   'close.menu': 'close.menu',
   'open.menu': 'open.menu'
 };
-var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close'), _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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box__menu-icon"), true), _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();
+  const className = cx({
+    [`${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.createElement("button", _extends({}, rest, {
     "aria-label": description,
     title: description,
@@ -59,9 +62,7 @@ ListBoxTrigger.propTypes = {
   translateWithId: PropTypes.func.isRequired
 };
 ListBoxTrigger.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: id => defaultTranslations[id]
 };
 var ListBoxTrigger$1 = ListBoxTrigger;
 

package/es/components/ListItem/ListItem.js

@@ -5,21 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, 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"];
-
-var ListItem = function ListItem(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var classNames = cx("".concat(prefix, "--list__item"), className);
+const ListItem = _ref => {
+  let {
+    children,
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--list__item`, className);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: classNames
   }, other), children);

package/es/components/Loading/Loading.js

@@ -5,46 +5,46 @@
  * 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 cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var loadingClassName = cx(customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--loading"), true), _defineProperty(_cx, "".concat(prefix, "--loading--small"), small), _defineProperty(_cx, "".concat(prefix, "--loading--stop"), !active), _cx));
-  var overlayClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--loading-overlay"), true), _defineProperty(_cx2, "".concat(prefix, "--loading-overlay--stop"), !active), _cx2));
-  var loading = /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  let {
+    active = true,
+    className: customClassName,
+    withOverlay = true,
+    small = false,
+    description = 'loading',
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const loadingClassName = cx(customClassName, {
+    [`${prefix}--loading`]: true,
+    [`${prefix}--loading--small`]: small,
+    [`${prefix}--loading--stop`]: !active
+  });
+  const overlayClassName = cx({
+    [`${prefix}--loading-overlay`]: true,
+    [`${prefix}--loading-overlay--stop`]: !active
+  });
+  const loading = /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     "aria-atomic": "true",
     "aria-live": active ? 'assertive' : 'off',
     className: loadingClassName
   }), /*#__PURE__*/React__default.createElement("svg", {
-    className: "".concat(prefix, "--loading__svg"),
+    className: `${prefix}--loading__svg`,
     viewBox: "0 0 100 100"
   }, /*#__PURE__*/React__default.createElement("title", null, description), small ? /*#__PURE__*/React__default.createElement("circle", {
-    className: "".concat(prefix, "--loading__background"),
+    className: `${prefix}--loading__background`,
     cx: "50%",
     cy: "50%",
     r: "44"
   }) : null, /*#__PURE__*/React__default.createElement("circle", {
-    className: "".concat(prefix, "--loading__stroke"),
+    className: `${prefix}--loading__stroke`,
     cx: "50%",
     cy: "50%",
     r: "44"
@@ -73,7 +73,7 @@ Loading.propTypes = {
   /**
    * Provide an `id` to uniquely identify the label
    */
-  id: deprecate(PropTypes.string, "\nThe prop `id` is no longer needed."),
+  id: deprecate(PropTypes.string, `\nThe prop \`id\` is no longer needed.`),
 
   /**
    * Specify whether you would like the small variant of <Loading>

package/es/components/Menu/Menu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, typeof as _typeof } 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, useContext, useReducer, useMemo, useState, useEffect } from 'react';
@@ -16,60 +16,42 @@ import { MenuContext, menuReducer } from './MenuContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["children", "className", "label", "onClose", "onOpen", "open", "size", "target", "x", "y"];
-var spacing = 8; // distance to keep to window edges, in px
-
-var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef) {
-  var _cx;
-
-  var children = _ref.children,
-      className = _ref.className,
-      label = _ref.label,
-      onClose = _ref.onClose,
-      onOpen = _ref.onOpen,
-      open = _ref.open,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'sm' : _ref$size,
-      _ref$target = _ref.target,
-      target = _ref$target === void 0 ? document.body : _ref$target,
-      _ref$x = _ref.x,
-      x = _ref$x === void 0 ? 0 : _ref$x,
-      _ref$y = _ref.y,
-      y = _ref$y === void 0 ? 0 : _ref$y,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var focusReturn = useRef(null);
-  var context = useContext(MenuContext);
-  var isRoot = context.state.isRoot;
-  var menuSize = isRoot ? size : context.state.size;
-
-  var _useReducer = useReducer(menuReducer, _objectSpread2(_objectSpread2({}, context.state), {}, {
+const spacing = 8; // distance to keep to window edges, in px
+
+const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    label,
+    onClose,
+    onOpen,
+    open,
+    size = 'sm',
+    target = document.body,
+    x = 0,
+    y = 0,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const focusReturn = useRef(null);
+  const context = useContext(MenuContext);
+  const isRoot = context.state.isRoot;
+  const menuSize = isRoot ? size : context.state.size;
+  const [childState, childDispatch] = useReducer(menuReducer, { ...context.state,
     isRoot: false,
-    size: size,
+    size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
-  })),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      childState = _useReducer2[0],
-      childDispatch = _useReducer2[1];
-
-  var childContext = useMemo(function () {
+  });
+  const childContext = useMemo(() => {
     return {
       state: childState,
       dispatch: childDispatch
     };
   }, [childState, childDispatch]);
-  var menu = useRef();
-  var ref = useMergedRefs([forwardRef, menu]);
-
-  var _useState = useState([-1, -1]),
-      _useState2 = _slicedToArray(_useState, 2),
-      position = _useState2[0],
-      setPosition = _useState2[1];
-
-  var focusableItems = childContext.state.items.filter(function (item) {
-    return !item.disabled && item.ref.current;
-  });
+  const menu = useRef();
+  const ref = useMergedRefs([forwardRef, menu]);
+  const [position, setPosition] = useState([-1, -1]);
+  const focusableItems = childContext.state.items.filter(item => !item.disabled && item.ref.current);
 
   function returnFocus() {
     if (focusReturn.current) {
@@ -80,9 +62,9 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
   function handleOpen() {
     if (menu.current) {
       focusReturn.current = document.activeElement;
-      var pos = calculatePosition();
-      menu.current.style.left = "".concat(pos[0], "px");
-      menu.current.style.top = "".concat(pos[1], "px");
+      const pos = calculatePosition();
+      menu.current.style.left = `${pos[0]}px`;
+      menu.current.style.top = `${pos[1]}px`;
       setPosition(pos);
       menu.current.focus();
 
@@ -122,10 +104,8 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
   }
 
   function focusItem(e) {
-    var currentItem = focusableItems.findIndex(function (item) {
-      return item.ref.current.contains(document.activeElement);
-    });
-    var indexToFocus = currentItem; // if currentItem is -1, no menu item is focused yet.
+    const currentItem = focusableItems.findIndex(item => item.ref.current.contains(document.activeElement));
+    let indexToFocus = currentItem; // if currentItem is -1, no menu item is focused yet.
     // in this case, the first item should receive focus.
 
     if (currentItem === -1) {
@@ -149,7 +129,7 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
     }
 
     if (indexToFocus !== currentItem) {
-      var nodeToFocus = focusableItems[indexToFocus];
+      const nodeToFocus = focusableItems[indexToFocus];
       nodeToFocus.ref.current.focus();
     }
   }
@@ -161,12 +141,12 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
   }
 
   function fitValue(range, axis) {
-    var _menu$current$getBoun = menu.current.getBoundingClientRect(),
-        width = _menu$current$getBoun.width,
-        height = _menu$current$getBoun.height;
-
-    var alignment = isRoot ? 'vertical' : 'horizontal';
-    var axes = {
+    const {
+      width,
+      height
+    } = menu.current.getBoundingClientRect();
+    const alignment = isRoot ? 'vertical' : 'horizontal';
+    const axes = {
       x: {
         max: window.innerWidth,
         size: width,
@@ -183,28 +163,27 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
 
       }
     };
-    var _axes$axis = axes[axis],
-        max = _axes$axis.max,
-        size = _axes$axis.size,
-        anchor = _axes$axis.anchor,
-        reversedAnchor = _axes$axis.reversedAnchor,
-        offset = _axes$axis.offset; // get values for different scenarios, set to false if they don't work
-
-    var options = [// towards max (preferred)
+    const {
+      max,
+      size,
+      anchor,
+      reversedAnchor,
+      offset
+    } = axes[axis]; // get values for different scenarios, set to false if they don't work
+
+    const options = [// towards max (preferred)
     max - spacing - size - anchor >= 0 ? anchor - offset : false, // towards min / reversed (first fallback)
     reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false, // align at max (second fallback)
     max - spacing - size];
-    var bestOption = options.find(function (option) {
-      return option !== false;
-    });
+    const bestOption = options.find(option => option !== false);
     return bestOption >= spacing ? bestOption : spacing;
   }
 
   function calculatePosition() {
     if (menu.current) {
-      var ranges = {
-        x: _typeof(x) === 'object' && x.length === 2 ? x : [x, x],
-        y: _typeof(y) === 'object' && y.length === 2 ? y : [y, y]
+      const ranges = {
+        x: typeof x === 'object' && x.length === 2 ? x : [x, x],
+        y: typeof y === 'object' && y.length === 2 ? y : [y, y]
       };
       return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
     }
@@ -212,13 +191,13 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
     return [-1, -1];
   }
 
-  useEffect(function () {
+  useEffect(() => {
     if (open && focusableItems.length > 0) {
       focusItem();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [open, focusableItems]);
-  useEffect(function () {
+  useEffect(() => {
     if (open) {
       handleOpen();
     } else {
@@ -228,8 +207,16 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [open]);
-  var classNames = cx(className, "".concat(prefix, "--menu"), "".concat(prefix, "--menu--").concat(menuSize), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--menu--open"), open), _defineProperty(_cx, "".concat(prefix, "--menu--shown"), position[0] >= 0 && position[1] >= 0), _defineProperty(_cx, "".concat(prefix, "--menu--with-icons"), childContext.state.hasIcons), _cx));
-  var rendered = /*#__PURE__*/React__default.createElement(MenuContext.Provider, {
+  const classNames = cx(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
+    // --open sets visibility and --shown sets opacity.
+    // visibility is needed for focusing elements.
+    // opacity is only set once the position has been set correctly
+    // to avoid a flicker effect when opening.
+    [`${prefix}--menu--open`]: open,
+    [`${prefix}--menu--shown`]: position[0] >= 0 && position[1] >= 0,
+    [`${prefix}--menu--with-icons`]: childContext.state.hasIcons
+  });
+  const rendered = /*#__PURE__*/React__default.createElement(MenuContext.Provider, {
     value: childContext
   }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
     className: classNames,

package/es/components/Menu/MenuContext.js

@@ -5,37 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 
-var menuDefaultState = {
+const menuDefaultState = {
   isRoot: true,
   hasIcons: false,
   size: null,
   items: [],
-  requestCloseRoot: function requestCloseRoot() {}
+  requestCloseRoot: () => {}
 };
 
 function menuReducer(state, action) {
   switch (action.type) {
     case 'enableIcons':
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      return { ...state,
         hasIcons: true
-      });
+      };
 
     case 'registerItem':
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        items: [].concat(_toConsumableArray(state.items), [action.payload]).filter(function (item) {
-          return item.ref.current !== null;
-        })
-      });
+      return { ...state,
+        items: [...state.items, action.payload].filter(item => item.ref.current !== null)
+      };
   }
 }
 
-var MenuContext = /*#__PURE__*/React__default.createContext({
+const MenuContext = /*#__PURE__*/React__default.createContext({
   state: menuDefaultState,
   // 'dispatch' is populated by the root menu
-  dispatch: function dispatch() {}
+  dispatch: () => {}
 });
 
 export { MenuContext, menuReducer };