@datum-cloud/datum-ui 1.3.2 → 1.5.0

package/dist/tag-input-CSav22U5.mjs

@@ -0,0 +1,433 @@
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { t as Badge } from "./badge-BTNW_FEU.mjs";
+import { t as Icon } from "./icon-wrapper-DKfJlJd0.mjs";
+import { t as Input } from "./input-j4tbmYYz.mjs";
+import { X } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+//#region src/components/features/tag-input/parse.ts
+/**
+* Used for identifying split characters when pasting.
+* Splits on: newlines, tabs, semicolons, commas, and pipes.
+* Does NOT split on dots (.) or slashes (/) to preserve email addresses and URLs.
+*/
+const SPLITTER_REGEX = /[\n\t;,|]+/;
+/**
+* Used for trimming leading/trailing whitespace and special characters.
+* Preserves alphanumeric characters, dots, @, hyphens, and underscores.
+*/
+const FORMATTING_REGEX = /^[\s"'<>]+|[\s"'<>]+$/g;
+/** Default keys that confirm the current input as a tag. */
+const DEFAULT_DELIMITERS = ["Enter", ","];
+/**
+* Split a pasted string into candidate tag values.
+* Trims each value, drops empties, and strips wrapping quote/angle characters.
+*/
+function splitByDelimiters(text) {
+	return text.split(SPLITTER_REGEX).map((val) => val.trim()).filter(Boolean).map((val) => val.replace(FORMATTING_REGEX, "")).filter(Boolean);
+}
+/**
+* Trim then apply an optional normalizer.
+* Returns `null` for empty or normalizer-rejected values.
+*/
+function normalizeTag(raw, normalizer) {
+	const trimmed = raw.trim();
+	if (!trimmed) return null;
+	return (normalizer ? normalizer(trimmed) : trimmed) || null;
+}
+/**
+* Validate a single tag value against an optional Zod schema.
+* Returns `{ ok: true }` when no validator is supplied.
+*/
+function validateTag(value, validator) {
+	if (!validator) return { ok: true };
+	try {
+		validator.parse(value);
+		return { ok: true };
+	} catch (error) {
+		if (error instanceof z.ZodError) return {
+			ok: false,
+			error: error.issues[0]?.message || "Invalid input"
+		};
+		return {
+			ok: false,
+			error: "Validation failed"
+		};
+	}
+}
+/**
+* Normalize, de-duplicate, validate and cap a list of pasted candidate values.
+*
+* Applies the same normalizer used for single-value entry (so casing rules etc.
+* are consistent) and reports when values were dropped for validation or the
+* max-items limit so the caller can surface feedback.
+*/
+function processPastedValues(rawValues, existing, { normalizer, validator, maxItems = Infinity } = {}) {
+	const validValues = [];
+	let hadInvalid = false;
+	let exceededMax = false;
+	for (const raw of rawValues) {
+		const normalized = normalizeTag(raw, normalizer);
+		if (!normalized) continue;
+		if (existing.includes(normalized) || validValues.includes(normalized)) continue;
+		if (existing.length + validValues.length >= maxItems) {
+			exceededMax = true;
+			break;
+		}
+		if (!validateTag(normalized, validator).ok) {
+			hadInvalid = true;
+			continue;
+		}
+		validValues.push(normalized);
+	}
+	return {
+		validValues,
+		hadInvalid,
+		exceededMax
+	};
+}
+//#endregion
+//#region src/components/features/tag-input/tag-input-field.tsx
+/**
+* Presentational layer for {@link TagsInput}: renders the tag chips and the
+* text input, wiring them to the handlers produced by `useTagsInput`.
+*/
+function TagInputField({ value, placeholder, input }) {
+	const { inputValue, activeIndex, setActiveIndex, disableInput, disableButton, removeValue, handleKeyDown, handlePaste, handleBlur, handleSelect, handleChange, mousePreventDefault } = input;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [value.map((item, index) => /* @__PURE__ */ jsxs(Badge, {
+		tabIndex: activeIndex !== -1 ? 0 : activeIndex,
+		"aria-disabled": disableButton,
+		"data-active": activeIndex === index,
+		className: cn("data-[active='true']:ring-muted-foreground relative flex items-center gap-1 truncate rounded px-1 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 data-[active='true']:ring-2"),
+		type: "secondary",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-xs",
+			children: item
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": `Remove ${item} option`,
+			"aria-roledescription": "button to remove option",
+			disabled: disableButton,
+			onMouseDown: mousePreventDefault,
+			onClick: () => removeValue(item),
+			className: "disabled:cursor-not-allowed",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [
+					"Remove",
+					item,
+					" ",
+					"option"
+				]
+			}), /* @__PURE__ */ jsx(Icon, {
+				icon: X,
+				className: "hover:stroke-destructive h-4 w-4"
+			})]
+		})]
+	}, item)), /* @__PURE__ */ jsx(Input, {
+		tabIndex: 0,
+		"aria-label": "input tag",
+		disabled: disableInput,
+		readOnly: activeIndex !== -1,
+		onKeyDown: handleKeyDown,
+		onPaste: handlePaste,
+		onBlur: handleBlur,
+		value: inputValue,
+		onSelect: handleSelect,
+		onChange: handleChange,
+		placeholder,
+		onClick: () => setActiveIndex(-1),
+		className: cn("text-input-foreground h-6 min-w-fit flex-1 border-0 bg-transparent p-0 py-1 shadow-none", "placeholder:text-input-placeholder", "focus-visible:border-transparent focus-visible:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0", activeIndex !== -1 && "caret-transparent")
+	})] });
+}
+TagInputField.displayName = "TagInputField";
+//#endregion
+//#region src/components/features/tag-input/use-tags-input.ts
+/** How long a transient paste error stays visible before clearing (ms). */
+const TRANSIENT_ERROR_MS = 3e3;
+/**
+* Owns all state and event handlers for {@link TagsInput}.
+*
+* Keeping this in a hook lets the pure parsing/validation logic live in
+* `parse.ts` while the component stays a thin provider + presentation layer.
+*/
+function useTagsInput({ value, onValueChange, maxItems, minItems, delimiters = DEFAULT_DELIMITERS, normalizer, validator, onValidationError, dir }) {
+	const [activeIndex, setActiveIndex] = React.useState(-1);
+	const [inputValue, setInputValue] = React.useState("");
+	const [disableInput, setDisableInput] = React.useState(false);
+	const [disableButton, setDisableButton] = React.useState(false);
+	const [isValueSelected, setIsValueSelected] = React.useState(false);
+	const [selectedValue, setSelectedValue] = React.useState("");
+	const [validationError, setValidationError] = React.useState(null);
+	const parseMinItems = minItems ?? 0;
+	const parseMaxItems = maxItems ?? Infinity;
+	const errorTimerRef = React.useRef(null);
+	const clearErrorTimer = React.useCallback(() => {
+		if (errorTimerRef.current) {
+			clearTimeout(errorTimerRef.current);
+			errorTimerRef.current = null;
+		}
+	}, []);
+	const setError = React.useCallback((errorMessage) => {
+		clearErrorTimer();
+		setValidationError(errorMessage);
+		onValidationError?.(errorMessage);
+	}, [clearErrorTimer, onValidationError]);
+	const setTransientError = React.useCallback((errorMessage) => {
+		clearErrorTimer();
+		setValidationError(errorMessage);
+		onValidationError?.(errorMessage);
+		errorTimerRef.current = setTimeout(() => {
+			errorTimerRef.current = null;
+			setValidationError(null);
+			onValidationError?.(null);
+		}, TRANSIENT_ERROR_MS);
+	}, [clearErrorTimer, onValidationError]);
+	React.useEffect(() => clearErrorTimer, [clearErrorTimer]);
+	/**
+	* Confirm a single value as a tag.
+	* @returns `true` when a new tag was added, `false` otherwise.
+	*/
+	const addValue = React.useCallback((val) => {
+		setError(null);
+		const normalized = normalizeTag(val, normalizer);
+		if (!normalized) return false;
+		if (value.includes(normalized)) {
+			setError("This tag already exists");
+			return false;
+		}
+		if (value.length >= parseMaxItems) {
+			setError(`Maximum of ${parseMaxItems} tags allowed`);
+			return false;
+		}
+		const result = validateTag(normalized, validator);
+		if (!result.ok) {
+			setError(result.error ?? "Invalid input");
+			return false;
+		}
+		onValueChange([...value, normalized]);
+		return true;
+	}, [
+		value,
+		validator,
+		parseMaxItems,
+		normalizer,
+		onValueChange,
+		setError
+	]);
+	const removeValue = React.useCallback((val) => {
+		if (value.includes(val) && value.length > parseMinItems) onValueChange(value.filter((item) => item !== val));
+	}, [
+		value,
+		parseMinItems,
+		onValueChange
+	]);
+	const handlePaste = React.useCallback((e) => {
+		e.preventDefault();
+		const pastedText = e.clipboardData.getData("text");
+		if (!pastedText) return;
+		const values = splitByDelimiters(pastedText);
+		if (values.length === 0) return;
+		if (values.length === 1) {
+			addValue(values[0]);
+			return;
+		}
+		const { validValues, hadInvalid, exceededMax } = processPastedValues(values, value, {
+			normalizer,
+			validator,
+			maxItems: parseMaxItems
+		});
+		if (validValues.length > 0) onValueChange([...value, ...validValues]);
+		if (exceededMax) setError(`Maximum of ${parseMaxItems} tags allowed`);
+		else if (hadInvalid && validator) setTransientError("Some pasted values were invalid and skipped");
+		else if (validValues.length > 0) setError(null);
+	}, [
+		value,
+		addValue,
+		normalizer,
+		validator,
+		parseMaxItems,
+		onValueChange,
+		setError,
+		setTransientError
+	]);
+	const handleSelect = React.useCallback((e) => {
+		const target = e.target;
+		const selection = inputValue.substring(target.selectionStart ?? 0, target.selectionEnd ?? 0);
+		setSelectedValue(selection);
+		setIsValueSelected(selection === inputValue);
+	}, [inputValue]);
+	React.useEffect(() => {
+		if (value.length - 1 >= parseMinItems) setDisableButton(false);
+		else setDisableButton(true);
+		if (value.length + 1 <= parseMaxItems) setDisableInput(false);
+		else setDisableInput(true);
+	}, [
+		value,
+		parseMinItems,
+		parseMaxItems
+	]);
+	const handleKeyDown = React.useCallback((e) => {
+		e.stopPropagation();
+		const moveNext = () => {
+			setActiveIndex(activeIndex + 1 > value.length - 1 ? -1 : activeIndex + 1);
+		};
+		const movePrev = () => {
+			setActiveIndex(activeIndex - 1 < 0 ? value.length - 1 : activeIndex - 1);
+		};
+		const moveCurrent = () => {
+			setActiveIndex(activeIndex - 1 <= 0 ? value.length - 1 === 0 ? -1 : 0 : activeIndex - 1);
+		};
+		const target = e.currentTarget;
+		switch (e.key) {
+			case "ArrowLeft":
+				if (dir === "rtl") {
+					if (value.length > 0 && activeIndex !== -1) moveNext();
+				} else if (value.length > 0 && target.selectionStart === 0) movePrev();
+				break;
+			case "ArrowRight":
+				if (dir === "rtl") {
+					if (value.length > 0 && target.selectionStart === 0) movePrev();
+				} else if (value.length > 0 && activeIndex !== -1) moveNext();
+				break;
+			case "Backspace":
+			case "Delete":
+				if (value.length > 0) {
+					if (activeIndex !== -1 && activeIndex < value.length) {
+						removeValue(value[activeIndex]);
+						moveCurrent();
+					} else if (target.selectionStart === 0) {
+						if (selectedValue === inputValue || isValueSelected) removeValue(value[value.length - 1]);
+					}
+				}
+				break;
+			case "Escape":
+				setActiveIndex(activeIndex === -1 ? value.length - 1 : -1);
+				break;
+			case "Tab":
+				if (inputValue.trim() !== "") {
+					e.preventDefault();
+					addValue(inputValue);
+					setInputValue("");
+				}
+				break;
+			default:
+				if (delimiters.includes(e.key) && inputValue.trim() !== "") {
+					e.preventDefault();
+					addValue(inputValue);
+					setInputValue("");
+				}
+				break;
+		}
+	}, [
+		activeIndex,
+		value,
+		inputValue,
+		removeValue,
+		dir,
+		selectedValue,
+		isValueSelected,
+		addValue,
+		delimiters
+	]);
+	const mousePreventDefault = React.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}, []);
+	return {
+		inputValue,
+		setInputValue,
+		activeIndex,
+		setActiveIndex,
+		validationError,
+		setValidationError,
+		disableInput,
+		disableButton,
+		removeValue,
+		handlePaste,
+		handleSelect,
+		handleKeyDown,
+		handleChange: React.useCallback((e) => {
+			setInputValue(e.currentTarget.value);
+		}, []),
+		handleBlur: React.useCallback((e) => {
+			if (inputValue.trim() === "") return;
+			const added = addValue(inputValue);
+			setInputValue("");
+			if (!added) return;
+			const relatedTarget = e.relatedTarget;
+			const submitButton = relatedTarget?.getAttribute("type") === "submit" ? relatedTarget : relatedTarget?.closest("button[type=\"submit\"]");
+			if (submitButton) requestAnimationFrame(() => {
+				submitButton.click();
+			});
+		}, [inputValue, addValue]),
+		mousePreventDefault
+	};
+}
+//#endregion
+//#region src/components/features/tag-input/tag-input.tsx
+const TagInputContext = React.createContext(null);
+function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems, className, dir, delimiters = DEFAULT_DELIMITERS, normalizer, validator, onValidationError, error, showValidationErrors = true, name, key, ...props }) {
+	const input = useTagsInput({
+		value,
+		onValueChange,
+		maxItems,
+		minItems,
+		delimiters,
+		normalizer,
+		validator,
+		onValidationError,
+		dir
+	});
+	const { inputValue, setInputValue, activeIndex, setActiveIndex, validationError, setValidationError } = input;
+	return /* @__PURE__ */ jsxs(TagInputContext, {
+		value: React.useMemo(() => ({
+			value,
+			onValueChange,
+			inputValue,
+			setInputValue,
+			activeIndex,
+			setActiveIndex,
+			validator,
+			validationError,
+			setValidationError
+		}), [
+			value,
+			onValueChange,
+			inputValue,
+			setInputValue,
+			activeIndex,
+			setActiveIndex,
+			validator,
+			validationError,
+			setValidationError
+		]),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...props,
+			ref,
+			dir,
+			className: cn("border-input-border bg-input-background/50 text-input-foreground flex min-h-10 flex-wrap items-center gap-1 overflow-hidden rounded-lg border px-3 py-2 transition-all", activeIndex === -1 ? "focus-within:border-input-focus-border focus-within:shadow-(--input-focus-shadow) focus-within:ring-0 focus-within:ring-offset-0 focus-within:outline-hidden" : "focus-within:ring-0 focus-within:ring-offset-0 focus-within:outline-hidden", className),
+			suppressHydrationWarning: true,
+			children: [(showValidationErrors && validationError || error) && /* @__PURE__ */ jsx("div", {
+				className: "mb-1 w-full text-sm text-red-500",
+				children: error ? Array.isArray(error) ? error[0] : error : validationError
+			}), /* @__PURE__ */ jsx(TagInputField, {
+				value,
+				placeholder,
+				input
+			})]
+		}), /* @__PURE__ */ jsxs("select", {
+			name,
+			multiple: true,
+			value,
+			defaultValue: void 0,
+			className: "absolute top-0 left-0 h-0 w-0",
+			onChange: () => void 0,
+			children: [/* @__PURE__ */ jsx("option", { value: "" }), value.map((option, idx) => /* @__PURE__ */ jsx("option", { value: option }, `${option}-${idx}`))]
+		}, key)]
+	});
+}
+TagsInput.displayName = "TagsInput";
+//#endregion
+export { TagsInput as t };

package/dist/task-queue/index.mjs

@@ -1,2 +1,2 @@
-import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-B63xh0f-.mjs";
+import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-DfdGiyfA.mjs";
 export { LocalTaskStorage, RedisTaskStorage, TaskPanel, TaskPanelActions, TaskPanelCounter, TaskPanelHeader, TaskPanelItem, TaskQueue, TaskQueueDropdown, TaskQueueProvider, TaskQueueTrigger, TaskSummaryDialog, createOrgMetadata, createProjectMetadata, createUserMetadata, detectStorage, getContextLabel, matchesCurrentScope, useCurrentScope, useTaskQueue, useTasksWithLabels };