@lotics/ui 1.12.0 → 1.13.0

package/src/date_field.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { DateSegments } from "./date_segments_field";
+import { SegmentLabels, dateSegmentsConfig } from "./date_segments";
+
+export interface DateFieldProps {
+  /** Canonical ISO value parts: one (single) or two (range, "start"/"end"). */
+  parts: string[];
+  onPartChange: (index: number, value: string) => void;
+  hasTime: boolean;
+  segmentLabels: SegmentLabels;
+  /** BCP-47 locale driving segment order + 12/24h. Defaults to "en-US". */
+  locale?: string;
+  disabled?: boolean;
+  /** Shown when every part is empty and the field is unfocused. */
+  placeholder?: string;
+  /** Accessible name per part (e.g. ["Start date", "End date"]). */
+  partLabels?: string[];
+  testID?: string;
+  /** Pointer click in a segment area — the "open the calendar to select" path. */
+  onActivate?: () => void;
+  /** Fires once focus leaves the whole field. */
+  onBlur?: () => void;
+  /** Rendered inside the border, after the segments (the calendar button). */
+  rightSlot?: React.ReactNode;
+  /** Ref to the frame, used to anchor the popover. */
+  triggerRef?: React.RefObject<View | null>;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * The bordered date field: a single framed control wrapping one segment group
+ * (single date/datetime) or two joined by an en-dash (a range), plus the calendar
+ * button. Owns the focus ring (focus-within across both groups) and the empty-state
+ * placeholder. The segment editing lives in {@link DateSegments}.
+ */
+export function DateField(props: DateFieldProps) {
+  const {
+    parts,
+    onPartChange,
+    hasTime,
+    segmentLabels,
+    locale,
+    disabled,
+    placeholder,
+    partLabels,
+    testID,
+    onActivate,
+    onBlur,
+    rightSlot,
+    triggerRef,
+    style,
+  } = props;
+
+  const [focused, setFocused] = useState(false);
+  const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (blurTimer.current) clearTimeout(blurTimer.current);
+    },
+    [],
+  );
+
+  // Debounce focus-within: tabbing from one part's last segment to the next part's
+  // first fires blur-then-focus, which must not flip the ring off.
+  const handleSegmentFocus = useCallback(() => {
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+      blurTimer.current = null;
+    }
+    setFocused(true);
+  }, []);
+
+  const handleSegmentBlur = useCallback(() => {
+    blurTimer.current = setTimeout(() => {
+      setFocused(false);
+      onBlur?.();
+    }, 0);
+  }, [onBlur]);
+
+  // The whole field is pressable: a pointer click anywhere opens the calendar.
+  const handlePointerDown = useCallback(() => {
+    if (!disabled) onActivate?.();
+  }, [disabled, onActivate]);
+
+  const config = useMemo(() => dateSegmentsConfig(locale ?? "en-US", hasTime), [locale, hasTime]);
+
+  const isEmpty = parts.every((part) => !part);
+  const showPlaceholder = !!placeholder && isEmpty && !focused;
+
+  return (
+    <View
+      ref={triggerRef}
+      onPointerDown={handlePointerDown}
+      style={[
+        styles.frame,
+        focused && !disabled && styles.frameFocused,
+        disabled && styles.frameDisabled,
+        style,
+      ]}
+      testID={testID}
+    >
+      <View style={styles.segmentsArea}>
+        {parts.map((part, index) => (
+          <React.Fragment key={index}>
+            {index > 0 && (
+              <Text size="sm" color="muted">
+                {" – "}
+              </Text>
+            )}
+            <DateSegments
+              value={part}
+              onChange={(next) => onPartChange(index, next)}
+              config={config}
+              segmentLabels={segmentLabels}
+              disabled={disabled}
+              accessibilityLabel={partLabels?.[index]}
+              onFocus={handleSegmentFocus}
+              onBlur={handleSegmentBlur}
+            />
+          </React.Fragment>
+        ))}
+        {/* Rendered last so it paints over the segments; click-transparent. */}
+        {showPlaceholder && (
+          <View style={styles.placeholderOverlay}>
+            <Text size="sm" color="muted" numberOfLines={1}>
+              {placeholder}
+            </Text>
+          </View>
+        )}
+      </View>
+      {rightSlot}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 40,
+    paddingHorizontal: 8,
+    gap: 4,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.background,
+  },
+  frameFocused: {
+    outlineColor: colors.black,
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineOffset: -2,
+  },
+  frameDisabled: {
+    backgroundColor: colors.zinc["50"],
+  },
+  segmentsArea: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  placeholderOverlay: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: "center",
+    backgroundColor: colors.background,
+    pointerEvents: "none",
+  },
+});

package/src/date_picker.tsx

@@ -1,45 +1,420 @@
-import { colors } from "@lotics/ui/colors";
-import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { Popover, PopoverContent } from "./popover";
+import { Calendar, CalendarRangeValue } from "./date_calendar";
+import { TimeField } from "./time_field";
+import { DateField } from "./date_field";
+import { SegmentLabels } from "./date_segments";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { Divider } from "./divider";
+import {
+  DatePickerFormat,
+  hasTimeFormat,
+  isoToDate,
+  isRangeFormat,
+  nowIso,
+  timeText,
+  withCalendarDate,
+  withTimeOfDay,
+} from "./date_picker_value";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface DatePickerLabels extends SegmentLabels {
+  /** Quick action: set the value to today. Shown for the `date` format. */
+  today: string;
+  /** Quick action: set the value to the current date and time. Shown for `datetime`. */
+  now: string;
+  /** Quick action: clear the value. */
+  clear: string;
+  /** Accessible name for the calendar button. */
+  openCalendar: string;
+  /** Accessible name for the time field (single datetime). */
+  time: string;
+  /** Accessible name for the start-time field (datetime range). */
+  startTime: string;
+  /** Accessible name for the end-time field (datetime range). */
+  endTime: string;
+  /** Footer action: commit and close the popover. */
+  done: string;
+}
+
+const DEFAULT_LABELS: DatePickerLabels = {
+  today: "Today",
+  now: "Now",
+  clear: "Clear",
+  done: "Done",
+  openCalendar: "Open calendar",
+  time: "Time",
+  startTime: "Start time",
+  endTime: "End time",
+  year: "Year",
+  month: "Month",
+  day: "Day",
+  hour: "Hour",
+  minute: "Minute",
+  dayPeriod: "AM/PM",
+};
 
 export interface DatePickerProps {
   value?: string | null;
   onValueChange: (value: string) => void;
-  format?: "date" | "datetime" | "date_range" | "datetime_range";
+  format?: DatePickerFormat;
   disabled?: boolean;
+  /** Fires when the text input loses focus, after any typed value is committed. */
   onBlur?: () => void;
   testID?: string;
+  /** Translated labels for the popover quick actions and accessible names. Defaults to English. */
+  labels?: Partial<DatePickerLabels>;
+  /** BCP-47 locale for the calendar's weekday/month names. Defaults to "en-US". */
+  locale?: string;
+  /** Shown in the field when nothing is selected yet. */
+  placeholder?: string;
 }
 
-export function DatePicker(props: DatePickerProps) {
-  const { value, onValueChange, format, disabled, onBlur, testID } = props;
+// =============================================================================
+// DatePickerPanel — the calendar / time / quick-action surface
+//
+// Rendered inside the DatePicker popover, and directly by grid cell editors
+// that own their own overlay.
+// =============================================================================
+
+export interface DatePickerPanelProps {
+  value?: string | null;
+  onValueChange: (value: string) => void;
+  format: DatePickerFormat;
+  labels?: Partial<DatePickerLabels>;
+  /** BCP-47 locale for the calendar's weekday/month names. Defaults to "en-US". */
+  locale?: string;
+  /** Called when a selection completes and the surrounding surface should dismiss. */
+  onRequestClose?: () => void;
+}
+
+export function DatePickerPanel(props: DatePickerPanelProps) {
+  const { value, onValueChange, format, labels, locale, onRequestClose } = props;
+
+  const isRange = isRangeFormat(format);
+  const hasTime = hasTimeFormat(format);
+  const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+
+  const [startIso, endIso] = useMemo<[string, string]>(() => {
+    if (!value) return ["", ""];
+    if (isRange) {
+      const [a = "", b = ""] = value.split("/");
+      return [a, b];
+    }
+    return [value, ""];
+  }, [value, isRange]);
+
+  // In-progress range selection is held locally so a half-picked range
+  // ("start" with no "end") is never emitted as a structurally-invalid value.
+  // The panel remounts per editing session, so this initializes fresh each open.
+  const [draftRange, setDraftRange] = useState<CalendarRangeValue | null>(null);
+
+  const singleValue = useMemo(() => isoToDate(value ?? ""), [value]);
+  const rangeValue = useMemo<CalendarRangeValue>(
+    () => draftRange ?? { start: isoToDate(startIso), end: isoToDate(endIso) },
+    [draftRange, startIso, endIso],
+  );
+
+  const handleSingleCalendar = useCallback(
+    (date: Date | null) => {
+      onValueChange(date ? withCalendarDate(date, value ?? "", hasTime) : "");
+      if (date && format === "date") onRequestClose?.();
+    },
+    [value, hasTime, format, onValueChange, onRequestClose],
+  );
+
+  const handleRangeCalendar = useCallback(
+    (range: CalendarRangeValue) => {
+      if (!range.start || !range.end) {
+        // Half-picked range — hold locally, never emit a "start/" partial value.
+        setDraftRange(range);
+        return;
+      }
+      setDraftRange(null);
+      const start = withCalendarDate(range.start, startIso, hasTime);
+      const end = withCalendarDate(range.end, endIso, hasTime);
+      onValueChange(`${start}/${end}`);
+      if (format === "date_range") onRequestClose?.();
+    },
+    [hasTime, format, startIso, endIso, onValueChange, onRequestClose],
+  );
+
+  const handleSingleTime = useCallback(
+    (time: string) => onValueChange(withTimeOfDay(value ?? "", time)),
+    [value, onValueChange],
+  );
+
+  // Only reachable when the range is complete (the time row is hidden otherwise),
+  // so both sides always resolve and a partial range can never be emitted here.
+  const handleRangeTime = useCallback(
+    (which: "start" | "end", time: string) => {
+      const updated = withTimeOfDay(which === "start" ? startIso : endIso, time);
+      onValueChange(which === "start" ? `${updated}/${endIso}` : `${startIso}/${updated}`);
+    },
+    [startIso, endIso, onValueChange],
+  );
+
+  const closeAndSet = useCallback(
+    (next: string) => {
+      setDraftRange(null);
+      onValueChange(next);
+      onRequestClose?.();
+    },
+    [onValueChange, onRequestClose],
+  );
 
-  // Map format to HTML input type (range formats use datetime-local for their components)
-  const inputType =
-    format === "datetime" || format === "datetime_range" ? "datetime-local" : "date";
+  // The range time row is interactive only once both ends exist; this keeps
+  // `handleRangeTime` from ever composing a partial range.
+  const showTimeRow = hasTime && (!isRange || (!!startIso && !!endIso));
 
   return (
-    <input
-      data-testid={testID}
-      type={inputType}
-      value={value || ""}
-      onChange={(e) => onValueChange(e.target.value)}
+    <View style={styles.panel}>
+      {isRange ? (
+        <Calendar
+          mode="range"
+          value={rangeValue}
+          onValueChange={handleRangeCalendar}
+          locale={locale}
+        />
+      ) : (
+        <Calendar
+          mode="single"
+          value={singleValue}
+          onValueChange={handleSingleCalendar}
+          locale={locale}
+        />
+      )}
+
+      {showTimeRow && (
+        <>
+          <Divider paddingVertical={8} />
+          <View style={styles.timeRow}>
+            {isRange ? (
+              <>
+                <View style={styles.timeCol}>
+                  <Text size="sm" color="muted">
+                    {mergedLabels.startTime}
+                  </Text>
+                  <TimeField
+                    accessibilityLabel={mergedLabels.startTime}
+                    segmentLabels={mergedLabels}
+                    value={timeText(startIso)}
+                    onChange={(t) => handleRangeTime("start", t)}
+                    locale={locale}
+                  />
+                </View>
+                <View style={styles.timeCol}>
+                  <Text size="sm" color="muted">
+                    {mergedLabels.endTime}
+                  </Text>
+                  <TimeField
+                    accessibilityLabel={mergedLabels.endTime}
+                    segmentLabels={mergedLabels}
+                    value={timeText(endIso)}
+                    onChange={(t) => handleRangeTime("end", t)}
+                    locale={locale}
+                  />
+                </View>
+              </>
+            ) : (
+              <View style={styles.timeCol}>
+                <Text size="sm" color="muted">
+                  {mergedLabels.time}
+                </Text>
+                <TimeField
+                  accessibilityLabel={mergedLabels.time}
+                  segmentLabels={mergedLabels}
+                  value={timeText(value ?? "")}
+                  onChange={handleSingleTime}
+                  locale={locale}
+                />
+              </View>
+            )}
+          </View>
+        </>
+      )}
+
+      <Divider paddingVertical={8} />
+      <View style={styles.footer}>
+        <Button title={mergedLabels.clear} color="muted" onPress={() => closeAndSet("")} />
+        <View style={styles.footerRight}>
+          {format === "date" && (
+            <Button
+              title={mergedLabels.today}
+              color="secondary"
+              onPress={() => closeAndSet(nowIso(false))}
+            />
+          )}
+          {format === "datetime" && (
+            <Button
+              title={mergedLabels.now}
+              color="secondary"
+              onPress={() => closeAndSet(nowIso(true))}
+            />
+          )}
+          {format !== "date" && (
+            <Button title={mergedLabels.done} color="secondary" onPress={() => onRequestClose?.()} />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// =============================================================================
+// DatePicker
+// =============================================================================
+
+function splitRange(value: string | null | undefined): [string, string] {
+  if (!value) return ["", ""];
+  const [a = "", b = ""] = value.split("/");
+  return [a, b];
+}
+
+/**
+ * Universal date / datetime / range picker.
+ *
+ * The trigger is a segmented, locale-aware editable field (the accessible primary
+ * path) plus a calendar button that opens a popover (web) or bottom sheet (native)
+ * with a calendar, quick actions, and — for datetime formats — a time field.
+ */
+export function DatePicker(props: DatePickerProps) {
+  const {
+    value,
+    onValueChange,
+    format = "date",
+    disabled,
+    onBlur,
+    testID,
+    labels,
+    locale,
+    placeholder,
+  } = props;
+
+  const isRange = isRangeFormat(format);
+  const hasTime = hasTimeFormat(format);
+  const mergedLabels = useMemo<DatePickerLabels>(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<View>(null);
+
+  const closeOverlay = useCallback(() => setOpen(false), []);
+  const openOverlay = useCallback(() => setOpen(true), []);
+
+  // Range halves are held locally so a half-typed range is never emitted as a
+  // structurally-invalid value; resynced when `value` changes from outside (the
+  // calendar, a parent reset).
+  const [halves, setHalves] = useState<[string, string]>(() => splitRange(value));
+  const lastRangeEmit = useRef<string>(value ?? "");
+
+  useEffect(() => {
+    if (!isRange) return;
+    const v = value ?? "";
+    if (v !== lastRangeEmit.current) {
+      lastRangeEmit.current = v;
+      setHalves(splitRange(v));
+    }
+  }, [isRange, value]);
+
+  const setHalf = useCallback(
+    (index: number, iso: string) => {
+      let next: [string, string] = index === 0 ? [iso, halves[1]] : [halves[0], iso];
+      if (next[0] && next[1] && next[0] > next[1]) next = [next[1], next[0]]; // keep ascending
+      setHalves(next);
+      // Side effects stay out of the state updater (it must be pure). One side only:
+      // hold locally, emit nothing canonical.
+      if (!next[0] && !next[1]) {
+        lastRangeEmit.current = "";
+        onValueChange("");
+      } else if (next[0] && next[1]) {
+        const emit = `${next[0]}/${next[1]}`;
+        lastRangeEmit.current = emit;
+        onValueChange(emit);
+      }
+    },
+    [halves, onValueChange],
+  );
+
+  // Display-only — the whole field is pressable (DateField opens the calendar).
+  const calendarIcon = (
+    <Icon name="calendar" size={18} color={disabled ? colors.zinc["300"] : colors.zinc["400"]} />
+  );
+
+  const trigger = (
+    <DateField
+      triggerRef={triggerRef}
+      testID={testID}
+      parts={isRange ? halves : [value ?? ""]}
+      onPartChange={isRange ? setHalf : (_, next) => onValueChange(next)}
+      hasTime={hasTime}
+      segmentLabels={mergedLabels}
+      locale={locale}
       disabled={disabled}
+      placeholder={placeholder}
       onBlur={onBlur}
-      style={{
-        height: 40,
-        borderRadius: 8,
-        paddingLeft: 8,
-        paddingRight: 8,
-        borderWidth: 1,
-        boxShadow: "none",
-        borderStyle: "solid",
-        boxSizing: "border-box",
-        borderColor: colors.border,
-        backgroundColor: colors.background,
-        fontFamily: fontFamilyRegular,
-        ...inputTextStyleWeb,
-        letterSpacing: -0.4,
-      }}
+      onActivate={openOverlay}
+      rightSlot={calendarIcon}
     />
   );
+
+  return (
+    <>
+      {trigger}
+      <Popover
+        open={open && !disabled}
+        onOpenChange={setOpen}
+        triggerRef={triggerRef}
+        side="bottom"
+        align="start"
+      >
+        <PopoverContent
+          testID={testID ? `${testID}_popover` : undefined}
+          disableBodyScroll
+        >
+          <DatePickerPanel
+            value={value}
+            onValueChange={onValueChange}
+            format={format}
+            labels={labels}
+            locale={locale}
+            onRequestClose={closeOverlay}
+          />
+        </PopoverContent>
+      </Popover>
+    </>
+  );
 }
+
+const styles = StyleSheet.create({
+  panel: {
+    padding: 4,
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  footerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  timeRow: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  timeCol: {
+    flex: 1,
+    gap: 4,
+  },
+});