@payfit/unity-components/dist/esm/components/filter/Filter.d.ts

import { JSX, Ref } from 'react';
import { FilterProps } from './Filter.types.js';
import { selectListFilter, selectListLabel } from './Filter.controls.js';
/**
 * Tailwind variants for the Filter container.
 * @internal
 */
export declare const filterContainer: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
export declare const filterDismissButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
type FilterComponent = {
    <TType>(props: FilterProps<TType> & {
        ref?: Ref<HTMLDivElement>;
    }): JSX.Element;
    displayName: string;
};
/**
 * The `Filter` component allows users to refine data by selecting specific criteria from a customizable control.
 * It provides a consistent, accessible interface for filtering operations across the application, reducing the need
 * to build custom filter UIs for each data set. The component automatically handles common filtering patterns like
 * multi-select, value display, and popover management, letting you focus on the filtering logic itself.
 * The Filter component offers flexible value selection through the `renderControl` prop, which can render any
 * interactive control (SelectList, DateCalendar, CheckboxGroup, etc.). It displays selected values with smart
 * formatting: showing the values inline when few are selected, or displaying a numeric badge when many values
 * are selected. The component includes built-in internationalization support and follows accessibility best practices
 * with proper ARIA attributes and keyboard navigation.
 * @template TType - The type of the filter value. Use `Set<string>` for multi-select filters or primitive types
 *                   for single-value filters. This ensures type safety across value, onChange, and renderControl.
 * @param {FilterProps<TType>} props - The component props
 * @example
 * ```tsx
 * import { Filter, selectListFilter } from '@payfit/unity-components'
 * import { useState } from 'react'
 *
 * // Define your filter items
 * const statusItems = [
 *   { id: 'active', label: 'Active' },
 *   { id: 'inactive', label: 'Inactive' },
 *   { id: 'pending', label: 'Pending' },
 * ]
 *
 * function EmployeeFilters() {
 *   const [status, setStatus] = useState<Set<string>>(new Set())
 *
 *   return (
 *     <Filter
 *       label="Status"
 *       value={status}
 *       onChange={setStatus}
 *       renderControl={selectListFilter(statusItems, {})}
 *     />
 *   )
 * }
 * ```
 * @example
 * ```tsx
 * // Multi-select filter with grouped items and custom formatting
 * import { Filter, selectListFilter } from '@payfit/unity-components'
 * import { useState } from 'react'
 *
 * const departmentGroups = [
 *   {
 *     id: 'business',
 *     label: 'Business',
 *     children: [
 *       { id: 'sales', label: 'Sales' },
 *       { id: 'marketing', label: 'Marketing' },
 *     ],
 *   },
 *   {
 *     id: 'tech',
 *     label: 'Tech',
 *     children: [
 *       { id: 'engineering', label: 'Engineering' },
 *       { id: 'product', label: 'Product' },
 *     ],
 *   },
 * ]
 *
 * function DepartmentFilter() {
 *   const [selected, setSelected] = useState<Set<string>>(new Set(['sales']))
 *
 *   return (
 *     <Filter
 *       label="Departments"
 *       prefixIcon="BusinessCenterOutlined"
 *       value={selected}
 *       onChange={setSelected}
 *       maxVisibleValues={2}
 *       renderControl={selectListFilter(departmentGroups, {})}
 *       renderLabel={(values) =>
 *         Array.from(values)
 *           .map((v) => v.charAt(0).toUpperCase() + v.slice(1))
 *           .join(' • ')
 *       }
 *     />
 *   )
 * }
 * ```
 * @remarks
 * - Use the `renderControl` prop to provide the interactive element for value selection. The helper function
 *   `selectListFilter` simplifies this for common SelectList-based filters, but you can render any control
 *   like DateCalendar, CheckboxGroup, or custom components
 * - Customize the display of selected values by providing a `renderLabel` function. This function receives
 *   the current `value` and should return a string representation for display in the filter button
 * - Control badge visibility with the `maxVisibleValues` prop (default: 3). When the number of selected values
 *   exceeds this threshold, the filter automatically shows a numeric badge instead of listing all values
 * - Set `isDismissable={true}` and provide an `onDismiss` callback to allow users to remove the filter entirely.
 *   This is useful for optional filters that can be added/removed dynamically
 * - The component is fully internationalized with support for English, French, and Spanish. The "Clear" and
 *   "Apply" button labels adapt automatically based on the user's locale
 * @see {@link FilterProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/filter GitHub}
 * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=8976-13410&t=Hd2aEwwHm7cNU2L5-4 Figma}
 * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
 * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/components-filter--docs unity-components.payfit.io}
 */
declare const Filter: FilterComponent;
/**
 * This module contains preconfigured render functions
 * that are ready to be used for the `Filter` component's `renderControl` prop.
 * @remarks
 * - Contains utilities for rendering controls: SelectList
 * - These render functions are higher-order function. When called, they return a function matching the `Filter` component's `renderLabel` signature
 * @example
 * ```tsx
 * import { Filter, FilterControls } from '@payfit/unity-components'
 * import { useState } from 'react'
 *
 * // Define your filter items
 * const statusItems = [
 *   { id: 'active', label: 'Active' },
 *   { id: 'inactive', label: 'Inactive' },
 *   { id: 'pending', label: 'Pending' },
 * ]
 *
 * function EmployeeFilters() {
 *   const [status, setStatus] = useState<Set<string>>(new Set())
 *
 *   return (
 *     <Filter
 *       label="Status"
 *       value={status}
 *       onChange={setStatus}
 *       renderControl={FilterControls.selectList(statusItems, {})}
 *     />
 *   )
 * }
 * ```
 */
export declare const FilterControls: {
    selectList: typeof selectListFilter;
};
/**
 * This module contains preconfigured render functions that are ready to be used for `Filter` component's `renderLabel` prop.
 * @remarks
 * - Contains utilities for rendering labels managed by: SelectList
 * - These render functions are higher-order function. When called, they return a function matching the `Filter` component's `renderLabel` signature
 * @example
 * ```tsx
 * import { Filter, FilterControls, FilterLabels } from '@payfit/unity-components'
 * import { useState } from 'react'
 *
 * // Define your filter items
 * const statusItems = [
 *   { id: 'active', label: 'Active' },
 *   { id: 'inactive', label: 'Inactive' },
 *   { id: 'pending', label: 'Pending' },
 * ]
 *
 * function EmployeeFilters() {
 *   const [status, setStatus] = useState<Set<string>>(new Set())
 *
 *   return (
 *     <Filter
 *       label="Status"
 *       value={status}
 *       onChange={setStatus}
 *       renderControl={FilterControls.selectList(statusItems, {})}
 *       renderLabel={FilterLabels.selectList(statusItems)}
 *     />
 *   )
 * }
 * ```
 */
export declare const FilterLabels: {
    selectList: typeof selectListLabel;
};
export { Filter };
export type { FilterProps } from './Filter.types.js';