@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-cjs/core/Select/Select.js

@@ -1,41 +1,59 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "Select", {
-    enumerable: true,
-    get: function() {
-        return Select;
-    }
+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 _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)=>{
-    let { native, ...rest } = props;
-    let Component = native ? NativeSelect : CustomSelect;
-    return _react.createElement(Component, {
-        ...rest,
-        ref: forwardedRef
-    });
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+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) => {
+  let { native, ...rest } = props;
+  let Component = native ? NativeSelect : CustomSelect;
+  return _react.createElement(Component, {
+    ...rest,
+    ref: forwardedRef,
+  });
 });
 Select.displayName = 'Select';
-const NativeSelect = _react.forwardRef((props, forwardedRef)=>{
-    let { triggerProps, options, disabled, placeholder, defaultValue: defaultValueProp = void 0 !== placeholder ? '' : void 0, value: valueProp, onChange: onChangeProp, size, status, styleType, required, ...rest } = props;
-    return _react.createElement(_index.InputWithIcon, {
-        ...rest,
-        ref: forwardedRef
-    }, _react.createElement(SelectButton, {
-        as: "select",
+const NativeSelect = _react.forwardRef((props, forwardedRef) => {
+  let {
+    triggerProps,
+    options,
+    disabled,
+    placeholder,
+    defaultValue: defaultValueProp = void 0 !== placeholder ? '' : void 0,
+    value: valueProp,
+    onChange: onChangeProp,
+    size,
+    status,
+    styleType,
+    required,
+    ...rest
+  } = props;
+  return _react.createElement(
+    _index.InputWithIcon,
+    {
+      ...rest,
+      ref: forwardedRef,
+    },
+    _react.createElement(
+      SelectButton,
+      {
+        as: 'select',
         size: size,
         status: status,
         styleType: styleType,
@@ -44,257 +62,422 @@ const NativeSelect = _react.forwardRef((props, forwardedRef)=>{
         value: null === valueProp ? '' : valueProp,
         required: required,
         ...triggerProps,
-        onKeyDown: (0, _index.mergeEventHandlers)(triggerProps?.onKeyDown, (event)=>{
+        onKeyDown: (0, _index.mergeEventHandlers)(
+          triggerProps?.onKeyDown,
+          (event) => {
             if ('Enter' === event.key) event.currentTarget.showPicker?.();
-        }),
-        onChange: (0, _index.mergeEventHandlers)(triggerProps?.onChange, (event)=>{
+          },
+        ),
+        onChange: (0, _index.mergeEventHandlers)(
+          triggerProps?.onChange,
+          (event) => {
             onChangeProp?.(event.currentTarget.value, event);
-        })
-    }, 'borderless' !== styleType && void 0 !== placeholder ? _react.createElement("option", {
-        value: "",
-        disabled: true
-    }, placeholder) : null, options.map((option)=>_react.createElement("option", {
+          },
+        ),
+      },
+      'borderless' !== styleType && void 0 !== placeholder
+        ? _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
-    }));
+            ...option,
+          },
+          option.label,
+        ),
+      ),
+    ),
+    _react.createElement(SelectEndIcon, {
+      disabled: disabled,
+    }),
+  );
 });
-const CustomSelect = _react.forwardRef((props, forwardedRef)=>{
-    let uid = (0, _index.useId)();
-    let { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, styleType, ...rest } = props;
-    let [isOpen, setIsOpen] = _react.useState(false);
-    let [liveRegionSelection, setLiveRegionSelection] = _react.useState('');
-    let [uncontrolledValue, setUncontrolledValue] = _react.useState();
-    let value = void 0 !== valueProp ? valueProp : uncontrolledValue;
-    let onChangeRef = (0, _index.useLatestRef)(onChangeProp);
-    let selectRef = _react.useRef(null);
-    let show = _react.useCallback(()=>{
-        if (disabled) return;
-        setIsOpen(true);
-        popoverProps?.onVisibleChange?.(true);
-    }, [
-        disabled,
-        popoverProps
-    ]);
-    let hide = _react.useCallback(()=>{
-        setIsOpen(false);
-        selectRef.current?.focus({
-            preventScroll: true
-        });
-        popoverProps?.onVisibleChange?.(false);
-    }, [
-        popoverProps
-    ]);
-    let menuItems = _react.useMemo(()=>options.map((option, index)=>{
-            let isSelected = isMultipleEnabled(value, multiple) ? value?.includes(option.value) ?? false : value === option.value;
-            let menuItem = itemRenderer ? itemRenderer(option, {
-                close: ()=>setIsOpen(false),
-                isSelected
-            }) : _react.createElement(_MenuItem.MenuItem, null, option.label);
-            let { label, icon, startIcon: startIconProp, ...restOption } = option;
-            let startIcon = startIconProp ?? icon;
-            return _react.cloneElement(menuItem, {
-                key: `${label}-${index}`,
-                isSelected,
-                startIcon: startIcon,
-                endIcon: isSelected ? _react.createElement(_index.SvgCheckmark, {
-                    "aria-hidden": true
-                }) : null,
-                onClick: ()=>{
-                    if (option.disabled) return;
-                    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)) {
-                        let prevSelectedValue = value || [];
-                        let 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
-            });
-        }), [
-        hide,
-        itemRenderer,
-        multiple,
-        onChangeRef,
-        options,
-        value
-    ]);
-    let selectedItems = _react.useMemo(()=>{
-        if (null == value) return;
-        return isMultipleEnabled(value, multiple) ? options.filter((option)=>value.some((val)=>val === option.value)) : options.find((option)=>option.value === value);
-    }, [
-        multiple,
-        options,
-        value
-    ]);
-    let 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
-    ]);
-    let tagRenderer = _react.useCallback((item)=>_react.createElement(_SelectTag.SelectTag, {
-            key: item.label,
-            label: item.label
-        }), []);
-    let popover = (0, _Popover.usePopover)({
-        visible: isOpen,
-        matchWidth: true,
-        closeOnOutsideClick: true,
-        ...popoverProps,
-        onVisibleChange: (open)=>open ? show() : hide()
+const CustomSelect = _react.forwardRef((props, forwardedRef) => {
+  let uid = (0, _index.useId)();
+  let {
+    options,
+    value: valueProp,
+    onChange: onChangeProp,
+    placeholder,
+    disabled = false,
+    size,
+    itemRenderer,
+    selectedItemRenderer,
+    menuClassName,
+    menuStyle,
+    multiple = false,
+    triggerProps,
+    status,
+    popoverProps,
+    styleType,
+    ...rest
+  } = props;
+  let [isOpen, setIsOpen] = _react.useState(false);
+  let [liveRegionSelection, setLiveRegionSelection] = _react.useState('');
+  let [uncontrolledValue, setUncontrolledValue] = _react.useState();
+  let value = void 0 !== valueProp ? valueProp : uncontrolledValue;
+  let onChangeRef = (0, _index.useLatestRef)(onChangeProp);
+  let selectRef = _react.useRef(null);
+  let show = _react.useCallback(() => {
+    if (disabled) return;
+    setIsOpen(true);
+    popoverProps?.onVisibleChange?.(true);
+  }, [disabled, popoverProps]);
+  let hide = _react.useCallback(() => {
+    setIsOpen(false);
+    selectRef.current?.focus({
+      preventScroll: true,
     });
-    return _react.createElement(_react.Fragment, null, _react.createElement(_index.InputWithIcon, {
+    popoverProps?.onVisibleChange?.(false);
+  }, [popoverProps]);
+  let menuItems = _react.useMemo(
+    () =>
+      options.map((option, index) => {
+        let isSelected = isMultipleEnabled(value, multiple)
+          ? value?.includes(option.value) ?? false
+          : value === option.value;
+        let menuItem = itemRenderer
+          ? itemRenderer(option, {
+              close: () => setIsOpen(false),
+              isSelected,
+            })
+          : _react.createElement(_MenuItem.MenuItem, null, option.label);
+        let { label, icon, startIcon: startIconProp, ...restOption } = option;
+        let startIcon = startIconProp ?? icon;
+        return _react.cloneElement(menuItem, {
+          key: `${label}-${index}`,
+          isSelected,
+          startIcon: startIcon,
+          endIcon: isSelected
+            ? _react.createElement(_index.SvgCheckmark, {
+                'aria-hidden': true,
+              })
+            : null,
+          onClick: () => {
+            if (option.disabled) return;
+            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)) {
+              let prevSelectedValue = value || [];
+              let 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,
+        });
+      }),
+    [hide, itemRenderer, multiple, onChangeRef, options, value],
+  );
+  let selectedItems = _react.useMemo(() => {
+    if (null == value) return;
+    return isMultipleEnabled(value, multiple)
+      ? options.filter((option) => value.some((val) => val === option.value))
+      : options.find((option) => option.value === value);
+  }, [multiple, options, value]);
+  let 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]);
+  let tagRenderer = _react.useCallback(
+    (item) =>
+      _react.createElement(_SelectTag.SelectTag, {
+        key: item.label,
+        label: item.label,
+      }),
+    [],
+  );
+  let popover = (0, _Popover.usePopover)({
+    visible: isOpen,
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+    },
+    ...popoverProps,
+    onVisibleChange: (open) => (open ? show() : hide()),
+  });
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(
+      _index.InputWithIcon,
+      {
         ...rest,
-        ref: (0, _index.useMergedRefs)(popover.refs.setPositionReference, forwardedRef)
-    }, _react.createElement(SelectButton, {
-        ...popover.getReferenceProps(),
-        tabIndex: 0,
-        role: "combobox",
-        size: size,
-        status: status,
-        "aria-disabled": disabled ? 'true' : void 0,
-        "data-iui-disabled": disabled ? 'true' : void 0,
-        "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 || 0 === selectedItems.length) && !!placeholder
-        }, triggerProps?.className)
-    }, (!selectedItems || 0 === selectedItems.length) && _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, {
+        ref: (0, _index.useMergedRefs)(
+          popover.refs.setPositionReference,
+          forwardedRef,
+        ),
+      },
+      _react.createElement(
+        SelectButton,
+        {
+          ...popover.getReferenceProps(),
+          tabIndex: 0,
+          role: 'combobox',
+          size: size,
+          status: status,
+          'aria-disabled': disabled ? 'true' : void 0,
+          'data-iui-disabled': disabled ? 'true' : void 0,
+          '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 || 0 === selectedItems.length) && !!placeholder,
+            },
+            triggerProps?.className,
+          ),
+        },
+        (!selectedItems || 0 === selectedItems.length) &&
+          _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 })=>{
+        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 ('Tab' === key) hide();
-            }
-        }),
-        ref: popover.refs.setFloating
-    }, menuItems)));
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuItems,
+        ),
+      ),
+  );
 });
-const isMultipleEnabled = (variable, multiple)=>multiple;
-const isSingleOnChange = (onChange, multiple)=>!multiple;
-const SelectButton = _react.forwardRef((props, forwardedRef)=>{
-    let { size, status, styleType = 'default', ...rest } = props;
-    return _react.createElement(_index.Box, {
-        "data-iui-size": size,
-        "data-iui-status": status,
-        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
-        ...rest,
-        ref: forwardedRef,
-        className: (0, _classnames.default)('iui-select-button', 'iui-field', props.className)
-    });
+const isMultipleEnabled = (variable, multiple) => multiple;
+const isSingleOnChange = (onChange, multiple) => !multiple;
+const SelectButton = _react.forwardRef((props, forwardedRef) => {
+  let { size, status, styleType = 'default', ...rest } = props;
+  return _react.createElement(_index.Box, {
+    'data-iui-size': size,
+    'data-iui-status': status,
+    'data-iui-variant': 'default' !== styleType ? styleType : void 0,
+    ...rest,
+    ref: forwardedRef,
+    className: (0, _classnames.default)(
+      'iui-select-button',
+      'iui-field',
+      props.className,
+    ),
+  });
 });
-const SelectEndIcon = _react.forwardRef((props, forwardedRef)=>{
-    let { disabled, isOpen, ...rest } = props;
-    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 SelectEndIcon = _react.forwardRef((props, forwardedRef) => {
+  let { disabled, isOpen, ...rest } = props;
+  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 })=>{
-    let 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.Box, {
-        as: "span",
-        className: "iui-icon",
-        "aria-hidden": true
-    }, startIcon), _react.createElement(_index.Box, {
-        as: "span",
-        className: "iui-content"
-    }, selectedItem.label)));
-};
-const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer })=>{
-    let 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.Box, {
-        as: "span",
-        className: "iui-content"
-    }, _react.createElement(_SelectTagContainer.SelectTagContainer, {
-        tags: selectedItemsElements
-    })));
+const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
+  let 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.Box,
+            {
+              as: 'span',
+              className: 'iui-icon',
+              'aria-hidden': true,
+            },
+            startIcon,
+          ),
+        _react.createElement(
+          _index.Box,
+          {
+            as: 'span',
+            className: 'iui-content',
+          },
+          selectedItem.label,
+        ),
+      ),
+  );
 };
-const SelectListbox = _react.forwardRef((props, forwardedRef)=>{
-    let { defaultFocusedIndex = 0, autoFocus = true, children: childrenProp, className, ...rest } = props;
-    let [focusedIndex, setFocusedIndex] = _react.useState(defaultFocusedIndex);
-    let autoFocusRef = _react.useCallback((element)=>{
-        queueMicrotask(()=>{
-            let firstFocusable = element?.querySelector('[tabindex="0"]');
-            firstFocusable?.focus();
-        });
-    }, []);
-    let children = _react.useMemo(()=>_react.Children.map(childrenProp, (child, index)=>_react.isValidElement(child) ? _react.createElement(_react1.CompositeItem, {
-                key: index,
-                render: child,
-                ref: child.props.ref || child.ref
-            }) : child), [
-        childrenProp
-    ]);
-    return _react.createElement(_react1.Composite, {
-        render: _react.createElement(_List.List, {
-            as: "div",
-            className: (0, _classnames.default)('iui-menu', className)
+const MultipleSelectButton = ({
+  selectedItems,
+  selectedItemsRenderer,
+  tagRenderer,
+}) => {
+  let 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.Box,
+        {
+          as: 'span',
+          className: 'iui-content',
+        },
+        _react.createElement(_SelectTagContainer.SelectTagContainer, {
+          tags: selectedItemsElements,
         }),
-        orientation: "vertical",
-        role: "listbox",
-        activeIndex: focusedIndex,
-        onNavigate: setFocusedIndex,
-        ref: (0, _index.useMergedRefs)(forwardedRef, autoFocus ? autoFocusRef : void 0),
-        ...rest
-    }, children);
+      ),
+  );
+};
+const SelectListbox = _react.forwardRef((props, forwardedRef) => {
+  let {
+    defaultFocusedIndex = 0,
+    autoFocus = true,
+    children: childrenProp,
+    className,
+    ...rest
+  } = props;
+  let [focusedIndex, setFocusedIndex] = _react.useState(defaultFocusedIndex);
+  let autoFocusRef = _react.useCallback((element) => {
+    queueMicrotask(() => {
+      let firstFocusable = element?.querySelector('[tabindex="0"]');
+      firstFocusable?.focus();
+    });
+  }, []);
+  let children = _react.useMemo(
+    () =>
+      _react.Children.map(childrenProp, (child, index) =>
+        _react.isValidElement(child)
+          ? _react.createElement(_react1.CompositeItem, {
+              key: index,
+              render: child,
+              ref: child.props.ref || child.ref,
+            })
+          : child,
+      ),
+    [childrenProp],
+  );
+  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 : void 0,
+      ),
+      ...rest,
+    },
+    children,
+  );
 });