@bysages/react 0.4.3 → 0.5.0

package/dist/mentions-BwnyvdXz.mjs

@@ -1,213 +0,0 @@
-import { t as useElementId } from "./id-C37UYLwJ.mjs";
-import { t as withSelfRoot } from "./family-DE_GQeeM.mjs";
-import { Field } from "./components/field/index.mjs";
-import { Popover as Popover$1 } from "./components/popover/index.mjs";
-import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { Popover } from "@ark-ui/react/popover";
-import { Portal } from "@ark-ui/react/portal";
-//#region src/components/mentions/use-mentions.ts
-/** The @-detection machinery behind a mention field: watch the caret,
-* offer the matching candidates, and answer for the keys that drive
-* them. The field element arrives as a getter because hosts wrap it
-* differently (a bare textarea, a field part's ref).
-*
-* `onKeydown` answers whether the vessel consumed the key, so a host
-* with its own Enter semantics — a composer that sends — can yield to
-* the candidates first and act only when the vessel stands down. */
-function useMentions(options, textarea, handlers) {
-	const [popupOpen, setPopupOpen] = useState(false);
-	const [matches, setMatches] = useState([]);
-	const [active, setActive] = useState(0);
-	const anchorIndex = useRef(0);
-	const caretIndex = useRef(0);
-	const resolve = () => typeof options === "function" ? options() : options;
-	const closePopup = () => {
-		setPopupOpen(false);
-		setMatches([]);
-	};
-	const detect = () => {
-		const text = handlers.getText();
-		const caret = textarea()?.selectionStart ?? text.length;
-		caretIndex.current = caret;
-		const head = text.slice(0, caret);
-		const char = resolve().trigger ?? "@";
-		const anchor = head.lastIndexOf(char);
-		const token = anchor === -1 ? "" : head.slice(anchor + char.length);
-		if (anchor === -1 || /\s/.test(token)) {
-			closePopup();
-			return;
-		}
-		const found = resolve().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
-		setMatches(found);
-		setActive(0);
-		anchorIndex.current = anchor;
-		setPopupOpen(found.length > 0);
-	};
-	const insert = (entry) => {
-		const text = handlers.getText();
-		const char = resolve().trigger ?? "@";
-		const next = text.slice(0, anchorIndex.current) + char + entry.label + " " + text.slice(caretIndex.current);
-		handlers.setText(next);
-		closePopup();
-		setTimeout(() => {
-			const el = textarea();
-			if (!el) return;
-			const caret = anchorIndex.current + char.length + entry.label.length + 1;
-			el.focus();
-			el.setSelectionRange(caret, caret);
-		}, 0);
-	};
-	/** Feed the field's input events through here — the vessel watches
-	* the text as it lands, from the element itself. */
-	const onInput = () => detect();
-	/** Arrows move, Enter inserts, Escape dismisses. Answers `true` when
-	* the vessel consumed the key. */
-	const onKeydown = (event) => {
-		if (!popupOpen || matches.length === 0) return false;
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			setActive((current) => (current + 1) % matches.length);
-		} else if (event.key === "ArrowUp") {
-			event.preventDefault();
-			setActive((current) => (current - 1 + matches.length) % matches.length);
-		} else if (event.key === "Enter") {
-			event.preventDefault();
-			insert(matches[active]);
-		} else if (event.key === "Escape") closePopup();
-		else return false;
-		return true;
-	};
-	return {
-		open: popupOpen,
-		matches,
-		active,
-		setActive,
-		insert,
-		close: closePopup,
-		onInput,
-		onKeydown
-	};
-}
-//#endregion
-//#region src/components/mentions/index.tsx
-function MentionsPopup({ size, matches, active, onInsert, onActiveChange, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		"data-scope": "mentions",
-		"data-part": "popup",
-		"data-size": size,
-		role: "listbox",
-		children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
-			role: "option",
-			"aria-selected": index === active,
-			tabIndex: -1,
-			"data-scope": "mentions",
-			"data-part": "option",
-			"data-active": index === active ? "" : void 0,
-			onMouseEnter: () => onActiveChange?.(index),
-			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => onInsert?.(entry),
-			onKeyDown: (event) => {
-				if (event.key !== "Enter" && event.key !== " ") return;
-				event.preventDefault();
-				onInsert?.(entry);
-			},
-			children: entry.label
-		}, entry.value))
-	});
-}
-/** The vessel: the candidates themselves as a floating card. The anchor
-* is virtual — a live rectangle off the host's field — so a host keeps
-* its own anatomy (the textarea rides where the host puts it) and the
-* vessel still points at the right place. Shares the detection state
-* with the host through `useMentions`. */
-function MentionsVesselImpl({ size = "md", open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange, id }) {
-	injectComponentStyle("mentions");
-	const hostId = useElementId("mentions", { id });
-	return /* @__PURE__ */ jsx(Popover.Root, {
-		id: `${hostId}:vessel`,
-		open,
-		onOpenChange: (details) => onOpenChange?.(details.open),
-		positioning: {
-			placement: "bottom-start",
-			getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
-		},
-		children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(MentionsPopup, {
-				size,
-				matches,
-				active,
-				onInsert,
-				onActiveChange
-			})
-		}) }) })
-	});
-}
-const MentionsVessel = withSelfRoot(MentionsVesselImpl);
-function MentionsImpl({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, children, ...rest }) {
-	const hostId = useElementId("mentions", rest);
-	const [internal, setInternal] = useState("");
-	const fieldRef = useRef(null);
-	const el = () => fieldRef.current;
-	const current = value ?? internal;
-	const mentions = useMentions({
-		items,
-		trigger
-	}, el, {
-		getText: () => el()?.value ?? current,
-		setText: (next) => {
-			setInternal(next);
-			onValueChange?.(next);
-		}
-	});
-	const handleChange = (event) => {
-		const node = event.currentTarget;
-		setInternal(node.value);
-		onValueChange?.(node.value);
-		mentions.onInput();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		...rest,
-		"data-scope": "mentions",
-		"data-part": "root",
-		"data-size": size,
-		children: [/* @__PURE__ */ jsxs(Popover.Root, {
-			id: `${hostId}:vessel`,
-			open: mentions.open,
-			onOpenChange: (details) => {
-				if (!details.open) mentions.close();
-			},
-			positioning: { placement: "bottom-start" },
-			children: [/* @__PURE__ */ jsx(Popover.Anchor, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Field.Textarea, {
-					ref: fieldRef,
-					autoresize,
-					rows: 3,
-					placeholder,
-					value: current,
-					onChange: handleChange,
-					onKeyDown: (event) => mentions.onKeydown(event),
-					"data-invalid": invalid || void 0,
-					"data-scope": "mentions",
-					"data-part": "textarea"
-				})
-			}), /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(MentionsPopup, {
-					size,
-					matches: mentions.matches,
-					active: mentions.active,
-					onInsert: mentions.insert,
-					onActiveChange: mentions.setActive
-				})
-			}) })]
-		}), children]
-	});
-}
-const Mentions = Object.assign(MentionsImpl, Popover$1);
-//#endregion
-export { MentionsVessel as n, useMentions as r, Mentions as t };