@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/TransferList/TransferList.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import {
@@ -18,19 +17,25 @@ const TransferListListboxWrapper = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   const uid = useId();
   const [labelId, setLabelId] = React.useState(uid);
-  return _jsx(Box, {
-    as: 'div',
-    className: cx('iui-transfer-list-listbox-wrapper', className),
-    ref: ref,
-    ...rest,
-    children: _jsx(TransferListContext.Provider, {
-      value: {
-        labelId,
-        setLabelId,
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      className: cx('iui-transfer-list-listbox-wrapper', className),
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      TransferListContext.Provider,
+      {
+        value: {
+          labelId,
+          setLabelId,
+        },
       },
-      children: children,
-    }),
-  });
+      children,
+    ),
+  );
 });
 TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 const TransferListListbox = React.forwardRef((props, ref) => {
@@ -78,17 +83,20 @@ const TransferListListbox = React.forwardRef((props, ref) => {
         break;
     }
   };
-  return _jsx(List, {
-    className: cx('iui-transfer-list-listbox', className),
-    onKeyDown: onKeyDown,
-    role: 'listbox',
-    'aria-multiselectable': true,
-    'aria-labelledby': labelId,
-    tabIndex: 0,
-    ref: refs,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    List,
+    {
+      className: cx('iui-transfer-list-listbox', className),
+      onKeyDown: onKeyDown,
+      role: 'listbox',
+      'aria-multiselectable': true,
+      'aria-labelledby': labelId,
+      tabIndex: 0,
+      ref: refs,
+      ...rest,
+    },
+    children,
+  );
 });
 TransferListListbox.displayName = 'TransferList.Listbox';
 const TransferListItem = React.forwardRef((props, ref) => {
@@ -115,20 +123,23 @@ const TransferListItem = React.forwardRef((props, ref) => {
       event.preventDefault();
     }
   };
-  return _jsx(ListItem, {
-    ref: ref,
-    onClick: onClickEvents,
-    onKeyDown: onKeyDown,
-    active: active,
-    actionable: actionable,
-    tabIndex: -1,
-    role: 'option',
-    'aria-disabled': disabled ? 'true' : undefined,
-    'aria-selected': active ? 'true' : undefined,
-    disabled: disabled,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    ListItem,
+    {
+      ref: ref,
+      onClick: onClickEvents,
+      onKeyDown: onKeyDown,
+      active: active,
+      actionable: actionable,
+      tabIndex: -1,
+      role: 'option',
+      'aria-disabled': disabled ? 'true' : undefined,
+      'aria-selected': active ? 'true' : undefined,
+      disabled: disabled,
+      ...rest,
+    },
+    children,
+  );
 });
 TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = React.forwardRef((props, ref) => {
@@ -139,13 +150,16 @@ const TransferListListboxLabel = React.forwardRef((props, ref) => {
       setLabelId(id);
     }
   }, [id, labelId, setLabelId]);
-  return _jsx(Label, {
-    as: 'div',
-    id: labelId,
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Label,
+    {
+      as: 'div',
+      id: labelId,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {

package/esm/core/Tree/Tree.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
 export type NodeData<T> = {
     /**
@@ -132,4 +133,4 @@ export type TreeProps<T> = {
     ), [onNodeExpanded])}
   />
  */
-export declare const Tree: <T>(props: TreeProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tree: <T>(props: TreeProps<T>) => React.JSX.Element;

package/esm/core/Tree/Tree.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import {
   getFocusableElements,
@@ -93,9 +92,10 @@ export const Tree = (props) => {
   const itemRenderer = React.useCallback(
     (index) => {
       const node = flatNodesList[index];
-      return _jsx(
+      return React.createElement(
         TreeContext.Provider,
         {
+          key: node.nodeProps.nodeId,
           value: {
             nodeDepth: node.depth,
             subNodeIds: node.subNodeIds,
@@ -116,9 +116,8 @@ export const Tree = (props) => {
               : undefined,
             size,
           },
-          children: nodeRenderer(node.nodeProps),
         },
-        node.nodeProps.nodeId,
+        nodeRenderer(node.nodeProps),
       );
     },
     [firstLevelNodesList.length, flatNodesList, nodeRenderer, size],
@@ -149,9 +148,11 @@ export const Tree = (props) => {
       items[focusedIndex.current]?.focus();
     }
   };
-  return _jsx(_Fragment, {
-    children: enableVirtualization
-      ? _jsx(VirtualizedTree, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    enableVirtualization
+      ? React.createElement(VirtualizedTree, {
           flatNodesList: flatNodesList,
           itemRenderer: itemRenderer,
           scrollToIndex: scrollToIndex,
@@ -162,17 +163,20 @@ export const Tree = (props) => {
           style: style,
           ...rest,
         })
-      : _jsx(TreeElement, {
-          onKeyDown: handleKeyDown,
-          onFocus: handleFocus,
-          className: className,
-          'data-iui-size': size === 'small' ? 'small' : undefined,
-          style: style,
-          ref: treeRef,
-          ...rest,
-          children: flatNodesList.map((_, i) => itemRenderer(i)),
-        }),
-  });
+      : React.createElement(
+          TreeElement,
+          {
+            onKeyDown: handleKeyDown,
+            onFocus: handleFocus,
+            className: className,
+            'data-iui-size': size === 'small' ? 'small' : undefined,
+            style: style,
+            ref: treeRef,
+            ...rest,
+          },
+          flatNodesList.map((_, i) => itemRenderer(i)),
+        ),
+  );
 };
 const TreeElement = polymorphic.ul('iui-tree', {
   role: 'tree',
@@ -188,19 +192,25 @@ const VirtualizedTree = React.forwardRef(
       itemRenderer: itemRenderer,
       scrollToIndex,
     });
-    return _jsx(Box, {
-      ...outerProps,
-      className: cx(className, outerProps.className),
-      style: {
-        ...style,
-        ...outerProps.style,
+    return React.createElement(
+      Box,
+      {
+        ...outerProps,
+        className: cx(className, outerProps.className),
+        style: {
+          ...style,
+          ...outerProps.style,
+        },
       },
-      children: _jsx(TreeElement, {
-        ...innerProps,
-        ...rest,
-        ref: mergeRefs(ref, innerProps.ref),
-        children: visibleChildren,
-      }),
-    });
+      React.createElement(
+        TreeElement,
+        {
+          ...innerProps,
+          ...rest,
+          ref: mergeRefs(ref, innerProps.ref),
+        },
+        visibleChildren,
+      ),
+    );
   },
 );

package/esm/core/Tree/TreeNode.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import {
   getFocusableElements,
@@ -120,30 +119,34 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
     },
     [isExpanded, nodeId, onExpanded],
   );
-  return _jsxs(Box, {
-    as: 'li',
-    role: 'treeitem',
-    className: cx('iui-tree-item', className),
-    'aria-expanded': hasSubNodes ? isExpanded : undefined,
-    'aria-disabled': isDisabled,
-    'aria-selected': isSelected,
-    'aria-level': nodeDepth + 1,
-    'aria-setsize': groupSize,
-    'aria-posinset': indexInGroup + 1,
-    tabIndex: -1,
-    ...rest,
-    id: nodeId,
-    ref: useMergedRefs(nodeRef, forwardedRef),
-    onFocus: mergeEventHandlers(props.onFocus, (e) => {
-      setIsFocused(true);
-      e.stopPropagation();
-    }),
-    onBlur: mergeEventHandlers(props.onBlur, () => {
-      setIsFocused(false);
-    }),
-    onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
-    children: [
-      _jsxs(Box, {
+  return React.createElement(
+    Box,
+    {
+      as: 'li',
+      role: 'treeitem',
+      className: cx('iui-tree-item', className),
+      'aria-expanded': hasSubNodes ? isExpanded : undefined,
+      'aria-disabled': isDisabled,
+      'aria-selected': isSelected,
+      'aria-level': nodeDepth + 1,
+      'aria-setsize': groupSize,
+      'aria-posinset': indexInGroup + 1,
+      tabIndex: -1,
+      ...rest,
+      id: nodeId,
+      ref: useMergedRefs(nodeRef, forwardedRef),
+      onFocus: mergeEventHandlers(props.onFocus, (e) => {
+        setIsFocused(true);
+        e.stopPropagation();
+      }),
+      onBlur: mergeEventHandlers(props.onBlur, () => {
+        setIsFocused(false);
+      }),
+      onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
+    },
+    React.createElement(
+      Box,
+      {
         as: 'div',
         style: {
           '--level': nodeDepth,
@@ -158,86 +161,92 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
           },
           nodeProps?.className,
         ),
-        children: [
-          checkbox &&
-            _jsx(Box, {
-              as: 'div',
-              ...checkboxProps,
-              className: cx('iui-tree-node-checkbox', checkboxProps?.className),
-              children: React.isValidElement(checkbox)
-                ? React.cloneElement(checkbox, {
-                    tabIndex: isFocused ? 0 : -1,
-                  })
-                : checkbox,
-            }),
-          _jsxs(Box, {
+      },
+      checkbox &&
+        React.createElement(
+          Box,
+          {
+            as: 'div',
+            ...checkboxProps,
+            className: cx('iui-tree-node-checkbox', checkboxProps?.className),
+          },
+          React.isValidElement(checkbox)
+            ? React.cloneElement(checkbox, {
+                tabIndex: isFocused ? 0 : -1,
+              })
+            : checkbox,
+        ),
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...contentProps,
+          className: cx('iui-tree-node-content', contentProps?.className),
+        },
+        hasSubNodes && expander,
+        hasSubNodes &&
+          !expander &&
+          React.createElement(TreeNodeExpander, {
+            isExpanded: isExpanded,
+            disabled: isDisabled,
+            onClick: onExpanderClick,
+            tabIndex: isFocused ? 0 : -1,
+            ...expanderProps,
+          }),
+        icon &&
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              'aria-hidden': true,
+              ...iconProps,
+              className: cx('iui-tree-node-content-icon', iconProps?.className),
+            },
+            icon,
+          ),
+        React.createElement(
+          Box,
+          {
             as: 'div',
-            ...contentProps,
-            className: cx('iui-tree-node-content', contentProps?.className),
-            children: [
-              hasSubNodes && expander,
-              hasSubNodes &&
-                !expander &&
-                _jsx(TreeNodeExpander, {
-                  isExpanded: isExpanded,
-                  disabled: isDisabled,
-                  onClick: onExpanderClick,
-                  tabIndex: isFocused ? 0 : -1,
-                  ...expanderProps,
-                }),
-              icon &&
-                _jsx(Box, {
-                  as: 'span',
-                  'aria-hidden': true,
-                  ...iconProps,
-                  className: cx(
-                    'iui-tree-node-content-icon',
-                    iconProps?.className,
-                  ),
-                  children: icon,
-                }),
-              _jsxs(Box, {
+            ...labelProps,
+            className: cx('iui-tree-node-content-label', labelProps?.className),
+          },
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...titleProps,
+              className: cx(
+                'iui-tree-node-content-title',
+                titleProps?.className,
+              ),
+            },
+            label,
+          ),
+          sublabel &&
+            React.createElement(
+              Box,
+              {
                 as: 'div',
-                ...labelProps,
+                ...sublabelProps,
                 className: cx(
-                  'iui-tree-node-content-label',
-                  labelProps?.className,
+                  'iui-tree-node-content-caption',
+                  sublabelProps?.className,
                 ),
-                children: [
-                  _jsx(Box, {
-                    as: 'div',
-                    ...titleProps,
-                    className: cx(
-                      'iui-tree-node-content-title',
-                      titleProps?.className,
-                    ),
-                    children: label,
-                  }),
-                  sublabel &&
-                    _jsx(Box, {
-                      as: 'div',
-                      ...sublabelProps,
-                      className: cx(
-                        'iui-tree-node-content-caption',
-                        sublabelProps?.className,
-                      ),
-                      children: sublabel,
-                    }),
-                ],
-              }),
-              children,
-            ],
-          }),
-        ],
+              },
+              sublabel,
+            ),
+        ),
+        children,
+      ),
+    ),
+    hasSubNodes &&
+      React.createElement(Box, {
+        as: 'ul',
+        role: 'group',
+        'aria-owns': subNodeIds.join(' '),
+        ...subTreeProps,
+        className: cx('iui-sub-tree', subTreeProps?.className),
       }),
-      hasSubNodes &&
-        _jsx(Box, {
-          as: 'ul',
-          role: 'group',
-          'aria-owns': subNodeIds.join(' '),
-          ...subTreeProps,
-          className: cx('iui-sub-tree', subTreeProps?.className),
-        }),
-    ],
-  });
+  );
 });

package/esm/core/Tree/TreeNodeExpander.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight, SvgChevronRightSmall } from '../../utils/index.js';
@@ -8,13 +7,16 @@ export const TreeNodeExpander = React.forwardRef((props, ref) => {
   const { isExpanded, expanderIconProps = {}, ...rest } = props;
   const size = React.useContext(TreeContext)?.size ?? 'default';
   const ChevronIcon = size === 'small' ? SvgChevronRightSmall : SvgChevronRight;
-  return _jsx(IconButton, {
-    styleType: 'borderless',
-    size: 'small',
-    'aria-label': isExpanded ? 'Collapse' : 'Expand',
-    ref: ref,
-    ...rest,
-    children: _jsx(ChevronIcon, {
+  return React.createElement(
+    IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      'aria-label': isExpanded ? 'Collapse' : 'Expand',
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(ChevronIcon, {
       ...expanderIconProps,
       className: cx(
         'iui-tree-node-content-expander-icon',
@@ -24,5 +26,5 @@ export const TreeNodeExpander = React.forwardRef((props, ref) => {
         },
       ),
     }),
-  });
+  );
 });

package/esm/core/Typography/Anchor.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 } from '../../utils/index.js';
@@ -7,24 +6,23 @@ import { TextContext } from './Text.js';
 export const Anchor = React.forwardRef((props, forwardedRef) => {
   const isInsideText = React.useContext(TextContext);
   const { isExternal, underline = isInsideText, children, ...rest } = props;
-  return _jsxs(Box, {
-    as: 'a',
-    'data-iui-underline': underline ? 'true' : undefined,
-    ...rest,
-    ref: forwardedRef,
-    className: cx(
-      'iui-anchor',
-      {
-        'iui-anchor-external': isExternal,
-      },
-      props.className,
-    ),
-    children: [
-      children,
-      props.target === '_blank' &&
-        _jsx(VisuallyHidden, {
-          children: ' (opens in new tab)',
-        }),
-    ],
-  });
+  return React.createElement(
+    Box,
+    {
+      as: 'a',
+      'data-iui-underline': underline ? 'true' : undefined,
+      ...rest,
+      ref: forwardedRef,
+      className: cx(
+        'iui-anchor',
+        {
+          'iui-anchor-external': isExternal,
+        },
+        props.className,
+      ),
+    },
+    children,
+    props.target === '_blank' &&
+      React.createElement(VisuallyHidden, null, ' (opens in new tab)'),
+  );
 });

package/esm/core/Typography/Blockquote.js

@@ -1,20 +1,17 @@
-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';
 export const Blockquote = React.forwardRef((props, ref) => {
   const { className, children, footer, ...rest } = props;
-  return _jsxs(Box, {
-    as: 'blockquote',
-    className: cx('iui-blockquote', className),
-    ref: ref,
-    ...rest,
-    children: [
-      children,
-      footer &&
-        _jsx('footer', {
-          children: footer,
-        }),
-    ],
-  });
+  return React.createElement(
+    Box,
+    {
+      as: 'blockquote',
+      className: cx('iui-blockquote', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+    footer && React.createElement('footer', null, footer),
+  );
 });

package/esm/core/Typography/Kbd.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
@@ -19,11 +18,14 @@ export const KbdKeys = {
 };
 export const Kbd = React.forwardRef((props, forwardedRef) => {
   const { className, children, ...rest } = props;
-  return _jsx(Box, {
-    as: 'kbd',
-    className: cx('iui-keyboard', className),
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      as: 'kbd',
+      className: cx('iui-keyboard', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/Typography/Text.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
@@ -10,9 +9,12 @@ export const Text = React.forwardRef((props, ref) => {
     isSkeleton = false,
     ...rest
   } = props;
-  return _jsx(TextContext.Provider, {
-    value: true,
-    children: _jsx(Box, {
+  return React.createElement(
+    TextContext.Provider,
+    {
+      value: true,
+    },
+    React.createElement(Box, {
       className: cx(
         {
           [`iui-text-${variant}`]: variant !== 'body',
@@ -25,6 +27,6 @@ export const Text = React.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
     }),
-  });
+  );
 });
 export const TextContext = React.createContext(false);