/// <reference types="react" />
import { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';
import { FiltersPanelConfig } from './types';
/**
 * Props of the {@link FiltersPanel} component
 *
 */
export interface FiltersPanelProps {
    /** Array of filters to display */
    filters: Filter[] | FilterRelations;
    /** Callback to handle changes in filters */
    onFiltersChange: (filters: Filter[] | FilterRelations) => void;
    /** Default data source used for filter tiles */
    defaultDataSource?: DataSource;
    /**
     * All data sources available for filter tiles
     *
     * @internal
     */
    dataSources?: DataSource[];
    /** The configuration for the filters panel */
    config?: FiltersPanelConfig;
}
/**
 * Filters panel component that renders a list of filter tiles
 *
 * @example
 * Here's how to render a filters panel with a set of filters.
 * ```tsx
 * import { useState } from 'react';
 * import { FiltersPanel } from '@sisense/sdk-ui';
 * import { filterFactory, type Filter, type FilterRelations } from '@sisense/sdk-data';
 * import * as DM from './sample-ecommerce-model';
 *
 * export function Example() {
 *   const [filters, setFilters] = useState<Filter[]>([
 *     filterFactory.members(DM.Commerce.Gender, ['Male', 'Female']),
 *     filterFactory.members(DM.Commerce.AgeRange, ['0-18', '19-24']),
 *   ]);
 *
 *   const handleFiltersChange = (updatedFilters: Filter[] | FilterRelations) => {
 *     console.log('Filters changed:', updatedFilters);
 *   };
 *
 *   return (
 *     <FiltersPanel
 *       filters={filters}
 *       defaultDataSource={DM.DataSource}
 *       onFiltersChange={handleFiltersChange}
 *     />
 *   );
 * }
 * ```
 *
 * @group Filter Tiles
 */
export declare const FiltersPanel: import("react").FunctionComponent<FiltersPanelProps>;
