@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/fields/Duration/index.tsx

@@ -1,17 +1,16 @@
 import type { KnobProps } from "@multiplatform.one/theme";
-import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
+import { ClockIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { XStack, YStack } from "tamagui";
+import { Text, XStack, YStack, isWeb } from "tamagui";
 import { Button } from "../../Button";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { FloatingPanel } from "../../FloatingPanel";
-import { FocusContext, Input as InputParts } from "../../InputParts";
+import { Input as InputParts } from "../../InputParts";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
-import { TimeColumn, TimeColumnSeparator, generateRange } from "../../shared/TimeColumn";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
   mergeFieldHandler,
@@ -20,42 +19,22 @@ import {
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
 
-/**
- * The knob focus ring must be CSS-driven on the focused input itself
- * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
- * frame after focus, which synchronous a11y probes never see. Same
- * OTP/Stepper/Input template — Box ring suppressed, ring lives on the Area.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
-
-function secondsToHms(totalSeconds: number): { hours: number; minutes: number; seconds: number } {
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-  return { hours, minutes, seconds };
-}
-
-function hmsToSeconds(hours: number, minutes: number, seconds: number): number {
-  return hours * 3600 + minutes * 60 + seconds;
-}
-
-function formatDuration(totalSeconds: number, showSeconds: boolean): string {
-  const { hours, minutes, seconds } = secondsToHms(totalSeconds);
-  if (showSeconds) {
-    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
-  }
-  return `${String(hours).padStart(2, "0")}h ${String(minutes).padStart(2, "0")}m`;
+export interface DurationParts {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
 }
 
-const hourValues = generateRange(0, 23);
-const minuteValues = generateRange(0, 59);
-const secondValues = generateRange(0, 59);
-
-interface DurationPreset {
+export interface DurationPreset {
   label: string;
   seconds: number;
 }
 
+const UNIT_SECONDS = { d: 86400, h: 3600, m: 60, s: 1 } as const;
+
+const defaultClockIcon = <ClockIcon size={16} />;
+
 const defaultPresets: DurationPreset[] = [
   { label: "15m", seconds: 900 },
   { label: "30m", seconds: 1800 },
@@ -65,67 +44,328 @@ const defaultPresets: DurationPreset[] = [
   { label: "8h", seconds: 28800 },
 ];
 
-function DurationPopoverContent({
+export function normalizeSeconds(value: unknown): number {
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n) || n < 0) return 0;
+  return Math.floor(n);
+}
+
+export function secondsToParts(total: number, hideDays: boolean): DurationParts {
+  const s = normalizeSeconds(total);
+  if (hideDays) {
+    return {
+      days: 0,
+      hours: Math.floor(s / 3600),
+      minutes: Math.floor((s % 3600) / 60),
+      seconds: s % 60,
+    };
+  }
+  return {
+    days: Math.floor(s / 86400),
+    hours: Math.floor((s % 86400) / 3600),
+    minutes: Math.floor((s % 3600) / 60),
+    seconds: s % 60,
+  };
+}
+
+export function partsToSeconds(parts: DurationParts, hideDays: boolean): number {
+  const days = hideDays ? 0 : Math.max(0, Math.floor(Number(parts.days)) || 0);
+  const hours = Math.max(0, Math.floor(Number(parts.hours)) || 0);
+  const minutes = Math.max(0, Math.floor(Number(parts.minutes)) || 0);
+  const seconds = Math.max(0, Math.floor(Number(parts.seconds)) || 0);
+  return days * 86400 + hours * 3600 + minutes * 60 + seconds;
+}
+
+/** Frappe-style "1d 2h 3m 4s", clock "1:30" / "1:30:00", or raw seconds. */
+export function parseDurationText(text: string): number | null {
+  const trimmed = text.trim().toLowerCase();
+  if (!trimmed) return null;
+  if (/^-?\d+$/.test(trimmed)) return normalizeSeconds(Number(trimmed));
+  const clock = trimmed.match(/^(\d+):(\d{1,2})(?::(\d{1,2}))?$/);
+  if (clock) {
+    return partsToSeconds(
+      {
+        days: 0,
+        hours: Number(clock[1]),
+        minutes: Number(clock[2]),
+        seconds: Number(clock[3] || 0),
+      },
+      true,
+    );
+  }
+  let total = 0;
+  let matched = false;
+  const re = /(\d+)\s*(d|h|m|s)\b/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(trimmed))) {
+    matched = true;
+    const unit = m[2] as keyof typeof UNIT_SECONDS;
+    total += Number(m[1]) * UNIT_SECONDS[unit];
+  }
+  return matched ? total : null;
+}
+
+function DurationSegment({
+  id,
+  unit,
+  ariaLabel,
   value,
-  onChange,
+  onCommit,
+  onPasteDuration,
+  disabled,
+  readOnly,
   knobProps,
-  showSeconds,
-  presets,
+  wide,
+  placeholder,
+  required,
+  hasError,
 }: {
+  id?: string;
+  unit: string;
+  ariaLabel: string;
   value: number;
-  onChange: (seconds: number) => void;
+  onCommit: (next: number) => void;
+  onPasteDuration: (seconds: number) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
   knobProps: KnobProps;
+  wide?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  hasError?: boolean;
+}) {
+  const [draft, setDraft] = useState<string | null>(null);
+  const shown = draft ?? (wide ? String(value) : String(value).padStart(2, "0"));
+  const locked = !!(disabled || readOnly);
+
+  const commitDraft = () => {
+    if (draft == null) return;
+    const n = normalizeSeconds(draft === "" ? 0 : Number(draft));
+    setDraft(null);
+    onCommit(n);
+  };
+
+  return (
+    <XStack alignItems="center" gap="$1" flexShrink={0}>
+      <InputParts.Area
+        id={id}
+        value={shown}
+        placeholder={placeholder}
+        keyboardType="numeric"
+        disabled={disabled}
+        readOnly={readOnly}
+        aria-label={ariaLabel}
+        aria-disabled={disabled || undefined}
+        aria-readonly={readOnly || undefined}
+        aria-required={required || undefined}
+        aria-invalid={hasError || undefined}
+        color={formCommonColors.text}
+        textAlign="right"
+        width={wide ? 64 : 48}
+        minWidth={wide ? 64 : 48}
+        paddingHorizontal={0}
+        maxLength={wide ? 5 : 3}
+        {...(isWeb && disabled ? { tabIndex: -1 } : undefined)}
+        onChangeText={(text) => {
+          if (locked) return;
+          if (text !== "" && !/^\d+$/.test(text)) return;
+          setDraft(text);
+        }}
+        onBlur={locked ? undefined : commitDraft}
+        onFocus={locked ? undefined : () => setDraft(String(value))}
+        onKeyDown={
+          locked
+            ? undefined
+            : (e: any) => {
+                const key = e?.nativeEvent?.key ?? e?.key;
+                if (key === "ArrowUp") {
+                  e?.preventDefault?.();
+                  setDraft(null);
+                  onCommit(value + 1);
+                } else if (key === "ArrowDown") {
+                  e?.preventDefault?.();
+                  setDraft(null);
+                  onCommit(Math.max(0, value - 1));
+                } else if (key === "Enter") {
+                  e?.preventDefault?.();
+                  commitDraft();
+                }
+              }
+        }
+        onPaste={
+          locked
+            ? undefined
+            : (e: any) => {
+                const text = String(e?.clipboardData?.getData?.("text") ?? "");
+                const parsed = parseDurationText(text);
+                if (parsed == null) return;
+                e?.preventDefault?.();
+                setDraft(null);
+                onPasteDuration(parsed);
+              }
+        }
+      />
+      <Text
+        {...knobProps.body}
+        color={formCommonColors.muted}
+        fontSize="$2"
+        textTransform="lowercase"
+      >
+        {unit}
+      </Text>
+    </XStack>
+  );
+}
+
+function DurationControl({
+  seconds,
+  onChange,
+  disabled,
+  readOnly,
+  hideDays,
+  showSeconds,
+  clockIcon,
+  hasError,
+  id,
+  hasLabel,
+  placeholder,
+  required,
+  size,
+  knobProps,
+}: {
+  seconds: number;
+  onChange: (seconds: number) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  hideDays: boolean;
   showSeconds: boolean;
-  presets: DurationPreset[];
+  clockIcon?: ReactNode | null;
+  hasError?: boolean;
+  id?: string;
+  hasLabel?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  size?: SizeTokens;
+  knobProps: KnobProps;
 }) {
-  const { hours, minutes, seconds } = secondsToHms(value);
+  const parts = secondsToParts(seconds, hideDays);
+  const resolvedClock = clockIcon === undefined ? defaultClockIcon : clockIcon;
+
+  const commitParts = useCallback(
+    (patch: Partial<DurationParts>) => {
+      onChange(partsToSeconds({ ...parts, ...patch }, hideDays));
+    },
+    [hideDays, onChange, parts],
+  );
 
   return (
-    <YStack {...knobProps.gap}>
-      <XStack gap="$2" alignItems="flex-start" justifyContent="center">
-        <TimeColumn
-          label={t("Hours")}
-          values={hourValues}
-          selected={hours}
-          onChange={(newHours) => onChange(hmsToSeconds(newHours, minutes, seconds))}
-          knobProps={knobProps}
-        />
-        <TimeColumnSeparator knobProps={knobProps} />
-        <TimeColumn
-          label={t("Min")}
-          values={minuteValues}
-          selected={minutes}
-          onChange={(newMinutes) => onChange(hmsToSeconds(hours, newMinutes, seconds))}
-          knobProps={knobProps}
-        />
-        {showSeconds && (
-          <>
-            <TimeColumnSeparator knobProps={knobProps} />
-            <TimeColumn
-              label={t("Sec")}
-              values={secondValues}
-              selected={seconds}
-              onChange={(newSeconds) => onChange(hmsToSeconds(hours, minutes, newSeconds))}
+    <InputParts size={size || knobProps.sizeToken}>
+      <InputParts.Box
+        theme={hasError ? "red" : undefined}
+        elevation={undefined}
+        disabled={disabled}
+        role="group"
+        aria-label={hasLabel ? undefined : t("Duration")}
+      >
+        <InputParts.Section>
+          <XStack alignItems="center" flex={1} width="100%" {...knobProps.gap}>
+            {resolvedClock != null ? (
+              <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
+            ) : null}
+            {!hideDays ? (
+              <DurationSegment
+                id={id}
+                unit={t("d")}
+                ariaLabel={t("Days")}
+                value={parts.days}
+                onCommit={(days) => commitParts({ days })}
+                onPasteDuration={onChange}
+                disabled={disabled}
+                readOnly={readOnly}
+                knobProps={knobProps}
+                placeholder={placeholder}
+                required={required}
+                hasError={hasError}
+              />
+            ) : null}
+            <DurationSegment
+              id={hideDays ? id : `${id}-hours`}
+              unit={t("h")}
+              ariaLabel={t("Hours")}
+              value={parts.hours}
+              onCommit={(hours) => commitParts({ hours })}
+              onPasteDuration={onChange}
+              disabled={disabled}
+              readOnly={readOnly}
               knobProps={knobProps}
+              wide
+              placeholder={hideDays ? placeholder : undefined}
+              required={required}
+              hasError={hasError}
             />
-          </>
-        )}
-      </XStack>
-      {presets.length > 0 && (
-        <XStack gap="$1" flexWrap="wrap" justifyContent="center">
-          {presets.map((preset) => (
-            <Button
-              key={preset.seconds}
-              size="$2"
-              onPress={() => onChange(preset.seconds)}
-              theme={value === preset.seconds ? "active" : undefined}
-            >
-              {preset.label}
-            </Button>
-          ))}
-        </XStack>
-      )}
-    </YStack>
+            <DurationSegment
+              id={`${id}-minutes`}
+              unit={t("m")}
+              ariaLabel={t("Min")}
+              value={parts.minutes}
+              onCommit={(minutes) => commitParts({ minutes })}
+              onPasteDuration={onChange}
+              disabled={disabled}
+              readOnly={readOnly}
+              knobProps={knobProps}
+              required={required}
+              hasError={hasError}
+            />
+            {showSeconds ? (
+              <DurationSegment
+                id={`${id}-seconds`}
+                unit={t("s")}
+                ariaLabel={t("Sec")}
+                value={parts.seconds}
+                onCommit={(secs) => commitParts({ seconds: secs })}
+                onPasteDuration={onChange}
+                disabled={disabled}
+                readOnly={readOnly}
+                knobProps={knobProps}
+                required={required}
+                hasError={hasError}
+              />
+            ) : null}
+          </XStack>
+        </InputParts.Section>
+      </InputParts.Box>
+    </InputParts>
+  );
+}
+
+function DurationPresets({
+  seconds,
+  presets,
+  onChange,
+}: {
+  seconds: number;
+  presets: DurationPreset[];
+  onChange: (seconds: number) => void;
+}) {
+  if (presets.length === 0) return null;
+  return (
+    <XStack gap="$1" flexWrap="wrap">
+      {presets.map((preset) => {
+        const selected = seconds === preset.seconds;
+        return (
+          <Button
+            key={preset.seconds}
+            compact
+            size="$2"
+            outlined={!selected}
+            accent={selected}
+            onPress={() => onChange(preset.seconds)}
+          >
+            {preset.label}
+          </Button>
+        );
+      })}
+    </XStack>
   );
 }
 
@@ -147,15 +387,24 @@ export interface DurationProps {
   onBlur?: (...args: any[]) => void;
   disabled?: boolean;
   readOnly?: boolean;
-  /** Show seconds column (default false) */
+  /** Show seconds segment (default false) */
   showSeconds?: boolean;
+  /**
+   * Hide the days segment and fold days into hours (default true).
+   * Pass `false` for Frappe-parity day + hour + minute entry.
+   */
+  hideDays?: boolean;
   /** Quick-select presets. Pass [] to hide. */
   presets?: DurationPreset[];
   placeholder?: string;
-  clockIcon?: ReactNode;
+  /**
+   * Leading clock affordance. Package default is the Phosphor clock.
+   * Pass `null` to hide the adornment.
+   */
+  clockIcon?: ReactNode | null;
   /** When true, renders a skeleton placeholder instead of the duration picker */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
 }
 
@@ -170,88 +419,41 @@ export function Duration({
   required,
   size,
   id: idProp,
-  value = 0,
+  value,
   defaultValue,
   onChange,
   onBlur,
   disabled,
   readOnly,
   showSeconds = false,
+  hideDays = true,
   presets = defaultPresets,
   placeholder = t("Select duration"),
   clockIcon,
   skeleton,
   compact,
 }: DurationProps) {
-  const { resolvedForm, knobProps, control, id } = useFormField({
+  const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
     compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const [open, setOpen] = useState(false);
-  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
-  const areaFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2,
-  });
-
-  const displayValue = useMemo(() => {
-    if (!value && value !== 0) return "";
-    return formatDuration(value, showSeconds);
-  }, [value, showSeconds]);
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState(() => normalizeSeconds(defaultValue ?? 0));
+  const seconds = normalizeSeconds(isControlled ? value : internal);
+  const inTableCell = useIsInTableCell();
 
   const handleChange = useCallback(
-    (seconds: number, fieldChange?: (v: any) => void) => {
-      fieldChange?.(seconds);
-      onChange?.(seconds);
+    (next: number, fieldChange?: (v: any) => void) => {
+      const n = normalizeSeconds(next);
+      if (!isControlled) setInternal(n);
+      fieldChange?.(n);
+      onChange?.(n);
     },
-    [onChange],
-  );
-
-  const renderTrigger = (triggerValue: string, hasError?: boolean) => (
-    <InputParts size={size || knobProps.sizeToken}>
-      <InputParts.Box
-        theme={hasError ? "red" : undefined}
-        {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
-      >
-        {clockIcon && (
-          <InputParts.Section>
-            <InputParts.Icon adornment="leading">{clockIcon}</InputParts.Icon>
-          </InputParts.Section>
-        )}
-        <FocusContext.Provider {...suppressBoxFocusRing}>
-          <InputParts.Area
-            readOnly
-            id={id}
-            value={triggerValue}
-            placeholder={placeholder}
-            disabled={disabled}
-            color={formCommonColors.text}
-            focusStyle={areaFocusRing}
-            focusVisibleStyle={areaFocusRing}
-            aria-labelledby={label ? `${id}-label` : undefined}
-            aria-label={label ? undefined : t("Duration")}
-            aria-readonly={readOnly || undefined}
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-          />
-        </FocusContext.Provider>
-      </InputParts.Box>
-    </InputParts>
+    [isControlled, onChange],
   );
 
-  const panelContent = (currentValue: number, onValueChange: (s: number) => void) => (
-    <DurationPopoverContent
-      value={currentValue}
-      onChange={onValueChange}
-      knobProps={knobProps}
-      showSeconds={showSeconds}
-      presets={presets}
-    />
-  );
-
-  // Render skeleton placeholder
   if (skeleton) {
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
@@ -260,6 +462,30 @@ export function Duration({
     );
   }
 
+  const fieldBody = (current: number, onValueChange: (s: number) => void, hasError?: boolean) => (
+    <YStack {...knobProps.gap}>
+      <DurationControl
+        seconds={current}
+        onChange={onValueChange}
+        disabled={disabled}
+        readOnly={readOnly}
+        hideDays={hideDays}
+        showSeconds={showSeconds}
+        clockIcon={clockIcon}
+        hasError={hasError}
+        id={id}
+        hasLabel={Boolean(label)}
+        placeholder={placeholder}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+      />
+      {readOnly || disabled || inTableCell ? null : (
+        <DurationPresets seconds={current} presets={presets} onChange={onValueChange} />
+      )}
+    </YStack>
+  );
+
   if (!resolvedForm || !name) {
     return (
       <FieldLayout
@@ -272,25 +498,9 @@ export function Duration({
         size={size}
         knobProps={knobProps}
         onBlur={onBlur}
-        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
-        // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        {readOnly ? (
-          renderTrigger(displayValue, !!error)
-        ) : (
-          <FloatingPanel
-            open={open}
-            onOpenChange={setOpen}
-            disabled={disabled}
-            scrollable
-            sizing="fill"
-            fitContent
-            trigger={renderTrigger(displayValue, !!error)}
-          >
-            {panelContent(value, (s) => handleChange(s))}
-          </FloatingPanel>
-        )}
+        {fieldBody(seconds, (s) => handleChange(s), !!error)}
       </FieldLayout>
     );
   }
@@ -304,8 +514,7 @@ export function Duration({
     >
       {(field) => {
         const resolvedError = getFieldError(field, error);
-        const fieldValue = (field.state.value as number) ?? 0;
-        const fieldDisplay = formatDuration(fieldValue, showSeconds);
+        const fieldValue = normalizeSeconds((field.state.value as number) ?? 0);
         return (
           <FieldLayout
             id={id}
@@ -317,23 +526,12 @@ export function Duration({
             size={size}
             knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
             disabled={disabled}
           >
-            {readOnly ? (
-              renderTrigger(fieldDisplay, !!resolvedError)
-            ) : (
-              <FloatingPanel
-                open={open}
-                onOpenChange={setOpen}
-                disabled={disabled}
-                scrollable
-                sizing="fill"
-                fitContent
-                trigger={renderTrigger(fieldDisplay, !!resolvedError)}
-              >
-                {panelContent(fieldValue, (s) => handleChange(s, (v) => field.handleChange(v)))}
-              </FloatingPanel>
+            {fieldBody(
+              fieldValue,
+              (s) => handleChange(s, (v) => field.handleChange(v)),
+              !!resolvedError,
             )}
           </FieldLayout>
         );