@itwin/itwinui-react 3.17.3 → 3.17.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.17.4
+
+### Patch Changes
+
+- [#2473](https://github.com/iTwin/iTwinUI/pull/2473): Fixed scrolling on touch devices when using the `enableVirtualization` prop in `Tree` and `ComboBox`.
+- [#2466](https://github.com/iTwin/iTwinUI/pull/2466): Fix `Tab`'s stripe positioning when `Tabs.TabList` overflows.
+- [#2469](https://github.com/iTwin/iTwinUI/pull/2469): Fixed `Tabs` bug where orientation related styles of nested tabs were sometimes incorrect.
+
 ## 3.17.3
 
 ### Patch Changes

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

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

package/DEV-cjs/core/ComboBox/ComboBoxMenu.js

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

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

@@ -84,7 +84,9 @@ const TabsWrapper = _react.forwardRef((props, ref) => {
 TabsWrapper.displayName = 'Tabs.Wrapper';
 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)(
@@ -110,6 +112,7 @@ const TabList = _react.forwardRef((props, ref) => {
         },
         className,
       ),
+      'data-iui-orientation': orientation,
       role: 'tablist',
       ref: refs,
       ...rest,
@@ -156,10 +159,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/DEV-cjs/core/Tree/Tree.js

@@ -217,29 +217,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/DEV-cjs/styles.js

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

package/DEV-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/DEV-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/DEV-esm/core/Tabs/Tabs.js

@@ -70,7 +70,7 @@ let TabsWrapper = React.forwardRef((props, ref) => {
 TabsWrapper.displayName = 'Tabs.Wrapper';
 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);
@@ -94,6 +94,7 @@ let TabList = React.forwardRef((props, ref) => {
         },
         className,
       ),
+      'data-iui-orientation': orientation,
       role: 'tablist',
       ref: refs,
       ...rest,
@@ -140,10 +141,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/DEV-esm/core/Tree/Tree.js

@@ -211,29 +211,37 @@ let VirtualizedTree = React.forwardRef(
         ref: useMergedRefs(ref, parentRef),
       },
       React.createElement(
-        ShadowRoot,
+        'div',
         {
-          css: virtualizerCss,
+          style: {
+            display: 'contents',
+          },
         },
         React.createElement(
-          'div',
+          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/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.3';
+const t = '3.17.4';
 const u = new Proxy(
   {},
   {

package/cjs/core/ComboBox/ComboBox.js

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

package/cjs/core/ComboBox/ComboBoxMenu.js

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

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/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.3';
+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/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/Tree/Tree.js

@@ -210,29 +210,37 @@ let VirtualizedTree = React.forwardRef(
         ref: useMergedRefs(ref, parentRef),
       },
       React.createElement(
-        ShadowRoot,
+        'div',
         {
-          css: virtualizerCss,
+          style: {
+            display: 'contents',
+          },
         },
         React.createElement(
-          'div',
+          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/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.3';
+const t = '3.17.4';
 const u = new Proxy(
   {},
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.17.3",
+  "version": "3.17.4",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -104,7 +104,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "5",
-    "vite": "~5.4.14",
+    "vite": "~5.4.15",
     "vitest": "^1.6.1"
   },
   "peerDependencies": {