@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/interactions/createFocusRing.ts

@@ -8,17 +8,20 @@
  * Port of @react-aria/focus useFocusRing.
  */
 
-import { type JSX, type Accessor, createSignal, createEffect, onCleanup, createMemo } from 'solid-js';
-import { createFocus } from './createFocus';
-import { createFocusWithin } from './createFocusWithin';
+import {
+  type JSX,
+  type Accessor,
+  createSignal,
+  createEffect,
+  onCleanup,
+  createMemo,
+} from "solid-js";
+import { createFocus } from "./createFocus";
+import { createFocusWithin } from "./createFocusWithin";
 import {
   createFocusVisibleListener,
   isFocusVisible as isGlobalFocusVisible,
-} from './createInteractionModality';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./createInteractionModality";
 
 export interface FocusRingProps {
   /** Whether the element is a text input. */
@@ -38,10 +41,6 @@ export interface FocusRingResult {
   focusProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Determines whether a focus ring should be visible for a given element.
  *
@@ -55,15 +54,16 @@ export function createFocusRing(props: FocusRingProps = {}): FocusRingResult {
   const { isTextInput = false, autoFocus = false, within = false } = props;
 
   const [isFocused, setIsFocused] = createSignal(false);
-  const [focusVisibleFlag, setFocusVisibleFlag] = createSignal(
-    autoFocus || isGlobalFocusVisible()
-  );
+  const [focusVisibleFlag, setFocusVisibleFlag] = createSignal(autoFocus || isGlobalFocusVisible());
   const isFocusVisible = createMemo(() => isFocused() && focusVisibleFlag());
 
   createEffect(() => {
-    const cleanup = createFocusVisibleListener((visible) => {
-      setFocusVisibleFlag(visible);
-    }, { isTextInput });
+    const cleanup = createFocusVisibleListener(
+      (visible) => {
+        setFocusVisibleFlag(visible);
+      },
+      { isTextInput },
+    );
     onCleanup(cleanup);
   });
 
@@ -84,6 +84,8 @@ export function createFocusRing(props: FocusRingProps = {}): FocusRingResult {
   return {
     isFocused,
     isFocusVisible,
-    focusProps: (within ? focusWithinResult.focusWithinProps : focusResult.focusProps) as JSX.HTMLAttributes<HTMLElement>,
+    focusProps: (within
+      ? focusWithinResult.focusWithinProps
+      : focusResult.focusProps) as JSX.HTMLAttributes<HTMLElement>,
   };
 }

package/src/interactions/createFocusWithin.ts

@@ -4,9 +4,9 @@
  * This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.
  */
 
-import { JSX, onCleanup } from 'solid-js';
-import { getOwnerDocument, getEventTarget, nodeContains, createGlobalListeners } from '../utils';
-import { setEventTarget } from '../utils/events';
+import { JSX, onCleanup } from "solid-js";
+import { getOwnerDocument, getEventTarget, nodeContains, createGlobalListeners } from "../utils";
+import { setEventTarget } from "../utils/events";
 
 export interface FocusWithinProps {
   /** Whether the focus within events should be disabled. */
@@ -32,7 +32,10 @@ function getActiveElement(doc: Document): Element | null {
   return activeElement;
 }
 
-function createSyntheticBlurHandler(): (_e: FocusEvent, target: Element) => (() => void) | undefined {
+function createSyntheticBlurHandler(): (
+  _e: FocusEvent,
+  target: Element,
+) => (() => void) | undefined {
   let isFocused = false;
   let observer: MutationObserver | null = null;
 
@@ -54,7 +57,7 @@ function createSyntheticBlurHandler(): (_e: FocusEvent, target: Element) => (()
         }
       };
 
-      target.addEventListener('focusout', onBlurHandler, { once: true });
+      target.addEventListener("focusout", onBlurHandler, { once: true });
 
       observer = new MutationObserver(() => {
         if (isFocused && (target as HTMLButtonElement).disabled) {
@@ -62,13 +65,14 @@ function createSyntheticBlurHandler(): (_e: FocusEvent, target: Element) => (()
           observer?.disconnect();
           observer = null;
           const ownerDocument = target.ownerDocument;
-          const relatedTarget = target === ownerDocument.activeElement ? null : ownerDocument.activeElement;
-          target.dispatchEvent(new FocusEvent('blur', { relatedTarget }));
-          target.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget }));
+          const relatedTarget =
+            target === ownerDocument.activeElement ? null : ownerDocument.activeElement;
+          target.dispatchEvent(new FocusEvent("blur", { relatedTarget }));
+          target.dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget }));
         }
       });
 
-      observer.observe(target, { attributes: true, attributeFilter: ['disabled'] });
+      observer.observe(target, { attributes: true, attributeFilter: ["disabled"] });
 
       return () => {
         if (observer) {
@@ -158,13 +162,16 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
       const currentTarget = e.currentTarget;
 
       addGlobalListener(
-        'focus',
+        "focus",
         (focusEvent: Event) => {
-          if (isFocusWithin && !nodeContains(currentTarget, (focusEvent as FocusEvent).target as Element)) {
+          if (
+            isFocusWithin &&
+            !nodeContains(currentTarget, (focusEvent as FocusEvent).target as Element)
+          ) {
             // Create a synthetic blur event
             const window = ownerDocument?.defaultView;
             if (window) {
-              const nativeEvent = new window.FocusEvent('blur', {
+              const nativeEvent = new window.FocusEvent("blur", {
                 relatedTarget: (focusEvent as FocusEvent).target as Element,
               });
               setEventTarget(nativeEvent, currentTarget);
@@ -184,7 +191,7 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
             }
           }
         },
-        { capture: true }
+        { capture: true },
       );
     }
   };

package/src/interactions/createFocusable.ts

@@ -4,10 +4,10 @@
  * This is a 1-1 port of React-Aria's useFocusable hook adapted for SolidJS.
  */
 
-import { JSX, Accessor, createContext, useContext, onMount } from 'solid-js';
-import { createFocus, type FocusEvents } from './createFocus';
-import { createKeyboard, type KeyboardEvents } from './createKeyboard';
-import { mergeProps, focusSafely } from '../utils';
+import { JSX, Accessor, createContext, useContext, onMount } from "solid-js";
+import { createFocus, type FocusEvents } from "./createFocus";
+import { createKeyboard, type KeyboardEvents } from "./createKeyboard";
+import { mergeProps, focusSafely } from "../utils";
 
 export interface FocusableDOMProps {
   /** Whether to exclude the element from the sequential tab order. */
@@ -46,8 +46,8 @@ export const FocusableContext = createContext<FocusableContextValue | null>(null
  * Hook to consume the FocusableContext and sync the ref.
  */
 function useFocusableContext(
-  setRef: (el: HTMLElement) => void
-): Omit<FocusableContextValue, 'ref'> {
+  setRef: (el: HTMLElement) => void,
+): Omit<FocusableContextValue, "ref"> {
   const context = useContext(FocusableContext) || {};
 
   // If context has a ref, sync our ref to it
@@ -72,7 +72,7 @@ export interface FocusableProviderProps {
 }
 
 function isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): boolean {
-  if (typeof isDisabled === 'function') {
+  if (typeof isDisabled === "function") {
     return isDisabled();
   }
   return isDisabled ?? false;
@@ -106,7 +106,7 @@ function isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): b
  */
 export function createFocusable(
   props: CreateFocusableProps = {},
-  ref?: (el: HTMLElement) => void
+  ref?: (el: HTMLElement) => void,
 ): FocusableResult {
   let elementRef: HTMLElement | null = null;
   let autoFocusDone = false;
@@ -146,20 +146,19 @@ export function createFocusable(
     }
   });
 
-  // Always set a tabIndex so that Safari allows focusing native buttons and inputs.
-  let tabIndex: number | undefined = props.excludeFromTabOrder ? -1 : 0;
-  if (isDisabledValue(props.isDisabled)) {
-    tabIndex = undefined;
-  }
-
   // Build final focusable props
   const focusableProps = mergeProps(
     {
       ...interactions,
-      tabIndex,
+      get tabIndex() {
+        if (isDisabledValue(props.isDisabled)) {
+          return undefined;
+        }
+        return props.excludeFromTabOrder ? -1 : 0;
+      },
       ref: setRef,
     },
-    interactionProps
+    interactionProps,
   ) as JSX.HTMLAttributes<HTMLElement>;
 
   return {

package/src/interactions/createHover.ts

@@ -7,20 +7,23 @@
  * Port of @react-aria/interactions useHover.
  */
 
-import { type JSX, type Accessor, createSignal, createEffect, onCleanup, createMemo } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { isTestEnv } from '../utils/env';
-import { createGlobalListeners, nodeContains } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import {
+  type JSX,
+  type Accessor,
+  createSignal,
+  createEffect,
+  onCleanup,
+  createMemo,
+} from "solid-js";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import { isTestEnv } from "../utils/env";
+import { createGlobalListeners, nodeContains } from "../utils";
 
 export interface HoverEvent {
   /** The type of hover event being fired. */
-  type: 'hoverstart' | 'hoverend';
+  type: "hoverstart" | "hoverend";
   /** The pointer type that triggered the hover event. */
-  pointerType: 'mouse' | 'pen';
+  pointerType: "mouse" | "pen";
   /** The target element of the hover event. */
   target: Element;
 }
@@ -42,12 +45,12 @@ export interface CreateHoverProps extends HoverEvents {
 /** Event handler props returned by createHover - safe to spread on any element */
 export type HoverProps = Pick<
   JSX.HTMLAttributes<HTMLElement>,
-  | 'onPointerEnter'
-  | 'onPointerLeave'
-  | 'onPointerOver'
-  | 'onPointerOut'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
+  | "onPointerEnter"
+  | "onPointerLeave"
+  | "onPointerOver"
+  | "onPointerOut"
+  | "onMouseEnter"
+  | "onMouseLeave"
 >;
 
 export interface HoverResult {
@@ -57,10 +60,6 @@ export interface HoverResult {
   isHovered: Accessor<boolean>;
 }
 
-// ============================================
-// GLOBAL STATE
-// ============================================
-
 // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
 // We want to ignore these emulated events so they do not trigger hover behavior.
 let globalIgnoreEmulatedMouseEvents = false;
@@ -74,21 +73,21 @@ function setGlobalIgnoreEmulatedMouseEvents() {
 }
 
 function handleGlobalPointerEvent(e: PointerEvent) {
-  if (e.pointerType === 'touch') {
+  if (e.pointerType === "touch") {
     setGlobalIgnoreEmulatedMouseEvents();
   }
 }
 
 function setupGlobalTouchEvents() {
-  if (typeof document === 'undefined') {
+  if (typeof document === "undefined") {
     return () => {};
   }
 
   if (hoverCount === 0) {
-    if (typeof PointerEvent !== 'undefined') {
-      document.addEventListener('pointerup', handleGlobalPointerEvent);
+    if (typeof PointerEvent !== "undefined") {
+      document.addEventListener("pointerup", handleGlobalPointerEvent);
     } else if (isTestEnv()) {
-      document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
+      document.addEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
     }
   }
 
@@ -99,18 +98,14 @@ function setupGlobalTouchEvents() {
       return;
     }
 
-    if (typeof PointerEvent !== 'undefined') {
-      document.removeEventListener('pointerup', handleGlobalPointerEvent);
+    if (typeof PointerEvent !== "undefined") {
+      document.removeEventListener("pointerup", handleGlobalPointerEvent);
     } else if (isTestEnv()) {
-      document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
+      document.removeEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
     }
   };
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Handles pointer hover interactions for an element.
  */
@@ -123,7 +118,7 @@ export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverR
   let state = {
     isHovered: false,
     ignoreEmulatedMouseEvents: false,
-    pointerType: '' as 'mouse' | 'pen' | '',
+    pointerType: "" as "mouse" | "pen" | "",
     target: null as Element | null,
   };
 
@@ -137,11 +132,15 @@ export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverR
   createEffect(() => {
     const p = getProps();
     if (p.isDisabled && state.isHovered) {
-      triggerHoverEnd(state.target as Element, state.pointerType as 'mouse' | 'pen');
+      triggerHoverEnd(state.target as Element, state.pointerType as "mouse" | "pen");
     }
   });
 
-  function triggerHoverStart(target: Element, pointerType: 'mouse' | 'pen', eventTarget: Element | null) {
+  function triggerHoverStart(
+    target: Element,
+    pointerType: "mouse" | "pen",
+    eventTarget: Element | null,
+  ) {
     const p = getProps();
     state.pointerType = pointerType;
 
@@ -153,14 +152,22 @@ export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverR
     state.isHovered = true;
     state.target = target;
 
-    addGlobalListener('pointerover', (event: PointerEvent) => {
-      if (state.isHovered && state.target && !nodeContains(state.target, event.target as Element)) {
-        triggerHoverEnd(event.target as Element, event.pointerType as 'mouse' | 'pen');
-      }
-    }, { capture: true });
+    addGlobalListener(
+      "pointerover",
+      (event: PointerEvent) => {
+        if (
+          state.isHovered &&
+          state.target &&
+          !nodeContains(state.target, event.target as Element)
+        ) {
+          triggerHoverEnd(event.target as Element, event.pointerType as "mouse" | "pen");
+        }
+      },
+      { capture: true },
+    );
 
     p.onHoverStart?.({
-      type: 'hoverstart',
+      type: "hoverstart",
       target,
       pointerType,
     });
@@ -169,9 +176,9 @@ export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverR
     setIsHovered(true);
   }
 
-  function triggerHoverEnd(target: Element | null, pointerType: 'mouse' | 'pen') {
+  function triggerHoverEnd(target: Element | null, pointerType: "mouse" | "pen") {
     const p = getProps();
-    state.pointerType = '';
+    state.pointerType = "";
     state.target = null;
 
     if (!state.isHovered || !target) {
@@ -182,7 +189,7 @@ export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverR
     removeAllGlobalListeners();
 
     p.onHoverEnd?.({
-      type: 'hoverend',
+      type: "hoverend",
       target,
       pointerType,
     });
@@ -192,36 +199,44 @@ export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverR
   }
 
   const hoverProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => {
-    if (typeof PointerEvent !== 'undefined') {
+    if (typeof PointerEvent !== "undefined") {
       return {
         onPointerEnter: (e: PointerEvent) => {
-          if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {
+          if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse") {
             return;
           }
-          if (e.pointerType === 'touch') {
+          if (e.pointerType === "touch") {
             return;
           }
-          triggerHoverStart(e.currentTarget as Element, e.pointerType as 'mouse' | 'pen', e.target as Element);
+          triggerHoverStart(
+            e.currentTarget as Element,
+            e.pointerType as "mouse" | "pen",
+            e.target as Element,
+          );
         },
         onPointerLeave: (e: PointerEvent) => {
           const p = getProps();
           if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {
-            triggerHoverEnd(e.currentTarget as Element, e.pointerType as 'mouse' | 'pen');
+            triggerHoverEnd(e.currentTarget as Element, e.pointerType as "mouse" | "pen");
           }
         },
         onPointerOver: (e: PointerEvent) => {
-          if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {
+          if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse") {
             return;
           }
-          if (e.pointerType === 'touch') {
+          if (e.pointerType === "touch") {
             return;
           }
-          triggerHoverStart(e.currentTarget as Element, e.pointerType as 'mouse' | 'pen', e.target as Element);
+          triggerHoverStart(
+            e.currentTarget as Element,
+            e.pointerType as "mouse" | "pen",
+            e.target as Element,
+          );
         },
         onPointerOut: (e: PointerEvent) => {
           const p = getProps();
           if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {
-            triggerHoverEnd(e.currentTarget as Element, e.pointerType as 'mouse' | 'pen');
+            triggerHoverEnd(e.currentTarget as Element, e.pointerType as "mouse" | "pen");
           }
         },
       };
@@ -234,14 +249,14 @@ export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverR
       },
       onMouseEnter: (e: MouseEvent) => {
         if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {
-          triggerHoverStart(e.currentTarget as Element, 'mouse', e.target as Element);
+          triggerHoverStart(e.currentTarget as Element, "mouse", e.target as Element);
         }
         state.ignoreEmulatedMouseEvents = false;
       },
       onMouseLeave: (e: MouseEvent) => {
         const p = getProps();
         if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {
-          triggerHoverEnd(e.currentTarget as Element, 'mouse');
+          triggerHoverEnd(e.currentTarget as Element, "mouse");
         }
       },
     };