@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Popover/Popover.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 {
@@ -216,67 +211,84 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     popover.refs.setPositionReference(positionReference);
     return () => void popover.refs.setPositionReference(null);
   }, [popover.refs, positionReference]);
-  return _jsxs(_Fragment, {
-    children: [
-      _jsx(PopoverOpenContext.Provider, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      PopoverOpenContext.Provider,
+      {
         value: popover.open,
-        children: cloneElementWithRef(children, (children) => ({
-          id: children.props.id || triggerId,
-          ...popover.getReferenceProps(children.props),
-          ref: popover.refs.setReference,
-        })),
-      }),
-      popover.open
-        ? _jsx(PopoverPortal, {
+      },
+      cloneElementWithRef(children, (children) => ({
+        id: children.props.id || triggerId,
+        ...popover.getReferenceProps(children.props),
+        ref: popover.refs.setReference,
+      })),
+    ),
+    popover.open
+      ? React.createElement(
+          PopoverPortal,
+          {
             portal: portal,
-            children: _jsxs(ThemeProvider, {
+          },
+          React.createElement(
+            ThemeProvider,
+            {
               portalContainer: popoverElement,
-              children: [
-                _jsx(DisplayContents, {}),
-                _jsx(FloatingFocusManager, {
-                  context: popover.context,
-                  modal: false,
-                  initialFocus: popover.refs.floating,
-                  children: _jsx(Box, {
-                    className: cx(
-                      {
-                        'iui-popover-surface': applyBackground,
-                      },
-                      className,
-                    ),
-                    'aria-labelledby': !hasAriaLabel
-                      ? popover.refs.domReference.current?.id
-                      : undefined,
-                    ...popover.getFloatingProps(rest),
-                    ref: popoverRef,
-                    children: content,
-                  }),
-                }),
-              ],
-            }),
-          })
-        : null,
-    ],
-  });
+            },
+            React.createElement(DisplayContents, null),
+            React.createElement(
+              FloatingFocusManager,
+              {
+                context: popover.context,
+                modal: false,
+                initialFocus: popover.refs.floating,
+              },
+              React.createElement(
+                Box,
+                {
+                  className: cx(
+                    {
+                      'iui-popover-surface': applyBackground,
+                    },
+                    className,
+                  ),
+                  'aria-labelledby': !hasAriaLabel
+                    ? popover.refs.domReference.current?.id
+                    : undefined,
+                  ...popover.getFloatingProps(rest),
+                  ref: popoverRef,
+                },
+                content,
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
 });
 const PopoverPortal = ({ children, portal = true }) => {
   const portalTo = usePortalTo(portal);
-  return _jsxs(
+  return React.createElement(
     FloatingPortal,
     {
+      key: portalTo?.id,
       root: portalTo,
-      children: [_jsx(DisplayContents, {}), children],
     },
-    portalTo?.id,
+    React.createElement(DisplayContents, null),
+    children,
   );
 };
 const DisplayContents = React.memo(() => {
-  return _jsx(ShadowRoot, {
-    css: `
+  return React.createElement(
+    ShadowRoot,
+    {
+      css: `
         :host {
           display: contents;
         }
       `,
-    children: _jsx('slot', {}),
-  });
+    },
+    React.createElement('slot', null),
+  );
 });

package/esm/core/ProgressIndicators/ProgressLinear.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, ShadowRoot, getBoundedValue } from '../../utils/index.js';
@@ -15,44 +14,45 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const boundedValue = getBoundedValue(value ?? 100, 0, 100);
-  return _jsxs(Box, {
-    className: cx('iui-progress-indicator-linear', className),
-    ref: forwardedRef,
-    'data-iui-status': status,
-    'data-iui-indeterminate': indeterminate ? 'true' : undefined,
-    'data-iui-animated': isAnimated ? 'true' : undefined,
-    style: {
-      '--iui-progress-percentage': `${boundedValue}%`,
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-progress-indicator-linear', className),
+      ref: forwardedRef,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      'data-iui-animated': isAnimated ? 'true' : undefined,
+      style: {
+        '--iui-progress-percentage': `${boundedValue}%`,
+      },
+      ...rest,
     },
-    ...rest,
-    children: [
-      _jsxs(ShadowRoot, {
-        children: [
-          value !== 100 &&
-            _jsx(VisuallyHidden, {
-              children: 'Loading.',
-            }),
-          _jsx('slot', {}),
-        ],
-      }),
-      labels.length > 0 &&
-        _jsx(Box, {
+    React.createElement(
+      ShadowRoot,
+      null,
+      value !== 100 && React.createElement(VisuallyHidden, null, 'Loading.'),
+      React.createElement('slot', null),
+    ),
+    labels.length > 0 &&
+      React.createElement(
+        Box,
+        {
           as: 'div',
           ...labelGroupProps,
           className: cx(
             'iui-progress-indicator-linear-label',
             labelGroupProps?.className,
           ),
-          children: labels.map((label, index) =>
-            _jsx(
-              'span',
-              {
-                children: label,
-              },
-              index,
-            ),
+        },
+        labels.map((label, index) =>
+          React.createElement(
+            'span',
+            {
+              key: index,
+            },
+            label,
           ),
-        }),
-    ],
-  });
+        ),
+      ),
+  );
 });

package/esm/core/ProgressIndicators/ProgressRadial.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 {
@@ -21,42 +20,40 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const statusMap = {
-    negative: _jsx(SvgImportantSmall, {
+    negative: React.createElement(SvgImportantSmall, {
       'aria-hidden': true,
     }),
-    positive: _jsx(SvgCheckmarkSmall, {
+    positive: React.createElement(SvgCheckmarkSmall, {
       'aria-hidden': true,
     }),
-    warning: _jsx(SvgImportantSmall, {
+    warning: React.createElement(SvgImportantSmall, {
       'aria-hidden': true,
     }),
   };
-  return _jsxs(Box, {
-    className: cx('iui-progress-indicator-radial', className),
-    'data-iui-size': size,
-    'data-iui-status': status,
-    'data-iui-indeterminate': indeterminate ? 'true' : undefined,
-    ref: forwardedRef,
-    style: {
-      ...(value !== undefined && {
-        '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
-      }),
-      ...style,
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-progress-indicator-radial', className),
+      'data-iui-size': size,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      ref: forwardedRef,
+      style: {
+        ...(value !== undefined && {
+          '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
+        }),
+        ...style,
+      },
+      ...rest,
     },
-    ...rest,
-    children: [
-      _jsxs(ShadowRoot, {
-        children: [
-          value !== 100 &&
-            _jsx(VisuallyHidden, {
-              children: 'Loading.',
-            }),
-          _jsx('slot', {}),
-        ],
-      }),
-      size !== 'x-small'
-        ? children ?? (!!status ? statusMap[status] : null)
-        : null,
-    ],
-  });
+    React.createElement(
+      ShadowRoot,
+      null,
+      value !== 100 && React.createElement(VisuallyHidden, null, 'Loading.'),
+      React.createElement('slot', null),
+    ),
+    size !== 'x-small'
+      ? children ?? (!!status ? statusMap[status] : null)
+      : null,
+  );
 });

package/esm/core/Radio/Radio.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 { useMergedRefs, Box } from '../../utils/index.js';
@@ -15,7 +14,7 @@ export const Radio = React.forwardRef((props, ref) => {
   } = props;
   const inputElementRef = React.useRef(null);
   const refs = useMergedRefs(inputElementRef, ref);
-  const radio = _jsx(Box, {
+  const radio = React.createElement(Box, {
     as: 'input',
     className: cx('iui-radio', className),
     style: style,
@@ -26,26 +25,30 @@ export const Radio = React.forwardRef((props, ref) => {
   });
   return !label
     ? radio
-    : _jsxs(Box, {
-        as: 'label',
-        ...wrapperProps,
-        className: cx(
-          'iui-radio-wrapper',
-          {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-          },
-          wrapperProps?.className,
-        ),
-        children: [
-          radio,
-          label &&
-            _jsx(Box, {
+    : React.createElement(
+        Box,
+        {
+          as: 'label',
+          ...wrapperProps,
+          className: cx(
+            'iui-radio-wrapper',
+            {
+              'iui-disabled': disabled,
+              [`iui-${status}`]: !!status,
+            },
+            wrapperProps?.className,
+          ),
+        },
+        radio,
+        label &&
+          React.createElement(
+            Box,
+            {
               as: 'span',
               ...labelProps,
               className: cx('iui-radio-label', labelProps?.className),
-              children: label,
-            }),
-        ],
-      });
+            },
+            label,
+          ),
+      );
 });

package/esm/core/RadioTiles/RadioTile.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 { useMergedRefs, Box } from '../../utils/index.js';
@@ -17,42 +16,52 @@ export const RadioTile = React.forwardRef((props, ref) => {
   } = props;
   const inputElementRef = React.useRef(null);
   const refs = useMergedRefs(inputElementRef, ref);
-  return _jsxs(Box, {
-    as: 'label',
-    'data-iui-disabled': props.disabled ? 'true' : undefined,
-    ...wrapperProps,
-    className: cx('iui-radio-tile', wrapperProps?.className),
-    children: [
-      _jsx(Box, {
-        as: 'input',
-        ref: refs,
-        className: cx('iui-radio-tile-input', className),
-        style: style,
-        type: 'radio',
-        ...rest,
-      }),
-      icon &&
-        _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      as: 'label',
+      'data-iui-disabled': props.disabled ? 'true' : undefined,
+      ...wrapperProps,
+      className: cx('iui-radio-tile', wrapperProps?.className),
+    },
+    React.createElement(Box, {
+      as: 'input',
+      ref: refs,
+      className: cx('iui-radio-tile-input', className),
+      style: style,
+      type: 'radio',
+      ...rest,
+    }),
+    icon &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           'aria-hidden': true,
           ...iconProps,
           className: cx('iui-radio-tile-icon', iconProps?.className),
-          children: icon,
-        }),
-      label &&
-        _jsx(Box, {
+        },
+        icon,
+      ),
+    label &&
+      React.createElement(
+        Box,
+        {
           as: 'div',
           ...labelProps,
           className: cx('iui-radio-tile-label', labelProps?.className),
-          children: label,
-        }),
-      description &&
-        _jsx(Box, {
+        },
+        label,
+      ),
+    description &&
+      React.createElement(
+        Box,
+        {
           as: 'div',
           ...subLabelProps,
           className: cx('iui-radio-tile-sublabel', subLabelProps?.className),
-          children: description,
-        }),
-    ],
-  });
+        },
+        description,
+      ),
+  );
 });

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -1,16 +1,21 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/InputGroup.js';
 import { Box } from '../../utils/index.js';
 export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
   const { children, label, ...rest } = props;
-  return _jsx(InputGroup, {
-    label: label,
-    ref: forwardedRef,
-    ...rest,
-    children: _jsx(Box, {
-      className: 'iui-radio-tile-container',
-      children: children,
-    }),
-  });
+  return React.createElement(
+    InputGroup,
+    {
+      label: label,
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-radio-tile-container',
+      },
+      children,
+    ),
+  );
 });

package/esm/core/SearchBox/SearchBox.d.ts

@@ -76,7 +76,7 @@ export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxO
     ExpandedState: {
         ({ children, }: {
             children: React.ReactNode;
-        }): import("react/jsx-runtime").JSX.Element | null;
+        }): React.JSX.Element | null;
         displayName: string;
     };
     /**
@@ -85,7 +85,7 @@ export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxO
     CollapsedState: {
         ({ children, }: {
             children?: React.ReactNode;
-        }): import("react/jsx-runtime").JSX.Element | null;
+        }): React.JSX.Element | null;
         displayName: string;
     };
 };