Autoheight

import { useState } from "react";
import {
  BrowserIcon,
  Button,
  ChipIcon,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSearch,
  DropdownMenuSub,
  DropdownMenuSubPanel,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@smallest-inc/ui";

export default function DropdownMenuInlineSubmenu() {
  const [query, setQuery] = useState("");
  const show = (label: string) => label.toLowerCase().includes(query.trim().toLowerCase());

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="secondary" />}>Filter</DropdownMenuTrigger>
      <DropdownMenuContent className="w-72">
        <DropdownMenuSearch
          placeholder="Search"
          aria-label="Search filters"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
        />
        <DropdownMenuLabel>Filter by</DropdownMenuLabel>
        {show("Model") ? (
          <DropdownMenuSub name="model" variant="inline">
            <DropdownMenuSubTrigger leading={<ChipIcon />}>Model</DropdownMenuSubTrigger>
            <DropdownMenuSubPanel title="Model">
              <DropdownMenuRadioGroup defaultValue="fast">
                <DropdownMenuRadioItem value="fast">Fast</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="quality">Quality</DropdownMenuRadioItem>
              </DropdownMenuRadioGroup>
            </DropdownMenuSubPanel>
          </DropdownMenuSub>
        ) : null}
        {show("Browser") ? (
          <DropdownMenuSub name="browser" variant="inline">
            <DropdownMenuSubTrigger leading={<BrowserIcon />}>Browser</DropdownMenuSubTrigger>
            <DropdownMenuSubPanel title="Browser">
              <DropdownMenuCheckboxItem defaultChecked>Chrome</DropdownMenuCheckboxItem>
              <DropdownMenuCheckboxItem>Safari</DropdownMenuCheckboxItem>
              <DropdownMenuCheckboxItem>Firefox</DropdownMenuCheckboxItem>
            </DropdownMenuSubPanel>
          </DropdownMenuSub>
        ) : null}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { useState } from "react";
import {
  Button,
  ChevronsUpDownIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuFooter,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSearch,
  DropdownMenuSub,
  DropdownMenuSubPanel,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  Flag,
  FlagIcon,
  PlusIcon,
  type FlagCountry,
} from "@smallest-inc/ui";

const LANGUAGES: { name: string; country: FlagCountry }[] = [
  { name: "Arabic", country: "SA" },
  { name: "Bengali", country: "BD" },
  { name: "Chinese", country: "CN" },
  { name: "Dutch", country: "NL" },
  { name: "English", country: "GB" },
  { name: "French", country: "FR" },
  { name: "German", country: "DE" },
  { name: "Hindi", country: "IN" },
  { name: "Italian", country: "IT" },
  { name: "Japanese", country: "JP" },
  { name: "Korean", country: "KR" },
  { name: "Portuguese", country: "PT" },
  { name: "Spanish", country: "ES" },
  { name: "Tamil", country: "IN" },
];

const OPERATORS = ["is", "is not"];

function OperatorSelect({ value, onValueChange }: { value: string; onValueChange: (value: string) => void }) {
  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger
        render={
          <Button
            variant="transparent"
            size="sm"
            className="gap-1.5 rounded-lg px-2 font-normal text-fg-quaternary hover:bg-neutral-150 hover:text-fg"
          />
        }
      >
        {value}
        <ChevronsUpDownIcon radius="0" className="size-[18px] text-fg-quaternary" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" sideOffset={6} className="w-36">
        <DropdownMenuRadioGroup value={value} onValueChange={(next) => onValueChange(String(next))}>
          {OPERATORS.map((operator) => (
            <DropdownMenuRadioItem key={operator} value={operator}>
              {operator}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default function DropdownMenuSubmenuHeader() {
  const [query, setQuery] = useState("");
  const [operator, setOperator] = useState("is");
  const [language, setLanguage] = useState("English");
  const matches = LANGUAGES.filter((item) => item.name.toLowerCase().includes(query.trim().toLowerCase()));

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="secondary" />}>Filter</DropdownMenuTrigger>
      <DropdownMenuContent className="w-72">
        <DropdownMenuLabel>Filter agents by</DropdownMenuLabel>
        <DropdownMenuSub name="language" variant="inline">
          <DropdownMenuSubTrigger
            leading={<FlagIcon />}
            trailing={<span className="text-fg-tertiary">{operator} {language}</span>}
          >
            Language
          </DropdownMenuSubTrigger>
          <DropdownMenuSubPanel
            title="Language"
            aside={<OperatorSelect value={operator} onValueChange={setOperator} />}
            search={
              <DropdownMenuSearch
                placeholder="Search languages"
                aria-label="Search languages"
                value={query}
                onChange={(event) => setQuery(event.target.value)}
              />
            }
          >
            <DropdownMenuRadioGroup value={language} onValueChange={(next) => setLanguage(String(next))}>
              {matches.map((item) => (
                <DropdownMenuRadioItem
                  key={item.name}
                  value={item.name}
                  leading={<Flag country={item.country} title={item.name} />}
                >
                  {item.name}
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
            <DropdownMenuFooter>
              <DropdownMenuItem leading={<PlusIcon />}>Add custom language</DropdownMenuItem>
            </DropdownMenuFooter>
          </DropdownMenuSubPanel>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { useState } from "react";
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSearch,
  DropdownMenuTrigger,
} from "@smallest-inc/ui";

const VOICES = [
  "Aria, warm",
  "Arjun, calm",
  "Elena, bright",
  "Hana, soft",
  "Kofi, deep",
  "Lucas, energetic",
  "Mei, clear",
  "Omar, steady",
  "Priya, friendly",
  "Rohan, confident",
  "Sofia, gentle",
  "Tomás, relaxed",
];

export default function DropdownMenuSearchExample() {
  const [query, setQuery] = useState("");
  const [voice, setVoice] = useState("Aria, warm");
  const matches = VOICES.filter((item) => item.toLowerCase().includes(query.trim().toLowerCase()));

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="secondary" />}>Voice</DropdownMenuTrigger>
      <DropdownMenuContent className="w-64">
        <DropdownMenuSearch
          placeholder="Search voices"
          aria-label="Search voices"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
        />
        {matches.length === 0 ? <DropdownMenuLabel>No voices match “{query}”</DropdownMenuLabel> : null}
        <DropdownMenuRadioGroup value={voice} onValueChange={(next) => setVoice(String(next))}>
          {matches.map((item) => (
            <DropdownMenuRadioItem key={item} value={item}>
              {item}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { useState } from "react";
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuFooter,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSearch,
  DropdownMenuTrigger,
  Flag,
  type FlagCountry,
} from "@smallest-inc/ui";

const LANGUAGES: { name: string; country: FlagCountry }[] = [
  { name: "Arabic", country: "SA" },
  { name: "Bengali", country: "BD" },
  { name: "Chinese", country: "CN" },
  { name: "English", country: "GB" },
  { name: "French", country: "FR" },
  { name: "German", country: "DE" },
  { name: "Hindi", country: "IN" },
  { name: "Indonesian", country: "ID" },
  { name: "Japanese", country: "JP" },
  { name: "Korean", country: "KR" },
  { name: "Spanish", country: "ES" },
  { name: "Tamil", country: "IN" },
  { name: "Thai", country: "TH" },
  { name: "Vietnamese", country: "VN" },
];

export default function DropdownMenuFooterCaption() {
  const [query, setQuery] = useState("");
  const [language, setLanguage] = useState("English");
  const matches = LANGUAGES.filter((item) => item.name.toLowerCase().includes(query.trim().toLowerCase()));

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="secondary" />}>Language</DropdownMenuTrigger>
      <DropdownMenuContent className="w-72">
        <DropdownMenuSearch
          placeholder="Search languages"
          aria-label="Search languages"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
        />
        <DropdownMenuRadioGroup value={language} onValueChange={(next) => setLanguage(String(next))}>
          {matches.map((item) => (
            <DropdownMenuRadioItem
              key={item.name}
              value={item.name}
              leading={<Flag country={item.country} title={item.name} />}
            >
              {item.name}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
        <DropdownMenuFooter variant="caption">Can’t find a language? Request it from support.</DropdownMenuFooter>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}