@itwin/itwinui-react 3.13.4 → 3.14.1

package/cjs/core/Table/Table.js

@@ -26,20 +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 = [];
   columns.forEach((column) => {
@@ -114,7 +109,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 +147,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 +157,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 +169,7 @@ const Table = (props) => {
           );
           break;
         case shiftRowSelectedAction:
-          newState = (0, _index3.onShiftSelectHandler)(
+          newState = (0, _index2.onShiftSelectHandler)(
             newState,
             action,
             instance,
@@ -185,7 +180,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 +189,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 +244,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,
@@ -286,6 +281,7 @@ const Table = (props) => {
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
+  let logWarning = (0, _index.useWarningLogger)();
   if (1 === columns.length && 'columns' in columns[0])
     headerGroups = _headerGroups.slice(1);
   let ariaDataAttributes = Object.entries(rest).reduce(
@@ -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 || column.id || index,
+                  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,
     }),

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

@@ -22,21 +22,18 @@ const TextFilter = (props) => {
   _react.useEffect(() => {
     if (inputRef.current) inputRef.current.focus();
   }, []);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    if ('Enter' === event.key) setFilter(text);
-  };
   return _react.createElement(
     _BaseFilter.BaseFilter,
-    null,
+    {
+      onSubmit: () => setFilter(text),
+    },
     _react.createElement(_Input.Input, {
       ref: inputRef,
       value: text,
       onChange: (e) => setText(e.target.value),
-      onKeyDown: onKeyDown,
+      required: true,
     }),
     _react.createElement(_FilterButtonBar.FilterButtonBar, {
-      setFilter: () => setFilter(text),
       clearFilter: clearFilter,
       translatedLabels: translatedLabels,
     }),

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

@@ -1,5 +1,4 @@
 export { BaseFilter } from './BaseFilter.js';
-export type { BaseFilterProps } from './BaseFilter.js';
 export { tableFilters } from './tableFilters.js';
 export type { DateRangeFilterOptions } from './tableFilters.js';
 export type { TableFilterProps, TableFilterValue } from './types.js';

package/cjs/core/Table/index.d.ts

@@ -1,7 +1,7 @@
 export { Table } from './Table.js';
 export type { TablePaginatorRendererProps } from './Table.js';
 export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
-export type { BaseFilterProps, DateRangeFilterOptions, FilterButtonBarProps, FilterButtonBarTranslation, TableFilterProps, TableFilterValue, } from './filters/index.js';
+export type { DateRangeFilterOptions, FilterButtonBarProps, FilterButtonBarTranslation, TableFilterProps, TableFilterValue, } from './filters/index.js';
 export { DefaultCell, EditableCell } from './cells/index.js';
 export type { DefaultCellProps, EditableCellProps } from './cells/index.js';
 export { TablePaginator } from './TablePaginator.js';

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -38,10 +38,6 @@ type RootProps = {
          */
         applyBackground?: boolean;
     };
-    /**
-     * This will be used to determine if background will be applied.
-     */
-    shouldApplyBackground?: boolean;
 };
 type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];