@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -21,6 +21,7 @@ var mergeRefs = require('../../tools/mergeRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../IconButton/index.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -31,59 +32,54 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+const getInstanceId = setupGetInstanceId["default"]();
 const on = function (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(...args);
   return {
     release() {
       element.removeEventListener(...args);
       return null;
     }
-
   };
 };
+
 /**
  * The CSS property names of the arrow keyed by the floating menu direction.
  * @type {Object<string, string>}
  */
-
-
 const triggerButtonPositionProps = {
   [FloatingMenu.DIRECTION_TOP]: 'bottom',
   [FloatingMenu.DIRECTION_BOTTOM]: 'top'
 };
+
 /**
  * Determines how the position of arrow should affect the floating menu position.
  * @type {Object<string, number>}
  */
-
 const triggerButtonPositionFactors = {
   [FloatingMenu.DIRECTION_TOP]: -2,
   [FloatingMenu.DIRECTION_BOTTOM]: -1
 };
+
 /**
  * @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
  */
-
 const getMenuOffset = (menuBody, direction, trigger, flip) => {
   const triggerButtonPositionProp = triggerButtonPositionProps[direction];
   const 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;
   }
-
   const {
     offsetWidth: menuWidth,
     offsetHeight: menuHeight
   } = menuBody;
-
   switch (triggerButtonPositionProp) {
     case 'top':
     case 'bottom':
@@ -95,7 +91,6 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
           top: 0
         };
       }
-
     case 'left':
     case 'right':
       {
@@ -108,22 +103,16 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       }
   }
 };
-
 class OverflowMenu extends React.Component {
   constructor() {
     super(...arguments);
-
     _rollupPluginBabelHelpers.defineProperty(this, "state", {});
-
+    _rollupPluginBabelHelpers.defineProperty(this, "instanceId", getInstanceId());
     _rollupPluginBabelHelpers.defineProperty(this, "_hFocusIn", null);
-
     _rollupPluginBabelHelpers.defineProperty(this, "_hBlurTimeout", void 0);
-
     _rollupPluginBabelHelpers.defineProperty(this, "_triggerRef", /*#__PURE__*/React__default["default"].createRef());
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleClick", evt => {
       evt.stopPropagation();
-
       if (!this._menuBody || !this._menuBody.contains(evt.target)) {
         this.setState({
           open: !this.state.open
@@ -131,7 +120,6 @@ class OverflowMenu extends React.Component {
         this.props.onClick(evt);
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenuAndFocus", () => {
       let wasOpen = this.state.open;
       this.closeMenu(() => {
@@ -140,26 +128,24 @@ class OverflowMenu extends React.Component {
         }
       });
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleKeyPress", evt => {
       if (this.state.open && match.matches(evt, [keys.ArrowUp, keys.ArrowRight, keys.ArrowDown, keys.ArrowLeft])) {
         evt.preventDefault();
-      } // Close the overflow menu on escape
-
+      }
 
+      // Close the overflow menu on escape
       if (match.matches(evt, [keys.Escape])) {
-        this.closeMenuAndFocus(); // Stop the esc keypress from bubbling out and closing something it shouldn't
+        this.closeMenuAndFocus();
 
+        // Stop the esc keypress from bubbling out and closing something it shouldn't
         evt.stopPropagation();
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleClickOutside", evt => {
       if (this.state.open && (!this._menuBody || !this._menuBody.contains(evt.target))) {
         this.closeMenu();
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenu", onCloseMenu => {
       this.setState({
         open: false
@@ -168,21 +154,17 @@ class OverflowMenu extends React.Component {
         if (onCloseMenu) {
           onCloseMenu();
         }
-
         this.props.onClose();
       });
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "focusMenuEl", () => {
       const {
         current: triggerEl
       } = this._triggerRef;
-
       if (triggerEl) {
         triggerEl.focus();
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleOverflowMenuItemFocus", _ref => {
       let {
         currentIndex,
@@ -192,39 +174,30 @@ class OverflowMenu extends React.Component {
         if (!curr.props.disabled) {
           acc.push(i);
         }
-
         return acc;
       }, []);
-
       const nextValidIndex = (() => {
         const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
-
         switch (nextIndex) {
           case -1:
             return enabledIndices.length - 1;
-
           case enabledIndices.length:
             return 0;
-
           default:
             return nextIndex;
         }
       })();
-
       const overflowMenuItem = this[`overflowMenuItem${enabledIndices[nextValidIndex]}`];
-      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : overflowMenuItem.focus();
+      overflowMenuItem?.focus();
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
         this._menuBody = menuBody;
       }
-
       if (!menuBody && this._hFocusIn) {
         this._hFocusIn = this._hFocusIn.release();
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "_handlePlace", menuBody => {
       if (menuBody) {
         this._menuBody = menuBody;
@@ -235,7 +208,6 @@ class OverflowMenu extends React.Component {
           const {
             current: triggerEl
           } = this._triggerRef;
-
           if (typeof target.matches === 'function') {
             if (!menuBody.contains(target) && triggerEl && !target.matches(`.${this.context}--overflow-menu,.${this.context}--overflow-menu-options`)) {
               this.closeMenuAndFocus();
@@ -245,7 +217,6 @@ class OverflowMenu extends React.Component {
         this.props.onOpen();
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "_getTarget", () => {
       const {
         current: triggerEl
@@ -253,17 +224,27 @@ class OverflowMenu extends React.Component {
       return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
     });
   }
-
+  /**
+   * The handle of `onfocusin` or `focus` event handler.
+   * @private
+   */
+  /**
+   * The timeout handle for handling `blur` event.
+   * @private
+   */
+  /**
+   * The element ref of the tooltip's trigger button.
+   * @type {React.RefObject<Element>}
+   * @private
+   */
   componentDidUpdate(_, prevState) {
     const {
       onClose
     } = this.props;
-
     if (!this.state.open && prevState.open) {
       onClose();
     }
   }
-
   componentDidMount() {
     // ensure that if open=true on first render, we wait
     // to render the floating menu until the trigger ref is not null
@@ -273,7 +254,6 @@ class OverflowMenu extends React.Component {
       });
     }
   }
-
   static getDerivedStateFromProps(_ref2, state) {
     let {
       open
@@ -286,7 +266,6 @@ class OverflowMenu extends React.Component {
       prevOpen: open
     };
   }
-
   componentWillUnmount() {
     if (typeof this._hBlurTimeout === 'number') {
       clearTimeout(this._hBlurTimeout);
@@ -294,6 +273,33 @@ class OverflowMenu extends React.Component {
     }
   }
 
+  /**
+   * Focuses the next enabled overflow menu item given the currently focused
+   * item index and direction to move
+   * @param {object} params
+   * @param {number} params.currentIndex - the index of the currently focused
+   * overflow menu item in the list of overflow menu items
+   * @param {number} params.direction - number denoting the direction to move
+   * focus (1 for forwards, -1 for backwards)
+   */
+
+  /**
+   * Handles the floating menu being unmounted or non-floating menu being
+   * mounted or unmounted.
+   * @param {Element} menuBody The DOM element of the menu body.
+   * @private
+   */
+
+  /**
+   * Handles the floating menu being placed.
+   * @param {Element} menuBody The DOM element of the menu body.
+   * @private
+   */
+
+  /**
+   * @returns {Element} The DOM element where the floating menu is placed in.
+   */
+
   render() {
     const prefix = this.context;
     const {
@@ -337,24 +343,22 @@ class OverflowMenu extends React.Component {
       [`${prefix}--overflow-menu-options--${size}`]: size
     });
     const overflowMenuIconClasses = cx__default["default"](`${prefix}--overflow-menu__icon`, iconClass);
-    const childrenWithProps = React__default["default"].Children.toArray(children).map((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) || this.closeMenuAndFocus,
-        handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
-        ref: e => {
-          this[`overflowMenuItem${index}`] = e;
-        },
-        index
-      });
-    });
+    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+      closeMenu: child?.props?.closeMenu || this.closeMenuAndFocus,
+      handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
+      ref: e => {
+        this[`overflowMenuItem${index}`] = e;
+      },
+      index
+    }));
+    const menuBodyId = `overflow-menu-${this.instanceId}__menu-body`;
     const menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
       className: overflowMenuOptionsClasses,
       tabIndex: "-1",
       role: "menu",
       "aria-label": ariaLabel || deprecatedAriaLabel,
-      onKeyDown: this.handleKeyPress
+      onKeyDown: this.handleKeyPress,
+      id: menuBodyId
     }, childrenWithProps);
     const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
       focusTrap: focusTrap,
@@ -376,11 +380,13 @@ class OverflowMenu extends React.Component {
     return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
       onClickOutside: this.handleClickOutside
     }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--overflow-menu__wrapper`
+      className: `${prefix}--overflow-menu__wrapper`,
+      "aria-owns": open ? menuBodyId : null
     }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
       type: "button",
       "aria-haspopup": true,
       "aria-expanded": this.state.open,
+      "aria-controls": open ? menuBodyId : null,
       className: overflowMenuClasses,
       onClick: this.handleClick,
       id: id,
@@ -389,67 +395,54 @@ class OverflowMenu extends React.Component {
       label: iconDescription
     }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
   }
-
 }
-
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
   /**
    * Specify a label to be read by screen readers on the container node
    */
   ['aria-label']: PropTypes__default["default"].string,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
-
   /**
    * 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: 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.'),
-
   /**
    * The adjustment in position applied to the floating menu.
    */
@@ -457,7 +450,6 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
     top: PropTypes__default["default"].number,
     left: PropTypes__default["default"].number
   }), PropTypes__default["default"].func]),
-
   /**
    * The adjustment in position applied to the floating menu.
    */
@@ -465,61 +457,49 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
     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: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 });
-
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "contextType", usePrefix.PrefixContext);
-
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
   ['aria-label']: null,
   iconDescription: 'Options',
@@ -540,7 +520,6 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
   const forwardRef = (props, ref) => /*#__PURE__*/React__default["default"].createElement(OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     innerRef: ref
   }));
-
   forwardRef.displayName = 'OverflowMenu';
   return /*#__PURE__*/React__default["default"].forwardRef(forwardRef);
 })();

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -43,35 +43,29 @@ const OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(funct
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-
   function setTabFocus(evt) {
     if (match.match(evt, keys.ArrowDown)) {
-      handleOverflowMenuItemFocus === null || handleOverflowMenuItemFocus === void 0 ? void 0 : handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus?.({
         currentIndex: index,
         direction: 1
       });
     }
-
     if (match.match(evt, keys.ArrowUp)) {
-      handleOverflowMenuItemFocus === null || handleOverflowMenuItemFocus === void 0 ? void 0 : handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus?.({
         currentIndex: index,
         direction: -1
       });
     }
   }
-
   function handleClick(evt) {
     onClick(evt);
-
     if (closeMenu) {
       closeMenu();
     }
   }
-
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning.warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
   }
-
   const overflowMenuBtnClasses = cx__default["default"](`${prefix}--overflow-menu-options__btn`, className);
   const overflowMenuItemClasses = cx__default["default"](`${prefix}--overflow-menu-options__option`, {
     [`${prefix}--overflow-menu--divider`]: hasDivider,
@@ -79,17 +73,14 @@ const OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(funct
     [`${prefix}--overflow-menu-options__option--disabled`]: disabled
   }, wrapperClassName);
   const TagToUse = href ? 'a' : 'button';
-
   const OverflowMenuItemContent = (() => {
     if (typeof itemText !== 'string') {
       return itemText;
     }
-
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--overflow-menu-options__option-content`
     }, itemText);
   })();
-
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: overflowMenuItemClasses,
     role: "none"
@@ -102,12 +93,14 @@ const OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(funct
       setTabFocus(evt);
       onKeyDown(evt);
     },
-    role: "menuitem" // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
+    role: "menuitem"
+    // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
     // but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`
     // so we have to use `any` here
     ,
     ref: ref,
-    tabIndex: -1 // itemText as any: itemText may be a ReactNode, but `title` only accepts string
+    tabIndex: -1
+    // itemText as any: itemText may be a ReactNode, but `title` only accepts string
     // to avoid compatibility issue, we use `any` here. Consider to enforce `itemText` to be `string?`
     // in the next major release
     ,
@@ -119,39 +112,32 @@ OverflowMenuItem.propTypes = {
    * The CSS class name to be placed on the button element
    */
   className: PropTypes__default["default"].string,
-
   /**
    * A callback to tell the parent menu component that the menu should be closed.
    */
   closeMenu: PropTypes__default["default"].func,
-
   /**
    * `true` to make this menu item disabled.
    */
   disabled: PropTypes__default["default"].bool,
   handleOverflowMenuItemFocus: PropTypes__default["default"].func,
-
   /**
    * `true` to make this menu item a divider.
    */
   hasDivider: PropTypes__default["default"].bool,
-
   /**
    * If given, overflow item will render as a link with the given href
    */
   href: PropTypes__default["default"].string,
   index: PropTypes__default["default"].number,
-
   /**
    * `true` to make this menu item a "danger button".
    */
   isDelete: PropTypes__default["default"].bool,
-
   /**
    * The text in the menu item.
    */
   itemText: PropTypes__default["default"].node.isRequired,
-
   /**
    * event handlers
    */
@@ -164,17 +150,14 @@ OverflowMenuItem.propTypes = {
   onMouseEnter: PropTypes__default["default"].func,
   onMouseLeave: PropTypes__default["default"].func,
   onMouseUp: PropTypes__default["default"].func,
-
   /**
    * `true` if this menu item has long text and requires a browser tooltip
    */
   requireTitle: PropTypes__default["default"].bool,
-
   /**
    * Specify a title for the OverflowMenuItem
    */
   title: PropTypes__default["default"].string,
-
   /**
    * The CSS class name to be placed on the wrapper list item element
    */

package/lib/components/OverflowMenuV2/index.js

@@ -26,7 +26,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const defaultSize = 'md';
-
 function OverflowMenuV2(_ref) {
   let {
     children,
@@ -73,23 +72,19 @@ function OverflowMenuV2(_ref) {
     y: y
   }, children));
 }
-
 OverflowMenuV2.propTypes = {
   /**
    * A collection of MenuItems to be rendered within this OverflowMenu.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Additional CSS class names for the trigger button.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Otionally provide a custom icon to be rendered on the trigger button.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
-
   /**
    * Specify the size of the menu, from a list of available sizes.
    */

package/lib/components/Pagination/Pagination.Skeleton.js

@@ -23,7 +23,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3, _SkeletonText4;
-
 function PaginationSkeleton(_ref) {
   let {
     className,
@@ -46,7 +45,6 @@ function PaginationSkeleton(_ref) {
     width: "70px"
   }))));
 }
-
 PaginationSkeleton.propTypes = {
   /**
    * Specify an optional className to add.