@lotics/ui 27.15.0 → 27.15.1

package/docs/catalog.md

@@ -1056,6 +1056,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   empty — and a ladder of fields is a form with invisible borders. Reach for `InlineDatePicker`
   when a person is expected to ENTER the date, and this when the system already knows it.
   Empty renders a thin rule, not a placeholder; read-only (omit `onChange`) renders text alone.
+  `onChange` fires on CLOSE, not on each pick — one commit per visit, and a dismissed panel
+  still writes whatever was picked in it, which is what makes a single tap enough.
   Worked screen: `examples/tpl_record.tsx` § Progress.
 - **`check_circle`** — `CheckCircle`: the completion ring — `state="none" | "partial" | "done"`,
   springing to a filled check when done, distinct from the square checkbox; the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "27.15.0",
+  "version": "27.15.1",
   "type": "module",
   "exports": {
     "./vite": {

package/src/date_stamp.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Pressable, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
@@ -50,6 +50,10 @@ export function DateStamp(props: DateStampProps) {
   const [hovered, setHovered] = useState(false);
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState<string | null>(value);
+  // The panel emits its pick and asks to close in the SAME event, so a commit
+  // that read `draft` off render state would still see the value the pick just
+  // replaced. This is what the close path reads instead.
+  const picked = useRef<string | null>(value);
 
   const shown = value ? formatDate(value, { locale: tag }) : "";
 
@@ -57,21 +61,34 @@ export function DateStamp(props: DateStampProps) {
   // so a caller can drop this into a column without a conditional.
   if (!onChange) return shown ? <Text size="xs" color="muted">{shown}</Text> : null;
 
+  // Commit on CLOSE, matching `InlineDatePicker`: a single pick and the panel's
+  // Today button both auto-close, so committing on CHANGE instead would fire
+  // twice and a dismissed panel would still write.
+  //
+  // It has to be THIS function rather than `onOpenChange`, and every close has to
+  // route through it: a day press closes the panel via `onRequestClose`, which
+  // never reaches `onOpenChange`, so a commit living there is skipped by the one
+  // path this component exists for — picking a date. The popover shuts, the
+  // correction is discarded, and nothing says so. A stamp that silently drops the
+  // correction is worse than a read-only one.
+  const commit = () => {
+    setOpen(false);
+    if (picked.current !== value) onChange(picked.current ?? "");
+  };
+  const reopen = () => {
+    picked.current = value;
+    setDraft(value);
+    setOpen(true);
+  };
+
   return (
     <Popover
       open={open}
-      onOpenChange={(next) => {
-        setOpen(next);
-        // Commit on CLOSE, matching `InlineDatePicker`: a single pick and the
-        // panel's Today button both auto-close through here, so committing on
-        // change instead would fire twice and a dismissed panel would still write.
-        if (!next && draft !== value) onChange(draft ?? "");
-        if (next) setDraft(value);
-      }}
+      onOpenChange={(next) => { if (next) reopen(); else commit(); }}
     >
       <PopoverTrigger>
         <Pressable
-          onPress={() => setOpen(true)}
+          onPress={reopen}
           onHoverIn={() => setHovered(true)}
           onHoverOut={() => setHovered(false)}
           accessibilityRole="button"
@@ -114,7 +131,13 @@ export function DateStamp(props: DateStampProps) {
         </Pressable>
       </PopoverTrigger>
       <PopoverContent>
-        <DatePickerPanel value={draft} onValueChange={setDraft} format="date" locale={tag} onRequestClose={() => setOpen(false)} />
+        <DatePickerPanel
+          value={draft}
+          onValueChange={(iso) => { picked.current = iso; setDraft(iso); }}
+          format="date"
+          locale={tag}
+          onRequestClose={commit}
+        />
       </PopoverContent>
     </Popover>
   );