@payfit/unity-components
Version:
111 lines (110 loc) • 4.77 kB
TypeScript
import { FilterToolbarProps } from './FilterToolbar.types.js';
/**
* Tailwind variants for the FilterToolbar component styling.
* Defines layout slots for the toolbar container, filters area, and action buttons.
* @internal
*/
export declare const filterToolbar: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
actions?: import('tailwind-merge').ClassNameValue;
filters?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
actions?: import('tailwind-merge').ClassNameValue;
filters?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string[];
filters: string[];
actions: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
actions?: import('tailwind-merge').ClassNameValue;
filters?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string[];
filters: string[];
actions: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
base: string[];
filters: string[];
actions: string[];
}, undefined, unknown, unknown, undefined>>;
/**
* The FilterToolbar component manages a dynamic collection of filters in a toolbar layout, enabling users to build complex filtering UIs.
* The FilterToolbar provides a data-driven approach to filter management where filters can be added, configured,
* and removed on demand. Each filter maintains its own state while the toolbar orchestrates the overall filtering experience.
* @param {FilterToolbarProps} props - Configuration for the filter toolbar including filter definitions and event handlers
* @example
* ```tsx
* import { FilterToolbar } from '@payfit/unity-components'
* import { useState } from 'react'
*
* function Example() {
* const [filters, setFilters] = useState([])
*
* const filterDefs = [
* {
* id: 'status',
* label: 'Status',
* renderControl: (value, onChange) => (
* <Select value={value} onChange={onChange}>
* <Option value="active">Active</Option>
* <Option value="inactive">Inactive</Option>
* </Select>
* ),
* renderLabel: (value) => value
* },
* {
* id: 'department',
* label: 'Department',
* renderControl: (value, onChange) => (
* <Select value={value} onChange={onChange}>
* <Option value="engineering">Engineering</Option>
* <Option value="sales">Sales</Option>
* </Select>
* ),
* renderLabel: (value) => value
* }
* ]
*
* return (
* <FilterToolbar
* filterDefs={filterDefs}
* onChange={(appliedFilters) => {
* setFilters(appliedFilters)
* }}
* />
* )
* }
* ```
* @remarks
* - The toolbar manages filter state internally, providing serializable filter values through the `onChange` callback
* - Filters can be prepopulated using the `initialValue` prop with an array of `AppliedFilter` objects
* - Each filter definition must include a unique `id`, `label`, and `renderControl` function to render the filter UI
* - The `renderLabel` function customizes how selected values appear in the filter button
* - Newly added filters automatically open their popover to guide users through configuration
* - All filters can be cleared at once using the "Clear filters" button
* - The component is uncontrolled by default but notifies parent components of state changes via callbacks
* @see {@link FilterToolbarProps} for all available props
* @see {@link FilterDef} for filter definition structure
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/filter-toolbar GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=8976-10418 Figma}
* @see Design docs in {@link https://www.payfit.design/24f360409/p/998c5f-filter Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/data-filtertoolbar--docs unity-components.payfit.io}
*/
declare const FilterToolbar: import('react').ForwardRefExoticComponent<FilterToolbarProps & import('react').RefAttributes<HTMLDivElement>>;
export { FilterToolbar };
export * from './utils/filter-adapters.js';
export type * from './FilterToolbar.types.js';