@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -0,0 +1,547 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 invariant = require('invariant');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var ClickListener = require('../../internal/ClickListener.js');
+var FloatingMenu = require('../../internal/FloatingMenu.js');
+var iconsReact = require('@carbon/icons-react');
+var mergeRefs = require('../../tools/mergeRefs.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var deprecate = require('../../prop-types/deprecate.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 }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["id", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
+
+var _triggerButtonPositio, _triggerButtonPositio2;
+
+var on = function on(element) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  element.addEventListener.apply(element, args);
+  return {
+    release: function release() {
+      element.removeEventListener.apply(element, args);
+      return null;
+    }
+  };
+};
+/**
+ * The CSS property names of the arrow keyed by the floating menu direction.
+ * @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>}
+ */
+
+var triggerButtonPositionFactors = (_triggerButtonPositio2 = {}, _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_TOP, -2), _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_BOTTOM, -1), _triggerButtonPositio2);
+/**
+ * @param {Element} menuBody The menu body with the menu arrow.
+ * @param {string} direction The floating menu direction.
+ * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
+ * @private
+ */
+
+var getMenuOffset = function getMenuOffset(menuBody, direction, trigger, flip) {
+  var triggerButtonPositionProp = triggerButtonPositionProps[direction];
+  var triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
+
+  if (process.env.NODE_ENV !== "production") {
+    !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant__default["default"](false) : void 0;
+  }
+
+  var menuWidth = menuBody.offsetWidth,
+      menuHeight = menuBody.offsetHeight;
+
+  switch (triggerButtonPositionProp) {
+    case 'top':
+    case 'bottom':
+      {
+        // TODO: Ensure `trigger` is there for `<OverflowMenu open>`
+        var triggerWidth = !trigger ? 0 : trigger.offsetWidth;
+        return {
+          left: (!flip ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),
+          top: 0
+        };
+      }
+
+    case 'left':
+    case 'right':
+      {
+        // TODO: Ensure `trigger` is there for `<OverflowMenu open>`
+        var triggerHeight = !trigger ? 0 : trigger.offsetHeight;
+        return {
+          left: 0,
+          top: (!flip ? 1 : -1) * (menuHeight / 2 - triggerHeight / 2)
+        };
+      }
+  }
+};
+
+var OverflowMenu = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(OverflowMenu, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(OverflowMenu);
+
+  function OverflowMenu() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, OverflowMenu);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {});
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_hFocusIn", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_hBlurTimeout", void 0);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_triggerRef", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClick", function (evt) {
+      evt.stopPropagation();
+
+      if (!_this._menuBody || !_this._menuBody.contains(evt.target)) {
+        _this.setState({
+          open: !_this.state.open
+        });
+
+        _this.props.onClick(evt);
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyDown", function (evt) {
+      if (match.matches(evt, [keys.ArrowDown])) {
+        _this.setState({
+          open: !_this.state.open
+        });
+
+        _this.props.onClick(evt);
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyPress", function (evt) {
+      if (_this.state.open && match.matches(evt, [keys.ArrowUp, keys.ArrowRight, keys.ArrowDown, keys.ArrowLeft])) {
+        evt.preventDefault();
+      } // Close the overflow menu on escape
+
+
+      if (match.matches(evt, [keys.Escape])) {
+        var wasOpen = _this.state.open;
+
+        _this.closeMenu(function () {
+          if (wasOpen) {
+            _this.focusMenuEl();
+          }
+        }); // Stop the esc keypress from bubbling out and closing something it shouldn't
+
+
+        evt.stopPropagation();
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClickOutside", function (evt) {
+      if (_this.state.open && (!_this._menuBody || !_this._menuBody.contains(evt.target))) {
+        _this.closeMenu();
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "closeMenu", function (onCloseMenu) {
+      _this.setState({
+        open: false
+      }, function () {
+        // Optional callback to be executed after the state as been set to close
+        if (onCloseMenu) {
+          onCloseMenu();
+        }
+
+        _this.props.onClose();
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "focusMenuEl", function () {
+      var triggerEl = _this._triggerRef.current;
+
+      if (triggerEl) {
+        triggerEl.focus();
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowMenuItemFocus", function (_ref) {
+      var _overflowMenuItem$cur;
+
+      var currentIndex = _ref.currentIndex,
+          direction = _ref.direction;
+      var enabledIndices = React__default["default"].Children.toArray(_this.props.children).reduce(function (acc, curr, i) {
+        if (!curr.props.disabled) {
+          acc.push(i);
+        }
+
+        return acc;
+      }, []);
+
+      var nextValidIndex = function () {
+        var nextIndex = enabledIndices.indexOf(currentIndex) + direction;
+
+        switch (enabledIndices.indexOf(currentIndex) + direction) {
+          case -1:
+            return enabledIndices.length - 1;
+
+          case enabledIndices.length:
+            return 0;
+
+          default:
+            return nextIndex;
+        }
+      }();
+
+      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])].overflowMenuItem;
+
+      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : (_overflowMenuItem$cur = overflowMenuItem.current) === null || _overflowMenuItem$cur === void 0 ? void 0 : _overflowMenuItem$cur.focus();
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_bindMenuBody", function (menuBody) {
+      if (!menuBody) {
+        _this._menuBody = menuBody;
+      }
+
+      if (!menuBody && _this._hFocusIn) {
+        _this._hFocusIn = _this._hFocusIn.release();
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_handlePlace", function (menuBody) {
+      if (menuBody) {
+        _this._menuBody = menuBody;
+        var hasFocusin = ('onfocusin' in window);
+        var focusinEventName = hasFocusin ? 'focusin' : 'focus';
+        _this._hFocusIn = on(menuBody.ownerDocument, focusinEventName, function (event) {
+          var target = ClickListener["default"].getEventTarget(event);
+          var triggerEl = _this._triggerRef.current;
+
+          if (typeof target.matches === 'function') {
+            if (!menuBody.contains(target) && triggerEl && !target.matches(".".concat(_this.context, "--overflow-menu,.").concat(_this.context, "--overflow-menu-options"))) {
+              _this.closeMenu();
+            }
+          }
+        }, !hasFocusin);
+
+        _this.props.onOpen();
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_getTarget", function () {
+      var triggerEl = _this._triggerRef.current;
+      return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(OverflowMenu, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_, prevState) {
+      var onClose = this.props.onClose;
+
+      if (!this.state.open && prevState.open) {
+        onClose();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (typeof this._hBlurTimeout === 'number') {
+        clearTimeout(this._hBlurTimeout);
+        this._hBlurTimeout = undefined;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _classNames2,
+          _this2 = this;
+
+      var prefix = this.context;
+
+      var _this$props = this.props,
+          id = _this$props.id,
+          ariaLabel = _this$props.ariaLabel,
+          children = _this$props.children,
+          iconDescription = _this$props.iconDescription,
+          direction = _this$props.direction,
+          flipped = _this$props.flipped,
+          focusTrap = _this$props.focusTrap,
+          menuOffset = _this$props.menuOffset,
+          menuOffsetFlip = _this$props.menuOffsetFlip,
+          iconClass = _this$props.iconClass;
+          _this$props.onClick;
+          _this$props.onOpen;
+          _this$props.selectorPrimaryFocus;
+          var IconElement = _this$props.renderIcon,
+          ref = _this$props.innerRef,
+          menuOptionsClass = _this$props.menuOptionsClass,
+          light = _this$props.light,
+          _this$props$size = _this$props.size,
+          size = _this$props$size === void 0 ? 'md' : _this$props$size,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      var open = this.state.open;
+      var overflowMenuClasses = cx__default["default"](this.props.className, "".concat(prefix, "--overflow-menu"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--").concat(size), size), _classNames));
+      var overflowMenuOptionsClasses = cx__default["default"](menuOptionsClass, "".concat(prefix, "--overflow-menu-options"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu--flip"), this.props.flipped), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--").concat(size), size), _classNames2));
+      var overflowMenuIconClasses = cx__default["default"]("".concat(prefix, "--overflow-menu__icon"), iconClass);
+      var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child, index) {
+        var _child$props;
+
+        return /*#__PURE__*/React__default["default"].cloneElement(child, {
+          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenu,
+          handleOverflowMenuItemFocus: _this2.handleOverflowMenuItemFocus,
+          ref: function ref(e) {
+            _this2["overflowMenuItem".concat(index)] = e;
+          },
+          index: index
+        });
+      });
+      var menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
+        className: overflowMenuOptionsClasses,
+        tabIndex: "-1",
+        role: "menu",
+        "aria-label": ariaLabel
+      }, childrenWithProps);
+      var wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
+        focusTrap: focusTrap,
+        triggerRef: this._triggerRef,
+        menuDirection: direction,
+        menuOffset: flipped ? menuOffsetFlip : menuOffset,
+        menuRef: this._bindMenuBody,
+        flipped: this.props.flipped,
+        target: this._getTarget,
+        onPlace: this._handlePlace,
+        selectorPrimaryFocus: this.props.selectorPrimaryFocus
+      }, /*#__PURE__*/React__default["default"].cloneElement(menuBody, {
+        'data-floating-menu-direction': direction
+      }));
+      var iconProps = {
+        className: overflowMenuIconClasses,
+        'aria-label': iconDescription
+      };
+      return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
+        onClickOutside: this.handleClickOutside
+      }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
+        type: "button",
+        "aria-haspopup": true,
+        "aria-expanded": this.state.open,
+        className: overflowMenuClasses,
+        onKeyDown: this.handleKeyPress,
+        onClick: this.handleClick,
+        "aria-label": ariaLabel,
+        id: id,
+        ref: mergeRefs["default"](this._triggerRef, ref)
+      }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps, iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription)), open && wrappedMenuBody));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref2, state) {
+      var open = _ref2.open;
+      var prevOpen = state.prevOpen;
+      return prevOpen === open ? null : {
+        open: open,
+        prevOpen: open
+      };
+    }
+  }]);
+
+  return OverflowMenu;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
+  /**
+   * The ARIA label.
+   */
+  ariaLabel: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].string.isRequired : PropTypes__default["default"].string,
+
+  /**
+   * The child nodes.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The menu direction.
+   */
+  direction: PropTypes__default["default"].oneOf([FloatingMenu.DIRECTION_TOP, FloatingMenu.DIRECTION_BOTTOM]),
+
+  /**
+   * `true` if the menu alignment should be flipped.
+   */
+  flipped: PropTypes__default["default"].bool,
+
+  /**
+   * Enable or disable focus trap behavior
+   */
+  focusTrap: PropTypes__default["default"].bool,
+
+  /**
+   * The CSS class for the icon.
+   */
+  iconClass: PropTypes__default["default"].string,
+
+  /**
+   * The icon description.
+   */
+  iconDescription: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * The element ID.
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make OverflowMenu background color same as container background color.
+   */
+  light: FeatureFlags__namespace.enabled('enable-v11-release') ? deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.') : PropTypes__default["default"].bool,
+
+  /**
+   * The adjustment in position applied to the floating menu.
+   */
+  menuOffset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+    top: PropTypes__default["default"].number,
+    left: PropTypes__default["default"].number
+  }), PropTypes__default["default"].func]),
+
+  /**
+   * The adjustment in position applied to the floating menu.
+   */
+  menuOffsetFlip: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+    top: PropTypes__default["default"].number,
+    left: PropTypes__default["default"].number
+  }), PropTypes__default["default"].func]),
+
+  /**
+   * The class to apply to the menu options
+   */
+  menuOptionsClass: PropTypes__default["default"].string,
+
+  /**
+   * The event handler for the `click` event.
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Function called when menu is closed
+   */
+  onClose: PropTypes__default["default"].func,
+
+  /**
+   * The event handler for the `focus` event.
+   */
+  onFocus: PropTypes__default["default"].func,
+
+  /**
+   * The event handler for the `keydown` event.
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Function called when menu is opened
+   */
+  onOpen: PropTypes__default["default"].func,
+
+  /**
+   * `true` if the menu should be open.
+   */
+  open: PropTypes__default["default"].bool,
+
+  /**
+   * Function called to override icon rendering.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Specify a CSS selector that matches the DOM element that should
+   * be focused when the OverflowMenu opens
+   */
+  selectorPrimaryFocus: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl'])
+});
+
+_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
+  ariaLabel: FeatureFlags__namespace.enabled('enable-v11-release') ? null : 'open and close list of options',
+  iconDescription: 'open and close list of options',
+  open: false,
+  direction: FloatingMenu.DIRECTION_BOTTOM,
+  flipped: false,
+  focusTrap: true,
+  renderIcon: iconsReact.OverflowMenuVertical,
+  onClick: function onClick() {},
+  onKeyDown: function onKeyDown() {},
+  onClose: function onClose() {},
+  onOpen: function onOpen() {},
+  menuOffset: getMenuOffset,
+  menuOffsetFlip: getMenuOffset,
+  light: false,
+  selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
+});
+
+exports.OverflowMenu = OverflowMenu;
+exports.getMenuOffset = getMenuOffset;

package/lib/components/OverflowMenu/index.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 FeatureFlags = require('@carbon/feature-flags');
+var OverflowMenu$1 = require('./OverflowMenu.js');
+var createClassWrapper = require('../../internal/createClassWrapper.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var OverflowMenu = FeatureFlags__namespace.enabled('enable-v11-release') ? createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu) : OverflowMenu$1.OverflowMenu;
+
+exports["default"] = OverflowMenu;