@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/interactions/PressEvent.ts

@@ -0,0 +1,126 @@
+/**
+ * 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';
+
+/**
+ * Minimal event data needed to create a PressEvent.
+ * Allows both native Event objects and synthetic event-like objects.
+ */
+export interface PressEventSource {
+  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: PressEventSource | null,
+    target: Element | null
+  ) {
+    this.type = type;
+    this.pointerType = pointerType;
+    const eventTarget = target ?? (originalEvent?.currentTarget as Element | undefined);
+    this.target = eventTarget as Element;
+
+    // Extract modifier keys from the original event
+    this.shiftKey = originalEvent?.shiftKey ?? false;
+    this.ctrlKey = originalEvent?.ctrlKey ?? false;
+    this.metaKey = originalEvent?.metaKey ?? false;
+    this.altKey = originalEvent?.altKey ?? false;
+
+    // Calculate position relative to target
+    this.x = 0;
+    this.y = 0;
+
+    if (originalEvent && originalEvent.clientX !== undefined && eventTarget) {
+      const rect = eventTarget.getBoundingClientRect();
+      this.x = originalEvent.clientX - rect.left;
+      this.y = (originalEvent.clientY ?? 0) - 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 or event-like source.
+ */
+export function createPressEvent(
+  type: PressEventType,
+  pointerType: PointerType,
+  originalEvent: PressEventSource | null,
+  target: Element | null
+): PressEvent {
+  return new PressEvent(type, pointerType, originalEvent, target);
+}

package/src/interactions/createFocus.ts

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

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

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