Select

1"use client";
2 
3import { Select as SelectPrimitive } from "@base-ui/react/select";
4import { CaretDown, Check } from "@phosphor-icons/react/dist/ssr";
5import { createContext, useContext, useState } from "react";
6import type * as React from "react";
7import { createPortal } from "react-dom";
8import { RemoveScroll } from "react-remove-scroll";
9import { cn } from "@/lib/utils";
10import {
11  itemRow,
12  mobilePopupBackdrop,
13  mobilePopupSurface,
14  overlayLayer,
15  popupSurface,
16  popupTriggerOpen,
17  selectionFocus,
18} from "@/lib/recipes";
19import {
20  MOBILE_MEDIA_QUERY,
21  useMediaQuery,
22} from "../hooks/use-media-query";
23import { Spinner } from "@/components/ui/spinner";
24 
25export type SelectSize = "sm" | "md" | "lg";
26export type SelectVariant = "default" | "unstyled";
27 
28export interface SelectProps
29  extends Omit<
30    React.ComponentProps<typeof SelectPrimitive.Root>,
31    "value" | "defaultValue" | "onValueChange" | "items"
32  > {
33  value?: string;
34  defaultValue?: string;
35  onValueChange?: (value: string) => void;
36  size?: SelectSize;
37  /** Removes trigger chrome when embedded in a composite surface. */
38  variant?: SelectVariant;
39  /** Content rendered at the start (icon, unit symbol). */
40  prefix?: React.ReactNode;
41  /** Content rendered at the end (before the chevron). */
42  suffix?: React.ReactNode;
43  /** Associates the trigger with a label. */
44  id?: string;
45  /** IDs of elements that describe the trigger. */
46  "aria-describedby"?: string;
47  /** Marks the trigger invalid. Pair with FieldError for its message. */
48  invalid?: boolean;
49  /** Placeholder text shown when no value is selected. */
50  placeholder?: string;
51  /** Class name applied to the trigger. */
52  className?: string;
53  /** Marks the trigger and popup list busy and shows SelectLoading. */
54  loading?: boolean;
55  /** Renders the trigger's selected-value display. Base UI's `Select.Value`
56   *  defaults to showing the raw `value` string, which surfaces ugly ids
57   *  (uuids, slugs) when the option label doesn't match the value. Pass a
58   *  mapper so consumers control the display without rebuilding the
59   *  trigger. Return `null` to fall through to the placeholder. */
60  renderValue?: (value: string) => React.ReactNode;
61}
62 
63const heightBySize: Record<SelectSize, string> = {
64  sm: "h-6 text-small",
65  md: "h-8 text-small",
66  lg: "h-10 text-regular",
67};
68 
69const leadingPad: Record<SelectSize, string> = {
70  sm: "ps-3",
71  md: "ps-3",
72  lg: "ps-3.5",
73};
74 
75const trailingPad: Record<SelectSize, string> = {
76  sm: "pe-7",
77// … truncated