@eintrek/erp-theme 1.4.14 → 1.4.15

package/dist/index.esm.js

@@ -731,28 +731,64 @@ function getThaiMonthName(monthIndex) {
     return THAI_MONTH_NAMES[monthIndex];
 }
 
+/**
+ * Month arithmetic for the calendar header.
+ *
+ * This lives apart from the component for one reason: the bug it fixes is
+ * invisible on 28 days out of 31. Driving the calendar through the UI proves
+ * nothing unless the machine's clock happens to read the 29th or later, so the
+ * behaviour has to be reachable by a test that supplies its own date.
+ */
+/**
+ * stepMonth moves one month in either direction, always landing on the 1st.
+ *
+ * The obvious implementation — copy the date and call setMonth(m + 1) — keeps
+ * the day of the month. From the 31st that asks for a day the target month
+ * does not have, and JavaScript rolls forward rather than complaining: 31
+ * August plus one month is 1 October, so September cannot be reached at all.
+ *
+ * It only ever bit a calendar opened with nothing selected, because that
+ * starting point is today — including today's day-of-month. On the 3rd the old
+ * code is indistinguishable from this one.
+ */
+function stepMonth(from, direction) {
+    return new Date(from.getFullYear(), from.getMonth() + (direction === "next" ? 1 : -1), 1);
+}
+/**
+ * monthAnchor is the month a calendar should open on.
+ *
+ * A field holding a value opens on that value's month. A field holding nothing
+ * opens on the current month — not on whatever month a different field was
+ * last browsed to, which is what a shared, unreset state produces.
+ */
+function monthAnchor(selected, today) {
+    const basis = selected ?? today;
+    return new Date(basis.getFullYear(), basis.getMonth(), 1);
+}
+
 /** Thai weekday abbreviations (Sunday-first, matching JS getDay()). */
 const WEEK_DAYS_TH = ["อา.", "จ.", "อ.", "พ.", "พฤ.", "ศ.", "ส."];
 function getInitialMonth(selected) {
+    // Work out which date the calendar should open around, then let monthAnchor
+    // pin it to the first. Pinning in one place is what stops an untouched
+    // calendar from carrying today's day-of-month into the month arrows —
+    // the bug that made the arrows skip a month from the 29th onward.
+    return monthAnchor(selectionBasis(selected), new Date());
+}
+function selectionBasis(selected) {
     if (selected instanceof Date && !Number.isNaN(selected.getTime())) {
-        return new Date(selected.getFullYear(), selected.getMonth(), 1);
+        return selected;
     }
     if (Array.isArray(selected) && selected[0] instanceof Date) {
-        return new Date(selected[0].getFullYear(), selected[0].getMonth(), 1);
+        return selected[0];
     }
     if (selected &&
         typeof selected === "object" &&
         "from" in selected &&
         selected.from instanceof Date) {
-        return new Date(selected.from.getFullYear(), selected.from.getMonth(), 1);
+        return selected.from;
     }
-    // The first of this month, not today.
-    //
-    // Returning today carried its day-of-month into the month arrows, which is
-    // what made an untouched calendar skip a month while one with a date
-    // already chosen behaved — the selected branches above all pin the day to 1.
-    const now = new Date();
-    return new Date(now.getFullYear(), now.getMonth(), 1);
+    return undefined;
 }
 function Calendar({ className, selected, onSelect, mode = "single", disabled, fromYear = 1900, toYear, }) {
     const maxYear = toYear ?? new Date().getFullYear() + 10;
@@ -865,15 +901,10 @@ function Calendar({ className, selected, onSelect, mode = "single", disabled, fr
         }
     };
     const navigateMonth = (direction) => {
-        // Built from year and month with the day pinned to 1, never by shifting
-        // the month on a copy of the current date.
-        //
-        // setMonth keeps the day-of-month, so from the 31st it lands on a date
-        // that does not exist in a 30-day month and JavaScript rolls it forward:
-        // 31 Aug + 1 month became 1 Oct, and September could not be reached at
-        // all. It bit every calendar opened with no value selected, because that
-        // starting point was today — including today's day-of-month.
-        setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
+        // stepMonth, not setMonth — see the note in lib/calendar-month. The
+        // arithmetic lives there because it is only wrong on the 29th and later,
+        // and a test has to be able to say what day it is.
+        setCurrentMonth((prev) => stepMonth(prev, direction));
     };
     const handleMonthChange = (monthStr) => {
         const nextMonth = Number.parseInt(monthStr, 10);
@@ -1448,7 +1479,13 @@ function DatePicker({ date, onDateChange, placeholder = "เลือกวั
     const [open, setOpen] = React.useState(false);
     const isDateDisabled = disabledDates ?? defaultDisabledDates;
     const resolvedToYear = toYear ?? new Date().getFullYear() + 10;
-    return (jsxs(Popover, { open: open && !disabled, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs("div", { className: "relative w-full", children: [jsx(Input, { readOnly: true, disabled: disabled, value: date ? formatDate(date) : "", placeholder: placeholder, className: cn$1("border-border bg-background text-foreground placeholder:text-muted-foreground w-full pr-9", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), id: id, "aria-label": date ? undefined : (ariaLabel ?? placeholder), "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby }), jsx(Calendar$1, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2" })] }) }), jsx(PopoverContent, { className: "w-auto overflow-visible p-0", align: "start", children: jsx(Calendar, { ...{ locale: th }, mode: "single", selected: date, onSelect: (selectedDate) => {
+    return (jsxs(Popover, { open: open && !disabled, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs("div", { className: "relative w-full", children: [jsx(Input, { readOnly: true, disabled: disabled, value: date ? formatDate(date) : "", placeholder: placeholder, className: cn$1("border-border bg-background text-foreground placeholder:text-muted-foreground w-full pr-9", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), id: id, "aria-label": date ? undefined : (ariaLabel ?? placeholder), "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby }), jsx(Calendar$1, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2" })] }) }), jsx(PopoverContent, { className: "w-auto overflow-visible p-0", align: "start", children: jsx(Calendar
+                // Remount on each open so an empty field always starts on this
+                // month. Without it the grid keeps whichever month was last browsed
+                // — and when React reuses this instance for a different field, that
+                // month is one the user was looking at in a *different* box, which
+                // reads as the calendar opening on a random date.
+                , { ...{ locale: th }, mode: "single", selected: date, onSelect: (selectedDate) => {
                         if (selectedDate instanceof Date) {
                             onDateChange?.(selectedDate);
                             setOpen(false);
@@ -1457,7 +1494,7 @@ function DatePicker({ date, onDateChange, placeholder = "เลือกวั
                             onDateChange?.(undefined);
                             setOpen(false);
                         }
-                    }, disabled: isDateDisabled, fromYear: fromYear, toYear: resolvedToYear, initialFocus: true }) })] }));
+                    }, disabled: isDateDisabled, fromYear: fromYear, toYear: resolvedToYear, initialFocus: true }, open ? "open" : "closed") })] }));
 }
 
 const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");