web/packages/design-system/lib/components/Select/Select.tsx

import {
  Select as AriaSelect,
  SelectValue,
  Popover,
  ListBox,
  Button,
} from "react-aria-components"
import { cx } from "class-variance-authority"

import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"
import { SelectItem } from "./SelectItem"
import { SelectFilter } from "./SelectFilter"

import type { SelectProps, SelectFilterProps } from "./types"

import styles from "./select.module.css"
import { useState } from "react"
import { InputLabel } from "../InputLabel"

export function Select({
  name,
  label,
  items,
  isDisabled,
  icon,
  itemIcon,
  popoverWidth,
  ...props
}: SelectProps | SelectFilterProps) {
  const [isOpen, setIsOpen] = useState(false)

  if (props.enableFiltering) {
    return (
      <SelectFilter
        name={name}
        label={label}
        items={items}
        icon={icon}
        itemIcon={itemIcon}
        {...props}
      />
    )
  }
  const iconColor = isDisabled ? "Icon/Interactive/Disabled" : "Icon/Default"

  return (
    <AriaSelect
      className={styles.select}
      name={name}
      aria-label={label}
      isDisabled={isDisabled}
      onOpenChange={setIsOpen}
      {...props}
    >
      <Button className={cx(styles.inner, styles.button)}>
        {icon ? (
          <MaterialIcon
            icon={icon}
            size={24}
            color={iconColor}
            aria-hidden="true"
          />
        ) : null}
        <SelectValue className={cx(styles.displayText, styles.selectValue)}>
          {({ selectedText }) => {
            return (
              <>
                <InputLabel
                  className={styles.label}
                  selected={Boolean(selectedText || isOpen)}
                >
                  {label}
                </InputLabel>
                <Typography variant="Body/Paragraph/mdRegular">
                  <span className={styles.selectedText}>{selectedText}</span>
                </Typography>
              </>
            )
          }}
        </SelectValue>

        <MaterialIcon
          icon="chevron_right"
          size={24}
          color={iconColor}
          aria-hidden="true"
          className={styles.chevron}
        />
      </Button>

      <Popover
        className={styles.popover}
        style={popoverWidth ? { minWidth: popoverWidth } : undefined}
        shouldFlip={false}
      >
        <ListBox className={styles.listBox}>
          {items.map((item, idx) => (
            <SelectItem
              key={`${item.value}-${idx}`}
              id={item.value}
              icon={item.icon || itemIcon}
              isDisabled={item.isDisabled}
            >
              {item.label}
            </SelectItem>
          ))}
        </ListBox>
      </Popover>
    </AriaSelect>
  )
}