@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Tag/TagContainer.js

@@ -1,20 +1,22 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 export const TagContainer = React.forwardRef((props, forwardedRef) => {
   const { className, children, overflow, background = 'none', ...rest } = props;
-  return _jsx(Box, {
-    className: cx(
-      'iui-tag-container',
-      {
-        [`iui-${overflow}`]: !!overflow,
-        'iui-visible': background !== 'none',
-      },
-      className,
-    ),
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-tag-container',
+        {
+          [`iui-${overflow}`]: !!overflow,
+          'iui-visible': background !== 'none',
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/Textarea/Textarea.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
 export const Textarea = React.forwardRef((props, forwardedRef) => {
-  return _jsx(Input, {
+  return React.createElement(Input, {
     as: 'textarea',
     rows: 3,
     ref: forwardedRef,

package/esm/core/ThemeProvider/ThemeProvider.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 * as ReactDOM from 'react-dom';
 import cx from 'classnames';
@@ -52,36 +47,44 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     }),
     [theme, JSON.stringify(themeOptions)],
   );
-  return _jsx(ScopeProvider, {
-    children: _jsx(HydrationProvider, {
-      children: _jsx(ThemeContext.Provider, {
-        value: contextValue,
-        children: _jsxs(ToastProvider, {
-          children: [
-            includeCss && rootElement
-              ? _jsx(FallbackStyles, {
-                  root: rootElement,
-                })
-              : null,
-            _jsxs(Root, {
+  return React.createElement(
+    ScopeProvider,
+    null,
+    React.createElement(
+      HydrationProvider,
+      null,
+      React.createElement(
+        ThemeContext.Provider,
+        {
+          value: contextValue,
+        },
+        React.createElement(
+          ToastProvider,
+          null,
+          includeCss && rootElement
+            ? React.createElement(FallbackStyles, {
+                root: rootElement,
+              })
+            : null,
+          React.createElement(
+            Root,
+            {
               theme: theme,
               themeOptions: themeOptions,
               ref: useMergedRefs(forwardedRef, setRootElement),
               ...rest,
-              children: [
-                children,
-                _jsx(PortalContainer, {
-                  portalContainerProp: portalContainerProp,
-                  portalContainerFromParent: portalContainerFromParent,
-                  isInheritingTheme: themeProp === 'inherit',
-                }),
-              ],
+            },
+            children,
+            React.createElement(PortalContainer, {
+              portalContainerProp: portalContainerProp,
+              portalContainerFromParent: portalContainerFromParent,
+              isInheritingTheme: themeProp === 'inherit',
             }),
-          ],
-        }),
-      }),
-    }),
-  });
+          ),
+        ),
+      ),
+    ),
+  );
 });
 ThemeProvider.displayName = 'ThemeProvider';
 const Root = React.forwardRef((props, forwardedRef) => {
@@ -100,20 +103,23 @@ const Root = React.forwardRef((props, forwardedRef) => {
     },
     [ownerDocument, setOwnerDocument],
   );
-  return _jsx(Box, {
-    className: cx(
-      'iui-root',
-      {
-        'iui-root-background': shouldApplyBackground,
-      },
-      className,
-    ),
-    'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
-    'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-    ref: useMergedRefs(forwardedRef, findOwnerDocumentFromRef),
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-root',
+        {
+          'iui-root-background': shouldApplyBackground,
+        },
+        className,
+      ),
+      'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
+      'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
+      ref: useMergedRefs(forwardedRef, findOwnerDocumentFromRef),
+      ...rest,
+    },
+    children,
+  );
 });
 const useParentThemeAndContext = (rootElement) => {
   const parentContext = React.useContext(ThemeContext);
@@ -165,7 +171,7 @@ const PortalContainer = React.memo(
       return null;
     }
     if (portalContainerProp) {
-      return _jsx(PortaledToaster, {
+      return React.createElement(PortaledToaster, {
         target: portalContainerProp,
       });
     }
@@ -175,16 +181,19 @@ const PortalContainer = React.memo(
       (!!ownerDocument &&
         portalContainerFromParent.ownerDocument !== ownerDocument)
     ) {
-      return _jsx('div', {
-        style: {
-          display: 'contents',
+      return React.createElement(
+        'div',
+        {
+          style: {
+            display: 'contents',
+          },
+          ref: setPortalContainer,
+          id: id,
         },
-        ref: setPortalContainer,
-        id: id,
-        children: _jsx(Toaster, {}),
-      });
+        React.createElement(Toaster, null),
+      );
     }
-    return _jsx(PortaledToaster, {
+    return React.createElement(PortaledToaster, {
       target: portalContainerFromParent,
     });
   },
@@ -197,7 +206,9 @@ const PortaledToaster = ({ target }) => {
       setPortalContainer(target);
     }
   });
-  return target ? ReactDOM.createPortal(_jsx(Toaster, {}), target) : null;
+  return target
+    ? ReactDOM.createPortal(React.createElement(Toaster, null), target)
+    : null;
 };
 const FallbackStyles = ({ root }) => {
   useLayoutEffect(() => {
@@ -222,5 +233,5 @@ const FallbackStyles = ({ root }) => {
       }
     })();
   }, [root]);
-  return _jsx(_Fragment, {});
+  return React.createElement(React.Fragment, null);
 };

package/esm/core/Tile/Tile.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 {
@@ -30,18 +29,21 @@ const TileWrapper = React.forwardRef((props, forwardedRef) => {
   } = props;
   const [localActionable, setLocalActionable] = React.useState(false);
   const isActionable = localActionable;
-  return _jsx(TileContext.Provider, {
-    value: {
-      status,
-      variant,
-      isNew,
-      isSelected,
-      isLoading,
-      isActionable,
-      isDisabled,
-      setActionable: setLocalActionable,
+  return React.createElement(
+    TileContext.Provider,
+    {
+      value: {
+        status,
+        variant,
+        isNew,
+        isSelected,
+        isLoading,
+        isActionable,
+        isDisabled,
+        setActionable: setLocalActionable,
+      },
     },
-    children: _jsx(Box, {
+    React.createElement(Box, {
       className: cx(
         'iui-tile',
         {
@@ -58,7 +60,7 @@ const TileWrapper = React.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       ...rest,
     }),
-  });
+  );
 });
 TileWrapper.displayName = 'Tile.Wrapper';
 const TileAction = React.forwardRef((props, forwardedRef) => {
@@ -69,15 +71,18 @@ const TileAction = React.forwardRef((props, forwardedRef) => {
       setActionable(true);
     }
   }, [setActionable]);
-  return _jsx(LinkAction, {
-    as: !!props.href ? 'a' : 'button',
-    href: href,
-    onClick: !isDisabled ? onClick : undefined,
-    'aria-disabled': isDisabled,
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    LinkAction,
+    {
+      as: !!props.href ? 'a' : 'button',
+      href: href,
+      onClick: !isDisabled ? onClick : undefined,
+      'aria-disabled': isDisabled,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileAction.displayName = 'Tile.Action';
 const TileThumbnailArea = polymorphic('iui-tile-thumbnail');
@@ -85,7 +90,7 @@ TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
 const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
   const { className, url, children, ...rest } = props;
   if (url) {
-    return _jsx(Box, {
+    return React.createElement(Box, {
       className: cx('iui-tile-thumbnail-picture', className),
       style: {
         backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
@@ -94,12 +99,15 @@ const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
       ...rest,
     });
   }
-  return _jsx(Box, {
-    className: cx('iui-thumbnail-icon', className),
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-thumbnail-icon', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
 const TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action');
@@ -108,26 +116,32 @@ const TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator');
 TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 const TileIconButton = React.forwardRef((props, forwardedRef) => {
   const { className, children, ...rest } = props;
-  return _jsx(IconButton, {
-    className: cx('iui-tile-thumbnail-button', className),
-    styleType: 'borderless',
-    size: 'small',
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    IconButton,
+    {
+      className: cx('iui-tile-thumbnail-button', className),
+      styleType: 'borderless',
+      size: 'small',
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileIconButton.displayName = 'Tile.IconButton';
 const TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container');
 TileBadgeContainer.displayName = 'Tile.BadgeContainer';
 const TileName = React.forwardRef((props, forwardedRef) => {
   const { className, children, name, ...rest } = props;
-  return _jsx(Box, {
-    className: cx('iui-tile-name', className),
-    ref: forwardedRef,
-    ...rest,
-    children: children ?? name,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-tile-name', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ?? name,
+  );
 });
 TileBadgeContainer.displayName = 'Tile.Name';
 const TileNameIcon = React.forwardRef((props, forwardedRef) => {
@@ -136,34 +150,37 @@ const TileNameIcon = React.forwardRef((props, forwardedRef) => {
   const StatusIcon = !!status && StatusIconMap[status];
   let icon;
   if (StatusIcon) {
-    icon = _jsx(StatusIcon, {
+    icon = React.createElement(StatusIcon, {
       'aria-hidden': true,
     });
   }
   if (isLoading) {
-    icon = _jsx(ProgressRadial, {
+    icon = React.createElement(ProgressRadial, {
       size: 'x-small',
       'aria-hidden': true,
       indeterminate: true,
     });
   }
   if (isSelected) {
-    icon = _jsx(SvgCheckmark, {
+    icon = React.createElement(SvgCheckmark, {
       'aria-hidden': true,
     });
   }
   if (isNew) {
-    icon = _jsx(SvgNew, {
+    icon = React.createElement(SvgNew, {
       'aria-hidden': true,
     });
   }
   return children || icon
-    ? _jsx(Box, {
-        className: cx('iui-tile-status-icon', className),
-        ref: forwardedRef,
-        ...rest,
-        children: children ?? icon,
-      })
+    ? React.createElement(
+        Box,
+        {
+          className: cx('iui-tile-status-icon', className),
+          ref: forwardedRef,
+          ...rest,
+        },
+        children ?? icon,
+      )
     : null;
 });
 TileNameIcon.displayName = 'Tile.NameIcon';
@@ -178,36 +195,45 @@ TileMetadata.displayName = 'Tile.Metadata';
 const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
   const { className, children = [], buttonProps, ...rest } = props;
   const [isMenuVisible, setIsMenuVisible] = React.useState(false);
-  return _jsx(Box, {
-    className: cx(
-      'iui-tile-more-options',
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      DropdownMenu,
       {
-        'iui-visible': isMenuVisible,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close) =>
+          children?.map((option) =>
+            React.cloneElement(option, {
+              onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+              },
+            }),
+          ),
       },
-      className,
+      React.createElement(
+        IconButton,
+        {
+          styleType: 'borderless',
+          size: 'small',
+          'aria-label': 'More options',
+          ...buttonProps,
+        },
+        React.createElement(SvgMore, null),
+      ),
     ),
-    ref: forwardedRef,
-    ...rest,
-    children: _jsx(DropdownMenu, {
-      onVisibleChange: setIsMenuVisible,
-      menuItems: (close) =>
-        children?.map((option) =>
-          React.cloneElement(option, {
-            onClick: (value) => {
-              close();
-              option.props.onClick?.(value);
-            },
-          }),
-        ),
-      children: _jsx(IconButton, {
-        styleType: 'borderless',
-        size: 'small',
-        'aria-label': 'More options',
-        ...buttonProps,
-        children: _jsx(SvgMore, {}),
-      }),
-    }),
-  });
+  );
 });
 TileMoreOptions.displayName = 'Tile.MoreOptions';
 const TileButtons = polymorphic('iui-tile-buttons');
@@ -233,77 +259,60 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
     onClick,
     ...rest
   } = props;
-  return _jsxs(TileWrapper, {
-    ref: forwardedRef,
-    isNew: isNew,
-    isSelected: isSelected,
-    isLoading: isLoading,
-    status: status,
-    isDisabled: isDisabled,
-    ...rest,
-    children: [
-      _jsxs(TileName, {
-        children: [
-          (status || isNew || isLoading || isSelected) &&
-            _jsx(TileNameIcon, {}),
-          _jsx(TileNameLabel, {
-            children: isActionable
-              ? _jsx(TileAction, {
-                  onClick: !isDisabled ? onClick : undefined,
-                  'aria-disabled': isDisabled,
-                  children: name,
-                })
-              : name,
-          }),
-        ],
-      }),
-      thumbnail &&
-        _jsxs(TileThumbnailArea, {
-          children: [
-            typeof thumbnail !== 'string'
-              ? _jsx(TileThumbnailPicture, {
-                  children: thumbnail,
-                })
-              : _jsx(TileThumbnailPicture, {
-                  url: thumbnail,
-                }),
-            badge &&
-              _jsx(TileBadgeContainer, {
-                children: badge,
-              }),
-            leftIcon &&
-              _jsx(TileTypeIndicator, {
-                children: leftIcon,
-              }),
-            rightIcon &&
-              _jsx(TileQuickAction, {
-                children: rightIcon,
-              }),
-          ],
-        }),
-      _jsxs(TileContentArea, {
-        children: [
-          description &&
-            _jsx(TileDescription, {
-              children: description,
-            }),
-          moreOptions &&
-            _jsx(TileMoreOptions, {
-              children: moreOptions,
-            }),
-          metadata &&
-            _jsx(TileMetadata, {
-              children: metadata,
+  return React.createElement(
+    TileWrapper,
+    {
+      ref: forwardedRef,
+      isNew: isNew,
+      isSelected: isSelected,
+      isLoading: isLoading,
+      status: status,
+      isDisabled: isDisabled,
+      ...rest,
+    },
+    React.createElement(
+      TileName,
+      null,
+      (status || isNew || isLoading || isSelected) &&
+        React.createElement(TileNameIcon, null),
+      React.createElement(
+        TileNameLabel,
+        null,
+        isActionable
+          ? React.createElement(
+              TileAction,
+              {
+                onClick: !isDisabled ? onClick : undefined,
+                'aria-disabled': isDisabled,
+              },
+              name,
+            )
+          : name,
+      ),
+    ),
+    thumbnail &&
+      React.createElement(
+        TileThumbnailArea,
+        null,
+        typeof thumbnail !== 'string'
+          ? React.createElement(TileThumbnailPicture, null, thumbnail)
+          : React.createElement(TileThumbnailPicture, {
+              url: thumbnail,
             }),
-          children,
-        ],
-      }),
-      buttons &&
-        _jsx(TileButtons, {
-          children: buttons,
-        }),
-    ],
-  });
+        badge && React.createElement(TileBadgeContainer, null, badge),
+        leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
+        rightIcon && React.createElement(TileQuickAction, null, rightIcon),
+      ),
+    React.createElement(
+      TileContentArea,
+      null,
+      description && React.createElement(TileDescription, null, description),
+      moreOptions && React.createElement(TileMoreOptions, null, moreOptions),
+      metadata && React.createElement(TileMetadata, null, metadata),
+      children,
+    ),
+    buttons && React.createElement(TileButtons, null, buttons),
+  );
 });
 TileComponent.displayName = 'Tile';
 export const Tile = Object.assign(TileComponent, {