@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Menu/Menu.js

@@ -1,68 +1,218 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, getFocusableElements, Box, mergeEventHandlers, } from '../../utils/index.js';
-import { MenuItemContext } from './MenuItem.js';
-/**
- * Basic menu component. Can be used for select or dropdown components.
- */
+import {
+  useMergedRefs,
+  Box,
+  Portal,
+  useControlledState,
+  cloneElementWithRef,
+  mergeRefs,
+  useSyncExternalStore,
+  mergeEventHandlers,
+  useFocusableElements,
+} from '../../utils/index.js';
+import { PopoverOpenContext, usePopover } from '../Popover/Popover.js';
+import {
+  FloatingNode,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useListNavigation,
+  useInteractions,
+} from '@floating-ui/react';
 export const Menu = React.forwardRef((props, ref) => {
-    const { setFocus = true, className, ...rest } = props;
-    const [focusedIndex, setFocusedIndex] = React.useState();
-    const menuRef = React.useRef(null);
-    const refs = useMergedRefs(menuRef, ref);
-    const menuItemContext = React.useContext(MenuItemContext);
-    const getFocusableNodes = React.useCallback(() => {
-        const focusableItems = getFocusableElements(menuRef.current);
-        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
-        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
-    }, []);
-    React.useEffect(() => {
-        const focusableNodes = getFocusableNodes();
-        if (menuItemContext != null &&
-            menuItemContext.focusableNodes.current !== focusableNodes) {
-            menuItemContext.focusableNodes.current = focusableNodes;
+  const {
+    className,
+    trigger,
+    positionReference,
+    portal = true,
+    popoverProps: popoverPropsProp,
+    children,
+    ...rest
+  } = props;
+  const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
+  const parentId = useFloatingParentNodeId();
+  const {
+    interactions: interactionsProp,
+    visible: visibleProp,
+    onVisibleChange: onVisibleChangeProp,
+    ...restPopoverProps
+  } = popoverPropsProp ?? {};
+  const {
+    listNavigation: listNavigationPropsProp,
+    hover: hoverProp,
+    ...restInteractionsProps
+  } = interactionsProp ?? {};
+  const [visible, setVisible] = useControlledState(
+    false,
+    visibleProp,
+    onVisibleChangeProp,
+  );
+  const [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] =
+    React.useState(false);
+  const [menuElement, setMenuElement] = React.useState(null);
+  const { focusableElementsRef, focusableElements } = useFocusableElements(
+    menuElement,
+    {
+      filter: (allElements) =>
+        allElements.filter(
+          (i) => !allElements?.some((p) => p.contains(i.parentElement)),
+        ),
+    },
+  );
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const popover = usePopover({
+    nodeId,
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    interactions: {
+      hover:
+        tree == null
+          ? hoverProp
+          : {
+              enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
+              ...hoverProp,
+            },
+      ...restInteractionsProps,
+    },
+    ...restPopoverProps,
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [
+      useListNavigation(popover.context, {
+        activeIndex,
+        focusItemOnHover: false,
+        listRef: focusableElementsRef,
+        onNavigate: setActiveIndex,
+        ...listNavigationPropsProp,
+      }),
+    ],
+  );
+  React.useEffect(() => {
+    if (positionReference !== undefined) {
+      popover.refs.setPositionReference(positionReference);
+    }
+  }, [popover.refs, positionReference]);
+  const refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
+  const triggerRef = React.useRef(null);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    if (parentId == null) {
+      triggerRef.current?.focus({
+        preventScroll: true,
+      });
+    }
+  }, [parentId, setVisible]);
+  useSyncExternalStore(
+    React.useCallback(() => {
+      const closeUnrelatedMenus = (event) => {
+        if (
+          (parentId === event.parentId && nodeId !== event.nodeId) ||
+          parentId === event.nodeId
+        ) {
+          setVisible(false);
+          setHasFocusedNodeInSubmenu(false);
         }
-    }, [getFocusableNodes, menuItemContext]);
-    React.useEffect(() => {
-        const items = getFocusableNodes();
-        if (focusedIndex != null) {
-            items?.[focusedIndex]?.focus();
-            return;
+      };
+      tree?.events.on('onNodeFocused', closeUnrelatedMenus);
+      return () => {
+        tree?.events.off('onNodeFocused', closeUnrelatedMenus);
+      };
+    }, [nodeId, parentId, tree?.events, setVisible]),
+    () => undefined,
+    () => undefined,
+  );
+  const popoverGetItemProps = ({ focusableItemIndex, userProps }) => {
+    return getItemProps({
+      ...userProps,
+      tabIndex:
+        activeIndex != null &&
+        activeIndex >= 0 &&
+        focusableItemIndex != null &&
+        focusableItemIndex >= 0 &&
+        activeIndex === focusableItemIndex
+          ? 0
+          : -1,
+      onFocus: mergeEventHandlers(userProps?.onFocus, () => {
+        queueMicrotask(() => {
+          setHasFocusedNodeInSubmenu(true);
+        });
+        tree?.events.emit('onNodeFocused', {
+          nodeId: nodeId,
+          parentId: parentId,
+        });
+      }),
+      onMouseEnter: mergeEventHandlers(userProps?.onMouseEnter, (event) => {
+        if (focusableItemIndex != null && focusableItemIndex >= 0) {
+          setActiveIndex(focusableItemIndex);
         }
-        const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
-        if (setFocus) {
-            setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
+        if (event.target === event.currentTarget) {
+          event.currentTarget.focus();
         }
-    }, [setFocus, focusedIndex, getFocusableNodes]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!items?.length) {
-            return;
-        }
-        const currentIndex = focusedIndex ?? 0;
-        switch (event.key) {
-            case 'ArrowDown': {
-                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            case 'ArrowUp': {
-                setFocusedIndex(Math.max(currentIndex - 1, 0));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    return (React.createElement(Box, { as: 'div', className: cx('iui-menu', className), role: 'menu', ref: refs, ...rest, onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown) }));
+      }),
+    });
+  };
+  const reference = cloneElementWithRef(trigger, (triggerChild) =>
+    getReferenceProps(
+      popover.getReferenceProps({
+        ...triggerChild.props,
+        'aria-expanded': popover.open,
+        ref: mergeRefs(triggerRef, popover.refs.setReference),
+      }),
+    ),
+  );
+  const floating =
+    popover.open &&
+    React.createElement(
+      Portal,
+      {
+        portal: portal,
+      },
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          className: cx('iui-menu', className),
+          ref: refs,
+          ...getFloatingProps(
+            popover.getFloatingProps({
+              role: 'menu',
+              ...rest,
+            }),
+          ),
+        },
+        children,
+      ),
+    );
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      MenuContext.Provider,
+      {
+        value: {
+          popoverGetItemProps,
+          focusableElements,
+        },
+      },
+      React.createElement(
+        PopoverOpenContext.Provider,
+        {
+          value: popover.open,
+        },
+        reference,
+      ),
+      tree != null
+        ? React.createElement(
+            FloatingNode,
+            {
+              id: nodeId,
+            },
+            floating,
+          )
+        : floating,
+    ),
+  );
 });
+export const MenuContext = React.createContext(undefined);

package/esm/core/Menu/MenuDivider.d.ts

@@ -13,4 +13,4 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: import("../../utils/props.js").PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+export declare const MenuDivider: import("../../utils/props.js").PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;

package/esm/core/Menu/MenuDivider.js

@@ -1,23 +1,4 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Divider between menu items. Should be used inside `Menu`.
- * @example
- * <Menu>
- *   {(close) => [
- *     <MenuItem key={0} onClick={() => {}}>
- *       Item #1
- *     </MenuItem>,
- *     <MenuDivider key={1} />,
- *     <MenuItem key={2} onClick={() => {}}>
- *       Item #2
- *     </MenuItem>,
- *   ]}
- * </Menu>
- */
 export const MenuDivider = polymorphic('iui-menu-divider', {
-    role: 'separator',
+  role: 'separator',
 });

package/esm/core/Menu/MenuExtraContent.js

@@ -1,28 +1,4 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Component that allows to have any additional content inside `Menu`.
- * @example
- * <Menu>
- *   {(close) => [
- *     <MenuExtraContent key={0}>
- *       <>
- *         <Text variant='leading'>Terry Rivers</Text>
- *           terry.rivers@email.com
- *         </Text>
- *         <Select options={someOptions} />
- *       </>
- *     </MenuExtraContent>,
- *     <MenuDivider key={1} />,
- *     <MenuItem key={2} onClick={() => {}}>
- *       Sign out
- *     </MenuItem>,
- *   ]}
- * </Menu>
- */
 export const MenuExtraContent = polymorphic.li('iui-menu-content', {
-    role: 'presentation',
+  role: 'presentation',
 });

package/esm/core/Menu/MenuItem.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { ListItemOwnProps } from '../List/ListItem.js';
-/**
- * Should be wrapped around the `Menu` containing the `MenuItem`s.
- */
-export declare const MenuItemContext: React.Context<{
-    setCurrentFocusedNodeIndex: React.Dispatch<React.SetStateAction<number | null>>;
-    focusableNodes: React.MutableRefObject<(HTMLElement | null)[]>;
-    setHasFocusedNodeInSubmenu?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
-}>;
 export type MenuItemProps = {
     /**
      * Item is selected.

package/esm/core/Menu/MenuItem.js

@@ -1,151 +1,138 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { SvgCaretRightSmall, Portal, useMergedRefs, useId, useSyncExternalStore, createWarningLogger, } from '../../utils/index.js';
-import { Menu } from './Menu.js';
+import {
+  SvgCaretRightSmall,
+  useMergedRefs,
+  useId,
+  createWarningLogger,
+} from '../../utils/index.js';
+import { Menu, MenuContext } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
-import { usePopover } from '../Popover/Popover.js';
-import { FloatingNode, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, } from '@floating-ui/react';
+import cx from 'classnames';
 const logWarningInDev = createWarningLogger();
-/**
- * Should be wrapped around the `Menu` containing the `MenuItem`s.
- */
-export const MenuItemContext = React.createContext({
-    setCurrentFocusedNodeIndex: () => { },
-    focusableNodes: { current: [] },
-    setHasFocusedNodeInSubmenu: undefined,
-});
-/**
- * Basic menu item component. Should be used inside `Menu` component for each item.
- */
 export const MenuItem = React.forwardRef((props, forwardedRef) => {
-    const { children, isSelected, disabled, value, onClick: onClickProp, sublabel, size = !!sublabel ? 'large' : 'default', icon, startIcon = icon, badge, endIcon = badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
-    if (onClickProp != null && subMenuItems.length > 0) {
-        logWarningInDev('Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.');
-    }
-    const parent = React.useContext(MenuItemContext);
-    const menuItemRef = React.useRef(null);
-    const submenuId = useId();
-    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-    const [currentFocusedNodeIndex, setCurrentFocusedNodeIndex] = React.useState(null);
-    const [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] = React.useState(false);
-    const nodeId = useFloatingNodeId();
-    const tree = useFloatingTree();
-    const parentId = useFloatingParentNodeId();
-    const focusableNodeIndexInParentTree = parent.focusableNodes.current.findIndex((el) => el === menuItemRef.current);
-    useSyncExternalStore(React.useCallback(() => {
-        const closeUnrelatedMenus = (event) => {
-            if (
-            // When a node "X" is focused, close "X"'s siblings' submenus
-            // i.e. only one submenu in each menu can be open at a time
-            (parentId === event.parentId && nodeId !== event.nodeId) ||
-                // Consider a node "X" with its submenu "Y".
-                // Focusing "X" should close all submenus of "Y".
-                parentId === event.nodeId) {
-                setIsSubmenuVisible(false);
-                setHasFocusedNodeInSubmenu(false);
-            }
-        };
-        tree?.events.on('onNodeFocused', closeUnrelatedMenus);
-        return () => {
-            tree?.events.off('onNodeFocused', closeUnrelatedMenus);
-        };
-    }, [nodeId, parentId, tree?.events]), () => undefined, () => undefined);
-    const focusableNodes = React.useRef([]);
-    const popover = usePopover({
-        nodeId,
-        visible: isSubmenuVisible,
-        onVisibleChange: React.useCallback((visible) => {
-            if (!visible) {
-                setHasFocusedNodeInSubmenu(false);
-            }
-            setIsSubmenuVisible(visible);
-        }, []),
-        placement: 'right-start',
-        interactions: !disabled
-            ? {
-                click: false,
-                hover: {
-                    enabled: !hasFocusedNodeInSubmenu, // If focus is still inside submenu, don't close the submenu upon hovering out.
-                },
-                listNavigation: {
-                    listRef: focusableNodes,
-                    activeIndex: currentFocusedNodeIndex,
-                    nested: subMenuItems.length > 0,
-                    onNavigate: setCurrentFocusedNodeIndex,
-                },
-            }
-            : {},
-    });
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-            case 'Spacebar': {
-                onClick();
-                event.preventDefault();
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const onMouseEnter = (e) => {
-        // Focus the item when hovered.
-        if (e.target === e.currentTarget) {
-            menuItemRef.current?.focus();
-            // Since we manually focus the MenuItem on hover, we need to manually update the active index for
-            // Floating UI's keyboard navigation to work correctly.
-            if (parent != null && focusableNodeIndexInParentTree != null) {
-                parent.setCurrentFocusedNodeIndex(focusableNodeIndexInParentTree);
-            }
-        }
+  const {
+    className,
+    children,
+    isSelected,
+    disabled,
+    value,
+    onClick: onClickProp,
+    sublabel,
+    size = !!sublabel ? 'large' : 'default',
+    icon,
+    startIcon = icon,
+    badge,
+    endIcon = badge,
+    role = 'menuitem',
+    subMenuItems = [],
+    ...rest
+  } = props;
+  if (onClickProp != null && subMenuItems.length > 0) {
+    logWarningInDev(
+      'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',
+    );
+  }
+  const parentMenu = React.useContext(MenuContext);
+  const menuItemRef = React.useRef(null);
+  const submenuId = useId();
+  const popoverProps = React.useMemo(() => {
+    return {
+      placement: 'right-start',
+      interactions: {
+        click: true,
+        hover: true,
+        listNavigation: {
+          nested: subMenuItems.length > 0,
+          openOnArrowKeyDown: true,
+        },
+      },
     };
-    const onFocus = () => {
-        // Set hasFocusedNodeInSubmenu in a microtask to ensure the submenu stays open reliably.
-        // E.g. Even when hovering into it rapidly.
-        queueMicrotask(() => {
-            parent.setHasFocusedNodeInSubmenu?.(true);
-        });
-        tree?.events.emit('onNodeFocused', {
-            nodeId,
-            parentId,
-        });
-    };
-    const onClick = () => {
-        onClickProp?.(value);
-        setIsSubmenuVisible((prev) => !prev);
-    };
-    const handlers = !disabled
-        ? {
-            onClick,
-            onKeyDown,
-            onMouseEnter,
-            onFocus,
-        }
-        : {};
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ListItem, { as: 'div', actionable: true, size: size, active: isSelected, disabled: disabled, ref: useMergedRefs(menuItemRef, forwardedRef, subMenuItems.length > 0 ? popover.refs.setReference : null), role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0 ? 'true' : undefined, "aria-controls": subMenuItems.length > 0 ? submenuId : undefined, "aria-expanded": subMenuItems.length > 0 ? popover.open : undefined, "aria-disabled": disabled, ...(subMenuItems.length === 0
-                ? { ...handlers, ...rest }
-                : popover.getReferenceProps({ ...handlers, ...rest })) },
-            startIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
-            React.createElement(ListItem.Content, null,
-                React.createElement("div", null, children),
-                sublabel && React.createElement(ListItem.Description, null, sublabel)),
-            !endIcon && subMenuItems.length > 0 && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true },
-                React.createElement(SvgCaretRightSmall, null))),
-            endIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))),
-        subMenuItems.length > 0 && !disabled && popover.open && (React.createElement(FloatingNode, { id: nodeId },
-            React.createElement(Portal, null,
-                React.createElement(MenuItemContext.Provider, { value: {
-                        setCurrentFocusedNodeIndex,
-                        focusableNodes,
-                        setHasFocusedNodeInSubmenu,
-                    } },
-                    React.createElement(Menu, { setFocus: false, ref: popover.refs.setFloating, ...popover.getFloatingProps({ id: submenuId }) }, subMenuItems)))))));
+  }, [subMenuItems.length]);
+  const onClick = () => {
+    if (disabled) {
+      return;
+    }
+    onClickProp?.(value);
+  };
+  const handlers = {
+    onClick,
+  };
+  const focusableItemIndex = parentMenu?.focusableElements.findIndex(
+    (el) => el === menuItemRef.current,
+  );
+  const trigger = React.createElement(
+    ListItem,
+    {
+      as: 'button',
+      type: 'button',
+      className: cx('iui-button-base', className),
+      actionable: true,
+      size: size,
+      active: isSelected,
+      disabled: disabled,
+      ref: useMergedRefs(menuItemRef, forwardedRef),
+      role: role,
+      tabIndex: isSelected ? 0 : -1,
+      'aria-selected': isSelected,
+      'aria-haspopup': subMenuItems.length > 0 ? 'true' : undefined,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : undefined,
+      'aria-disabled': disabled,
+      ...(parentMenu?.popoverGetItemProps != null
+        ? parentMenu.popoverGetItemProps({
+            focusableItemIndex,
+            userProps: handlers,
+          })
+        : handlers),
+      ...rest,
+    },
+    startIcon &&
+      React.createElement(
+        ListItem.Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+        },
+        startIcon,
+      ),
+    React.createElement(
+      ListItem.Content,
+      null,
+      React.createElement('div', null, children),
+      sublabel && React.createElement(ListItem.Description, null, sublabel),
+    ),
+    !endIcon &&
+      subMenuItems.length > 0 &&
+      React.createElement(
+        ListItem.Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+        },
+        React.createElement(SvgCaretRightSmall, null),
+      ),
+    endIcon &&
+      React.createElement(
+        ListItem.Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+        },
+        endIcon,
+      ),
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
+    subMenuItems.length > 0 && !disabled
+      ? React.createElement(
+          Menu,
+          {
+            id: submenuId,
+            trigger: trigger,
+            popoverProps: popoverProps,
+          },
+          subMenuItems,
+        )
+      : trigger,
+  );
 });