Combobox

import {  Combobox,  ComboboxField,  ComboboxFieldLabel,  ComboboxInputGroup,  ComboboxInput,  ComboboxControlActions,  ComboboxClear,  ComboboxTrigger,  ComboboxContent,  ComboboxEmpty,  ComboboxList,  ComboboxItem,  ComboboxItemIndicator,  ComboboxItemText,} from "moduix";import { useId } from "react";export function ComboboxDemo() {  const id = useId();  return (    <Combobox items={fruits} itemToStringLabel={(item) => item.label}>      <ComboboxField>        <ComboboxFieldLabel htmlFor={id}>Choose fruit</ComboboxFieldLabel>        <ComboboxInputGroup>          <ComboboxInput id={id} placeholder="e.g. Mango" />          <ComboboxControlActions>            <ComboboxClear aria-label="Clear selection" />            <ComboboxTrigger aria-label="Open options" />          </ComboboxControlActions>        </ComboboxInputGroup>      </ComboboxField>      <ComboboxContent>        <ComboboxEmpty>No fruits found.</ComboboxEmpty>        <ComboboxList>          {(item) => (            <ComboboxItem key={item.id} value={item}>              <ComboboxItemIndicator />              <ComboboxItemText>{item.label}</ComboboxItemText>            </ComboboxItem>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

const fruits = [  { id: "apple", label: "Apple", value: "apple" },  { id: "banana", label: "Banana", value: "banana" },  { id: "mango", label: "Mango", value: "mango" },];

import {  Combobox,  ComboboxField,  ComboboxFieldLabel,  ComboboxInputGroup,  ComboboxInput,  ComboboxControlActions,  ComboboxClear,  ComboboxTrigger,  ComboboxContent,  ComboboxList,  ComboboxItem,  ComboboxItemText,  ComboboxItemTextContent,  ComboboxItemTextIcon,  InfoIcon,  ComboboxItemTextLabel,  ComboboxItemIndicator,} from "moduix";import { useId } from "react";export function IndicatorRightComboboxDemo() {  const id = useId();  return (    <Combobox items={fruits} itemToStringLabel={(item) => item.label}>      <ComboboxField>        <ComboboxFieldLabel htmlFor={id}>Choose fruit</ComboboxFieldLabel>        <ComboboxInputGroup>          <ComboboxInput id={id} placeholder="e.g. Mango" />          <ComboboxControlActions>            <ComboboxClear aria-label="Clear selection" />            <ComboboxTrigger aria-label="Open options" />          </ComboboxControlActions>        </ComboboxInputGroup>      </ComboboxField>      <ComboboxContent>        <ComboboxList>          {(item) => (            <ComboboxItem key={item.id} value={item} indicator="end">              <ComboboxItemText>                <ComboboxItemTextContent>                  <ComboboxItemTextIcon>                    <InfoIcon />                  </ComboboxItemTextIcon>                  <ComboboxItemTextLabel>{item.label}</ComboboxItemTextLabel>                </ComboboxItemTextContent>              </ComboboxItemText>              <ComboboxItemIndicator />            </ComboboxItem>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

const fruits = [  { id: "apple", label: "Apple", value: "apple" },  { id: "banana", label: "Banana", value: "banana" },  { id: "mango", label: "Mango", value: "mango" },];

import {  Combobox,  ComboboxField,  ComboboxFieldLabel,  ComboboxTrigger,  ComboboxValue,  ComboboxIcon,  ComboboxContent,  ComboboxInlineInputContainer,  ComboboxInput,  ComboboxEmpty,  ComboboxList,  ComboboxItem,  ComboboxItemIndicator,  ComboboxItemText,} from "moduix";import styles from "./combobox.module.css";export function InputInsidePopupComboboxDemo() {  return (    <Combobox items={countries} itemToStringLabel={(item) => item.label}>      <ComboboxField>        <ComboboxFieldLabel>Country</ComboboxFieldLabel>        <ComboboxTrigger className={styles.triggerField}>          <ComboboxValue placeholder="Select country" />          <ComboboxIcon />        </ComboboxTrigger>      </ComboboxField>      <ComboboxContent className={styles.popupWithInlineInput}>        <ComboboxInlineInputContainer>          <ComboboxInput className={styles.inlineInput} placeholder="Search country" />        </ComboboxInlineInputContainer>        <ComboboxEmpty>No countries found.</ComboboxEmpty>        <ComboboxList className={styles.listWithInlineInput}>          {(item) => (            <ComboboxItem key={item.id} value={item}>              <ComboboxItemIndicator />              <ComboboxItemText>{item.label}</ComboboxItemText>            </ComboboxItem>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

.triggerField {  display: inline-flex;  width: var(--combobox-width, 16rem);  min-height: var(--combobox-control-height, var(--size-lg));  align-items: center;  justify-content: space-between;  gap: 0.75rem;  padding: 0 0.875rem;  border: var(--border-width-sm) solid var(--combobox-border-color, var(--color-border));  border-radius: var(--combobox-radius, var(--radius-md));  background-color: var(--combobox-bg, var(--color-background));  color: var(--combobox-color, var(--color-foreground));  transition:    background-color var(--transition-default),    border-color var(--transition-default),    outline-color var(--transition-default);  &[data-popup-open] {    background-color: var(--color-muted);  }  &:focus-visible {    border-color: var(--combobox-focus-ring-color, var(--color-ring));    outline: var(--border-width-sm) solid var(--combobox-focus-ring-color, var(--color-ring));    outline-offset: calc(var(--border-width-sm) * -1);  }}.popupWithInlineInput {  --combobox-inline-input-container-height: calc(    var(--combobox-control-height, var(--size-lg)) +      var(--combobox-inline-input-container-padding-top, var(--spacing-2)) +      var(--combobox-inline-input-container-padding-bottom, var(--spacing-2)) +      var(--combobox-inline-input-divider-width, var(--border-width-sm))  );}.listWithInlineInput {  max-height: min(    calc(      var(--combobox-list-max-height, var(--combobox-popup-max-height, 24rem)) -        var(--combobox-inline-input-container-height, 0px)    ),    calc(var(--available-height) - var(--combobox-inline-input-container-height, 0px))  );  padding-top: 0.375rem;  padding-bottom: 0.5rem;  scroll-padding-top: 0.375rem;  scroll-padding-bottom: 0.5rem;}.inlineInput {  padding-inline: 0.75rem;  border: var(--border-width-sm) solid var(--combobox-border-color, var(--color-border));  border-radius: var(--radius-sm);}

const countries = [  { id: "de", label: "Germany", value: "germany" },  { id: "es", label: "Spain", value: "spain" },  { id: "fr", label: "France", value: "france" },];

import {  Combobox,  ComboboxField,  ComboboxFieldLabel,  ComboboxInputGroup,  ComboboxInput,  ComboboxControlActions,  ComboboxClear,  ComboboxTrigger,  ComboboxContent,  ComboboxEmpty,  ComboboxList,  ComboboxGroup,  ComboboxGroupLabel,  ComboboxCollection,  ComboboxItem,  ComboboxItemIndicator,  ComboboxItemText,} from "moduix";import { useId } from "react";export function GroupedComboboxDemo() {  const id = useId();  return (    <Combobox items={groupedProduce} itemToStringLabel={(item) => item.label}>      <ComboboxField>        <ComboboxFieldLabel htmlFor={id}>Select produce</ComboboxFieldLabel>        <ComboboxInputGroup>          <ComboboxInput id={id} placeholder="e.g. Spinach" />          <ComboboxControlActions>            <ComboboxClear aria-label="Clear selection" />            <ComboboxTrigger aria-label="Open groups" />          </ComboboxControlActions>        </ComboboxInputGroup>      </ComboboxField>      <ComboboxContent>        <ComboboxEmpty>No produce found.</ComboboxEmpty>        <ComboboxList>          {(group) => (            <ComboboxGroup key={group.value} items={group.items}>              <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>              <ComboboxCollection>                {(item) => (                  <ComboboxItem key={item.id} value={item}>                    <ComboboxItemIndicator />                    <ComboboxItemText>{item.label}</ComboboxItemText>                  </ComboboxItem>                )}              </ComboboxCollection>            </ComboboxGroup>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

const groupedProduce = [  {    value: "Fruits",    items: [      { id: "fruit-apple", label: "Apple", value: "apple" },      { id: "fruit-mango", label: "Mango", value: "mango" },    ],  },  {    value: "Vegetables",    items: [      { id: "veg-carrot", label: "Carrot", value: "carrot" },      { id: "veg-spinach", label: "Spinach", value: "spinach" },    ],  },];

import {  Combobox,  ComboboxField,  ComboboxFieldLabel,  ComboboxInputGroup,  ComboboxChips,  ComboboxValue,  ComboboxChip,  ComboboxChipText,  ComboboxChipRemove,  ComboboxChipsInput,  ComboboxContent,  ComboboxEmpty,  ComboboxList,  ComboboxItem,  ComboboxItemIndicator,  ComboboxItemText,} from "moduix";import { useId } from "react";export function MultipleComboboxDemo() {  const id = useId();  return (    <Combobox items={fruits} itemToStringLabel={(item) => item.label} multiple>      <ComboboxField>        <ComboboxFieldLabel htmlFor={id}>Select fruits</ComboboxFieldLabel>        <ComboboxInputGroup>          <ComboboxChips>            <ComboboxValue>              {(value) => (                <>                  {value.map((item) => (                    <ComboboxChip key={item.id} aria-label={item.label}>                      <ComboboxChipText>{item.label}</ComboboxChipText>                      <ComboboxChipRemove aria-label={`Remove ${item.label}`} />                    </ComboboxChip>                  ))}                  <ComboboxChipsInput                    id={id}                    placeholder={value.length === 0 ? "Select..." : ""}                  />                </>              )}            </ComboboxValue>          </ComboboxChips>        </ComboboxInputGroup>      </ComboboxField>      <ComboboxContent>        <ComboboxEmpty>No fruits found.</ComboboxEmpty>        <ComboboxList>          {(item) => (            <ComboboxItem key={item.id} value={item}>              <ComboboxItemIndicator />              <ComboboxItemText>{item.label}</ComboboxItemText>            </ComboboxItem>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

const fruits = [  { id: "apple", label: "Apple", value: "apple" },  { id: "banana", label: "Banana", value: "banana" },  { id: "mango", label: "Mango", value: "mango" },];

import {  Combobox,  ComboboxField,  ComboboxFieldLabel,  ComboboxInputGroup,  ComboboxInput,  ComboboxControlActions,  ComboboxClear,  ComboboxTrigger,  ComboboxContent,  ComboboxStatus,  ComboboxEmpty,  ComboboxList,  ComboboxItem,  ComboboxItemIndicator,  ComboboxItemText,  useComboboxFilter,} from "moduix";import { useId, useMemo, useRef, useState, useTransition } from "react";export function AsyncSearchComboboxDemo() {  const id = useId();  const { contains } = useComboboxFilter();  const [searchResults, setSearchResults] = useState([]);  const [selectedValue, setSelectedValue] = useState(null);  const [searchValue, setSearchValue] = useState("");  const [isPending, startTransition] = useTransition();  const abortControllerRef = useRef(null);  const trimmedSearchValue = searchValue.trim();  const items = useMemo(() => {    if (!selectedValue || searchResults.some((user) => user.id === selectedValue.id)) {      return searchResults;    }    return [...searchResults, selectedValue];  }, [searchResults, selectedValue]);  const status = isPending    ? "Searching..."    : trimmedSearchValue === ""      ? selectedValue ? null : "Start typing to search people..."      : searchResults.length === 0        ? `No matches for "${trimmedSearchValue}".`        : null;  return (    <Combobox      items={items}      itemToStringLabel={(user) => user.name}      filter={null}      onValueChange={(nextSelectedValue) => {        setSelectedValue(nextSelectedValue);        setSearchValue("");      }}      onInputValueChange={(nextSearchValue, { reason }) => {        setSearchValue(nextSearchValue);        if (nextSearchValue === "") {          abortControllerRef.current?.abort();          setSearchResults([]);          return;        }        if (reason === "item-press") {          return;        }        const controller = new AbortController();        abortControllerRef.current?.abort();        abortControllerRef.current = controller;        startTransition(async () => {          await new Promise((resolve) => setTimeout(resolve, 250));          if (controller.signal.aborted) {            return;          }          setSearchResults(            directoryUsers.filter(              (user) =>                contains(user.name, nextSearchValue) ||                contains(user.username, nextSearchValue) ||                contains(user.email, nextSearchValue) ||                contains(user.title, nextSearchValue),            ),          );        });      }}    >      <ComboboxField>        <ComboboxFieldLabel htmlFor={id}>Assign reviewer</ComboboxFieldLabel>        <ComboboxInputGroup>          <ComboboxInput id={id} placeholder="e.g. Michael" />          <ComboboxControlActions>            <ComboboxClear aria-label="Clear selection" />            <ComboboxTrigger aria-label="Open options" />          </ComboboxControlActions>        </ComboboxInputGroup>      </ComboboxField>      <ComboboxContent>        <ComboboxStatus>{status}</ComboboxStatus>        <ComboboxEmpty>          {trimmedSearchValue !== "" && !isPending && searchResults.length === 0            ? "Try a different search term."            : null}        </ComboboxEmpty>        <ComboboxList>          {(user) => (            <ComboboxItem key={user.id} value={user}>              <ComboboxItemIndicator />              <ComboboxItemText>{user.name}</ComboboxItemText>            </ComboboxItem>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

const directoryUsers = [  {    id: "leslie-alexander",    name: "Leslie Alexander",    username: "leslie",    email: "leslie.alexander@example.com",    title: "Product Manager",  },  {    id: "michael-foster",    name: "Michael Foster",    username: "michael",    email: "michael.foster@example.com",    title: "Frontend Engineer",  },];

import {  Combobox,  ComboboxField,  ComboboxFieldLabel,  ComboboxInputGroup,  ComboboxInput,  ComboboxControlActions,  ComboboxClear,  ComboboxTrigger,  ComboboxContent,  ComboboxEmpty,  ComboboxList,  ComboboxItem,  ComboboxItemIndicator,  ComboboxItemText,} from "moduix";import { useId } from "react";import styles from "./combobox.module.css";export function CustomStylesComboboxDemo() {  const id = useId();  return (    <Combobox items={fruits} itemToStringLabel={(item) => item.label}>      <ComboboxField>        <ComboboxFieldLabel htmlFor={id}>Choose fruit</ComboboxFieldLabel>        <ComboboxInputGroup>          <ComboboxInput id={id} placeholder="e.g. Mango" />          <ComboboxControlActions>            <ComboboxClear aria-label="Clear selection" />            <ComboboxTrigger aria-label="Open options" />          </ComboboxControlActions>        </ComboboxInputGroup>      </ComboboxField>      <ComboboxContent        className={styles.customPopup}        sideOffset={8}        withArrow        withBackdrop        classNames={{          portal: styles.portal,          backdrop: styles.backdrop,          positioner: styles.positioner,          arrow: styles.arrow,        }}      >        <ComboboxEmpty>No fruits found.</ComboboxEmpty>        <ComboboxList>          {(item) => (            <ComboboxItem key={item.id} value={item}>              <ComboboxItemIndicator />              <ComboboxItemText>{item.label}</ComboboxItemText>            </ComboboxItem>          )}        </ComboboxList>      </ComboboxContent>    </Combobox>  );}

.customPopup {  --combobox-popup-bg: var(--color-background);  --combobox-popup-border-color: var(--color-ring);  --combobox-shadow: var(--shadow-xl);}.portal {  isolation: isolate;}.positioner {  z-index: var(--z-popup);}.backdrop {  --combobox-backdrop-bg: var(--color-overlay);  --combobox-backdrop-blur: 2px;}.arrow {  --combobox-arrow-stroke-color: var(--color-border);}

const fruits = [  { id: "apple", label: "Apple", value: "apple" },  { id: "banana", label: "Banana", value: "banana" },  { id: "mango", label: "Mango", value: "mango" },];