@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Select/Select.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 cx from 'classnames';
 import { MenuItem } from '../Menu/MenuItem.js';
@@ -27,7 +22,7 @@ import { Composite, CompositeItem } from '@floating-ui/react';
 export const Select = React.forwardRef((props, forwardedRef) => {
   const { native, ...rest } = props;
   const Component = native ? NativeSelect : CustomSelect;
-  return _jsx(Component, {
+  return React.createElement(Component, {
     ...rest,
     ref: forwardedRef,
   });
@@ -47,11 +42,15 @@ const NativeSelect = React.forwardRef((props, forwardedRef) => {
     required,
     ...rest
   } = props;
-  return _jsxs(InputWithIcon, {
-    ...rest,
-    ref: forwardedRef,
-    children: [
-      _jsxs(SelectButton, {
+  return React.createElement(
+    InputWithIcon,
+    {
+      ...rest,
+      ref: forwardedRef,
+    },
+    React.createElement(
+      SelectButton,
+      {
         as: 'select',
         size: size,
         status: status,
@@ -69,31 +68,32 @@ const NativeSelect = React.forwardRef((props, forwardedRef) => {
         onChange: mergeEventHandlers(triggerProps?.onChange, (event) => {
           onChangeProp?.(event.currentTarget.value, event);
         }),
-        children: [
-          styleType !== 'borderless' && placeholder !== undefined
-            ? _jsx('option', {
-                value: '',
-                disabled: true,
-                children: placeholder,
-              })
-            : null,
-          options.map((option) =>
-            _jsx(
-              'option',
-              {
-                ...option,
-                children: option.label,
-              },
-              option.value,
-            ),
-          ),
-        ],
-      }),
-      _jsx(SelectEndIcon, {
-        disabled: disabled,
-      }),
-    ],
-  });
+      },
+      styleType !== 'borderless' && placeholder !== undefined
+        ? React.createElement(
+            'option',
+            {
+              value: '',
+              disabled: true,
+            },
+            placeholder,
+          )
+        : null,
+      options.map((option) =>
+        React.createElement(
+          'option',
+          {
+            key: option.value,
+            ...option,
+          },
+          option.label,
+        ),
+      ),
+    ),
+    React.createElement(SelectEndIcon, {
+      disabled: disabled,
+    }),
+  );
 });
 const CustomSelect = React.forwardRef((props, forwardedRef) => {
   const uid = useId();
@@ -145,9 +145,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
             close: () => setIsOpen(false),
             isSelected,
           })
-        : _jsx(MenuItem, {
-            children: option.label,
-          });
+        : React.createElement(MenuItem, null, option.label);
       const { label, icon, startIcon: startIconProp, ...restOption } = option;
       const startIcon = startIconProp ?? icon;
       return React.cloneElement(menuItem, {
@@ -155,7 +153,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
         isSelected,
         startIcon: startIcon,
         endIcon: isSelected
-          ? _jsx(SvgCheckmark, {
+          ? React.createElement(SvgCheckmark, {
               'aria-hidden': true,
             })
           : null,
@@ -223,13 +221,10 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
     return index >= 0 ? index : 0;
   }, [options, value]);
   const tagRenderer = React.useCallback((item) => {
-    return _jsx(
-      SelectTag,
-      {
-        label: item.label,
-      },
-      item.label,
-    );
+    return React.createElement(SelectTag, {
+      key: item.label,
+      label: item.label,
+    });
   }, []);
   const popover = usePopover({
     visible: isOpen,
@@ -238,93 +233,99 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
     ...popoverProps,
     onVisibleChange: (open) => (open ? show() : hide()),
   });
-  return _jsxs(_Fragment, {
-    children: [
-      _jsxs(InputWithIcon, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      InputWithIcon,
+      {
         ...rest,
         ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef),
-        children: [
-          _jsxs(SelectButton, {
-            ...popover.getReferenceProps(),
-            tabIndex: 0,
-            role: 'combobox',
-            size: size,
-            status: status,
-            'aria-disabled': disabled ? 'true' : undefined,
-            'data-iui-disabled': disabled ? 'true' : undefined,
-            'aria-autocomplete': 'none',
-            'aria-expanded': isOpen,
-            'aria-haspopup': 'listbox',
-            'aria-controls': `${uid}-menu`,
-            styleType: styleType,
-            ...triggerProps,
-            ref: useMergedRefs(
-              selectRef,
-              triggerProps?.ref,
-              popover.refs.setReference,
-            ),
-            className: cx(
-              {
-                'iui-placeholder':
-                  (!selectedItems || selectedItems.length === 0) &&
-                  !!placeholder,
-              },
-              triggerProps?.className,
-            ),
-            children: [
-              (!selectedItems || selectedItems.length === 0) &&
-                _jsx(Box, {
-                  as: 'span',
-                  className: 'iui-content',
-                  children: placeholder,
-                }),
-              isMultipleEnabled(selectedItems, multiple)
-                ? _jsx(MultipleSelectButton, {
-                    selectedItems: selectedItems,
-                    selectedItemsRenderer: selectedItemRenderer,
-                    tagRenderer: tagRenderer,
-                  })
-                : _jsx(SingleSelectButton, {
-                    selectedItem: selectedItems,
-                    selectedItemRenderer: selectedItemRenderer,
-                  }),
-            ],
-          }),
-          _jsx(SelectEndIcon, {
-            disabled: disabled,
-            isOpen: isOpen,
-          }),
-          multiple
-            ? _jsx(AutoclearingHiddenLiveRegion, {
-                text: liveRegionSelection,
-              })
-            : null,
-        ],
-      }),
-      popover.open &&
-        _jsx(Portal, {
-          children: _jsx(
-            SelectListbox,
+      },
+      React.createElement(
+        SelectButton,
+        {
+          ...popover.getReferenceProps(),
+          tabIndex: 0,
+          role: 'combobox',
+          size: size,
+          status: status,
+          'aria-disabled': disabled ? 'true' : undefined,
+          'data-iui-disabled': disabled ? 'true' : undefined,
+          'aria-autocomplete': 'none',
+          'aria-expanded': isOpen,
+          'aria-haspopup': 'listbox',
+          'aria-controls': `${uid}-menu`,
+          styleType: styleType,
+          ...triggerProps,
+          ref: useMergedRefs(
+            selectRef,
+            triggerProps?.ref,
+            popover.refs.setReference,
+          ),
+          className: cx(
             {
-              defaultFocusedIndex: defaultFocusedIndex,
-              className: menuClassName,
-              id: `${uid}-menu`,
-              ...popover.getFloatingProps({
-                style: menuStyle,
-                onKeyDown: ({ key }) => {
-                  if (key === 'Tab') {
-                    hide();
-                  }
-                },
-              }),
-              ref: popover.refs.setFloating,
-              children: menuItems,
+              'iui-placeholder':
+                (!selectedItems || selectedItems.length === 0) && !!placeholder,
             },
-            `${uid}-menu`,
+            triggerProps?.className,
           ),
-        }),
-    ],
-  });
+        },
+        (!selectedItems || selectedItems.length === 0) &&
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              className: 'iui-content',
+            },
+            placeholder,
+          ),
+        isMultipleEnabled(selectedItems, multiple)
+          ? React.createElement(MultipleSelectButton, {
+              selectedItems: selectedItems,
+              selectedItemsRenderer: selectedItemRenderer,
+              tagRenderer: tagRenderer,
+            })
+          : React.createElement(SingleSelectButton, {
+              selectedItem: selectedItems,
+              selectedItemRenderer: selectedItemRenderer,
+            }),
+      ),
+      React.createElement(SelectEndIcon, {
+        disabled: disabled,
+        isOpen: isOpen,
+      }),
+      multiple
+        ? React.createElement(AutoclearingHiddenLiveRegion, {
+            text: liveRegionSelection,
+          })
+        : null,
+    ),
+    popover.open &&
+      React.createElement(
+        Portal,
+        null,
+        React.createElement(
+          SelectListbox,
+          {
+            defaultFocusedIndex: defaultFocusedIndex,
+            className: menuClassName,
+            id: `${uid}-menu`,
+            key: `${uid}-menu`,
+            ...popover.getFloatingProps({
+              style: menuStyle,
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  hide();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuItems,
+        ),
+      ),
+  );
 });
 const isMultipleEnabled = (variable, multiple) => {
   return multiple;
@@ -334,7 +335,7 @@ const isSingleOnChange = (onChange, multiple) => {
 };
 const SelectButton = React.forwardRef((props, forwardedRef) => {
   const { size, status, styleType = 'default', ...rest } = props;
-  return _jsx(Box, {
+  return React.createElement(Box, {
     'data-iui-size': size,
     'data-iui-status': status,
     'data-iui-variant': styleType !== 'default' ? styleType : undefined,
@@ -345,48 +346,55 @@ const SelectButton = React.forwardRef((props, forwardedRef) => {
 });
 const SelectEndIcon = React.forwardRef((props, forwardedRef) => {
   const { disabled, isOpen, ...rest } = props;
-  return _jsx(Icon, {
-    'aria-hidden': true,
-    ...rest,
-    ref: forwardedRef,
-    className: cx(
-      'iui-end-icon',
-      {
-        'iui-disabled': disabled,
-        'iui-open': isOpen,
-      },
-      props.className,
-    ),
-    children: _jsx(SvgCaretDownSmall, {}),
-  });
+  return React.createElement(
+    Icon,
+    {
+      'aria-hidden': true,
+      ...rest,
+      ref: forwardedRef,
+      className: cx(
+        'iui-end-icon',
+        {
+          'iui-disabled': disabled,
+          'iui-open': isOpen,
+        },
+        props.className,
+      ),
+    },
+    React.createElement(SvgCaretDownSmall, null),
+  );
 });
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
-  return _jsxs(_Fragment, {
-    children: [
-      selectedItem &&
-        selectedItemRenderer &&
-        selectedItemRenderer(selectedItem),
-      selectedItem &&
-        !selectedItemRenderer &&
-        _jsxs(_Fragment, {
-          children: [
-            startIcon &&
-              _jsx(Box, {
-                as: 'span',
-                className: 'iui-icon',
-                'aria-hidden': true,
-                children: startIcon,
-              }),
-            _jsx(Box, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    selectedItem && selectedItemRenderer && selectedItemRenderer(selectedItem),
+    selectedItem &&
+      !selectedItemRenderer &&
+      React.createElement(
+        React.Fragment,
+        null,
+        startIcon &&
+          React.createElement(
+            Box,
+            {
               as: 'span',
-              className: 'iui-content',
-              children: selectedItem.label,
-            }),
-          ],
-        }),
-    ],
-  });
+              className: 'iui-icon',
+              'aria-hidden': true,
+            },
+            startIcon,
+          ),
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-content',
+          },
+          selectedItem.label,
+        ),
+      ),
+  );
 };
 const MultipleSelectButton = ({
   selectedItems,
@@ -399,22 +407,25 @@ const MultipleSelectButton = ({
     }
     return selectedItems.map((item) => tagRenderer(item));
   }, [selectedItems, tagRenderer]);
-  return _jsxs(_Fragment, {
-    children: [
-      selectedItems &&
-        selectedItemsRenderer &&
-        selectedItemsRenderer(selectedItems),
-      selectedItems &&
-        !selectedItemsRenderer &&
-        _jsx(Box, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    selectedItems &&
+      selectedItemsRenderer &&
+      selectedItemsRenderer(selectedItems),
+    selectedItems &&
+      !selectedItemsRenderer &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           className: 'iui-content',
-          children: _jsx(SelectTagContainer, {
-            tags: selectedItemsElements,
-          }),
+        },
+        React.createElement(SelectTagContainer, {
+          tags: selectedItemsElements,
         }),
-    ],
-  });
+      ),
+  );
 };
 const SelectListbox = React.forwardRef((props, forwardedRef) => {
   const {
@@ -434,28 +445,28 @@ const SelectListbox = React.forwardRef((props, forwardedRef) => {
   const children = React.useMemo(() => {
     return React.Children.map(childrenProp, (child, index) =>
       React.isValidElement(child)
-        ? _jsx(
-            CompositeItem,
-            {
-              render: child,
-              ref: child.props.ref || child.ref,
-            },
-            index,
-          )
+        ? React.createElement(CompositeItem, {
+            key: index,
+            render: child,
+            ref: child.props.ref || child.ref,
+          })
         : child,
     );
   }, [childrenProp]);
-  return _jsx(Composite, {
-    render: _jsx(List, {
-      as: 'div',
-      className: cx('iui-menu', className),
-    }),
-    orientation: 'vertical',
-    role: 'listbox',
-    activeIndex: focusedIndex,
-    onNavigate: setFocusedIndex,
-    ref: useMergedRefs(forwardedRef, autoFocus ? autoFocusRef : undefined),
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Composite,
+    {
+      render: React.createElement(List, {
+        as: 'div',
+        className: cx('iui-menu', className),
+      }),
+      orientation: 'vertical',
+      role: 'listbox',
+      activeIndex: focusedIndex,
+      onNavigate: setFocusedIndex,
+      ref: useMergedRefs(forwardedRef, autoFocus ? autoFocusRef : undefined),
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/Select/Select.types-test.js

@@ -1,14 +1,11 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { Select } from './Select.js';
 () => {
   const ref = useRef(null);
-  return _jsx(_Fragment, {
-    children: _jsx(Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
       options: [
         {
           value: 1,
@@ -29,11 +26,13 @@ import { Select } from './Select.js';
       },
       ref: ref,
     }),
-  });
+  );
 };
 () => {
-  return _jsx(_Fragment, {
-    children: _jsx(Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
       options: [
         {
           value: 1,
@@ -53,11 +52,13 @@ import { Select } from './Select.js';
         return returnValue;
       },
     }),
-  });
+  );
 };
 () => {
-  return _jsx(_Fragment, {
-    children: _jsx(Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
       options: [
         {
           value: '1',
@@ -77,11 +78,13 @@ import { Select } from './Select.js';
         return returnValue;
       },
     }),
-  });
+  );
 };
 () => {
-  return _jsx(_Fragment, {
-    children: _jsx(Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
       label: 'Select Label',
       options: [
         {
@@ -94,19 +97,19 @@ import { Select } from './Select.js';
         return returnValue;
       },
     }),
-  });
+  );
 };
 () => {
-  return _jsxs(_Fragment, {
-    children: [
-      _jsx(Select, {
-        styleType: 'borderless',
-        options: [],
-      }),
-      _jsx(Select, {
-        styleType: 'default',
-        options: [],
-      }),
-    ],
-  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Select, {
+      styleType: 'borderless',
+      options: [],
+    }),
+    React.createElement(Select, {
+      styleType: 'default',
+      options: [],
+    }),
+  );
 };

package/esm/core/Select/SelectTag.js

@@ -1,18 +1,23 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const SelectTag = React.forwardRef((props, forwardedRef) => {
   const { className, label, ...rest } = props;
-  return _jsx(Box, {
-    as: 'span',
-    className: cx('iui-select-tag', className),
-    ref: forwardedRef,
-    ...rest,
-    children: _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
       as: 'span',
-      className: 'iui-select-tag-label',
-      children: label,
-    }),
-  });
+      className: cx('iui-select-tag', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'span',
+        className: 'iui-select-tag-label',
+      },
+      label,
+    ),
+  );
 });

package/esm/core/Select/SelectTagContainer.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 cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
@@ -11,18 +6,21 @@ export const SelectTagContainer = React.forwardRef((props, ref) => {
   const { tags, className, ...rest } = props;
   const [containerRef, visibleCount] = useOverflow(tags);
   const refs = useMergedRefs(ref, containerRef);
-  return _jsx(Box, {
-    className: cx('iui-select-tag-container', className),
-    ref: refs,
-    ...rest,
-    children: _jsxs(_Fragment, {
-      children: [
-        visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
-        visibleCount < tags.length &&
-          _jsx(SelectTag, {
-            label: `+${tags.length - visibleCount + 1} item(s)`,
-          }),
-      ],
-    }),
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-select-tag-container', className),
+      ref: refs,
+      ...rest,
+    },
+    React.createElement(
+      React.Fragment,
+      null,
+      visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
+      visibleCount < tags.length &&
+        React.createElement(SelectTag, {
+          label: `+${tags.length - visibleCount + 1} item(s)`,
+        }),
+    ),
+  );
 });