@itwin/itwinui-react 1.34.1 → 1.36.0

package/cjs/core/Table/Table.js

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
+exports.Table = exports.tableResizeStartAction = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -44,11 +44,10 @@ var filters_1 = require("./filters");
 var customFilterFunctions_1 = require("./filters/customFilterFunctions");
 var hooks_1 = require("./hooks");
 var actionHandlers_1 = require("./actionHandlers");
-var selectHandler_1 = require("./actionHandlers/selectHandler");
-var resizeHandler_1 = require("./actionHandlers/resizeHandler");
 var VirtualScroll_1 = __importDefault(require("../utils/components/VirtualScroll"));
+var columns_1 = require("./columns");
 var singleRowSelectedAction = 'singleRowSelected';
-var tableResizeStartAction = 'tableResizeStart';
+exports.tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
@@ -94,9 +93,10 @@ 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, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, _o = props.enableColumnReordering, enableColumnReordering = _o === void 0 ? false : _o, 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", "enableVirtualization", "enableColumnReordering"]);
+    var _b;
+    var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, 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", "enableVirtualization", "enableColumnReordering"]);
     (0, utils_1.useTheme)();
-    var _p = react_1.default.useState(), ownerDocument = _p[0], setOwnerDocument = _p[1];
+    var _q = react_1.default.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -109,6 +109,7 @@ var Table = function (props) {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
+    var hasManualSelectionColumn = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
     var tableStateReducer = react_1.default.useCallback(function (newState, action, previousState, instance) {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
@@ -122,21 +123,25 @@ var Table = function (props) {
                 (0, actionHandlers_1.onExpandHandler)(newState, instance, onExpand);
                 break;
             case singleRowSelectedAction: {
-                newState = (0, selectHandler_1.onSingleSelectHandler)(newState, action, instance, onSelect, isRowDisabled);
+                newState = (0, actionHandlers_1.onSingleSelectHandler)(newState, action, instance, onSelect, 
+                // If it has manual selection column, then we can't check whether row is disabled
+                hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
             case react_table_1.actions.toggleRowSelected:
             case react_table_1.actions.toggleAllRowsSelected:
             case react_table_1.actions.toggleAllPageRowsSelected: {
-                (0, actionHandlers_1.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
+                (0, actionHandlers_1.onSelectHandler)(newState, instance, onSelect, 
+                // If it has manual selection column, then we can't check whether row is disabled
+                hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
-            case tableResizeStartAction: {
-                newState = (0, resizeHandler_1.onTableResizeStart)(newState);
+            case exports.tableResizeStartAction: {
+                newState = (0, actionHandlers_1.onTableResizeStart)(newState);
                 break;
             }
             case tableResizeEndAction: {
-                newState = (0, resizeHandler_1.onTableResizeEnd)(newState, action);
+                newState = (0, actionHandlers_1.onTableResizeEnd)(newState, action);
                 break;
             }
             default:
@@ -145,7 +150,15 @@ var Table = function (props) {
         return stateReducer
             ? stateReducer(newState, action, previousState, instance)
             : newState;
-    }, [isRowDisabled, onExpand, onFilter, onSelect, onSort, stateReducer]);
+    }, [
+        hasManualSelectionColumn,
+        isRowDisabled,
+        onExpand,
+        onFilter,
+        onSelect,
+        onSort,
+        stateReducer,
+    ]);
     var filterTypes = react_1.default.useMemo(function () { return (__assign(__assign({}, customFilterFunctions_1.customFilterFunctions), filterFunctions)); }, [filterFunctions]);
     var hasAnySubRows = react_1.default.useMemo(function () {
         return data.some(function (item, index) {
@@ -217,7 +230,7 @@ var Table = function (props) {
         if (Object.keys(state.columnResizing.columnWidths).length === 0) {
             return;
         }
-        dispatch({ type: tableResizeStartAction });
+        dispatch({ type: exports.tableResizeStartAction });
     }, [dispatch, state.columnResizing.columnWidths, flatHeaders]);
     var resizeRef = (0, utils_1.useResizeObserver)(onTableResize)[0];
     // Flexbox handles columns resize so we take new column widths before browser repaints.
@@ -234,11 +247,12 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
-    var getPreparedRow = react_1.default.useCallback(function (row) {
+    var getPreparedRow = react_1.default.useCallback(function (index) {
+        var row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.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 }));
+        return (react_1.default.createElement(TableRowMemoized_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 }));
     }, [
-        data.length,
+        page,
         expanderCell,
         hasAnySubRows,
         instance,
@@ -250,7 +264,7 @@ var Table = function (props) {
         state,
         subComponent,
     ]);
-    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
+    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     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);
@@ -274,8 +288,8 @@ var Table = function (props) {
                             }
                         } }),
                         column.render('Header'),
-                        !isLoading && (data.length != 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        !isLoading && data.length != 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        (data.length !== 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
@@ -293,7 +307,7 @@ var Table = function (props) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                     }
                 }, tabIndex: -1 }),
-                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (row) { return getPreparedRow(row); })))),
+                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
                 isLoading && data.length === 0 && (react_1.default.createElement("div", { className: 'iui-table-empty' },
                     react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (react_1.default.createElement("div", { className: 'iui-row' },

package/cjs/core/Table/TableCell.js

@@ -23,12 +23,12 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("./utils");
 var SubRowExpander_1 = require("./SubRowExpander");
-var hooks_1 = require("./hooks");
+var columns_1 = require("./columns");
 var cells_1 = require("./cells");
 var TableCell = function (props) {
     var cell = props.cell, cellIndex = props.cellIndex, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell;
     var hasSubRowExpander = cellIndex ===
-        cell.row.cells.findIndex(function (c) { return c.column.id !== hooks_1.SELECTION_CELL_ID; });
+        cell.row.cells.findIndex(function (c) { return c.column.id !== columns_1.SELECTION_CELL_ID; });
     var getSubRowStyle = function () {
         if (!tableHasSubRows || !hasSubRowExpander) {
             return undefined;
@@ -52,7 +52,7 @@ var TableCell = function (props) {
         cellProps: cellProps,
         children: cellContent,
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(cellRendererProps)) : (react_1.default.createElement(cells_1.DefaultCell, __assign({}, cellRendererProps)))));
+    return (react_1.default.createElement(react_1.default.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(__assign(__assign({}, cellRendererProps), { isDisabled: function () { return isDisabled; } }))) : (react_1.default.createElement(cells_1.DefaultCell, __assign({}, cellRendererProps, { isDisabled: function () { return isDisabled; } })))));
 };
 exports.TableCell = TableCell;
 exports.default = exports.TableCell;

package/cjs/core/Table/TableRowMemoized.js

@@ -57,7 +57,9 @@ var TableRow = function (props) {
             return (react_1.default.createElement(TableCell_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
         })),
         subComponent && (react_1.default.createElement(utils_1.WithCSSTransition, { in: row.isExpanded },
-            react_1.default.createElement("div", { className: 'iui-row iui-expanded-content' }, subComponent(row))))));
+            react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-row', 'iui-expanded-content', {
+                    'iui-disabled': isDisabled,
+                }) }, subComponent(row))))));
 };
 exports.TableRow = TableRow;
 var hasAnySelectedSubRow = function (row, selectedRowIds) {
@@ -69,14 +71,17 @@ var hasAnySelectedSubRow = function (row, selectedRowIds) {
     });
 };
 exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prevProp, nextProp) {
-    var _a, _b, _c, _d;
+    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(function (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 &&
-        ((_a = prevProp.state.selectedRowIds) === null || _a === void 0 ? void 0 : _a[prevProp.row.id]) ===
-            ((_b = nextProp.state.selectedRowIds) === null || _b === void 0 ? void 0 : _b[nextProp.row.id]) &&
+        ((_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(function (subRow) {
             return hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds);
@@ -84,8 +89,8 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prev
             nextProp.row.subRows.some(function (subRow) {
                 return hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds);
             }) &&
-        ((_c = prevProp.state.expanded) === null || _c === void 0 ? void 0 : _c[prevProp.row.id]) ===
-            ((_d = nextProp.state.expanded) === null || _d === void 0 ? void 0 : _d[nextProp.row.id]) &&
+        ((_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(function (cell, index) { return nextProp.row.cells[index].column === cell.column; }) &&
         prevProp.isDisabled === nextProp.isDisabled &&
@@ -94,5 +99,5 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prev
         prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
         prevProp.state.columnOrder === nextProp.state.columnOrder &&
         !nextProp.state.columnResizing.isResizingColumn &&
-        !nextProp.state.isTableResizing;
+        prevProp.state.isTableResizing === nextProp.state.isTableResizing;
 });

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

@@ -1,3 +1,4 @@
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler } from './selectHandler';
+export { onSelectHandler, onSingleSelectHandler } from './selectHandler';
+export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onSelectHandler = exports.onFilterHandler = exports.onExpandHandler = void 0;
+exports.onTableResizeEnd = exports.onTableResizeStart = exports.onSingleSelectHandler = exports.onSelectHandler = exports.onFilterHandler = exports.onExpandHandler = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -11,3 +11,7 @@ var filterHandler_1 = require("./filterHandler");
 Object.defineProperty(exports, "onFilterHandler", { enumerable: true, get: function () { return filterHandler_1.onFilterHandler; } });
 var selectHandler_1 = require("./selectHandler");
 Object.defineProperty(exports, "onSelectHandler", { enumerable: true, get: function () { return selectHandler_1.onSelectHandler; } });
+Object.defineProperty(exports, "onSingleSelectHandler", { enumerable: true, get: function () { return selectHandler_1.onSingleSelectHandler; } });
+var resizeHandler_1 = require("./resizeHandler");
+Object.defineProperty(exports, "onTableResizeStart", { enumerable: true, get: function () { return resizeHandler_1.onTableResizeStart; } });
+Object.defineProperty(exports, "onTableResizeEnd", { enumerable: true, get: function () { return resizeHandler_1.onTableResizeEnd; } });

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

@@ -12,5 +12,5 @@ export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRe
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: CellRendererProps<T>) => JSX.Element;
+export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => JSX.Element;
 export default DefaultCell;

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

@@ -31,6 +31,7 @@ exports.DefaultCell = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -45,8 +46,10 @@ var react_1 = __importDefault(require("react"));
 var DefaultCell = function (props) {
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var cellElementProps = props.cellElementProps, children = props.children, cellProps = props.cellProps, rest = __rest(props, ["cellElementProps", "children", "cellProps"]);
-    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest), children));
+    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, rest = __rest(props, ["cellElementProps", "children", "cellProps", "isDisabled", "className", "style"]);
+    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest, { className: (0, classnames_1.default)(cellElementClassName, className, {
+            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
+        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
 };
 exports.DefaultCell = DefaultCell;
 exports.default = exports.DefaultCell;

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { HeaderProps } from 'react-table';
+/**
+ * Action column that adds column manager to the Table header.
+ * It is recommended to add this column to the end of the Table
+ * and to override its `Cell` prop with your row actions menu.
+ * @example
+ * {
+ *   ...ActionColumn({ columnManager: true }),
+ *   Cell: () => (
+ *     <DropdownMenu menuItems={menuItems}>
+ *       <IconButton
+ *         styleType='borderless'
+ *         onClick={(e) => e.stopPropagation()}
+ *       >
+ *         <SvgMore />
+ *       </IconButton>
+ *     </DropdownMenu>
+ *   ),
+ * },
+ */
+export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: {
+    columnManager?: boolean | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    disableReordering: boolean;
+    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => JSX.Element | null;
+};

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

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionColumn = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var Checkbox_1 = require("../../Checkbox");
+var ColumnManager_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ColumnManager"));
+var DropdownMenu_1 = require("../../DropdownMenu");
+var IconButton_1 = require("../../Buttons/IconButton");
+var Menu_1 = require("../../Menu");
+var Table_1 = require("../Table");
+var selectionColumn_1 = require("./selectionColumn");
+var expanderColumn_1 = require("./expanderColumn");
+var ACTION_CELL_ID = 'iui-table-action';
+/**
+ * Action column that adds column manager to the Table header.
+ * It is recommended to add this column to the end of the Table
+ * and to override its `Cell` prop with your row actions menu.
+ * @example
+ * {
+ *   ...ActionColumn({ columnManager: true }),
+ *   Cell: () => (
+ *     <DropdownMenu menuItems={menuItems}>
+ *       <IconButton
+ *         styleType='borderless'
+ *         onClick={(e) => e.stopPropagation()}
+ *       >
+ *         <SvgMore />
+ *       </IconButton>
+ *     </DropdownMenu>
+ *   ),
+ * },
+ */
+var ActionColumn = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.columnManager, columnManager = _c === void 0 ? false : _c;
+    return {
+        id: ACTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        disableReordering: true,
+        Header: function (_a) {
+            var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
+            var _b = react_1.default.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            if (!columnManager) {
+                return null;
+            }
+            var defaultColumnIds = [
+                selectionColumn_1.SELECTION_CELL_ID,
+                expanderColumn_1.EXPANDER_CELL_ID,
+                ACTION_CELL_ID,
+            ];
+            var headerCheckBoxes = function () {
+                return allColumns
+                    //Filters out any default columns made such as selection and expansion
+                    .filter(function (_a) {
+                    var id = _a.id;
+                    return !defaultColumnIds.includes(id);
+                })
+                    .map(function (column) {
+                    var checked = column.getToggleHiddenProps().checked;
+                    var onClick = function () {
+                        column.toggleHidden(checked);
+                        // If no column was resized then leave table resize handling to the flexbox
+                        if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+                            return;
+                        }
+                        // Triggers an update to resize the widths of all visible columns
+                        dispatch({ type: Table_1.tableResizeStartAction });
+                    };
+                    return (react_1.default.createElement(Menu_1.MenuItem, { key: column.id, icon: react_1.default.createElement(Checkbox_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-" + column.id }), onClick: onClick, disabled: column.disableToggleVisibility },
+                        react_1.default.createElement("div", { id: "iui-column-" + column.id }, column.render('Header'))));
+                });
+            };
+            return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', isActive: isOpen },
+                    react_1.default.createElement(ColumnManager_1.default, null))));
+        },
+    };
+};
+exports.ActionColumn = ActionColumn;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CellProps, CellRendererProps, Row } from 'react-table';
+export declare const EXPANDER_CELL_ID = "iui-table-expander";
+/**
+ * Expander column that adds sub-content expander column to the Table.
+ * It is recommended to use it as the first column or after selection column.
+ * @example
+ * const subComponent = useCallback(
+ *   (row: Row) => (
+ *     <div style={{ padding: 16 }}>
+ *       <Leading>Extra information</Leading>
+ *       <pre>
+ *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+ *       </pre>
+ *     </div>
+ *   ),
+ *   [],
+ * );
+ * const isExpanderDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name2';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *     // Rest of your columns
+ *   ],
+ * ], [isExpanderDisabled, subComponent]);
+ */
+export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?: {
+    /** Function that returns expanded content. If row doesn't have it, then should return `false`/`null`. */
+    subComponent?: ((row: Row<T>) => React.ReactNode) | undefined;
+    /** Function that returns whether expander is disabled */
+    isDisabled?: ((rowData: T) => boolean) | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    disableReordering: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    Cell: (props: CellProps<T, any>) => JSX.Element | null;
+    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+};

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

@@ -0,0 +1,81 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpanderColumn = exports.EXPANDER_CELL_ID = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var Buttons_1 = require("../../Buttons");
+var cells_1 = require("../cells");
+exports.EXPANDER_CELL_ID = 'iui-table-expander';
+/**
+ * Expander column that adds sub-content expander column to the Table.
+ * It is recommended to use it as the first column or after selection column.
+ * @example
+ * const subComponent = useCallback(
+ *   (row: Row) => (
+ *     <div style={{ padding: 16 }}>
+ *       <Leading>Extra information</Leading>
+ *       <pre>
+ *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+ *       </pre>
+ *     </div>
+ *   ),
+ *   [],
+ * );
+ * const isExpanderDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name2';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *     // Rest of your columns
+ *   ],
+ * ], [isExpanderDisabled, subComponent]);
+ */
+var ExpanderColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var subComponent = props.subComponent, isDisabled = props.isDisabled;
+    return {
+        id: exports.EXPANDER_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Cell: function (props) {
+            var row = props.row;
+            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
+                return null;
+            }
+            else {
+                return (react_1.default.createElement(Buttons_1.IconButton, { className: 'iui-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
+                        e.stopPropagation();
+                        row.toggleRowExpanded();
+                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, react_1.default.createElement(ChevronRight_1.default, null)));
+            }
+        },
+        cellRenderer: function (props) { return (react_1.default.createElement(cells_1.DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+    };
+};
+exports.ExpanderColumn = ExpanderColumn;

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

@@ -0,0 +1,3 @@
+export { ActionColumn } from './actionColumn';
+export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn';
+export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn';

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpanderColumn = exports.EXPANDER_CELL_ID = exports.SelectionColumn = exports.SELECTION_CELL_ID = exports.ActionColumn = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var actionColumn_1 = require("./actionColumn");
+Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return actionColumn_1.ActionColumn; } });
+var selectionColumn_1 = require("./selectionColumn");
+Object.defineProperty(exports, "SELECTION_CELL_ID", { enumerable: true, get: function () { return selectionColumn_1.SELECTION_CELL_ID; } });
+Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return selectionColumn_1.SelectionColumn; } });
+var expanderColumn_1 = require("./expanderColumn");
+Object.defineProperty(exports, "EXPANDER_CELL_ID", { enumerable: true, get: function () { return expanderColumn_1.EXPANDER_CELL_ID; } });
+Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return expanderColumn_1.ExpanderColumn; } });

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { CellProps, CellRendererProps, HeaderProps } from 'react-table';
+export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
+/**
+ * Selection column that adds selection checkbox column to the Table.
+ * It is recommended to use it as the first column.
+ * @example
+ * const isCheckboxDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name1';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *     // Rest of your columns
+ *    ],
+ * ], [isCheckboxDisabled]);
+ */
+export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
+    /** Function that returns whether row checkbox should be disabled. */
+    isDisabled?: ((rowData: T) => boolean) | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    disableReordering: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    Header: ({ getToggleAllRowsSelectedProps, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
+    Cell: ({ row }: CellProps<T, any>) => JSX.Element;
+    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+};