@itwin/itwinui-react 3.13.4 → 3.14.0

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

@@ -1,29 +1,58 @@
 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';
-export const Select = React.forwardRef((props, forwardedRef)=>{
-    let { native, ...rest } = props;
-    let Component = native ? NativeSelect : CustomSelect;
-    return React.createElement(Component, {
-        ...rest,
-        ref: forwardedRef
-    });
+export 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';
-let 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(InputWithIcon, {
-        ...rest,
-        ref: forwardedRef
-    }, React.createElement(SelectButton, {
-        as: "select",
+let 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(
+    InputWithIcon,
+    {
+      ...rest,
+      ref: forwardedRef,
+    },
+    React.createElement(
+      SelectButton,
+      {
+        as: 'select',
         size: size,
         status: status,
         styleType: styleType,
@@ -32,257 +61,406 @@ let NativeSelect = React.forwardRef((props, forwardedRef)=>{
         value: null === valueProp ? '' : valueProp,
         required: required,
         ...triggerProps,
-        onKeyDown: mergeEventHandlers(triggerProps?.onKeyDown, (event)=>{
-            if ('Enter' === event.key) event.currentTarget.showPicker?.();
+        onKeyDown: mergeEventHandlers(triggerProps?.onKeyDown, (event) => {
+          if ('Enter' === event.key) event.currentTarget.showPicker?.();
         }),
-        onChange: 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", {
+        onChange: 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',
+          {
             key: option.value,
-            ...option
-        }, option.label))), React.createElement(SelectEndIcon, {
-        disabled: disabled
-    }));
+            ...option,
+          },
+          option.label,
+        ),
+      ),
+    ),
+    React.createElement(SelectEndIcon, {
+      disabled: disabled,
+    }),
+  );
 });
-let CustomSelect = React.forwardRef((props, forwardedRef)=>{
-    let uid = 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 = 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, 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(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, {
-            key: item.label,
-            label: item.label
-        }), []);
-    let popover = usePopover({
-        visible: isOpen,
-        matchWidth: true,
-        closeOnOutsideClick: true,
-        ...popoverProps,
-        onVisibleChange: (open)=>open ? show() : hide()
+let CustomSelect = React.forwardRef((props, forwardedRef) => {
+  let uid = 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 = 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(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, 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(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, {
+        key: item.label,
+        label: item.label,
+      }),
+    [],
+  );
+  let 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(
+      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' : 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: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference),
-        className: cx({
-            'iui-placeholder': (!selectedItems || 0 === selectedItems.length) && !!placeholder
-        }, triggerProps?.className)
-    }, (!selectedItems || 0 === selectedItems.length) && 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, {
+        ref: 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: useMergedRefs(
+            selectRef,
+            triggerProps?.ref,
+            popover.refs.setReference,
+          ),
+          className: cx(
+            {
+              'iui-placeholder':
+                (!selectedItems || 0 === selectedItems.length) && !!placeholder,
+            },
+            triggerProps?.className,
+          ),
+        },
+        (!selectedItems || 0 === selectedItems.length) &&
+          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 })=>{
+        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 ('Tab' === key) hide();
-            }
-        }),
-        ref: popover.refs.setFloating
-    }, menuItems)));
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuItems,
+        ),
+      ),
+  );
 });
-let isMultipleEnabled = (variable, multiple)=>multiple;
-let isSingleOnChange = (onChange, multiple)=>!multiple;
-let SelectButton = React.forwardRef((props, forwardedRef)=>{
-    let { size, status, styleType = 'default', ...rest } = props;
-    return React.createElement(Box, {
-        "data-iui-size": size,
-        "data-iui-status": status,
-        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
-        ...rest,
-        ref: forwardedRef,
-        className: cx('iui-select-button', 'iui-field', props.className)
-    });
+let isMultipleEnabled = (variable, multiple) => multiple;
+let isSingleOnChange = (onChange, multiple) => !multiple;
+let SelectButton = React.forwardRef((props, forwardedRef) => {
+  let { size, status, styleType = 'default', ...rest } = props;
+  return React.createElement(Box, {
+    'data-iui-size': size,
+    'data-iui-status': status,
+    'data-iui-variant': 'default' !== styleType ? styleType : void 0,
+    ...rest,
+    ref: forwardedRef,
+    className: cx('iui-select-button', 'iui-field', props.className),
+  });
 });
-let SelectEndIcon = React.forwardRef((props, forwardedRef)=>{
-    let { 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));
+let SelectEndIcon = React.forwardRef((props, forwardedRef) => {
+  let { 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),
+  );
 });
-let 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(Box, {
-        as: "span",
-        className: "iui-icon",
-        "aria-hidden": true
-    }, startIcon), React.createElement(Box, {
-        as: "span",
-        className: "iui-content"
-    }, selectedItem.label)));
-};
-let 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(Box, {
-        as: "span",
-        className: "iui-content"
-    }, React.createElement(SelectTagContainer, {
-        tags: selectedItemsElements
-    })));
+let 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(
+            Box,
+            {
+              as: 'span',
+              className: 'iui-icon',
+              'aria-hidden': true,
+            },
+            startIcon,
+          ),
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-content',
+          },
+          selectedItem.label,
+        ),
+      ),
+  );
 };
-let 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(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)
+let 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(
+        Box,
+        {
+          as: 'span',
+          className: 'iui-content',
+        },
+        React.createElement(SelectTagContainer, {
+          tags: selectedItemsElements,
         }),
-        orientation: "vertical",
-        role: "listbox",
-        activeIndex: focusedIndex,
-        onNavigate: setFocusedIndex,
-        ref: useMergedRefs(forwardedRef, autoFocus ? autoFocusRef : void 0),
-        ...rest
-    }, children);
+      ),
+  );
+};
+let 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(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 : void 0),
+      ...rest,
+    },
+    children,
+  );
 });