@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/internal/FloatingMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, objectSpread2 as _objectSpread2, createClass as _createClass, typeof as _typeof } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import ReactDOM from 'react-dom';
@@ -46,10 +46,10 @@ import { PrefixContext } from './usePrefix.js';
  * @property {string} position Position style (static, absolute, relative...)
  */
 
-var DIRECTION_LEFT = 'left';
-var DIRECTION_TOP = 'top';
-var DIRECTION_RIGHT = 'right';
-var DIRECTION_BOTTOM = 'bottom';
+const DIRECTION_LEFT = 'left';
+const DIRECTION_TOP = 'top';
+const DIRECTION_RIGHT = 'right';
+const DIRECTION_BOTTOM = 'bottom';
 /**
  * @param {FloatingMenu~offset} [oldMenuOffset={}] The old value.
  * @param {FloatingMenu~offset} [menuOffset={}] The new value.
@@ -57,11 +57,11 @@ var DIRECTION_BOTTOM = 'bottom';
  * @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] : {};
+const hasChangeInOffset = function () {
+  let oldMenuOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let menuOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-  if (_typeof(oldMenuOffset) !== _typeof(menuOffset)) {
+  if (typeof oldMenuOffset !== typeof menuOffset) {
     return true;
   }
 
@@ -85,64 +85,56 @@ var hasChangeInOffset = function hasChangeInOffset() {
  */
 
 
-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 = {
+const getFloatingPosition = _ref => {
+  let {
+    menuSize,
+    refPosition = {},
+    offset = {},
+    direction = DIRECTION_BOTTOM,
+    scrollX: pageXOffset = 0,
+    scrollY: pageYOffset = 0,
+    container
+  } = _ref;
+  const {
+    left: refLeft = 0,
+    top: refTop = 0,
+    right: refRight = 0,
+    bottom: refBottom = 0
+  } = refPosition;
+  const scrollX = container.position !== 'static' ? 0 : pageXOffset;
+  const scrollY = container.position !== 'static' ? 0 : pageYOffset;
+  const 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 = {}, _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, function () {
-    return {
+  const {
+    width,
+    height
+  } = menuSize;
+  const {
+    top = 0,
+    left = 0
+  } = offset;
+  const refCenterHorizontal = (refLeft + refRight) / 2;
+  const refCenterVertical = (refTop + refBottom) / 2;
+  return {
+    [DIRECTION_LEFT]: () => ({
       left: refLeft - width + scrollX - left - relativeDiff.left,
       top: refCenterVertical - height / 2 + scrollY + top - 9 - relativeDiff.top
-    };
-  }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, function () {
-    return {
+    }),
+    [DIRECTION_TOP]: () => ({
       left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
       top: refTop - height + scrollY - top - relativeDiff.top
-    };
-  }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, function () {
-    return {
+    }),
+    [DIRECTION_RIGHT]: () => ({
       left: refRight + scrollX + left - relativeDiff.left,
       top: refCenterVertical - height / 2 + scrollY + top + 3 - relativeDiff.top
-    };
-  }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, function () {
-    return {
+    }),
+    [DIRECTION_BOTTOM]: () => ({
       left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
       top: refBottom + scrollY + top - relativeDiff.top
-    };
-  }), _DIRECTION_LEFT$DIREC)[direction]();
+    })
+  }[direction]();
 };
 /**
  * A menu that is detached from the triggering element.
@@ -150,25 +142,16 @@ var getFloatingPosition = function getFloatingPosition(_ref) {
  */
 
 
-var FloatingMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(FloatingMenu, _React$Component);
-
-  var _super = _createSuper(FloatingMenu);
-
-  function FloatingMenu() {
+class FloatingMenu extends React__default.Component {
+  constructor() {
     var _this;
 
-    _classCallCheck(this, FloatingMenu);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    super(...arguments);
+    _this = this;
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(this, "_placeInProgress", false);
 
-    _defineProperty(_assertThisInitialized(_this), "_placeInProgress", false);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _defineProperty(this, "state", {
       /**
        * The position of the menu, relative to the top-left corner of the viewport.
        * @type {FloatingMenu~offset}
@@ -176,49 +159,53 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       floatingPosition: undefined
     });
 
-    _defineProperty(_assertThisInitialized(_this), "_menuContainer", null);
+    _defineProperty(this, "_menuContainer", null);
 
-    _defineProperty(_assertThisInitialized(_this), "_menuBody", null);
+    _defineProperty(this, "_menuBody", null);
 
-    _defineProperty(_assertThisInitialized(_this), "startSentinel", /*#__PURE__*/React__default.createRef());
+    _defineProperty(this, "startSentinel", /*#__PURE__*/React__default.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "endSentinel", /*#__PURE__*/React__default.createRef());
+    _defineProperty(this, "endSentinel", /*#__PURE__*/React__default.createRef());
 
-    _defineProperty(_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;
+    _defineProperty(this, "_updateMenuSize", function () {
+      let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      let isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      const menuBody = _this._menuBody;
       process.env.NODE_ENV !== "production" ? 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;
+      const {
+        menuOffset: oldMenuOffset = {},
+        menuDirection: oldMenuDirection
+      } = prevProps;
+      const {
+        menuOffset = {},
+        menuDirection
+      } = _this.props;
 
       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
+        const {
+          flipped,
+          triggerRef,
+          updateOrientation
+        } = _this.props;
+        const {
+          current: triggerEl
+        } = triggerRef;
+        const menuSize = menuBody.getBoundingClientRect();
+        const refPosition = triggerEl && triggerEl.getBoundingClientRect();
+        const 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,
+            menuSize,
+            refPosition,
             direction: menuDirection,
-            offset: offset,
+            offset,
             scrollX: window.pageXOffset,
             scrollY: window.pageYOffset,
             container: {
@@ -234,10 +221,10 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
         if (menuSize.width > 0 && menuSize.height > 0 || !offset) {
           _this.setState({
             floatingPosition: getFloatingPosition({
-              menuSize: menuSize,
-              refPosition: refPosition,
+              menuSize,
+              refPosition,
               direction: menuDirection,
-              offset: offset,
+              offset,
               scrollX: window.pageXOffset,
               scrollY: window.pageYOffset,
               container: {
@@ -245,9 +232,9 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
                 position: getComputedStyle(_this.props.target()).position
               }
             })
-          }, function () {
+          }, () => {
             if (!isAdjustment) {
-              var newMenuSize = menuBody.getBoundingClientRect();
+              const newMenuSize = menuBody.getBoundingClientRect();
 
               if (newMenuSize !== menuSize) {
                 _this._updateMenuSize(_this.props, true);
@@ -258,11 +245,11 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "_focusMenuContent", function (menuBody) {
-      var primaryFocusNode = menuBody.querySelector(_this.props.selectorPrimaryFocus || null);
-      var tabbableNode = menuBody.querySelector(selectorTabbable);
-      var focusableNode = menuBody.querySelector(selectorFocusable);
-      var focusTarget = primaryFocusNode || // User defined focusable node
+    _defineProperty(this, "_focusMenuContent", menuBody => {
+      const primaryFocusNode = menuBody.querySelector(this.props.selectorPrimaryFocus || null);
+      const tabbableNode = menuBody.querySelector(selectorTabbable);
+      const focusableNode = menuBody.querySelector(selectorFocusable);
+      const focusTarget = primaryFocusNode || // User defined focusable node
       tabbableNode || // First sequentially focusable node
       focusableNode || // First programmatic focusable node
       menuBody;
@@ -273,133 +260,139 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "_menuRef", function (menuBody) {
-      var menuRef = _this.props.menuRef;
-      _this._placeInProgress = !!menuBody;
-      menuRef && menuRef(_this._menuBody = menuBody);
+    _defineProperty(this, "_menuRef", menuBody => {
+      const {
+        menuRef
+      } = this.props;
+      this._placeInProgress = !!menuBody;
+      menuRef && menuRef(this._menuBody = menuBody);
 
       if (menuBody) {
-        _this._updateMenuSize();
+        this._updateMenuSize();
       }
     });
 
-    _defineProperty(_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)
+    _defineProperty(this, "_getChildrenWithProps", () => {
+      const {
+        styles,
+        children
+      } = this.props;
+      const {
+        floatingPosition: pos
+      } = this.state; // 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"),
+      const positioningStyle = pos ? {
+        left: `${pos.left}px`,
+        top: `${pos.top}px`,
         right: 'auto'
       } : {
         visibility: 'hidden',
         top: '0px'
       };
       return /*#__PURE__*/React__default.cloneElement(children, {
-        ref: _this._menuRef,
-        style: _objectSpread2(_objectSpread2(_objectSpread2({}, styles), positioningStyle), {}, {
+        ref: this._menuRef,
+        style: { ...styles,
+          ...positioningStyle,
           position: 'absolute',
           opacity: 1
-        })
+        }
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (_ref2) {
-      var oldActiveNode = _ref2.target,
-          currentActiveNode = _ref2.relatedTarget;
+    _defineProperty(this, "handleBlur", _ref2 => {
+      let {
+        target: oldActiveNode,
+        relatedTarget: currentActiveNode
+      } = _ref2;
 
       if (currentActiveNode && oldActiveNode) {
-        var startSentinelNode = _this.startSentinel.current;
-        var endSentinelNode = _this.endSentinel.current;
+        const {
+          current: startSentinelNode
+        } = this.startSentinel;
+        const {
+          current: endSentinelNode
+        } = this.endSentinel;
         wrapFocus({
-          bodyNode: _this._menuBody,
-          startSentinelNode: startSentinelNode,
-          endSentinelNode: endSentinelNode,
-          currentActiveNode: currentActiveNode,
-          oldActiveNode: oldActiveNode
+          bodyNode: this._menuBody,
+          startSentinelNode,
+          endSentinelNode,
+          currentActiveNode,
+          oldActiveNode
         });
       }
     });
+  }
 
-    return _this;
+  componentWillUnmount() {
+    this.hResize.release();
   }
 
-  _createClass(FloatingMenu, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.hResize.release();
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+  componentDidMount() {
+    this.hResize = OptimizedResize.add(() => {
+      this._updateMenuSize();
+    });
+  }
+  /**
+   * Set focus on floating menu content after menu placement.
+   * @param {Element} menuBody The DOM element of the menu body.
+   * @private
+   */
 
-      this.hResize = OptimizedResize.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;
-        }
+  componentDidUpdate(prevProps) {
+    this._updateMenuSize(prevProps);
+
+    const {
+      onPlace
+    } = this.props;
+
+    if (this._placeInProgress && this.state.floatingPosition) {
+      if (this._menuBody && !this._menuBody.contains(document.activeElement)) {
+        this._focusMenuContent(this._menuBody);
       }
-    }
-    /**
-     * 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.createPortal( /*#__PURE__*/React__default.createElement("div", {
-          onBlur: focusTrap ? this.handleBlur : null
-        }, /*#__PURE__*/React__default.createElement("span", {
-          ref: this.startSentinel,
-          tabIndex: "0",
-          role: "link",
-          className: "".concat(prefix, "--visually-hidden")
-        }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default.createElement("span", {
-          ref: this.endSentinel,
-          tabIndex: "0",
-          role: "link",
-          className: "".concat(prefix, "--visually-hidden")
-        }, "Focus sentinel")), !target ? document.body : target());
+
+      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.
+   */
 
-      return null;
+
+  render() {
+    const {
+      context: prefix
+    } = this;
+
+    if (typeof document !== 'undefined') {
+      const {
+        focusTrap,
+        target
+      } = this.props;
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement("div", {
+        onBlur: focusTrap ? this.handleBlur : null
+      }, /*#__PURE__*/React__default.createElement("span", {
+        ref: this.startSentinel,
+        tabIndex: "0",
+        role: "link",
+        className: `${prefix}--visually-hidden`
+      }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default.createElement("span", {
+        ref: this.endSentinel,
+        tabIndex: "0",
+        role: "link",
+        className: `${prefix}--visually-hidden`
+      }, "Focus sentinel")), !target ? document.body : target());
     }
-  }]);
 
-  return FloatingMenu;
-}(React__default.Component);
+    return null;
+  }
+
+}
 
 _defineProperty(FloatingMenu, "contextType", PrefixContext);
 

package/es/internal/OptimizedResize.js

@@ -9,12 +9,12 @@ import window from 'window-or-global';
 
 // mdn resize function
 
-var OptimizedResize = function optimizedResize() {
-  var callbacks = [];
-  var running = false; // run the actual callbacks
+const OptimizedResize = function optimizedResize() {
+  const callbacks = [];
+  let running = false; // run the actual callbacks
 
   function runCallbacks() {
-    callbacks.forEach(function (callback) {
+    callbacks.forEach(callback => {
       callback();
     });
     running = false;
@@ -31,7 +31,7 @@ var OptimizedResize = function optimizedResize() {
 
   function addCallback(callback) {
     if (callback) {
-      var index = callbacks.indexOf(callback);
+      const index = callbacks.indexOf(callback);
 
       if (index < 0) {
         callbacks.push(callback);
@@ -41,20 +41,21 @@ var OptimizedResize = function optimizedResize() {
 
   return {
     // public method to add additional callback
-    add: function add(callback) {
+    add: callback => {
       if (!callbacks.length) {
         window.addEventListener('resize', resize);
       }
 
       addCallback(callback);
       return {
-        release: function release() {
-          var index = callbacks.indexOf(callback);
+        release() {
+          const index = callbacks.indexOf(callback);
 
           if (index >= 0) {
             callbacks.splice(index, 1);
           }
         }
+
       };
     }
   };