@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/UIShell/HeaderMenu.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
-import React from 'react';
+import React, { useContext, useState, useRef, Children, forwardRef, isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -16,205 +16,165 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-/**
- * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
- * will be a `HeaderMenuItem`. It handles certain keyboard events to help
- * with managing focus. It also passes along refs to each child so that it can
- * help manage focus state of its children.
- */
+const frFn = forwardRef;
+const HeaderMenu = frFn((props, ref) => {
+  const {
+    isActive,
+    isCurrentPage,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    className: customClassName,
+    children,
+    renderMenuContent: MenuContent,
+    menuLinkName,
+    focusRef,
+    onBlur,
+    onClick,
+    onKeyDown,
+    ...rest
+  } = props;
+  const prefix = useContext(PrefixContext);
+  const [expanded, setExpanded] = useState(false);
+  const menuButtonRef = useRef(null);
+  const subMenusRef = useRef(null);
+  const itemRefs = useRef([]);
+  const mergedButtonRef = useMergedRefs([ref, focusRef, menuButtonRef]);
 
-class HeaderMenu extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "_subMenus", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "items", []);
-    _defineProperty(this, "menuButtonRef", null);
-    /**
-     * Toggle the expanded state of the menu on click.
-     */
-    _defineProperty(this, "handleOnClick", e => {
-      const {
-        current: subMenusNode
-      } = this._subMenus;
-      if (!subMenusNode || !subMenusNode.contains(e.target)) {
-        e.preventDefault();
-      }
-      this.setState(prevState => ({
-        expanded: !prevState.expanded
-      }));
-    });
-    /**
-     * Keyboard event handler for the entire menu.
-     */
-    _defineProperty(this, "handleOnKeyDown", event => {
-      // Handle enter or space key for toggling the expanded state of the menu.
-      if (matches(event, [Enter, Space])) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.setState(prevState => ({
-          expanded: !prevState.expanded
-        }));
-        return;
-      }
-    });
-    /**
-     * Handle our blur event from our underlying menuitems. Will mostly be used
-     * for closing our menu in response to a user clicking off or tabbing out of
-     * the menu or menubar.
-     */
-    _defineProperty(this, "handleOnBlur", event => {
-      // Close the menu on blur when the related target is not a sibling menu item
-      // or a child in a submenu
-      const siblingItemBlurredTo = this.items.find(element => element === event.relatedTarget);
-      const childItemBlurredTo = this._subMenus.current?.contains(event.relatedTarget);
-      if (!siblingItemBlurredTo && !childItemBlurredTo) {
-        this.setState({
-          expanded: false,
-          selectedIndex: null
-        });
-      }
-    });
-    /**
-     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
-     * forward along the node.
-     *
-     * This is useful when this component is a child in a
-     * menu or menubar as it will allow the parent to explicitly focus the menu
-     * button node when that child should receive focus.
-     */
-    _defineProperty(this, "handleMenuButtonRef", node => {
-      const {
-        focusRef
-      } = this.props;
-      // Check if focusRef is a function before calling it
-      if (typeof focusRef === 'function') {
-        focusRef(node);
-      }
-      this.menuButtonRef = node;
-    });
-    /**
-     * Handles individual menuitem refs. We assign them to a class instance
-     * property so that we can properly manage focus of our children.
-     */
-    _defineProperty(this, "handleItemRef", index => node => {
-      this.items[index] = node;
-    });
-    _defineProperty(this, "handleMenuClose", event => {
-      // Handle ESC keydown for closing the expanded menu.
-      if (matches(event, [Escape]) && this.state.expanded) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.setState(() => ({
-          expanded: false,
-          selectedIndex: null
-        }));
+  /**
+   * Toggle the expanded state of the menu on click.
+   */
+  const handleOnClick = e => {
+    if (!subMenusRef.current || e.target instanceof Node && !subMenusRef.current.contains(e.target)) {
+      e.preventDefault();
+    }
+    setExpanded(prev => !prev);
+  };
 
-        // Return focus to menu button when the user hits ESC.
-        if (this.menuButtonRef !== null) {
-          this.menuButtonRef.focus();
-        }
-        return;
-      }
-    });
-    /**
-     * We capture the `ref` for each child inside of `this.items` to properly
-     * manage focus. In addition to this focus management, all items receive a
-     * `tabIndex: -1` so the user won't hit a large number of items in their tab
-     * sequence when they might not want to go through all the items.
-     */
-    _defineProperty(this, "_renderMenuItem", (item, index) => {
-      if (/*#__PURE__*/React.isValidElement(item)) {
-        return /*#__PURE__*/React.cloneElement(item, {
-          ref: this.handleItemRef(index)
-        });
+  /**
+   * Keyboard event handler for the entire menu.
+   */
+  const handleOnKeyDown = event => {
+    // Handle enter or space key for toggling the expanded state of the menu.
+    if (matches(event, [Enter, Space])) {
+      event.stopPropagation();
+      event.preventDefault();
+      setExpanded(prev => !prev);
+      return;
+    }
+  };
+
+  /**
+   * Handle our blur event from our underlying menuitems. Will mostly be used
+   * for closing our menu in response to a user clicking off or tabbing out of
+   * the menu or menubar.
+   */
+  const handleOnBlur = event => {
+    // Close the menu on blur when the related target is not a sibling menu item
+    // or a child in a submenu
+    const siblingItemBlurredTo = itemRefs.current.find(element => element === event.relatedTarget);
+    const childItemBlurredTo = subMenusRef.current?.contains(event.relatedTarget);
+    if (!siblingItemBlurredTo && !childItemBlurredTo) {
+      setExpanded(false);
+    }
+  };
+
+  /**
+   * Handles individual menuitem refs. We assign them to a class instance
+   * property so that we can properly manage focus of our children.
+   */
+  const handleItemRef = index => node => {
+    itemRefs.current[index] = node;
+  };
+  const handleMenuClose = event => {
+    // Handle ESC keydown for closing the expanded menu.
+    if (matches(event, [Escape]) && expanded) {
+      event.stopPropagation();
+      event.preventDefault();
+      setExpanded(false);
+
+      // Return focus to menu button when the user hits ESC.
+      if (menuButtonRef.current) {
+        menuButtonRef.current.focus();
       }
-    });
-    this.state = {
-      // Used to manage the expansion state of the menu
-      expanded: false,
-      // Refers to the menuitem that is currently focused
-      // Note: children should have `role="menuitem"` on node consuming ref
-      selectedIndex: null
-    };
-    this.items = [];
-  }
-  render() {
-    const prefix = this.context;
+    }
+  };
+  const hasActiveDescendant = childrenArg => Children.toArray(childrenArg).some(child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return false;
+    }
     const {
       isActive,
       isCurrentPage,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      className: customClassName,
-      children,
-      renderMenuContent: MenuContent,
-      menuLinkName,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      focusRef,
-      onBlur,
-      onClick,
-      onKeyDown,
-      ...rest
-    } = this.props;
-    const hasActiveDescendant = childrenArg => React.Children.toArray(childrenArg).some(child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return false;
-      }
+      children
+    } = child.props;
+    return isActive || isCurrentPage || Array.isArray(children) && hasActiveDescendant(children);
+  });
 
-      // Explicitly type the element to access props safely
-      const element = child;
-      return element.props.isActive || element.props.isCurrentPage || Array.isArray(element.props.children) && hasActiveDescendant(element.props.children);
-    });
-    const accessibilityLabel = {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy
-    };
-    const itemClassName = cx({
-      [`${prefix}--header__submenu`]: true,
-      [`${customClassName}`]: !!customClassName
-    });
-    const isActivePage = isActive ? isActive : isCurrentPage;
-    const linkClassName = cx({
-      [`${prefix}--header__menu-item`]: true,
-      [`${prefix}--header__menu-title`]: true,
-      // We set the current class only if `isActive` is passed in and we do
-      // not have an `aria-current="page"` set for the breadcrumb item
-      [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !this.state.expanded
-    });
+  /**
+   * We capture the `ref` for each child inside of `this.items` to properly
+   * manage focus. In addition to this focus management, all items receive a
+   * `tabIndex: -1` so the user won't hit a large number of items in their tab
+   * sequence when they might not want to go through all the items.
+   */
+  const renderMenuItem = (item, index) => {
+    if (/*#__PURE__*/isValidElement(item)) {
+      return /*#__PURE__*/cloneElement(item, {
+        ref: handleItemRef(index)
+      });
+    }
+    return item;
+  };
+  const accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  const itemClassName = cx({
+    [`${prefix}--header__submenu`]: true,
+    [`${customClassName}`]: !!customClassName
+  });
+  const isActivePage = isActive ? isActive : isCurrentPage;
+  const linkClassName = cx({
+    [`${prefix}--header__menu-item`]: true,
+    [`${prefix}--header__menu-title`]: true,
+    // We set the current class only if `isActive` is passed in and we do
+    // not have an `aria-current="page"` set for the breadcrumb item
+    [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !expanded
+  });
 
-    // Notes on eslint comments and based on the examples in:
-    // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
-    // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
-    // users
-    // - aria-haspopup can definitely have the value "menu"
-    // - aria-expanded is on their example node with role="menuitem"
-    // - href can be set to javascript:void(0), ideally this will be a button
-    return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
-      className: itemClassName,
-      onKeyDown: composeEventHandlers([onKeyDown, this.handleMenuClose]),
-      onClick: composeEventHandlers([onClick, this.handleOnClick]),
-      onBlur: composeEventHandlers([onBlur, this.handleOnBlur])
-    }), /*#__PURE__*/React.createElement("a", _extends({
-      // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
-      "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
-      ,
-      "aria-expanded": this.state.expanded,
-      className: linkClassName,
-      href: "#",
-      onKeyDown: this.handleOnKeyDown,
-      ref: this.handleMenuButtonRef,
-      tabIndex: 0
-    }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React.createElement(MenuContent, null) : /*#__PURE__*/React.createElement(ChevronDown, {
-      className: `${this.context}--header__menu-arrow`
-    })), /*#__PURE__*/React.createElement("ul", _extends({}, accessibilityLabel, {
-      ref: this._subMenus,
-      onClick: this.handleOnClick,
-      className: `${prefix}--header__menu`
-    }), React.Children.map(children, this._renderMenuItem)));
-  }
-}
-_defineProperty(HeaderMenu, "propTypes", {
+  // Notes on eslint comments and based on the examples in:
+  // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
+  // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
+  // users
+  // - aria-haspopup can definitely have the value "menu"
+  // - aria-expanded is on their example node with role="menuitem"
+  // - href can be set to javascript:void(0), ideally this will be a button
+  return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
+    className: itemClassName,
+    onKeyDown: composeEventHandlers([onKeyDown, handleMenuClose]),
+    onClick: composeEventHandlers([onClick, handleOnClick]),
+    onBlur: composeEventHandlers([onBlur, handleOnBlur]),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("a", _extends({
+    // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
+    "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
+    ,
+    "aria-expanded": expanded,
+    className: linkClassName,
+    href: "#",
+    onKeyDown: handleOnKeyDown,
+    ref: mergedButtonRef,
+    tabIndex: 0
+  }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React.createElement(MenuContent, null) : /*#__PURE__*/React.createElement(ChevronDown, {
+    className: `${prefix}--header__menu-arrow`
+  })), /*#__PURE__*/React.createElement("ul", _extends({}, accessibilityLabel, {
+    ref: subMenusRef,
+    className: `${prefix}--header__menu`
+  }), Children.map(children, renderMenuItem)));
+});
+HeaderMenu.displayName = 'HeaderMenu';
+HeaderMenu.propTypes = {
   /**
    * Required props for the accessibility label of the menu
    */
@@ -263,13 +223,6 @@ _defineProperty(HeaderMenu, "propTypes", {
    * Optionally provide a tabIndex for the underlying menu button
    */
   tabIndex: PropTypes.number
-});
-_defineProperty(HeaderMenu, "contextType", PrefixContext);
-const HeaderMenuForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(HeaderMenu, _extends({}, props, {
-    focusRef: ref
-  }));
-});
-HeaderMenuForwardRef.displayName = 'HeaderMenu';
+};
 
-export { HeaderMenu, HeaderMenuForwardRef as default };
+export { HeaderMenu, HeaderMenu as default };

package/es/components/UIShell/HeaderMenuButton.js

@@ -14,17 +14,16 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Menu, _Close;
-function HeaderMenuButton(_ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    className: customClassName,
-    renderMenuIcon,
-    renderCloseIcon,
-    isActive,
-    isCollapsible,
-    ...rest
-  } = _ref;
+function HeaderMenuButton({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  className: customClassName,
+  renderMenuIcon,
+  renderCloseIcon,
+  isActive,
+  isCollapsible,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx({
     ...(typeof customClassName === 'string' && {

package/es/components/UIShell/HeaderMenuItem.js

@@ -13,17 +13,16 @@ import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem(_ref, ref) {
-  let {
-    className,
-    isActive,
-    isCurrentPage,
-    'aria-current': ariaCurrent,
-    children,
-    role,
-    tabIndex,
-    ...rest
-  } = _ref;
+const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem({
+  className,
+  isActive,
+  isCurrentPage,
+  'aria-current': ariaCurrent,
+  children,
+  role,
+  tabIndex,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   if (isCurrentPage) {
     isActive = isCurrentPage;

package/es/components/UIShell/HeaderName.js

@@ -12,13 +12,12 @@ import PropTypes from 'prop-types';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function HeaderName(_ref) {
-  let {
-    children,
-    className: customClassName,
-    prefix = 'IBM',
-    ...rest
-  } = _ref;
+function HeaderName({
+  children,
+  className: customClassName,
+  prefix = 'IBM',
+  ...rest
+}) {
   const selectorPrefix = usePrefix();
   const className = cx(`${selectorPrefix}--header__name`, customClassName);
   return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {

package/es/components/UIShell/HeaderNavigation.js

@@ -12,14 +12,13 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function HeaderNavigation(_ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref;
+function HeaderNavigation({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  className: customClassName,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--header__nav`, customClassName);
   return /*#__PURE__*/React.createElement("nav", _extends({}, rest, {

package/es/components/UIShell/HeaderPanel.js

@@ -16,16 +16,15 @@ import { useWindowEvent } from '../../internal/useEvent.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
 const noopFn = () => {};
-const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel(_ref, ref) {
-  let {
-    children,
-    className: customClassName,
-    expanded,
-    addFocusListeners = true,
-    onHeaderPanelFocus = noopFn,
-    href,
-    ...rest
-  } = _ref;
+const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
+  children,
+  className: customClassName,
+  expanded,
+  addFocusListeners = true,
+  onHeaderPanelFocus = noopFn,
+  href,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const headerPanelReference = useRef(null);
   const headerPanelRef = useMergedRefs([headerPanelReference, ref]);

package/es/components/UIShell/HeaderSideNavItems.js

@@ -10,12 +10,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function HeaderSideNavItems(_ref) {
-  let {
-    className: customClassName,
-    children,
-    hasDivider = false
-  } = _ref;
+function HeaderSideNavItems({
+  className: customClassName,
+  children,
+  hasDivider = false
+}) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__header-navigation`]: true,

package/es/components/UIShell/Link.js

@@ -12,15 +12,14 @@ import deprecate from '../../prop-types/deprecate.js';
 
 // First define the component without generics
 
-const LinkBase = (_ref, ref) => {
-  let {
-    element,
-    as: BaseComponent,
-    // Captured here to prevent it from being passed into the created element.
-    // See https://github.com/carbon-design-system/carbon/issues/3970
-    isSideNavExpanded: _isSideNavExpanded,
-    ...rest
-  } = _ref;
+const LinkBase = ({
+  element,
+  as: BaseComponent,
+  // Captured here to prevent it from being passed into the created element.
+  // See https://github.com/carbon-design-system/carbon/issues/3970
+  isSideNavExpanded: _isSideNavExpanded,
+  ...rest
+}, ref) => {
   const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
   return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     ref: ref

package/es/components/UIShell/SideNav.js

@@ -24,29 +24,28 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
 // import SideNavFooter from './SideNavFooter';
 
 const SideNavContext = /*#__PURE__*/createContext({});
-function SideNavRenderFunction(_ref, ref) {
-  let {
-    expanded: expandedProp,
-    defaultExpanded = false,
-    isChildOfHeader = true,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    onToggle,
-    className: customClassName,
-    // TO-DO: comment back in when footer is added for rails
-    // translateById: t = (id) => translations[id],
-    href,
-    isFixedNav = false,
-    isRail,
-    isPersistent = true,
-    addFocusListeners = true,
-    addMouseListeners = true,
-    onOverlayClick,
-    onSideNavBlur,
-    enterDelayMs = 100,
-    ...other
-  } = _ref;
+function SideNavRenderFunction({
+  expanded: expandedProp,
+  defaultExpanded = false,
+  isChildOfHeader = true,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  onToggle,
+  className: customClassName,
+  // TO-DO: comment back in when footer is added for rails
+  // translateById: t = (id) => translations[id],
+  href,
+  isFixedNav = false,
+  isRail,
+  isPersistent = true,
+  addFocusListeners = true,
+  addMouseListeners = true,
+  onOverlayClick,
+  onSideNavBlur,
+  enterDelayMs = 100,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const {
     current: controlled
@@ -56,8 +55,7 @@ function SideNavRenderFunction(_ref, ref) {
   const expanded = controlled ? expandedProp : expandedState;
   const sideNavRef = useRef(null);
   const navRef = useMergedRefs([sideNavRef, ref]);
-  const handleToggle = function (event) {
-    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+  const handleToggle = (event, value = !expanded) => {
     if (!controlled) {
       setExpandedState(value, enterDelayMs);
     }

package/es/components/UIShell/SideNavDetails.js

@@ -11,13 +11,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SideNavDetails = _ref => {
-  let {
-    children,
-    className: customClassName,
-    title,
-    ...rest
-  } = _ref;
+const SideNavDetails = ({
+  children,
+  className: customClassName,
+  title,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__details`, customClassName);
   return /*#__PURE__*/React.createElement("div", _extends({

package/es/components/UIShell/SideNavDivider.js

@@ -11,10 +11,9 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _hr;
-const SideNavDivider = _ref => {
-  let {
-    className
-  } = _ref;
+const SideNavDivider = ({
+  className
+}) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--side-nav__divider`, className);
   return /*#__PURE__*/React.createElement("li", {