@eintrek/erp-theme 1.4.14 → 1.4.16

package/dist/components/ui/select.d.ts

@@ -3,6 +3,17 @@ import * as React from "react";
 declare function Select({ onValueChange, onOpenChange, open, defaultOpen, ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+/**
+ * The trigger fills its container.
+ *
+ * Upstream ships w-fit, which sizes the control to whatever text happens to
+ * be in it — so a field reading "เลือก..." is narrow and the same field with
+ * a name in it is wide, and a form of them looks ragged. Across these apps
+ * 102 call sites had already written w-full to undo it and 158 had not,
+ * which is a default fighting almost everyone who uses it.
+ *
+ * A caller that wants the compact behaviour passes w-fit.
+ */
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: "sm" | "default";
 }): import("react/jsx-runtime").JSX.Element;

package/dist/index.esm.js

@@ -263,8 +263,19 @@ function SelectGroup({ ...props }) {
 function SelectValue({ ...props }) {
     return jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
+/**
+ * The trigger fills its container.
+ *
+ * Upstream ships w-fit, which sizes the control to whatever text happens to
+ * be in it — so a field reading "เลือก..." is narrow and the same field with
+ * a name in it is wide, and a form of them looks ragged. Across these apps
+ * 102 call sites had already written w-full to undo it and 158 had not,
+ * which is a default fighting almost everyone who uses it.
+ *
+ * A caller that wants the compact behaviour passes w-fit.
+ */
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn$1("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+    return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn$1("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", ...props }) {
     return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn$1("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
@@ -731,28 +742,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 +912,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 +1490,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 +1505,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");