@proyecto-viviana/solidaria 0.2.8 → 0.3.0

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,16 @@ export function createFormValidation(
   // Set custom validity on the native input
   createEffect(() => {
     const input = ref();
-    if (
-      validationBehavior() === 'native' &&
-      input &&
-      !input.disabled
-    ) {
+    if (validationBehavior() === "native" && 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 +152,7 @@ export function createFormValidation(
           input.focus();
         }
         // Always show focus ring
-        setInteractionModality('keyboard');
+        setInteractionModality("keyboard");
       }
 
       // Prevent default browser error UI
@@ -201,21 +179,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";

package/src/grid/GridKeyboardDelegate.ts

@@ -3,9 +3,9 @@
  * Based on @react-aria/grid/GridKeyboardDelegate.
  */
 
-import type { GridCollection, GridNode, Key } from '@proyecto-viviana/solid-stately';
-import type { KeyboardDelegate } from './types';
-import type { Accessor } from 'solid-js';
+import type { GridCollection, GridNode, Key } from "@proyecto-viviana/solid-stately";
+import type { KeyboardDelegate } from "./types";
+import type { Accessor } from "solid-js";
 
 export interface GridKeyboardDelegateOptions<T> {
   /** The grid collection. */
@@ -15,9 +15,9 @@ export interface GridKeyboardDelegateOptions<T> {
   /** Ref to the grid element. */
   ref: Accessor<HTMLElement | null>;
   /** Focus mode: row or cell. */
-  focusMode: 'row' | 'cell';
+  focusMode: "row" | "cell";
   /** Text direction (ltr or rtl). */
-  direction: 'ltr' | 'rtl';
+  direction: "ltr" | "rtl";
 }
 
 /**
@@ -27,8 +27,8 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
   private collection: GridCollection<T>;
   private disabledKeys: Set<Key>;
   private ref: Accessor<HTMLElement | null>;
-  private focusMode: 'row' | 'cell';
-  private direction: 'ltr' | 'rtl';
+  private focusMode: "row" | "cell";
+  private direction: "ltr" | "rtl";
 
   constructor(options: GridKeyboardDelegateOptions<T>) {
     this.collection = options.collection;
@@ -52,11 +52,11 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     const item = this.collection.getItem(key);
     if (!item) return null;
 
-    if (item.type === 'item') {
+    if (item.type === "item") {
       return key;
     }
 
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       return item.parentKey;
     }
 
@@ -67,7 +67,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
    * Get all body rows (excluding header rows).
    */
   private getBodyRows(): GridNode<T>[] {
-    return this.collection.rows.filter((row) => row.type === 'item');
+    return this.collection.rows.filter((row) => row.type === "item");
   }
 
   /**
@@ -76,7 +76,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
   getFirstKey(fromKey?: Key, global?: boolean): Key | null {
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || global) {
+    if (this.focusMode === "row" || global) {
       // Find first non-disabled row
       for (const row of rows) {
         if (!this.isDisabled(row.key)) {
@@ -114,7 +114,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
   getLastKey(fromKey?: Key, global?: boolean): Key | null {
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || global) {
+    if (this.focusMode === "row" || global) {
       // Find last non-disabled row
       for (let i = rows.length - 1; i >= 0; i--) {
         if (!this.isDisabled(rows[i].key)) {
@@ -155,9 +155,9 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
 
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || item.type === 'item') {
+    if (this.focusMode === "row" || item.type === "item") {
       // Find the row and get the previous one
-      const rowKey = item.type === 'item' ? key : item.parentKey;
+      const rowKey = item.type === "item" ? key : item.parentKey;
       const rowIndex = rows.findIndex((r) => r.key === rowKey);
 
       if (rowIndex > 0) {
@@ -172,7 +172,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     }
 
     // Cell focus mode - get cell in same column of previous row
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const rowIndex = rows.findIndex((r) => r.key === item.parentKey);
       const colIndex = item.column ?? item.index;
 
@@ -201,9 +201,9 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
 
     const rows = this.getBodyRows();
 
-    if (this.focusMode === 'row' || item.type === 'item') {
+    if (this.focusMode === "row" || item.type === "item") {
       // Find the row and get the next one
-      const rowKey = item.type === 'item' ? key : item.parentKey;
+      const rowKey = item.type === "item" ? key : item.parentKey;
       const rowIndex = rows.findIndex((r) => r.key === rowKey);
 
       if (rowIndex >= 0 && rowIndex < rows.length - 1) {
@@ -218,7 +218,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     }
 
     // Cell focus mode - get cell in same column of next row
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const rowIndex = rows.findIndex((r) => r.key === item.parentKey);
       const colIndex = item.column ?? item.index;
 
@@ -246,15 +246,15 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     if (!item) return null;
 
     // In row focus mode, left/right might not be meaningful
-    if (this.focusMode === 'row') {
+    if (this.focusMode === "row") {
       return null;
     }
 
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const children = [...this.collection.getChildren(item.parentKey)];
       const colIndex = children.findIndex((c) => c.key === key);
 
-      if (this.direction === 'rtl') {
+      if (this.direction === "rtl") {
         // RTL: left moves to higher index
         if (colIndex < children.length - 1) {
           return children[colIndex + 1].key;
@@ -278,15 +278,15 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     if (!item) return null;
 
     // In row focus mode, left/right might not be meaningful
-    if (this.focusMode === 'row') {
+    if (this.focusMode === "row") {
       return null;
     }
 
-    if (item.type === 'cell' && item.parentKey != null) {
+    if (item.type === "cell" && item.parentKey != null) {
       const children = [...this.collection.getChildren(item.parentKey)];
       const colIndex = children.findIndex((c) => c.key === key);
 
-      if (this.direction === 'rtl') {
+      if (this.direction === "rtl") {
         // RTL: right moves to lower index
         if (colIndex > 0) {
           return children[colIndex - 1].key;
@@ -327,12 +327,12 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     // Find first non-disabled row at or before target
     for (let i = targetIndex; i >= 0; i--) {
       if (!this.isDisabled(rows[i].key)) {
-        if (this.focusMode === 'row' || item.type === 'item') {
+        if (this.focusMode === "row" || item.type === "item") {
           return rows[i].key;
         }
 
         // Cell focus mode - return cell at same column
-        const colIndex = item.type === 'cell' ? (item.column ?? item.index) : 0;
+        const colIndex = item.type === "cell" ? (item.column ?? item.index) : 0;
         const children = [...this.collection.getChildren(rows[i].key)];
         const targetCol = Math.min(colIndex, children.length - 1);
         if (targetCol >= 0) {
@@ -369,12 +369,12 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     // Find first non-disabled row at or after target
     for (let i = targetIndex; i < rows.length; i++) {
       if (!this.isDisabled(rows[i].key)) {
-        if (this.focusMode === 'row' || item.type === 'item') {
+        if (this.focusMode === "row" || item.type === "item") {
           return rows[i].key;
         }
 
         // Cell focus mode - return cell at same column
-        const colIndex = item.type === 'cell' ? (item.column ?? item.index) : 0;
+        const colIndex = item.type === "cell" ? (item.column ?? item.index) : 0;
         const children = [...this.collection.getChildren(rows[i].key)];
         const targetCol = Math.min(colIndex, children.length - 1);
         if (targetCol >= 0) {
@@ -406,7 +406,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     for (let i = startIndex; i < rows.length; i++) {
       const row = rows[i];
       if (!this.isDisabled(row.key)) {
-        const textValue = row.textValue?.toLowerCase() ?? '';
+        const textValue = row.textValue?.toLowerCase() ?? "";
         if (textValue.startsWith(searchLower)) {
           return row.key;
         }
@@ -417,7 +417,7 @@ export class GridKeyboardDelegate<T> implements KeyboardDelegate {
     for (let i = 0; i < startIndex; i++) {
       const row = rows[i];
       if (!this.isDisabled(row.key)) {
-        const textValue = row.textValue?.toLowerCase() ?? '';
+        const textValue = row.textValue?.toLowerCase() ?? "";
         if (textValue.startsWith(searchLower)) {
           return row.key;
         }