ivt/dist/auto-complete-multi-select/index.d.ts

Ivt Components Library

import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';
import * as React from 'react';

/**
 * Variants for the multi-select component to handle different styles.
 * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
 */
declare const multiSelectVariants: (props?: ({
    variant?: "default" | "secondary" | "destructive" | "positive" | "warning" | "info" | "outline" | null | undefined;
    subtle?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface Option {
    /** The text to display for the option. */
    label: string;
    /** The unique value associated with the option. */
    value: string;
    /** Optional icon component to display alongside the option. */
    icon?: React.ComponentType<{
        className?: string;
    }>;
}
/**
 * Props for AutoCompleteMultiSelectIVT component
 */
interface AutoCompleteMultiSelectProps extends VariantProps<typeof multiSelectVariants> {
    /**
     * An array of currently selected option objects.
     * Each option object has a label, value, and an optional icon.
     * Optional, defaults to empty array.
     */
    selectedOptions?: Option[];
    /**
     * Callback function triggered when the selected values change.
     * Receives an array of the new selected option objects.
     */
    onChange: (options: Option[]) => void;
    /**
     * Async function to fetch options based on search term.
     * Returns a promise with an array of option objects.
     */
    fetchOptions: (term: string) => Promise<Option[]>;
    /**
     * Placeholder text to be displayed when no values are selected.
     * Optional, defaults to "Select options".
     */
    placeholder?: string;
    /**
     * Placeholder text for the search input.
     * Optional, defaults to "Buscar...".
     */
    searchPlaceholder?: string;
    /**
     * Message to be displayed when no results are found.
     * Optional, defaults to "Nenhum item encontrado.".
     */
    messageEmpty?: string;
    /**
     * Animation duration in seconds for the visual effects (e.g., bouncing badges).
     * Optional, defaults to 0 (no animation).
     */
    animation?: number;
    /**
     * Maximum number of items to display. Extra selected items will be summarized.
     * Optional, defaults to 3.
     */
    maxCount?: number;
    /**
     * The modality of the popover. When set to true, interaction with outside elements
     * will be disabled and only popover content will be visible to screen readers.
     * Optional, defaults to false.
     */
    modalPopover?: boolean;
    /**
     * Additional class names to apply custom styles to the multi-select component.
     * Optional, can be used to add custom styles.
     */
    className?: string;
    /**
     * Label for the component.
     */
    label?: string | React.ReactNode;
    /**
     * Description text displayed below the component.
     */
    description?: string;
    /**
     * Whether to use subtle variant styling.
     */
    subtle?: boolean;
    /**
     * Whether to focus on select actions.
     * Optional, defaults to true.
     */
    focusOnSelect?: boolean;
    /**
     * Unique identifier for the component.
     */
    id?: string;
    /**
     * Callback function triggered when there's an error fetching options.
     */
    onError?: (error: unknown) => void;
}
declare const AutoCompleteMultiSelect: React.ForwardRefExoticComponent<AutoCompleteMultiSelectProps & React.RefAttributes<HTMLButtonElement>>;

export { AutoCompleteMultiSelect };
export type { Option };