@itwin/itwinui-react 3.12.0 → 3.12.2

package/cjs/core/Tree/Tree.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Tree', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _classnames = _interop_require_default._(require('classnames'));
@@ -99,9 +98,10 @@ const Tree = (props) => {
   const itemRenderer = _react.useCallback(
     (index) => {
       const node = flatNodesList[index];
-      return (0, _jsxruntime.jsx)(
+      return _react.createElement(
         _TreeContext.TreeContext.Provider,
         {
+          key: node.nodeProps.nodeId,
           value: {
             nodeDepth: node.depth,
             subNodeIds: node.subNodeIds,
@@ -122,9 +122,8 @@ const Tree = (props) => {
               : undefined,
             size,
           },
-          children: nodeRenderer(node.nodeProps),
         },
-        node.nodeProps.nodeId,
+        nodeRenderer(node.nodeProps),
       );
     },
     [firstLevelNodesList.length, flatNodesList, nodeRenderer, size],
@@ -155,9 +154,11 @@ const Tree = (props) => {
       items[focusedIndex.current]?.focus();
     }
   };
-  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: enableVirtualization
-      ? (0, _jsxruntime.jsx)(VirtualizedTree, {
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    enableVirtualization
+      ? _react.createElement(VirtualizedTree, {
           flatNodesList: flatNodesList,
           itemRenderer: itemRenderer,
           scrollToIndex: scrollToIndex,
@@ -168,17 +169,20 @@ const Tree = (props) => {
           style: style,
           ...rest,
         })
-      : (0, _jsxruntime.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 = _index.polymorphic.ul('iui-tree', {
   role: 'tree',
@@ -195,19 +199,25 @@ const VirtualizedTree = _react.forwardRef(
       itemRenderer: itemRenderer,
       scrollToIndex,
     });
-    return (0, _jsxruntime.jsx)(_index.Box, {
-      ...outerProps,
-      className: (0, _classnames.default)(className, outerProps.className),
-      style: {
-        ...style,
-        ...outerProps.style,
+    return _react.createElement(
+      _index.Box,
+      {
+        ...outerProps,
+        className: (0, _classnames.default)(className, outerProps.className),
+        style: {
+          ...style,
+          ...outerProps.style,
+        },
       },
-      children: (0, _jsxruntime.jsx)(TreeElement, {
-        ...innerProps,
-        ...rest,
-        ref: (0, _index.mergeRefs)(ref, innerProps.ref),
-        children: visibleChildren,
-      }),
-    });
+      _react.createElement(
+        TreeElement,
+        {
+          ...innerProps,
+          ...rest,
+          ref: (0, _index.mergeRefs)(ref, innerProps.ref),
+        },
+        visibleChildren,
+      ),
+    );
   },
 );

package/cjs/core/Tree/TreeNode.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'TreeNode', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _classnames = _interop_require_default._(require('classnames'));
@@ -131,30 +130,34 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
     },
     [isExpanded, nodeId, onExpanded],
   );
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    as: 'li',
-    role: 'treeitem',
-    className: (0, _classnames.default)('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: (0, _index.useMergedRefs)(nodeRef, forwardedRef),
-    onFocus: (0, _index.mergeEventHandlers)(props.onFocus, (e) => {
-      setIsFocused(true);
-      e.stopPropagation();
-    }),
-    onBlur: (0, _index.mergeEventHandlers)(props.onBlur, () => {
-      setIsFocused(false);
-    }),
-    onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, onKeyDown),
-    children: [
-      (0, _jsxruntime.jsxs)(_index.Box, {
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'li',
+      role: 'treeitem',
+      className: (0, _classnames.default)('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: (0, _index.useMergedRefs)(nodeRef, forwardedRef),
+      onFocus: (0, _index.mergeEventHandlers)(props.onFocus, (e) => {
+        setIsFocused(true);
+        e.stopPropagation();
+      }),
+      onBlur: (0, _index.mergeEventHandlers)(props.onBlur, () => {
+        setIsFocused(false);
+      }),
+      onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, onKeyDown),
+    },
+    _react.createElement(
+      _index.Box,
+      {
         as: 'div',
         style: {
           '--level': nodeDepth,
@@ -169,95 +172,107 @@ const TreeNode = _react.forwardRef((props, forwardedRef) => {
           },
           nodeProps?.className,
         ),
-        children: [
-          checkbox &&
-            (0, _jsxruntime.jsx)(_index.Box, {
-              as: 'div',
-              ...checkboxProps,
+      },
+      checkbox &&
+        _react.createElement(
+          _index.Box,
+          {
+            as: 'div',
+            ...checkboxProps,
+            className: (0, _classnames.default)(
+              'iui-tree-node-checkbox',
+              checkboxProps?.className,
+            ),
+          },
+          _react.isValidElement(checkbox)
+            ? _react.cloneElement(checkbox, {
+                tabIndex: isFocused ? 0 : -1,
+              })
+            : checkbox,
+        ),
+      _react.createElement(
+        _index.Box,
+        {
+          as: 'div',
+          ...contentProps,
+          className: (0, _classnames.default)(
+            'iui-tree-node-content',
+            contentProps?.className,
+          ),
+        },
+        hasSubNodes && expander,
+        hasSubNodes &&
+          !expander &&
+          _react.createElement(_TreeNodeExpander.TreeNodeExpander, {
+            isExpanded: isExpanded,
+            disabled: isDisabled,
+            onClick: onExpanderClick,
+            tabIndex: isFocused ? 0 : -1,
+            ...expanderProps,
+          }),
+        icon &&
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'span',
+              'aria-hidden': true,
+              ...iconProps,
               className: (0, _classnames.default)(
-                'iui-tree-node-checkbox',
-                checkboxProps?.className,
+                'iui-tree-node-content-icon',
+                iconProps?.className,
               ),
-              children: _react.isValidElement(checkbox)
-                ? _react.cloneElement(checkbox, {
-                    tabIndex: isFocused ? 0 : -1,
-                  })
-                : checkbox,
-            }),
-          (0, _jsxruntime.jsxs)(_index.Box, {
+            },
+            icon,
+          ),
+        _react.createElement(
+          _index.Box,
+          {
             as: 'div',
-            ...contentProps,
+            ...labelProps,
             className: (0, _classnames.default)(
-              'iui-tree-node-content',
-              contentProps?.className,
+              'iui-tree-node-content-label',
+              labelProps?.className,
             ),
-            children: [
-              hasSubNodes && expander,
-              hasSubNodes &&
-                !expander &&
-                (0, _jsxruntime.jsx)(_TreeNodeExpander.TreeNodeExpander, {
-                  isExpanded: isExpanded,
-                  disabled: isDisabled,
-                  onClick: onExpanderClick,
-                  tabIndex: isFocused ? 0 : -1,
-                  ...expanderProps,
-                }),
-              icon &&
-                (0, _jsxruntime.jsx)(_index.Box, {
-                  as: 'span',
-                  'aria-hidden': true,
-                  ...iconProps,
-                  className: (0, _classnames.default)(
-                    'iui-tree-node-content-icon',
-                    iconProps?.className,
-                  ),
-                  children: icon,
-                }),
-              (0, _jsxruntime.jsxs)(_index.Box, {
+          },
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'div',
+              ...titleProps,
+              className: (0, _classnames.default)(
+                'iui-tree-node-content-title',
+                titleProps?.className,
+              ),
+            },
+            label,
+          ),
+          sublabel &&
+            _react.createElement(
+              _index.Box,
+              {
                 as: 'div',
-                ...labelProps,
+                ...sublabelProps,
                 className: (0, _classnames.default)(
-                  'iui-tree-node-content-label',
-                  labelProps?.className,
+                  'iui-tree-node-content-caption',
+                  sublabelProps?.className,
                 ),
-                children: [
-                  (0, _jsxruntime.jsx)(_index.Box, {
-                    as: 'div',
-                    ...titleProps,
-                    className: (0, _classnames.default)(
-                      'iui-tree-node-content-title',
-                      titleProps?.className,
-                    ),
-                    children: label,
-                  }),
-                  sublabel &&
-                    (0, _jsxruntime.jsx)(_index.Box, {
-                      as: 'div',
-                      ...sublabelProps,
-                      className: (0, _classnames.default)(
-                        'iui-tree-node-content-caption',
-                        sublabelProps?.className,
-                      ),
-                      children: sublabel,
-                    }),
-                ],
-              }),
-              children,
-            ],
-          }),
-        ],
+              },
+              sublabel,
+            ),
+        ),
+        children,
+      ),
+    ),
+    hasSubNodes &&
+      _react.createElement(_index.Box, {
+        as: 'ul',
+        role: 'group',
+        'aria-owns': subNodeIds.join(' '),
+        ...subTreeProps,
+        className: (0, _classnames.default)(
+          'iui-sub-tree',
+          subTreeProps?.className,
+        ),
       }),
-      hasSubNodes &&
-        (0, _jsxruntime.jsx)(_index.Box, {
-          as: 'ul',
-          role: 'group',
-          'aria-owns': subNodeIds.join(' '),
-          ...subTreeProps,
-          className: (0, _classnames.default)(
-            'iui-sub-tree',
-            subTreeProps?.className,
-          ),
-        }),
-    ],
-  });
+  );
 });

package/cjs/core/Tree/TreeNodeExpander.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'TreeNodeExpander', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
@@ -21,13 +20,16 @@ const TreeNodeExpander = _react.forwardRef((props, ref) => {
   const size = _react.useContext(_TreeContext.TreeContext)?.size ?? 'default';
   const ChevronIcon =
     size === 'small' ? _index.SvgChevronRightSmall : _index.SvgChevronRight;
-  return (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-    styleType: 'borderless',
-    size: 'small',
-    'aria-label': isExpanded ? 'Collapse' : 'Expand',
-    ref: ref,
-    ...rest,
-    children: (0, _jsxruntime.jsx)(ChevronIcon, {
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      'aria-label': isExpanded ? 'Collapse' : 'Expand',
+      ref: ref,
+      ...rest,
+    },
+    _react.createElement(ChevronIcon, {
       ...expanderIconProps,
       className: (0, _classnames.default)(
         'iui-tree-node-content-expander-icon',
@@ -37,5 +39,5 @@ const TreeNodeExpander = _react.forwardRef((props, ref) => {
         },
       ),
     }),
-  });
+  );
 });

package/cjs/core/Typography/Anchor.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Anchor', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
@@ -19,24 +18,27 @@ const _Text = require('./Text.js');
 const Anchor = _react.forwardRef((props, forwardedRef) => {
   const isInsideText = _react.useContext(_Text.TextContext);
   const { isExternal, underline = isInsideText, children, ...rest } = props;
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    as: 'a',
-    'data-iui-underline': underline ? 'true' : undefined,
-    ...rest,
-    ref: forwardedRef,
-    className: (0, _classnames.default)(
-      'iui-anchor',
-      {
-        'iui-anchor-external': isExternal,
-      },
-      props.className,
-    ),
-    children: [
-      children,
-      props.target === '_blank' &&
-        (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
-          children: ' (opens in new tab)',
-        }),
-    ],
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'a',
+      'data-iui-underline': underline ? 'true' : undefined,
+      ...rest,
+      ref: forwardedRef,
+      className: (0, _classnames.default)(
+        'iui-anchor',
+        {
+          'iui-anchor-external': isExternal,
+        },
+        props.className,
+      ),
+    },
+    children,
+    props.target === '_blank' &&
+      _react.createElement(
+        _VisuallyHidden.VisuallyHidden,
+        null,
+        ' (opens in new tab)',
+      ),
+  );
 });

package/cjs/core/Typography/Blockquote.js

@@ -10,23 +10,20 @@ Object.defineProperty(exports, 'Blockquote', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const Blockquote = _react.forwardRef((props, ref) => {
   const { className, children, footer, ...rest } = props;
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    as: 'blockquote',
-    className: (0, _classnames.default)('iui-blockquote', className),
-    ref: ref,
-    ...rest,
-    children: [
-      children,
-      footer &&
-        (0, _jsxruntime.jsx)('footer', {
-          children: footer,
-        }),
-    ],
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'blockquote',
+      className: (0, _classnames.default)('iui-blockquote', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+    footer && _react.createElement('footer', null, footer),
+  );
 });

package/cjs/core/Typography/Kbd.js

@@ -19,7 +19,6 @@ _export(exports, {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
@@ -40,11 +39,14 @@ const KbdKeys = {
 };
 const Kbd = _react.forwardRef((props, forwardedRef) => {
   const { className, children, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: 'kbd',
-    className: (0, _classnames.default)('iui-keyboard', className),
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'kbd',
+      className: (0, _classnames.default)('iui-keyboard', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });

package/cjs/core/Typography/Text.js

@@ -19,7 +19,6 @@ _export(exports, {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
@@ -31,9 +30,12 @@ const Text = _react.forwardRef((props, ref) => {
     isSkeleton = false,
     ...rest
   } = props;
-  return (0, _jsxruntime.jsx)(TextContext.Provider, {
-    value: true,
-    children: (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    TextContext.Provider,
+    {
+      value: true,
+    },
+    _react.createElement(_index.Box, {
       className: (0, _classnames.default)(
         {
           [`iui-text-${variant}`]: variant !== 'body',
@@ -46,6 +48,6 @@ const Text = _react.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
     }),
-  });
+  );
 });
 const TextContext = _react.createContext(false);

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'VisuallyHidden', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
@@ -25,23 +24,29 @@ const VisuallyHidden = _react.forwardRef((props, ref) => {
   const isHydrated = (0, _index.useHydration)() === 'hydrated';
   const children = !['div', 'span', 'p'].includes(asProp)
     ? childrenProp
-    : (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-          (0, _jsxruntime.jsx)(_index.ShadowRoot, {
+    : _react.createElement(
+        _react.Fragment,
+        null,
+        _react.createElement(
+          _index.ShadowRoot,
+          {
             css: css,
-            children: (0, _jsxruntime.jsx)('slot', {}),
-          }),
-          isHydrated && childrenProp,
-        ],
-      });
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: asProp,
-    className: (0, _classnames.default)('iui-visually-hidden', className),
-    'data-iui-unhide-on-focus': unhideOnFocus ? true : undefined,
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+          },
+          _react.createElement('slot', null),
+        ),
+        isHydrated && childrenProp,
+      );
+  return _react.createElement(
+    _index.Box,
+    {
+      as: asProp,
+      className: (0, _classnames.default)('iui-visually-hidden', className),
+      'data-iui-unhide-on-focus': unhideOnFocus ? true : undefined,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 const css = `
   :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {