@webority/ui-react 0.33.0 → 0.35.0

package/dist/components/AppAccordion.js

@@ -0,0 +1,57 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import { useId as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppAccordion.jsx
+function o({ items: o = [], multiple: s = !1, id: c, className: l = "", ...u }) {
+	e("AppAccordion", u);
+	let d = n(), f = c || d, [p, m] = r(() => {
+		let e = o.map((e, t) => ({
+			item: e,
+			key: e.key ?? String(t)
+		})).filter(({ item: e }) => e.open).map(({ key: e }) => e);
+		return new Set(s ? e : e.slice(0, 1));
+	}), h = (e, t) => e.key ?? String(t), g = (e) => {
+		m((t) => {
+			let n = new Set(s ? t : []);
+			return t.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	};
+	return /* @__PURE__ */ i("div", {
+		className: `faq-list${l ? ` ${l}` : ""}`,
+		...u,
+		children: o.map((e, n) => {
+			let r = h(e, n), o = p.has(r), s = `${f}-${n}`, c = `${s}-q`;
+			return /* @__PURE__ */ a("div", {
+				className: `faq-item${o ? " open" : ""}`,
+				children: [/* @__PURE__ */ a("button", {
+					type: "button",
+					className: "faq-q",
+					id: c,
+					"aria-expanded": o,
+					"aria-controls": s,
+					onClick: () => g(r),
+					children: [e.title, /* @__PURE__ */ i("span", {
+						className: "faq-q-icon",
+						children: /* @__PURE__ */ i(t, {
+							name: "chevron-down",
+							size: 18
+						})
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: "faq-a-wrap",
+					id: s,
+					"aria-labelledby": c,
+					inert: !o,
+					"aria-hidden": !o || void 0,
+					children: /* @__PURE__ */ i("div", {
+						className: "faq-a-inner",
+						children: e.content
+					})
+				})]
+			}, r);
+		})
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppActionIcon.js

@@ -0,0 +1,53 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./withTooltip.js";
+import r from "./renderIconProp.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/AppActionIcon.jsx
+var a = [
+	"linear",
+	"outline",
+	"bold",
+	"bulk",
+	"broken",
+	"twotone"
+];
+function o({ icon: o, iconVariant: s, label: c, tooltipPlacement: l = "auto", danger: u = !1, disabled: d = !1, size: f = 20, onClick: p, className: m = "", as: h, href: g, ..._ }) {
+	t("AppActionIcon", h === void 0 ? _ : {
+		..._,
+		as: h
+	}), e("AppActionIcon", "iconVariant", s, a);
+	let v = [
+		"u-action",
+		u ? "danger" : "",
+		m
+	].filter(Boolean).join(" "), { style: y, ...b } = _, x = {
+		"--wui-action-size": `${f + 16}px`,
+		...y
+	}, S = h ?? (g ? "a" : "button"), C = S === "button";
+	return n(/* @__PURE__ */ i(S, {
+		type: C ? "button" : void 0,
+		href: C || d ? void 0 : g,
+		className: v,
+		style: x,
+		"aria-label": c,
+		disabled: C ? d : void 0,
+		"aria-disabled": !C && d ? "true" : void 0,
+		role: !C && d ? "link" : void 0,
+		tabIndex: !C && d ? -1 : void 0,
+		onClick: (e) => {
+			if (d) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			p?.(e);
+		},
+		...b,
+		children: r(o, {
+			size: f,
+			variant: s
+		})
+	}), c, l);
+}
+//#endregion
+export { o as default };

package/dist/components/AppAlert.js

@@ -0,0 +1,85 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { Alert as r } from "react-bootstrap";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/AppAlert.jsx
+var s = {
+	info: "info",
+	success: "check",
+	warning: "alert-triangle",
+	danger: "x"
+}, c = [
+	"info",
+	"success",
+	"warning",
+	"danger"
+], l = [
+	"sm",
+	"md",
+	"lg"
+], u = [
+	"alert",
+	"status",
+	"none"
+];
+function d(e, t, r, i, o) {
+	return r ? /* @__PURE__ */ a("span", {
+		className: "alert-icon alert-icon-image",
+		style: o > 0 ? {
+			width: o,
+			height: o
+		} : void 0,
+		children: /* @__PURE__ */ a("img", {
+			src: r,
+			alt: i
+		})
+	}) : e ? typeof e == "string" ? /* @__PURE__ */ a("span", {
+		className: "alert-icon",
+		children: /* @__PURE__ */ a(n, {
+			name: e,
+			size: t
+		})
+	}) : /* @__PURE__ */ a("span", {
+		className: "alert-icon",
+		children: e
+	}) : null;
+}
+function f({ variant: n = "info", children: f, title: p, icon: m, image: h, imageAlt: g = "", imageSize: _, className: v = "", onClose: y, dismissible: b, bordered: x = !0, accent: S = !1, size: C = "md", action: w, role: T = "alert", ...E }) {
+	t("AppAlert", E), e("AppAlert", "variant", n, c), e("AppAlert", "size", C, l), e("AppAlert", "role", T, u);
+	let D = m === void 0 ? s[n] : m === "none" ? null : m, O = !!h || !!D, k = w != null && w !== !1, A = p ? /* @__PURE__ */ a("div", {
+		className: "alert-heading",
+		children: p
+	}) : null, j = O && !!A && !!f, M = C === "lg" ? j ? 17 : 15 : j ? 13 : 11;
+	return /* @__PURE__ */ a(r, {
+		variant: n,
+		className: [
+			O ? "alert-has-icon" : "",
+			k ? "alert-has-action" : "",
+			j ? "alert-stack" : "",
+			x ? "" : "alert-borderless",
+			S ? "alert-accent" : "",
+			C === "sm" ? "alert-sm" : "",
+			C === "lg" ? "alert-lg" : "",
+			v
+		].filter(Boolean).join(" ") || void 0,
+		onClose: y,
+		dismissible: b ?? typeof y == "function",
+		transition: !1,
+		role: T === "none" ? void 0 : T,
+		...E,
+		children: O || k ? /* @__PURE__ */ o(i, { children: [
+			O && d(D, M, h, g, _),
+			/* @__PURE__ */ o("div", {
+				className: "alert-content",
+				children: [A, f]
+			}),
+			k && /* @__PURE__ */ a("div", {
+				className: "alert-action",
+				children: w
+			})
+		] }) : /* @__PURE__ */ o(i, { children: [A, f] })
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/AppAsyncBlock.js

@@ -0,0 +1,48 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppButton.js";
+import n from "./AppEmptyState.js";
+import r from "./AppSpinner.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/AppAsyncBlock.jsx
+function a({ loading: a = !1, error: o = null, empty: s = !1, children: c, onRetry: l, skeleton: u, className: d = "", ...f }) {
+	e("AppAsyncBlock", f);
+	let p = `async-block${d ? ` ${d}` : ""}`;
+	return a ? /* @__PURE__ */ i("div", {
+		className: p,
+		"data-state": "loading",
+		...f,
+		children: u ?? /* @__PURE__ */ i("div", {
+			className: "d-flex align-items-center justify-content-center py-5",
+			children: /* @__PURE__ */ i(r, { label: "Loading" })
+		})
+	}) : o ? /* @__PURE__ */ i("div", {
+		className: p,
+		"data-state": "error",
+		...f,
+		children: /* @__PURE__ */ i(n, {
+			icon: "alert-circle",
+			title: "Something went wrong",
+			text: o,
+			action: l ? /* @__PURE__ */ i(t, {
+				variant: "secondary",
+				onClick: l,
+				children: "Retry"
+			}) : null
+		})
+	}) : s ? /* @__PURE__ */ i("div", {
+		className: p,
+		"data-state": "empty",
+		...f,
+		children: /* @__PURE__ */ i(n, {
+			icon: "inbox",
+			title: "Nothing to show yet"
+		})
+	}) : /* @__PURE__ */ i("div", {
+		className: p,
+		"data-state": "content",
+		...f,
+		children: c
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/AppAutocomplete.js

@@ -0,0 +1,93 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppInfoTip.js";
+import r from "./AppRequiredMark.js";
+import i, { optionsEqual as a } from "./useWuiControl.js";
+import { forwardRef as o, useEffect as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/autocomplete";
+//#region src/components/AppAutocomplete.jsx
+var d = ["sm", "lg"], f = o(function({ value: o, onChange: f, options: p, loadOptions: m, placeholder: h = "Search…", minChars: g, debounce: _, disabled: v = !1, size: y, allowCustom: b = !1, name: x, id: S, label: C, error: w, hint: T, required: E = !1, help: D, helpLabel: O = "More information", fieldClassName: k = "", ...A }, j) {
+	t("AppAutocomplete", A), e("AppAutocomplete", "size", y, d);
+	let M = typeof m == "function", N = c(), P = S || N, { setRef: F, innerRef: I } = i({
+		ref: j,
+		value: o ?? "",
+		on: { change: (e) => f?.(e.currentTarget.value, { isCustom: !!e.detail?.isCustom }) }
+	});
+	return s(() => {
+		let e = I.current;
+		if (!e || M) return;
+		let t = p || [];
+		a(t, e.options) || (e.options = t);
+	}, [
+		p,
+		M,
+		I
+	]), s(() => {
+		let e = I.current;
+		if (!e || !M) return;
+		let t = 0, n = null, r = async (r) => {
+			let i = ++t;
+			n?.abort(), n = typeof AbortController == "function" ? new AbortController() : null, e.loading = !0;
+			try {
+				let a = await m(r.detail.query, { signal: n?.signal });
+				i === t && (e.options = a || []);
+			} catch {
+				i === t && (e.options = []);
+			} finally {
+				i === t && (e.loading = !1);
+			}
+		};
+		return e.addEventListener("search", r), () => {
+			t = -1, n?.abort(), e.removeEventListener("search", r), e.loading = !1;
+		};
+	}, [
+		M,
+		m,
+		I
+	]), /* @__PURE__ */ u("div", {
+		className: `field${k ? ` ${k}` : ""}`,
+		children: [
+			C && /* @__PURE__ */ u("label", {
+				className: "label",
+				htmlFor: P,
+				children: [
+					C,
+					E && /* @__PURE__ */ l(r, {}),
+					D && /* @__PURE__ */ l(n, {
+						label: O,
+						children: D
+					})
+				]
+			}),
+			/* @__PURE__ */ l("wui-autocomplete", {
+				"aria-label": typeof C == "string" ? C : void 0,
+				"aria-describedby": w ? `${P}-error` : T ? `${P}-hint` : void 0,
+				"aria-invalid": w ? "true" : void 0,
+				id: P,
+				ref: F,
+				name: x,
+				placeholder: h,
+				remote: M ? "" : void 0,
+				"min-chars": g == null ? void 0 : String(g),
+				debounce: _ == null ? void 0 : String(_),
+				size: y || void 0,
+				"allow-custom": b ? "" : void 0,
+				disabled: v ? "" : void 0,
+				required: E ? "" : void 0,
+				...A
+			}),
+			w ? /* @__PURE__ */ l("div", {
+				className: "field-error",
+				id: `${P}-error`,
+				children: w
+			}) : T ? /* @__PURE__ */ l("div", {
+				className: "field-hint",
+				id: `${P}-hint`,
+				children: T
+			}) : null
+		]
+	});
+});
+//#endregion
+export { f as default };

package/dist/components/AppAvatar.js

@@ -0,0 +1,143 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./withTooltip.js";
+import r from "./AppIcon.js";
+import { useEffect as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/AppAvatar.jsx
+var l = [
+	"circle",
+	"rounded",
+	"square"
+], u = [
+	"primary",
+	"neutral",
+	"success",
+	"warning",
+	"danger",
+	"info",
+	"auto"
+], d = [
+	"none",
+	"online",
+	"offline",
+	"away",
+	"busy"
+], f = /* @__PURE__ */ new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+]), p = {
+	xs: 20,
+	sm: 24,
+	md: 32,
+	lg: 48,
+	xl: 64,
+	"2xl": 96
+};
+function m(e) {
+	let t = (e || "").trim();
+	if (!t) return "?";
+	let n = t.split(/\s+/).filter(Boolean);
+	return n.length === 1 ? n[0].slice(0, 2).toUpperCase() : (n[0][0] + n[n.length - 1][0]).toUpperCase();
+}
+function h(e) {
+	let t = e || "", n = 0;
+	for (let e = 0; e < t.length; e += 1) n = Math.imul(n, 31) + t.charCodeAt(e) >>> 0;
+	return n % 360;
+}
+function g(e) {
+	if (typeof e == "number") return e;
+	if (p[e] != null) return p[e];
+	let t = Number.parseInt(e, 10);
+	return Number.isNaN(t) ? 32 : t;
+}
+function _({ name: p, src: _, size: v = "md", shape: y = "circle", tone: b = "primary", status: x = "none", ring: S = !1, label: C, icon: w, badge: T, href: E, onClick: D, linkComponent: O, tooltip: k, tooltipPlacement: A, className: j = "", ...M }) {
+	t("AppAvatar", M), e("AppAvatar", "shape", y, l), e("AppAvatar", "tone", b, u), e("AppAvatar", "status", x, d);
+	let { style: N, ...P } = M, [F, I] = a(!1);
+	i(() => {
+		I(!1);
+	}, [_]);
+	let L = typeof v == "string" && f.has(v), R = L ? null : typeof v == "number" || /^\d+$/.test(v) ? `${v}px` : v, z = E != null || D != null, B = _ != null && _ !== "" && !F, V = [
+		"avatar",
+		L && v !== "md" ? `avatar-${v}` : "",
+		y === "circle" ? "" : `avatar-${y}`,
+		b === "primary" ? "" : `avatar-${b}`,
+		S ? "avatar-ring" : "",
+		z ? "avatar-clickable" : "",
+		j
+	].filter(Boolean).join(" "), H = {};
+	R && (H["--avatar-size"] = R), b === "auto" && (H["--avatar-hue"] = h(p));
+	let U = Object.keys(H).length || N ? {
+		...H,
+		...N
+	} : void 0, W = /* @__PURE__ */ s("span", {
+		className: "avatar-face",
+		"aria-hidden": "true",
+		children: w == null ? m(p) : /* @__PURE__ */ s(r, {
+			name: w,
+			size: Math.round(g(v) * .55)
+		})
+	}), G = /* @__PURE__ */ c(o, { children: [
+		x !== "none" && /* @__PURE__ */ s("span", {
+			className: `avatar-status avatar-status-${x}`,
+			"aria-hidden": "true"
+		}),
+		T != null && /* @__PURE__ */ s("span", {
+			className: "avatar-badge",
+			children: T
+		}),
+		C != null && /* @__PURE__ */ s("span", {
+			className: "avatar-label",
+			"aria-hidden": "true",
+			children: C
+		})
+	] }), K = /* @__PURE__ */ c(o, { children: [
+		W,
+		B && /* @__PURE__ */ s("img", {
+			className: "avatar-img",
+			src: _,
+			alt: z ? "" : p || "Profile photo",
+			onError: () => I(!0)
+		}),
+		G
+	] });
+	if (E != null) {
+		let e = O || "a", t = O ? { to: E } : { href: E };
+		return n(/* @__PURE__ */ s(e, {
+			className: V,
+			style: U,
+			...P,
+			"aria-label": C || p,
+			...t,
+			onClick: D,
+			children: K
+		}), k, A);
+	}
+	return n(D == null ? B ? /* @__PURE__ */ s("span", {
+		className: V,
+		style: U,
+		...P,
+		children: K
+	}) : /* @__PURE__ */ s("span", {
+		className: V,
+		style: U,
+		...P,
+		role: "img",
+		"aria-label": p,
+		children: K
+	}) : /* @__PURE__ */ s("button", {
+		type: "button",
+		className: V,
+		style: U,
+		...P,
+		"aria-label": C || p,
+		onClick: D,
+		children: K
+	}), k, A);
+}
+//#endregion
+export { _ as default };

package/dist/components/AppAvatarGroup.js

@@ -0,0 +1,43 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { jsxs as n } from "react/jsx-runtime";
+//#region src/components/AppAvatarGroup.jsx
+var r = [
+	"tight",
+	"normal",
+	"loose"
+], i = {
+	xs: 20,
+	sm: 24,
+	md: 32,
+	lg: 48,
+	xl: 64,
+	"2xl": 96
+};
+function a(e) {
+	return e == null ? null : typeof e == "number" ? `${e}px` : i[e] == null ? /^\d+$/.test(e) ? `${e}px` : e : `${i[e]}px`;
+}
+function o({ children: i, size: o, spacing: s = "normal", overflow: c, className: l = "", ...u }) {
+	t("AppAvatarGroup", u), e("AppAvatarGroup", "spacing", s, r);
+	let { style: d, ...f } = u, p = [
+		"avatar-group",
+		s === "normal" ? "" : `avatar-group-${s}`,
+		l
+	].filter(Boolean).join(" "), m = a(o), h = m ? {
+		"--avatar-size": m,
+		...d
+	} : d, g = typeof c == "string" ? Number.parseInt(c, 10) : c;
+	return /* @__PURE__ */ n("div", {
+		className: p,
+		style: h,
+		...f,
+		children: [i, g > 0 && /* @__PURE__ */ n("span", {
+			className: "avatar avatar-more",
+			role: "img",
+			"aria-label": `${g} more`,
+			children: ["+", g]
+		})]
+	});
+}
+//#endregion
+export { o as default };