@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/ColorPicker/ColorPalette.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';
@@ -9,38 +8,40 @@ export const ColorPalette = React.forwardRef((props, ref) => {
   const { colors, label, className, children, ...rest } = props;
   const { activeColor, setActiveColor, onChangeComplete } =
     useColorPickerContext();
-  return _jsxs(Box, {
-    className: cx('iui-color-palette-wrapper', className),
-    ref: ref,
-    ...rest,
-    children: [
-      label &&
-        _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-color-palette-wrapper', className),
+      ref: ref,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        Box,
+        {
           className: 'iui-color-picker-section-label',
-          children: label,
-        }),
-      _jsxs(Box, {
+        },
+        label,
+      ),
+    React.createElement(
+      Box,
+      {
         className: 'iui-color-palette',
-        children: [
-          children,
-          colors &&
-            colors.map((_color, index) => {
-              const color = getColorValue(_color);
-              return _jsx(
-                ColorSwatch,
-                {
-                  color: color,
-                  onClick: () => {
-                    onChangeComplete?.(color);
-                    setActiveColor(color);
-                  },
-                  isActive: color.equals(activeColor),
-                },
-                index,
-              );
-            }),
-        ],
-      }),
-    ],
-  });
+      },
+      children,
+      colors &&
+        colors.map((_color, index) => {
+          const color = getColorValue(_color);
+          return React.createElement(ColorSwatch, {
+            key: index,
+            color: color,
+            onClick: () => {
+              onChangeComplete?.(color);
+              setActiveColor(color);
+            },
+            isActive: color.equals(activeColor),
+          });
+        }),
+    ),
+  );
 });

package/esm/core/ColorPicker/ColorPicker.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { ColorValue, useMergedRefs, Box } from '../../utils/index.js';
 import cx from 'classnames';
@@ -53,26 +52,32 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => {
     },
     [onChange, onChangeComplete],
   );
-  return _jsx(Box, {
-    className: cx(
-      'iui-color-picker',
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-color-picker',
+        {
+          'iui-popover-surface': applyBackground,
+        },
+        className,
+      ),
+      ref: useMergedRefs(ref, forwardedRef),
+      ...rest,
+    },
+    React.createElement(
+      ColorPickerContext.Provider,
       {
-        'iui-popover-surface': applyBackground,
+        value: {
+          activeColor,
+          setActiveColor,
+          hsvColor,
+          applyHsvColorChange,
+          onChangeComplete,
+          showAlpha,
+        },
       },
-      className,
+      children,
     ),
-    ref: useMergedRefs(ref, forwardedRef),
-    ...rest,
-    children: _jsx(ColorPickerContext.Provider, {
-      value: {
-        activeColor,
-        setActiveColor,
-        hsvColor,
-        applyHsvColorChange,
-        onChangeComplete,
-        showAlpha,
-      },
-      children: children,
-    }),
-  });
+  );
 });

package/esm/core/ColorPicker/ColorSwatch.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, ButtonBase } from '../../utils/index.js';
@@ -13,27 +12,27 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
         : getColorValue(color).toHslString(true),
     [color],
   );
-  return _jsx(Box, {
-    as: !!onClick ? ButtonBase : 'span',
-    className: cx(
-      'iui-color-swatch',
-      {
-        'iui-active': isActive,
+  return React.createElement(
+    Box,
+    {
+      as: !!onClick ? ButtonBase : 'span',
+      className: cx(
+        '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 ??
-      _jsx(VisuallyHidden, {
-        children: colorString.toUpperCase(),
-      }),
-  });
+    props.children ??
+      React.createElement(VisuallyHidden, null, colorString.toUpperCase()),
+  );
 });

package/esm/core/ComboBox/ComboBox.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 { MenuExtraContent } from '../Menu/MenuExtraContent.js';
 import { SelectTag } from '../Select/SelectTag.js';
@@ -302,9 +297,10 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
               }
             }),
           })
-        : _jsx(
+        : React.createElement(
             ComboBoxMenuItem,
             {
+              key: optionId,
               id: optionId,
               startIcon: startIcon,
               ...restOptions,
@@ -314,9 +310,8 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
               },
               index: __originalIndex,
               'data-iui-filtered-index': filteredIndex,
-              children: label,
             },
-            optionId,
+            label,
           );
     },
     [
@@ -331,16 +326,23 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
   );
   const emptyContent = React.useMemo(
     () =>
-      _jsx(_Fragment, {
-        children: React.isValidElement(emptyStateMessage)
+      React.createElement(
+        React.Fragment,
+        null,
+        React.isValidElement(emptyStateMessage)
           ? emptyStateMessage
-          : _jsx(MenuExtraContent, {
-              children: _jsx(Text, {
-                isMuted: true,
-                children: emptyStateMessage,
-              }),
-            }),
-      }),
+          : React.createElement(
+              MenuExtraContent,
+              null,
+              React.createElement(
+                Text,
+                {
+                  isMuted: true,
+                },
+                emptyStateMessage,
+              ),
+            ),
+      ),
     [emptyStateMessage],
   );
   const popover = usePopover({
@@ -353,76 +355,82 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       focus: true,
     },
   });
-  return _jsx(ComboBoxRefsContext.Provider, {
-    value: {
-      inputRef,
-      menuRef,
-      optionsExtraInfo,
-    },
-    children: _jsxs(ComboBoxStateContext.Provider, {
+  return React.createElement(
+    ComboBoxRefsContext.Provider,
+    {
       value: {
-        id,
-        isOpen,
-        focusedIndex,
-        setFocusedIndex,
-        onClickHandler,
-        enableVirtualization,
-        filteredOptions,
-        getMenuItem,
-        multiple,
-        popover,
-        show,
-        hide,
+        inputRef,
+        menuRef,
+        optionsExtraInfo,
+      },
+    },
+    React.createElement(
+      ComboBoxStateContext.Provider,
+      {
+        value: {
+          id,
+          isOpen,
+          focusedIndex,
+          setFocusedIndex,
+          onClickHandler,
+          enableVirtualization,
+          filteredOptions,
+          getMenuItem,
+          multiple,
+          popover,
+          show,
+          hide,
+        },
       },
-      children: [
-        _jsxs(ComboBoxInputContainer, {
+      React.createElement(
+        ComboBoxInputContainer,
+        {
           ref: forwardedRef,
           disabled: inputProps?.disabled,
           ...rest,
-          children: [
-            _jsx(_Fragment, {
-              children: _jsx(ComboBoxInput, {
-                value: inputValue,
-                disabled: inputProps?.disabled,
-                ...inputProps,
-                onChange: handleOnInput,
-                selectTags: isMultipleEnabled(selectedIndexes, multiple)
-                  ? selectedIndexes
-                      ?.map((index) => {
-                        const item = options[index];
-                        return _jsx(
-                          SelectTag,
-                          {
-                            label: item.label,
-                          },
-                          item.label,
-                        );
-                      })
-                      .filter(Boolean)
-                  : undefined,
-              }),
-            }),
-            _jsx(ComboBoxEndIcon, {
-              ...endIconProps,
-              disabled: inputProps?.disabled,
-              isOpen: isOpen,
-            }),
-            multiple
-              ? _jsx(AutoclearingHiddenLiveRegion, {
-                  text: liveRegionSelection,
-                })
-              : null,
-          ],
+        },
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(ComboBoxInput, {
+            value: inputValue,
+            disabled: inputProps?.disabled,
+            ...inputProps,
+            onChange: handleOnInput,
+            selectTags: isMultipleEnabled(selectedIndexes, multiple)
+              ? selectedIndexes
+                  ?.map((index) => {
+                    const item = options[index];
+                    return React.createElement(SelectTag, {
+                      key: item.label,
+                      label: item.label,
+                    });
+                  })
+                  .filter(Boolean)
+              : undefined,
+          }),
+        ),
+        React.createElement(ComboBoxEndIcon, {
+          ...endIconProps,
+          disabled: inputProps?.disabled,
+          isOpen: isOpen,
         }),
-        _jsx(ComboBoxMenu, {
+        multiple
+          ? React.createElement(AutoclearingHiddenLiveRegion, {
+              text: liveRegionSelection,
+            })
+          : null,
+      ),
+      React.createElement(
+        ComboBoxMenu,
+        {
           as: 'div',
           ...dropdownMenuProps,
-          children:
-            filteredOptions.length > 0 && !enableVirtualization
-              ? filteredOptions.map(getMenuItem)
-              : emptyContent,
-        }),
-      ],
-    }),
-  });
+        },
+        filteredOptions.length > 0 && !enableVirtualization
+          ? filteredOptions.map(getMenuItem)
+          : emptyContent,
+      ),
+    ),
+  );
 });

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

@@ -1,9 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { ComboBox } from './ComboBox.js';
 () => {
   const ref = useRef(null);
-  return _jsx(ComboBox, {
+  return React.createElement(ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -26,7 +25,7 @@ import { ComboBox } from './ComboBox.js';
   });
 };
 () => {
-  return _jsx(ComboBox, {
+  return React.createElement(ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -48,7 +47,7 @@ import { ComboBox } from './ComboBox.js';
   });
 };
 () => {
-  return _jsx(ComboBox, {
+  return React.createElement(ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -70,8 +69,10 @@ import { ComboBox } from './ComboBox.js';
   });
 };
 () => {
-  return _jsx(_Fragment, {
-    children: _jsx(ComboBox, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(ComboBox, {
       options: [
         {
           label: 'Item #1',
@@ -83,5 +84,5 @@ import { ComboBox } from './ComboBox.js';
         return returnValue;
       },
     }),
-  });
+  );
 };

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -1,27 +1,28 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgCaretDownSmall } from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
   const { className, children, disabled, isOpen, ...rest } = props;
-  return _jsx(Icon, {
-    as: 'span',
-    ref: forwardedRef,
-    className: cx(
-      'iui-end-icon',
-      {
-        'iui-disabled': disabled,
-        'iui-open': isOpen,
-      },
-      className,
-    ),
-    ...rest,
-    children:
-      children ??
-      _jsx(SvgCaretDownSmall, {
+  return React.createElement(
+    Icon,
+    {
+      as: 'span',
+      ref: forwardedRef,
+      className: cx(
+        'iui-end-icon',
+        {
+          'iui-disabled': disabled,
+          'iui-open': isOpen,
+        },
+        className,
+      ),
+      ...rest,
+    },
+    children ??
+      React.createElement(SvgCaretDownSmall, {
         'aria-hidden': true,
       }),
-  });
+  );
 });
 ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/esm/core/ComboBox/ComboBoxInput.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 { Input } from '../Input/Input.js';
 import {
@@ -165,47 +160,47 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     wasOpenBeforeClick.current = false;
   }, [hide, show]);
   const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
-  return _jsxs(_Fragment, {
-    children: [
-      _jsx(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: mergeEventHandlers(
-            props.onPointerDown,
-            handlePointerDown,
-          ),
-          onClick: mergeEventHandlers(props.onClick, handleClick),
-          onKeyDown: mergeEventHandlers(props.onKeyDown, handleKeyDown),
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(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: mergeEventHandlers(
+          props.onPointerDown,
+          handlePointerDown,
+        ),
+        onClick: mergeEventHandlers(props.onClick, handleClick),
+        onKeyDown: mergeEventHandlers(props.onKeyDown, handleKeyDown),
       }),
-      multiple && selectTags
-        ? _jsx(ComboBoxMultipleContainer, {
-            ref: tagContainerWidthRef,
-            selectedItems: selectTags,
-            id: `${id}-selected-live`,
-          })
-        : null,
-    ],
-  });
+    }),
+    multiple && selectTags
+      ? React.createElement(ComboBoxMultipleContainer, {
+          ref: tagContainerWidthRef,
+          selectedItems: selectTags,
+          id: `${id}-selected-live`,
+        })
+      : null,
+  );
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import {
@@ -11,26 +10,30 @@ export const ComboBoxInputContainer = React.forwardRef(
   (props, forwardedRef) => {
     const { className, status, message, children, ...rest } = props;
     const { id } = useSafeContext(ComboBoxStateContext);
-    return _jsx(InputContainer, {
-      className: className,
-      status: status,
-      statusMessage:
-        typeof message === 'string'
-          ? _jsx(StatusMessage, {
-              status: status,
-              children: message,
-            })
-          : React.isValidElement(message) &&
-            React.cloneElement(message, {
-              status,
-            }),
-      ref: forwardedRef,
-      ...rest,
-      id: id,
-      children: _jsx(InputWithIcon, {
-        children: children,
-      }),
-    });
+    return React.createElement(
+      InputContainer,
+      {
+        className: className,
+        status: status,
+        statusMessage:
+          typeof message === 'string'
+            ? React.createElement(
+                StatusMessage,
+                {
+                  status: status,
+                },
+                message,
+              )
+            : React.isValidElement(message) &&
+              React.cloneElement(message, {
+                status,
+              }),
+        ref: forwardedRef,
+        ...rest,
+        id: id,
+      },
+      React.createElement(InputWithIcon, null, children),
+    );
   },
 );
 ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';