@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/date-picker/date-picker.presentation.js

@@ -0,0 +1,549 @@
+import { dayAsString, daysInMonth, parseDay, valueAsAllStrings } from "./date-picker.state.js";
+import { datePicker as datePicker$1 } from "./date-picker.machine.js";
+import { ariaCurrent, ariaInvalid, ariaLabelledBy, dataAttr, defineComponent, disclosureTrigger, isRecord, optionRow } from "@spinjs/runtime";
+// src/date-picker/date-picker.presentation.ts
+const DAY_MS = 864e5;
+const iso = (value) => dayAsString(value);
+const sameDay = (a, b) => iso(a) === iso(b);
+const dayTime = (value) => Date.UTC(value.year, value.month - 1, value.day);
+const boundTime = (bound) => {
+	if (bound === null || bound.length === 0) return null;
+	const time = Date.parse(`${bound}T00:00:00Z`);
+	return Number.isNaN(time) ? null : time;
+};
+const today = () => {
+	const at = /* @__PURE__ */ new Date();
+	return {
+		year: at.getUTCFullYear(),
+		month: at.getUTCMonth() + 1,
+		day: at.getUTCDate()
+	};
+};
+const monthName = (month, locale) => new Intl.DateTimeFormat(locale, {
+	month: "long",
+	timeZone: "UTC"
+}).format(Date.UTC(2024, month - 1, 1));
+const shift = (from, days, min, max) => {
+	const moved = new Date(dayTime(from) + days * DAY_MS);
+	const value = {
+		year: moved.getUTCFullYear(),
+		month: moved.getUTCMonth() + 1,
+		day: Math.min(moved.getUTCDate(), daysInMonth(moved.getUTCFullYear(), moved.getUTCMonth() + 1))
+	};
+	const floor = boundTime(min);
+	const ceiling = boundTime(max);
+	const time = dayTime(value);
+	if (floor !== null && time < floor) return parseDay(min ?? "") ?? value;
+	if (ceiling !== null && time > ceiling) return parseDay(max ?? "") ?? value;
+	return value;
+};
+const cellView = (context, value, outside) => {
+	const ctx = context;
+	const disabled = ctx.disabled === true;
+	const readOnly = ctx.readOnly === true;
+	const time = dayTime(value);
+	const floor = boundTime(ctx.min);
+	const ceiling = boundTime(ctx.max);
+	const startDay = ctx.value.length >= 1 ? ctx.value[0] : ctx.startValue;
+	const first = startDay == null ? NaN : dayTime(startDay);
+	const last = ctx.value.length >= 2 ? dayTime(ctx.value[1] ?? ctx.value[0] ?? startDay ?? value) : first;
+	const hover = ctx.hoveredValue === null ? NaN : dayTime(ctx.hoveredValue);
+	const lo = Math.min(first, last, Number.isNaN(hover) ? Number.POSITIVE_INFINITY : hover);
+	const hi = Math.max(first, last, Number.isNaN(hover) ? Number.NEGATIVE_INFINITY : hover);
+	const inRange = ctx.selectionMode === "range" && !Number.isNaN(first) && time >= lo && time <= hi;
+	return {
+		key: iso(value),
+		value,
+		outside,
+		isToday: sameDay(value, today()),
+		selected: ctx.value.some((day) => sameDay(day, value)),
+		inRange,
+		rangeEdge: ctx.selectionMode === "range" && ctx.value.length === 2 ? sameDay(value, ctx.value[0] ?? value) ? "start" : sameDay(value, ctx.value[1] ?? value) ? "end" : null : null,
+		disabled: floor !== null && time < floor || ceiling !== null && time > ceiling || disabled || readOnly
+	};
+};
+const isFormat = (value) => typeof value === "function";
+const isDateValue = (raw) => {
+	if (!isRecord(raw)) return false;
+	return [
+		"year",
+		"month",
+		"day"
+	].every((key) => typeof raw[key] === "number" && Number.isFinite(raw[key]));
+};
+const weekOf = (context) => {
+	const raw = context.startOfWeek;
+	return typeof raw === "number" && raw >= 0 && raw <= 6 ? Math.trunc(raw) : 0;
+};
+const dayCells = (context) => {
+	const ctx = context;
+	const startOfWeek = weekOf(ctx);
+	const start = {
+		year: ctx.focusedValue.year,
+		month: ctx.focusedValue.month,
+		day: 1
+	};
+	const lead = (new Date(dayTime(start)).getUTCDay() - startOfWeek + 7) % 7;
+	const length = daysInMonth(start.year, start.month);
+	const cells = [];
+	let walking = /* @__PURE__ */ new Date(dayTime(start) - lead * DAY_MS);
+	while (cells.length < lead + length) {
+		const value = {
+			year: walking.getUTCFullYear(),
+			month: walking.getUTCMonth() + 1,
+			day: walking.getUTCDate()
+		};
+		cells.push(cellView(context, value, value.month !== start.month));
+		walking = new Date(walking.getTime() + DAY_MS);
+	}
+	while (cells.length % 7 !== 0) {
+		const value = {
+			year: walking.getUTCFullYear(),
+			month: walking.getUTCMonth() + 1,
+			day: walking.getUTCDate()
+		};
+		cells.push(cellView(context, value, value.month !== start.month));
+		walking = new Date(walking.getTime() + DAY_MS);
+	}
+	return cells;
+};
+const cellsOf = (context) => {
+	const ctx = context;
+	if (ctx.view === "month") return Array.from({ length: 12 }, (_unused, month) => cellView(context, {
+		year: ctx.focusedValue.year,
+		month: month + 1,
+		day: 1
+	}, false));
+	if (ctx.view === "year") {
+		const from = ctx.focusedValue.year - (ctx.focusedValue.year % 12 + 12) % 12;
+		return Array.from({ length: 12 }, (_unused, offset) => cellView(context, {
+			year: from + offset,
+			month: 1,
+			day: 1
+		}, false));
+	}
+	return dayCells(context);
+};
+/** A page is a month in the day view, a year in the month view, a decade in the year view. */
+const pageOf = (scope, from, direction) => {
+	const ctx = scope.context;
+	if (ctx.view === "month") return shift(from, direction * 365, ctx.min, ctx.max);
+	if (ctx.view === "year") return shift(from, direction * 3652, ctx.min, ctx.max);
+	return shift(from, direction * 28, ctx.min, ctx.max);
+};
+const cellHandlersByBridge = /* @__PURE__ */ new WeakMap();
+const handlersFor = (scope, cell) => {
+	let byKey = cellHandlersByBridge.get(scope.id);
+	if (byKey === void 0) {
+		byKey = /* @__PURE__ */ new Map();
+		cellHandlersByBridge.set(scope.id, byKey);
+	}
+	const key = iso(cell.value);
+	const hit = byKey.get(key);
+	if (hit !== void 0) return hit;
+	const made = {
+		onClick: () => {
+			if (cell.disabled) return;
+			if (scope.context.view !== "day") scope.send({
+				type: "TABLE.ENTER",
+				value: cell.value
+			});
+			else scope.send({
+				type: "CELL.CLICK",
+				value: cell.value
+			});
+		},
+		onPointerMove: () => {
+			if (scope.context.selectionMode !== "range") return;
+			scope.send({
+				type: "CELL.POINTER_MOVE",
+				value: cell.value
+			});
+		},
+		onKeyDown: (event) => {
+			if (event.defaultPrevented || event.isComposing === true || event.keyCode === 229) return;
+			if (event.ctrlKey || event.altKey || event.metaKey) return;
+			const at = scope.context;
+			const focused = at.focusedValue;
+			const rtl = at.dir === "rtl";
+			switch (event.key) {
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					scope.send({
+						type: "TABLE.ENTER",
+						value: focused
+					});
+					break;
+				case "ArrowRight":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: shift(focused, rtl ? -1 : 1, at.min, at.max)
+					});
+					break;
+				case "ArrowLeft":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: shift(focused, rtl ? 1 : -1, at.min, at.max)
+					});
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: shift(focused, -7, at.min, at.max)
+					});
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: shift(focused, 7, at.min, at.max)
+					});
+					break;
+				case "PageUp":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: pageOf(scope, focused, -1)
+					});
+					break;
+				case "PageDown":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: pageOf(scope, focused, 1)
+					});
+					break;
+				case "Home":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: {
+							year: focused.year,
+							month: focused.month,
+							day: 1
+						}
+					});
+					break;
+				case "End":
+					event.preventDefault();
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: {
+							year: focused.year,
+							month: focused.month,
+							day: daysInMonth(focused.year, focused.month)
+						}
+					});
+					break;
+				case "Escape":
+					event.preventDefault();
+					scope.send({ type: "TABLE.ESCAPE" });
+			}
+		}
+	};
+	byKey.set(key, made);
+	return made;
+};
+/**
+* Stable row holders for the text rows: a compiled `{row.text}` effect
+* reads off the render-time object, so fresh objects per read freeze the
+* text at its first value. Rewritten in place; the array is fresh each
+* read so the `for` syncs.
+*/
+const textRowsByBridge = /* @__PURE__ */ new WeakMap();
+const rowFor = (id, key, text) => {
+	let rows = textRowsByBridge.get(id);
+	if (rows === void 0) {
+		rows = /* @__PURE__ */ new Map();
+		textRowsByBridge.set(id, rows);
+	}
+	const hit = rows.get(key) ?? {
+		value: key,
+		text: ""
+	};
+	hit.text = text;
+	rows.set(key, hit);
+	return hit;
+};
+const datePicker = defineComponent({
+	name: "date-picker",
+	machine: (args, authored) => datePicker$1(args, authored),
+	establish: (raw, authored) => {
+		if (!authored("open") || raw["open"] !== true) return [];
+		return [{ type: "OPEN" }];
+	},
+	settled: ({ before, after, root }) => {
+		const was = dayAsString(before.context.focusedValue);
+		const at = dayAsString(after.context.focusedValue);
+		if (at === was) return;
+		const host = root();
+		if (typeof host.querySelector !== "function") return;
+		const cell = host.querySelector(`[data-value="${at}"]`);
+		if (cell instanceof HTMLElement) cell.focus({ preventScroll: true });
+	},
+	parts: {
+		trigger: { attrs: (scope) => {
+			const ctx = scope.context;
+			const open = scope.state === "open";
+			return {
+				id: scope.id("trigger"),
+				"aria-label": ctx.label,
+				...disclosureTrigger(scope, {
+					expanded: open,
+					hasPopup: "dialog"
+				}),
+				"data-state": open ? "open" : "closed",
+				...ariaInvalid(ctx.invalid === true ? true : void 0),
+				onClick: () => scope.send({ type: open ? "CLOSE" : "OPEN" })
+			};
+		} },
+		content: { attrs: (scope) => {
+			const open = scope.state === "open";
+			const focused = iso(scope.context.focusedValue);
+			return {
+				id: scope.id("content"),
+				role: "dialog",
+				"use:date-picker-focus": {
+					open,
+					cellId: `${scope.id("grid")}:cell:${focused}`
+				},
+				"aria-label": scope.context.label,
+				"data-state": open ? "open" : "closed",
+				"use:dismissable": {
+					onOutside: (event) => {
+						const target = event.target;
+						if (target instanceof Element && target.closest(`[id="${scope.id("trigger")}"]`) !== null) return;
+						scope.send({ type: "CLOSE.OUTSIDE" });
+					},
+					onEscape: () => scope.send({ type: "TABLE.ESCAPE" })
+				}
+			};
+		} },
+		grid: { attrs: (scope) => {
+			const ctx = scope.context;
+			return {
+				id: scope.id("grid"),
+				role: "grid",
+				tabIndex: 0,
+				...ariaLabelledBy(scope, { part: "label" }),
+				"data-view": ctx.view,
+				class: ctx.view === "day" ? "grid grid-cols-7 gap-1" : ctx.view === "month" ? "grid grid-cols-3 gap-1" : "grid grid-cols-4 gap-1",
+				onPointerLeave: () => scope.send({ type: "TABLE.POINTER_LEAVE" })
+			};
+		} },
+		label: { attrs: (scope) => ({ id: scope.id("label") }) },
+		prevTrigger: {
+			id: "prev",
+			attrs: (scope) => ({
+				id: scope.id("prevTrigger"),
+				"aria-label": "Previous",
+				onClick: () => {
+					const ctx = scope.context;
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: pageOf(scope, ctx.focusedValue, -1)
+					});
+				}
+			})
+		},
+		nextTrigger: {
+			id: "next",
+			attrs: (scope) => ({
+				id: scope.id("nextTrigger"),
+				"aria-label": "Next",
+				onClick: () => {
+					const ctx = scope.context;
+					scope.send({
+						type: "FOCUS.SET",
+						focusedValue: pageOf(scope, ctx.focusedValue, 1)
+					});
+				}
+			})
+		},
+		viewControl: {
+			id: "view",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				return {
+					id: scope.id("viewControl"),
+					"data-view": ctx.view,
+					onClick: () => {
+						if (ctx.view === "day") scope.send({
+							type: "VIEW.SET",
+							view: "month"
+						});
+						else if (ctx.view === "month") scope.send({
+							type: "VIEW.SET",
+							view: "year"
+						});
+						else scope.send({
+							type: "VIEW.SET",
+							view: "day"
+						});
+					}
+				};
+			}
+		},
+		clearTrigger: {
+			id: "clear",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				return {
+					id: scope.id("clearTrigger"),
+					"aria-label": "Clear",
+					hidden: ctx.value.length === 0,
+					onClick: () => scope.send({ type: "VALUE.CLEAR" })
+				};
+			}
+		}
+	},
+	slots: { cell: {
+		indexes: (context) => cellsOf(context),
+		attrs: (scope) => {
+			const slot = scope.slot;
+			const ctx = scope.context;
+			const cell = cellsOf(ctx).find((live) => live.key === slot.key) ?? slot;
+			const locale = ctx.locale;
+			const day = iso(cell.value);
+			const focused = day === iso(ctx.focusedValue);
+			const text = ctx.view === "month" ? monthName(cell.value.month, locale) : ctx.view === "year" ? `${cell.value.year}` : `${cell.value.day}`;
+			return {
+				id: `${scope.id("grid")}:cell:${day}`,
+				role: "gridcell",
+				...optionRow({
+					selected: cell.selected,
+					disabled: cell.disabled ? true : void 0
+				}),
+				...ariaCurrent(cell.isToday && ctx.view === "day" ? "date" : void 0),
+				"data-value": day,
+				"data-selected": dataAttr(cell.selected),
+				"data-in-range": dataAttr(cell.inRange),
+				"data-outside": dataAttr(cell.outside),
+				"data-view": ctx.view,
+				tabIndex: focused ? 0 : -1,
+				text,
+				...handlersFor(scope, cell)
+			};
+		}
+	} },
+	commands: {
+		open: { event: () => ({ type: "OPEN" }) },
+		close: { event: () => ({ type: "CLOSE" }) },
+		clear: { event: () => ({ type: "VALUE.CLEAR" }) },
+		setValue: { event: ([raw]) => {
+			if (raw === null) return {
+				type: "VALUE.SET",
+				value: []
+			};
+			return {
+				type: "VALUE.SET",
+				value: [...raw.filter(isDateValue)]
+			};
+		} }
+	},
+	readers: {
+		isOpen: { read: (_context, state) => state === "open" },
+		value: { read: (context) => [...context.value] },
+		valueAsString: { read: (context) => valueAsAllStrings(context.value) },
+		focusedValue: { read: (context) => ({ ...context.focusedValue }) },
+		view: { read: (context) => context.view }
+	},
+	methods: {
+		getWeekdayLabels: { call: (context) => {
+			const ctx = context;
+			const locale = ctx.locale;
+			const startOfWeek = weekOf(ctx);
+			const labels = [];
+			if (ctx.view !== "day") return labels;
+			for (let at = 0; at < 7; at++) {
+				const weekday = (startOfWeek + at) % 7;
+				labels.push(new Intl.DateTimeFormat(locale, {
+					weekday: "narrow",
+					timeZone: "UTC"
+				}).format(Date.UTC(2024, 0, 7 + weekday)));
+			}
+			return labels;
+		} },
+		getValueTextRows: { call: (context, _state, _args, _props, id) => {
+			const ctx = context;
+			const locale = ctx.locale;
+			const placeholder = ctx.placeholder;
+			const format = ctx.format;
+			const formatDay = isFormat(format) ? format : (value, at) => {
+				const date = new Date(Date.UTC(value.year, value.month - 1, value.day));
+				return new Intl.DateTimeFormat(at, {
+					year: "numeric",
+					month: "short",
+					day: "numeric",
+					timeZone: "UTC"
+				}).format(date);
+			};
+			if (ctx.value.length === 0) return [{
+				...rowFor(id, `empty:${placeholder}`, placeholder),
+				first: true
+			}];
+			return ctx.value.map((day, at) => ({
+				...rowFor(id, iso(day), formatDay(day, locale)),
+				first: at === 0
+			}));
+		} },
+		getViewTextRows: { call: (context, _state, _args, _props, id) => {
+			const ctx = context;
+			const locale = ctx.locale;
+			const text = ctx.view === "day" ? new Intl.DateTimeFormat(locale, {
+				month: "long",
+				year: "numeric",
+				timeZone: "UTC"
+			}).format(Date.UTC(ctx.focusedValue.year, ctx.focusedValue.month - 1, 1)) : ctx.view === "month" ? `${ctx.focusedValue.year}` : `${ctx.focusedValue.year - (ctx.focusedValue.year % 12 + 12) % 12}`;
+			return [rowFor(id, `view:${ctx.view}:${iso(ctx.focusedValue)}`, text)];
+		} },
+		getCells: { call: (context) => cellsOf(context) },
+		getCellState: { call: (context, _state, [key]) => {
+			const hit = cellsOf(context).find((cell) => cell.key === key);
+			return {
+				selected: hit?.selected ?? false,
+				inRange: hit?.inRange ?? false,
+				disabled: hit?.disabled ?? false,
+				outside: hit?.outside ?? false
+			};
+		} }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [context.value.map(dayAsString).join(",")],
+			detail: (_watched, _event, _props, context) => ({
+				value: [...context.value],
+				valueAsString: valueAsAllStrings(context.value)
+			})
+		},
+		"focus-change": {
+			prop: "onFocusChange",
+			watch: (context) => [dayAsString(context.focusedValue), context.view],
+			detail: (_watched, _event, _props, context) => ({
+				focusedValue: { ...context.focusedValue },
+				view: context.view
+			})
+		},
+		"view-change": {
+			prop: "onViewChange",
+			watch: (context) => [context.view],
+			detail: (watched) => {
+				const view = watched[0];
+				return { view: view === "month" || view === "year" ? view : "day" };
+			}
+		},
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (_context, state) => [state === "open"],
+			detail: (watched) => ({ open: watched[0] === true })
+		}
+	}
+});
+export { datePicker };
+
+//# sourceMappingURL=date-picker.presentation.js.map

package/dist/date-picker/date-picker.state.d.ts

@@ -0,0 +1,66 @@
+export type DatePickerState = "idle" | "focused" | "open";
+export type DatePickerView = "day" | "month" | "year";
+export type DatePickerSelectionMode = "single" | "multiple" | "range";
+export interface DatePickerValue {
+  readonly year: number;
+  readonly month: number;
+  readonly day: number;
+}
+export interface DatePickerContext {
+  value: DatePickerValue[];
+  focusedValue: DatePickerValue;
+  hoveredValue: DatePickerValue | null;
+  activeIndex: number;
+  view: DatePickerView;
+  selectionMode: DatePickerSelectionMode;
+  numOfMonths: number;
+  startValue: DatePickerValue | null;
+  min: string | null;
+  max: string | null;
+  closeOnSelect: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  startOfWeek: number;
+  dir: "ltr" | "rtl";
+  label: string;
+  locale: string;
+  placeholder: string;
+  format: ((value: DatePickerValue, locale: string) => string) | undefined;
+}
+export interface DatePickerArgs {
+  value?: string;
+  focusedValue?: string;
+  view?: string;
+  selectionMode?: string;
+  numOfMonths?: number;
+  min?: string;
+  max?: string;
+  closeOnSelect?: boolean;
+  defaultCloseOnSelect?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  startOfWeek?: number;
+  dir?: string;
+  label?: string;
+  locale?: string;
+  placeholder?: string;
+  format?: ((value: DatePickerValue, locale: string) => string) | undefined;
+}
+export declare function isLeapYear(year: number): boolean;
+export declare function daysInMonth(year: number, month: number): number;
+export declare function sortKey(value: DatePickerValue): number;
+export declare function parseDay(raw: unknown): DatePickerValue | null;
+export declare function dayRecord(raw: unknown): DatePickerValue | null;
+export declare function parseDays(raw: unknown): DatePickerValue[];
+export declare function daysOf(raw: unknown): DatePickerValue[];
+export declare function viewOf(raw: unknown): DatePickerView;
+export declare function initial(args: DatePickerArgs | undefined, authored: (name: string) => boolean): DatePickerContext;
+export declare function dayAsString(value: DatePickerValue): string;
+export declare function valueAsAllStrings(value: readonly DatePickerValue[]): string[];
+export declare const sameDay: (a: DatePickerValue, b: DatePickerValue) => boolean;
+export declare function clampDay(value: DatePickerValue, min: string | null, max: string | null): DatePickerValue;
+export declare const inBounds: (value: DatePickerValue, min: string | null, max: string | null) => boolean;
+export declare function normalizeDays(days: readonly DatePickerValue[], min: string | null, max: string | null): DatePickerValue[];
+//# sourceMappingURL=date-picker.state.d.ts.map