@nuvui/date-picker 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,339 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { Calendar } from "../calendar/calendar.js";
+import { disabledDays, formatDate, isDisabled, isoDate, shortPattern } from "../../utils/dates.js";
+import { useControlled } from "../../utils/use-controlled.js";
+import { useDateText } from "../../utils/use-date-text.js";
+import { useIsPhone } from "../../utils/use-is-phone.js";
+import { Popup } from "./popup.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@nuvui/react/input";
+import { InputGroup, InputGroupButton } from "@nuvui/react/input-group";
+import { Popover, PopoverAnchor, PopoverTrigger } from "@nuvui/react/popover";
+//#region src/components/date-picker/date-picker.tsx
+function CalendarIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2.5",
+			y: "3.5",
+			width: "11",
+			height: "10",
+			rx: "1.5"
+		}), /* @__PURE__ */ jsx("path", { d: "M2.5 6.5h11M5.5 2v3m5-3v3" })]
+	});
+}
+function hint(format, locale) {
+	return (format === "P" ? shortPattern(locale) : format).toLowerCase();
+}
+function useFormReset(input, onReset) {
+	const latest = useRef(onReset);
+	latest.current = onReset;
+	useEffect(() => {
+		const form = input.current?.form;
+		if (!form) return;
+		const reset = () => latest.current();
+		form.addEventListener("reset", reset);
+		return () => form.removeEventListener("reset", reset);
+	}, [input]);
+}
+function useMergedRef(outer, inner) {
+	return useCallback((node) => {
+		for (const ref of [outer, inner]) if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [outer, inner]);
+}
+function openWithAltDown(event, open) {
+	if (event.key === "ArrowDown" && event.altKey) {
+		event.preventDefault();
+		open();
+	}
+}
+const DatePicker = forwardRef(function DatePicker({ value: valueProp, defaultValue = null, onValueChange, open: openProp, defaultOpen = false, onOpenChange, min, max, disabledDates, locale, weekStartsOn, timeZone, format = "P", invalidMessage = "Enter a valid date.", calendarLabel = "Choose date", title = "Choose date", closeLabel = "Close", calendar, name, form, container, className, style, disabled, readOnly, placeholder, onBlur, onKeyDown, "aria-invalid": ariaInvalid, ...props }, ref) {
+	const [value, setValue] = useControlled(valueProp !== void 0, valueProp ?? null, defaultValue, onValueChange);
+	const [open, setOpen] = useControlled(openProp !== void 0, openProp ?? false, defaultOpen, onOpenChange);
+	const phone = useIsPhone();
+	const input = useRef(null);
+	const trigger = useRef(null);
+	const matchers = useMemo(() => disabledDays(min, max, disabledDates, timeZone), [
+		min,
+		max,
+		disabledDates,
+		timeZone
+	]);
+	const field = useDateText({
+		value,
+		onCommit: setValue,
+		problem: (date) => isDisabled(date, matchers) ? invalidMessage : void 0,
+		invalidMessage,
+		pattern: format,
+		locale,
+		timeZone,
+		input
+	});
+	useFormReset(input, () => {
+		field.clearDraft();
+		setValue(defaultValue);
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: open && !phone,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(InputGroup, {
+				className: cx("nuv-date-picker", className),
+				style,
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						ref: useMergedRef(ref, input),
+						autoComplete: "off",
+						placeholder: placeholder ?? hint(format, locale),
+						disabled,
+						readOnly,
+						"aria-invalid": field.error ? true : ariaInvalid,
+						...props,
+						value: field.text,
+						onChange: field.onChange,
+						onBlur: (event) => {
+							field.onBlur();
+							onBlur?.(event);
+						},
+						onKeyDown: (event) => {
+							onKeyDown?.(event);
+							if (event.defaultPrevented) return;
+							field.onKeyDown(event);
+							if (!disabled && !readOnly) openWithAltDown(event, () => setOpen(true));
+						}
+					}),
+					/* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(InputGroupButton, {
+							ref: trigger,
+							className: "nuv-date-picker__button",
+							"aria-label": value ? `${calendarLabel}, ${formatDate(value, "PPPP", locale, timeZone)}` : calendarLabel,
+							disabled: disabled || readOnly,
+							children: /* @__PURE__ */ jsx(CalendarIcon, {})
+						})
+					}),
+					name ? /* @__PURE__ */ jsx("input", {
+						type: "hidden",
+						name,
+						form,
+						value: isoDate(value ?? void 0, timeZone),
+						disabled
+					}) : null
+				]
+			})
+		}), /* @__PURE__ */ jsx(Popup, {
+			open,
+			onOpenChange: setOpen,
+			phone,
+			title,
+			closeLabel,
+			container,
+			trigger,
+			children: /* @__PURE__ */ jsx(Calendar, {
+				...calendar,
+				mode: "single",
+				required: true,
+				selected: value ?? void 0,
+				onSelect: (date) => {
+					field.clearDraft();
+					setValue(date);
+					setOpen(false);
+				},
+				defaultMonth: value ?? calendar?.defaultMonth,
+				startMonth: min,
+				endMonth: max,
+				disabled: matchers,
+				locale,
+				weekStartsOn,
+				timeZone
+			})
+		})]
+	});
+});
+function before(a, b, timeZone) {
+	return isoDate(a, timeZone) < isoDate(b, timeZone);
+}
+const DateRangePicker = forwardRef(function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange, open: openProp, defaultOpen = false, onOpenChange, min, max, disabledDates, locale, weekStartsOn, timeZone, format = "P", invalidMessage = "Enter a valid date.", orderMessage = "The end date is before the start date.", calendarLabel = "Choose dates", title = "Choose dates", closeLabel = "Close", startLabel = "Start date", endLabel = "End date", numberOfMonths = 2, calendar, startName, endName, form, container, className, style, disabled, readOnly, required, placeholder, id, onBlur, onKeyDown, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const [value, setValue] = useControlled(valueProp !== void 0, valueProp ?? null, defaultValue, onValueChange);
+	const [open, setOpen] = useControlled(openProp !== void 0, openProp ?? false, defaultOpen, onOpenChange);
+	const phone = useIsPhone();
+	const startInput = useRef(null);
+	const endInput = useRef(null);
+	const trigger = useRef(null);
+	const from = value?.from ?? null;
+	const to = value?.to ?? null;
+	const matchers = useMemo(() => disabledDays(min, max, disabledDates, timeZone), [
+		min,
+		max,
+		disabledDates,
+		timeZone
+	]);
+	function setRange(nextFrom, nextTo) {
+		setValue(nextFrom || nextTo ? {
+			from: nextFrom ?? void 0,
+			to: nextTo ?? void 0
+		} : null);
+	}
+	const start = useDateText({
+		value: from,
+		onCommit: (date) => setRange(date, to),
+		problem: (date) => {
+			if (isDisabled(date, matchers)) return invalidMessage;
+			return to && before(to, date, timeZone) ? orderMessage : void 0;
+		},
+		invalidMessage,
+		pattern: format,
+		locale,
+		timeZone,
+		input: startInput
+	});
+	const end = useDateText({
+		value: to,
+		onCommit: (date) => setRange(from, date),
+		problem: (date) => {
+			if (isDisabled(date, matchers)) return invalidMessage;
+			return from && before(date, from, timeZone) ? orderMessage : void 0;
+		},
+		invalidMessage,
+		pattern: format,
+		locale,
+		timeZone,
+		input: endInput
+	});
+	useFormReset(startInput, () => {
+		start.clearDraft();
+		end.clearDraft();
+		setValue(defaultValue);
+	});
+	const shared = {
+		autoComplete: "off",
+		placeholder: placeholder ?? hint(format, locale),
+		disabled,
+		readOnly,
+		required,
+		"aria-describedby": ariaDescribedBy,
+		...props
+	};
+	function keyDown(event, field) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		field.onKeyDown(event);
+		if (!disabled && !readOnly) openWithAltDown(event, () => setOpen(true));
+	}
+	const picked = [from, to].filter((date) => date !== null).map((date) => formatDate(date, "PPPP", locale, timeZone)).join(", ");
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: open && !phone,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(InputGroup, {
+				role: "group",
+				"aria-labelledby": ariaLabelledBy,
+				"aria-label": ariaLabel,
+				className: cx("nuv-date-picker nuv-date-picker--range", className),
+				style,
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						ref: useMergedRef(ref, startInput),
+						id,
+						"aria-label": startLabel,
+						"aria-invalid": start.error ? true : ariaInvalid,
+						...shared,
+						value: start.text,
+						onChange: start.onChange,
+						onBlur: (event) => {
+							start.onBlur();
+							onBlur?.(event);
+						},
+						onKeyDown: (event) => keyDown(event, start)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "nuv-date-picker__separator",
+						children: "–"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						ref: endInput,
+						"aria-label": endLabel,
+						"aria-invalid": end.error ? true : ariaInvalid,
+						...shared,
+						value: end.text,
+						onChange: end.onChange,
+						onBlur: (event) => {
+							end.onBlur();
+							onBlur?.(event);
+						},
+						onKeyDown: (event) => keyDown(event, end)
+					}),
+					/* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(InputGroupButton, {
+							ref: trigger,
+							className: "nuv-date-picker__button",
+							"aria-label": picked ? `${calendarLabel}, ${picked}` : calendarLabel,
+							disabled: disabled || readOnly,
+							children: /* @__PURE__ */ jsx(CalendarIcon, {})
+						})
+					}),
+					startName ? /* @__PURE__ */ jsx("input", {
+						type: "hidden",
+						name: startName,
+						form,
+						value: isoDate(from ?? void 0, timeZone),
+						disabled
+					}) : null,
+					endName ? /* @__PURE__ */ jsx("input", {
+						type: "hidden",
+						name: endName,
+						form,
+						value: isoDate(to ?? void 0, timeZone),
+						disabled
+					}) : null
+				]
+			})
+		}), /* @__PURE__ */ jsx(Popup, {
+			open,
+			onOpenChange: setOpen,
+			phone,
+			title,
+			closeLabel,
+			container,
+			trigger,
+			children: /* @__PURE__ */ jsx(Calendar, {
+				numberOfMonths: phone ? 1 : numberOfMonths,
+				...calendar,
+				mode: "range",
+				required: true,
+				resetOnSelect: true,
+				selected: value ?? void 0,
+				onSelect: (range) => {
+					start.clearDraft();
+					end.clearDraft();
+					setValue(range);
+					if (range.from && range.to) setOpen(false);
+				},
+				defaultMonth: from ?? calendar?.defaultMonth,
+				startMonth: min,
+				endMonth: max,
+				disabled: matchers,
+				locale,
+				weekStartsOn,
+				timeZone
+			})
+		})]
+	});
+});
+//#endregion
+export { DatePicker, DateRangePicker };

package/dist/components/date-picker/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_date_picker = require("./date-picker.cjs");
+exports.DatePicker = require_date_picker.DatePicker;
+exports.DateRangePicker = require_date_picker.DateRangePicker;

package/dist/components/date-picker/index.d.cts

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerCalendarProps, DatePickerOwnProps, DatePickerProps, DateRangePicker, DateRangePickerCalendarProps, DateRangePickerOwnProps, DateRangePickerProps } from "./date-picker.cjs";
+export { DatePicker, type DatePickerCalendarProps, type DatePickerOwnProps, type DatePickerProps, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerOwnProps, type DateRangePickerProps };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerCalendarProps, DatePickerOwnProps, DatePickerProps, DateRangePicker, DateRangePickerCalendarProps, DateRangePickerOwnProps, DateRangePickerProps } from "./date-picker.js";
+export { DatePicker, type DatePickerCalendarProps, type DatePickerOwnProps, type DatePickerProps, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerOwnProps, type DateRangePickerProps };

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+import { DatePicker, DateRangePicker } from "./date-picker.js";
+export { DatePicker, DateRangePicker };

package/dist/components/date-picker/popup.cjs

@@ -0,0 +1,43 @@
+"use client";
+let react_jsx_runtime = require("react/jsx-runtime");
+let _nuvui_react_popover = require("@nuvui/react/popover");
+let _nuvui_react_dialog = require("@nuvui/react/dialog");
+//#region src/components/date-picker/popup.tsx
+function focusDay(event) {
+	event.preventDefault();
+	const popup = event.currentTarget;
+	(popup.querySelector("[role=\"gridcell\"] button[tabindex=\"0\"]") ?? popup).focus();
+}
+/**
+* What the calendar opens in. The popover half is rendered inside the
+* `Popover` that DatePicker wraps its field in. The sheet is a dialog of its
+* own, with no trigger part, so it's told where to send focus back to.
+*/
+function Popup({ open, onOpenChange, phone, title, closeLabel, container, trigger, children }) {
+	if (phone) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_dialog.Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_nuvui_react_dialog.DialogContent, {
+			className: "nuv-date-picker__sheet",
+			closeLabel,
+			container,
+			"aria-describedby": void 0,
+			onOpenAutoFocus: focusDay,
+			onCloseAutoFocus: (event) => {
+				event.preventDefault();
+				trigger.current?.focus();
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_dialog.DialogTitle, { children: title }), children]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_popover.PopoverContent, {
+		className: "nuv-date-picker__popover",
+		"aria-label": title,
+		align: "start",
+		container,
+		onOpenAutoFocus: focusDay,
+		children
+	});
+}
+//#endregion
+exports.Popup = Popup;

package/dist/components/date-picker/popup.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PopoverContent } from "@nuvui/react/popover";
+import { Dialog, DialogContent, DialogTitle } from "@nuvui/react/dialog";
+//#region src/components/date-picker/popup.tsx
+function focusDay(event) {
+	event.preventDefault();
+	const popup = event.currentTarget;
+	(popup.querySelector("[role=\"gridcell\"] button[tabindex=\"0\"]") ?? popup).focus();
+}
+/**
+* What the calendar opens in. The popover half is rendered inside the
+* `Popover` that DatePicker wraps its field in. The sheet is a dialog of its
+* own, with no trigger part, so it's told where to send focus back to.
+*/
+function Popup({ open, onOpenChange, phone, title, closeLabel, container, trigger, children }) {
+	if (phone) return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "nuv-date-picker__sheet",
+			closeLabel,
+			container,
+			"aria-describedby": void 0,
+			onOpenAutoFocus: focusDay,
+			onCloseAutoFocus: (event) => {
+				event.preventDefault();
+				trigger.current?.focus();
+			},
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), children]
+		})
+	});
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		className: "nuv-date-picker__popover",
+		"aria-label": title,
+		align: "start",
+		container,
+		onOpenAutoFocus: focusDay,
+		children
+	});
+}
+//#endregion
+export { Popup };