@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/datepicker/createTimeSegment.ts

@@ -1,352 +0,0 @@
-/**
- * createTimeSegment hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a time segment.
- * Based on @react-aria/datepicker useDateSegment semantics (time-field scope).
- */
-
-import { createMemo, createSignal } from "solid-js";
-import { useLocale } from "../i18n";
-import { access, type MaybeAccessor } from "../utils/reactivity";
-import type { TimeFieldState, TimeSegment, TimeSegmentType } from "@proyecto-viviana/solid-stately";
-
-export interface AriaTimeSegmentProps {
-  /** The segment data. */
-  segment: TimeSegment;
-}
-
-export interface TimeSegmentAria {
-  /** Props for the segment element. */
-  segmentProps: Record<string, unknown>;
-  /** Whether the segment is focused. */
-  isFocused: boolean;
-  /** Whether the segment is editable. */
-  isEditable: boolean;
-  /** Whether the segment is a placeholder. */
-  isPlaceholder: boolean;
-  /** The text to display. */
-  text: string;
-}
-
-/**
- * Provides the behavior and accessibility implementation for a time segment.
- */
-export function createTimeSegment<T extends TimeFieldState>(
-  props: MaybeAccessor<AriaTimeSegmentProps>,
-  state: T,
-  ref?: () => HTMLElement | null,
-): TimeSegmentAria {
-  const getProps = () => access(props);
-  const [isFocused, setIsFocused] = createSignal(false);
-  const [enteredKeys, setEnteredKeys] = createSignal("");
-  const [isComposing, setIsComposing] = createSignal(false);
-  const locale = useLocale();
-
-  const segment = createMemo(() => getProps().segment);
-
-  const isEditable = createMemo(() => {
-    const seg = segment();
-    return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
-  });
-
-  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"]'));
-
-    if (segments.length === 0) return;
-
-    if (target === "first") {
-      segments[0]?.focus();
-      return;
-    }
-
-    if (target === "last") {
-      segments[segments.length - 1]?.focus();
-      return;
-    }
-
-    const currentIndex = segments.indexOf(el);
-    if (currentIndex < 0) return;
-
-    const nextIndex = target === "next" ? currentIndex + 1 : currentIndex - 1;
-    if (nextIndex >= 0 && nextIndex < segments.length) {
-      segments[nextIndex]?.focus();
-    }
-  };
-
-  const clearCurrentSegment = (type: TimeSegmentType) => {
-    state.clearSegment(type);
-    setEnteredKeys("");
-  };
-
-  const handleNumericInput = (key: string, type: TimeSegmentType, seg: TimeSegment) => {
-    const newKeys = enteredKeys() + key;
-    const numValue = parseInt(newKeys, 10);
-    const maxValue = seg.maxValue ?? 99;
-    const minValue = seg.minValue ?? 0;
-    const maxDigits = String(maxValue).length;
-
-    if (numValue <= maxValue) {
-      state.setSegment(type, numValue);
-
-      const potentialNextValue = parseInt(newKeys + "0", 10);
-      if (potentialNextValue > maxValue || newKeys.length >= maxDigits) {
-        setEnteredKeys("");
-        focusSegment("next");
-      } else {
-        setEnteredKeys(newKeys);
-      }
-    } else {
-      const singleValue = parseInt(key, 10);
-      if (singleValue >= minValue && singleValue <= maxValue) {
-        state.setSegment(type, singleValue);
-        const potentialNextValue = parseInt(key + "0", 10);
-        if (potentialNextValue > maxValue || key.length >= maxDigits) {
-          setEnteredKeys("");
-          focusSegment("next");
-        } else {
-          setEnteredKeys(key);
-        }
-      } else {
-        setEnteredKeys("");
-      }
-    }
-  };
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (!isEditable()) return;
-    if (isComposing()) return;
-
-    const seg = segment();
-    const type = seg.type;
-
-    if (type === "literal") return;
-
-    switch (e.key) {
-      case "ArrowRight":
-        e.preventDefault();
-        focusSegment(locale().direction === "rtl" ? "prev" : "next");
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        focusSegment(locale().direction === "rtl" ? "next" : "prev");
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        state.incrementSegment(type);
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        state.decrementSegment(type);
-        break;
-      case "Home":
-        e.preventDefault();
-        focusSegment("first");
-        break;
-      case "End":
-        e.preventDefault();
-        focusSegment("last");
-        break;
-      case "Backspace":
-        e.preventDefault();
-        if (seg.isPlaceholder) {
-          focusSegment("prev");
-        } else {
-          clearCurrentSegment(type);
-        }
-        break;
-      case "Delete":
-        e.preventDefault();
-        clearCurrentSegment(type);
-        break;
-      default:
-        const normalizedDigit = normalizeDigit(e.key);
-        if (normalizedDigit) {
-          e.preventDefault();
-          handleNumericInput(normalizedDigit, type, seg);
-        }
-        break;
-    }
-  };
-
-  const handleBeforeInput = (e: InputEvent) => {
-    if (!isEditable()) return;
-    if (isComposing()) return;
-
-    const seg = segment();
-    if (seg.type === "literal") return;
-
-    if (e.inputType === "deleteContentBackward" || e.inputType === "deleteContentForward") {
-      e.preventDefault();
-      clearCurrentSegment(seg.type);
-      return;
-    }
-
-    if (e.inputType === "insertText" && e.data) {
-      const normalizedDigit = normalizeDigit(e.data);
-      if (!normalizedDigit) return;
-      e.preventDefault();
-      handleNumericInput(normalizedDigit, seg.type, seg);
-    }
-  };
-
-  const handleCompositionStart = () => {
-    if (!isEditable()) return;
-    setIsComposing(true);
-    setEnteredKeys("");
-  };
-
-  const handleCompositionEnd = (e: CompositionEvent) => {
-    if (!isEditable()) return;
-    setIsComposing(false);
-
-    const seg = segment();
-    if (seg.type === "literal") return;
-
-    const digits = extractNormalizedDigits(e.data ?? "");
-    if (digits.length === 0) return;
-
-    for (const digit of digits) {
-      handleNumericInput(digit, seg.type, seg);
-    }
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-    setEnteredKeys("");
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    setEnteredKeys("");
-
-    const maybeState = state as unknown as { confirmPlaceholder?: () => void };
-    maybeState.confirmPlaceholder?.();
-  };
-
-  const segmentProps = createMemo(() => {
-    const seg = segment();
-    const type = seg.type;
-
-    if (type === "literal") {
-      return {
-        "aria-hidden": true,
-      };
-    }
-
-    return {
-      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,
-      contentEditable: isEditable(),
-      suppressContentEditableWarning: true,
-      inputMode: "numeric" as const,
-      autoCorrect: "off",
-      enterKeyHint: "next" as const,
-      spellCheck: false,
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onBeforeInput: handleBeforeInput,
-      onCompositionStart: handleCompositionStart,
-      onCompositionEnd: handleCompositionEnd,
-      onMouseDown: (e: MouseEvent) => {
-        e.preventDefault();
-      },
-    };
-  });
-
-  const text = createMemo(() => {
-    const seg = segment();
-    return seg.isPlaceholder ? seg.placeholder : seg.text;
-  });
-
-  return {
-    get segmentProps() {
-      return segmentProps();
-    },
-    get isFocused() {
-      return isFocused();
-    },
-    get isEditable() {
-      return isEditable();
-    },
-    get isPlaceholder() {
-      return segment().isPlaceholder;
-    },
-    get text() {
-      return text();
-    },
-  };
-}
-
-type EditableTimeSegmentType = Exclude<TimeSegmentType, "literal">;
-
-const SEGMENT_LABELS: Record<string, Record<EditableTimeSegmentType, string>> = {
-  en: {
-    hour: "Hour",
-    minute: "Minute",
-    second: "Second",
-    dayPeriod: "AM/PM",
-  },
-  es: {
-    hour: "Hora",
-    minute: "Minuto",
-    second: "Segundo",
-    dayPeriod: "AM/PM",
-  },
-};
-
-function getSegmentLabel(type: TimeSegmentType, locale: string): string {
-  if (type === "literal") return "";
-
-  const language = locale.toLowerCase().split("-")[0] ?? "en";
-  const labels = SEGMENT_LABELS[language] ?? SEGMENT_LABELS.en;
-  return labels[type];
-}
-
-function normalizeDigit(input: string): string | null {
-  if (/^[0-9]$/.test(input)) {
-    return input;
-  }
-
-  const code = input.codePointAt(0);
-  if (code === undefined) return null;
-
-  if (code >= 0x0660 && code <= 0x0669) {
-    return String(code - 0x0660);
-  }
-
-  if (code >= 0x06f0 && code <= 0x06f9) {
-    return String(code - 0x06f0);
-  }
-
-  if (code >= 0xff10 && code <= 0xff19) {
-    return String(code - 0xff10);
-  }
-
-  return null;
-}
-
-function extractNormalizedDigits(input: string): string[] {
-  const digits: string[] = [];
-  for (const char of input) {
-    const normalized = normalizeDigit(char);
-    if (normalized) {
-      digits.push(normalized);
-    }
-  }
-  return digits;
-}