@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/tags-input-DLdHLWrH.js

@@ -1,625 +0,0 @@
-import { n as e, t } from "./icon-T9Yt4tnm.js";
-import { n, r } from "./i18n-DpW8lqJ1.js";
-import { b as i } from "./field-BJh5HI7w.js";
-/* empty css             */
-import { createArrowNavigation as a, createRemovalFocus as o } from "@slotted/core/focus";
-import { createControllable as s } from "@slotted/core/state";
-import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useImperativeHandle as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
-import { createCollapse as x } from "@slotted/core/overflow";
-import { tagsInputMessages as S } from "@slotted/core/i18n";
-import { createWidthGate as ee } from "@slotted/core/measure";
-import { getLiveAnnouncer as te } from "@slotted/core/live-announcer";
-import { createFilter as ne } from "@slotted/core/collection";
-import { writeToClipboard as re } from "@slotted/core/clipboard";
-import { admitValues as ie, joinValues as ae, judgeValue as oe, splitValues as se } from "@slotted/core/tags";
-//#region src/tags-input/tags-input-chips.tsx
-var C = "[data-part='chips'] > [role='gridcell']:not([data-part='field'])";
-function w({ context: n, index: r, value: i }) {
-	let [a, o] = _(null), s = g(null), c = g(!1), l = f(), u = n.labelFor(i), p = n.lockedValues.includes(i), m = n.disabled || n.readOnly || p, h = n.verdicts[r] ?? { valid: !0 }, v = h.valid ? null : h.message || n.t("invalid"), x = n.value.length;
-	d(() => {
-		n.duplicate === i && s.current?.focus({ preventScroll: !0 });
-	}, [n.duplicate, i]);
-	let S = (e, t) => {
-		if (c.current) {
-			c.current = !1;
-			return;
-		}
-		o(null), s.current?.focus({ preventScroll: !0 }), e.trim() !== "" && e !== i && n.replace(r, e, t);
-	}, ee = (e) => {
-		if (e.defaultPrevented) return;
-		let t = e.ctrlKey || e.metaKey;
-		if (t && (e.key === "c" || e.key === "C")) {
-			e.preventDefault(), n.copy(i);
-			return;
-		}
-		if (t && (e.key === "x" || e.key === "X")) {
-			if (m) return;
-			e.preventDefault(), n.copy(i), n.remove(r, e.nativeEvent);
-			return;
-		}
-		switch (e.key) {
-			case "Delete":
-			case "Backspace":
-				if (m) return;
-				e.preventDefault(), n.remove(r, e.nativeEvent);
-				return;
-			case "Enter":
-				if (m || !n.editable) return;
-				e.preventDefault(), c.current = !1, o(i);
-				return;
-			case "Escape":
-				e.preventDefault(), n.inputNode?.focus({ preventScroll: !0 });
-				return;
-		}
-		if (n.reorderable && e.altKey && !m) {
-			let t = s.current?.ownerDocument.defaultView?.getComputedStyle(s.current).direction === "rtl", i = t ? "ArrowLeft" : "ArrowRight", a = t ? "ArrowRight" : "ArrowLeft", o = e.key === i ? r + 1 : e.key === a ? r - 1 : e.key === "Home" ? 0 : e.key === "End" ? x - 1 : null;
-			if (o !== null) {
-				e.preventDefault(), n.move(r, o, e.nativeEvent);
-				return;
-			}
-		}
-		e.key.length === 1 && !t && !e.altKey && n.inputNode?.focus({ preventScroll: !0 });
-	}, te = (e) => {
-		e.stopPropagation(), n.remove(r, e.nativeEvent);
-	};
-	return a === null ? /* @__PURE__ */ b("span", {
-		"aria-describedby": v === null ? void 0 : l,
-		"aria-invalid": v !== null || void 0,
-		"aria-label": n.reorderable ? n.t("reorder", {
-			label: u,
-			position: r + 1,
-			count: x
-		}) : void 0,
-		"data-part": "root",
-		"data-size": "sm",
-		"data-ui": "tag",
-		"data-value": i,
-		"data-variant": "soft",
-		onDoubleClick: () => {
-			!m && n.editable && (c.current = !1, o(i));
-		},
-		onKeyDown: ee,
-		ref: s,
-		role: "gridcell",
-		tabIndex: -1,
-		title: v ?? void 0,
-		...v === null ? {} : {
-			"data-invalid": "",
-			"data-tone": "danger"
-		},
-		...n.duplicate === i ? { "data-current": "" } : {},
-		...p || n.disabled ? { "data-disabled": "" } : {},
-		children: [
-			/* @__PURE__ */ b("span", {
-				"data-part": "body",
-				children: [v === null ? null : /* @__PURE__ */ y("span", {
-					"data-part": "start",
-					children: /* @__PURE__ */ y(t, { children: /* @__PURE__ */ y(e, { name: "circle-alert" }) })
-				}), /* @__PURE__ */ y("span", {
-					"data-part": "label",
-					children: u
-				})]
-			}),
-			v === null ? null : /* @__PURE__ */ y("span", {
-				"data-part": "message",
-				id: l,
-				children: v
-			}),
-			m ? null : /* @__PURE__ */ y("button", {
-				"aria-label": n.t("remove", { label: u }),
-				"data-part": "remove",
-				onClick: te,
-				tabIndex: -1,
-				type: "button",
-				children: /* @__PURE__ */ y(t, { children: /* @__PURE__ */ y(e, { name: "x" }) })
-			})
-		]
-	}) : /* @__PURE__ */ y("span", {
-		"data-part": "root",
-		"data-size": "sm",
-		"data-ui": "tag",
-		"data-value": i,
-		"data-variant": "soft",
-		ref: s,
-		role: "gridcell",
-		tabIndex: -1,
-		children: /* @__PURE__ */ y("span", {
-			"data-part": "body",
-			children: /* @__PURE__ */ y("input", {
-				"aria-label": u,
-				autoFocus: !0,
-				onBlur: (e) => S(e.currentTarget.value, e.nativeEvent),
-				onChange: (e) => o(e.currentTarget.value),
-				onKeyDown: (e) => {
-					e.key === "Enter" && (e.preventDefault(), S(e.currentTarget.value, e.nativeEvent)), e.key === "Escape" && (e.preventDefault(), c.current = !0, o(null), s.current?.focus({ preventScroll: !0 }));
-				},
-				size: Math.max(i.length, 1),
-				type: "text",
-				value: a
-			})
-		})
-	});
-}
-function ce(e) {
-	let t = /* @__PURE__ */ new Map();
-	return e.map((e) => {
-		let n = t.get(e) ?? 0;
-		return t.set(e, n + 1), n === 0 ? e : `${e}\u0000${n}`;
-	});
-}
-function le({ children: e, context: t, describedBy: n, label: r }) {
-	let i = g(null), s = g(null), c = g(null), [l, u] = _(0), f = g(t);
-	f.current = t, d(() => {
-		let e = i.current;
-		if (e === null) return;
-		let t = a(e, {
-			itemSelector: `${C}, [data-part='field'] > [data-part='input']`,
-			loop: !1,
-			ownedKeys: (e) => e instanceof HTMLInputElement && e.value !== "" ? [
-				"ArrowLeft",
-				"ArrowRight",
-				"Home",
-				"End"
-			] : []
-		});
-		return () => t.destroy();
-	}, []), d(() => {
-		let e = i.current;
-		if (e === null) return;
-		let t = o(e, {
-			fallback: () => f.current.inputNode,
-			itemSelector: C
-		});
-		return () => t.destroy();
-	}, []);
-	let p = t.collapsing;
-	return d(() => {
-		let e = i.current;
-		if (e === null || !p) {
-			u(0);
-			return;
-		}
-		let t = x(e, {
-			collapsible: () => !0,
-			onChange: (e) => u(e.length),
-			trigger: () => s.current,
-			units: () => [...e.querySelectorAll(C)].filter((e) => !e.hasAttribute("data-count"))
-		});
-		return c.current = t, () => {
-			t.destroy(), c.current = null, u(0);
-		};
-	}, [p]), m(() => {
-		c.current?.refresh();
-	}, [t.value]), /* @__PURE__ */ b("div", {
-		"aria-describedby": n,
-		"aria-label": r,
-		"data-part": "chips",
-		ref: i,
-		role: "row",
-		children: [
-			ce(t.value).map((e, n) => /* @__PURE__ */ y(w, {
-				context: t,
-				index: n,
-				value: t.value[n]
-			}, e)),
-			p ? /* @__PURE__ */ y("span", {
-				"data-count": "",
-				"data-part": "root",
-				"data-size": "sm",
-				"data-ui": "tag",
-				"data-variant": "outline",
-				hidden: !0,
-				onClick: () => f.current.inputNode?.focus({ preventScroll: !0 }),
-				ref: s,
-				role: "gridcell",
-				tabIndex: -1,
-				children: /* @__PURE__ */ y("span", {
-					"data-part": "body",
-					children: /* @__PURE__ */ y("span", {
-						"data-part": "label",
-						children: `+${Math.max(l, 1)}`
-					})
-				})
-			}) : null,
-			e
-		]
-	});
-}
-//#endregion
-//#region src/tags-input/tags-input-defaults.tsx
-var T = {
-	addOnPaste: !0,
-	allowDuplicates: !1,
-	clearable: !0,
-	delimiters: [","],
-	disabled: !1,
-	editable: !1,
-	fullWidth: !0,
-	invalid: !1,
-	invalidValues: "keep",
-	max: null,
-	overflow: "wrap",
-	pendingOnBlur: "commit",
-	readOnly: !1,
-	reorderable: !1,
-	required: !1,
-	size: "md",
-	variant: "outline"
-}, E = c(T);
-function D() {
-	return u(E);
-}
-function O({ children: e, ...t }) {
-	let n = D(), r = { ...n };
-	for (let e of Object.keys(n)) {
-		let n = t[e];
-		n !== void 0 && (r[e] = n);
-	}
-	return /* @__PURE__ */ y(E.Provider, {
-		value: r,
-		children: e
-	});
-}
-var ue = Object.keys(T);
-function k(e, t) {
-	return (n) => {
-		e?.(n), n.defaultPrevented || t(n);
-	};
-}
-function de(e, ...t) {
-	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
-}
-function fe(e, t) {
-	return e.length === t.length && e.every((e, n) => e === t[n]);
-}
-function pe(e) {
-	let t = e?.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue("--slotted-duration-long").trim();
-	if (t === void 0 || t === "") return 320;
-	let n = Number.parseFloat(t);
-	return Number.isFinite(n) ? t.endsWith("ms") ? n : n * 1e3 : 320;
-}
-function A({ className: a, defaultInputValue: o = "", defaultValue: c = [], formatLabel: u, handleRef: m, inputValue: x, locale: C, lockedValues: w = [], messages: ce, normalize: T, onValueCopy: E, onInputValueChange: O, onValueChange: A, onValueRefuse: me, ref: he, render: ge, split: j, style: _e, type: ve = "text", validate: ye, value: M, ...be }) {
-	let N = D(), P = i(), F = r(S, ce), xe = n(), Se = C ?? xe, I = {}, Ce = {};
-	for (let [e, t] of Object.entries(be)) ue.includes(e) ? I[e] = t : Ce[e] = t;
-	let L = Ce, we = f(), Te = `${we}input`, Ee = `${we}hint`, [De, Oe] = _(c), [ke, Ae] = _(o), [R, je] = _(null), [Me, Ne] = _(!1), [Pe, Fe] = _(!1), [z, Ie] = _(null), B = g(null), V = { ...N };
-	for (let e of ue) {
-		let t = I[e];
-		t !== void 0 && (V[e] = t);
-	}
-	V.disabled = I.disabled ?? P?.disabled ?? N.disabled, V.readOnly = I.readOnly ?? P?.readOnly ?? N.readOnly, V.required = I.required ?? P?.required ?? N.required, V.invalid = I.invalid ?? P?.invalid ?? N.invalid, V.size = I.size ?? P?.size ?? N.size;
-	let H = M ?? De, U = x ?? ke, W = V.disabled || V.readOnly, Le = V.max !== null && H.length >= V.max, Re = h(() => ne({ locale: Se }), [Se]), ze = T ?? ((e) => e.trim()), G = l((e) => oe(e, ye, R), [ye, R]), Be = h(() => H.map((e) => G(e)), [
-		H,
-		G,
-		ve,
-		L.pattern,
-		L.minLength,
-		L.maxLength
-	]), K = Be.find((e) => !e.valid), Ve = V.invalid || K !== void 0 || Le && V.max !== null && H.length > V.max, He = P?.registerControl;
-	d(() => He?.(), [He]), d(() => {
-		if (R === null) return;
-		let e = K === void 0 ? V.max !== null && H.length > V.max ? F("counter", {
-			count: H.length,
-			max: V.max
-		}) : "" : K.message || F("invalid");
-		R.setCustomValidity(e);
-	}, [
-		R,
-		K,
-		H.length,
-		V.max,
-		F
-	]), d(() => {
-		let e = B.current;
-		if (e === null) return;
-		let t = ee(e, {
-			at: 120,
-			onChange: Ne
-		});
-		return () => t.destroy();
-	}, []), d(() => {
-		if (z === null) return;
-		let e = setTimeout(() => Ie(null), pe(B.current));
-		return () => clearTimeout(e);
-	}, [z]);
-	let q = l((e) => {
-		e !== "" && te(R?.ownerDocument).announce(e, { repeat: !0 });
-	}, [R]), J = l((e) => u === void 0 ? e : u(e), [u]), Y = g({
-		currentInput: U,
-		currentValue: H,
-		inputValue: x,
-		onInputValueChange: O,
-		onValueChange: A,
-		onValueRefuse: me,
-		value: M
-	});
-	Y.current = {
-		currentInput: U,
-		currentValue: H,
-		inputValue: x,
-		onInputValueChange: O,
-		onValueChange: A,
-		onValueRefuse: me,
-		value: M
-	};
-	let X = l((e, t, n) => {
-		let r = Y.current;
-		e !== r.currentInput && s({
-			controlled: r.inputValue,
-			initial: r.currentInput,
-			onRequest: (e) => r.onInputValueChange?.(e.value, e)
-		}).request(e, t, n) && Ae(e);
-	}, []), Z = l((e, t, n) => {
-		let r = Y.current;
-		return fe(e, r.currentValue) || !s({
-			controlled: r.value,
-			initial: r.currentValue,
-			onRequest: (e) => r.onValueChange?.(e.value, e)
-		}).request(e, t, n) ? !1 : (Oe(e), !0);
-	}, []), Q = l((e, t, n) => {
-		let r = Y.current, i = ie({
-			values: r.currentValue,
-			candidates: e,
-			max: V.max,
-			allowDuplicates: V.allowDuplicates,
-			invalidValues: V.invalidValues,
-			normalize: ze,
-			judge: G,
-			equals: Re.equals,
-			...n === void 0 ? {} : { replacing: n }
-		});
-		if (i.added.length > 0 && Z(i.next, "submit", t)) {
-			let e = i.added[i.added.length - 1], t = G(e), n = J(e), r = i.next.length;
-			q(t.valid ? F("added", {
-				label: n,
-				count: r
-			}) : F("addedInvalid", {
-				label: n,
-				count: r,
-				reason: t.message || F("invalid")
-			}));
-		}
-		for (let e of [
-			"duplicate",
-			"limit",
-			"invalid"
-		]) i.refused[e].length !== 0 && r.onValueRefuse?.(i.refused[e], {
-			cause: e,
-			source: t
-		});
-		if (i.existing.length > 0) {
-			let e = i.existing[0];
-			Ie(e), q(F("duplicate", { label: J(e) }));
-		}
-		return i.refused.limit.length > 0 && V.max !== null && q(F("counter", {
-			count: V.max,
-			max: V.max
-		})), i.refused.invalid.length > 0 && q(G(i.refused.invalid[0]).valid ? "" : F("invalid")), i;
-	}, [
-		q,
-		Re,
-		Z,
-		G,
-		J,
-		ze,
-		V,
-		F
-	]), Ue = l((e, t) => {
-		let n = Y.current, r = n.currentValue[e];
-		if (r === void 0 || w.includes(r)) return;
-		let i = n.currentValue.filter((t, n) => n !== e);
-		Z(i, "remove", t) && q(F("removed", {
-			label: J(r),
-			count: i.length
-		}));
-	}, [
-		q,
-		Z,
-		J,
-		w,
-		F
-	]), $ = l((e) => {
-		let t = Y.current.currentValue.filter((e) => w.includes(e));
-		Z(t, "clear", e), X("", "clear", e);
-	}, [
-		Z,
-		w,
-		X
-	]), We = l((e, t, n) => {
-		let r = Y.current.currentValue;
-		if (e < 0 || e >= r.length) return;
-		let i = Math.min(Math.max(t, 0), r.length - 1);
-		if (i === e) return;
-		let a = [...r], [o] = a.splice(e, 1);
-		a.splice(i, 0, o), Z(a, "keyboard", n) && q(F("reorder", {
-			label: J(o),
-			position: i + 1,
-			count: a.length
-		}));
-	}, [
-		q,
-		Z,
-		J,
-		F
-	]), Ge = l(async (e) => {
-		if (e.length === 0) return;
-		let t = await re(ae(e, V.delimiters), B.current?.ownerDocument);
-		E?.(e, t), t !== "refused" && q(F("copied", { count: e.length }));
-	}, [
-		q,
-		E,
-		V.delimiters,
-		F
-	]), Ke = l((e) => {
-		let t = Y.current.currentInput;
-		return t.trim() !== "" && (Q(j === void 0 ? se(t, V.delimiters) : j(t), e), X("", "submit", e), !0);
-	}, [
-		Q,
-		V.delimiters,
-		X,
-		j
-	]);
-	p(m, () => ({
-		clear: () => $(),
-		focus: () => R?.focus({ preventScroll: !0 }),
-		setValue: (e, t = "programmatic") => Z([...e], t)
-	}), [
-		$,
-		Z,
-		R
-	]);
-	let qe = () => [...B.current?.querySelectorAll("[data-part='chips'] > [role='gridcell']:not([data-part='field'])") ?? []], Je = (e) => {
-		if (V.disabled) return;
-		let t = e.ctrlKey || e.metaKey;
-		if (!W && V.delimiters.includes(e.key) && !e.altKey && !t) {
-			e.preventDefault(), Ke(e.nativeEvent);
-			return;
-		}
-		switch (e.key) {
-			case "Enter":
-				if (W) return;
-				Ke(e.nativeEvent) && e.preventDefault();
-				return;
-			case "Escape":
-				if (U === "") return;
-				e.preventDefault(), X("", "clear", e.nativeEvent);
-				return;
-			case "Backspace": {
-				if (U !== "" || W || e.currentTarget.selectionStart !== 0) return;
-				let t = qe().reverse().find((e) => !e.hasAttribute("data-disabled") && !e.hasAttribute("data-count"));
-				if (t === void 0) return;
-				e.preventDefault(), t.focus({ preventScroll: !0 });
-				return;
-			}
-			case "c":
-			case "C":
-				if (!t || U !== "" || H.length === 0) return;
-				e.preventDefault(), Ge(H);
-				return;
-		}
-	}, Ye = (e) => {
-		X(e.currentTarget.value, "keyboard", e.nativeEvent);
-	}, Xe = (e) => {
-		if (!V.addOnPaste || W) return;
-		let t = e.clipboardData.getData("text"), n = j === void 0 ? se(t, V.delimiters) : j(t);
-		n.length < 2 || (e.preventDefault(), Q(n, e.nativeEvent), X("", "submit", e.nativeEvent));
-	}, Ze = (e) => {
-		let t = e.relatedTarget;
-		t instanceof Node && B.current?.contains(t) === !0 || W || (V.pendingOnBlur === "commit" ? Ke(e.nativeEvent) : V.pendingOnBlur === "discard" && X("", "blur", e.nativeEvent));
-	}, Qe = () => Fe(!0), $e = (e) => {
-		let t = e.relatedTarget;
-		t instanceof Node && B.current?.contains(t) === !0 || Fe(!1);
-	}, et = (e) => {
-		$(e.nativeEvent), R?.focus({ preventScroll: !0 });
-	}, tt = l((e) => {
-		je(e), de(e, he);
-	}, [he]), nt = [L["aria-describedby"], P?.describedBy].filter(Boolean).join(" "), rt = F("count", { count: H.length }), it = L["aria-label"], at = V.clearable && (H.some((e) => !w.includes(e)) || U !== "") && !W, ot = V.max === null ? Me && H.length > 0 ? rt : null : F("counter", {
-		count: H.length,
-		max: V.max
-	}), st = V.editable ? F("editHint") : F("hint"), ct = {
-		announce: q,
-		collapsing: V.overflow === "collapse" && !Pe,
-		copy: (e) => void Ge([e]),
-		disabled: V.disabled,
-		duplicate: z,
-		editable: V.editable && !W,
-		inputNode: R,
-		labelFor: J,
-		lockedValues: w,
-		move: We,
-		readOnly: V.readOnly,
-		remove: Ue,
-		reorderable: V.reorderable && !W,
-		replace: (e, t, n) => Q([t], n, e),
-		t: F,
-		value: H,
-		verdicts: Be
-	}, lt = {
-		ref: B,
-		className: a,
-		style: _e,
-		onBlur: $e,
-		onFocus: Qe,
-		"data-overflow": V.overflow,
-		"data-part": "root",
-		"data-size": V.size,
-		"data-ui": "tags-input",
-		"data-variant": V.variant,
-		...V.fullWidth ? { "data-full-width": "" } : {},
-		...V.disabled ? { "data-disabled": "" } : {},
-		...V.readOnly ? { "data-readonly": "" } : {},
-		...Ve ? { "data-invalid": "" } : {},
-		...V.required ? { "data-required": "" } : {},
-		...Le ? { "data-complete": "" } : {},
-		...Me ? { "data-narrow": "" } : {},
-		...V.overflow === "collapse" && Pe ? { "data-expanded": "" } : {}
-	}, ut = /* @__PURE__ */ b(v, { children: [
-		/* @__PURE__ */ y("div", {
-			"aria-label": it === void 0 ? void 0 : F("countNamed", {
-				label: it,
-				count: H.length
-			}),
-			"aria-labelledby": it === void 0 && P !== void 0 ? P.ids.label : void 0,
-			"data-part": "control",
-			role: "grid",
-			children: /* @__PURE__ */ y(le, {
-				context: ct,
-				describedBy: Ee,
-				label: rt,
-				children: /* @__PURE__ */ y("span", {
-					"data-part": "field",
-					role: "gridcell",
-					children: /* @__PURE__ */ y("input", {
-						...L,
-						"aria-describedby": nt === "" ? void 0 : nt,
-						"aria-invalid": Ve ? !0 : void 0,
-						"data-part": "input",
-						disabled: V.disabled,
-						id: L.id ?? P?.ids.control ?? Te,
-						onBlur: k(L.onBlur, Ze),
-						onChange: k(L.onChange, Ye),
-						onKeyDown: k(L.onKeyDown, Je),
-						onPaste: k(L.onPaste, Xe),
-						readOnly: V.readOnly,
-						ref: tt,
-						required: V.required && H.length === 0,
-						type: ve,
-						value: U
-					})
-				})
-			})
-		}),
-		ot === null ? null : /* @__PURE__ */ y("span", {
-			"aria-hidden": "true",
-			"data-part": "counter",
-			children: ot
-		}),
-		at ? /* @__PURE__ */ y("button", {
-			"aria-label": F("clear"),
-			"data-part": "clear",
-			onClick: et,
-			type: "button",
-			children: /* @__PURE__ */ y(t, { children: /* @__PURE__ */ y(e, { name: "x" }) })
-		}) : null,
-		/* @__PURE__ */ y("span", {
-			"data-part": "hint",
-			id: Ee,
-			children: st
-		}),
-		L.name === void 0 ? null : H.map((e, t) => /* @__PURE__ */ y("input", {
-			form: L.form,
-			name: L.name,
-			type: "hidden",
-			value: e
-		}, `${t}-${e}`))
-	] });
-	return ge === void 0 ? /* @__PURE__ */ y("div", {
-		...lt,
-		children: ut
-	}) : ge({
-		...lt,
-		children: ut
-	});
-}
-//#endregion
-export { D as i, T as n, O as r, A as t };