@itwin/itwinui-react 3.0.4 → 3.0.5

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

@@ -1,20 +1,20 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionColumn = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const Checkbox_js_1 = require('../../Checkbox/Checkbox.js');
-const index_js_1 = require('../../utils/index.js');
-const DropdownMenu_js_1 = require('../../DropdownMenu/DropdownMenu.js');
-const IconButton_js_1 = require('../../Buttons/IconButton.js');
-const MenuItem_js_1 = require('../../Menu/MenuItem.js');
-const Table_js_1 = require('../Table.js');
-const selectionColumn_js_1 = require('./selectionColumn.js');
-const expanderColumn_js_1 = require('./expanderColumn.js');
+const React = tslib_1.__importStar(require("react"));
+const Checkbox_js_1 = require("../../Checkbox/Checkbox.js");
+const index_js_1 = require("../../utils/index.js");
+const DropdownMenu_js_1 = require("../../DropdownMenu/DropdownMenu.js");
+const IconButton_js_1 = require("../../Buttons/IconButton.js");
+const MenuItem_js_1 = require("../../Menu/MenuItem.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.
@@ -35,91 +35,61 @@ 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(() => {
-                buttonRef.current?.scrollIntoView();
-              });
-            };
-            return React.createElement(
-              MenuItem_js_1.MenuItem,
-              {
-                key: column.id,
-                startIcon: React.createElement(Checkbox_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(
-        DropdownMenu_js_1.DropdownMenu,
-        {
-          ...dropdownMenuProps,
-          menuItems: headerCheckBoxes,
-          onVisibleChange: (open) => {
-            setIsOpen(open);
-            dropdownMenuProps?.onVisibleChange?.(open);
-          },
+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(MenuItem_js_1.MenuItem, { key: column.id, startIcon: React.createElement(Checkbox_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(DropdownMenu_js_1.DropdownMenu, { ...dropdownMenuProps, menuItems: headerCheckBoxes, onVisibleChange: (open) => {
+                    setIsOpen(open);
+                    dropdownMenuProps?.onVisibleChange?.(open);
+                } },
+                React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
+                    React.createElement(index_js_1.SvgColumnManager, null))));
         },
-        React.createElement(
-          IconButton_js_1.IconButton,
-          { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
-          React.createElement(index_js_1.SvgColumnManager, null),
-        ),
-      );
-    },
-  };
+    };
 };
 exports.ActionColumn = ActionColumn;

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

@@ -1,15 +1,15 @@
-'use strict';
-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');
+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 = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../utils/index.js');
-const IconButton_js_1 = require('../../Buttons/IconButton.js');
-const index_js_2 = require('../cells/index.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../../utils/index.js");
+const IconButton_js_1 = require("../../Buttons/IconButton.js");
+const index_js_2 = require("../cells/index.js");
 exports.EXPANDER_CELL_ID = 'iui-table-expander';
 /**
  * Expander column that adds sub-content expander column to the Table.
@@ -35,44 +35,30 @@ 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?.(row)) {
-        return null;
-      } else {
-        return React.createElement(
-          IconButton_js_1.IconButton,
-          {
-            className: 'iui-table-row-expander',
-            styleType: 'borderless',
-            size: 'small',
-            onClick: (e) => {
-              e.stopPropagation();
-              row.toggleRowExpanded();
-            },
-            disabled: isDisabled?.(props.row.original),
-            'aria-expanded': row.isExpanded,
-          },
-          React.createElement(index_js_1.SvgChevronRight, null),
-        );
-      }
-    },
-    cellRenderer: (props) =>
-      React.createElement(index_js_2.DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!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(IconButton_js_1.IconButton, { className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
+                        e.stopPropagation();
+                        row.toggleRowExpanded();
+                    }, disabled: isDisabled?.(props.row.original), "aria-expanded": row.isExpanded }, React.createElement(index_js_1.SvgChevronRight, null)));
+            }
+        },
+        cellRenderer: (props) => (React.createElement(index_js_2.DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
+    };
 };
 exports.ExpanderColumn = ExpanderColumn;

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

@@ -1,45 +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;
+"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.js

@@ -1,14 +1,14 @@
-'use strict';
-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');
+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 = tslib_1.__importStar(require('react'));
-const Checkbox_js_1 = require('../../Checkbox/Checkbox.js');
-const index_js_1 = require('../cells/index.js');
+const React = tslib_1.__importStar(require("react"));
+const Checkbox_js_1 = require("../../Checkbox/Checkbox.js");
+const index_js_1 = require("../cells/index.js");
 exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 /**
  * Selection column that adds selection checkbox column to the Table.
@@ -23,56 +23,28 @@ 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?.(row.original));
-      const checked = initialRows.every(
-        (row) => state.selectedRowIds[row.id] || isDisabled?.(row.original),
-      );
-      const indeterminate =
-        !checked && Object.keys(state.selectedRowIds).length > 0;
-      return React.createElement(Checkbox_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(Checkbox_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_1.DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!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(Checkbox_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(Checkbox_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_1.DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
+    };
 };
 exports.SelectionColumn = SelectionColumn;

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

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseFilter = void 0;
-const tslib_1 = require('tslib');
+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 = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-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
@@ -24,23 +24,12 @@ 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(
-    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,
-  );
+    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;