@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -0,0 +1,293 @@
+import { format, isDate } from "date-fns";
+import type { DateRange } from "./date-picker.model";
+
+export const DISPLAY_DATE_FORMAT = "dd/MM/yyyy";
+
+export const formatSingleDate = (
+  date: Date | null | undefined,
+  placeholder: string,
+): string => {
+  if (!date || !isDate(date)) return placeholder;
+  return format(date, DISPLAY_DATE_FORMAT);
+};
+
+/**
+ * ISO 8601 calendar date (`yyyy-MM-dd`) used as the form value — locale-agnostic,
+ * sortable, and parseable by `new Date()` / backends without a custom format.
+ * The display string keeps `DISPLAY_DATE_FORMAT`; this is the value layer.
+ */
+export const formatISODate = (date: Date | null | undefined): string => {
+  if (!date || !isDate(date)) return "";
+  return format(date, "yyyy-MM-dd");
+};
+
+export const formatRangeDate = (
+  range: DateRange | undefined,
+  placeholder: string,
+): string => {
+  if (!range) return placeholder;
+  const { start, end } = range;
+  if (!start && !end) return placeholder;
+  const startStr =
+    start && isDate(start) ? format(start, DISPLAY_DATE_FORMAT) : "...";
+  const endStr = end && isDate(end) ? format(end, DISPLAY_DATE_FORMAT) : "...";
+  return `${startStr} → ${endStr}`;
+};
+
+export const formatMultipleDates = (
+  dates: Date[] | undefined,
+  placeholder: string,
+): string => {
+  if (!dates || dates.length === 0) return placeholder;
+  if (dates.length === 1) return format(dates[0], DISPLAY_DATE_FORMAT);
+  return `${dates.length} fechas seleccionadas`;
+};
+
+export const formatDate = (date: Date | null): string => {
+  if (!isDate(date)) return "";
+  return format(date, DISPLAY_DATE_FORMAT);
+};
+
+/**
+ * Emits a native `input` event on a hidden form control so Base UI's Field
+ * re-runs validation. Base UI clears the error and re-validates only inside the
+ * control's `onChange`; assigning `value` via a React prop never fires a native
+ * event, so date changes driven from outside (calendar selection, typing into
+ * the visible input) would leave the field stuck in its invalid state.
+ *
+ * Sets the value through the prototype setter so React's value tracker detects
+ * the diff, then dispatches a bubbling `input` event React maps to `onChange`.
+ */
+export const emitNativeInputChange = (
+  input: HTMLInputElement | null,
+  value: string,
+): void => {
+  if (!input) return;
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+
+export const parseInputToDate = (raw: string): Date | null => {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  const match = /^(\d{1,2})\/(\d{1,2})\/(\d{1,4})$/.exec(trimmed);
+  if (!match) return null;
+
+  const [, dd, mm, yyyy] = match;
+  const day = Number(dd);
+  const month = Number(mm);
+  const rawYear = yyyy;
+  let year = Number(rawYear);
+
+  if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year)) {
+    return null;
+  }
+
+  // Año corto → asumimos 2000 + yy (ej: 25 → 2025)
+  if (rawYear.length <= 2) {
+    year = 2000 + year;
+  }
+
+  if (day < 1 || day > 31 || month < 1 || month > 12) {
+    return null;
+  }
+
+  const parsed = new Date(year, month - 1, day);
+
+  if (
+    parsed.getFullYear() !== year ||
+    parsed.getMonth() !== month - 1 ||
+    parsed.getDate() !== day
+  ) {
+    return null;
+  }
+
+  return parsed;
+};
+
+export type DateMaskContext = {
+  lastKey: string | null;
+  previousValue: string;
+};
+
+export const maskDateInput = (
+  raw: string,
+  context: DateMaskContext,
+): string => {
+  const isDeleting =
+    (context.lastKey === "Backspace" || context.lastKey === "Delete") &&
+    raw.length < context.previousValue.length;
+  const rawHasSlash = raw.includes("/");
+  const endsWithSlash = raw.trim().endsWith("/");
+
+  // When both separators are present, use segment-based parsing regardless of
+  // whether we're inserting or deleting. Strip-and-rebuild merges digits across
+  // segment boundaries incorrectly in both directions:
+  //   delete: "01/0/2025" → digits "0102025" → "01/02/025" ✗
+  //   insert: "01/1/2025" → digits "0112025" → month "12", year "025" ✗
+  const slashCount = (raw.match(/\//g) ?? []).length;
+  if (slashCount >= 2) {
+    const parts = raw.split("/");
+    const dayPart = (parts[0] ?? "").replace(/\D/g, "").slice(0, 2);
+    const monthPart = (parts[1] ?? "").replace(/\D/g, "").slice(0, 2);
+    const yearPart = (parts[2] ?? "").replace(/\D/g, "").slice(0, 4);
+
+    if (!dayPart && !monthPart && !yearPart) return "";
+    return `${dayPart}/${monthPart}/${yearPart}`;
+  }
+
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+
+  if (!digits) {
+    return "";
+  }
+
+  // Día
+  if (digits.length <= 2) {
+    let maskedDay = digits;
+
+    if (digits.length === 1 && (rawHasSlash || endsWithSlash) && !isDeleting) {
+      let dayNumber = Number(maskedDay);
+
+      if (Number.isNaN(dayNumber)) {
+        dayNumber = 1;
+      }
+
+      if (dayNumber < 1) {
+        dayNumber = 1;
+      }
+
+      if (dayNumber > 31) {
+        dayNumber = 31;
+      }
+
+      maskedDay = dayNumber.toString().padStart(2, "0");
+      maskedDay += "/";
+    } else if (digits.length === 2) {
+      if (!isDeleting) {
+        let dayNumber = Number(maskedDay);
+
+        if (Number.isNaN(dayNumber)) {
+          dayNumber = 1;
+        }
+
+        if (dayNumber < 1) {
+          dayNumber = 1;
+        }
+
+        if (dayNumber > 31) {
+          dayNumber = 31;
+        }
+
+        maskedDay = dayNumber.toString().padStart(2, "0");
+        maskedDay += "/";
+      }
+    }
+
+    return maskedDay;
+  }
+
+  // Día completo (ya hay más de 2 dígitos): normalizamos siempre
+  const dayDigitsRaw = digits.slice(0, 2);
+  let dayNumber = Number(dayDigitsRaw);
+
+  if (Number.isNaN(dayNumber)) {
+    dayNumber = 1;
+  }
+
+  if (dayNumber < 1) {
+    dayNumber = 1;
+  }
+
+  if (dayNumber > 31) {
+    dayNumber = 31;
+  }
+
+  const day = dayNumber.toString().padStart(2, "0");
+  const monthDigitsRaw = digits.slice(2, 4);
+  const yearDigits = digits.slice(4);
+
+  let monthText = "";
+
+  if (monthDigitsRaw.length === 0) {
+    monthText = "";
+  } else if (monthDigitsRaw.length === 1 && yearDigits.length === 0) {
+    // Un solo dígito de mes sin año todavía:
+    // - si es "0" o "1", permitimos que el usuario complete (ej: "08")
+    // - si es 1-9, lo consideramos un mes completo y lo normalizamos con padding
+    const shouldPadMonth =
+      endsWithSlash && !isDeleting && monthDigitsRaw.length === 1;
+
+    if (monthDigitsRaw === "0" || monthDigitsRaw === "1") {
+      if (shouldPadMonth) {
+        let monthNumber = Number(monthDigitsRaw);
+
+        if (Number.isNaN(monthNumber)) {
+          monthNumber = 1;
+        }
+
+        if (monthNumber < 1) {
+          monthNumber = 1;
+        }
+
+        if (monthNumber > 12) {
+          monthNumber = 12;
+        }
+
+        monthText = monthNumber.toString().padStart(2, "0");
+      } else {
+        monthText = monthDigitsRaw;
+      }
+    } else {
+      let monthNumber = Number(monthDigitsRaw);
+
+      if (Number.isNaN(monthNumber)) {
+        monthNumber = 1;
+      }
+
+      if (monthNumber < 1) {
+        monthNumber = 1;
+      }
+
+      if (monthNumber > 12) {
+        monthNumber = 12;
+      }
+
+      monthText = monthNumber.toString().padStart(2, "0");
+    }
+  } else {
+    // Mes completo (2 dígitos o ya empezamos a escribir el año): normalizamos
+    let monthNumber = Number(monthDigitsRaw);
+
+    if (Number.isNaN(monthNumber)) {
+      monthNumber = 1;
+    }
+
+    if (monthNumber < 1) {
+      monthNumber = 1;
+    }
+
+    if (monthNumber > 12) {
+      monthNumber = 12;
+    }
+
+    monthText = monthNumber.toString().padStart(2, "0");
+  }
+
+  const base = `${day}/${monthText}`;
+  const shouldAddYearSlash =
+    !yearDigits && monthText.length === 2 && !isDeleting;
+
+  const masked = yearDigits
+    ? `${base}/${yearDigits}`
+    : shouldAddYearSlash
+      ? `${base}/`
+      : base;
+
+  return masked;
+};

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

@@ -0,0 +1,3 @@
+export * from "./date-input";
+export * from "./date-picker";
+export * from "./date-picker.model";

package/src/components/date-picker/use-date-input-popover.test.ts

@@ -0,0 +1,63 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDateInputPopover } from "./use-date-input-popover";
+
+describe("useDateInputPopover", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("starts with open=false", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("setOpen(true) opens the popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    act(() => result.current.setOpen(true));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("Space key prevents default and opens popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    const event = { key: " ", preventDefault: vi.fn() } as any;
+    act(() => result.current.handleInputKeyDown(event));
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(result.current.open).toBe(true);
+  });
+
+  it("Spacebar key (legacy) also opens popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    const event = { key: "Spacebar", preventDefault: vi.fn() } as any;
+    act(() => result.current.handleInputKeyDown(event));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("Escape key closes popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    act(() => result.current.setOpen(true));
+    act(() => result.current.handleInputKeyDown({ key: "Escape" } as any));
+    expect(result.current.open).toBe(false);
+    vi.runAllTimers();
+  });
+
+  it("disabled=true prevents keydown from opening popover", () => {
+    const { result } = renderHook(() =>
+      useDateInputPopover({ disabled: true }),
+    );
+    const event = { key: " ", preventDefault: vi.fn() } as any;
+    act(() => result.current.handleInputKeyDown(event));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("returns an inputRef object", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    expect(result.current.inputRef).toBeDefined();
+    expect("current" in result.current.inputRef).toBe(true);
+  });
+
+  it("other keys do not open or close popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    act(() => result.current.handleInputKeyDown({ key: "a" } as any));
+    expect(result.current.open).toBe(false);
+  });
+});

package/src/components/date-picker/use-date-input-popover.ts

@@ -0,0 +1,48 @@
+import { KeyboardEvent, useCallback, useRef, useState } from "react";
+
+type UseDateInputPopoverOptions = {
+  disabled?: boolean;
+};
+
+type UseDateInputPopoverResult = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  handleInputKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+};
+
+export const useDateInputPopover = (
+  options: UseDateInputPopoverOptions = {},
+): UseDateInputPopoverResult => {
+  const { disabled } = options;
+
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (disabled) return;
+
+      if (event.key === " " || event.key === "Spacebar") {
+        event.preventDefault();
+        setOpen(true);
+        return;
+      }
+
+      if (event.key === "Escape") {
+        setOpen(false);
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+    },
+    [disabled],
+  );
+
+  return {
+    open,
+    setOpen,
+    handleInputKeyDown,
+    inputRef,
+  };
+};

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

@@ -0,0 +1,125 @@
+import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
+import {
+  DateMaskContext,
+  formatDate,
+  maskDateInput,
+  parseInputToDate,
+} from "./date-picker.utils";
+
+type UseDateInputOptions = {
+  date: Date | null;
+  onDateChange: (value: Date | null) => void;
+  disabledDate?: (date: Date) => boolean;
+};
+
+type UseDateInputResult = {
+  inputValue: string;
+  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  handleBlur: () => void;
+  handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+  clear: () => void;
+  setFromExternalDate: (date: Date | null) => void;
+};
+
+export const useDateInput = (
+  options: UseDateInputOptions,
+): UseDateInputResult => {
+  const { date, onDateChange, disabledDate } = options;
+
+  const [inputValue, setInputValue] = useState<string>("");
+  const lastKeyRef = useRef<string | null>(null);
+  const previousValueRef = useRef<string>("");
+
+  useEffect(() => {
+    const formatted = formatDate(date ?? null);
+    setInputValue(formatted);
+    previousValueRef.current = formatted;
+  }, [date]);
+
+  const commitInputValue = () => {
+    const current = inputValue.trim();
+
+    if (!current) {
+      onDateChange(null);
+      setInputValue("");
+      previousValueRef.current = "";
+      return;
+    }
+
+    const nextDate = parseInputToDate(current);
+
+    if (!nextDate) {
+      onDateChange(null);
+      setInputValue("");
+      previousValueRef.current = "";
+      return;
+    }
+
+    if (disabledDate?.(nextDate)) {
+      const fallback = formatDate(date ?? null);
+      setInputValue(fallback);
+      previousValueRef.current = fallback;
+      return;
+    }
+
+    onDateChange(nextDate);
+    const formatted = formatDate(nextDate);
+    setInputValue(formatted);
+    previousValueRef.current = formatted;
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const raw = event.target.value;
+    const context: DateMaskContext = {
+      lastKey: lastKeyRef.current,
+      previousValue: previousValueRef.current,
+    };
+
+    const masked = maskDateInput(raw, context);
+    setInputValue(masked);
+    previousValueRef.current = masked;
+  };
+
+  const handleBlur = () => {
+    commitInputValue();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    lastKeyRef.current = event.key;
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitInputValue();
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      const formatted = formatDate(date ?? null);
+      setInputValue(formatted);
+      previousValueRef.current = formatted;
+    }
+  };
+
+  const clear = () => {
+    onDateChange(null);
+    setInputValue("");
+    previousValueRef.current = "";
+  };
+
+  const setFromExternalDate = (next: Date | null) => {
+    onDateChange(next);
+    const formatted = formatDate(next ?? null);
+    setInputValue(formatted);
+    previousValueRef.current = formatted;
+  };
+
+  return {
+    inputValue,
+    handleChange,
+    handleBlur,
+    handleKeyDown,
+    clear,
+    setFromExternalDate,
+  };
+};

package/src/components/date-picker/use-hidden-field-value.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+import { emitNativeInputChange } from "./date-picker.utils";
+
+/**
+ * Drives a hidden Base UI `FieldControl` input from a derived form value.
+ *
+ * The input is left uncontrolled and updated imperatively so a native `input`
+ * event fires on every change. Base UI re-runs Field validation (and clears the
+ * error) only inside the control's `onChange` — never from a React `value` prop
+ * — so date changes coming from the calendar or the visible input must emit a
+ * real event for the invalid state to clear.
+ *
+ * Returns the ref to attach to the hidden input.
+ */
+export function useHiddenFieldValue(value: string) {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    emitNativeInputChange(ref.current, value);
+  }, [value]);
+
+  return ref;
+}