@itwin/itwinui-react 3.13.3 → 3.14.0

package/esm/core/Table/Table.js

@@ -16,25 +16,16 @@ import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import {
   useGlobals,
   useResizeObserver,
-  SvgSortDown,
-  SvgSortUp,
   useLayoutEffect,
   Box,
   createWarningLogger,
   ShadowRoot,
-  LineClamp,
   useMergedRefs,
   useLatestRef,
   useVirtualScroll,
 } from '../../utils/index.js';
-import {
-  TableColumnsContext,
-  getCellStyle,
-  getStickyStyle,
-  getSubRowStyle,
-} from './utils.js';
+import { TableColumnsContext } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
-import { FilterToggle } from './filters/index.js';
 import { customFilterFunctions } from './filters/customFilterFunctions.js';
 import {
   useExpanderCell,
@@ -56,14 +47,11 @@ import {
   onTableResizeStart,
 } from './actionHandlers/index.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
+import { ColumnHeader } from './ColumnHeader.js';
 let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 let tableResizeEndAction = 'tableResizeEnd';
-let COLUMN_MIN_WIDTHS = {
-  default: 72,
-  withExpander: 108,
-};
 let logWarning = createWarningLogger();
 let flattenColumns = (columns) => {
   let flatColumns = [];
@@ -318,9 +306,6 @@ export 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);
@@ -448,6 +433,7 @@ export const Table = (props) => {
     }
   });
   let { virtualizer, css: virtualizerCss } = useVirtualScroll({
+    enabled: enableVirtualization,
     count: page.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => rowHeight,
@@ -531,13 +517,6 @@ export 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(
     TableColumnsContext.Provider,
     {
@@ -596,154 +575,24 @@ export const Table = (props) => {
               Box,
               headerGroupProps,
               headerGroup.headers.map((column, index) => {
-                let { onClick, ...restSortProps } =
-                  column.getSortByToggleProps();
-                let columnHasExpanders =
-                  hasAnySubRows &&
-                  index ===
-                    headerGroup.headers.findIndex(
-                      (c) => c.id !== SELECTION_CELL_ID,
-                    );
-                if ([void 0, 0].includes(column.minWidth))
-                  column.minWidth = columnHasExpanders
-                    ? COLUMN_MIN_WIDTHS.withExpander
-                    : COLUMN_MIN_WIDTHS.default;
-                let columnProps = column.getHeaderProps({
-                  ...restSortProps,
-                  className: cx(
-                    'iui-table-cell',
-                    {
-                      'iui-actionable': column.canSort,
-                      'iui-sorted': column.isSorted,
-                      'iui-table-cell-sticky': !!column.sticky,
-                    },
-                    column.columnClassName,
-                  ),
-                  style: {
-                    ...getCellStyle(column, !!state.isTableResizing),
-                    ...(columnHasExpanders &&
-                      getSubRowStyle({
-                        density,
-                      })),
-                    ...getStickyStyle(column, visibleColumns),
-                    flexWrap: 'wrap',
-                    columnGap: 'var(--iui-size-xs)',
-                  },
+                let dragAndDropProps = column.getDragAndDropProps();
+                return React.createElement(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(
-                  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(
-                      ShadowRoot,
-                      null,
-                      'string' == typeof column.Header
-                        ? React.createElement(
-                            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(
-                        Box,
-                        {
-                          className: 'iui-table-header-actions-container',
-                          onKeyDown: (e) => e.stopPropagation(),
-                          slot: 'actions',
-                        },
-                        showFilterButton(column) &&
-                          React.createElement(FilterToggle, {
-                            column: column,
-                          }),
-                        showSortButton(column) &&
-                          React.createElement(
-                            Box,
-                            {
-                              className: 'iui-table-cell-end-icon',
-                            },
-                            column.isSortedDesc ||
-                              (!column.isSorted && column.sortDescFirst)
-                              ? React.createElement(SvgSortDown, {
-                                  className: 'iui-table-sort',
-                                  'aria-hidden': true,
-                                })
-                              : React.createElement(SvgSortUp, {
-                                  className: 'iui-table-sort',
-                                  'aria-hidden': true,
-                                }),
-                          ),
-                      ),
-                    isResizable &&
-                      column.isResizerVisible &&
-                      (index !== headerGroup.headers.length - 1 ||
-                        'expand' === columnResizeMode) &&
-                      React.createElement(
-                        Box,
-                        {
-                          ...column.getResizerProps(),
-                          className: 'iui-table-resizer',
-                          slot: 'resizers',
-                        },
-                        React.createElement(Box, {
-                          className: 'iui-table-resizer-bar',
-                        }),
-                      ),
-                    enableColumnReordering &&
-                      !column.disableReordering &&
-                      React.createElement(Box, {
-                        className: 'iui-table-reorder-bar',
-                        slot: 'resizers',
-                      }),
-                    'left' === column.sticky &&
-                      state.sticky.isScrolledToRight &&
-                      React.createElement(Box, {
-                        className: 'iui-table-cell-shadow-right',
-                        slot: 'shadows',
-                      }),
-                    'right' === column.sticky &&
-                      state.sticky.isScrolledToLeft &&
-                      React.createElement(Box, {
-                        className: 'iui-table-cell-shadow-left',
-                        slot: 'shadows',
-                      }),
-                  ),
-                );
               }),
             ),
           ),

package/esm/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/esm/core/Table/filters/BaseFilter.js

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, useGlobals } from '../../../utils/index.js';
-export const BaseFilter = (props) => {
-  let { children, className, style, id } = props;
-  useGlobals();
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-table-column-filter', className),
-      style: style,
-      onClick: (e) => {
-        e.stopPropagation();
-      },
-      id: id,
+import { Box, mergeEventHandlers } from '../../../utils/index.js';
+export const BaseFilter = React.forwardRef((props, forwardedRef) =>
+  React.createElement(Box, {
+    as: 'form',
+    ...props,
+    ref: forwardedRef,
+    className: cx('iui-table-column-filter', props.className),
+    onSubmit: (e) => {
+      e.preventDefault();
+      props.onSubmit?.(e);
     },
-    children,
-  );
-};
+    onClick: mergeEventHandlers(props.onClick, (e) => {
+      e.stopPropagation();
+    }),
+  }),
+);

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

@@ -73,13 +73,11 @@ export const DateRangeFilter = (props) => {
       );
     });
   }, []);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    if ('Enter' === event.key) setFilter([from, to]);
-  };
   return React.createElement(
     BaseFilter,
-    null,
+    {
+      onSubmit: () => setFilter([from, to]),
+    },
     React.createElement(DatePickerInput, {
       ref: inputRef,
       label: translatedStrings.from,
@@ -87,7 +85,6 @@ export const DateRangeFilter = (props) => {
       onChange: onFromChange,
       formatDate: formatDate,
       parseInput: parseInput,
-      onKeyDown: onKeyDown,
       placeholder: placeholder,
       selectedDate: to,
       isFromOrTo: 'from',
@@ -100,7 +97,6 @@ export const DateRangeFilter = (props) => {
       onChange: onToChange,
       formatDate: formatDate,
       parseInput: parseInput,
-      onKeyDown: onKeyDown,
       placeholder: placeholder,
       selectedDate: from,
       isFromOrTo: 'to',
@@ -108,7 +104,6 @@ export const DateRangeFilter = (props) => {
       showYearSelection: showYearSelection,
     }),
     React.createElement(FilterButtonBar, {
-      setFilter: () => setFilter([from, to]),
       clearFilter: clearFilter,
       translatedLabels: translatedLabels,
     }),

package/esm/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/esm/core/Table/filters/FilterButtonBar.js

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

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

@@ -22,20 +22,16 @@ export 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,
-    null,
+    {
+      onSubmit: () => setFilter([parseInputValue(from), parseInputValue(to)]),
+    },
     React.createElement(LabeledInput, {
       ref: inputRef,
       label: translatedStrings.from,
       value: from,
       onChange: (e) => setFrom(e.target.value),
-      onKeyDown: onKeyDown,
       type: 'number',
       displayStyle: 'inline',
     }),
@@ -45,10 +41,8 @@ export const NumberRangeFilter = (props) => {
       onChange: (e) => setTo(e.target.value),
       type: 'number',
       displayStyle: 'inline',
-      onKeyDown: onKeyDown,
     }),
     React.createElement(FilterButtonBar, {
-      setFilter: () => setFilter([parseInputValue(from), parseInputValue(to)]),
       clearFilter: clearFilter,
       translatedLabels: translatedLabels,
     }),

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

@@ -11,21 +11,18 @@ export 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,
-    null,
+    {
+      onSubmit: () => setFilter(text),
+    },
     React.createElement(Input, {
       ref: inputRef,
       value: text,
       onChange: (e) => setText(e.target.value),
-      onKeyDown: onKeyDown,
+      required: true,
     }),
     React.createElement(FilterButtonBar, {
-      setFilter: () => setFilter(text),
       clearFilter: clearFilter,
       translatedLabels: translatedLabels,
     }),

package/esm/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/esm/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/esm/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'];

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -14,7 +14,6 @@ import {
   ScopeProvider,
   portalContainerAtom,
   useScopedAtom,
-  useScopedSetAtom,
   useId,
 } from '../../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
@@ -62,14 +61,16 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
         },
         React.createElement(
           ToastProvider,
-          null,
+          {
+            inherit: 'inherit' === themeProp && !portalContainerProp,
+          },
           includeCss && rootElement
             ? React.createElement(FallbackStyles, {
                 root: rootElement,
               })
             : null,
           React.createElement(
-            Root,
+            MainRoot,
             {
               theme: theme,
               themeOptions: themeOptions,
@@ -78,6 +79,8 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             },
             children,
             React.createElement(PortalContainer, {
+              theme: theme,
+              themeOptions: themeOptions,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -88,13 +91,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-let Root = React.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
-  let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
-  let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
-  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
-  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-  let shouldApplyBackground = themeOptions?.applyBackground;
+let MainRoot = React.forwardRef((props, forwardedRef) => {
   let [ownerDocument, setOwnerDocument] = useScopedAtom(ownerDocumentAtom);
   let findOwnerDocumentFromRef = React.useCallback(
     (el) => {
@@ -103,6 +100,18 @@ let Root = React.forwardRef((props, forwardedRef) => {
     },
     [ownerDocument, setOwnerDocument],
   );
+  return React.createElement(Root, {
+    ...props,
+    ref: useMergedRefs(findOwnerDocumentFromRef, forwardedRef),
+  });
+});
+let Root = React.forwardRef((props, forwardedRef) => {
+  let { theme, children, themeOptions, className, ...rest } = props;
+  let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+  let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
+  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  let shouldApplyBackground = themeOptions?.applyBackground;
   return React.createElement(
     Box,
     {
@@ -115,7 +124,7 @@ let Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      ref: useMergedRefs(forwardedRef, findOwnerDocumentFromRef),
+      ref: forwardedRef,
       ...rest,
     },
     children,
@@ -156,48 +165,60 @@ let useParentThemeAndContext = (rootElement) => {
   };
 };
 let PortalContainer = React.memo(
-  ({ portalContainerProp, portalContainerFromParent, isInheritingTheme }) => {
+  ({
+    portalContainerProp,
+    portalContainerFromParent,
+    isInheritingTheme,
+    theme,
+    themeOptions,
+  }) => {
     let [ownerDocument] = useScopedAtom(ownerDocumentAtom);
-    let setPortalContainer = useScopedSetAtom(portalContainerAtom);
+    let [portalContainer, setPortalContainer] =
+      useScopedAtom(portalContainerAtom);
+    let shouldSetupPortalContainer =
+      !portalContainerProp &&
+      (!isInheritingTheme ||
+        !portalContainerFromParent ||
+        (!!ownerDocument &&
+          portalContainerFromParent.ownerDocument !== ownerDocument));
     let id = useId();
+    React.useEffect(() => {
+      if (shouldSetupPortalContainer) return;
+      let portalTarget = portalContainerProp || portalContainerFromParent;
+      if (portalTarget && portalTarget !== portalContainer)
+        setPortalContainer(portalTarget);
+    });
     let isHydrated = 'hydrated' === useHydration();
     if (!isHydrated) return null;
-    if (portalContainerProp)
-      return React.createElement(PortaledToaster, {
-        target: portalContainerProp,
-      });
-    if (
-      !isInheritingTheme ||
-      !portalContainerFromParent ||
-      (!!ownerDocument &&
-        portalContainerFromParent.ownerDocument !== ownerDocument)
-    )
-      return React.createElement(
-        'div',
-        {
-          style: {
-            display: 'contents',
+    if (shouldSetupPortalContainer && ownerDocument)
+      return ReactDOM.createPortal(
+        React.createElement(
+          Root,
+          {
+            theme: theme,
+            themeOptions: {
+              ...themeOptions,
+              applyBackground: false,
+            },
+            'data-iui-portal': true,
+            style: {
+              display: 'contents',
+            },
+            ref: setPortalContainer,
+            id: id,
           },
-          ref: setPortalContainer,
-          id: id,
-        },
+          React.createElement(Toaster, null),
+        ),
+        ownerDocument.body,
+      );
+    if (portalContainerProp)
+      return ReactDOM.createPortal(
         React.createElement(Toaster, null),
+        portalContainerProp,
       );
-    return React.createElement(PortaledToaster, {
-      target: portalContainerFromParent,
-    });
+    return null;
   },
 );
-let PortaledToaster = ({ target }) => {
-  let [portalContainer, setPortalContainer] =
-    useScopedAtom(portalContainerAtom);
-  React.useEffect(() => {
-    if (target && target !== portalContainer) setPortalContainer(target);
-  });
-  return target
-    ? ReactDOM.createPortal(React.createElement(Toaster, null), target)
-    : null;
-};
 let FallbackStyles = ({ root }) => {
   useLayoutEffect(() => {
     if (