@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/internal/FloatingMenu.js

@@ -0,0 +1,498 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var window = require('window-or-global');
+var OptimizedResize = require('./OptimizedResize.js');
+var navigation = require('./keyboard/navigation.js');
+var warning = require('./warning.js');
+var wrapFocus = require('./wrapFocus.js');
+var usePrefix = require('./usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
+
+/**
+ * The structure for the position of floating menu.
+ * @typedef {object} FloatingMenu~position
+ * @property {number} left The left position.
+ * @property {number} top The top position.
+ * @property {number} right The right position.
+ * @property {number} bottom The bottom position.
+ */
+
+/**
+ * The structure for the size of floating menu.
+ * @typedef {object} FloatingMenu~size
+ * @property {number} width The width.
+ * @property {number} height The height.
+ */
+
+/**
+ * The structure for the position offset of floating menu.
+ * @typedef {object} FloatingMenu~offset
+ * @property {number} top The top position.
+ * @property {number} left The left position.
+ */
+
+/**
+ * The structure for the target container.
+ * @typedef {object} FloatingMenu~container
+ * @property {DOMRect} rect Return of element.getBoundingClientRect()
+ * @property {string} position Position style (static, absolute, relative...)
+ */
+
+var DIRECTION_LEFT = 'left';
+var DIRECTION_TOP = 'top';
+var DIRECTION_RIGHT = 'right';
+var DIRECTION_BOTTOM = 'bottom';
+/**
+ * @param {FloatingMenu~offset} [oldMenuOffset={}] The old value.
+ * @param {FloatingMenu~offset} [menuOffset={}] The new value.
+ * @returns `true` if the parent component wants to change in the adjustment of the floating menu position.
+ * @private
+ */
+
+var hasChangeInOffset = function hasChangeInOffset() {
+  var oldMenuOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var menuOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (_rollupPluginBabelHelpers["typeof"](oldMenuOffset) !== _rollupPluginBabelHelpers["typeof"](menuOffset)) {
+    return true;
+  }
+
+  if (Object(menuOffset) === menuOffset && typeof menuOffset !== 'function') {
+    return oldMenuOffset.top !== menuOffset.top || oldMenuOffset.left !== menuOffset.left;
+  }
+
+  return oldMenuOffset !== menuOffset;
+};
+/**
+ * @param {object} params The parameters.
+ * @param {FloatingMenu~size} params.menuSize The size of the menu.
+ * @param {FloatingMenu~position} params.refPosition The position of the triggering element.
+ * @param {FloatingMenu~offset} [params.offset={ left: 0, top: 0 }] The position offset of the menu.
+ * @param {string} [params.direction=bottom] The menu direction.
+ * @param {number} [params.scrollX=0] The scroll position of the viewport.
+ * @param {number} [params.scrollY=0] The scroll position of the viewport.
+ * @param {FloatingMenu~container} [params.container] The size and position type of target element.
+ * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
+ * @private
+ */
+
+
+var getFloatingPosition = function getFloatingPosition(_ref) {
+  var _DIRECTION_LEFT$DIREC;
+
+  var menuSize = _ref.menuSize,
+      _ref$refPosition = _ref.refPosition,
+      refPosition = _ref$refPosition === void 0 ? {} : _ref$refPosition,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? {} : _ref$offset,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? DIRECTION_BOTTOM : _ref$direction,
+      _ref$scrollX = _ref.scrollX,
+      pageXOffset = _ref$scrollX === void 0 ? 0 : _ref$scrollX,
+      _ref$scrollY = _ref.scrollY,
+      pageYOffset = _ref$scrollY === void 0 ? 0 : _ref$scrollY,
+      container = _ref.container;
+  var _refPosition$left = refPosition.left,
+      refLeft = _refPosition$left === void 0 ? 0 : _refPosition$left,
+      _refPosition$top = refPosition.top,
+      refTop = _refPosition$top === void 0 ? 0 : _refPosition$top,
+      _refPosition$right = refPosition.right,
+      refRight = _refPosition$right === void 0 ? 0 : _refPosition$right,
+      _refPosition$bottom = refPosition.bottom,
+      refBottom = _refPosition$bottom === void 0 ? 0 : _refPosition$bottom;
+  var scrollX = container.position !== 'static' ? 0 : pageXOffset;
+  var scrollY = container.position !== 'static' ? 0 : pageYOffset;
+  var relativeDiff = {
+    top: container.position !== 'static' ? container.rect.top : 0,
+    left: container.position !== 'static' ? container.rect.left : 0
+  };
+  var width = menuSize.width,
+      height = menuSize.height;
+  var _offset$top = offset.top,
+      top = _offset$top === void 0 ? 0 : _offset$top,
+      _offset$left = offset.left,
+      left = _offset$left === void 0 ? 0 : _offset$left;
+  var refCenterHorizontal = (refLeft + refRight) / 2;
+  var refCenterVertical = (refTop + refBottom) / 2;
+  return (_DIRECTION_LEFT$DIREC = {}, _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, function () {
+    return {
+      left: refLeft - width + scrollX - left - relativeDiff.left,
+      top: refCenterVertical - height / 2 + scrollY + top - 9 - relativeDiff.top
+    };
+  }), _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, function () {
+    return {
+      left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
+      top: refTop - height + scrollY - top - relativeDiff.top
+    };
+  }), _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, function () {
+    return {
+      left: refRight + scrollX + left - relativeDiff.left,
+      top: refCenterVertical - height / 2 + scrollY + top + 3 - relativeDiff.top
+    };
+  }), _rollupPluginBabelHelpers.defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, function () {
+    return {
+      left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
+      top: refBottom + scrollY + top - relativeDiff.top
+    };
+  }), _DIRECTION_LEFT$DIREC)[direction]();
+};
+/**
+ * A menu that is detached from the triggering element.
+ * Useful when the container of the triggering element cannot have `overflow:visible` style, etc.
+ */
+
+
+var FloatingMenu = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(FloatingMenu, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(FloatingMenu);
+
+  function FloatingMenu() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, FloatingMenu);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_placeInProgress", false);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+      /**
+       * The position of the menu, relative to the top-left corner of the viewport.
+       * @type {FloatingMenu~offset}
+       */
+      floatingPosition: undefined
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_menuContainer", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_menuBody", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "startSentinel", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "endSentinel", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_updateMenuSize", function () {
+      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var menuBody = _this._menuBody;
+      process.env.NODE_ENV !== "production" ? warning.warning(menuBody, 'The DOM node for menu body for calculating its position is not available. Skipping...') : void 0;
+
+      if (!menuBody) {
+        return;
+      }
+
+      var _prevProps$menuOffset = prevProps.menuOffset,
+          oldMenuOffset = _prevProps$menuOffset === void 0 ? {} : _prevProps$menuOffset,
+          oldMenuDirection = prevProps.menuDirection;
+      var _this$props = _this.props,
+          _this$props$menuOffse = _this$props.menuOffset,
+          menuOffset = _this$props$menuOffse === void 0 ? {} : _this$props$menuOffse,
+          menuDirection = _this$props.menuDirection;
+
+      if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
+        var _this$props2 = _this.props,
+            flipped = _this$props2.flipped,
+            triggerRef = _this$props2.triggerRef,
+            updateOrientation = _this$props2.updateOrientation;
+        var triggerEl = triggerRef.current;
+        var menuSize = menuBody.getBoundingClientRect();
+        var refPosition = triggerEl && triggerEl.getBoundingClientRect();
+        var offset = typeof menuOffset !== 'function' ? menuOffset : menuOffset(menuBody, menuDirection, triggerEl, flipped); // Optional function to allow parent component to check
+        // if the orientation needs to be changed based on params
+
+        if (updateOrientation) {
+          updateOrientation({
+            menuSize: menuSize,
+            refPosition: refPosition,
+            direction: menuDirection,
+            offset: offset,
+            scrollX: window__default["default"].pageXOffset,
+            scrollY: window__default["default"].pageYOffset,
+            container: {
+              rect: _this.props.target().getBoundingClientRect(),
+              position: getComputedStyle(_this.props.target()).position
+            }
+          });
+        } // Skips if either in the following condition:
+        // a) Menu body has `display:none`
+        // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
+
+
+        if (menuSize.width > 0 && menuSize.height > 0 || !offset) {
+          _this.setState({
+            floatingPosition: getFloatingPosition({
+              menuSize: menuSize,
+              refPosition: refPosition,
+              direction: menuDirection,
+              offset: offset,
+              scrollX: window__default["default"].pageXOffset,
+              scrollY: window__default["default"].pageYOffset,
+              container: {
+                rect: _this.props.target().getBoundingClientRect(),
+                position: getComputedStyle(_this.props.target()).position
+              }
+            })
+          }, function () {
+            if (!isAdjustment) {
+              var newMenuSize = menuBody.getBoundingClientRect();
+
+              if (newMenuSize !== menuSize) {
+                _this._updateMenuSize(_this.props, true);
+              }
+            }
+          });
+        }
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_focusMenuContent", function (menuBody) {
+      var primaryFocusNode = menuBody.querySelector(_this.props.selectorPrimaryFocus || null);
+      var tabbableNode = menuBody.querySelector(navigation.selectorTabbable);
+      var focusableNode = menuBody.querySelector(navigation.selectorFocusable);
+      var focusTarget = primaryFocusNode || // User defined focusable node
+      tabbableNode || // First sequentially focusable node
+      focusableNode || // First programmatic focusable node
+      menuBody;
+
+      if (_this.props.focusTrap) {
+        focusTarget.focus();
+      }
+
+      if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
+        process.env.NODE_ENV !== "production" ? warning.warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_menuRef", function (menuBody) {
+      var menuRef = _this.props.menuRef;
+      _this._placeInProgress = !!menuBody;
+      menuRef && menuRef(_this._menuBody = menuBody);
+
+      if (menuBody) {
+        _this._updateMenuSize();
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_getChildrenWithProps", function () {
+      var _this$props3 = _this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
+      var pos = _this.state.floatingPosition; // If no pos available, we need to hide the element (offscreen to the left)
+      // This is done so we can measure the content before positioning it correctly.
+
+      var positioningStyle = pos ? {
+        left: "".concat(pos.left, "px"),
+        top: "".concat(pos.top, "px"),
+        right: 'auto'
+      } : {
+        visibility: 'hidden',
+        top: '0px'
+      };
+      return /*#__PURE__*/React__default["default"].cloneElement(children, {
+        ref: _this._menuRef,
+        style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, styles), positioningStyle), {}, {
+          position: 'absolute',
+          opacity: 1
+        })
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleBlur", function (_ref2) {
+      var oldActiveNode = _ref2.target,
+          currentActiveNode = _ref2.relatedTarget;
+
+      if (currentActiveNode && oldActiveNode) {
+        var startSentinelNode = _this.startSentinel.current;
+        var endSentinelNode = _this.endSentinel.current;
+        wrapFocus["default"]({
+          bodyNode: _this._menuBody,
+          startSentinelNode: startSentinelNode,
+          endSentinelNode: endSentinelNode,
+          currentActiveNode: currentActiveNode,
+          oldActiveNode: oldActiveNode
+        });
+      }
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(FloatingMenu, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.hResize.release();
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.hResize = OptimizedResize["default"].add(function () {
+        _this2._updateMenuSize();
+      });
+    }
+    /**
+     * Set focus on floating menu content after menu placement.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      this._updateMenuSize(prevProps);
+
+      var onPlace = this.props.onPlace;
+
+      if (this._placeInProgress && this.state.floatingPosition) {
+        if (this._menuBody && !this._menuBody.contains(document.activeElement)) {
+          this._focusMenuContent(this._menuBody);
+        }
+
+        if (typeof onPlace === 'function') {
+          onPlace(this._menuBody);
+          this._placeInProgress = false;
+        }
+      }
+    }
+    /**
+     * A callback for called when menu body is mounted or unmounted.
+     * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var prefix = this.context;
+
+      if (typeof document !== 'undefined') {
+        var _this$props4 = this.props,
+            focusTrap = _this$props4.focusTrap,
+            target = _this$props4.target;
+        return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
+          onBlur: focusTrap ? this.handleBlur : null
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          ref: this.startSentinel,
+          tabIndex: "0",
+          role: "link",
+          className: "".concat(prefix, "--visually-hidden")
+        }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default["default"].createElement("span", {
+          ref: this.endSentinel,
+          tabIndex: "0",
+          role: "link",
+          className: "".concat(prefix, "--visually-hidden")
+        }, "Focus sentinel")), !target ? document.body : target());
+      }
+
+      return null;
+    }
+  }]);
+
+  return FloatingMenu;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(FloatingMenu, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(FloatingMenu, "propTypes", {
+  /**
+   * Contents to put into the floating menu.
+   */
+  children: PropTypes__default["default"].object,
+
+  /**
+   * `true` if the menu alignment should be flipped.
+   */
+  flipped: PropTypes__default["default"].bool,
+
+  /**
+   * Enable or disable focus trap behavior
+   */
+  focusTrap: PropTypes__default["default"].bool,
+
+  /**
+   * Where to put the tooltip, relative to the trigger button.
+   */
+  menuDirection: PropTypes__default["default"].oneOf([DIRECTION_LEFT, DIRECTION_TOP, DIRECTION_RIGHT, DIRECTION_BOTTOM]),
+
+  /**
+   * The adjustment of the floating menu position, considering the position of dropdown arrow, etc.
+   */
+  menuOffset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+    top: PropTypes__default["default"].number,
+    left: PropTypes__default["default"].number
+  }), PropTypes__default["default"].func]),
+
+  /**
+   * The callback called when the menu body has been mounted to/will be unmounted from the DOM.
+   */
+  menuRef: PropTypes__default["default"].func,
+
+  /**
+   * The callback called when the menu body has been mounted and positioned.
+   */
+  onPlace: PropTypes__default["default"].func,
+
+  /**
+   * Specify a CSS selector that matches the DOM element that should
+   * be focused when the Modal opens
+   */
+  selectorPrimaryFocus: PropTypes__default["default"].string,
+
+  /**
+   * The additional styles to put to the floating menu.
+   */
+  styles: PropTypes__default["default"].object,
+
+  /**
+   * The query selector indicating where the floating menu body should be placed.
+   */
+  target: PropTypes__default["default"].func,
+
+  /**
+   * The element ref of the tooltip's trigger button.
+   */
+  triggerRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
+  })]),
+
+  /**
+   * Optional function to change orientation of tooltip based on parent
+   */
+  updateOrientation: PropTypes__default["default"].func
+});
+
+_rollupPluginBabelHelpers.defineProperty(FloatingMenu, "defaultProps", {
+  menuOffset: {},
+  menuDirection: DIRECTION_BOTTOM,
+  updateOrientation: null
+});
+
+exports.DIRECTION_BOTTOM = DIRECTION_BOTTOM;
+exports.DIRECTION_LEFT = DIRECTION_LEFT;
+exports.DIRECTION_RIGHT = DIRECTION_RIGHT;
+exports.DIRECTION_TOP = DIRECTION_TOP;
+exports["default"] = FloatingMenu;

package/lib/internal/OptimizedResize.js

@@ -0,0 +1,73 @@
+/**
+ * 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 window = require('window-or-global');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
+
+// mdn resize function
+
+var OptimizedResize = function optimizedResize() {
+  var callbacks = [];
+  var running = false; // run the actual callbacks
+
+  function runCallbacks() {
+    callbacks.forEach(function (callback) {
+      callback();
+    });
+    running = false;
+  } // fired on resize event
+
+
+  function resize() {
+    if (!running) {
+      running = true;
+      window__default["default"].requestAnimationFrame(runCallbacks);
+    }
+  } // adds callback to loop
+
+
+  function addCallback(callback) {
+    if (callback) {
+      var index = callbacks.indexOf(callback);
+
+      if (index < 0) {
+        callbacks.push(callback);
+      }
+    }
+  }
+
+  return {
+    // public method to add additional callback
+    add: function add(callback) {
+      if (!callbacks.length) {
+        window__default["default"].addEventListener('resize', resize);
+      }
+
+      addCallback(callback);
+      return {
+        release: function release() {
+          var index = callbacks.indexOf(callback);
+
+          if (index >= 0) {
+            callbacks.splice(index, 1);
+          }
+        }
+      };
+    }
+  };
+}();
+
+var OptimizedResize$1 = OptimizedResize;
+
+exports["default"] = OptimizedResize$1;