@itwin/itwinui-react 3.12.0 → 3.12.2

package/cjs/core/Select/Select.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Select', {
 });
 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 _MenuItem = require('../Menu/MenuItem.js');
@@ -24,7 +23,7 @@ const _react1 = require('@floating-ui/react');
 const Select = _react.forwardRef((props, forwardedRef) => {
   const { native, ...rest } = props;
   const Component = native ? NativeSelect : CustomSelect;
-  return (0, _jsxruntime.jsx)(Component, {
+  return _react.createElement(Component, {
     ...rest,
     ref: forwardedRef,
   });
@@ -44,11 +43,15 @@ const NativeSelect = _react.forwardRef((props, forwardedRef) => {
     required,
     ...rest
   } = props;
-  return (0, _jsxruntime.jsxs)(_index.InputWithIcon, {
-    ...rest,
-    ref: forwardedRef,
-    children: [
-      (0, _jsxruntime.jsxs)(SelectButton, {
+  return _react.createElement(
+    _index.InputWithIcon,
+    {
+      ...rest,
+      ref: forwardedRef,
+    },
+    _react.createElement(
+      SelectButton,
+      {
         as: 'select',
         size: size,
         status: status,
@@ -72,31 +75,32 @@ const NativeSelect = _react.forwardRef((props, forwardedRef) => {
             onChangeProp?.(event.currentTarget.value, event);
           },
         ),
-        children: [
-          styleType !== 'borderless' && placeholder !== undefined
-            ? (0, _jsxruntime.jsx)('option', {
-                value: '',
-                disabled: true,
-                children: placeholder,
-              })
-            : null,
-          options.map((option) =>
-            (0, _jsxruntime.jsx)(
-              'option',
-              {
-                ...option,
-                children: option.label,
-              },
-              option.value,
-            ),
-          ),
-        ],
-      }),
-      (0, _jsxruntime.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 = (0, _index.useId)();
@@ -148,9 +152,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
             close: () => setIsOpen(false),
             isSelected,
           })
-        : (0, _jsxruntime.jsx)(_MenuItem.MenuItem, {
-            children: option.label,
-          });
+        : _react.createElement(_MenuItem.MenuItem, null, option.label);
       const { label, icon, startIcon: startIconProp, ...restOption } = option;
       const startIcon = startIconProp ?? icon;
       return _react.cloneElement(menuItem, {
@@ -158,7 +160,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
         isSelected,
         startIcon: startIcon,
         endIcon: isSelected
-          ? (0, _jsxruntime.jsx)(_index.SvgCheckmark, {
+          ? _react.createElement(_index.SvgCheckmark, {
               'aria-hidden': true,
             })
           : null,
@@ -226,13 +228,10 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     return index >= 0 ? index : 0;
   }, [options, value]);
   const tagRenderer = _react.useCallback((item) => {
-    return (0, _jsxruntime.jsx)(
-      _SelectTag.SelectTag,
-      {
-        label: item.label,
-      },
-      item.label,
-    );
+    return _react.createElement(_SelectTag.SelectTag, {
+      key: item.label,
+      label: item.label,
+    });
   }, []);
   const popover = (0, _Popover.usePopover)({
     visible: isOpen,
@@ -241,96 +240,102 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     ...popoverProps,
     onVisibleChange: (open) => (open ? show() : hide()),
   });
-  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      (0, _jsxruntime.jsxs)(_index.InputWithIcon, {
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(
+      _index.InputWithIcon,
+      {
         ...rest,
         ref: (0, _index.useMergedRefs)(
           popover.refs.setPositionReference,
           forwardedRef,
         ),
-        children: [
-          (0, _jsxruntime.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: (0, _index.useMergedRefs)(
-              selectRef,
-              triggerProps?.ref,
-              popover.refs.setReference,
-            ),
-            className: (0, _classnames.default)(
-              {
-                'iui-placeholder':
-                  (!selectedItems || selectedItems.length === 0) &&
-                  !!placeholder,
-              },
-              triggerProps?.className,
-            ),
-            children: [
-              (!selectedItems || selectedItems.length === 0) &&
-                (0, _jsxruntime.jsx)(_index.Box, {
-                  as: 'span',
-                  className: 'iui-content',
-                  children: placeholder,
-                }),
-              isMultipleEnabled(selectedItems, multiple)
-                ? (0, _jsxruntime.jsx)(MultipleSelectButton, {
-                    selectedItems: selectedItems,
-                    selectedItemsRenderer: selectedItemRenderer,
-                    tagRenderer: tagRenderer,
-                  })
-                : (0, _jsxruntime.jsx)(SingleSelectButton, {
-                    selectedItem: selectedItems,
-                    selectedItemRenderer: selectedItemRenderer,
-                  }),
-            ],
-          }),
-          (0, _jsxruntime.jsx)(SelectEndIcon, {
-            disabled: disabled,
-            isOpen: isOpen,
-          }),
-          multiple
-            ? (0, _jsxruntime.jsx)(_index.AutoclearingHiddenLiveRegion, {
-                text: liveRegionSelection,
-              })
-            : null,
-        ],
-      }),
-      popover.open &&
-        (0, _jsxruntime.jsx)(_index.Portal, {
-          children: (0, _jsxruntime.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: (0, _index.useMergedRefs)(
+            selectRef,
+            triggerProps?.ref,
+            popover.refs.setReference,
+          ),
+          className: (0, _classnames.default)(
             {
-              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(
+            _index.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(_index.AutoclearingHiddenLiveRegion, {
+            text: liveRegionSelection,
+          })
+        : null,
+    ),
+    popover.open &&
+      _react.createElement(
+        _index.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;
@@ -340,7 +345,7 @@ const isSingleOnChange = (onChange, multiple) => {
 };
 const SelectButton = _react.forwardRef((props, forwardedRef) => {
   const { size, status, styleType = 'default', ...rest } = props;
-  return (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(_index.Box, {
     'data-iui-size': size,
     'data-iui-status': status,
     'data-iui-variant': styleType !== 'default' ? styleType : undefined,
@@ -355,48 +360,55 @@ const SelectButton = _react.forwardRef((props, forwardedRef) => {
 });
 const SelectEndIcon = _react.forwardRef((props, forwardedRef) => {
   const { disabled, isOpen, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_Icon.Icon, {
-    'aria-hidden': true,
-    ...rest,
-    ref: forwardedRef,
-    className: (0, _classnames.default)(
-      'iui-end-icon',
-      {
-        'iui-disabled': disabled,
-        'iui-open': isOpen,
-      },
-      props.className,
-    ),
-    children: (0, _jsxruntime.jsx)(_index.SvgCaretDownSmall, {}),
-  });
+  return _react.createElement(
+    _Icon.Icon,
+    {
+      'aria-hidden': true,
+      ...rest,
+      ref: forwardedRef,
+      className: (0, _classnames.default)(
+        'iui-end-icon',
+        {
+          'iui-disabled': disabled,
+          'iui-open': isOpen,
+        },
+        props.className,
+      ),
+    },
+    _react.createElement(_index.SvgCaretDownSmall, null),
+  );
 });
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
-  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      selectedItem &&
-        selectedItemRenderer &&
-        selectedItemRenderer(selectedItem),
-      selectedItem &&
-        !selectedItemRenderer &&
-        (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-          children: [
-            startIcon &&
-              (0, _jsxruntime.jsx)(_index.Box, {
-                as: 'span',
-                className: 'iui-icon',
-                'aria-hidden': true,
-                children: startIcon,
-              }),
-            (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    selectedItem && selectedItemRenderer && selectedItemRenderer(selectedItem),
+    selectedItem &&
+      !selectedItemRenderer &&
+      _react.createElement(
+        _react.Fragment,
+        null,
+        startIcon &&
+          _react.createElement(
+            _index.Box,
+            {
               as: 'span',
-              className: 'iui-content',
-              children: selectedItem.label,
-            }),
-          ],
-        }),
-    ],
-  });
+              className: 'iui-icon',
+              'aria-hidden': true,
+            },
+            startIcon,
+          ),
+        _react.createElement(
+          _index.Box,
+          {
+            as: 'span',
+            className: 'iui-content',
+          },
+          selectedItem.label,
+        ),
+      ),
+  );
 };
 const MultipleSelectButton = ({
   selectedItems,
@@ -409,25 +421,25 @@ const MultipleSelectButton = ({
     }
     return selectedItems.map((item) => tagRenderer(item));
   }, [selectedItems, tagRenderer]);
-  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      selectedItems &&
-        selectedItemsRenderer &&
-        selectedItemsRenderer(selectedItems),
-      selectedItems &&
-        !selectedItemsRenderer &&
-        (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    selectedItems &&
+      selectedItemsRenderer &&
+      selectedItemsRenderer(selectedItems),
+    selectedItems &&
+      !selectedItemsRenderer &&
+      _react.createElement(
+        _index.Box,
+        {
           as: 'span',
           className: 'iui-content',
-          children: (0, _jsxruntime.jsx)(
-            _SelectTagContainer.SelectTagContainer,
-            {
-              tags: selectedItemsElements,
-            },
-          ),
+        },
+        _react.createElement(_SelectTagContainer.SelectTagContainer, {
+          tags: selectedItemsElements,
         }),
-    ],
-  });
+      ),
+  );
 };
 const SelectListbox = _react.forwardRef((props, forwardedRef) => {
   const {
@@ -447,31 +459,31 @@ const SelectListbox = _react.forwardRef((props, forwardedRef) => {
   const children = _react.useMemo(() => {
     return _react.Children.map(childrenProp, (child, index) =>
       _react.isValidElement(child)
-        ? (0, _jsxruntime.jsx)(
-            _react1.CompositeItem,
-            {
-              render: child,
-              ref: child.props.ref || child.ref,
-            },
-            index,
-          )
+        ? _react.createElement(_react1.CompositeItem, {
+            key: index,
+            render: child,
+            ref: child.props.ref || child.ref,
+          })
         : child,
     );
   }, [childrenProp]);
-  return (0, _jsxruntime.jsx)(_react1.Composite, {
-    render: (0, _jsxruntime.jsx)(_List.List, {
-      as: 'div',
-      className: (0, _classnames.default)('iui-menu', className),
-    }),
-    orientation: 'vertical',
-    role: 'listbox',
-    activeIndex: focusedIndex,
-    onNavigate: setFocusedIndex,
-    ref: (0, _index.useMergedRefs)(
-      forwardedRef,
-      autoFocus ? autoFocusRef : undefined,
-    ),
-    ...rest,
-    children: children,
-  });
+  return _react.createElement(
+    _react1.Composite,
+    {
+      render: _react.createElement(_List.List, {
+        as: 'div',
+        className: (0, _classnames.default)('iui-menu', className),
+      }),
+      orientation: 'vertical',
+      role: 'listbox',
+      activeIndex: focusedIndex,
+      onNavigate: setFocusedIndex,
+      ref: (0, _index.useMergedRefs)(
+        forwardedRef,
+        autoFocus ? autoFocusRef : undefined,
+      ),
+      ...rest,
+    },
+    children,
+  );
 });

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

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-const _jsxruntime = require('react/jsx-runtime');
 const _react = require('react');
 const _Select = require('./Select.js');
 () => {
   const ref = (0, _react.useRef)(null);
-  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: (0, _jsxruntime.jsx)(_Select.Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_Select.Select, {
       options: [
         {
           value: 1,
@@ -29,11 +30,13 @@ const _Select = require('./Select.js');
       },
       ref: ref,
     }),
-  });
+  );
 };
 () => {
-  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: (0, _jsxruntime.jsx)(_Select.Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_Select.Select, {
       options: [
         {
           value: 1,
@@ -53,11 +56,13 @@ const _Select = require('./Select.js');
         return returnValue;
       },
     }),
-  });
+  );
 };
 () => {
-  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: (0, _jsxruntime.jsx)(_Select.Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_Select.Select, {
       options: [
         {
           value: '1',
@@ -77,11 +82,13 @@ const _Select = require('./Select.js');
         return returnValue;
       },
     }),
-  });
+  );
 };
 () => {
-  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: (0, _jsxruntime.jsx)(_Select.Select, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_Select.Select, {
       label: 'Select Label',
       options: [
         {
@@ -94,19 +101,19 @@ const _Select = require('./Select.js');
         return returnValue;
       },
     }),
-  });
+  );
 };
 () => {
-  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      (0, _jsxruntime.jsx)(_Select.Select, {
-        styleType: 'borderless',
-        options: [],
-      }),
-      (0, _jsxruntime.jsx)(_Select.Select, {
-        styleType: 'default',
-        options: [],
-      }),
-    ],
-  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_Select.Select, {
+      styleType: 'borderless',
+      options: [],
+    }),
+    React.createElement(_Select.Select, {
+      styleType: 'default',
+      options: [],
+    }),
+  );
 };

package/cjs/core/Select/SelectTag.js

@@ -10,21 +10,26 @@ Object.defineProperty(exports, 'SelectTag', {
 });
 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 SelectTag = _react.forwardRef((props, forwardedRef) => {
   const { className, label, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: 'span',
-    className: (0, _classnames.default)('iui-select-tag', className),
-    ref: forwardedRef,
-    ...rest,
-    children: (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    _index.Box,
+    {
       as: 'span',
-      className: 'iui-select-tag-label',
-      children: label,
-    }),
-  });
+      className: (0, _classnames.default)('iui-select-tag', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    _react.createElement(
+      _index.Box,
+      {
+        as: 'span',
+        className: 'iui-select-tag-label',
+      },
+      label,
+    ),
+  );
 });