@webority/ui-react 0.33.0 → 0.35.0

package/dist/components/AppIcon.js

@@ -0,0 +1,147 @@
+import { FULL_LINEAR_LOADERS as e, FULL_VARIANT_LOADERS as t, shardKey as n } from "./iconCatalogLoaders.g.js";
+import { ICON_NAMES as r } from "./iconCatalogNames.g.js";
+import { GLYPHS as i } from "./iconGlyphs.g.js";
+import a from "./warnInvalidValue.js";
+import o from "./warnUnknownProps.js";
+import s from "./withTooltip.js";
+import { useEffect as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/AppIcon.jsx
+var f = [
+	"linear",
+	"outline",
+	"bold",
+	"bulk",
+	"broken",
+	"twotone"
+], p = /* @__PURE__ */ new Set();
+function m(e, t) {
+	p.has(e) || (p.add(e), console.warn(`[@webority/ui-react] The ${e} failed to load (${t?.message ?? t}); icons fall back to the linear default until a later render retries it.`));
+}
+var h = null, g = null, _ = !1, v = /* @__PURE__ */ new Set();
+function y() {
+	return g ||= import("./iconVariants.g.js").then((e) => {
+		h = e.VARIANT_GLYPHS, _ = !1;
+		for (let e of v) e();
+		v.clear();
+	}).catch((e) => {
+		g = null, m("curated icon variants chunk", e), _ ? v.clear() : (_ = !0, setTimeout(() => {
+			for (let e of [...v]) e();
+		}, 1e3));
+	}), g;
+}
+var b = new Set(r), x = Object.create(null), S = Object.create(null), C = Object.create(null), w = Object.create(null);
+function T(t) {
+	let r = n(t), i = e[r];
+	return i ? (S[r] ||= i().then((e) => {
+		Object.assign(x, e.FULL_GLYPHS), w[r] = !1;
+		let t = C[r];
+		if (t) {
+			for (let e of t) e();
+			t.clear();
+		}
+	}).catch((e) => {
+		S[r] = null, m(`full icon catalogue '${r}' shard`, e), w[r] ? C[r]?.clear() : (w[r] = !0, setTimeout(() => {
+			for (let e of [...C[r] || []]) e();
+		}, 1e3));
+	}), S[r]) : null;
+}
+var E = Object.create(null), D = Object.create(null), O = Object.create(null), k = Object.create(null);
+function A(e, r) {
+	let i = t[e];
+	if (!i) return null;
+	let a = n(r), o = i[a];
+	if (!o) return null;
+	let s = `${e}:${a}`;
+	return D[s] ||= o().then((t) => {
+		let n = E[e] || (E[e] = Object.create(null));
+		Object.assign(n, t.FULL_VARIANT_GLYPHS), k[s] = !1;
+		let r = O[s];
+		if (r) {
+			for (let e of r) e();
+			r.clear();
+		}
+	}).catch((t) => {
+		D[s] = null, m(`${e} icon catalogue '${a}' shard`, t), k[s] ? O[s]?.clear() : (k[s] = !0, setTimeout(() => {
+			for (let e of [...O[s] || []]) e();
+		}, 1e3));
+	}), D[s];
+}
+var j = r, M = /* @__PURE__ */ new Map();
+function N(e) {
+	for (let [t, n] of Object.entries(e)) M.set(t, n);
+}
+function P({ name: e, size: t = 16, variant: r, tooltip: p, tooltipPlacement: m, className: g, color: _, style: S, ...w }) {
+	o("AppIcon", w), a("AppIcon", "variant", r, f);
+	let D = !!r && r !== "linear", k = p != null && p !== "", j = (e) => k ? s(/* @__PURE__ */ u("span", {
+		className: "wui-icon-tip",
+		role: "img",
+		"aria-label": p,
+		children: e
+	}), p, m) : e, N = i[e] !== void 0, P = !N && b.has(e), [, F] = l(0);
+	c(() => {
+		let t = () => F((e) => e + 1);
+		D && N && !h && (v.add(t), y());
+		let i = P ? n(e) : null;
+		P && x[e] === void 0 && ((C[i] ||= /* @__PURE__ */ new Set()).add(t), T(e));
+		let a = D && P ? `${r}:${n(e)}` : null;
+		return D && P && E[r]?.[e] === void 0 && ((O[a] ||= /* @__PURE__ */ new Set()).add(t), A(r, e)), () => {
+			v.delete(t), i && C[i]?.delete(t), a && O[a]?.delete(t);
+		};
+	}, [
+		e,
+		D,
+		N,
+		P,
+		r
+	]);
+	let I = M.get(e);
+	if (I) return j(I({
+		size: t,
+		color: _,
+		className: g,
+		style: S
+	}));
+	if (e === "hard-hat") return j(/* @__PURE__ */ u("svg", {
+		width: t,
+		height: t,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		className: g ? `wui-icon ${g}` : "wui-icon",
+		"data-icon": e,
+		"aria-hidden": "true",
+		style: {
+			verticalAlign: "-.125em",
+			color: _,
+			...S
+		},
+		...w,
+		children: /* @__PURE__ */ d("g", {
+			fill: "currentColor",
+			children: [/* @__PURE__ */ u("circle", {
+				cx: "12",
+				cy: "7.5",
+				r: "4.2"
+			}), /* @__PURE__ */ u("path", { d: "M3.2 22.5C3.2 17.4 7.5 14.9 11 14.7L12 17.4l1-2.7C16.5 14.9 20.8 17.4 20.8 22.5z" })]
+		})
+	}));
+	let L = D && (h?.[r]?.[e] || E?.[r]?.[e]) || i[e] || x[e];
+	return L ? j(/* @__PURE__ */ u("svg", {
+		width: t,
+		height: t,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		className: g ? `wui-icon ${g}` : "wui-icon",
+		"data-icon": e,
+		"aria-hidden": "true",
+		style: {
+			verticalAlign: "-.125em",
+			color: _,
+			...S
+		},
+		dangerouslySetInnerHTML: { __html: L },
+		...w
+	})) : null;
+}
+//#endregion
+export { P as default, j as iconNames, N as registerIcons };

package/dist/components/AppInfoList.js

@@ -0,0 +1,36 @@
+import e from "./warnUnknownProps.js";
+import t from "./renderIconProp.js";
+import { isEmpty as n } from "../lib/emptyValue.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppInfoList.jsx
+function o({ items: o = [], className: s = "", ...c }) {
+	return e("AppInfoList", c), /* @__PURE__ */ i("div", {
+		className: `info-list${s ? ` ${s}` : ""}`,
+		...c,
+		children: o.map((e, o) => {
+			let s = n(e.value), c = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
+				className: "info-icon",
+				children: t(e.icon, { size: 16 })
+			}), /* @__PURE__ */ a("span", {
+				className: "info-meta",
+				children: [/* @__PURE__ */ i("span", {
+					className: "info-key",
+					children: e.label
+				}), /* @__PURE__ */ i("span", {
+					className: `info-value${s ? " is-empty" : ""}`,
+					children: s ? "-" : e.value
+				})]
+			})] }), l = e.key ?? `${e.label}-${o}`;
+			return e.href ? /* @__PURE__ */ i("a", {
+				className: "info-row",
+				href: e.href,
+				children: c
+			}, l) : /* @__PURE__ */ i("div", {
+				className: "info-row",
+				children: c
+			}, l);
+		})
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppInfoTip.js

@@ -0,0 +1,41 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import r from "./AppPopover.js";
+import { useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/AppInfoTip.jsx
+var o = {
+	sm: " infotip-popover-sm",
+	md: "",
+	lg: " infotip-popover-lg",
+	xl: " infotip-popover-xl"
+};
+function s({ label: s, children: c, placement: l = "auto", width: u = "md", className: d = "", ...f }) {
+	t("AppInfoTip", f), e("AppInfoTip", "width", u, Object.keys(o));
+	let [p, m] = i(!1), h = !!s;
+	return !h && !c ? null : /* @__PURE__ */ a("span", {
+		className: `infotip${d ? ` ${d}` : ""}`,
+		...f,
+		children: /* @__PURE__ */ a(r, {
+			trigger: /* @__PURE__ */ a("button", {
+				type: "button",
+				className: "infotip-btn",
+				"aria-label": s || "More information",
+				children: /* @__PURE__ */ a(n, {
+					name: "info",
+					size: 16
+				})
+			}),
+			title: h ? s : void 0,
+			placement: l,
+			triggerType: ["hover", "focus"],
+			className: `infotip-popover${o[u] ?? ""}`,
+			onToggle: m,
+			"aria-expanded": p,
+			children: c
+		})
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/AppInput.js

@@ -0,0 +1,269 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import r from "./AppPopover.js";
+import ee from "./AppInfoTip.js";
+import i from "./AppRequiredMark.js";
+import { MASK_INPUT_TYPES as te, MASK_NAMES as ne, attachInputMask as re, evaluatePassword as ie, formatMasked as ae, isMaskPattern as oe, postedMasked as se } from "@webority/ui-elements/helpers";
+import { forwardRef as a, useEffect as o, useId as ce, useRef as le, useState as s } from "react";
+import { Form as c } from "react-bootstrap";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/AppInput.jsx
+var ue = [
+	"sm",
+	"md",
+	"lg"
+], de = ["bare"], d = a(function({ label: a, required: d = !1, error: fe, hint: f, help: p, helpLabel: pe = "More information", type: m = "text", size: h = "md", leftIcon: g, rightIcon: _, onRightIconClick: v, rightIconLabel: me, unit: y, id: he, name: ge, className: _e = "", fieldClassName: b = "", disabled: x = !1, clearable: S = !1, showCount: ve = !1, maxLength: C, prefix: w, suffix: T, action: E, floatingLabel: D = !1, variant: O, passwordRequirements: k = !1, requirementsPlacement: ye = "auto", mask: A, postFormatted: j = !1, onMaskChange: M, ...N }, P) {
+	t("AppInput", N), e("AppInput", "size", h, ue), e("AppInput", "variant", O, de), A != null && !oe(A) && e("AppInput", "mask", A, ne), A != null && e("AppInput", "type", m, te);
+	let [F, be] = s(!1), [xe, Se] = s(""), I = fe || xe, Ce = ce(), L = he || Ce, R = m === "password", we = R && F ? "text" : m, z = le(null), Te = (e) => {
+		z.current = e, typeof P == "function" ? P(e) : P && (P.current = e);
+	}, B = String(N.value ?? N.defaultValue ?? ""), [Ee, V] = s(() => !!B), [H, U] = s(() => B.length), W = S && !x, G = S || ve, K = R && !!k, [De, q] = s(B);
+	o(() => {
+		!K || N.value === void 0 || q(String(N.value ?? ""));
+	}, [N.value, K]), o(() => {
+		if (!G || N.value === void 0) return;
+		let e = String(N.value ?? "");
+		V(!!e), U(e.length);
+	}, [N.value, G]);
+	let Oe = (e) => {
+		V(!!e.target.value), U(e.target.value.length), N.onInput?.(e);
+	}, ke = (e) => {
+		K && q(e.target.value), G ? Oe(e) : N.onInput?.(e);
+	}, Ae = A ? {
+		...N.value !== void 0 && { value: ae(A, N.value) },
+		...N.defaultValue !== void 0 && { defaultValue: ae(A, N.defaultValue) }
+	} : null, J = le(M);
+	J.current = M, o(() => {
+		let e = z.current;
+		if (!(!A || !e)) return re(e, {
+			mask: A,
+			postFormatted: j,
+			onChange: (e, t) => J.current?.(e, t),
+			onInvalidChange: Se
+		});
+	}, [A, j]);
+	let Y = (e) => A && !j && e ? (t) => {
+		let n = t.target, r = new Proxy(n, { get: (e, t) => {
+			if (t === "value") return se(A, e.value);
+			let n = Reflect.get(e, t, e);
+			return typeof n == "function" ? n.bind(e) : n;
+		} });
+		e(Object.create(t, { target: { value: r } }));
+	} : e, je = W ? /* @__PURE__ */ l("button", {
+		type: "button",
+		className: "input-clear",
+		onClick: () => {
+			let e = z.current;
+			if (!e) return;
+			let t = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+			t ? t.call(e, "") : e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), V(!1), e.focus();
+		},
+		"aria-label": "Clear",
+		tabIndex: -1,
+		hidden: !Ee,
+		children: /* @__PURE__ */ l(n, {
+			name: "x",
+			size: 16
+		})
+	}) : null, X = I && L ? `${L}-error` : void 0, Me = f && L ? `${L}-hint` : void 0, Ne = X || Me, Pe = [
+		"input",
+		h === "sm" ? "input-sm" : "",
+		h === "lg" ? "input-lg" : "",
+		I ? "error" : "",
+		R ? "pw" : "",
+		y ? "num-input" : "",
+		!(D && a || w || T || y || R || _) && S && W ? "has-clear" : "",
+		O === "bare" ? "input-bare" : "",
+		_e
+	].filter(Boolean).join(" "), Z = /* @__PURE__ */ l(c.Control, {
+		id: L,
+		name: ge,
+		type: we,
+		className: Pe,
+		disabled: x,
+		required: d,
+		"aria-invalid": I ? "true" : "false",
+		"aria-describedby": Ne,
+		maxLength: C,
+		...N,
+		onChange: Y(N.onChange),
+		onBlur: Y(N.onBlur),
+		...Ae,
+		placeholder: D ? " " : N.placeholder,
+		ref: Te,
+		onInput: G || K ? ke : N.onInput
+	}), Q = k === !0 || k, Fe = Q && typeof Q == "object" && Q.title || "Password requirements", Ie = K ? ie(De, Q) : null, Le = K ? /* @__PURE__ */ l("ul", {
+		className: "pw-criteria",
+		"aria-live": "polite",
+		children: Ie.map((e) => /* @__PURE__ */ u("li", {
+			className: `pw-rule ${e.met ? "met" : "unmet"}`,
+			children: [
+				/* @__PURE__ */ l("span", {
+					className: "pw-mark",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ l("span", {
+					className: "pw-rule-text",
+					children: e.label
+				}),
+				/* @__PURE__ */ l("span", {
+					className: "visually-hidden",
+					children: e.met ? ": met" : ": not met"
+				})
+			]
+		}, e.key))
+	}) : null, $;
+	if (D && a) $ = /* @__PURE__ */ u("div", {
+		className: "field-float",
+		children: [Z, /* @__PURE__ */ u("label", {
+			className: "float-label",
+			htmlFor: L,
+			children: [a, d && /* @__PURE__ */ l(i, {})]
+		})]
+	});
+	else if (E) $ = /* @__PURE__ */ u("div", {
+		className: "input-action-row",
+		children: [/* @__PURE__ */ u("div", {
+			className: g ? "input-icon" : "input-wrap",
+			children: [g && /* @__PURE__ */ l("span", {
+				className: "ic",
+				children: /* @__PURE__ */ l(n, {
+					name: g,
+					size: 16
+				})
+			}), Z]
+		}), /* @__PURE__ */ l("div", {
+			className: "input-action",
+			children: E
+		})]
+	});
+	else if (w || T) $ = /* @__PURE__ */ u("div", {
+		className: "input-affixed",
+		children: [
+			w != null && /* @__PURE__ */ l("span", {
+				className: "affix affix-pre",
+				children: w
+			}),
+			Z,
+			T != null && /* @__PURE__ */ l("span", {
+				className: "affix affix-suf",
+				children: T
+			})
+		]
+	});
+	else if (y) $ = /* @__PURE__ */ u("div", {
+		className: "input-with-unit",
+		children: [Z, /* @__PURE__ */ l("span", {
+			className: "unit",
+			children: y
+		})]
+	});
+	else if (R) {
+		let e = /* @__PURE__ */ u("div", {
+			className: g ? "input-icon" : "input-wrap",
+			children: [
+				g && /* @__PURE__ */ l("span", {
+					className: "ic",
+					children: /* @__PURE__ */ l(n, {
+						name: g,
+						size: 16
+					})
+				}),
+				Z,
+				/* @__PURE__ */ u("button", {
+					type: "button",
+					className: `pw-toggle${F ? " pw-revealed" : ""}`,
+					onClick: () => be((e) => !e),
+					"aria-label": F ? "Hide password" : "Show password",
+					tabIndex: -1,
+					children: [/* @__PURE__ */ l(n, {
+						name: "eye",
+						size: 18,
+						className: "pw-eye"
+					}), /* @__PURE__ */ l(n, {
+						name: "eye-off",
+						size: 18,
+						className: "pw-eye-off"
+					})]
+				})
+			]
+		});
+		$ = K ? /* @__PURE__ */ l(r, {
+			trigger: e,
+			triggerType: "focus",
+			placement: ye,
+			title: Fe,
+			className: "pw-popover",
+			children: Le
+		}) : e;
+	} else $ = _ ? /* @__PURE__ */ u("div", {
+		className: "input-wrap",
+		children: [Z, /* @__PURE__ */ l("button", {
+			type: "button",
+			className: "pw-toggle",
+			onClick: v,
+			disabled: !v,
+			tabIndex: -1,
+			"aria-label": me || _,
+			children: /* @__PURE__ */ l(n, {
+				name: _,
+				size: 18
+			})
+		})]
+	}) : S ? /* @__PURE__ */ u("div", {
+		className: g ? "input-icon" : "input-wrap",
+		children: [
+			g && /* @__PURE__ */ l("span", {
+				className: "ic",
+				children: /* @__PURE__ */ l(n, {
+					name: g,
+					size: 16
+				})
+			}),
+			Z,
+			je
+		]
+	}) : g ? /* @__PURE__ */ u("div", {
+		className: "input-icon",
+		children: [/* @__PURE__ */ l("span", {
+			className: "ic",
+			children: /* @__PURE__ */ l(n, {
+				name: g,
+				size: 16
+			})
+		}), Z]
+	}) : Z;
+	return /* @__PURE__ */ u(c.Group, {
+		className: `field${b ? ` ${b}` : ""}`,
+		children: [
+			a && !D && /* @__PURE__ */ u(c.Label, {
+				className: "label",
+				htmlFor: L,
+				children: [
+					a,
+					d && /* @__PURE__ */ l(i, {}),
+					p && /* @__PURE__ */ l(ee, {
+						label: pe,
+						children: p
+					})
+				]
+			}),
+			$,
+			I ? /* @__PURE__ */ l("div", {
+				className: "field-error",
+				id: X,
+				children: I
+			}) : f ? /* @__PURE__ */ l("div", {
+				className: "field-hint",
+				id: Me,
+				children: f
+			}) : null,
+			ve && /* @__PURE__ */ u("div", {
+				className: `field-count${C && H >= C ? " at-limit" : ""}`,
+				children: [H, C ? ` / ${C}` : ""]
+			})
+		]
+	});
+});
+//#endregion
+export { d as default };