@proyecto-viviana/solidaria 0.0.1 → 0.0.2

package/src/interactions/createHover.ts

@@ -0,0 +1,214 @@
+/**
+ * createHover hook for Solidaria
+ *
+ * Handles pointer hover interactions for an element. Normalizes behavior
+ * across browsers and platforms, and ignores emulated mouse events on touch devices.
+ *
+ * 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';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface HoverEvent {
+  /** The type of hover event being fired. */
+  type: 'hoverstart' | 'hoverend';
+  /** The pointer type that triggered the hover event. */
+  pointerType: 'mouse' | 'pen';
+  /** The target element of the hover event. */
+  target: Element;
+}
+
+export interface HoverEvents {
+  /** Handler called when the hover starts. */
+  onHoverStart?: (e: HoverEvent) => void;
+  /** Handler called when the hover ends. */
+  onHoverEnd?: (e: HoverEvent) => void;
+  /** Handler called when the hover state changes. */
+  onHoverChange?: (isHovering: boolean) => void;
+}
+
+export interface CreateHoverProps extends HoverEvents {
+  /** Whether the hover events should be disabled. */
+  isDisabled?: boolean;
+}
+
+export interface HoverResult {
+  /** Props to spread on the target element. */
+  hoverProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the element is currently hovered. */
+  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;
+let hoverCount = 0;
+
+function setGlobalIgnoreEmulatedMouseEvents() {
+  globalIgnoreEmulatedMouseEvents = true;
+  setTimeout(() => {
+    globalIgnoreEmulatedMouseEvents = false;
+  }, 50);
+}
+
+function handleGlobalPointerEvent(e: PointerEvent) {
+  if (e.pointerType === 'touch') {
+    setGlobalIgnoreEmulatedMouseEvents();
+  }
+}
+
+function setupGlobalTouchEvents() {
+  if (typeof document === 'undefined') {
+    return () => {};
+  }
+
+  if (hoverCount === 0) {
+    if (typeof PointerEvent !== 'undefined') {
+      document.addEventListener('pointerup', handleGlobalPointerEvent);
+    } else if (process.env.NODE_ENV === 'test') {
+      document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
+    }
+  }
+
+  hoverCount++;
+  return () => {
+    hoverCount--;
+    if (hoverCount > 0) {
+      return;
+    }
+
+    if (typeof PointerEvent !== 'undefined') {
+      document.removeEventListener('pointerup', handleGlobalPointerEvent);
+    } else if (process.env.NODE_ENV === 'test') {
+      document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
+    }
+  };
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Handles pointer hover interactions for an element.
+ */
+export function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverResult {
+  const getProps = () => access(props);
+  const [isHovered, setIsHovered] = createSignal(false);
+
+  // Track internal hover state
+  let state = {
+    isHovered: false,
+    ignoreEmulatedMouseEvents: false,
+    pointerType: '' as 'mouse' | 'pen' | '',
+    target: null as Element | null,
+  };
+
+  // Setup global touch events
+  createEffect(() => {
+    const cleanup = setupGlobalTouchEvents();
+    onCleanup(cleanup);
+  });
+
+  // Reset hover when disabled
+  createEffect(() => {
+    const p = getProps();
+    if (p.isDisabled && state.isHovered) {
+      triggerHoverEnd(state.target as Element, state.pointerType as 'mouse' | 'pen');
+    }
+  });
+
+  function triggerHoverStart(target: Element, pointerType: 'mouse' | 'pen') {
+    const p = getProps();
+    state.pointerType = pointerType;
+
+    if (p.isDisabled || state.isHovered) {
+      return;
+    }
+
+    state.isHovered = true;
+    state.target = target;
+
+    p.onHoverStart?.({
+      type: 'hoverstart',
+      target,
+      pointerType,
+    });
+
+    p.onHoverChange?.(true);
+    setIsHovered(true);
+  }
+
+  function triggerHoverEnd(target: Element | null, pointerType: 'mouse' | 'pen') {
+    const p = getProps();
+    state.pointerType = '';
+    state.target = null;
+
+    if (!state.isHovered || !target) {
+      return;
+    }
+
+    state.isHovered = false;
+
+    p.onHoverEnd?.({
+      type: 'hoverend',
+      target,
+      pointerType,
+    });
+
+    p.onHoverChange?.(false);
+    setIsHovered(false);
+  }
+
+  const hoverProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => {
+    if (typeof PointerEvent !== 'undefined') {
+      return {
+        onPointerEnter: (e: PointerEvent) => {
+          if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {
+            return;
+          }
+          if (e.pointerType === 'touch') {
+            return;
+          }
+          triggerHoverStart(e.currentTarget as Element, e.pointerType as 'mouse' | 'pen');
+        },
+        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');
+          }
+        },
+      };
+    }
+
+    // Fallback for environments without PointerEvent (mainly tests)
+    return {
+      onMouseEnter: (e: MouseEvent) => {
+        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {
+          triggerHoverStart(e.currentTarget as Element, 'mouse');
+        }
+        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');
+        }
+      },
+    };
+  });
+
+  return {
+    hoverProps: hoverProps() as JSX.HTMLAttributes<HTMLElement>,
+    isHovered,
+  };
+}

package/src/interactions/createKeyboard.ts

@@ -0,0 +1,82 @@
+/**
+ * createKeyboard - Handles keyboard interactions for a focusable element.
+ *
+ * This is a 1-1 port of React-Aria's useKeyboard hook adapted for SolidJS.
+ */
+
+import { JSX } from 'solid-js';
+
+/**
+ * Keyboard event with continuePropagation support.
+ * By default, keyboard events stop propagation.
+ */
+export interface KeyboardEvent extends globalThis.KeyboardEvent {
+  /** Call this to allow the event to propagate to parent elements. */
+  continuePropagation(): void;
+}
+
+export interface KeyboardEvents {
+  /** Handler that is called when a key is pressed. */
+  onKeyDown?: (e: KeyboardEvent) => void;
+  /** Handler that is called when a key is released. */
+  onKeyUp?: (e: KeyboardEvent) => void;
+}
+
+export interface CreateKeyboardProps extends KeyboardEvents {
+  /** Whether the keyboard events should be disabled. */
+  isDisabled?: boolean;
+}
+
+export interface KeyboardResult {
+  /** Props to spread onto the target element. */
+  keyboardProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+/**
+ * Wraps a keyboard event handler to make stopPropagation the default,
+ * and support continuePropagation instead.
+ */
+function createEventHandler<T extends globalThis.KeyboardEvent>(
+  handler?: (e: KeyboardEvent) => void
+): ((e: T) => void) | undefined {
+  if (!handler) {
+    return undefined;
+  }
+
+  return (e: T) => {
+    let shouldStopPropagation = true;
+
+    // Create a wrapped event with continuePropagation
+    const event = Object.assign(e, {
+      continuePropagation() {
+        shouldStopPropagation = false;
+      },
+    }) as KeyboardEvent;
+
+    handler(event);
+
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
+  };
+}
+
+/**
+ * Handles keyboard interactions for a focusable element.
+ *
+ * Based on react-aria's useKeyboard but adapted for SolidJS.
+ */
+export function createKeyboard(props: CreateKeyboardProps = {}): KeyboardResult {
+  if (props.isDisabled) {
+    return {
+      keyboardProps: {},
+    };
+  }
+
+  return {
+    keyboardProps: {
+      onKeyDown: createEventHandler(props.onKeyDown),
+      onKeyUp: createEventHandler(props.onKeyUp),
+    },
+  };
+}