@payfit/unity-components 3.1.14 → 3.1.16

package/dist/esm/core/components/filter/Filter.d.ts

@@ -0,0 +1,189 @@
+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').TVReturnTypeLike<unknown, undefined>>;
+export declare const filterDismissButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<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/core/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';

package/dist/esm/core/components/filter/Filter.js

@@ -0,0 +1,102 @@
+import { CircularIconButton as e } from "../icon-button/CircularIconButton.js";
+import { selectListFilter as t, selectListLabel as n } from "./Filter.controls.js";
+import { useFilterIds as r } from "./hooks/useFilterIds.js";
+import { useFilterState as i } from "./hooks/useFilterState.js";
+import { defaultRenderLabel as a } from "./utils/value-formatters.js";
+import { useFilterValue as o } from "./hooks/useFilterValue.js";
+import { FilterButton as s } from "./parts/FilterButton.js";
+import { FilterLabel as c } from "./parts/FilterLabel.js";
+import { FilterPopover as l } from "./parts/FilterPopover.js";
+import { forwardRef as u, useCallback as d } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useIntl as h } from "react-intl";
+import { DialogTrigger as g } from "react-aria-components/Dialog";
+//#region src/core/components/filter/Filter.tsx
+var _ = f({ base: [
+	"uy:group uy:transition-colors",
+	"uy:flex uy:items-center",
+	"uy:rounded-md uy:sm:rounded-sm",
+	"uy:border uy:border-solid",
+	"uy:cursor-pointer uy:aria-[disabled=true]:cursor-not-allowed",
+	"uy:w-fit",
+	"uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
+	"uy:has-data-[hovered]:border-border-form-hover uy:has-data-[hovered]:bg-surface-form-hover",
+	"uy:has-data-[pressed]:border-border-form-pressed uy:has-data-[pressed]:bg-surface-form-pressed",
+	"uy:aria-[disabled=true]:border-border-form-disabled uy:aria-[disabled=true]:bg-surface-form-disabled uy:aria-[disabled=true]:text-content-form-disabled",
+	"uy:data-[status=active]:text-content-form-selected",
+	"uy:focus-within:outline-2 uy:focus-within:outline-offset-2 uy:focus-within:outline-utility-focus-ring",
+	"uy:[&:not(:has([data-unity-slot=\"dismiss\"]))]:pr-1.5"
+] }), v = f({ base: ["uy:rounded-r-sm uy:leading-0", "uy:pl-0.25 uy:py-1 uy:pr-1 uy:h-full"] });
+function y({ id: t, label: n, prefixIcon: u, onDismiss: f, renderControl: y, value: b, onChange: x, isDismissable: S = !0, isDisabled: C = !1, isActive: w = !1, renderLabel: T = a, maxVisibleValues: E = 3, shouldCloseOnConfirm: D = !0, onClearSelection: O, shouldCloseOnClear: k = !0, onConfirmSelection: A, onFilterOpen: j, onFilterClose: M, isDefaultOpen: N = !1, ...P }, F) {
+	let I = h(), { rootId: L, labelId: R, valueId: z, dismissButtonId: B } = r(t), { isOpen: V, setIsOpen: H, confirm: U, clear: W } = i({
+		initialIsOpen: N,
+		shouldCloseOnConfirm: D,
+		shouldCloseOnClear: k,
+		onConfirmSelection: A,
+		onClearSelection: O
+	}), G = d((e) => {
+		H(e), e ? j?.() : M?.();
+	}, [
+		H,
+		j,
+		M
+	]), { valuesCount: K, shouldShowBadge: q, formattedValue: J } = o(b, E, T);
+	return /* @__PURE__ */ m("div", {
+		ref: F,
+		role: "group",
+		id: L,
+		className: _(),
+		"aria-labelledby": R,
+		"aria-describedby": z,
+		"aria-disabled": C,
+		"data-dd-privacy": "allow",
+		"data-status": w || V ? "active" : "idle",
+		"data-unity-component": "Filter",
+		...P,
+		children: [/* @__PURE__ */ m(g, {
+			isOpen: V,
+			onOpenChange: G,
+			children: [/* @__PURE__ */ p(s, {
+				labelId: R,
+				prefixIcon: u,
+				isDisabled: C,
+				children: /* @__PURE__ */ p(c, {
+					labelId: R,
+					valueId: z,
+					label: n,
+					value: b,
+					valuesCount: K,
+					shouldShowBadge: q,
+					formattedValue: J,
+					maxVisibleValues: E,
+					isDisabled: C
+				})
+			}), /* @__PURE__ */ p(l, {
+				onConfirm: U,
+				onClear: W,
+				children: y(b, x)
+			})]
+		}), S && /* @__PURE__ */ p("div", {
+			"data-unity-slot": "dismiss",
+			className: v(),
+			children: /* @__PURE__ */ p(e, {
+				icon: "CloseOutlined",
+				color: "content.neutral.lowest",
+				title: I.formatMessage({
+					id: "unity:component:filter:dismiss:title",
+					defaultMessage: "Remove filter"
+				}),
+				onPress: f,
+				id: B,
+				"aria-controls": L,
+				isDisabled: C
+			})
+		})]
+	});
+}
+var b = u(y);
+b.displayName = "Filter";
+var x = { selectList: t }, S = { selectList: n };
+//#endregion
+export { b as Filter, x as FilterControls, S as FilterLabels, _ as filterContainer, v as filterDismissButton };

package/dist/esm/core/components/filter/hooks/useFilterIds.js

@@ -0,0 +1,13 @@
+import { useId as e } from "react-aria/useId";
+//#region src/core/components/filter/hooks/useFilterIds.ts
+function t(t) {
+	let n = e(), r = t ?? n;
+	return {
+		rootId: `filter-${r}`,
+		labelId: `filter-${r}__label`,
+		valueId: `filter-${r}__value`,
+		dismissButtonId: `filter-${r}__dismiss-button`
+	};
+}
+//#endregion
+export { t as useFilterIds };

package/dist/esm/core/components/filter/hooks/useFilterState.js

@@ -0,0 +1,17 @@
+import { useCallback as e, useState as t } from "react";
+//#region src/core/components/filter/hooks/useFilterState.ts
+function n(n = {}) {
+	let { initialIsOpen: r = !1, shouldCloseOnConfirm: i = !0, shouldCloseOnClear: a = !0, onConfirmSelection: o, onClearSelection: s } = n, [c, l] = t(r);
+	return {
+		isOpen: c,
+		setIsOpen: l,
+		confirm: e(() => {
+			i && l(!1), o?.();
+		}, [i, o]),
+		clear: e(() => {
+			a && l(!1), s?.();
+		}, [a, s])
+	};
+}
+//#endregion
+export { n as useFilterState };

package/dist/esm/core/components/filter/hooks/useFilterValue.js

@@ -0,0 +1,32 @@
+import { isIterable as e } from "../utils/value-formatters.js";
+import { useMemo as t } from "react";
+//#region src/core/components/filter/hooks/useFilterValue.ts
+function n(n, r, i) {
+	return t(() => {
+		if (n == null || n === "") return {
+			valuesCount: 0,
+			shouldShowBadge: !1,
+			formattedValue: null
+		};
+		let t;
+		if (e(n)) {
+			if (t = Array.from(n).length, t === 0) return {
+				valuesCount: 0,
+				shouldShowBadge: !1,
+				formattedValue: null
+			};
+		} else t = 1;
+		let a = !isNaN(r) && t > r, o = a ? null : i(n);
+		return {
+			valuesCount: t,
+			shouldShowBadge: a,
+			formattedValue: o
+		};
+	}, [
+		n,
+		r,
+		i
+	]);
+}
+//#endregion
+export { n as useFilterValue };

package/dist/esm/core/components/filter/parts/FilterButton.js

@@ -0,0 +1,41 @@
+import { Actionable as e } from "../../actionable/Actionable.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@payfit/unity-icons";
+//#region src/core/components/filter/parts/FilterButton.tsx
+var a = t({ slots: {
+	button: [
+		"uy:flex uy:gap-0.5 uy:items-center",
+		"uy:focus-visible:outline-none",
+		"uy:py-1",
+		"uy:pl-1.5 uy:has-data-[unity-slot=prefix]:pl-1",
+		"uy:pr-0"
+	],
+	prefix: [
+		"uy:p-0.25",
+		"uy:text-content-neutral-low",
+		"uy:group-data-[status=active]:text-content-form-selected",
+		"uy:group-aria-[disabled=true]:text-content-neutral-disabled"
+	]
+} });
+function o({ labelId: t, prefixIcon: o, isDisabled: s, children: c }) {
+	let { button: l, prefix: u } = a();
+	return /* @__PURE__ */ r(e, {
+		className: l(),
+		"aria-labelledby": t,
+		isDisabled: s,
+		"aria-haspopup": "dialog",
+		children: [o && /* @__PURE__ */ n("span", {
+			"data-unity-slot": "prefix",
+			className: u(),
+			children: /* @__PURE__ */ n(i, {
+				src: o,
+				size: 20,
+				role: "presentation",
+				color: "inherit"
+			})
+		}), c]
+	});
+}
+//#endregion
+export { o as FilterButton, a as filterButton };

package/dist/esm/core/components/filter/parts/FilterLabel.js

@@ -0,0 +1,39 @@
+import { Badge as e } from "../../badge/Badge.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { FormattedMessage as i } from "react-intl";
+//#region src/core/components/filter/parts/FilterLabel.tsx
+var a = t({ slots: {
+	container: ["uy:typography-action", "uy:flex uy:gap-0.25 uy:items-baseline"],
+	value: ["uy:whitespace-nowrap uy:overflow-hidden uy:max-w-[20ch] uy:text-ellipsis"]
+} });
+function o({ labelId: t, valueId: o, label: s, valuesCount: c, formattedValue: l, maxVisibleValues: u, isDisabled: d }) {
+	let { container: f, value: p } = a(), m = c > 0 && c <= u && l;
+	return /* @__PURE__ */ r("div", {
+		id: t,
+		className: f(),
+		children: [/* @__PURE__ */ r("span", {
+			"data-dd-privacy": "allow",
+			children: [s, m && /* @__PURE__ */ r("span", {
+				"data-dd-privacy": "mask",
+				className: p(),
+				id: o,
+				children: [":\xA0", l]
+			})]
+		}), !isNaN(u) && c > u && /* @__PURE__ */ r(e, {
+			variant: d ? "neutral" : "numeric",
+			className: "uy:h-300",
+			children: [c, /* @__PURE__ */ n("span", {
+				className: "uy:sr-only",
+				id: o,
+				children: /* @__PURE__ */ n(i, {
+					id: "unity:component:filter:label:values-count",
+					defaultMessage: "{count, plural, =0 {no values} one {value} other {values}} selected",
+					values: { count: c }
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { o as FilterLabel, a as filterLabel };

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

@@ -0,0 +1,69 @@
+import { Button as e } from "../../button/Button.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { FormattedMessage as i } from "react-intl";
+import { Separator as a } from "react-aria-components/Separator";
+import { Popover as o } from "react-aria-components/Popover";
+import { Dialog as s } from "react-aria-components/Dialog";
+//#region src/core/components/filter/parts/FilterPopover.tsx
+var c = t({ slots: {
+	popover: [
+		"uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-sm uy:shadow-300 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]"],
+	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:border-border-neutral uy:h-px"],
+	actions: ["uy:flex uy:justify-between uy:gap-100"]
+} });
+function l({ children: t, onConfirm: l, onClear: u }) {
+	let { popover: d, dialog: f, content: p, footer: m, separator: h, actions: g } = c();
+	return /* @__PURE__ */ n(o, {
+		className: d(),
+		placement: "bottom left",
+		children: /* @__PURE__ */ r(s, {
+			className: f(),
+			children: [/* @__PURE__ */ n("div", {
+				className: p(),
+				children: t
+			}), /* @__PURE__ */ r("footer", {
+				className: m(),
+				children: [/* @__PURE__ */ n(a, { className: h() }), /* @__PURE__ */ r("div", {
+					className: g(),
+					children: [/* @__PURE__ */ n(e, {
+						variant: "ghost",
+						color: "danger",
+						size: "full",
+						prefixIcon: "TrashOutlined",
+						onPress: u,
+						children: /* @__PURE__ */ n(i, {
+							id: "unity:component:common:clear:title",
+							defaultMessage: "Clear"
+						})
+					}), /* @__PURE__ */ n(e, {
+						variant: "primary",
+						color: "primary",
+						size: "full",
+						onPress: l,
+						children: /* @__PURE__ */ n(i, {
+							id: "unity:component:filter:action:apply",
+							defaultMessage: "Apply"
+						})
+					})]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { l as FilterPopover, c as filterPopover };

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

@@ -0,0 +1,12 @@
+//#region src/core/components/filter/utils/value-formatters.ts
+function e(e) {
+	return typeof e == "object" && !!e;
+}
+function t(t) {
+	return e(t) && Symbol.iterator in t;
+}
+function n(n) {
+	return !e(n) || !t(n) ? String(n) : Array.from(n).join(", ");
+}
+//#endregion
+export { n as defaultRenderLabel, e as isCompositeValue, t as isIterable };

package/dist/esm/core/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-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            actions?: import('tailwind-variants').ClassValue;
+            filters?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            actions?: import('tailwind-variants').ClassValue;
+            filters?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    filters: string[];
+    actions: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            actions?: import('tailwind-variants').ClassValue;
+            filters?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    filters: string[];
+    actions: string[];
+}, import('tailwind-variants').TVReturnTypeLike<unknown, {
+    base: string[];
+    filters: string[];
+    actions: string[];
+}>>;
+/**
+ * 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
+ * - Filters supplied through `initialValue` do not open automatically; their popover opens only after user interaction
+ * - 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/core/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 type * from './FilterToolbar.types.js';