@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/core/Select/Select.js

@@ -1,319 +1,477 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const MenuItem_js_1 = require("../Menu/MenuItem.js");
-const index_js_1 = require("../../utils/index.js");
-const SelectTag_js_1 = require("./SelectTag.js");
-const SelectTagContainer_js_1 = require("./SelectTagContainer.js");
-const Icon_js_1 = require("../Icon/Icon.js");
-const Popover_js_1 = require("../Popover/Popover.js");
-const List_js_1 = require("../List/List.js");
-const react_1 = require("@floating-ui/react");
-// ----------------------------------------------------------------------------
-/**
- * Select component to select value from options.
- * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
- * @example
- * <caption>Basic select.</caption>
- * <Select
- *  options={[
- *    { value: '1', label: 'Option 1' },
- *    { value: '2', label: 'Option 2' },
- *    { value: '3', label: 'Option 3' },
- *  ]}
- * />
- * @example
- * <caption>Native select.</caption>
- * <Select
- *  native
- *  options={[
- *    { value: '1', label: 'Option 1' },
- *    { value: '2', label: 'Option 2' },
- *    { value: '3', label: 'Option 3' },
- *  ]}
- * />
- * @example
- * <caption>Disabled select with placeholder.</caption>
- * <Select
- *   disabled={true}
- *   placeholder='Placeholder text'
- *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
- * />
- * @example
- * <caption>Select with selected value and change handler.</caption>
- * <Select
- *   value={selectedValue}
- *   onChange={(value) => setSelectedValue(value)}
- *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
- * />
- * @example
- * <caption>Select using custom renderers for menu items and selected value.</caption>
- * <Select
- *   options={[
- *     { value: 'yellow', label: 'Yellow' },
- *     { value: 'green', label: 'Green' },
- *     { value: 'red', label: 'Red' },
- *   ]}
- *   value={selectedValue}
- *   placeholder='Placeholder text'
- *   itemRenderer={(option, itemProps) => (
- *     <MenuItem
- *       style={{ color: option.value }}
- *       isSelected={itemProps.isSelected}
- *       onClick={() => {
- *         setSelectedValue(option.value);
- *         itemProps.close();
- *       }}
- *       role='option'
- *       ref={(el) => itemProps.isSelected && el?.scrollIntoView()}
- *     >
- *       {option.label}
- *     </MenuItem>
- *   )}
- *   selectedItemRenderer={(option) => (
- *     <span style={{ backgroundColor: option.value }}>{option.label}</span>
- *   )}
- * />
- */
-exports.Select = React.forwardRef((props, forwardedRef) => {
-    const { native, ...rest } = props;
-    const Component = native ? NativeSelect : CustomSelect;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return React.createElement(Component, { ...rest, ref: forwardedRef });
+Object.defineProperty(exports, 'Select', {
+  enumerable: true,
+  get: function () {
+    return 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');
+const _index = require('../../utils/index.js');
+const _SelectTag = require('./SelectTag.js');
+const _SelectTagContainer = require('./SelectTagContainer.js');
+const _Icon = require('../Icon/Icon.js');
+const _Popover = require('../Popover/Popover.js');
+const _List = require('../List/List.js');
+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, {
+    ...rest,
+    ref: forwardedRef,
+  });
 });
-// ----------------------------------------------------------------------------
-const NativeSelect = React.forwardRef((props, forwardedRef) => {
-    const { triggerProps, options, disabled, placeholder, defaultValue: defaultValueProp = placeholder !== undefined ? '' : undefined, value: valueProp, onChange: onChangeProp, size, status, styleType, required, ...rest } = props;
-    return (React.createElement(index_js_1.InputWithIcon, { ...rest, ref: forwardedRef },
-        React.createElement(SelectButton, { as: 'select', size: size, status: status, styleType: styleType, disabled: disabled, defaultValue: valueProp === undefined ? defaultValueProp : undefined, value: valueProp === null ? '' : valueProp, required: required, ...triggerProps, onKeyDown: (0, index_js_1.mergeEventHandlers)(triggerProps?.onKeyDown, (event) => {
-                // Firefox does not open the menu on Enter, so we need to do it manually.
-                if (event.key === 'Enter') {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    event.currentTarget.showPicker?.();
-                }
-            }), onChange: (0, index_js_1.mergeEventHandlers)(triggerProps?.onChange, (event) => {
-                onChangeProp?.(event.currentTarget.value, event);
-            }) },
-            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 NativeSelect = _react.forwardRef((props, forwardedRef) => {
+  const {
+    triggerProps,
+    options,
+    disabled,
+    placeholder,
+    defaultValue: defaultValueProp = placeholder !== undefined ? '' : undefined,
+    value: valueProp,
+    onChange: onChangeProp,
+    size,
+    status,
+    styleType,
+    required,
+    ...rest
+  } = props;
+  return (0, _jsxruntime.jsxs)(_index.InputWithIcon, {
+    ...rest,
+    ref: forwardedRef,
+    children: [
+      (0, _jsxruntime.jsxs)(SelectButton, {
+        as: 'select',
+        size: size,
+        status: status,
+        styleType: styleType,
+        disabled: disabled,
+        defaultValue: valueProp === undefined ? defaultValueProp : undefined,
+        value: valueProp === null ? '' : valueProp,
+        required: required,
+        ...triggerProps,
+        onKeyDown: (0, _index.mergeEventHandlers)(
+          triggerProps?.onKeyDown,
+          (event) => {
+            if (event.key === 'Enter') {
+              event.currentTarget.showPicker?.();
+            }
+          },
+        ),
+        onChange: (0, _index.mergeEventHandlers)(
+          triggerProps?.onChange,
+          (event) => {
+            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,
+      }),
+    ],
+  });
 });
-// ----------------------------------------------------------------------------
-const CustomSelect = React.forwardRef((props, forwardedRef) => {
-    const uid = (0, index_js_1.useId)();
-    const { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, 
-    // @ts-expect-error -- this prop is disallowed by types but should still be handled at runtime
-    styleType, ...rest } = props;
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
-    const [uncontrolledValue, setUncontrolledValue] = React.useState();
-    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
-    const onChangeRef = (0, index_js_1.useLatestRef)(onChangeProp);
-    const selectRef = React.useRef(null);
-    const show = React.useCallback(() => {
-        if (disabled) {
+const CustomSelect = _react.forwardRef((props, forwardedRef) => {
+  const uid = (0, _index.useId)();
+  const {
+    options,
+    value: valueProp,
+    onChange: onChangeProp,
+    placeholder,
+    disabled = false,
+    size,
+    itemRenderer,
+    selectedItemRenderer,
+    menuClassName,
+    menuStyle,
+    multiple = false,
+    triggerProps,
+    status,
+    popoverProps,
+    styleType,
+    ...rest
+  } = props;
+  const [isOpen, setIsOpen] = _react.useState(false);
+  const [liveRegionSelection, setLiveRegionSelection] = _react.useState('');
+  const [uncontrolledValue, setUncontrolledValue] = _react.useState();
+  const value = valueProp !== undefined ? valueProp : uncontrolledValue;
+  const onChangeRef = (0, _index.useLatestRef)(onChangeProp);
+  const selectRef = _react.useRef(null);
+  const show = _react.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setIsOpen(true);
+    popoverProps?.onVisibleChange?.(true);
+  }, [disabled, popoverProps]);
+  const hide = _react.useCallback(() => {
+    setIsOpen(false);
+    selectRef.current?.focus({
+      preventScroll: true,
+    });
+    popoverProps?.onVisibleChange?.(false);
+  }, [popoverProps]);
+  const menuItems = _react.useMemo(() => {
+    return options.map((option, index) => {
+      const isSelected = isMultipleEnabled(value, multiple)
+        ? value?.includes(option.value) ?? false
+        : value === option.value;
+      const menuItem = itemRenderer
+        ? itemRenderer(option, {
+            close: () => setIsOpen(false),
+            isSelected,
+          })
+        : (0, _jsxruntime.jsx)(_MenuItem.MenuItem, {
+            children: option.label,
+          });
+      const { label, icon, startIcon: startIconProp, ...restOption } = option;
+      const startIcon = startIconProp ?? icon;
+      return _react.cloneElement(menuItem, {
+        key: `${label}-${index}`,
+        isSelected,
+        startIcon: startIcon,
+        endIcon: isSelected
+          ? (0, _jsxruntime.jsx)(_index.SvgCheckmark, {
+              'aria-hidden': true,
+            })
+          : null,
+        onClick: () => {
+          if (option.disabled) {
             return;
-        }
-        setIsOpen(true);
-        popoverProps?.onVisibleChange?.(true);
-    }, [disabled, popoverProps]);
-    const hide = React.useCallback(() => {
-        setIsOpen(false);
-        selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
-        popoverProps?.onVisibleChange?.(false);
-    }, [popoverProps]);
-    const menuItems = React.useMemo(() => {
-        return options.map((option, index) => {
-            const isSelected = isMultipleEnabled(value, multiple)
-                ? value?.includes(option.value) ?? false
-                : value === option.value;
-            const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (React.createElement(MenuItem_js_1.MenuItem, null, option.label));
-            const { label, icon, startIcon: startIconProp, ...restOption } = option;
-            const startIcon = startIconProp ?? icon;
-            return React.cloneElement(menuItem, {
-                key: `${label}-${index}`,
-                isSelected,
-                startIcon: startIcon,
-                endIcon: isSelected ? React.createElement(index_js_1.SvgCheckmark, { "aria-hidden": true }) : null,
-                onClick: () => {
-                    if (option.disabled) {
-                        return;
-                    }
-                    // update internal value state and also call external onChange
-                    if (isSingleOnChange(onChangeRef.current, multiple)) {
-                        setUncontrolledValue(option.value);
-                        onChangeRef.current?.(option.value);
-                        hide();
-                    }
-                    else {
-                        setUncontrolledValue((prev) => isSelected
-                            ? prev?.filter((i) => option.value !== i)
-                            : [...(prev ?? []), option.value]);
-                        onChangeRef.current?.(option.value, isSelected ? 'removed' : 'added');
-                    }
-                    // update live region
-                    if (isMultipleEnabled(value, multiple)) {
-                        const prevSelectedValue = value || [];
-                        const newSelectedValue = isSelected
-                            ? prevSelectedValue.filter((i) => option.value !== i)
-                            : [...prevSelectedValue, option.value];
-                        setLiveRegionSelection(options
-                            .filter((i) => newSelectedValue.includes(i.value))
-                            .map((item) => item.label)
-                            .filter(Boolean)
-                            .join(', '));
-                    }
-                },
-                ref: (el) => {
-                    if (isSelected && !multiple) {
-                        el?.scrollIntoView({ block: 'nearest' });
-                    }
-                },
-                role: 'option',
-                ...restOption,
-                ...menuItem.props,
+          }
+          if (isSingleOnChange(onChangeRef.current, multiple)) {
+            setUncontrolledValue(option.value);
+            onChangeRef.current?.(option.value);
+            hide();
+          } else {
+            setUncontrolledValue((prev) =>
+              isSelected
+                ? prev?.filter((i) => option.value !== i)
+                : [...(prev ?? []), option.value],
+            );
+            onChangeRef.current?.(
+              option.value,
+              isSelected ? 'removed' : 'added',
+            );
+          }
+          if (isMultipleEnabled(value, multiple)) {
+            const prevSelectedValue = value || [];
+            const newSelectedValue = isSelected
+              ? prevSelectedValue.filter((i) => option.value !== i)
+              : [...prevSelectedValue, option.value];
+            setLiveRegionSelection(
+              options
+                .filter((i) => newSelectedValue.includes(i.value))
+                .map((item) => item.label)
+                .filter(Boolean)
+                .join(', '),
+            );
+          }
+        },
+        ref: (el) => {
+          if (isSelected && !multiple) {
+            el?.scrollIntoView({
+              block: 'nearest',
             });
-        });
-    }, [hide, itemRenderer, multiple, onChangeRef, options, value]);
-    const selectedItems = React.useMemo(() => {
-        if (value == null) {
-            return undefined;
-        }
-        return isMultipleEnabled(value, multiple)
-            ? options.filter((option) => value.some((val) => val === option.value))
-            : options.find((option) => option.value === value);
-    }, [multiple, options, value]);
-    const defaultFocusedIndex = React.useMemo(() => {
-        let index = 0;
-        if (Array.isArray(value) && value.length > 0) {
-            index = options.findIndex((option) => option.value === value[0]);
-        }
-        else if (value) {
-            index = options.findIndex((option) => option.value === value);
-        }
-        return index >= 0 ? index : 0;
-    }, [options, value]);
-    const tagRenderer = React.useCallback((item) => {
-        return React.createElement(SelectTag_js_1.SelectTag, { key: item.label, label: item.label });
-    }, []);
-    const popover = (0, Popover_js_1.usePopover)({
-        visible: isOpen,
-        matchWidth: true,
-        closeOnOutsideClick: true,
-        ...popoverProps,
-        onVisibleChange: (open) => (open ? show() : hide()),
+          }
+        },
+        role: 'option',
+        ...restOption,
+        ...menuItem.props,
+      });
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.InputWithIcon, { ...rest, ref: (0, index_js_1.useMergedRefs)(popover.refs.setPositionReference, forwardedRef) },
-            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_js_1.useMergedRefs)(selectRef, triggerProps?.ref, popover.refs.setReference), className: (0, classnames_1.default)({
-                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
-                }, triggerProps?.className) },
-                (!selectedItems || selectedItems.length === 0) && (React.createElement(index_js_1.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_js_1.AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
-        popover.open && (React.createElement(index_js_1.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)))));
+  }, [hide, itemRenderer, multiple, onChangeRef, options, value]);
+  const selectedItems = _react.useMemo(() => {
+    if (value == null) {
+      return undefined;
+    }
+    return isMultipleEnabled(value, multiple)
+      ? options.filter((option) => value.some((val) => val === option.value))
+      : options.find((option) => option.value === value);
+  }, [multiple, options, value]);
+  const defaultFocusedIndex = _react.useMemo(() => {
+    let index = 0;
+    if (Array.isArray(value) && value.length > 0) {
+      index = options.findIndex((option) => option.value === value[0]);
+    } else if (value) {
+      index = options.findIndex((option) => option.value === value);
+    }
+    return index >= 0 ? index : 0;
+  }, [options, value]);
+  const tagRenderer = _react.useCallback((item) => {
+    return (0, _jsxruntime.jsx)(
+      _SelectTag.SelectTag,
+      {
+        label: item.label,
+      },
+      item.label,
+    );
+  }, []);
+  const popover = (0, _Popover.usePopover)({
+    visible: isOpen,
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    ...popoverProps,
+    onVisibleChange: (open) => (open ? show() : hide()),
+  });
+  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    children: [
+      (0, _jsxruntime.jsxs)(_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,
+            {
+              defaultFocusedIndex: defaultFocusedIndex,
+              className: menuClassName,
+              id: `${uid}-menu`,
+              ...popover.getFloatingProps({
+                style: menuStyle,
+                onKeyDown: ({ key }) => {
+                  if (key === 'Tab') {
+                    hide();
+                  }
+                },
+              }),
+              ref: popover.refs.setFloating,
+              children: menuItems,
+            },
+            `${uid}-menu`,
+          ),
+        }),
+    ],
+  });
 });
-// ----------------------------------------------------------------------------
-// Type guards
 const isMultipleEnabled = (variable, multiple) => {
-    return multiple;
+  return multiple;
 };
-// Type guard for multiple did not work
 const isSingleOnChange = (onChange, multiple) => {
-    return !multiple;
+  return !multiple;
 };
-// ----------------------------------------------------------------------------
-const SelectButton = React.forwardRef((props, forwardedRef) => {
-    const { size, status, styleType = 'default', ...rest } = props;
-    return (React.createElement(index_js_1.Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-select-button', 'iui-field', props.className) }));
+const SelectButton = _react.forwardRef((props, forwardedRef) => {
+  const { size, status, styleType = 'default', ...rest } = props;
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    'data-iui-size': size,
+    'data-iui-status': status,
+    'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+    ...rest,
+    ref: forwardedRef,
+    className: (0, _classnames.default)(
+      'iui-select-button',
+      'iui-field',
+      props.className,
+    ),
+  });
 });
-// ----------------------------------------------------------------------------
-const SelectEndIcon = React.forwardRef((props, forwardedRef) => {
-    const { disabled, isOpen, ...rest } = props;
-    return (React.createElement(Icon_js_1.Icon, { "aria-hidden": true, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-end-icon', { 'iui-disabled': disabled, 'iui-open': isOpen }, props.className) },
-        React.createElement(index_js_1.SvgCaretDownSmall, null)));
+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, {}),
+  });
 });
-// ----------------------------------------------------------------------------
-const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
-    const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
-    return (React.createElement(React.Fragment, null,
-        selectedItem &&
-            selectedItemRenderer &&
-            selectedItemRenderer(selectedItem),
-        selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
-            startIcon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
-            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-content' }, selectedItem.label)))));
+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, {
+              as: 'span',
+              className: 'iui-content',
+              children: selectedItem.label,
+            }),
+          ],
+        }),
+    ],
+  });
 };
-// ----------------------------------------------------------------------------
-const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
-    const selectedItemsElements = React.useMemo(() => {
-        if (!selectedItems) {
-            return [];
-        }
-        return selectedItems.map((item) => tagRenderer(item));
-    }, [selectedItems, tagRenderer]);
-    return (React.createElement(React.Fragment, null,
-        selectedItems &&
-            selectedItemsRenderer &&
-            selectedItemsRenderer(selectedItems),
-        selectedItems && !selectedItemsRenderer && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-content' },
-            React.createElement(SelectTagContainer_js_1.SelectTagContainer, { tags: selectedItemsElements })))));
+const MultipleSelectButton = ({
+  selectedItems,
+  selectedItemsRenderer,
+  tagRenderer,
+}) => {
+  const selectedItemsElements = _react.useMemo(() => {
+    if (!selectedItems) {
+      return [];
+    }
+    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, {
+          as: 'span',
+          className: 'iui-content',
+          children: (0, _jsxruntime.jsx)(
+            _SelectTagContainer.SelectTagContainer,
+            {
+              tags: selectedItemsElements,
+            },
+          ),
+        }),
+    ],
+  });
 };
-// ----------------------------------------------------------------------------
-const SelectListbox = React.forwardRef((props, forwardedRef) => {
-    const { defaultFocusedIndex = 0, autoFocus = true, children: childrenProp, className, ...rest } = props;
-    const [focusedIndex, setFocusedIndex] = React.useState(defaultFocusedIndex);
-    const autoFocusRef = React.useCallback((element) => {
-        queueMicrotask(() => {
-            const firstFocusable = element?.querySelector('[tabindex="0"]');
-            firstFocusable?.focus();
-        });
-    }, []);
-    const children = React.useMemo(() => {
-        return React.Children.map(childrenProp, (child, index) => React.isValidElement(child) ? (React.createElement(react_1.CompositeItem, { key: index, render: child, ref: child.props.ref || child.ref })) : (child));
-    }, [childrenProp]);
-    return (React.createElement(react_1.Composite, { render: React.createElement(List_js_1.List, { as: 'div', className: (0, classnames_1.default)('iui-menu', className) }), orientation: 'vertical', role: 'listbox', activeIndex: focusedIndex, onNavigate: setFocusedIndex, ref: (0, index_js_1.useMergedRefs)(forwardedRef, autoFocus ? autoFocusRef : undefined), ...rest }, children));
+const SelectListbox = _react.forwardRef((props, forwardedRef) => {
+  const {
+    defaultFocusedIndex = 0,
+    autoFocus = true,
+    children: childrenProp,
+    className,
+    ...rest
+  } = props;
+  const [focusedIndex, setFocusedIndex] = _react.useState(defaultFocusedIndex);
+  const autoFocusRef = _react.useCallback((element) => {
+    queueMicrotask(() => {
+      const firstFocusable = element?.querySelector('[tabindex="0"]');
+      firstFocusable?.focus();
+    });
+  }, []);
+  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,
+          )
+        : 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,
+  });
 });