@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Dialog/DialogMain.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 {
@@ -105,87 +104,89 @@ export const DialogMain = React.forwardRef((props, ref) => {
       ...newStyle,
     }));
   }, []);
-  const content = _jsxs(Box, {
-    className: cx(
-      'iui-dialog',
-      {
-        'iui-dialog-default': styleType === 'default',
-        'iui-dialog-full-page': styleType === 'fullPage',
-        'iui-dialog-visible': isOpen,
-        'iui-dialog-draggable': isDraggable,
+  const content = React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-dialog',
+        {
+          'iui-dialog-default': styleType === 'default',
+          'iui-dialog-full-page': styleType === 'fullPage',
+          'iui-dialog-visible': isOpen,
+          'iui-dialog-draggable': isDraggable,
+        },
+        className,
+      ),
+      role: 'dialog',
+      ref: useMergedRefs(dialogRef, ref),
+      onKeyDown: handleKeyDown,
+      tabIndex: -1,
+      'data-iui-placement': placement,
+      style: {
+        transform,
+        ...style,
+        ...propStyle,
       },
-      className,
-    ),
-    role: 'dialog',
-    ref: useMergedRefs(dialogRef, ref),
-    onKeyDown: handleKeyDown,
-    tabIndex: -1,
-    'data-iui-placement': placement,
-    style: {
-      transform,
-      ...style,
-      ...propStyle,
-    },
-    ...rest,
-    children: [
-      _jsxs(ShadowRoot, {
-        children: [
-          _jsx('slot', {}),
-          isResizable &&
-            _jsx(Resizer, {
-              elementRef: dialogRef,
-              containerRef: dialogContext.dialogRootRef,
-              onResizeStart: () => {
-                if (!hasBeenResized.current) {
-                  hasBeenResized.current = true;
-                  setResizeStyle({
-                    maxInlineSize: '100%',
-                  });
-                }
-              },
-              onResizeEnd: setResizeStyle,
-            }),
-        ],
-      }),
-      children,
-    ],
-  });
-  return _jsx(Transition, {
-    in: isOpen,
-    appear: true,
-    timeout: {
-      exit: 600,
-    },
-    onEntered: () => {
-      previousFocusedElement.current =
-        dialogRef.current?.ownerDocument.activeElement;
-      setFocus &&
-        dialogRef.current?.focus({
-          preventScroll: true,
-        });
+      ...rest,
     },
-    onExit: () => {
-      if (
-        dialogRef.current?.contains(
-          dialogRef.current?.ownerDocument.activeElement,
-        )
-      ) {
-        previousFocusedElement.current?.focus();
-      }
+    React.createElement(
+      ShadowRoot,
+      null,
+      React.createElement('slot', null),
+      isResizable &&
+        React.createElement(Resizer, {
+          elementRef: dialogRef,
+          containerRef: dialogContext.dialogRootRef,
+          onResizeStart: () => {
+            if (!hasBeenResized.current) {
+              hasBeenResized.current = true;
+              setResizeStyle({
+                maxInlineSize: '100%',
+              });
+            }
+          },
+          onResizeEnd: setResizeStyle,
+        }),
+    ),
+    children,
+  );
+  return React.createElement(
+    Transition,
+    {
+      in: isOpen,
+      appear: true,
+      timeout: {
+        exit: 600,
+      },
+      onEntered: () => {
+        previousFocusedElement.current =
+          dialogRef.current?.ownerDocument.activeElement;
+        setFocus &&
+          dialogRef.current?.focus({
+            preventScroll: true,
+          });
+      },
+      onExit: () => {
+        if (
+          dialogRef.current?.contains(
+            dialogRef.current?.ownerDocument.activeElement,
+          )
+        ) {
+          previousFocusedElement.current?.focus();
+        }
+      },
+      unmountOnExit: true,
+      nodeRef: dialogRef,
     },
-    unmountOnExit: true,
-    nodeRef: dialogRef,
-    children: _jsxs(DialogDragContext.Provider, {
-      value: {
-        onPointerDown: handlePointerDown,
+    React.createElement(
+      DialogDragContext.Provider,
+      {
+        value: {
+          onPointerDown: handlePointerDown,
+        },
       },
-      children: [
-        trapFocus &&
-          _jsx(FocusTrap, {
-            children: content,
-          }),
-        !trapFocus && content,
-      ],
-    }),
-  });
+      trapFocus && React.createElement(FocusTrap, null, content),
+      !trapFocus && content,
+    ),
+  );
 });

package/esm/core/Dialog/DialogTitleBar.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 { SvgClose, mergeEventHandlers, Box } from '../../utils/index.js';
@@ -24,32 +19,36 @@ export const DialogTitleBar = Object.assign(
       ...rest
     } = props;
     const { onPointerDown } = useDialogDragContext();
-    return _jsx(Box, {
-      className: cx('iui-dialog-title-bar', className, {
-        'iui-dialog-title-bar-filled': isDraggable,
-      }),
-      ref: ref,
-      onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown),
-      ...rest,
-      children: children
+    return React.createElement(
+      Box,
+      {
+        className: cx('iui-dialog-title-bar', className, {
+          'iui-dialog-title-bar-filled': isDraggable,
+        }),
+        ref: ref,
+        onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown),
+        ...rest,
+      },
+      children
         ? children
-        : _jsxs(_Fragment, {
-            children: [
-              _jsx(DialogTitleBarTitle, {
-                children: titleText,
-              }),
-              isDismissible &&
-                _jsx(IconButton, {
+        : React.createElement(
+            React.Fragment,
+            null,
+            React.createElement(DialogTitleBarTitle, null, titleText),
+            isDismissible &&
+              React.createElement(
+                IconButton,
+                {
                   size: 'small',
                   styleType: 'borderless',
                   onClick: onClose,
                   'aria-label': 'Close',
                   'data-iui-shift': 'right',
-                  children: _jsx(SvgClose, {}),
-                }),
-            ],
-          }),
-    });
+                },
+                React.createElement(SvgClose, null),
+              ),
+          ),
+    );
   }),
   {
     Title: DialogTitleBarTitle,

package/esm/core/Divider/Divider.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/components/Box.js';
 export const Divider = React.forwardRef((props, ref) => {
   const { className, orientation = 'horizontal', ...rest } = props;
-  return _jsx(Box, {
+  return React.createElement(Box, {
     as: 'hr',
     className: cx('iui-divider', className),
     'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { mergeEventHandlers, useControlledState } from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { FloatingTree } from '@floating-ui/react';
 export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
-  return _jsx(FloatingTree, {
-    children: _jsx(DropdownMenuContent, {
+  return React.createElement(
+    FloatingTree,
+    null,
+    React.createElement(DropdownMenuContent, {
       ref: forwardedRef,
       ...props,
     }),
-  });
+  );
 });
 const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
   const {
@@ -34,28 +35,33 @@ const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     }
     return menuItems;
   }, [menuItems, setVisible]);
-  return _jsx(_Fragment, {
-    children: _jsx(Menu, {
-      trigger: children,
-      onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-        if (e.defaultPrevented) {
-          return;
-        }
-        if (e.key === 'Tab') {
-          setVisible(false);
-        }
-      }),
-      role: role,
-      ref: forwardedRef,
-      portal: portal,
-      popoverProps: {
-        placement,
-        matchWidth,
-        visible,
-        onVisibleChange: setVisible,
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Menu,
+      {
+        trigger: children,
+        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+          if (e.defaultPrevented) {
+            return;
+          }
+          if (e.key === 'Tab') {
+            setVisible(false);
+          }
+        }),
+        role: role,
+        ref: forwardedRef,
+        portal: portal,
+        popoverProps: {
+          placement,
+          matchWidth,
+          visible,
+          onVisibleChange: setVisible,
+        },
+        ...rest,
       },
-      ...rest,
-      children: menuContent,
-    }),
-  });
+      menuContent,
+    ),
+  );
 });

package/esm/core/ExpandableBlock/ExpandableBlock.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 {
@@ -21,20 +16,19 @@ const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
   const { children, title, caption, endIcon, ...rest } = props;
-  return _jsxs(ExpandableBlock.Wrapper, {
-    ...rest,
-    ref: forwardedRef,
-    children: [
-      _jsx(ExpandableBlock.Trigger, {
-        label: title,
-        caption: caption,
-        endIcon: endIcon,
-      }),
-      _jsx(ExpandableBlock.Content, {
-        children: children,
-      }),
-    ],
-  });
+  return React.createElement(
+    ExpandableBlock.Wrapper,
+    {
+      ...rest,
+      ref: forwardedRef,
+    },
+    React.createElement(ExpandableBlock.Trigger, {
+      label: title,
+      caption: caption,
+      endIcon: endIcon,
+    }),
+    React.createElement(ExpandableBlock.Content, null, children),
+  );
 });
 ExpandableBlockComponent.displayName = 'ExpandableBlock';
 const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
@@ -53,79 +47,83 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
   const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
   const expanded = isExpanded ?? expandedState;
   const [descriptionId, setDescriptionId] = React.useState(undefined);
-  return _jsx(ExpandableBlockContext.Provider, {
-    value: {
-      status,
-      isExpanded: expanded,
-      onToggle,
-      size,
-      styleType,
-      disabled,
-      setExpanded,
-      children,
-      descriptionId,
-      setDescriptionId,
+  return React.createElement(
+    ExpandableBlockContext.Provider,
+    {
+      value: {
+        status,
+        isExpanded: expanded,
+        onToggle,
+        size,
+        styleType,
+        disabled,
+        setExpanded,
+        children,
+        descriptionId,
+        setDescriptionId,
+      },
     },
-    children: _jsx(Box, {
-      className: cx('iui-expandable-block', className),
-      'data-iui-expanded': expanded,
-      'data-iui-size': size,
-      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-      style: style,
-      ref: forwardedRef,
-      ...rest,
-      children: children,
-    }),
-  });
+    React.createElement(
+      Box,
+      {
+        className: cx('iui-expandable-block', className),
+        'data-iui-expanded': expanded,
+        'data-iui-size': size,
+        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+        style: style,
+        ref: forwardedRef,
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
 const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
   const { className, children, label, caption, expandIcon, endIcon, ...rest } =
     props;
   const { disabled, status } = useSafeContext(ExpandableBlockContext);
-  return _jsx(LinkBox, {
-    className: cx('iui-expandable-header', className),
-    'data-iui-disabled': disabled ? 'true' : undefined,
-    ref: forwardedRef,
-    ...rest,
-    children:
-      children ??
-      _jsxs(_Fragment, {
-        children: [
-          expandIcon ?? _jsx(ExpandableBlock.ExpandIcon, {}),
-          _jsxs(ExpandableBlock.LabelArea, {
-            children: [
-              _jsx(ExpandableBlock.Title, {
-                children: label,
-              }),
-              caption &&
-                _jsx(ExpandableBlock.Caption, {
-                  children: caption,
-                }),
-            ],
-          }),
-          endIcon || status
-            ? _jsx(ExpandableBlock.EndIcon, {
-                children: endIcon,
-              })
-            : null,
-        ],
-      }),
-  });
+  return React.createElement(
+    LinkBox,
+    {
+      className: cx('iui-expandable-header', className),
+      'data-iui-disabled': disabled ? 'true' : undefined,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
+        React.createElement(
+          ExpandableBlock.LabelArea,
+          null,
+          React.createElement(ExpandableBlock.Title, null, label),
+          caption &&
+            React.createElement(ExpandableBlock.Caption, null, caption),
+        ),
+        endIcon || status
+          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
+          : null,
+      ),
+  );
 });
 ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
   const { className, children, ...rest } = props;
-  return _jsx(Icon, {
-    className: cx('iui-expandable-block-icon', className),
-    ref: forwardedRef,
-    ...rest,
-    children:
-      children ??
-      _jsx(SvgChevronRight, {
+  return React.createElement(
+    Icon,
+    {
+      className: cx('iui-expandable-block-icon', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(SvgChevronRight, {
         'aria-hidden': true,
       }),
-  });
+  );
 });
 ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
 const ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
@@ -134,22 +132,25 @@ const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
   const { className, children, onClick: onClickProp, ...rest } = props;
   const { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
     useSafeContext(ExpandableBlockContext);
-  return _jsx(ButtonBase, {
-    className: cx('iui-expandable-block-title', 'iui-link-action', className),
-    'aria-expanded': isExpanded,
-    'aria-disabled': disabled,
-    onClick: mergeEventHandlers(onClickProp, () => {
-      if (disabled) {
-        return;
-      }
-      setExpanded(!isExpanded);
-      onToggle?.(!isExpanded);
-    }),
-    ref: forwardedRef,
-    'aria-describedby': descriptionId,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-expandable-block-title', 'iui-link-action', className),
+      'aria-expanded': isExpanded,
+      'aria-disabled': disabled,
+      onClick: mergeEventHandlers(onClickProp, () => {
+        if (disabled) {
+          return;
+        }
+        setExpanded(!isExpanded);
+        onToggle?.(!isExpanded);
+      }),
+      ref: forwardedRef,
+      'aria-describedby': descriptionId,
+      ...rest,
+    },
+    children,
+  );
 });
 ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
 const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
@@ -159,7 +160,7 @@ const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
     setDescriptionId(props.id || fallbackId);
     return () => setDescriptionId(undefined);
   }, [props.id, fallbackId, setDescriptionId]);
-  return _jsx(Box, {
+  return React.createElement(Box, {
     ref: forwardedRef,
     id: fallbackId,
     ...props,
@@ -171,25 +172,28 @@ const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
   const { children, ...rest } = props;
   const { status } = useSafeContext(ExpandableBlockContext);
   const icon = children ?? (status && StatusIconMap[status]());
-  return _jsx(Icon, {
-    fill: status,
-    ref: forwardedRef,
-    ...rest,
-    children: icon,
-  });
+  return React.createElement(
+    Icon,
+    {
+      fill: status,
+      ref: forwardedRef,
+      ...rest,
+    },
+    icon,
+  );
 });
 ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
 const ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
   const { className, children, innerProps, ...rest } = props;
-  return _jsx(Box, {
-    className: cx('iui-expandable-content', className),
-    ref: forwardedRef,
-    ...rest,
-    children: _jsx(Box, {
-      ...innerProps,
-      children: children,
-    }),
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-expandable-content', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(Box, innerProps, children),
+  );
 });
 ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {

package/esm/core/Fieldset/Fieldset.js

@@ -1,29 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import cx from 'classnames';
 export const Fieldset = React.forwardRef((props, ref) => {
   const { children, className, disabled, legend, ...rest } = props;
-  return _jsxs(Box, {
-    as: 'fieldset',
-    className: cx('iui-fieldset', className),
-    disabled: disabled,
-    ref: ref,
-    ...rest,
-    children: [
-      legend &&
-        _jsx('legend', {
-          children: legend,
-        }),
-      disabled
-        ? React.Children.map(children, (child) =>
-            React.isValidElement(child)
-              ? React.cloneElement(child, {
-                  disabled: true,
-                })
-              : child,
-          )
-        : children,
-    ],
-  });
+  return React.createElement(
+    Box,
+    {
+      as: 'fieldset',
+      className: cx('iui-fieldset', className),
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    },
+    legend && React.createElement('legend', null, legend),
+    disabled
+      ? React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child, {
+                disabled: true,
+              })
+            : child,
+        )
+      : children,
+  );
 });