@flanksource/clicky-ui/dist/components/FilterBar.d.ts

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { ReactNode } from 'react';
import { FilterMode } from '../data/FilterPill';
import { MultiSelectOption } from './MultiSelect';
export type FilterBarSearchProps = {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    ariaLabel?: string;
    className?: string;
};
export type FilterBarTextFilter = {
    key: string;
    kind: "text";
    label: string;
    description?: string;
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
};
export type FilterBarLookupOption = {
    value: string;
    label?: string;
    disabled?: boolean;
    title?: string;
};
export type FilterBarLookupInputType = "text" | "number" | "date";
export type FilterBarLookupFilter = {
    key: string;
    kind: "lookup";
    label: string;
    description?: string;
    value: string;
    options: FilterBarLookupOption[];
    onChange: (value: string) => void;
    placeholder?: string;
    inputType?: FilterBarLookupInputType;
    disabled?: boolean;
    className?: string;
};
export type FilterBarLookupMultiFilter = {
    key: string;
    kind: "lookup-multi";
    label: string;
    description?: string;
    value: string[];
    options: FilterBarLookupOption[];
    onChange: (value: string[]) => void;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
};
export type FilterBarMultiFilterMode = Extract<FilterMode, "include" | "exclude">;
export type FilterBarMultiFilter = {
    key: string;
    kind: "multi";
    label: string;
    description?: string;
    value: Record<string, FilterBarMultiFilterMode>;
    options: MultiSelectOption[];
    onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;
    disabled?: boolean;
    className?: string;
};
export type FilterBarNestedMultiGroup = {
    groupKey: string;
    label?: string;
    options: MultiSelectOption[];
};
export type FilterBarNestedMultiFilter = {
    key: string;
    kind: "nested-multi";
    label: string;
    description?: string;
    value: Record<string, FilterBarMultiFilterMode>;
    groups: FilterBarNestedMultiGroup[];
    onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;
    disabled?: boolean;
    className?: string;
};
export type FilterBarSelectMultiFilter = {
    key: string;
    kind: "select-multi";
    label: string;
    description?: string;
    value: string[];
    options: MultiSelectOption[];
    onChange: (value: string[]) => void;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
};
export type FilterBarNumberValue = {
    min?: string;
    max?: string;
};
export type FilterBarNumberFilter = {
    key: string;
    kind: "number";
    label: string;
    description?: string;
    value: FilterBarNumberValue;
    onChange: (value: FilterBarNumberValue) => void;
    domainMin?: number;
    domainMax?: number;
    step?: number;
    formatValue?: (value: number) => string;
    minPlaceholder?: string;
    maxPlaceholder?: string;
    disabled?: boolean;
    className?: string;
};
export type FilterBarEnumFilter = {
    key: string;
    kind: "enum";
    label: string;
    description?: string;
    value: string;
    options: Array<{
        value: string;
        label?: string;
    }>;
    onChange: (value: string) => void;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
};
export type FilterBarBooleanFilter = {
    key: string;
    kind: "boolean";
    label: string;
    description?: string;
    value: boolean;
    onChange: (value: boolean) => void;
    disabled?: boolean;
    className?: string;
};
export type FilterBarFilter = FilterBarTextFilter | FilterBarLookupFilter | FilterBarLookupMultiFilter | FilterBarMultiFilter | FilterBarNestedMultiFilter | FilterBarSelectMultiFilter | FilterBarNumberFilter | FilterBarEnumFilter | FilterBarBooleanFilter;
export type FilterBarRangePreset = {
    label: string;
    from: string;
    to: string;
};
export type FilterBarRangeProps = {
    from?: string;
    to?: string;
    onApply: (from: string, to: string) => void;
    presets?: FilterBarRangePreset[];
    fromPlaceholder?: string;
    toPlaceholder?: string;
    emptyLabel?: string;
    className?: string;
};
export type FilterBarProps = {
    search?: FilterBarSearchProps;
    filters?: FilterBarFilter[];
    timeRange?: FilterBarRangeProps;
    dateRange?: FilterBarRangeProps;
    children?: ReactNode;
    leading?: ReactNode;
    trailing?: ReactNode;
    className?: string;
    autoSubmit?: boolean;
    onApply?: () => void;
    applyLabel?: string;
    isPending?: boolean;
};
export declare function FilterBar({ search, filters, timeRange, dateRange, children, leading, trailing, className, autoSubmit, onApply, applyLabel, isPending, }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
type FilterBarFilterPanelChrome = "full" | "embedded";
export declare function FilterBarFilterPanel({ filter, chrome, }: {
    filter: FilterBarFilter;
    chrome?: FilterBarFilterPanelChrome;
}): import("react/jsx-runtime").JSX.Element;
export declare function FilterBarRangePanel({ kind, label, from, to, onApply, presets: _presets, fromPlaceholder, toPlaceholder, emptyLabel: _emptyLabel, }: FilterBarRangeProps & {
    kind: "date" | "time";
    label: string;
}): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=FilterBar.d.ts.map