@datum-cloud/datum-ui 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/tag-input-Di7SDNbK.mjs

@@ -0,0 +1,284 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as Badge } from "./badge-bFgeYceE.mjs";
+import { t as Icon } from "./icon-wrapper-9ticVbRL.mjs";
+import { t as Input } from "./input-fzXBheCN.mjs";
+import { X } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+
+//#region src/components/features/tag-input/tag-input.tsx
+/**
+* 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;
+const TagInputContext = React.createContext(null);
+function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems, className, dir, validator, onValidationError, error, showValidationErrors = true, name, key, ...props }) {
+	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 onValueChangeHandler = React.useCallback((val) => {
+		const setError = (errorMessage) => {
+			setValidationError(errorMessage);
+			if (onValidationError) onValidationError(errorMessage);
+		};
+		setError(null);
+		if (!val.trim()) return;
+		if (value.includes(val)) {
+			setError("This tag already exists");
+			return;
+		}
+		if (value.length >= parseMaxItems) {
+			setError(`Maximum of ${parseMaxItems} tags allowed`);
+			return;
+		}
+		if (validator) try {
+			validator.parse(val);
+			onValueChange([...value, val]);
+		} catch (error) {
+			if (error instanceof z.ZodError) setError(error.issues[0]?.message || "Invalid input");
+			else setError("Validation failed");
+		}
+		else onValueChange([...value, val]);
+	}, [
+		value,
+		validator,
+		parseMaxItems
+	]);
+	const RemoveValue = React.useCallback((val) => {
+		if (value.includes(val) && value.length > parseMinItems) onValueChange(value.filter((item) => item !== val));
+	}, [value]);
+	const handlePaste = React.useCallback((e) => {
+		e.preventDefault();
+		const pastedText = e.clipboardData.getData("text");
+		if (!pastedText) return;
+		const values = pastedText.split(SPLITTER_REGEX).map((val) => val.trim()).filter(Boolean).map((val) => val.replace(FORMATTING_REGEX, ""));
+		if (values.length === 0) return;
+		if (values.length === 1) {
+			onValueChangeHandler(values[0]);
+			return;
+		}
+		const validValues = [];
+		let hasError = false;
+		for (const val of values) {
+			if (value.includes(val) || validValues.includes(val)) continue;
+			if (value.length + validValues.length >= parseMaxItems) break;
+			if (validator) try {
+				validator.parse(val);
+				validValues.push(val);
+			} catch {
+				hasError = true;
+				continue;
+			}
+			else validValues.push(val);
+		}
+		if (validValues.length > 0) onValueChange([...value, ...validValues]);
+		if (hasError && validator) {
+			setValidationError("Some pasted values were invalid and skipped");
+			if (onValidationError) onValidationError("Some pasted values were invalid and skipped");
+			setTimeout(() => {
+				setValidationError(null);
+				if (onValidationError) onValidationError(null);
+			}, 3e3);
+		}
+	}, [
+		value,
+		onValueChangeHandler,
+		validator,
+		parseMaxItems,
+		onValidationError
+	]);
+	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(() => {
+		const VerifyDisable = () => {
+			if (value.length - 1 >= parseMinItems) setDisableButton(false);
+			else setDisableButton(true);
+			if (value.length + 1 <= parseMaxItems) setDisableInput(false);
+			else setDisableInput(true);
+		};
+		VerifyDisable();
+	}, [
+		value,
+		parseMinItems,
+		parseMaxItems
+	]);
+	const handleKeyDown = React.useCallback(async (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 "Enter":
+			case ",":
+				if (inputValue.trim() !== "") {
+					e.preventDefault();
+					onValueChangeHandler(inputValue);
+					setInputValue("");
+				}
+				break;
+		}
+	}, [
+		activeIndex,
+		value,
+		inputValue,
+		RemoveValue,
+		dir,
+		selectedValue,
+		isValueSelected,
+		onValueChangeHandler
+	]);
+	const mousePreventDefault = React.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}, []);
+	const handleChange = React.useCallback((e) => {
+		setInputValue(e.currentTarget.value);
+	}, []);
+	const handleBlur = React.useCallback((e) => {
+		const relatedTarget = e.relatedTarget;
+		if (!(relatedTarget?.tagName === "BUTTON" && (relatedTarget?.getAttribute("type") === "submit" || relatedTarget?.closest("button[type=\"submit\"]"))) && inputValue.trim() !== "") {
+			onValueChangeHandler(inputValue);
+			setInputValue("");
+		}
+	}, [inputValue, onValueChangeHandler]);
+	return /* @__PURE__ */ jsxs(TagInputContext, {
+		value: React.useMemo(() => ({
+			value,
+			onValueChange,
+			inputValue,
+			setInputValue,
+			activeIndex,
+			setActiveIndex,
+			validator,
+			validationError,
+			setValidationError
+		}), [
+			value,
+			onValueChange,
+			inputValue,
+			activeIndex,
+			validator,
+			validationError
+		]),
+		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
+				}),
+				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,
+					onKeyDown: handleKeyDown,
+					onPaste: handlePaste,
+					onBlur: handleBlur,
+					value: inputValue,
+					onSelect: handleSelect,
+					onChange: activeIndex === -1 ? handleChange : void 0,
+					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")
+				})
+			]
+		}), /* @__PURE__ */ jsxs("select", {
+			name,
+			id: props.id,
+			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

@@ -0,0 +1,7 @@
+import "../utils-Bfgoe-Gm.mjs";
+import "../dialog-DXBaT9gA.mjs";
+import "../table-CsXBcQLI.mjs";
+import "../tooltip-Dd3ActSS.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-DW72ikDH.mjs";
+
+export { LocalTaskStorage, RedisTaskStorage, TaskPanel, TaskPanelActions, TaskPanelCounter, TaskPanelHeader, TaskPanelItem, TaskQueue, TaskQueueDropdown, TaskQueueProvider, TaskQueueTrigger, TaskSummaryDialog, createOrgMetadata, createProjectMetadata, createUserMetadata, detectStorage, getContextLabel, matchesCurrentScope, useCurrentScope, useTaskQueue, useTasksWithLabels };