@itwin/itwinui-react 3.9.1 → 3.10.0

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -6,6 +6,8 @@ import * as React from 'react';
 import { useMergedRefs, Portal, cloneElementWithRef, useControlledState, mergeRefs, mergeEventHandlers, } from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { usePopover } from '../Popover/Popover.js';
+import { FloatingNode, FloatingTree, useFloatingNodeId, } from '@floating-ui/react';
+import { MenuItemContext } from '../Menu/MenuItem.js';
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.
@@ -26,6 +28,11 @@ import { usePopover } from '../Popover/Popover.js';
  * </DropdownMenu>
  */
 export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
+    return (React.createElement(FloatingTree, null,
+        React.createElement(DropdownMenuContent, { ref: forwardedRef, ...props })));
+});
+// ----------------------------------------------------------------------------
+const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     const { menuItems, children, role = 'menu', visible: visibleProp, placement = 'bottom-start', matchWidth = false, onVisibleChange, portal = true, ...rest } = props;
     const [visible, setVisible] = useControlledState(false, visibleProp, onVisibleChange);
     const triggerRef = React.useRef(null);
@@ -39,11 +46,23 @@ export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
         }
         return menuItems;
     }, [menuItems, close]);
+    const [currentFocusedNodeIndex, setCurrentFocusedNodeIndex] = React.useState(null);
+    const focusableNodes = React.useRef([]);
+    const nodeId = useFloatingNodeId();
     const popover = usePopover({
+        nodeId,
         visible,
         onVisibleChange: (open) => (open ? setVisible(true) : close()),
         placement,
         matchWidth,
+        interactions: {
+            listNavigation: {
+                activeIndex: currentFocusedNodeIndex,
+                onNavigate: setCurrentFocusedNodeIndex,
+                listRef: focusableNodes,
+                focusItemOnOpen: true,
+            },
+        },
     });
     const popoverRef = useMergedRefs(forwardedRef, popover.refs.setFloating);
     return (React.createElement(React.Fragment, null,
@@ -52,17 +71,21 @@ export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
             'aria-expanded': popover.open,
             ref: mergeRefs(triggerRef, popover.refs.setReference),
         })),
-        popover.open && (React.createElement(Portal, { portal: portal },
-            React.createElement(Menu, { ...popover.getFloatingProps({
-                    role,
-                    ...rest,
-                    onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-                        if (e.defaultPrevented) {
-                            return;
-                        }
-                        if (e.key === 'Tab') {
-                            close();
-                        }
-                    }),
-                }), ref: popoverRef }, menuContent)))));
+        React.createElement(FloatingNode, { id: nodeId }, popover.open && (React.createElement(Portal, { portal: portal },
+            React.createElement(MenuItemContext.Provider, { value: {
+                    setCurrentFocusedNodeIndex,
+                    focusableNodes,
+                } },
+                React.createElement(Menu, { setFocus: false, ...popover.getFloatingProps({
+                        role,
+                        ...rest,
+                        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+                            if (e.defaultPrevented) {
+                                return;
+                            }
+                            if (e.key === 'Tab') {
+                                close();
+                            }
+                        }),
+                    }), ref: popoverRef }, menuContent)))))));
 });

package/esm/core/Input/Input.js

@@ -15,5 +15,5 @@ export const Input = React.forwardRef((props, ref) => {
     const { size, htmlSize, status, className, ...rest } = props;
     const inputRef = React.useRef(null);
     const refs = useMergedRefs(inputRef, ref);
-    return (React.createElement(Box, { as: 'input', className: cx('iui-input', className), "data-iui-size": size, "data-iui-status": status, size: htmlSize, ref: refs, ...rest }));
+    return (React.createElement(Box, { as: 'input', className: cx('iui-input', 'iui-field', className), "data-iui-size": size, "data-iui-status": status, size: htmlSize, ref: refs, ...rest }));
 });

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -298,6 +298,11 @@ export declare const LabeledSelect: <T>(props: ({
     menuStyle?: React.CSSProperties | undefined;
     popoverProps?: Pick<{
         placement?: import("@floating-ui/utils").Placement | undefined;
+        /**
+         * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
+         *
+         * Custom svg icon. Will override status icon if specified.
+         */
         visible?: boolean | undefined;
         onVisibleChange?: ((visible: boolean) => void) | undefined;
         closeOnOutsideClick?: boolean | undefined;
@@ -317,10 +322,16 @@ export declare const LabeledSelect: <T>(props: ({
             animationFrame?: boolean | undefined;
             layoutShift?: boolean | undefined;
         } | undefined;
-        trigger?: Partial<Record<"click" | "hover" | "focus", boolean>> | undefined;
+        interactions?: {
+            click?: boolean | import("@floating-ui/react").UseClickProps | undefined;
+            dismiss?: boolean | import("@floating-ui/react").UseDismissProps | undefined;
+            hover?: boolean | import("@floating-ui/react").UseHoverProps<import("@floating-ui/react").ReferenceType> | undefined;
+            focus?: boolean | import("@floating-ui/react").UseFocusProps | undefined;
+            listNavigation?: import("@floating-ui/react").UseListNavigationProps | undefined;
+        } | undefined;
         role?: "dialog" | "menu" | "listbox" | undefined;
         matchWidth?: boolean | undefined;
-    }, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
+    } & Omit<import("@floating-ui/react").UseFloatingOptions<import("@floating-ui/react").ReferenceType>, "placement" | "middleware">, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
     triggerProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     }) | undefined;
@@ -428,6 +439,11 @@ export declare const LabeledSelect: <T>(props: ({
     menuStyle?: React.CSSProperties | undefined;
     popoverProps?: Pick<{
         placement?: import("@floating-ui/utils").Placement | undefined;
+        /**
+         * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
+         *
+         * Custom svg icon. Will override status icon if specified.
+         */
         visible?: boolean | undefined;
         onVisibleChange?: ((visible: boolean) => void) | undefined;
         closeOnOutsideClick?: boolean | undefined;
@@ -447,10 +463,16 @@ export declare const LabeledSelect: <T>(props: ({
             animationFrame?: boolean | undefined;
             layoutShift?: boolean | undefined;
         } | undefined;
-        trigger?: Partial<Record<"click" | "hover" | "focus", boolean>> | undefined;
+        interactions?: {
+            click?: boolean | import("@floating-ui/react").UseClickProps | undefined;
+            dismiss?: boolean | import("@floating-ui/react").UseDismissProps | undefined;
+            hover?: boolean | import("@floating-ui/react").UseHoverProps<import("@floating-ui/react").ReferenceType> | undefined;
+            focus?: boolean | import("@floating-ui/react").UseFocusProps | undefined;
+            listNavigation?: import("@floating-ui/react").UseListNavigationProps | undefined;
+        } | undefined;
         role?: "dialog" | "menu" | "listbox" | undefined;
         matchWidth?: boolean | undefined;
-    }, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
+    } & Omit<import("@floating-ui/react").UseFloatingOptions<import("@floating-ui/react").ReferenceType>, "placement" | "middleware">, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
     triggerProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     }) | undefined;

package/esm/core/Menu/Menu.js

@@ -5,6 +5,7 @@
 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.
  */
@@ -13,11 +14,19 @@ export const Menu = React.forwardRef((props, ref) => {
     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;
+        }
+    }, [getFocusableNodes, menuItemContext]);
     React.useEffect(() => {
         const items = getFocusableNodes();
         if (focusedIndex != null) {

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

@@ -1,6 +1,14 @@
 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.
@@ -65,3 +73,7 @@ export type MenuItemProps = {
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
 export declare const MenuItem: PolymorphicForwardRefComponent<"div", MenuItemProps>;
+export type TreeEvent = {
+    nodeId: string;
+    parentId: string | null;
+};

package/esm/core/Menu/MenuItem.js

@@ -3,37 +3,76 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { SvgCaretRightSmall, Portal, useMergedRefs, useId, } from '../../utils/index.js';
+import { SvgCaretRightSmall, Portal, useMergedRefs, useId, useSyncExternalStore, createWarningLogger, } from '../../utils/index.js';
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
-import { flushSync } from 'react-dom';
 import { usePopover } from '../Popover/Popover.js';
+import { FloatingNode, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, } from '@floating-ui/react';
+const logWarningInDev = createWarningLogger();
 /**
- * Context used to provide menu item ref to sub-menu items.
+ * Should be wrapped around the `Menu` containing the `MenuItem`s.
  */
-const MenuItemContext = React.createContext({ ref: undefined, setIsNestedSubmenuVisible: () => { } });
+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, sublabel, size = !!sublabel ? 'large' : 'default', icon, startIcon = icon, badge, endIcon = badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
+    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 [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
     const submenuId = useId();
     const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-    const [isNestedSubmenuVisible, setIsNestedSubmenuVisible] = React.useState(false);
-    const parent = React.useContext(MenuItemContext);
-    const onVisibleChange = (open) => {
-        setIsSubmenuVisible(open);
-        // we don't want parent to close when mouse goes into a nested submenu,
-        // so we need to let the parent know whether the submenu is still open.
-        parent.setIsNestedSubmenuVisible(open);
-    };
+    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({
-        visible: isSubmenuVisible || isNestedSubmenuVisible,
-        onVisibleChange,
+        nodeId,
+        visible: isSubmenuVisible,
+        onVisibleChange: setIsSubmenuVisible,
         placement: 'right-start',
-        trigger: { hover: true, focus: true },
+        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) {
@@ -43,61 +82,61 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
             case 'Enter':
             case ' ':
             case 'Spacebar': {
-                !disabled && onClick?.(value);
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowRight': {
-                if (subMenuItems.length > 0) {
-                    setIsSubmenuVisible(true);
-                    // flush and reset state so we are ready to focus again next time
-                    flushSync(() => setFocusOnSubmenu(true));
-                    setFocusOnSubmenu(false);
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                if (parent.ref) {
-                    parent.ref.current?.focus();
-                    parent.setIsNestedSubmenuVisible(false);
-                }
-                event.stopPropagation();
+                onClick();
                 event.preventDefault();
                 break;
             }
-            case 'Escape': {
-                // focus might get lost if submenu closes so move it back to parent
-                parent.ref?.current?.focus();
-                break;
-            }
             default:
                 break;
         }
     };
-    const handlers = {
-        onClick: () => !disabled && onClick?.(value),
-        onKeyDown,
+    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 onFocus = () => {
+        parent.setHasFocusedNodeInSubmenu?.(true);
+        tree?.events.emit('onNodeFocused', {
+            nodeId,
+            parentId,
+        });
     };
-    return (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 && popover.open && (React.createElement(Portal, null,
-            React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
-                React.createElement(Menu, { setFocus: focusOnSubmenu, ref: popover.refs.setFloating, ...popover.getFloatingProps({
-                        id: submenuId,
-                        onPointerMove: () => {
-                            // pointer might move into a nested submenu and set isSubmenuVisible to false,
-                            // so we need to flip it back to true when pointer re-enters this submenu.
-                            setIsSubmenuVisible(true);
-                        },
-                    }) }, subMenuItems))))));
+    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)))))));
 });

package/esm/core/NotificationMarker/NotificationMarker.d.ts

@@ -24,14 +24,15 @@ type NotificationMarkerProps = {
      */
     pulsing?: boolean;
     /**
-     * Set this programmatically to false when you just want to render the passed children without the notification
-     * @default true
+     * Instead of conditionally rendering the `NotificationMarker`, the `enabled` prop can be used.
+     *
+     * When `enabled` is set to `false`, the DOM element will still be present, but the notification marker will not be displayed visually.
+     *
      * @example
-     * let [newMessagesCount, ...] = useState(0);
-     * ...
-     * <NotificationMarker enabled={newMessagesCount > 0}>
-     *   <SvgNotification />
+     * <NotificationMarker enabled={notifications.length > 0}>
+     *  …
      * </NotificationMarker>
+     * @default true
      */
     enabled?: boolean;
 };

package/esm/core/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Placement } from '@floating-ui/react';
+import type { Placement, UseListNavigationProps, ReferenceType, UseFloatingOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps } from '@floating-ui/react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { PortalProps } from '../../utils/components/Portal.js';
 type PopoverOptions = {
@@ -59,16 +59,39 @@ type PopoverInternalProps = {
         layoutShift?: boolean;
     };
     /**
-     * By default, the popover will only open on click.
-     * `hover` and `focus` can be manually specified as triggers.
+     * By default, only the click and dismiss interactions/triggers are enabled.
+     * Explicitly pass `false` to disable the defaults.
+     *
+     * Pass a boolean to enable/disable any of the supported interactions.
+     * Alternatively, pass an object to override the default props that the Popover sets for an interaction/trigger.
+     *
+     * When additional parameters are _required_ for an interaction/trigger, an object must be passed to enable it.
+     * Booleans will not be allowed in this case.
+     *
+     * @example
+     * <Popover
+     *   interactions={{
+     *     click: false,
+     *     focus: true,
+     *     hover: { move: false },
+     *     listNavigation: { … },
+     *   }}
+     *   // …
+     * >…</Popover>
      */
-    trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
+    interactions?: {
+        click?: boolean | UseClickProps;
+        dismiss?: boolean | UseDismissProps;
+        hover?: boolean | UseHoverProps<ReferenceType>;
+        focus?: boolean | UseFocusProps;
+        listNavigation?: UseListNavigationProps;
+    };
     role?: 'dialog' | 'menu' | 'listbox';
     /**
      * Whether the popover should match the width of the trigger.
      */
     matchWidth?: boolean;
-};
+} & Omit<UseFloatingOptions, 'middleware' | 'placement'>;
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;
@@ -83,11 +106,11 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         floating: React.MutableRefObject<HTMLElement | null>;
         setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;
-    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    } & import("@floating-ui/react").ExtendedRefs<ReferenceType>;
     elements: {
         reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
-    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    } & import("@floating-ui/react").ExtendedElements<ReferenceType>;
     context: {
         x: number;
         y: number;
@@ -103,8 +126,8 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
         floatingId: string;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+        refs: import("@floating-ui/react").ExtendedRefs<ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<ReferenceType>;
     };
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;

package/esm/core/Popover/Popover.js

@@ -4,21 +4,35 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, } from '@floating-ui/react';
-import { Box, cloneElementWithRef, useControlledState, useId, useLayoutEffect, useMergedRefs, } from '../../utils/index.js';
-import { Portal } from '../../utils/components/Portal.js';
+import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, useFloatingTree, useListNavigation, } from '@floating-ui/react';
+import { Box, ShadowRoot, cloneElementWithRef, useControlledState, useId, useLayoutEffect, useMergedRefs, } from '../../utils/index.js';
+import { usePortalTo } from '../../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 // ----------------------------------------------------------------------------
 export const usePopover = (options) => {
-    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, trigger = { click: true, hover: false, focus: false }, role, } = options;
-    const middleware = { flip: true, shift: true, ...options.middleware };
+    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, interactions: interactionsProp, role, ...rest } = options;
+    const mergedInteractions = {
+        ...{
+            click: true,
+            dismiss: true,
+            hover: false,
+            focus: false,
+            listNavigation: undefined,
+        },
+        ...interactionsProp,
+    };
+    const tree = useFloatingTree();
+    const middleware = React.useMemo(() => ({ flip: true, shift: true, ...options.middleware }), [options.middleware]);
     const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
     const floating = useFloating({
         placement,
         open,
         onOpenChange,
-        whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
-        middleware: [
+        whileElementsMounted: React.useMemo(() => 
+        // autoUpdate is expensive and should only be called when the popover is open
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
+        ...rest,
+        middleware: React.useMemo(() => [
             middleware.offset !== undefined && offset(middleware.offset),
             middleware.flip && flip(),
             middleware.shift && shift(),
@@ -31,18 +45,35 @@ export const usePopover = (options) => {
             middleware.autoPlacement && autoPlacement(),
             middleware.inline && inline(),
             middleware.hide && hide(),
-        ].filter(Boolean),
+        ].filter(Boolean), [matchWidth, middleware]),
     });
     const interactions = useInteractions([
-        useClick(floating.context, { enabled: !!trigger.click }),
-        useDismiss(floating.context, { outsidePress: closeOnOutsideClick }),
+        useClick(floating.context, {
+            enabled: !!mergedInteractions.click,
+            ...mergedInteractions.click,
+        }),
+        useDismiss(floating.context, {
+            enabled: !!mergedInteractions.dismiss,
+            outsidePress: closeOnOutsideClick,
+            bubbles: tree != null,
+            ...mergedInteractions.dismiss,
+        }),
         useHover(floating.context, {
-            enabled: !!trigger.hover,
+            enabled: !!mergedInteractions.hover,
             delay: 100,
-            handleClose: safePolygon({ buffer: 1 }),
+            handleClose: safePolygon({ buffer: 1, requireIntent: false }),
+            move: false,
+            ...mergedInteractions.hover,
+        }),
+        useFocus(floating.context, {
+            enabled: !!mergedInteractions.focus,
+            ...mergedInteractions.focus,
         }),
-        useFocus(floating.context, { enabled: !!trigger.focus }),
         useRole(floating.context, { role: 'dialog', enabled: !!role }),
+        useListNavigation(floating.context, {
+            enabled: !!mergedInteractions.listNavigation,
+            ...mergedInteractions.listNavigation,
+        }),
     ]);
     const [referenceWidth, setReferenceWidth] = React.useState();
     const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
@@ -114,11 +145,28 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
             ...popover.getReferenceProps(children.props),
             ref: popover.refs.setReference,
         })),
-        popover.open ? (React.createElement(Portal, { portal: portal },
-            React.createElement(FloatingPortal, null,
-                React.createElement(ThemeProvider, { portalContainer: popoverElement },
-                    React.createElement(FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
-                        React.createElement(Box, { className: cx({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
-                                ? popover.refs.domReference.current?.id
-                                : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content)))))) : null));
+        popover.open ? (React.createElement(PopoverPortal, { portal: portal },
+            React.createElement(ThemeProvider, { portalContainer: popoverElement },
+                React.createElement(DisplayContents, null),
+                React.createElement(FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
+                    React.createElement(Box, { className: cx({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
+                            ? popover.refs.domReference.current?.id
+                            : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content))))) : null));
+});
+// ----------------------------------------------------------------------------
+const PopoverPortal = ({ children, portal = true, }) => {
+    const portalTo = usePortalTo(portal);
+    return (React.createElement(FloatingPortal, { root: portalTo },
+        React.createElement(DisplayContents, null),
+        children));
+};
+// ----------------------------------------------------------------------------
+/** Applies `display: contents` to the parent div. */
+const DisplayContents = React.memo(() => {
+    return (React.createElement(ShadowRoot, { css: `
+        :host {
+          display: contents;
+        }
+      ` },
+        React.createElement("slot", null)));
 });