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

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

@@ -1,46 +1,20 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ActionColumn = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../../Checkbox/index.js");
-const index_js_2 = require("../../utils/index.js");
-const index_js_3 = require("../../DropdownMenu/index.js");
-const index_js_4 = require("../../Buttons/IconButton/index.js");
-const index_js_5 = require("../../Menu/index.js");
-const Table_js_1 = require("../Table.js");
-const selectionColumn_js_1 = require("./selectionColumn.js");
-const expanderColumn_js_1 = require("./expanderColumn.js");
-const classnames_1 = __importDefault(require("classnames"));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../../Checkbox/index.js');
+const index_js_2 = require('../../utils/index.js');
+const index_js_3 = require('../../DropdownMenu/index.js');
+const index_js_4 = require('../../Buttons/IconButton/index.js');
+const index_js_5 = require('../../Menu/index.js');
+const Table_js_1 = require('../Table.js');
+const selectionColumn_js_1 = require('./selectionColumn.js');
+const expanderColumn_js_1 = require('./expanderColumn.js');
 const ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
@@ -61,67 +35,91 @@ const ACTION_CELL_ID = 'iui-table-action';
  *   ),
  * },
  */
-const ActionColumn = ({ columnManager = false, } = {}) => {
-    return {
-        id: ACTION_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
-        columnClassName: 'iui-slot',
-        cellClassName: 'iui-slot',
-        disableReordering: true,
-        Header: ({ allColumns, dispatch, state }) => {
-            const [isOpen, setIsOpen] = React.useState(false);
-            const buttonRef = React.useRef(null);
-            if (!columnManager) {
-                return null;
-            }
-            const defaultColumnIds = [
-                selectionColumn_js_1.SELECTION_CELL_ID,
-                expanderColumn_js_1.EXPANDER_CELL_ID,
-                ACTION_CELL_ID,
-            ];
-            const headerCheckBoxes = () => allColumns
-                //Filters out any default columns made such as selection and expansion
-                .filter(({ id }) => !defaultColumnIds.includes(id))
-                .map((column) => {
-                const { checked } = column.getToggleHiddenProps();
-                const onClick = () => {
-                    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_js_1.tableResizeStartAction });
-                    // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
-                    // 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();
-                    });
-                };
-                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 },
-                    React.createElement("div", { id: `iui-column-${column.id}` }, column.render('Header'))));
-            });
-            const dropdownMenuProps = typeof columnManager !== 'boolean'
-                ? 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);
-                }, onShow: (i) => {
-                    var _a;
-                    setIsOpen(true);
-                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, 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))));
+const ActionColumn = ({ columnManager = false } = {}) => {
+  return {
+    id: ACTION_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    minWidth: 48,
+    width: 48,
+    maxWidth: 48,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    disableReordering: true,
+    Header: ({ allColumns, dispatch, state }) => {
+      const [isOpen, setIsOpen] = React.useState(false);
+      const buttonRef = React.useRef(null);
+      if (!columnManager) {
+        return null;
+      }
+      const defaultColumnIds = [
+        selectionColumn_js_1.SELECTION_CELL_ID,
+        expanderColumn_js_1.EXPANDER_CELL_ID,
+        ACTION_CELL_ID,
+      ];
+      const headerCheckBoxes = () =>
+        allColumns
+          //Filters out any default columns made such as selection and expansion
+          .filter(({ id }) => !defaultColumnIds.includes(id))
+          .map((column) => {
+            const { checked } = column.getToggleHiddenProps();
+            const onClick = () => {
+              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_js_1.tableResizeStartAction });
+              // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
+              // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
+              // So for better UX we need to scroll to that dropdown menu.
+              queueMicrotask(() => {
+                buttonRef.current?.scrollIntoView();
+              });
+            };
+            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,
+              },
+              React.createElement(
+                'div',
+                { id: `iui-column-${column.id}` },
+                column.render('Header'),
+              ),
+            );
+          });
+      const dropdownMenuProps =
+        typeof columnManager !== 'boolean'
+          ? columnManager.dropdownMenuProps
+          : {};
+      return React.createElement(
+        index_js_3.DropdownMenu,
+        {
+          ...dropdownMenuProps,
+          menuItems: headerCheckBoxes,
+          onVisibleChange: (open) => {
+            setIsOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
+          },
         },
-    };
+        React.createElement(
+          index_js_4.IconButton,
+          { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
+          React.createElement(index_js_2.SvgColumnManager, null),
+        ),
+      );
+    },
+  };
 };
 exports.ActionColumn = ActionColumn;

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

@@ -39,6 +39,6 @@ export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?:
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Cell: (props: CellProps<T, any>) => JSX.Element | null;
-    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+    Cell: (props: CellProps<T>) => React.JSX.Element | null;
+    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

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

@@ -1,37 +1,15 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ExpanderColumn = exports.EXPANDER_CELL_ID = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-const index_js_2 = require("../../Buttons/index.js");
-const index_js_3 = require("../cells/index.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../../utils/index.js');
+const index_js_2 = require('../../Buttons/index.js');
+const index_js_3 = require('../cells/index.js');
 exports.EXPANDER_CELL_ID = 'iui-table-expander';
 /**
  * Expander column that adds sub-content expander column to the Table.
@@ -57,30 +35,43 @@ exports.EXPANDER_CELL_ID = 'iui-table-expander';
  * ], [isExpanderDisabled, subComponent]);
  */
 const ExpanderColumn = (props = {}) => {
-    const { subComponent, isDisabled } = props;
-    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: (props) => {
-            const { row } = props;
-            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
-                return null;
-            }
-            else {
-                return (React.createElement(index_js_2.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(index_js_1.SvgChevronRight, null)));
-            }
-        },
-        cellRenderer: (props) => (React.createElement(index_js_3.DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
-    };
+  const { subComponent, isDisabled } = props;
+  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: (props) => {
+      const { row } = props;
+      if (!subComponent?.(row)) {
+        return null;
+      } else {
+        return React.createElement(
+          index_js_2.IconButton,
+          {
+            className: 'iui-table-row-expander',
+            styleType: 'borderless',
+            size: 'small',
+            onClick: (e) => {
+              e.stopPropagation();
+              row.toggleRowExpanded();
+            },
+            disabled: isDisabled?.(props.row.original),
+          },
+          React.createElement(index_js_1.SvgChevronRight, null),
+        );
+      }
+    },
+    cellRenderer: (props) =>
+      React.createElement(index_js_3.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };
 exports.ExpanderColumn = ExpanderColumn;

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

@@ -1,15 +1,45 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpanderColumn = exports.EXPANDER_CELL_ID = exports.SelectionColumn = exports.SELECTION_CELL_ID = exports.ActionColumn = void 0;
+'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_js_1 = require("./actionColumn.js");
-Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return actionColumn_js_1.ActionColumn; } });
-var selectionColumn_js_1 = require("./selectionColumn.js");
-Object.defineProperty(exports, "SELECTION_CELL_ID", { enumerable: true, get: function () { return selectionColumn_js_1.SELECTION_CELL_ID; } });
-Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return selectionColumn_js_1.SelectionColumn; } });
-var expanderColumn_js_1 = require("./expanderColumn.js");
-Object.defineProperty(exports, "EXPANDER_CELL_ID", { enumerable: true, get: function () { return expanderColumn_js_1.EXPANDER_CELL_ID; } });
-Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return expanderColumn_js_1.ExpanderColumn; } });
+var actionColumn_js_1 = require('./actionColumn.js');
+Object.defineProperty(exports, 'ActionColumn', {
+  enumerable: true,
+  get: function () {
+    return actionColumn_js_1.ActionColumn;
+  },
+});
+var selectionColumn_js_1 = require('./selectionColumn.js');
+Object.defineProperty(exports, 'SELECTION_CELL_ID', {
+  enumerable: true,
+  get: function () {
+    return selectionColumn_js_1.SELECTION_CELL_ID;
+  },
+});
+Object.defineProperty(exports, 'SelectionColumn', {
+  enumerable: true,
+  get: function () {
+    return selectionColumn_js_1.SelectionColumn;
+  },
+});
+var expanderColumn_js_1 = require('./expanderColumn.js');
+Object.defineProperty(exports, 'EXPANDER_CELL_ID', {
+  enumerable: true,
+  get: function () {
+    return expanderColumn_js_1.EXPANDER_CELL_ID;
+  },
+});
+Object.defineProperty(exports, 'ExpanderColumn', {
+  enumerable: true,
+  get: function () {
+    return expanderColumn_js_1.ExpanderColumn;
+  },
+});

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { CellProps, CellRendererProps, HeaderProps } from 'react-table';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
@@ -27,7 +27,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
-    Cell: ({ row }: CellProps<T, any>) => JSX.Element;
-    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => React.JSX.Element;
+    Cell: ({ row }: CellProps<T>) => React.JSX.Element;
+    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

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

@@ -1,36 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SelectionColumn = exports.SELECTION_CELL_ID = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../../Checkbox/index.js");
-const index_js_2 = require("../cells/index.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../../Checkbox/index.js');
+const index_js_2 = require('../cells/index.js');
 exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 /**
  * Selection column that adds selection checkbox column to the Table.
@@ -45,28 +23,56 @@ exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
  * ], [isCheckboxDisabled]);
  */
 const SelectionColumn = (props = {}) => {
-    const { isDisabled, density } = props;
-    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
-    return {
-        id: exports.SELECTION_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        disableReordering: true,
-        minWidth: densityWidth,
-        width: densityWidth,
-        maxWidth: densityWidth,
-        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 indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
-            return (React.createElement(index_js_1.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(index_js_1.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(index_js_2.DefaultCell, { ...props, isDisabled: (rowData) => !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)) })),
-    };
+  const { isDisabled, density } = props;
+  const densityWidth =
+    density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
+  return {
+    id: exports.SELECTION_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    disableReordering: true,
+    minWidth: densityWidth,
+    width: densityWidth,
+    maxWidth: densityWidth,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    Header: ({
+      getToggleAllRowsSelectedProps,
+      toggleAllRowsSelected,
+      rows,
+      initialRows,
+      state,
+    }) => {
+      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(index_js_1.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(index_js_1.Checkbox, {
+        ...row.getToggleRowSelectedProps(),
+        style: {},
+        title: '', // Removes default title that comes from react-table
+        disabled: isDisabled?.(row.original),
+        onClick: (e) => e.stopPropagation(),
+      }),
+    cellRenderer: (props) =>
+      React.createElement(index_js_2.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };
 exports.SelectionColumn = SelectionColumn;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
-export declare type BaseFilterProps = {
+export type BaseFilterProps = {
     /**
      * Filter body.
      */
@@ -21,4 +20,4 @@ export declare type BaseFilterProps = {
  *   />
  * </BaseFilter>
  */
-export declare const BaseFilter: (props: BaseFilterProps) => JSX.Element;
+export declare const BaseFilter: (props: BaseFilterProps) => React.JSX.Element;

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

@@ -1,40 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.BaseFilter = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
-const index_js_1 = require("../../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../../utils/index.js');
 /**
  * Filter wrapper that should be used when creating custom filters.
  * @example
@@ -50,12 +24,23 @@ const index_js_1 = require("../../utils/index.js");
  * </BaseFilter>
  */
 const BaseFilter = (props) => {
-    const { children, className, style, id } = props;
-    (0, index_js_1.useGlobals)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
-        // Prevents from triggering sort
-        onClick: (e) => {
-            e.stopPropagation();
-        }, id: id }, children));
+  const { children, className, style, id } = props;
+  (0, index_js_1.useGlobals)();
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-table-column-filter',
+        className,
+      ),
+      style: style,
+      // Prevents from triggering sort
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      id: id,
+    },
+    children,
+  );
 };
 exports.BaseFilter = BaseFilter;