@itwin/itwinui-react 3.11.3 → 3.12.0

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { HeaderProps } from '../../../react-table/react-table.js';
-import type { DropdownMenuProps } from '../../DropdownMenu/DropdownMenu.js';
+import { DropdownMenu } from '../../DropdownMenu/DropdownMenu.js';
 type ActionColumnProps = {
     columnManager?: boolean | {
-        dropdownMenuProps: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
+        dropdownMenuProps: Omit<React.ComponentPropsWithoutRef<typeof DropdownMenu>, 'menuItems' | 'children'>;
     };
 };
 /**
@@ -35,6 +35,6 @@ export declare const ActionColumn: <T extends Record<string, unknown>>({ columnM
     columnClassName: string;
     cellClassName: string;
     disableReordering: boolean;
-    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => React.JSX.Element | null;
+    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 };
 export {};

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

@@ -1,117 +1,104 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-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.
- *--------------------------------------------------------------------------------------------*/
-const React = __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");
+Object.defineProperty(exports, 'ActionColumn', {
+  enumerable: true,
+  get: function () {
+    return ActionColumn;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _Checkbox = require('../../Checkbox/Checkbox.js');
+const _index = require('../../../utils/index.js');
+const _DropdownMenu = require('../../DropdownMenu/DropdownMenu.js');
+const _IconButton = require('../../Buttons/IconButton.js');
+const _MenuItem = require('../../Menu/MenuItem.js');
+const _Table = require('../Table.js');
+const _selectionColumn = require('./selectionColumn.js');
+const _expanderColumn = require('./expanderColumn.js');
 const 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>
- *   ),
- * },
- */
-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({ block: 'nearest' });
-                    });
-                };
-                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))));
+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.SELECTION_CELL_ID,
+        _expanderColumn.EXPANDER_CELL_ID,
+        ACTION_CELL_ID,
+      ];
+      const headerCheckBoxes = () =>
+        allColumns
+          .filter(({ id }) => !defaultColumnIds.includes(id))
+          .map((column) => {
+            const { checked } = column.getToggleHiddenProps();
+            const onClick = () => {
+              column.toggleHidden(checked);
+              if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+                return;
+              }
+              dispatch({
+                type: _Table.tableResizeStartAction,
+              });
+              queueMicrotask(() => {
+                buttonRef.current?.scrollIntoView({
+                  block: 'nearest',
+                });
+              });
+            };
+            return (0, _jsxruntime.jsx)(
+              _MenuItem.MenuItem,
+              {
+                startIcon: (0, _jsxruntime.jsx)(_Checkbox.Checkbox, {
+                  checked: checked,
+                  disabled: column.disableToggleVisibility,
+                  onClick: (e) => e.stopPropagation(),
+                  onChange: onClick,
+                  'aria-labelledby': `iui-column-${column.id}`,
+                }),
+                onClick: onClick,
+                disabled: column.disableToggleVisibility,
+                children: (0, _jsxruntime.jsx)('div', {
+                  id: `iui-column-${column.id}`,
+                  children: column.render('Header'),
+                }),
+              },
+              column.id,
+            );
+          });
+      const dropdownMenuProps =
+        typeof columnManager !== 'boolean'
+          ? columnManager.dropdownMenuProps
+          : {};
+      return (0, _jsxruntime.jsx)(_DropdownMenu.DropdownMenu, {
+        ...dropdownMenuProps,
+        menuItems: headerCheckBoxes,
+        onVisibleChange: (open) => {
+          setIsOpen(open);
+          dropdownMenuProps?.onVisibleChange?.(open);
         },
-    };
+        children: (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+          styleType: 'borderless',
+          isActive: isOpen,
+          ref: buttonRef,
+          children: (0, _jsxruntime.jsx)(_index.SvgColumnManager, {}),
+        }),
+      });
+    },
+  };
 };
-exports.ActionColumn = ActionColumn;

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

@@ -26,9 +26,9 @@ export declare const EXPANDER_CELL_ID = "iui-table-expander";
  */
 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;
+    subComponent?: (row: Row<T>) => React.ReactNode;
     /** Function that returns whether expander is disabled */
-    isDisabled?: ((rowData: T) => boolean) | undefined;
+    isDisabled?: (rowData: T) => boolean;
 }) => {
     id: string;
     disableResizing: boolean;
@@ -39,6 +39,6 @@ export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?:
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Cell: (props: CellProps<T>) => React.JSX.Element | null;
-    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
+    Cell: (props: CellProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+    cellRenderer: (props: CellRendererProps<T>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,86 +1,64 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 });
-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.
- *--------------------------------------------------------------------------------------------*/
-const React = __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.
- * It is recommended to use it as the first column or after selection column.
- * @example
- * const subComponent = useCallback(
- *   (row: Row) => (
- *     <div style={{ padding: 16 }}>
- *       <Text variant='leading'>Extra information</Text>
- *       <pre>
- *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
- *       </pre>
- *     </div>
- *   ),
- *   [],
- * );
- * const isExpanderDisabled = useCallback((rowData) => {
- *   return rowData.name === 'Name2';
- * }, []);
- * const columns = useMemo(() => [
- *   ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
- *   // Rest of your columns
- * ], [isExpanderDisabled, subComponent]);
- */
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  EXPANDER_CELL_ID: function () {
+    return EXPANDER_CELL_ID;
+  },
+  ExpanderColumn: function () {
+    return ExpanderColumn;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../../utils/index.js');
+const _IconButton = require('../../Buttons/IconButton.js');
+const _index1 = require('../cells/index.js');
+const EXPANDER_CELL_ID = 'iui-table-expander';
 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: 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 (0, _jsxruntime.jsx)(_IconButton.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,
+          children: (0, _jsxruntime.jsx)(_index.SvgChevronRight, {}),
+        });
+      }
+    },
+    cellRenderer: (props) =>
+      (0, _jsxruntime.jsx)(_index1.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };
-exports.ExpanderColumn = ExpanderColumn;

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

@@ -1,15 +1,31 @@
-"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; } });
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  ActionColumn: function () {
+    return _actionColumn.ActionColumn;
+  },
+  EXPANDER_CELL_ID: function () {
+    return _expanderColumn.EXPANDER_CELL_ID;
+  },
+  ExpanderColumn: function () {
+    return _expanderColumn.ExpanderColumn;
+  },
+  SELECTION_CELL_ID: function () {
+    return _selectionColumn.SELECTION_CELL_ID;
+  },
+  SelectionColumn: function () {
+    return _selectionColumn.SelectionColumn;
+  },
+});
+const _actionColumn = require('./actionColumn.js');
+const _selectionColumn = require('./selectionColumn.js');
+const _expanderColumn = require('./expanderColumn.js');

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { CellProps, CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
@@ -15,8 +14,8 @@ export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
  */
 export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
     /** Function that returns whether row checkbox should be disabled. */
-    isDisabled?: ((rowData: T) => boolean) | undefined;
-    density?: "default" | "condensed" | "extra-condensed" | undefined;
+    isDisabled?: (rowData: T) => boolean;
+    density?: "default" | "condensed" | "extra-condensed";
 }) => {
     id: string;
     disableResizing: boolean;
@@ -27,7 +26,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => React.JSX.Element;
-    Cell: ({ row, selectSubRows }: CellProps<T>) => React.JSX.Element;
-    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ row, selectSubRows }: CellProps<T>) => import("react/jsx-runtime").JSX.Element;
+    cellRenderer: (props: CellRendererProps<T>) => import("react/jsx-runtime").JSX.Element;
 };