@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,72 @@
+import { type InputHTMLAttributes } from 'react';
+import { type DateTimeGranularity, type HourCycle } from './utils.js';
+/** Field height + type scale. Pairs with `<Input>` and `<Select>`. */
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'min' | 'max' | 'size'> {
+    /** Selected date. `null` = no value. Pair with `onChange` for controlled use. */
+    value?: Date | null;
+    /** Initial selected date for uncontrolled use. */
+    defaultValue?: Date | null;
+    /** Fires when the value changes. */
+    onChange?: (date: Date | null) => void;
+    /** Override locale (otherwise reads `useLocale()`). */
+    locale?: string;
+    /** Earliest selectable date (inclusive, day-granular). Gates both the grid and typed input. */
+    min?: Date;
+    /** Latest selectable date (inclusive). */
+    max?: Date;
+    /** Per-date disable callback; applied per grid cell and to parsed typed input. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Show the ✕ clear button when a value is set. Defaults to `true`. */
+    clearable?: boolean;
+    /** Toggle red border + focus ring + `aria-invalid="true"`. Pair with a visible error and `aria-describedby`. */
+    invalid?: boolean;
+    /** Form name. When set, renders a hidden mirror `<input>` with the ISO date so native `<form>` submission works. */
+    name?: string;
+    /**
+     * Field height + type scale. Same scale as `<Input>`. Defaults to `'md'`.
+     * Affects only the trigger row; the popover month grid is fixed-size.
+     *
+     * - `'sm'` — 24px tall.
+     * - `'md'` — 32px tall (default).
+     * - `'lg'` — 40px tall.
+     */
+    size?: DatePickerSize;
+    /**
+     * Picker precision.
+     *
+     * - `'day'` (default) — date only; behavior unchanged from prior releases.
+     * - `'minute'` — adds a manual-entry time input below the calendar grid.
+     *   The trigger text shows `HH:mm` after the date. The hidden form mirror
+     *   (when `name` is set) emits ISO local datetime (`2026-05-28T14:30`).
+     *
+     * Time is preserved across date re-picks. Picking from a `null` value
+     * defaults the time to `00:00`. In `'minute'` mode picking a day keeps the
+     * popover open and moves focus to the time input; Enter there (or Escape /
+     * outside click) closes it.
+     */
+    granularity?: DateTimeGranularity;
+    /**
+     * Minutes step for the `<TimeField>` popover and for rounding typed
+     * time input on commit. Defaults to `15`. Set `1` to disable rounding.
+     * Only meaningful when `granularity='minute'`.
+     */
+    timeStep?: number;
+    /**
+     * Display cycle for the embedded `<TimeField>` + the trigger's time tail.
+     *
+     * - `'24'` — `"HH:mm"` in the trigger; 24h hour list in the time popover.
+     * - `'12'` — `"h:mm AM/PM"` in the trigger; 12h hour list + AM/PM column.
+     * - `'auto'` (default) — derives from the active locale via Intl. en-US →
+     *   `'12'`; ru-RU / de-DE / fr-FR → `'24'`.
+     *
+     * Only meaningful when `granularity='minute'`. Typed input is lenient
+     * regardless of cycle — both `"14:30"` and `"2:30 PM"` parse on blur.
+     */
+    hourCycle?: HourCycle;
+}
+/**
+ * Single-date input with a Floating-UI popover month grid, locale-aware typed parsing and min/max constraints.
+ * @see docs/components/DatePicker.md
+ */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,374 @@
+'use client';
+import { isTourHeld } from "../_internal/overlay/tourHold.js";
+import { overlayStack, useFloatingSurface } from "../_internal/overlay/useOverlayStack.js";
+import { useInOverlay } from "../_internal/overlay/useInOverlay.js";
+import { useLocale } from "../../i18n/useLocale.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { mergeRefs } from "../_internal/refs.js";
+import { DatePickerGrid } from "./DatePickerGrid.js";
+import { TimeField } from "../TimeField/TimeField.js";
+import { combineDateAndTime, formatDate, formatDateTime, isDateOutOfRange, parseDate, parseDateTime, resolveHourCycle, roundTimeToStep, toIsoDate, toIsoDateTime } from "./utils.js";
+import DatePicker_module_default from "./DatePicker.module.js";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react-dom";
+import { Calendar, X } from "lucide-react";
+// src/components/DatePicker/DatePicker.tsx
+var ICON_SIZE_FOR = {
+	sm: 14,
+	md: 14,
+	lg: 16
+};
+/**
+* Single-date input with a Floating-UI popover month grid, locale-aware typed parsing and min/max constraints.
+* @see docs/components/DatePicker.md
+*/
+var DatePicker = forwardRef(function DatePicker({ value: valueProp, defaultValue = null, onChange, locale: localeOverride, min, max, isDateDisabled, clearable = true, invalid = false, disabled = false, size = "md", granularity = "day", timeStep = 15, hourCycle = "auto", name, placeholder, className, id: idProp, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onFocus, onBlur, ...rest }, ref) {
+	const contextLocale = useLocale();
+	const locale = localeOverride ?? contextLocale;
+	const resolvedCycle = resolveHourCycle(hourCycle, locale);
+	const t = useTranslation();
+	const generatedId = useId();
+	const inputId = idProp ?? generatedId;
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const value = valueProp !== void 0 ? valueProp : uncontrolled;
+	const valueRef = useRef(value);
+	useLayoutEffect(() => {
+		valueRef.current = value;
+	});
+	const setValue = useCallback((next) => {
+		if (valueProp === void 0) {
+			valueRef.current = next;
+			setUncontrolled(next);
+		}
+		onChange?.(next);
+	}, [valueProp, onChange]);
+	const formattedValue = value ? granularity === "minute" ? formatDateTime(value, locale, resolvedCycle) : formatDate(value, locale) : "";
+	const [draft, setDraft] = useState(formattedValue);
+	const typedRef = useRef(false);
+	useEffect(() => {
+		typedRef.current = false;
+		setDraft(formattedValue);
+	}, [formattedValue]);
+	const [open, setOpen] = useState(false);
+	const [cursor, setCursor] = useState(value ?? /* @__PURE__ */ new Date());
+	useEffect(() => {
+		if (open) setCursor(value ?? /* @__PURE__ */ new Date());
+	}, [open, value]);
+	const inputRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const { refs, floatingStyles } = useFloating({
+		open,
+		placement: "bottom-start",
+		transform: false,
+		middleware: [
+			offset(4),
+			flip(),
+			shift({ padding: 8 })
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const [focusGridTick, setFocusGridTick] = useState(0);
+	useEffect(() => {
+		if (focusGridTick === 0) return;
+		(refs.floating.current?.querySelector("[role=\"gridcell\"][tabindex=\"0\"]"))?.focus();
+	}, [focusGridTick, refs.floating]);
+	const [focusTimeTick, setFocusTimeTick] = useState(0);
+	useEffect(() => {
+		if (focusTimeTick === 0) return;
+		document.getElementById(`${inputId}-time`)?.focus();
+	}, [focusTimeTick, inputId]);
+	const commit = useCallback((raw) => {
+		typedRef.current = false;
+		if (raw.trim() === "") {
+			setValue(null);
+			return null;
+		}
+		const parsed = granularity === "minute" ? parseDateTime(raw, locale) : parseDate(raw, locale);
+		if (parsed != null && !isDateOutOfRange(parsed, min, max, isDateDisabled)) {
+			setValue(parsed);
+			return parsed;
+		}
+		setDraft(formattedValue);
+		return null;
+	}, [
+		granularity,
+		locale,
+		min,
+		max,
+		isDateDisabled,
+		setValue,
+		formattedValue
+	]);
+	const isInsidePicker = useCallback((el) => el instanceof Node && (wrapperRef.current?.contains(el) || refs.floating.current?.contains(el) || el instanceof Element && el.closest("[data-timefield-popover=\"true\"]") != null), [refs.floating]);
+	const isInPopover = useCallback((el) => refs.floating.current?.contains(el) || el.closest("[data-timefield-popover=\"true\"]") != null, [refs.floating]);
+	const isTourHolding = useCallback((el) => isTourHeld(el, refs.floating.current, wrapperRef.current), [refs.floating]);
+	const openRef = useRef(open);
+	useEffect(() => {
+		openRef.current = open;
+	}, [open]);
+	const claimClose = useCallback(() => {
+		if (!openRef.current) return false;
+		openRef.current = false;
+		return true;
+	}, []);
+	const finishClose = useCallback((refocusTrigger) => {
+		if (!inputRef.current) return;
+		setOpen(false);
+		if (refocusTrigger) inputRef.current.focus();
+	}, []);
+	const handleInputBlur = useCallback((e) => {
+		if (typedRef.current) commit(draft);
+		window.setTimeout(() => {
+			const active = document.activeElement;
+			if (!isInsidePicker(active) && !isTourHolding(active) && claimClose()) finishClose(false);
+		}, 0);
+		onBlur?.(e);
+	}, [
+		commit,
+		draft,
+		claimClose,
+		finishClose,
+		onBlur,
+		isInsidePicker,
+		isTourHolding
+	]);
+	const handleInputFocus = useCallback((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleInputClick = useCallback(() => {
+		if (!disabled) setOpen(true);
+	}, [disabled]);
+	const handleInputKeyDown = useCallback((e) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			if (typedRef.current) {
+				const typed = commit(draft);
+				if (typed) setCursor(typed);
+			}
+			setOpen(true);
+			setFocusGridTick((t) => t + 1);
+			return;
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commit(draft);
+			setOpen(false);
+		}
+		if (e.key === "Escape" && open) {
+			if (overlayStack.wasEscapeConsumed(e.nativeEvent)) return;
+			e.preventDefault();
+			setOpen(false);
+			inputRef.current?.focus();
+		}
+	}, [
+		commit,
+		draft,
+		open
+	]);
+	useEffect(() => {
+		if (!open) return;
+		function onKeyDown(e) {
+			if (e.key !== "Escape") return;
+			if (overlayStack.wasEscapeConsumed(e)) return;
+			if (document.querySelector("[data-timefield-popover=\"true\"]")) return;
+			e.preventDefault();
+			overlayStack.consumeEscape(e);
+			setOpen(false);
+			inputRef.current?.focus();
+		}
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
+	}, [open]);
+	const handleSelect = useCallback((next) => {
+		let withTime = next;
+		if (granularity === "minute") {
+			if (value != null) withTime = combineDateAndTime(next, value.getHours(), value.getMinutes());
+			else {
+				const rounded = roundTimeToStep(0, 0, timeStep);
+				withTime = combineDateAndTime(next, rounded.hours, rounded.minutes);
+			}
+		}
+		setValue(withTime);
+		typedRef.current = false;
+		setDraft(formattedValue);
+		if (granularity === "minute") {
+			setFocusTimeTick((t) => t + 1);
+			return;
+		}
+		setOpen(false);
+		inputRef.current?.focus();
+	}, [
+		granularity,
+		value,
+		setValue,
+		timeStep,
+		formattedValue
+	]);
+	const handleClear = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		typedRef.current = false;
+		const active = document.activeElement;
+		if (active instanceof HTMLElement && isInPopover(active)) active.blur();
+		setDraft("");
+		setValue(null);
+		inputRef.current?.focus();
+	}, [setValue, isInPopover]);
+	const keepTriggerFocus = useCallback((e) => {
+		if (openRef.current || isInsidePicker(document.activeElement)) e.preventDefault();
+	}, [isInsidePicker]);
+	const handleToggle = useCallback((e) => {
+		e.preventDefault();
+		if (claimClose()) {
+			const active = document.activeElement;
+			if (active instanceof HTMLElement && isInPopover(active)) active.blur();
+			window.setTimeout(() => finishClose(true), 0);
+			return;
+		}
+		setOpen(true);
+		inputRef.current?.focus();
+	}, [
+		isInPopover,
+		claimClose,
+		finishClose
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const handler = (e) => {
+			if (isInsidePicker(e.target) || isTourHolding(e.target) || !claimClose()) return;
+			const active = document.activeElement;
+			if (active instanceof HTMLElement && isInPopover(active)) {
+				active.blur();
+				window.setTimeout(() => finishClose(false), 0);
+			} else finishClose(false);
+		};
+		document.addEventListener("pointerdown", handler, true);
+		return () => document.removeEventListener("pointerdown", handler, true);
+	}, [
+		open,
+		isInsidePicker,
+		isTourHolding,
+		isInPopover,
+		claimClose,
+		finishClose
+	]);
+	const inOverlay = useInOverlay(wrapperRef, open);
+	useFloatingSurface(open);
+	const showClear = clearable && value != null && !disabled;
+	const setWrapperRef = useCallback((node) => {
+		wrapperRef.current = node;
+		refs.setReference(node);
+	}, [refs]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setWrapperRef,
+		className: clsx(DatePicker_module_default.wrapper, DatePicker_module_default[`size-${size}`], invalid && DatePicker_module_default.invalid, disabled && DatePicker_module_default.disabled, className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...rest,
+				ref: mergeRefs(inputRef, ref),
+				id: inputId,
+				type: "text",
+				className: DatePicker_module_default.input,
+				value: draft,
+				onChange: (e) => {
+					typedRef.current = true;
+					setDraft(e.target.value);
+				},
+				onFocus: handleInputFocus,
+				onBlur: handleInputBlur,
+				onClick: handleInputClick,
+				onKeyDown: handleInputKeyDown,
+				disabled,
+				"aria-invalid": invalid || void 0,
+				"aria-label": ariaLabel,
+				"aria-describedby": ariaDescribedBy,
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				placeholder: placeholder ?? (granularity === "minute" ? formatDateTime(new Date(2e3, 0, 2, 14, 30), locale, resolvedCycle) : formatDate(new Date(2e3, 0, 2), locale)),
+				autoComplete: "off"
+			}),
+			showClear && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: DatePicker_module_default.clearButton,
+				"aria-label": t("datePicker.clear"),
+				onMouseDown: keepTriggerFocus,
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(X, { size: ICON_SIZE_FOR[size] })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: DatePicker_module_default.openButton,
+				"aria-label": t("datePicker.openCalendar"),
+				onMouseDown: keepTriggerFocus,
+				onClick: handleToggle,
+				disabled,
+				children: /* @__PURE__ */ jsx(Calendar, { size: ICON_SIZE_FOR[size] })
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: value ? granularity === "minute" ? toIsoDateTime(value) : toIsoDate(value) : ""
+			}),
+			open && createPortal(/* @__PURE__ */ jsxs("div", {
+				ref: refs.setFloating,
+				style: floatingStyles,
+				className: DatePicker_module_default.popover,
+				"data-in-overlay": inOverlay ? "" : void 0,
+				role: "dialog",
+				"aria-modal": "false",
+				"aria-label": t("datePicker.openCalendar"),
+				onMouseDown: (e) => e.preventDefault(),
+				onBlur: (e) => {
+					const target = e.target;
+					window.setTimeout(() => {
+						const active = document.activeElement;
+						if (target.isConnected && !isInsidePicker(active) && !isTourHolding(active) && claimClose()) finishClose(true);
+					}, 0);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && e.target.id === `${inputId}-time` && !document.querySelector("[data-timefield-popover=\"true\"]")) window.setTimeout(() => {
+						setOpen(false);
+						inputRef.current?.focus();
+					}, 0);
+				},
+				children: [/* @__PURE__ */ jsx(DatePickerGrid, {
+					cursor,
+					value,
+					onCursorChange: setCursor,
+					onSelect: handleSelect,
+					min,
+					max,
+					isDateDisabled,
+					locale
+				}), granularity === "minute" && /* @__PURE__ */ jsxs("div", {
+					className: DatePicker_module_default.timeRow,
+					children: [/* @__PURE__ */ jsx("label", {
+						className: DatePicker_module_default.timeLabel,
+						htmlFor: `${inputId}-time`,
+						children: t("datePicker.timeLabel")
+					}), /* @__PURE__ */ jsx(TimeField, {
+						id: `${inputId}-time`,
+						value: value ? {
+							hours: value.getHours(),
+							minutes: value.getMinutes()
+						} : null,
+						step: timeStep,
+						hourCycle,
+						locale,
+						disabled: value == null || disabled,
+						"aria-label": t("datePicker.timeLabel"),
+						onChange: (time) => {
+							const current = valueRef.current;
+							if (current == null) return;
+							setValue(combineDateAndTime(current, time.hours, time.minutes));
+						}
+					})]
+				})]
+			}), document.body)
+		]
+	});
+});
+export { DatePicker };

package/dist/components/DatePicker/DatePicker.module.js

@@ -0,0 +1,26 @@
+import "./DatePicker.css";
+// src/components/DatePicker/DatePicker.module.scss
+var wrapper = "DatePicker__wrapper__B8g6U";
+var invalid = "DatePicker__invalid__vLG9h";
+var disabled = "DatePicker__disabled__0pn9T";
+var input = "DatePicker__input__bwkEF";
+var clearButton = "DatePicker__clearButton__-E0KC";
+var openButton = "DatePicker__openButton__Jhjoj";
+var popover = "DatePicker__popover__0FMes";
+var timeRow = "DatePicker__timeRow__gQCp1";
+var timeLabel = "DatePicker__timeLabel__qQmrS";
+var DatePicker_module_default = {
+	wrapper,
+	invalid,
+	disabled,
+	input,
+	clearButton,
+	openButton,
+	popover,
+	"size-sm": "DatePicker__size-sm__Inn6u",
+	"size-md": "DatePicker__size-md__H5RWP",
+	"size-lg": "DatePicker__size-lg__EvpYZ",
+	timeRow,
+	timeLabel
+};
+export { clearButton, DatePicker_module_default as default, disabled, input, invalid, openButton, popover, timeLabel, timeRow, wrapper };