@stanfordspezi/spezi-web-design-system/dist/src/components/MultiSelect/MultiSelect.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { ReactNode, ComponentProps } from 'react';
import { Button } from '../Button';
import { Command, CommandGroup, CommandItem, CommandSeparator } from '../Command';
interface MultiSelectProps {
    children: ReactNode;
    /**
     * Controlled selected values. If provided, the component acts in a controlled manner.
     */
    values?: string[];
    /**
     * Default selected values for uncontrolled usage.
     */
    defaultValues?: string[];
    /**
     * Callback fired when the selected values change.
     */
    onValuesChange?: (values: string[]) => void;
}
/**
 * Root component that provides context for building a multi-select input.
 *
 * Compose with {@link MultiSelectTrigger}, {@link MultiSelectValue}, and {@link MultiSelectContent}.
 *
 * @example
 * ```tsx
 * <MultiSelect>
 *   <MultiSelectTrigger className="w-full max-w-[400px]">
 *     <MultiSelectValue placeholder="Select fruit..." />
 *   </MultiSelectTrigger>
 *   <MultiSelectContent>
 *     <MultiSelectGroup>
 *       <MultiSelectItem value="apple">Apple</MultiSelectItem>
 *       <MultiSelectItem value="banana">Banana</MultiSelectItem>
 *     </MultiSelectGroup>
 *   </MultiSelectContent>
 * </MultiSelect>
 * ```
 */
export declare const MultiSelect: ({ children, values, defaultValues, onValuesChange, }: MultiSelectProps) => import("react").JSX.Element;
interface MultiSelectTriggerProps extends Omit<ComponentProps<typeof Button>, "size" | "variant"> {
}
/**
 * Clickable trigger element that opens the selection popover.
 *
 * Renders like an input using the Button component. Place `MultiSelectValue` inside to show selected items.
 *
 * @example
 * ```tsx
 * <MultiSelectTrigger>
 *   <MultiSelectValue placeholder="Choose options..." />
 * </MultiSelectTrigger>
 * ```
 */
export declare const MultiSelectTrigger: ({ role, "aria-expanded": propsAriaExpanded, className, children, ...props }: MultiSelectTriggerProps) => import("react").JSX.Element;
interface MultiSelectValueProps extends Omit<ComponentProps<"div">, "children"> {
    /**
     * Placeholder text to show when no items are selected.
     */
    placeholder?: string;
    /**
     * If true, clicking a badge removes that item from the selection.
     *
     * @default true
     */
    clickToRemove?: boolean;
    /**
     * Controls layout of badges:
     * - "wrap": always wrap to multiple lines as needed.
     * - "wrap-when-open": wrap only when the popover is open.
     * - "cutoff": single line with a "+N" badge for overflow.
     *
     * @default "wrap-when-open"
     */
    overflowBehavior?: "wrap" | "wrap-when-open" | "cutoff";
}
/**
 * Displays the current selection inside the trigger, with badges for each selected item.
 *
 * @example
 * ```tsx
 * <MultiSelectTrigger>
 *   <MultiSelectValue placeholder="Select tags..." overflowBehavior="cutoff" />
 * </MultiSelectTrigger>
 * ```
 */
export declare const MultiSelectValue: ({ placeholder, clickToRemove, className, overflowBehavior, ...props }: MultiSelectValueProps) => import("react").JSX.Element;
interface MultiSelectContentProps extends Omit<ComponentProps<typeof Command>, "children"> {
    /**
     * Enable or disable the search input. Accepts three possible values:
     * - `true`: shows a search input with default placeholder and empty message.
     * - `false`: disables the search input.
     * - `object`: allows customizing the `placeholder` and `emptyMessage`.
     *
     * @default true
     */
    search?: boolean | {
        placeholder?: string;
        emptyMessage?: string;
    };
    children: ReactNode;
}
/**
 * Popover content that renders the `Command`-based searchable list of items.
 *
 * @example
 * ```tsx
 * <MultiSelectContent search={{ placeholder: "Search fruits...", emptyMessage: "Nothing found" }}>
 *   <MultiSelectGroup>
 *     <MultiSelectItem value="apple">Apple</MultiSelectItem>
 *   </MultiSelectGroup>
 * </MultiSelectContent>
 * ```
 *
 * @example
 * ```tsx
 * // Without search field
 * <MultiSelectContent search={false}>
 *   <MultiSelectItem value="a">A</MultiSelectItem>
 * </MultiSelectContent>
 * ```
 */
export declare const MultiSelectContent: ({ search, children, ...props }: MultiSelectContentProps) => import("react").JSX.Element;
interface MultiSelectItemProps extends Omit<ComponentProps<typeof CommandItem>, "value"> {
    /**
     * The unique value for this item within the selection.
     */
    value: string;
    /**
     * Optional custom label to show in the trigger badge (different from the list label).
     */
    badgeLabel?: ReactNode;
    /**
     * Optional callback fired when this item is selected or deselected.
     */
    onSelect?: (value: string) => void;
}
/**
 * Selectable item within the list. Toggles inclusion in the selection.
 *
 * @example
 * ```tsx
 * <MultiSelectItem value="apple">Apple</MultiSelectItem>
 * ```
 *
 * @example
 * ```tsx
 * <MultiSelectItem value="us" badgeLabel={<span>United States</span>}>
 *   USA
 * </MultiSelectItem>
 * ```
 */
export declare const MultiSelectItem: ({ value, children, badgeLabel, onSelect, ...props }: MultiSelectItemProps) => import("react").JSX.Element;
/**
 * Group wrapper for grouping related `MultiSelectItem`s under a heading.
 *
 * @example
 * ```tsx
 * <MultiSelectGroup heading="Fruits">
 *   <MultiSelectItem value="apple">Apple</MultiSelectItem>
 * </MultiSelectGroup>
 * ```
 */
export declare const MultiSelectGroup: (props: ComponentProps<typeof CommandGroup>) => import("react").JSX.Element;
/**
 * Visual separator between groups or sections in the list.
 *
 * @example
 * ```tsx
 * <>
 *   <MultiSelectGroup heading="A" />
 *   <MultiSelectSeparator />
 *   <MultiSelectGroup heading="B" />
 * </>
 * ```
 */
export declare const MultiSelectSeparator: (props: ComponentProps<typeof CommandSeparator>) => import("react").JSX.Element;
export {};