@payfit/unity-components 3.1.13 → 3.1.15

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

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

package/dist/esm/core/components/filter-toolbar/hooks/use-filter-toolbar-state.js

@@ -0,0 +1,130 @@
+import { normalizeFilterValue as e } from "../utils/normalize-filter-value.js";
+import { useCallback as t, useMemo as n, useReducer as r } from "react";
+//#region src/core/components/filter-toolbar/hooks/use-filter-toolbar-state.ts
+function i(e) {
+	return (t, n) => {
+		switch (n.type) {
+			case "ADD_FILTERS": {
+				let r = new Set(t.appliedFilters), i = !1;
+				for (let t of n.payload) e.has(t) && !r.has(t) && (r.add(t), i = !0);
+				return i ? {
+					appliedFilters: r,
+					filterValues: t.filterValues
+				} : t;
+			}
+			case "REMOVE_FILTERS": {
+				let e = new Set(t.appliedFilters), r = new Map(t.filterValues), i = !1;
+				for (let t of n.payload) e.delete(t) && (r.delete(t), i = !0);
+				return i ? {
+					appliedFilters: e,
+					filterValues: r
+				} : t;
+			}
+			case "CLEAR_FILTERS": return {
+				appliedFilters: /* @__PURE__ */ new Set(),
+				filterValues: /* @__PURE__ */ new Map()
+			};
+			case "SET_FILTER_VALUE": {
+				let { filterId: e, value: r } = n.payload;
+				if (!t.appliedFilters.has(e)) return t;
+				let i = new Map(t.filterValues);
+				if (r == null) {
+					if (!i.has(e)) return t;
+					i.delete(e);
+				} else {
+					if (i.get(e) === r) return t;
+					i.set(e, r);
+				}
+				return {
+					appliedFilters: t.appliedFilters,
+					filterValues: i
+				};
+			}
+			default: return t;
+		}
+	};
+}
+function a(a) {
+	let { filterDefs: o, initialValue: s, onChange: c } = a, l = n(() => new Set(o.map((e) => e.id)), [o]), u = n(() => {
+		let e = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Map();
+		if (s) for (let n of s) {
+			let r = n.id, i = n.value;
+			l.has(r) && (e.add(r), i != null && t.set(r, i));
+		}
+		return {
+			appliedFilters: e,
+			filterValues: t
+		};
+	}, [s, l]), [d, f] = r(n(() => i(l), [l]), u), p = n(() => Array.from(d.appliedFilters), [d.appliedFilters]), m = n(() => Array.from(l).filter((e) => !d.appliedFilters.has(e)), [l, d.appliedFilters]), h = n(() => {
+		let e = [];
+		for (let t of o) d.appliedFilters.has(t.id) || e.push(t);
+		return e;
+	}, [o, d.appliedFilters]), g = n(() => {
+		let e = d.appliedFilters.size, t = l.size;
+		return e === 0 ? "EMPTY" : t > 0 && e === t ? "WITH_ALL_FILTERS_APPLIED" : "WITH_SOME_FILTERS_APPLIED";
+	}, [d.appliedFilters.size, l.size]), _ = t((t, n) => Array.from(t).map((t) => ({
+		id: t,
+		value: e(n.get(t))
+	})), []), v = t((e) => {
+		let t = Array.isArray(e) ? e : [e], n = new Set(d.appliedFilters), r = !1;
+		for (let e of t) l.has(e) && !n.has(e) && (n.add(e), r = !0);
+		r && (f({
+			type: "ADD_FILTERS",
+			payload: t
+		}), c && c(_(n, d.filterValues)));
+	}, [
+		c,
+		d.appliedFilters,
+		d.filterValues,
+		l,
+		_
+	]), y = t((e) => {
+		let t = Array.isArray(e) ? e : [e], n = new Set(d.appliedFilters), r = !1;
+		for (let e of t) n.delete(e) && (r = !0);
+		if (r && (f({
+			type: "REMOVE_FILTERS",
+			payload: t
+		}), c)) {
+			let e = new Map(d.filterValues);
+			for (let n of t) e.delete(n);
+			c(_(n, e));
+		}
+	}, [
+		c,
+		d.appliedFilters,
+		d.filterValues,
+		_
+	]), b = t(() => {
+		d.appliedFilters.size > 0 && (f({ type: "CLEAR_FILTERS" }), c && c([]));
+	}, [c, d.appliedFilters.size]), x = t((e, t) => {
+		let n = d.filterValues.get(e), r = t == null, i = d.filterValues.has(e);
+		if (d.appliedFilters.has(e) && (r ? i : n !== t) && (f({
+			type: "SET_FILTER_VALUE",
+			payload: {
+				filterId: e,
+				value: t
+			}
+		}), c)) {
+			let n = new Map(d.filterValues);
+			r ? n.delete(e) : n.set(e, t), c(_(d.appliedFilters, n));
+		}
+	}, [
+		c,
+		d.appliedFilters,
+		d.filterValues,
+		_
+	]);
+	return {
+		status: g,
+		appliedFilters: p,
+		remainingFilters: m,
+		availableFilterDefs: h,
+		filterValues: d.filterValues,
+		addFilter: v,
+		removeFilter: y,
+		clearFilters: b,
+		setFilterValue: x
+	};
+}
+//#endregion
+export { a as useFilterToolbarState };

package/dist/esm/core/components/filter-toolbar/parts/AddFilter.js

@@ -0,0 +1,82 @@
+import { filterPopover as e } from "../../filter/parts/FilterPopover.js";
+import { AddFilterItem as t } from "./AddFilterItem.js";
+import { useRef as n, useState as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { FormattedMessage as c, useIntl as l } from "react-intl";
+import { Button as u } from "react-aria-components/Button";
+import { Icon as d } from "@payfit/unity-icons";
+import { ListBox as f } from "react-aria-components/ListBox";
+import { Popover as p } from "react-aria-components/Popover";
+import { Dialog as m } from "react-aria-components/Dialog";
+//#region src/core/components/filter-toolbar/parts/AddFilter.tsx
+var h = i({ slots: {
+	button: [
+		"uy:flex uy:group uy:items-center",
+		"uy:rounded-sm",
+		"uy:border uy:border-solid",
+		"uy:cursor-pointer uy:data-[disabled=true]:cursor-not-allowed",
+		"uy:w-fit uy:p-100 uy:pl-100 uy:pr-150",
+		"uy:typography-action",
+		"uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
+		"uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover",
+		"uy:data-[pressed=true]:border-border-form-pressed uy:data-[pressed=true]:bg-surface-form-pressed",
+		"uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled uy:data-[disabled=true]:text-content-form-disabled",
+		"uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+	],
+	icon: [
+		"uy:p-0.25",
+		"uy:text-content-neutral-low",
+		"uy:group-data-[status=active]:text-content-primary-enabled",
+		"uy:group-data-[disabled=true]:text-content-neutral-disabled"
+	],
+	listbox: ["uy:p-100"]
+} }), g = ({ availableFilterDefs: i, onSelectionChange: g, isDisabled: _ = !1, ...v }) => {
+	let y = l(), [b, x] = r(!1), S = n(null), { popover: C, dialog: w } = e(), { icon: T, button: E, listbox: D } = h();
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(u, {
+		className: E(),
+		ref: S,
+		onPress: () => {
+			x(!0);
+		},
+		isDisabled: _,
+		...v,
+		children: [/* @__PURE__ */ o(d, {
+			src: "PlusOutlined",
+			role: "presentation",
+			size: 20,
+			className: T()
+		}), /* @__PURE__ */ o(c, {
+			id: "unity:component:filter-toolbar:add-filter:label",
+			defaultMessage: "Add filter"
+		})]
+	}), /* @__PURE__ */ o(p, {
+		className: C(),
+		triggerRef: S,
+		isOpen: b,
+		onOpenChange: x,
+		placement: "bottom start",
+		children: /* @__PURE__ */ o(m, {
+			className: w(),
+			"aria-label": y.formatMessage({
+				id: "unity:component:filter-toolbar:add-filter:popover:label",
+				defaultMessage: "Select a filter to add"
+			}),
+			children: /* @__PURE__ */ o(f, {
+				className: D(),
+				selectionMode: "single",
+				items: i,
+				onSelectionChange: (e) => {
+					g?.(e), x(!1);
+				},
+				children: (e) => /* @__PURE__ */ o(t, {
+					id: e.id,
+					children: e.label
+				})
+			})
+		})
+	})] });
+};
+g.displayName = "AddFilter";
+//#endregion
+export { g as AddFilter };

package/dist/esm/core/components/filter-toolbar/parts/AddFilterItem.js

@@ -0,0 +1,20 @@
+import { uyTv as e } from "@payfit/unity-themes";
+import { jsx as t } from "react/jsx-runtime";
+import { ListBoxItem as n } from "react-aria-components/ListBox";
+//#region src/core/components/filter-toolbar/parts/AddFilterItem.tsx
+var r = e({ base: [
+	"uy:flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+	"uy:px-150 uy:py-100",
+	"uy:rounded-50 uy:cursor-pointer",
+	"uy:hover:bg-surface-neutral-hover",
+	"uy:active:bg-surface-neutral-pressed",
+	"uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2"
+] }), i = ({ id: e, children: i, ...a }) => /* @__PURE__ */ t(n, {
+	className: r(),
+	id: e,
+	...a,
+	children: i
+});
+i.displayName = "AddFilterItem";
+//#endregion
+export { i as AddFilterItem, r as addFilterItem };

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

@@ -0,0 +1,13 @@
+//#region src/core/components/filter-toolbar/utils/normalize-filter-value.ts
+function e(e) {
+	if (e != null) {
+		if (Array.isArray(e)) return e.map((e) => String(e));
+		if (typeof e == "object" && Symbol.iterator in e) return Array.from(e).map((e) => String(e));
+		if (e instanceof Date) return e.toISOString();
+		if (typeof e == "object") return JSON.stringify(e);
+		if (typeof e == "string") return e;
+		if (typeof e == "number" || typeof e == "boolean") return String(e);
+	}
+}
+//#endregion
+export { e as normalizeFilterValue };

package/dist/esm/core/components/flex/Flex.js

@@ -0,0 +1,38 @@
+import { flex as e } from "./Flex.variants.js";
+import { forwardRef as t, useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/flex/Flex.tsx
+var i = t(({ asElement: t = "div", children: i, className: a, inline: o, direction: s, isReversed: c, wrap: l, gap: u, gapX: d, gapY: f, justify: p, align: m, alignContent: h, ...g }, _) => /* @__PURE__ */ r(t, {
+	ref: _,
+	className: n(() => e({
+		inline: o,
+		direction: s,
+		isReversed: c,
+		wrap: l,
+		gap: u,
+		gapX: d,
+		gapY: f,
+		justify: p,
+		align: m,
+		alignContent: h,
+		className: a
+	}), [
+		m,
+		h,
+		a,
+		s,
+		u,
+		d,
+		f,
+		o,
+		c,
+		p,
+		l
+	]),
+	...g,
+	children: i
+}));
+i.displayName = "Flex";
+var a = i;
+//#endregion
+export { i as Flex, a as Stack };

package/dist/esm/core/components/flex/Flex.variants.js

@@ -0,0 +1,199 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/flex/Flex.variants.tsx
+var t = e({
+	base: "uy:flex",
+	variants: {
+		inline: {
+			true: "uy:inline-flex",
+			false: "uy:flex"
+		},
+		direction: {
+			row: "uy:flex-row",
+			col: "uy:flex-col"
+		},
+		isReversed: {
+			true: null,
+			false: null
+		},
+		wrap: {
+			wrap: "uy:flex-wrap",
+			"wrap-reverse": "uy:flex-wrap-reverse",
+			nowrap: "uy:flex-nowrap"
+		},
+		gap: {
+			0: "uy:gap-0",
+			25: "uy:gap-25",
+			50: "uy:gap-50",
+			75: "uy:gap-75",
+			100: "uy:gap-100",
+			125: "uy:gap-125",
+			150: "uy:gap-150",
+			200: "uy:gap-200",
+			250: "uy:gap-250",
+			300: "uy:gap-300",
+			400: "uy:gap-400",
+			500: "uy:gap-500",
+			600: "uy:gap-600",
+			800: "uy:gap-800",
+			1e3: "uy:gap-1000"
+		},
+		gapX: {
+			0: "uy:gap-x-0",
+			25: "uy:gap-x-25",
+			50: "uy:gap-x-50",
+			75: "uy:gap-x-75",
+			100: "uy:gap-x-100",
+			125: "uy:gap-x-125",
+			150: "uy:gap-x-150",
+			200: "uy:gap-x-200",
+			250: "uy:gap-x-250",
+			300: "uy:gap-x-300",
+			400: "uy:gap-x-400",
+			500: "uy:gap-x-500",
+			600: "uy:gap-x-600",
+			800: "uy:gap-x-800",
+			1e3: "uy:gap-x-1000"
+		},
+		gapY: {
+			0: "uy:gap-y-0",
+			25: "uy:gap-y-25",
+			50: "uy:gap-y-50",
+			75: "uy:gap-y-75",
+			100: "uy:gap-y-100",
+			125: "uy:gap-y-125",
+			150: "uy:gap-y-150",
+			200: "uy:gap-y-200",
+			250: "uy:gap-y-250",
+			300: "uy:gap-y-300",
+			400: "uy:gap-y-400",
+			500: "uy:gap-y-500",
+			600: "uy:gap-y-600",
+			800: "uy:gap-y-800",
+			1e3: "uy:gap-y-1000"
+		},
+		justify: {
+			start: "uy:justify-start",
+			end: "uy:justify-end",
+			center: "uy:justify-center",
+			between: "uy:justify-between",
+			around: "uy:justify-around",
+			evenly: "uy:justify-evenly"
+		},
+		align: {
+			start: "uy:items-start",
+			end: "uy:items-end",
+			center: "uy:items-center",
+			baseline: "uy:items-baseline",
+			stretch: "uy:items-stretch"
+		},
+		alignContent: {
+			start: "uy:content-start",
+			end: "uy:content-end",
+			center: "uy:content-center",
+			between: "uy:content-between",
+			around: "uy:content-around",
+			evenly: "uy:content-evenly"
+		}
+	},
+	defaultVariants: {
+		inline: !1,
+		direction: "row",
+		wrap: "nowrap",
+		justify: "start",
+		align: "stretch",
+		isReversed: !1
+	},
+	compoundVariants: [
+		{
+			isReversed: !0,
+			direction: "row",
+			className: "uy:flex-row-reverse"
+		},
+		{
+			isReversed: !0,
+			direction: void 0,
+			className: "uy:flex-row-reverse"
+		},
+		{
+			isReversed: !0,
+			direction: "col",
+			className: "uy:flex-col-reverse"
+		}
+	]
+}), n = e({
+	variants: {
+		grow: {
+			0: "uy:grow-0",
+			1: "uy:grow"
+		},
+		shrink: {
+			0: "uy:shrink-0",
+			1: "uy:shrink"
+		},
+		basis: {
+			auto: "uy:basis-auto",
+			min: "uy:basis-min",
+			max: "uy:basis-max",
+			fit: "uy:basis-fit",
+			full: "uy:basis-full",
+			"1/2": "uy:basis-1/2",
+			"1/3": "uy:basis-1/3",
+			"2/3": "uy:basis-2/3",
+			"1/4": "uy:basis-1/4",
+			"2/4": "uy:basis-2/4",
+			"3/4": "uy:basis-3/4",
+			"1/6": "uy:basis-1/6",
+			"2/6": "uy:basis-2/6",
+			"3/6": "uy:basis-3/6",
+			"4/6": "uy:basis-4/6",
+			"5/6": "uy:basis-5/6",
+			"1/12": "uy:basis-1/12",
+			"2/12": "uy:basis-2/12",
+			"3/12": "uy:basis-3/12",
+			"4/12": "uy:basis-4/12",
+			"5/12": "uy:basis-5/12",
+			"6/12": "uy:basis-6/12",
+			"7/12": "uy:basis-7/12",
+			"8/12": "uy:basis-8/12",
+			"9/12": "uy:basis-9/12",
+			"10/12": "uy:basis-10/12",
+			"11/12": "uy:basis-11/12",
+			0: "uy:basis-0",
+			25: "uy:basis-25",
+			50: "uy:basis-50",
+			75: "uy:basis-75",
+			100: "uy:basis-100",
+			125: "uy:basis-125",
+			150: "uy:basis-150",
+			200: "uy:basis-200",
+			250: "uy:basis-250",
+			300: "uy:basis-300",
+			400: "uy:basis-400",
+			500: "uy:basis-500",
+			600: "uy:basis-600",
+			800: "uy:basis-800",
+			1e3: "uy:basis-1000"
+		},
+		order: {
+			first: "uy:order-first",
+			last: "uy:order-last",
+			none: "uy:order-none"
+		},
+		self: {
+			auto: "uy:self-auto",
+			start: "uy:self-start",
+			end: "uy:self-end",
+			center: "uy:self-center",
+			stretch: "uy:self-stretch",
+			baseline: "uy:self-baseline"
+		}
+	},
+	defaultVariants: {
+		grow: 0,
+		shrink: 1,
+		order: "none",
+		self: "auto"
+	}
+});
+//#endregion
+export { t as flex, n as flexItem };

package/dist/esm/core/components/flex/FlexItem.js

@@ -0,0 +1,21 @@
+import { flexItem as e } from "./Flex.variants.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/flex/FlexItem.tsx
+var r = t(({ asElement: t = "div", children: r, className: i, grow: a, shrink: o, basis: s, order: c, self: l, ...u }, d) => /* @__PURE__ */ n(t, {
+	ref: d,
+	className: e({
+		grow: a,
+		shrink: o,
+		basis: s,
+		order: c,
+		self: l,
+		className: i
+	}),
+	...u,
+	children: r
+}));
+r.displayName = "FlexItem";
+var i = r;
+//#endregion
+export { r as FlexItem, i as StackItem };