@payfit/unity-components 3.1.14 → 3.1.16

package/dist/esm/core/components/empty-state/presets/EmptyStateUseDesktop.js

@@ -0,0 +1,27 @@
+import { EmptyState as e } from "../EmptyState.js";
+import { EmptyStateIcon as t } from "../parts/EmptyStateIcon.js";
+import { EmptyStateContent as n } from "../parts/EmptyStateContent.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+//#region src/core/components/empty-state/presets/EmptyStateUseDesktop.tsx
+var s = r(({ title: r, description: s, ...c }, l) => {
+	let u = o().formatMessage({
+		id: "unity:component:empty-state:use-desktop:title",
+		defaultMessage: "Best experienced on desktop"
+	});
+	return /* @__PURE__ */ a(e, {
+		ref: l,
+		...c,
+		children: [/* @__PURE__ */ i(t, {
+			icon: "DevicesOutlined",
+			variant: "neutral"
+		}), /* @__PURE__ */ i(n, {
+			title: r || u,
+			description: s
+		})]
+	});
+});
+s.displayName = "EmptyStateUseDesktop";
+//#endregion
+export { s as EmptyStateUseDesktop };

package/dist/esm/core/components/empty-state/presets/EmptyStateWaitingForData.js

@@ -0,0 +1,32 @@
+import { EmptyState as e } from "../EmptyState.js";
+import { EmptyStateIcon as t } from "../parts/EmptyStateIcon.js";
+import { EmptyStateContent as n } from "../parts/EmptyStateContent.js";
+import { EmptyStateActions as r } from "../parts/EmptyStateActions.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+//#region src/core/components/empty-state/presets/EmptyStateWaitingForData.tsx
+var c = i(({ title: i, description: c, actions: l, ...u }, d) => {
+	let f = s().formatMessage({
+		id: "unity:component:empty-state:waiting-for-data:title",
+		defaultMessage: "No available results yet"
+	});
+	return /* @__PURE__ */ o(e, {
+		ref: d,
+		...u,
+		children: [
+			/* @__PURE__ */ a(t, {
+				icon: "InfoOutlined",
+				variant: "neutral"
+			}),
+			/* @__PURE__ */ a(n, {
+				title: i || f,
+				description: c
+			}),
+			l && /* @__PURE__ */ a(r, { children: l })
+		]
+	});
+});
+c.displayName = "EmptyStateWaitingForData";
+//#endregion
+export { c as EmptyStateWaitingForData };

package/dist/esm/core/components/error-state/ErrorState.js

@@ -0,0 +1,161 @@
+import { Icon as e } from "../icon/Icon.js";
+import { Button as t } from "../button/Button.js";
+import { Text as n } from "../text/Text.js";
+import { useContainerQueryLevel as r } from "../../hooks/use-container-query-level.js";
+import { Code as i } from "../code/Code.js";
+import { initConfig as a } from "./initConfig.js";
+import { Collapsible as o } from "./parts/Collapsible.js";
+import { forwardRef as s, useCallback as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useIntl as f } from "react-intl";
+import { Illustration as p } from "@payfit/unity-illustrations";
+import { tv as m } from "tailwind-variants";
+//#region src/core/components/error-state/ErrorState.tsx
+var h = m({ slots: {
+	container: ["uy:@container uy:w-full uy:h-full uy:content-center uy:flex-1"],
+	wrapper: [
+		"uy:border-solid uy:border-border-neutral uy:border uy:rounded-200 uy:p-300",
+		"uy:@section:py-600 uy:@section:px-auto",
+		"uy:@page:border-0 uy:@page:py-auto uy:@page:px-auto",
+		"uy:@app:border-0 uy:@app:py-auto uy:@app:px-auto"
+	],
+	base: ["uy:max-w-[704px] uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-150 uy:@section:gap-250 uy:w-full uy:justify-self-center"],
+	content: ["uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-250"],
+	illustration: [
+		"uy:@section:block",
+		"uy:hidden",
+		"uy:@page:w-[200px]",
+		"uy:@section:w-[200px]",
+		"uy:@app:w-[240px]"
+	],
+	icon: ["uy:bg-surface-neutral-lowest uy:rounded-125 uy:p-100", "uy:@section:hidden"],
+	informationContainer: ["uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-100 uy:@section:gap-150 uy:text-center uy"],
+	information: [
+		"uy:hidden",
+		"",
+		"uy:@section:block"
+	],
+	informationComponent: ["uy:block", "uy:@section:hidden"],
+	h1: ["uy:hidden uy:@app:block"],
+	h2: ["uy:hidden uy:@page:@max-app:block"],
+	h3: ["uy:hidden uy:@section:@max-page:block"],
+	h4: ["uy:block uy:@section:hidden"],
+	description: ["uy:hidden uy:@section:block uy:@section:w-full"]
+} }), g = (e, t) => /* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u("div", {
+	className: "uy:mb-200",
+	children: e.detailDescription ?? t?.detailDescription
+}), /* @__PURE__ */ u(i, { children: e.error.message })] }), _ = (e, n) => /* @__PURE__ */ u("div", {
+	className: "uy:mt-200 uy:@section:block uy:hidden",
+	children: /* @__PURE__ */ u(t, {
+		onClick: () => {
+			window.history.go(-1);
+		},
+		color: "primary",
+		variant: "ghost",
+		children: e.backButtonLabel ?? n?.backButtonLabel
+	})
+}), v = (e, t) => e === "generic" ? t ? "known" : "unknown" : e, y = s((i, o) => {
+	let { icon: s, illustration: m, onButtonPress: y, buttonLabel: b, mainTitle: x, mainDescription: S, mainDescriptionComponent: C, type: w, error: T, entityName: E, role: D = "status" } = i, { base: O, content: k, container: A, wrapper: j, illustration: M, icon: N, informationContainer: P, information: F, informationComponent: ee, description: I, h1: L, h2: R, h3: z, h4: B } = h(), V = f(), H = a(V, { noPermissionEntityName: E }), U = l(null), { level: W } = r({ ref: U }), G = c((e) => {
+		U.current = e, o && (typeof o == "function" ? o(e) : o.current = e);
+	}, [o]), K = v(w, T), q = H.get(K), J = m ?? q?.illustration, Y = s ?? q?.icon, X = b ?? q?.buttonLabel, Z = x ?? q?.mainTitle, Q = S ?? q?.mainDescription, $ = C ?? q?.mainDescriptionComponent;
+	return /* @__PURE__ */ u("div", {
+		"data-dd-privacy": "allow",
+		role: D,
+		className: A(),
+		ref: G,
+		"data-container-level": W,
+		children: /* @__PURE__ */ u("div", {
+			className: j(),
+			children: /* @__PURE__ */ d("div", {
+				className: O(),
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: k(),
+						children: [
+							J && /* @__PURE__ */ u(p, {
+								src: J,
+								variant: "picture",
+								alt: V.formatMessage({
+									id: "unity:component:error-state:common:illustration:alt",
+									defaultMessage: "Error states"
+								}),
+								className: M(),
+								isDecorative: !0
+							}),
+							Y && /* @__PURE__ */ u(e, {
+								src: Y,
+								size: 24,
+								color: "content.neutral.low",
+								alt: V.formatMessage({
+									id: "unity:component:error-state:common:icon:alt",
+									defaultMessage: "Error states"
+								}),
+								className: N()
+							}),
+							/* @__PURE__ */ d("div", {
+								className: P(),
+								children: [
+									/* @__PURE__ */ u(n, {
+										asElement: "h1",
+										variant: "h1",
+										color: "content.neutral",
+										className: L(),
+										children: Z
+									}),
+									/* @__PURE__ */ u(n, {
+										asElement: "h2",
+										variant: "h2",
+										color: "content.neutral",
+										className: R(),
+										children: Z
+									}),
+									/* @__PURE__ */ u(n, {
+										asElement: "h3",
+										variant: "h3",
+										color: "content.neutral",
+										className: z(),
+										children: Z
+									}),
+									/* @__PURE__ */ u(n, {
+										asElement: "h4",
+										variant: "h4",
+										color: "content.neutral",
+										className: B(),
+										children: Z
+									}),
+									/* @__PURE__ */ u(n, {
+										asElement: "p",
+										variant: "body",
+										color: "content.neutral.low",
+										className: F(),
+										children: Q
+									}),
+									/* @__PURE__ */ u(n, {
+										asElement: "p",
+										variant: "body",
+										color: "content.neutral.low",
+										className: ee(),
+										children: $
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ u(t, {
+						variant: W === "component" ? "ghost" : "primary",
+						onPress: y,
+						children: X
+					}),
+					K === "unknown" && _(i, q),
+					K === "known" && /* @__PURE__ */ u("div", {
+						className: I(),
+						children: g(i, q)
+					})
+				]
+			})
+		})
+	});
+});
+y.displayName = "ErrorState";
+//#endregion
+export { y as ErrorState, h as errorState };

package/dist/esm/core/components/error-state/initConfig.js

@@ -0,0 +1,118 @@
+import { RawLink as e } from "../link/RawLink.js";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@payfit/unity-illustrations/assets/EmptyStateIncidentPanel";
+import r from "@payfit/unity-illustrations/assets/EmptyStateResearch";
+import i from "@payfit/unity-illustrations/assets/ClosedLockWithBackground";
+//#region src/core/components/error-state/initConfig.tsx
+var a = (a, o) => /* @__PURE__ */ new Map([
+	["known", {
+		illustration: n,
+		icon: "WarningCircleOutlined",
+		mainTitle: a.formatMessage({
+			id: "unity:component:error-state:common:main-title",
+			defaultMessage: "Something went wrong"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescription: a.formatMessage({
+			id: "unity:component:error-state:known:main-description",
+			defaultMessage: "Please refresh the page or check your connection.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescriptionComponent: a.formatMessage({
+			id: "unity:component:error-state:common:main-description-component",
+			defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		buttonLabel: a.formatMessage({
+			id: "unity:component:error-state:button:label",
+			defaultMessage: "Go to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		detailDescription: a.formatMessage({
+			id: "unity:component:error-state:detail-description",
+			defaultMessage: "Here's the technical error detail.<br></br> <br></br>If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:"
+		}, {
+			br: () => /* @__PURE__ */ t("br", {}),
+			Link: (n) => /* @__PURE__ */ t(e, {
+				variant: "inline",
+				isExternal: !0,
+				color: "primary",
+				href: a.formatMessage({ id: "unity:component:common:customer-support:url" }),
+				children: n
+			})
+		})
+	}],
+	["unknown", {
+		illustration: n,
+		icon: "WarningCircleOutlined",
+		mainTitle: a.formatMessage({
+			id: "unity:component:error-state:common:main-title",
+			defaultMessage: "Something went wrong"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescription: a.formatMessage({
+			id: "unity:component:error-state:unknown:main-description",
+			defaultMessage: "Please refresh the page or try signing in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.<br></br>If the problem continues, please contact <Link>our customer support</Link>."
+		}, {
+			br: () => /* @__PURE__ */ t("br", {}),
+			Link: (n) => /* @__PURE__ */ t(e, {
+				variant: "inline",
+				isExternal: !0,
+				color: "primary",
+				href: a.formatMessage({ id: "unity:component:common:customer-support:url" }),
+				children: n
+			})
+		}),
+		mainDescriptionComponent: a.formatMessage({
+			id: "unity:component:error-state:common:main-description-component",
+			defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		buttonLabel: a.formatMessage({
+			id: "unity:component:error-state:button:label",
+			defaultMessage: "Go to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		backButtonLabel: a.formatMessage({
+			id: "unity:component:error-state:unknown:back-link:label",
+			defaultMessage: "Back to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) })
+	}],
+	["404", {
+		illustration: r,
+		icon: "WarningCircleOutlined",
+		mainTitle: a.formatMessage({
+			id: "unity:component:error-state:404:main-title",
+			defaultMessage: "Sorry, we couldn’t find what you’re looking for"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescription: a.formatMessage({
+			id: "unity:component:error-state:404:main-description",
+			defaultMessage: "This item may have been moved or deleted.<br></br>You can try searching for it manually or start again from your dashboard."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		buttonLabel: a.formatMessage({
+			id: "unity:component:error-state:button:label",
+			defaultMessage: "Go to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) })
+	}],
+	["no-permission", {
+		illustration: i,
+		icon: "LockOutlined",
+		mainTitle: a.formatMessage({
+			id: "unity:component:error-state:no-permission:main-title",
+			defaultMessage: "You don't have access to this page"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescription: a.formatMessage({
+			id: "unity:component:error-state:no-permission:main-description",
+			defaultMessage: "Your current role on {entityName} doesn't include the permission to view this content."
+		}, {
+			br: () => /* @__PURE__ */ t("br", {}),
+			entityName: o?.noPermissionEntityName
+		}),
+		mainDescriptionComponent: a.formatMessage({
+			id: "unity:component:error-state:no-permission:main-description",
+			defaultMessage: "Your current role on {entityName} doesn't include the permission to view this content."
+		}, {
+			br: () => /* @__PURE__ */ t("br", {}),
+			entityName: o?.noPermissionEntityName
+		}),
+		buttonLabel: a.formatMessage({
+			id: "unity:component:error-state:no-permission:button:label",
+			defaultMessage: "Go back"
+		}, { br: () => /* @__PURE__ */ t("br", {}) })
+	}]
+]);
+//#endregion
+export { a as initConfig };

package/dist/esm/core/components/error-state/parts/Collapsible.js

@@ -0,0 +1,69 @@
+import { Icon as e } from "../../icon/Icon.js";
+import { Text as t } from "../../text/Text.js";
+import { useContext as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { FormattedMessage as o } from "react-intl";
+import { Button as s } from "react-aria-components/Button";
+import { Disclosure as c, DisclosurePanel as l, DisclosureStateContext as u, Heading as d } from "react-aria-components/Disclosure";
+//#region src/core/components/error-state/parts/Collapsible.tsx
+var f = r({
+	slots: {
+		base: [
+			"uy:w-full uy:rounded-50",
+			"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-2",
+			"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-solid",
+			"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-offset-2",
+			"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-utility-focus-ring"
+		],
+		heading: "uy:w-full",
+		button: ["uy:flex uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer", "uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"],
+		title: "uy:flex uy:grow uy:text-left uy:items-center uy:justify-center",
+		icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center",
+		content: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top-left uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0"
+	},
+	variants: { isExpanded: {
+		true: { icon: "uy:rotate-180" },
+		false: { icon: "uy:rotate-0" }
+	} }
+}), p = () => {
+	let { button: r, title: c, icon: l, heading: p } = f({ isExpanded: n(u)?.isExpanded });
+	return /* @__PURE__ */ i(d, {
+		"data-dd-privacy": "allow",
+		className: p(),
+		children: /* @__PURE__ */ i(s, {
+			className: r(),
+			slot: "trigger",
+			children: /* @__PURE__ */ a(t, {
+				variant: "bodyStrong",
+				className: c(),
+				children: [/* @__PURE__ */ i(e, {
+					src: "CaretDownOutlined",
+					className: l(),
+					role: "presentation"
+				}), /* @__PURE__ */ i(o, {
+					id: "unity:component:error-state:collapsible:title",
+					defaultMessage: "Show details"
+				})]
+			})
+		})
+	});
+}, m = ({ children: e, ...t }) => {
+	let { base: n, content: r } = f();
+	return /* @__PURE__ */ a(c, {
+		"data-dd-privacy": "allow",
+		...t,
+		className: n(),
+		children: [/* @__PURE__ */ i(p, {}), /* @__PURE__ */ i(l, {
+			"data-dd-privacy": "allow",
+			className: r(),
+			children: /* @__PURE__ */ i("div", {
+				className: "uy:ml-400 uy:typography-body",
+				children: e
+			})
+		})]
+	});
+};
+m.displayName = "Collapsible";
+//#endregion
+export { m as Collapsible };

package/dist/esm/core/components/fieldset/Fieldset.js

@@ -0,0 +1,63 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as i } from "react-aria/useId";
+//#region src/core/components/fieldset/Fieldset.tsx
+var a = t({
+	slots: {
+		base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
+		legend: "uy:typography-h3 uy:text-content-neutral",
+		description: "uy:block uy:typography-body uy:mt-100 uy:text-content-neutral",
+		fieldsContainer: "uy:flex uy:flex-col uy:gap-250"
+	},
+	variants: {
+		isLegendHidden: {
+			true: {
+				legend: "uy:sr-only",
+				description: "uy:sr-only",
+				fieldsContainer: "uy:mt-0"
+			},
+			false: {
+				legend: "uy:block",
+				description: "uy:block",
+				fieldsContainer: "uy:mt-300"
+			}
+		},
+		disableEndMargin: { true: { base: "uy:[&:last-of-type]:mb-0" } }
+	},
+	defaultVariants: {
+		isLegendHidden: !1,
+		disableEndMargin: !1
+	}
+}), o = e(({ children: e, ...t }, o) => {
+	let s = i(), { legend: c, description: l, isLegendHidden: u, disableEndMargin: d, ...f } = t, { base: p, legend: m, description: h, fieldsContainer: g } = a({
+		isLegendHidden: u,
+		disableEndMargin: d
+	}), _ = l ? `${s}-fieldset-description` : void 0;
+	return /* @__PURE__ */ r("fieldset", {
+		"data-dd-privacy": "allow",
+		...f,
+		ref: o,
+		className: p(),
+		"aria-describedby": _,
+		children: [
+			/* @__PURE__ */ n("legend", {
+				className: m(),
+				children: c
+			}),
+			l && /* @__PURE__ */ n("span", {
+				id: `${s}-fieldset-description`,
+				"data-fieldset-slot": "description",
+				className: h(),
+				children: l
+			}),
+			/* @__PURE__ */ n("div", {
+				className: g(),
+				children: e
+			})
+		]
+	});
+});
+o.displayName = "Fieldset";
+//#endregion
+export { o as Fieldset, a as fieldset };

package/dist/esm/core/components/fieldset/parts/FieldGroup.js

@@ -0,0 +1,13 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/core/components/fieldset/parts/FieldGroup.tsx
+var n = e(({ children: e, ...n }, r) => /* @__PURE__ */ t("div", {
+	...n,
+	ref: r,
+	role: "group",
+	className: "uy:grid uy:grid-cols-1 uy:gap-y-250 uy:md:grid-cols-2 uy:md:gap-x-200",
+	children: e
+}));
+n.displayName = "FieldGroup";
+//#endregion
+export { n as FieldGroup };

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

@@ -0,0 +1,52 @@
+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/core/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 };