infinity-ui-elements/dist/components/SearchableDropdown/SearchableDropdown.d.ts

A React TypeScript component library with Tailwind CSS design system

import * as React from "react";
import { type TextFieldProps } from "../TextField";
import { type DropdownMenuItem } from "../Dropdown/DropdownMenu";
export interface SearchableDropdownItem extends DropdownMenuItem {
    [key: string]: any;
}
export interface SearchableDropdownProps extends Omit<TextFieldProps, "onChange" | "value"> {
    /**
     * Items to display in the dropdown
     */
    items?: SearchableDropdownItem[];
    /**
     * Section heading text
     */
    sectionHeading?: string;
    /**
     * Whether the dropdown is in loading state
     */
    isLoading?: boolean;
    /**
     * Empty state title
     */
    emptyTitle?: string;
    /**
     * Empty state description
     */
    emptyDescription?: string;
    /**
     * Empty state link text
     */
    emptyLinkText?: string;
    /**
     * Empty state link click handler
     */
    onEmptyLinkClick?: () => void;
    /**
     * Primary button text
     */
    primaryButtonText?: string;
    /**
     * Secondary button text
     */
    secondaryButtonText?: string;
    /**
     * Primary button click handler
     */
    onPrimaryClick?: () => void;
    /**
     * Secondary button click handler
     */
    onSecondaryClick?: () => void;
    /**
     * Dropdown menu width
     */
    dropdownWidth?: "auto" | "full";
    /**
     * Show chevron on list items
     */
    showChevron?: boolean;
    /**
     * Custom empty state icon
     */
    emptyIcon?: React.ReactNode;
    /**
     * Disable footer buttons
     */
    disableFooter?: boolean;
    /**
     * Footer layout orientation
     */
    footerLayout?: "horizontal" | "vertical";
    /**
     * Callback when search value changes
     */
    onSearchChange?: (value: string) => void;
    /**
     * Callback when item is selected
     */
    onItemSelect?: (item: SearchableDropdownItem) => void;
    /**
     * Custom filter function
     */
    filterFunction?: (item: SearchableDropdownItem, query: string) => boolean;
    /**
     * Search value (controlled)
     */
    searchValue?: string;
    /**
     * Default search value (uncontrolled)
     */
    defaultSearchValue?: string;
    /**
     * Custom class for dropdown menu
     */
    dropdownClassName?: string;
    /**
     * Minimum characters before showing dropdown
     */
    minSearchLength?: number;
    /**
     * Show dropdown on focus
     */
    showOnFocus?: boolean;
    /**
     * Show "Add New" option when search doesn't match any items
     */
    showAddNew?: boolean;
    /**
     * If true, "Add New" option will only appear when no items match.
     * If false, "Add New" option will always appear at the top of the list.
     * @default true
     */
    showAddNewIfDoesNotMatch?: boolean;
    /**
     * Label for the "Add New" option (e.g., "Client", "User", "Company")
     * Used when showAddNew is true and showAddNewIfDoesNotMatch is false
     */
    addNewLabel?: string;
    /**
     * Callback when "Add New" option is clicked
     * @param value - The search text that the user typed
     */
    onAddNew?: (value: string) => void;
    /**
     * Selected value (controlled)
     * When provided, finds the matching item and pre-populates the search field with its label
     */
    value?: string | number;
    /**
     * Default selected value (uncontrolled)
     * When provided, finds the matching item and pre-populates the search field with its label
     */
    defaultValue?: string | number;
    /**
     * Callback when value changes
     */
    onChange?: (value: string | number | undefined, item: SearchableDropdownItem | undefined) => void;
}
export declare const SearchableDropdown: React.ForwardRefExoticComponent<SearchableDropdownProps & React.RefAttributes<HTMLInputElement>>;
//# sourceMappingURL=SearchableDropdown.d.ts.map