@lotics/ui 25.0.0 → 25.1.0

package/docs/catalog.md

@@ -720,7 +720,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   just text. **`InlineSelect` is single OR multi** — pass `multi` for a tag SET (`value: T[]`,
   commits the new set on popover-CLOSE; selected tags render as badges via `renderSelected`),
   mirroring `Select`'s `multi` axis; there is NO separate tag component. Both modes take
-  `allowCustom` (a create-a-tag/option row) + `searchable`. **`InlineMemberSelect` takes `avatarOnly`**
+  `allowCustom` (a create-a-tag/option row) + `searchable`, plus **`autoFocus`** to open the list
+  on mount — for the picker a `ReferenceField`'s `Change` just dropped the reader into, so the
+  correction stays one gesture; leave it off for a field that is merely empty, since stealing the
+  list open on load is a different act. **`InlineMemberSelect` takes `avatarOnly`**
   — the resting display is the bare AVATAR (no name/chevron, a dashed "add" ghost when unset) for a
   DENSE row where the name won't fit (a task-row assignee); the dropdown rows still show avatar + name.
   `InlineDatePicker` takes a **`tone`**
@@ -858,7 +861,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `.save` / `.saving` / `.cancel`), while `openLabel` stays a prop because it names the
   DESTINATION for a screen reader, which only the caller knows. **EDIT IN THE PEEK** (`onSave`):
   a fact carrying a `name` is editable and that key is what it saves under (omit `name` for a
-  derived value that rides along read-only); `multiline` for an address or an account block.
+  derived value that rides along read-only); `multiline` for an address or an account block;
+  `type: "date"` swaps the draft's text input for a `DatePicker` and formats the read value —
+  the fact's `value` stays the canonical ISO string on both sides, so a date is never edited as
+  free text and the format ambiguity never reaches the record.
   `Edit` swaps the SAME grid's value cells for inputs — a DRAFT, so nothing commits until `Save`,
   which fires `onSave` with **only the facts that CHANGED** (never a snapshot, so a lock or
   `before_update` sees the real edit). This is what lets a peek hold editors at all: a

package/examples/tpl_record.tsx

@@ -127,16 +127,19 @@ interface Customer {
   /** Runs past one line at a peek's width — the case a fixture of short values
    *  never exercises, and the one where a read value and its editor diverge. */
   address: string;
+  /** ISO. A date fact, so the peek's draft has one non-text editor to render —
+   *  left as text it would take whatever shape the reader typed. */
+  since: string;
 }
 
 // Atlas ships WITHOUT a tax ID — attach it to see the billing gate + the
 // inline Tax ID fix-up in the Customer section.
 const KNOWN_CUSTOMERS: Customer[] = [
-  { id: "cus_01", name: "Northwind Traders", code: "KH-0148", taxId: "0312456780", contact: "Mara Lindqvist", city: "Gothenburg", address: "Ringvägen 118, 4 tr, 116 61 Stockholm, Sweden" },
-  { id: "cus_02", name: "Harbor Freight Lines", code: "KH-0203", taxId: "0312998820", contact: "Diego Alvarez", city: "Rotterdam", address: "Waalhaven Oostzijde 81, 3087 BM Rotterdam, Netherlands" },
-  { id: "cus_03", name: "Summit Packaging Co.", code: "KH-0231", taxId: "0301557742", contact: "Priya Nair", city: "Singapore", address: "9 Tuas Bay Walk, #03-14, Singapore 637803" },
-  { id: "cus_04", name: "Atlas Distribution", code: "KH-0117", taxId: "", contact: "Tom Becker", city: "Hamburg", address: "Grosser Grasbrook 9, 20457 Hamburg, Germany" },
-  { id: "cus_05", name: "Bluewater Logistics", code: "KH-0294", taxId: "0312004455", contact: "Lena Fischer", city: "Antwerp", address: "Noorderlaan 127, 2030 Antwerpen, Belgium" },
+  { id: "cus_01", name: "Northwind Traders", code: "KH-0148", taxId: "0312456780", contact: "Mara Lindqvist", city: "Gothenburg", address: "Ringvägen 118, 4 tr, 116 61 Stockholm, Sweden", since: "2019-03-14" },
+  { id: "cus_02", name: "Harbor Freight Lines", code: "KH-0203", taxId: "0312998820", contact: "Diego Alvarez", city: "Rotterdam", address: "Waalhaven Oostzijde 81, 3087 BM Rotterdam, Netherlands", since: "2021-11-02" },
+  { id: "cus_03", name: "Summit Packaging Co.", code: "KH-0231", taxId: "0301557742", contact: "Priya Nair", city: "Singapore", address: "9 Tuas Bay Walk, #03-14, Singapore 637803", since: "2023-06-19" },
+  { id: "cus_04", name: "Atlas Distribution", code: "KH-0117", taxId: "", contact: "Tom Becker", city: "Hamburg", address: "Grosser Grasbrook 9, 20457 Hamburg, Germany", since: "2018-01-30" },
+  { id: "cus_05", name: "Bluewater Logistics", code: "KH-0294", taxId: "0312004455", contact: "Lena Fischer", city: "Antwerp", address: "Noorderlaan 127, 2030 Antwerpen, Belgium", since: "2022-09-08" },
 ];
 
 const TAX_ID_RE = /^\d{10}(\d{3})?$/;
@@ -736,6 +739,7 @@ function PartyRow({ role, rec, options, placeholder, onPick, onOpen, onUnset, on
             { label: "City", value: rec.city, name: "city" },
             { label: "Tax ID", value: rec.taxId, name: "taxId" },
             { label: "Address", value: rec.address, name: "address", multiline: true },
+            { label: "Customer since", value: rec.since, name: "since", type: "date" },
           ]}
           accessibilityLabel={`${rec.name} — details`}
           openLabel={`Open ${rec.name}`}
@@ -899,6 +903,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
               city: patch.city ?? c.city,
               taxId: patch.taxId ?? c.taxId,
               address: patch.address ?? c.address,
+              since: patch.since ?? c.since,
             }
           : c,
       ),
@@ -1241,6 +1246,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
       // Not collected at create — a new party is attached from three fields and
       // the rest is filled in later, which is what the peek's Edit is for.
       address: "",
+      since: "",
     };
     setCustomers((prev) => [...prev, c]);
     setCustomerId(c.id);
@@ -1714,6 +1720,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                         { label: "Contact", value: customer.contact, name: "contact" },
                         { label: "City", value: customer.city, name: "city" },
                         { label: "Address", value: customer.address, name: "address", multiline: true },
+                        { label: "Customer since", value: customer.since, name: "since", type: "date" },
                       ]}
                       accessibilityLabel={`${customer.name} — details`}
                       /* NO `onOpen`. The peek carries every fact this record

package/package.json

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

package/src/inline_select.tsx

@@ -13,6 +13,16 @@ import { useLoticsLocale } from "./locale";
 
 interface InlineSelectBaseProps<T extends string, D = unknown> {
   options: PickerOption<T, D>[];
+  /**
+   * Open the list on mount.
+   *
+   * For a picker that REPLACED something the reader just dismissed — a
+   * `ReferenceField` whose `onChange` fired, which means "wrong one, I'm about
+   * to pick another". Landing them on a closed picker charges a second press to
+   * resume a correction they already started. Leave it off for a field that is
+   * merely empty: stealing the list open on load is not the same act.
+   */
+  autoFocus?: boolean;
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
    *  Omit for a plain label list — both render through the same `OptionList`. */
   renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
@@ -119,9 +129,9 @@ function InlineSelectShell(props: {
 }
 
 export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, variant, actions } = props;
+  const { options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, variant, actions, autoFocus = false } = props;
   const labels = useLoticsLocale().inline;
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(autoFocus);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [draft, setDraft] = useState<T[]>(props.multi ? props.value : []);

package/src/reference_field.tsx

@@ -1,7 +1,9 @@
 import { useRef, useState } from "react";
 import { View } from "react-native";
 import { Button } from "./button";
+import { DatePicker } from "./date_picker";
 import { DetailRow, DetailTable } from "./detail_row";
+import { formatDate } from "./format_date";
 import { Divider } from "./divider";
 import { InlineEditView } from "./inline_edit";
 import { InlineStatic } from "./inline_static";
@@ -10,7 +12,7 @@ import { DialogSectionHeadingTitle } from "./section_heading";
 import { Text } from "./text";
 import { TextInputField } from "./text_input_field";
 import { TextLink } from "./text_link";
-import { useLoticsLocale } from "./locale";
+import { useLocaleTag, useLoticsLocale } from "./locale";
 
 /**
  * A REFERENCE to another record, rendered as a FIELD VALUE.
@@ -73,6 +75,17 @@ export interface ReferenceFact {
   name?: string;
   /** A value that runs past one line — an address, a bank account block. */
   multiline?: boolean;
+  /**
+   * What the draft edits this fact WITH. `text` (default) is a text input;
+   * `date` is the kit's `DatePicker`, and the value is its ISO string.
+   *
+   * A date is not a short string that happens to look like one. Left as text it
+   * takes any shape the reader types, and the field it saves into accepts one —
+   * so the format ambiguity is only discovered by whatever reads the record
+   * next, which is exactly the kind of wrong a draft is supposed to catch at
+   * the input.
+   */
+  type?: "text" | "date";
 }
 
 export interface ReferenceFieldProps {
@@ -130,6 +143,9 @@ export function ReferenceField(props: ReferenceFieldProps) {
   // The peek's verbs are the component's OWN chrome, so they come from the
   // pack — hardcoding them shipped "Open"/"Remove" into every localized app.
   const t = useLoticsLocale().referenceField;
+  // The tag a date control renders in — `vi` yields dd/MM/yyyy with no per-
+  // instance prop, which is the same resolution `DatePicker` does internally.
+  const localeTag = useLocaleTag();
   const anchor = useRef<View>(null);
   const [peekOpen, setPeekOpen] = useState(false);
   const [draft, setDraft] = useState<Record<string, string> | null>(null);
@@ -263,14 +279,22 @@ export function ReferenceField(props: ReferenceFieldProps) {
             {facts.map((f) =>
               editing && f.name != null ? (
                 <DetailRow key={f.label} label={f.label}>
-                  <TextInputField
-                    value={draft[f.name] ?? ""}
-                    onChangeText={(v) => setDraft({ ...draft, [f.name as string]: v })}
-                    multiline={f.multiline}
-                    autoGrow={f.multiline}
-                    disabled={saving}
-                    accessibilityLabel={f.label}
-                  />
+                  {f.type === "date" ? (
+                    <DatePicker
+                      value={draft[f.name] || null}
+                      onValueChange={(v) => setDraft({ ...draft, [f.name as string]: v })}
+                      disabled={saving}
+                    />
+                  ) : (
+                    <TextInputField
+                      value={draft[f.name] ?? ""}
+                      onChangeText={(v) => setDraft({ ...draft, [f.name as string]: v })}
+                      multiline={f.multiline}
+                      autoGrow={f.multiline}
+                      disabled={saving}
+                      accessibilityLabel={f.label}
+                    />
+                  )}
                 </DetailRow>
               ) : (
                 <DetailRow key={f.label} label={f.label}>
@@ -281,7 +305,15 @@ export function ReferenceField(props: ReferenceFieldProps) {
                       editors, border and all, and reaching for it means the
                       alignment survives the control geometry changing. Copying
                       the box here instead would drift the first time it does. */}
-                  <InlineStatic value={f.value} multiline={f.multiline} />
+                  <InlineStatic
+                    /* A date's canonical value is its ISO string — that is what
+                       the picker reads and what Save sends — so the FORMATTING
+                       happens here, where the type is known. Handing the caller
+                       that job would make `value` mean two things (display in
+                       read, ISO in the draft) and the two would drift. */
+                    value={f.type === "date" ? formatDate(f.value, { locale: localeTag }) : f.value}
+                    multiline={f.multiline}
+                  />
                 </DetailRow>
               ),
             )}