@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Select/Select.js

@@ -1,290 +1,472 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { MenuItem } from '../Menu/MenuItem.js';
-import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, useLatestRef, InputWithIcon, mergeEventHandlers, } from '../../utils/index.js';
+import {
+  SvgCaretDownSmall,
+  useId,
+  AutoclearingHiddenLiveRegion,
+  Box,
+  Portal,
+  useMergedRefs,
+  SvgCheckmark,
+  useLatestRef,
+  InputWithIcon,
+  mergeEventHandlers,
+} from '../../utils/index.js';
 import { SelectTag } from './SelectTag.js';
 import { SelectTagContainer } from './SelectTagContainer.js';
 import { Icon } from '../Icon/Icon.js';
 import { usePopover } from '../Popover/Popover.js';
 import { List } from '../List/List.js';
 import { Composite, CompositeItem } from '@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>
- *   )}
- * />
- */
 export const 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 });
+  const { native, ...rest } = props;
+  const Component = native ? NativeSelect : CustomSelect;
+  return React.createElement(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(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: 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: 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 {
+    triggerProps,
+    options,
+    disabled,
+    placeholder,
+    defaultValue: defaultValueProp = placeholder !== undefined ? '' : undefined,
+    value: valueProp,
+    onChange: onChangeProp,
+    size,
+    status,
+    styleType,
+    required,
+    ...rest
+  } = props;
+  return React.createElement(
+    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: mergeEventHandlers(triggerProps?.onKeyDown, (event) => {
+          if (event.key === 'Enter') {
+            event.currentTarget.showPicker?.();
+          }
+        }),
+        onChange: 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 CustomSelect = React.forwardRef((props, forwardedRef) => {
-    const uid = 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 = useLatestRef(onChangeProp);
-    const selectRef = React.useRef(null);
-    const show = React.useCallback(() => {
-        if (disabled) {
+  const uid = 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 = 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,
+          })
+        : React.createElement(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(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, 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(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, { key: item.label, label: item.label });
-    }, []);
-    const popover = usePopover({
-        visible: isOpen,
-        matchWidth: true,
-        closeOnOutsideClick: true,
-        ...popoverProps,
-        onVisibleChange: (open) => (open ? show() : hide()),
+          }
+        },
+        role: 'option',
+        ...restOption,
+        ...menuItem.props,
+      });
+    });
+  }, [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, {
+      key: item.label,
+      label: item.label,
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputWithIcon, { ...rest, ref: 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: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference), className: cx({
-                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
-                }, 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 popover = usePopover({
+    visible: isOpen,
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    ...popoverProps,
+    onVisibleChange: (open) => (open ? show() : hide()),
+  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      InputWithIcon,
+      {
+        ...rest,
+        ref: 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: useMergedRefs(
+            selectRef,
+            triggerProps?.ref,
+            popover.refs.setReference,
+          ),
+          className: cx(
+            {
+              'iui-placeholder':
+                (!selectedItems || selectedItems.length === 0) && !!placeholder,
+            },
+            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,
+        ),
+      ),
+  );
 });
-// ----------------------------------------------------------------------------
-// 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(Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: cx('iui-select-button', 'iui-field', props.className) }));
+  const { size, status, styleType = 'default', ...rest } = props;
+  return React.createElement(Box, {
+    'data-iui-size': size,
+    'data-iui-status': status,
+    'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+    ...rest,
+    ref: forwardedRef,
+    className: cx('iui-select-button', 'iui-field', props.className),
+  });
 });
-// ----------------------------------------------------------------------------
 const SelectEndIcon = React.forwardRef((props, forwardedRef) => {
-    const { disabled, isOpen, ...rest } = props;
-    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 { disabled, isOpen, ...rest } = props;
+  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 (React.createElement(React.Fragment, null,
-        selectedItem &&
-            selectedItemRenderer &&
-            selectedItemRenderer(selectedItem),
-        selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
-            startIcon && (React.createElement(Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
-            React.createElement(Box, { as: 'span', className: 'iui-content' }, selectedItem.label)))));
+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(
+            Box,
+            {
+              as: 'span',
+              className: 'iui-icon',
+              'aria-hidden': true,
+            },
+            startIcon,
+          ),
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-content',
+          },
+          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(Box, { as: 'span', className: 'iui-content' },
-            React.createElement(SelectTagContainer, { tags: selectedItemsElements })))));
+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(
+        Box,
+        {
+          as: 'span',
+          className: 'iui-content',
+        },
+        React.createElement(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(CompositeItem, { key: index, render: child, ref: child.props.ref || child.ref })) : (child));
-    }, [childrenProp]);
-    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));
+  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(CompositeItem, {
+            key: index,
+            render: child,
+            ref: child.props.ref || child.ref,
+          })
+        : child,
+    );
+  }, [childrenProp]);
+  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,
+  );
 });