@lotics/ui 17.0.2 → 18.1.0

package/src/date_filter.tsx

@@ -6,15 +6,12 @@ import { CONTROL_RADIUS } from "./control_surface";
 import { MenuButton } from "./menu_button";
 import { Calendar, CalendarRangeValue, CalendarRef } from "./date_calendar";
 import { TimePicker } from "./time_picker";
-import { Switch } from "./switch";
 import { useScreenSize } from "./use_screen_size";
 import { SegmentLabels } from "./date_segments";
 import { PresetId, PRESET_IDS, getPresetValue } from "./date_filter_presets";
 import { formatDate } from "./format_date";
 import { useLoticsLocale, useLocaleTag } from "./locale";
 
-type SelectionMode = "single" | "range";
-
 // =============================================================================
 // Types
 // =============================================================================
@@ -39,7 +36,9 @@ export interface DateFilterLabels extends SegmentLabels {
   custom: string;
   from: string;
   to: string;
+  /** Accessible name of the field that OPENS this panel (`DateRangeFilterField`). */
   selectDateRange: string;
+  /** Stands in for a bound that has no date yet — the open half of a range. */
   selectDate: string;
 }
 
@@ -83,6 +82,46 @@ function formatDateDisplay(date: Date | null, locale: string | undefined): strin
   return formatDate(date, { format: "medium", locale });
 }
 
+/**
+ * One end of the range: its name, its date (or a placeholder while it is still
+ * open), and — under `includeTime` — its time. The time field is rendered
+ * disabled rather than omitted while the bound has no date, so picking a date
+ * never shifts the panel under the pointer.
+ */
+function RangeBound(props: {
+  label: string;
+  placeholder: string;
+  bound: { date: Date | null; time: string | null };
+  includeTime: boolean;
+  localeTag: string;
+  segmentLabels: SegmentLabels;
+  onTimeChange: (time: string) => void;
+}) {
+  const { label, placeholder, bound, includeTime, localeTag, segmentLabels, onTimeChange } = props;
+  return (
+    <View style={styles.rangeItem}>
+      <Text size="xs" color="zinc-500">
+        {label}
+      </Text>
+      <Text size="sm" weight="medium" color={bound.date ? "default" : "muted"}>
+        {bound.date ? formatDateDisplay(bound.date, localeTag) : placeholder}
+      </Text>
+      {includeTime && (
+        <View style={{ marginTop: 4 }}>
+          <TimePicker
+            value={bound.time || ""}
+            onValueChange={onTimeChange}
+            disabled={!bound.date}
+            accessibilityLabel={label}
+            locale={localeTag}
+            segmentLabels={segmentLabels}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
 // =============================================================================
 // Main Component
 // =============================================================================
@@ -97,52 +136,46 @@ export function DateFilter(props: DateFilterProps) {
   );
   const screenSize = useScreenSize();
   const calendarRef = useRef<CalendarRef>(null);
-  const [selectionMode, setSelectionMode] = useState<SelectionMode>(() => {
-    if (value.start.date && value.end.date) {
-      if (value.start.date.toDateString() !== value.end.date.toDateString()) {
-        return "range";
-      }
-    }
-    return "single";
-  });
+
+  // A half-picked range is held HERE and never emitted — the same rule
+  // `DatePickerPanel` follows. Emitting it would filter on an open-ended range
+  // the user never asked for (everything from that day onward) the moment they
+  // click a start, which reads as "filtered to that day" while being nothing of
+  // the kind. The panel still shows the pending bound; the filter does not move
+  // until the range is closed. The popover unmounts on close, so this starts
+  // fresh each session.
+  const [pendingStart, setPendingStart] = useState<Date | null>(null);
+
+  /** What the panel DISPLAYS: the pending pick if there is one, else the value. */
+  const shown = useMemo<DateFilterValue>(
+    () =>
+      pendingStart
+        ? { start: { date: pendingStart, time: value.start.time }, end: { date: null, time: value.end.time } }
+        : value,
+    [pendingStart, value],
+  );
 
   const calendarValue: CalendarRangeValue = useMemo(
-    () => ({ start: value.start.date, end: value.end.date }),
-    [value.start.date, value.end.date],
+    () => ({ start: shown.start.date, end: shown.end.date }),
+    [shown.start.date, shown.end.date],
   );
 
+  // The calendar owns which bound a click lands on (see `nextRangeSelection`);
+  // this decides whether that lands in the value or stays pending, and carries
+  // the times across, since a click never changes them.
   const handleCalendarChange = useCallback(
     (newValue: CalendarRangeValue) => {
-      // In single mode, one click selects a single date immediately
-      if (selectionMode === "single" && newValue.start && !newValue.end) {
-        onValueChange({
-          start: { date: newValue.start, time: value.start.time },
-          end: { date: newValue.start, time: value.end.time },
-        });
+      if (newValue.start && !newValue.end) {
+        setPendingStart(newValue.start);
         return;
       }
+      setPendingStart(null);
       onValueChange({
         start: { date: newValue.start, time: value.start.time },
         end: { date: newValue.end, time: value.end.time },
       });
     },
-    [onValueChange, value.start.time, value.end.time, selectionMode],
-  );
-
-  const handleModeChange = useCallback(
-    (isRange: boolean) => {
-      const newMode: SelectionMode = isRange ? "range" : "single";
-      setSelectionMode(newMode);
-
-      // Switching to single: collapse range to start date
-      if (newMode === "single" && value.start.date) {
-        onValueChange({
-          start: value.start,
-          end: { date: value.start.date, time: value.start.time },
-        });
-      }
-    },
-    [value, onValueChange],
+    [onValueChange, value.start.time, value.end.time],
   );
 
   const handleStartTimeChange = useCallback(
@@ -178,6 +211,8 @@ export function DateFilter(props: DateFilterProps) {
 
   const handlePresetSelect = useCallback(
     (id: PresetId) => {
+      // A preset replaces the whole range, so any half-picked start is abandoned.
+      setPendingStart(null);
       // Re-clicking the active preset clears the filter
       if (activePresetId === id) {
         onValueChange({ start: { date: null, time: null }, end: { date: null, time: null } });
@@ -191,13 +226,6 @@ export function DateFilter(props: DateFilterProps) {
         return;
       }
 
-      // Auto-switch to range mode for multi-day presets
-      if (presetValue.start.date && presetValue.end.date) {
-        const isSingleDay =
-          presetValue.start.date.toDateString() === presetValue.end.date.toDateString();
-        if (!isSingleDay && selectionMode === "single") setSelectionMode("range");
-      }
-
       onValueChange(presetValue);
 
       if (presetValue.start.date) {
@@ -207,7 +235,7 @@ export function DateFilter(props: DateFilterProps) {
         );
       }
     },
-    [onValueChange, activePresetId, selectionMode],
+    [onValueChange, activePresetId],
   );
 
   const renderPreset = (id: PresetId) => {
@@ -243,56 +271,28 @@ export function DateFilter(props: DateFilterProps) {
           locale={localeTag}
         />
 
-        {selectionMode === "range" ? (
-          <View style={styles.rangeDisplay}>
-            {value.start.date ? (
-              <View style={styles.rangeItem}>
-                <Text size="xs" color="zinc-500">
-                  {labels.from}
-                </Text>
-                <Text size="sm" weight="medium">
-                  {formatDateDisplay(value.start.date, localeTag) || labels.selectDate}
-                </Text>
-                {includeTime && (
-                  <View style={{ marginTop: 4 }}>
-                    <TimePicker
-                      value={value.start.time || ""}
-                      onValueChange={handleStartTimeChange}
-                    />
-                  </View>
-                )}
-              </View>
-            ) : (
-              <View style={styles.rangeItem} />
-            )}
-            {value.end.date ? (
-              <View style={styles.rangeItem}>
-                <Text size="xs" color="zinc-500">
-                  {labels.to}
-                </Text>
-                <Text size="sm" weight="medium">
-                  {formatDateDisplay(value.end.date, localeTag) || labels.selectDate}
-                </Text>
-                {includeTime && value.end.date && (
-                  <View style={{ marginTop: 4 }}>
-                    <TimePicker
-                      value={value.end.time || ""}
-                      onValueChange={handleEndTimeChange}
-                    />
-                  </View>
-                )}
-              </View>
-            ) : (
-              <View style={styles.rangeItem} />
-            )}
-          </View>
-        ) : null}
-
-        <View style={styles.modeToggle}>
-          <Switch value={selectionMode === "range"} onChange={handleModeChange} />
-          <Text size="sm" color="muted">
-            {labels.selectDateRange}
-          </Text>
+        {/* Both bounds are ALWAYS shown: they are what tells the user a range is
+            half-picked and which end is still open. Hiding the empty one (or the
+            whole row) is how a click stops explaining itself. */}
+        <View style={styles.rangeDisplay}>
+          <RangeBound
+            label={labels.from}
+            placeholder={labels.selectDate}
+            bound={shown.start}
+            includeTime={includeTime}
+            localeTag={localeTag}
+            segmentLabels={labels}
+            onTimeChange={handleStartTimeChange}
+          />
+          <RangeBound
+            label={labels.to}
+            placeholder={labels.selectDate}
+            bound={shown.end}
+            includeTime={includeTime}
+            localeTag={localeTag}
+            segmentLabels={labels}
+            onTimeChange={handleEndTimeChange}
+          />
         </View>
       </View>
 
@@ -343,18 +343,11 @@ const styles = StyleSheet.create({
   mainContent: {
     flex: 1,
   },
-  modeToggle: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 8,
-  },
   rangeDisplay: {
     flexDirection: "row",
     gap: 16,
     paddingTop: 8,
+    paddingBottom: 8,
   },
   rangeItem: {
     flex: 1,

package/src/date_picker.tsx

@@ -56,6 +56,8 @@ export interface DatePickerLabels extends SegmentLabels {
   done: string;
   /** Inline error when a typed date is left incomplete/invalid (never committed). */
   invalidDate: string;
+  /** Inline error when a typed time is left half-entered (never committed). */
+  invalidTime: string;
   /** Quick action: add a time to a date-only value (`optionalTime`). */
   addTime: string;
   /** Accessible name + tooltip: drop the time, keeping the date (`optionalTime`). */
@@ -228,6 +230,7 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
                     accessibilityLabel={mergedLabels.startTime}
                     value={timeText(startIso)}
                     onValueChange={(t) => handleRangeTime("start", t)}
+                    locale={locale}
                   />
                 </View>
                 <View style={styles.timeCol}>
@@ -238,6 +241,7 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
                     accessibilityLabel={mergedLabels.endTime}
                     value={timeText(endIso)}
                     onValueChange={(t) => handleRangeTime("end", t)}
+                    locale={locale}
                   />
                 </View>
               </>
@@ -261,6 +265,7 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
                   accessibilityLabel={mergedLabels.time}
                   value={timeText(value ?? "")}
                   onValueChange={handleSingleTime}
+                  locale={locale}
                 />
               </View>
             )}

package/src/date_range_selection.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from "vitest";
+import { nextRangeSelection, type DateRangeSelection } from "./date_range_selection";
+
+const d = (day: number): Date => new Date(2026, 6, day);
+const ymd = (x: Date | null): string =>
+  x ? `${x.getFullYear()}-${String(x.getMonth() + 1).padStart(2, "0")}-${String(x.getDate()).padStart(2, "0")}` : "null";
+const EMPTY: DateRangeSelection = { start: null, end: null };
+
+describe("nextRangeSelection", () => {
+  it("opens a range on the first click", () => {
+    const next = nextRangeSelection(EMPTY, d(14));
+    expect(ymd(next.start)).toBe("2026-07-14");
+    expect(next.end).toBeNull();
+  });
+
+  it("closes the open range on the second click", () => {
+    const next = nextRangeSelection({ start: d(14), end: null }, d(20));
+    expect(ymd(next.start)).toBe("2026-07-14");
+    expect(ymd(next.end)).toBe("2026-07-20");
+  });
+
+  it("orders the bounds when the later day is clicked first", () => {
+    const next = nextRangeSelection({ start: d(20), end: null }, d(14));
+    expect(ymd(next.start)).toBe("2026-07-14");
+    expect(ymd(next.end)).toBe("2026-07-20");
+  });
+
+  // The whole point of dropping the single/range mode: a range must be
+  // reachable from EVERY starting value, including one that is already a
+  // single day. Under the mode, a single-day value silently disabled range
+  // selection entirely — two clicks just moved the one day around.
+  it("reaches a range from a single-day value", () => {
+    const singleDay: DateRangeSelection = { start: d(31), end: d(31) };
+    const opened = nextRangeSelection(singleDay, d(1));
+    const closed = nextRangeSelection(opened, d(20));
+    expect(ymd(closed.start)).toBe("2026-07-01");
+    expect(ymd(closed.end)).toBe("2026-07-20");
+  });
+
+  it("reaches a range from a closed multi-day range", () => {
+    const opened = nextRangeSelection({ start: d(1), end: d(5) }, d(10));
+    expect(ymd(opened.start)).toBe("2026-07-10");
+    expect(opened.end).toBeNull();
+    expect(ymd(nextRangeSelection(opened, d(12)).end)).toBe("2026-07-12");
+  });
+
+  // Selecting one day is clicking it twice — the replacement for the mode.
+  it("selects a single day when the same day is clicked twice", () => {
+    const next = nextRangeSelection(nextRangeSelection(EMPTY, d(14)), d(14));
+    expect(ymd(next.start)).toBe("2026-07-14");
+    expect(ymd(next.end)).toBe("2026-07-14");
+  });
+
+  it("never mutates the selection it is given", () => {
+    const current: DateRangeSelection = { start: d(14), end: null };
+    nextRangeSelection(current, d(20));
+    expect(ymd(current.start)).toBe("2026-07-14");
+    expect(current.end).toBeNull();
+  });
+});

package/src/date_range_selection.ts

@@ -0,0 +1,32 @@
+// Pure click→range math for the range calendar. Kept free of React/RN so the
+// selection contract can be unit-tested directly rather than through a
+// component.
+
+/** The two bounds a range calendar edits. `end` is null while a range is open. */
+export interface DateRangeSelection {
+  start: Date | null;
+  end: Date | null;
+}
+
+/**
+ * The selection after clicking `date`.
+ *
+ * One rule, no modes: a click either OPENS a range (when none is open) or
+ * CLOSES the open one. Selecting a single day is clicking the same day twice —
+ * there is deliberately no separate single-day mode, because a mode that
+ * changes what a click means is a mode the user can get stuck in with no way
+ * to express a range at all.
+ *
+ * Bounds come back ordered, so clicking the later day first is just another way
+ * to select rather than an error the caller has to undo.
+ */
+export function nextRangeSelection(
+  current: DateRangeSelection,
+  date: Date,
+): DateRangeSelection {
+  // Nothing picked yet, or the last range is already closed → open a new one.
+  if (!current.start || current.end) return { start: date, end: null };
+  return date < current.start
+    ? { start: date, end: current.start }
+    : { start: current.start, end: date };
+}

package/src/date_segments.test.ts

@@ -3,6 +3,8 @@ import { resolveLocaleTag, en as enLocale, vi as viLocale } from "./locale";
 import {
   getDateLayout,
   getTimeLayout,
+  timeSegmentsConfig,
+  segmentsToTime,
   fieldOrder,
   to12h,
   from12h,
@@ -285,3 +287,49 @@ describe("getTimeLayout", () => {
     expect(vn.hour12).toBe(false);
   });
 });
+
+// -----------------------------------------------------------------------------
+// Time-only field. The point of the segmented time field is that 12/24-hour is
+// OUR locale's decision — a native `<input type="time">` takes it from the
+// browser's UI locale and ignores `lang`, so a Vietnamese screen on an en-US
+// browser rendered "01:45 PM" beside its own 24-hour text.
+// -----------------------------------------------------------------------------
+
+describe("timeSegmentsConfig", () => {
+  it("derives 24-hour display from the locale, not the runtime", () => {
+    expect(timeSegmentsConfig("vi-VN").layout.hour12).toBe(false);
+    expect(timeSegmentsConfig("de-DE").layout.hour12).toBe(false);
+  });
+
+  it("derives 12-hour display where the locale uses one", () => {
+    const layout = timeSegmentsConfig("en-US").layout;
+    expect(layout.hour12).toBe(true);
+    expect(layout.segments.some((s) => s.kind === "field" && s.type === "dayPeriod")).toBe(true);
+  });
+
+  it("keeps the value canonical 24-hour under a 12-hour locale", () => {
+    const cfg = timeSegmentsConfig("en-US");
+    expect(cfg.toValue(cfg.toBuffer("13:45"))).toBe("13:45");
+    expect(cfg.toValue(cfg.toBuffer("00:30"))).toBe("00:30");
+  });
+
+  it("round-trips every hour of the day", () => {
+    const cfg = timeSegmentsConfig("en-US");
+    for (let h = 0; h < 24; h++) {
+      const iso = `${String(h).padStart(2, "0")}:15`;
+      expect(cfg.toValue(cfg.toBuffer(iso))).toBe(iso);
+    }
+  });
+
+  it("reads an empty or unparseable time as empty", () => {
+    const cfg = timeSegmentsConfig("vi-VN");
+    for (const bad of ["", "banana", "25:00", "12:99"]) {
+      expect(cfg.isEmpty(cfg.toBuffer(bad))).toBe(true);
+    }
+  });
+
+  it("emits nothing while only half the time is typed", () => {
+    expect(segmentsToTime({ year: null, month: null, day: null, hour: 13, minute: null })).toBeNull();
+    expect(segmentsToTime({ year: null, month: null, day: null, hour: null, minute: 45 })).toBeNull();
+  });
+});

package/src/date_segments.ts

@@ -356,3 +356,37 @@ export function dateSegmentsConfig(locale: string, hasTime: boolean): SegmentsCo
     parse: (text) => parseText(text, hasTime),
   };
 }
+
+// -----------------------------------------------------------------------------
+// Time-only field — same engine, no date part. The canonical value is 24-hour
+// "HH:mm" REGARDLESS of how the locale displays it: `hour12` decides whether the
+// user sees "01:45 PM" or "13:45", never what is stored or emitted.
+// -----------------------------------------------------------------------------
+
+const TIME_RE = /^(\d{1,2}):(\d{2})/;
+
+/** "HH:mm" → buffer. Anything unparseable or out of range reads as empty. */
+export function timeToSegments(time: string): SegmentBuffer {
+  const m = TIME_RE.exec(time);
+  if (!m) return emptyBuffer();
+  const hour = Number(m[1]);
+  const minute = Number(m[2]);
+  if (hour > 23 || minute > 59) return emptyBuffer();
+  return { year: null, month: null, day: null, hour, minute };
+}
+
+/** Buffer → canonical "HH:mm", or null while either half is still missing. */
+export function segmentsToTime(buffer: SegmentBuffer): string | null {
+  if (buffer.hour == null || buffer.minute == null) return null;
+  return `${pad(buffer.hour)}:${pad(buffer.minute)}`;
+}
+
+export function timeSegmentsConfig(locale: string): SegmentsConfig {
+  return {
+    layout: getTimeLayout(locale),
+    toBuffer: timeToSegments,
+    toValue: segmentsToTime,
+    isEmpty: (buffer) => buffer.hour == null && buffer.minute == null,
+    parse: (text) => segmentsToTime(timeToSegments(text.trim())),
+  };
+}

package/src/inline_time_picker.tsx

@@ -1,8 +1,8 @@
-import { useCallback } from "react";
-import type { KeyboardEvent } from "react";
+import { useCallback, useRef } from "react";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { TimePicker } from "./time_picker";
+import { useLoticsLocale } from "./locale";
 import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTimePickerProps {
@@ -27,17 +27,15 @@ export interface InlineTimePickerProps {
 export function InlineTimePicker(props: InlineTimePickerProps) {
   const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel , variant } = props;
   const edit = useInlineEdit<string>({ value, onSave });
-
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Escape") edit.cancel();
-      else if (e.key === "Enter") void edit.commit();
-    },
-    [edit],
-  );
+  const dateLabels = useLoticsLocale().datePicker;
+  // Segments emit ONLY on a complete "HH:mm", so a half-typed entry (an hour and
+  // no minute) reaches the draft as "" and would otherwise commit as a silent
+  // clear. Blocking on it keeps the entry fixable instead of wiping the value.
+  const incomplete = useRef(false);
 
   const onBlur = useCallback(() => {
     if (controls === "buttons") return;
+    if (incomplete.current) return;
     void edit.commit();
   }, [controls, edit]);
 
@@ -52,7 +50,7 @@ export function InlineTimePicker(props: InlineTimePickerProps) {
       onCommit={() => void edit.commit()}
       onCancel={edit.cancel}
       saving={edit.saving}
-      error={edit.error}
+      error={edit.error ?? (incomplete.current ? dateLabels.invalidTime : null)}
       disabled={disabled}
       accessibilityLabel={accessibilityLabel}
       affordance={<Icon name="clock" size={18} color={colors.zinc[400]} />}
@@ -61,7 +59,8 @@ export function InlineTimePicker(props: InlineTimePickerProps) {
         value={edit.draft}
         onValueChange={edit.setDraft}
         onBlur={onBlur}
-        onKeyDown={onKeyDown}
+        onEscape={edit.cancel}
+        onIncompleteChange={(next) => { incomplete.current = next; }}
         autoFocus
         accessibilityLabel={accessibilityLabel}
       />