@carbon/react 1.27.0 → 1.28.0-rc.0

package/es/components/Menu/MenuItem.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 cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useRef, useState, useEffect } from 'react';
@@ -19,51 +19,33 @@ import { match } from '../../internal/keyboard/match.js';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CaretRight;
-
-var _excluded = ["children", "className", "disabled", "kind", "label", "onClick", "renderIcon", "shortcut"],
-    _excluded2 = ["className", "defaultSelected", "label", "onChange", "selected"],
-    _excluded3 = ["children", "className", "label"],
-    _excluded4 = ["className", "defaultSelectedItem", "items", "itemToString", "label", "onChange", "selectedItem"],
-    _excluded5 = ["className"];
-var hoverIntentDelay = 150; // in ms
-
-var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, forwardRef) {
-  var _cx;
-
-  var children = _ref.children,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      _ref$kind = _ref.kind,
-      kind = _ref$kind === void 0 ? 'default' : _ref$kind,
-      label = _ref.label,
-      onClick = _ref.onClick,
-      IconElement = _ref.renderIcon,
-      shortcut = _ref.shortcut,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var context = useContext(MenuContext);
-  var menuItem = useRef();
-  var ref = useMergedRefs([forwardRef, menuItem]);
-
-  var _useState = useState({
+const hoverIntentDelay = 150; // in ms
+
+const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    disabled,
+    kind = 'default',
+    label,
+    onClick,
+    renderIcon: IconElement,
+    shortcut,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const context = useContext(MenuContext);
+  const menuItem = useRef();
+  const ref = useMergedRefs([forwardRef, menuItem]);
+  const [boundaries, setBoundaries] = useState({
     x: -1,
     y: -1
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      boundaries = _useState2[0],
-      setBoundaries = _useState2[1];
-
-  var hasChildren = Boolean(children);
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      submenuOpen = _useState4[0],
-      setSubmenuOpen = _useState4[1];
-
-  var hoverIntentTimeout = useRef(null);
-  var isDisabled = disabled && !hasChildren;
-  var isDanger = kind === 'danger' && !hasChildren;
+  });
+  const hasChildren = Boolean(children);
+  const [submenuOpen, setSubmenuOpen] = useState(false);
+  const hoverIntentTimeout = useRef(null);
+  const isDisabled = disabled && !hasChildren;
+  const isDanger = kind === 'danger' && !hasChildren;
 
   function registerItem() {
     context.dispatch({
@@ -76,12 +58,12 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, fo
   }
 
   function openSubmenu() {
-    var _menuItem$current$get = menuItem.current.getBoundingClientRect(),
-        x = _menuItem$current$get.x,
-        y = _menuItem$current$get.y,
-        width = _menuItem$current$get.width,
-        height = _menuItem$current$get.height;
-
+    const {
+      x,
+      y,
+      width,
+      height
+    } = menuItem.current.getBoundingClientRect();
     setBoundaries({
       x: [x, x + width],
       y: [y, y + height]
@@ -112,7 +94,7 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, fo
   }
 
   function handleMouseEnter() {
-    hoverIntentTimeout.current = setTimeout(function () {
+    hoverIntentTimeout.current = setTimeout(() => {
       openSubmenu();
     }, hoverIntentDelay);
   }
@@ -138,10 +120,13 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, fo
     }
   }
 
-  var classNames = cx(className, "".concat(prefix, "--menu-item"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--menu-item--disabled"), isDisabled), _defineProperty(_cx, "".concat(prefix, "--menu-item--danger"), isDanger), _cx)); // on first render, register this menuitem in the context's state
+  const classNames = cx(className, `${prefix}--menu-item`, {
+    [`${prefix}--menu-item--disabled`]: isDisabled,
+    [`${prefix}--menu-item--danger`]: isDanger
+  }); // on first render, register this menuitem in the context's state
   // (used for keyboard navigation)
 
-  useEffect(function () {
+  useEffect(() => {
     registerItem(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__default.createElement("li", _extends({
@@ -158,17 +143,17 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, fo
     onMouseLeave: hasChildren ? handleMouseLeave : null,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--menu-item__icon")
+    className: `${prefix}--menu-item__icon`
   }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--menu-item__label")
+    className: `${prefix}--menu-item__label`
   }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--menu-item__shortcut")
+    className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--menu-item__shortcut")
+    className: `${prefix}--menu-item__shortcut`
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
     label: label,
     open: submenuOpen,
-    onClose: function onClose() {
+    onClose: () => {
       closeSubmenu();
       menuItem.current.focus();
     },
@@ -217,25 +202,22 @@ MenuItem.propTypes = {
    */
   shortcut: PropTypes.string
 };
-var MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
-  var className = _ref2.className,
-      defaultSelected = _ref2.defaultSelected,
-      label = _ref2.label,
-      onChange = _ref2.onChange,
-      selected = _ref2.selected,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix();
-  var context = useContext(MenuContext);
-
-  var _useControllableState = useControllableState({
+const MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
+  let {
+    className,
+    defaultSelected,
+    label,
+    onChange,
+    selected,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix();
+  const context = useContext(MenuContext);
+  const [checked, setChecked] = useControllableState({
     value: selected,
-    onChange: onChange,
-    defaultValue: defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : false
-  }),
-      _useControllableState2 = _slicedToArray(_useControllableState, 2),
-      checked = _useControllableState2[0],
-      setChecked = _useControllableState2[1];
+    onChange,
+    defaultValue: defaultSelected ?? false
+  });
 
   function handleClick(e) {
     setChecked(!checked);
@@ -245,14 +227,14 @@ var MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuIte
     }
   }
 
-  useEffect(function () {
+  useEffect(() => {
     if (!context.state.hasIcons) {
       context.dispatch({
         type: 'enableIcons'
       });
     }
   }, [context.state.hasIcons, context]);
-  var classNames = cx(className, "".concat(prefix, "--menu-item-selectable--selected"));
+  const classNames = cx(className, `${prefix}--menu-item-selectable--selected`);
   return /*#__PURE__*/React__default.createElement(MenuItem, _extends({}, rest, {
     ref: forwardRef,
     label: label,
@@ -289,14 +271,15 @@ MenuItemSelectable.propTypes = {
    */
   selected: PropTypes.bool
 };
-var MenuItemGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemGroup(_ref3, forwardRef) {
-  var children = _ref3.children,
-      className = _ref3.className,
-      label = _ref3.label,
-      rest = _objectWithoutProperties(_ref3, _excluded3);
-
-  var prefix = usePrefix();
-  var classNames = cx(className, "".concat(prefix, "--menu-item-group"));
+const MenuItemGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemGroup(_ref3, forwardRef) {
+  let {
+    children,
+    className,
+    label,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix();
+  const classNames = cx(className, `${prefix}--menu-item-group`);
   return /*#__PURE__*/React__default.createElement("li", {
     className: classNames,
     role: "none",
@@ -322,30 +305,24 @@ MenuItemGroup.propTypes = {
    */
   label: PropTypes.string.isRequired
 };
-var MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
-  var className = _ref4.className,
-      defaultSelectedItem = _ref4.defaultSelectedItem,
-      items = _ref4.items,
-      _ref4$itemToString = _ref4.itemToString,
-      itemToString = _ref4$itemToString === void 0 ? function (item) {
-    return item.toString();
-  } : _ref4$itemToString,
-      label = _ref4.label,
-      onChange = _ref4.onChange,
-      selectedItem = _ref4.selectedItem,
-      rest = _objectWithoutProperties(_ref4, _excluded4);
-
-  var prefix = usePrefix();
-  var context = useContext(MenuContext);
-
-  var _useControllableState3 = useControllableState({
+const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
+  let {
+    className,
+    defaultSelectedItem,
+    items,
+    itemToString = item => item.toString(),
+    label,
+    onChange,
+    selectedItem,
+    ...rest
+  } = _ref4;
+  const prefix = usePrefix();
+  const context = useContext(MenuContext);
+  const [selection, setSelection] = useControllableState({
     value: selectedItem,
-    onChange: onChange,
+    onChange,
     defaultValue: defaultSelectedItem
-  }),
-      _useControllableState4 = _slicedToArray(_useControllableState3, 2),
-      selection = _useControllableState4[0],
-      setSelection = _useControllableState4[1];
+  });
 
   function handleClick(item, e) {
     setSelection(item);
@@ -355,14 +332,14 @@ var MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuIte
     }
   }
 
-  useEffect(function () {
+  useEffect(() => {
     if (!context.state.hasIcons) {
       context.dispatch({
         type: 'enableIcons'
       });
     }
   }, [context.state.hasIcons, context]);
-  var classNames = cx(className, "".concat(prefix, "--menu-item-radio-group"));
+  const classNames = cx(className, `${prefix}--menu-item-radio-group`);
   return /*#__PURE__*/React__default.createElement("li", {
     className: classNames,
     role: "none",
@@ -370,18 +347,16 @@ var MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuIte
   }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
     role: "group",
     "aria-label": label
-  }), items.map(function (item, i) {
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: i,
-      label: itemToString(item),
-      role: "menuitemradio",
-      "aria-checked": item === selection,
-      renderIcon: item === selection && Checkmark,
-      onClick: function onClick(e) {
-        handleClick(item, e);
-      }
-    });
-  })));
+  }), items.map((item, i) => /*#__PURE__*/React__default.createElement(MenuItem, {
+    key: i,
+    label: itemToString(item),
+    role: "menuitemradio",
+    "aria-checked": item === selection,
+    renderIcon: item === selection && Checkmark,
+    onClick: e => {
+      handleClick(item, e);
+    }
+  }))));
 });
 MenuItemRadioGroup.propTypes = {
   /**
@@ -419,12 +394,13 @@ MenuItemRadioGroup.propTypes = {
    */
   selectedItem: PropTypes.any
 };
-var MenuItemDivider = /*#__PURE__*/React__default.forwardRef(function MenuItemDivider(_ref5, forwardRef) {
-  var className = _ref5.className,
-      rest = _objectWithoutProperties(_ref5, _excluded5);
-
-  var prefix = usePrefix();
-  var classNames = cx(className, "".concat(prefix, "--menu-item-divider"));
+const MenuItemDivider = /*#__PURE__*/React__default.forwardRef(function MenuItemDivider(_ref5, forwardRef) {
+  let {
+    className,
+    ...rest
+  } = _ref5;
+  const prefix = usePrefix();
+  const classNames = cx(className, `${prefix}--menu-item-divider`);
   return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
     className: classNames,
     role: "separator",

package/es/components/MenuButton/index.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, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -17,57 +17,53 @@ import { useId } from '../../internal/useId.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "className", "disabled", "kind", "label", "size"];
-var spacing = 4; // top and bottom spacing between the button and the menu. in px
-
-var validButtonKinds = ['primary', 'tertiary', 'ghost'];
-var defaultButtonKind = 'primary';
-var MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, forwardRef) {
-  var children = _ref.children,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      _ref$kind = _ref.kind,
-      kind = _ref$kind === void 0 ? defaultButtonKind : _ref$kind,
-      label = _ref.label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'lg' : _ref$size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var id = useId('MenuButton');
-  var prefix = usePrefix();
-  var triggerRef = useRef(null);
-  var menuRef = useRef(null);
-  var ref = useMergedRefs([forwardRef, triggerRef]);
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  var _useAttachedMenu = useAttachedMenu(triggerRef),
-      open = _useAttachedMenu.open,
-      x = _useAttachedMenu.x,
-      y = _useAttachedMenu.y,
-      hookOnClick = _useAttachedMenu.handleClick,
-      handleMousedown = _useAttachedMenu.handleMousedown,
-      handleClose = _useAttachedMenu.handleClose;
+const spacing = 4; // top and bottom spacing between the button and the menu. in px
+
+const validButtonKinds = ['primary', 'tertiary', 'ghost'];
+const defaultButtonKind = 'primary';
+const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, forwardRef) {
+  let {
+    children,
+    className,
+    disabled,
+    kind = defaultButtonKind,
+    label,
+    size = 'lg',
+    ...rest
+  } = _ref;
+  const id = useId('MenuButton');
+  const prefix = usePrefix();
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, triggerRef]);
+  const [width, setWidth] = useState(0);
+  const {
+    open,
+    x,
+    y,
+    handleClick: hookOnClick,
+    handleMousedown,
+    handleClose
+  } = useAttachedMenu(triggerRef);
 
   function handleClick() {
     if (triggerRef.current) {
-      var _triggerRef$current$g = triggerRef.current.getBoundingClientRect(),
-          w = _triggerRef$current$g.width;
-
+      const {
+        width: w
+      } = triggerRef.current.getBoundingClientRect();
       setWidth(w);
       hookOnClick();
     }
   }
 
   function handleOpen() {
-    menuRef.current.style.width = "".concat(width, "px");
+    menuRef.current.style.width = `${width}px`;
   }
 
-  var triggerClasses = cx("".concat(prefix, "--menu-button__trigger"), _defineProperty({}, "".concat(prefix, "--menu-button__trigger--open"), open), className);
-  var buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
+  const triggerClasses = cx(`${prefix}--menu-button__trigger`, {
+    [`${prefix}--menu-button__trigger--open`]: open
+  }, className);
+  const buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
     ref: ref,
     className: triggerClasses,