@itwin/itwinui-react 3.7.1 → 3.7.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.7.3
+
+### Patch Changes
+
+- [#1946](https://github.com/iTwin/iTwinUI/pull/1946): Fixed a bug in `Table` where resizing the columns and then toggling the column visibility in the column manager would trigger an unnecessary auto-scroll in the vertical direction.
+- [#1943](https://github.com/iTwin/iTwinUI/pull/1943): Fixed a z-index issue in `Table` where the table resizer appeared above the sticky header cells.
+
+## 3.7.2
+
+### Patch Changes
+
+- [#1939](https://github.com/iTwin/iTwinUI/pull/1939): Fixed an issue in `ButtonGroup` where the overflow logic was running even when `overflowButton` prop was not passed.
+
 ## 3.7.1
 
 ### Patch Changes

package/cjs/core/Avatar/Avatar.js

@@ -68,7 +68,7 @@ exports.defaultStatusTitles = {
 exports.Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-avatar', className), "data-iui-size": size !== 'medium' ? size : undefined, "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
         !image ? abbreviation?.substring(0, 2) : null,
         image,
         status ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, statusTitles[status]) : null));

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -79,7 +79,7 @@ exports.AvatarGroup = React.forwardRef((props, ref) => {
         childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
         childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
             getAvatarList(maxIcons),
-            React.createElement(index_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) }, childrenLength <= maxLength
+            React.createElement(index_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', 'iui-avatar-count', countIconProps?.className), "data-iui-size": iconSize !== 'medium' ? iconSize : undefined }, childrenLength <= maxLength
                 ? `${childrenLength - maxIcons}`
                 : `${maxLength}+`)))));
 });

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -71,12 +71,15 @@ exports.ButtonGroup = React.forwardRef((props, ref) => {
     const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
     const items = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
     const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
-    const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
+    const refs = (0, index_js_1.useMergedRefs)(!!overflowButton ? overflowRef : null, ref);
     return (React.createElement(react_1.FloatingDelayGroup, { delay: { open: 50, close: 250 } },
         React.createElement(exports.ButtonGroupContext.Provider, { value: orientation },
             React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-group', {
                     'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
                 }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
+                if (!overflowButton) {
+                    return children;
+                }
                 if (!(visibleCount < items.length)) {
                     return items;
                 }

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -46,8 +46,8 @@ const index_js_1 = require("../utils/index.js");
  */
 exports.HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
     const { className, items, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'nav', "aria-label": 'breadcrumbs', className: (0, classnames_1.default)('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
+    return (React.createElement(index_js_1.Box, { as: 'nav', "aria-label": 'breadcrumbs', className: (0, classnames_1.default)('iui-breadcrumbs', 'iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'ol', className: (0, classnames_1.default)('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list') }, items.reduce((previous, current, index) => [
             ...previous,
             current,
             index !== items.length - 1 && (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },

package/cjs/core/Table/columns/actionColumn.js

@@ -96,7 +96,7 @@ const ActionColumn = ({ columnManager = false, } = {}) => {
                     // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
                     // So for better UX we need to scroll to that dropdown menu.
                     queueMicrotask(() => {
-                        buttonRef.current?.scrollIntoView();
+                        buttonRef.current?.scrollIntoView({ block: 'nearest' });
                     });
                 };
                 return (React.createElement(MenuItem_js_1.MenuItem, { key: column.id, startIcon: React.createElement(Checkbox_js_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },

package/esm/core/Avatar/Avatar.js

@@ -39,7 +39,7 @@ export const defaultStatusTitles = {
 export const Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     const statusTitles = { ...defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement(Box, { as: 'span', className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
+    return (React.createElement(Box, { as: 'span', className: cx('iui-avatar', className), "data-iui-size": size !== 'medium' ? size : undefined, "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
         !image ? abbreviation?.substring(0, 2) : null,
         image,
         status ? React.createElement(VisuallyHidden, null, statusTitles[status]) : null));

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -50,7 +50,7 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
         childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
         childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
             getAvatarList(maxIcons),
-            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) }, childrenLength <= maxLength
+            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', 'iui-avatar-count', countIconProps?.className), "data-iui-size": iconSize !== 'medium' ? iconSize : undefined }, childrenLength <= maxLength
                 ? `${childrenLength - maxIcons}`
                 : `${maxLength}+`)))));
 });

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -42,12 +42,15 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
     const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
     const items = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
     const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
-    const refs = useMergedRefs(overflowRef, ref);
+    const refs = useMergedRefs(!!overflowButton ? overflowRef : null, ref);
     return (React.createElement(FloatingDelayGroup, { delay: { open: 50, close: 250 } },
         React.createElement(ButtonGroupContext.Provider, { value: orientation },
             React.createElement(Box, { className: cx('iui-button-group', {
                     'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
                 }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
+                if (!overflowButton) {
+                    return children;
+                }
                 if (!(visibleCount < items.length)) {
                     return items;
                 }

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -17,8 +17,8 @@ import { SvgChevronRight, Box } from '../utils/index.js';
  */
 export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
     const { className, items, ...rest } = props;
-    return (React.createElement(Box, { as: 'nav', "aria-label": 'breadcrumbs', className: cx('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
+    return (React.createElement(Box, { as: 'nav', "aria-label": 'breadcrumbs', className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { as: 'ol', className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list') }, items.reduce((previous, current, index) => [
             ...previous,
             current,
             index !== items.length - 1 && (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },

package/esm/core/Table/columns/actionColumn.js

@@ -70,7 +70,7 @@ export const ActionColumn = ({ columnManager = false, } = {}) => {
                     // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
                     // So for better UX we need to scroll to that dropdown menu.
                     queueMicrotask(() => {
-                        buttonRef.current?.scrollIntoView();
+                        buttonRef.current?.scrollIntoView({ block: 'nearest' });
                     });
                 };
                 return (React.createElement(MenuItem, { key: column.id, startIcon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },

package/package.json

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