@itwin/itwinui-react 3.13.4 → 3.14.0

package/cjs/core/Table/ColumnHeader.js

@@ -0,0 +1,194 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'ColumnHeader', {
+  enumerable: true,
+  get: function () {
+    return ColumnHeader;
+  },
+});
+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 _index = require('../../utils/index.js');
+const _index1 = require('./columns/index.js');
+const _FilterToggle = require('./filters/FilterToggle.js');
+const _utils = require('./utils.js');
+const _classnames = _interop_require_default._(require('classnames'));
+const ColumnHeader = (props) => {
+  let {
+    columnRefs,
+    column,
+    index,
+    areFiltersSet,
+    hasAnySubRows,
+    headers,
+    state,
+    data,
+    isResizable,
+    columnResizeMode,
+    enableColumnReordering,
+    density,
+    visibleColumns,
+    ...rest
+  } = props;
+  let isHeaderDirectClick = _react.useRef(false);
+  let COLUMN_MIN_WIDTHS = {
+    default: 72,
+    withExpander: 108,
+  };
+  let showFilterButton = (column) =>
+    (0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
+  let showSortButton = (column) => 0 !== data.length && column.canSort;
+  let { onClick, ...restSortProps } = column.getSortByToggleProps();
+  let columnHasExpanders =
+    hasAnySubRows &&
+    index === headers.findIndex((c) => c.id !== _index1.SELECTION_CELL_ID);
+  if ([void 0, 0].includes(column.minWidth)) {
+    column.minWidth = columnHasExpanders
+      ? COLUMN_MIN_WIDTHS.withExpander
+      : COLUMN_MIN_WIDTHS.default;
+    if ('number' == typeof column.width && column.minWidth > column.width)
+      column.minWidth = column.width;
+  }
+  let columnProps = column.getHeaderProps({
+    ...restSortProps,
+    className: (0, _classnames.default)(
+      'iui-table-cell',
+      {
+        'iui-actionable': column.canSort,
+        'iui-sorted': column.isSorted,
+        'iui-table-cell-sticky': !!column.sticky,
+      },
+      column.columnClassName,
+    ),
+    style: {
+      ...(0, _utils.getCellStyle)(column, !!state.isTableResizing),
+      ...(columnHasExpanders &&
+        (0, _utils.getSubRowStyle)({
+          density,
+        })),
+      ...(0, _utils.getStickyStyle)(column, visibleColumns),
+      flexWrap: 'wrap',
+      columnGap: 'var(--iui-size-xs)',
+    },
+  });
+  return _react.createElement(
+    _index.Box,
+    {
+      ...columnProps,
+      ...rest,
+      key: columnProps.key,
+      title: void 0,
+      ref: _react.useCallback(
+        (el) => {
+          if (el) {
+            columnRefs.current[column.id] = el;
+            column.resizeWidth = el.getBoundingClientRect().width;
+          }
+        },
+        [column, columnRefs],
+      ),
+      onMouseDown: () => {
+        isHeaderDirectClick.current = true;
+      },
+      onClick: (e) => {
+        if (isHeaderDirectClick.current) {
+          onClick?.(e);
+          isHeaderDirectClick.current = false;
+        }
+      },
+      tabIndex: showSortButton(column) ? 0 : void 0,
+      onKeyDown: (e) => {
+        if ('Enter' == e.key && showSortButton(column)) column.toggleSortBy();
+      },
+    },
+    _react.createElement(
+      _react.Fragment,
+      null,
+      _react.createElement(
+        _index.ShadowRoot,
+        null,
+        'string' == typeof column.Header
+          ? _react.createElement(
+              _index.LineClamp,
+              null,
+              _react.createElement('slot', null),
+            )
+          : _react.createElement('slot', null),
+        _react.createElement('slot', {
+          name: 'actions',
+        }),
+        _react.createElement('slot', {
+          name: 'resizers',
+        }),
+        _react.createElement('slot', {
+          name: 'shadows',
+        }),
+      ),
+      column.render('Header'),
+      (showFilterButton(column) || showSortButton(column)) &&
+        _react.createElement(
+          _index.Box,
+          {
+            className: 'iui-table-header-actions-container',
+            onKeyDown: (e) => e.stopPropagation(),
+            slot: 'actions',
+          },
+          showFilterButton(column) &&
+            _react.createElement(_FilterToggle.FilterToggle, {
+              column: column,
+            }),
+          showSortButton(column) &&
+            _react.createElement(
+              _index.Box,
+              {
+                className: 'iui-table-cell-end-icon',
+              },
+              column.isSortedDesc || (!column.isSorted && column.sortDescFirst)
+                ? _react.createElement(_index.SvgSortDown, {
+                    className: 'iui-table-sort',
+                    'aria-hidden': true,
+                  })
+                : _react.createElement(_index.SvgSortUp, {
+                    className: 'iui-table-sort',
+                    'aria-hidden': true,
+                  }),
+            ),
+        ),
+      isResizable &&
+        column.isResizerVisible &&
+        (index !== headers.length - 1 || 'expand' === columnResizeMode) &&
+        _react.createElement(
+          _index.Box,
+          {
+            ...column.getResizerProps(),
+            className: 'iui-table-resizer',
+            slot: 'resizers',
+          },
+          _react.createElement(_index.Box, {
+            className: 'iui-table-resizer-bar',
+          }),
+        ),
+      enableColumnReordering &&
+        !column.disableReordering &&
+        _react.createElement(_index.Box, {
+          className: 'iui-table-reorder-bar',
+          slot: 'resizers',
+        }),
+      'left' === column.sticky &&
+        state.sticky.isScrolledToRight &&
+        _react.createElement(_index.Box, {
+          className: 'iui-table-cell-shadow-right',
+          slot: 'shadows',
+        }),
+      'right' === column.sticky &&
+        state.sticky.isScrolledToLeft &&
+        _react.createElement(_index.Box, {
+          className: 'iui-table-cell-shadow-left',
+          slot: 'shadows',
+        }),
+    ),
+  );
+};

package/cjs/core/Table/Table.js

@@ -26,19 +26,15 @@ const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
 const _index = require('../../utils/index.js');
 const _utils = require('./utils.js');
 const _TableRowMemoized = require('./TableRowMemoized.js');
-const _index1 = require('./filters/index.js');
 const _customFilterFunctions = require('./filters/customFilterFunctions.js');
-const _index2 = require('./hooks/index.js');
-const _index3 = require('./actionHandlers/index.js');
-const _index4 = require('./columns/index.js');
+const _index1 = require('./hooks/index.js');
+const _index2 = require('./actionHandlers/index.js');
+const _index3 = require('./columns/index.js');
+const _ColumnHeader = require('./ColumnHeader.js');
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
-const COLUMN_MIN_WIDTHS = {
-  default: 72,
-  withExpander: 108,
-};
 const logWarning = (0, _index.createWarningLogger)();
 const flattenColumns = (columns) => {
   let flatColumns = [];
@@ -114,7 +110,7 @@ const Table = (props) => {
   let hasManualSelectionColumn = _react.useMemo(() => {
     let flatColumns = flattenColumns(columns);
     return flatColumns.some(
-      (column) => column.id === _index4.SELECTION_CELL_ID,
+      (column) => column.id === _index3.SELECTION_CELL_ID,
     );
   }, [columns]);
   let disableUserSelect = _react.useCallback((e) => {
@@ -152,7 +148,7 @@ const Table = (props) => {
           onSort?.(newState);
           break;
         case _reacttable.actions.setFilter:
-          currentFilter.current = (0, _index3.onFilterHandler)(
+          currentFilter.current = (0, _index2.onFilterHandler)(
             newState,
             action,
             previousState,
@@ -162,10 +158,10 @@ const Table = (props) => {
           break;
         case _reacttable.actions.toggleRowExpanded:
         case _reacttable.actions.toggleAllRowsExpanded:
-          (0, _index3.onExpandHandler)(newState, instance, onExpand);
+          (0, _index2.onExpandHandler)(newState, instance, onExpand);
           break;
         case singleRowSelectedAction:
-          newState = (0, _index3.onSingleSelectHandler)(
+          newState = (0, _index2.onSingleSelectHandler)(
             newState,
             action,
             instance,
@@ -174,7 +170,7 @@ const Table = (props) => {
           );
           break;
         case shiftRowSelectedAction:
-          newState = (0, _index3.onShiftSelectHandler)(
+          newState = (0, _index2.onShiftSelectHandler)(
             newState,
             action,
             instance,
@@ -185,7 +181,7 @@ const Table = (props) => {
         case _reacttable.actions.toggleRowSelected:
         case _reacttable.actions.toggleAllRowsSelected:
         case _reacttable.actions.toggleAllPageRowsSelected:
-          (0, _index3.onToggleHandler)(
+          (0, _index2.onToggleHandler)(
             newState,
             action,
             instance,
@@ -194,10 +190,10 @@ const Table = (props) => {
           );
           break;
         case tableResizeStartAction:
-          newState = (0, _index3.onTableResizeStart)(newState);
+          newState = (0, _index2.onTableResizeStart)(newState);
           break;
         case tableResizeEndAction:
-          newState = (0, _index3.onTableResizeEnd)(newState, action);
+          newState = (0, _index2.onTableResizeEnd)(newState, action);
           break;
         default:
           break;
@@ -249,25 +245,25 @@ const Table = (props) => {
       columnResizeMode,
     },
     _reacttable.useFlexLayout,
-    (0, _index2.useResizeColumns)(ownerDocument),
+    (0, _index1.useResizeColumns)(ownerDocument),
     _reacttable.useFilters,
-    (0, _index2.useSubRowFiltering)(hasAnySubRows),
+    (0, _index1.useSubRowFiltering)(hasAnySubRows),
     _reacttable.useGlobalFilter,
     _reacttable.useSortBy,
     _reacttable.useExpanded,
     _reacttable.usePagination,
     _reacttable.useRowSelect,
-    _index2.useSubRowSelection,
-    (0, _index2.useExpanderCell)(subComponent, expanderCell, isRowDisabled),
-    (0, _index2.useSelectionCell)(
+    _index1.useSubRowSelection,
+    (0, _index1.useExpanderCell)(subComponent, expanderCell, isRowDisabled),
+    (0, _index1.useSelectionCell)(
       isSelectable,
       selectionMode,
       isRowDisabled,
       density,
     ),
     _reacttable.useColumnOrder,
-    (0, _index2.useColumnDragAndDrop)(enableColumnReordering),
-    _index2.useStickyColumns,
+    (0, _index1.useColumnDragAndDrop)(enableColumnReordering),
+    _index1.useStickyColumns,
   );
   let {
     getTableProps,
@@ -300,9 +296,6 @@ const Table = (props) => {
     allColumns.some(
       (column) => null != column.filterValue && '' !== column.filterValue,
     ) || !!globalFilterValue;
-  let showFilterButton = (column) =>
-    (0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
-  let showSortButton = (column) => 0 !== data.length && column.canSort;
   let onRowClickHandler = _react.useCallback(
     (event, row) => {
       let isDisabled = isRowDisabled?.(row.original);
@@ -384,7 +377,7 @@ const Table = (props) => {
     ],
   );
   let tableRef = _react.useRef(null);
-  let { scrollToIndex, tableRowRef } = (0, _index2.useScrollToRow)({
+  let { scrollToIndex, tableRowRef } = (0, _index1.useScrollToRow)({
     ...props,
     page,
   });
@@ -514,13 +507,6 @@ const Table = (props) => {
   _react.useEffect(() => {
     updateStickyState();
   }, []);
-  let isHeaderDirectClick = _react.useRef(false);
-  let columnResizeRef = _react.useCallback((el, column) => {
-    if (el) {
-      columnRefs.current[column.id] = el;
-      column.resizeWidth = el.getBoundingClientRect().width;
-    }
-  }, []);
   return _react.createElement(
     _utils.TableColumnsContext.Provider,
     {
@@ -582,163 +568,24 @@ const Table = (props) => {
               _index.Box,
               headerGroupProps,
               headerGroup.headers.map((column, index) => {
-                let { onClick, ...restSortProps } =
-                  column.getSortByToggleProps();
-                let columnHasExpanders =
-                  hasAnySubRows &&
-                  index ===
-                    headerGroup.headers.findIndex(
-                      (c) => c.id !== _index4.SELECTION_CELL_ID,
-                    );
-                if ([void 0, 0].includes(column.minWidth)) {
-                  column.minWidth = columnHasExpanders
-                    ? COLUMN_MIN_WIDTHS.withExpander
-                    : COLUMN_MIN_WIDTHS.default;
-                  if (
-                    'number' == typeof column.width &&
-                    column.minWidth > column.width
-                  )
-                    column.minWidth = column.width;
-                }
-                let columnProps = column.getHeaderProps({
-                  ...restSortProps,
-                  className: (0, _classnames.default)(
-                    'iui-table-cell',
-                    {
-                      'iui-actionable': column.canSort,
-                      'iui-sorted': column.isSorted,
-                      'iui-table-cell-sticky': !!column.sticky,
-                    },
-                    column.columnClassName,
-                  ),
-                  style: {
-                    ...(0, _utils.getCellStyle)(
-                      column,
-                      !!state.isTableResizing,
-                    ),
-                    ...(columnHasExpanders &&
-                      (0, _utils.getSubRowStyle)({
-                        density,
-                      })),
-                    ...(0, _utils.getStickyStyle)(column, visibleColumns),
-                    flexWrap: 'wrap',
-                    columnGap: 'var(--iui-size-xs)',
-                  },
+                let dragAndDropProps = column.getDragAndDropProps();
+                return _react.createElement(_ColumnHeader.ColumnHeader, {
+                  ...dragAndDropProps,
+                  key: dragAndDropProps.key,
+                  columnRefs: columnRefs,
+                  column: column,
+                  index: index,
+                  areFiltersSet: areFiltersSet,
+                  hasAnySubRows: hasAnySubRows,
+                  headers: headerGroup.headers,
+                  state: state,
+                  data: data,
+                  isResizable: isResizable,
+                  columnResizeMode: columnResizeMode,
+                  enableColumnReordering: enableColumnReordering,
+                  density: density,
+                  visibleColumns: visibleColumns,
                 });
-                return _react.createElement(
-                  _index.Box,
-                  {
-                    ...columnProps,
-                    ...column.getDragAndDropProps(),
-                    key: columnProps.key,
-                    title: void 0,
-                    ref: (el) => {
-                      columnResizeRef(el, column);
-                    },
-                    onMouseDown: () => {
-                      isHeaderDirectClick.current = true;
-                    },
-                    onClick: (e) => {
-                      if (isHeaderDirectClick.current) {
-                        onClick?.(e);
-                        isHeaderDirectClick.current = false;
-                      }
-                    },
-                    tabIndex: showSortButton(column) ? 0 : void 0,
-                    onKeyDown: (e) => {
-                      if ('Enter' == e.key && showSortButton(column))
-                        column.toggleSortBy();
-                    },
-                  },
-                  _react.createElement(
-                    _react.Fragment,
-                    null,
-                    _react.createElement(
-                      _index.ShadowRoot,
-                      null,
-                      'string' == typeof column.Header
-                        ? _react.createElement(
-                            _index.LineClamp,
-                            null,
-                            _react.createElement('slot', null),
-                          )
-                        : _react.createElement('slot', null),
-                      _react.createElement('slot', {
-                        name: 'actions',
-                      }),
-                      _react.createElement('slot', {
-                        name: 'resizers',
-                      }),
-                      _react.createElement('slot', {
-                        name: 'shadows',
-                      }),
-                    ),
-                    column.render('Header'),
-                    (showFilterButton(column) || showSortButton(column)) &&
-                      _react.createElement(
-                        _index.Box,
-                        {
-                          className: 'iui-table-header-actions-container',
-                          onKeyDown: (e) => e.stopPropagation(),
-                          slot: 'actions',
-                        },
-                        showFilterButton(column) &&
-                          _react.createElement(_index1.FilterToggle, {
-                            column: column,
-                          }),
-                        showSortButton(column) &&
-                          _react.createElement(
-                            _index.Box,
-                            {
-                              className: 'iui-table-cell-end-icon',
-                            },
-                            column.isSortedDesc ||
-                              (!column.isSorted && column.sortDescFirst)
-                              ? _react.createElement(_index.SvgSortDown, {
-                                  className: 'iui-table-sort',
-                                  'aria-hidden': true,
-                                })
-                              : _react.createElement(_index.SvgSortUp, {
-                                  className: 'iui-table-sort',
-                                  'aria-hidden': true,
-                                }),
-                          ),
-                      ),
-                    isResizable &&
-                      column.isResizerVisible &&
-                      (index !== headerGroup.headers.length - 1 ||
-                        'expand' === columnResizeMode) &&
-                      _react.createElement(
-                        _index.Box,
-                        {
-                          ...column.getResizerProps(),
-                          className: 'iui-table-resizer',
-                          slot: 'resizers',
-                        },
-                        _react.createElement(_index.Box, {
-                          className: 'iui-table-resizer-bar',
-                        }),
-                      ),
-                    enableColumnReordering &&
-                      !column.disableReordering &&
-                      _react.createElement(_index.Box, {
-                        className: 'iui-table-reorder-bar',
-                        slot: 'resizers',
-                      }),
-                    'left' === column.sticky &&
-                      state.sticky.isScrolledToRight &&
-                      _react.createElement(_index.Box, {
-                        className: 'iui-table-cell-shadow-right',
-                        slot: 'shadows',
-                      }),
-                    'right' === column.sticky &&
-                      state.sticky.isScrolledToLeft &&
-                      _react.createElement(_index.Box, {
-                        className: 'iui-table-cell-shadow-left',
-                        slot: 'shadows',
-                      }),
-                  ),
-                );
               }),
             ),
           ),

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

@@ -1,11 +1,4 @@
-import * as React from 'react';
-import type { CommonProps } from '../../../utils/index.js';
-export type BaseFilterProps = {
-    /**
-     * Filter body.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+import type { PolymorphicForwardRefComponent } from '../../../utils/index.js';
 /**
  * Filter wrapper that should be used when creating custom filters.
  * @example
@@ -20,4 +13,4 @@ export type BaseFilterProps = {
  *   />
  * </BaseFilter>
  */
-export declare const BaseFilter: (props: BaseFilterProps) => React.JSX.Element;
+export declare const BaseFilter: PolymorphicForwardRefComponent<"form">;

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

@@ -13,19 +13,21 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 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,
+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);
     },
-    children,
-  );
-};
+    onClick: (0, _index.mergeEventHandlers)(props.onClick, (e) => {
+      e.stopPropagation();
+    }),
+  }),
+);

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

@@ -84,13 +84,11 @@ const DateRangeFilter = (props) => {
       );
     });
   }, []);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    if ('Enter' === event.key) setFilter([from, to]);
-  };
   return _react.createElement(
     _BaseFilter.BaseFilter,
-    null,
+    {
+      onSubmit: () => setFilter([from, to]),
+    },
     _react.createElement(_DatePickerInput.DatePickerInput, {
       ref: inputRef,
       label: translatedStrings.from,
@@ -98,7 +96,6 @@ const DateRangeFilter = (props) => {
       onChange: onFromChange,
       formatDate: formatDate,
       parseInput: parseInput,
-      onKeyDown: onKeyDown,
       placeholder: placeholder,
       selectedDate: to,
       isFromOrTo: 'from',
@@ -111,7 +108,6 @@ const DateRangeFilter = (props) => {
       onChange: onToChange,
       formatDate: formatDate,
       parseInput: parseInput,
-      onKeyDown: onKeyDown,
       placeholder: placeholder,
       selectedDate: from,
       isFromOrTo: 'to',
@@ -119,7 +115,6 @@ const DateRangeFilter = (props) => {
       showYearSelection: showYearSelection,
     }),
     _react.createElement(_FilterButtonBar.FilterButtonBar, {
-      setFilter: () => setFilter([from, to]),
       clearFilter: clearFilter,
       translatedLabels: translatedLabels,
     }),

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

@@ -10,9 +10,11 @@ export type FilterButtonBarProps = {
      */
     children?: React.ReactNode;
     /**
-     * Callback used for Filter button click. Should come from `BaseFilter`.
+     * Callback used for Filter button click.
+     *
+     * @deprecated Use the onSubmit callback from `BaseFilter` instead.
      */
-    setFilter: () => void;
+    setFilter?: () => void;
     /**
      * Callback used for Clear button click. Should come from `BaseFilter`.
      */

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

@@ -44,6 +44,7 @@ const FilterButtonBar = (props) => {
     _react.createElement(
       _Button.Button,
       {
+        type: 'submit',
         styleType: 'high-visibility',
         onClick: setFilter,
       },

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

@@ -33,20 +33,16 @@ const NumberRangeFilter = (props) => {
   let [to, setTo] = _react.useState(column.filterValue?.[1] ?? '');
   let parseInputValue = (value) =>
     !value || isNaN(Number(value)) ? void 0 : Number(value);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    if ('Enter' === event.key)
-      setFilter([parseInputValue(from), parseInputValue(to)]);
-  };
   return _react.createElement(
     _BaseFilter.BaseFilter,
-    null,
+    {
+      onSubmit: () => setFilter([parseInputValue(from), parseInputValue(to)]),
+    },
     _react.createElement(_LabeledInput.LabeledInput, {
       ref: inputRef,
       label: translatedStrings.from,
       value: from,
       onChange: (e) => setFrom(e.target.value),
-      onKeyDown: onKeyDown,
       type: 'number',
       displayStyle: 'inline',
     }),
@@ -56,10 +52,8 @@ const NumberRangeFilter = (props) => {
       onChange: (e) => setTo(e.target.value),
       type: 'number',
       displayStyle: 'inline',
-      onKeyDown: onKeyDown,
     }),
     _react.createElement(_FilterButtonBar.FilterButtonBar, {
-      setFilter: () => setFilter([parseInputValue(from), parseInputValue(to)]),
       clearFilter: clearFilter,
       translatedLabels: translatedLabels,
     }),