@webority/ui-react 0.33.0 → 0.35.0

package/dist/components/AppCommandPalette.js

@@ -0,0 +1,164 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import n from "./renderIconProp.js";
+import r from "./AppSpinner.js";
+import i from "./AppModal.js";
+import { matchSegments as a } from "@webority/ui-elements/helpers";
+import { Fragment as o, useEffect as s, useId as c, useLayoutEffect as l, useRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/command-palette";
+//#region src/components/AppCommandPalette.jsx
+var p = "lg";
+function m({ open: t, onClose: n, query: r = "", onQueryChange: a, placeholder: o = "Search…", groups: s = [], loading: l = !1, emptyText: u = "No results", footer: f, ariaLabel: m = "Search", highlight: g = !0, id: _, className: v = "", ...y }) {
+	e("AppCommandPalette", y);
+	let b = c(), x = _ || b;
+	return /* @__PURE__ */ d(i, {
+		open: t,
+		onClose: n,
+		hideHeader: !0,
+		placement: "top",
+		size: p,
+		ariaLabel: m,
+		className: `wui-cmd-card${v ? ` ${v}` : ""}`,
+		children: /* @__PURE__ */ d(h, {
+			baseId: x,
+			query: r,
+			onQueryChange: a,
+			placeholder: o,
+			groups: s,
+			loading: l,
+			emptyText: u,
+			footer: f,
+			ariaLabel: m,
+			highlight: g,
+			onClose: n,
+			rest: y
+		})
+	});
+}
+function h({ baseId: e, query: i, onQueryChange: a, placeholder: o, groups: c, loading: p, emptyText: m, footer: h, ariaLabel: v, highlight: y, onClose: b, rest: x }) {
+	let S = u(null), C = `${e}-list`, w = c.filter((e) => e.items?.length), T = !p && i.trim() !== "" && w.length === 0;
+	return l(() => {
+		S.current?.refresh?.();
+	}), s(() => {
+		let e = S.current, t = (e) => {
+			let t = c.find((t) => String(t.key) === e.detail.groupKey)?.items?.find((t) => String(t.key) === e.detail.key);
+			t && (e.preventDefault(), t.onSelect?.(), b?.());
+		};
+		return e.addEventListener("wui-command-palette:select", t), () => e.removeEventListener("wui-command-palette:select", t);
+	}, [c, b]), /* @__PURE__ */ f("wui-command-palette", {
+		ref: S,
+		...x,
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "wui-cmd-search",
+				children: [
+					/* @__PURE__ */ d("span", {
+						className: "wui-cmd-search-icon",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ d(t, {
+							name: "search",
+							size: 18
+						})
+					}),
+					/* @__PURE__ */ d("input", {
+						className: "wui-cmd-input",
+						type: "text",
+						role: "combobox",
+						"aria-expanded": "true",
+						"aria-controls": C,
+						"aria-autocomplete": "list",
+						"aria-label": v,
+						placeholder: o,
+						autoComplete: "off",
+						spellCheck: !1,
+						"data-autofocus": "",
+						value: i,
+						onChange: (e) => a?.(e.target.value)
+					}),
+					p && /* @__PURE__ */ d(r, {
+						size: "sm",
+						className: "wui-cmd-spinner"
+					})
+				]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "wui-cmd-list",
+				role: "listbox",
+				id: C,
+				"aria-label": "Results",
+				"aria-busy": p ? "true" : void 0,
+				hidden: w.length === 0,
+				children: w.map((t) => {
+					let r = `${e}-${_(t.key)}`;
+					return /* @__PURE__ */ f("div", {
+						className: "wui-cmd-group",
+						role: "group",
+						"aria-labelledby": r,
+						children: [/* @__PURE__ */ d("div", {
+							className: "wui-cmd-group-label",
+							role: "presentation",
+							id: r,
+							children: t.label
+						}), t.items.map((e) => /* @__PURE__ */ f("div", {
+							className: "wui-cmd-item",
+							role: "option",
+							id: `${r}-${_(e.key)}`,
+							"data-group-key": String(t.key),
+							"data-key": String(e.key),
+							"aria-disabled": e.disabled ? "true" : void 0,
+							children: [
+								e.icon != null && /* @__PURE__ */ d("span", {
+									className: "wui-cmd-item-icon",
+									"aria-hidden": "true",
+									children: n(e.icon, { size: 18 })
+								}),
+								/* @__PURE__ */ f("span", {
+									className: "wui-cmd-item-text",
+									children: [/* @__PURE__ */ d("span", {
+										className: "wui-cmd-item-label",
+										children: y ? g(e.label, i) : e.label
+									}), e.description != null && /* @__PURE__ */ d("span", {
+										className: "wui-cmd-item-desc",
+										children: e.description
+									})]
+								}),
+								e.meta != null && /* @__PURE__ */ d("span", {
+									className: "wui-cmd-item-meta",
+									children: e.meta
+								})
+							]
+						}, e.key))]
+					}, t.key);
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "wui-cmd-empty",
+				role: "status",
+				children: T ? m : null
+			}),
+			h != null && /* @__PURE__ */ d("div", {
+				className: "wui-cmd-footer",
+				children: h
+			})
+		]
+	});
+}
+function g(e, t) {
+	if (typeof e != "string") return e;
+	let n = a(e, t);
+	if (n.length === 1 && !n[0].match) return e;
+	let r = 0;
+	return n.map((e) => {
+		let t = r;
+		return r += e.text.length, e.match ? /* @__PURE__ */ d("mark", {
+			className: "wui-cmd-mark",
+			children: e.text
+		}, t) : /* @__PURE__ */ d(o, { children: e.text }, t);
+	});
+}
+function _(e) {
+	return String(e).replace(/\s+/g, "_");
+}
+//#endregion
+export { m as default };

package/dist/components/AppCompareTable.js

@@ -0,0 +1,41 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/AppCompareTable.jsx
+function i({ columns: i = [], rows: a = [], caption: o, className: s = "", ...c }) {
+	e("AppCompareTable", c);
+	let l = (e) => e === !0 ? /* @__PURE__ */ n("span", {
+		className: "compare-yes",
+		children: /* @__PURE__ */ n(t, {
+			name: "check",
+			size: 16
+		})
+	}) : e === !1 ? /* @__PURE__ */ n("span", {
+		className: "compare-no",
+		children: "-"
+	}) : e;
+	return /* @__PURE__ */ n("div", {
+		className: `compare-table${s ? ` ${s}` : ""}`,
+		...c,
+		children: /* @__PURE__ */ r("table", { children: [
+			o && /* @__PURE__ */ n("caption", {
+				className: "visually-hidden",
+				children: o
+			}),
+			/* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n("tr", { children: i.map((e, t) => /* @__PURE__ */ n("th", {
+				scope: "col",
+				className: e.highlight ? "is-highlight" : void 0,
+				children: e.label
+			}, e.label ? `col-${t}-${e.label}` : `col-${t}`)) }) }),
+			/* @__PURE__ */ n("tbody", { children: a.map((e, t) => /* @__PURE__ */ r("tr", { children: [/* @__PURE__ */ n("th", {
+				scope: "row",
+				children: e.label
+			}), e.values.map((e, t) => /* @__PURE__ */ n("td", {
+				className: i[t + 1]?.highlight ? "is-highlight" : void 0,
+				children: l(e)
+			}, i[t + 1]?.label ?? t))] }, e.key ?? `${e.label}-${t}`)) })
+		] })
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/AppConfirmDialog.js

@@ -0,0 +1,93 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppButton.js";
+import r from "./AppModal.js";
+import i from "./AppInput.js";
+import { MODAL_ICONS as a } from "./ModalIcons.js";
+import { useEffect as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/AppConfirmDialog.jsx
+var d = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function f({ open: f, title: p, message: m, confirmLabel: h = "Confirm", cancelLabel: g = "Cancel", danger: _ = !1, tone: v, image: y, iconSize: b, confirmPhrase: x, onConfirm: S, onClose: C, loading: w = !1, staticBackdrop: T = !1, placement: E = "center", size: D = "md", className: O = "", ...k }) {
+	t("AppConfirmDialog", k), e("AppConfirmDialog", "tone", v, Object.keys(a)), e("AppConfirmDialog", "size", typeof D == "string" ? D : null, d);
+	let [A, j] = s("");
+	if (o(() => {
+		f || j("");
+	}, [f]), !f) return null;
+	let M = !!x && A.trim() !== x, N = y ? null : a[v || (_ ? "delete" : "info")], P = b > 0 ? { "--wui-confirm-icon-size": `${b}px` } : void 0, F = () => {
+		w || C?.();
+	};
+	return /* @__PURE__ */ l(r, {
+		...k,
+		open: f,
+		hideHeader: !0,
+		title: p,
+		onClose: F,
+		staticBackdrop: T,
+		placement: E,
+		size: D,
+		className: ["wui-confirm", O].filter(Boolean).join(" "),
+		footer: /* @__PURE__ */ u("div", {
+			className: "wui-confirm-actions",
+			children: [/* @__PURE__ */ l(n, {
+				variant: "secondary",
+				disabled: w,
+				onClick: F,
+				children: g
+			}), /* @__PURE__ */ l(n, {
+				variant: _ ? "danger" : "primary",
+				disabled: M,
+				loading: w,
+				onClick: S,
+				children: h
+			})]
+		}),
+		children: /* @__PURE__ */ u("div", {
+			className: "wui-confirm-content",
+			children: [
+				y ? /* @__PURE__ */ l("span", {
+					className: "wui-confirm-icon",
+					style: P,
+					children: /* @__PURE__ */ l("img", {
+						src: y,
+						alt: "",
+						"aria-hidden": "true"
+					})
+				}) : N && /* @__PURE__ */ l("span", {
+					className: "wui-confirm-icon",
+					style: P,
+					children: /* @__PURE__ */ l(N, { size: 120 })
+				}),
+				/* @__PURE__ */ l("h3", {
+					className: "wui-confirm-title",
+					tabIndex: -1,
+					"data-autofocus": "",
+					children: p
+				}),
+				m && /* @__PURE__ */ l("p", {
+					className: "wui-confirm-msg",
+					children: m
+				}),
+				x && /* @__PURE__ */ l(i, {
+					fieldClassName: "mt-3 mb-0 w-100 text-start",
+					label: /* @__PURE__ */ u(c, { children: [
+						"Type ",
+						/* @__PURE__ */ l("strong", { children: x }),
+						" to confirm"
+					] }),
+					value: A,
+					onChange: (e) => j(e.target.value),
+					"aria-label": `Type ${x} to confirm`,
+					disabled: w
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/AppConsentBanner.js

@@ -0,0 +1,37 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./useWuiControl.js";
+import { useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/consent-banner";
+import { getConsent as a, saveConsent as o } from "@webority/analytics/site";
+//#region src/components/AppConsentBanner.jsx
+var s = ["bottom-left", "bottom-right"];
+function c({ heading: c, description: l, policyHref: u, policyLabel: d, analyticsDescription: f, functionalDescription: p, marketingDescription: m, position: h = "bottom-left", standalone: g = !1, className: _ = "", style: v, ...y }) {
+	t("AppConsentBanner", y), e("AppConsentBanner", "position", h, s);
+	let { setRef: b, innerRef: x } = n({ on: { "wui-consent-save": (e) => {
+		o(e.detail), x.current && (x.current.preferences = a());
+	} } });
+	return r(() => {
+		let e = x.current;
+		if (!e) return;
+		let t = a();
+		e.preferences = t, t.decided || e.open();
+	}, [x]), /* @__PURE__ */ i("wui-consent-banner", {
+		ref: b,
+		position: h,
+		heading: c || void 0,
+		description: l || void 0,
+		"policy-href": u || void 0,
+		"policy-label": d || void 0,
+		"analytics-description": f || void 0,
+		"functional-description": p || void 0,
+		"marketing-description": m || void 0,
+		standalone: g || void 0,
+		class: _ || void 0,
+		style: v,
+		...y
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/AppContextMenu.js

@@ -0,0 +1,46 @@
+import e from "./warnUnknownProps.js";
+import t from "./renderIconProp.js";
+import { useEffect as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/context-menu";
+//#region src/components/AppContextMenu.jsx
+function o({ items: o = [], target: s, children: c, ariaLabel: l = "Context menu", disabled: u = !1, onOpen: d, menuClassName: f = "", linkComponent: p, ...m }) {
+	e("AppContextMenu", m);
+	let h = r(null);
+	return n(() => {
+		let e = h.current;
+		if (!d) return;
+		let t = (e) => d(e.detail);
+		return e.addEventListener("wui-context-menu:open", t), () => e.removeEventListener("wui-context-menu:open", t);
+	}, [d]), /* @__PURE__ */ a("wui-context-menu", {
+		ref: h,
+		target: s,
+		disabled: u,
+		...m,
+		children: [c, /* @__PURE__ */ i("div", {
+			className: `dropdown-menu wui-context-menu-panel${f ? ` ${f}` : ""}`,
+			role: "menu",
+			"aria-label": l,
+			tabIndex: -1,
+			children: o.map((e) => {
+				if (e.divider) return /* @__PURE__ */ i("hr", { className: "dropdown-divider" }, e.key);
+				let n = !!e.to && !e.disabled;
+				return /* @__PURE__ */ a(n ? p ?? "a" : "button", {
+					...n ? p ? { to: e.to } : { href: e.to } : { type: "button" },
+					className: `dropdown-item${e.danger ? " danger" : ""}${e.disabled ? " disabled" : ""}`,
+					role: "menuitem",
+					tabIndex: -1,
+					"data-key": e.key,
+					"aria-disabled": e.disabled ? "true" : void 0,
+					onClick: e.disabled ? void 0 : e.onClick,
+					children: [e.image ? /* @__PURE__ */ i("img", {
+						src: e.image,
+						alt: ""
+					}) : t(e.icon, { size: 16 }), e.label]
+				}, e.key);
+			})
+		})]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppCopyButton.js

@@ -0,0 +1,41 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./withTooltip.js";
+import r from "./AppActionIcon.js";
+import i from "./AppButton.js";
+import { COPY_FEEDBACK_MS as a, copyTextToClipboard as o } from "@webority/ui-elements/helpers";
+import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/AppCopyButton.jsx
+var f = {
+	sm: 14,
+	md: 16,
+	lg: 20
+};
+function p({ text: p, label: m = "Copy", copiedLabel: h = "Copied", iconOnly: g = !1, size: _ = "md", variant: v = "ghost", onCopied: y, className: b = "", tooltip: x, tooltipPlacement: S, ...C }) {
+	t("AppCopyButton", C), e("AppCopyButton", "size", _, Object.keys(f));
+	let [w, T] = u(!1), E = l(null);
+	c(() => () => clearTimeout(E.current), []);
+	let D = s(async () => {
+		await o(p) && (T(!0), clearTimeout(E.current), E.current = setTimeout(() => T(!1), a), y?.());
+	}, [p, y]), O = w ? h : m, k = w ? "check" : "files";
+	return n(g ? /* @__PURE__ */ d(r, {
+		icon: k,
+		label: O,
+		size: f[_] ?? f.md,
+		onClick: D,
+		className: b,
+		...C
+	}) : /* @__PURE__ */ d(i, {
+		leftIcon: k,
+		variant: v,
+		size: _,
+		onClick: D,
+		className: b,
+		"aria-live": "polite",
+		...C,
+		children: O
+	}), x, S);
+}
+//#endregion
+export { p as default };

package/dist/components/AppCountrySelect.js

@@ -0,0 +1,75 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppInfoTip.js";
+import r from "./AppRequiredMark.js";
+import i from "./useWuiControl.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/country-select";
+//#region src/components/AppCountrySelect.jsx
+var l = [
+	"sm",
+	"md",
+	"lg"
+], u = a(function({ value: a, onChange: u, countries: d, placeholder: f = "Select country", searchPlaceholder: p = "Search countries...", searchable: m = !0, clearable: h = !1, size: g = "md", floatingLabel: _ = !1, disabled: v, label: y, required: b = !1, error: x, hint: S, help: C, helpLabel: w = "More information", id: T, name: E, className: D = "", fieldClassName: O = "", "aria-label": k, "aria-labelledby": A, "aria-describedby": j, ...M }, N) {
+	t("AppCountrySelect", M), e("AppCountrySelect", "size", g, l);
+	let P = o(), { setRef: F } = i({
+		ref: N,
+		value: a ?? "",
+		onChange: u
+	}), I = T || P, L = _ && y, R = x && I ? `${I}-error` : void 0, z = S && I ? `${I}-hint` : void 0, B = /* @__PURE__ */ s("wui-country-select", {
+		"aria-label": k || (typeof y == "string" ? y : void 0),
+		"aria-labelledby": A || void 0,
+		"aria-describedby": R || z || j || void 0,
+		"aria-invalid": x ? "true" : void 0,
+		ref: F,
+		id: I,
+		name: E,
+		countries: Array.isArray(d) ? d.join(",") : void 0,
+		placeholder: L ? " " : f,
+		"search-placeholder": p,
+		searchable: m ? "" : void 0,
+		clearable: h ? "" : void 0,
+		size: g === "sm" || g === "lg" ? g : void 0,
+		disabled: v ? "" : void 0,
+		required: b ? "" : void 0,
+		className: D || void 0,
+		...M
+	});
+	return !y && !x && !S ? B : /* @__PURE__ */ c("div", {
+		className: ["field", O].filter(Boolean).join(" "),
+		children: [
+			y && !L && /* @__PURE__ */ c("label", {
+				className: "label",
+				htmlFor: I,
+				children: [
+					y,
+					b && /* @__PURE__ */ s(r, {}),
+					C && /* @__PURE__ */ s(n, {
+						label: w,
+						children: C
+					})
+				]
+			}),
+			L ? /* @__PURE__ */ c("div", {
+				className: "field-float",
+				children: [B, /* @__PURE__ */ c("label", {
+					className: "float-label",
+					htmlFor: I,
+					children: [y, b && /* @__PURE__ */ s(r, {})]
+				})]
+			}) : B,
+			x ? /* @__PURE__ */ s("div", {
+				className: "field-error",
+				id: R,
+				children: x
+			}) : S ? /* @__PURE__ */ s("div", {
+				className: "field-hint",
+				id: z,
+				children: S
+			}) : null
+		]
+	});
+});
+//#endregion
+export { u as default };

package/dist/components/AppDashboardCell.js

@@ -0,0 +1,19 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/AppDashboardCell.jsx
+var r = [
+	3,
+	4,
+	6,
+	12
+];
+function i({ span: i = 12, children: a, className: o = "", ...s }) {
+	return t("AppDashboardCell", s), e("AppDashboardCell", "span", i, r), /* @__PURE__ */ n("div", {
+		className: `wui-dashboard-cell${i === 12 || !r.includes(i) ? "" : ` wui-dashboard-cell-${i}`}${o ? ` ${o}` : ""}`,
+		...s,
+		children: a
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/AppDashboardGrid.js

@@ -0,0 +1,12 @@
+import e from "./warnUnknownProps.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/AppDashboardGrid.jsx
+function n({ children: n, className: r = "", ...i }) {
+	return e("AppDashboardGrid", i), /* @__PURE__ */ t("div", {
+		className: `wui-dashboard-grid${r ? ` ${r}` : ""}`,
+		...i,
+		children: n
+	});
+}
+//#endregion
+export { n as default };