@itwin/itwinui-react 3.9.1 → 3.10.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 3.10.1
+
+### Patch Changes
+
+- [#2031](https://github.com/iTwin/iTwinUI/pull/2031): Fixed an issue where popovers and dropdown menus used with `SidenavButton` were showing up inside a tooltip.
+- [#2030](https://github.com/iTwin/iTwinUI/pull/2030): Fixed a visual bug where items in a `ButtonGroup` were displaying a double border when an associated `Popover` was opened.
+- [#2026](https://github.com/iTwin/iTwinUI/pull/2026): Submenus within a `DropdownMenu` will now consistently require less precision when moving the mouse between the parent item and the submenu.
+
+## 3.10.0
+
+### Minor Changes
+
+- [#1942](https://github.com/iTwin/iTwinUI/pull/1942): Clicking a `MenuItem` with `submenuItems` now toggles the submenu visibility.
+  - If both `submenuItems` and `onClick` props are passed, then clicking the `MenuItem` will toggle the submenu visibility but also _still_ call the `onClick`. However, this behavior can lead to a confusing UX and is not recommended, so a warning will be shown.
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): Aggregated a subset of CSS styles across some field components: `Button`, `Input`, `Textarea`, and `Select`, in order to reduce the CSS size and improve visual consistency. Some resulting changes:
+  - `Input`, `Textarea`, and `Select` have a similar hover state as `Button`.
+  - `Input`, `Textarea`, and `Select` now show their value as greyed out when disabled.
+- [#1942](https://github.com/iTwin/iTwinUI/pull/1942): `DropdownMenu`'s keyboard navigation, hover triggers, and overall behavior has been improved.
+- [#2010](https://github.com/iTwin/iTwinUI/pull/2010): Added new `labelProps` to `ToggleSwitch` to allow for customization of the label element.
+- [#2011](https://github.com/iTwin/iTwinUI/pull/2011): Added dependency on `jotai`.
+
+### Patch Changes
+
+- [#1942](https://github.com/iTwin/iTwinUI/pull/1942): Disabled `MenuItem`s no longer show their submenu.
+- [#1942](https://github.com/iTwin/iTwinUI/pull/1942): Fixed an issue in `DropdownMenu` where the submenus would not close in some circumstances, despite calling `close()` in `onClick`.
+- [#2013](https://github.com/iTwin/iTwinUI/pull/2013): Fixed an issue with `Table` row selection not correctly deselecting all sub rows when the row has disabled sub rows or when some rows are filtered out.
+- [#2009](https://github.com/iTwin/iTwinUI/pull/2009): Fixed an issue where `Popover` wasn't respecting the `ThemeProvider`'s `portalContainer`.
+- [#2011](https://github.com/iTwin/iTwinUI/pull/2011): When `ThemeProvider` is portaled into popup windows, it will now automatically create a portal container in the correct document, avoiding the need to manually specify `portalContainer`.
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): The small sized `TablePaginator`'s buttons are now squares instead of rectangles. This makes it consistent with the shape of the regular sized `TablePaginator` buttons.
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): The hover styling of `Breadcrumbs.Item` has been made more consistent across buttons and anchors.
+
 ## 3.9.1
 
 ### Patch Changes

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -102,10 +102,9 @@ const ListItem = ({ item, isActive, }) => {
 const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(index_js_1.SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { children: childrenProp, className, ...rest } = props;
+    const { children, className, ...rest } = props;
     const defaultAs = !!props.href ? Anchor_js_1.Anchor : !!props.onClick ? 'button' : 'span';
-    const children = defaultAs === 'button' ? React.createElement("span", null, childrenProp) : childrenProp;
-    return (React.createElement(index_js_1.Box, { as: defaultAs, className: (0, classnames_1.default)('iui-breadcrumbs-content', className), ref: forwardedRef, ...rest }, children));
+    return (React.createElement(Button_js_1.Button, { as: defaultAs, className: (0, classnames_1.default)('iui-breadcrumbs-content', className), styleType: 'borderless', ref: forwardedRef, ...rest }, children));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------

package/cjs/core/Buttons/Button.js

@@ -45,7 +45,7 @@ const index_js_1 = require("../../utils/index.js");
  */
 exports.Button = React.forwardRef((props, ref) => {
     const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, ...rest } = props;
-    return (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest, style: {
+    return (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', 'iui-field', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest, style: {
             '--_iui-width': stretched ? '100%' : undefined,
             ...props.style,
         } },

package/cjs/core/Buttons/IconButton.js

@@ -47,7 +47,7 @@ const ButtonGroup_js_1 = require("../ButtonGroup/ButtonGroup.js");
 exports.IconButton = React.forwardRef((props, ref) => {
     const { isActive, children, styleType = 'default', size, className, label, iconProps, labelProps, ...rest } = props;
     const buttonGroupOrientation = React.useContext(ButtonGroup_js_1.ButtonGroupContext);
-    const button = (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, "aria-pressed": isActive, ...rest },
+    const button = (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', 'iui-field', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, "aria-pressed": isActive, ...rest },
         React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...iconProps, className: (0, classnames_1.default)('iui-button-icon', iconProps?.className) }, children),
         label ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, label) : null));
     return label ? (React.createElement(Tooltip_js_1.Tooltip, { placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top', ...labelProps, content: label, ariaStrategy: 'none' }, button)) : (button);

package/cjs/core/Buttons/IdeasButton.js

@@ -22,12 +22,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IdeasButton = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
 const Button_js_1 = require("./Button.js");
@@ -37,6 +41,6 @@ const Button_js_1 = require("./Button.js");
  * <IdeasButton />
  */
 exports.IdeasButton = React.forwardRef((props, ref) => {
-    const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
-    return (React.createElement(Button_js_1.Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(index_js_1.SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
+    const { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
+    return (React.createElement(Button_js_1.Button, { ref: ref, className: (0, classnames_1.default)('iui-button-idea', className), "data-iui-variant": 'high-visibility', onClick: onClick, startIcon: React.createElement(index_js_1.SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });

package/cjs/core/ComboBox/ComboBox.js

@@ -308,7 +308,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
         onVisibleChange: (open) => (open ? show() : hide()),
         matchWidth: true,
         closeOnOutsideClick: true,
-        trigger: { focus: true },
+        interactions: { click: false, focus: true },
     });
     return (React.createElement(helpers_js_1.ComboBoxRefsContext.Provider, { value: { inputRef, menuRef, optionsExtraInfoRef } },
         React.createElement(helpers_js_1.ComboBoxActionContext.Provider, { value: dispatch },

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -32,6 +32,8 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
 const Menu_js_1 = require("../Menu/Menu.js");
 const Popover_js_1 = require("../Popover/Popover.js");
+const react_1 = require("@floating-ui/react");
+const MenuItem_js_1 = require("../Menu/MenuItem.js");
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.
@@ -52,6 +54,11 @@ const Popover_js_1 = require("../Popover/Popover.js");
  * </DropdownMenu>
  */
 exports.DropdownMenu = React.forwardRef((props, forwardedRef) => {
+    return (React.createElement(react_1.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] = (0, index_js_1.useControlledState)(false, visibleProp, onVisibleChange);
     const triggerRef = React.useRef(null);
@@ -65,11 +72,23 @@ exports.DropdownMenu = React.forwardRef((props, forwardedRef) => {
         }
         return menuItems;
     }, [menuItems, close]);
+    const [currentFocusedNodeIndex, setCurrentFocusedNodeIndex] = React.useState(null);
+    const focusableNodes = React.useRef([]);
+    const nodeId = (0, react_1.useFloatingNodeId)();
     const popover = (0, Popover_js_1.usePopover)({
+        nodeId,
         visible,
         onVisibleChange: (open) => (open ? setVisible(true) : close()),
         placement,
         matchWidth,
+        interactions: {
+            listNavigation: {
+                activeIndex: currentFocusedNodeIndex,
+                onNavigate: setCurrentFocusedNodeIndex,
+                listRef: focusableNodes,
+                focusItemOnOpen: true,
+            },
+        },
     });
     const popoverRef = (0, index_js_1.useMergedRefs)(forwardedRef, popover.refs.setFloating);
     return (React.createElement(React.Fragment, null,
@@ -78,17 +97,21 @@ exports.DropdownMenu = React.forwardRef((props, forwardedRef) => {
             'aria-expanded': popover.open,
             ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
         })),
-        popover.open && (React.createElement(index_js_1.Portal, { portal: portal },
-            React.createElement(Menu_js_1.Menu, { ...popover.getFloatingProps({
-                    role,
-                    ...rest,
-                    onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, (e) => {
-                        if (e.defaultPrevented) {
-                            return;
-                        }
-                        if (e.key === 'Tab') {
-                            close();
-                        }
-                    }),
-                }), ref: popoverRef }, menuContent)))));
+        React.createElement(react_1.FloatingNode, { id: nodeId }, popover.open && (React.createElement(index_js_1.Portal, { portal: portal },
+            React.createElement(MenuItem_js_1.MenuItemContext.Provider, { value: {
+                    setCurrentFocusedNodeIndex,
+                    focusableNodes,
+                } },
+                React.createElement(Menu_js_1.Menu, { setFocus: false, ...popover.getFloatingProps({
+                        role,
+                        ...rest,
+                        onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, (e) => {
+                            if (e.defaultPrevented) {
+                                return;
+                            }
+                            if (e.key === 'Tab') {
+                                close();
+                            }
+                        }),
+                    }), ref: popoverRef }, menuContent)))))));
 });

package/cjs/core/Input/Input.js

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

package/cjs/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/cjs/core/Menu/Menu.js

@@ -34,6 +34,7 @@ exports.Menu = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../../utils/index.js");
+const MenuItem_js_1 = require("./MenuItem.js");
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
@@ -42,11 +43,19 @@ exports.Menu = React.forwardRef((props, ref) => {
     const [focusedIndex, setFocusedIndex] = React.useState();
     const menuRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(menuRef, ref);
+    const menuItemContext = React.useContext(MenuItem_js_1.MenuItemContext);
     const getFocusableNodes = React.useCallback(() => {
         const focusableItems = (0, index_js_1.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/cjs/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/cjs/core/Menu/MenuItem.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = void 0;
+exports.MenuItem = exports.MenuItemContext = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -32,34 +32,78 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
 const Menu_js_1 = require("./Menu.js");
 const ListItem_js_1 = require("../List/ListItem.js");
-const react_dom_1 = require("react-dom");
 const Popover_js_1 = require("../Popover/Popover.js");
+const react_1 = require("@floating-ui/react");
+const logWarningInDev = (0, index_js_1.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: () => { } });
+exports.MenuItemContext = React.createContext({
+    setCurrentFocusedNodeIndex: () => { },
+    focusableNodes: { current: [] },
+    setHasFocusedNodeInSubmenu: undefined,
+});
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
 exports.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(exports.MenuItemContext);
     const menuItemRef = React.useRef(null);
-    const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
     const submenuId = (0, index_js_1.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 = (0, react_1.useFloatingNodeId)();
+    const tree = (0, react_1.useFloatingTree)();
+    const parentId = (0, react_1.useFloatingParentNodeId)();
+    const focusableNodeIndexInParentTree = parent.focusableNodes.current.findIndex((el) => el === menuItemRef.current);
+    (0, index_js_1.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 = (0, Popover_js_1.usePopover)({
-        visible: isSubmenuVisible || isNestedSubmenuVisible,
-        onVisibleChange,
+        nodeId,
+        visible: isSubmenuVisible,
+        onVisibleChange: React.useCallback((visible) => {
+            if (!visible) {
+                setHasFocusedNodeInSubmenu(false);
+            }
+            setIsSubmenuVisible(visible);
+        }, []),
         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) {
@@ -69,61 +113,65 @@ exports.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
-                    (0, react_dom_1.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 = () => {
+        // 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,
+        });
     };
-    return (React.createElement(ListItem_js_1.ListItem, { as: 'div', actionable: true, size: size, active: isSelected, disabled: disabled, ref: (0, index_js_1.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_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
-        React.createElement(ListItem_js_1.ListItem.Content, null,
-            React.createElement("div", null, children),
-            sublabel && React.createElement(ListItem_js_1.ListItem.Description, null, sublabel)),
-        !endIcon && subMenuItems.length > 0 && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true },
-            React.createElement(index_js_1.SvgCaretRightSmall, null))),
-        endIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon)),
-        subMenuItems.length > 0 && popover.open && (React.createElement(index_js_1.Portal, null,
-            React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
-                React.createElement(Menu_js_1.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_js_1.ListItem, { as: 'div', actionable: true, size: size, active: isSelected, disabled: disabled, ref: (0, index_js_1.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_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
+            React.createElement(ListItem_js_1.ListItem.Content, null,
+                React.createElement("div", null, children),
+                sublabel && React.createElement(ListItem_js_1.ListItem.Description, null, sublabel)),
+            !endIcon && subMenuItems.length > 0 && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true },
+                React.createElement(index_js_1.SvgCaretRightSmall, null))),
+            endIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))),
+        subMenuItems.length > 0 && !disabled && popover.open && (React.createElement(react_1.FloatingNode, { id: nodeId },
+            React.createElement(index_js_1.Portal, null,
+                React.createElement(exports.MenuItemContext.Provider, { value: {
+                        setCurrentFocusedNodeIndex,
+                        focusableNodes,
+                        setHasFocusedNodeInSubmenu,
+                    } },
+                    React.createElement(Menu_js_1.Menu, { setFocus: false, ref: popover.refs.setFloating, ...popover.getFloatingProps({ id: submenuId }) }, subMenuItems)))))));
 });

package/cjs/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;
 };