import { Interpolation, Theme } from '@mui/material';
import { Sizes } from '@m4l/styles';
import { ChangeEvent, FocusEvent, KeyboardEvent, Ref } from 'react';
import { ImageSelectorSlots } from './slots/ImageSelectorEnum';
export type ImageSelectorChangeHandler<T = unknown> = (event: ChangeEvent<unknown>, value: T | null) => void;
export type ImageSelectorPresentationType = 'standard' | 'grid';
export interface ImageSelectorProps<T = unknown> {
    /**
     * Controlled selected option.
     */
    value: T | null | undefined;
    /**
     * Called when the selected image changes.
     */
    onChange?: ImageSelectorChangeHandler<T>;
    /**
     * Endpoint used to fetch options for the popover grid.
     */
    endpoint: string;
    /**
     * Whether the selector should refetch options every time the popover opens.
     */
    refetchOnOpen?: boolean;
    /**
     * Returns the accessible label for an option.
     */
    getOptionLabel: (option: T) => string;
    /**
     * Returns the image URL for an option.
     */
    getOptionImage: (option: T) => string;
    /**
     * Compares an option against the selected value.
     */
    isOptionEqualToValue: (option: T, value: T) => boolean;
    /**
     * Render mode for the selector surface.
     */
    presentationType?: ImageSelectorPresentationType;
    /**
     * Square image size used by the selector surfaces when provided.
     */
    imageSize?: number;
    /**
     * Maximum number of visible columns before the options wrap.
     */
    maxColumns?: number;
    /**
     * Maximum number of visible rows before vertical scrolling is applied.
     */
    maxRows?: number;
    /**
     * Visual density for the trigger and option content.
     */
    size?: Extract<Sizes, 'small' | 'medium'>;
    /**
     * Disables the selector trigger and option changes.
     */
    disabled?: boolean;
    /**
     * Marks the selector trigger with an error state.
     */
    error?: boolean;
    /**
     * Optional CSS class name.
     */
    className?: string;
    /**
     * Optional test id suffix.
     */
    dataTestId?: string;
    /**
     * Trigger id.
     */
    id?: string;
    /**
     * Trigger name.
     */
    name?: string;
    /**
     * Network timeout used for the async request.
     */
    timeout?: number;
    /**
     * Request params merged into the async request.
     */
    parms?: Record<string, unknown>;
    /**
     * Response field that contains the option list.
     */
    resultField?: string;
    /**
     * Whether the endpoint is external to the current host.
     */
    isExternalUrl?: boolean;
    /**
     * Whether the request should use the remote network client.
     */
    isRemote?: boolean;
    /**
     * Whether the response should be transformed to camelCase.
     */
    responseToCamelCase?: boolean;
}
export interface ImageSelectorOwnerState extends Pick<ImageSelectorProps<unknown>, 'presentationType' | 'imageSize' | 'maxColumns' | 'maxRows' | 'disabled' | 'error' | 'size'> {
    hasVerticalScroll?: boolean;
    hasValue?: boolean;
    isFocused?: boolean;
    isOpen?: boolean;
    isPlaceholder?: boolean;
    selected?: boolean;
}
export type ImageSelectorSlotsType = keyof typeof ImageSelectorSlots;
export interface ImageSelectorStyleRuleProps {
    ownerState?: ImageSelectorOwnerState;
    theme: Theme;
}
export type ImageSelectorStyles = Record<ImageSelectorSlotsType, Interpolation<ImageSelectorStyleRuleProps>>;
export interface UseImageSelectorProps<T = unknown> {
    /**
     * Controlled selected option.
     */
    value: T | null | undefined;
    /**
     * Called when the selected image changes.
     */
    onChange?: ImageSelectorChangeHandler<T>;
    /**
     * Endpoint used to fetch options for the popover grid.
     */
    endpoint: string;
    /**
     * Whether the selector should refetch options every time the popover opens.
     */
    refetchOnOpen?: boolean;
    /**
     * Returns the accessible label for an option.
     */
    getOptionLabel: (option: T) => string;
    /**
     * Returns the image URL for an option.
     */
    getOptionImage: (option: T) => string;
    /**
     * Compares an option against the selected value.
     */
    isOptionEqualToValue: (option: T, value: T) => boolean;
    /**
     * Render mode for the selector surface.
     */
    presentationType?: ImageSelectorPresentationType;
    /**
     * Square image size used by the selector surfaces when provided.
     */
    imageSize?: number;
    /**
     * Maximum number of visible columns before the options wrap.
     */
    maxColumns?: number;
    /**
     * Maximum number of visible rows before vertical scrolling is applied.
     */
    maxRows?: number;
    /**
     * Visual density for the trigger and option content.
     */
    size?: Extract<Sizes, 'small' | 'medium'>;
    disabled?: boolean;
    error?: boolean;
    timeout?: number;
    parms?: Record<string, unknown>;
    resultField?: string;
    isExternalUrl?: boolean;
    isRemote?: boolean;
    responseToCamelCase?: boolean;
    /**
     * Forwarded trigger ref kept in sync with the internal anchor element.
     */
    forwardedRef: Ref<HTMLButtonElement>;
    /**
     * Optional internal blur callback used by wrappers such as RHF.
     */
    blurHandler?: (...args: unknown[]) => void;
}
export interface UseImageSelectorResult<T = unknown> {
    getOptionId: (index: number) => string;
    handleBlur: (event: FocusEvent<HTMLButtonElement>) => void;
    handleFocus: () => void;
    handleKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
    handleOptionFocus: (index: number) => void;
    handleOptionKeyDown: (index: number, event: KeyboardEvent<HTMLButtonElement>) => void;
    handleOptionRef: (index: number, node: HTMLButtonElement | null) => void;
    handlePopoverClose: () => void;
    handleSelect: (option: T) => void;
    handleToggle: () => void;
    handleTriggerRef: (node: HTMLButtonElement | null) => void;
    gridOwnerState: ImageSelectorOwnerState;
    isOptionSelected: (option: T) => boolean;
    loading: boolean;
    open: boolean;
    options: T[];
    optionsListId: string;
    overlayIconSrc: string;
    previewLabel: string;
    previewOwnerState: ImageSelectorOwnerState;
    previewSource: string;
    rootOwnerState: ImageSelectorOwnerState;
    triggerElement: HTMLButtonElement | null;
}
//# sourceMappingURL=types.d.ts.map