@itwin/itwinui-react 1.27.0 → 1.28.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.28.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.27.0...v1.28.0) (2021-12-21)
+
+### What's new
+
+* **ButtonGroup:** Add support for input+button combo ([#492](https://www.github.com/iTwin/iTwinUI-react/issues/492), [#481](https://github.com/iTwin/iTwinUI-react/pull/481)) ([b8b15fd](https://www.github.com/iTwin/iTwinUI-react/commit/b8b15fd4a6f67fac03063a6fdeec1ea6216899c4))
+* **Table:** Added zebra stripes to rows ([#478](https://www.github.com/iTwin/iTwinUI-react/issues/478)) ([76d3eda](https://www.github.com/iTwin/iTwinUI-react/commit/76d3eda5d14aab2b02187c58fab70e93878c73cc))
+* **Table:** Proper support for horizontal scroll ([#495](https://www.github.com/iTwin/iTwinUI-react/issues/495)) ([079c2c0](https://www.github.com/iTwin/iTwinUI-react/commit/079c2c020be46f14ff41d407e81eee1487adfcab))
+
+### Fixes
+
+* **Table:** Prevents from triggering sort when filtering ([#487](https://www.github.com/iTwin/iTwinUI-react/issues/487)) ([d1e6165](https://www.github.com/iTwin/iTwinUI-react/commit/d1e61655bddffc37fa3f91b95766145f18392844))
+
 ## [1.27.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.26.1...v1.27.0) (2021-12-14)
 
 ### What's new

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -64,14 +64,12 @@ require("@itwin/itwinui-css/css/button.css");
  */
 exports.ButtonGroup = react_1.default.forwardRef(function (props, ref) {
     var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, rest = __rest(props, ["children", "className", "style", "overflowButton"]);
-    var items = react_1.default.useMemo(function () { return react_1.default.Children.toArray(children); }, [
-        children,
-    ]);
+    var items = react_1.default.useMemo(function () { var _a; return (_a = react_1.default.Children.map(children, function (child) { return react_1.default.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     (0, utils_1.useTheme)();
     var _a = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
     var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
         items.slice(0, visibleCount - 1),
-        overflowButton(visibleCount))) : (children)));
+        overflowButton(visibleCount))) : (items)));
 });
 exports.default = exports.ButtonGroup;

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -63,9 +63,11 @@ var SplitButton = function (props) {
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)(className, 'iui-button-split-menu', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
-        react_1.default.createElement(Button_1.Button, __assign({ styleType: styleType, size: size, onClick: onClick }, rest), children),
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: react_1.default.useCallback(function () { return setIsMenuOpen(false); }, []) },
-            react_1.default.createElement(IconButton_1.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? react_1.default.createElement(CaretUpSmall_1.default, null) : react_1.default.createElement(CaretDownSmall_1.default, null)))));
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Button_1.Button, __assign({ styleType: styleType, size: size, onClick: onClick }, rest), children)),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: react_1.default.useCallback(function () { return setIsMenuOpen(false); }, []) },
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? react_1.default.createElement(CaretUpSmall_1.default, null) : react_1.default.createElement(CaretDownSmall_1.default, null))))));
 };
 exports.SplitButton = SplitButton;
 exports.default = exports.SplitButton;

package/cjs/core/Table/Table.d.ts

@@ -155,6 +155,11 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @default false
      */
     isResizable?: boolean;
+    /**
+     * Style of the table.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'zebra-rows';
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).

package/cjs/core/Table/Table.js

@@ -93,9 +93,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType"]);
     (0, utils_1.useTheme)();
-    var _l = react_1.default.useState(), ownerDocument = _l[0], setOwnerDocument = _l[1];
+    var _m = react_1.default.useState(), ownerDocument = _m[0], setOwnerDocument = _m[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -231,6 +231,8 @@ var Table = function (props) {
             dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths_1 });
         }
     });
+    var headerRef = react_1.default.useRef(null);
+    var bodyRef = react_1.default.useRef(null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -241,7 +243,7 @@ var Table = function (props) {
             className: (0, classnames_1.default)('iui-table', (_a = {}, _a["iui-" + density] = density !== 'default', _a), className),
             style: style,
         }), ariaDataAttributes),
-            react_1.default.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
+            react_1.default.createElement("div", { className: 'iui-table-header', ref: headerRef }, headerGroups.slice(1).map(function (headerGroup) {
                 var headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-row',
                 });
@@ -264,8 +266,14 @@ var Table = function (props) {
                 })));
             })),
             react_1.default.createElement("div", __assign({}, getTableBodyProps({
-                className: 'iui-table-body',
-            })),
+                className: (0, classnames_1.default)('iui-table-body', {
+                    'iui-zebra-striping': styleType === 'zebra-rows',
+                }),
+            }), { ref: bodyRef, onScroll: function () {
+                    if (headerRef.current && bodyRef.current) {
+                        headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+                    }
+                } }),
                 data.length !== 0 &&
                     page.map(function (row) {
                         prepareRow(row);

package/cjs/core/Table/TableRowMemoized.js

@@ -40,7 +40,7 @@ var TableRow = function (props) {
         rootMargin: intersectionMargin + "px",
     });
     var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
-    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto" } })), userRowProps), {
+    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {
         className: (0, classnames_1.default)('iui-row', {
             'iui-selected': row.isSelected,
             'iui-row-expanded': row.isExpanded && subComponent,

package/cjs/core/Table/filters/BaseFilter.js

@@ -29,7 +29,9 @@ var utils_1 = require("../../utils");
 var BaseFilter = function (props) {
     var children = props.children, className = props.className, style = props.style, id = props.id;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-column-filter', className), style: style, onClick: function (e) {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-column-filter', className), style: style, 
+        // Prevents from triggering sort
+        onMouseDown: function (e) {
             e.stopPropagation();
         }, id: id }, children));
 };

package/cjs/core/Table/filters/FilterToggle.js

@@ -54,9 +54,10 @@ var FilterToggle = function (props) {
         close();
     }, [close, column]);
     return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
-        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
-                e.stopPropagation();
+        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function () {
                 setIsVisible(function (v) { return !v; });
-            } }, rest), column.filterValue ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
+            }, 
+            // Prevents from triggering sort
+            onMouseDown: function (e) { return e.stopPropagation(); } }, rest), column.filterValue ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
 };
 exports.FilterToggle = FilterToggle;

package/cjs/core/Table/hooks/useResizeColumns.js

@@ -114,11 +114,13 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
         {
             onMouseDown: function (e) {
                 e.persist();
+                // Prevents from triggering sort
                 e.stopPropagation();
                 onResizeStart(e, header);
             },
             onTouchStart: function (e) {
                 e.persist();
+                // Prevents from triggering sort
                 e.stopPropagation();
                 onResizeStart(e, header);
             },

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -58,14 +58,12 @@ import '@itwin/itwinui-css/css/button.css';
  */
 export var ButtonGroup = React.forwardRef(function (props, ref) {
     var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, rest = __rest(props, ["children", "className", "style", "overflowButton"]);
-    var items = React.useMemo(function () { return React.Children.toArray(children); }, [
-        children,
-    ]);
+    var items = React.useMemo(function () { var _a; return (_a = React.Children.map(children, function (child) { return React.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     useTheme();
     var _a = useOverflow(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
     var refs = useMergedRefs(overflowRef, ref);
     return (React.createElement("div", __assign({ className: cx('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
         items.slice(0, visibleCount - 1),
-        overflowButton(visibleCount))) : (children)));
+        overflowButton(visibleCount))) : (items)));
 });
 export default ButtonGroup;

package/esm/core/Buttons/SplitButton/SplitButton.js

@@ -57,8 +57,10 @@ export var SplitButton = function (props) {
     return (React.createElement("span", { className: cx(className, 'iui-button-split-menu', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
-        React.createElement(Button, __assign({ styleType: styleType, size: size, onClick: onClick }, rest), children),
-        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: React.useCallback(function () { return setIsMenuOpen(false); }, []) },
-            React.createElement(IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null)))));
+        React.createElement("div", null,
+            React.createElement(Button, __assign({ styleType: styleType, size: size, onClick: onClick }, rest), children)),
+        React.createElement("div", null,
+            React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: React.useCallback(function () { return setIsMenuOpen(false); }, []) },
+                React.createElement(IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null))))));
 };
 export default SplitButton;

package/esm/core/Table/Table.d.ts

@@ -155,6 +155,11 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @default false
      */
     isResizable?: boolean;
+    /**
+     * Style of the table.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'zebra-rows';
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).

package/esm/core/Table/Table.js

@@ -87,9 +87,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 export var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType"]);
     useTheme();
-    var _l = React.useState(), ownerDocument = _l[0], setOwnerDocument = _l[1];
+    var _m = React.useState(), ownerDocument = _m[0], setOwnerDocument = _m[1];
     var defaultColumn = React.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -225,6 +225,8 @@ export var Table = function (props) {
             dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths_1 });
         }
     });
+    var headerRef = React.useRef(null);
+    var bodyRef = React.useRef(null);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -235,7 +237,7 @@ export var Table = function (props) {
             className: cx('iui-table', (_a = {}, _a["iui-" + density] = density !== 'default', _a), className),
             style: style,
         }), ariaDataAttributes),
-            React.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
+            React.createElement("div", { className: 'iui-table-header', ref: headerRef }, headerGroups.slice(1).map(function (headerGroup) {
                 var headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-row',
                 });
@@ -258,8 +260,14 @@ export var Table = function (props) {
                 })));
             })),
             React.createElement("div", __assign({}, getTableBodyProps({
-                className: 'iui-table-body',
-            })),
+                className: cx('iui-table-body', {
+                    'iui-zebra-striping': styleType === 'zebra-rows',
+                }),
+            }), { ref: bodyRef, onScroll: function () {
+                    if (headerRef.current && bodyRef.current) {
+                        headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+                    }
+                } }),
                 data.length !== 0 &&
                     page.map(function (row) {
                         prepareRow(row);

package/esm/core/Table/TableRowMemoized.js

@@ -34,7 +34,7 @@ export var TableRow = function (props) {
         rootMargin: intersectionMargin + "px",
     });
     var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
-    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto" } })), userRowProps), {
+    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {
         className: cx('iui-row', {
             'iui-selected': row.isSelected,
             'iui-row-expanded': row.isExpanded && subComponent,

package/esm/core/Table/filters/BaseFilter.js

@@ -23,7 +23,9 @@ import { useTheme } from '../../utils';
 export var BaseFilter = function (props) {
     var children = props.children, className = props.className, style = props.style, id = props.id;
     useTheme();
-    return (React.createElement("div", { className: cx('iui-column-filter', className), style: style, onClick: function (e) {
+    return (React.createElement("div", { className: cx('iui-column-filter', className), style: style, 
+        // Prevents from triggering sort
+        onMouseDown: function (e) {
             e.stopPropagation();
         }, id: id }, children));
 };

package/esm/core/Table/filters/FilterToggle.js

@@ -48,8 +48,9 @@ export var FilterToggle = function (props) {
         close();
     }, [close, column]);
     return (React.createElement(React.Fragment, null, column.canFilter && column.Filter && (React.createElement(Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
-        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: cx('iui-filter-button', className), onClick: function (e) {
-                e.stopPropagation();
+        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: cx('iui-filter-button', className), onClick: function () {
                 setIsVisible(function (v) { return !v; });
-            } }, rest), column.filterValue ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
+            }, 
+            // Prevents from triggering sort
+            onMouseDown: function (e) { return e.stopPropagation(); } }, rest), column.filterValue ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
 };

package/esm/core/Table/hooks/useResizeColumns.js

@@ -110,11 +110,13 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
         {
             onMouseDown: function (e) {
                 e.persist();
+                // Prevents from triggering sort
                 e.stopPropagation();
                 onResizeStart(e, header);
             },
             onTouchStart: function (e) {
                 e.persist();
+                // Prevents from triggering sort
                 e.stopPropagation();
                 onResizeStart(e, header);
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.41.1",
+    "@itwin/itwinui-css": "^0.43.0",
     "@itwin/itwinui-icons-react": "^1.1.1",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -63,6 +63,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.2.7",
     "@types/jest": "^27.0.0",
     "@types/node": "^10.12.2",