@exsto/ds 0.0.1-rc.13 → 0.0.1-rc.14

package/dist/date-picker.js

@@ -1,345 +1,2 @@
-import { c as Button, n as Popover, r as PopoverContent, s as PopoverTrigger, t as Input, u as cn } from "./chunks/input-syWxjY2U.js";
-import { i as firstWeekdayOf, n as dateToDay, o as Calendar, r as dayToDate } from "./chunks/date-range-picker-CWVcHgy2.js";
-import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconCalendar } from "@tabler/icons-react";
-//#region ../ui/src/components/edyn/date-picker/date-text.ts
-/**
-* Reading and writing a calendar day as the text a person types.
-*
-* A day is the string `yyyy-mm-dd` everywhere here, never a Date: a Date is an instant, and the instant for "5 March" is a
-* different calendar day in another time zone (local midnight serialised as UTC lands on the 4th east of Greenwich). The
-* string is also what `<input type="date">`, JSON and a .NET `DateOnly` use. Strings of that shape sort and compare as
-* days, so min, max and disabled days are compared as plain strings with no Date involved.
-*/
-var SHAPE = {
-	day: "2-digit",
-	month: "2-digit",
-	year: "numeric"
-};
-/** The order a locale writes day, month and year in: en-GB is day, month, year; en-US month, day, year; sv year first. */
-var datePartsOf = (locale) => new Intl.DateTimeFormat(locale, SHAPE).formatToParts(new Date(2e3, 0, 2, 12)).flatMap((part) => part.type === "day" || part.type === "month" || part.type === "year" ? [part.type] : []);
-/** What to type, written the locale's way: `DD/MM/YYYY` for en-GB. */
-var datePatternOf = (locale) => new Intl.DateTimeFormat(locale, SHAPE).formatToParts(new Date(2e3, 0, 2, 12)).map((part) => {
-	if (part.type === "day") return "DD";
-	if (part.type === "month") return "MM";
-	return part.type === "year" ? "YYYY" : part.value;
-}).join("").trim();
-/** A day written the locale's way: `05/03/2026` for en-GB. */
-var formatDay = (day, locale) => {
-	const date = dayToDate(day);
-	return date === void 0 ? "" : new Intl.DateTimeFormat(locale, SHAPE).format(date);
-};
-var isRealDay = (year, month, dayOfMonth) => {
-	if (year < 1e3 || month < 1 || month > 12 || dayOfMonth < 1) return false;
-	const date = new Date(year, month - 1, dayOfMonth, 12);
-	return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === dayOfMonth;
-};
-var toDay = (year, month, dayOfMonth) => dateToDay(new Date(year, month - 1, dayOfMonth, 12)) ?? "";
-/**
-* Reads typed text as a day. The locale's order decides which number is the day; a first number of four digits is always
-* a year (so `2026-03-05` is read the same everywhere); the separator can be anything that is not a digit, and eight
-* digits with none (`05032026`) are split by the order. A year must have four digits: `5/3/26` is refused, not guessed.
-*/
-var parseDateText = (text, locale) => {
-	const trimmed = text.trim();
-	if (trimmed === "") return { kind: "empty" };
-	if (!/^[\d\s./\-,]+$/.test(trimmed)) return {
-		kind: "problem",
-		problem: "format"
-	};
-	const order = datePartsOf(locale);
-	let numbers = trimmed.match(/\d+/g) ?? [];
-	let parts = order;
-	if (numbers.length === 1 && numbers[0]?.length === 8) {
-		const digits = numbers[0];
-		numbers = order[0] === "year" ? [
-			digits.slice(0, 4),
-			digits.slice(4, 6),
-			digits.slice(6)
-		] : [
-			digits.slice(0, 2),
-			digits.slice(2, 4),
-			digits.slice(4)
-		];
-	}
-	if (numbers.length !== 3) return {
-		kind: "problem",
-		problem: "format"
-	};
-	if (numbers[0]?.length === 4) parts = [
-		"year",
-		"month",
-		"day"
-	];
-	const read = {
-		day: "",
-		month: "",
-		year: ""
-	};
-	parts.forEach((part, index) => {
-		read[part] = numbers[index] ?? "";
-	});
-	if (read.year.length !== 4 || read.day.length > 2 || read.month.length > 2) return {
-		kind: "problem",
-		problem: "format"
-	};
-	const [year, month, dayOfMonth] = [
-		Number(read.year),
-		Number(read.month),
-		Number(read.day)
-	];
-	return isRealDay(year, month, dayOfMonth) ? {
-		kind: "day",
-		day: toDay(year, month, dayOfMonth)
-	} : {
-		kind: "problem",
-		problem: "notReal"
-	};
-};
-/** Whether a day is allowed, and if not, which limit it breaks. */
-var dayProblem = (day, { min, max, disabledDates }) => {
-	if (min !== void 0 && day < min) return "beforeMin";
-	if (max !== void 0 && day > max) return "afterMax";
-	return (typeof disabledDates === "function" ? disabledDates(day) : disabledDates?.includes(day) ?? false) ? "unavailable" : void 0;
-};
-//#endregion
-//#region ../ui/src/components/edyn/date-picker/date-picker.tsx
-var DEFAULT_DATE_PICKER_LABELS = {
-	choose: "Choose date",
-	format: (pattern) => `Enter a date as ${pattern}.`,
-	notReal: "That date does not exist.",
-	beforeMin: (min) => `Choose ${min} or later.`,
-	afterMax: (max) => `Choose ${max} or earlier.`,
-	unavailable: "That date is not available."
-};
-var problemText = (problem, labels, locale, limits, pattern) => {
-	switch (problem) {
-		case "format": return labels.format(pattern);
-		case "notReal": return labels.notReal;
-		case "beforeMin": return labels.beforeMin(limits.min === void 0 ? "" : formatDay(limits.min, locale));
-		case "afterMax": return labels.afterMax(limits.max === void 0 ? "" : formatDay(limits.max, locale));
-		default: return labels.unavailable;
-	}
-};
-/**
-* One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it
-* when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.
-*/
-var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled = false, locale = "en-GB", calendarLocale, placeholder, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className }) => {
-	const labels = useMemo(() => ({
-		...DEFAULT_DATE_PICKER_LABELS,
-		...labelOverrides
-	}), [labelOverrides]);
-	const pattern = useMemo(() => datePatternOf(locale), [locale]);
-	const current = value === "" ? void 0 : value;
-	const errorId = useId();
-	const refField = useRef(null);
-	const refInput = useRef(null);
-	const refPointer = useRef(false);
-	const refKnown = useRef(current);
-	const refRefused = useRef(null);
-	const [text, setText] = useState(current === void 0 ? "" : formatDay(current, locale));
-	const [problem, setProblem] = useState(null);
-	const [open, setOpen] = useState(false);
-	useEffect(() => {
-		if (current !== refKnown.current) {
-			refKnown.current = current;
-			refRefused.current = null;
-			setText(current === void 0 ? "" : formatDay(current, locale));
-			setProblem(null);
-		}
-	}, [current, locale]);
-	const report = (day, state) => {
-		refKnown.current = day;
-		refRefused.current = state.kind === "refused" ? `${state.text}\u0000${state.problem}` : null;
-		onValueChange(day, state);
-	};
-	/**
-	* Reads the text: a day is reported and written back in full, anything else is said inline and reported as no day,
-	* with the state saying whether the field is empty or holds text it refused.
-	*/
-	const commit = (typed) => {
-		const parsed = parseDateText(typed, locale);
-		if (parsed.kind === "empty") {
-			setProblem(null);
-			if (current !== void 0 || refRefused.current !== null) report(void 0, { kind: "empty" });
-			return;
-		}
-		const found = parsed.kind === "problem" ? parsed.problem : dayProblem(parsed.day, {
-			min,
-			max,
-			disabledDates
-		});
-		if (found !== void 0) {
-			setProblem(found);
-			const message = problemText(found, labels, locale, {
-				min,
-				max
-			}, pattern);
-			if (current !== void 0 || refRefused.current !== `${typed}\u0000${message}`) report(void 0, {
-				kind: "refused",
-				text: typed,
-				problem: message
-			});
-			return;
-		}
-		if (parsed.kind === "day") {
-			setProblem(null);
-			setText(formatDay(parsed.day, locale));
-			if (parsed.day !== current || refRefused.current !== null) report(parsed.day, { kind: "day" });
-		}
-	};
-	const pick = (date) => {
-		const day = dateToDay(date);
-		if (day === void 0) return;
-		setProblem(null);
-		setText(formatDay(day, locale));
-		if (day !== current || refRefused.current !== null) report(day, { kind: "day" });
-		setOpen(false);
-	};
-	/**
-	* Text is read as the person leaves the field. A day (or nothing) is taken at once; a message about text that is not a
-	* day is shown too, unless they are only on the way to the calendar: a press of the mouse on the button, or focus
-	* going into the calendar that Alt+ArrowDown opened, with the text half typed. Leaving the picker for anywhere else
-	* reads whatever is typed.
-	*/
-	const handleBlur = (event) => {
-		const next = event.relatedTarget;
-		const intoCalendar = next?.closest("[data-slot=\"popover-content\"]") != null;
-		const intoButton = next?.closest("[data-slot=\"date-picker-trigger\"]") != null;
-		const typed = refInput.current?.value ?? "";
-		if (!(intoCalendar || intoButton || next !== null && refField.current?.contains(next) === true)) {
-			commit(typed);
-			return;
-		}
-		if (event.target !== refInput.current) return;
-		const onTheWay = intoCalendar || intoButton && refPointer.current;
-		const parsed = parseDateText(typed, locale);
-		if (parsed.kind === "empty" || parsed.kind === "day" && dayProblem(parsed.day, {
-			min,
-			max,
-			disabledDates
-		}) === void 0 || !onTheWay) commit(typed);
-	};
-	const handleKeyDown = (event) => {
-		if (event.key === "ArrowDown" && event.altKey && !disabled) {
-			event.preventDefault();
-			setOpen(true);
-			return;
-		}
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			setOpen(false);
-			return;
-		}
-		if (event.key === "Enter") {
-			const parsed = parseDateText(event.currentTarget.value, locale);
-			if (parsed.kind !== "empty" && (parsed.kind === "problem" || dayProblem(parsed.day, {
-				min,
-				max,
-				disabledDates
-			}) !== void 0)) event.preventDefault();
-			commit(event.currentTarget.value);
-		}
-	};
-	const selected = dayToDate(current);
-	const limits = {
-		min,
-		max
-	};
-	const invalid = problem !== null || ariaInvalid === true || ariaInvalid === "true";
-	const describedBy = [ariaDescribedBy, problem === null ? void 0 : errorId].filter(Boolean).join(" ") || void 0;
-	const isOff = (date) => {
-		const day = dateToDay(date);
-		return day !== void 0 && dayProblem(day, {
-			min,
-			max,
-			disabledDates
-		}) !== void 0;
-	};
-	const today = /* @__PURE__ */ new Date();
-	const start = dayToDate(min);
-	const end = dayToDate(max);
-	const month = selected ?? (start !== void 0 && today < start ? start : end !== void 0 && today > end ? end : today);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "date-picker",
-		className: cn("flex flex-col gap-1.5", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			ref: refField,
-			className: "relative",
-			onPointerDownCapture: () => {
-				refPointer.current = true;
-			},
-			onPointerUpCapture: () => {
-				refPointer.current = false;
-			},
-			children: [/* @__PURE__ */ jsx(Input, {
-				ref: refInput,
-				id,
-				type: "text",
-				inputMode: "numeric",
-				autoComplete: "off",
-				"data-slot": "date-picker-input",
-				value: text,
-				placeholder: placeholder ?? pattern,
-				disabled,
-				"aria-label": ariaLabel,
-				"aria-invalid": invalid ? true : void 0,
-				"aria-describedby": describedBy,
-				className: "pr-9",
-				onChange: (event) => {
-					setText(event.target.value);
-					setProblem(null);
-				},
-				onBlur: handleBlur,
-				onKeyDown: handleKeyDown
-			}), /* @__PURE__ */ jsxs(Popover, {
-				open,
-				onOpenChange: setOpen,
-				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-					render: /* @__PURE__ */ jsx(Button, {
-						variant: "ghost",
-						size: "icon-sm",
-						"data-slot": "date-picker-trigger",
-						"aria-label": labels.choose,
-						disabled,
-						className: "absolute top-0.5 right-0.5",
-						onBlur: handleBlur
-					}),
-					children: /* @__PURE__ */ jsx(IconCalendar, { "aria-hidden": "true" })
-				}), /* @__PURE__ */ jsx(PopoverContent, {
-					anchor: refField,
-					align: "start",
-					className: "w-auto p-0",
-					finalFocus: refInput,
-					onBlur: handleBlur,
-					children: /* @__PURE__ */ jsx(Calendar, {
-						mode: "single",
-						required: true,
-						autoFocus: true,
-						locale: calendarLocale,
-						weekStartsOn: firstWeekdayOf(locale),
-						defaultMonth: month,
-						startMonth: start,
-						endMonth: end,
-						selected,
-						disabled: isOff,
-						onSelect: pick
-					})
-				})]
-			})]
-		}), problem !== null && /* @__PURE__ */ jsx("p", {
-			id: errorId,
-			"data-slot": "date-picker-error",
-			role: "alert",
-			className: "text-sm text-destructive",
-			children: problemText(problem, labels, locale, limits, pattern)
-		})]
-	});
-};
-//#endregion
+import { DEFAULT_DATE_PICKER_LABELS, DatePicker } from "./ui/src/components/edyn/date-picker/date-picker.js";
 export { DEFAULT_DATE_PICKER_LABELS, DatePicker };
-
-//# sourceMappingURL=date-picker.js.map