@itwin/itwinui-react 3.12.0 → 3.12.1

package/esm/core/VisuallyHidden/VisuallyHidden.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 { Box, ShadowRoot, useHydration } from '../../utils/index.js';
@@ -17,23 +12,29 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
   const isHydrated = useHydration() === 'hydrated';
   const children = !['div', 'span', 'p'].includes(asProp)
     ? childrenProp
-    : _jsxs(_Fragment, {
-        children: [
-          _jsx(ShadowRoot, {
+    : React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          ShadowRoot,
+          {
             css: css,
-            children: _jsx('slot', {}),
-          }),
-          isHydrated && childrenProp,
-        ],
-      });
-  return _jsx(Box, {
-    as: asProp,
-    className: cx('iui-visually-hidden', className),
-    'data-iui-unhide-on-focus': unhideOnFocus ? true : undefined,
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+          },
+          React.createElement('slot', null),
+        ),
+        isHydrated && childrenProp,
+      );
+  return React.createElement(
+    Box,
+    {
+      as: asProp,
+      className: cx('iui-visually-hidden', className),
+      'data-iui-unhide-on-focus': unhideOnFocus ? true : undefined,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 const css = `
   :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {

package/esm/react-table/react-table.types-test.js

@@ -1,8 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import {
   ActionColumn,
   Table,
@@ -44,7 +39,7 @@ import {
       header2: 'row2',
     },
   ];
-  return _jsx(Table, {
+  return React.createElement(Table, {
     columns: columns,
     data: data,
     emptyTableContent: 'No data.',
@@ -66,9 +61,11 @@ import {
 };
 () => {
   const cellRenderer = React.useCallback((props) => {
-    return _jsx('div', {
-      children: props.cellProps.row.original.header1,
-    });
+    return React.createElement(
+      'div',
+      null,
+      props.cellProps.row.original.header1,
+    );
   }, []);
   const columns = [
     {
@@ -80,9 +77,7 @@ import {
       Header: 'Header 2',
       accessor: 'header2',
       Cell: (props) =>
-        _jsx('div', {
-          children: props.row.original.header2,
-        }),
+        React.createElement('div', null, props.row.original.header2),
     },
   ];
   const data = [
@@ -95,7 +90,7 @@ import {
       header2: 'row2',
     },
   ];
-  return _jsx(Table, {
+  return React.createElement(Table, {
     columns: columns,
     data: data,
     emptyTableContent: 'No data.',
@@ -103,9 +98,7 @@ import {
 };
 () => {
   const Cell = React.useCallback((props) => {
-    return _jsx('div', {
-      children: props.row.original.header1,
-    });
+    return React.createElement('div', null, props.row.original.header1);
   }, []);
   const columns = [
     {
@@ -128,7 +121,7 @@ import {
       header2: 'row2',
     },
   ];
-  return _jsx(Table, {
+  return React.createElement(Table, {
     columns: columns,
     data: data,
     emptyTableContent: 'No data.',
@@ -168,7 +161,7 @@ import {
       },
     ];
   }, []);
-  return _jsx(Table, {
+  return React.createElement(Table, {
     columns: columns,
     emptyTableContent: 'No data.',
     data: data,
@@ -201,21 +194,21 @@ import {
   );
   const menuItems = React.useCallback((close) => {
     return [
-      _jsx(
+      React.createElement(
         MenuItem,
         {
+          key: 1,
           onClick: () => close(),
-          children: 'Edit',
         },
-        1,
+        'Edit',
       ),
-      _jsx(
+      React.createElement(
         MenuItem,
         {
+          key: 2,
           onClick: () => close(),
-          children: 'Delete',
         },
-        2,
+        'Delete',
       ),
     ];
   }, []);
@@ -240,50 +233,59 @@ import {
   }, []);
   const cellRenderer = React.useCallback(
     (props) =>
-      _jsx(_Fragment, {
-        children:
-          !isRowDisabled(props.cellProps.row.original) &&
+      React.createElement(
+        React.Fragment,
+        null,
+        !isRowDisabled(props.cellProps.row.original) &&
           props.cellProps.value !== 'Fetching...'
-            ? _jsx(EditableCell, {
-                ...props,
-                onCellEdit: onCellEdit,
-              })
-            : _jsx(DefaultCell, {
-                ...props,
-                status:
-                  props.cellProps.value === 'Fetching...'
-                    ? undefined
-                    : 'positive',
-                isDisabled: (rowData) =>
-                  isCellDisabled(rowData) || isRowDisabled(rowData),
-              }),
-      }),
+          ? React.createElement(EditableCell, {
+              ...props,
+              onCellEdit: onCellEdit,
+            })
+          : React.createElement(DefaultCell, {
+              ...props,
+              status:
+                props.cellProps.value === 'Fetching...'
+                  ? undefined
+                  : 'positive',
+              isDisabled: (rowData) =>
+                isCellDisabled(rowData) || isRowDisabled(rowData),
+            }),
+      ),
     [isCellDisabled, isRowDisabled, onCellEdit],
   );
   const expandedSubComponent = React.useCallback(
     (row) =>
-      _jsxs('div', {
-        style: {
-          padding: 16,
+      React.createElement(
+        'div',
+        {
+          style: {
+            padding: 16,
+          },
         },
-        children: [
-          _jsx(Text, {
+        React.createElement(
+          Text,
+          {
             variant: 'leading',
-            children: 'Extra information',
-          }),
-          _jsx('pre', {
-            children: _jsx('code', {
-              children: JSON.stringify(
-                {
-                  values: row.values,
-                },
-                null,
-                2,
-              ),
-            }),
-          }),
-        ],
-      }),
+          },
+          'Extra information',
+        ),
+        React.createElement(
+          'pre',
+          null,
+          React.createElement(
+            'code',
+            null,
+            JSON.stringify(
+              {
+                values: row.values,
+              },
+              null,
+              2,
+            ),
+          ),
+        ),
+      ),
     [],
   );
   const onClickHandler = React.useCallback(
@@ -332,9 +334,11 @@ import {
         Header: 'IDs (enter one of the IDs in the filter)',
         accessor: 'ids',
         Cell: (props) => {
-          return _jsx(_Fragment, {
-            children: props.row.original.ids.join(', '),
-          });
+          return React.createElement(
+            React.Fragment,
+            null,
+            props.row.original.ids.join(', '),
+          );
         },
         Filter: tableFilters.TextFilter(translatedLabels),
         filter: 'includes',
@@ -345,9 +349,11 @@ import {
         Header: 'Start date',
         accessor: 'startDate',
         Cell: (props) => {
-          return _jsx(_Fragment, {
-            children: formatDate(props.row.original.startDate),
-          });
+          return React.createElement(
+            React.Fragment,
+            null,
+            formatDate(props.row.original.startDate),
+          );
         },
         Filter: tableFilters.DateRangeFilter({
           translatedLabels,
@@ -359,9 +365,11 @@ import {
         Header: 'End date',
         accessor: (rowData) => new Date(rowData.endDate),
         Cell: (props) => {
-          return _jsx(_Fragment, {
-            children: formatDate(new Date(props.row.original.endDate)),
-          });
+          return React.createElement(
+            React.Fragment,
+            null,
+            formatDate(new Date(props.row.original.endDate)),
+          );
         },
         Filter: tableFilters.DateRangeFilter({
           translatedLabels,
@@ -373,15 +381,18 @@ import {
         Header: 'Click',
         width: 100,
         Cell: (props) => {
-          return _jsx(Anchor, {
-            as: 'button',
-            onClick: (e) => {
-              e.stopPropagation();
-              console.log(props.row.original.name);
-              onClickHandler(props);
+          return React.createElement(
+            Anchor,
+            {
+              as: 'button',
+              onClick: (e) => {
+                e.stopPropagation();
+                console.log(props.row.original.name);
+                onClickHandler(props);
+              },
             },
-            children: 'Click me!',
-          });
+            'Click me!',
+          );
         },
         disableResizing: true,
       },
@@ -390,15 +401,21 @@ import {
           columnManager: true,
         }),
         Cell: (props) =>
-          _jsx(DropdownMenu, {
-            menuItems: menuItems,
-            children: _jsx(IconButton, {
-              styleType: 'borderless',
-              onClick: (e) => e.stopPropagation(),
-              disabled: isRowDisabled(props.row.original),
-              children: _jsx('svg', {}),
-            }),
-          }),
+          React.createElement(
+            DropdownMenu,
+            {
+              menuItems: menuItems,
+            },
+            React.createElement(
+              IconButton,
+              {
+                styleType: 'borderless',
+                onClick: (e) => e.stopPropagation(),
+                disabled: isRowDisabled(props.row.original),
+              },
+              React.createElement('svg', null),
+            ),
+          ),
         sticky: 'right',
       },
     ],
@@ -547,7 +564,7 @@ import {
   const pageSizeList = React.useMemo(() => [10, 25, 50], []);
   const paginator = React.useCallback(
     (props) =>
-      _jsx(TablePaginator, {
+      React.createElement(TablePaginator, {
         ...props,
         pageSizeList: pageSizeList,
         localization: {
@@ -572,70 +589,70 @@ import {
   const tableInstance = React.useRef();
   const [hoveredRowIndex, setHoveredRowIndex] = React.useState(0);
   const [rowRefMap, setRowRefMap] = React.useState({});
-  return _jsxs('div', {
-    children: [
-      _jsx(Input, {
-        placeholder: 'Search...',
-        value: globalFilter,
-        onInput: (e) => setGlobalFilter(e.target.value),
-      }),
-      _jsx(Table, {
-        columns: columns,
-        data: data,
-        emptyTableContent: 'No data.',
-        onFilter: onFilter,
-        globalFilterValue: globalFilter,
-        onSelect: onSelect,
-        isSelectable: true,
-        isSortable: true,
-        isResizable: true,
-        enableColumnReordering: true,
-        onSort: onSort,
-        onRowClick: onRowClick,
-        onExpand: onExpand,
-        subComponent: expandedSubComponent,
-        onRowInViewport: onRowInViewport,
-        selectionMode: 'multi',
-        isRowDisabled: isRowDisabled,
-        initialState: {
-          filters: [
-            {
-              id: 'name',
-              value: '1',
-            },
-          ],
-          selectedRowIds: {
-            0: true,
-            1: true,
-            4: true,
-            5: true,
+  return React.createElement(
+    'div',
+    null,
+    React.createElement(Input, {
+      placeholder: 'Search...',
+      value: globalFilter,
+      onInput: (e) => setGlobalFilter(e.target.value),
+    }),
+    React.createElement(Table, {
+      columns: columns,
+      data: data,
+      emptyTableContent: 'No data.',
+      onFilter: onFilter,
+      globalFilterValue: globalFilter,
+      onSelect: onSelect,
+      isSelectable: true,
+      isSortable: true,
+      isResizable: true,
+      enableColumnReordering: true,
+      onSort: onSort,
+      onRowClick: onRowClick,
+      onExpand: onExpand,
+      subComponent: expandedSubComponent,
+      onRowInViewport: onRowInViewport,
+      selectionMode: 'multi',
+      isRowDisabled: isRowDisabled,
+      initialState: {
+        filters: [
+          {
+            id: 'name',
+            value: '1',
           },
+        ],
+        selectedRowIds: {
+          0: true,
+          1: true,
+          4: true,
+          5: true,
         },
-        stateReducer: React.useCallback(
-          (newState, action, prevState, instance) => {
-            tableInstance.current = instance;
-            return newState;
-          },
-          [],
-        ),
-        rowProps: rowProps,
-        paginatorRenderer: paginator,
-        density: 'condensed',
-        autoResetFilters: false,
-        autoResetSortBy: false,
-        columnResizeMode: 'expand',
-        styleType: 'zebra-rows',
-        enableVirtualization: true,
-        scrollToRow: React.useCallback(
-          (rows, data) => rows.findIndex((row) => row.original.index === 1),
-          [],
-        ),
-      }),
-      _jsx(Tooltip, {
-        reference: rowRefMap[hoveredRowIndex],
-        content: `Hovered over ${data[hoveredRowIndex].name}.`,
-        placement: 'bottom',
-      }),
-    ],
-  });
+      },
+      stateReducer: React.useCallback(
+        (newState, action, prevState, instance) => {
+          tableInstance.current = instance;
+          return newState;
+        },
+        [],
+      ),
+      rowProps: rowProps,
+      paginatorRenderer: paginator,
+      density: 'condensed',
+      autoResetFilters: false,
+      autoResetSortBy: false,
+      columnResizeMode: 'expand',
+      styleType: 'zebra-rows',
+      enableVirtualization: true,
+      scrollToRow: React.useCallback(
+        (rows, data) => rows.findIndex((row) => row.original.index === 1),
+        [],
+      ),
+    }),
+    React.createElement(Tooltip, {
+      reference: rowRefMap[hoveredRowIndex],
+      content: `Hovered over ${data[hoveredRowIndex].name}.`,
+      placement: 'bottom',
+    }),
+  );
 };

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.12.0';
+const t = '3.12.1';
 const u = new Proxy(
   {},
   {

package/esm/utils/components/AutoclearingHiddenLiveRegion.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.
  *
@@ -8,4 +9,4 @@
  */
 export declare const AutoclearingHiddenLiveRegion: ({ text }: {
     text?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/esm/utils/components/AutoclearingHiddenLiveRegion.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
@@ -9,10 +8,13 @@ export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
     const timeout = getWindow()?.setTimeout(() => setMaybeText(''), 5000);
     return () => void getWindow()?.clearTimeout(timeout);
   }, [text]);
-  return _jsx(VisuallyHidden, {
-    as: 'div',
-    'aria-live': 'polite',
-    'aria-atomic': 'true',
-    children: maybeText,
-  });
+  return React.createElement(
+    VisuallyHidden,
+    {
+      as: 'div',
+      'aria-live': 'polite',
+      'aria-atomic': 'true',
+    },
+    maybeText,
+  );
 };

package/esm/utils/components/ButtonBase.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
@@ -19,7 +18,7 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     }
     handler?.(e);
   };
-  return _jsx(Box, {
+  return React.createElement(Box, {
     as: asProp,
     type: asProp === 'button' ? 'button' : undefined,
     ref: forwardedRef,

package/esm/utils/components/FocusTrap.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export type FocusTrapProps = {
     /**
      * A single child element to trap focus in.
@@ -8,4 +9,4 @@ export type FocusTrapProps = {
  * Trap focus within child container.
  * Used for modals and dialogs.
  */
-export declare const FocusTrap: (props: FocusTrapProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FocusTrap: (props: FocusTrapProps) => React.JSX.Element;

package/esm/utils/components/FocusTrap.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 { getTabbableElements } from '../functions/focusable.js';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
@@ -31,21 +26,21 @@ export const FocusTrap = (props) => {
       lastElement?.focus();
     }
   };
-  return _jsxs(_Fragment, {
-    children: [
-      _jsx('div', {
-        tabIndex: 0,
-        onFocus: onFirstFocus,
-        'aria-hidden': true,
-      }),
-      React.cloneElement(children, {
-        ref: mergeRefs(children.ref, childRef),
-      }),
-      _jsx('div', {
-        tabIndex: 0,
-        onFocus: onLastFocus,
-        'aria-hidden': true,
-      }),
-    ],
-  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement('div', {
+      tabIndex: 0,
+      onFocus: onFirstFocus,
+      'aria-hidden': true,
+    }),
+    React.cloneElement(children, {
+      ref: mergeRefs(children.ref, childRef),
+    }),
+    React.createElement('div', {
+      tabIndex: 0,
+      onFocus: onLastFocus,
+      'aria-hidden': true,
+    }),
+  );
 };