@itwin/itwinui-react 3.12.0 → 3.12.2

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'ColorSwatch', {
 });
 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,27 +24,31 @@ const ColorSwatch = _react.forwardRef((props, ref) => {
         : (0, _ColorPicker.getColorValue)(color).toHslString(true),
     [color],
   );
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: !!onClick ? _index.ButtonBase : 'span',
-    className: (0, _classnames.default)(
-      'iui-color-swatch',
-      {
-        'iui-active': isActive,
+  return _react.createElement(
+    _index.Box,
+    {
+      as: !!onClick ? _index.ButtonBase : 'span',
+      className: (0, _classnames.default)(
+        'iui-color-swatch',
+        {
+          'iui-active': isActive,
+        },
+        className,
+      ),
+      style: {
+        '--iui-color-swatch-background': colorString,
+        ...style,
       },
-      className,
-    ),
-    style: {
-      '--iui-color-swatch-background': colorString,
-      ...style,
+      onClick: onClick,
+      'aria-pressed': !!onClick && isActive ? 'true' : undefined,
+      ref: ref,
+      ...rest,
     },
-    onClick: onClick,
-    'aria-pressed': !!onClick && isActive ? 'true' : undefined,
-    ref: ref,
-    ...rest,
-    children:
-      props.children ??
-      (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
-        children: colorString.toUpperCase(),
-      }),
-  });
+    props.children ??
+      _react.createElement(
+        _VisuallyHidden.VisuallyHidden,
+        null,
+        colorString.toUpperCase(),
+      ),
+  );
 });

package/cjs/core/ComboBox/ComboBox.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, 'ComboBox', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _MenuExtraContent = require('../Menu/MenuExtraContent.js');
 const _SelectTag = require('../Select/SelectTag.js');
@@ -302,9 +301,10 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
               }
             }),
           })
-        : (0, _jsxruntime.jsx)(
+        : _react.createElement(
             _ComboBoxMenuItem.ComboBoxMenuItem,
             {
+              key: optionId,
               id: optionId,
               startIcon: startIcon,
               ...restOptions,
@@ -314,9 +314,8 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
               },
               index: __originalIndex,
               'data-iui-filtered-index': filteredIndex,
-              children: label,
             },
-            optionId,
+            label,
           );
     },
     [
@@ -331,16 +330,23 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
   );
   const emptyContent = _react.useMemo(
     () =>
-      (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: _react.isValidElement(emptyStateMessage)
+      _react.createElement(
+        _react.Fragment,
+        null,
+        _react.isValidElement(emptyStateMessage)
           ? emptyStateMessage
-          : (0, _jsxruntime.jsx)(_MenuExtraContent.MenuExtraContent, {
-              children: (0, _jsxruntime.jsx)(_Text.Text, {
-                isMuted: true,
-                children: emptyStateMessage,
-              }),
-            }),
-      }),
+          : _react.createElement(
+              _MenuExtraContent.MenuExtraContent,
+              null,
+              _react.createElement(
+                _Text.Text,
+                {
+                  isMuted: true,
+                },
+                emptyStateMessage,
+              ),
+            ),
+      ),
     [emptyStateMessage],
   );
   const popover = (0, _Popover.usePopover)({
@@ -353,76 +359,82 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       focus: true,
     },
   });
-  return (0, _jsxruntime.jsx)(_helpers.ComboBoxRefsContext.Provider, {
-    value: {
-      inputRef,
-      menuRef,
-      optionsExtraInfo,
-    },
-    children: (0, _jsxruntime.jsxs)(_helpers.ComboBoxStateContext.Provider, {
+  return _react.createElement(
+    _helpers.ComboBoxRefsContext.Provider,
+    {
       value: {
-        id,
-        isOpen,
-        focusedIndex,
-        setFocusedIndex,
-        onClickHandler,
-        enableVirtualization,
-        filteredOptions,
-        getMenuItem,
-        multiple,
-        popover,
-        show,
-        hide,
+        inputRef,
+        menuRef,
+        optionsExtraInfo,
+      },
+    },
+    _react.createElement(
+      _helpers.ComboBoxStateContext.Provider,
+      {
+        value: {
+          id,
+          isOpen,
+          focusedIndex,
+          setFocusedIndex,
+          onClickHandler,
+          enableVirtualization,
+          filteredOptions,
+          getMenuItem,
+          multiple,
+          popover,
+          show,
+          hide,
+        },
       },
-      children: [
-        (0, _jsxruntime.jsxs)(_ComboBoxInputContainer.ComboBoxInputContainer, {
+      _react.createElement(
+        _ComboBoxInputContainer.ComboBoxInputContainer,
+        {
           ref: forwardedRef,
           disabled: inputProps?.disabled,
           ...rest,
-          children: [
-            (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-              children: (0, _jsxruntime.jsx)(_ComboBoxInput.ComboBoxInput, {
-                value: inputValue,
-                disabled: inputProps?.disabled,
-                ...inputProps,
-                onChange: handleOnInput,
-                selectTags: isMultipleEnabled(selectedIndexes, multiple)
-                  ? selectedIndexes
-                      ?.map((index) => {
-                        const item = options[index];
-                        return (0, _jsxruntime.jsx)(
-                          _SelectTag.SelectTag,
-                          {
-                            label: item.label,
-                          },
-                          item.label,
-                        );
-                      })
-                      .filter(Boolean)
-                  : undefined,
-              }),
-            }),
-            (0, _jsxruntime.jsx)(_ComboBoxEndIcon.ComboBoxEndIcon, {
-              ...endIconProps,
-              disabled: inputProps?.disabled,
-              isOpen: isOpen,
-            }),
-            multiple
-              ? (0, _jsxruntime.jsx)(_index.AutoclearingHiddenLiveRegion, {
-                  text: liveRegionSelection,
-                })
-              : null,
-          ],
+        },
+        _react.createElement(
+          _react.Fragment,
+          null,
+          _react.createElement(_ComboBoxInput.ComboBoxInput, {
+            value: inputValue,
+            disabled: inputProps?.disabled,
+            ...inputProps,
+            onChange: handleOnInput,
+            selectTags: isMultipleEnabled(selectedIndexes, multiple)
+              ? selectedIndexes
+                  ?.map((index) => {
+                    const item = options[index];
+                    return _react.createElement(_SelectTag.SelectTag, {
+                      key: item.label,
+                      label: item.label,
+                    });
+                  })
+                  .filter(Boolean)
+              : undefined,
+          }),
+        ),
+        _react.createElement(_ComboBoxEndIcon.ComboBoxEndIcon, {
+          ...endIconProps,
+          disabled: inputProps?.disabled,
+          isOpen: isOpen,
         }),
-        (0, _jsxruntime.jsx)(_ComboBoxMenu.ComboBoxMenu, {
+        multiple
+          ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
+              text: liveRegionSelection,
+            })
+          : null,
+      ),
+      _react.createElement(
+        _ComboBoxMenu.ComboBoxMenu,
+        {
           as: 'div',
           ...dropdownMenuProps,
-          children:
-            filteredOptions.length > 0 && !enableVirtualization
-              ? filteredOptions.map(getMenuItem)
-              : emptyContent,
-        }),
-      ],
-    }),
-  });
+        },
+        filteredOptions.length > 0 && !enableVirtualization
+          ? filteredOptions.map(getMenuItem)
+          : emptyContent,
+      ),
+    ),
+  );
 });

package/cjs/core/ComboBox/{ComboBox.test-types.js → ComboBox.types-test.js}

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-const _jsxruntime = require('react/jsx-runtime');
 const _react = require('react');
 const _ComboBox = require('./ComboBox.js');
 () => {
   const ref = (0, _react.useRef)(null);
-  return (0, _jsxruntime.jsx)(_ComboBox.ComboBox, {
+  return React.createElement(_ComboBox.ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -30,7 +29,7 @@ const _ComboBox = require('./ComboBox.js');
   });
 };
 () => {
-  return (0, _jsxruntime.jsx)(_ComboBox.ComboBox, {
+  return React.createElement(_ComboBox.ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -52,7 +51,7 @@ const _ComboBox = require('./ComboBox.js');
   });
 };
 () => {
-  return (0, _jsxruntime.jsx)(_ComboBox.ComboBox, {
+  return React.createElement(_ComboBox.ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -74,8 +73,10 @@ const _ComboBox = require('./ComboBox.js');
   });
 };
 () => {
-  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: (0, _jsxruntime.jsx)(_ComboBox.ComboBox, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_ComboBox.ComboBox, {
       options: [
         {
           label: 'Item #1',
@@ -87,5 +88,5 @@ const _ComboBox = require('./ComboBox.js');
         return returnValue;
       },
     }),
-  });
+  );
 };

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -10,30 +10,31 @@ Object.defineProperty(exports, 'ComboBoxEndIcon', {
 });
 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 _Icon = require('../Icon/Icon.js');
 const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef) => {
   const { className, children, disabled, isOpen, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_Icon.Icon, {
-    as: 'span',
-    ref: forwardedRef,
-    className: (0, _classnames.default)(
-      'iui-end-icon',
-      {
-        'iui-disabled': disabled,
-        'iui-open': isOpen,
-      },
-      className,
-    ),
-    ...rest,
-    children:
-      children ??
-      (0, _jsxruntime.jsx)(_index.SvgCaretDownSmall, {
+  return _react.createElement(
+    _Icon.Icon,
+    {
+      as: 'span',
+      ref: forwardedRef,
+      className: (0, _classnames.default)(
+        'iui-end-icon',
+        {
+          'iui-disabled': disabled,
+          'iui-open': isOpen,
+        },
+        className,
+      ),
+      ...rest,
+    },
+    children ??
+      _react.createElement(_index.SvgCaretDownSmall, {
         'aria-hidden': true,
       }),
-  });
+  );
 });
 ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, 'ComboBoxInput', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _Input = require('../Input/Input.js');
 const _index = require('../../utils/index.js');
@@ -172,53 +171,53 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
   }, [hide, show]);
   const [tagContainerWidthRef, tagContainerWidth] = (0,
   _index.useContainerWidth)();
-  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      (0, _jsxruntime.jsx)(_Input.Input, {
-        ref: refs,
-        'aria-expanded': isOpen,
-        'aria-activedescendant':
-          isOpen && focusedIndex != undefined && focusedIndex > -1
-            ? getIdFromIndex(focusedIndex)
-            : undefined,
-        role: 'combobox',
-        'aria-controls': isOpen ? `${id}-list` : undefined,
-        'aria-autocomplete': 'list',
-        spellCheck: false,
-        autoCapitalize: 'none',
-        autoCorrect: 'off',
-        style: {
-          ...(multiple && {
-            paddingInlineStart: tagContainerWidth + 18,
-          }),
-          ...style,
-        },
-        'aria-describedby': multiple ? `${id}-selected-live` : undefined,
-        size: size,
-        ...popover.getReferenceProps({
-          ...rest,
-          onPointerDown: (0, _index.mergeEventHandlers)(
-            props.onPointerDown,
-            handlePointerDown,
-          ),
-          onClick: (0, _index.mergeEventHandlers)(props.onClick, handleClick),
-          onKeyDown: (0, _index.mergeEventHandlers)(
-            props.onKeyDown,
-            handleKeyDown,
-          ),
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(_Input.Input, {
+      ref: refs,
+      'aria-expanded': isOpen,
+      'aria-activedescendant':
+        isOpen && focusedIndex != undefined && focusedIndex > -1
+          ? getIdFromIndex(focusedIndex)
+          : undefined,
+      role: 'combobox',
+      'aria-controls': isOpen ? `${id}-list` : undefined,
+      'aria-autocomplete': 'list',
+      spellCheck: false,
+      autoCapitalize: 'none',
+      autoCorrect: 'off',
+      style: {
+        ...(multiple && {
+          paddingInlineStart: tagContainerWidth + 18,
         }),
+        ...style,
+      },
+      'aria-describedby': multiple ? `${id}-selected-live` : undefined,
+      size: size,
+      ...popover.getReferenceProps({
+        ...rest,
+        onPointerDown: (0, _index.mergeEventHandlers)(
+          props.onPointerDown,
+          handlePointerDown,
+        ),
+        onClick: (0, _index.mergeEventHandlers)(props.onClick, handleClick),
+        onKeyDown: (0, _index.mergeEventHandlers)(
+          props.onKeyDown,
+          handleKeyDown,
+        ),
       }),
-      multiple && selectTags
-        ? (0, _jsxruntime.jsx)(
-            _ComboBoxMultipleContainer.ComboBoxMultipleContainer,
-            {
-              ref: tagContainerWidthRef,
-              selectedItems: selectTags,
-              id: `${id}-selected-live`,
-            },
-          )
-        : null,
-    ],
-  });
+    }),
+    multiple && selectTags
+      ? _react.createElement(
+          _ComboBoxMultipleContainer.ComboBoxMultipleContainer,
+          {
+            ref: tagContainerWidthRef,
+            selectedItems: selectTags,
+            id: `${id}-selected-live`,
+          },
+        )
+      : null,
+  );
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, 'ComboBoxInputContainer', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _StatusMessage = require('../StatusMessage/StatusMessage.js');
 const _index = require('../../utils/index.js');
@@ -17,25 +16,29 @@ const _helpers = require('./helpers.js');
 const ComboBoxInputContainer = _react.forwardRef((props, forwardedRef) => {
   const { className, status, message, children, ...rest } = props;
   const { id } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
-  return (0, _jsxruntime.jsx)(_index.InputContainer, {
-    className: className,
-    status: status,
-    statusMessage:
-      typeof message === 'string'
-        ? (0, _jsxruntime.jsx)(_StatusMessage.StatusMessage, {
-            status: status,
-            children: message,
-          })
-        : _react.isValidElement(message) &&
-          _react.cloneElement(message, {
-            status,
-          }),
-    ref: forwardedRef,
-    ...rest,
-    id: id,
-    children: (0, _jsxruntime.jsx)(_index.InputWithIcon, {
-      children: children,
-    }),
-  });
+  return _react.createElement(
+    _index.InputContainer,
+    {
+      className: className,
+      status: status,
+      statusMessage:
+        typeof message === 'string'
+          ? _react.createElement(
+              _StatusMessage.StatusMessage,
+              {
+                status: status,
+              },
+              message,
+            )
+          : _react.isValidElement(message) &&
+            _react.cloneElement(message, {
+              status,
+            }),
+      ref: forwardedRef,
+      ...rest,
+      id: id,
+    },
+    _react.createElement(_index.InputWithIcon, null, children),
+  );
 });
 ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'ComboBoxMenu', {
 });
 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');
@@ -45,16 +44,22 @@ const VirtualizedComboBoxMenu = (props) => {
     itemRenderer: virtualItemRenderer,
     scrollToIndex: focusedVisibleIndex,
   });
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: 'div',
-    ...outerProps,
-    ...rest,
-    children: (0, _jsxruntime.jsx)('div', {
-      ...innerProps,
-      ref: innerProps.ref,
-      children: visibleChildren,
-    }),
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'div',
+      ...outerProps,
+      ...rest,
+    },
+    _react.createElement(
+      'div',
+      {
+        ...innerProps,
+        ref: innerProps.ref,
+      },
+      visibleChildren,
+    ),
+  );
 };
 const ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
   const { className, children, style, ...rest } = props;
@@ -69,30 +74,34 @@ const ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
   );
   return (
     popover.open &&
-    (0, _jsxruntime.jsx)(_index.Portal, {
-      portal: true,
-      children: (0, _jsxruntime.jsx)(_List.List, {
-        as: 'div',
-        className: (0, _classnames.default)('iui-menu', className),
-        id: `${id}-list`,
-        role: 'listbox',
-        ref: refs,
-        ...popover.getFloatingProps({
-          style: !enableVirtualization
-            ? style
-            : {
-                maxInlineSize: 0,
-                ...style,
-              },
-          ...rest,
-        }),
-        children: !enableVirtualization
+    _react.createElement(
+      _index.Portal,
+      {
+        portal: true,
+      },
+      _react.createElement(
+        _List.List,
+        {
+          as: 'div',
+          className: (0, _classnames.default)('iui-menu', className),
+          id: `${id}-list`,
+          role: 'listbox',
+          ref: refs,
+          ...popover.getFloatingProps({
+            style: !enableVirtualization
+              ? style
+              : {
+                  maxInlineSize: 0,
+                  ...style,
+                },
+            ...rest,
+          }),
+        },
+        !enableVirtualization
           ? children
-          : (0, _jsxruntime.jsx)(VirtualizedComboBoxMenu, {
-              children: children,
-            }),
-      }),
-    })
+          : _react.createElement(VirtualizedComboBoxMenu, null, children),
+      ),
+    )
   );
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';