@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/filter/parts/FilterPopover.js

@@ -0,0 +1,79 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { uyTv as m } from "@payfit/unity-themes";
+import { Popover as c, Dialog as g, Separator as f } from "react-aria-components";
+import { FormattedMessage as e } from "react-intl";
+import { Button as r } from "../../button/Button.js";
+const x = m({
+  slots: {
+    popover: [
+      "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-sm uy:shadow-floating uy:min-w-[320px] uy:max-w-[800px] uy:relative uy:isolate uy:overflow-hidden",
+      "uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
+      'uy:data-[entering]:data-[placement="bottom"]:-translate-y-100 uy:data-[entering]:data-[placement="bottom"]:translate-x-0 uy:data-[exiting]:data-[placement="bottom"]:translate-y-0',
+      'uy:data-[entering]:data-[placement="top"]:translate-y-100 uy:data-[entering]:data-[placement="top"]:translate-x-0 uy:data-[exiting]:data-[placement="top"]:translate-y-0',
+      'uy:data-[entering]:data-[placement="left"]:translate-x-100 uy:data-[entering]:data-[placement="left"]:translate-y-0 uy:data-[exiting]:data-[placement="left"]:translate-x-0',
+      'uy:data-[entering]:data-[placement="right"]:-translate-x-100 uy:data-[entering]:data-[placement="right"]:translate-y-0 uy:data-[exiting]:data-[placement="right"]:translate-y-0'
+    ],
+    dialog: ["uy:flex uy:flex-col uy:gap-0"],
+    content: ["uy:flex-1 uy:max-h-[500px] uy:overflow-y-auto"],
+    footer: [
+      "uy:mx-100 uy:mb-100",
+      "uy:sticky uy:bottom-0 uy:z-2",
+      "uy:flex-0",
+      "uy:bg-surface-neutral"
+    ],
+    separator: ["uy:mb-100 uy:bg-border-neutral uy:h-px"],
+    actions: ["uy:flex uy:justify-between uy:gap-100"]
+  }
+});
+function P({
+  children: n,
+  onConfirm: o,
+  onClear: l
+}) {
+  const { popover: i, dialog: u, content: y, footer: s, separator: d, actions: p } = x();
+  return /* @__PURE__ */ t(c, { className: i(), placement: "bottom left", children: /* @__PURE__ */ a(g, { className: u(), children: [
+    /* @__PURE__ */ t("div", { className: y(), children: n }),
+    /* @__PURE__ */ a("footer", { className: s(), children: [
+      /* @__PURE__ */ t(f, { className: d() }),
+      /* @__PURE__ */ a("div", { className: p(), children: [
+        /* @__PURE__ */ t(
+          r,
+          {
+            variant: "ghost",
+            color: "danger",
+            size: "full",
+            prefixIcon: "TrashOutlined",
+            onPress: l,
+            children: /* @__PURE__ */ t(
+              e,
+              {
+                id: "unity:component:common:clear:title",
+                defaultMessage: "Clear"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          r,
+          {
+            variant: "ghost",
+            color: "primary",
+            size: "full",
+            onPress: o,
+            children: /* @__PURE__ */ t(
+              e,
+              {
+                id: "unity:component:filter:action:apply",
+                defaultMessage: "Apply"
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  P as FilterPopover,
+  x as filterPopover
+};

package/dist/esm/components/filter/utils/value-formatters.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Type guard to check if a value is a composite (non-null object).
+ * This utility determines whether a value is an object type that can contain
+ * properties or be iterable, excluding primitive types and null.
+ * @param value - The value to check
+ * @returns `true` if the value is a non-null object, `false` otherwise
+ * @example
+ * ```ts
+ * isCompositeValue({}) // true
+ * isCompositeValue([]) // true
+ * isCompositeValue(null) // false
+ * isCompositeValue("string") // false
+ * isCompositeValue(123) // false
+ * ```
+ * @internal
+ */
+export declare function isCompositeValue<TType>(value: TType): value is TType & object;
+/**
+ * Type guard to check if a value implements the Iterable protocol.
+ * This utility determines whether a value can be iterated over using
+ * `for...of` loops or spread operators. Common iterable types include
+ * arrays, Maps, Sets, and strings.
+ * @param value - The value to check
+ * @returns `true` if the value is iterable, `false` otherwise
+ * @example
+ * ```ts
+ * isIterable([1, 2, 3]) // true
+ * isIterable(new Set([1, 2])) // true
+ * isIterable(new Map()) // true
+ * isIterable("hello") // true
+ * isIterable({}) // false
+ * isIterable(123) // false
+ * ```
+ * @internal
+ */
+export declare function isIterable<TType>(value: TType): value is TType & Iterable<unknown>;
+/**
+ * Default renderer for filter values that converts any value to a string representation.
+ * This utility provides a sensible default for displaying filter values in the UI.
+ * For primitive values, it returns their string representation. For iterable values
+ * (arrays, Sets, Maps, etc.), it joins all items with a comma and space.
+ * @param value - The value to render as a string
+ * @returns A string representation of the value
+ * @example
+ * ```ts
+ * // Primitive values
+ * defaultRenderLabel("active") // "active"
+ * defaultRenderLabel(42) // "42"
+ * defaultRenderLabel(true) // "true"
+ *
+ * // Iterable values
+ * defaultRenderLabel(["apple", "banana"]) // "apple, banana"
+ * defaultRenderLabel(new Set([1, 2, 3])) // "1, 2, 3"
+ *
+ * // Edge cases
+ * defaultRenderLabel(null) // "null"
+ * defaultRenderLabel(undefined) // "undefined"
+ * defaultRenderLabel([]) // ""
+ * ```
+ * @internal
+ */
+export declare function defaultRenderLabel(value: unknown): string;

package/dist/esm/components/filter/utils/value-formatters.js

@@ -0,0 +1,14 @@
+function t(r) {
+  return r !== null && typeof r == "object";
+}
+function n(r) {
+  return t(r) && Symbol.iterator in r;
+}
+function i(r) {
+  return !t(r) || !n(r) ? String(r) : Array.from(r).join(", ");
+}
+export {
+  i as defaultRenderLabel,
+  t as isCompositeValue,
+  n as isIterable
+};

package/dist/esm/components/filter-toolbar/FilterToolbar.d.ts

@@ -0,0 +1,110 @@
+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';

package/dist/esm/components/filter-toolbar/FilterToolbar.js

@@ -0,0 +1,172 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { forwardRef as B, useState as G, useMemo as f } from "react";
+import { uyTv as H } from "@payfit/unity-themes";
+import { useId as W } from "react-aria";
+import { Toolbar as Y, Group as k } from "react-aria-components";
+import { useIntl as q, FormattedMessage as z } from "react-intl";
+import { Button as J } from "../button/Button.js";
+import { Filter as K } from "../filter/Filter.js";
+import { useFilterToolbarState as Q } from "./hooks/use-filter-toolbar-state.js";
+import { AddFilter as U } from "./parts/AddFilter.js";
+const X = H({
+  slots: {
+    base: ["uy:flex uy:gap-100 uy:flex-wrap uy:items-center"],
+    filters: ["uy:list-none uy:contents"],
+    actions: ["uy:contents"]
+  }
+}), Z = B(
+  ({
+    filterDefs: a,
+    initialValue: F,
+    onChange: y,
+    onClearFiltersPress: g,
+    onAddFilterPress: h,
+    ...C
+  }, L) => {
+    const i = q(), s = W(), [M, c] = G(
+      /* @__PURE__ */ new Set()
+    ), {
+      appliedFilters: m,
+      availableFilterDefs: v,
+      filterValues: A,
+      status: u,
+      addFilter: S,
+      clearFilters: T,
+      removeFilter: w,
+      setFilterValue: n
+    } = Q({
+      filterDefs: a,
+      initialValue: F,
+      onChange: y
+    }), x = f(
+      () => new Map(a.map((t) => [t.id, t])),
+      [a]
+    ), D = (t) => {
+      if (t === "all") return;
+      const l = Array.from(t).map(String);
+      S(l), c((e) => /* @__PURE__ */ new Set([...e, ...l])), h?.(l);
+    }, I = () => {
+      T(), g?.();
+    }, _ = (t, l) => {
+      n(t, l);
+    }, N = (t) => {
+      w(t);
+    }, P = (t) => {
+      c((l) => {
+        const e = new Set(l);
+        return e.delete(t), e;
+      });
+    }, E = u === "WITH_ALL_FILTERS_APPLIED", O = u !== "EMPTY", { base: V, filters: $, actions: j } = X(), d = f(() => ({
+      toolbar: i.formatMessage({
+        id: "unity:component:filter-toolbar:label",
+        defaultMessage: "Filter toolbar"
+      }),
+      filterList: i.formatMessage({
+        id: "unity:component:filter-toolbar:filter-list:label",
+        defaultMessage: "Applied filters"
+      }),
+      filterControls: i.formatMessage({
+        id: "unity:component:filter-toolbar:filter-controls:label",
+        defaultMessage: "Filter control"
+      })
+    }), [i]), o = f(() => ({
+      filterList: `filter-toolbar-${s}__filter-list`,
+      filterControls: `filter-toolbar-${s}__filter-controls`
+    }), [s]);
+    return /* @__PURE__ */ p(
+      Y,
+      {
+        ref: L,
+        className: V(),
+        "aria-label": d.toolbar,
+        ...C,
+        children: [
+          m.length > 0 && /* @__PURE__ */ r(
+            "ul",
+            {
+              className: $(),
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              "aria-relevant": "additions removals",
+              "aria-label": d.filterList,
+              id: o.filterList,
+              children: m.map((t, l) => {
+                const e = x.get(t);
+                if (!e) return null;
+                const b = A.get(t);
+                return /* @__PURE__ */ r("li", { role: "presentation", children: /* @__PURE__ */ r(
+                  K,
+                  {
+                    id: e.id,
+                    label: e.label,
+                    value: b,
+                    onChange: (R) => {
+                      _(e.id, R);
+                    },
+                    renderControl: e.renderControl,
+                    renderLabel: e.renderLabel,
+                    isDismissable: !0,
+                    isDefaultOpen: M.has(t),
+                    onFilterOpen: () => {
+                      P(e.id);
+                    },
+                    onDismiss: () => {
+                      N(e.id);
+                    },
+                    onClearSelection: () => {
+                      n(e.id, void 0);
+                    },
+                    onConfirmSelection: () => {
+                      n(e.id, b);
+                    },
+                    ...e.filterProps
+                  }
+                ) }, `filter-item-${l}`);
+              })
+            }
+          ),
+          /* @__PURE__ */ p(
+            k,
+            {
+              className: j(),
+              "aria-label": d.filterControls,
+              id: o.filterControls,
+              children: [
+                /* @__PURE__ */ r(
+                  U,
+                  {
+                    availableFilterDefs: [...v],
+                    isDisabled: E,
+                    onSelectionChange: D,
+                    "aria-controls": o.filterControls
+                  }
+                ),
+                O && /* @__PURE__ */ r(
+                  J,
+                  {
+                    variant: "ghost",
+                    color: "neutral",
+                    onPress: I,
+                    "aria-controls": o.filterList,
+                    children: /* @__PURE__ */ r(
+                      z,
+                      {
+                        id: "unity:component:filter-toolbar:clear-filters:label",
+                        defaultMessage: "Clear filters"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "FilterToolbar";
+export {
+  Z as FilterToolbar,
+  X as filterToolbar
+};

package/dist/esm/components/filter-toolbar/FilterToolbar.types.d.ts

@@ -0,0 +1,119 @@
+import { FilterDisplayProps, FilterEventProps, FilterProps } from '../filter/Filter.types.js';
+import { AppliedFilter, SerializableAppliedFilter } from './hooks/use-filter-toolbar-state.js';
+export type { AppliedFilter, SerializableAppliedFilter };
+/**
+ * Defines the configuration for an individual filter within the FilterToolbar.
+ * Each FilterDef specifies how a filter should render its control UI, display selected values,
+ * and handle user interactions.
+ * @template TDataType - The type of data this filter works with (e.g., string, number, string[], etc.)
+ * @example
+ * ```tsx
+ * const statusFilterDef: FilterDef<string> = {
+ *   id: 'status',
+ *   label: 'Employee Status',
+ *   renderControl: (value, onChange) => (
+ *     <Select value={value} onChange={onChange}>
+ *       <Option value="active">Active</Option>
+ *       <Option value="inactive">Inactive</Option>
+ *     </Select>
+ *   ),
+ *   renderLabel: (value) => value,
+ *   filterProps: {
+ *     prefixIcon: 'filter',
+ *     maxVisibleValues: 2
+ *   }
+ * }
+ * ```
+ */
+export interface FilterDef<TDataType = unknown> {
+    /**
+     * Unique identifier for the filter. Used to track filter state and must be unique across all filters in the toolbar.
+     */
+    id: string;
+    /**
+     * Display label shown on the filter button.
+     */
+    label: string;
+    /**
+     * Render function that provides the control UI for selecting filter values.
+     * Receives the current value and an onChange callback to update the value.
+     * @param value - The current filter value
+     * @param onChange - Callback to update the filter value
+     * @returns ReactNode representing the filter control (e.g., Select, Checkbox group, DatePicker)
+     */
+    renderControl: FilterProps<TDataType>['renderControl'];
+    /**
+     * render function to customize how selected values are displayed in the filter button.
+     * If not provided, values are rendered as strings or comma-separated lists for arrays.
+     * @param value - The current filter value
+     * @returns ReactNode representing the formatted value display
+     */
+    renderLabel?: FilterProps<TDataType>['renderLabel'];
+    /**
+     * Optional additional props to customize the filter button appearance and behavior.
+     * Accepts a subset of Filter component props including display and event handler props.
+     */
+    filterProps?: Partial<FilterDisplayProps & FilterEventProps>;
+    /**
+     * Index signature allowing additional custom properties for extended filter definitions.
+     */
+    [key: string]: unknown;
+}
+/**
+ * Props for the FilterToolbar component.
+ * @example
+ * ```tsx
+ * const filterToolbarProps: FilterToolbarProps = {
+ *   filterDefs: [
+ *     { id: 'status', label: 'Status', renderControl: (v, onChange) => <Select value={v} onChange={onChange} /> }
+ *   ],
+ *   initialValue: [{ id: 'status', value: 'active' }],
+ *   onChange: (filters) => console.log('Filters changed:', filters),
+ *   onClearFiltersPress: () => console.log('Filters cleared'),
+ *   onAddFilterPress: (filterIds) => console.log('Filters added:', filterIds)
+ * }
+ * ```
+ */
+export type FilterToolbarProps = {
+    /**
+     * Array of filter definitions that configure the available filters in the toolbar.
+     * Each definition specifies the filter's UI, behavior, and data type.
+     */
+    filterDefs: FilterDef[];
+    /**
+     * Optional array of filters to prepopulate the toolbar on initial render.
+     * Use this to restore previously applied filters or set default filters.
+     * @default undefined
+     */
+    initialValue?: AppliedFilter[];
+    /**
+     * Callback invoked whenever the filter state changes (filters added, removed, or values modified).
+     * Receives an array of serializable filter objects containing filter IDs and their current values.
+     * @param filters - Array of currently applied filters with their values
+     * @default undefined
+     */
+    onChange?: (filters: SerializableAppliedFilter[]) => void;
+    /**
+     * Callback invoked when the user presses the "Clear filters" button.
+     * Use this to perform additional cleanup or analytics tracking.
+     * @default undefined
+     */
+    onClearFiltersPress?: () => void;
+    /**
+     * Callback invoked when the user adds one or more filters using the "Add filter" button.
+     * Receives the ID(s) of the newly added filter(s).
+     * @param filterId - Single filter ID or array of filter IDs that were added
+     * @default undefined
+     */
+    onAddFilterPress?: (filterId: string | string[]) => void;
+    /**
+     * Custom label for the "Add filter" button.
+     * @default "Add filter" (internationalized)
+     */
+    addFilterLabel?: string;
+    /**
+     * Custom label for the "Clear filters" button.
+     * @default "Clear filters" (internationalized)
+     */
+    clearAllLabel?: string;
+};

package/dist/esm/components/filter-toolbar/hooks/use-filter-toolbar-state.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Represents a filter that has been added to the toolbar with an optional value.
+ * Used internally to track applied filters and their current state.
+ * @internal
+ */
+export type AppliedFilter = {
+    /** Unique identifier matching a filter definition ID */
+    id: string;
+    /** Optional value for the filter, can be any type supported by the filter's control */
+    value?: unknown;
+};
+/**
+ * Serializable representation of an applied filter suitable for URL parameters or JSON storage.
+ * Filter values are normalized to strings or string arrays for consistent serialization.
+ * @internal
+ */
+export type SerializableAppliedFilter = {
+    /** Unique identifier matching a filter definition ID */
+    id: string;
+    /** Normalized filter value as string or string array */
+    value?: string | string[];
+};
+/**
+ * Minimal filter definition interface required for state management.
+ * Extends this interface to add additional properties specific to your filter implementation.
+ * @internal
+ */
+export type FilterDefBase = {
+    /** Unique identifier for the filter */
+    id: string;
+    /** Index signature allowing additional custom properties */
+    [key: string]: unknown;
+};
+/**
+ * Configuration parameters for the useFilterToolbarState hook.
+ * @template T - Filter definition type extending FilterDefBase
+ * @internal
+ */
+export type UseFilterToolbarStateParams<T extends FilterDefBase = FilterDefBase> = {
+    /** Array of available filter definitions */
+    filterDefs: T[];
+    /** Optional initial filters to prepopulate the toolbar */
+    initialValue?: AppliedFilter[];
+    /** Callback invoked when filter state changes */
+    onChange?: (appliedFilters: SerializableAppliedFilter[]) => void;
+};
+type FilterToolbarStatus = 'EMPTY' | 'WITH_SOME_FILTERS_APPLIED' | 'WITH_ALL_FILTERS_APPLIED';
+/**
+ * Return value from the useFilterToolbarState hook providing state and actions.
+ * @template T - Filter definition type extending FilterDefBase
+ * @internal
+ */
+export type UseFilterToolbarStateReturn<T extends FilterDefBase = FilterDefBase> = {
+    /** Current status of the toolbar */
+    status: FilterToolbarStatus;
+    /** Array of currently applied filter IDs in order */
+    appliedFilters: readonly string[];
+    /** Array of filter IDs that haven't been applied yet */
+    remainingFilters: readonly string[];
+    /** Filter definitions for filters that haven't been applied */
+    availableFilterDefs: T[];
+    /** Map of filter IDs to their current values */
+    filterValues: ReadonlyMap<string, unknown>;
+    /** Add one or more filters to the toolbar */
+    addFilter: (filterId: string | string[]) => void;
+    /** Remove one or more filters from the toolbar */
+    removeFilter: (filterId: string | string[]) => void;
+    /** Clear all applied filters */
+    clearFilters: () => void;
+    /** Set the value for a specific filter */
+    setFilterValue: (filterId: string, value: unknown) => void;
+};
+/**
+ * Manages the state for a filter toolbar, handling filter application, removal, and value updates.
+ * This hook provides a complete state management solution for dynamic filter toolbars where users can
+ * add and remove filters on demand. It maintains an internal reducer for efficient state updates and
+ * provides serializable filter values through callbacks.
+ * @template T - Filter definition type extending FilterDefBase
+ * @param params - Configuration including filter definitions, initial values, and change callback
+ * @returns State and action handlers for the filter toolbar
+ * @example
+ * ```tsx
+ * const { appliedFilters, addFilter, setFilterValue } = useFilterToolbarState({
+ *   filterDefs: [
+ *     { id: 'status', label: 'Status' },
+ *     { id: 'department', label: 'Department' }
+ *   ],
+ *   onChange: (filters) => {
+ *     console.log('Filters changed:', filters)
+ *   }
+ * })
+ * ```
+ * @internal
+ */
+export declare function useFilterToolbarState<T extends FilterDefBase = FilterDefBase>(params: UseFilterToolbarStateParams<T>): UseFilterToolbarStateReturn<T>;
+export {};