@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/interactions/createFocusable.ts

@@ -0,0 +1,168 @@
+/**
+ * createFocusable - Makes an element focusable and capable of auto focus.
+ *
+ * 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';
+
+export interface FocusableDOMProps {
+  /** Whether to exclude the element from the sequential tab order. */
+  excludeFromTabOrder?: boolean;
+}
+
+export interface FocusableProps extends FocusEvents, KeyboardEvents {
+  /** Whether the element should receive focus on mount. */
+  autoFocus?: boolean;
+}
+
+export interface CreateFocusableProps extends FocusableProps, FocusableDOMProps {
+  /** Whether focus should be disabled. */
+  isDisabled?: Accessor<boolean> | boolean;
+}
+
+export interface FocusableResult {
+  /** Props to spread on the focusable element. */
+  focusableProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+// --- FocusableContext ---
+
+export interface FocusableContextValue {
+  ref?: (el: HTMLElement) => void;
+  [key: string]: unknown;
+}
+
+/**
+ * Context for passing focusable props to nested focusable children.
+ * Used by FocusableProvider to pass DOM props to the nearest focusable child.
+ */
+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'> {
+  const context = useContext(FocusableContext) || {};
+
+  // If context has a ref, sync our ref to it
+  if (context.ref) {
+    const contextRef = context.ref;
+    // Create a combined ref that calls both
+    const originalSetRef = setRef;
+    setRef = (el: HTMLElement) => {
+      originalSetRef(el);
+      contextRef(el);
+    };
+  }
+
+  // Return context without the ref
+  const { ref: _, ...otherProps } = context;
+  return otherProps;
+}
+
+export interface FocusableProviderProps {
+  /** The child element to provide DOM props to. */
+  children?: JSX.Element;
+}
+
+function isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): boolean {
+  if (typeof isDisabled === 'function') {
+    return isDisabled();
+  }
+  return isDisabled ?? false;
+}
+
+/**
+ * Makes an element focusable, handling disabled state and tab order.
+ * Provides focus state tracking and autoFocus support.
+ *
+ * Based on react-aria's useFocusable but adapted for SolidJS.
+ *
+ * @example
+ * ```tsx
+ * import { createFocusable } from 'solidaria';
+ *
+ * function FocusableInput(props) {
+ *   let ref;
+ *   const { focusableProps } = createFocusable({
+ *     autoFocus: props.autoFocus,
+ *     onFocusChange: (focused) => console.log('Focus:', focused),
+ *   });
+ *
+ *   return (
+ *     <input
+ *       {...focusableProps}
+ *       ref={(el) => { ref = el; focusableProps.ref?.(el); }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function createFocusable(
+  props: CreateFocusableProps = {},
+  ref?: (el: HTMLElement) => void
+): FocusableResult {
+  let elementRef: HTMLElement | null = null;
+  let autoFocusDone = false;
+
+  // Set up ref handler
+  const setRef = (el: HTMLElement) => {
+    elementRef = el;
+    ref?.(el);
+  };
+
+  // Get focus and keyboard props from the respective hooks
+  const { focusProps } = createFocus({
+    isDisabled: isDisabledValue(props.isDisabled),
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    onFocusChange: props.onFocusChange,
+  });
+
+  const { keyboardProps } = createKeyboard({
+    isDisabled: isDisabledValue(props.isDisabled),
+    onKeyDown: props.onKeyDown,
+    onKeyUp: props.onKeyUp,
+  });
+
+  // Merge focus and keyboard interactions
+  const interactions = mergeProps(focusProps, keyboardProps);
+
+  // Get context props (from FocusableProvider if present)
+  const contextProps = useFocusableContext(setRef);
+  const interactionProps = isDisabledValue(props.isDisabled) ? {} : contextProps;
+
+  // Handle autoFocus
+  onMount(() => {
+    if (props.autoFocus && elementRef && !autoFocusDone) {
+      focusSafely(elementRef);
+      autoFocusDone = true;
+    }
+  });
+
+  // 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,
+      ref: setRef,
+    },
+    interactionProps
+  ) as JSX.HTMLAttributes<HTMLElement>;
+
+  return {
+    focusableProps,
+  };
+}

package/src/interactions/createHover.ts

@@ -0,0 +1,254 @@
+/**
+ * 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';
+import { isTestEnv } from '../utils/env';
+import { createGlobalListeners, nodeContains } from '../utils';
+
+// ============================================
+// 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;
+}
+
+/** 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'
+>;
+
+export interface HoverResult {
+  /** Props to spread on the target element. */
+  hoverProps: HoverProps;
+  /** 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 (isTestEnv()) {
+      document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
+    }
+  }
+
+  hoverCount++;
+  return () => {
+    hoverCount--;
+    if (hoverCount > 0) {
+      return;
+    }
+
+    if (typeof PointerEvent !== 'undefined') {
+      document.removeEventListener('pointerup', handleGlobalPointerEvent);
+    } else if (isTestEnv()) {
+      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);
+  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
+
+  // 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', eventTarget: Element | null) {
+    const p = getProps();
+    state.pointerType = pointerType;
+
+    const isOverTarget = eventTarget instanceof Element ? target.contains(eventTarget) : true;
+    if (p.isDisabled || state.isHovered || !isOverTarget) {
+      return;
+    }
+
+    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 });
+
+    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;
+    removeAllGlobalListeners();
+
+    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', 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');
+          }
+        },
+        onPointerOver: (e: PointerEvent) => {
+          if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {
+            return;
+          }
+          if (e.pointerType === 'touch') {
+            return;
+          }
+          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');
+          }
+        },
+      };
+    }
+
+    // Fallback for environments without PointerEvent (mainly tests)
+    return {
+      onTouchStart: () => {
+        state.ignoreEmulatedMouseEvents = true;
+      },
+      onMouseEnter: (e: MouseEvent) => {
+        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {
+          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');
+        }
+      },
+    };
+  });
+
+  return {
+    hoverProps: hoverProps() as HoverProps,
+    isHovered,
+  };
+}