@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/interactions/PressEvent.ts

@@ -1,124 +0,0 @@
-/**
- * PressEvent class that matches React-Aria's PressEvent interface.
- * Wraps native events with press-specific data.
- */
-
-export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
-export type PressEventType = 'pressstart' | 'pressend' | 'pressup' | 'press';
-
-/** Base event properties needed for press event creation */
-export interface BaseEventForPress {
-  currentTarget: EventTarget | null;
-  shiftKey: boolean;
-  ctrlKey: boolean;
-  metaKey: boolean;
-  altKey: boolean;
-  clientX?: number;
-  clientY?: number;
-}
-
-export interface IPressEvent {
-  /** The type of press event being fired. */
-  type: PressEventType;
-  /** The pointer type that triggered the press event. */
-  pointerType: PointerType;
-  /** The target element of the press event. */
-  target: Element;
-  /** Whether the shift keyboard modifier was held during the press event. */
-  shiftKey: boolean;
-  /** Whether the ctrl keyboard modifier was held during the press event. */
-  ctrlKey: boolean;
-  /** Whether the meta keyboard modifier was held during the press event. */
-  metaKey: boolean;
-  /** Whether the alt keyboard modifier was held during the press event. */
-  altKey: boolean;
-  /** X position of the press relative to the target element. */
-  x: number;
-  /** Y position of the press relative to the target element. */
-  y: number;
-  /**
-   * By default, press events stop propagation to parent elements.
-   * Call continuePropagation() to allow the event to bubble up.
-   */
-  continuePropagation(): void;
-}
-
-/**
- * PressEvent class that provides all press event data.
- * Based on React-Aria's PressEvent implementation.
- */
-export class PressEvent implements IPressEvent {
-  type: PressEventType;
-  pointerType: PointerType;
-  target: Element;
-  shiftKey: boolean;
-  ctrlKey: boolean;
-  metaKey: boolean;
-  altKey: boolean;
-  x: number;
-  y: number;
-
-  #shouldStopPropagation = true;
-
-  constructor(
-    type: PressEventType,
-    pointerType: PointerType,
-    originalEvent: Event | null,
-    target: Element | null
-  ) {
-    this.type = type;
-    this.pointerType = pointerType;
-    const eventTarget = target ?? ((originalEvent as any)?.currentTarget as Element | undefined);
-    this.target = eventTarget as Element;
-
-    // Extract modifier keys from the original event
-    const e = originalEvent as MouseEvent | KeyboardEvent | null;
-    this.shiftKey = e?.shiftKey ?? false;
-    this.ctrlKey = e?.ctrlKey ?? false;
-    this.metaKey = e?.metaKey ?? false;
-    this.altKey = e?.altKey ?? false;
-
-    // Calculate position relative to target
-    this.x = 0;
-    this.y = 0;
-
-    if (originalEvent && 'clientX' in originalEvent && eventTarget) {
-      const rect = eventTarget.getBoundingClientRect();
-      this.x = (originalEvent as MouseEvent).clientX - rect.left;
-      this.y = (originalEvent as MouseEvent).clientY - rect.top;
-    } else if (eventTarget) {
-      // For keyboard events, use center of element
-      const rect = eventTarget.getBoundingClientRect();
-      this.x = rect.width / 2;
-      this.y = rect.height / 2;
-    }
-  }
-
-  /**
-   * Call this to allow the press event to propagate to parent elements.
-   * By default, press events stop propagation.
-   */
-  continuePropagation(): void {
-    this.#shouldStopPropagation = false;
-  }
-
-  /**
-   * Whether the event should stop propagation.
-   * Used internally by the press handler.
-   */
-  get shouldStopPropagation(): boolean {
-    return this.#shouldStopPropagation;
-  }
-}
-
-/**
- * Creates a PressEvent from a native event.
- */
-export function createPressEvent(
-  type: PressEventType,
-  pointerType: PointerType,
-  originalEvent: BaseEventForPress | Event | null,
-  target: Element | null
-): PressEvent {
-  return new PressEvent(type, pointerType, originalEvent as Event | null, target);
-}

package/src/interactions/createFocus.ts

@@ -1,163 +0,0 @@
-/**
- * createFocus - Handles focus events for the immediate target.
- *
- * This is a 1-1 port of React-Aria's useFocus hook adapted for SolidJS.
- * Focus events on child elements will be ignored.
- */
-
-import { JSX, onCleanup } from 'solid-js';
-import { getOwnerDocument, getEventTarget } from '../utils';
-function getActiveElement(doc: Document): Element | null {
-  let activeElement = doc.activeElement;
-  while (activeElement && (activeElement as Element).shadowRoot?.activeElement) {
-    activeElement = (activeElement as Element).shadowRoot?.activeElement ?? null;
-  }
-  return activeElement;
-}
-
-export interface FocusEvents {
-  /** Handler that is called when the element receives focus. */
-  onFocus?: (e: FocusEvent) => void;
-  /** Handler that is called when the element loses focus. */
-  onBlur?: (e: FocusEvent) => void;
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange?: (isFocused: boolean) => void;
-}
-
-export interface CreateFocusProps extends FocusEvents {
-  /** Whether the focus events should be disabled. */
-  isDisabled?: boolean;
-}
-
-export interface FocusResult {
-  /** Props to spread onto the target element. */
-  focusProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-/**
- * Synthetic blur event handler for Firefox bug workaround.
- * React (and we) don't fire onBlur when an element is disabled.
- * Most browsers fire a native focusout event in this case, except for Firefox.
- * We use a MutationObserver to watch for the disabled attribute.
- */
-function createSyntheticBlurHandler(
-  _onBlur: ((e: FocusEvent) => void) | undefined
-): (_e: FocusEvent, target: Element) => (() => void) | undefined {
-  let isFocused = false;
-  let observer: MutationObserver | null = null;
-
-  return (_e: FocusEvent, target: Element) => {
-    if (
-      target instanceof HTMLButtonElement ||
-      target instanceof HTMLInputElement ||
-      target instanceof HTMLTextAreaElement ||
-      target instanceof HTMLSelectElement
-    ) {
-      isFocused = true;
-
-      const onBlurHandler = (_blurEvent: Event) => {
-        isFocused = false;
-
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-      };
-
-      target.addEventListener('focusout', onBlurHandler, { once: true });
-
-      observer = new MutationObserver(() => {
-        if (isFocused && (target as HTMLButtonElement).disabled) {
-          observer?.disconnect();
-          const relatedTarget = target === document.activeElement ? null : document.activeElement;
-          target.dispatchEvent(new FocusEvent('blur', { relatedTarget }));
-          target.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget }));
-        }
-      });
-
-      observer.observe(target, { attributes: true, attributeFilter: ['disabled'] });
-
-      // Return cleanup function
-      return () => {
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-      };
-    }
-
-    return undefined;
-  };
-}
-
-/**
- * Handles focus events for the immediate target.
- * Focus events on child elements will be ignored.
- *
- * Based on react-aria's useFocus but adapted for SolidJS.
- */
-export function createFocus(props: CreateFocusProps = {}): FocusResult {
-  const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;
-
-  let cleanupRef: (() => void) | undefined;
-  const syntheticBlurHandler = createSyntheticBlurHandler(onBlurProp);
-
-  // Cleanup on unmount
-  onCleanup(() => {
-    if (cleanupRef) {
-      cleanupRef();
-    }
-  });
-
-  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
-    // Only handle if target is the currentTarget (not bubbled from children)
-    if (e.target === e.currentTarget) {
-      if (onBlurProp) {
-        onBlurProp(e);
-      }
-
-      if (onFocusChange) {
-        onFocusChange(false);
-      }
-
-      cleanupRef?.();
-      cleanupRef = undefined;
-    }
-  };
-
-  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
-    // Double check that document.activeElement actually matches e.target
-    // in case a previously chained focus handler already moved focus somewhere else.
-    const ownerDocument = getOwnerDocument(e.target);
-    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
-
-    if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {
-      if (onFocusProp) {
-        onFocusProp(e);
-      }
-
-      if (onFocusChange) {
-        onFocusChange(true);
-      }
-
-      // Set up synthetic blur handler for Firefox bug
-      cleanupRef = syntheticBlurHandler(e, e.target);
-    }
-  };
-
-  // If disabled or no handlers, return empty props
-  if (isDisabled) {
-    return {
-      focusProps: {},
-    };
-  }
-
-  const hasHandlers = onFocusProp || onFocusChange || onBlurProp;
-
-  return {
-    focusProps: {
-      onFocus: hasHandlers ? onFocus : undefined,
-      onBlur: onBlurProp || onFocusChange ? onBlur : undefined,
-    },
-  };
-}

package/src/interactions/createFocusRing.ts

@@ -1,89 +0,0 @@
-/**
- * createFocusRing hook for Solidaria
- *
- * Determines whether a focus ring should be visible for a given element.
- * Focus rings are visible when the user navigates with keyboard, but hidden
- * when using mouse/touch.
- *
- * 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 {
-  createFocusVisibleListener,
-  isFocusVisible as isGlobalFocusVisible,
-} from './createInteractionModality';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface FocusRingProps {
-  /** Whether the element is a text input. */
-  isTextInput?: boolean;
-  /** Whether the element will be auto focused. */
-  autoFocus?: boolean;
-  /** Whether focus should be tracked within the element. */
-  within?: boolean;
-}
-
-export interface FocusRingResult {
-  /** Whether the element is currently focused. */
-  isFocused: Accessor<boolean>;
-  /** Whether the focus ring should be visible. */
-  isFocusVisible: Accessor<boolean>;
-  /** Props to spread on the element to track focus. */
-  focusProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Determines whether a focus ring should be visible for a given element.
- *
- * Focus rings are visible when:
- * - The element is focused AND
- * - The user is navigating with keyboard (not mouse/touch)
- *
- * For text inputs, focus rings are always visible when focused.
- */
-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 isFocusVisible = createMemo(() => isFocused() && focusVisibleFlag());
-
-  createEffect(() => {
-    const cleanup = createFocusVisibleListener((visible) => {
-      setFocusVisibleFlag(visible);
-    }, { isTextInput });
-    onCleanup(cleanup);
-  });
-
-  const onFocusChange = (focused: boolean) => {
-    setIsFocused(focused);
-  };
-
-  const focusResult = createFocus({
-    isDisabled: within,
-    onFocusChange,
-  });
-
-  const focusWithinResult = createFocusWithin({
-    isDisabled: !within,
-    onFocusWithinChange: onFocusChange,
-  });
-
-  return {
-    isFocused,
-    isFocusVisible,
-    focusProps: (within ? focusWithinResult.focusWithinProps : focusResult.focusProps) as JSX.HTMLAttributes<HTMLElement>,
-  };
-}

package/src/interactions/createFocusWithin.ts

@@ -1,206 +0,0 @@
-/**
- * createFocusWithin - Handles focus events for the target and its descendants.
- *
- * 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';
-
-export interface FocusWithinProps {
-  /** Whether the focus within events should be disabled. */
-  isDisabled?: boolean;
-  /** Handler that is called when the target element or a descendant receives focus. */
-  onFocusWithin?: (e: FocusEvent) => void;
-  /** Handler that is called when the target element and all descendants lose focus. */
-  onBlurWithin?: (e: FocusEvent) => void;
-  /** Handler that is called when the focus within state changes. */
-  onFocusWithinChange?: (isFocusWithin: boolean) => void;
-}
-
-export interface FocusWithinResult {
-  /** Props to spread onto the target element. */
-  focusWithinProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-function getActiveElement(doc: Document): Element | null {
-  let activeElement = doc.activeElement;
-  while (activeElement && (activeElement as Element).shadowRoot?.activeElement) {
-    activeElement = (activeElement as Element).shadowRoot?.activeElement ?? null;
-  }
-  return activeElement;
-}
-
-function createSyntheticBlurHandler(
-  _onBlurWithin: ((e: FocusEvent) => void) | undefined
-): (_e: FocusEvent, target: Element) => (() => void) | undefined {
-  let isFocused = false;
-  let observer: MutationObserver | null = null;
-
-  return (_e: FocusEvent, target: Element) => {
-    if (
-      target instanceof HTMLButtonElement ||
-      target instanceof HTMLInputElement ||
-      target instanceof HTMLTextAreaElement ||
-      target instanceof HTMLSelectElement
-    ) {
-      isFocused = true;
-
-      const onBlurHandler = () => {
-        isFocused = false;
-
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-      };
-
-      target.addEventListener('focusout', onBlurHandler, { once: true });
-
-      observer = new MutationObserver(() => {
-        if (isFocused && (target as HTMLButtonElement).disabled) {
-          observer?.disconnect();
-          const relatedTarget = target === document.activeElement ? null : document.activeElement;
-          target.dispatchEvent(new FocusEvent('blur', { relatedTarget }));
-          target.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget }));
-        }
-      });
-
-      observer.observe(target, { attributes: true, attributeFilter: ['disabled'] });
-
-      return () => {
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-      };
-    }
-
-    return undefined;
-  };
-}
-
-/**
- * Handles focus events for the target and its descendants.
- *
- * Based on react-aria's useFocusWithin but adapted for SolidJS.
- */
-export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResult {
-  const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
-
-  // State tracking
-  let isFocusWithin = false;
-
-  // Global listeners manager
-  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
-  const syntheticBlurHandler = createSyntheticBlurHandler(onBlurWithin);
-  let cleanupRef: (() => void) | undefined;
-
-  // Cleanup on unmount
-  onCleanup(() => {
-    cleanupRef?.();
-    removeAllGlobalListeners();
-  });
-
-  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
-    // Ignore events bubbling through portals
-    if (!e.currentTarget.contains(e.target as Node)) {
-      return;
-    }
-
-    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
-    // when moving focus inside the element. Only trigger if the currentTarget doesn't
-    // include the relatedTarget (where focus is moving).
-    if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget as Node)) {
-      isFocusWithin = false;
-      removeAllGlobalListeners();
-      cleanupRef?.();
-      cleanupRef = undefined;
-
-      if (onBlurWithin) {
-        onBlurWithin(e);
-      }
-
-      if (onFocusWithinChange) {
-        onFocusWithinChange(false);
-      }
-    }
-  };
-
-  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
-    // Ignore events bubbling through portals
-    if (!e.currentTarget.contains(e.target as Node)) {
-      return;
-    }
-
-    // Double check that document.activeElement actually matches e.target
-    // in case a previously chained focus handler already moved focus somewhere else.
-    const ownerDocument = getOwnerDocument(e.target);
-    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
-
-    if (!isFocusWithin && activeElement === getEventTarget(e)) {
-      if (onFocusWithin) {
-        onFocusWithin(e);
-      }
-
-      if (onFocusWithinChange) {
-        onFocusWithinChange(true);
-      }
-
-      isFocusWithin = true;
-      cleanupRef = syntheticBlurHandler(e, e.target);
-
-      // Browsers don't fire blur events when elements are removed from the DOM.
-      // However, if a focus event occurs outside the element we're tracking, we
-      // can manually fire onBlur.
-      const currentTarget = e.currentTarget;
-
-      addGlobalListener(
-        'focus',
-        (focusEvent: Event) => {
-          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', {
-                relatedTarget: (focusEvent as FocusEvent).target as Element,
-              });
-              setEventTarget(nativeEvent, currentTarget);
-
-              isFocusWithin = false;
-              removeAllGlobalListeners();
-
-              if (onBlurWithin) {
-                onBlurWithin(nativeEvent);
-              }
-
-              if (onFocusWithinChange) {
-                onFocusWithinChange(false);
-              }
-              cleanupRef?.();
-              cleanupRef = undefined;
-            }
-          }
-        },
-        { capture: true }
-      );
-    }
-  };
-
-  if (isDisabled) {
-    return {
-      focusWithinProps: {
-        onFocus: undefined,
-        onBlur: undefined,
-      },
-    };
-  }
-
-  return {
-    focusWithinProps: {
-      onFocus,
-      onBlur,
-    },
-  };
-}