@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/data-table/grid-navigation.ts

@@ -0,0 +1,186 @@
+import { type KeyboardEvent, useCallback, useRef } from "react";
+
+// WAI-ARIA data grid keyboard model: one tab stop, arrows move between cells,
+// and a cell holding exactly one control hands focus to that control.
+
+interface GridPosition {
+	column: number;
+	row: number;
+}
+
+// Widget roles cover Base UI controls rendered on spans; their hidden form
+// inputs are aria-hidden and must never take focus.
+const CONTROLS = [
+	"a[href]",
+	"button",
+	"input",
+	"select",
+	"textarea",
+	'[role="checkbox"]',
+	'[role="switch"]',
+	'[role="combobox"]',
+]
+	.map((selector) => `${selector}:not([aria-hidden="true"])`)
+	.join(", ");
+const PAGE_ROWS = 10;
+const TEXT_ENTRY = new Set([
+	"email",
+	"number",
+	"password",
+	"search",
+	"tel",
+	"text",
+	"url",
+]);
+
+function getGridRows(table: HTMLTableElement): HTMLTableRowElement[] {
+	return [...table.rows].filter(
+		(row) => row.getAttribute("aria-hidden") !== "true"
+	);
+}
+
+function getCell(
+	table: HTMLTableElement,
+	{ column, row }: GridPosition
+): HTMLTableCellElement | undefined {
+	const cells = getGridRows(table)[row]?.cells;
+	return cells?.[Math.min(column, (cells?.length ?? 1) - 1)];
+}
+
+function getFocusTarget(cell: HTMLTableCellElement): HTMLElement {
+	const controls = cell.querySelectorAll<HTMLElement>(CONTROLS);
+	return controls.length === 1 ? controls[0] : cell;
+}
+
+function getPosition(
+	table: HTMLTableElement,
+	cell: HTMLTableCellElement
+): GridPosition {
+	const row = getGridRows(table).indexOf(
+		cell.parentElement as HTMLTableRowElement
+	);
+	return { column: cell.cellIndex, row: Math.max(row, 0) };
+}
+
+// Text fields and selects keep their own arrow and Home/End keys.
+function ownsArrowKeys(target: EventTarget): boolean {
+	if (target instanceof HTMLInputElement) {
+		return TEXT_ENTRY.has(target.type);
+	}
+	return (
+		target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement
+	);
+}
+
+function getStep(event: KeyboardEvent): GridPosition | "start" | "end" | null {
+	const steps: Record<string, GridPosition> = {
+		ArrowDown: { column: 0, row: 1 },
+		ArrowLeft: { column: -1, row: 0 },
+		ArrowRight: { column: 1, row: 0 },
+		ArrowUp: { column: 0, row: -1 },
+		PageDown: { column: 0, row: PAGE_ROWS },
+		PageUp: { column: 0, row: -PAGE_ROWS },
+	};
+	if (event.key === "Home" || event.key === "End") {
+		const edge = event.key === "Home" ? "start" : "end";
+		return event.ctrlKey || event.metaKey
+			? edge
+			: {
+					column:
+						edge === "start"
+							? Number.NEGATIVE_INFINITY
+							: Number.POSITIVE_INFINITY,
+					row: 0,
+				};
+	}
+	return steps[event.key] ?? null;
+}
+
+function resolveTarget(
+	table: HTMLTableElement,
+	from: GridPosition,
+	step: GridPosition | "start" | "end"
+): GridPosition {
+	const rows = getGridRows(table);
+	if (step === "start") {
+		return { column: 0, row: 0 };
+	}
+	if (step === "end") {
+		const last = rows.length - 1;
+		return { column: (rows[last]?.cells.length ?? 1) - 1, row: last };
+	}
+	const row = Math.min(Math.max(from.row + step.row, 0), rows.length - 1);
+	const width = rows[row]?.cells.length ?? 1;
+	const column = Math.min(Math.max(from.column + step.column, 0), width - 1);
+	return { column, row };
+}
+
+// Only the active cell (or its single control) is tabbable.
+function syncTabStops(table: HTMLTableElement, active: GridPosition): void {
+	for (const row of getGridRows(table)) {
+		for (const cell of row.cells) {
+			cell.tabIndex = -1;
+			for (const control of cell.querySelectorAll<HTMLElement>(CONTROLS)) {
+				control.tabIndex = -1;
+			}
+		}
+	}
+	const cell = getCell(table, active);
+	if (cell) {
+		getFocusTarget(cell).tabIndex = 0;
+	}
+}
+
+export function useGridNavigation() {
+	const tableRef = useRef<HTMLTableElement | null>(null);
+	const active = useRef<GridPosition>({ column: 0, row: 0 });
+
+	// Keep one tab stop as rows, cells, and controls change, including a
+	// control that resets its own tabindex on re-render. Our own writes are
+	// dropped from the queue so they never retrigger the sync.
+	const ref = useCallback((table: HTMLTableElement) => {
+		tableRef.current = table;
+		const sync = () => {
+			syncTabStops(table, active.current);
+			observer.takeRecords();
+		};
+		const observer = new MutationObserver(sync);
+		observer.observe(table, {
+			attributeFilter: ["tabindex"],
+			childList: true,
+			subtree: true,
+		});
+		sync();
+		return () => {
+			observer.disconnect();
+			tableRef.current = null;
+		};
+	}, []);
+
+	const onFocus = useCallback((event: { target: EventTarget }) => {
+		const table = tableRef.current;
+		const cell = (event.target as Element).closest?.("td, th");
+		if (!(table && cell instanceof HTMLTableCellElement)) {
+			return;
+		}
+		active.current = getPosition(table, cell);
+		syncTabStops(table, active.current);
+	}, []);
+
+	const onKeyDown = useCallback((event: KeyboardEvent) => {
+		const table = tableRef.current;
+		const step = getStep(event);
+		if (!(table && step) || ownsArrowKeys(event.target)) {
+			return;
+		}
+		const cell = getCell(table, resolveTarget(table, active.current, step));
+		if (!cell) {
+			return;
+		}
+		event.preventDefault();
+		getFocusTarget(cell).focus();
+		cell.scrollIntoView({ block: "nearest", inline: "nearest" });
+	}, []);
+
+	return { onFocus, onKeyDown, ref };
+}

package/src/components/date-picker/date-picker-date.ts

@@ -0,0 +1,142 @@
+export interface DateConstraints {
+	readonly isDateUnavailable?: ((date: Date) => boolean) | undefined;
+	readonly maxValue?: Date | undefined;
+	readonly minValue?: Date | undefined;
+	readonly required?: boolean | undefined;
+}
+
+type DateValidationStatus = "invalid" | "valid";
+
+export interface DateValidationResult {
+	readonly date: Date | undefined;
+	readonly status: DateValidationStatus;
+}
+
+export function formatIsoDate(date: Date | undefined): string {
+	if (!date) {
+		return "";
+	}
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+	return `${year}-${month}-${day}`;
+}
+
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/u;
+
+export function parseIsoDate(text: string): Date | undefined {
+	const trimmed = text.trim();
+	if (!ISO_DATE_PATTERN.test(trimmed)) {
+		return undefined;
+	}
+
+	const parts = trimmed.split("-");
+	const year = Number(parts[0]);
+	const month = Number(parts[1]);
+	const day = Number(parts[2]);
+
+	if (month < 1 || month > 12 || day < 1 || day > 31) {
+		return undefined;
+	}
+
+	const date = new Date(year, month - 1, day);
+	if (
+		date.getFullYear() !== year ||
+		date.getMonth() !== month - 1 ||
+		date.getDate() !== day
+	) {
+		return undefined;
+	}
+
+	date.setHours(0, 0, 0, 0);
+	return date;
+}
+
+export function areDatesEqual(
+	a: Date | undefined,
+	b: Date | undefined
+): boolean {
+	if (a === undefined && b === undefined) {
+		return true;
+	}
+	if (a === undefined || b === undefined) {
+		return false;
+	}
+	return (
+		a.getFullYear() === b.getFullYear() &&
+		a.getMonth() === b.getMonth() &&
+		a.getDate() === b.getDate()
+	);
+}
+
+export function startOfDay(date: Date): Date {
+	const result = new Date(date);
+	result.setHours(0, 0, 0, 0);
+	return result;
+}
+
+export function isDateConstraintSatisfied(
+	date: Date,
+	constraints: DateConstraints
+): boolean {
+	const target = startOfDay(date);
+
+	if (constraints.minValue) {
+		const min = startOfDay(constraints.minValue);
+		if (target.getTime() < min.getTime()) {
+			return false;
+		}
+	}
+
+	if (constraints.maxValue) {
+		const max = startOfDay(constraints.maxValue);
+		if (target.getTime() > max.getTime()) {
+			return false;
+		}
+	}
+
+	return !constraints.isDateUnavailable?.(date);
+}
+
+export function validateDateInput(
+	text: string,
+	constraints: DateConstraints
+): DateValidationResult {
+	const trimmed = text.trim();
+	if (trimmed === "") {
+		return {
+			date: undefined,
+			status: constraints.required ? "invalid" : "valid",
+		};
+	}
+
+	const parsed = parseIsoDate(trimmed);
+	if (!parsed) {
+		return {
+			date: undefined,
+			status: "invalid",
+		};
+	}
+
+	if (!isDateConstraintSatisfied(parsed, constraints)) {
+		return {
+			date: undefined,
+			status: "invalid",
+		};
+	}
+
+	return {
+		date: parsed,
+		status: "valid",
+	};
+}
+
+export function getDateInputValidationMessage(
+	text: string,
+	constraints: DateConstraints
+): string {
+	return text !== "" &&
+		validateDateInput(text, constraints).status === "invalid"
+		? "Enter a valid date within the allowed range."
+		: "";
+}

package/src/components/date-picker/date-picker-icon.tsx

@@ -0,0 +1,6 @@
+import type { ReactElement } from "react";
+import { IconCalendar } from "../../icons";
+
+export function CalendarIcon(): ReactElement {
+	return <IconCalendar aria-hidden="true" focusable="false" size="16" />;
+}

package/src/components/date-picker/date-picker-state.ts

@@ -0,0 +1,193 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { useCallback, useState } from "react";
+import type { DateConstraints } from "./date-picker-date";
+import {
+	areDatesEqual,
+	getDateInputValidationMessage,
+	isDateConstraintSatisfied,
+	validateDateInput,
+} from "./date-picker-date";
+
+export interface UseDatePickerDraftOptions {
+	committedText: string;
+	committedValue: Date | undefined;
+	constraints: DateConstraints;
+	disabled: boolean;
+	isControlled: boolean;
+	onValueChange?: ((value: Date | undefined) => void) | undefined;
+	readOnly: boolean;
+	setIsOpen: (open: boolean) => void;
+	setUncontrolledValue: (updater: Date | undefined) => void;
+}
+
+export function useDatePickerDraft({
+	committedText,
+	committedValue,
+	constraints,
+	disabled,
+	isControlled,
+	onValueChange,
+	readOnly,
+	setIsOpen,
+	setUncontrolledValue,
+}: UseDatePickerDraftOptions) {
+	const [isFocused, setIsFocused] = useState(false);
+	const [focusedDraft, setFocusedDraft] = useState<string | null>(null);
+	const [invalidState, setInvalidState] = useState<{
+		baseKey: string;
+		text: string;
+	} | null>(null);
+
+	const isInvalidActive =
+		invalidState !== null && invalidState.baseKey === committedText;
+
+	let displayText = committedText;
+	if (isFocused) {
+		displayText =
+			focusedDraft ?? (isInvalidActive ? invalidState.text : committedText);
+	} else if (isInvalidActive) {
+		displayText = invalidState.text;
+	}
+
+	const commitCandidate = useCallback(
+		(nextDate: Date | undefined) => {
+			if (!isControlled) {
+				setUncontrolledValue(nextDate);
+			}
+			setInvalidState(null);
+			setFocusedDraft(null);
+			onValueChange?.(nextDate);
+		},
+		[isControlled, onValueChange, setUncontrolledValue]
+	);
+	const handleDraftReset = useCallback(() => {
+		setIsFocused(false);
+		setFocusedDraft(null);
+		setInvalidState(null);
+	}, []);
+
+	const handleInputChange = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) => {
+			if (readOnly || disabled) {
+				return;
+			}
+			event.currentTarget.setCustomValidity(
+				getDateInputValidationMessage(event.currentTarget.value, constraints)
+			);
+			setInvalidState(null);
+			setFocusedDraft(event.target.value);
+		},
+		[constraints, disabled, readOnly]
+	);
+
+	const handleInputFocus = useCallback(() => {
+		if (disabled) {
+			return;
+		}
+		setIsFocused(true);
+	}, [disabled]);
+
+	const handleInputBlur = useCallback(
+		(event: FocusEvent<HTMLInputElement>) => {
+			setIsFocused(false);
+			if (readOnly || disabled) {
+				return;
+			}
+			const currentDraft = focusedDraft ?? event.target.value;
+			setFocusedDraft(null);
+			const result = validateDateInput(currentDraft, constraints);
+			event.currentTarget.setCustomValidity(
+				getDateInputValidationMessage(currentDraft, constraints)
+			);
+
+			if (result.status === "valid") {
+				setInvalidState(null);
+				if (!areDatesEqual(committedValue, result.date)) {
+					commitCandidate(result.date);
+				}
+			} else {
+				setInvalidState({
+					baseKey: committedText,
+					text: currentDraft,
+				});
+			}
+		},
+		[
+			commitCandidate,
+			committedText,
+			committedValue,
+			constraints,
+			disabled,
+			focusedDraft,
+			readOnly,
+		]
+	);
+
+	const handleInputKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLInputElement>) => {
+			if (disabled || readOnly) {
+				return;
+			}
+			if (event.key === "Enter") {
+				const currentDraft = focusedDraft ?? event.currentTarget.value;
+				const result = validateDateInput(currentDraft, constraints);
+				event.currentTarget.setCustomValidity(
+					getDateInputValidationMessage(currentDraft, constraints)
+				);
+				if (result.status === "valid") {
+					commitCandidate(result.date);
+				} else {
+					setInvalidState({
+						baseKey: committedText,
+						text: currentDraft,
+					});
+					event.preventDefault();
+				}
+			} else if (event.key === "Escape") {
+				event.currentTarget.setCustomValidity(
+					getDateInputValidationMessage(committedText, constraints)
+				);
+				setFocusedDraft(null);
+				setInvalidState(null);
+			}
+		},
+		[
+			commitCandidate,
+			committedText,
+			constraints,
+			disabled,
+			focusedDraft,
+			readOnly,
+		]
+	);
+
+	const handleCalendarSelect = useCallback(
+		(selectedDate: Date | undefined) => {
+			if (readOnly || disabled) {
+				return;
+			}
+			if (
+				selectedDate &&
+				!isDateConstraintSatisfied(selectedDate, constraints)
+			) {
+				return;
+			}
+			commitCandidate(selectedDate);
+			setIsOpen(false);
+		},
+		[commitCandidate, constraints, disabled, readOnly, setIsOpen]
+	);
+
+	const isLocalInvalid = isInvalidActive;
+
+	return {
+		displayText,
+		handleCalendarSelect,
+		handleDraftReset,
+		handleInputBlur,
+		handleInputChange,
+		handleInputFocus,
+		handleInputKeyDown,
+		isLocalInvalid,
+	};
+}

package/src/components/date-picker/date-picker.styles.ts

@@ -0,0 +1,53 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+} from "../../styles/interaction.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const datePickerStyles = create({
+	triggerButton: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			":hover": { [conditions.canHover]: colors.secondary },
+			default: "transparent",
+		},
+		borderColor: "transparent",
+		borderRadius: shape.controlRadius,
+		borderStyle: "none",
+		color: colors.content,
+		cursor: "pointer",
+		display: "inline-flex",
+		height: "100%",
+		justifyContent: "center",
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		padding: space["1"],
+	},
+	triggerButtonDisabled: {
+		cursor: "not-allowed",
+	},
+	triggerIcon: {
+		display: "inline-flex",
+		flexShrink: 0,
+		lineHeight: 0,
+	},
+});