@webority/ui-react 0.33.0 → 0.35.0

package/dist/components/AppAvatarPicker.js

@@ -0,0 +1,247 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import r from "./AppAlert.js";
+import i from "./AppButton.js";
+import ee from "./AppRequiredMark.js";
+import te from "./AppModal.js";
+import { AVATAR_ACCEPT as ne, AVATAR_MAX_SIZE_MB as re, AVATAR_OUTPUT_SIZE as ie, AVATAR_PREVIEW_SIZES as a, AVATAR_TEXT as o, avatarCropOptions as ae, avatarUnreadableMessage as oe, validateFile as se } from "@webority/ui-elements/helpers";
+import { useCallback as ce, useEffect as s, useId as le, useRef as c, useState as l } from "react";
+import { Fragment as ue, jsx as u, jsxs as d } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/image-crop";
+//#region src/components/AppAvatarPicker.jsx
+var f = {
+	sm: 64,
+	md: 96,
+	lg: 128
+}, de = a.join(" ");
+function p({ value: a, initials: p, onPick: fe, onRemove: m, name: h, removeName: g, accept: _ = ne, maxSizeMb: pe = re, outputSize: me = ie, size: v = "md", label: he, hint: y, error: ge, required: _e = !1, loading: b = !1, disabled: ve = !1, ariaLabel: ye, className: x = "", fieldClassName: S = "", style: be, ...C }) {
+	t("AppAvatarPicker", C), e("AppAvatarPicker", "size", typeof v == "string" ? v : null, Object.keys(f));
+	let w = le(), T = c(null), E = c(null), D = c(null), [O, k] = l(null), [A, j] = l(!1), [xe, M] = l(!1), [Se, N] = l(""), [P, F] = l(!1), [I, L] = l(null), [R, z] = l("loading"), [B, V] = l(""), [H, U] = l(!1), Ce = ce((e) => {
+		if (D.current = e, !e) return;
+		let t = () => {
+			z("ready"), e.querySelector(".wui-crop-stage")?.focus();
+		}, n = () => z("error");
+		return e.addEventListener("load", t), e.addEventListener("error", n), () => {
+			e.removeEventListener("load", t), e.removeEventListener("error", n), D.current = null;
+		};
+	}, []);
+	s(() => () => I && URL.revokeObjectURL(I.url), [I]), s(() => () => O && URL.revokeObjectURL(O), [O]), s(() => {
+		k(null), j(!1), M(!1);
+	}, [a]);
+	let W = b || ve, G = A ? null : O || (a && !xe ? a : null), K = !!G, we = !W && K && !!(m || g), q = ge || Se, J = y && !q ? `${w}-hint` : void 0, Y = q ? `${w}-error` : void 0, X = Y || J, Z = K ? o.change : o.choose, Q = typeof v == "number" ? v : f[v] ?? f.md, Te = () => {
+		W || T.current?.click();
+	}, Ee = () => {
+		W || E.current?.click();
+	}, De = (e) => {
+		let t = se(e, {
+			accept: _,
+			maxSizeMb: pe
+		});
+		if (t) {
+			N(t);
+			return;
+		}
+		N(""), z("loading"), V(""), L({
+			file: e,
+			url: URL.createObjectURL(e)
+		});
+	}, Oe = (e) => {
+		let t = e.target.files?.[0];
+		e.target.value = "", t && De(t);
+	}, ke = (e) => {
+		if (e.preventDefault(), F(!1), W) return;
+		let t = e.dataTransfer?.files?.[0];
+		t && De(t);
+	}, Ae = (e) => {
+		if (h && T.current && typeof DataTransfer == "function") {
+			let t = new DataTransfer();
+			t.items.add(e), T.current.files = t.files;
+		}
+		j(!1), M(!1), k(URL.createObjectURL(e)), fe(e);
+	}, je = async () => {
+		let { file: e } = I;
+		U(!0), V("");
+		let t = null;
+		try {
+			t = await D.current?.toFile(ae(e, me));
+		} catch {
+			t = null;
+		}
+		if (U(!1), !t) {
+			V(o.cropFailed);
+			return;
+		}
+		L(null), Ae(t);
+	}, $ = () => {
+		H || L(null);
+	}, Me = () => {
+		k(null), j(!0), N(""), T.current && (T.current.value = ""), m?.();
+	};
+	return /* @__PURE__ */ d("div", {
+		className: `field wui-avatar-picker-field${S ? ` ${S}` : ""}`,
+		children: [
+			he && /* @__PURE__ */ d("label", {
+				className: "label",
+				htmlFor: w,
+				children: [he, _e && /* @__PURE__ */ u(ee, {})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: `wui-avatar-picker${P ? " is-dragging" : ""}${x ? ` ${x}` : ""}`,
+				style: {
+					"--wui-avatar-size": `${Q}px`,
+					...be
+				},
+				onDragOver: (e) => {
+					e.preventDefault(), !W && !P && F(!0);
+				},
+				onDragLeave: () => F(!1),
+				onDrop: ke,
+				children: [
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						className: "wui-avatar-picker-face",
+						tabIndex: -1,
+						"aria-label": ye || Z,
+						"aria-describedby": X,
+						"aria-busy": b || void 0,
+						disabled: W,
+						onClick: Te,
+						...C,
+						children: [G ? /* @__PURE__ */ u("img", {
+							className: "wui-avatar-picker-img",
+							src: G,
+							alt: "",
+							onError: () => M(!0)
+						}) : /* @__PURE__ */ u("span", {
+							className: "wui-avatar-picker-placeholder",
+							"aria-hidden": "true",
+							children: p || /* @__PURE__ */ u(n, {
+								name: "user",
+								size: Math.round(Q * .5)
+							})
+						}), /* @__PURE__ */ u("span", {
+							className: "wui-avatar-picker-badge",
+							"aria-hidden": "true",
+							children: b ? /* @__PURE__ */ u(n, {
+								name: "refresh-cw",
+								size: 14,
+								className: "wui-spin"
+							}) : /* @__PURE__ */ u(n, {
+								name: "camera",
+								size: 14
+							})
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "wui-avatar-picker-actions",
+						children: [
+							/* @__PURE__ */ u("button", {
+								type: "button",
+								className: "btn btn-secondary btn-sm",
+								disabled: W,
+								"aria-describedby": X,
+								onClick: Te,
+								children: Z
+							}),
+							/* @__PURE__ */ d("button", {
+								type: "button",
+								className: "btn btn-secondary btn-sm wui-avatar-picker-camera",
+								disabled: W,
+								onClick: Ee,
+								children: [/* @__PURE__ */ u(n, {
+									name: "camera",
+									size: 16
+								}), o.camera]
+							}),
+							/* @__PURE__ */ u("button", {
+								type: "button",
+								className: "btn btn-secondary-danger btn-sm",
+								hidden: !we,
+								onClick: Me,
+								children: o.remove
+							})
+						]
+					}),
+					/* @__PURE__ */ u("input", {
+						id: w,
+						ref: T,
+						type: "file",
+						name: h,
+						hidden: !0,
+						accept: _,
+						disabled: W,
+						onChange: Oe
+					}),
+					/* @__PURE__ */ u("input", {
+						ref: E,
+						type: "file",
+						hidden: !0,
+						accept: "image/*",
+						capture: "user",
+						disabled: W,
+						onChange: Oe
+					}),
+					g && /* @__PURE__ */ u("input", {
+						type: "hidden",
+						name: g,
+						value: "true",
+						disabled: !A
+					})
+				]
+			}),
+			y && !q && /* @__PURE__ */ u("div", {
+				className: "field-hint",
+				id: J,
+				children: y
+			}),
+			q && /* @__PURE__ */ u("div", {
+				className: "field-error",
+				id: Y,
+				children: q
+			}),
+			/* @__PURE__ */ d(te, {
+				open: !!I,
+				title: o.dialogTitle,
+				subtitle: o.dialogSubtitle,
+				dismissible: !H,
+				staticBackdrop: H,
+				onClose: $,
+				footer: /* @__PURE__ */ d(ue, { children: [/* @__PURE__ */ u(i, {
+					type: "button",
+					variant: "secondary",
+					disabled: H,
+					onClick: $,
+					children: o.cancel
+				}), /* @__PURE__ */ u(i, {
+					type: "button",
+					variant: "primary",
+					loading: H,
+					disabled: R !== "ready",
+					onClick: je,
+					children: o.save
+				})] }),
+				children: [
+					R === "error" && I && /* @__PURE__ */ u(r, {
+						variant: "danger",
+						children: oe(I.file)
+					}),
+					B && /* @__PURE__ */ u(r, {
+						variant: "danger",
+						children: B
+					}),
+					I && R !== "error" && /* @__PURE__ */ u("wui-image-crop", {
+						ref: Ce,
+						src: I.url,
+						aspect: "1",
+						round: !0,
+						rotatable: !0,
+						previews: de
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { p as default };

package/dist/components/AppBadge.js

@@ -0,0 +1,28 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./withTooltip.js";
+import { Badge as r } from "react-bootstrap";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/AppBadge.jsx
+var a = [
+	"neutral",
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+function o({ children: o, tone: s, dot: c = !1, tooltip: l, tooltipPlacement: u, className: d = "", ...f }) {
+	return t("AppBadge", f), e("AppBadge", "tone", s, a), n(/* @__PURE__ */ i(r, {
+		bg: !1,
+		className: [
+			s && s !== "neutral" ? `badge-${s}` : "",
+			c ? "badge-dot" : "",
+			d
+		].filter(Boolean).join(" ") || void 0,
+		...f,
+		children: o
+	}), l, u);
+}
+//#endregion
+export { o as default };

package/dist/components/AppBanner.js

@@ -0,0 +1,49 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import r from "./renderIconProp.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/AppBanner.jsx
+var s = [
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"neutral"
+];
+function c({ tone: c = "info", icon: l, children: u, dismissible: d = !1, onDismiss: f, className: p = "", ...m }) {
+	t("AppBanner", m), e("AppBanner", "tone", c, s);
+	let [h, g] = i(!0);
+	if (!h) return null;
+	let _ = s.includes(c) ? c : "info", v = () => {
+		g(!1), f?.();
+	};
+	return /* @__PURE__ */ o("div", {
+		className: `wui-banner wui-banner-${_}${p ? ` ${p}` : ""}`,
+		role: "status",
+		...m,
+		children: [
+			l && /* @__PURE__ */ a("span", {
+				className: "wui-banner-icon",
+				children: r(l, { size: 18 })
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "wui-banner-body",
+				children: u
+			}),
+			d && /* @__PURE__ */ a("button", {
+				type: "button",
+				className: "wui-banner-dismiss",
+				"aria-label": "Dismiss",
+				onClick: v,
+				children: /* @__PURE__ */ a(n, {
+					name: "x",
+					size: 18
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/AppBreadcrumbs.js

@@ -0,0 +1,24 @@
+import e from "./warnUnknownProps.js";
+import t from "./renderIconProp.js";
+import { Breadcrumb as n } from "react-bootstrap";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/AppBreadcrumbs.jsx
+function a({ items: a = [], linkComponent: o, className: s = "", ...c }) {
+	return e("AppBreadcrumbs", c), /* @__PURE__ */ r(n, {
+		className: s || void 0,
+		...c,
+		children: a.map((e, r) => {
+			let s = r === a.length - 1, c = e.icon ? t(e.icon, { size: 14 }) : null, l = {};
+			return s || (e.to && o ? l = {
+				linkAs: o,
+				linkProps: { to: e.to }
+			} : e.to ? l = { href: e.to } : e.href && (l = { href: e.href })), /* @__PURE__ */ i(n.Item, {
+				active: s,
+				...l,
+				children: [c, e.label]
+			}, e.key ?? `${e.label}-${r}`);
+		})
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/AppButton.js

@@ -0,0 +1,85 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./withTooltip.js";
+import r from "./AppIcon.js";
+import { Button as i } from "react-bootstrap";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/AppButton.jsx
+var s = {
+	primary: "primary",
+	secondary: "secondary",
+	outline: "outline-primary",
+	ghost: "ghost",
+	danger: "danger",
+	success: "success",
+	"secondary-danger": "secondary-danger",
+	"outline-danger": "outline-danger",
+	light: "light",
+	warning: "warning",
+	subtle: "subtle",
+	"outline-light": "outline-light"
+}, c = {
+	sm: 14,
+	md: 16,
+	lg: 20
+};
+function l(e, t, n) {
+	if (!e) return null;
+	let i = t === "left" ? "me-2" : "ms-2";
+	return typeof e == "string" ? /* @__PURE__ */ a(r, {
+		name: e,
+		size: c[n] ?? c.md,
+		className: i
+	}) : /* @__PURE__ */ a("span", {
+		className: `d-inline-flex ${i}`,
+		children: e
+	});
+}
+function u({ children: r, variant: u = "primary", size: d = "md", type: f = "button", loading: p = !1, disabled: m = !1, block: h = !1, leftIcon: g = null, rightIcon: _ = null, href: v, static: y = !1, tooltip: b, tooltipPlacement: x, className: S = "", ...C }) {
+	if (t("AppButton", C), e("AppButton", "variant", u, Object.keys(s)), e("AppButton", "size", d, Object.keys(c)), y) return n(/* @__PURE__ */ o("span", {
+		className: [
+			"btn",
+			`btn-${s[u] ?? "primary"}`,
+			d === "sm" ? "btn-sm" : d === "lg" ? "btn-lg" : "",
+			h ? "w-100" : "",
+			"btn-static",
+			S
+		].filter(Boolean).join(" "),
+		...C,
+		children: [
+			l(g, "left", d),
+			r,
+			l(_, "right", d)
+		]
+	}), b, x);
+	let w = [
+		h ? "w-100" : "",
+		p ? "is-loading" : "",
+		S
+	].filter(Boolean).join(" "), T = (C.as === void 0 || C.as === "button") && v === void 0 && C.to === void 0, E = T ? {} : {
+		role: void 0,
+		tabIndex: m || p ? -1 : void 0
+	};
+	return n(/* @__PURE__ */ o(i, {
+		type: T ? f : void 0,
+		href: v,
+		variant: s[u] ?? "primary",
+		size: d === "md" ? void 0 : d,
+		disabled: m || p,
+		"aria-busy": p || void 0,
+		className: w || void 0,
+		...E,
+		...C,
+		children: [
+			p && /* @__PURE__ */ a("span", {
+				className: "spinner-border spinner-border-sm me-2",
+				"aria-hidden": "true"
+			}),
+			!p && l(g, "left", d),
+			r,
+			!p && l(_, "right", d)
+		]
+	}), b, x);
+}
+//#endregion
+export { u as default };

package/dist/components/AppCalendar.js

@@ -0,0 +1,72 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/AppCalendar.jsx
+var l = "wui-calendar:event-click", u = "wui-calendar:date-click", d = "wui-calendar:range-change", f = [
+	"month",
+	"week",
+	"day",
+	"list"
+], p = "This calendar couldn't load. Try again in a moment.", m = n(function({ label: n, events: m, eventsUrl: h, view: g, date: _, emptyText: v, errorText: y, onEventClick: b, onDateClick: x, onRangeChange: S, className: C = "", style: w, ...T }, E) {
+	t("AppCalendar", T), e("AppCalendar", "view", g, f);
+	let D = o(null), O = o(""), k = o({
+		onEventClick: b,
+		onDateClick: x,
+		onRangeChange: S
+	}), [A, j] = s(!1), M = r((e) => {
+		D.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
+	}, [E]);
+	return i(() => {
+		k.current = {
+			onEventClick: b,
+			onDateClick: x,
+			onRangeChange: S
+		};
+	}), a(() => {
+		let e = D.current;
+		if (!e) return;
+		let t = m == null ? "" : JSON.stringify(m);
+		t !== O.current && (O.current = t, e.events = m ?? null);
+	}), i(() => {
+		let e = D.current, t = [
+			[l, (e) => {
+				k.current.onEventClick?.(e.detail) === !1 && e.preventDefault();
+			}],
+			[u, (e) => k.current.onDateClick?.(e.detail)],
+			[d, (e) => k.current.onRangeChange?.(e.detail)]
+		];
+		for (let [n, r] of t) e.addEventListener(n, r);
+		return () => {
+			for (let [n, r] of t) e.removeEventListener(n, r);
+		};
+	}, []), i(() => {
+		let e = !0;
+		return import("@webority/ui-elements/calendar").catch((t) => {
+			console.warn("[AppCalendar] the calendar failed to load:", t?.message), e && j(!0);
+		}), () => {
+			e = !1;
+		};
+	}, []), A ? /* @__PURE__ */ c("div", {
+		className: C || void 0,
+		style: w,
+		role: "status",
+		children: /* @__PURE__ */ c("p", {
+			className: "wui-calendar-status-text",
+			children: y || p
+		})
+	}) : /* @__PURE__ */ c("wui-calendar", {
+		ref: M,
+		label: n || void 0,
+		"events-url": h || void 0,
+		view: g || void 0,
+		date: _ || void 0,
+		"empty-text": v || void 0,
+		"error-text": y || void 0,
+		className: C || void 0,
+		style: w,
+		...T
+	});
+});
+//#endregion
+export { m as default };

package/dist/components/AppCard.js

@@ -0,0 +1,110 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { Card as r } from "react-bootstrap";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/AppCard.jsx
+var s = [
+	"default",
+	"elevated",
+	"outlined",
+	"muted",
+	"accent"
+], c = [
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info"
+], l = [
+	"none",
+	"sm",
+	"md",
+	"lg"
+], u = {
+	xs: 320,
+	sm: 420,
+	md: 560,
+	lg: 720
+};
+function d({ title: d, subtitle: f, headerIcon: p, titleClassName: m = "", header: h, headerExtra: g, headerActions: _, footer: v, media: y, children: b, variant: x = "default", tone: S = "primary", padding: C = "md", maxWidth: w, className: T = "", bodyClassName: E = "", headerClassName: D = "", body: O = !0, lifted: k = !1, href: A, onClick: j, linkComponent: M, ...N }) {
+	t("AppCard", N), e("AppCard", "variant", x, s), e("AppCard", "tone", S, c), e("AppCard", "padding", C, l);
+	let { style: P, ...F } = N, I = A != null || j != null, L = [
+		x && x !== "default" ? `card-${x}` : "",
+		x === "accent" && S && S !== "primary" ? `tone-${S}` : "",
+		C && C !== "md" ? `card-pad-${C}` : "",
+		k ? "card-lifted" : "",
+		w == null ? "" : "card-constrained",
+		I ? "card-clickable" : "",
+		T
+	].filter(Boolean).join(" ") || void 0, R = w == null ? void 0 : u[w] == null ? typeof w == "number" ? `${w}px` : w : `${u[w]}px`, z = R ? {
+		"--card-max-width": R,
+		...P
+	} : P, B = {};
+	A == null ? j != null && (B = {
+		role: "button",
+		tabIndex: 0,
+		onClick: j,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), j(e));
+		}
+	}) : (B = M ? {
+		as: M,
+		to: A
+	} : {
+		as: "a",
+		href: A
+	}, j && (B.onClick = j));
+	let V = d != null || f != null || p != null, H = h != null || V || g != null || _ != null, U = p == null ? null : typeof p == "string" ? /* @__PURE__ */ a(n, {
+		name: p,
+		size: 18
+	}) : p;
+	return /* @__PURE__ */ o(r, {
+		className: L,
+		style: z,
+		...F,
+		...B,
+		children: [
+			y != null && /* @__PURE__ */ a("div", {
+				className: "card-media",
+				children: y
+			}),
+			H && /* @__PURE__ */ a(r.Header, {
+				className: D || void 0,
+				children: h ?? /* @__PURE__ */ o(i, { children: [
+					V && /* @__PURE__ */ o("div", {
+						className: "card-header-main",
+						children: [U != null && /* @__PURE__ */ a("span", {
+							className: "card-header-icon",
+							children: U
+						}), /* @__PURE__ */ o("div", {
+							className: "card-header-titles",
+							children: [d != null && /* @__PURE__ */ a("div", {
+								className: ["card-title", m].filter(Boolean).join(" "),
+								children: d
+							}), f != null && /* @__PURE__ */ a("div", {
+								className: "card-subtitle",
+								children: f
+							})]
+						})]
+					}),
+					g,
+					_ != null && /* @__PURE__ */ a("div", {
+						className: "card-header-actions",
+						children: _
+					})
+				] })
+			}),
+			O ? /* @__PURE__ */ a(r.Body, {
+				className: E || void 0,
+				children: b
+			}) : b,
+			v != null && /* @__PURE__ */ a("div", {
+				className: "card-footer",
+				children: v
+			})
+		]
+	});
+}
+//#endregion
+export { d as default };