@webority/ui-react 0.33.0 → 0.35.0

package/dist/components/AppChart.js

@@ -0,0 +1,153 @@
+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/AppChart.jsx
+var l = "wui-chart:select", u = "wui-chart:legend-change", d = "wui-chart:ready", f = [
+	"line",
+	"area",
+	"column",
+	"bar",
+	"donut",
+	"heatmap",
+	"calendar",
+	"funnel",
+	"gauge",
+	"waterfall",
+	"treemap",
+	"sankey",
+	"scatter",
+	"bubble",
+	"multiples"
+], p = [
+	"none",
+	"stacked",
+	"percent"
+], m = [
+	"ready",
+	"loading",
+	"empty",
+	"error"
+], h = [
+	"auto",
+	"svg",
+	"canvas"
+], g = ["chart", "table"], _ = "This chart couldn't load. Try again in a moment.", v = () => {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !0;
+	}
+}, y = !1;
+function b() {
+	y || !v() || (y = !0, console.warn("[@webority/ui-react] <AppChart> has no `title`, which names the chart for assistive tech and its exported files."));
+}
+var x = (e) => e === "" ? void 0 : e, S = (e) => Array.isArray(e) ? e.map(S) : e == null || Object.getPrototypeOf(e) !== Object.prototype ? e : Object.fromEntries(Object.entries(e).filter(([, e]) => e !== "").map(([e, t]) => [e, S(t)])), C = (e) => ({
+	type: x(e.type),
+	title: x(e.title),
+	description: x(e.description),
+	data: e.data,
+	x: S(e.x),
+	series: S(e.series),
+	group: S(e.group),
+	to: S(e.to),
+	size: S(e.size),
+	trend: e.trend,
+	zoom: e.zoom,
+	bands: S(e.bands),
+	stack: x(e.stack),
+	y: S(e.y),
+	target: S(e.target),
+	height: e.height > 0 ? e.height : void 0,
+	state: x(e.state),
+	emptyText: x(e.emptyText),
+	errorText: x(e.errorText),
+	renderer: x(e.renderer)
+}), w = (e, t) => t != null && Object.keys(e).every((n) => Object.is(e[n], t[n])), T = (e) => {
+	try {
+		return JSON.stringify(e);
+	} catch {
+		return null;
+	}
+}, E = n(function({ type: n, title: v, description: y, data: x, x: S, series: E, group: D, to: O, size: k, trend: A, zoom: j, bands: M, stack: N, y: P, target: F, height: I, state: L, emptyText: R, errorText: z, renderer: B, view: V, onSelect: H, onLegendChange: U, onReady: W, className: G = "", style: K, ...q }, J) {
+	t("AppChart", q), e("AppChart", "type", n, f), e("AppChart", "stack", N, p), e("AppChart", "state", L, m), e("AppChart", "renderer", B, h), e("AppChart", "view", V, g), v || b();
+	let Y = o(null), X = o({
+		props: null,
+		signature: null
+	}), Z = o({
+		onSelect: H,
+		onLegendChange: U,
+		onReady: W
+	}), [Q, $] = s(!1), ee = r((e) => {
+		Y.current = e, typeof J == "function" ? J(e) : J && (J.current = e);
+	}, [J]);
+	return i(() => {
+		Z.current = {
+			onSelect: H,
+			onLegendChange: U,
+			onReady: W
+		};
+	}), a(() => {
+		let e = Y.current;
+		if (!e) return;
+		let t = {
+			type: n,
+			title: v,
+			description: y,
+			data: x,
+			x: S,
+			series: E,
+			group: D,
+			to: O,
+			size: k,
+			trend: A,
+			zoom: j,
+			bands: M,
+			stack: N,
+			y: P,
+			target: F,
+			height: I,
+			state: L,
+			emptyText: R,
+			errorText: z,
+			renderer: B
+		};
+		if (w(t, X.current.props)) return;
+		X.current.props = t;
+		let r = C(t), i = T(r);
+		i !== null && i === X.current.signature || (X.current.signature = i, e.spec = r);
+	}), i(() => {
+		let e = Y.current, t = (e) => (t) => Z.current[e]?.(t.detail), n = [
+			[l, t("onSelect")],
+			[u, t("onLegendChange")],
+			[d, t("onReady")]
+		];
+		for (let [t, r] of n) e.addEventListener(t, r);
+		return () => {
+			for (let [t, r] of n) e.removeEventListener(t, r);
+		};
+	}, []), i(() => {
+		let e = !0;
+		return import("@webority/ui-elements/chart").catch((t) => {
+			console.warn("[AppChart] the chart failed to load:", t?.message), e && $(!0);
+		}), () => {
+			e = !1;
+		};
+	}, []), Q ? /* @__PURE__ */ c("div", {
+		className: G || void 0,
+		style: K,
+		role: "status",
+		children: /* @__PURE__ */ c("p", {
+			className: "wui-chart-state-text",
+			children: z || _
+		})
+	}) : /* @__PURE__ */ c("wui-chart", {
+		ref: ee,
+		view: V || void 0,
+		className: G || void 0,
+		style: K,
+		...q
+	});
+});
+//#endregion
+export { E as default };

package/dist/components/AppChartCard.js

@@ -0,0 +1,125 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import n from "./AppButton.js";
+import r from "./AppCard.js";
+import i from "./AppDropdown.js";
+import a from "./AppSegmented.js";
+import { useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { Dropdown as l } from "react-bootstrap";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/AppChartCard.jsx
+var p = [{
+	value: "chart",
+	label: "Chart",
+	icon: "chart"
+}, {
+	value: "table",
+	label: "Table",
+	icon: "grid"
+}], m = () => {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !0;
+	}
+}, h = !1;
+function g() {
+	h || !m() || (h = !0, console.warn("[@webority/ui-react] <AppChartCard> has no `title`, which is the card's heading and names its menu button."));
+}
+var _ = (e) => e.getAttribute("view") === "table" ? "table" : "chart";
+function v({ title: m, subtitle: h, toolbar: v = !0, onRetry: y, footer: b, children: x, className: S = "", ...C }) {
+	e("AppChartCard", C), m || g();
+	let w = s(null), T = s(null), [E, D] = c("chart"), O = s(E);
+	O.current = E;
+	let [k, A] = c(!0), j = () => w.current?.querySelector("wui-chart");
+	o(() => {
+		let e = w.current, t = () => {
+			let t = e.querySelector("wui-chart");
+			if (t) {
+				if (t === T.current) {
+					D(_(t));
+					return;
+				}
+				T.current = t, t.hasAttribute("view") ? D(_(t)) : O.current !== "chart" && t.setAttribute("view", O.current);
+			}
+		};
+		t();
+		let n = new MutationObserver(t);
+		return n.observe(e, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["view"]
+		}), () => n.disconnect();
+	}, []);
+	let M = /* @__PURE__ */ f(u, { children: [
+		/* @__PURE__ */ d("button", {
+			type: "button",
+			className: "topbar-icon-btn wui-chart-card-tool wui-chart-card-legend-tool",
+			"aria-pressed": k,
+			"aria-label": "Show legend",
+			title: "Show or hide the legend",
+			onClick: () => A(!k),
+			children: /* @__PURE__ */ d(t, {
+				name: "list",
+				size: 16
+			})
+		}),
+		/* @__PURE__ */ d(a, {
+			size: "sm",
+			label: "View",
+			options: p,
+			value: E,
+			onChange: (e) => {
+				D(e), j()?.setAttribute("view", e);
+			}
+		}),
+		/* @__PURE__ */ f(i, {
+			icon: "more-horizontal",
+			label: m ? `More actions for ${m}` : "More actions",
+			children: [/* @__PURE__ */ f(l.Item, {
+				as: "button",
+				type: "button",
+				onClick: () => j()?.exportPng?.(),
+				children: [/* @__PURE__ */ d(t, {
+					name: "image",
+					size: 16
+				}), "Download PNG"]
+			}), /* @__PURE__ */ f(l.Item, {
+				as: "button",
+				type: "button",
+				onClick: () => j()?.exportCsv?.(),
+				children: [/* @__PURE__ */ d(t, {
+					name: "download",
+					size: 16
+				}), "Download CSV"]
+			})]
+		})
+	] }), N = [
+		"wui-chart-card",
+		k ? "" : "wui-chart-card-legend-off",
+		S
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ f(r, {
+		title: m,
+		subtitle: h,
+		headerActions: v ? M : void 0,
+		footer: b,
+		className: N,
+		...C,
+		children: [/* @__PURE__ */ d("div", {
+			ref: w,
+			children: x
+		}), y && /* @__PURE__ */ d("div", {
+			className: "wui-chart-card-retry",
+			children: /* @__PURE__ */ d(n, {
+				variant: "outline",
+				size: "sm",
+				onClick: y,
+				children: "Try again"
+			})
+		})]
+	});
+}
+//#endregion
+export { v as default };

package/dist/components/AppCheckbox.js

@@ -0,0 +1,21 @@
+import e from "./warnUnknownProps.js";
+import t from "../lib/CheckField.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/AppCheckbox.jsx
+var i = n(function({ label: n, id: i, name: a, error: o, hint: s, className: c = "", ...l }, u) {
+	return e("AppCheckbox", l), /* @__PURE__ */ r(t, {
+		ref: u,
+		label: n,
+		id: i,
+		name: a,
+		error: o,
+		hint: s,
+		className: c,
+		rest: l,
+		inputType: "checkbox",
+		wrapperClass: "form-check"
+	});
+});
+//#endregion
+export { i as default };

package/dist/components/AppChip.js

@@ -0,0 +1,71 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppChip.jsx
+var o = [
+	"neutral",
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info"
+], s = [
+	"soft",
+	"outline",
+	"solid"
+], c = ["sm", "md"];
+function l({ label: l, children: u, tone: d = "neutral", variant: f = "soft", size: p = "md", leadingIcon: m, avatar: h, onRemove: g, onClick: _, disabled: v = !1, removeLabel: y, className: b = "", ...x }) {
+	t("AppChip", x), e("AppChip", "tone", d, o), e("AppChip", "variant", f, s), e("AppChip", "size", p, c);
+	let S = l ?? u, C = [
+		"chip",
+		d && d !== "neutral" ? d : "",
+		f === "outline" ? "chip-outline" : f === "solid" ? "chip-solid" : "",
+		p === "sm" ? "chip-sm" : "",
+		_ ? "chip-clickable" : "",
+		g ? "chip-removable" : "",
+		v ? "is-disabled" : "",
+		b
+	].filter(Boolean).join(" "), w = h ? /* @__PURE__ */ i("span", {
+		className: "chip-avatar",
+		children: typeof h == "string" ? /* @__PURE__ */ i("img", {
+			src: h,
+			alt: ""
+		}) : h
+	}) : m ? /* @__PURE__ */ i("span", {
+		className: "chip-ic",
+		children: /* @__PURE__ */ i(n, {
+			name: m,
+			size: p === "sm" ? 12 : 14
+		})
+	}) : null, T = _ ? /* @__PURE__ */ a("button", {
+		type: "button",
+		className: "chip-body",
+		onClick: _,
+		disabled: v,
+		children: [w, /* @__PURE__ */ i("span", {
+			className: "chip-label",
+			children: S
+		})]
+	}) : /* @__PURE__ */ a(r, { children: [w, /* @__PURE__ */ i("span", {
+		className: "chip-label",
+		children: S
+	})] });
+	return /* @__PURE__ */ a("span", {
+		className: C,
+		...x,
+		children: [T, g && /* @__PURE__ */ i("button", {
+			type: "button",
+			className: "chip-remove",
+			onClick: g,
+			disabled: v,
+			"aria-label": y || (typeof S == "string" ? `Remove ${S}` : "Remove"),
+			children: /* @__PURE__ */ i(n, {
+				name: "x",
+				size: p === "sm" ? 12 : 14
+			})
+		})]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/AppChoiceCard.js

@@ -0,0 +1,69 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppChoiceCard.jsx
+var o = {
+	sm: " wui-struct-card-sm",
+	md: "",
+	lg: " wui-struct-card-lg"
+}, s = {
+	inline: "",
+	stacked: " wui-struct-card-stacked"
+}, c = {
+	sm: 16,
+	md: 18,
+	lg: 22
+};
+function l({ name: l, multiple: u = !1, value: d, checked: f, onChange: p, icon: m, iconNode: h, iconSize: g, image: _, imageAlt: v = "", children: y, title: b, description: x, checkIcon: S = "check", checkSize: C = 18, hideCheck: w = !1, size: T = "md", layout: E = "inline", className: D = "", ...O }) {
+	t("AppChoiceCard", O), e("AppChoiceCard", "size", T, Object.keys(o)), e("AppChoiceCard", "layout", E, Object.keys(s));
+	let k = o[T] ?? "", A = s[E] ?? "", j = g ?? c[T] ?? c.md;
+	return /* @__PURE__ */ a("label", {
+		className: `struct-card${_ ? " struct-card-img-card" : ""}${k}${A}${w ? " wui-struct-card-no-check" : ""}${f ? " checked" : ""}${D ? ` ${D}` : ""}`,
+		...O,
+		children: [
+			/* @__PURE__ */ i("input", {
+				type: u ? "checkbox" : "radio",
+				name: l,
+				value: d,
+				className: "struct-card-input",
+				checked: f,
+				onChange: p
+			}),
+			_ ? /* @__PURE__ */ i("span", {
+				className: "struct-card-media",
+				children: /* @__PURE__ */ i("img", {
+					className: "struct-card-img",
+					src: _,
+					alt: v
+				})
+			}) : h || m ? /* @__PURE__ */ i("span", {
+				className: "struct-card-ic",
+				children: h || /* @__PURE__ */ i(n, {
+					name: m,
+					size: j,
+					variant: f ? "bold" : void 0
+				})
+			}) : null,
+			/* @__PURE__ */ i("span", {
+				className: "struct-card-body",
+				children: y || /* @__PURE__ */ a(r, { children: [b && /* @__PURE__ */ i("span", {
+					className: "struct-card-title",
+					children: b
+				}), x && /* @__PURE__ */ i("span", {
+					className: "struct-card-desc",
+					children: x
+				})] })
+			}),
+			!w && /* @__PURE__ */ i("span", {
+				className: "struct-card-check",
+				children: /* @__PURE__ */ i(n, {
+					name: S,
+					size: C
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/AppChoiceChip.js

@@ -0,0 +1,31 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/AppChoiceChip.jsx
+var i = [
+	"sm",
+	"md",
+	"lg"
+];
+function a({ multiple: a = !0, label: o, name: s, value: c, checked: l, onChange: u, children: d, count: f, size: p = "md", className: m = "", ...h }) {
+	return t("AppChoiceChip", h), e("AppChoiceChip", "size", p, i), /* @__PURE__ */ r("label", {
+		className: `choice-chip${l ? " checked" : ""}${p === "sm" ? " choice-chip-sm" : p === "lg" ? " choice-chip-lg" : ""}${m ? ` ${m}` : ""}`,
+		...h,
+		children: [
+			/* @__PURE__ */ n("input", {
+				type: a ? "checkbox" : "radio",
+				name: s,
+				value: c,
+				checked: l,
+				onChange: u
+			}),
+			/* @__PURE__ */ n("span", { children: o ?? d }),
+			f != null && /* @__PURE__ */ n("span", {
+				className: "count",
+				children: f
+			})
+		]
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/AppColorField.js

@@ -0,0 +1,63 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppRequiredMark.js";
+import { useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppColorField.jsx
+var o = [
+	"sm",
+	"md",
+	"lg"
+];
+function s({ value: s = "#000000", onChange: c, label: l, required: u = !1, error: d, hint: f, name: p, id: m, disabled: h = !1, size: g = "md", className: _ = "", fieldClassName: v = "", ...y }) {
+	t("AppColorField", y), e("AppColorField", "size", g, o);
+	let b = r(), x = m || b, S = d ? `${x}-error` : f ? `${x}-hint` : void 0, C = (e) => /^#[0-9a-f]{6}$/i.test(e), w = g === "sm" ? " color-field-sm" : g === "lg" ? " color-field-lg" : "", T = g === "sm" ? " input-sm" : g === "lg" ? " input-lg" : "";
+	return /* @__PURE__ */ a("div", {
+		className: `field${v ? ` ${v}` : ""}`,
+		children: [
+			l && /* @__PURE__ */ a("label", {
+				className: "label",
+				htmlFor: x,
+				children: [l, u && /* @__PURE__ */ i(n, {})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: `color-field${w}`,
+				children: [/* @__PURE__ */ i("input", {
+					type: "color",
+					className: "color-field-swatch",
+					value: C(s) ? s : "#000000",
+					onChange: (e) => c?.(e.target.value),
+					disabled: h,
+					"aria-label": `${l || "Colour"}, colour picker`,
+					tabIndex: -1
+				}), /* @__PURE__ */ i("input", {
+					type: "text",
+					className: `input color-field-hex${T}${d ? " error" : ""}${_ ? ` ${_}` : ""}`,
+					id: x,
+					name: p,
+					value: s,
+					onChange: (e) => c?.(e.target.value),
+					placeholder: "#4F46E5",
+					spellCheck: !1,
+					maxLength: 7,
+					required: u,
+					disabled: h,
+					"aria-invalid": d ? "true" : "false",
+					"aria-describedby": S,
+					...y
+				})]
+			}),
+			d ? /* @__PURE__ */ i("div", {
+				className: "field-error",
+				id: `${x}-error`,
+				children: d
+			}) : f ? /* @__PURE__ */ i("div", {
+				className: "field-hint",
+				id: `${x}-hint`,
+				children: f
+			}) : null
+		]
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/AppColumnMenu.js

@@ -0,0 +1,27 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppDropdown.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/AppColumnMenu.jsx
+function i({ columns: i, hiddenColumns: a = [], onToggle: o, label: s = "Columns", className: c = "", ...l }) {
+	e("AppColumnMenu", l);
+	let u = i.filter((e) => e.hideable);
+	return /* @__PURE__ */ r(t, {
+		icon: "layout-grid",
+		label: s,
+		menuClassName: `wui-column-menu${c ? ` ${c}` : ""}`,
+		children: [/* @__PURE__ */ n("div", {
+			className: "wui-column-menu-title",
+			children: s
+		}), u.map((e) => /* @__PURE__ */ r("label", {
+			className: "wui-column-menu-item",
+			children: [/* @__PURE__ */ n("input", {
+				type: "checkbox",
+				className: "wui-check",
+				checked: !a.includes(e.key),
+				onChange: () => o(e.key)
+			}), e.label]
+		}, e.key))]
+	});
+}
+//#endregion
+export { i as default };