@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/focus/createAutoFocus.ts

@@ -5,13 +5,9 @@
  * and conflict resolution for multiple auto-focus elements.
  */
 
-import { createEffect, onCleanup, onMount } from 'solid-js';
-import { isServer } from 'solid-js/web';
-import { focusSafely } from '../utils/focus';
-
-// ============================================
-// TYPES
-// ============================================
+import { createEffect, onCleanup, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
+import { focusSafely } from "../utils/focus";
 
 export interface AutoFocusOptions {
   /**
@@ -62,10 +58,6 @@ export interface AutoFocusResult {
   cancel: () => void;
 }
 
-// ============================================
-// AUTO-FOCUS QUEUE
-// ============================================
-
 interface QueuedFocus {
   ref: () => HTMLElement | null | undefined;
   priority: number;
@@ -168,10 +160,6 @@ function removeFromQueue(ref: () => HTMLElement | null | undefined): void {
   autoFocusQueue = autoFocusQueue.filter((item) => item.ref !== ref);
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Creates auto-focus behavior for an element.
  *
@@ -229,7 +217,7 @@ function removeFromQueue(ref: () => HTMLElement | null | undefined): void {
  */
 export function createAutoFocus(
   ref: () => HTMLElement | null | undefined,
-  options: AutoFocusOptions = {}
+  options: AutoFocusOptions = {},
 ): AutoFocusResult {
   const {
     isEnabled = true,
@@ -296,10 +284,6 @@ export function createAutoFocus(
   };
 }
 
-// ============================================
-// UTILITIES
-// ============================================
-
 /**
  * Clears all pending auto-focus requests.
  * Useful for testing or when navigating away.

package/src/focus/createFocusRestore.ts

@@ -5,14 +5,10 @@
  * and safe restoration patterns.
  */
 
-import { createEffect, onCleanup, onMount } from 'solid-js';
-import { isServer } from 'solid-js/web';
-import { getOwnerDocument } from '../utils';
-import { focusSafely } from '../utils/focus';
-
-// ============================================
-// TYPES
-// ============================================
+import { createEffect, onCleanup, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
+import { getOwnerDocument } from "../utils";
+import { focusSafely } from "../utils/focus";
 
 export interface FocusRestoreOptions {
   /**
@@ -64,10 +60,6 @@ export interface FocusRestoreResult {
   clear: () => void;
 }
 
-// ============================================
-// GLOBAL FOCUS STACK
-// ============================================
-
 // Stack to track focus history across scopes
 const focusStack: HTMLElement[] = [];
 
@@ -99,10 +91,6 @@ export function clearFocusStack(): void {
   focusStack.length = 0;
 }
 
-// ============================================
-// UTILITIES
-// ============================================
-
 /**
  * Gets the active element, accounting for shadow DOM.
  */
@@ -120,9 +108,9 @@ function getActiveElement(doc: Document): HTMLElement | null {
 function isValidForRestore(element: HTMLElement | null): boolean {
   if (!element) return false;
   if (!document.body.contains(element)) return false;
-  if (element.hasAttribute('disabled')) return false;
-  if (element.getAttribute('aria-disabled') === 'true') return false;
-  if (element.getAttribute('aria-hidden') === 'true') return false;
+  if (element.hasAttribute("disabled")) return false;
+  if (element.getAttribute("aria-disabled") === "true") return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
   return true;
 }
 
@@ -131,7 +119,12 @@ function isValidForRestore(element: HTMLElement | null): boolean {
  */
 function tryRestoreFocus(
   element: HTMLElement | null,
-  options: Required<Pick<FocusRestoreOptions, 'maxRetries' | 'retryDelay' | 'preventScroll' | 'onRestore' | 'onRestoreFailed'>>
+  options: Required<
+    Pick<
+      FocusRestoreOptions,
+      "maxRetries" | "retryDelay" | "preventScroll" | "onRestore" | "onRestoreFailed"
+    >
+  >,
 ): void {
   const { maxRetries, retryDelay, preventScroll, onRestore, onRestoreFailed } = options;
   let attempts = 0;
@@ -164,10 +157,6 @@ function tryRestoreFocus(
   requestAnimationFrame(attempt);
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Creates a focus restoration manager.
  *
@@ -212,9 +201,7 @@ function tryRestoreFocus(
  * }
  * ```
  */
-export function createFocusRestore(
-  options: FocusRestoreOptions = {}
-): FocusRestoreResult {
+export function createFocusRestore(options: FocusRestoreOptions = {}): FocusRestoreResult {
   const {
     restoreOnUnmount = true,
     maxRetries = 3,
@@ -255,7 +242,7 @@ export function createFocusRestore(
   });
 
   function saveCurrentFocus(): void {
-    const doc = typeof document !== 'undefined' ? document : null;
+    const doc = typeof document !== "undefined" ? document : null;
     if (!doc) return;
 
     const active = getActiveElement(doc);

package/src/focus/createVirtualFocus.ts

@@ -12,12 +12,8 @@
  * - Grid/table navigation
  */
 
-import { type Accessor, createSignal, createEffect, onCleanup } from 'solid-js';
-import { isServer } from 'solid-js/web';
-
-// ============================================
-// TYPES
-// ============================================
+import { type Accessor, createSignal, createEffect, onCleanup } from "solid-js";
+import { isServer } from "solid-js/web";
 
 export interface VirtualFocusOptions<T> {
   /**
@@ -58,7 +54,7 @@ export interface VirtualFocusOptions<T> {
    * Orientation for keyboard navigation.
    * @default 'vertical'
    */
-  orientation?: 'horizontal' | 'vertical' | 'both';
+  orientation?: "horizontal" | "vertical" | "both";
 }
 
 export interface VirtualFocusResult<T> {
@@ -106,7 +102,7 @@ export interface VirtualFocusResult<T> {
    * Props to spread on the container element.
    */
   containerProps: {
-    'aria-activedescendant': Accessor<string | undefined>;
+    "aria-activedescendant": Accessor<string | undefined>;
     onKeyDown: (e: KeyboardEvent) => void;
   };
   /**
@@ -114,20 +110,12 @@ export interface VirtualFocusResult<T> {
    */
   getItemProps: (key: string) => {
     id: string;
-    'aria-selected'?: boolean;
+    "aria-selected"?: boolean;
   };
 }
 
-// ============================================
-// CONSTANTS
-// ============================================
-
 const DEFAULT_PAGE_SIZE = 10;
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Creates virtual focus management for a collection.
  *
@@ -185,9 +173,7 @@ const DEFAULT_PAGE_SIZE = 10;
  * }
  * ```
  */
-export function createVirtualFocus<T>(
-  options: VirtualFocusOptions<T>
-): VirtualFocusResult<T> {
+export function createVirtualFocus<T>(options: VirtualFocusOptions<T>): VirtualFocusResult<T> {
   const {
     items,
     getKey,
@@ -197,7 +183,7 @@ export function createVirtualFocus<T>(
     onFocusChange,
     wrap = true,
     skipDisabled = true,
-    orientation = 'vertical',
+    orientation = "vertical",
   } = options;
 
   // During SSR, return minimal implementation
@@ -215,7 +201,7 @@ export function createVirtualFocus<T>(
       focusPageUp: () => {},
       isFocused: () => false,
       containerProps: {
-        'aria-activedescendant': () => undefined,
+        "aria-activedescendant": () => undefined,
         onKeyDown: () => {},
       },
       getItemProps: (key: string) => ({ id: `item-${key}` }),
@@ -223,9 +209,7 @@ export function createVirtualFocus<T>(
   }
 
   // Internal state for uncontrolled mode
-  const [internalKey, setInternalKey] = createSignal<string | null>(
-    defaultFocusedKey ?? null
-  );
+  const [internalKey, setInternalKey] = createSignal<string | null>(defaultFocusedKey ?? null);
 
   // Use controlled or uncontrolled value
   const focusedKey = controlledFocusedKey ?? internalKey;
@@ -320,47 +304,47 @@ export function createVirtualFocus<T>(
 
   // Keyboard handler
   const onKeyDown = (e: KeyboardEvent): void => {
-    const isVertical = orientation === 'vertical' || orientation === 'both';
-    const isHorizontal = orientation === 'horizontal' || orientation === 'both';
+    const isVertical = orientation === "vertical" || orientation === "both";
+    const isHorizontal = orientation === "horizontal" || orientation === "both";
 
     switch (e.key) {
-      case 'ArrowDown':
+      case "ArrowDown":
         if (isVertical) {
           e.preventDefault();
           focusNext();
         }
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         if (isVertical) {
           e.preventDefault();
           focusPrevious();
         }
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         if (isHorizontal) {
           e.preventDefault();
           focusNext();
         }
         break;
-      case 'ArrowLeft':
+      case "ArrowLeft":
         if (isHorizontal) {
           e.preventDefault();
           focusPrevious();
         }
         break;
-      case 'Home':
+      case "Home":
         e.preventDefault();
         focusFirst();
         break;
-      case 'End':
+      case "End":
         e.preventDefault();
         focusLast();
         break;
-      case 'PageDown':
+      case "PageDown":
         e.preventDefault();
         focusPageDown();
         break;
-      case 'PageUp':
+      case "PageUp":
         e.preventDefault();
         focusPageUp();
         break;
@@ -368,7 +352,7 @@ export function createVirtualFocus<T>(
   };
 
   const containerProps = {
-    'aria-activedescendant': () => {
+    "aria-activedescendant": () => {
       const key = focusedKey();
       return key ? `item-${key}` : undefined;
     },

package/src/focus/index.ts

@@ -1,13 +1,11 @@
-// FocusScope
 export {
   FocusScope,
   useFocusManager,
   type FocusScopeProps,
   type FocusManager,
   type FocusManagerOptions,
-} from './FocusScope';
+} from "./FocusScope";
 
-// Focus Restoration
 export {
   createFocusRestore,
   pushFocusStack,
@@ -16,20 +14,18 @@ export {
   clearFocusStack,
   type FocusRestoreOptions,
   type FocusRestoreResult,
-} from './createFocusRestore';
+} from "./createFocusRestore";
 
-// Virtual Focus
 export {
   createVirtualFocus,
   type VirtualFocusOptions,
   type VirtualFocusResult,
-} from './createVirtualFocus';
+} from "./createVirtualFocus";
 
-// Auto Focus
 export {
   createAutoFocus,
   clearAutoFocusQueue,
   getAutoFocusQueueLength,
   type AutoFocusOptions,
   type AutoFocusResult,
-} from './createAutoFocus';
+} from "./createAutoFocus";

package/src/form/createFormReset.ts

@@ -5,7 +5,7 @@
  * Port of @react-aria/utils useFormReset.
  */
 
-import { type Accessor, createEffect, onCleanup } from 'solid-js';
+import { type Accessor, createEffect, onCleanup } from "solid-js";
 
 export interface FormResetOptions<T> {
   /** The default value to reset to. */
@@ -29,7 +29,7 @@ export interface FormResetOptions<T> {
 export function createFormReset<T>(
   ref: Accessor<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined>,
   defaultValue: T,
-  onReset: (value: T) => void
+  onReset: (value: T) => void,
 ): void {
   createEffect(() => {
     const element = ref();
@@ -42,10 +42,10 @@ export function createFormReset<T>(
       onReset(defaultValue);
     };
 
-    form.addEventListener('reset', handleReset);
+    form.addEventListener("reset", handleReset);
 
     onCleanup(() => {
-      form.removeEventListener('reset', handleReset);
+      form.removeEventListener("reset", handleReset);
     });
   });
 }

package/src/form/createFormValidation.ts

@@ -7,23 +7,13 @@
  * Port of react-aria's useFormValidation.
  */
 
-import { type Accessor, createEffect, onCleanup } from 'solid-js';
-import {
-  type FormValidationState,
-  type ValidationResult,
-} from '@proyecto-viviana/solid-stately';
-import { setInteractionModality } from '../interactions/createInteractionModality';
+import { type Accessor, createEffect, onCleanup } from "solid-js";
+import { type FormValidationState, type ValidationResult } from "@proyecto-viviana/solid-stately";
+import { setInteractionModality } from "../interactions/createInteractionModality";
 
-// ============================================
-// TYPES
-// ============================================
+export type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
-export type ValidatableElement =
-  | HTMLInputElement
-  | HTMLTextAreaElement
-  | HTMLSelectElement;
-
-export type ValidationBehavior = 'aria' | 'native';
+export type ValidationBehavior = "aria" | "native";
 
 export interface FormValidationProps {
   /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
@@ -32,10 +22,6 @@ export interface FormValidationProps {
   focus?: () => void;
 }
 
-// ============================================
-// HELPERS
-// ============================================
-
 function getValidity(input: ValidatableElement): ValidityState {
   // Create a snapshot of the validity state (the native object is live)
   const validity = input.validity;
@@ -72,10 +58,6 @@ function getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null
   return null;
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Connects form validation state to a native HTML form input.
  *
@@ -115,9 +97,9 @@ function getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null
 export function createFormValidation(
   props: FormValidationProps,
   state: FormValidationState,
-  ref: Accessor<ValidatableElement | undefined>
+  ref: Accessor<ValidatableElement | undefined>,
 ): void {
-  const validationBehavior = () => props.validationBehavior ?? 'aria';
+  const validationBehavior = () => props.validationBehavior ?? "aria";
   const focus = () => props.focus;
 
   // Track whether we should ignore form reset (for React-like programmatic resets)
@@ -126,20 +108,23 @@ export function createFormValidation(
   // Set custom validity on the native input
   createEffect(() => {
     const input = ref();
+    // `'setCustomValidity' in input` guards refs that aren't true form elements
+    // (e.g. a custom element), matching upstream useFormValidation.
     if (
-      validationBehavior() === 'native' &&
+      validationBehavior() === "native" &&
       input &&
+      "setCustomValidity" in input &&
       !input.disabled
     ) {
       const realtimeValidation = state.realtimeValidation();
       const errorMessage = realtimeValidation.isInvalid
-        ? realtimeValidation.validationErrors.join(' ') || 'Invalid value.'
-        : '';
+        ? realtimeValidation.validationErrors.join(" ") || "Invalid value."
+        : "";
       input.setCustomValidity(errorMessage);
 
       // Prevent default tooltip for validation message
-      if (!input.hasAttribute('title')) {
-        input.title = '';
+      if (!input.hasAttribute("title")) {
+        input.title = "";
       }
 
       // Update validation with native validity if not already invalid
@@ -174,7 +159,7 @@ export function createFormValidation(
           input.focus();
         }
         // Always show focus ring
-        setInteractionModality('keyboard');
+        setInteractionModality("keyboard");
       }
 
       // Prevent default browser error UI
@@ -201,21 +186,20 @@ export function createFormValidation(
         // Ignore programmatic resets outside user events
         isIgnoredReset =
           !window.event ||
-          (window.event.type === 'message' &&
-            window.event.target instanceof MessagePort);
+          (window.event.type === "message" && window.event.target instanceof MessagePort);
         originalReset?.();
         isIgnoredReset = false;
       };
     }
 
-    input.addEventListener('invalid', onInvalid);
-    input.addEventListener('change', onChange);
-    form?.addEventListener('reset', onReset);
+    input.addEventListener("invalid", onInvalid);
+    input.addEventListener("change", onChange);
+    form?.addEventListener("reset", onReset);
 
     onCleanup(() => {
-      input.removeEventListener('invalid', onInvalid);
-      input.removeEventListener('change', onChange);
-      form?.removeEventListener('reset', onReset);
+      input.removeEventListener("invalid", onInvalid);
+      input.removeEventListener("change", onChange);
+      form?.removeEventListener("reset", onReset);
       if (form && originalReset) {
         form.reset = originalReset;
       }

package/src/form/index.ts

@@ -3,9 +3,6 @@ export {
   type FormValidationProps,
   type ValidatableElement,
   type ValidationBehavior,
-} from './createFormValidation';
+} from "./createFormValidation";
 
-export {
-  createFormReset,
-  type FormResetOptions,
-} from './createFormReset';
+export { createFormReset, type FormResetOptions } from "./createFormReset";