@itwin/itwinui-react 3.10.0 → 3.10.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

package/cjs/core/Menu/MenuItem.js

@@ -83,7 +83,12 @@ exports.MenuItem = React.forwardRef((props, forwardedRef) => {
     const popover = (0, Popover_js_1.usePopover)({
         nodeId,
         visible: isSubmenuVisible,
-        onVisibleChange: setIsSubmenuVisible,
+        onVisibleChange: React.useCallback((visible) => {
+            if (!visible) {
+                setHasFocusedNodeInSubmenu(false);
+            }
+            setIsSubmenuVisible(visible);
+        }, []),
         placement: 'right-start',
         interactions: !disabled
             ? {
@@ -128,7 +133,11 @@ exports.MenuItem = React.forwardRef((props, forwardedRef) => {
         }
     };
     const onFocus = () => {
-        parent.setHasFocusedNodeInSubmenu?.(true);
+        // 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,

package/cjs/core/Popover/Popover.js

@@ -90,7 +90,10 @@ const usePopover = (options) => {
         (0, react_1.useHover)(floating.context, {
             enabled: !!mergedInteractions.hover,
             delay: 100,
-            handleClose: (0, react_1.safePolygon)({ buffer: 1, requireIntent: false }),
+            handleClose: (0, react_1.safePolygon)({
+                buffer: 1,
+                blockPointerEvents: true,
+            }),
             move: false,
             ...mergedInteractions.hover,
         }),

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+export declare const SidenavExpandedContext: React.Context<boolean | undefined>;
 type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.

package/cjs/core/SideNavigation/SideNavigation.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SideNavigation = void 0;
+exports.SideNavigation = exports.SidenavExpandedContext = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -35,7 +35,8 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
-const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
+// ----------------------------------------------------------------------------
+exports.SidenavExpandedContext = React.createContext(undefined);
 /**
  * Left side navigation menu component.
  * @example
@@ -51,25 +52,23 @@ const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
  * />
  */
 exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
-    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        _setIsExpanded(isExpanded);
-    }, [isExpanded]);
-    const ExpandButton = (React.createElement(IconButton_js_1.IconButton, { label: 'Toggle icon labels', "aria-expanded": _isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
-            _setIsExpanded((expanded) => !expanded);
+    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
+    const [isExpanded, setIsExpanded] = (0, index_js_1.useControlledState)(false, isExpandedProp);
+    const ExpandButton = (React.createElement(IconButton_js_1.IconButton, { label: 'Toggle icon labels', "aria-expanded": isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
+            setIsExpanded((expanded) => !expanded);
             onExpanderClick?.();
-        }, [onExpanderClick]) },
+        }, [onExpanderClick, setIsExpanded]) },
         React.createElement(index_js_1.SvgChevronRight, null)));
-    return (React.createElement(index_js_1.Box, { ...wrapperProps, className: (0, classnames_1.default)('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
-        React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }, className), ...rest },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-sidenav-content', contentProps?.className) },
-                React.createElement(index_js_1.Box, { as: 'div', ...topProps, className: (0, classnames_1.default)('iui-top', topProps?.className) }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(index_js_1.Box, { as: 'div', ...bottomProps, className: (0, classnames_1.default)('iui-bottom', bottomProps?.className) }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
-            expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+    return (React.createElement(exports.SidenavExpandedContext.Provider, { value: isExpanded },
+        React.createElement(index_js_1.Box, { ...wrapperProps, className: (0, classnames_1.default)('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
+            React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-side-navigation', {
+                    'iui-expanded': isExpanded,
+                    'iui-collapsed': !isExpanded,
+                }, className), ...rest },
+                expanderPlacement === 'top' && ExpandButton,
+                React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-sidenav-content', contentProps?.className) },
+                    React.createElement(index_js_1.Box, { as: 'div', ...topProps, className: (0, classnames_1.default)('iui-top', topProps?.className) }, items),
+                    React.createElement(index_js_1.Box, { as: 'div', ...bottomProps, className: (0, classnames_1.default)('iui-bottom', bottomProps?.className) }, secondaryItems)),
+                expanderPlacement === 'bottom' && ExpandButton),
+            submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu)))));
 });

package/cjs/core/SideNavigation/SidenavButton.js

@@ -34,11 +34,15 @@ exports.SidenavButton = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Button_js_1 = require("../Buttons/Button.js");
+const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
+const SideNavigation_js_1 = require("./SideNavigation.js");
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 exports.SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    return (React.createElement(Button_js_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    const isExpanded = React.useContext(SideNavigation_js_1.SidenavExpandedContext) === true;
+    const sidenavButton = (React.createElement(Button_js_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    return !isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: children, placement: 'right', ariaStrategy: 'none' }, sidenavButton)) : (sidenavButton);
 });

package/esm/core/Menu/MenuItem.js

@@ -57,7 +57,12 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     const popover = usePopover({
         nodeId,
         visible: isSubmenuVisible,
-        onVisibleChange: setIsSubmenuVisible,
+        onVisibleChange: React.useCallback((visible) => {
+            if (!visible) {
+                setHasFocusedNodeInSubmenu(false);
+            }
+            setIsSubmenuVisible(visible);
+        }, []),
         placement: 'right-start',
         interactions: !disabled
             ? {
@@ -102,7 +107,11 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
         }
     };
     const onFocus = () => {
-        parent.setHasFocusedNodeInSubmenu?.(true);
+        // 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,

package/esm/core/Popover/Popover.js

@@ -61,7 +61,10 @@ export const usePopover = (options) => {
         useHover(floating.context, {
             enabled: !!mergedInteractions.hover,
             delay: 100,
-            handleClose: safePolygon({ buffer: 1, requireIntent: false }),
+            handleClose: safePolygon({
+                buffer: 1,
+                blockPointerEvents: true,
+            }),
             move: false,
             ...mergedInteractions.hover,
         }),

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+export declare const SidenavExpandedContext: React.Context<boolean | undefined>;
 type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.

package/esm/core/SideNavigation/SideNavigation.js

@@ -4,9 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { WithCSSTransition, SvgChevronRight, Box } from '../../utils/index.js';
+import { WithCSSTransition, SvgChevronRight, Box, useControlledState, } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
+// ----------------------------------------------------------------------------
+export const SidenavExpandedContext = React.createContext(undefined);
 /**
  * Left side navigation menu component.
  * @example
@@ -22,25 +23,23 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
  * />
  */
 export const SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
-    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        _setIsExpanded(isExpanded);
-    }, [isExpanded]);
-    const ExpandButton = (React.createElement(IconButton, { label: 'Toggle icon labels', "aria-expanded": _isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
-            _setIsExpanded((expanded) => !expanded);
+    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
+    const [isExpanded, setIsExpanded] = useControlledState(false, isExpandedProp);
+    const ExpandButton = (React.createElement(IconButton, { label: 'Toggle icon labels', "aria-expanded": isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
+            setIsExpanded((expanded) => !expanded);
             onExpanderClick?.();
-        }, [onExpanderClick]) },
+        }, [onExpanderClick, setIsExpanded]) },
         React.createElement(SvgChevronRight, null)));
-    return (React.createElement(Box, { ...wrapperProps, className: cx('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
-        React.createElement(Box, { as: 'div', className: cx('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }, className), ...rest },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-sidenav-content', contentProps?.className) },
-                React.createElement(Box, { as: 'div', ...topProps, className: cx('iui-top', topProps?.className) }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(Box, { as: 'div', ...bottomProps, className: cx('iui-bottom', bottomProps?.className) }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
-            expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+    return (React.createElement(SidenavExpandedContext.Provider, { value: isExpanded },
+        React.createElement(Box, { ...wrapperProps, className: cx('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
+            React.createElement(Box, { as: 'div', className: cx('iui-side-navigation', {
+                    'iui-expanded': isExpanded,
+                    'iui-collapsed': !isExpanded,
+                }, className), ...rest },
+                expanderPlacement === 'top' && ExpandButton,
+                React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-sidenav-content', contentProps?.className) },
+                    React.createElement(Box, { as: 'div', ...topProps, className: cx('iui-top', topProps?.className) }, items),
+                    React.createElement(Box, { as: 'div', ...bottomProps, className: cx('iui-bottom', bottomProps?.className) }, secondaryItems)),
+                expanderPlacement === 'bottom' && ExpandButton),
+            submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu)))));
 });

package/esm/core/SideNavigation/SidenavButton.js

@@ -5,11 +5,15 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { SidenavExpandedContext } from './SideNavigation.js';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 export const SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    return (React.createElement(Button, { className: cx('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    const isExpanded = React.useContext(SidenavExpandedContext) === true;
+    const sidenavButton = (React.createElement(Button, { className: cx('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    return !isExpanded ? (React.createElement(Tooltip, { content: children, placement: 'right', ariaStrategy: 'none' }, sidenavButton)) : (sidenavButton);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",