"use client" import { useState } from "react" import { Button, type Key, ListBox, ListBoxItem, Popover, Select as ReactAriaSelect, SelectValue, } from "react-aria-components" import Body from "@scandic-hotels/design-system/Body" import { Label } from "@scandic-hotels/design-system/Label" import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA" import SelectChevron from "../Form/SelectChevron" import styles from "./select.module.css" import type { SelectPortalContainer, SelectPortalContainerArgs, SelectProps, } from "./select" 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) { onSelect(key) } let chevronProps = {} if (discreet) { chevronProps = { color: "baseButtonTextOnFillNormal" } } else if (disabled) { chevronProps = { color: "disabled" } } return (

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

) }