@itwin/itwinui-react 3.17.2 → 3.17.4

package/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,
@@ -37,6 +38,10 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
   } = props;
   let logWarning = (0, _index.useWarningLogger)();
   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(
@@ -55,6 +60,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
   );
   let onClick = () => {
     if (disabled) return;
+    if (shouldCloseMenuOnClick) dropdownMenu?.close();
     onClickProp?.(value);
   };
   let handlers = {

package/cjs/core/Tabs/Tabs.js

@@ -83,7 +83,9 @@ const TabsWrapper = _react.forwardRef((props, ref) => {
 });
 const TabList = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
-  let { type, hasSublabel, color } = (0, _index.useSafeContext)(TabsContext);
+  let { type, hasSublabel, color, orientation } = (0, _index.useSafeContext)(
+    TabsContext,
+  );
   let isClient = (0, _index.useIsClient)();
   let tablistRef = _react.useRef(null);
   let [tablistSizeRef, tabsWidth] = (0, _index.useContainerWidth)(
@@ -109,6 +111,7 @@ const TabList = _react.forwardRef((props, ref) => {
         },
         className,
       ),
+      'data-iui-orientation': orientation,
       role: 'tablist',
       ref: refs,
       ...rest,
@@ -154,10 +157,12 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
     let updateStripe = () => {
       let currentTabRect = tabRef.current?.getBoundingClientRect();
       let tabslistRect = tablistRef.current?.getBoundingClientRect();
+      let currentTabLeftIncludingScroll =
+        (currentTabRect?.x ?? 0) + (tablistRef.current?.scrollLeft ?? 0);
       let tabsStripePosition =
         null != currentTabRect && null != tabslistRect
           ? {
-              horizontal: currentTabRect.x - tabslistRect.x,
+              horizontal: currentTabLeftIncludingScroll - tabslistRect.x,
               vertical: currentTabRect.y - tabslistRect.y,
             }
           : {

package/cjs/core/Tile/Tile.js

@@ -196,41 +196,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/cjs/core/Tree/Tree.js

@@ -216,29 +216,37 @@ const VirtualizedTree = _react.forwardRef(
         ref: (0, _index.useMergedRefs)(ref, parentRef),
       },
       _react.createElement(
-        _index.ShadowRoot,
+        'div',
         {
-          css: virtualizerCss,
+          style: {
+            display: 'contents',
+          },
         },
         _react.createElement(
-          'div',
+          _index.ShadowRoot,
           {
-            'data-iui-virtualizer': 'root',
-            style: {
-              minBlockSize: virtualizer.getTotalSize(),
-            },
+            css: virtualizerCss,
           },
-          _react.createElement('slot', null),
-        ),
-      ),
-      _react.createElement(
-        _react.Fragment,
-        null,
-        virtualizer
-          .getVirtualItems()
-          .map((virtualItem) =>
-            itemRenderer(virtualItem.index, virtualItem, virtualizer),
+          _react.createElement(
+            'div',
+            {
+              'data-iui-virtualizer': 'root',
+              style: {
+                minBlockSize: virtualizer.getTotalSize(),
+              },
+            },
+            _react.createElement('slot', null),
           ),
+        ),
+        _react.createElement(
+          _react.Fragment,
+          null,
+          virtualizer
+            .getVirtualItems()
+            .map((virtualItem) =>
+              itemRenderer(virtualItem.index, virtualItem, virtualizer),
+            ),
+        ),
       ),
     );
   },

package/cjs/styles.js

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

package/esm/core/ComboBox/ComboBox.js

@@ -367,27 +367,23 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
           disabled: inputProps?.disabled,
           ...rest,
         },
-        React.createElement(
-          React.Fragment,
-          null,
-          React.createElement(ComboBoxInput, {
-            value: inputValue,
-            disabled: inputProps?.disabled,
-            ...inputProps,
-            onChange: handleOnInput,
-            selectTags: isMultipleEnabled(selectedIndexes, multiple)
-              ? selectedIndexes
-                  ?.map((index) => {
-                    let item = options[index];
-                    return React.createElement(SelectTag, {
-                      key: item.label,
-                      label: item.label,
-                    });
-                  })
-                  .filter(Boolean)
-              : void 0,
-          }),
-        ),
+        React.createElement(ComboBoxInput, {
+          value: inputValue,
+          disabled: inputProps?.disabled,
+          ...inputProps,
+          onChange: handleOnInput,
+          selectTags: isMultipleEnabled(selectedIndexes, multiple)
+            ? selectedIndexes
+                ?.map((index) => {
+                  let item = options[index];
+                  return React.createElement(SelectTag, {
+                    key: item.label,
+                    label: item.label,
+                  });
+                })
+                .filter(Boolean)
+            : void 0,
+        }),
         React.createElement(ComboBoxEndIcon, {
           ...endIconProps,
           disabled: inputProps?.disabled,

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -59,8 +59,12 @@ let VirtualizedComboBoxMenu = (props) => {
     [filteredOptions, getMenuItem, children, virtualizer.measureElement],
   );
   return React.createElement(
-    React.Fragment,
-    null,
+    'div',
+    {
+      style: {
+        display: 'contents',
+      },
+    },
     React.createElement(
       ShadowRoot,
       {

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -48,3 +48,13 @@ export type DropdownMenuProps = {
  * </DropdownMenu>
  */
 export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
+export declare const DropdownMenuContext: React.Context<{
+    close: () => void;
+} | undefined>;
+/**
+ * @private
+ * Wraps around a `DropdownMenu`.
+ *
+ * If `true`, closes the `DropdownMenu` when any descendant `MenuItem` is clicked.
+ */
+export declare const DropdownMenuCloseOnClickContext: React.Context<boolean | undefined>;

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -30,34 +30,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/esm/core/Menu/Menu.d.ts

@@ -28,7 +28,12 @@ type MenuProps = {
             listNavigation?: Partial<UseListNavigationProps>;
         };
     };
-} & Pick<PortalProps, 'portal'>;
+    /**
+     * If not passed, uses the `portal` from its parent `Menu`.
+     * @see {@link PortalProps.portal} for docs on the prop.
+     */
+    portal?: PortalProps['portal'];
+};
 /**
  * @private
  *
@@ -92,4 +97,7 @@ export declare const MenuContext: React.Context<{
     popoverGetItemProps: PopoverGetItemProps;
     focusableElements: HTMLElement[];
 } | undefined>;
+export declare const MenuPortalContext: React.Context<boolean | {
+    to: HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
+} | undefined>;
 export {};

package/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);

package/esm/core/Menu/MenuItem.js

@@ -8,6 +8,10 @@ import {
 import { Menu, MenuContext } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 import cx from 'classnames';
+import {
+  DropdownMenuCloseOnClickContext,
+  DropdownMenuContext,
+} from '../DropdownMenu/DropdownMenu.js';
 export const MenuItem = React.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -28,6 +32,10 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
   } = props;
   let logWarning = useWarningLogger();
   let parentMenu = React.useContext(MenuContext);
+  let dropdownMenu = React.useContext(DropdownMenuContext);
+  let shouldCloseMenuOnClick = React.useContext(
+    DropdownMenuCloseOnClickContext,
+  );
   let menuItemRef = React.useRef(null);
   let submenuId = useId();
   let popoverProps = React.useMemo(
@@ -46,6 +54,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
   );
   let onClick = () => {
     if (disabled) return;
+    if (shouldCloseMenuOnClick) dropdownMenu?.close();
     onClickProp?.(value);
   };
   let handlers = {

package/esm/core/Tabs/Tabs.js

@@ -69,7 +69,7 @@ let TabsWrapper = React.forwardRef((props, ref) => {
 });
 let TabList = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
-  let { type, hasSublabel, color } = useSafeContext(TabsContext);
+  let { type, hasSublabel, color, orientation } = useSafeContext(TabsContext);
   let isClient = useIsClient();
   let tablistRef = React.useRef(null);
   let [tablistSizeRef, tabsWidth] = useContainerWidth('default' !== type);
@@ -93,6 +93,7 @@ let TabList = React.forwardRef((props, ref) => {
         },
         className,
       ),
+      'data-iui-orientation': orientation,
       role: 'tablist',
       ref: refs,
       ...rest,
@@ -138,10 +139,12 @@ let Tab = React.forwardRef((props, forwardedRef) => {
     let updateStripe = () => {
       let currentTabRect = tabRef.current?.getBoundingClientRect();
       let tabslistRect = tablistRef.current?.getBoundingClientRect();
+      let currentTabLeftIncludingScroll =
+        (currentTabRect?.x ?? 0) + (tablistRef.current?.scrollLeft ?? 0);
       let tabsStripePosition =
         null != currentTabRect && null != tabslistRect
           ? {
-              horizontal: currentTabRect.x - tabslistRect.x,
+              horizontal: currentTabLeftIncludingScroll - tabslistRect.x,
               vertical: currentTabRect.y - tabslistRect.y,
             }
           : {

package/esm/core/Tile/Tile.js

@@ -10,7 +10,10 @@ import {
   polymorphic,
   Box,
 } from '../../utils/index.js';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import {
+  DropdownMenu,
+  DropdownMenuCloseOnClickContext,
+} from '../DropdownMenu/DropdownMenu.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { LinkAction } from '../LinkAction/LinkAction.js';
@@ -174,41 +177,39 @@ let TileMoreOptions = React.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = React.useState(false);
   return React.createElement(
-    Box,
+    DropdownMenuCloseOnClickContext.Provider,
     {
-      className: cx(
-        'iui-tile-more-options',
-        {
-          'iui-visible': isMenuVisible,
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
+      value: true,
     },
     React.createElement(
-      DropdownMenu,
+      Box,
       {
-        onVisibleChange: setIsMenuVisible,
-        menuItems: (close) =>
-          children?.map((option) =>
-            React.cloneElement(option, {
-              onClick: (value) => {
-                close();
-                option.props.onClick?.(value);
-              },
-            }),
-          ),
+        className: cx(
+          'iui-tile-more-options',
+          {
+            'iui-visible': isMenuVisible,
+          },
+          className,
+        ),
+        ref: forwardedRef,
+        ...rest,
       },
       React.createElement(
-        IconButton,
+        DropdownMenu,
         {
-          styleType: 'borderless',
-          size: 'small',
-          'aria-label': 'More options',
-          ...buttonProps,
+          onVisibleChange: setIsMenuVisible,
+          menuItems: children,
         },
-        React.createElement(SvgMore, null),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            size: 'small',
+            'aria-label': 'More options',
+            ...buttonProps,
+          },
+          React.createElement(SvgMore, null),
+        ),
       ),
     ),
   );