@payfit/unity-components 3.1.13 → 3.1.15

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

@@ -1,52 +0,0 @@
-import { SelectListOptGroup as e } from "../select-list/parts/SelectListOptGroup.js";
-import { SelectListOption as t } from "../select-list/parts/SelectListOption.js";
-import { SelectList as n } from "../select-list/SelectList.js";
-import { jsx as r } from "react/jsx-runtime";
-//#region src/components/filter/Filter.controls.tsx
-function i(e) {
-	return "children" in e && e.children.length > 0;
-}
-function a(a, o) {
-	let s = (n) => /* @__PURE__ */ r(e, {
-		items: n.children,
-		label: n.label,
-		children: (e) => /* @__PURE__ */ r(t, {
-			id: e.id,
-			textValue: e.label,
-			children: e.label
-		})
-	}), c = (e) => /* @__PURE__ */ r(t, {
-		id: e.id,
-		textValue: e.label,
-		children: e.label
-	});
-	return (e, t) => /* @__PURE__ */ r(n, {
-		...o,
-		items: a,
-		value: e,
-		selectionMode: "multiple",
-		onChange: (e) => {
-			t(e);
-		},
-		escapeKeyBehavior: "none",
-		sortSelectedFirst: !0,
-		className: "uy:scroll-pb-500",
-		children: (e) => i(e) ? s(e) : c(e)
-	});
-}
-function o(e) {
-	return (t) => {
-		if (t === "all") return e.flatMap((e) => i(e) ? e.children : e).map((e) => e.label).join(", ");
-		let n = [];
-		for (let r of e) {
-			if (i(r)) {
-				n.push(...r.children.filter((e) => t.has(e.id)));
-				continue;
-			}
-			t.has(r.id) && n.push(r);
-		}
-		return n.map((e) => e.label).join(", ");
-	};
-}
-//#endregion
-export { a as selectListFilter, o as selectListLabel };

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

@@ -1,189 +0,0 @@
-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/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/components/filter/Filter.js

@@ -1,102 +0,0 @@
-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/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/components/filter/hooks/useFilterIds.js

@@ -1,13 +0,0 @@
-import { useId as e } from "react-aria/useId";
-//#region src/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/components/filter/hooks/useFilterState.js

@@ -1,17 +0,0 @@
-import { useCallback as e, useState as t } from "react";
-//#region src/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/components/filter/hooks/useFilterValue.js

@@ -1,32 +0,0 @@
-import { isIterable as e } from "../utils/value-formatters.js";
-import { useMemo as t } from "react";
-//#region src/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/components/filter/parts/FilterButton.js

@@ -1,41 +0,0 @@
-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/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/components/filter/parts/FilterLabel.js

@@ -1,39 +0,0 @@
-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/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/components/filter/parts/FilterPopover.js

@@ -1,69 +0,0 @@
-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/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/components/filter/utils/value-formatters.js

@@ -1,12 +0,0 @@
-//#region src/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 };