@carbon/react 1.23.0 → 1.24.0-rc.0

package/lib/components/Menu/Menu.js

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -10,68 +10,75 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var ReactDOM = require('react-dom');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var _utils = require('./_utils.js');
-var MenuGroup = require('./MenuGroup.js');
-var MenuRadioGroup = require('./MenuRadioGroup.js');
-var MenuRadioGroupOptions = require('./MenuRadioGroupOptions.js');
-var MenuSelectableItem = require('./MenuSelectableItem.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 ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "className", "id", "level", "open", "size", "target", "x", "y", "onClose"];
-var margin = 16; // distance to keep to body edges, in px
-
-var defaultSize = 'sm';
+var _excluded = ["children", "className", "label", "onClose", "open", "size", "target", "x", "y"];
+var spacing = 8; // distance to keep to window edges, in px
 
-var Menu = function Menu(_ref) {
-  var _classnames;
+var Menu = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
-  var rootRef = React.useRef(null);
-
-  var _useState = React.useState(1),
+  var prefix = usePrefix.usePrefix();
+  var focusReturn = React.useRef(null);
+  var context = React.useContext(MenuContext.MenuContext);
+  var isRoot = context.state.isRoot;
+  var menuSize = isRoot ? size : context.state.size;
+
+  var _useReducer = React.useReducer(MenuContext.menuReducer, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, context.state), {}, {
+    isRoot: false,
+    size: size,
+    requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
+  })),
+      _useReducer2 = _rollupPluginBabelHelpers.slicedToArray(_useReducer, 2),
+      childState = _useReducer2[0],
+      childDispatch = _useReducer2[1];
+
+  var childContext = React.useMemo(function () {
+    return {
+      state: childState,
+      dispatch: childDispatch
+    };
+  }, [childState, childDispatch]);
+  var menu = React.useRef();
+  var ref = useMergedRefs.useMergedRefs([forwardRef, menu]);
+
+  var _useState = React.useState([-1, -1]),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      direction = _useState2[0],
-      setDirection = _useState2[1]; // 1 = to right, -1 = to left
+      position = _useState2[0],
+      setPosition = _useState2[1];
 
-
-  var _useState3 = React.useState([x, y]),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      position = _useState4[0],
-      setPosition = _useState4[1];
-
-  var isRootMenu = level === 1;
-  var focusReturn = React.useRef(null);
-  var prefix = usePrefix.usePrefix();
+  var focusableItems = childContext.state.items.filter(function (item) {
+    return !item.disabled;
+  });
 
   function returnFocus() {
     if (focusReturn.current) {
@@ -79,261 +86,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 = _rollupPluginBabelHelpers["typeof"](x) === 'object' && x.length === 2;
-    var yIsRange = _rollupPluginBabelHelpers["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 = _utils.getParentMenu(rootRef.current)) === null || _getParentMenu === void 0 ? void 0 : _getParentMenu.getBoundingClientRect(),
-          parentWidth = _getParentMenu$getBou.width;
-
-      targetBoundaries[2] -= parentWidth;
-    }
-
-    var containerBoundaries = getContainerBoundaries();
-    return [_utils.capWithinRange(targetBoundaries[0], containerBoundaries[0], containerBoundaries[2]), _utils.capWithinRange(targetBoundaries[1], containerBoundaries[1], containerBoundaries[3]), _utils.capWithinRange(targetBoundaries[2], containerBoundaries[0], containerBoundaries[2]), _utils.capWithinRange(targetBoundaries[3], containerBoundaries[1], containerBoundaries[3])];
-  }
+    childDispatch({
+      type: 'clearRegisteredItems'
+    });
 
-  function focusNode(node) {
-    if (node) {
-      _utils.resetFocus(rootRef.current);
-      _utils.focusNode(node);
+    if (onClose) {
+      onClose();
     }
   }
 
-  function handleKeyDown(event) {
-    if (match.match(event, keys.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.match(event, keys.Enter) || match.match(event, keys.Space))) {
-      handleClick(event);
+    if ((match.match(e, keys.Escape) || !isRoot && match.match(e, keys.ArrowLeft)) && onClose) {
+      handleClose(e);
     } else {
-      event.stopPropagation();
-    }
-
-    if (match.match(event, keys.Escape) || !isRootMenu && match.match(event, keys.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.match(e, keys.ArrowUp)) {
+        indexToFocus = currentItem === -1 ? focusableItems.length - 1 : indexToFocus - 1;
+      }
 
-      if (match.match(event, keys.ArrowUp)) {
-        nodeToFocus = _utils.getNextNode(currentNode, -1);
-      } else if (match.match(event, keys.ArrowDown)) {
-        nodeToFocus = _utils.getNextNode(currentNode, 1);
-      } else if (match.match(event, keys.ArrowLeft)) {
-        nodeToFocus = _utils.getParentNode(currentNode);
+      if (match.match(e, keys.ArrowDown)) {
+        indexToFocus = currentItem === -1 ? 0 : indexToFocus + 1;
       }
-    } else if (event.target.tagName === 'UL') {
-      var validNodes = _utils.getValidNodes(event.target);
 
-      if (validNodes.length > 0 && match.match(event, keys.ArrowUp)) {
-        nodeToFocus = validNodes[validNodes.length - 1];
-      } else if (validNodes.length > 0 && match.match(event, keys.ArrowDown)) {
-        nodeToFocus = validNodes[0];
+      if (indexToFocus < 0) {
+        indexToFocus = 0;
       }
-    }
 
-    focusNode(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 (!_utils.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;
+  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 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();
-
-    var _getPosition = _utils.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: _rollupPluginBabelHelpers["typeof"](x) === 'object' && x.length === 2 ? x : [x, x],
+        y: _rollupPluginBabelHelpers["typeof"](y) === 'object' && y.length === 2 ? y : [y, y]
+      };
+      return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
     }
+
+    return [-1, -1];
   }
 
   React.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 = _utils.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["default"].Children.toArray(children).some(function (node) {
-    return node.type === MenuSelectableItem["default"] || node.type === MenuRadioGroup["default"];
-  });
-  var options = React__default["default"].Children.map(children, function (node) {
-    if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
-      return /*#__PURE__*/React__default["default"].cloneElement(node, {
-        indented: someNodesHaveIcons,
-        level: level
-      });
-    }
-  });
-  var classes = cx__default["default"]("".concat(prefix, "--menu"), (_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--menu--invisible"), open && position[0] === 0 && position[1] === 0), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--menu--root"), isRootMenu), _classnames), size !== defaultSize && "".concat(prefix, "--menu--").concat(size), className);
-
-  var ulAttributes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-    id: id,
-    ref: rootRef,
-    className: classes,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    onBlur: handleBlur,
-    role: 'menu',
+  }, [open]);
+  var classNames = cx__default["default"](className, "".concat(prefix, "--menu"), "".concat(prefix, "--menu--").concat(menuSize), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--menu--shown"), position[0] >= 0 && position[1] >= 0), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--menu--with-icons"), childContext.state.hasIcons), _cx));
+  var rendered = /*#__PURE__*/React__default["default"].createElement(MenuContext.MenuContext.Provider, {
+    value: childContext
+  }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["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["default"]) {
-    var radioGroupProps = options[0].props;
-    ulAttributes['aria-label'] = radioGroupProps.label;
-    childrenToRender = /*#__PURE__*/React__default["default"].createElement(MenuRadioGroupOptions["default"], {
-      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["default"]) {
-    var groupProps = options[0].props;
-    ulAttributes['aria-label'] = groupProps.label;
-    childrenToRender = React__default["default"].Children.toArray(options[0].props.children);
-  }
-
-  var menu = /*#__PURE__*/React__default["default"].createElement("ul", ulAttributes, childrenToRender);
-  return isRootMenu ? open && /*#__PURE__*/ReactDOM__default["default"].createPortal(menu, target) || null : menu;
-};
-
+  }), children));
+  return isRoot ? open && /*#__PURE__*/ReactDOM.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__default["default"].node,
 
   /**
-   * Specify a custom className to apply to the ul node
+   * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
 
   /**
-   * Define an ID for this menu
-   */
-  id: PropTypes__default["default"].string,
-
-  /**
-   * Internal: keeps track of the nesting level of the menu
+   * A label describing the Menu.
    */
-  level: PropTypes__default["default"].number,
+  label: PropTypes__default["default"].string,
 
   /**
-   * Function called when the menu is closed
+   * Provide an optional function to be called when the Menu should be closed.
    */
   onClose: PropTypes__default["default"].func,
 
   /**
-   * Specify whether the Menu is currently open
+   * Whether the Menu is open or not.
    */
   open: PropTypes__default["default"].bool,
 
   /**
-   * Specify the size of the menu, from a list of available sizes.
+   * Specify the size of the Menu.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  size: PropTypes__default["default"].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__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
 };
-var Menu$1 = Menu;
 
-exports["default"] = Menu$1;
+exports.Menu = Menu;

package/lib/components/Menu/MenuContext.js

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var menuDefaultState = {
+  isRoot: true,
+  hasIcons: false,
+  size: null,
+  items: [],
+  requestCloseRoot: function requestCloseRoot() {}
+};
+
+function menuReducer(state, action) {
+  switch (action.type) {
+    case 'enableIcons':
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        hasIcons: true
+      });
+
+    case 'registerItem':
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        items: [].concat(_rollupPluginBabelHelpers.toConsumableArray(state.items), [action.payload])
+      });
+
+    case 'clearRegisteredItems':
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        items: []
+      });
+  }
+}
+
+var MenuContext = /*#__PURE__*/React__default["default"].createContext({
+  state: menuDefaultState,
+  // 'dispatch' is populated by the root menu
+  dispatch: function dispatch() {}
+});
+
+exports.MenuContext = MenuContext;
+exports.menuReducer = menuReducer;