@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/internal/FloatingMenu.js

@@ -61,27 +61,25 @@ 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.
  * @returns `true` if the parent component wants to change in the adjustment of the floating menu position.
  * @private
  */
-
 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) {
     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.
@@ -94,8 +92,6 @@ const hasChangeInOffset = function () {
  * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
  * @private
  */
-
-
 const getFloatingPosition = _ref => {
   let {
     menuSize,
@@ -147,21 +143,17 @@ const getFloatingPosition = _ref => {
     })
   }[direction]();
 };
+
 /**
  * A menu that is detached from the triggering element.
  * Useful when the container of the triggering element cannot have `overflow:visible` style, etc.
  */
-
-
 class FloatingMenu extends React__default["default"].Component {
   constructor() {
     var _this;
-
     super(...arguments);
     _this = this;
-
     _rollupPluginBabelHelpers.defineProperty(this, "_placeInProgress", false);
-
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       /**
        * The position of the menu, relative to the top-left corner of the viewport.
@@ -169,25 +161,18 @@ class FloatingMenu extends React__default["default"].Component {
        */
       floatingPosition: undefined
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "_menuContainer", null);
-
     _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
-
     _rollupPluginBabelHelpers.defineProperty(this, "startSentinel", /*#__PURE__*/React__default["default"].createRef());
-
     _rollupPluginBabelHelpers.defineProperty(this, "endSentinel", /*#__PURE__*/React__default["default"].createRef());
-
     _rollupPluginBabelHelpers.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.warning(menuBody, 'The DOM node for menu body for calculating its position is not available. Skipping...') : void 0;
-
       if (!menuBody) {
         return;
       }
-
       const {
         menuOffset: oldMenuOffset = {},
         menuDirection: oldMenuDirection
@@ -196,7 +181,6 @@ class FloatingMenu extends React__default["default"].Component {
         menuOffset = {},
         menuDirection
       } = _this.props;
-
       if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
         const {
           flipped,
@@ -208,9 +192,10 @@ class FloatingMenu extends React__default["default"].Component {
         } = 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
+        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,
@@ -224,11 +209,10 @@ class FloatingMenu extends React__default["default"].Component {
               position: getComputedStyle(_this.props.target()).position
             }
           });
-        } // Skips if either in the following condition:
+        }
+        // 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({
@@ -246,7 +230,6 @@ class FloatingMenu extends React__default["default"].Component {
           }, () => {
             if (!isAdjustment) {
               const newMenuSize = menuBody.getBoundingClientRect();
-
               if (newMenuSize !== menuSize) {
                 _this._updateMenuSize(_this.props, true);
               }
@@ -255,34 +238,32 @@ class FloatingMenu extends React__default["default"].Component {
         }
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "_focusMenuContent", menuBody => {
       const primaryFocusNode = menuBody.querySelector(this.props.selectorPrimaryFocus || null);
       const tabbableNode = menuBody.querySelector(navigation.selectorTabbable);
       const focusableNode = menuBody.querySelector(navigation.selectorFocusable);
-      const focusTarget = primaryFocusNode || // User defined focusable node
-      tabbableNode || // First sequentially focusable node
-      focusableNode || // First programmatic focusable node
+      const focusTarget = primaryFocusNode ||
+      // User defined focusable node
+      tabbableNode ||
+      // First sequentially focusable node
+      focusableNode ||
+      // First programmatic focusable node
       menuBody;
       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(this, "_menuRef", menuBody => {
       const {
         menuRef
       } = this.props;
       this._placeInProgress = !!menuBody;
       menuRef && menuRef(this._menuBody = menuBody);
-
       if (menuBody) {
         this._updateMenuSize();
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "_getChildrenWithProps", () => {
       const {
         styles,
@@ -290,9 +271,9 @@ class FloatingMenu extends React__default["default"].Component {
       } = this.props;
       const {
         floatingPosition: pos
-      } = this.state; // If no pos available, we need to hide the element (offscreen to the left)
+      } = 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.
-
       const positioningStyle = pos ? {
         left: `${pos.left}px`,
         top: `${pos.top}px`,
@@ -303,20 +284,19 @@ class FloatingMenu extends React__default["default"].Component {
       };
       return /*#__PURE__*/React__default["default"].cloneElement(children, {
         ref: this._menuRef,
-        style: { ...styles,
+        style: {
+          ...styles,
           ...positioningStyle,
           position: 'absolute',
           opacity: 1
         }
       });
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleBlur", _ref2 => {
       let {
         target: oldActiveNode,
         relatedTarget: currentActiveNode
       } = _ref2;
-
       if (currentActiveNode && oldActiveNode) {
         const {
           current: startSentinelNode
@@ -333,12 +313,36 @@ class FloatingMenu extends React__default["default"].Component {
         });
       }
     });
-  }
-
+  } // `true` if the menu body is mounted and calculation of the position is in progress.
+  /**
+   * The cached reference to the menu container.
+   * Only used if React portal API is not available.
+   * @type {Element}
+   * @private
+   */
+  /**
+   * The cached reference to the menu body.
+   * The reference is set via callback ref instead of object ref,
+   * in order to hook the event when the element ref gets available,
+   * which can be at a different timing from `cDM()`, presumably with SSR scenario.
+   * @type {Element}
+   * @private
+   */
+  /**
+   * Focus sentinel refs for focus trap behavior
+   */
+  /**
+   * Calculates the position in the viewport of floating menu,
+   * once this component is mounted or updated upon change in the following props:
+   *
+   * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
+   * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
+   *
+   * @private
+   */
   componentWillUnmount() {
     this.hResize.release();
   }
-
   componentDidMount() {
     this.hResize = OptimizedResize["default"].add(() => {
       this._updateMenuSize();
@@ -350,36 +354,43 @@ class FloatingMenu extends React__default["default"].Component {
    * @private
    */
 
-
   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);
       }
-
       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.
    */
 
+  /**
+   * @returns The child nodes, with styles containing the floating menu position.
+   * @private
+   */
+
+  /**
+   * Blur handler for when focus wrap behavior is enabled
+   * @param {Event} event
+   * @param {Element} event.target previously focused node
+   * @param {Element} event.relatedTarget current focused node
+   */
 
   render() {
     const {
       context: prefix
     } = this;
-
     if (typeof document !== 'undefined') {
       const {
         focusTrap,
@@ -399,35 +410,27 @@ class FloatingMenu extends React__default["default"].Component {
         className: `${prefix}--visually-hidden`
       }, "Focus sentinel")), !target ? document.body : target());
     }
-
     return null;
   }
-
 }
-
 _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.
    */
@@ -435,52 +438,43 @@ _rollupPluginBabelHelpers.defineProperty(FloatingMenu, "propTypes", {
     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
 });
-
 var FloatingMenu$1 = FloatingMenu;
 
 exports.DIRECTION_BOTTOM = DIRECTION_BOTTOM;

package/lib/internal/OptimizedResize.js

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

package/lib/internal/Selection.js

@@ -28,7 +28,6 @@ function callOnChangeHandler(_ref) {
     onChangeHandlerUncontrolled,
     selectedItems
   } = _ref;
-
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
       onChangeHandlerControlled({
@@ -39,7 +38,6 @@ function callOnChangeHandler(_ref) {
     onChangeHandlerUncontrolled(selectedItems);
   }
 }
-
 function useSelection(_ref2) {
   let {
     disabled,
@@ -56,7 +54,6 @@ function useSelection(_ref2) {
     if (disabled) {
       return;
     }
-
     let selectedIndex;
     selectedItems.forEach((selectedItem, index) => {
       if (isEqual__default["default"](selectedItem, item)) {
@@ -64,7 +61,6 @@ function useSelection(_ref2) {
       }
     });
     let newSelectedItems;
-
     if (selectedIndex === undefined) {
       newSelectedItems = selectedItems.concat(item);
       callOnChangeHandler({
@@ -76,7 +72,6 @@ function useSelection(_ref2) {
       });
       return;
     }
-
     newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
     callOnChangeHandler({
       isControlled,
@@ -90,7 +85,6 @@ function useSelection(_ref2) {
     if (disabled) {
       return;
     }
-
     callOnChangeHandler({
       isControlled,
       isMounted: isMounted.current,
@@ -124,44 +118,36 @@ function useSelection(_ref2) {
 class Selection extends React__default["default"].Component {
   constructor(props) {
     super(props);
-
     _rollupPluginBabelHelpers.defineProperty(this, "internalSetState", (stateToSet, callback) => this.setState(stateToSet, () => {
       if (callback) {
         callback();
       }
-
       if (this.props.onChange) {
         this.props.onChange(this.state);
       }
     }));
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleClearSelection", () => {
       if (this.props.disabled) {
         return;
       }
-
       this.internalSetState({
         selectedItems: []
       });
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleSelectItem", item => {
       this.internalSetState(state => ({
         selectedItems: state.selectedItems.concat(item)
       }));
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleRemoveItem", index => {
       this.internalSetState(state => ({
         selectedItems: removeAtIndex(state.selectedItems, index)
       }));
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnItemChange", item => {
       if (this.props.disabled) {
         return;
       }
-
       const {
         selectedItems
       } = this.state;
@@ -171,20 +157,16 @@ class Selection extends React__default["default"].Component {
           selectedIndex = index;
         }
       });
-
       if (selectedIndex === undefined) {
         this.handleSelectItem(item);
         return;
       }
-
       this.handleRemoveItem(selectedIndex);
     });
-
     this.state = {
       selectedItems: props.initialSelectedItems
     };
   }
-
   render() {
     const {
       children,
@@ -198,21 +180,18 @@ class Selection extends React__default["default"].Component {
       onItemChange: this.handleOnItemChange,
       clearSelection: this.handleClearSelection
     };
-
     if (render !== undefined) {
       return render(renderProps);
     }
-
     if (children !== undefined) {
       return children(renderProps);
     }
-
     return null;
   }
+}
 
-} // Generic utility for safely removing an element at a given index from an
+// Generic utility for safely removing an element at a given index from an
 // array.
-
 _rollupPluginBabelHelpers.defineProperty(Selection, "propTypes", {
   children: PropTypes__default["default"].func,
   disabled: PropTypes__default["default"].bool,
@@ -220,11 +199,9 @@ _rollupPluginBabelHelpers.defineProperty(Selection, "propTypes", {
   onChange: PropTypes__default["default"].func,
   render: PropTypes__default["default"].func
 });
-
 _rollupPluginBabelHelpers.defineProperty(Selection, "defaultProps", {
   initialSelectedItems: []
 });
-
 const removeAtIndex = (array, index) => {
   const result = array.slice();
   result.splice(index, 1);

package/lib/internal/createClassWrapper.js

@@ -22,12 +22,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @param {ReactNode} Component
  * @returns {ReactNode}
  */
-
 function createClassWrapper(Component) {
   function ClassWrapper(props) {
     return /*#__PURE__*/React__default["default"].createElement(Component, props);
   }
-
   const name = Component.displayName || Component.name;
   ClassWrapper.displayName = `ClassWrapper(${name})`;
   return ClassWrapper;

package/lib/internal/deprecateFieldOnObject.js

@@ -12,20 +12,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var warning = require('./warning.js');
 
 const didWarnAboutDeprecation = {};
-
 function deprecateFieldOnObject(object, field, Component, message) {
   Object.defineProperty(object, field, {
     enumerable: true,
-
     get() {
       if (!didWarnAboutDeprecation[field]) {
         process.env.NODE_ENV !== "production" ? warning.warning(false, message || `The ${field} field has been deprecated on the ${object.displayName} object. ` + `Please import and use ${Component.displayName || Component.name || 'the field'} directly.`) : void 0;
         didWarnAboutDeprecation[field] = true;
       }
-
       return Component;
     }
-
   });
 }
 

package/lib/internal/focus/index.js

@@ -11,7 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function focus(elementOrRef) {
   const element = elementOrRef.current || elementOrRef;
-
   if (element && element.focus && document.activeElement !== element) {
     element.focus();
   }

package/lib/internal/keyboard/keys.js

@@ -22,7 +22,8 @@ const Enter = {
   code: 'Enter'
 };
 const Escape = {
-  key: ['Escape', // IE11 Escape
+  key: ['Escape',
+  // IE11 Escape
   'Esc'],
   which: 27,
   keyCode: 27,

package/lib/internal/keyboard/match.js

@@ -40,9 +40,9 @@ function matches(event, keysToMatch) {
       return true;
     }
   }
-
   return false;
 }
+
 /**
  * Check to see if the given key matches the corresponding keyboard event. Also
  * supports passing in the value directly if you can't used the given event.
@@ -61,7 +61,6 @@ function matches(event, keysToMatch) {
  * @param {Key} key
  * @returns {boolean}
  */
-
 function match(eventOrCode) {
   let {
     key,
@@ -69,19 +68,15 @@ function match(eventOrCode) {
     keyCode,
     code
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
   if (typeof eventOrCode === 'string') {
     return eventOrCode === key;
   }
-
   if (typeof eventOrCode === 'number') {
     return eventOrCode === which || eventOrCode === keyCode;
   }
-
   if (eventOrCode.key && Array.isArray(key)) {
     return key.indexOf(eventOrCode.key) !== -1;
   }
-
   return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
 }