@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Header/HeaderBasicButton.js

@@ -1,4 +1,3 @@
-import { jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { ButtonBase } from '../../utils/index.js';
@@ -7,10 +6,15 @@ export const HeaderBasicButton = React.forwardRef((props, ref) => {
     props;
   styleType;
   size;
-  return _jsxs(ButtonBase, {
-    className: cx('iui-header-breadcrumb-button', className),
-    ref: ref,
-    ...rest,
-    children: [startIcon, children, endIcon],
-  });
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-header-breadcrumb-button', className),
+      ref: ref,
+      ...rest,
+    },
+    startIcon,
+    children,
+    endIcon,
+  );
 });

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -1,42 +1,44 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight, Box } from '../../utils/index.js';
 export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
   const { className, items, ...rest } = props;
-  return _jsx(Box, {
-    as: 'nav',
-    'aria-label': 'breadcrumbs',
-    className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className),
-    ref: forwardedRef,
-    ...rest,
-    children: _jsx(Box, {
-      as: 'ol',
-      className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list'),
-      children: items.reduce(
+  return React.createElement(
+    Box,
+    {
+      as: 'nav',
+      'aria-label': 'breadcrumbs',
+      className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'ol',
+        className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list'),
+      },
+      items.reduce(
         (previous, current, index) => [
           ...previous,
           current,
           index !== items.length - 1 &&
-            _jsx(
+            React.createElement(
               Box,
               {
                 as: 'li',
                 className: 'iui-breadcrumbs-separator',
-                children: _jsx(
-                  SvgChevronRight,
-                  {
-                    'aria-hidden': true,
-                    className: 'iui-chevron',
-                  },
-                  `chevron${index}`,
-                ),
+                key: index,
               },
-              index,
+              React.createElement(SvgChevronRight, {
+                key: `chevron${index}`,
+                'aria-hidden': true,
+                className: 'iui-chevron',
+              }),
             ),
         ],
         [],
       ),
-    }),
-  });
+    ),
+  );
 });

package/esm/core/Header/HeaderButton.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import { HeaderSplitButton } from './HeaderSplitButton.js';
@@ -17,30 +16,40 @@ export const HeaderButton = React.forwardRef((props, ref) => {
   } = props;
   const buttonProps = {
     startIcon: startIcon
-      ? _jsx(Box, {
-          as: 'span',
-          className: 'iui-header-breadcrumb-button-icon',
-          'aria-hidden': true,
-          children: startIcon,
-        })
+      ? React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-header-breadcrumb-button-icon',
+            'aria-hidden': true,
+          },
+          startIcon,
+        )
       : null,
-    children: _jsxs(Box, {
-      as: 'span',
-      className: 'iui-header-breadcrumb-button-text',
-      children: [
-        _jsx(Box, {
+    children: React.createElement(
+      Box,
+      {
+        as: 'span',
+        className: 'iui-header-breadcrumb-button-text',
+      },
+      React.createElement(
+        Box,
+        {
           as: 'span',
           className: 'iui-header-breadcrumb-button-text-label',
-          children: name,
-        }),
-        description &&
-          _jsx(Box, {
+        },
+        name,
+      ),
+      description &&
+        React.createElement(
+          Box,
+          {
             as: 'span',
             className: 'iui-header-breadcrumb-button-text-sublabel',
-            children: description,
-          }),
-      ],
-    }),
+          },
+          description,
+        ),
+    ),
     ref: ref,
     disabled: disabled,
     name: htmlName,
@@ -51,21 +60,18 @@ export const HeaderButton = React.forwardRef((props, ref) => {
   };
   const headerButton =
     !!props.menuItems && !!props.onClick
-      ? _jsx(HeaderSplitButton, {
-          ...buttonProps,
-        })
+      ? React.createElement(HeaderSplitButton, buttonProps)
       : !!props.menuItems
-        ? _jsx(HeaderDropdownButton, {
-            ...buttonProps,
-          })
-        : _jsx(HeaderBasicButton, {
-            ...buttonProps,
-          });
-  return _jsx(Box, {
-    as: 'li',
-    className: 'iui-header-breadcrumb-item',
-    'aria-current': isActive ? 'location' : undefined,
-    'aria-disabled': disabled ? 'true' : undefined,
-    children: headerButton,
-  });
+        ? React.createElement(HeaderDropdownButton, buttonProps)
+        : React.createElement(HeaderBasicButton, buttonProps);
+  return React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: 'iui-header-breadcrumb-item',
+      'aria-current': isActive ? 'location' : undefined,
+      'aria-disabled': disabled ? 'true' : undefined,
+    },
+    headerButton,
+  );
 });

package/esm/core/Header/HeaderDropdownButton.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
@@ -19,27 +18,33 @@ export const HeaderDropdownButton = React.forwardRef((props, ref) => {
       setMenuWidth(buttonRef.current.offsetWidth);
     }
   }, [children]);
-  return _jsx(DropdownMenu, {
-    menuItems: menuItems,
-    style: {
-      minInlineSize: menuWidth,
+  return React.createElement(
+    DropdownMenu,
+    {
+      menuItems: menuItems,
+      style: {
+        minInlineSize: menuWidth,
+      },
+      onVisibleChange: (open) => setIsMenuOpen(open),
     },
-    onVisibleChange: (open) => setIsMenuOpen(open),
-    children: _jsx(HeaderBasicButton, {
-      className: cx('iui-header-breadcrumb-button', className),
-      ref: refs,
-      'aria-label': 'Dropdown',
-      endIcon: isMenuOpen
-        ? _jsx(SvgCaretUpSmall, {
-            className: 'iui-header-breadcrumb-button-dropdown-icon',
-            'aria-hidden': true,
-          })
-        : _jsx(SvgCaretDownSmall, {
-            className: 'iui-header-breadcrumb-button-dropdown-icon',
-            'aria-hidden': true,
-          }),
-      ...rest,
-      children: children,
-    }),
-  });
+    React.createElement(
+      HeaderBasicButton,
+      {
+        className: cx('iui-header-breadcrumb-button', className),
+        ref: refs,
+        'aria-label': 'Dropdown',
+        endIcon: isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            })
+          : React.createElement(SvgCaretDownSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            }),
+        ...rest,
+      },
+      children,
+    ),
+  );
 });

package/esm/core/Header/HeaderLogo.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 { Box } from '../../utils/index.js';
@@ -11,28 +10,35 @@ export const HeaderLogo = React.forwardRef((props, ref) => {
     as = !!onClick ? 'button' : 'div',
     ...rest
   } = props;
-  return _jsxs(Box, {
-    className: cx('iui-header-brand', className),
-    as: as,
-    type: as === 'button' ? 'button' : undefined,
-    onClick: onClick,
-    ref: ref,
-    ...rest,
-    children: [
-      logo
-        ? _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-header-brand', className),
+      as: as,
+      type: as === 'button' ? 'button' : undefined,
+      onClick: onClick,
+      ref: ref,
+      ...rest,
+    },
+    logo
+      ? React.createElement(
+          Box,
+          {
             as: 'span',
             className: 'iui-header-brand-icon',
             'aria-hidden': true,
-            children: logo,
-          })
-        : null,
-      children &&
-        _jsx(Box, {
+          },
+          logo,
+        )
+      : null,
+    children &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           className: 'iui-header-brand-label',
-          children: children,
-        }),
-    ],
-  });
+        },
+        children,
+      ),
+  );
 });

package/esm/core/Header/HeaderSplitButton.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 { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
@@ -26,39 +25,49 @@ export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
       setMenuWidth(ref.current.offsetWidth);
     }
   }, [children]);
-  return _jsxs(Box, {
-    className: cx('iui-header-breadcrumb-button-wrapper', className),
-    ref: ref,
-    children: [
-      _jsx(HeaderBasicButton, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-header-breadcrumb-button-wrapper', className),
+      ref: ref,
+    },
+    React.createElement(
+      HeaderBasicButton,
+      {
         ref: forwardedRef,
         disabled: disabled,
         ...rest,
-        children: children,
-      }),
-      _jsx(DropdownMenu, {
+      },
+      children,
+    ),
+    React.createElement(
+      DropdownMenu,
+      {
         placement: menuPlacement,
         menuItems: menuItems,
         style: {
           minInlineSize: menuWidth,
         },
         onVisibleChange: (open) => setIsMenuOpen(open),
-        children: _jsx(ButtonBase, {
+      },
+      React.createElement(
+        ButtonBase,
+        {
           'aria-label': 'More',
           className:
             'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
           disabled: disabled,
-          children: isMenuOpen
-            ? _jsx(SvgCaretUpSmall, {
-                className: 'iui-header-breadcrumb-button-dropdown-icon',
-                'aria-hidden': true,
-              })
-            : _jsx(SvgCaretDownSmall, {
-                className: 'iui-header-breadcrumb-button-dropdown-icon',
-                'aria-hidden': true,
-              }),
-        }),
-      }),
-    ],
-  });
+        },
+        isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            })
+          : React.createElement(SvgCaretDownSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            }),
+      ),
+    ),
+  );
 });

package/esm/core/Icon/Icon.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 '../../utils/components/Box.js';
@@ -22,7 +21,7 @@ export const Icon = React.forwardRef((props, ref) => {
     padded = false,
     ...rest
   } = props;
-  return _jsx(Box, {
+  return React.createElement(Box, {
     as: 'span',
     className: cx('iui-svg-icon', className),
     'data-iui-icon-size': getSizeValue(size),

package/esm/core/InformationPanel/InformationPanel.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';
@@ -63,33 +62,37 @@ export const InformationPanel = React.forwardRef((props, forwardedRef) => {
     },
     [orientation],
   );
-  return _jsxs(Box, {
-    className: cx(
-      'iui-information-panel',
-      {
-        'iui-right': orientation === 'vertical',
-        'iui-bottom': orientation === 'horizontal',
-        'iui-visible': isOpen,
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-information-panel',
+        {
+          'iui-right': orientation === 'vertical',
+          'iui-bottom': orientation === 'horizontal',
+          'iui-visible': isOpen,
+        },
+        className,
+      ),
+      ref: refs,
+      ...rest,
+      style: {
+        width: orientation === 'vertical' ? infoPanelSize.width : undefined,
+        height: orientation === 'horizontal' ? infoPanelSize.height : undefined,
+        ...props.style,
       },
-      className,
-    ),
-    ref: refs,
-    ...rest,
-    style: {
-      width: orientation === 'vertical' ? infoPanelSize.width : undefined,
-      height: orientation === 'horizontal' ? infoPanelSize.height : undefined,
-      ...props.style,
     },
-    children: [
-      resizable &&
-        _jsx(Box, {
+    resizable &&
+      React.createElement(
+        Box,
+        {
           className: 'iui-resizer',
           onPointerDown: startResize,
-          children: _jsx(Box, {
-            className: 'iui-resizer-bar',
-          }),
+        },
+        React.createElement(Box, {
+          className: 'iui-resizer-bar',
         }),
-      children,
-    ],
-  });
+      ),
+    children,
+  );
 });

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -1,21 +1,23 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const InformationPanelContent = React.forwardRef(
   (props, forwardedRef) => {
     const { className, displayStyle = 'default', children, ...rest } = props;
-    return _jsx(Box, {
-      className: cx(
-        'iui-information-body-content',
-        {
-          'iui-inline': displayStyle === 'inline',
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-      children: children,
-    });
+    return React.createElement(
+      Box,
+      {
+        className: cx(
+          'iui-information-body-content',
+          {
+            'iui-inline': displayStyle === 'inline',
+          },
+          className,
+        ),
+        ref: forwardedRef,
+        ...rest,
+      },
+      children,
+    );
   },
 );

package/esm/core/InformationPanel/InformationPanelHeader.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 { IconButton } from '../Buttons/IconButton.js';
@@ -6,32 +5,40 @@ import { SvgCloseSmall, Box } from '../../utils/index.js';
 export const InformationPanelHeader = React.forwardRef(
   (props, forwardedRef) => {
     const { children, onClose, actions, className, ...rest } = props;
-    return _jsxs(Box, {
-      className: cx('iui-information-header', className),
-      ref: forwardedRef,
-      ...rest,
-      children: [
-        _jsx(Box, {
+    return React.createElement(
+      Box,
+      {
+        className: cx('iui-information-header', className),
+        ref: forwardedRef,
+        ...rest,
+      },
+      React.createElement(
+        Box,
+        {
           as: 'span',
           className: 'iui-information-header-label',
-          children: children,
-        }),
-        _jsxs(Box, {
+        },
+        children,
+      ),
+      React.createElement(
+        Box,
+        {
           className: 'iui-information-header-actions',
-          children: [
-            actions,
-            onClose &&
-              _jsx(IconButton, {
-                styleType: 'borderless',
-                onClick: onClose,
-                'aria-label': 'Close',
-                children: _jsx(SvgCloseSmall, {
-                  'aria-hidden': true,
-                }),
-              }),
-          ],
-        }),
-      ],
-    });
+        },
+        actions,
+        onClose &&
+          React.createElement(
+            IconButton,
+            {
+              styleType: 'borderless',
+              onClick: onClose,
+              'aria-label': 'Close',
+            },
+            React.createElement(SvgCloseSmall, {
+              'aria-hidden': true,
+            }),
+          ),
+      ),
+    );
   },
 );

package/esm/core/Input/Input.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../../utils/index.js';
@@ -6,7 +5,7 @@ export const Input = React.forwardRef((props, ref) => {
   const { size, htmlSize, status, className, ...rest } = props;
   const inputRef = React.useRef(null);
   const refs = useMergedRefs(inputRef, ref);
-  return _jsx(Box, {
+  return React.createElement(Box, {
     as: 'input',
     className: cx('iui-input', 'iui-field', className),
     'data-iui-size': size,

package/esm/core/InputGrid/InputGrid.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import {
   Box,
@@ -22,13 +21,16 @@ export const InputGrid = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const children = useChildrenWithIds(childrenProp);
-  return _jsx(Box, {
-    className: cx('iui-input-grid', className),
-    'data-iui-label-placement': labelPlacement,
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-grid', className),
+      'data-iui-label-placement': labelPlacement,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 const useChildrenWithIds = (children) => {
   const { labelId, inputId, messageId } = useSetup(children);