import * as React from 'react';
import { ReactNode } from 'react';
export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
    options: OPTION_TYPE[];
    value: ID_TYPE[];
    onChange: (selected: ID_TYPE[], selectedMap: Map<ID_TYPE, OPTION_TYPE>) => void;
    allowReorder?: boolean | ((option: OPTION_TYPE) => boolean);
    filter?: null | ((o: OPTION_TYPE, searchValue: string) => boolean);
    /**
     * To show the filter input, filter needs also to be defined.
     */
    showFilterInput?: boolean;
    filterPlaceholder?: string;
    /** Tighter rows and inline search with Select All (layout wizard). */
    compact?: boolean;
    /** Matches Visibility list: checkbox then label (default: label inside checkbox). */
    optionLayout?: 'label-in-checkbox' | 'label-beside-checkbox';
    /** Hides "Show Selected Only" in the header (e.g. Visibility-style Select All + search row). */
    hideShowSelectedOnly?: boolean;
    /** Extra classes on the compact header row (e.g. wider gap between controls). */
    compactHeaderClassName?: string;
    /**
     * Search field classes in compact mode. When set without `flex-1`, a spacer keeps
     * the search narrow (layout wizard column lists).
     */
    compactFilterClassName?: string;
    singleSelect?: boolean;
    toIdentifier: (v: OPTION_TYPE) => ID_TYPE;
    toLabel: (v: OPTION_TYPE) => string | React.ReactElement;
    /**
     * Used to render list items, this extra prop allows to have different rendering for list & bottom tags.
     */
    toListLabel?: (v: OPTION_TYPE) => string | React.ReactElement;
    /** Rendered at the end of the row, outside the checkbox label (e.g. sort direction toggle). */
    renderOptionTrailing?: (option: OPTION_TYPE) => ReactNode;
    /** Clicking the row toggles inclusion; checkbox clicks do not double-toggle. */
    toggleSelectionOnRowClick?: boolean;
    showSelectedOnlyLabel?: ReactNode;
    onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
    isOptionDisabled?: (option: OPTION_TYPE) => boolean;
    disabled?: boolean;
    optionClassName?: string;
    className?: string;
    style?: React.CSSProperties;
};
export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
export declare const renderSelectionSection: (props: {
    value: ValueSelectorProps<any, any>["value"];
    options: ValueSelectorProps<any, any>["options"];
    showOnlySelectedCheckbox?: ReactNode;
    disabled?: ValueSelectorProps<any, any>["disabled"];
    isOptionDisabled?: ValueSelectorProps<any, any>["isOptionDisabled"];
    singleSelect?: ValueSelectorProps<any, any>["singleSelect"];
    toIdentifier: ValueSelectorProps<any, any>["toIdentifier"];
    toLabel: ValueSelectorProps<any, any>["toLabel"];
    onChange: ValueSelectorProps<any, any>["onChange"];
    onSelectAll: () => void;
    onClear: () => void;
    onClearOption: (id: any) => void;
    compact?: boolean;
    showFilterInput?: boolean;
    filter?: null | ((o: any, searchValue: string) => boolean);
    searchInputValue?: string;
    setSearchInputValue?: (value: string) => void;
    filterPlaceholder?: string;
    hideShowSelectedOnly?: boolean;
    compactHeaderClassName?: string;
    compactFilterClassName?: string;
}) => React.JSX.Element;