@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.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';
@@ -34,31 +33,30 @@ export const NumberRangeFilter = (props) => {
       setFilter([parseInputValue(from), parseInputValue(to)]);
     }
   };
-  return _jsxs(BaseFilter, {
-    children: [
-      _jsx(LabeledInput, {
-        ref: inputRef,
-        label: translatedStrings.from,
-        value: from,
-        onChange: (e) => setFrom(e.target.value),
-        onKeyDown: onKeyDown,
-        type: 'number',
-        displayStyle: 'inline',
-      }),
-      _jsx(LabeledInput, {
-        label: translatedStrings.to,
-        value: to,
-        onChange: (e) => setTo(e.target.value),
-        type: 'number',
-        displayStyle: 'inline',
-        onKeyDown: onKeyDown,
-      }),
-      _jsx(FilterButtonBar, {
-        setFilter: () =>
-          setFilter([parseInputValue(from), parseInputValue(to)]),
-        clearFilter: clearFilter,
-        translatedLabels: translatedLabels,
-      }),
-    ],
-  });
+  return React.createElement(
+    BaseFilter,
+    null,
+    React.createElement(LabeledInput, {
+      ref: inputRef,
+      label: translatedStrings.from,
+      value: from,
+      onChange: (e) => setFrom(e.target.value),
+      onKeyDown: onKeyDown,
+      type: 'number',
+      displayStyle: 'inline',
+    }),
+    React.createElement(LabeledInput, {
+      label: translatedStrings.to,
+      value: to,
+      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.d.ts

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

package/esm/core/Table/filters/TextFilter/TextFilter.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 { Input } from '../../../Input/Input.js';
@@ -22,19 +21,19 @@ export const TextFilter = (props) => {
       setFilter(text);
     }
   };
-  return _jsxs(BaseFilter, {
-    children: [
-      _jsx(Input, {
-        ref: inputRef,
-        value: text,
-        onChange: (e) => setText(e.target.value),
-        onKeyDown: onKeyDown,
-      }),
-      _jsx(FilterButtonBar, {
-        setFilter: () => setFilter(text),
-        clearFilter: clearFilter,
-        translatedLabels: translatedLabels,
-      }),
-    ],
-  });
+  return React.createElement(
+    BaseFilter,
+    null,
+    React.createElement(Input, {
+      ref: inputRef,
+      value: text,
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: onKeyDown,
+    }),
+    React.createElement(FilterButtonBar, {
+      setFilter: () => setFilter(text),
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

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

@@ -29,7 +29,7 @@ export declare const tableFilters: {
      * Basic filter with a single input field.
      * @param translatedLabels Translated filter labels.
      */
-    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => React.JSX.Element;
     /**
      * Date range filter.
      *
@@ -40,7 +40,7 @@ export declare const tableFilters: {
      * If your data is different type e.g. `string`, you can use `accessor` property in column description:
      * `accessor: (rowData) => new Date(rowData.date)`.
      */
-    DateRangeFilter: (options?: DateRangeFilterOptions) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+    DateRangeFilter: (options?: DateRangeFilterOptions) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => React.JSX.Element;
     /**
      * Number range filter.
      *
@@ -49,5 +49,5 @@ export declare const tableFilters: {
      * `accessor: (rowData) => Number(rowData.numberProp)`.
      * @param translatedLabels Translated filter labels.
      */
-    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: NumberRangeFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: NumberRangeFilterProps<T>) => React.JSX.Element;
 };

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

@@ -1,21 +1,20 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { DateRangeFilter } from './DateRangeFilter/DateRangeFilter.js';
 import { NumberRangeFilter } from './NumberRangeFilter/NumberRangeFilter.js';
 import { TextFilter } from './TextFilter/TextFilter.js';
 export const tableFilters = {
   TextFilter: (translatedLabels) => (props) =>
-    _jsx(TextFilter, {
+    React.createElement(TextFilter, {
       ...props,
       translatedLabels: translatedLabels,
     }),
   DateRangeFilter: (options) => (props) =>
-    _jsx(DateRangeFilter, {
+    React.createElement(DateRangeFilter, {
       ...props,
       ...options,
     }),
   NumberRangeFilter: (translatedLabels) => (props) =>
-    _jsx(NumberRangeFilter, {
+    React.createElement(NumberRangeFilter, {
       ...props,
       translatedLabels: translatedLabels,
     }),

package/esm/core/Table/hooks/useExpanderCell.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js';
 export const useExpanderCell =
@@ -20,9 +19,11 @@ export const useExpanderCell =
           ...expanderColumn,
           Cell: expanderCell
             ? (cellProps) =>
-                _jsx(_Fragment, {
-                  children: expanderCell(cellProps),
-                })
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  expanderCell(cellProps),
+                )
             : expanderColumn.Cell,
         },
         ...columns,

package/esm/core/Tabs/Tabs.js

@@ -1,8 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import {
@@ -41,30 +36,36 @@ const TabsWrapper = React.forwardRef((props, ref) => {
   const [stripeProperties, setStripeProperties] = React.useState({});
   const [hasSublabel, setHasSublabel] = React.useState(false);
   const idPrefix = useId();
-  return _jsx(Box, {
-    className: cx('iui-tabs-wrapper', `iui-${orientation}`, className),
-    ...rest,
-    style: {
-      ...stripeProperties,
-      ...props?.style,
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-tabs-wrapper', `iui-${orientation}`, className),
+      ...rest,
+      style: {
+        ...stripeProperties,
+        ...props?.style,
+      },
+      ref: ref,
     },
-    ref: ref,
-    children: _jsx(TabsContext.Provider, {
-      value: {
-        orientation,
-        type,
-        activeValue,
-        setActiveValue,
-        setStripeProperties,
-        idPrefix,
-        focusActivationMode,
-        hasSublabel,
-        setHasSublabel,
-        color,
+    React.createElement(
+      TabsContext.Provider,
+      {
+        value: {
+          orientation,
+          type,
+          activeValue,
+          setActiveValue,
+          setStripeProperties,
+          idPrefix,
+          focusActivationMode,
+          hasSublabel,
+          setHasSublabel,
+          color,
+        },
       },
-      children: children,
-    }),
-  });
+      children,
+    ),
+  );
 });
 TabsWrapper.displayName = 'Tabs.Wrapper';
 const TabList = React.forwardRef((props, ref) => {
@@ -79,29 +80,35 @@ const TabList = React.forwardRef((props, ref) => {
     tablistSizeRef,
     useScrollbarGutter(),
   );
-  return _jsx(Box, {
-    className: cx(
-      'iui-tabs',
-      `iui-${type}`,
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-tabs',
+        `iui-${type}`,
+        {
+          'iui-green': color === 'green',
+          'iui-animated': type !== 'default' && isClient,
+          'iui-not-animated': type !== 'default' && !isClient,
+          'iui-large': hasSublabel,
+        },
+        className,
+      ),
+      role: 'tablist',
+      ref: refs,
+      ...rest,
+    },
+    React.createElement(
+      TabListContext.Provider,
       {
-        'iui-green': color === 'green',
-        'iui-animated': type !== 'default' && isClient,
-        'iui-not-animated': type !== 'default' && !isClient,
-        'iui-large': hasSublabel,
+        value: {
+          tabsWidth,
+          tablistRef,
+        },
       },
-      className,
+      children,
     ),
-    role: 'tablist',
-    ref: refs,
-    ...rest,
-    children: _jsx(TabListContext.Provider, {
-      value: {
-        tabsWidth,
-        tablistRef,
-      },
-      children: children,
-    }),
-  });
+  );
 });
 TabList.displayName = 'Tabs.TabList';
 const Tab = React.forwardRef((props, forwardedRef) => {
@@ -213,36 +220,35 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     },
     [activeValue, setActiveValue, value],
   );
-  return _jsx(ButtonBase, {
-    className: cx('iui-tab', className),
-    role: 'tab',
-    tabIndex: isActive ? 0 : -1,
-    'aria-selected': isActive,
-    'aria-controls': `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
-    ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef),
-    ...rest,
-    id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
-    onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)),
-    onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
-    onFocus: mergeEventHandlers(props.onFocus, () => {
-      tabRef.current?.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest',
-      });
-      if (focusActivationMode === 'auto' && !props.disabled) {
-        setActiveValue(value);
-      }
-    }),
-    children: label
-      ? _jsx(Tabs.TabLabel, {
-          children: label,
-        })
-      : children,
-  });
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-tab', className),
+      role: 'tab',
+      tabIndex: isActive ? 0 : -1,
+      'aria-selected': isActive,
+      'aria-controls': `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+      ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef),
+      ...rest,
+      id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
+      onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)),
+      onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
+      onFocus: mergeEventHandlers(props.onFocus, () => {
+        tabRef.current?.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        });
+        if (focusActivationMode === 'auto' && !props.disabled) {
+          setActiveValue(value);
+        }
+      }),
+    },
+    label ? React.createElement(Tabs.TabLabel, null, label) : children,
+  );
 });
 Tab.displayName = 'Tabs.Tab';
 const TabIcon = React.forwardRef((props, ref) => {
-  return _jsx(Icon, {
+  return React.createElement(Icon, {
     ...props,
     className: cx('iui-tab-icon', props?.className),
     ref: ref,
@@ -259,42 +265,54 @@ const TabDescription = React.forwardRef((props, ref) => {
       setHasSublabel(true);
     }
   }, [hasSublabel, setHasSublabel]);
-  return _jsx(Box, {
-    as: 'span',
-    className: cx('iui-tab-description', className),
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('iui-tab-description', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 TabDescription.displayName = 'Tabs.TabDescription';
 const TabsActions = React.forwardRef((props, ref) => {
   const { wrapperProps, className, children, ...rest } = props;
-  return _jsx(Box, {
-    ...wrapperProps,
-    className: cx('iui-tabs-actions-wrapper', wrapperProps?.className),
-    children: _jsx(Box, {
-      className: cx('iui-tabs-actions', className),
-      ref: ref,
-      ...rest,
-      children: children,
-    }),
-  });
+  return React.createElement(
+    Box,
+    {
+      ...wrapperProps,
+      className: cx('iui-tabs-actions-wrapper', wrapperProps?.className),
+    },
+    React.createElement(
+      Box,
+      {
+        className: cx('iui-tabs-actions', className),
+        ref: ref,
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = React.forwardRef((props, ref) => {
   const { value, className, children, ...rest } = props;
   const { activeValue, idPrefix } = useSafeContext(TabsContext);
-  return _jsx(Box, {
-    className: cx('iui-tabs-content', className),
-    'aria-labelledby': `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
-    role: 'tabpanel',
-    hidden: activeValue !== value ? true : undefined,
-    ref: ref,
-    ...rest,
-    id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-tabs-content', className),
+      'aria-labelledby': `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
+      role: 'tabpanel',
+      hidden: activeValue !== value ? true : undefined,
+      ref: ref,
+      ...rest,
+      id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+    },
+    children,
+  );
 });
 TabsPanel.displayName = 'Tabs.Panel';
 const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
@@ -323,70 +341,66 @@ const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
     activeIndexProp,
     onTabSelected,
   );
-  return _jsxs(TabsWrapper, {
-    className: wrapperClassName,
-    focusActivationMode: focusActivationMode,
-    color: color,
-    value: `${activeIndex}`,
-    onValueChange: (value) => setActiveIndex(Number(value)),
-    ...rest,
-    children: [
-      _jsx(TabList, {
+  return React.createElement(
+    TabsWrapper,
+    {
+      className: wrapperClassName,
+      focusActivationMode: focusActivationMode,
+      color: color,
+      value: `${activeIndex}`,
+      onValueChange: (value) => setActiveIndex(Number(value)),
+      ...rest,
+    },
+    React.createElement(
+      TabList,
+      {
         className: tabsClassName,
         ref: forwardedRef,
-        children: labels.map((label, index) => {
-          const tabValue = `${index}`;
-          return React.isValidElement(label)
-            ? React.cloneElement(label, {
-                value: tabValue,
-              })
-            : _jsx(
-                LegacyTab,
-                {
-                  value: tabValue,
-                  label: label,
-                },
-                index,
-              );
-        }),
+      },
+      labels.map((label, index) => {
+        const tabValue = `${index}`;
+        return React.isValidElement(label)
+          ? React.cloneElement(label, {
+              value: tabValue,
+            })
+          : React.createElement(LegacyTab, {
+              key: index,
+              value: tabValue,
+              label: label,
+            });
       }),
-      actions &&
-        _jsx(TabsActions, {
-          children: actions,
-        }),
-      children &&
-        _jsx(TabsPanel, {
+    ),
+    actions && React.createElement(TabsActions, null, actions),
+    children &&
+      React.createElement(
+        TabsPanel,
+        {
           value: `${activeIndex}`,
           className: contentClassName,
-          children: children,
-        }),
-    ],
-  });
+        },
+        children,
+      ),
+  );
 });
 LegacyTabsComponent.displayName = 'Tabs';
 const LegacyTab = React.forwardRef((props, forwardedRef) => {
   const { label, sublabel, startIcon, children, value, ...rest } = props;
-  return _jsx(_Fragment, {
-    children: _jsxs(Tab, {
-      ...rest,
-      value: value,
-      ref: forwardedRef,
-      children: [
-        startIcon &&
-          _jsx(TabIcon, {
-            children: startIcon,
-          }),
-        _jsx(TabLabel, {
-          children: label,
-        }),
-        sublabel &&
-          _jsx(TabDescription, {
-            children: sublabel,
-          }),
-        children,
-      ],
-    }),
-  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Tab,
+      {
+        ...rest,
+        value: value,
+        ref: forwardedRef,
+      },
+      startIcon && React.createElement(TabIcon, null, startIcon),
+      React.createElement(TabLabel, null, label),
+      sublabel && React.createElement(TabDescription, null, sublabel),
+      children,
+    ),
+  );
 });
 export { LegacyTab as Tab };
 export const Tabs = Object.assign(LegacyTabsComponent, {

package/esm/core/Tag/Tag.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgCloseSmall, Box, ButtonBase } from '../../utils/index.js';
@@ -16,40 +15,47 @@ export const Tag = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const shouldUseLinkAction = !!onClick && !!onRemove;
-  return _jsxs(Box, {
-    as: shouldUseLinkAction ? LinkBox : !!onClick ? ButtonBase : 'span',
-    className: cx(
-      {
-        'iui-tag-basic': variant === 'basic',
-        'iui-tag': variant === 'default',
-      },
-      className,
-    ),
-    ref: forwardedRef,
-    onClick: !shouldUseLinkAction ? onClick : undefined,
-    ...rest,
-    children: [
-      variant === 'default'
-        ? _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      as: shouldUseLinkAction ? LinkBox : !!onClick ? ButtonBase : 'span',
+      className: cx(
+        {
+          'iui-tag-basic': variant === 'basic',
+          'iui-tag': variant === 'default',
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      onClick: !shouldUseLinkAction ? onClick : undefined,
+      ...rest,
+    },
+    variant === 'default'
+      ? React.createElement(
+          Box,
+          {
             as: shouldUseLinkAction ? LinkAction : 'span',
             onClick: shouldUseLinkAction ? onClick : undefined,
             ...labelProps,
             className: cx('iui-tag-label', labelProps?.className),
-            children: children,
-          })
-        : children,
-      onRemove &&
-        _jsx(IconButton, {
+          },
+          children,
+        )
+      : children,
+    onRemove &&
+      React.createElement(
+        IconButton,
+        {
           styleType: 'borderless',
           size: 'small',
           onClick: onRemove,
           'aria-label': 'Delete tag',
           ...removeButtonProps,
           className: cx('iui-tag-button', removeButtonProps?.className),
-          children: _jsx(SvgCloseSmall, {
-            'aria-hidden': true,
-          }),
+        },
+        React.createElement(SvgCloseSmall, {
+          'aria-hidden': true,
         }),
-    ],
-  });
+      ),
+  );
 });