@proyecto-viviana/solidaria 0.4.0 → 0.4.1

package/src/datepicker/createDateField.ts

@@ -1,17 +1,48 @@
 /**
  * createDateField hook for Solidaria
  *
- * Provides the behavior and accessibility implementation for a date field component.
- * Based on @react-aria/datepicker useDateField
+ * Provides the behavior and accessibility implementation for a date field — a
+ * segmented spinbutton text input (NOT a calendar grid). Faithful port of
+ * @react-aria/datepicker `useDateField`: `fieldProps` IS the labelled
+ * `role="group"` that wraps the segments, `inputProps` describes a hidden native
+ * `<input>` for form submission, and segment labels/description/focus manager are
+ * published to each segment through the shared `hookData` WeakMap.
  */
 
-import { createMemo } from "solid-js";
-import { createId } from "../ssr";
-import { createLabel } from "../label/createLabel";
+import { createMemo, onMount } from "solid-js";
 import { access, type MaybeAccessor } from "../utils/reactivity";
 import { mergeProps } from "../utils/mergeProps";
-import { useLocale } from "../i18n";
-import type { DateFieldState, DateSegment } from "@proyecto-viviana/solid-stately";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { createField } from "../label/createField";
+import { createDescription } from "../utils/createDescription";
+import { createFocusWithin } from "../interactions/createFocusWithin";
+import { createFocusManager, type FocusManager } from "../focus/FocusScope";
+import { createStringFormatter } from "../i18n";
+import { createFormValidation } from "../form/createFormValidation";
+import { createFormReset } from "../form/createFormReset";
+import { datePickerStrings } from "./intl";
+import { createDatePickerGroup } from "./createDatePickerGroup";
+import type { DateFieldState } from "@proyecto-viviana/solid-stately";
+
+// Shared channel between the field and its segments. Unlike upstream (which stores
+// plain strings and re-runs the hook every render), `ariaDescribedBy` is stored as
+// an accessor so segments pick up the description id once `createDescription`'s
+// deferred effect has appended its hidden node.
+export const hookData = new WeakMap<
+  object,
+  {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: () => string | undefined;
+    focusManager: FocusManager;
+  }
+>();
+
+// Symbols used by DatePicker/DateRangePicker to make a nested date field
+// role="presentation" and to inject a shared focus manager. Standalone fields
+// never receive them.
+export const roleSymbol = "__role_" + Date.now();
+export const focusManagerSymbol = "__focusManager_" + Date.now();
 
 export interface AriaDateFieldProps {
   /** An ID for the date field. */
@@ -24,6 +55,10 @@ export interface AriaDateFieldProps {
   "aria-labelledby"?: string;
   /** The ID of an element that describes the date field. */
   "aria-describedby"?: string;
+  /** Description text. */
+  description?: string;
+  /** Error message. */
+  errorMessage?: string | string[];
   /** Whether the date field is disabled. */
   isDisabled?: boolean;
   /** Whether the date field is read-only. */
@@ -32,261 +67,235 @@ export interface AriaDateFieldProps {
   isRequired?: boolean;
   /** Whether the date field is invalid. */
   isInvalid?: boolean;
-  /** Description text. */
-  description?: string;
-  /** Error message. */
-  errorMessage?: string;
   /** Whether the element should receive focus on mount. */
   autoFocus?: boolean;
-}
-
-export interface DatePickerOverlayState {
-  /** Whether the calendar overlay is open. */
-  isOpen: boolean;
-  /** Open the calendar overlay. */
-  open: () => void;
-  /** Close the calendar overlay. */
-  close: () => void;
-  /** Toggle the calendar overlay. */
-  toggle: () => void;
+  /** The name of the hidden input used for form submission. */
+  name?: string;
+  /** The `<form>` the hidden input is associated with. */
+  form?: string;
+  /** Ref to the hidden input element, for form reset/validation. */
+  inputRef?: () => HTMLInputElement | undefined;
+  /** Whether HTML form validation is used. */
+  validationBehavior?: "aria" | "native";
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  onFocusChange?: (isFocused: boolean) => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  onKeyUp?: (e: KeyboardEvent) => void;
+  /** @internal presentation-role marker (set by DatePicker). */
+  [key: string]: unknown;
 }
 
 export interface DateFieldAria {
   /** Props for the label element. */
   labelProps: Record<string, unknown>;
-  /** Props for the field container element. */
+  /** Props for the field group element (wraps the segments). */
   fieldProps: Record<string, unknown>;
-  /** Props for the input container (holds segments). */
+  /** Props for the hidden native input element. */
   inputProps: Record<string, unknown>;
   /** Props for the description element. */
   descriptionProps: Record<string, unknown>;
   /** Props for the error message element. */
   errorMessageProps: Record<string, unknown>;
-  /** The segments to render. */
-  segments: DateSegment[];
+  /** Whether the field is currently invalid. */
+  isInvalid: boolean;
+  /** The current error messages for the field, if invalid. */
+  validationErrors: string[];
+  /** The native validity state for the field. */
+  validationDetails: ValidityState;
 }
 
 /**
- * Provides the behavior and accessibility implementation for a date field component.
+ * Provides the behavior and accessibility implementation for a date field.
  */
 export function createDateField<T extends DateFieldState>(
   props: MaybeAccessor<AriaDateFieldProps>,
   state: T,
-  _ref?: () => HTMLElement | null,
-  overlayState?: DatePickerOverlayState,
+  ref: () => HTMLElement | null,
 ): DateFieldAria {
   const getProps = () => access(props);
-  const id = createId(getProps().id);
-  const descriptionId = createId();
-  const errorMessageId = createId();
-  const locale = useLocale();
 
-  // Create label handling
-  const { labelProps, fieldProps: labelFieldProps } = createLabel({
-    get label() {
-      return getProps().label;
+  const isPresentation = () => getProps()[roleSymbol] === "presentation";
+
+  const field = createField(() => {
+    const p = getProps();
+    const dv = state.displayValidation();
+    return {
+      id: p.id,
+      label: p.label,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      description: p.description,
+      labelElementType: "span",
+      isInvalid: dv.isInvalid,
+      errorMessage: p.errorMessage || dv.validationErrors,
+    };
+  });
+
+  // Track the value on focus so we only commit validation when it actually changed.
+  let valueOnFocus: unknown = null;
+  const { focusWithinProps } = createFocusWithin({
+    get isDisabled() {
+      return getProps().isDisabled;
+    },
+    onFocusWithin(e) {
+      valueOnFocus = state.value();
+      getProps().onFocus?.(e);
     },
-    get "aria-label"() {
-      return getProps()["aria-label"];
+    onBlurWithin(e) {
+      state.confirmPlaceholder();
+      if (state.value() !== valueOnFocus) {
+        state.commitValidation();
+      }
+      getProps().onBlur?.(e);
     },
-    get "aria-labelledby"() {
-      return getProps()["aria-labelledby"];
+    onFocusWithinChange(isFocused) {
+      getProps().onFocusChange?.(isFocused);
     },
-    labelElementType: "span",
   });
 
-  // Build aria-describedby
-  const getAriaDescribedBy = () => {
-    const p = getProps();
-    const ids: string[] = [];
-    if (p["aria-describedby"]) {
-      ids.push(p["aria-describedby"]);
-    }
-    if (p.description) {
-      ids.push(descriptionId);
+  const stringFormatter = createStringFormatter(datePickerStrings, "@react-aria/datepicker");
+  const description = createMemo(() => {
+    const value = state.value();
+    if (!value) {
+      return "";
     }
-    if ((p.isInvalid || state.isInvalid()) && p.errorMessage) {
-      ids.push(errorMessageId);
+    const message =
+      state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
+    const fieldKey = state.maxGranularity === "hour" ? "time" : "date";
+    return stringFormatter().format(message, {
+      [fieldKey]: state.formatValue({ month: "long" }),
+    });
+  });
+  const descProps = createDescription(description);
+
+  // Within a date picker the field is role="presentation" and inherits the
+  // picker's own describedby; standalone it appends its own value description.
+  const describedBy = (): string | undefined => {
+    const fp = field.fieldProps as Record<string, string | undefined>;
+    if (isPresentation()) {
+      return fp["aria-describedby"];
     }
-    return ids.length > 0 ? ids.join(" ") : undefined;
-  };
-
-  // Segments from state
-  const segments = createMemo(() => state.segments());
-
-  // Label ID for linking input to label
-  const getLabelId = () => (labelProps as Record<string, string | undefined>).id;
-
-  // Localized role description
-  const getRoleDescription = () => {
-    const language = locale().locale.toLowerCase().split("-")[0] ?? "en";
-    return language === "es" ? "Campo de fecha" : "Date field";
+    return [descProps["aria-describedby"], fp["aria-describedby"]].filter(Boolean).join(" ") || undefined;
   };
 
-  // Focus management helpers for segment navigation
-  const focusSegment = (target: "first" | "last" | "prev" | "next", container: HTMLElement) => {
-    const spinbuttons = Array.from(container.querySelectorAll<HTMLElement>('[role="spinbutton"]'));
-    if (spinbuttons.length === 0) return;
-
-    const active = document.activeElement as HTMLElement | null;
-    const currentIndex = active ? spinbuttons.indexOf(active) : -1;
-
-    if (target === "first") {
-      spinbuttons[0]?.focus();
-      return;
-    }
+  const propsFocusManager = getProps()[focusManagerSymbol] as FocusManager | undefined;
+  const focusManager = propsFocusManager || createFocusManager(ref);
+
+  const groupProps = createDatePickerGroup(
+    state as unknown as { setOpen?: (isOpen: boolean) => void },
+    ref,
+    isPresentation(),
+  );
+
+  // Publish labels and the focus manager to the segments.
+  const labelId = (field.labelProps as Record<string, string | undefined>).id;
+  hookData.set(state as unknown as object, {
+    ariaLabel: getProps()["aria-label"],
+    ariaLabelledBy: [labelId, getProps()["aria-labelledby"]].filter(Boolean).join(" ") || undefined,
+    ariaDescribedBy: describedBy,
+    focusManager,
+  });
 
-    if (target === "last") {
-      spinbuttons[spinbuttons.length - 1]?.focus();
-      return;
+  // Auto focus the first segment on mount when requested.
+  onMount(() => {
+    if (getProps().autoFocus) {
+      focusManager.focusFirst();
     }
+  });
 
-    let nextIndex: number;
-    if (currentIndex < 0) {
-      nextIndex = target === "next" ? 0 : spinbuttons.length - 1;
-    } else {
-      nextIndex = target === "next" ? currentIndex + 1 : currentIndex - 1;
-    }
+  // Form reset + native validation wiring.
+  if (props && typeof props === "object") {
+    createFormReset(
+      () => getProps().inputRef?.(),
+      state.defaultValue,
+      state.setValue as (value: unknown) => void,
+    );
+    createFormValidation(
+      {
+        get validationBehavior() {
+          return getProps().validationBehavior;
+        },
+        focus() {
+          focusManager.focusFirst();
+        },
+      },
+      state as unknown as Parameters<typeof createFormValidation>[1],
+      () => getProps().inputRef?.() as unknown as undefined,
+    );
+  }
 
-    if (nextIndex >= 0 && nextIndex < spinbuttons.length) {
-      spinbuttons[nextIndex]?.focus();
+  const fieldDOMProps = createMemo(() => {
+    if (isPresentation()) {
+      return { role: "presentation" };
     }
-  };
+    return mergeProps(field.fieldProps as Record<string, unknown>, {
+      role: "group",
+      "aria-disabled": getProps().isDisabled || undefined,
+      "aria-describedby": describedBy(),
+    });
+  });
 
-  // Field container props
   const fieldProps = createMemo(() => {
     const p = getProps();
-
-    const baseProps: Record<string, unknown> = mergeProps(
-      labelFieldProps as Record<string, unknown>,
+    const domProps = filterDOMProps(p as Record<string, unknown>);
+    return mergeProps(
+      domProps as Record<string, unknown>,
+      fieldDOMProps(),
+      groupProps(),
+      // In Solid, onFocus/onBlur do not bubble, so the group (which only ever
+      // receives focus from its segment descendants) must listen via the
+      // bubbling onFocusIn/onFocusOut events instead.
+      {
+        onFocusIn: focusWithinProps.onFocus,
+        onFocusOut: focusWithinProps.onBlur,
+      },
       {
-        id,
-        role: "group",
-        "aria-disabled": p.isDisabled || state.isDisabled() || undefined,
-        "aria-readonly": p.isReadOnly || state.isReadOnly() || undefined,
-        "aria-required": p.isRequired || state.isRequired() || undefined,
-        "aria-invalid": p.isInvalid || state.isInvalid() || undefined,
-        "aria-describedby": getAriaDescribedBy(),
+        onKeyDown(e: KeyboardEvent) {
+          getProps().onKeyDown?.(e);
+        },
+        onKeyUp(e: KeyboardEvent) {
+          getProps().onKeyUp?.(e);
+        },
+        style: { unicodeBidi: "isolate" as const },
       },
     );
-
-    // Integrate with date picker overlay when available
-    if (overlayState) {
-      const existingOnKeyDown = baseProps.onKeyDown as ((e: KeyboardEvent) => void) | undefined;
-
-      baseProps.onKeyDown = (e: KeyboardEvent) => {
-        existingOnKeyDown?.(e);
-        if (e.altKey && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-          e.preventDefault();
-          e.stopPropagation();
-          overlayState.open();
-        }
-      };
-    }
-
-    return baseProps;
   });
 
-  // Input container props
   const inputProps = createMemo(() => {
     const p = getProps();
-    const labelId = getLabelId();
-    const ariaLabelledBy = labelId
-      ? p["aria-labelledby"]
-        ? `${labelId} ${p["aria-labelledby"]}`
-        : labelId
-      : p["aria-labelledby"];
-
-    const isDisabled = p.isDisabled || state.isDisabled();
-    const isReadOnly = p.isReadOnly || state.isReadOnly();
-    const isRequired = p.isRequired || state.isRequired();
-    const isInvalid = p.isInvalid || state.isInvalid();
-    const hasValue = state.value() != null;
-
-    return {
-      role: "presentation",
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": getAriaDescribedBy(),
-      "aria-disabled": isDisabled || undefined,
-      "aria-readonly": isReadOnly || undefined,
-      "aria-required": isRequired || undefined,
-      "aria-invalid": isInvalid || undefined,
-      "aria-roledescription": getRoleDescription(),
-      autoFocus: p.autoFocus,
-      contentEditable: true,
-      suppressContentEditableWarning: true,
-      spellCheck: false,
-      autoCorrect: "off",
-      enterKeyHint: "next",
-      inputMode: "numeric" as const,
-      style: { caretColor: "transparent" },
-      "data-placeholder": !hasValue ? "true" : undefined,
-      onKeyDown: (e: KeyboardEvent) => {
-        const target = e.target as HTMLElement;
-        const currentTarget = e.currentTarget as HTMLElement;
-
-        // Only handle at the container level, not when a segment is focused
-        if (target !== currentTarget) return;
-
-        const dir = locale().direction;
-        const rtl = dir === "rtl";
-
-        switch (e.key) {
-          case "ArrowRight":
-            e.preventDefault();
-            focusSegment(rtl ? "prev" : "next", currentTarget);
-            break;
-          case "ArrowLeft":
-            e.preventDefault();
-            focusSegment(rtl ? "next" : "prev", currentTarget);
-            break;
-          case "Home":
-            e.preventDefault();
-            focusSegment("first", currentTarget);
-            break;
-          case "End":
-            e.preventDefault();
-            focusSegment("last", currentTarget);
-            break;
-        }
-      },
-      onFocus: () => {
-        // Focus state is tracked by the component layer
-      },
-      onBlur: () => {
-        state.confirmPlaceholder();
-      },
-      onClick: (e: MouseEvent) => {
-        const target = e.target as HTMLElement;
-        const currentTarget = e.currentTarget as HTMLElement;
-
-        // Only handle when clicking the container itself (empty area between segments)
-        if (target !== currentTarget) return;
-
-        const spinbuttons = Array.from(
-          currentTarget.querySelectorAll<HTMLElement>('[role="spinbutton"]'),
-        );
-        if (spinbuttons.length > 0) {
-          spinbuttons[0].focus();
-        }
-      },
+    const value = state.value();
+    const base: Record<string, unknown> = {
+      type: "hidden",
+      name: p.name,
+      form: p.form,
+      value: value?.toString() || "",
+      disabled: p.isDisabled,
     };
+    if (p.validationBehavior === "native") {
+      // Use a hidden <input type="text"> rather than <input type="hidden"> so
+      // that an empty value blocks HTML form submission when the field is
+      // required. Mirrors @react-aria/datepicker useDateField.
+      base.type = "text";
+      base.hidden = true;
+      base.required = p.isRequired;
+      // Ignore the controlled-without-onChange warning.
+      base.onChange = () => {};
+    }
+    return base;
   });
 
-  // Description props
-  const descriptionProps = createMemo(() => ({
-    id: descriptionId,
-  }));
-
-  // Error message props
-  const errorMessageProps = createMemo(() => ({
-    id: errorMessageId,
-    role: "alert",
-  }));
+  const displayValidation = () => state.displayValidation();
 
   return {
     get labelProps() {
-      return labelProps as Record<string, unknown>;
+      return {
+        ...(field.labelProps as Record<string, unknown>),
+        onClick: () => {
+          focusManager.focusFirst();
+        },
+      };
     },
     get fieldProps() {
       return fieldProps();
@@ -295,13 +304,19 @@ export function createDateField<T extends DateFieldState>(
       return inputProps();
     },
     get descriptionProps() {
-      return descriptionProps();
+      return field.descriptionProps as Record<string, unknown>;
     },
     get errorMessageProps() {
-      return errorMessageProps();
+      return field.errorMessageProps as Record<string, unknown>;
+    },
+    get isInvalid() {
+      return displayValidation().isInvalid;
+    },
+    get validationErrors() {
+      return displayValidation().validationErrors;
     },
-    get segments() {
-      return segments();
+    get validationDetails() {
+      return displayValidation().validationDetails;
     },
   };
 }