import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
import { FunctionComponent, ReactNode } from 'react';
import { FacetData, FacetItem, FacetItemComponent } from './FacetTypes.js';
export type FacetStylesNames = 'facet' | 'facetItem' | 'facetItems' | 'facetHeader' | 'searchInput' | 'hiddenSearch' | 'facetBody' | 'facetTitleRow' | 'facetTitle' | 'facetRemoveButton' | 'facetSearch' | 'facetControl' | 'separator' | 'separatorLabel';
export interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {
    className?: string;
    /**
     * The data to render in the component
     */
    data: FacetData;
    /**
     * Function called when an item is selected or unselected
     *
     * @param values the selected items
     */
    onChange?: (values: string[]) => void;
    /**
     * Function called when the remove icon is clicked.
     */
    onRemove?: () => void;
    /**
     * Initial items selection
     *
     * @default []
     */
    initialSelection?: string[];
    /**
     * Determines if the facet is removable
     *
     * @default false
     */
    removable?: boolean;
    /**
     * Determined items selection
     *
     * @default []
     */
    selection?: string[];
    /**
     * Custom item component
     *
     * @default a checkbox with the label of the item
     */
    itemComponent?: FacetItemComponent;
    /**
     * Function to format the facet item count
     *
     * @param count
     * @default (count) => count.toString()
     */
    itemCountFormatter?: (value: number) => string;
    /**
     * Search input placeholder
     */
    searchPlaceholder?: string;
    /**
     * Called when the search query changes
     *
     * @param value the search query
     */
    onSearch?: (value: string) => void;
    /**
     * Function to filter search results
     *
     * @param query value of the search input
     * @param item the current item
     *
     * @default function that compare the query with the label and value, case-insensitive
     */
    filter?: (query: string, item: FacetItem) => boolean;
    /**
     * Value of the search input
     */
    query?: string;
    /**
     * Nothing found message
     *
     * @default No matching items
     */
    nothingFound?: ReactNode;
    /**
     * Displayed when a list is empty and there is no search query
     *
     * @default No items
     */
    placeholder?: ReactNode;
    /**
     * Facet title
     */
    title?: ReactNode;
    /**
     * Maximum height, only used when there is more than 7 values
     *
     * @default 200
     */
    height?: number | 'auto';
    /**
     * Predefined border-radius value from theme.radius or number for border-radius in px
     *
     * @default md
     */
    radius?: number | string;
    /**
     * Change list component, can be used to add custom scrollbars
     */
    listComponent?: FunctionComponent<any>;
    /**
     * Limit amount of items showed at a time
     *
     * @default Infinity
     */
    limit?: number;
    /**
     * Control the displaying of the search input.
     *
     * @default data.length <= 7
     */
    hideSearch?: boolean;
    __staticSelector?: string;
}
export type FacetFactory = Factory<{
    props: FacetProps;
    ref: HTMLDivElement;
    stylesNames: FacetStylesNames;
}>;
export declare const Facet: FunctionComponent<FacetProps>;
//# sourceMappingURL=Facet.d.ts.map