@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/core/Menu/Menu.js

@@ -1,120 +1,216 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, Box, Portal, useControlledState, cloneElementWithRef, mergeRefs, useSyncExternalStore, mergeEventHandlers, useFocusableElements } from '../../utils/index.js';
+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)=>{
-    let { className, trigger, positionReference, portal = true, popoverProps: popoverPropsProp, children, ...rest } = props;
-    let tree = useFloatingTree();
-    let nodeId = useFloatingNodeId();
-    let parentId = useFloatingParentNodeId();
-    let { interactions: interactionsProp, visible: visibleProp, onVisibleChange: onVisibleChangeProp, ...restPopoverProps } = popoverPropsProp ?? {};
-    let { listNavigation: listNavigationPropsProp, hover: hoverProp, ...restInteractionsProps } = interactionsProp ?? {};
-    let [visible, setVisible] = useControlledState(false, visibleProp, onVisibleChangeProp);
-    let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] = React.useState(false);
-    let [menuElement, setMenuElement] = React.useState(null);
-    let { focusableElementsRef, focusableElements } = useFocusableElements(menuElement, {
-        filter: (allElements)=>allElements.filter((i)=>!allElements?.some((p)=>p.contains(i.parentElement)))
-    });
-    let [activeIndex, setActiveIndex] = React.useState(null);
-    let popover = usePopover({
-        nodeId,
-        visible,
-        onVisibleChange: (open)=>open ? setVisible(true) : close(),
-        interactions: {
-            hover: null == tree ? hoverProp : {
-                enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
-                ...hoverProp
+import {
+  FloatingNode,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useListNavigation,
+  useInteractions,
+} from '@floating-ui/react';
+export const Menu = React.forwardRef((props, ref) => {
+  let {
+    className,
+    trigger,
+    positionReference,
+    portal = true,
+    popoverProps: popoverPropsProp,
+    children,
+    ...rest
+  } = props;
+  let tree = useFloatingTree();
+  let nodeId = useFloatingNodeId();
+  let parentId = useFloatingParentNodeId();
+  let {
+    interactions: interactionsProp,
+    visible: visibleProp,
+    onVisibleChange: onVisibleChangeProp,
+    ...restPopoverProps
+  } = popoverPropsProp ?? {};
+  let {
+    listNavigation: listNavigationPropsProp,
+    hover: hoverProp,
+    ...restInteractionsProps
+  } = interactionsProp ?? {};
+  let [visible, setVisible] = useControlledState(
+    false,
+    visibleProp,
+    onVisibleChangeProp,
+  );
+  let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] =
+    React.useState(false);
+  let [menuElement, setMenuElement] = React.useState(null);
+  let { focusableElementsRef, focusableElements } = useFocusableElements(
+    menuElement,
+    {
+      filter: (allElements) =>
+        allElements.filter(
+          (i) => !allElements?.some((p) => p.contains(i.parentElement)),
+        ),
+    },
+  );
+  let [activeIndex, setActiveIndex] = React.useState(null);
+  let popover = usePopover({
+    nodeId,
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    interactions: {
+      hover:
+        null == tree
+          ? hoverProp
+          : {
+              enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
+              ...hoverProp,
             },
-            ...restInteractionsProps
-        },
-        ...restPopoverProps
-    });
-    let { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-        useListNavigation(popover.context, {
-            activeIndex,
-            focusItemOnHover: false,
-            listRef: focusableElementsRef,
-            onNavigate: setActiveIndex,
-            ...listNavigationPropsProp
-        })
-    ]);
-    React.useEffect(()=>{
-        if (void 0 !== positionReference) popover.refs.setPositionReference(positionReference);
-    }, [
-        popover.refs,
-        positionReference
-    ]);
-    let refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
-    let triggerRef = React.useRef(null);
-    let close = React.useCallback(()=>{
-        setVisible(false);
-        if (null == parentId) triggerRef.current?.focus({
-            preventScroll: true
+      ...restInteractionsProps,
+    },
+    ...restPopoverProps,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+      ...restPopoverProps.middleware,
+    },
+  });
+  let { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    useListNavigation(popover.context, {
+      activeIndex,
+      focusItemOnHover: false,
+      listRef: focusableElementsRef,
+      onNavigate: setActiveIndex,
+      ...listNavigationPropsProp,
+    }),
+  ]);
+  React.useEffect(() => {
+    if (void 0 !== positionReference)
+      popover.refs.setPositionReference(positionReference);
+  }, [popover.refs, positionReference]);
+  let refs = useMergedRefs(setMenuElement, ref, popover.refs.setFloating);
+  let triggerRef = React.useRef(null);
+  let close = React.useCallback(() => {
+    setVisible(false);
+    if (null == parentId)
+      triggerRef.current?.focus({
+        preventScroll: true,
+      });
+  }, [parentId, setVisible]);
+  useSyncExternalStore(
+    React.useCallback(() => {
+      let closeUnrelatedMenus = (event) => {
+        if (
+          (parentId === event.parentId && nodeId !== event.nodeId) ||
+          parentId === event.nodeId
+        ) {
+          setVisible(false);
+          setHasFocusedNodeInSubmenu(false);
+        }
+      };
+      tree?.events.on('onNodeFocused', closeUnrelatedMenus);
+      return () => {
+        tree?.events.off('onNodeFocused', closeUnrelatedMenus);
+      };
+    }, [nodeId, parentId, tree?.events, setVisible]),
+    () => void 0,
+    () => void 0,
+  );
+  let popoverGetItemProps = ({ focusableItemIndex, userProps }) =>
+    getItemProps({
+      ...userProps,
+      tabIndex:
+        null != activeIndex &&
+        activeIndex >= 0 &&
+        null != focusableItemIndex &&
+        focusableItemIndex >= 0 &&
+        activeIndex === focusableItemIndex
+          ? 0
+          : -1,
+      onFocus: mergeEventHandlers(userProps?.onFocus, () => {
+        queueMicrotask(() => {
+          setHasFocusedNodeInSubmenu(true);
         });
-    }, [
-        parentId,
-        setVisible
-    ]);
-    useSyncExternalStore(React.useCallback(()=>{
-        let closeUnrelatedMenus = (event)=>{
-            if (parentId === event.parentId && nodeId !== event.nodeId || parentId === event.nodeId) {
-                setVisible(false);
-                setHasFocusedNodeInSubmenu(false);
-            }
-        };
-        tree?.events.on('onNodeFocused', closeUnrelatedMenus);
-        return ()=>{
-            tree?.events.off('onNodeFocused', closeUnrelatedMenus);
-        };
-    }, [
-        nodeId,
-        parentId,
-        tree?.events,
-        setVisible
-    ]), ()=>void 0, ()=>void 0);
-    let popoverGetItemProps = ({ focusableItemIndex, userProps })=>getItemProps({
-            ...userProps,
-            tabIndex: null != activeIndex && activeIndex >= 0 && null != focusableItemIndex && 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 (null != focusableItemIndex && focusableItemIndex >= 0) setActiveIndex(focusableItemIndex);
-                if (event.target === event.currentTarget) event.currentTarget.focus();
-            })
+        tree?.events.emit('onNodeFocused', {
+          nodeId: nodeId,
+          parentId: parentId,
         });
-    let reference = cloneElementWithRef(trigger, (triggerChild)=>getReferenceProps(popover.getReferenceProps({
-            ...triggerChild.props,
-            'aria-expanded': popover.open,
-            ref: mergeRefs(triggerRef, popover.refs.setReference)
-        })));
-    let 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, {
+      }),
+      onMouseEnter: mergeEventHandlers(userProps?.onMouseEnter, (event) => {
+        if (null != focusableItemIndex && focusableItemIndex >= 0)
+          setActiveIndex(focusableItemIndex);
+        if (event.target === event.currentTarget) event.currentTarget.focus();
+      }),
+    });
+  let reference = cloneElementWithRef(trigger, (triggerChild) =>
+    getReferenceProps(
+      popover.getReferenceProps({
+        ...triggerChild.props,
+        'aria-expanded': popover.open,
+        ref: mergeRefs(triggerRef, popover.refs.setReference),
+      }),
+    ),
+  );
+  let 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), null != tree ? React.createElement(FloatingNode, {
-        id: nodeId
-    }, floating) : floating));
+          popoverGetItemProps,
+          focusableElements,
+        },
+      },
+      React.createElement(
+        PopoverOpenContext.Provider,
+        {
+          value: popover.open,
+        },
+        reference,
+      ),
+      null != tree
+        ? React.createElement(
+            FloatingNode,
+            {
+              id: nodeId,
+            },
+            floating,
+          )
+        : floating,
+    ),
+  );
 });
 export const MenuContext = React.createContext(void 0);

package/DEV-esm/core/Menu/MenuDivider.js

@@ -1,5 +1,5 @@
 import { polymorphic } from '../../utils/index.js';
-export const MenuDivider = polymorphic('iui-menu-divider', {
-    role: 'separator'
+export const MenuDivider = polymorphic.div('iui-menu-divider', {
+  role: 'separator',
 });
 MenuDivider.displayName = 'MenuDivider';

package/DEV-esm/core/Menu/MenuExtraContent.js

@@ -1,5 +1,5 @@
 import { polymorphic } from '../../utils/index.js';
 export const MenuExtraContent = polymorphic.li('iui-menu-content', {
-    role: 'presentation'
+  role: 'presentation',
 });
 MenuExtraContent.displayName = 'MenuExtraContent';

package/DEV-esm/core/Menu/MenuItem.js

@@ -1,70 +1,137 @@
 import * as React from 'react';
-import { SvgCaretRightSmall, useMergedRefs, useId, createWarningLogger } from '../../utils/index.js';
+import {
+  SvgCaretRightSmall,
+  useMergedRefs,
+  useId,
+  createWarningLogger,
+} from '../../utils/index.js';
 import { Menu, MenuContext } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 import cx from 'classnames';
 let logWarning = createWarningLogger();
-export const MenuItem = React.forwardRef((props, forwardedRef)=>{
-    let { className, children, isSelected, disabled, value, onClick: onClickProp, sublabel, size = sublabel ? 'large' : 'default', icon, startIcon = icon, badge, endIcon = badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
-    if (null != onClickProp && subMenuItems.length > 0) logWarning('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.');
-    let parentMenu = React.useContext(MenuContext);
-    let menuItemRef = React.useRef(null);
-    let submenuId = useId();
-    let popoverProps = React.useMemo(()=>({
-            placement: 'right-start',
-            interactions: {
-                click: true,
-                hover: true,
-                listNavigation: {
-                    nested: subMenuItems.length > 0,
-                    openOnArrowKeyDown: true
-                }
-            }
-        }), [
-        subMenuItems.length
-    ]);
-    let onClick = ()=>{
-        if (disabled) return;
-        onClickProp?.(value);
-    };
-    let handlers = {
-        onClick
-    };
-    let focusableItemIndex = parentMenu?.focusableElements.findIndex((el)=>el === menuItemRef.current);
-    let 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' : void 0,
-        "aria-controls": subMenuItems.length > 0 ? submenuId : void 0,
-        "aria-disabled": disabled,
-        ...parentMenu?.popoverGetItemProps != null ? parentMenu.popoverGetItemProps({
+export const MenuItem = React.forwardRef((props, forwardedRef) => {
+  let {
+    className,
+    children,
+    isSelected,
+    disabled,
+    value,
+    onClick: onClickProp,
+    sublabel,
+    size = sublabel ? 'large' : 'default',
+    icon,
+    startIcon = icon,
+    badge,
+    endIcon = badge,
+    role = 'menuitem',
+    subMenuItems = [],
+    ...rest
+  } = props;
+  if (null != onClickProp && subMenuItems.length > 0)
+    logWarning(
+      '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.',
+    );
+  let parentMenu = React.useContext(MenuContext);
+  let menuItemRef = React.useRef(null);
+  let submenuId = useId();
+  let popoverProps = React.useMemo(
+    () => ({
+      placement: 'right-start',
+      interactions: {
+        click: true,
+        hover: true,
+        listNavigation: {
+          nested: subMenuItems.length > 0,
+          openOnArrowKeyDown: true,
+        },
+      },
+    }),
+    [subMenuItems.length],
+  );
+  let onClick = () => {
+    if (disabled) return;
+    onClickProp?.(value);
+  };
+  let handlers = {
+    onClick,
+  };
+  let focusableItemIndex = parentMenu?.focusableElements.findIndex(
+    (el) => el === menuItemRef.current,
+  );
+  let 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' : void 0,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : void 0,
+      '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);
+            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,
+  );
 });
 MenuItem.displayName = 'MenuItem';

package/DEV-esm/core/Menu/MenuItemSkeleton.js

@@ -2,31 +2,52 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-export const MenuItemSkeleton = React.forwardRef((props, forwardedRef)=>{
-    let { hasSublabel, hasIcon, contentWidth, translatedStrings = {
-        loading: 'Loading…'
-    }, className, style, ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-menu-item-skeleton', className),
-        "data-iui-size": hasSublabel && 'large',
-        style: {
-            '--iui-menu-item-content-skeleton-max-width': contentWidth,
-            ...style
-        },
-        ref: forwardedRef,
-        ...rest
-    }, hasIcon && React.createElement(Box, {
-        className: "iui-icon iui-skeleton",
-        "aria-hidden": true
-    }), React.createElement(Box, {
-        as: "span",
-        className: "iui-content"
-    }, React.createElement(Box, {
-        className: "iui-menu-label iui-skeleton",
-        "aria-hidden": true
-    }), hasSublabel && React.createElement(Box, {
-        className: "iui-menu-description iui-skeleton",
-        "aria-hidden": true
-    }), React.createElement(VisuallyHidden, null, translatedStrings.loading)));
+export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
+  let {
+    hasSublabel,
+    hasIcon,
+    contentWidth,
+    translatedStrings = {
+      loading: 'Loading…',
+    },
+    className,
+    style,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-menu-item-skeleton', className),
+      'data-iui-size': hasSublabel && 'large',
+      style: {
+        '--iui-menu-item-content-skeleton-max-width': contentWidth,
+        ...style,
+      },
+      ref: forwardedRef,
+      ...rest,
+    },
+    hasIcon &&
+      React.createElement(Box, {
+        className: 'iui-icon iui-skeleton',
+        'aria-hidden': true,
+      }),
+    React.createElement(
+      Box,
+      {
+        as: 'span',
+        className: 'iui-content',
+      },
+      React.createElement(Box, {
+        className: 'iui-menu-label iui-skeleton',
+        'aria-hidden': true,
+      }),
+      hasSublabel &&
+        React.createElement(Box, {
+          className: 'iui-menu-description iui-skeleton',
+          'aria-hidden': true,
+        }),
+      React.createElement(VisuallyHidden, null, translatedStrings.loading),
+    ),
+  );
 });
 MenuItemSkeleton.displayName = 'MenuItemSkeleton';