@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Breadcrumbs/Breadcrumbs.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 {
@@ -26,78 +21,84 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => {
   } = props;
   const [overflowRef, visibleCount] = useOverflow(items);
   const refs = useMergedRefs(overflowRef, ref);
-  return _jsx(Box, {
-    as: 'nav',
-    className: cx('iui-breadcrumbs', className),
-    ref: refs,
-    'aria-label': 'Breadcrumb',
-    ...rest,
-    children: _jsxs(Box, {
-      as: 'ol',
-      className: 'iui-breadcrumbs-list',
-      children: [
-        visibleCount > 1 &&
-          _jsxs(_Fragment, {
-            children: [
-              _jsx(ListItem, {
-                item: items[0],
-                isActive: currentIndex === 0,
-              }),
-              _jsx(Separator, {
-                separator: separator,
-              }),
-            ],
+  return React.createElement(
+    Box,
+    {
+      as: 'nav',
+      className: cx('iui-breadcrumbs', className),
+      ref: refs,
+      'aria-label': 'Breadcrumb',
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'ol',
+        className: 'iui-breadcrumbs-list',
+      },
+      visibleCount > 1 &&
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(ListItem, {
+            item: items[0],
+            isActive: currentIndex === 0,
           }),
-        items.length - visibleCount > 0 &&
-          _jsxs(_Fragment, {
-            children: [
-              _jsx(Box, {
-                as: 'li',
-                className: 'iui-breadcrumbs-item',
-                children: overflowButton
-                  ? overflowButton(visibleCount)
-                  : _jsx(Box, {
-                      as: 'span',
-                      className: 'iui-breadcrumbs-content',
-                      children: '…',
-                    }),
-              }),
-              _jsx(Separator, {
-                separator: separator,
-              }),
-            ],
+          React.createElement(Separator, {
+            separator: separator,
           }),
-        items
-          .slice(
-            visibleCount > 1
-              ? items.length - visibleCount + 1
-              : items.length - 1,
-          )
-          .map((_, _index) => {
-            const index =
-              visibleCount > 1
-                ? 1 + (items.length - visibleCount) + _index
-                : items.length - 1;
-            return _jsxs(
-              React.Fragment,
-              {
-                children: [
-                  _jsx(ListItem, {
-                    item: items[index],
-                    isActive: currentIndex === index,
-                  }),
-                  index < items.length - 1 &&
-                    _jsx(Separator, {
-                      separator: separator,
-                    }),
-                ],
-              },
-              index,
-            );
+        ),
+      items.length - visibleCount > 0 &&
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(
+            Box,
+            {
+              as: 'li',
+              className: 'iui-breadcrumbs-item',
+            },
+            overflowButton
+              ? overflowButton(visibleCount)
+              : React.createElement(
+                  Box,
+                  {
+                    as: 'span',
+                    className: 'iui-breadcrumbs-content',
+                  },
+                  '…',
+                ),
+          ),
+          React.createElement(Separator, {
+            separator: separator,
           }),
-      ],
-    }),
-  });
+        ),
+      items
+        .slice(
+          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+        )
+        .map((_, _index) => {
+          const index =
+            visibleCount > 1
+              ? 1 + (items.length - visibleCount) + _index
+              : items.length - 1;
+          return React.createElement(
+            React.Fragment,
+            {
+              key: index,
+            },
+            React.createElement(ListItem, {
+              item: items[index],
+              isActive: currentIndex === index,
+            }),
+            index < items.length - 1 &&
+              React.createElement(Separator, {
+                separator: separator,
+              }),
+          );
+        }),
+    ),
+  );
 });
 const ListItem = ({ item, isActive }) => {
   let children = item;
@@ -109,28 +110,31 @@ const ListItem = ({ item, isActive }) => {
     logWarningInDev(
       'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
     );
-    children = _jsx(BreadcrumbsItem, {
-      ...children.props,
-    });
+    children = React.createElement(BreadcrumbsItem, children.props);
   }
-  return _jsx(Box, {
-    as: 'li',
-    className: 'iui-breadcrumbs-item',
-    children:
-      children &&
+  return React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: 'iui-breadcrumbs-item',
+    },
+    children &&
       React.cloneElement(children, {
         'aria-current':
           children.props['aria-current'] ?? isActive ? 'location' : undefined,
       }),
-  });
+  );
 };
 const Separator = ({ separator }) =>
-  _jsx(Box, {
-    as: 'li',
-    className: 'iui-breadcrumbs-separator',
-    'aria-hidden': true,
-    children: separator ?? _jsx(SvgChevronRight, {}),
-  });
+  React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: 'iui-breadcrumbs-separator',
+      'aria-hidden': true,
+    },
+    separator ?? React.createElement(SvgChevronRight, null),
+  );
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   const { as: asProp, ...rest } = props;
   const commonProps = {
@@ -142,12 +146,12 @@ const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
     String(asProp) === 'span' ||
     (props.href == null && props.onClick == null && asProp == null)
   ) {
-    return _jsx(Box, {
+    return React.createElement(Box, {
       as: 'span',
       ...commonProps,
     });
   }
-  return _jsx(Button, {
+  return React.createElement(Button, {
     as: asProp === 'a' || (asProp == null && !!props.href) ? Anchor : asProp,
     styleType: 'borderless',
     ...commonProps,

package/esm/core/ButtonGroup/ButtonGroup.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 { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
@@ -27,52 +22,60 @@ export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
     }
     return React.Children.map(childrenProp, (child, index) =>
       React.isValidElement(child)
-        ? _jsx(
-            CompositeItem,
-            {
-              render: child,
-            },
-            index,
-          )
+        ? React.createElement(CompositeItem, {
+            key: index,
+            render: child,
+          })
         : child,
     );
   }, [childrenProp, props.role]);
   const node = overflowButton
-    ? _jsx(OverflowGroup, {
-        orientation: orientation,
-        overflowButton: overflowButton,
-        overflowPlacement: overflowPlacement,
-        ref: forwardedRef,
-        ...rest,
-        children: children,
-      })
-    : _jsx(BaseGroup, {
-        orientation: orientation,
-        ref: forwardedRef,
-        ...rest,
-        children: children,
-      });
-  return _jsx(FloatingDelayGroup, {
-    delay: {
-      open: 50,
-      close: 250,
+    ? React.createElement(
+        OverflowGroup,
+        {
+          orientation: orientation,
+          overflowButton: overflowButton,
+          overflowPlacement: overflowPlacement,
+          ref: forwardedRef,
+          ...rest,
+        },
+        children,
+      )
+    : React.createElement(
+        BaseGroup,
+        {
+          orientation: orientation,
+          ref: forwardedRef,
+          ...rest,
+        },
+        children,
+      );
+  return React.createElement(
+    FloatingDelayGroup,
+    {
+      delay: {
+        open: 50,
+        close: 250,
+      },
     },
-    children: _jsx(ButtonGroupContext.Provider, {
-      value: orientation,
-      children:
-        props.role === 'toolbar'
-          ? _jsx(Composite, {
-              orientation: orientation,
-              render: node,
-              disabledIndices: [],
-            })
-          : node,
-    }),
-  });
+    React.createElement(
+      ButtonGroupContext.Provider,
+      {
+        value: orientation,
+      },
+      props.role === 'toolbar'
+        ? React.createElement(Composite, {
+            orientation: orientation,
+            render: node,
+            disabledIndices: [],
+          })
+        : node,
+    ),
+  );
 });
 const BaseGroup = React.forwardRef((props, forwardedRef) => {
   const { orientation, className, ...rest } = props;
-  return _jsx(Box, {
+  return React.createElement(Box, {
     className: cx('iui-button-group', className),
     'data-iui-orientation':
       orientation === 'vertical' ? orientation : undefined,
@@ -97,18 +100,21 @@ const OverflowGroup = React.forwardRef((props, forwardedRef) => {
     !overflowButton,
     orientation,
   );
-  return _jsx(BaseGroup, {
-    orientation: orientation,
-    ...rest,
-    className: cx(
-      {
-        'iui-button-group-overflow-x':
-          !!overflowButton && orientation === 'horizontal',
-      },
-      props.className,
-    ),
-    ref: useMergedRefs(forwardedRef, overflowRef),
-    children: (() => {
+  return React.createElement(
+    BaseGroup,
+    {
+      orientation: orientation,
+      ...rest,
+      className: cx(
+        {
+          'iui-button-group-overflow-x':
+            !!overflowButton && orientation === 'horizontal',
+        },
+        props.className,
+      ),
+      ref: useMergedRefs(forwardedRef, overflowRef),
+    },
+    (() => {
       if (!(visibleCount < items.length)) {
         return items;
       }
@@ -116,19 +122,19 @@ const OverflowGroup = React.forwardRef((props, forwardedRef) => {
         overflowPlacement === 'start'
           ? items.length - visibleCount
           : visibleCount - 1;
-      return _jsxs(_Fragment, {
-        children: [
-          overflowButton &&
-            overflowPlacement === 'start' &&
-            overflowButton(overflowStart),
-          overflowPlacement === 'start'
-            ? items.slice(overflowStart + 1)
-            : items.slice(0, Math.max(0, overflowStart)),
-          overflowButton &&
-            overflowPlacement === 'end' &&
-            overflowButton(overflowStart),
-        ],
-      });
+      return React.createElement(
+        React.Fragment,
+        null,
+        overflowButton &&
+          overflowPlacement === 'start' &&
+          overflowButton(overflowStart),
+        overflowPlacement === 'start'
+          ? items.slice(overflowStart + 1)
+          : items.slice(0, Math.max(0, overflowStart)),
+        overflowButton &&
+          overflowPlacement === 'end' &&
+          overflowButton(overflowStart),
+      );
     })(),
-  });
+  );
 });

package/esm/core/Buttons/Button.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, ButtonBase } from '../../utils/index.js';
@@ -21,49 +20,59 @@ export const Button = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const hasPopoverOpen = React.useContext(PopoverOpenContext);
-  return _jsxs(ButtonBase, {
-    ref: ref,
-    className: cx('iui-button', 'iui-field', className),
-    'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-    'data-iui-size': size,
-    'data-iui-loading': loading ? 'true' : undefined,
-    'data-iui-has-popover': hasPopoverOpen ? 'open' : undefined,
-    disabled: disabledProp || loading,
-    ...rest,
-    style: {
-      '--_iui-width': stretched ? '100%' : undefined,
-      ...props.style,
+  return React.createElement(
+    ButtonBase,
+    {
+      ref: ref,
+      className: cx('iui-button', 'iui-field', className),
+      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-size': size,
+      'data-iui-loading': loading ? 'true' : undefined,
+      'data-iui-has-popover': hasPopoverOpen ? 'open' : undefined,
+      disabled: disabledProp || loading,
+      ...rest,
+      style: {
+        '--_iui-width': stretched ? '100%' : undefined,
+        ...props.style,
+      },
     },
-    children: [
-      startIcon &&
-        _jsx(Box, {
+    startIcon &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           'aria-hidden': true,
           ...startIconProps,
           className: cx('iui-button-icon', startIconProps?.className),
-          children: startIcon,
-        }),
-      children &&
-        _jsx(Box, {
+        },
+        startIcon,
+      ),
+    children &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           ...labelProps,
           className: cx('iui-button-label', labelProps?.className),
-          children: children,
-        }),
-      endIcon &&
-        _jsx(Box, {
+        },
+        children,
+      ),
+    endIcon &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           'aria-hidden': true,
           ...endIconProps,
           className: cx('iui-button-icon', endIconProps?.className),
-          children: endIcon,
-        }),
-      loading &&
-        _jsx(ProgressRadial, {
-          size: size === 'small' ? 'x-small' : 'small',
-          className: 'iui-button-spinner',
-          'aria-hidden': true,
-        }),
-    ],
-  });
+        },
+        endIcon,
+      ),
+    loading &&
+      React.createElement(ProgressRadial, {
+        size: size === 'small' ? 'x-small' : 'small',
+        className: 'iui-button-spinner',
+        'aria-hidden': true,
+      }),
+  );
 });

package/esm/core/Buttons/DropdownButton.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Button } from './Button.js';
@@ -15,29 +14,35 @@ export const DropdownButton = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  return _jsx(DropdownMenu, {
-    menuItems: menuItems,
-    matchWidth: true,
-    visible: isMenuOpen,
-    ...dropdownMenuProps,
-    onVisibleChange: (open) => {
-      setIsMenuOpen(open);
-      dropdownMenuProps?.onVisibleChange?.(open);
+  return React.createElement(
+    DropdownMenu,
+    {
+      menuItems: menuItems,
+      matchWidth: true,
+      visible: isMenuOpen,
+      ...dropdownMenuProps,
+      onVisibleChange: (open) => {
+        setIsMenuOpen(open);
+        dropdownMenuProps?.onVisibleChange?.(open);
+      },
     },
-    children: _jsx(Button, {
-      className: cx('iui-button-dropdown', className),
-      size: size,
-      styleType: styleType,
-      endIcon: isMenuOpen
-        ? _jsx(SvgCaretUpSmall, {
-            'aria-hidden': true,
-          })
-        : _jsx(SvgCaretDownSmall, {
-            'aria-hidden': true,
-          }),
-      ref: forwardedRef,
-      ...rest,
-      children: children,
-    }),
-  });
+    React.createElement(
+      Button,
+      {
+        className: cx('iui-button-dropdown', className),
+        size: size,
+        styleType: styleType,
+        endIcon: isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, {
+              'aria-hidden': true,
+            })
+          : React.createElement(SvgCaretDownSmall, {
+              'aria-hidden': true,
+            }),
+        ref: forwardedRef,
+        ...rest,
+      },
+      children,
+    ),
+  );
 });

package/esm/core/Buttons/IconButton.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, ButtonBase } from '../../utils/index.js';
@@ -20,37 +19,40 @@ export const IconButton = React.forwardRef((props, ref) => {
   } = props;
   const buttonGroupOrientation = React.useContext(ButtonGroupContext);
   const hasPopoverOpen = React.useContext(PopoverOpenContext);
-  const button = _jsxs(ButtonBase, {
-    ref: ref,
-    className: cx('iui-button', 'iui-field', className),
-    'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-    'data-iui-size': size,
-    'data-iui-active': isActive,
-    'data-iui-has-popover': hasPopoverOpen ? 'open' : undefined,
-    'aria-pressed': isActive,
-    ...rest,
-    children: [
-      _jsx(Box, {
+  const button = React.createElement(
+    ButtonBase,
+    {
+      ref: ref,
+      className: cx('iui-button', 'iui-field', className),
+      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-size': size,
+      'data-iui-active': isActive,
+      'data-iui-has-popover': hasPopoverOpen ? 'open' : undefined,
+      'aria-pressed': isActive,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
         as: 'span',
         'aria-hidden': true,
         ...iconProps,
         className: cx('iui-button-icon', iconProps?.className),
-        children: children,
-      }),
-      label
-        ? _jsx(VisuallyHidden, {
-            children: label,
-          })
-        : null,
-    ],
-  });
+      },
+      children,
+    ),
+    label ? React.createElement(VisuallyHidden, null, label) : null,
+  );
   return label
-    ? _jsx(Tooltip, {
-        placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top',
-        ...labelProps,
-        content: label,
-        ariaStrategy: 'none',
-        children: button,
-      })
+    ? React.createElement(
+        Tooltip,
+        {
+          placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top',
+          ...labelProps,
+          content: label,
+          ariaStrategy: 'none',
+        },
+        button,
+      )
     : button;
 });

package/esm/core/Buttons/IdeasButton.js

@@ -1,19 +1,21 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgSmileyHappy } from '../../utils/index.js';
 import { Button } from './Button.js';
 export const IdeasButton = React.forwardRef((props, ref) => {
   const { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
-  return _jsx(Button, {
-    ref: ref,
-    className: cx('iui-button-idea', className),
-    'data-iui-variant': 'high-visibility',
-    onClick: onClick,
-    startIcon: _jsx(SvgSmileyHappy, {
-      'aria-hidden': true,
-    }),
-    ...rest,
-    children: feedbackLabel,
-  });
+  return React.createElement(
+    Button,
+    {
+      ref: ref,
+      className: cx('iui-button-idea', className),
+      'data-iui-variant': 'high-visibility',
+      onClick: onClick,
+      startIcon: React.createElement(SvgSmileyHappy, {
+        'aria-hidden': true,
+      }),
+      ...rest,
+    },
+    feedbackLabel,
+  );
 });