@carbon/react 1.23.0 → 1.24.0-rc.0

package/es/components/Menu/Menu.js

@@ -1,66 +1,74 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import React__default, { useRef, useContext, useReducer, useMemo, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { getParentMenu, getNextNode, getParentNode, getValidNodes, clickedElementHasSubnodes, getPosition, capWithinRange, resetFocus, focusNode } from './_utils.js';
-import MenuGroup from './MenuGroup.js';
-import MenuRadioGroup from './MenuRadioGroup.js';
-import MenuRadioGroupOptions from './MenuRadioGroupOptions.js';
-import MenuSelectableItem from './MenuSelectableItem.js';
+import { MenuContext, menuReducer } from './MenuContext.js';
 import { match } from '../../internal/keyboard/match.js';
-import { Tab, Enter, Space, Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
+import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["children", "className", "id", "level", "open", "size", "target", "x", "y", "onClose"];
-var margin = 16; // distance to keep to body edges, in px
+var _excluded = ["children", "className", "label", "onClose", "open", "size", "target", "x", "y"];
+var spacing = 8; // distance to keep to window edges, in px
 
-var defaultSize = 'sm';
-
-var Menu = function Menu(_ref) {
-  var _classnames;
+var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef) {
+  var _cx;
 
   var children = _ref.children,
       className = _ref.className,
-      id = _ref.id,
-      _ref$level = _ref.level,
-      level = _ref$level === void 0 ? 1 : _ref$level,
+      label = _ref.label,
+      onClose = _ref.onClose,
       open = _ref.open,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaultSize : _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,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var rootRef = useRef(null);
-
-  var _useState = useState(1),
+  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), {}, {
+    isRoot: false,
+    size: size,
+    requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
+  })),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      childState = _useReducer2[0],
+      childDispatch = _useReducer2[1];
+
+  var childContext = useMemo(function () {
+    return {
+      state: childState,
+      dispatch: childDispatch
+    };
+  }, [childState, childDispatch]);
+  var menu = useRef();
+  var ref = useMergedRefs([forwardRef, menu]);
+
+  var _useState = useState([-1, -1]),
       _useState2 = _slicedToArray(_useState, 2),
-      direction = _useState2[0],
-      setDirection = _useState2[1]; // 1 = to right, -1 = to left
-
+      position = _useState2[0],
+      setPosition = _useState2[1];
 
-  var _useState3 = useState([x, y]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      position = _useState4[0],
-      setPosition = _useState4[1];
-
-  var isRootMenu = level === 1;
-  var focusReturn = useRef(null);
-  var prefix = usePrefix();
+  var focusableItems = childContext.state.items.filter(function (item) {
+    return !item.disabled;
+  });
 
   function returnFocus() {
     if (focusReturn.current) {
@@ -68,261 +76,205 @@ var Menu = function Menu(_ref) {
     }
   }
 
-  function close(eventType) {
-    var isKeyboardEvent = /^key/.test(eventType);
+  function handleOpen() {
+    if (menu.current) {
+      focusReturn.current = document.activeElement;
+      setPosition(calculatePosition());
+      menu.current.focus();
+    }
+  }
 
-    if (isKeyboardEvent) {
+  function handleClose(e) {
+    if (/^key/.test(e.type)) {
       window.addEventListener('keyup', returnFocus, {
         once: true
       });
-    } else {
-      window.addEventListener('mouseup', returnFocus, {
+    } else if (e.type === 'click' && menu.current) {
+      menu.current.addEventListener('focusout', returnFocus, {
         once: true
       });
+    } else {
+      returnFocus();
     }
 
-    onClose();
-  }
-
-  function getContainerBoundaries() {
-    var _document$body = document.body,
-        bodyWidth = _document$body.clientWidth,
-        bodyHeight = _document$body.clientHeight;
-    return [margin, margin, bodyWidth - margin, bodyHeight - margin];
-  }
-
-  function getTargetBoundaries() {
-    var xIsRange = _typeof(x) === 'object' && x.length === 2;
-    var yIsRange = _typeof(y) === 'object' && y.length === 2;
-    var targetBoundaries = [xIsRange ? x[0] : x, yIsRange ? y[0] : y, xIsRange ? x[1] : x, yIsRange ? y[1] : y];
-
-    if (!isRootMenu) {
-      var _getParentMenu;
-
-      var _getParentMenu$getBou = (_getParentMenu = getParentMenu(rootRef.current)) === null || _getParentMenu === void 0 ? void 0 : _getParentMenu.getBoundingClientRect(),
-          parentWidth = _getParentMenu$getBou.width;
-
-      targetBoundaries[2] -= parentWidth;
-    }
-
-    var containerBoundaries = getContainerBoundaries();
-    return [capWithinRange(targetBoundaries[0], containerBoundaries[0], containerBoundaries[2]), capWithinRange(targetBoundaries[1], containerBoundaries[1], containerBoundaries[3]), capWithinRange(targetBoundaries[2], containerBoundaries[0], containerBoundaries[2]), capWithinRange(targetBoundaries[3], containerBoundaries[1], containerBoundaries[3])];
-  }
+    childDispatch({
+      type: 'clearRegisteredItems'
+    });
 
-  function focusNode$1(node) {
-    if (node) {
-      resetFocus(rootRef.current);
-      focusNode(node);
+    if (onClose) {
+      onClose();
     }
   }
 
-  function handleKeyDown(event) {
-    if (match(event, Tab)) {
-      event.preventDefault();
-      close(event.type);
-    }
+  function handleKeyDown(e) {
+    e.stopPropagation();
+    var currentItem = focusableItems.findIndex(function (item) {
+      return item.ref.current.contains(document.activeElement);
+    });
+    var indexToFocus = currentItem; // if the user presses escape or this is a submenu
+    // and the user presses ArrowLeft, close it
 
-    if (event.target.tagName === 'LI' && (match(event, Enter) || match(event, Space))) {
-      handleClick(event);
+    if ((match(e, Escape) || !isRoot && match(e, ArrowLeft)) && onClose) {
+      handleClose(e);
     } else {
-      event.stopPropagation();
-    }
-
-    if (match(event, Escape) || !isRootMenu && match(event, ArrowLeft)) {
-      close(event.type);
-    }
-
-    var nodeToFocus;
-
-    if (event.target.tagName === 'LI') {
-      var currentNode = event.target;
+      // if currentItem is -1, the menu itself is focused.
+      // in this case, the arrow keys define the first item
+      // to be focused.
+      if (match(e, ArrowUp)) {
+        indexToFocus = currentItem === -1 ? focusableItems.length - 1 : indexToFocus - 1;
+      }
 
-      if (match(event, ArrowUp)) {
-        nodeToFocus = getNextNode(currentNode, -1);
-      } else if (match(event, ArrowDown)) {
-        nodeToFocus = getNextNode(currentNode, 1);
-      } else if (match(event, ArrowLeft)) {
-        nodeToFocus = getParentNode(currentNode);
+      if (match(e, ArrowDown)) {
+        indexToFocus = currentItem === -1 ? 0 : indexToFocus + 1;
       }
-    } else if (event.target.tagName === 'UL') {
-      var validNodes = getValidNodes(event.target);
 
-      if (validNodes.length > 0 && match(event, ArrowUp)) {
-        nodeToFocus = validNodes[validNodes.length - 1];
-      } else if (validNodes.length > 0 && match(event, ArrowDown)) {
-        nodeToFocus = validNodes[0];
+      if (indexToFocus < 0) {
+        indexToFocus = 0;
       }
-    }
 
-    focusNode$1(nodeToFocus);
+      if (indexToFocus >= focusableItems.length) {
+        indexToFocus = focusableItems.length - 1;
+      }
 
-    if (rest.onKeyDown) {
-      rest.onKeyDown(event);
+      if (indexToFocus !== currentItem) {
+        var nodeToFocus = focusableItems[indexToFocus];
+        nodeToFocus.ref.current.focus();
+      }
     }
   }
 
-  function handleClick(event) {
-    if (!clickedElementHasSubnodes(event) && event.target.tagName !== 'UL') {
-      close(event.type);
-    } else {
-      event.stopPropagation();
+  function handleBlur(e) {
+    if (open && onClose && isRoot && !menu.current.contains(e.relatedTarget)) {
+      handleClose(e);
     }
   }
 
-  function getCorrectedPosition(preferredDirection) {
-    var _rootRef$current;
-
-    var elementRect = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.getBoundingClientRect();
-    var elementDimensions = [elementRect.width, elementRect.height];
-    var targetBoundaries = getTargetBoundaries();
-    var containerBoundaries = getContainerBoundaries();
+  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 = {
+      x: {
+        max: window.innerWidth,
+        size: width,
+        anchor: alignment === 'horizontal' ? range[1] : range[0],
+        reversedAnchor: alignment === 'horizontal' ? range[0] : range[1],
+        offset: 0
+      },
+      y: {
+        max: window.innerHeight,
+        size: height,
+        anchor: alignment === 'horizontal' ? range[0] : range[1],
+        reversedAnchor: alignment === 'horizontal' ? range[1] : range[0],
+        offset: isRoot ? 0 : 4 // top padding in menu, used to align the menu items
 
-    var _getPosition = getPosition(elementDimensions, targetBoundaries, containerBoundaries, preferredDirection, isRootMenu, rootRef.current),
-        correctedPosition = _getPosition.position,
-        correctedDirection = _getPosition.direction;
-
-    setDirection(correctedDirection);
-    return correctedPosition;
+      }
+    };
+    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)
+    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;
+    });
+    return bestOption >= spacing ? bestOption : spacing;
   }
 
-  function handleBlur(event) {
-    var _rootRef$current2;
-
-    if (isRootMenu && !((_rootRef$current2 = rootRef.current) !== null && _rootRef$current2 !== void 0 && _rootRef$current2.contains(event.relatedTarget))) {
-      close(event.type);
+  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]
+      };
+      return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
     }
+
+    return [-1, -1];
   }
 
   useEffect(function () {
     if (open) {
-      focusReturn.current = document.activeElement;
-      var localDirection = 1;
-
-      if (isRootMenu) {
-        var _rootRef$current3;
-
-        (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.focus();
-      } else {
-        var parentMenu = getParentMenu(rootRef.current);
-
-        if (parentMenu) {
-          localDirection = Number(parentMenu.dataset.direction);
-        }
-      }
-
-      var correctedPosition = getCorrectedPosition(localDirection);
-      setPosition(correctedPosition);
+      handleOpen();
     } else {
-      setPosition([0, 0]);
+      // reset position when menu is closed in order for the --shown
+      // modifier to be applied correctly
+      setPosition(-1, -1);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [open, x, y]);
-  var someNodesHaveIcons = React__default.Children.toArray(children).some(function (node) {
-    return node.type === MenuSelectableItem || node.type === MenuRadioGroup;
-  });
-  var options = React__default.Children.map(children, function (node) {
-    if ( /*#__PURE__*/React__default.isValidElement(node)) {
-      return /*#__PURE__*/React__default.cloneElement(node, {
-        indented: someNodesHaveIcons,
-        level: level
-      });
-    }
-  });
-  var classes = cx("".concat(prefix, "--menu"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--menu--open"), open), _defineProperty(_classnames, "".concat(prefix, "--menu--invisible"), open && position[0] === 0 && position[1] === 0), _defineProperty(_classnames, "".concat(prefix, "--menu--root"), isRootMenu), _classnames), size !== defaultSize && "".concat(prefix, "--menu--").concat(size), className);
-
-  var ulAttributes = _objectSpread2(_objectSpread2({}, rest), {}, {
-    id: id,
-    ref: rootRef,
-    className: classes,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    onBlur: handleBlur,
-    role: 'menu',
+  }, [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, {
+    value: childContext
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+    className: classNames,
+    role: "menu",
+    ref: ref,
+    "aria-label": label,
     tabIndex: -1,
-    'data-direction': direction,
-    'data-level': level,
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur // eslint-disable-next-line react/forbid-dom-props
+    ,
     style: {
       left: "".concat(position[0], "px"),
       top: "".concat(position[1], "px")
     }
-  });
-
-  var childrenToRender = options; // if the only child is a radiogroup, don't render it as radiogroup component, but
-  // only the items to prevent duplicate markup
-
-  if (options && options.length === 1 && options[0].type === MenuRadioGroup) {
-    var radioGroupProps = options[0].props;
-    ulAttributes['aria-label'] = radioGroupProps.label;
-    childrenToRender = /*#__PURE__*/React__default.createElement(MenuRadioGroupOptions, {
-      items: radioGroupProps.items,
-      initialSelectedItem: radioGroupProps.initialSelectedItem,
-      onChange: radioGroupProps.onChange
-    });
-  } // if the only child is a generic group, don't render it as group component, but
-  // only the children to prevent duplicate markup
-
-
-  if (options && options.length === 1 && options[0].type === MenuGroup) {
-    var groupProps = options[0].props;
-    ulAttributes['aria-label'] = groupProps.label;
-    childrenToRender = React__default.Children.toArray(options[0].props.children);
-  }
-
-  var menu = /*#__PURE__*/React__default.createElement("ul", ulAttributes, childrenToRender);
-  return isRootMenu ? open && /*#__PURE__*/ReactDOM.createPortal(menu, target) || null : menu;
-};
-
+  }), children));
+  return isRoot ? open && /*#__PURE__*/createPortal(rendered, target) || null : rendered;
+});
 Menu.propTypes = {
   /**
-   * Specify the children of the Menu
+   * A collection of MenuItems to be rendered within this Menu.
    */
   children: PropTypes.node,
 
   /**
-   * Specify a custom className to apply to the ul node
+   * Additional CSS class names.
    */
   className: PropTypes.string,
 
   /**
-   * Define an ID for this menu
-   */
-  id: PropTypes.string,
-
-  /**
-   * Internal: keeps track of the nesting level of the menu
+   * A label describing the Menu.
    */
-  level: PropTypes.number,
+  label: PropTypes.string,
 
   /**
-   * Function called when the menu is closed
+   * Provide an optional function to be called when the Menu should be closed.
    */
   onClose: PropTypes.func,
 
   /**
-   * Specify whether the Menu is currently open
+   * Whether the Menu is open or not.
    */
   open: PropTypes.bool,
 
   /**
-   * Specify the size of the menu, from a list of available sizes.
+   * Specify the size of the Menu.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
 
   /**
-   * Optionally pass an element the Menu should be appended to as a child. Defaults to document.body.
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
   target: PropTypes.object,
 
   /**
-   * Specify the x position where this menu is rendered
+   * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
    */
   x: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
 
   /**
-   * Specify the y position where this menu is rendered
+   * Specify the y position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([y1, y2])
    */
   y: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
 };
-var Menu$1 = Menu;
 
-export { Menu$1 as default };
+export { Menu };

package/es/components/Menu/MenuContext.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * 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 = {
+  isRoot: true,
+  hasIcons: false,
+  size: null,
+  items: [],
+  requestCloseRoot: function requestCloseRoot() {}
+};
+
+function menuReducer(state, action) {
+  switch (action.type) {
+    case 'enableIcons':
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        hasIcons: true
+      });
+
+    case 'registerItem':
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        items: [].concat(_toConsumableArray(state.items), [action.payload])
+      });
+
+    case 'clearRegisteredItems':
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        items: []
+      });
+  }
+}
+
+var MenuContext = /*#__PURE__*/React__default.createContext({
+  state: menuDefaultState,
+  // 'dispatch' is populated by the root menu
+  dispatch: function dispatch() {}
+});
+
+export { MenuContext, menuReducer };