@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/OverflowMenu/OverflowMenu.js

@@ -17,62 +17,58 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { IconButton } from '../IconButton/index.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 
+const getInstanceId = setupGetInstanceId();
 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 = {
   [DIRECTION_TOP]: 'bottom',
   [DIRECTION_BOTTOM]: 'top'
 };
+
 /**
  * Determines how the position of arrow should affect the floating menu position.
  * @type {Object<string, number>}
  */
-
 const triggerButtonPositionFactors = {
   [DIRECTION_TOP]: -2,
   [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(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(false) : void 0;
   }
-
   const {
     offsetWidth: menuWidth,
     offsetHeight: menuHeight
   } = menuBody;
-
   switch (triggerButtonPositionProp) {
     case 'top':
     case 'bottom':
@@ -84,7 +80,6 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
           top: 0
         };
       }
-
     case 'left':
     case 'right':
       {
@@ -97,22 +92,16 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       }
   }
 };
-
 class OverflowMenu extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {});
-
+    _defineProperty(this, "instanceId", getInstanceId());
     _defineProperty(this, "_hFocusIn", null);
-
     _defineProperty(this, "_hBlurTimeout", void 0);
-
     _defineProperty(this, "_triggerRef", /*#__PURE__*/React__default.createRef());
-
     _defineProperty(this, "handleClick", evt => {
       evt.stopPropagation();
-
       if (!this._menuBody || !this._menuBody.contains(evt.target)) {
         this.setState({
           open: !this.state.open
@@ -120,7 +109,6 @@ class OverflowMenu extends Component {
         this.props.onClick(evt);
       }
     });
-
     _defineProperty(this, "closeMenuAndFocus", () => {
       let wasOpen = this.state.open;
       this.closeMenu(() => {
@@ -129,26 +117,24 @@ class OverflowMenu extends Component {
         }
       });
     });
-
     _defineProperty(this, "handleKeyPress", evt => {
       if (this.state.open && matches(evt, [ArrowUp, ArrowRight, ArrowDown, ArrowLeft])) {
         evt.preventDefault();
-      } // Close the overflow menu on escape
-
+      }
 
+      // Close the overflow menu on escape
       if (matches(evt, [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();
       }
     });
-
     _defineProperty(this, "handleClickOutside", evt => {
       if (this.state.open && (!this._menuBody || !this._menuBody.contains(evt.target))) {
         this.closeMenu();
       }
     });
-
     _defineProperty(this, "closeMenu", onCloseMenu => {
       this.setState({
         open: false
@@ -157,21 +143,17 @@ class OverflowMenu extends Component {
         if (onCloseMenu) {
           onCloseMenu();
         }
-
         this.props.onClose();
       });
     });
-
     _defineProperty(this, "focusMenuEl", () => {
       const {
         current: triggerEl
       } = this._triggerRef;
-
       if (triggerEl) {
         triggerEl.focus();
       }
     });
-
     _defineProperty(this, "handleOverflowMenuItemFocus", _ref => {
       let {
         currentIndex,
@@ -181,39 +163,30 @@ class OverflowMenu extends 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();
     });
-
     _defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
         this._menuBody = menuBody;
       }
-
       if (!menuBody && this._hFocusIn) {
         this._hFocusIn = this._hFocusIn.release();
       }
     });
-
     _defineProperty(this, "_handlePlace", menuBody => {
       if (menuBody) {
         this._menuBody = menuBody;
@@ -224,7 +197,6 @@ class OverflowMenu extends 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();
@@ -234,7 +206,6 @@ class OverflowMenu extends Component {
         this.props.onOpen();
       }
     });
-
     _defineProperty(this, "_getTarget", () => {
       const {
         current: triggerEl
@@ -242,17 +213,27 @@ class OverflowMenu extends 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
@@ -262,7 +243,6 @@ class OverflowMenu extends Component {
       });
     }
   }
-
   static getDerivedStateFromProps(_ref2, state) {
     let {
       open
@@ -275,7 +255,6 @@ class OverflowMenu extends Component {
       prevOpen: open
     };
   }
-
   componentWillUnmount() {
     if (typeof this._hBlurTimeout === 'number') {
       clearTimeout(this._hBlurTimeout);
@@ -283,6 +262,33 @@ class OverflowMenu extends 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 {
@@ -326,24 +332,22 @@ class OverflowMenu extends Component {
       [`${prefix}--overflow-menu-options--${size}`]: size
     });
     const overflowMenuIconClasses = cx(`${prefix}--overflow-menu__icon`, iconClass);
-    const childrenWithProps = React__default.Children.toArray(children).map((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) || this.closeMenuAndFocus,
-        handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
-        ref: e => {
-          this[`overflowMenuItem${index}`] = e;
-        },
-        index
-      });
-    });
+    const childrenWithProps = React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__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.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.createElement(FloatingMenu, {
       focusTrap: focusTrap,
@@ -365,11 +369,13 @@ class OverflowMenu extends Component {
     return /*#__PURE__*/React__default.createElement(ClickListener, {
       onClickOutside: this.handleClickOutside
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: `${prefix}--overflow-menu__wrapper`
+      className: `${prefix}--overflow-menu__wrapper`,
+      "aria-owns": open ? menuBodyId : null
     }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, other, {
       type: "button",
       "aria-haspopup": true,
       "aria-expanded": this.state.open,
+      "aria-controls": open ? menuBodyId : null,
       className: overflowMenuClasses,
       onClick: this.handleClick,
       id: id,
@@ -378,67 +384,54 @@ class OverflowMenu extends Component {
       label: iconDescription
     }), /*#__PURE__*/React__default.createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
   }
-
 }
-
 _defineProperty(OverflowMenu, "propTypes", {
   /**
    * Specify a label to be read by screen readers on the container node
    */
   ['aria-label']: PropTypes.string,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
-
   /**
    * 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: 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.'),
-
   /**
    * The adjustment in position applied to the floating menu.
    */
@@ -446,7 +439,6 @@ _defineProperty(OverflowMenu, "propTypes", {
     top: PropTypes.number,
     left: PropTypes.number
   }), PropTypes.func]),
-
   /**
    * The adjustment in position applied to the floating menu.
    */
@@ -454,61 +446,49 @@ _defineProperty(OverflowMenu, "propTypes", {
     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: PropTypes.oneOf(['sm', 'md', 'lg'])
 });
-
 _defineProperty(OverflowMenu, "contextType", PrefixContext);
-
 _defineProperty(OverflowMenu, "defaultProps", {
   ['aria-label']: null,
   iconDescription: 'Options',
@@ -529,7 +509,6 @@ _defineProperty(OverflowMenu, "defaultProps", {
   const forwardRef = (props, ref) => /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({}, props, {
     innerRef: ref
   }));
-
   forwardRef.displayName = 'OverflowMenu';
   return /*#__PURE__*/React__default.forwardRef(forwardRef);
 })();

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -33,35 +33,29 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
     ...rest
   } = _ref;
   const prefix = usePrefix();
-
   function setTabFocus(evt) {
     if (match(evt, ArrowDown)) {
-      handleOverflowMenuItemFocus === null || handleOverflowMenuItemFocus === void 0 ? void 0 : handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus?.({
         currentIndex: index,
         direction: 1
       });
     }
-
     if (match(evt, 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(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(`${prefix}--overflow-menu-options__btn`, className);
   const overflowMenuItemClasses = cx(`${prefix}--overflow-menu-options__option`, {
     [`${prefix}--overflow-menu--divider`]: hasDivider,
@@ -69,17 +63,14 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
     [`${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.createElement("div", {
       className: `${prefix}--overflow-menu-options__option-content`
     }, itemText);
   })();
-
   return /*#__PURE__*/React__default.createElement("li", {
     className: overflowMenuItemClasses,
     role: "none"
@@ -92,12 +83,14 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
       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
     ,
@@ -109,39 +102,32 @@ OverflowMenuItem.propTypes = {
    * The CSS class name to be placed on the button element
    */
   className: PropTypes.string,
-
   /**
    * A callback to tell the parent menu component that the menu should be closed.
    */
   closeMenu: PropTypes.func,
-
   /**
    * `true` to make this menu item disabled.
    */
   disabled: PropTypes.bool,
   handleOverflowMenuItemFocus: PropTypes.func,
-
   /**
    * `true` to make this menu item a divider.
    */
   hasDivider: PropTypes.bool,
-
   /**
    * If given, overflow item will render as a link with the given href
    */
   href: PropTypes.string,
   index: PropTypes.number,
-
   /**
    * `true` to make this menu item a "danger button".
    */
   isDelete: PropTypes.bool,
-
   /**
    * The text in the menu item.
    */
   itemText: PropTypes.node.isRequired,
-
   /**
    * event handlers
    */
@@ -154,17 +140,14 @@ OverflowMenuItem.propTypes = {
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   onMouseUp: PropTypes.func,
-
   /**
    * `true` if this menu item has long text and requires a browser tooltip
    */
   requireTitle: PropTypes.bool,
-
   /**
    * Specify a title for the OverflowMenuItem
    */
   title: PropTypes.string,
-
   /**
    * The CSS class name to be placed on the wrapper list item element
    */

package/es/components/OverflowMenuV2/index.js

@@ -16,7 +16,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 
 const defaultSize = 'md';
-
 function OverflowMenuV2(_ref) {
   let {
     children,
@@ -63,23 +62,19 @@ function OverflowMenuV2(_ref) {
     y: y
   }, children));
 }
-
 OverflowMenuV2.propTypes = {
   /**
    * A collection of MenuItems to be rendered within this OverflowMenu.
    */
   children: PropTypes.node,
-
   /**
    * Additional CSS class names for the trigger button.
    */
   className: PropTypes.string,
-
   /**
    * Otionally provide a custom icon to be rendered on the trigger button.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Specify the size of the menu, from a list of available sizes.
    */

package/es/components/Pagination/Pagination.Skeleton.js

@@ -13,7 +13,6 @@ import SkeletonText from '../SkeletonText/SkeletonText.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3, _SkeletonText4;
-
 function PaginationSkeleton(_ref) {
   let {
     className,
@@ -36,7 +35,6 @@ function PaginationSkeleton(_ref) {
     width: "70px"
   }))));
 }
-
 PaginationSkeleton.propTypes = {
   /**
    * Specify an optional className to add.