@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/esm/core/Table/TableRowMemoized.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useIntersection, useMergedRefs, WithCSSTransition, } from '../utils/index.js';
+import { Box, useIntersection, useMergedRefs, WithCSSTransition, } from '../utils/index.js';
 import { TableCell } from './TableCell.js';
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
@@ -13,16 +13,13 @@ import { TableCell } from './TableCell.js';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export const TableRow = (props) => {
-    var _a;
     const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
     const onIntersect = React.useCallback(() => {
-        var _a, _b;
-        (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
-        isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
+        onRowInViewport.current?.(row.original);
+        isLast && onBottomReached.current?.();
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
     const intersectionRoot = React.useMemo(() => {
-        var _a, _b;
-        const isTableBodyScrollable = ((_a = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.scrollHeight) !== null && _a !== void 0 ? _a : 0) > ((_b = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.offsetHeight) !== null && _b !== void 0 ? _b : 0);
+        const isTableBodyScrollable = (bodyRef?.scrollHeight ?? 0) > (bodyRef?.offsetHeight ?? 0);
         // If table body is scrollable, make it the intersection root
         if (isTableBodyScrollable) {
             return bodyRef;
@@ -34,7 +31,7 @@ export const TableRow = (props) => {
         rootMargin: `${intersectionMargin}px`,
         root: intersectionRoot,
     });
-    const userRowProps = (_a = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _a !== void 0 ? _a : {};
+    const userRowProps = rowProps?.(row) ?? {};
     const { status, isLoading, ...restUserRowProps } = userRowProps;
     const mergedProps = {
         ...row.getRowProps({ style: { flex: `0 0 auto`, minWidth: '100%' } }),
@@ -43,7 +40,7 @@ export const TableRow = (props) => {
             className: cx('iui-table-row', {
                 'iui-table-row-expanded': row.isExpanded && subComponent,
                 'iui-loading': isLoading,
-            }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
+            }, userRowProps?.className),
             'aria-selected': row.isSelected || undefined,
             'aria-disabled': isDisabled || undefined,
             'data-iui-status': status,
@@ -51,52 +48,48 @@ export const TableRow = (props) => {
     };
     const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ...mergedProps, ref: refs, onClick: (event) => {
-                var _a;
-                (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
-                onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
+        React.createElement(Box, { ...mergedProps, ref: refs, onClick: (event) => {
+                mergedProps?.onClick?.(event);
+                onClick?.(event, row);
             } }, row.cells.map((cell, index) => {
             return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
         subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
-            React.createElement("div", { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
+            React.createElement(Box, { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {
-    if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {
+    if (selectedRowIds?.[row.id]) {
         return true;
     }
     return row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, selectedRowIds));
 };
-export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return prevProp.isLast === nextProp.isLast &&
-        ((_a = prevProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a.length) ===
-            ((_b = nextProp.state.hiddenColumns) === null || _b === void 0 ? void 0 : _b.length) &&
-        !!((_c = prevProp.state.hiddenColumns) === null || _c === void 0 ? void 0 : _c.every((column, index) => { var _a; return ((_a = nextProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a[index]) === column; })) &&
-        prevProp.onRowInViewport === nextProp.onRowInViewport &&
-        prevProp.onBottomReached === nextProp.onBottomReached &&
-        prevProp.onClick === nextProp.onClick &&
-        prevProp.row.original === nextProp.row.original &&
-        ((_d = prevProp.state.selectedRowIds) === null || _d === void 0 ? void 0 : _d[prevProp.row.id]) ===
-            ((_e = nextProp.state.selectedRowIds) === null || _e === void 0 ? void 0 : _e[nextProp.row.id]) &&
-        // Check if sub-rows selection has changed and whether to show indeterminate state or not
-        prevProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds)) ===
-            nextProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds)) &&
-        ((_f = prevProp.state.expanded) === null || _f === void 0 ? void 0 : _f[prevProp.row.id]) ===
-            ((_g = nextProp.state.expanded) === null || _g === void 0 ? void 0 : _g[nextProp.row.id]) &&
-        prevProp.subComponent === nextProp.subComponent &&
-        prevProp.row.cells.every((cell, index) => nextProp.row.cells[index].column === cell.column) &&
-        prevProp.isDisabled === nextProp.isDisabled &&
-        prevProp.rowProps === nextProp.rowProps &&
-        prevProp.expanderCell === nextProp.expanderCell &&
-        prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
-        prevProp.bodyRef === nextProp.bodyRef &&
-        prevProp.state.columnOrder === nextProp.state.columnOrder &&
-        !nextProp.state.columnResizing.isResizingColumn &&
-        prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
-        prevProp.state.sticky.isScrolledToLeft ===
-            nextProp.state.sticky.isScrolledToLeft &&
-        prevProp.state.sticky.isScrolledToRight ===
-            nextProp.state.sticky.isScrolledToRight &&
-        prevProp.density === nextProp.density;
-});
+export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => prevProp.isLast === nextProp.isLast &&
+    prevProp.state.hiddenColumns?.length ===
+        nextProp.state.hiddenColumns?.length &&
+    !!prevProp.state.hiddenColumns?.every((column, index) => nextProp.state.hiddenColumns?.[index] === column) &&
+    prevProp.onRowInViewport === nextProp.onRowInViewport &&
+    prevProp.onBottomReached === nextProp.onBottomReached &&
+    prevProp.onClick === nextProp.onClick &&
+    prevProp.row.original === nextProp.row.original &&
+    prevProp.state.selectedRowIds?.[prevProp.row.id] ===
+        nextProp.state.selectedRowIds?.[nextProp.row.id] &&
+    // Check if sub-rows selection has changed and whether to show indeterminate state or not
+    prevProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds)) ===
+        nextProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds)) &&
+    prevProp.state.expanded?.[prevProp.row.id] ===
+        nextProp.state.expanded?.[nextProp.row.id] &&
+    prevProp.subComponent === nextProp.subComponent &&
+    prevProp.row.cells.every((cell, index) => nextProp.row.cells[index].column === cell.column) &&
+    prevProp.isDisabled === nextProp.isDisabled &&
+    prevProp.rowProps === nextProp.rowProps &&
+    prevProp.expanderCell === nextProp.expanderCell &&
+    prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
+    prevProp.bodyRef === nextProp.bodyRef &&
+    prevProp.state.columnOrder === nextProp.state.columnOrder &&
+    !nextProp.state.columnResizing.isResizingColumn &&
+    prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
+    prevProp.state.sticky.isScrolledToLeft ===
+        nextProp.state.sticky.isScrolledToLeft &&
+    prevProp.state.sticky.isScrolledToRight ===
+        nextProp.state.sticky.isScrolledToRight &&
+    prevProp.density === nextProp.density);

package/esm/core/Table/actionHandlers/expandHandler.js

@@ -1,6 +1,6 @@
 export const onExpandHandler = (newState, instance, onExpand) => {
-    if (!(instance === null || instance === void 0 ? void 0 : instance.preFilteredFlatRows.length)) {
-        onExpand === null || onExpand === void 0 ? void 0 : onExpand([], newState);
+    if (!instance?.preFilteredFlatRows.length) {
+        onExpand?.([], newState);
         return;
     }
     const expandedData = [];
@@ -9,5 +9,5 @@ export const onExpandHandler = (newState, instance, onExpand) => {
             expandedData.push(row.original);
         }
     });
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(expandedData, newState);
+    onExpand?.(expandedData, newState);
 };

package/esm/core/Table/actionHandlers/filterHandler.js

@@ -1,14 +1,13 @@
 export const onFilterHandler = (newState, action, previousState, currentFilter, instance) => {
     const previousFilter = previousState.filters.find((f) => f.id === action.columnId);
-    if ((previousFilter === null || previousFilter === void 0 ? void 0 : previousFilter.value) != action.filterValue) {
+    if (previousFilter?.value != action.filterValue) {
         const filters = newState.filters.map((f) => {
-            var _a, _b;
-            const column = instance === null || instance === void 0 ? void 0 : instance.allColumns.find((c) => c.id === f.id);
+            const column = instance?.allColumns.find((c) => c.id === f.id);
             return {
                 id: f.id,
                 value: f.value,
-                fieldType: (_a = column === null || column === void 0 ? void 0 : column.fieldType) !== null && _a !== void 0 ? _a : 'text',
-                filterType: (_b = column === null || column === void 0 ? void 0 : column.filter) !== null && _b !== void 0 ? _b : 'text',
+                fieldType: column?.fieldType ?? 'text',
+                filterType: column?.filter ?? 'text',
             };
         });
         return filters;

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -4,13 +4,13 @@
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-    if (!(instance === null || instance === void 0 ? void 0 : instance.rows.length)) {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect([], newState);
+    if (!instance?.rows.length) {
+        onSelect?.([], newState);
         return;
     }
     const newSelectedRowIds = {};
     const handleRow = (row) => {
-        if (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)) {
+        if (isRowDisabled?.(row.original)) {
             return false;
         }
         let isAllSubSelected = true;
@@ -33,7 +33,7 @@ const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
     instance.initialRows.forEach((row) => handleRow(row));
     const selectedData = getSelectedData(newSelectedRowIds, instance);
     newState.selectedRowIds = newSelectedRowIds;
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedData, newState);
+    onSelect?.(selectedData, newState);
 };
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
@@ -48,7 +48,7 @@ export const onToggleHandler = (newState, action, instance, onSelect, isRowDisab
  */
 export const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
     const selectedRowIds = { [action.id]: true };
-    if (instance === null || instance === void 0 ? void 0 : instance.selectSubRows) {
+    if (instance?.selectSubRows) {
         const handleRow = (row) => {
             selectedRowIds[row.id] = true;
             row.subRows.forEach((r) => handleRow(r));
@@ -111,6 +111,6 @@ const getSelectedData = (selectedRowIds, instance) => {
         }
         row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
     };
-    instance === null || instance === void 0 ? void 0 : instance.initialRows.forEach((row) => setSelectedData(row));
+    instance?.initialRows.forEach((row) => setSelectedData(row));
     return selectedData;
 };

package/esm/core/Table/cells/DefaultCell.js

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
+import { Box } from '../../utils/index.js';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -19,9 +20,9 @@ export const DefaultCell = (props) => {
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, ...rest } = props;
-    return (React.createElement("div", { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
-        startIcon && (React.createElement("div", { className: 'iui-table-cell-start-icon' }, startIcon)),
+    return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
+        startIcon && (React.createElement(Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
         children,
-        endIcon && React.createElement("div", { className: 'iui-table-cell-end-icon' }, endIcon)));
+        endIcon && React.createElement(Box, { className: 'iui-table-cell-end-icon' }, endIcon)));
 };
 export default DefaultCell;

package/esm/core/Table/cells/EditableCell.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getRandomValue } from '../../utils/index.js';
+import { Box, getRandomValue } from '../../utils/index.js';
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -26,41 +26,35 @@ export const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState(getRandomValue(10));
     const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement("div", { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
-            var _a;
+    return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
-            (_a = props.onInput) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onInput?.(e);
         }, onBlur: (e) => {
-            var _a;
             if (isDirty) {
                 onCellEdit(cellProps.column.id, value, cellProps.row.original);
             }
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onBlur?.(e);
             // Prevents error when text is cleared.
             // New key makes React to reattach with the DOM so it won't complain about deleted text node.
             setKey(getRandomValue(10));
         }, onKeyDown: (e) => {
-            var _a;
             // Prevents from adding HTML elements (div, br) inside a cell on Enter press
             if (e.key === 'Enter') {
                 e.preventDefault();
             }
-            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onKeyDown?.(e);
         }, onPaste: (e) => {
-            var _a;
             e.preventDefault();
             document.execCommand('inserttext', false, sanitizeString(e.clipboardData.getData('text/plain')));
-            (_a = props.onPaste) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onPaste?.(e);
         }, onDrop: (e) => {
-            var _a;
             // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
             e.preventDefault();
-            (_a = props.onDrop) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onDrop?.(e);
         }, onClick: (e) => {
-            var _a;
             e.stopPropagation();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            props.onClick?.(e);
         } }, children));
 };
 export default EditableCell;

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

@@ -71,8 +71,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(() => {
-                        var _a;
-                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        buttonRef.current?.scrollIntoView();
                     });
                 };
                 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 },
@@ -82,13 +81,11 @@ export const ActionColumn = ({ columnManager = false, } = {}) => {
                 ? columnManager.dropdownMenuProps
                 : {};
             return (React.createElement(DropdownMenu, { ...dropdownMenuProps, menuItems: headerCheckBoxes, onHide: (i) => {
-                    var _a;
                     setIsOpen(false);
-                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                    dropdownMenuProps.onHide?.(i);
                 }, onShow: (i) => {
-                    var _a;
                     setIsOpen(true);
-                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                    dropdownMenuProps.onShow?.(i);
                 }, className: cx('iui-scroll', dropdownMenuProps.className) },
                 React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     React.createElement(SvgColumnManager, null))));

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

@@ -44,16 +44,16 @@ export const ExpanderColumn = (props = {}) => {
         cellClassName: 'iui-slot',
         Cell: (props) => {
             const { row } = props;
-            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
+            if (!subComponent?.(row)) {
                 return null;
             }
             else {
                 return (React.createElement(IconButton, { className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
                         e.stopPropagation();
                         row.toggleRowExpanded();
-                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, React.createElement(SvgChevronRight, null)));
+                    }, disabled: isDisabled?.(props.row.original) }, React.createElement(SvgChevronRight, null)));
             }
         },
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

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

@@ -32,14 +32,14 @@ export const SelectionColumn = (props = {}) => {
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
-            const disabled = rows.every((row) => isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original));
-            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)));
+            const disabled = rows.every((row) => isDisabled?.(row.original));
+            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
             const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (React.createElement(Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));
         },
         Cell: ({ row }) => (React.createElement(Checkbox, { ...row.getToggleRowSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-            , disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: (e) => e.stopPropagation() })),
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
+            , disabled: isDisabled?.(row.original), onClick: (e) => e.stopPropagation() })),
+        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type BaseFilterProps = {
     /**

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

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
-import { useGlobals } from '../../utils/index.js';
+import { Box, useGlobals } from '../../utils/index.js';
 /**
  * Filter wrapper that should be used when creating custom filters.
  * @example
@@ -23,7 +22,7 @@ import { useGlobals } from '../../utils/index.js';
 export const BaseFilter = (props) => {
     const { children, className, style, id } = props;
     useGlobals();
-    return (React.createElement("div", { className: cx('iui-table-column-filter', className), style: style, 
+    return (React.createElement(Box, { className: cx('iui-table-column-filter', className), style: style, 
         // Prevents from triggering sort
         onClick: (e) => {
             e.stopPropagation();

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -27,10 +27,9 @@ const DatePickerInput = (props) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const close = React.useCallback(() => setIsVisible(false), []);
     const onDateSelected = React.useCallback((date) => {
-        var _a;
         onChange(date);
         close();
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        buttonRef.current?.focus();
     }, [close, onChange]);
     const onInputChange = React.useCallback((event) => {
         const value = event.target.value;
@@ -44,8 +43,7 @@ const DatePickerInput = (props) => {
         }
     }, [onChange, parseInput]);
     return (React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
-            var _a;
-            if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (!buttonRef.current?.contains(e.target)) {
                 close();
             }
         }, appendTo: 'parent' },

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type DateRangeTranslation = {
     from: string;
     to: string;

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

@@ -6,7 +6,6 @@ import * as React from 'react';
 import { useGlobals } from '../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
-import '@itwin/itwinui-css/css/table.css';
 import DatePickerInput from './DatePickerInput.js';
 const defaultStrings = {
     from: 'From',
@@ -28,11 +27,10 @@ const defaultParseInput = (text) => {
     return new Date('');
 };
 export const DateRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
     useGlobals();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined);
+    const [from, setFrom] = React.useState(column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : undefined);
     const onFromChange = React.useCallback((date) => {
         setFrom((prevDate) => {
             if (prevDate || !date) {
@@ -41,7 +39,7 @@ export const DateRangeFilter = (props) => {
             return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
         });
     }, []);
-    const [to, setTo] = React.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined);
+    const [to, setTo] = React.useState(column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : undefined);
     const onToChange = React.useCallback((date) => {
         setTo((prevDate) => {
             if (prevDate || !date) {

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type FilterButtonBarTranslation = {
     filter: string;

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

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
-import { useGlobals } from '../../utils/index.js';
+import { Box, useGlobals } from '../../utils/index.js';
 import { Button } from '../../Buttons/index.js';
 const defaultStrings = {
     filter: 'Filter',
@@ -20,7 +19,7 @@ export const FilterButtonBar = (props) => {
     const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
     useGlobals();
-    return (React.createElement("div", { className: cx('iui-button-bar', className), style: style, id: id },
+    return (React.createElement(Box, { className: cx('iui-button-bar', className), style: style, id: id },
         children,
         React.createElement(Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),
         React.createElement(Button, { onClick: clearFilter }, translatedStrings.clear)));

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { HeaderGroup } from 'react-table';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { useGlobals, Popover, SvgFilterHollow, SvgFilter, } from '../../utils/index.js';
 import { IconButton } from '../../Buttons/index.js';
 /**

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type NumberRangeTranslation = {
     from: string;
     to: string;

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

@@ -6,19 +6,17 @@ import * as React from 'react';
 import { useGlobals } from '../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
-import '@itwin/itwinui-css/css/table.css';
 import { LabeledInput } from '../../../LabeledInput/index.js';
 const defaultStrings = {
     from: 'From',
     to: 'To',
 };
 export const NumberRangeFilter = (props) => {
-    var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     useGlobals();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    const [from, setFrom] = React.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
-    const [to, setTo] = React.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
+    const [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
+    const [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
     const parseInputValue = (value) => {
         return !value || isNaN(Number(value)) ? undefined : Number(value);
     };

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
 export declare type TextFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {

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

@@ -3,16 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import { useGlobals } from '../../../utils/index.js';
 import { Input } from '../../../Input/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 export const TextFilter = (props) => {
-    var _a;
     const { column, translatedLabels, setFilter, clearFilter } = props;
     useGlobals();
-    const [text, setText] = React.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
+    const [text, setText] = React.useState(column.filterValue ?? '');
     const onKeyDown = (event) => {
         if (event.altKey) {
             return;

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

@@ -1,4 +1,5 @@
 import { actions, makePropGetter, useGetLatest } from 'react-table';
+import styles from '../../../styles.js';
 const REORDER_ACTIONS = {
     columnDragStart: 'columnDragStart',
     columnDragEnd: 'columnDragEnd',
@@ -20,13 +21,13 @@ const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, })
     };
     const setOnDragColumnStyle = (event, position) => {
         const columnElement = event.currentTarget;
-        columnElement.classList.remove('iui-table-reorder-column-right');
-        columnElement.classList.remove('iui-table-reorder-column-left');
+        columnElement.classList.remove(styles['iui-table-reorder-column-right']);
+        columnElement.classList.remove(styles['iui-table-reorder-column-left']);
         if (position === 'left') {
-            columnElement.classList.add('iui-table-reorder-column-left');
+            columnElement.classList.add(styles['iui-table-reorder-column-left']);
         }
         else if (position === 'right') {
-            columnElement.classList.add('iui-table-reorder-column-right');
+            columnElement.classList.add(styles['iui-table-reorder-column-right']);
         }
     };
     const reorderColumns = (tableColumns, srcIndex, dstIndex) => {