@lotics/ui 11.7.3 → 11.8.0

package/src/inline_date_picker.tsx

@@ -1,24 +1,28 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { DatePickerPanel } from "./date_picker";
-import { isoHasTime } from "./date_picker_value";
+import { DateField } from "./date_field";
+import { isoHasTime, resolveDateCommit } from "./date_picker_value";
 import { formatDate } from "./format_date";
 import { ActivityIndicator } from "./activity_indicator";
 import { type InlineEditBackground, InlineEditView } from "./inline_edit";
 import { useLoticsLocale } from "./locale";
+import { getInteractionModality } from "./interaction_modality";
+import { shouldOpenOnFocus } from "./inline_focus";
 
 export interface InlineDatePickerProps {
   /** ISO date (`2026-05-22`) or datetime (`2026-05-22T14:30`). */
   value: string | null;
   onSave: (next: string) => void | Promise<void>;
   /** Unset the date to empty. Provide it to make the value clearable: the
-   *  calendar's own "Clear" button then unsets the field through this callback
-   *  (without `onClear` an empty selection is ignored — a required date can't be
-   *  emptied). Kept separate from `onSave` (whose next is a non-empty string). */
+   *  calendar's own "Clear" button and an emptied typed entry then unset the
+   *  field through this callback (without `onClear` an empty result is ignored —
+   *  a required date can't be emptied). Kept separate from `onSave` (whose next
+   *  is a non-empty string). */
   onClear?: () => void | Promise<void>;
   /** "date" (default) or "datetime". */
   format?: "date" | "datetime";
@@ -26,7 +30,7 @@ export interface InlineDatePickerProps {
    *  until a time is added). Ignored when `format` is "datetime" (time always on). */
   optionalTime?: boolean;
   placeholder?: string;
-  /** BCP-47 locale for the calendar and the displayed date. */
+  /** BCP-47 locale for the calendar, the displayed date, and the typed segment order. */
   locale?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -35,105 +39,235 @@ export interface InlineDatePickerProps {
 }
 
 /**
- * An inline-editable date / datetime. The value reads as a formatted date;
- * clicking it floats the calendar (`DatePickerPanel`) in a popover anchored to
- * the view, so the row never changes height. The selection commits when the
- * panel closes (immediately for a single date, after time entry for datetime);
- * dismissing without a change reverts.
+ * An inline-editable date / datetime with TWO entry paths:
+ *
+ * - **Pointer** (unchanged): clicking the resting value floats the calendar
+ *   (`DatePickerPanel`) in a popover anchored to the view; the selection
+ *   commits when the panel closes, dismissing without a change reverts.
+ * - **Keyboard** (typed): Tab/keyboard focus swaps the value for the kit's
+ *   segmented `DateField` with the first segment focused — type the date in the
+ *   locale's own order (dd/MM/yyyy where the locale says so; separators advance
+ *   a single-digit day/month), Enter or blur commits, Escape reverts, and
+ *   Alt+ArrowDown still opens the calendar. A partial entry never commits and
+ *   never clears the stored value — the error affordance shows instead.
+ *
+ * The row never changes height in either mode.
  */
 export function InlineDatePicker(props: InlineDatePickerProps) {
   const { value, onSave, onClear, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel , background } = props;
-  const labels = useLoticsLocale().inline;
+  const locales = useLoticsLocale();
+  const inlineLabels = locales.inline;
+  const dateLabels = locales.datePicker;
+
+  const [editing, setEditing] = useState(false);
   const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState<string | null>(value);
+  // Canonical session draft ("" when empty) — written by the segments AND the
+  // calendar panel, so both paths commit through the same resolution.
+  const [draft, setDraft] = useState<string>(value ?? "");
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  // The latest panel value, read at close time (the draft state can be stale in
-  // the close handler's closure).
-  const draftRef = useRef<string | null>(value);
-
-  const commit = useCallback(async () => {
-    const next = draftRef.current;
-    if (next === value) return;
-    // The panel's "Clear" empties the draft (onValueChange("")). Treat that as an
-    // explicit unset when the field is clearable (onClear + a current value);
-    // otherwise ignore an empty draft — a required date can't be emptied.
-    if (!next) {
-      if (!onClear || !value) return;
-      setSaving(true);
-      setError(null);
-      try {
-        await onClear();
-      } catch (e) {
-        setError(e instanceof Error && e.message ? e.message : labels.saveError);
-      } finally {
-        setSaving(false);
-      }
+
+  // The latest draft, read at commit time (state can be stale in the close
+  // handler's closure).
+  const draftRef = useRef<string>(value ?? "");
+  // True while the segments hold a partial typed entry (no complete value).
+  const incompleteRef = useRef(false);
+  // A commit in flight — a trailing blur/close must not commit twice.
+  const committing = useRef(false);
+  // Timestamp of the last programmatic focus restore (ours or the popover's) —
+  // that focus must not re-open the typing session. See `inline_focus.ts`.
+  const suppressedAt = useRef<number | null>(null);
+  // The popover anchor AND the focus-restore target: the resting view in view
+  // mode (via `PopoverTrigger`), the `DateField` frame while editing.
+  const anchorRef = useRef<View>(null);
+  const wasEditing = useRef(false);
+
+  const startSession = useCallback(() => {
+    draftRef.current = value ?? "";
+    setDraft(value ?? "");
+    incompleteRef.current = false;
+    setError(null);
+  }, [value]);
+
+  const updateDraft = useCallback((next: string) => {
+    draftRef.current = next;
+    setDraft(next);
+    setError(null);
+  }, []);
+
+  const commitSession = useCallback(async () => {
+    if (committing.current) return;
+    const decision = resolveDateCommit({
+      draft: draftRef.current,
+      value,
+      incomplete: incompleteRef.current,
+      clearable: !!onClear,
+    });
+    if (decision.kind === "invalid") {
+      // Partial typed entry: never commit, never wipe the stored value — show
+      // the error and keep the session (the entry stays fixable).
+      setError(dateLabels.invalidDate);
+      return;
+    }
+    if (decision.kind === "none") {
+      setEditing(false);
       return;
     }
+    committing.current = true;
     setSaving(true);
     setError(null);
     try {
-      await onSave(next);
+      if (decision.kind === "clear") {
+        if (onClear) await onClear();
+      } else {
+        await onSave(decision.value);
+      }
+      setEditing(false);
     } catch (e) {
-      setError(e instanceof Error && e.message ? e.message : labels.saveError);
+      // Stay in the session so the entry isn't lost — show the error.
+      setError(e instanceof Error && e.message ? e.message : inlineLabels.saveError);
     } finally {
+      committing.current = false;
       setSaving(false);
     }
-  }, [value, onSave, onClear, labels.saveError]);
+  }, [value, onSave, onClear, dateLabels.invalidDate, inlineLabels.saveError]);
+
+  const closeAndCommit = useCallback(() => {
+    setOpen(false);
+    // The popover restores focus to its trigger on close — that programmatic
+    // focus must not immediately re-open the typing session.
+    suppressedAt.current = Date.now();
+    void commitSession();
+  }, [commitSession]);
 
-  const onOpenChange = useCallback(
+  const handleOpenChange = useCallback(
     (next: boolean) => {
       if (next) {
-        draftRef.current = value;
-        setDraft(value);
+        // A fresh popover session from the resting view (the typing session,
+        // when editing, is already running on the same draft).
+        if (!editing) startSession();
         setOpen(true);
       } else {
-        setOpen(false);
-        void commit();
+        // Commit on panel close: a single-date pick and "Today" auto-close
+        // through onRequestClose → closeAndCommit; outside-click/Escape land here.
+        closeAndCommit();
       }
     },
-    [value, commit],
+    [editing, startSession, closeAndCommit],
   );
 
-  // `format` here is the field config (date vs datetime); the display formatter only needs
-  // whether to show a time → map it to the orthogonal `time` flag. In optionalTime mode the
-  // value's own shape decides.
+  // Keyboard focus on the resting value opens the TYPING session (popover shut,
+  // first segment focused). Pointer focus never lands here — mousedown records
+  // "pointer" modality before focus fires — so a click still opens the calendar
+  // exactly once, through the popover trigger press.
+  const handleViewFocus = useCallback(() => {
+    if (disabled) return;
+    if (!shouldOpenOnFocus(getInteractionModality(), suppressedAt.current, Date.now())) return;
+    startSession();
+    setEditing(true);
+  }, [disabled, startSession]);
+
+  // Pointer down in the segments area, or Alt+ArrowDown in a segment.
+  const openPicker = useCallback(() => {
+    if (!disabled) setOpen(true);
+  }, [disabled]);
+
+  // Commit once focus leaves the whole field — unless the calendar is open
+  // (it steals focus while it floats; its close commits instead).
+  const handleFieldBlur = useCallback(() => {
+    if (open) return;
+    void commitSession();
+  }, [open, commitSession]);
+
+  const handleEscape = useCallback(() => {
+    // With the calendar open, Escape belongs to the popover (its document-level
+    // handler closes it and commits through onOpenChange).
+    if (open) return;
+    setError(null);
+    setEditing(false);
+  }, [open]);
+
+  const handleIncompleteChange = useCallback((incomplete: boolean) => {
+    incompleteRef.current = incomplete;
+  }, []);
+
+  // When the typing session closes while a segment still holds focus (Enter,
+  // Escape), the unmount drops focus to <body> and the next Tab would restart
+  // from the top of the page. Return focus to the resting view, arming the
+  // suppression window so the restore doesn't re-open the session. A Tab-away
+  // blur-commit leaves focus on the next field, so this never steals it back.
+  useEffect(() => {
+    if (wasEditing.current && !editing && typeof document !== "undefined" && document.activeElement === document.body) {
+      suppressedAt.current = Date.now();
+      anchorRef.current?.focus();
+    }
+    wasEditing.current = editing;
+  }, [editing]);
+
+  // `format` is the field config (date vs datetime); the display/segments only need
+  // whether a time shows. In optionalTime mode the value's own shape decides — the
+  // resting view follows the stored value, the segments follow the session draft
+  // (the panel's "Add time" grows the segments live).
   const showTime = optionalTime ? isoHasTime(value) : format === "datetime";
   const display = formatDate(value, { time: showTime, locale, emptyLabel: "" });
+  const fieldHasTime = optionalTime ? isoHasTime(draft) : format === "datetime";
+
+  const trailing = saving ? (
+    <ActivityIndicator size={16} color={colors.zinc[400]} />
+  ) : (
+    <Icon name={format === "datetime" ? "calendar-clock" : "calendar"} size={18} color={colors.zinc[400]} />
+  );
 
   return (
     <View>
-      <Popover open={open && !disabled} onOpenChange={onOpenChange} side="bottom" align="start">
-        <PopoverTrigger>
-          <InlineEditView
-            background={background}
-            display={display}
-            placeholder={placeholder}
+      <Popover open={open && !disabled} onOpenChange={handleOpenChange} triggerRef={anchorRef} side="bottom" align="start">
+        {editing ? (
+          <DateField
+            triggerRef={anchorRef}
+            parts={[draft]}
+            onPartChange={(_, next) => updateDraft(next)}
+            hasTime={fieldHasTime}
+            segmentLabels={dateLabels}
+            locale={locale}
             disabled={disabled}
-            active={open && !disabled}
-            accessibilityLabel={accessibilityLabel}
-            // A rest affordance (like the select's chevron): a calendar glyph marks
-            // the field as a tappable date control even when empty — no hover / pointer
-            // cursor needed, so it reads as interactive on touch.
-            trailing={saving ? <ActivityIndicator size={16} color={colors.zinc[400]} /> : <Icon name={format === "datetime" ? "calendar-clock" : "calendar"} size={18} color={colors.zinc[400]} />}
+            placeholder={placeholder}
+            partLabels={accessibilityLabel ? [accessibilityLabel] : undefined}
+            autoFocus
+            onBlur={handleFieldBlur}
+            onEscape={handleEscape}
+            onOpenPicker={openPicker}
+            onIncompleteChange={handleIncompleteChange}
+            onActivate={openPicker}
+            rightSlot={trailing}
           />
-        </PopoverTrigger>
+        ) : (
+          <PopoverTrigger>
+            <InlineEditView
+              background={background}
+              display={display}
+              placeholder={placeholder}
+              disabled={disabled}
+              active={open && !disabled}
+              accessibilityLabel={accessibilityLabel}
+              onFocus={handleViewFocus}
+              // A rest affordance (like the select's chevron): a calendar glyph marks
+              // the field as a tappable date control even when empty — no hover / pointer
+              // cursor needed, so it reads as interactive on touch.
+              trailing={trailing}
+            />
+          </PopoverTrigger>
+        )}
         <PopoverContent>
           <DatePickerPanel
             value={draft}
-            onValueChange={(v) => {
-              draftRef.current = v;
-              setDraft(v);
-            }}
+            onValueChange={updateDraft}
             format={format}
             optionalTime={optionalTime}
             locale={locale}
             // Commit on panel close. A single-date pick and the "Today" button
-            // auto-close through here — route it through onOpenChange so commit
-            // runs. A bare setOpen(false) is a controlled close the Popover never
-            // reports to onOpenChange, so the pick/clear would be silently dropped.
-            onRequestClose={() => onOpenChange(false)}
+            // auto-close through here — a bare setOpen(false) would be a
+            // controlled close the Popover never reports, silently dropping it.
+            onRequestClose={closeAndCommit}
           />
         </PopoverContent>
       </Popover>

package/src/inline_edit.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState, type ReactNode, type Ref } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode, type Ref } from "react";
 import { View, StyleSheet, type GestureResponderEvent, type TextStyle } from "react-native";
 import { Text } from "./text";
 import { IconButton } from "./icon_button";
@@ -8,6 +8,8 @@ import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
+import { getInteractionModality } from "./interaction_modality";
+import { shouldOpenOnFocus } from "./inline_focus";
 
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
  *  The view box matches it — same height, padding, and a 1px transparent border
@@ -132,6 +134,11 @@ interface InlineEditViewProps {
   /** True while the field's popover (select/date) is open: wears the 2px active
    *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`). */
   active?: boolean;
+  /** Raw focus on the resting view, any modality. The input-swap editors use it
+   *  (via `InlineEditFrame`) to open edit mode on KEYBOARD focus; the popover
+   *  editors leave it unset — focus never auto-opens an overlay (the WAI-ARIA
+   *  combobox contract: the popup opens on Enter/Space, not on Tab arrival). */
+  onFocus?: () => void;
   /** Strike + mute the resting value (a completed/superseded item that stays editable). */
   struck?: boolean;
   /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
@@ -150,7 +157,7 @@ interface InlineEditViewProps {
  * select/date inline editors (it forwards ref + onPress to a `PopoverTrigger`).
  */
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, background = "tint", ref } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, background = "tint", onFocus, ref } = props;
   // Stop the press here so an inline editor nested in a pressable row (a task
   // row that expands on press) edits the field instead of triggering the row.
   const handlePress = onPress
@@ -164,6 +171,7 @@ export function InlineEditView(props: InlineEditViewProps) {
       ref={ref}
       disabled={disabled}
       onPress={handlePress}
+      onFocus={onFocus}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
@@ -187,7 +195,9 @@ export function InlineEditView(props: InlineEditViewProps) {
 /**
  * The shared shell of an inline-editable INPUT (text, number). View mode is an
  * `InlineEditView`; on press it swaps to the input at the same height — no
- * layout shift — plus the optional save/cancel controls. Compose it with
+ * layout shift — plus the optional save/cancel controls. KEYBOARD focus on the
+ * closed view also opens edit mode (type → Tab → type through a form); pointer
+ * focus never does — the press handler owns the click path. Compose it with
  * `useInlineEdit`. (Overlay-based editors — select, date — use `InlineEditView`
  * directly as a `Popover` trigger instead.)
  */
@@ -211,13 +221,43 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     affordance,
   } = props;
 
+  const viewRef = useRef<View>(null);
+  const suppressedAt = useRef<number | null>(null);
+  const wasEditing = useRef(editing);
+
+  // Keyboard focus opens edit mode immediately; the input's own `autoFocus`
+  // then moves focus into it. Pointer focus never lands here (mousedown records
+  // "pointer" modality before focus fires), so a click still opens exactly once,
+  // through onPress.
+  const handleViewFocus = useCallback(() => {
+    if (disabled) return;
+    if (!shouldOpenOnFocus(getInteractionModality(), suppressedAt.current, Date.now())) return;
+    onBegin();
+  }, [disabled, onBegin]);
+
+  // When edit mode closes while its input (or a ✓/✕ button) still holds focus —
+  // Enter, Escape, the buttons — the unmount drops focus to <body> and the next
+  // Tab would restart from the top of the page. Return focus to the view button,
+  // arming the suppression window so the programmatic focus doesn't re-open the
+  // editor it just closed. A Tab-away blur-commit leaves focus on the next field
+  // (not <body>), so this never steals focus back.
+  useEffect(() => {
+    if (wasEditing.current && !editing && typeof document !== "undefined" && document.activeElement === document.body) {
+      suppressedAt.current = Date.now();
+      viewRef.current?.focus();
+    }
+    wasEditing.current = editing;
+  }, [editing]);
+
   if (!editing) {
     return (
       <InlineEditView
+        ref={viewRef}
         background={background}
         display={display}
         placeholder={placeholder}
         onPress={onBegin}
+        onFocus={handleViewFocus}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
         struck={struck}

package/src/inline_focus.test.ts

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { ensureModalityListeners, getInteractionModality } from "./interaction_modality";
+import { FOCUS_OPEN_SUPPRESS_MS, shouldOpenOnFocus } from "./inline_focus";
+
+describe("shouldOpenOnFocus — the inline keyboard-entry gate", () => {
+  it("keyboard focus opens the editor", () => {
+    expect(shouldOpenOnFocus("keyboard", null, 1_000)).toBe(true);
+  });
+
+  it("pointer focus never opens the editor — the click path stays press-driven", () => {
+    expect(shouldOpenOnFocus("pointer", null, 1_000)).toBe(false);
+    // …even outside any suppression window.
+    expect(shouldOpenOnFocus("pointer", 100, 100_000)).toBe(false);
+  });
+
+  it("a programmatic focus restore inside the suppression window does not re-open", () => {
+    const restoredAt = 5_000;
+    expect(shouldOpenOnFocus("keyboard", restoredAt, restoredAt)).toBe(false);
+    expect(shouldOpenOnFocus("keyboard", restoredAt, restoredAt + FOCUS_OPEN_SUPPRESS_MS - 1)).toBe(false);
+  });
+
+  it("suppression expires — a later Tab arrival opens again", () => {
+    const restoredAt = 5_000;
+    expect(shouldOpenOnFocus("keyboard", restoredAt, restoredAt + FOCUS_OPEN_SUPPRESS_MS)).toBe(true);
+  });
+});
+
+describe("interaction modality tracker", () => {
+  it("records keyboard on keydown and pointer on mousedown (Tab-vs-click focus)", () => {
+    ensureModalityListeners();
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
+    expect(getInteractionModality()).toBe("keyboard");
+    document.dispatchEvent(new MouseEvent("mousedown"));
+    expect(getInteractionModality()).toBe("pointer");
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }));
+    expect(getInteractionModality()).toBe("keyboard");
+  });
+});

package/src/inline_focus.ts

@@ -0,0 +1,40 @@
+// =============================================================================
+// Inline editor focus-entry policy
+//
+// The keyboard-entry contract for the input-swap inline editors (text, number,
+// time, date): a KEYBOARD focus landing on the closed editor opens edit mode
+// immediately with the input focused — a typist gets type → Tab → type without
+// pressing Enter on every field. Pointer focus never opens here: mousedown
+// records "pointer" modality before the focus event fires, and the press
+// handler already owns the click path — so a click can never double-trigger.
+//
+// A PROGRAMMATIC focus restore (the editor returning focus to its closed view
+// after Enter/Escape, or a popover restoring focus to its trigger on close)
+// arms a short suppression window first, so the restored focus doesn't
+// immediately re-open the editor it just closed.
+//
+// Pure logic, kept RN-free so it can be unit-tested directly.
+// =============================================================================
+
+import { type InteractionModality } from "./interaction_modality";
+
+/** How long (ms) after a programmatic focus restore a focus event is treated as
+ *  the restore itself rather than a fresh keyboard arrival. Restores run
+ *  synchronously (effect cleanup) or within a frame — 250ms covers both with
+ *  margin while never swallowing a real Tab press later. */
+export const FOCUS_OPEN_SUPPRESS_MS = 250;
+
+/**
+ * Should a focus event on a CLOSED inline editor open edit mode?
+ * `suppressedAt` is the timestamp of the last programmatic focus restore
+ * (null when none) — the caller keeps it in a ref and stamps it right before
+ * calling `.focus()`.
+ */
+export function shouldOpenOnFocus(
+  modality: InteractionModality,
+  suppressedAt: number | null,
+  now: number,
+): boolean {
+  if (modality !== "keyboard") return false;
+  return suppressedAt === null || now - suppressedAt >= FOCUS_OPEN_SUPPRESS_MS;
+}

package/src/interaction_modality.ts

@@ -0,0 +1,38 @@
+// =============================================================================
+// Interaction modality — the document-level keyboard-vs-pointer tracker
+//
+// `:focus-visible` is a MODALITY heuristic: a control reacts to keyboard focus
+// but not pointer focus. One focus event carries no modality, so it can only be
+// read at the document level: a single module-level tracker records the last
+// interaction. Consumed by `useFocusRing` (paint the ring on keyboard focus
+// only) and the inline editors (keyboard focus opens edit mode — type → Tab →
+// type — while pointer focus defers to the press handler). Web-only — on
+// native / SSR there is no `document`, so it stays "pointer" and everything
+// keyboard-gated stays off.
+// =============================================================================
+
+export type InteractionModality = "keyboard" | "pointer";
+
+let lastModality: InteractionModality = "pointer";
+let listenersInstalled = false;
+
+export function ensureModalityListeners(): void {
+  if (listenersInstalled) return;
+  if (typeof document === "undefined") return;
+  listenersInstalled = true;
+  // Capture phase so the modality is recorded BEFORE any control's focus handler
+  // runs. Installed once for the app's lifetime (the browser's own `:focus-visible`
+  // heuristic listens the same way) — per-mount add/remove would be the bug.
+  const opts = { capture: true, passive: true } as const;
+  document.addEventListener("keydown", () => { lastModality = "keyboard"; }, opts);
+  document.addEventListener("pointerdown", () => { lastModality = "pointer"; }, opts);
+  document.addEventListener("mousedown", () => { lastModality = "pointer"; }, opts);
+  document.addEventListener("touchstart", () => { lastModality = "pointer"; }, opts);
+}
+
+/** The modality of the most recent user interaction. Read it inside a focus
+ *  handler to tell a Tab-focus ("keyboard") from a click-focus ("pointer") —
+ *  the same signal the browser's `:focus-visible` uses. */
+export function getInteractionModality(): InteractionModality {
+  return lastModality;
+}

package/src/locale.tsx

@@ -107,7 +107,7 @@ export const en: LoticsLocale = {
     descending: ", descending",
   },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
-  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM" },
+  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
@@ -187,7 +187,7 @@ export const vi: LoticsLocale = {
     descending: " (giảm dần)",
   },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
-  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH" },
+  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },