@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Table/Table.js

@@ -1,9 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
-import { createElement as _createElement } from 'react';
 import * as React from 'react';
 import cx from 'classnames';
 import {
@@ -480,28 +474,25 @@ export const Table = (props) => {
     (index) => {
       const row = page[index];
       prepareRow(row);
-      return _jsx(
-        TableRowMemoized,
-        {
-          row: row,
-          rowProps: rowProps,
-          isLast: index === page.length - 1,
-          onRowInViewport: onRowInViewportRef,
-          onBottomReached: onBottomReachedRef,
-          intersectionMargin: intersectionMargin,
-          state: state,
-          onClick: onRowClickHandler,
-          subComponent: subComponent,
-          isDisabled: !!isRowDisabled?.(row.original),
-          tableHasSubRows: hasAnySubRows,
-          tableInstance: instance,
-          expanderCell: expanderCell,
-          scrollContainerRef: tableRef.current,
-          tableRowRef: enableVirtualization ? undefined : tableRowRef(row),
-          density: density,
-        },
-        row.getRowProps().key,
-      );
+      return React.createElement(TableRowMemoized, {
+        row: row,
+        rowProps: rowProps,
+        isLast: index === page.length - 1,
+        onRowInViewport: onRowInViewportRef,
+        onBottomReached: onBottomReachedRef,
+        intersectionMargin: intersectionMargin,
+        state: state,
+        key: row.getRowProps().key,
+        onClick: onRowClickHandler,
+        subComponent: subComponent,
+        isDisabled: !!isRowDisabled?.(row.original),
+        tableHasSubRows: hasAnySubRows,
+        tableInstance: instance,
+        expanderCell: expanderCell,
+        scrollContainerRef: tableRef.current,
+        tableRowRef: enableVirtualization ? undefined : tableRowRef(row),
+        density: density,
+      });
     },
     [
       page,
@@ -560,198 +551,218 @@ export const Table = (props) => {
     updateStickyState();
   }, []);
   const isHeaderDirectClick = React.useRef(false);
-  return _jsx(TableColumnsContext.Provider, {
-    value: columns,
-    children: _jsxs(Box, {
-      ref: useMergedRefs(tableRef, (element) => {
-        ownerDocument.current = element?.ownerDocument;
-        resizeRef(element);
-      }),
-      id: id,
-      ...getTableProps({
-        className: cx('iui-table', className),
-        style: {
-          minWidth: 0,
-          ...style,
-        },
-      }),
-      onScroll: () => updateStickyState(),
-      'data-iui-size': density === 'default' ? undefined : density,
-      ...ariaDataAttributes,
-      children: [
-        headerGroups.map((headerGroup) => {
-          headerGroup.headers = headerGroup.headers.filter(
-            (header) =>
-              !header.id.includes('iui-table-checkbox-selector_placeholder') &&
-              !header.id.includes('iui-table-expander_placeholder'),
-          );
-          const headerGroupProps = headerGroup.getHeaderGroupProps({
-            className: 'iui-table-row',
-          });
-          return _jsx(
+  return React.createElement(
+    TableColumnsContext.Provider,
+    {
+      value: columns,
+    },
+    React.createElement(
+      Box,
+      {
+        ref: useMergedRefs(tableRef, (element) => {
+          ownerDocument.current = element?.ownerDocument;
+          resizeRef(element);
+        }),
+        id: id,
+        ...getTableProps({
+          className: cx('iui-table', className),
+          style: {
+            minWidth: 0,
+            ...style,
+          },
+        }),
+        onScroll: () => updateStickyState(),
+        'data-iui-size': density === 'default' ? undefined : density,
+        ...ariaDataAttributes,
+      },
+      headerGroups.map((headerGroup) => {
+        headerGroup.headers = headerGroup.headers.filter(
+          (header) =>
+            !header.id.includes('iui-table-checkbox-selector_placeholder') &&
+            !header.id.includes('iui-table-expander_placeholder'),
+        );
+        const headerGroupProps = headerGroup.getHeaderGroupProps({
+          className: 'iui-table-row',
+        });
+        return React.createElement(
+          Box,
+          {
+            as: 'div',
+            key: headerGroupProps.key,
+            ...headerWrapperProps,
+            className: cx(
+              'iui-table-header-wrapper',
+              headerWrapperProps?.className,
+            ),
+          },
+          React.createElement(
             Box,
             {
               as: 'div',
-              ...headerWrapperProps,
-              className: cx(
-                'iui-table-header-wrapper',
-                headerWrapperProps?.className,
-              ),
-              children: _jsx(Box, {
-                as: 'div',
-                ...headerProps,
-                className: cx('iui-table-header', headerProps?.className),
-                children: _jsx(Box, {
-                  ...headerGroupProps,
-                  children: headerGroup.headers.map((column, index) => {
-                    const { onClick, ...restSortProps } =
-                      column.getSortByToggleProps();
-                    const columnHasExpanders =
-                      hasAnySubRows &&
-                      index ===
-                        headerGroup.headers.findIndex(
-                          (c) => c.id !== SELECTION_CELL_ID,
-                        );
-                    if ([undefined, 0].includes(column.minWidth)) {
-                      column.minWidth = columnHasExpanders
-                        ? COLUMN_MIN_WIDTHS.withExpander
-                        : COLUMN_MIN_WIDTHS.default;
-                    }
-                    const 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)',
-                      },
-                    });
-                    return _createElement(Box, {
-                      ...columnProps,
-                      ...column.getDragAndDropProps(),
-                      key: columnProps.key,
-                      title: undefined,
-                      ref: (el) => {
-                        if (el) {
-                          columnRefs.current[column.id] = el;
-                          column.resizeWidth = el.getBoundingClientRect().width;
-                        }
-                      },
-                      onMouseDown: () => {
-                        isHeaderDirectClick.current = true;
-                      },
-                      onClick: (e) => {
-                        if (isHeaderDirectClick.current) {
-                          onClick?.(e);
-                          isHeaderDirectClick.current = false;
-                        }
-                      },
-                      tabIndex: showSortButton(column) ? 0 : undefined,
-                      onKeyDown: (e) => {
-                        if (e.key == 'Enter' && showSortButton(column)) {
-                          column.toggleSortBy();
-                        }
+              ...headerProps,
+              className: cx('iui-table-header', headerProps?.className),
+            },
+            React.createElement(
+              Box,
+              headerGroupProps,
+              headerGroup.headers.map((column, index) => {
+                const { onClick, ...restSortProps } =
+                  column.getSortByToggleProps();
+                const columnHasExpanders =
+                  hasAnySubRows &&
+                  index ===
+                    headerGroup.headers.findIndex(
+                      (c) => c.id !== SELECTION_CELL_ID,
+                    );
+                if ([undefined, 0].includes(column.minWidth)) {
+                  column.minWidth = columnHasExpanders
+                    ? COLUMN_MIN_WIDTHS.withExpander
+                    : COLUMN_MIN_WIDTHS.default;
+                }
+                const 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)',
+                  },
+                });
+                return React.createElement(
+                  Box,
+                  {
+                    ...columnProps,
+                    ...column.getDragAndDropProps(),
+                    key: columnProps.key,
+                    title: undefined,
+                    ref: (el) => {
+                      if (el) {
+                        columnRefs.current[column.id] = el;
+                        column.resizeWidth = el.getBoundingClientRect().width;
+                      }
+                    },
+                    onMouseDown: () => {
+                      isHeaderDirectClick.current = true;
+                    },
+                    onClick: (e) => {
+                      if (isHeaderDirectClick.current) {
+                        onClick?.(e);
+                        isHeaderDirectClick.current = false;
+                      }
+                    },
+                    tabIndex: showSortButton(column) ? 0 : undefined,
+                    onKeyDown: (e) => {
+                      if (e.key == 'Enter' && showSortButton(column)) {
+                        column.toggleSortBy();
+                      }
+                    },
+                  },
+                  React.createElement(
+                    ShadowRoot,
+                    null,
+                    typeof column.Header === 'string'
+                      ? 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',
                       },
-                      children: [
-                        _jsxs(ShadowRoot, {
-                          children: [
-                            typeof column.Header === 'string'
-                              ? _jsx(LineClamp, {
-                                  children: _jsx('slot', {}),
-                                })
-                              : _jsx('slot', {}),
-                            _jsx('slot', {
-                              name: 'actions',
-                            }),
-                            _jsx('slot', {
-                              name: 'resizers',
-                            }),
-                            _jsx('slot', {
-                              name: 'shadows',
-                            }),
-                          ],
+                      showFilterButton(column) &&
+                        React.createElement(FilterToggle, {
+                          column: column,
                         }),
-                        column.render('Header'),
-                        (showFilterButton(column) || showSortButton(column)) &&
-                          _jsxs(Box, {
-                            className: 'iui-table-header-actions-container',
-                            onKeyDown: (e) => e.stopPropagation(),
-                            slot: 'actions',
-                            children: [
-                              showFilterButton(column) &&
-                                _jsx(FilterToggle, {
-                                  column: column,
-                                }),
-                              showSortButton(column) &&
-                                _jsx(Box, {
-                                  className: 'iui-table-cell-end-icon',
-                                  children:
-                                    column.isSortedDesc ||
-                                    (!column.isSorted && column.sortDescFirst)
-                                      ? _jsx(SvgSortDown, {
-                                          className: 'iui-table-sort',
-                                          'aria-hidden': true,
-                                        })
-                                      : _jsx(SvgSortUp, {
-                                          className: 'iui-table-sort',
-                                          'aria-hidden': true,
-                                        }),
-                                }),
-                            ],
-                          }),
-                        isResizable &&
-                          column.isResizerVisible &&
-                          (index !== headerGroup.headers.length - 1 ||
-                            columnResizeMode === 'expand') &&
-                          _jsx(Box, {
-                            ...column.getResizerProps(),
-                            className: 'iui-table-resizer',
-                            slot: 'resizers',
-                            children: _jsx(Box, {
-                              className: 'iui-table-resizer-bar',
-                            }),
-                          }),
-                        enableColumnReordering &&
-                          !column.disableReordering &&
-                          _jsx(Box, {
-                            className: 'iui-table-reorder-bar',
-                            slot: 'resizers',
-                          }),
-                        column.sticky === 'left' &&
-                          state.sticky.isScrolledToRight &&
-                          _jsx(Box, {
-                            className: 'iui-table-cell-shadow-right',
-                            slot: 'shadows',
-                          }),
-                        column.sticky === 'right' &&
-                          state.sticky.isScrolledToLeft &&
-                          _jsx(Box, {
-                            className: 'iui-table-cell-shadow-left',
-                            slot: 'shadows',
-                          }),
-                      ],
-                    });
-                  }),
-                }),
+                      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 ||
+                      columnResizeMode === 'expand') &&
+                    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',
+                    }),
+                  column.sticky === 'left' &&
+                    state.sticky.isScrolledToRight &&
+                    React.createElement(Box, {
+                      className: 'iui-table-cell-shadow-right',
+                      slot: 'shadows',
+                    }),
+                  column.sticky === 'right' &&
+                    state.sticky.isScrolledToLeft &&
+                    React.createElement(Box, {
+                      className: 'iui-table-cell-shadow-left',
+                      slot: 'shadows',
+                    }),
+                );
               }),
-            },
-            headerGroupProps.key,
-          );
-        }),
-        _jsxs(Box, {
+            ),
+          ),
+        );
+      }),
+      React.createElement(
+        Box,
+        {
           as: 'div',
           ...bodyProps,
           ...getTableBodyProps({
@@ -769,72 +780,80 @@ export const Table = (props) => {
           tabIndex: -1,
           'aria-multiselectable':
             (isSelectable && selectionMode === 'multi') || undefined,
-          children: [
-            data.length !== 0 &&
-              _jsx(_Fragment, {
-                children: enableVirtualization
-                  ? _jsx(VirtualScroll, {
-                      itemsLength: page.length,
-                      itemRenderer: virtualizedItemRenderer,
-                      scrollToIndex: scrollToIndex,
-                    })
-                  : page.map((_, index) => getPreparedRow(index)),
-              }),
-            isLoading &&
-              data.length === 0 &&
-              _jsx(Box, {
-                as: 'div',
-                ...emptyTableContentProps,
-                className: cx(
-                  'iui-table-empty',
-                  emptyTableContentProps?.className,
-                ),
-                children: _jsx(ProgressRadial, {
-                  indeterminate: true,
-                }),
-              }),
-            !isLoading &&
-              data.length === 0 &&
-              !areFiltersSet &&
-              _jsx(Box, {
-                as: 'div',
-                ...emptyTableContentProps,
-                className: cx(
-                  'iui-table-empty',
-                  emptyTableContentProps?.className,
-                ),
-                children: _jsx('div', {
-                  children: emptyTableContent,
-                }),
-              }),
-            !isLoading &&
-              (data.length === 0 || rows.length === 0) &&
-              areFiltersSet &&
-              _jsx(Box, {
-                as: 'div',
-                ...emptyTableContentProps,
-                className: cx(
-                  'iui-table-empty',
-                  emptyTableContentProps?.className,
-                ),
-                children: _jsx('div', {
-                  children: emptyFilteredTableContent,
-                }),
-              }),
-          ],
-        }),
+        },
+        data.length !== 0 &&
+          React.createElement(
+            React.Fragment,
+            null,
+            enableVirtualization
+              ? React.createElement(VirtualScroll, {
+                  itemsLength: page.length,
+                  itemRenderer: virtualizedItemRenderer,
+                  scrollToIndex: scrollToIndex,
+                })
+              : page.map((_, index) => getPreparedRow(index)),
+          ),
         isLoading &&
-          data.length !== 0 &&
-          _jsx(Box, {
-            className: 'iui-table-body-extra',
-            'data-iui-loading': 'true',
-            children: _jsx(ProgressRadial, {
+          data.length === 0 &&
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: cx(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            React.createElement(ProgressRadial, {
               indeterminate: true,
-              size: 'small',
             }),
+          ),
+        !isLoading &&
+          data.length === 0 &&
+          !areFiltersSet &&
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: cx(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            React.createElement('div', null, emptyTableContent),
+          ),
+        !isLoading &&
+          (data.length === 0 || rows.length === 0) &&
+          areFiltersSet &&
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...emptyTableContentProps,
+              className: cx(
+                'iui-table-empty',
+                emptyTableContentProps?.className,
+              ),
+            },
+            React.createElement('div', null, emptyFilteredTableContent),
+          ),
+      ),
+      isLoading &&
+        data.length !== 0 &&
+        React.createElement(
+          Box,
+          {
+            className: 'iui-table-body-extra',
+            'data-iui-loading': 'true',
+          },
+          React.createElement(ProgressRadial, {
+            indeterminate: true,
+            size: 'small',
           }),
-        paginatorRenderer?.(paginatorRendererProps),
-      ],
-    }),
-  });
+        ),
+      paginatorRenderer?.(paginatorRendererProps),
+    ),
+  );
 };

package/esm/core/Table/TableCell.d.ts

@@ -9,4 +9,4 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
     density?: 'default' | 'condensed' | 'extra-condensed';
 };
-export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => React.JSX.Element;