gridsmith-ui 0.10.0 → 0.11.0

package/dist/index.js

@@ -1220,7 +1220,7 @@ function parseTypedDate(text, dayFirst = localeDayFirst()) {
     const mi = monthIndex(m[2]);
     return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[1]));
   }
-  m = /^(\d{1,2})[/.\-](\d{1,2})[/.\-](\d{2,4})$/.exec(t);
+  m = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(t);
   if (m) {
     const a = Number(m[1]), b = Number(m[2]);
     const year = m[3].length === 2 ? 2e3 + Number(m[3]) : Number(m[3]);
@@ -1246,26 +1246,6 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const firstDay = getFirstDayOfWeek(year, month);
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
   const isTopLayer = useOverlayLayer(open);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const t = e.target;
-      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
-      setOpen(false);
-    };
-    const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        focusSegment(0);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("keydown", keyHandler);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("keydown", keyHandler);
-    };
-  }, [open, isTopLayer]);
   const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
   const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
   const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
@@ -1280,18 +1260,39 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   };
   const dayFirst = useMemo(() => localeDayFirst(), []);
   const [segs, setSegs] = useState(() => value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
-  const buffers = useRef({});
+  const [buffers, setBuffers] = useState({});
   const lastCommitted = useRef(null);
   useEffect(() => {
     if (value && value.getTime() === lastCommitted.current) return;
     setSegs(value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
-    buffers.current = {};
+    setBuffers({});
   }, [value]);
   const specs = dateSegments(dayFirst, segs.month && segs.year ? getDaysInMonth(segs.year, segs.month - 1) : 31);
   const segmentRefs = useRef([]);
   const focusSegment = (i) => {
     segmentRefs.current[Math.max(0, Math.min(specs.length - 1, i))]?.focus();
   };
+  const focusSegmentRef = useLatest(focusSegment);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape" && isTopLayer()) {
+        setOpen(false);
+        focusSegmentRef.current(0);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [open, isTopLayer, focusSegmentRef]);
   const [typedInvalid, setTypedInvalid] = useState(false);
   const commitIfComplete = (next) => {
     if (next.day === null || next.month === null || next.year === null) {
@@ -1319,7 +1320,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     if (!d) return;
     const next = { day: d.getDate(), month: d.getMonth() + 1, year: d.getFullYear() };
     setSegs(next);
-    buffers.current = {};
+    setBuffers({});
     commitIfComplete(next);
   };
   const onSegmentKeyDown = (e, index, spec) => {
@@ -1327,6 +1328,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     if (key === "Tab" || key === "Shift" || key === "Escape" || key.startsWith("F")) return;
     e.preventDefault();
     const k = spec.key;
+    const clearBuffer = () => setBuffers((b) => ({ ...b, [k]: "" }));
     if (key === "ArrowLeft") {
       focusSegment(index - 1);
       return;
@@ -1336,39 +1338,39 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
       return;
     }
     if (key === "ArrowUp" || key === "ArrowDown") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, stepValue(spec, segs[k], key === "ArrowUp" ? 1 : -1));
       return;
     }
     if (key === "Home") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.min);
       return;
     }
     if (key === "End") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.max);
       return;
     }
     if (key === "Backspace" || key === "Delete") {
-      if (segs[k] === null && !buffers.current[k]) {
+      if (segs[k] === null && !buffers[k]) {
         focusSegment(index - 1);
         return;
       }
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, null, false);
       return;
     }
     if (/^\d$/.test(key)) {
-      const r = typeDigit(spec, buffers.current[k] ?? "", key);
-      buffers.current[k] = r.advance ? "" : r.buffer;
+      const r = typeDigit(spec, buffers[k] ?? "", key);
+      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
       setSegment(k, r.value);
       if (r.advance) focusSegment(index + 1);
     }
   };
   const shown = (spec) => {
     const k = spec.key;
-    const b = buffers.current[k];
+    const b = buffers[k];
     if (b && segs[k] === null) return b;
     if (segs[k] === null) return spec.placeholder;
     return k === "year" ? String(segs[k]) : pad2(segs[k]);
@@ -1444,7 +1446,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                   "aria-valuetext": segs[k] === null ? "empty" : String(segs[k]),
                   onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
                   onClick: (e) => e.stopPropagation(),
-                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers.current[k] && "text-[var(--ds-text-muted)]"),
+                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
                   children: shown(spec)
                 }
               )
@@ -2288,6 +2290,12 @@ function SliderRange({
     )
   ] });
 }
+function fromValue(v, use24Hour) {
+  const m = /^(\d{1,2}):(\d{2})$/.exec(v);
+  if (!m) return { hour: null, minute: null, period: null };
+  const h24 = Number(m[1]);
+  return use24Hour ? { hour: h24, minute: Number(m[2]), period: null } : { hour: h24 % 12 === 0 ? 12 : h24 % 12, minute: Number(m[2]), period: h24 >= 12 ? "PM" : "AM" };
+}
 var CONTROL_HEIGHT4 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -2365,25 +2373,6 @@ function TimePicker({
   const minutes = generateMinutes(minuteStep);
   const isTopLayer = useOverlayLayer(open);
   useCloseOnFocusOut(open, triggerRef, panelRef, () => setOpen(false), isTopLayer);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        setOpen(false);
-        focusSegment(0);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("keydown", keyHandler);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("keydown", keyHandler);
-    };
-  }, [open, isTopLayer]);
   useEffect(() => {
     if (!open) return;
     const id2 = requestAnimationFrame(() => {
@@ -2421,19 +2410,13 @@ function TimePicker({
     onChange(`${pad(h24)}:${pad(minute)}`);
   }
   const specs = timeSegments(use24Hour);
-  const fromValue = (v) => {
-    const m = /^(\d{1,2}):(\d{2})$/.exec(v);
-    if (!m) return { hour: null, minute: null, period: null };
-    const h24 = Number(m[1]);
-    return use24Hour ? { hour: h24, minute: Number(m[2]), period: null } : { hour: h24 % 12 === 0 ? 12 : h24 % 12, minute: Number(m[2]), period: h24 >= 12 ? "PM" : "AM" };
-  };
-  const [segs, setSegs] = useState(() => fromValue(value));
-  const buffers = useRef({});
+  const [segs, setSegs] = useState(() => fromValue(value, use24Hour));
+  const [buffers, setBuffers] = useState({});
   const lastCommitted = useRef(null);
   useEffect(() => {
     if (value === lastCommitted.current) return;
-    setSegs(fromValue(value));
-    buffers.current = {};
+    setSegs(fromValue(value, use24Hour));
+    setBuffers({});
   }, [value, use24Hour]);
   const segmentRefs = useRef([]);
   const segmentCount = specs.length + (use24Hour ? 0 : 1);
@@ -2441,6 +2424,26 @@ function TimePicker({
     const el = segmentRefs.current[Math.max(0, Math.min(segmentCount - 1, i))];
     el?.focus();
   };
+  const focusSegmentRef = useLatest(focusSegment);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape" && isTopLayer()) {
+        setOpen(false);
+        focusSegmentRef.current(0);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [open, isTopLayer, focusSegmentRef]);
   const commitIfComplete = (next) => {
     if (next.hour === null || next.minute === null) return;
     let h24 = next.hour;
@@ -2462,9 +2465,9 @@ function TimePicker({
   const applyTyped = (text) => {
     const parsed2 = parseTypedTime(text, use24Hour);
     if (!parsed2) return;
-    const next = fromValue(parsed2);
+    const next = fromValue(parsed2, use24Hour);
     setSegs(next);
-    buffers.current = {};
+    setBuffers({});
     commitIfComplete(next);
   };
   const onSegmentKeyDown = (e, index, spec) => {
@@ -2489,33 +2492,34 @@ function TimePicker({
       return;
     }
     const k = spec.key;
+    const clearBuffer = () => setBuffers((b) => ({ ...b, [k]: "" }));
     if (key === "ArrowUp" || key === "ArrowDown") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, stepValue(spec, segs[k], key === "ArrowUp" ? 1 : -1));
       return;
     }
     if (key === "Home") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.min);
       return;
     }
     if (key === "End") {
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, spec.max);
       return;
     }
     if (key === "Backspace" || key === "Delete") {
-      if (segs[k] === null && !buffers.current[k]) {
+      if (segs[k] === null && !buffers[k]) {
         focusSegment(index - 1);
         return;
       }
-      buffers.current[k] = "";
+      clearBuffer();
       setSegment(k, null, false);
       return;
     }
     if (/^\d$/.test(key)) {
-      const r = typeDigit(spec, buffers.current[k] ?? "", key);
-      buffers.current[k] = r.advance ? "" : r.buffer;
+      const r = typeDigit(spec, buffers[k] ?? "", key);
+      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
       setSegment(k, r.value);
       if (r.advance) focusSegment(index + 1);
       return;
@@ -2526,7 +2530,7 @@ function TimePicker({
     }
   };
   const shown = (k, spec) => {
-    const b = buffers.current[k];
+    const b = buffers[k];
     if (b && segs[k] === null) return b;
     return segs[k] === null ? spec.placeholder : pad2(segs[k]);
   };
@@ -2585,7 +2589,7 @@ function TimePicker({
                     "aria-valuetext": segs[k] === null ? "empty" : pad2(segs[k]),
                     onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
                     onClick: (e) => e.stopPropagation(),
-                    className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers.current[k] && "text-[var(--ds-text-muted)]"),
+                    className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
                     children: shown(k, spec)
                   }
                 )