@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/datepicker/createTimeSegment.ts

@@ -0,0 +1,352 @@
+/**
+ * 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;
+}

package/src/datepicker/index.ts

@@ -1,23 +1,22 @@
 // Date Field
-export {
-  createDateField,
-  type AriaDateFieldProps,
-  type DateFieldAria,
-} from './createDateField';
+export { createDateField, type AriaDateFieldProps, type DateFieldAria } from "./createDateField";
 
 // Date Segment
 export {
   createDateSegment,
   type AriaDateSegmentProps,
   type DateSegmentAria,
-} from './createDateSegment';
+} from "./createDateSegment";
 
 // Time Field
+export { createTimeField, type AriaTimeFieldProps, type TimeFieldAria } from "./createTimeField";
+
+// Time Segment
 export {
-  createTimeField,
-  type AriaTimeFieldProps,
-  type TimeFieldAria,
-} from './createTimeField';
+  createTimeSegment,
+  type AriaTimeSegmentProps,
+  type TimeSegmentAria,
+} from "./createTimeSegment";
 
 // Date Picker
 export {
@@ -25,4 +24,18 @@ export {
   type AriaDatePickerProps,
   type DatePickerAria,
   type DatePickerState,
-} from './createDatePicker';
+} from "./createDatePicker";
+
+// Date Picker Group
+export {
+  createDatePickerGroup,
+  type AriaDatePickerGroupProps,
+  type DatePickerGroupAria,
+} from "./createDatePickerGroup";
+
+// Date Range Picker
+export {
+  createDateRangePicker,
+  type AriaDateRangePickerProps,
+  type DateRangePickerAria,
+} from "./createDateRangePicker";

package/src/dialog/createDialog.ts

@@ -1,120 +1,127 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/**
- * Ported from React Aria:
- * https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/dialog/src/useDialog.ts
- */
-
-import { Accessor, createEffect, createMemo, createSignal, createUniqueId, onCleanup } from 'solid-js'
-import { filterDOMProps, focusSafely } from '../utils'
-import type { AriaLabelingProps, DOMProps } from './types'
-
-export interface AriaDialogProps extends DOMProps, AriaLabelingProps {
-  /**
-   * The role of the dialog element.
-   * @default 'dialog'
-   */
-  role?: 'dialog' | 'alertdialog'
-}
-
-export interface DialogAria {
-  /** Props for the dialog container element. */
-  dialogProps: Accessor<Record<string, any>>
-
-  /** Props for the dialog title element. */
-  titleProps: Accessor<Record<string, any>>
-}
-
-/**
- * Provides the behavior and accessibility implementation for a dialog component.
- * A dialog is an overlay shown above other content in an application.
- */
-export function createDialog(
-  props: AriaDialogProps | Accessor<AriaDialogProps>,
-  ref: Accessor<HTMLElement | undefined>
-): DialogAria {
-  // Support both direct props and accessor pattern
-  const getProps = typeof props === 'function' ? props : () => props
-
-  const role = () => getProps().role ?? 'dialog'
-  const generatedTitleId = createUniqueId()
-  const [isRefocusing, setIsRefocusing] = createSignal(false)
-
-  const titleId = createMemo(() => {
-    const p = getProps()
-    // Use provided aria-labelledby, or generated ID if no aria-label
-    if (p['aria-labelledby']) return undefined
-    return p['aria-label'] ? undefined : generatedTitleId
-  })
-
-  // Focus the dialog itself on mount, unless a child element is already focused.
-  // Only run on the client (SSR-safe)
-  createEffect(() => {
-    // Guard against SSR - document is not available on the server
-    if (typeof document === 'undefined') return
-
-    const dialogEl = ref()
-    if (dialogEl && !dialogEl.contains(document.activeElement)) {
-      focusSafely(dialogEl)
-
-      // Safari on iOS does not move the VoiceOver cursor to the dialog
-      // or announce that it has opened until it has rendered. A workaround
-      // is to wait for half a second, then blur and re-focus the dialog.
-      const timeout = setTimeout(() => {
-        // Check that the dialog is still focused, or focused was lost to the body.
-        if (document.activeElement === dialogEl || document.activeElement === document.body) {
-          setIsRefocusing(true)
-          dialogEl.blur()
-          focusSafely(dialogEl)
-          setIsRefocusing(false)
-        }
-      }, 500)
-
-      onCleanup(() => {
-        clearTimeout(timeout)
-      })
-    }
-  })
-
-  // Note: Focus containment is typically handled by createModal at a higher level
-  // For standalone dialogs, focus containment should be managed by the overlay system
-
-  const dialogProps = createMemo(() => {
-    const p = getProps()
-    return {
-      ...filterDOMProps(p),
-      role: role(),
-      tabIndex: -1,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'] || titleId(),
-      'aria-describedby': p['aria-describedby'],
-      // Prevent blur events from reaching createOverlay, which may cause
-      // popovers to close. Since focus is contained within the dialog,
-      // we don't want this to occur due to the above createEffect.
-      onBlur: (e: FocusEvent) => {
-        if (isRefocusing()) {
-          e.stopPropagation()
-        }
-      }
-    }
-  })
-
-  const titlePropsValue = createMemo(() => ({
-    id: titleId()
-  }))
-
-  return {
-    dialogProps,
-    titleProps: titlePropsValue
-  }
-}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Ported from React Aria:
+ * https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/dialog/src/useDialog.ts
+ */
+
+import {
+  Accessor,
+  createEffect,
+  createMemo,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+} from "solid-js";
+import { filterDOMProps, focusSafely } from "../utils";
+import type { AriaLabelingProps, DOMProps } from "./types";
+
+export interface AriaDialogProps extends DOMProps, AriaLabelingProps {
+  /**
+   * The role of the dialog element.
+   * @default 'dialog'
+   */
+  role?: "dialog" | "alertdialog";
+}
+
+export interface DialogAria {
+  /** Props for the dialog container element. */
+  dialogProps: Accessor<Record<string, unknown>>;
+
+  /** Props for the dialog title element. */
+  titleProps: Accessor<Record<string, unknown>>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a dialog component.
+ * A dialog is an overlay shown above other content in an application.
+ */
+export function createDialog(
+  props: AriaDialogProps | Accessor<AriaDialogProps>,
+  ref: Accessor<HTMLElement | undefined>,
+): DialogAria {
+  // Support both direct props and accessor pattern
+  const getProps = typeof props === "function" ? props : () => props;
+
+  const role = () => getProps().role ?? "dialog";
+  const generatedTitleId = createUniqueId();
+  const [isRefocusing, setIsRefocusing] = createSignal(false);
+
+  const titleId = createMemo(() => {
+    const p = getProps();
+    // Use provided aria-labelledby, or generated ID if no aria-label
+    if (p["aria-labelledby"]) return undefined;
+    return p["aria-label"] ? undefined : generatedTitleId;
+  });
+
+  // Focus the dialog itself on mount, unless a child element is already focused.
+  // Only run on the client (SSR-safe)
+  createEffect(() => {
+    // Guard against SSR - document is not available on the server
+    if (typeof document === "undefined") return;
+
+    const dialogEl = ref();
+    if (dialogEl && !dialogEl.contains(document.activeElement)) {
+      focusSafely(dialogEl);
+
+      // Safari on iOS does not move the VoiceOver cursor to the dialog
+      // or announce that it has opened until it has rendered. A workaround
+      // is to wait for half a second, then blur and re-focus the dialog.
+      const timeout = setTimeout(() => {
+        // Check that the dialog is still focused, or focused was lost to the body.
+        if (document.activeElement === dialogEl || document.activeElement === document.body) {
+          setIsRefocusing(true);
+          dialogEl.blur();
+          focusSafely(dialogEl);
+          setIsRefocusing(false);
+        }
+      }, 500);
+
+      onCleanup(() => {
+        clearTimeout(timeout);
+      });
+    }
+  });
+
+  // Note: Focus containment is typically handled by createModal at a higher level
+  // For standalone dialogs, focus containment should be managed by the overlay system
+
+  const dialogProps = createMemo(() => {
+    const p = getProps();
+    return {
+      ...filterDOMProps(p),
+      role: role(),
+      tabIndex: -1,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"] || titleId(),
+      "aria-describedby": p["aria-describedby"],
+      // Prevent blur events from reaching createOverlay, which may cause
+      // popovers to close. Since focus is contained within the dialog,
+      // we don't want this to occur due to the above createEffect.
+      onBlur: (e: FocusEvent) => {
+        if (isRefocusing()) {
+          e.stopPropagation();
+        }
+      },
+    };
+  });
+
+  const titlePropsValue = createMemo(() => ({
+    id: titleId(),
+  }));
+
+  return {
+    dialogProps,
+    titleProps: titlePropsValue,
+  };
+}

package/src/dialog/index.ts

@@ -1,2 +1,2 @@
-export { createDialog } from './createDialog'
-export type { AriaDialogProps, DialogAria } from './createDialog'
+export { createDialog } from "./createDialog";
+export type { AriaDialogProps, DialogAria } from "./createDialog";