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

package/cjs/core/Table/Table.js

@@ -36,7 +36,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_table_1 = require("react-table");
 const index_js_1 = require("../ProgressIndicators/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/table.css");
 const utils_js_1 = require("./utils.js");
 const TableRowMemoized_js_1 = require("./TableRowMemoized.js");
 const index_js_3 = require("./filters/index.js");
@@ -55,7 +54,7 @@ let isDev = false;
 try {
     isDev = process.env.NODE_ENV !== 'production';
 }
-catch (_a) { }
+catch { }
 const flattenColumns = (columns) => {
     const flatColumns = [];
     columns.forEach((column) => {
@@ -140,11 +139,11 @@ const Table = (props) => {
             return;
         }
         const ownerDoc = ownerDocument.current;
-        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
-        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
+        ownerDoc?.addEventListener('keydown', disableUserSelect);
+        ownerDoc?.addEventListener('keyup', enableUserSelect);
         return () => {
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keyup', enableUserSelect);
+            ownerDoc?.removeEventListener('keydown', disableUserSelect);
+            ownerDoc?.removeEventListener('keyup', enableUserSelect);
         };
     }, [
         isSelectable,
@@ -158,7 +157,7 @@ const Table = (props) => {
     const tableStateReducer = React.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
-                onSort === null || onSort === void 0 ? void 0 : onSort(newState);
+                onSort?.(newState);
                 break;
             case react_table_1.actions.setFilter:
                 currentFilter.current = (0, index_js_5.onFilterHandler)(newState, action, previousState, currentFilter.current, instance);
@@ -244,13 +243,13 @@ const Table = (props) => {
         return result;
     }, {});
     const areFiltersSet = allColumns.some((column) => column.filterValue != null && column.filterValue !== '') || !!globalFilterValue;
-    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter;
+    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter && !!column.Filter;
     const showSortButton = (column) => data.length !== 0 && column.canSort;
     const onRowClickHandler = React.useCallback((event, row) => {
-        const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
+        const isDisabled = isRowDisabled?.(row.original);
         const ctrlPressed = event.ctrlKey || event.metaKey;
         if (!isDisabled) {
-            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+            onRowClick?.(event, row);
         }
         if (isSelectable &&
             !isDisabled &&
@@ -291,7 +290,7 @@ const Table = (props) => {
     React.useEffect(() => {
         if (previousFilter.current !== currentFilter.current) {
             previousFilter.current = currentFilter.current;
-            onFilter === null || onFilter === void 0 ? void 0 : onFilter(currentFilter.current, state, instance.filteredRows);
+            onFilter?.(currentFilter.current, state, instance.filteredRows);
         }
     }, [state, instance.filteredRows, onFilter]);
     const lastPassedColumns = React.useRef([]);
@@ -365,7 +364,7 @@ const Table = (props) => {
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized_js_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
+        return (React.createElement(TableRowMemoized_js_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!isRowDisabled?.(row.original), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
     }, [
         page,
         prepareRow,
@@ -409,8 +408,8 @@ const Table = (props) => {
     }, []);
     const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: (element) => {
-                ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
+        React.createElement(index_js_2.Box, { ref: (element) => {
+                ownerDocument.current = element?.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
                 }
@@ -428,14 +427,14 @@ const Table = (props) => {
                 const headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-table-row',
                 });
-                return (React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
+                return (React.createElement(index_js_2.Box, { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
                         if (headerRef.current && bodyRef.current) {
                             bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
                             updateStickyState();
                         }
                     }, key: headerGroupProps.key },
-                    React.createElement("div", { className: 'iui-table-header' },
-                        React.createElement("div", { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
+                    React.createElement(index_js_2.Box, { className: 'iui-table-header' },
+                        React.createElement(index_js_2.Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
@@ -450,7 +449,7 @@ const Table = (props) => {
                                     flexWrap: 'unset',
                                 },
                             });
-                            return (React.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
+                            return (React.createElement(index_js_2.Box, { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
                                     if (el) {
                                         columnRefs.current[column.id] = el;
                                         column.resizeWidth =
@@ -461,7 +460,7 @@ const Table = (props) => {
                                 }, onClick: (e) => {
                                     // Prevents from triggering sort when resizing and mouse is released in the middle of header
                                     if (isHeaderDirectClick.current) {
-                                        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                        onClick?.(e);
                                         isHeaderDirectClick.current = false;
                                     }
                                 }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: (e) => {
@@ -471,24 +470,24 @@ const Table = (props) => {
                                 } },
                                 column.render('Header'),
                                 (showFilterButton(column) ||
-                                    showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
+                                    showSortButton(column)) && (React.createElement(index_js_2.Box, { className: 'iui-table-header-actions-container' },
                                     showFilterButton(column) && (React.createElement(index_js_3.FilterToggle, { column: column })),
-                                    showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                    showSortButton(column) && (React.createElement(index_js_2.Box, { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
                                         (!column.isSorted && column.sortDescFirst) ? (React.createElement(index_js_2.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(index_js_2.SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                                 isResizable &&
                                     column.isResizerVisible &&
                                     (index !== headerGroup.headers.length - 1 ||
-                                        columnResizeMode === 'expand') && (React.createElement("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
-                                    React.createElement("div", { className: 'iui-table-resizer-bar' }))),
+                                        columnResizeMode === 'expand') && (React.createElement(index_js_2.Box, { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                    React.createElement(index_js_2.Box, { className: 'iui-table-resizer-bar' }))),
                                 enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
+                                    !column.disableReordering && (React.createElement(index_js_2.Box, { className: 'iui-table-reorder-bar' })),
                                 column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                                    state.sticky.isScrolledToRight && (React.createElement(index_js_2.Box, { className: 'iui-table-cell-shadow-right' })),
                                 column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
+                                    state.sticky.isScrolledToLeft && (React.createElement(index_js_2.Box, { className: 'iui-table-cell-shadow-left' }))));
                         })))));
             }),
-            React.createElement("div", { ...getTableBodyProps({
+            React.createElement(index_js_2.Box, { ...getTableBodyProps({
                     className: (0, classnames_1.default)('iui-table-body', {
                         'iui-zebra-striping': styleType === 'zebra-rows',
                     }),
@@ -500,18 +499,18 @@ const Table = (props) => {
                     }
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll_js_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
-                isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
+                isLoading && data.length === 0 && (React.createElement(index_js_2.Box, { className: 'iui-table-empty' },
                     React.createElement(index_js_1.ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-table-row' },
-                    React.createElement("div", { className: 'iui-table-cell', style: { justifyContent: 'center' } },
+                isLoading && data.length !== 0 && (React.createElement(index_js_2.Box, { className: 'iui-table-row' },
+                    React.createElement(index_js_2.Box, { className: 'iui-table-cell', style: { justifyContent: 'center' } },
                         React.createElement(index_js_1.ProgressRadial, { indeterminate: true, size: 'small', style: { float: 'none', marginLeft: 0 } })))),
-                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
+                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(index_js_2.Box, { className: 'iui-table-empty' },
                     React.createElement("div", null, emptyTableContent))),
                 !isLoading &&
                     (data.length === 0 || rows.length === 0) &&
-                    areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
-                    React.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
-            paginatorRenderer(paginatorRendererProps))));
+                    areFiltersSet && (React.createElement(index_js_2.Box, { className: 'iui-table-empty' },
+                    React.createElement("div", null, emptyFilteredTableContent)))),
+            paginatorRenderer?.(paginatorRendererProps))));
 };
 exports.Table = Table;
 exports.default = exports.Table;

package/cjs/core/Table/TableCell.js

@@ -37,6 +37,7 @@ const utils_js_1 = require("./utils.js");
 const SubRowExpander_js_1 = require("./SubRowExpander.js");
 const index_js_1 = require("./columns/index.js");
 const index_js_2 = require("./cells/index.js");
+const index_js_3 = require("../utils/index.js");
 const TableCell = (props) => {
     const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
@@ -85,9 +86,9 @@ const TableCell = (props) => {
         children: (React.createElement(React.Fragment, null,
             cellContent,
             cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                tableInstance.state.sticky.isScrolledToRight && (React.createElement(index_js_3.Box, { className: 'iui-table-cell-shadow-right' })),
             cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
+                tableInstance.state.sticky.isScrolledToLeft && (React.createElement(index_js_3.Box, { className: 'iui-table-cell-shadow-left' })))),
     };
     return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
         ...cellRendererProps,

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../utils/index.js';
 import type { TablePaginatorRendererProps } from './Table.js';
 export declare type TablePaginatorProps = {

package/cjs/core/Table/TablePaginator.js

@@ -33,7 +33,6 @@ exports.TablePaginator = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../Buttons/index.js");
 const index_js_2 = require("../ProgressIndicators/index.js");
 const index_js_3 = require("../Menu/index.js");
@@ -70,18 +69,17 @@ const TablePaginator = (props) => {
     const needFocus = React.useRef(false);
     const isMounted = React.useRef(false);
     React.useEffect(() => {
-        var _a, _b;
         // Checking `isMounted.current` prevents from focusing on initial load.
         // Checking `needFocus.current` prevents from focusing page when clicked on previous/next page.
         if (isMounted.current && needFocus.current) {
-            const buttonToFocus = Array.from((_b = (_a = pageListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.iui-table-paginator-page-button')) !== null && _b !== void 0 ? _b : []).find((el) => { var _a; return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === (focusedIndex + 1).toString(); });
-            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
+            const buttonToFocus = Array.from(pageListRef.current?.querySelectorAll('.iui-table-paginator-page-button') ?? []).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
+            buttonToFocus?.focus();
             needFocus.current = false;
         }
         isMounted.current = true;
     }, [focusedIndex]);
     const buttonSize = size != 'default' ? 'small' : undefined;
-    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement("button", { key: index, type: 'button', className: (0, classnames_1.default)('iui-table-paginator-page-button', {
+    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement(index_js_4.Box, { as: 'button', key: index, type: 'button', className: (0, classnames_1.default)('iui-table-paginator-page-button', {
             'iui-table-paginator-page-button-small': buttonSize === 'small',
         }), "data-iui-active": index === currentPage, onClick: () => onPageChange(index), "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)), [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
@@ -142,19 +140,19 @@ const TablePaginator = (props) => {
     const hasNoRows = totalPagesCount === 0;
     const showPagesList = totalPagesCount > 1 || isLoading;
     const showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    const ellipsis = (React.createElement("span", { className: (0, classnames_1.default)('iui-table-paginator-ellipsis', {
+    const ellipsis = (React.createElement(index_js_4.Box, { as: 'span', className: (0, classnames_1.default)('iui-table-paginator-ellipsis', {
             'iui-table-paginator-ellipsis-small': size === 'small',
         }) }, "\u2026"));
     const noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(index_js_2.ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(index_js_1.Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;
     }
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
-        React.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
-        showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
+    return (React.createElement(index_js_4.Box, { className: (0, classnames_1.default)('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
+        React.createElement(index_js_4.Box, { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
+        showPagesList && (React.createElement(index_js_4.Box, { className: 'iui-center', ref: overflowRef },
             React.createElement(index_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
                 React.createElement(index_js_4.SvgChevronLeft, null)),
-            React.createElement("span", { className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
+            React.createElement(index_js_4.Box, { as: 'span', className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
                 if (hasNoRows) {
                     return noRowsContent;
                 }
@@ -175,9 +173,9 @@ const TablePaginator = (props) => {
             })()),
             React.createElement(index_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
                 React.createElement(index_js_4.SvgChevronRight, null)))),
-        React.createElement("div", { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
+        React.createElement(index_js_4.Box, { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
             localization.rowsPerPageLabel !== null &&
-                paginatorWidth >= 1024 && (React.createElement("span", { className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
+                paginatorWidth >= 1024 && (React.createElement(index_js_4.Box, { as: 'span', className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
             React.createElement(index_js_1.DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(index_js_3.MenuItem, { key: size, isSelected: size === pageSize, onClick: () => {
                         close();
                         onPageSizeChange(size);

package/cjs/core/Table/TableRowMemoized.js

@@ -42,16 +42,13 @@ const TableCell_js_1 = require("./TableCell.js");
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 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;
@@ -63,7 +60,7 @@ 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%' } }),
@@ -72,7 +69,7 @@ const TableRow = (props) => {
             className: (0, classnames_1.default)('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,
@@ -80,53 +77,49 @@ const TableRow = (props) => {
     };
     const refs = (0, index_js_1.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(index_js_1.Box, { ...mergedProps, ref: refs, onClick: (event) => {
+                mergedProps?.onClick?.(event);
+                onClick?.(event, row);
             } }, row.cells.map((cell, index) => {
             return (React.createElement(TableCell_js_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
         subComponent && (React.createElement(index_js_1.WithCSSTransition, { in: row.isExpanded },
-            React.createElement("div", { className: (0, classnames_1.default)('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
+            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
 exports.TableRow = TableRow;
 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));
 };
-exports.TableRowMemoized = React.memo(exports.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;
-});
+exports.TableRowMemoized = React.memo(exports.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/cjs/core/Table/actionHandlers/expandHandler.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.onExpandHandler = void 0;
 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 = [];
@@ -12,6 +12,6 @@ const onExpandHandler = (newState, instance, onExpand) => {
             expandedData.push(row.original);
         }
     });
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(expandedData, newState);
+    onExpand?.(expandedData, newState);
 };
 exports.onExpandHandler = onExpandHandler;

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

@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.onFilterHandler = void 0;
 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/cjs/core/Table/actionHandlers/selectHandler.js

@@ -7,13 +7,13 @@ exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onToggleH
  * - 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;
@@ -36,7 +36,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)
@@ -52,7 +52,7 @@ exports.onToggleHandler = onToggleHandler;
  */
 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));
@@ -117,6 +117,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/cjs/core/Table/cells/DefaultCell.js

@@ -33,6 +33,7 @@ exports.DefaultCell = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const index_js_1 = require("../../utils/index.js");
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -48,10 +49,10 @@ 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: (0, classnames_1.default)(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(index_js_1.Box, { ...cellElementProps, ...rest, className: (0, classnames_1.default)(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
+        startIcon && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
         children,
-        endIcon && React.createElement("div", { className: 'iui-table-cell-end-icon' }, endIcon)));
+        endIcon && React.createElement(index_js_1.Box, { className: 'iui-table-cell-end-icon' }, endIcon)));
 };
 exports.DefaultCell = DefaultCell;
 exports.default = exports.DefaultCell;

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

@@ -52,41 +52,35 @@ const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState((0, index_js_1.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(index_js_1.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((0, index_js_1.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));
 };
 exports.EditableCell = EditableCell;

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

@@ -100,8 +100,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(() => {
-                        var _a;
-                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        buttonRef.current?.scrollIntoView();
                     });
                 };
                 return (React.createElement(index_js_5.MenuItem, { key: column.id, startIcon: React.createElement(index_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 },
@@ -111,13 +110,11 @@ const ActionColumn = ({ columnManager = false, } = {}) => {
                 ? columnManager.dropdownMenuProps
                 : {};
             return (React.createElement(index_js_3.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: (0, classnames_1.default)('iui-scroll', dropdownMenuProps.className) },
                 React.createElement(index_js_4.IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     React.createElement(index_js_2.SvgColumnManager, null))));