@itwin/itwinui-react 3.17.1 → 3.17.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 3.17.3
+
+### Patch Changes
+
+- [#2452](https://github.com/iTwin/iTwinUI/pull/2452): Fixed bug where nested `MenuItem`s in `Tile.MoreOptions` were not closing when clicked.
+- [#2455](https://github.com/iTwin/iTwinUI/pull/2455): Submenus will now correctly portal to the same place as their parent menu (E.g. `DropdownMenu`, `SplitButton`)
+- [#2457](https://github.com/iTwin/iTwinUI/pull/2457): Fixed bug in `ExpandableBlock` where cursor was `pointer` even when it was disabled.
+
+## 3.17.2
+
+### Patch Changes
+
+- [#2442](https://github.com/iTwin/iTwinUI/pull/2442): Removed a leftover `@layer` name, which was originally intended to support _very_ old versions of iTwinUI.
+- [#2443](https://github.com/iTwin/iTwinUI/pull/2443): Fixed bug in `Modal` where focus was sometimes jumping from a modal child to the modal itself.
+- [#2431](https://github.com/iTwin/iTwinUI/pull/2431): Force text wrapping for long words. Affected components: `Text`, `NonIdealState`, `Stepper`, `WorkflowDiagram`.
+- [#2446](https://github.com/iTwin/iTwinUI/pull/2446): Fixed background color in menus when the [theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge) is enabled.
+
 ## 3.17.1
 
 ### Patch Changes

package/DEV-cjs/core/Dialog/DialogMain.js

@@ -107,7 +107,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
       dialogRef.current?.focus({
         preventScroll: true,
       });
-  }, [dialogRef, previousFocusedElement, setFocus]);
+  }, [setFocus]);
   let beforeClose = _react.useCallback(() => {
     if (
       dialogRef.current?.contains(

package/DEV-cjs/core/DropdownMenu/DropdownMenu.js

@@ -2,11 +2,23 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'DropdownMenu', {
-  enumerable: true,
-  get: function () {
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  DropdownMenu: function () {
     return DropdownMenu;
   },
+  DropdownMenuCloseOnClickContext: function () {
+    return DropdownMenuCloseOnClickContext;
+  },
+  DropdownMenuContext: function () {
+    return DropdownMenuContext;
+  },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
@@ -42,34 +54,50 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     visibleProp,
     onVisibleChange,
   );
+  let close = _react.useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
   let menuContent = _react.useMemo(() => {
-    if ('function' == typeof menuItems)
-      return menuItems(() => setVisible(false));
+    if ('function' == typeof menuItems) return menuItems(close);
     return menuItems;
-  }, [menuItems, setVisible]);
+  }, [close, menuItems]);
+  let dropdownMenuContextValue = _react.useMemo(
+    () => ({
+      close,
+    }),
+    [close],
+  );
   return _react.createElement(
-    _Menu.Menu,
+    DropdownMenuContext.Provider,
     {
-      trigger: children,
-      onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (e) => {
-        if (e.defaultPrevented) return;
-        if ('Tab' === e.key) setVisible(false);
-      }),
-      role: role,
-      ref: forwardedRef,
-      portal: portal,
-      popoverProps: _react.useMemo(
-        () => ({
-          placement,
-          matchWidth,
-          visible,
-          onVisibleChange: setVisible,
-          middleware,
-        }),
-        [matchWidth, middleware, placement, setVisible, visible],
-      ),
-      ...rest,
+      value: dropdownMenuContextValue,
     },
-    menuContent,
+    _react.createElement(
+      _Menu.Menu,
+      {
+        trigger: children,
+        onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (e) => {
+          if (e.defaultPrevented) return;
+          if ('Tab' === e.key) setVisible(false);
+        }),
+        role: role,
+        ref: forwardedRef,
+        portal: portal,
+        popoverProps: _react.useMemo(
+          () => ({
+            placement,
+            matchWidth,
+            visible,
+            onVisibleChange: setVisible,
+            middleware,
+          }),
+          [matchWidth, middleware, placement, setVisible, visible],
+        ),
+        ...rest,
+      },
+      menuContent,
+    ),
   );
 });
+const DropdownMenuContext = _react.createContext(void 0);
+const DropdownMenuCloseOnClickContext = _react.createContext(void 0);

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

@@ -16,6 +16,9 @@ _export(exports, {
   MenuContext: function () {
     return MenuContext;
   },
+  MenuPortalContext: function () {
+    return MenuPortalContext;
+  },
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
@@ -31,11 +34,13 @@ const Menu = _react.forwardRef((props, ref) => {
     className,
     trigger,
     positionReference,
-    portal = true,
+    portal: portalProp,
     popoverProps: popoverPropsProp,
     children,
     ...rest
   } = props;
+  let menuPortalContext = _react.useContext(MenuPortalContext);
+  let portal = portalProp ?? menuPortalContext;
   let tree = (0, _react1.useFloatingTree)();
   let nodeId = (0, _react1.useFloatingNodeId)();
   let parentId = (0, _react1.useFloatingParentNodeId)();
@@ -134,35 +139,39 @@ const Menu = _react.forwardRef((props, ref) => {
     () => void 0,
     () => void 0,
   );
-  let popoverGetItemProps = ({ focusableItemIndex, userProps }) =>
-    getItemProps({
-      ...userProps,
-      tabIndex:
-        null != activeIndex &&
-        activeIndex >= 0 &&
-        null != focusableItemIndex &&
-        focusableItemIndex >= 0 &&
-        activeIndex === focusableItemIndex
-          ? 0
-          : -1,
-      onFocus: (0, _index.mergeEventHandlers)(userProps?.onFocus, () => {
-        queueMicrotask(() => {
-          setHasFocusedNodeInSubmenu(true);
-        });
-        tree?.events.emit('onNodeFocused', {
-          nodeId: nodeId,
-          parentId: parentId,
-        });
+  let popoverGetItemProps = _react.useCallback(
+    ({ focusableItemIndex, userProps }) =>
+      getItemProps({
+        ...userProps,
+        tabIndex:
+          null != activeIndex &&
+          activeIndex >= 0 &&
+          null != focusableItemIndex &&
+          focusableItemIndex >= 0 &&
+          activeIndex === focusableItemIndex
+            ? 0
+            : -1,
+        onFocus: (0, _index.mergeEventHandlers)(userProps?.onFocus, () => {
+          queueMicrotask(() => {
+            setHasFocusedNodeInSubmenu(true);
+          });
+          tree?.events.emit('onNodeFocused', {
+            nodeId: nodeId,
+            parentId: parentId,
+          });
+        }),
+        onMouseEnter: (0, _index.mergeEventHandlers)(
+          userProps?.onMouseEnter,
+          (event) => {
+            if (null != focusableItemIndex && focusableItemIndex >= 0)
+              setActiveIndex(focusableItemIndex);
+            if (event.target === event.currentTarget)
+              event.currentTarget.focus();
+          },
+        ),
       }),
-      onMouseEnter: (0, _index.mergeEventHandlers)(
-        userProps?.onMouseEnter,
-        (event) => {
-          if (null != focusableItemIndex && focusableItemIndex >= 0)
-            setActiveIndex(focusableItemIndex);
-          if (event.target === event.currentTarget) event.currentTarget.focus();
-        },
-      ),
-    });
+    [activeIndex, getItemProps, nodeId, parentId, tree?.events],
+  );
   let reference = (0, _index.cloneElementWithRef)(trigger, (triggerChild) =>
     getReferenceProps(
       popover.getReferenceProps({
@@ -201,28 +210,38 @@ const Menu = _react.forwardRef((props, ref) => {
     _react.createElement(
       MenuContext.Provider,
       {
-        value: {
-          popoverGetItemProps,
-          focusableElements,
-        },
+        value: _react.useMemo(
+          () => ({
+            popoverGetItemProps,
+            focusableElements,
+          }),
+          [focusableElements, popoverGetItemProps],
+        ),
       },
       _react.createElement(
-        _Popover.PopoverOpenContext.Provider,
+        MenuPortalContext.Provider,
         {
-          value: popover.open,
+          value: portal,
         },
-        reference,
+        _react.createElement(
+          _Popover.PopoverOpenContext.Provider,
+          {
+            value: popover.open,
+          },
+          reference,
+        ),
+        null != tree
+          ? _react.createElement(
+              _react1.FloatingNode,
+              {
+                id: nodeId,
+              },
+              floating,
+            )
+          : floating,
       ),
-      null != tree
-        ? _react.createElement(
-            _react1.FloatingNode,
-            {
-              id: nodeId,
-            },
-            floating,
-          )
-        : floating,
     ),
   );
 });
 const MenuContext = _react.createContext(void 0);
+const MenuPortalContext = _react.createContext(void 0);

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

@@ -17,6 +17,7 @@ const _ListItem = require('../List/ListItem.js');
 const _classnames = /*#__PURE__*/ _interop_require_default._(
   require('classnames'),
 );
+const _DropdownMenu = require('../DropdownMenu/DropdownMenu.js');
 const MenuItem = _react.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -41,6 +42,10 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       '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(_Menu.MenuContext);
+  let dropdownMenu = _react.useContext(_DropdownMenu.DropdownMenuContext);
+  let shouldCloseMenuOnClick = _react.useContext(
+    _DropdownMenu.DropdownMenuCloseOnClickContext,
+  );
   let menuItemRef = _react.useRef(null);
   let submenuId = (0, _index.useId)();
   let popoverProps = _react.useMemo(
@@ -59,6 +64,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
   );
   let onClick = () => {
     if (disabled) return;
+    if (shouldCloseMenuOnClick) dropdownMenu?.close();
     onClickProp?.(value);
   };
   let handlers = {

package/DEV-cjs/core/Tile/Tile.js

@@ -211,41 +211,39 @@ const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
   return _react.createElement(
-    _index.Box,
+    _DropdownMenu.DropdownMenuCloseOnClickContext.Provider,
     {
-      className: (0, _classnames.default)(
-        'iui-tile-more-options',
-        {
-          'iui-visible': isMenuVisible,
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
+      value: true,
     },
     _react.createElement(
-      _DropdownMenu.DropdownMenu,
+      _index.Box,
       {
-        onVisibleChange: setIsMenuVisible,
-        menuItems: (close) =>
-          children?.map((option) =>
-            _react.cloneElement(option, {
-              onClick: (value) => {
-                close();
-                option.props.onClick?.(value);
-              },
-            }),
-          ),
+        className: (0, _classnames.default)(
+          'iui-tile-more-options',
+          {
+            'iui-visible': isMenuVisible,
+          },
+          className,
+        ),
+        ref: forwardedRef,
+        ...rest,
       },
       _react.createElement(
-        _IconButton.IconButton,
+        _DropdownMenu.DropdownMenu,
         {
-          styleType: 'borderless',
-          size: 'small',
-          'aria-label': 'More options',
-          ...buttonProps,
+          onVisibleChange: setIsMenuVisible,
+          menuItems: children,
         },
-        _react.createElement(_index.SvgMore, null),
+        _react.createElement(
+          _IconButton.IconButton,
+          {
+            styleType: 'borderless',
+            size: 'small',
+            'aria-label': 'More options',
+            ...buttonProps,
+          },
+          _react.createElement(_index.SvgMore, null),
+        ),
       ),
     ),
   );

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.17.1';
+const e = '3.17.3';
 const u = new Proxy(
   {},
   {

package/DEV-cjs/utils/components/FocusTrap.js

@@ -11,37 +11,42 @@ Object.defineProperty(exports, 'FocusTrap', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _focusable = require('../functions/focusable.js');
-const _react1 = require('../functions/react.js');
 const FocusTrap = (props) => {
   let { children } = props;
-  let childRef = _react.useRef(void 0);
-  let getFirstLastFocusables = () => {
-    let elements = (0, _focusable.getTabbableElements)(childRef.current);
+  let firstFocusTrapRef = _react.useRef(null);
+  let getFirstLastFocusables = _react.useCallback(() => {
+    let childrenElement = firstFocusTrapRef.current?.nextElementSibling;
+    let elements = (0, _focusable.getTabbableElements)(childrenElement);
     let firstElement = elements[0];
     let lastElement = elements[(elements.length || 1) - 1];
     return [firstElement, lastElement];
-  };
-  let onFirstFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === firstElement) lastElement?.focus();
-    else firstElement?.focus();
-  };
-  let onLastFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === lastElement) firstElement?.focus();
-    else lastElement?.focus();
-  };
+  }, []);
+  let onFirstFocus = _react.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === firstElement) lastElement?.focus();
+      else firstElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
+  let onLastFocus = _react.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === lastElement) firstElement?.focus();
+      else lastElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
   return _react.createElement(
     _react.Fragment,
     null,
     _react.createElement('div', {
+      ref: firstFocusTrapRef,
       tabIndex: 0,
       onFocus: onFirstFocus,
       'aria-hidden': true,
     }),
-    (0, _react1.cloneElementWithRef)(children, () => ({
-      ref: childRef,
-    })),
+    children,
     _react.createElement('div', {
       tabIndex: 0,
       onFocus: onLastFocus,

package/DEV-esm/core/Dialog/DialogMain.js

@@ -101,7 +101,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
       dialogRef.current?.focus({
         preventScroll: true,
       });
-  }, [dialogRef, previousFocusedElement, setFocus]);
+  }, [setFocus]);
   let beforeClose = React.useCallback(() => {
     if (
       dialogRef.current?.contains(

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

@@ -31,34 +31,50 @@ let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     visibleProp,
     onVisibleChange,
   );
+  let close = React.useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
   let menuContent = React.useMemo(() => {
-    if ('function' == typeof menuItems)
-      return menuItems(() => setVisible(false));
+    if ('function' == typeof menuItems) return menuItems(close);
     return menuItems;
-  }, [menuItems, setVisible]);
+  }, [close, menuItems]);
+  let dropdownMenuContextValue = React.useMemo(
+    () => ({
+      close,
+    }),
+    [close],
+  );
   return React.createElement(
-    Menu,
+    DropdownMenuContext.Provider,
     {
-      trigger: children,
-      onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-        if (e.defaultPrevented) return;
-        if ('Tab' === e.key) setVisible(false);
-      }),
-      role: role,
-      ref: forwardedRef,
-      portal: portal,
-      popoverProps: React.useMemo(
-        () => ({
-          placement,
-          matchWidth,
-          visible,
-          onVisibleChange: setVisible,
-          middleware,
-        }),
-        [matchWidth, middleware, placement, setVisible, visible],
-      ),
-      ...rest,
+      value: dropdownMenuContextValue,
     },
-    menuContent,
+    React.createElement(
+      Menu,
+      {
+        trigger: children,
+        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+          if (e.defaultPrevented) return;
+          if ('Tab' === e.key) setVisible(false);
+        }),
+        role: role,
+        ref: forwardedRef,
+        portal: portal,
+        popoverProps: React.useMemo(
+          () => ({
+            placement,
+            matchWidth,
+            visible,
+            onVisibleChange: setVisible,
+            middleware,
+          }),
+          [matchWidth, middleware, placement, setVisible, visible],
+        ),
+        ...rest,
+      },
+      menuContent,
+    ),
   );
 });
+export const DropdownMenuContext = React.createContext(void 0);
+export const DropdownMenuCloseOnClickContext = React.createContext(void 0);

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

@@ -25,11 +25,13 @@ export const Menu = React.forwardRef((props, ref) => {
     className,
     trigger,
     positionReference,
-    portal = true,
+    portal: portalProp,
     popoverProps: popoverPropsProp,
     children,
     ...rest
   } = props;
+  let menuPortalContext = React.useContext(MenuPortalContext);
+  let portal = portalProp ?? menuPortalContext;
   let tree = useFloatingTree();
   let nodeId = useFloatingNodeId();
   let parentId = useFloatingParentNodeId();
@@ -125,32 +127,35 @@ export const Menu = React.forwardRef((props, ref) => {
     () => 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,
-        });
+  let popoverGetItemProps = React.useCallback(
+    ({ 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();
+        }),
       }),
-      onMouseEnter: mergeEventHandlers(userProps?.onMouseEnter, (event) => {
-        if (null != focusableItemIndex && focusableItemIndex >= 0)
-          setActiveIndex(focusableItemIndex);
-        if (event.target === event.currentTarget) event.currentTarget.focus();
-      }),
-    });
+    [activeIndex, getItemProps, nodeId, parentId, tree?.events],
+  );
   let reference = cloneElementWithRef(trigger, (triggerChild) =>
     getReferenceProps(
       popover.getReferenceProps({
@@ -189,28 +194,38 @@ export const Menu = React.forwardRef((props, ref) => {
     React.createElement(
       MenuContext.Provider,
       {
-        value: {
-          popoverGetItemProps,
-          focusableElements,
-        },
+        value: React.useMemo(
+          () => ({
+            popoverGetItemProps,
+            focusableElements,
+          }),
+          [focusableElements, popoverGetItemProps],
+        ),
       },
       React.createElement(
-        PopoverOpenContext.Provider,
+        MenuPortalContext.Provider,
         {
-          value: popover.open,
+          value: portal,
         },
-        reference,
+        React.createElement(
+          PopoverOpenContext.Provider,
+          {
+            value: popover.open,
+          },
+          reference,
+        ),
+        null != tree
+          ? React.createElement(
+              FloatingNode,
+              {
+                id: nodeId,
+              },
+              floating,
+            )
+          : floating,
       ),
-      null != tree
-        ? React.createElement(
-            FloatingNode,
-            {
-              id: nodeId,
-            },
-            floating,
-          )
-        : floating,
     ),
   );
 });
 export const MenuContext = React.createContext(void 0);
+export const MenuPortalContext = React.createContext(void 0);