@itwin/itwinui-react 3.12.0 → 3.12.1

package/esm/core/Table/TableCell.js

@@ -1,8 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
@@ -47,52 +42,54 @@ export const TableCell = (props) => {
       column: cell.column,
     },
   };
-  const cellContent = _jsxs(_Fragment, {
-    children: [
-      tableHasSubRows &&
-        hasSubRowExpander &&
-        cell.row.canExpand &&
-        _jsx(SubRowExpander, {
-          cell: cell,
-          isDisabled: isDisabled,
-          cellProps: cellProps,
-          expanderCell: expanderCell,
-          density: density,
-          slot: 'start',
-        }),
-      cell.render('Cell'),
-    ],
-  });
+  const cellContent = React.createElement(
+    React.Fragment,
+    null,
+    tableHasSubRows &&
+      hasSubRowExpander &&
+      cell.row.canExpand &&
+      React.createElement(SubRowExpander, {
+        cell: cell,
+        isDisabled: isDisabled,
+        cellProps: cellProps,
+        expanderCell: expanderCell,
+        density: density,
+        slot: 'start',
+      }),
+    cell.render('Cell'),
+  );
   const cellRendererProps = {
     cellElementProps,
     cellProps,
-    children: _jsxs(_Fragment, {
-      children: [
-        cellContent,
-        cell.column.sticky === 'left' &&
-          tableInstance.state.sticky.isScrolledToRight &&
-          _jsx(Box, {
-            className: 'iui-table-cell-shadow-right',
-            slot: 'shadows',
-          }),
-        cell.column.sticky === 'right' &&
-          tableInstance.state.sticky.isScrolledToLeft &&
-          _jsx(Box, {
-            className: 'iui-table-cell-shadow-left',
-            slot: 'shadows',
-          }),
-      ],
-    }),
+    children: React.createElement(
+      React.Fragment,
+      null,
+      cellContent,
+      cell.column.sticky === 'left' &&
+        tableInstance.state.sticky.isScrolledToRight &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-right',
+          slot: 'shadows',
+        }),
+      cell.column.sticky === 'right' &&
+        tableInstance.state.sticky.isScrolledToLeft &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-left',
+          slot: 'shadows',
+        }),
+    ),
   };
-  return _jsx(_Fragment, {
-    children: cell.column.cellRenderer
+  return React.createElement(
+    React.Fragment,
+    null,
+    cell.column.cellRenderer
       ? cell.column.cellRenderer({
           ...cellRendererProps,
           isDisabled: () => isDisabled,
         })
-      : _jsx(DefaultCell, {
+      : React.createElement(DefaultCell, {
           ...cellRendererProps,
           isDisabled: () => isDisabled,
         }),
-  });
+  );
 };

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
 import type { TablePaginatorRendererProps } from './Table.js';
 export type TablePaginatorProps = {
@@ -71,4 +72,4 @@ export type TablePaginatorProps = {
  *   paginatorRenderer={(props) => <TablePaginator {...props} />}
  * />
  */
-export declare const TablePaginator: (props: TablePaginatorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TablePaginator: (props: TablePaginatorProps) => React.JSX.Element | null;

package/esm/core/Table/TablePaginator.js

@@ -1,8 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
@@ -80,9 +75,10 @@ export const TablePaginator = (props) => {
   const buttonSize = size != 'default' ? 'small' : undefined;
   const pageButton = React.useCallback(
     (index, tabIndex = index === focusedIndex ? 0 : -1) =>
-      _jsx(
+      React.createElement(
         Button,
         {
+          key: index,
           className: 'iui-table-paginator-page-button',
           styleType: 'borderless',
           size: buttonSize,
@@ -91,9 +87,8 @@ export const TablePaginator = (props) => {
           'aria-current': index === currentPage,
           'aria-label': localization.goToPageLabel(index + 1),
           tabIndex: tabIndex,
-          children: index + 1,
         },
-        index,
+        index + 1,
       ),
     [focusedIndex, currentPage, localization, buttonSize, onPageChange],
   );
@@ -162,147 +157,181 @@ export const TablePaginator = (props) => {
   const showPagesList = totalPagesCount > 1 || isLoading;
   const showPageSizeList =
     pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-  const ellipsis = _jsx(Box, {
-    as: 'span',
-    className: cx('iui-table-paginator-ellipsis', {
-      'iui-table-paginator-ellipsis-small': size === 'small',
-    }),
-    children: '…',
-  });
-  const noRowsContent = _jsx(_Fragment, {
-    children: isLoading
-      ? _jsx(ProgressRadial, {
+  const ellipsis = React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('iui-table-paginator-ellipsis', {
+        'iui-table-paginator-ellipsis-small': size === 'small',
+      }),
+    },
+    '…',
+  );
+  const noRowsContent = React.createElement(
+    React.Fragment,
+    null,
+    isLoading
+      ? React.createElement(ProgressRadial, {
           indeterminate: true,
           size: 'small',
         })
-      : _jsx(Button, {
-          styleType: 'borderless',
-          disabled: true,
-          size: buttonSize,
-          children: '1',
-        }),
-  });
+      : React.createElement(
+          Button,
+          {
+            styleType: 'borderless',
+            disabled: true,
+            size: buttonSize,
+          },
+          '1',
+        ),
+  );
   if (!showPagesList && !showPageSizeList) {
     return null;
   }
-  return _jsxs(Box, {
-    className: cx('iui-table-paginator', className),
-    ref: paginatorResizeRef,
-    ...rest,
-    children: [
-      _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-table-paginator', className),
+      ref: paginatorResizeRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
         className: 'iui-left',
-        children:
-          totalSelectedRowsCount > 0 &&
-          _jsx('span', {
-            children: localization.rowsSelectedLabel(totalSelectedRowsCount),
-          }),
-      }),
-      showPagesList &&
-        _jsxs(Box, {
+      },
+      totalSelectedRowsCount > 0 &&
+        React.createElement(
+          'span',
+          null,
+          localization.rowsSelectedLabel(totalSelectedRowsCount),
+        ),
+    ),
+    showPagesList &&
+      React.createElement(
+        Box,
+        {
           className: 'iui-center',
           ref: overflowRef,
-          children: [
-            _jsx(IconButton, {
-              styleType: 'borderless',
-              disabled: currentPage === 0,
-              onClick: () => onPageChange(currentPage - 1),
-              size: buttonSize,
-              'aria-label': localization.previousPage,
-              children: _jsx(SvgChevronLeft, {}),
-            }),
-            _jsx(Box, {
-              as: 'span',
-              className: 'iui-table-paginator-pages-group',
-              onKeyDown: onKeyDown,
-              ref: pageListRef,
-              children: (() => {
-                if (hasNoRows) {
-                  return noRowsContent;
-                }
-                if (visibleCount === 1) {
-                  return pageButton(focusedIndex);
-                }
-                return _jsxs(_Fragment, {
-                  children: [
-                    startPage !== 0 &&
-                      _jsxs(_Fragment, {
-                        children: [pageButton(0, 0), ellipsis],
-                      }),
-                    pageList.slice(startPage, endPage),
-                    endPage !== totalPagesCount &&
-                      !isLoading &&
-                      _jsxs(_Fragment, {
-                        children: [
-                          ellipsis,
-                          pageButton(totalPagesCount - 1, 0),
-                        ],
-                      }),
-                    isLoading &&
-                      _jsxs(_Fragment, {
-                        children: [
-                          ellipsis,
-                          _jsx(ProgressRadial, {
-                            indeterminate: true,
-                            size: 'small',
-                          }),
-                        ],
-                      }),
-                  ],
-                });
-              })(),
-            }),
-            _jsx(IconButton, {
+        },
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === 0,
+            onClick: () => onPageChange(currentPage - 1),
+            size: buttonSize,
+            'aria-label': localization.previousPage,
+          },
+          React.createElement(SvgChevronLeft, null),
+        ),
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-table-paginator-pages-group',
+            onKeyDown: onKeyDown,
+            ref: pageListRef,
+          },
+          (() => {
+            if (hasNoRows) {
+              return noRowsContent;
+            }
+            if (visibleCount === 1) {
+              return pageButton(focusedIndex);
+            }
+            return React.createElement(
+              React.Fragment,
+              null,
+              startPage !== 0 &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  pageButton(0, 0),
+                  ellipsis,
+                ),
+              pageList.slice(startPage, endPage),
+              endPage !== totalPagesCount &&
+                !isLoading &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  ellipsis,
+                  pageButton(totalPagesCount - 1, 0),
+                ),
+              isLoading &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  ellipsis,
+                  React.createElement(ProgressRadial, {
+                    indeterminate: true,
+                    size: 'small',
+                  }),
+                ),
+            );
+          })(),
+        ),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === totalPagesCount - 1 || hasNoRows,
+            onClick: () => onPageChange(currentPage + 1),
+            size: buttonSize,
+            'aria-label': localization.nextPage,
+          },
+          React.createElement(SvgChevronRight, null),
+        ),
+      ),
+    React.createElement(
+      Box,
+      {
+        className: 'iui-right',
+      },
+      showPageSizeList &&
+        React.createElement(
+          React.Fragment,
+          null,
+          localization.rowsPerPageLabel !== null &&
+            paginatorWidth >= 1024 &&
+            React.createElement(
+              Box,
+              {
+                as: 'span',
+                className: 'iui-table-paginator-page-size-label',
+              },
+              localization.rowsPerPageLabel,
+            ),
+          React.createElement(
+            DropdownButton,
+            {
               styleType: 'borderless',
-              disabled: currentPage === totalPagesCount - 1 || hasNoRows,
-              onClick: () => onPageChange(currentPage + 1),
               size: buttonSize,
-              'aria-label': localization.nextPage,
-              children: _jsx(SvgChevronRight, {}),
-            }),
-          ],
-        }),
-      _jsx(Box, {
-        className: 'iui-right',
-        children:
-          showPageSizeList &&
-          _jsxs(_Fragment, {
-            children: [
-              localization.rowsPerPageLabel !== null &&
-                paginatorWidth >= 1024 &&
-                _jsx(Box, {
-                  as: 'span',
-                  className: 'iui-table-paginator-page-size-label',
-                  children: localization.rowsPerPageLabel,
-                }),
-              _jsx(DropdownButton, {
-                styleType: 'borderless',
-                size: buttonSize,
-                menuItems: (close) =>
-                  pageSizeList.map((size) =>
-                    _jsx(
-                      MenuItem,
-                      {
-                        isSelected: size === pageSize,
-                        onClick: () => {
-                          close();
-                          onPageSizeChange(size);
-                        },
-                        children: localization.pageSizeLabel(size),
+              menuItems: (close) =>
+                pageSizeList.map((size) =>
+                  React.createElement(
+                    MenuItem,
+                    {
+                      key: size,
+                      isSelected: size === pageSize,
+                      onClick: () => {
+                        close();
+                        onPageSizeChange(size);
                       },
-                      size,
-                    ),
+                    },
+                    localization.pageSizeLabel(size),
                   ),
-                children: localization.rangeLabel(
-                  currentPage * pageSize + 1,
-                  Math.min(totalRowsCount, (currentPage + 1) * pageSize),
-                  totalRowsCount,
-                  isLoading,
                 ),
-              }),
-            ],
-          }),
-      }),
-    ],
-  });
+            },
+            localization.rangeLabel(
+              currentPage * pageSize + 1,
+              Math.min(totalRowsCount, (currentPage + 1) * pageSize),
+              totalRowsCount,
+              isLoading,
+            ),
+          ),
+        ),
+    ),
+  );
 };

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

@@ -26,5 +26,5 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     scrollContainerRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement>;
     density?: "default" | "condensed" | "extra-condensed";
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TableRowMemoized: typeof TableRow;

package/esm/core/Table/TableRowMemoized.js

@@ -1,8 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import {
@@ -72,42 +67,48 @@ export const TableRow = (props) => {
     },
   };
   const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
-  return _jsxs(_Fragment, {
-    children: [
-      _jsx(Box, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Box,
+      {
         ...mergedProps,
         ref: refs,
         onClick: (event) => {
           mergedProps?.onClick?.(event);
           onClick?.(event, row);
         },
-        children: row.cells.map((cell, index) => {
-          return _jsx(
-            TableCell,
-            {
-              cell: cell,
-              cellIndex: index,
-              isDisabled: isDisabled,
-              tableHasSubRows: tableHasSubRows,
-              tableInstance: tableInstance,
-              expanderCell: expanderCell,
-              density: density,
-            },
-            cell.getCellProps().key,
-          );
-        }),
+      },
+      row.cells.map((cell, index) => {
+        return React.createElement(TableCell, {
+          key: cell.getCellProps().key,
+          cell: cell,
+          cellIndex: index,
+          isDisabled: isDisabled,
+          tableHasSubRows: tableHasSubRows,
+          tableInstance: tableInstance,
+          expanderCell: expanderCell,
+          density: density,
+        });
       }),
-      subComponent &&
-        _jsx(WithCSSTransition, {
+    ),
+    subComponent &&
+      React.createElement(
+        WithCSSTransition,
+        {
           in: row.isExpanded,
-          children: _jsx(Box, {
+        },
+        React.createElement(
+          Box,
+          {
             className: cx('iui-table-row', 'iui-table-expanded-content'),
             'aria-disabled': isDisabled,
-            children: subComponent(row),
-          }),
-        }),
-    ],
-  });
+          },
+          subComponent(row),
+        ),
+      ),
+  );
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {
   if (selectedRowIds?.[row.id]) {

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -32,4 +32,4 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => React.JSX.Element;

package/esm/core/Table/cells/DefaultCell.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
@@ -29,48 +28,57 @@ export const DefaultCell = (props) => {
     clamp = typeof cellProps.value === 'string' && !isCustomCell,
     ...rest
   } = props;
-  return _jsxs(Box, {
-    ...cellElementProps,
-    ...rest,
-    className: cx(cellElementClassName, className),
-    'aria-disabled': isDisabled?.(cellProps.row.original) || undefined,
-    'data-iui-status': status,
-    style: {
-      ...cellElementStyle,
-      ...style,
+  return React.createElement(
+    Box,
+    {
+      ...cellElementProps,
+      ...rest,
+      className: cx(cellElementClassName, className),
+      'aria-disabled': isDisabled?.(cellProps.row.original) || undefined,
+      'data-iui-status': status,
+      style: {
+        ...cellElementStyle,
+        ...style,
+      },
     },
-    children: [
-      _jsxs(ShadowRoot, {
-        children: [
-          _jsx('slot', {
-            name: 'start',
-          }),
-          clamp
-            ? _jsx(LineClamp, {
-                children: _jsx('slot', {}),
-              })
-            : _jsx('slot', {}),
-          _jsx('slot', {
-            name: 'end',
-          }),
-          _jsx('slot', {
-            name: 'shadows',
-          }),
-        ],
+    React.createElement(
+      ShadowRoot,
+      null,
+      React.createElement('slot', {
+        name: 'start',
       }),
-      startIcon &&
-        _jsx(Box, {
+      clamp
+        ? React.createElement(
+            LineClamp,
+            null,
+            React.createElement('slot', null),
+          )
+        : React.createElement('slot', null),
+      React.createElement('slot', {
+        name: 'end',
+      }),
+      React.createElement('slot', {
+        name: 'shadows',
+      }),
+    ),
+    startIcon &&
+      React.createElement(
+        Box,
+        {
           className: 'iui-table-cell-start-icon',
           slot: 'start',
-          children: startIcon,
-        }),
-      children,
-      endIcon &&
-        _jsx(Box, {
+        },
+        startIcon,
+      ),
+    children,
+    endIcon &&
+      React.createElement(
+        Box,
+        {
           className: 'iui-table-cell-end-icon',
           slot: 'end',
-          children: endIcon,
-        }),
-    ],
-  });
+        },
+        endIcon,
+      ),
+  );
 };

package/esm/core/Table/cells/EditableCell.d.ts

@@ -30,4 +30,4 @@ export type EditableCellProps<T extends Record<string, unknown>> = CellRendererP
  *   cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEditHandler} />,
  * }
  */
-export declare const EditableCell: <T extends Record<string, unknown>>(props: EditableCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const EditableCell: <T extends Record<string, unknown>>(props: EditableCellProps<T>) => React.JSX.Element;