@nepdatejs/react 0.0.0-stage → 0.1.1

package/dist/headless-AEI6dxTJ.cjs

@@ -0,0 +1,619 @@
+let react = require("react");
+let _nepdatejs_core = require("@nepdatejs/core");
+let _nepdatejs_calendar = require("@nepdatejs/calendar");
+let _nepdatejs_datepicker = require("@nepdatejs/datepicker");
+//#region src/bindings.ts
+const FOCUS_KEYS = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+]);
+function useCalendarBindings(state, actions, locale, options) {
+	const { getSnapshot, onDayActivate } = options;
+	const grid = (0, react.useRef)(null);
+	const root = (0, react.useRef)(null);
+	const focusRequested = (0, react.useRef)(false);
+	const labels = (0, _nepdatejs_core.getLocale)(locale).labels;
+	const focusGrid = (0, react.useCallback)(() => {
+		(grid.current?.closest(".ndp-calendar") ?? grid.current ?? root.current)?.querySelector(".ndp-day[tabindex=\"0\"], .ndp-option[tabindex=\"0\"]")?.focus();
+	}, []);
+	(0, react.useEffect)(() => {
+		if (focusRequested.current) {
+			focusRequested.current = false;
+			focusGrid();
+		}
+	});
+	const requestFocus = () => {
+		focusRequested.current = true;
+	};
+	const activate = onDayActivate ?? ((date) => actions.select(date));
+	const [monthName, yearText] = splitTitle(state.title);
+	const focusIndex = (tiles) => {
+		const selected = tiles.findIndex((tile) => tile.isSelected);
+		const current = tiles.findIndex((tile) => tile.isCurrent);
+		return Math.max(0, selected === -1 ? current : selected);
+	};
+	return {
+		state,
+		actions,
+		focusGrid,
+		getGridProps: () => ({
+			role: "grid",
+			"aria-label": state.title,
+			ref: (node) => {
+				grid.current = node;
+			},
+			onKeyDown: (event) => {
+				if (!FOCUS_KEYS.has(event.key)) return;
+				event.preventDefault();
+				requestFocus();
+				actions.moveFocus(event.key, { shift: event.shiftKey });
+				if (getSnapshot() === state) {
+					focusRequested.current = false;
+					focusGrid();
+				}
+			},
+			onMouseLeave: () => {
+				if (state.selectionMode === "range") actions.hover(null);
+			}
+		}),
+		getDayProps: (cell) => ({
+			type: "button",
+			tabIndex: cell.isFocusTarget ? 0 : -1,
+			disabled: cell.isDisabled,
+			"aria-pressed": cell.isSelected,
+			...cell.isToday ? { "aria-current": "date" } : {},
+			"data-state": cell.state,
+			"data-weekend": cell.isWeekend || void 0,
+			"data-preview": cell.isInRangePreview && !cell.isSelected || void 0,
+			"data-outside": cell.isOutside || void 0,
+			onClick: () => {
+				if (!cell.isDisabled) activate(cell.date);
+			},
+			onFocus: () => {
+				if (!cell.isFocusTarget) actions.focus(cell.date);
+			},
+			onMouseEnter: () => {
+				if (state.selectionMode === "range") actions.hover(cell.isDisabled ? null : cell.date);
+			}
+		}),
+		getPrevProps: () => ({
+			type: "button",
+			disabled: !state.canPrev,
+			"aria-label": state.view === "day" ? labels.previousMonth : labels.previousYear,
+			onClick: () => {
+				actions.prev();
+			}
+		}),
+		getNextProps: () => ({
+			type: "button",
+			disabled: !state.canNext,
+			"aria-label": state.view === "day" ? labels.nextMonth : labels.nextYear,
+			onClick: () => {
+				actions.next();
+			}
+		}),
+		getTitleButtons: () => state.view === "day" ? [{
+			key: "month",
+			label: monthName,
+			props: {
+				type: "button",
+				"aria-label": `${labels.month}: ${monthName}`,
+				onClick: () => {
+					requestFocus();
+					actions.setView("month");
+				}
+			}
+		}, {
+			key: "year",
+			label: yearText,
+			props: {
+				type: "button",
+				"aria-label": `${labels.year}: ${yearText}`,
+				onClick: () => {
+					requestFocus();
+					actions.setView("year");
+				}
+			}
+		}] : [{
+			key: "up",
+			label: state.title,
+			props: {
+				type: "button",
+				"aria-label": state.view === "fiscal" ? state.title : `${labels.year}: ${state.title}`,
+				onClick: () => {
+					requestFocus();
+					actions.setView(state.view === "month" ? "year" : "day");
+				}
+			}
+		}],
+		getOptionProps: (tile, index, tiles) => ({
+			type: "button",
+			tabIndex: index === focusIndex(tiles) ? 0 : -1,
+			disabled: tile.isDisabled,
+			"aria-pressed": tile.isSelected,
+			"data-state": tile.isSelected ? "selected" : tile.isCurrent ? "current" : "default",
+			onClick: () => {
+				requestFocus();
+				if (state.view === "month") actions.chooseMonth(tile.value);
+				else if (state.view === "year") actions.chooseYear(tile.value);
+				else actions.chooseFiscalYear(tile.value);
+			}
+		})
+	};
+}
+/** "Kartik 2083" → ["Kartik", "2083"]. */
+function splitTitle(title) {
+	const space = title.lastIndexOf(" ");
+	return space === -1 ? [title, ""] : [title.slice(0, space), title.slice(space + 1)];
+}
+//#endregion
+//#region src/use-store.ts
+/** Function options whose answers decide how the calendar's days look. */
+const DAY_FUNCTIONS = [
+	"isDateDisabled",
+	"holidays",
+	"events"
+];
+/** useLayoutEffect in the browser, useEffect on the server (no warning). */
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+/**
+* Create a store once and keep its options in step with props, without
+* loops: functions are wrapped once so their identity never changes, and data
+* options are compared by value, so inline objects and arrays are fine.
+*/
+function useStore(create, options) {
+	const latest = (0, react.useRef)(options);
+	latest.current = options;
+	const wrappers = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const prepare = (input) => {
+		const out = {};
+		for (const [key, value] of Object.entries(input)) if (typeof value === "function") {
+			let wrapper = wrappers.current.get(key);
+			if (!wrapper) {
+				wrapper = (...args) => latest.current[key]?.(...args);
+				wrappers.current.set(key, wrapper);
+			}
+			out[key] = wrapper;
+		} else out[key] = value;
+		return out;
+	};
+	const [store] = (0, react.useState)(() => create(prepare(options)));
+	const previous = (0, react.useRef)(prepare(options));
+	const dayAnswers = (0, react.useRef)(null);
+	const storeValue = (0, react.useRef)(valueOf(store.getState()));
+	useIsomorphicLayoutEffect(() => {
+		const next = prepare(options);
+		const before = previous.current;
+		const changes = {};
+		for (const key of /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(next)])) if (!deepEqual(before[key], next[key])) changes[key] = next[key];
+		previous.current = next;
+		const current = askDayFunctions(options, store.getState());
+		const asked = dayAnswers.current;
+		dayAnswers.current = current;
+		if (asked?.days === current?.days && asked?.answers !== current?.answers) {
+			for (const key of DAY_FUNCTIONS) if (key in next) changes[key] = next[key];
+		}
+		if (Object.keys(changes).length > 0) store.setOptions(changes);
+		const value = valueOf(store.getState());
+		const changedByUser = !deepEqual(value, storeValue.current) && !("value" in changes);
+		storeValue.current = value;
+		const held = next["value"];
+		if (changedByUser && held !== void 0 && isChosen(value) && !deepEqual(value, held)) {
+			store.actions?.setValue?.(held);
+			storeValue.current = valueOf(store.getState());
+		}
+	});
+	return {
+		store,
+		state: (0, react.useSyncExternalStore)((listener) => store.subscribe(listener), () => store.getState(), () => store.getState())
+	};
+}
+function valueOf(state) {
+	return state.value;
+}
+/** A finished value: not empty, half typed, or a range with one end still to pick. */
+function isChosen(value) {
+	if (Array.isArray(value)) return value.length > 0;
+	if (typeof value === "object" && value !== null) return Object.values(value).every((part) => part !== "");
+	return value !== "" && value !== void 0;
+}
+/** What the day functions say about the days on screen, or null when there are none. */
+function askDayFunctions(options, state) {
+	const given = DAY_FUNCTIONS.flatMap((key) => {
+		const option = options[key];
+		return typeof option === "function" ? [option] : [];
+	});
+	if (given.length === 0) return null;
+	const { weeks, calendarState } = state;
+	const dates = (weeks ?? calendarState?.weeks ?? []).flat().flatMap((cell) => cell ? [cell.date] : []);
+	return {
+		days: JSON.stringify(dates),
+		answers: JSON.stringify(dates.map((date) => given.map((ask) => ask(date))))
+	};
+}
+/** Structural equality for plain data (dates, ranges, lists); identity for everything else. */
+function deepEqual(a, b) {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	if (Array.isArray(a) || Array.isArray(b)) return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((item, index) => deepEqual(item, b[index]));
+	if (Object.getPrototypeOf(a) !== Object.prototype || Object.getPrototypeOf(b) !== Object.prototype) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	return keysA.length === keysB.length && keysA.every((key) => deepEqual(a[key], b[key]));
+}
+//#endregion
+//#region src/hooks.ts
+/** A standalone calendar: state, actions and prop getters. */
+function useCalendar(options = {}) {
+	const { store, state } = useStore(_nepdatejs_calendar.createCalendar, options);
+	return {
+		...useCalendarBindings(state, store.actions, options.locale, { getSnapshot: () => store.getState() }),
+		store
+	};
+}
+/** A BS/AD date picker without markup: wire the getters to your own elements. */
+function useDatePicker(options = {}) {
+	const { id: givenId, ...storeOptions } = options;
+	const { store, state } = useStore(_nepdatejs_datepicker.createDatePicker, storeOptions);
+	const generated = (0, react.useId)();
+	const input = givenId ?? `ndp${generated.replace(/:/g, "")}`;
+	const ids = {
+		input,
+		panel: `${input}-panel`,
+		hint: `${input}-hint`
+	};
+	const labels = (0, _nepdatejs_core.getLocale)(options.locale);
+	const calendar = useCalendarBindings(state.calendarState, store.calendar.actions, options.locale, {
+		getSnapshot: () => store.calendar.getState(),
+		onDayActivate: (date) => {
+			store.actions.select(date);
+		}
+	});
+	const hasHint = state.error !== null || state.equivalentText !== null;
+	return {
+		state,
+		actions: store.actions,
+		store,
+		calendar,
+		ids,
+		getInputProps: () => ({
+			id: ids.input,
+			...popupProps(state),
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "off",
+			value: state.text,
+			placeholder: state.placeholder,
+			"aria-controls": ids.panel,
+			...state.error ? { "aria-invalid": true } : {},
+			...hasHint ? { "aria-describedby": ids.hint } : {},
+			onChange: (event) => {
+				store.actions.type(event.target.value);
+			},
+			onBlur: () => {
+				store.actions.blur();
+			},
+			onKeyDown: (event) => {
+				if (event.key === "ArrowDown" && (event.altKey || state.text === "")) {
+					event.preventDefault();
+					store.actions.open();
+				}
+			}
+		}),
+		getToggleProps: () => ({
+			type: "button",
+			"aria-label": labels.labels.openCalendar,
+			"aria-expanded": state.open,
+			"aria-controls": ids.panel,
+			onClick: () => {
+				store.actions.toggle();
+			}
+		}),
+		getClearProps: () => ({
+			type: "button",
+			"aria-label": labels.labels.clear,
+			onClick: () => {
+				store.actions.clear();
+			}
+		}),
+		getSwitchProps: () => {
+			const other = state.calendar === "BS" ? "AD" : "BS";
+			return {
+				type: "button",
+				"aria-label": `${labels.labels.calendar}: ${labels.calendarNames[state.calendar]} → ${labels.calendarNames[other]}`,
+				onClick: () => {
+					store.actions.switchCalendar(other);
+				}
+			};
+		},
+		getCalendarOptionProps: (option) => ({
+			type: "button",
+			"aria-pressed": state.calendar === option,
+			onClick: () => {
+				store.actions.switchCalendar(option);
+			}
+		}),
+		getTodayProps: () => ({
+			type: "button",
+			onClick: () => {
+				store.actions.selectToday();
+			}
+		}),
+		getPanelProps: () => ({
+			id: ids.panel,
+			role: state.inline ? "group" : "dialog",
+			"aria-label": labels.labels.chooseDate
+		}),
+		getPresetProps: (preset) => presetProps(preset, (id) => store.actions.applyPreset(id))
+	};
+}
+/** Combobox ARIA for a popup picker; an inline picker's input is a plain text field. */
+function popupProps(state) {
+	return state.inline ? {} : {
+		role: "combobox",
+		"aria-haspopup": "dialog",
+		"aria-expanded": state.open
+	};
+}
+function presetProps(preset, apply) {
+	return {
+		type: "button",
+		"aria-pressed": preset.isActive,
+		disabled: preset.isDisabled,
+		onClick: () => {
+			apply(preset.id);
+		}
+	};
+}
+/** A BS/AD date range picker without markup. */
+function useDateRangePicker(options = {}) {
+	const { store, state } = useStore(_nepdatejs_datepicker.createDateRangePicker, options);
+	const base = `ndp${(0, react.useId)().replace(/:/g, "")}`;
+	const ids = {
+		start: `${base}-start`,
+		end: `${base}-end`,
+		panel: `${base}-panel`,
+		hint: `${base}-hint`
+	};
+	const labels = (0, _nepdatejs_core.getLocale)(options.locale);
+	const calendar = useCalendarBindings(state.calendarState, store.calendar.actions, options.locale, {
+		getSnapshot: () => store.calendar.getState(),
+		onDayActivate: (date) => {
+			store.actions.select(date);
+		}
+	});
+	const texts = {
+		start: state.startText,
+		end: state.endText
+	};
+	return {
+		state,
+		actions: store.actions,
+		store,
+		calendar,
+		ids,
+		getInputProps: (field) => {
+			const invalid = state.error !== null && (state.error.field === field || state.error.field === "range");
+			return {
+				id: ids[field],
+				...popupProps(state),
+				type: "text",
+				inputMode: "numeric",
+				autoComplete: "off",
+				value: texts[field],
+				placeholder: state.placeholder,
+				"aria-controls": ids.panel,
+				...invalid ? { "aria-invalid": true } : {},
+				...state.error ? { "aria-describedby": ids.hint } : {},
+				onChange: (event) => {
+					store.actions.type(field, event.target.value);
+				},
+				onBlur: () => {
+					store.actions.blur(field);
+				},
+				onKeyDown: (event) => {
+					if (event.key === "ArrowDown" && (event.altKey || texts[field] === "")) {
+						event.preventDefault();
+						store.actions.open();
+					}
+				}
+			};
+		},
+		getToggleProps: () => ({
+			type: "button",
+			"aria-label": labels.labels.openCalendar,
+			"aria-expanded": state.open,
+			"aria-controls": ids.panel,
+			onClick: () => {
+				store.actions.toggle();
+			}
+		}),
+		getCalendarOptionProps: (option) => ({
+			type: "button",
+			"aria-pressed": state.calendar === option,
+			onClick: () => {
+				store.actions.switchCalendar(option);
+			}
+		}),
+		getPanelProps: () => ({
+			id: ids.panel,
+			role: state.inline ? "group" : "dialog",
+			"aria-label": labels.labels.chooseDate
+		}),
+		getPresetProps: (preset) => presetProps(preset, (id) => store.actions.applyPreset(id))
+	};
+}
+/** A BS/AD date + time picker without markup. The value is a zoned ISO timestamp. */
+function useDateTimePicker(options = {}) {
+	const { id: givenId, ...storeOptions } = options;
+	const { store, state } = useStore(_nepdatejs_datepicker.createDateTimePicker, storeOptions);
+	const generated = (0, react.useId)();
+	const base = givenId ?? `ndp${generated.replace(/:/g, "")}`;
+	const calendar = useCalendarBindings(state.calendarState, store.calendar.actions, options.locale, {
+		getSnapshot: () => store.calendar.getState(),
+		onDayActivate: (date) => {
+			store.actions.selectDate(date);
+		}
+	});
+	return {
+		state,
+		actions: store.actions,
+		store,
+		calendar,
+		ids: {
+			date: base,
+			time: `${base}-time`,
+			panel: `${base}-panel`,
+			hint: `${base}-hint`
+		}
+	};
+}
+/** A picker for several separate BS/AD days, without markup (PICK-001). */
+function useMultiDatePicker(options = {}) {
+	const { id: givenId, ...storeOptions } = options;
+	const { store, state } = useStore(_nepdatejs_datepicker.createMultiDatePicker, storeOptions);
+	const generated = (0, react.useId)();
+	const input = givenId ?? `ndp${generated.replace(/:/g, "")}`;
+	const ids = {
+		input,
+		panel: `${input}-panel`,
+		hint: `${input}-hint`
+	};
+	const labels = (0, _nepdatejs_core.getLocale)(options.locale);
+	const calendar = useCalendarBindings(state.calendarState, store.calendar.actions, options.locale, {
+		getSnapshot: () => store.calendar.getState(),
+		onDayActivate: (date) => {
+			store.actions.select(date);
+		}
+	});
+	return {
+		state,
+		actions: store.actions,
+		store,
+		calendar,
+		ids,
+		getInputProps: () => ({
+			id: ids.input,
+			...popupProps(state),
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "off",
+			value: state.text,
+			placeholder: state.placeholder,
+			"aria-controls": ids.panel,
+			...state.error ? {
+				"aria-invalid": true,
+				"aria-describedby": ids.hint
+			} : {},
+			onChange: (event) => {
+				store.actions.type(event.target.value);
+			},
+			onBlur: () => {
+				store.actions.blur();
+			},
+			onKeyDown: (event) => {
+				if (event.key === "ArrowDown" && (event.altKey || state.text === "")) {
+					event.preventDefault();
+					store.actions.open();
+				}
+			}
+		}),
+		getToggleProps: () => ({
+			type: "button",
+			"aria-label": labels.labels.openCalendar,
+			"aria-expanded": state.open,
+			"aria-controls": ids.panel,
+			onClick: () => {
+				store.actions.toggle();
+			}
+		}),
+		getClearProps: () => ({
+			type: "button",
+			"aria-label": labels.labels.clear,
+			onClick: () => {
+				store.actions.clear();
+			}
+		}),
+		getCalendarOptionProps: (option) => ({
+			type: "button",
+			"aria-pressed": state.calendar === option,
+			onClick: () => {
+				store.actions.switchCalendar(option);
+			}
+		}),
+		getPanelProps: () => ({
+			id: ids.panel,
+			role: state.inline ? "group" : "dialog",
+			"aria-label": labels.labels.chooseDate
+		})
+	};
+}
+//#endregion
+Object.defineProperty(exports, "deepEqual", {
+	enumerable: true,
+	get: function() {
+		return deepEqual;
+	}
+});
+Object.defineProperty(exports, "popupProps", {
+	enumerable: true,
+	get: function() {
+		return popupProps;
+	}
+});
+Object.defineProperty(exports, "useCalendar", {
+	enumerable: true,
+	get: function() {
+		return useCalendar;
+	}
+});
+Object.defineProperty(exports, "useCalendarBindings", {
+	enumerable: true,
+	get: function() {
+		return useCalendarBindings;
+	}
+});
+Object.defineProperty(exports, "useDatePicker", {
+	enumerable: true,
+	get: function() {
+		return useDatePicker;
+	}
+});
+Object.defineProperty(exports, "useDateRangePicker", {
+	enumerable: true,
+	get: function() {
+		return useDateRangePicker;
+	}
+});
+Object.defineProperty(exports, "useDateTimePicker", {
+	enumerable: true,
+	get: function() {
+		return useDateTimePicker;
+	}
+});
+Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
+	enumerable: true,
+	get: function() {
+		return useIsomorphicLayoutEffect;
+	}
+});
+Object.defineProperty(exports, "useMultiDatePicker", {
+	enumerable: true,
+	get: function() {
+		return useMultiDatePicker;
+	}
+});
+Object.defineProperty(exports, "useStore", {
+	enumerable: true,
+	get: function() {
+		return useStore;
+	}
+});
+
+//# sourceMappingURL=headless-AEI6dxTJ.cjs.map