'use client' import { ReactElement, useState } from 'react' import { Button, type Key, ListBox, ListBoxItem, Popover, Select as ReactAriaSelect, SelectValue, } from 'react-aria-components' import SelectChevron from './SelectChevron' import styles from './select.module.css' import Body from '../Body' import { Label } from '../Label' interface SelectProps extends Omit< React.SelectHTMLAttributes, 'onSelect' > { defaultSelectedKey?: Key items: { label: string; value: Key }[] label: string name: string onSelect: (key: Key) => void value?: string | number maxHeight?: number showRadioButton?: boolean discreet?: boolean isNestedInModal?: boolean // eslint-disable-next-line @typescript-eslint/no-explicit-any optionsIcon?: ReactElement } type SelectPortalContainer = HTMLDivElement | undefined type SelectPortalContainerArgs = HTMLDivElement | null const DELIMITER = ':' /** * @deprecated Do not use. */ export default function Select({ className = '', 'aria-label': ariaLabel, defaultSelectedKey, items, label, name, onSelect, disabled, required = false, tabIndex, value, maxHeight, showRadioButton = false, discreet = false, isNestedInModal = false, optionsIcon, }: SelectProps) { const [rootDiv, setRootDiv] = useState(undefined) const setOverflowVisible = useSetOverflowVisibleOnRA(isNestedInModal) function setRef(node: SelectPortalContainerArgs) { if (node) { setRootDiv(node) } } function handleOnSelect(key: Key | null) { if (key !== null) { onSelect(key) } } let chevronProps = {} if (discreet) { chevronProps = { color: 'baseButtonTextOnFillNormal' } } else if (disabled) { chevronProps = { color: 'disabled' } } return (

{items.map((item) => ( {optionsIcon} {item.label} ))}

) } function useSetOverflowVisibleOnRA(isNestedInModal?: boolean) { function setOverflowVisible(isOpen: boolean) { if (isOpen) { document.body.style.overflow = 'visible' } else if (!isNestedInModal) { document.body.style.overflow = '' } } return setOverflowVisible }