import { RegisterOptions } from 'react-hook-form';
import { StylesConfig } from 'react-select';
import { ID } from '@zeniai/client-epic-state';
import { DisableMode } from '../common/common';
/**
 * Component & its Props
 */
export interface OptionType {
    label: string;
    value: string;
    isDeleted?: boolean;
}
export interface MultiSelectFieldValue {
    allOptions: OptionType[];
    selectedOptions: string[];
}
export interface CreatableMultiSelectFieldProps {
    defaultValue: MultiSelectFieldValue;
    name: string;
    customStyleConfig?: StylesConfig<OptionType, true>;
    isDisabled?: DisableMode;
    isListView?: boolean;
    isLoading?: boolean;
    isOptionRemovable?: boolean;
    isStyledCapsule?: boolean;
    maxAllowedSelectedValues?: number;
    /**
     * Render the menu into a portal (e.g. document.body) so it isn't
     * clipped by ancestor `overflow: scroll` / `overflow: hidden`
     * containers. Pass `document.body` when used inside a scrollable
     * panel.
     */
    menuPortalTarget?: HTMLElement | null;
    placeholder?: string;
    placeholderComponent?: React.ReactElement;
    registerOptions?: RegisterOptions;
    customCreateLabel?: (inputString: string) => JSX.Element | string;
    onCreateOption?: (option: string) => void;
    onDeleteOption?: (tagId: ID) => void;
}
declare const CreatableMultiSelectField: ({ name, registerOptions, defaultValue, maxAllowedSelectedValues, isLoading, isDisabled, customStyleConfig, placeholder, placeholderComponent, isListView, isStyledCapsule, onCreateOption, onDeleteOption, customCreateLabel, menuPortalTarget, }: CreatableMultiSelectFieldProps) => import("react/jsx-runtime").JSX.Element;
/**
 * Helpers
 */
export { CreatableMultiSelectField };