@carbon/react 0.17.0 → 1.0.1

package/es/components/OverflowMenu/OverflowMenu.js

@@ -0,0 +1,516 @@
+/**
+ * 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.
+ */
+
+import { defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import invariant from 'invariant';
+import PropTypes from 'prop-types';
+import React__default, { Component } from 'react';
+import cx from 'classnames';
+import ClickListener from '../../internal/ClickListener.js';
+import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
+import { OverflowMenuVertical } from '@carbon/icons-react';
+import mergeRefs from '../../tools/mergeRefs.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import deprecate from '../../prop-types/deprecate.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { ArrowDown, ArrowUp, ArrowRight, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
+
+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 = {}, _defineProperty(_triggerButtonPositio, DIRECTION_TOP, 'bottom'), _defineProperty(_triggerButtonPositio, DIRECTION_BOTTOM, 'top'), _triggerButtonPositio);
+/**
+ * Determines how the position of arrow should affect the floating menu position.
+ * @type {object<string, number>}
+ */
+
+var triggerButtonPositionFactors = (_triggerButtonPositio2 = {}, _defineProperty(_triggerButtonPositio2, DIRECTION_TOP, -2), _defineProperty(_triggerButtonPositio2, 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(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(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) {
+  _inherits(OverflowMenu, _Component);
+
+  var _super = _createSuper(OverflowMenu);
+
+  function OverflowMenu() {
+    var _this;
+
+    _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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {});
+
+    _defineProperty(_assertThisInitialized(_this), "_hFocusIn", null);
+
+    _defineProperty(_assertThisInitialized(_this), "_hBlurTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_triggerRef", /*#__PURE__*/React__default.createRef());
+
+    _defineProperty(_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);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
+      if (matches(evt, [ArrowDown])) {
+        _this.setState({
+          open: !_this.state.open
+        });
+
+        _this.props.onClick(evt);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (evt) {
+      if (_this.state.open && matches(evt, [ArrowUp, ArrowRight, ArrowDown, ArrowLeft])) {
+        evt.preventDefault();
+      } // Close the overflow menu on escape
+
+
+      if (matches(evt, [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();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (evt) {
+      if (_this.state.open && (!_this._menuBody || !_this._menuBody.contains(evt.target))) {
+        _this.closeMenu();
+      }
+    });
+
+    _defineProperty(_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();
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "focusMenuEl", function () {
+      var triggerEl = _this._triggerRef.current;
+
+      if (triggerEl) {
+        triggerEl.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOverflowMenuItemFocus", function (_ref) {
+      var _overflowMenuItem$cur;
+
+      var currentIndex = _ref.currentIndex,
+          direction = _ref.direction;
+      var enabledIndices = React__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();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_bindMenuBody", function (menuBody) {
+      if (!menuBody) {
+        _this._menuBody = menuBody;
+      }
+
+      if (!menuBody && _this._hFocusIn) {
+        _this._hFocusIn = _this._hFocusIn.release();
+      }
+    });
+
+    _defineProperty(_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.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();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_getTarget", function () {
+      var triggerEl = _this._triggerRef.current;
+      return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
+    });
+
+    return _this;
+  }
+
+  _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 = _objectWithoutProperties(_this$props, _excluded);
+
+      var open = this.state.open;
+      var overflowMenuClasses = cx(this.props.className, "".concat(prefix, "--overflow-menu"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _defineProperty(_classNames, "".concat(prefix, "--overflow-menu--light"), light), _defineProperty(_classNames, "".concat(prefix, "--overflow-menu--").concat(size), size), _classNames));
+      var overflowMenuOptionsClasses = cx(menuOptionsClass, "".concat(prefix, "--overflow-menu-options"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--overflow-menu--flip"), this.props.flipped), _defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--open"), open), _defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--overflow-menu-options--").concat(size), size), _classNames2));
+      var overflowMenuIconClasses = cx("".concat(prefix, "--overflow-menu__icon"), iconClass);
+      var childrenWithProps = React__default.Children.toArray(children).map(function (child, index) {
+        var _child$props;
+
+        return /*#__PURE__*/React__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.createElement("ul", {
+        className: overflowMenuOptionsClasses,
+        tabIndex: "-1",
+        role: "menu",
+        "aria-label": ariaLabel
+      }, childrenWithProps);
+      var wrappedMenuBody = /*#__PURE__*/React__default.createElement(FloatingMenu, {
+        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.cloneElement(menuBody, {
+        'data-floating-menu-direction': direction
+      }));
+      var iconProps = {
+        className: overflowMenuIconClasses,
+        'aria-label': iconDescription
+      };
+      return /*#__PURE__*/React__default.createElement(ClickListener, {
+        onClickOutside: this.handleClickOutside
+      }, /*#__PURE__*/React__default.createElement("button", _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(this._triggerRef, ref)
+      }), /*#__PURE__*/React__default.createElement(IconElement, iconProps, iconDescription && /*#__PURE__*/React__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;
+}(Component);
+
+_defineProperty(OverflowMenu, "propTypes", {
+  /**
+   * The ARIA label.
+   */
+  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? PropTypes.string.isRequired : PropTypes.string,
+
+  /**
+   * The child nodes.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The menu direction.
+   */
+  direction: PropTypes.oneOf([DIRECTION_TOP, DIRECTION_BOTTOM]),
+
+  /**
+   * `true` if the menu alignment should be flipped.
+   */
+  flipped: PropTypes.bool,
+
+  /**
+   * Enable or disable focus trap behavior
+   */
+  focusTrap: PropTypes.bool,
+
+  /**
+   * The CSS class for the icon.
+   */
+  iconClass: PropTypes.string,
+
+  /**
+   * The icon description.
+   */
+  iconDescription: PropTypes.string.isRequired,
+
+  /**
+   * The element ID.
+   */
+  id: PropTypes.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.enabled('enable-v11-release') ? deprecate(PropTypes.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.bool,
+
+  /**
+   * The adjustment in position applied to the floating menu.
+   */
+  menuOffset: PropTypes.oneOfType([PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }), PropTypes.func]),
+
+  /**
+   * The adjustment in position applied to the floating menu.
+   */
+  menuOffsetFlip: PropTypes.oneOfType([PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }), PropTypes.func]),
+
+  /**
+   * The class to apply to the menu options
+   */
+  menuOptionsClass: PropTypes.string,
+
+  /**
+   * The event handler for the `click` event.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Function called when menu is closed
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * The event handler for the `focus` event.
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * The event handler for the `keydown` event.
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Function called when menu is opened
+   */
+  onOpen: PropTypes.func,
+
+  /**
+   * `true` if the menu should be open.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Function called to override icon rendering.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify a CSS selector that matches the DOM element that should
+   * be focused when the OverflowMenu opens
+   */
+  selectorPrimaryFocus: PropTypes.string,
+
+  /**
+   * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
+});
+
+_defineProperty(OverflowMenu, "contextType", PrefixContext);
+
+_defineProperty(OverflowMenu, "defaultProps", {
+  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? null : 'open and close list of options',
+  iconDescription: 'open and close list of options',
+  open: false,
+  direction: DIRECTION_BOTTOM,
+  flipped: false,
+  focusTrap: true,
+  renderIcon: 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]'
+});
+
+export { OverflowMenu, getMenuOffset };

package/es/components/OverflowMenu/index.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+import * as FeatureFlags from '@carbon/feature-flags';
+import { OverflowMenu as OverflowMenu$1 } from './OverflowMenu.js';
+import { createClassWrapper } from '../../internal/createClassWrapper.js';
+
+var OverflowMenu = FeatureFlags.enabled('enable-v11-release') ? createClassWrapper(OverflowMenu$1) : OverflowMenu$1;
+
+export { OverflowMenu as default };