@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -1,81 +1,103 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "ActionColumn", {
-    enumerable: true,
-    get: function() {
-        return ActionColumn;
-    }
+Object.defineProperty(exports, 'ActionColumn', {
+  enumerable: true,
+  get: function () {
+    return ActionColumn;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _Checkbox = require("../../Checkbox/Checkbox.js");
-const _index = require("../../../utils/index.js");
-const _IconButton = require("../../Buttons/IconButton.js");
-const _Table = require("../Table.js");
-const _selectionColumn = require("./selectionColumn.js");
-const _expanderColumn = require("./expanderColumn.js");
-const _Popover = require("../../Popover/Popover.js");
-const _VisuallyHidden = require("../../VisuallyHidden/VisuallyHidden.js");
-const _Flex = require("../../Flex/Flex.js");
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _Checkbox = require('../../Checkbox/Checkbox.js');
+const _index = require('../../../utils/index.js');
+const _IconButton = require('../../Buttons/IconButton.js');
+const _Table = require('../Table.js');
+const _selectionColumn = require('./selectionColumn.js');
+const _expanderColumn = require('./expanderColumn.js');
+const _Popover = require('../../Popover/Popover.js');
+const _VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
+const _Flex = require('../../Flex/Flex.js');
 const ACTION_CELL_ID = 'iui-table-action';
-const ActionColumn = ({ columnManager = false } = {})=>({
-        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 })=>{
-            let buttonRef = _react.useRef(null);
-            if (!columnManager) return null;
-            let defaultColumnIds = [
-                _selectionColumn.SELECTION_CELL_ID,
-                _expanderColumn.EXPANDER_CELL_ID,
-                ACTION_CELL_ID
-            ];
-            let headerCheckBoxes = ()=>allColumns.filter(({ id })=>!defaultColumnIds.includes(id)).map((column)=>{
-                    let { checked } = column.getToggleHiddenProps();
-                    let onChange = ()=>{
-                        column.toggleHidden(checked);
-                        if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
-                        dispatch({
-                            type: _Table.tableResizeStartAction
-                        });
-                        queueMicrotask(()=>{
-                            buttonRef.current?.scrollIntoView({
-                                block: 'nearest'
-                            });
-                        });
-                    };
-                    return _react.createElement(_Checkbox.Checkbox, {
-                        key: column.id,
-                        checked: checked,
-                        disabled: column.disableToggleVisibility,
-                        onChange: onChange,
-                        label: column.render('Header')
-                    });
-                });
-            let popoverProps = 'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
-            return _react.createElement(_Popover.Popover, {
-                applyBackground: true,
-                content: _react.createElement(_Flex.Flex, {
-                    as: _index.FieldsetBase,
-                    className: "iui-table-column-manager",
-                    flexDirection: "column",
-                    alignItems: "flex-start"
-                }, _react.createElement(_VisuallyHidden.VisuallyHidden, {
-                    as: "legend"
-                }, "Show/hide columns"), headerCheckBoxes()),
-                ...popoverProps
-            }, _react.createElement(_IconButton.IconButton, {
-                styleType: "borderless",
-                ref: buttonRef,
-                label: "Column manager"
-            }, _react.createElement(_index.SvgColumnManager, null)));
-        }
-    });
+const ActionColumn = ({ columnManager = false } = {}) => ({
+  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 }) => {
+    let buttonRef = _react.useRef(null);
+    if (!columnManager) return null;
+    let defaultColumnIds = [
+      _selectionColumn.SELECTION_CELL_ID,
+      _expanderColumn.EXPANDER_CELL_ID,
+      ACTION_CELL_ID,
+    ];
+    let headerCheckBoxes = () =>
+      allColumns
+        .filter(({ id }) => !defaultColumnIds.includes(id))
+        .map((column) => {
+          let { checked } = column.getToggleHiddenProps();
+          let onChange = () => {
+            column.toggleHidden(checked);
+            if (0 === Object.keys(state.columnResizing.columnWidths).length)
+              return;
+            dispatch({
+              type: _Table.tableResizeStartAction,
+            });
+            queueMicrotask(() => {
+              buttonRef.current?.scrollIntoView({
+                block: 'nearest',
+              });
+            });
+          };
+          return _react.createElement(_Checkbox.Checkbox, {
+            key: column.id,
+            checked: checked,
+            disabled: column.disableToggleVisibility,
+            onChange: onChange,
+            label: column.render('Header'),
+          });
+        });
+    let popoverProps =
+      'boolean' != typeof columnManager ? columnManager.dropdownMenuProps : {};
+    return _react.createElement(
+      _Popover.Popover,
+      {
+        applyBackground: true,
+        content: _react.createElement(
+          _Flex.Flex,
+          {
+            as: _index.FieldsetBase,
+            className: 'iui-table-column-manager',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+          },
+          _react.createElement(
+            _VisuallyHidden.VisuallyHidden,
+            {
+              as: 'legend',
+            },
+            'Show/hide columns',
+          ),
+          headerCheckBoxes(),
+        ),
+        ...popoverProps,
+      },
+      _react.createElement(
+        _IconButton.IconButton,
+        {
+          styleType: 'borderless',
+          ref: buttonRef,
+          label: 'Column manager',
+        },
+        _react.createElement(_index.SvgColumnManager, null),
+      ),
+    );
+  },
+});

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

@@ -1,57 +1,64 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'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]
+  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;
-    }
+  EXPANDER_CELL_ID: function () {
+    return EXPANDER_CELL_ID;
+  },
+  ExpanderColumn: function () {
+    return ExpanderColumn;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-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 _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+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 = {})=>{
-    let { 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)=>{
-            let { row } = props;
-            if (subComponent?.(row)) return _react.createElement(_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
-            }, _react.createElement(_index.SvgChevronRight, null));
-            return null;
-        },
-        cellRenderer: (props)=>_react.createElement(_index1.DefaultCell, {
-                ...props,
-                isDisabled: (rowData)=>!!isDisabled?.(rowData)
-            })
-    };
+const ExpanderColumn = (props = {}) => {
+  let { 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) => {
+      let { row } = props;
+      if (subComponent?.(row))
+        return _react.createElement(
+          _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,
+          },
+          _react.createElement(_index.SvgChevronRight, null),
+        );
+      return null;
+    },
+    cellRenderer: (props) =>
+      _react.createElement(_index1.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

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

@@ -1,30 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'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]
+  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;
-    }
+  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");
+const _actionColumn = require('./actionColumn.js');
+const _selectionColumn = require('./selectionColumn.js');
+const _expanderColumn = require('./expanderColumn.js');

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

@@ -1,67 +1,88 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'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]
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
     });
 }
 _export(exports, {
-    SELECTION_CELL_ID: function() {
-        return SELECTION_CELL_ID;
-    },
-    SelectionColumn: function() {
-        return SelectionColumn;
-    }
+  SELECTION_CELL_ID: function () {
+    return SELECTION_CELL_ID;
+  },
+  SelectionColumn: function () {
+    return SelectionColumn;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _Checkbox = require("../../Checkbox/Checkbox.js");
-const _index = require("../cells/index.js");
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _Checkbox = require('../../Checkbox/Checkbox.js');
+const _index = require('../cells/index.js');
 const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
-const SelectionColumn = (props = {})=>{
-    let { isDisabled, density } = props;
-    let densityWidth = 'condensed' === density ? 42 : 'extra-condensed' === density ? 34 : 48;
-    return {
-        id: 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, preFilteredFlatRows, state })=>{
-            let disabled = preFilteredFlatRows.every((row)=>isDisabled?.(row.original));
-            let checked = preFilteredFlatRows.every((row)=>state.selectedRowIds[row.id] || isDisabled?.(row.original));
-            let indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
-            return _react.createElement(_Checkbox.Checkbox, {
-                ...getToggleAllRowsSelectedProps(),
-                style: {},
-                title: "",
-                checked: checked && !disabled,
-                indeterminate: indeterminate,
-                disabled: disabled,
-                onChange: ()=>toggleAllRowsSelected(!rows.some((row)=>row.isSelected))
-            });
+const SelectionColumn = (props = {}) => {
+  let { isDisabled, density } = props;
+  let densityWidth =
+    'condensed' === density ? 42 : 'extra-condensed' === density ? 34 : 48;
+  return {
+    id: 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,
+      preFilteredFlatRows,
+      state,
+    }) => {
+      let disabled = preFilteredFlatRows.every((row) =>
+        isDisabled?.(row.original),
+      );
+      let checked = preFilteredFlatRows.every(
+        (row) => state.selectedRowIds[row.id] || isDisabled?.(row.original),
+      );
+      let indeterminate =
+        !checked && Object.keys(state.selectedRowIds).length > 0;
+      return _react.createElement(_Checkbox.Checkbox, {
+        ...getToggleAllRowsSelectedProps(),
+        style: {},
+        title: '',
+        checked: checked && !disabled,
+        indeterminate: indeterminate,
+        disabled: disabled,
+        onChange: () =>
+          toggleAllRowsSelected(!rows.some((row) => row.isSelected)),
+      });
+    },
+    Cell: ({ row, selectSubRows = true }) =>
+      _react.createElement(_Checkbox.Checkbox, {
+        ...row.getToggleRowSelectedProps(),
+        style: {},
+        title: '',
+        disabled: isDisabled?.(row.original),
+        onClick: (e) => e.stopPropagation(),
+        onChange: () => {
+          if (row.subRows.length > 0 && selectSubRows)
+            row.toggleRowSelected(
+              !row.subRows.every(
+                (subRow) => subRow.isSelected || isDisabled?.(subRow.original),
+              ),
+            );
+          else row.toggleRowSelected(!row.isSelected);
         },
-        Cell: ({ row, selectSubRows = true })=>_react.createElement(_Checkbox.Checkbox, {
-                ...row.getToggleRowSelectedProps(),
-                style: {},
-                title: "",
-                disabled: isDisabled?.(row.original),
-                onClick: (e)=>e.stopPropagation(),
-                onChange: ()=>{
-                    if (row.subRows.length > 0 && selectSubRows) row.toggleRowSelected(!row.subRows.every((subRow)=>subRow.isSelected || isDisabled?.(subRow.original)));
-                    else row.toggleRowSelected(!row.isSelected);
-                }
-            }),
-        cellRenderer: (props)=>_react.createElement(_index.DefaultCell, {
-                ...props,
-                isDisabled: (rowData)=>!!isDisabled?.(rowData)
-            })
-    };
+      }),
+    cellRenderer: (props) =>
+      _react.createElement(_index.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

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

@@ -1,27 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "BaseFilter", {
-    enumerable: true,
-    get: function() {
-        return BaseFilter;
-    }
+Object.defineProperty(exports, 'BaseFilter', {
+  enumerable: true,
+  get: function () {
+    return BaseFilter;
+  },
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _classnames = _interop_require_default._(require("classnames"));
-const _index = require("../../../utils/index.js");
-const BaseFilter = (props)=>{
-    let { children, className, style, id } = props;
-    (0, _index.useGlobals)();
-    return _react.createElement(_index.Box, {
-        className: (0, _classnames.default)('iui-table-column-filter', className),
-        style: style,
-        onClick: (e)=>{
-            e.stopPropagation();
-        },
-        id: id
-    }, children);
-};
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../../utils/index.js');
+const BaseFilter = _react.forwardRef((props, forwardedRef) =>
+  _react.createElement(_index.Box, {
+    as: 'form',
+    ...props,
+    ref: forwardedRef,
+    className: (0, _classnames.default)(
+      'iui-table-column-filter',
+      props.className,
+    ),
+    onSubmit: (e) => {
+      e.preventDefault();
+      props.onSubmit?.(e);
+    },
+    onClick: (0, _index.mergeEventHandlers)(props.onClick, (e) => {
+      e.stopPropagation();
+    }),
+  }),
+);