@qijenchen/design-system 0.1.0-beta.80 → 0.1.0-beta.82

package/dist/components/DatePicker/date-picker.js

@@ -10,11 +10,21 @@ import { Button } from "../Button/button.js";
 import { SurfaceFooter } from "../../patterns/overlay-surface/overlay-surface.js";
 import { useFieldContext, useResolvedFieldSize, useResolvedFieldInvalid, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant } from "../Field/field-context.js";
 import { isoToTimeParts, timePartsToString, TimeColumns } from "../TimePicker/time-columns.js";
+const dtfCache = /* @__PURE__ */ new Map();
+function getDateTimeFormatter(locale, options) {
+  const key = locale + "|" + JSON.stringify(options);
+  let fmt = dtfCache.get(key);
+  if (!fmt) {
+    fmt = new Intl.DateTimeFormat(locale, options);
+    dtfCache.set(key, fmt);
+  }
+  return fmt;
+}
 function formatDate(value, options = {}) {
   const date = value instanceof Date ? value : new Date(value);
   if (Number.isNaN(date.getTime())) return String(value);
   if (options.formatOptions || options.locale) {
-    return new Intl.DateTimeFormat(options.locale ?? "en-US", options.formatOptions ?? { year: "numeric", month: "2-digit", day: "2-digit" }).format(date);
+    return getDateTimeFormatter(options.locale ?? "en-US", options.formatOptions ?? { year: "numeric", month: "2-digit", day: "2-digit" }).format(date);
   }
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
@@ -289,13 +299,9 @@ const DatePicker = React.forwardRef(
             if (e.key === "Escape") setOpen(false);
           },
           className: cn(
-            fieldWrapperStyles({ mode: "edit", variant, size }),
+            fieldWrapperStyles({ mode: "edit", variant, size, error }),
             "text-left cursor-pointer",
             "focus-visible:outline-none",
-            error && [
-              "border-error hover:border-error-hover",
-              "focus-within:border-error focus-within:hover:border-error"
-            ],
             className
           ),
           ...props,
@@ -404,9 +410,12 @@ const DatePicker = React.forwardRef(
             )
           }
         ) }),
-        showTime && // Footer:消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight padding,
+        (showTime || needConfirm) && // Footer:消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight padding,
         // 不再 hand-coded p-2 / Separator / ml-auto wrapper 三層垃圾)。
         // 「此刻」加 mr-auto 把後面 button 推右(對齊 Ant `marginInlineStart: auto` on OK)。
+        // 2026-07-05 D4:gate 由 `showTime` 改 `(showTime || needConfirm)` 對齊 Range(:1068)—
+        // date-only `needConfirm` 時 onSelect 只寫 draft 且不關 popover,footer「確定」是唯一
+        // commit 路徑,原 gate 漏渲 footer = draft 永遠無法 commit 的死路。
         /* @__PURE__ */ jsxs(SurfaceFooter, { children: [
           /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
           needConfirm ? /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleConfirm, disabled: !draft, children: "確定" }) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: () => setOpen(false), children: "關閉" })
@@ -453,6 +462,9 @@ const DatePickerRange = React.forwardRef(
     const [open, setOpen] = React.useState(false);
     const [draft, setDraft] = React.useState(value ?? [null, null]);
     const [activeEnd, setActiveEnd] = React.useState("start");
+    const startBtnRef = React.useRef(null);
+    const endBtnRef = React.useRef(null);
+    const hasInteractedOutsideRef = React.useRef(false);
     const lastOpenRef = React.useRef(open);
     React.useEffect(() => {
       if (!lastOpenRef.current && open) setDraft(value ?? [null, null]);
@@ -567,12 +579,8 @@ const DatePickerRange = React.forwardRef(
           "data-error": error ? "" : void 0,
           "data-state": open ? "open" : "closed",
           className: cn(
-            fieldWrapperStyles({ mode: "edit", size }),
+            fieldWrapperStyles({ mode: "edit", size, error }),
             "cursor-text",
-            error && [
-              "border-error hover:border-error-hover",
-              "focus-within:border-error focus-within:hover:border-error"
-            ],
             className
           ),
           ...props,
@@ -581,6 +589,7 @@ const DatePickerRange = React.forwardRef(
               "button",
               {
                 type: "button",
+                ref: startBtnRef,
                 onClick: () => openWithActive("start"),
                 "data-active-end": open && activeEnd === "start" ? "true" : void 0,
                 "aria-label": resolvedPlaceholder[0],
@@ -600,6 +609,7 @@ const DatePickerRange = React.forwardRef(
               "button",
               {
                 type: "button",
+                ref: endBtnRef,
                 onClick: () => openWithActive("end"),
                 "data-active-end": open && activeEnd === "end" ? "true" : void 0,
                 "aria-label": resolvedPlaceholder[1],
@@ -630,104 +640,122 @@ const DatePickerRange = React.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-label": "日期區間選擇", className: "flex flex-col flex-1 min-h-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
-          CalendarTimeContainer,
-          {
-            showTime,
-            showSeconds,
-            calendar: /* @__PURE__ */ jsx(
-              DateGrid,
-              {
-                mode: "single",
-                selected: activeDate,
-                onSelect: (date) => {
-                  if (!date) return;
-                  if (isOutOfRangeOrder(date)) return;
-                  const preservedTime = isoToTimeParts(activeEnd === "start" ? draft[0] : draft[1]) ?? activeTime;
-                  const nextIso = showTime ? combineDateAndTime(date, preservedTime) : dateToIso(date);
-                  const nextDraft = activeEnd === "start" ? [nextIso, draft[1]] : [draft[0], nextIso];
-                  commitRange(nextDraft);
-                  if (!showTime) {
-                    if (activeEnd === "start") {
-                      setActiveEnd("end");
-                      if (!needConfirm && nextDraft[0] && nextDraft[1]) setOpen(false);
-                    } else if (!needConfirm && nextDraft[0] && nextDraft[1]) {
-                      setOpen(false);
-                    }
-                  }
-                },
-                modifiers: showTime ? {} : rangeModifiers,
-                modifiersClassNames: {
-                  // ── Range visual canonical(2026-05-03 v8 stadium pattern)──
-                  // v5 修「白色破圖」用 pseudo 蓋全 cell 矩形,但新副作用:button 圓比矩形小,
-                  // 4 corner triangle 區域 grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。
-                  // v8 對齊 Ant `cell-range-start::before { border-radius: 9999px 0 0 9999px }`:
-                  // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium
-                  // 左半圓 EXACTLY OVERLAY button 圓的左半弧(同 center 同 radius 14)→ 無縫
-                  // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續
-                  // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →
-                  // popover white 顯露(乾淨 breathing)
-                  rangeStart: cn(
-                    "[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
-                    "before:content-[''] before:absolute before:inset-y-0",
-                    "before:left-0 before:-right-[2px]",
-                    "before:bg-neutral-selected before:pointer-events-none",
-                    "before:rounded-l-full"
-                    // ← stadium 左半圓 matches button 圓的左半弧
-                  ),
-                  rangeEnd: cn(
-                    "[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
-                    "before:content-[''] before:absolute before:inset-y-0",
-                    "before:-left-[2px] before:right-0",
-                    "before:bg-neutral-selected before:pointer-events-none",
-                    "before:rounded-r-full"
-                    // ← 鏡像
-                  ),
-                  rangeMiddle: cn(
-                    "before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]",
-                    "before:bg-neutral-selected before:pointer-events-none",
-                    "[&>button]:!bg-transparent [&>button]:!text-foreground"
-                  )
-                },
-                disabled: isOutOfRangeOrder,
-                numberOfMonths: showTime ? 1 : 2,
-                defaultMonth: activeDate ?? startDate ?? endDate ?? void 0,
-                autoFocus: true
-              }
-            ),
-            timePanel: /* @__PURE__ */ jsx(
-              TimePickerSidePanel,
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: "w-auto p-0",
+          align: "start",
+          onInteractOutside: () => {
+            hasInteractedOutsideRef.current = true;
+          },
+          onCloseAutoFocus: (e) => {
+            var _a;
+            e.preventDefault();
+            if (!hasInteractedOutsideRef.current) {
+              (_a = (activeEnd === "start" ? startBtnRef : endBtnRef).current) == null ? void 0 : _a.focus();
+            }
+            hasInteractedOutsideRef.current = false;
+          },
+          children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-label": "日期區間選擇", className: "flex flex-col flex-1 min-h-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
+              CalendarTimeContainer,
               {
-                value: activeTime,
-                onChange: (time) => {
-                  const target = activeDate ?? /* @__PURE__ */ new Date();
-                  setActive(combineDateAndTime(target, time));
-                },
+                showTime,
                 showSeconds,
-                minuteStep,
-                secondStep
+                calendar: /* @__PURE__ */ jsx(
+                  DateGrid,
+                  {
+                    mode: "single",
+                    selected: activeDate,
+                    onSelect: (date) => {
+                      if (!date) return;
+                      if (isOutOfRangeOrder(date)) return;
+                      const preservedTime = isoToTimeParts(activeEnd === "start" ? draft[0] : draft[1]) ?? activeTime;
+                      const nextIso = showTime ? combineDateAndTime(date, preservedTime) : dateToIso(date);
+                      const nextDraft = activeEnd === "start" ? [nextIso, draft[1]] : [draft[0], nextIso];
+                      commitRange(nextDraft);
+                      if (!showTime) {
+                        if (activeEnd === "start") {
+                          setActiveEnd("end");
+                          if (!needConfirm && nextDraft[0] && nextDraft[1]) setOpen(false);
+                        } else if (!needConfirm && nextDraft[0] && nextDraft[1]) {
+                          setOpen(false);
+                        }
+                      }
+                    },
+                    modifiers: showTime ? {} : rangeModifiers,
+                    modifiersClassNames: {
+                      // ── Range visual canonical(2026-05-03 v8 stadium pattern)──
+                      // v5 修「白色破圖」用 pseudo 蓋全 cell 矩形,但新副作用:button 圓比矩形小,
+                      // 4 corner triangle 區域 grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。
+                      // v8 對齊 Ant `cell-range-start::before { border-radius: 9999px 0 0 9999px }`:
+                      // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium
+                      // 左半圓 EXACTLY OVERLAY button 圓的左半弧(同 center 同 radius 14)→ 無縫
+                      // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續
+                      // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →
+                      // popover white 顯露(乾淨 breathing)
+                      rangeStart: cn(
+                        "[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
+                        "before:content-[''] before:absolute before:inset-y-0",
+                        "before:left-0 before:-right-[2px]",
+                        "before:bg-neutral-selected before:pointer-events-none",
+                        "before:rounded-l-full"
+                        // ← stadium 左半圓 matches button 圓的左半弧
+                      ),
+                      rangeEnd: cn(
+                        "[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0",
+                        "before:content-[''] before:absolute before:inset-y-0",
+                        "before:-left-[2px] before:right-0",
+                        "before:bg-neutral-selected before:pointer-events-none",
+                        "before:rounded-r-full"
+                        // ← 鏡像
+                      ),
+                      rangeMiddle: cn(
+                        "before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]",
+                        "before:bg-neutral-selected before:pointer-events-none",
+                        "[&>button]:!bg-transparent [&>button]:!text-foreground"
+                      )
+                    },
+                    disabled: isOutOfRangeOrder,
+                    numberOfMonths: showTime ? 1 : 2,
+                    defaultMonth: activeDate ?? startDate ?? endDate ?? void 0,
+                    autoFocus: true
+                  }
+                ),
+                timePanel: /* @__PURE__ */ jsx(
+                  TimePickerSidePanel,
+                  {
+                    value: activeTime,
+                    onChange: (time) => {
+                      const target = activeDate ?? /* @__PURE__ */ new Date();
+                      setActive(combineDateAndTime(target, time));
+                    },
+                    showSeconds,
+                    minuteStep,
+                    secondStep
+                  }
+                )
               }
-            )
-          }
-        ) }),
-        (showTime || needConfirm) && // Footer 消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight)。
-        // showTime Range 無「此刻」(對齊 Ant `showNow={multiple ? false : showNow}`)→ 只有 確定 走 justify-end。
-        // date-only Range needConfirm:左 此刻(mr-auto)+ 右 確定。
-        /* @__PURE__ */ jsxs(SurfaceFooter, { children: [
-          !showTime && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
-          needConfirm ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "primary",
-              size: "sm",
-              onClick: handleConfirm,
-              disabled: showTime ? activeEnd === "start" ? !draft[0] : !draft[0] || !draft[1] : !draft[0] || !draft[1],
-              children: "確定"
-            }
-          ) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: () => setOpen(false), children: "關閉" })
-        ] })
-      ] }) })
+            ) }),
+            (showTime || needConfirm) && // Footer 消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight)。
+            // showTime Range 無「此刻」(對齊 Ant `showNow={multiple ? false : showNow}`)→ 只有 確定 走 justify-end。
+            // date-only Range needConfirm:左 此刻(mr-auto)+ 右 確定。
+            /* @__PURE__ */ jsxs(SurfaceFooter, { children: [
+              !showTime && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleNow, className: "mr-auto", children: "此刻" }),
+              needConfirm ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  onClick: handleConfirm,
+                  disabled: showTime ? activeEnd === "start" ? !draft[0] : !draft[0] || !draft[1] : !draft[0] || !draft[1],
+                  children: "確定"
+                }
+              ) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: () => setOpen(false), children: "關閉" })
+            ] })
+          ] })
+        }
+      )
     ] });
   }
 );
@@ -738,9 +766,11 @@ const datePickerMeta = {
   family: 4,
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'selected' = range 帶持續選中(before:bg-neutral-selected,本檔自有);'active' 移除 — 全檔無按壓
+  // 視覺(data-active-end 是定位 attr 非按壓 token;2026-07-07 詞彙統一 DS-wide 交叉掃補修)。
+  states: ["default", "hover", "selected", "focus-visible", "disabled"],
   tokens: {
-    bg: [],
+    bg: ["bg-neutral-selected"],
     fg: ["text-fg-disabled", "text-fg-muted"],
     ring: []
   }