@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/interactions/createFocusable.ts

@@ -1,168 +0,0 @@
-/**
- * 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

@@ -1,254 +0,0 @@
-/**
- * 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,
-  };
-}