@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/datepicker/createDateSegment.ts

@@ -5,18 +5,19 @@
  * Based on @react-aria/datepicker useDateSegment
  */
 
-import { createSignal, createMemo } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { DateFieldState, DateSegment, DateSegmentType } from '@proyecto-viviana/solid-stately';
-import { useLocale } from '../i18n';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, createMemo, onCleanup } from "solid-js";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { scrollIntoViewport, getScrollParent } from "../utils";
+import type { DateFieldState, DateSegment, DateSegmentType } from "@proyecto-viviana/solid-stately";
+import { useLocale } from "../i18n";
 
 export interface AriaDateSegmentProps {
   /** The segment data. */
   segment: DateSegment;
+  /** The ID of the calendar dialog controlled by this segment (when inside a datepicker). */
+  "aria-controls"?: string;
+  /** The ID of an element that describes the segment. */
+  "aria-describedby"?: string;
 }
 
 export interface DateSegmentAria {
@@ -30,23 +31,25 @@ export interface DateSegmentAria {
   isPlaceholder: boolean;
   /** The text to display. */
   text: string;
+  /** Whether the segment is hovered. */
+  isHovered: boolean;
+  /** Whether the segment has keyboard focus visible. */
+  isFocusVisible: boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a date segment.
  */
 export function createDateSegment<T extends DateFieldState>(
   props: MaybeAccessor<AriaDateSegmentProps>,
   state: T,
-  ref?: () => HTMLElement | null
+  ref?: () => HTMLElement | null,
 ): DateSegmentAria {
   const getProps = () => access(props);
   const [isFocused, setIsFocused] = createSignal(false);
-  const [enteredKeys, setEnteredKeys] = createSignal('');
+  const [isFocusVisible, setIsFocusVisible] = createSignal(false);
+  const [isHovered, setIsHovered] = createSignal(false);
+  const [enteredKeys, setEnteredKeys] = createSignal("");
   const [isComposing, setIsComposing] = createSignal(false);
   const locale = useLocale();
 
@@ -59,25 +62,53 @@ export function createDateSegment<T extends DateFieldState>(
     return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
   });
 
-  const focusSegment = (target: 'first' | 'last' | 'prev' | 'next') => {
+  // Long press state for ArrowUp / ArrowDown
+  let longPressTimeout: ReturnType<typeof setTimeout> | null = null;
+  let longPressInterval: ReturnType<typeof setInterval> | null = null;
+  let hadPointerDown = false;
+
+  const clearLongPress = () => {
+    if (longPressTimeout) {
+      clearTimeout(longPressTimeout);
+      longPressTimeout = null;
+    }
+    if (longPressInterval) {
+      clearInterval(longPressInterval);
+      longPressInterval = null;
+    }
+  };
+
+  const startLongPress = (action: () => void) => {
+    clearLongPress();
+    longPressTimeout = setTimeout(() => {
+      action();
+      longPressInterval = setInterval(() => {
+        action();
+      }, 100);
+    }, 300);
+  };
+
+  onCleanup(() => {
+    clearLongPress();
+  });
+
+  const focusSegment = (target: "first" | "last" | "prev" | "next") => {
     const el = ref?.();
     if (!el) return;
 
     const container = el.parentElement;
     if (!container) return;
 
-    const segments = Array.from(
-      container.querySelectorAll<HTMLElement>('[role="spinbutton"]')
-    );
+    const segments = Array.from(container.querySelectorAll<HTMLElement>('[role="spinbutton"]'));
 
     if (segments.length === 0) return;
 
-    if (target === 'first') {
+    if (target === "first") {
       segments[0]?.focus();
       return;
     }
 
-    if (target === 'last') {
+    if (target === "last") {
       segments[segments.length - 1]?.focus();
       return;
     }
@@ -85,7 +116,7 @@ export function createDateSegment<T extends DateFieldState>(
     const currentIndex = segments.indexOf(el);
     if (currentIndex < 0) return;
 
-    const nextIndex = target === 'next' ? currentIndex + 1 : currentIndex - 1;
+    const nextIndex = target === "next" ? currentIndex + 1 : currentIndex - 1;
     if (nextIndex >= 0 && nextIndex < segments.length) {
       segments[nextIndex]?.focus();
     }
@@ -93,7 +124,7 @@ export function createDateSegment<T extends DateFieldState>(
 
   const clearCurrentSegment = (type: DateSegmentType) => {
     state.clearSegment(type);
-    setEnteredKeys('');
+    setEnteredKeys("");
   };
 
   // Handle keyboard input
@@ -104,43 +135,52 @@ export function createDateSegment<T extends DateFieldState>(
     const seg = segment();
     const type = seg.type;
 
-    if (type === 'literal') return;
+    if (type === "literal") return;
+
+    // Keyboard interaction means focus is visible
+    setIsFocusVisible(true);
 
     switch (e.key) {
-      case 'ArrowRight':
+      case "ArrowRight":
         e.preventDefault();
-        focusSegment(locale().direction === 'rtl' ? 'prev' : 'next');
+        focusSegment(locale().direction === "rtl" ? "prev" : "next");
         break;
-      case 'ArrowLeft':
+      case "ArrowLeft":
         e.preventDefault();
-        focusSegment(locale().direction === 'rtl' ? 'next' : 'prev');
+        focusSegment(locale().direction === "rtl" ? "next" : "prev");
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
         state.incrementSegment(type);
+        if (!e.repeat) {
+          startLongPress(() => state.incrementSegment(type));
+        }
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
         state.decrementSegment(type);
+        if (!e.repeat) {
+          startLongPress(() => state.decrementSegment(type));
+        }
         break;
-      case 'Home':
+      case "Home":
         e.preventDefault();
-        focusSegment('first');
+        focusSegment("first");
         break;
-      case 'End':
+      case "End":
         e.preventDefault();
-        focusSegment('last');
+        focusSegment("last");
         break;
-      case 'Backspace':
+      case "Backspace":
         e.preventDefault();
         // Match common date-field UX: backspace on an empty placeholder moves to previous segment.
         if (seg.isPlaceholder) {
-          focusSegment('prev');
+          focusSegment("prev");
         } else {
           clearCurrentSegment(type);
         }
         break;
-      case 'Delete':
+      case "Delete":
         e.preventDefault();
         clearCurrentSegment(type);
         break;
@@ -155,12 +195,12 @@ export function createDateSegment<T extends DateFieldState>(
     }
   };
 
+  const handleKeyUp = () => {
+    clearLongPress();
+  };
+
   // Handle numeric input
-  const handleNumericInput = (
-    key: string,
-    type: DateSegmentType,
-    seg: DateSegment
-  ) => {
+  const handleNumericInput = (key: string, type: DateSegmentType, seg: DateSegment) => {
     const newKeys = enteredKeys() + key;
     const numValue = parseInt(newKeys, 10);
     const maxValue = seg.maxValue ?? 99;
@@ -172,10 +212,10 @@ export function createDateSegment<T extends DateFieldState>(
       state.setSegment(type, numValue);
 
       // If entering more digits wouldn't make sense, clear entered keys
-      const potentialNextValue = parseInt(newKeys + '0', 10);
+      const potentialNextValue = parseInt(newKeys + "0", 10);
       if (potentialNextValue > maxValue || newKeys.length >= maxDigits) {
-        setEnteredKeys('');
-        focusSegment('next');
+        setEnteredKeys("");
+        focusSegment("next");
       } else {
         setEnteredKeys(newKeys);
       }
@@ -184,15 +224,15 @@ export function createDateSegment<T extends DateFieldState>(
       const singleValue = parseInt(key, 10);
       if (singleValue >= minValue && singleValue <= maxValue) {
         state.setSegment(type, singleValue);
-        const potentialNextValue = parseInt(key + '0', 10);
+        const potentialNextValue = parseInt(key + "0", 10);
         if (potentialNextValue > maxValue || key.length >= maxDigits) {
-          setEnteredKeys('');
-          focusSegment('next');
+          setEnteredKeys("");
+          focusSegment("next");
         } else {
           setEnteredKeys(key);
         }
       } else {
-        setEnteredKeys('');
+        setEnteredKeys("");
       }
     }
   };
@@ -202,15 +242,15 @@ export function createDateSegment<T extends DateFieldState>(
     if (isComposing()) return;
 
     const seg = segment();
-    if (seg.type === 'literal') return;
+    if (seg.type === "literal") return;
 
-    if (e.inputType === 'deleteContentBackward' || e.inputType === 'deleteContentForward') {
+    if (e.inputType === "deleteContentBackward" || e.inputType === "deleteContentForward") {
       e.preventDefault();
       clearCurrentSegment(seg.type);
       return;
     }
 
-    if (e.inputType === 'insertText' && e.data) {
+    if (e.inputType === "insertText" && e.data) {
       const normalizedDigit = normalizeDigit(e.data);
       if (!normalizedDigit) return;
       e.preventDefault();
@@ -221,7 +261,7 @@ export function createDateSegment<T extends DateFieldState>(
   const handleCompositionStart = () => {
     if (!isEditable()) return;
     setIsComposing(true);
-    setEnteredKeys('');
+    setEnteredKeys("");
   };
 
   const handleCompositionEnd = (e: CompositionEvent) => {
@@ -229,9 +269,9 @@ export function createDateSegment<T extends DateFieldState>(
     setIsComposing(false);
 
     const seg = segment();
-    if (seg.type === 'literal') return;
+    if (seg.type === "literal") return;
 
-    const digits = extractNormalizedDigits(e.data ?? '');
+    const digits = extractNormalizedDigits(e.data ?? "");
     if (digits.length === 0) return;
 
     for (const digit of digits) {
@@ -242,53 +282,103 @@ export function createDateSegment<T extends DateFieldState>(
   // Handle focus
   const handleFocus = () => {
     setIsFocused(true);
-    setEnteredKeys('');
+    setEnteredKeys("");
+
+    if (!hadPointerDown) {
+      setIsFocusVisible(true);
+    }
+    hadPointerDown = false;
+
+    const el = ref?.();
+    if (el) {
+      scrollIntoViewport(el, { containingElement: getScrollParent(el) });
+    }
+
+    // Select all text in the segment
+    if (el && typeof window !== "undefined") {
+      const selection = window.getSelection();
+      if (selection) {
+        const range = new Range();
+        range.selectNodeContents(el);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }
   };
 
   const handleBlur = () => {
     setIsFocused(false);
-    setEnteredKeys('');
+    setIsFocusVisible(false);
+    setEnteredKeys("");
+    clearLongPress();
     state.confirmPlaceholder();
   };
 
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
   // Segment props
   const segmentProps = createMemo(() => {
     const seg = segment();
     const type = seg.type;
+    const p = getProps();
 
     // Literal segments don't need interaction props
-    if (type === 'literal') {
+    if (type === "literal") {
       return {
-        'aria-hidden': true,
+        "aria-hidden": true,
       };
     }
 
     return {
-      role: 'spinbutton',
+      role: "spinbutton",
       tabIndex: isEditable() ? 0 : -1,
-      'aria-label': getSegmentLabel(type, locale().locale),
-      'aria-valuenow': seg.value,
-      'aria-valuemin': seg.minValue,
-      'aria-valuemax': seg.maxValue,
-      'aria-valuetext': seg.isPlaceholder ? seg.placeholder : seg.text,
-      'aria-readonly': state.isReadOnly() || undefined,
-      'aria-disabled': state.isDisabled() || undefined,
-      'aria-invalid': state.isInvalid() || undefined,
+      "aria-label": getSegmentLabel(type, locale().locale),
+      "aria-valuenow": seg.value,
+      "aria-valuemin": seg.minValue,
+      "aria-valuemax": seg.maxValue,
+      "aria-valuetext": seg.isPlaceholder ? "" : seg.text,
+      "aria-readonly": state.isReadOnly() || undefined,
+      "aria-disabled": state.isDisabled() || undefined,
+      "aria-invalid": state.isInvalid() || undefined,
+      "aria-controls": p["aria-controls"] || undefined,
+      "aria-describedby": p["aria-describedby"] || undefined,
       contentEditable: isEditable(),
       suppressContentEditableWarning: true,
-      inputMode: 'numeric' as const,
-      autoCorrect: 'off',
-      enterKeyHint: 'next' as const,
+      inputMode: "numeric" as const,
+      autoCorrect: "off",
+      enterKeyHint: "next" as const,
       spellCheck: false,
+      "data-placeholder": seg.isPlaceholder ? "true" : undefined,
+      "data-readonly": state.isReadOnly() || undefined,
+      "data-disabled": state.isDisabled() || undefined,
+      "data-invalid": state.isInvalid() || undefined,
+      "data-type": seg.type,
+      "data-hovered": isHovered() || undefined,
+      "data-focused": isFocused() || undefined,
+      "data-focus-visible": isFocusVisible() || undefined,
       onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
       onFocus: handleFocus,
       onBlur: handleBlur,
       onBeforeInput: handleBeforeInput,
       onCompositionStart: handleCompositionStart,
       onCompositionEnd: handleCompositionEnd,
-      onMouseDown: (e: MouseEvent) => {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onPointerDown: (e: PointerEvent) => {
         // Prevent cursor positioning in the middle of the segment
         e.preventDefault();
+        hadPointerDown = true;
+        setIsFocusVisible(false);
+      },
+      onPointerUp: () => {
+        clearLongPress();
       },
     };
   });
@@ -315,42 +405,44 @@ export function createDateSegment<T extends DateFieldState>(
     get text() {
       return text();
     },
+    get isHovered() {
+      return isHovered();
+    },
+    get isFocusVisible() {
+      return isFocusVisible();
+    },
   };
 }
 
-// ============================================
-// HELPER FUNCTIONS
-// ============================================
-
-const SEGMENT_LABELS: Record<string, Record<Exclude<DateSegmentType, 'literal'>, string>> = {
+const SEGMENT_LABELS: Record<string, Record<Exclude<DateSegmentType, "literal">, string>> = {
   en: {
-    year: 'Year',
-    month: 'Month',
-    day: 'Day',
-    hour: 'Hour',
-    minute: 'Minute',
-    second: 'Second',
-    dayPeriod: 'AM/PM',
-    era: 'Era',
-    timeZoneName: 'Time zone',
+    year: "Year",
+    month: "Month",
+    day: "Day",
+    hour: "Hour",
+    minute: "Minute",
+    second: "Second",
+    dayPeriod: "AM/PM",
+    era: "Era",
+    timeZoneName: "Time zone",
   },
   es: {
-    year: 'Año',
-    month: 'Mes',
-    day: 'Día',
-    hour: 'Hora',
-    minute: 'Minuto',
-    second: 'Segundo',
-    dayPeriod: 'AM/PM',
-    era: 'Era',
-    timeZoneName: 'Zona horaria',
+    year: "Año",
+    month: "Mes",
+    day: "Día",
+    hour: "Hora",
+    minute: "Minuto",
+    second: "Segundo",
+    dayPeriod: "AM/PM",
+    era: "Era",
+    timeZoneName: "Zona horaria",
   },
 };
 
 function getSegmentLabel(type: DateSegmentType, locale: string): string {
-  if (type === 'literal') return '';
+  if (type === "literal") return "";
 
-  const language = locale.toLowerCase().split('-')[0] ?? 'en';
+  const language = locale.toLowerCase().split("-")[0] ?? "en";
   const labels = SEGMENT_LABELS[language] ?? SEGMENT_LABELS.en;
   return labels[type];
 }

package/src/datepicker/createTimeField.ts

@@ -5,16 +5,12 @@
  * Based on @react-aria/datepicker useTimeField
  */
 
-import { createMemo } from 'solid-js';
-import { createId } from '../ssr';
-import { createLabel } from '../label/createLabel';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { mergeProps } from '../utils/mergeProps';
-import type { TimeFieldState, TimeSegment, TimeValue } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo } from "solid-js";
+import { createId } from "../ssr";
+import { createLabel } from "../label/createLabel";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { mergeProps } from "../utils/mergeProps";
+import type { TimeFieldState, TimeSegment, TimeValue } from "@proyecto-viviana/solid-stately";
 
 export interface AriaTimeFieldProps {
   /** An ID for the time field. */
@@ -22,11 +18,11 @@ export interface AriaTimeFieldProps {
   /** A visible label for the time field. */
   label?: string;
   /** An accessible label for the time field. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the time field. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the time field. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the time field is disabled. */
   isDisabled?: boolean;
   /** Whether the time field is read-only. */
@@ -39,6 +35,12 @@ export interface AriaTimeFieldProps {
   description?: string;
   /** Error message. */
   errorMessage?: string;
+  /** The name of the input element, used when submitting an HTML form. */
+  name?: string;
+  /** The id of the form the hidden input belongs to. */
+  form?: string;
+  /** Describes the autocomplete behavior for the hidden input. */
+  autoComplete?: string;
 }
 
 export interface TimeFieldAria {
@@ -56,17 +58,13 @@ export interface TimeFieldAria {
   segments: TimeSegment[];
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a time field component.
  */
 export function createTimeField<T extends TimeFieldState<TimeValue>>(
   props: MaybeAccessor<AriaTimeFieldProps>,
   state: T,
-  _ref?: () => HTMLElement | null
+  _ref?: () => HTMLElement | null,
 ): TimeFieldAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -75,26 +73,32 @@ export function createTimeField<T extends TimeFieldState<TimeValue>>(
 
   // Create label handling
   const { labelProps, fieldProps: labelFieldProps } = createLabel({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
-    labelElementType: 'span',
+    get label() {
+      return getProps().label;
+    },
+    get "aria-label"() {
+      return getProps()["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
+    },
+    labelElementType: "span",
   });
 
   // Build aria-describedby
   const getAriaDescribedBy = () => {
     const p = getProps();
     const ids: string[] = [];
-    if (p['aria-describedby']) {
-      ids.push(p['aria-describedby']);
+    if (p["aria-describedby"]) {
+      ids.push(p["aria-describedby"]);
     }
     if (p.description) {
       ids.push(descriptionId);
     }
-    if (p.isInvalid && p.errorMessage) {
+    if ((p.isInvalid || state.isInvalid()) && p.errorMessage) {
       ids.push(errorMessageId);
     }
-    return ids.length > 0 ? ids.join(' ') : undefined;
+    return ids.length > 0 ? ids.join(" ") : undefined;
   };
 
   // Segments from state
@@ -106,18 +110,18 @@ export function createTimeField<T extends TimeFieldState<TimeValue>>(
 
     return mergeProps(labelFieldProps as Record<string, unknown>, {
       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(),
+      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(),
     });
   });
 
   // Input container props
   const inputProps = createMemo(() => ({
-    role: 'presentation',
+    role: "presentation",
   }));
 
   // Description props
@@ -128,7 +132,7 @@ export function createTimeField<T extends TimeFieldState<TimeValue>>(
   // Error message props
   const errorMessageProps = createMemo(() => ({
     id: errorMessageId,
-    role: 'alert',
+    role: "alert",
   }));
 
   return {