@itwin/itwinui-react 3.12.0 → 3.12.2

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

@@ -1,4 +1,3 @@
-import { createElement as _createElement } from 'react';
 import * as React from 'react';
 import { Box, getRandomValue } from '../../../utils/index.js';
 import cx from 'classnames';
@@ -29,7 +28,7 @@ export const EditableCell = (props) => {
   }, [cellProps.value]);
   const [key, setKey] = React.useState(getRandomValue(10));
   const [isDirty, setIsDirty] = React.useState(false);
-  return _createElement(
+  return React.createElement(
     Box,
     {
       ...cellElementProps,

package/esm/core/Table/columns/actionColumn.d.ts

@@ -35,6 +35,6 @@ export declare const ActionColumn: <T extends Record<string, unknown>>({ columnM
     columnClassName: string;
     cellClassName: string;
     disableReordering: boolean;
-    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => React.JSX.Element | null;
 };
 export {};

package/esm/core/Table/columns/actionColumn.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { SvgColumnManager } from '../../../utils/index.js';
@@ -50,10 +49,11 @@ export const ActionColumn = ({ columnManager = false } = {}) => {
                 });
               });
             };
-            return _jsx(
+            return React.createElement(
               MenuItem,
               {
-                startIcon: _jsx(Checkbox, {
+                key: column.id,
+                startIcon: React.createElement(Checkbox, {
                   checked: checked,
                   disabled: column.disableToggleVisibility,
                   onClick: (e) => e.stopPropagation(),
@@ -62,32 +62,40 @@ export const ActionColumn = ({ columnManager = false } = {}) => {
                 }),
                 onClick: onClick,
                 disabled: column.disableToggleVisibility,
-                children: _jsx('div', {
-                  id: `iui-column-${column.id}`,
-                  children: column.render('Header'),
-                }),
               },
-              column.id,
+              React.createElement(
+                'div',
+                {
+                  id: `iui-column-${column.id}`,
+                },
+                column.render('Header'),
+              ),
             );
           });
       const dropdownMenuProps =
         typeof columnManager !== 'boolean'
           ? columnManager.dropdownMenuProps
           : {};
-      return _jsx(DropdownMenu, {
-        ...dropdownMenuProps,
-        menuItems: headerCheckBoxes,
-        onVisibleChange: (open) => {
-          setIsOpen(open);
-          dropdownMenuProps?.onVisibleChange?.(open);
+      return React.createElement(
+        DropdownMenu,
+        {
+          ...dropdownMenuProps,
+          menuItems: headerCheckBoxes,
+          onVisibleChange: (open) => {
+            setIsOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
+          },
         },
-        children: _jsx(IconButton, {
-          styleType: 'borderless',
-          isActive: isOpen,
-          ref: buttonRef,
-          children: _jsx(SvgColumnManager, {}),
-        }),
-      });
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            isActive: isOpen,
+            ref: buttonRef,
+          },
+          React.createElement(SvgColumnManager, null),
+        ),
+      );
     },
   };
 };

package/esm/core/Table/columns/expanderColumn.d.ts

@@ -39,6 +39,6 @@ export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?:
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Cell: (props: CellProps<T>) => import("react/jsx-runtime").JSX.Element | null;
-    cellRenderer: (props: CellRendererProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Cell: (props: CellProps<T>) => React.JSX.Element | null;
+    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/esm/core/Table/columns/expanderColumn.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { SvgChevronRight } from '../../../utils/index.js';
 import { IconButton } from '../../Buttons/IconButton.js';
@@ -21,22 +20,25 @@ export const ExpanderColumn = (props = {}) => {
       if (!subComponent?.(row)) {
         return null;
       } else {
-        return _jsx(IconButton, {
-          className: 'iui-table-row-expander',
-          styleType: 'borderless',
-          size: 'small',
-          onClick: (e) => {
-            e.stopPropagation();
-            row.toggleRowExpanded();
+        return React.createElement(
+          IconButton,
+          {
+            className: 'iui-table-row-expander',
+            styleType: 'borderless',
+            size: 'small',
+            onClick: (e) => {
+              e.stopPropagation();
+              row.toggleRowExpanded();
+            },
+            disabled: isDisabled?.(props.row.original),
+            'aria-expanded': row.isExpanded,
           },
-          disabled: isDisabled?.(props.row.original),
-          'aria-expanded': row.isExpanded,
-          children: _jsx(SvgChevronRight, {}),
-        });
+          React.createElement(SvgChevronRight, null),
+        );
       }
     },
     cellRenderer: (props) =>
-      _jsx(DefaultCell, {
+      React.createElement(DefaultCell, {
         ...props,
         isDisabled: (rowData) => !!isDisabled?.(rowData),
       }),

package/esm/core/Table/columns/selectionColumn.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { CellProps, CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
@@ -26,7 +27,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
-    Cell: ({ row, selectSubRows }: CellProps<T>) => import("react/jsx-runtime").JSX.Element;
-    cellRenderer: (props: CellRendererProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => React.JSX.Element;
+    Cell: ({ row, selectSubRows }: CellProps<T>) => React.JSX.Element;
+    cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/esm/core/Table/columns/selectionColumn.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { DefaultCell } from '../cells/index.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
@@ -31,7 +31,7 @@ export const SelectionColumn = (props = {}) => {
       );
       const indeterminate =
         !checked && Object.keys(state.selectedRowIds).length > 0;
-      return _jsx(Checkbox, {
+      return React.createElement(Checkbox, {
         ...getToggleAllRowsSelectedProps(),
         style: {},
         title: '',
@@ -43,7 +43,7 @@ export const SelectionColumn = (props = {}) => {
       });
     },
     Cell: ({ row, selectSubRows = true }) =>
-      _jsx(Checkbox, {
+      React.createElement(Checkbox, {
         ...row.getToggleRowSelectedProps(),
         style: {},
         title: '',
@@ -62,7 +62,7 @@ export const SelectionColumn = (props = {}) => {
         },
       }),
     cellRenderer: (props) =>
-      _jsx(DefaultCell, {
+      React.createElement(DefaultCell, {
         ...props,
         isDisabled: (rowData) => !!isDisabled?.(rowData),
       }),

package/esm/core/Table/filters/BaseFilter.d.ts

@@ -20,4 +20,4 @@ export type BaseFilterProps = {
  *   />
  * </BaseFilter>
  */
-export declare const BaseFilter: (props: BaseFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseFilter: (props: BaseFilterProps) => React.JSX.Element;

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

@@ -1,17 +1,19 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, useGlobals } from '../../../utils/index.js';
 export const BaseFilter = (props) => {
   const { children, className, style, id } = props;
   useGlobals();
-  return _jsx(Box, {
-    className: cx('iui-table-column-filter', className),
-    style: style,
-    onClick: (e) => {
-      e.stopPropagation();
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-table-column-filter', className),
+      style: style,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      id: id,
     },
-    id: id,
-    children: children,
-  });
+    children,
+  );
 };

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { SvgCalendar, isBefore, useId } from '../../../../utils/index.js';
 import { DatePicker } from '../../../DatePicker/DatePicker.js';
@@ -64,54 +63,63 @@ export const DatePickerInput = React.forwardRef((props, forwardedRef) => {
     },
     [onChange, parseInput],
   );
-  return _jsxs(InputGrid, {
-    labelPlacement: 'inline',
-    ...wrapperProps,
-    children: [
-      _jsx(Label, {
+  return React.createElement(
+    InputGrid,
+    {
+      labelPlacement: 'inline',
+      ...wrapperProps,
+    },
+    React.createElement(
+      Label,
+      {
         as: 'label',
         required: required,
         disabled: disabled,
         htmlFor: id,
         ...labelProps,
-        children: label,
+      },
+      label,
+    ),
+    React.createElement(
+      InputWithDecorations,
+      inputWrapperProps,
+      React.createElement(InputWithDecorations.Input, {
+        id: id,
+        value: inputValue,
+        onChange: onInputChange,
+        required: required,
+        disabled: disabled,
+        ref: forwardedRef,
+        ...rest,
       }),
-      _jsxs(InputWithDecorations, {
-        ...inputWrapperProps,
-        children: [
-          _jsx(InputWithDecorations.Input, {
-            id: id,
-            value: inputValue,
-            onChange: onInputChange,
-            required: required,
-            disabled: disabled,
-            ref: forwardedRef,
-            ...rest,
+      React.createElement(
+        Popover,
+        {
+          content: React.createElement(DatePicker, {
+            date: date,
+            onChange: onDateSelected,
+            setFocus: true,
+            isDateDisabled: isDateDisabled,
+            localizedNames: localizedNames,
+            applyBackground: false,
+            showDatesOutsideMonth: false,
+            showYearSelection: showYearSelection,
           }),
-          _jsx(Popover, {
-            content: _jsx(DatePicker, {
-              date: date,
-              onChange: onDateSelected,
-              setFocus: true,
-              isDateDisabled: isDateDisabled,
-              localizedNames: localizedNames,
-              applyBackground: false,
-              showDatesOutsideMonth: false,
-              showYearSelection: showYearSelection,
-            }),
-            placement: 'bottom-end',
-            visible: isVisible,
-            onVisibleChange: setIsVisible,
-            closeOnOutsideClick: true,
-            applyBackground: true,
-            children: _jsx(InputWithDecorations.Button, {
-              'aria-label': 'Date picker',
-              ref: buttonRef,
-              children: _jsx(SvgCalendar, {}),
-            }),
-          }),
-        ],
-      }),
-    ],
-  });
+          placement: 'bottom-end',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
+        },
+        React.createElement(
+          InputWithDecorations.Button,
+          {
+            'aria-label': 'Date picker',
+            ref: buttonRef,
+          },
+          React.createElement(SvgCalendar, null),
+        ),
+      ),
+    ),
+  );
 });

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.d.ts

@@ -14,4 +14,4 @@ export type DateRangeFilterProps<T extends Record<string, unknown>> = TableFilte
     placeholder?: string;
     translatedLabels?: DateRangeTranslation & FilterButtonBarTranslation;
 } & Pick<React.ComponentProps<typeof DatePickerInput>, 'showYearSelection'>;
-export declare const DateRangeFilter: <T extends Record<string, unknown>>(props: DateRangeFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangeFilter: <T extends Record<string, unknown>>(props: DateRangeFilterProps<T>) => React.JSX.Element;

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useGlobals } from '../../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
@@ -90,40 +89,40 @@ export const DateRangeFilter = (props) => {
       setFilter([from, to]);
     }
   };
-  return _jsxs(BaseFilter, {
-    children: [
-      _jsx(DatePickerInput, {
-        ref: inputRef,
-        label: translatedStrings.from,
-        date: from,
-        onChange: onFromChange,
-        formatDate: formatDate,
-        parseInput: parseInput,
-        onKeyDown: onKeyDown,
-        placeholder: placeholder,
-        selectedDate: to,
-        isFromOrTo: 'from',
-        localizedNames: translatedStrings.datePicker,
-        showYearSelection: showYearSelection,
-      }),
-      _jsx(DatePickerInput, {
-        label: translatedStrings.to,
-        date: to,
-        onChange: onToChange,
-        formatDate: formatDate,
-        parseInput: parseInput,
-        onKeyDown: onKeyDown,
-        placeholder: placeholder,
-        selectedDate: from,
-        isFromOrTo: 'to',
-        localizedNames: translatedStrings.datePicker,
-        showYearSelection: showYearSelection,
-      }),
-      _jsx(FilterButtonBar, {
-        setFilter: () => setFilter([from, to]),
-        clearFilter: clearFilter,
-        translatedLabels: translatedLabels,
-      }),
-    ],
-  });
+  return React.createElement(
+    BaseFilter,
+    null,
+    React.createElement(DatePickerInput, {
+      ref: inputRef,
+      label: translatedStrings.from,
+      date: from,
+      onChange: onFromChange,
+      formatDate: formatDate,
+      parseInput: parseInput,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      selectedDate: to,
+      isFromOrTo: 'from',
+      localizedNames: translatedStrings.datePicker,
+      showYearSelection: showYearSelection,
+    }),
+    React.createElement(DatePickerInput, {
+      label: translatedStrings.to,
+      date: to,
+      onChange: onToChange,
+      formatDate: formatDate,
+      parseInput: parseInput,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      selectedDate: from,
+      isFromOrTo: 'to',
+      localizedNames: translatedStrings.datePicker,
+      showYearSelection: showYearSelection,
+    }),
+    React.createElement(FilterButtonBar, {
+      setFilter: () => setFilter([from, to]),
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

package/esm/core/Table/filters/FilterButtonBar.d.ts

@@ -27,4 +27,4 @@ export type FilterButtonBarProps = {
  * @example
  * <FilterButtonBar setFilter={() => setFilter(text)} clearFilter={clearFilter} />
  */
-export declare const FilterButtonBar: (props: FilterButtonBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterButtonBar: (props: FilterButtonBarProps) => React.JSX.Element;

package/esm/core/Table/filters/FilterButtonBar.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, useGlobals } from '../../../utils/index.js';
@@ -22,21 +21,28 @@ export const FilterButtonBar = (props) => {
     ...translatedLabels,
   };
   useGlobals();
-  return _jsxs(Box, {
-    className: cx('iui-button-bar', className),
-    style: style,
-    id: id,
-    children: [
-      children,
-      _jsx(Button, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-button-bar', className),
+      style: style,
+      id: id,
+    },
+    children,
+    React.createElement(
+      Button,
+      {
         styleType: 'high-visibility',
         onClick: setFilter,
-        children: translatedStrings.filter,
-      }),
-      _jsx(Button, {
+      },
+      translatedStrings.filter,
+    ),
+    React.createElement(
+      Button,
+      {
         onClick: clearFilter,
-        children: translatedStrings.clear,
-      }),
-    ],
-  });
+      },
+      translatedStrings.clear,
+    ),
+  );
 };

package/esm/core/Table/filters/FilterToggle.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { HeaderGroup } from '../../../react-table/react-table.js';
 import type { CommonProps } from '../../../utils/index.js';
 export type FilterToggleProps<T extends Record<string, unknown>> = {
@@ -6,4 +7,4 @@ export type FilterToggleProps<T extends Record<string, unknown>> = {
 /**
  * Handles showing filter icon and opening filter component.
  */
-export declare const FilterToggle: <T extends Record<string, unknown>>(props: FilterToggleProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterToggle: <T extends Record<string, unknown>>(props: FilterToggleProps<T>) => React.JSX.Element;

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import {
@@ -26,35 +25,42 @@ export const FilterToggle = (props) => {
   }, [close, column]);
   const isColumnFiltered =
     column.filterValue != null && column.filterValue !== '';
-  return _jsx(_Fragment, {
-    children:
-      column.canFilter &&
+  return React.createElement(
+    React.Fragment,
+    null,
+    column.canFilter &&
       column.Filter &&
-      _jsx(Popover, {
-        content: column.render('Filter', {
-          close,
-          setFilter,
-          clearFilter,
-        }),
-        placement: 'bottom-start',
-        visible: isVisible,
-        onVisibleChange: setIsVisible,
-        closeOnOutsideClick: true,
-        applyBackground: true,
-        children: _jsx(IconButton, {
-          styleType: 'borderless',
-          isActive: isVisible || isColumnFiltered,
-          className: cx('iui-table-filter-button', className),
-          'aria-label': 'Filter',
-          onClick: (e) => {
-            e.stopPropagation();
+      React.createElement(
+        Popover,
+        {
+          content: column.render('Filter', {
+            close,
+            setFilter,
+            clearFilter,
+          }),
+          placement: 'bottom-start',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
+        },
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            isActive: isVisible || isColumnFiltered,
+            className: cx('iui-table-filter-button', className),
+            'aria-label': 'Filter',
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            'data-iui-shift': 'left',
+            ...rest,
           },
-          'data-iui-shift': 'left',
-          ...rest,
-          children: isColumnFiltered
-            ? _jsx(SvgFilter, {})
-            : _jsx(SvgFilterHollow, {}),
-        }),
-      }),
-  });
+          isColumnFiltered
+            ? React.createElement(SvgFilter, null)
+            : React.createElement(SvgFilterHollow, null),
+        ),
+      ),
+  );
 };

package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
 export type NumberRangeTranslation = {
@@ -7,4 +8,4 @@ export type NumberRangeTranslation = {
 export type NumberRangeFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
     translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation;
 };
-export declare const NumberRangeFilter: <T extends Record<string, unknown>>(props: NumberRangeFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberRangeFilter: <T extends Record<string, unknown>>(props: NumberRangeFilterProps<T>) => React.JSX.Element;