@firecms/ui/dist/components/SearchableSelect.d.ts

Awesome Firebase/Firestore-based headless open-source CMS

import * as React from "react";
export interface SearchableSelectProps {
    /** Currently selected value. Can be one of the items or a custom string. */
    value?: string;
    /** Callback when the value changes (from selection or custom input). */
    onValueChange?: (value: string) => void;
    /** Placeholder shown when no value is selected. */
    placeholder?: string;
    /** Label above the field. */
    label?: React.ReactNode | string;
    /** Size variant. */
    size?: "smallest" | "small" | "medium" | "large";
    /** Whether the field is disabled. */
    disabled?: boolean;
    /** Whether to show an error state. */
    error?: boolean;
    /** Whether to use the invisible (borderless) style. */
    invisible?: boolean;
    /** CSS class for the trigger button. */
    className?: string;
    /** CSS class for the trigger input area. */
    inputClassName?: string;
    /** Render the selected value in a custom way in the trigger. */
    renderValue?: (value: string) => React.ReactNode;
    /** Whether the popover should trap focus. */
    modalPopover?: boolean;
    /** If true, allow accepting the typed text as the value even if it doesn't match an item. */
    allowCustomValues?: boolean;
    /** Portal container element. */
    portalContainer?: HTMLElement | null;
    /** If true, auto-open the popover on mount so the user can start typing immediately. */
    autoFocus?: boolean;
    /** The option items — use SearchableSelectItem. */
    children: React.ReactNode;
}
export interface SearchableSelectItemProps {
    value: string;
    children?: React.ReactNode;
    className?: string;
}
export declare const SearchableSelect: React.ForwardRefExoticComponent<SearchableSelectProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * A single option inside a SearchableSelect.
 * The `value` prop is the string value that gets selected.
 * The `children` is what's displayed in the dropdown.
 * This component is not rendered directly — SearchableSelect reads its props.
 */
export declare function SearchableSelectItem(_props: SearchableSelectItemProps): null;