@carbon/react 1.23.0-rc.0 → 1.23.1

package/lib/components/Menu/MenuItem.js

@@ -10,58 +10,441 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var MenuOption = require('./MenuOption.js');
+var React = require('react');
+var icons = require('@carbon/react/icons');
+var useControllableState = require('../../internal/useControllableState.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var Menu = require('./Menu.js');
+var MenuContext = require('./MenuContext.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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 _excluded = ["label", "children", "disabled", "kind", "shortcut"];
+var MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function MenuItem(_ref, forwardRef) {
+  var _cx;
 
-function MenuItem(_ref) {
-  var label = _ref.label,
-      children = _ref.children,
+  var children = _ref.children,
+      className = _ref.className,
       disabled = _ref.disabled,
-      kind = _ref.kind,
+      _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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React__default["default"].createElement(MenuOption["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
-    label: label,
-    disabled: disabled,
-    kind: kind,
-    shortcut: shortcut
-  }), children);
-}
+  var prefix = usePrefix.usePrefix();
+  var context = React.useContext(MenuContext.MenuContext);
+  var menuItem = React.useRef();
+  var ref = useMergedRefs.useMergedRefs([forwardRef, menuItem]);
+
+  var _useState = React.useState({
+    x: -1,
+    y: -1
+  }),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      boundaries = _useState2[0],
+      setBoundaries = _useState2[1];
+
+  var hasChildren = Boolean(children);
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      submenuOpen = _useState4[0],
+      setSubmenuOpen = _useState4[1];
+
+  var hoverIntentTimeout = React.useRef(null);
+
+  function registerItem() {
+    context.dispatch({
+      type: 'registerItem',
+      payload: {
+        ref: menuItem,
+        disabled: Boolean(disabled)
+      }
+    });
+  }
 
+  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;
+
+    setBoundaries({
+      x: [x, x + width],
+      y: [y, y + height]
+    });
+    setSubmenuOpen(true);
+  }
+
+  function closeSubmenu() {
+    setSubmenuOpen(false);
+    setBoundaries({
+      x: -1,
+      y: -1
+    });
+  }
+
+  function handleClick(e) {
+    if (hasChildren) {
+      openSubmenu();
+    } else {
+      context.state.requestCloseRoot(e);
+
+      if (onClick) {
+        onClick(e);
+      }
+    }
+  }
+
+  function handleMouseEnter() {
+    hoverIntentTimeout.current = setTimeout(function () {
+      openSubmenu();
+    }, hoverIntentDelay);
+  }
+
+  function handleMouseLeave() {
+    clearTimeout(hoverIntentTimeout.current);
+    closeSubmenu();
+    menuItem.current.focus();
+  }
+
+  function handleKeyDown(e) {
+    if (hasChildren && match.match(e, keys.ArrowRight)) {
+      openSubmenu();
+    }
+
+    if (match.match(e, keys.Enter) || match.match(e, keys.Space)) {
+      handleClick(e);
+    }
+
+    if (rest.onKeyDown) {
+      rest.onKeyDown(e);
+    }
+  }
+
+  var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--menu-item--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--menu-item--").concat(kind), kind !== 'default'), _cx)); // on first render, register this menuitem in the context's state
+  // (used for keyboard navigation)
+
+  React.useEffect(function () {
+    registerItem(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
+    role: "menuitem"
+  }, rest, {
+    ref: ref,
+    className: classNames,
+    tabIndex: "-1",
+    "aria-disabled": disabled,
+    "aria-haspopup": hasChildren || null,
+    "aria-expanded": hasChildren ? submenuOpen : null,
+    onClick: handleClick,
+    onMouseEnter: hasChildren ? handleMouseEnter : null,
+    onMouseLeave: hasChildren ? handleMouseLeave : null,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--menu-item__icon")
+  }, IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--menu-item__label")
+  }, label), shortcut && !hasChildren && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--menu-item__shortcut")
+  }, shortcut), hasChildren && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--menu-item__shortcut")
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(icons.CaretRight, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+    label: label,
+    open: submenuOpen,
+    onClose: function onClose() {
+      closeSubmenu();
+      menuItem.current.focus();
+    },
+    x: boundaries.x,
+    y: boundaries.y
+  }, children)));
+});
 MenuItem.propTypes = {
   /**
-   * Specify the children of the MenuItem
+   * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
    */
   children: PropTypes__default["default"].node,
 
   /**
-   * Specify whether this MenuItem is disabled
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the MenuItem is disabled or not.
    */
   disabled: PropTypes__default["default"].bool,
 
   /**
-   * Optional prop to specify the kind of the MenuItem
+   * Specify the kind of the MenuItem.
    */
   kind: PropTypes__default["default"].oneOf(['default', 'danger']),
 
   /**
-   * Rendered label for the MenuItem
+   * A required label titling the MenuItem. Will be rendered as its text content.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the MenuItem is clicked.
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * This prop is not intended for use. The only supported icons are Checkmarks to depict single- and multi-selects. This prop is used by MenuItemSelectable and MenuItemRadioGroup automatically.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
+   */
+  shortcut: PropTypes__default["default"].string
+};
+var MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
+  var className = _ref2.className,
+      defaultSelected = _ref2.defaultSelected,
+      label = _ref2.label,
+      onChange = _ref2.onChange,
+      selected = _ref2.selected,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix.usePrefix();
+  var context = React.useContext(MenuContext.MenuContext);
+
+  var _useControllableState = useControllableState.useControllableState({
+    value: selected,
+    onChange: onChange,
+    defaultValue: defaultSelected
+  }),
+      _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
+      checked = _useControllableState2[0],
+      setChecked = _useControllableState2[1];
+
+  function handleClick(e) {
+    setChecked(!checked);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  React.useEffect(function () {
+    if (!context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [context.state.hasIcons, context]);
+  var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-selectable--selected"));
+  return /*#__PURE__*/React__default["default"].createElement(MenuItem, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: forwardRef,
+    label: label,
+    className: classNames,
+    role: "menuitemcheckbox",
+    "aria-checked": checked,
+    renderIcon: checked && icons.Checkmark,
+    onClick: handleClick
+  }));
+});
+MenuItemSelectable.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the option should be selected by default.
    */
-  label: PropTypes__default["default"].node.isRequired,
+  defaultSelected: PropTypes__default["default"].bool,
+
+  /**
+   * A required label titling this option.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the selection state changes.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Pass a bool to props.selected to control the state of this option.
+   */
+  selected: PropTypes__default["default"].bool
+};
+var MenuItemGroup = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemGroup(_ref3, forwardRef) {
+  var children = _ref3.children,
+      className = _ref3.className,
+      label = _ref3.label,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-group"));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classNames,
+    role: "none",
+    ref: forwardRef
+  }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    role: "group",
+    "aria-label": label
+  }), children));
+});
+MenuItemGroup.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered within this group.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * A required label titling this group.
+   */
+  label: PropTypes__default["default"].string.isRequired
+};
+var MenuItemRadioGroup = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded4);
+
+  var prefix = usePrefix.usePrefix();
+  var context = React.useContext(MenuContext.MenuContext);
+
+  var _useControllableState3 = useControllableState.useControllableState({
+    value: selectedItem,
+    onChange: onChange,
+    defaultValue: defaultSelectedItem
+  }),
+      _useControllableState4 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState3, 2),
+      selection = _useControllableState4[0],
+      setSelection = _useControllableState4[1];
+
+  function handleClick(item, e) {
+    setSelection(item);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  React.useEffect(function () {
+    if (!context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [context.state.hasIcons, context]);
+  var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-radio-group"));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classNames,
+    role: "none",
+    ref: forwardRef
+  }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    role: "group",
+    "aria-label": label
+  }), items.map(function (item, i) {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+      key: i,
+      label: itemToString(item),
+      role: "menuitemradio",
+      "aria-checked": item === selection,
+      renderIcon: item === selection && icons.Checkmark,
+      onClick: function onClick(e) {
+        handleClick(item, e);
+      }
+    });
+  })));
+});
+MenuItemRadioGroup.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the default selected item. Must match the type of props.items.
+   */
+  defaultSelectedItem: PropTypes__default["default"].any,
+
+  /**
+   * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+   */
+  itemToString: PropTypes__default["default"].func,
+
+  /**
+   * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
+   */
+  items: PropTypes__default["default"].array,
+
+  /**
+   * A required label titling this radio group.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the selection changes.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
+   */
+  selectedItem: PropTypes__default["default"].any
+};
+var MenuItemDivider = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemDivider(_ref5, forwardRef) {
+  var className = _ref5.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded5);
 
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-divider"));
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: classNames,
+    role: "separator",
+    ref: forwardRef
+  }));
+});
+MenuItemDivider.propTypes = {
   /**
-   * Rendered shortcut for the MenuItem
+   * Additional CSS class names.
    */
-  shortcut: PropTypes__default["default"].node
+  className: PropTypes__default["default"].string
 };
 
-exports["default"] = MenuItem;
+exports.MenuItem = MenuItem;
+exports.MenuItemDivider = MenuItemDivider;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuItemRadioGroup = MenuItemRadioGroup;
+exports.MenuItemSelectable = MenuItemSelectable;

package/lib/components/MultiSelect/MultiSelect.js

@@ -339,6 +339,12 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
 });
 MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, MultiSelectPropTypes.sortingPropTypes), {}, {
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string,
+
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -50,14 +50,14 @@ var on = function on(element) {
 };
 /**
  * The CSS property names of the arrow keyed by the floating menu direction.
- * @type {object<string, string>}
+ * @type {Object<string, string>}
  */
 
 
 var triggerButtonPositionProps = (_triggerButtonPositio = {}, _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio, FloatingMenu.DIRECTION_TOP, 'bottom'), _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio, FloatingMenu.DIRECTION_BOTTOM, 'top'), _triggerButtonPositio);
 /**
  * Determines how the position of arrow should affect the floating menu position.
- * @type {object<string, number>}
+ * @type {Object<string, number>}
  */
 
 var triggerButtonPositionFactors = (_triggerButtonPositio2 = {}, _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_TOP, -2), _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_BOTTOM, -1), _triggerButtonPositio2);

package/lib/components/OverflowMenuV2/index.js

@@ -15,11 +15,8 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
-require('../Menu/index.js');
-var usePrefix = require('../../internal/usePrefix.js');
 var Menu = require('../Menu/Menu.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
+var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -90,12 +87,6 @@ function OverflowMenuV2(_ref) {
     e.preventDefault();
   }
 
-  function handleKeyPress(e) {
-    if (open && match.matches(e, [keys.ArrowUp, keys.ArrowRight, keys.ArrowDown, keys.ArrowLeft])) {
-      e.preventDefault();
-    }
-  }
-
   var containerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu__container"));
   var triggerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames), size !== defaultSize && "".concat(prefix, "--overflow-menu--").concat(size));
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -108,11 +99,10 @@ function OverflowMenuV2(_ref) {
     className: triggerClasses,
     onClick: handleClick,
     onMouseDown: handleMousedown,
-    onKeyDown: handleKeyPress,
     ref: triggerRef
   }), /*#__PURE__*/React__default["default"].createElement(IconElement, {
     className: "".concat(prefix, "--overflow-menu__icon")
-  })), /*#__PURE__*/React__default["default"].createElement(Menu["default"], {
+  })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     id: id,
     size: size,
     open: open,
@@ -124,17 +114,17 @@ function OverflowMenuV2(_ref) {
 
 OverflowMenuV2.propTypes = {
   /**
-   * Specify the children of the OverflowMenu
+   * A collection of MenuItems to be rendered within this OverflowMenu.
    */
   children: PropTypes__default["default"].node,
 
   /**
-   * Optional className for the trigger button
+   * Additional CSS class names for the trigger button.
    */
   className: PropTypes__default["default"].string,
 
   /**
-   * Function called to override icon rendering.
+   * Otionally provide a custom icon to be rendered on the trigger button.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
 

package/lib/components/Search/Search.js

@@ -257,11 +257,11 @@ Search.propTypes = {
 };
 
 function CustomSearchIcon(_ref2) {
-  var icon = _ref2.icon;
+  var Icon = _ref2.icon;
   var prefix = usePrefix.usePrefix();
 
-  if (icon) {
-    return /*#__PURE__*/React__default["default"].cloneElement(icon, {
+  if (Icon) {
+    return /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: "".concat(prefix, "--search-magnifier-icon")
     });
   }

package/lib/index.d.ts

@@ -105,7 +105,7 @@ export * from './components/Heading';
 export * from './components/IconButton';
 export * from './components/Layer';
 export { LayoutDirection as unstable_LayoutDirection, useLayoutDirection as unstable_useLayoutDirection, } from './components/Layout';
-export { Menu as unstable_Menu, MenuDivider as unstable_MenuDivider, MenuGroup as unstable_MenuGroup, MenuItem as unstable_MenuItem, MenuRadioGroup as unstable_MenuRadioGroup, MenuSelectableItem as unstable_MenuSelectableItem, } from './components/Menu';
+export { Menu as unstable_Menu, MenuItem as unstable_MenuItem, MenuItemDivider as unstable_MenuItemDivider, MenuItemGroup as unstable_MenuItemGroup, MenuItemRadioGroup as unstable_MenuItemRadioGroup, MenuItemSelectable as unstable_MenuItemSelectable, } from './components/Menu';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2';
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';