@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/interactions/createPress.ts

@@ -5,8 +5,8 @@
  * All behaviors, edge cases, and platform-specific handling are preserved.
  */
 
-import { createSignal, JSX, Accessor, onCleanup } from 'solid-js';
-import { PressEvent, PointerType, createPressEvent, type PressEventSource } from './PressEvent';
+import { createSignal, JSX, Accessor, onCleanup } from "solid-js";
+import { PressEvent, PointerType, createPressEvent, type PressEventSource } from "./PressEvent";
 import {
   nodeContains,
   getEventTarget,
@@ -25,11 +25,11 @@ import {
   isMac,
   createGlobalListeners,
   setEventTarget,
-} from '../utils';
+  focusWithoutScrolling,
+} from "../utils";
 
-// Re-export PressEvent types
-export { PressEvent, type PointerType } from './PressEvent';
-export type { IPressEvent, PressEventType } from './PressEvent';
+export { PressEvent, type PointerType } from "./PressEvent";
+export type { IPressEvent, PressEventType } from "./PressEvent";
 
 export interface CreatePressProps {
   /** Whether the target is currently disabled. */
@@ -71,29 +71,51 @@ export interface PressResult {
 }
 
 function isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): boolean {
-  if (typeof isDisabled === 'function') {
+  if (typeof isDisabled === "function") {
     return isDisabled();
   }
   return isDisabled ?? false;
 }
 
 function isPressedValue(isPressed: Accessor<boolean> | boolean | undefined): boolean {
-  if (typeof isPressed === 'function') {
+  if (typeof isPressed === "function") {
     return isPressed();
   }
   return isPressed ?? false;
 }
 
+function eventPathContains(parent: EventTarget | null | undefined, event: Event): boolean {
+  if (!parent) {
+    return false;
+  }
+
+  const target = getEventTarget(event);
+  if (
+    typeof Node !== "undefined" &&
+    parent instanceof Node &&
+    target instanceof Node &&
+    nodeContains(parent, target)
+  ) {
+    return true;
+  }
+
+  if (typeof event.composedPath === "function") {
+    return event.composedPath().includes(parent);
+  }
+
+  return false;
+}
+
 // Track which links have been programmatically clicked to avoid double activation
 const linkClickedSet = new WeakSet<HTMLElement>();
 
 // CSS for preventing double-tap zoom delay
 let pressableCSSInjected = false;
 function injectPressableCSS(): void {
-  if (pressableCSSInjected || typeof document === 'undefined') return;
+  if (pressableCSSInjected || typeof document === "undefined") return;
 
-  const style = document.createElement('style');
-  style.id = 'solidaria-pressable-style';
+  const style = document.createElement("style");
+  style.id = "solidaria-pressable-style";
   style.textContent = `
     [data-solidaria-pressable] {
       touch-action: pan-x pan-y pinch-zoom;
@@ -136,6 +158,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     userSelect: undefined as string | undefined,
     metaKeyEvents: null as Map<string, KeyboardEvent> | null,
     clickCleanup: null as (() => void) | null,
+    focusCleanup: null as (() => void) | null,
   };
 
   // Global listeners manager
@@ -146,7 +169,10 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
   // --- Event Triggers ---
 
-  const triggerPressStart = (originalEvent: PressEventSource, pointerType: PointerType): boolean => {
+  const triggerPressStart = (
+    originalEvent: PressEventSource,
+    pointerType: PointerType,
+  ): boolean => {
     if (isDisabledValue(props.isDisabled) || pressState.didFirePressStart) {
       return false;
     }
@@ -155,7 +181,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     pressState.isTriggeringEvent = true;
 
     if (props.onPressStart) {
-      const event = createPressEvent('pressstart', pointerType, originalEvent, pressState.target!);
+      const event = createPressEvent("pressstart", pointerType, originalEvent, pressState.target!);
       props.onPressStart(event);
       shouldStopPropagation = event.shouldStopPropagation;
     }
@@ -171,9 +197,13 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     return shouldStopPropagation;
   };
 
-  const triggerPressEnd = (originalEvent: PressEventSource, pointerType: PointerType, wasPressed = true): boolean => {
+  const triggerPressEnd = (
+    originalEvent: PressEventSource,
+    pointerType: PointerType,
+    wasPressed = true,
+  ): boolean => {
     if (!pressState.didFirePressStart) {
-      return true;
+      return false;
     }
 
     pressState.didFirePressStart = false;
@@ -181,7 +211,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
     let shouldStopPropagation = true;
     if (props.onPressEnd) {
-      const event = createPressEvent('pressend', pointerType, originalEvent, pressState.target!);
+      const event = createPressEvent("pressend", pointerType, originalEvent, pressState.target!);
       props.onPressEnd(event);
       shouldStopPropagation = event.shouldStopPropagation;
     }
@@ -194,8 +224,9 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
     if (wasPressed && !isDisabledValue(props.isDisabled)) {
       if (props.onPress) {
-        const event = createPressEvent('press', pointerType, originalEvent, pressState.target!);
+        const event = createPressEvent("press", pointerType, originalEvent, pressState.target!);
         props.onPress(event);
+        shouldStopPropagation = shouldStopPropagation && event.shouldStopPropagation;
       }
     }
 
@@ -206,12 +237,12 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
   const triggerPressUp = (originalEvent: PressEventSource, pointerType: PointerType): boolean => {
     if (isDisabledValue(props.isDisabled)) {
-      return true;
+      return false;
     }
 
     if (props.onPressUp) {
       pressState.isTriggeringEvent = true;
-      const event = createPressEvent('pressup', pointerType, originalEvent, pressState.target!);
+      const event = createPressEvent("pressup", pointerType, originalEvent, pressState.target!);
       props.onPressUp(event);
       pressState.isTriggeringEvent = false;
       return event.shouldStopPropagation;
@@ -220,13 +251,16 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     return true;
   };
 
-  const triggerSyntheticClick = (originalEvent: KeyboardEvent | TouchEvent, target: HTMLElement): void => {
+  const triggerSyntheticClick = (
+    originalEvent: KeyboardEvent | TouchEvent,
+    target: HTMLElement,
+  ): void => {
     if (isDisabledValue(props.isDisabled)) {
       return;
     }
 
     if (props.onClick) {
-      const event = new MouseEvent('click', originalEvent as MouseEventInit);
+      const event = new MouseEvent("click", originalEvent as MouseEventInit);
       setEventTarget(event, target);
       props.onClick(event);
     }
@@ -254,6 +288,11 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       pressState.clickCleanup = null;
     }
 
+    if (pressState.focusCleanup) {
+      pressState.focusCleanup();
+      pressState.focusCleanup = null;
+    }
+
     if (!props.allowTextSelectionOnPress) {
       restoreTextSelection(pressState.target as HTMLElement);
     }
@@ -264,14 +303,14 @@ export function createPress(props: CreatePressProps = {}): PressResult {
   const onPointerDown: JSX.EventHandler<HTMLElement, PointerEvent> = (e) => {
     // Only handle left clicks, and ignore events that bubbled through portals
     const button = e.button ?? 0;
-    if (button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e))) {
+    if (button !== 0 || !eventPathContains(e.currentTarget, e)) {
       return;
     }
 
     // iOS VoiceOver bug: fires pointer events with incorrect coordinates
     // Let the click handler deal with it instead
     if (isVirtualPointerEvent(e)) {
-      pressState.pointerType = 'virtual';
+      pressState.pointerType = "virtual";
       return;
     }
 
@@ -293,21 +332,21 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       }
 
       // Set up global listeners for pointer events
-      addGlobalListener('pointerup', onPointerUp);
-      addGlobalListener('pointercancel', onPointerCancel);
+      addGlobalListener("pointerup", onPointerUp);
+      addGlobalListener("pointercancel", onPointerCancel);
     }
   };
 
   // Mouse down handler when using pointer events - only prevents focus, doesn't trigger press
   const onMouseDownPointer: JSX.EventHandler<HTMLElement, MouseEvent> = (e) => {
-    if (!nodeContains(e.currentTarget, getEventTarget(e))) {
+    if (!eventPathContains(e.currentTarget, e)) {
       return;
     }
 
     if (e.button === 0) {
-      // Prevent focus if requested
       if (props.preventFocusOnPress) {
-        preventFocus(e.currentTarget);
+        pressState.focusCleanup?.();
+        pressState.focusCleanup = preventFocus(getEventTarget(e) as Element | null) ?? null;
       }
       e.stopPropagation();
     }
@@ -316,12 +355,17 @@ export function createPress(props: CreatePressProps = {}): PressResult {
   const onPointerUp = (e: PointerEvent): void => {
     // Only handle events for our active pointer
     const button = e.button ?? 0;
-    if (e.pointerId !== pressState.activePointerId || !pressState.isPressed || button !== 0 || !pressState.target) {
+    if (
+      e.pointerId !== pressState.activePointerId ||
+      !pressState.isPressed ||
+      button !== 0 ||
+      !pressState.target
+    ) {
       return;
     }
 
-    const isOverTarget = nodeContains(pressState.target, getEventTarget(e) as Element);
-    if (isOverTarget && pressState.pointerType != null && pressState.pointerType !== 'virtual') {
+    const isOverTarget = eventPathContains(pressState.target, e);
+    if (isOverTarget && pressState.pointerType != null && pressState.pointerType !== "virtual") {
       // Pointer released over target - wait for onClick to complete the press sequence.
       // This matches React-Aria's behavior for compatibility with DOM mutations and third-party libraries.
       // https://github.com/adobe/react-spectrum/issues/1513
@@ -336,7 +380,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       let clickFired = false;
       const timeout = setTimeout(() => {
         // Guard for SSR/test environments where the element may no longer exist
-        if (typeof HTMLElement === 'undefined') {
+        if (typeof HTMLElement === "undefined") {
           return;
         }
         if (pressState.isPressed && pressState.target instanceof HTMLElement) {
@@ -345,7 +389,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
             cancel(e);
           } else {
             // Click didn't happen (probably due to stopPropagation), trigger it manually
-            pressState.target.focus();
+            focusWithoutScrolling(pressState.target);
             pressState.target.click();
           }
         }
@@ -357,12 +401,12 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       const clickListener = () => {
         clickFired = true;
       };
-      doc.addEventListener('click', clickListener, true);
+      doc.addEventListener("click", clickListener, true);
 
       // Store cleanup function
       pressState.clickCleanup = () => {
         clearTimeout(timeout);
-        doc.removeEventListener('click', clickListener, true);
+        doc.removeEventListener("click", clickListener, true);
       };
 
       pressState.isOverTarget = false;
@@ -378,15 +422,35 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     }
   };
 
+  const onPointerUpTarget: JSX.EventHandler<HTMLElement, PointerEvent> = (e) => {
+    if (!eventPathContains(e.currentTarget, e) || pressState.pointerType === "virtual") {
+      return;
+    }
+
+    if (e.button === 0 && !pressState.isPressed) {
+      triggerPressUp(e, (pressState.pointerType || e.pointerType || "mouse") as PointerType);
+    }
+  };
+
   const onPointerEnter: JSX.EventHandler<HTMLElement, PointerEvent> = (e) => {
-    if (e.pointerId === pressState.activePointerId && pressState.target && !pressState.isOverTarget && pressState.pointerType != null) {
+    if (
+      e.pointerId === pressState.activePointerId &&
+      pressState.target &&
+      !pressState.isOverTarget &&
+      pressState.pointerType != null
+    ) {
       pressState.isOverTarget = true;
       triggerPressStart(e, pressState.pointerType);
     }
   };
 
   const onPointerLeave: JSX.EventHandler<HTMLElement, PointerEvent> = (e) => {
-    if (e.pointerId === pressState.activePointerId && pressState.target && pressState.isOverTarget && pressState.pointerType != null) {
+    if (
+      e.pointerId === pressState.activePointerId &&
+      pressState.target &&
+      pressState.isOverTarget &&
+      pressState.pointerType != null
+    ) {
       pressState.isOverTarget = false;
       triggerPressEnd(e, pressState.pointerType, false);
 
@@ -438,18 +502,21 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     pressState.isOverTarget = true;
     pressState.isPressed = true;
     pressState.target = e.currentTarget;
-    pressState.pointerType = 'touch';
+    pressState.pointerType = "touch";
 
     if (!props.allowTextSelectionOnPress) {
       disableTextSelection(pressState.target as HTMLElement);
     }
 
-    const shouldStopPropagation = triggerPressStart(createTouchEvent(pressState.target, e), 'touch');
+    const shouldStopPropagation = triggerPressStart(
+      createTouchEvent(pressState.target, e),
+      "touch",
+    );
     if (shouldStopPropagation) {
       e.stopPropagation();
     }
 
-    addGlobalListener('scroll', onScroll, { capture: true, isWindow: true });
+    addGlobalListener("scroll", onScroll, { capture: true, isWindow: true });
   };
 
   const onTouchMove: JSX.EventHandler<HTMLElement, TouchEvent> = (e) => {
@@ -468,9 +535,9 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     if (isOverTarget !== pressState.isOverTarget) {
       pressState.isOverTarget = isOverTarget;
       if (isOverTarget) {
-        triggerPressStart(createTouchEvent(target, e), 'touch');
+        triggerPressStart(createTouchEvent(target, e), "touch");
       } else {
-        triggerPressEnd(createTouchEvent(target, e), 'touch', false);
+        triggerPressEnd(createTouchEvent(target, e), "touch", false);
 
         if (props.shouldCancelOnPointerExit) {
           cancel(createTouchEvent(target, e));
@@ -493,11 +560,19 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     const isOverTarget = isPointOverTarget(touch, target);
 
     if (isOverTarget) {
-      triggerPressUp(createTouchEvent(target, e), 'touch');
+      triggerPressUp(createTouchEvent(target, e), "touch");
+      triggerPressEnd(
+        createTouchEvent(target, e),
+        "touch",
+        isOverTarget && pressState.isOverTarget,
+      );
+      if (target instanceof HTMLElement) {
+        triggerSyntheticClick(e, target);
+      }
+    } else {
+      triggerPressEnd(createTouchEvent(target, e), "touch", false);
     }
 
-    triggerPressEnd(createTouchEvent(target, e), 'touch', isOverTarget && pressState.isOverTarget);
-
     pressState.isPressed = false;
     pressState.isOverTarget = false;
     pressState.activePointerId = null;
@@ -541,14 +616,19 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     pressState.isPressed = true;
     pressState.isOverTarget = true;
     pressState.target = e.currentTarget;
-    pressState.pointerType = isVirtualClick(e) ? 'virtual' : 'mouse';
+    pressState.pointerType = isVirtualClick(e) ? "virtual" : "mouse";
 
     const shouldStopPropagation = triggerPressStart(e, pressState.pointerType);
     if (shouldStopPropagation) {
       e.stopPropagation();
     }
 
-    addGlobalListener('mouseup', onMouseUpFallback);
+    if (props.preventFocusOnPress) {
+      pressState.focusCleanup?.();
+      pressState.focusCleanup = preventFocus(getEventTarget(e) as Element | null) ?? null;
+    }
+
+    addGlobalListener("mouseup", onMouseUpFallback);
   };
 
   const onMouseUpFallback = (e: MouseEvent): void => {
@@ -557,7 +637,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     }
 
     if (!pressState.ignoreEmulatedMouseEvents && e.button === 0 && !pressState.isPressed) {
-      triggerPressUp(e, pressState.pointerType || 'mouse');
+      triggerPressUp(e, pressState.pointerType || "mouse");
     }
   };
 
@@ -566,7 +646,11 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       return;
     }
 
-    if (pressState.isPressed && !pressState.ignoreEmulatedMouseEvents && pressState.pointerType != null) {
+    if (
+      pressState.isPressed &&
+      !pressState.ignoreEmulatedMouseEvents &&
+      pressState.pointerType != null
+    ) {
       pressState.isOverTarget = true;
       triggerPressStart(e, pressState.pointerType);
     }
@@ -577,7 +661,11 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       return;
     }
 
-    if (pressState.isPressed && !pressState.ignoreEmulatedMouseEvents && pressState.pointerType != null) {
+    if (
+      pressState.isPressed &&
+      !pressState.ignoreEmulatedMouseEvents &&
+      pressState.pointerType != null
+    ) {
       pressState.isOverTarget = false;
       triggerPressEnd(e, pressState.pointerType, false);
 
@@ -595,10 +683,6 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     }
 
     if (!isValidKeyboardEvent(e, e.currentTarget)) {
-      // Allow event to propagate for invalid keys
-      if (e.key === 'Enter') {
-        e.stopPropagation();
-      }
       return;
     }
 
@@ -611,9 +695,9 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     pressState.target = e.currentTarget;
     pressState.isPressed = true;
     pressState.isOverTarget = true;
-    pressState.pointerType = 'keyboard';
+    pressState.pointerType = "keyboard";
 
-    const shouldStopPropagation = triggerPressStart(e, 'keyboard');
+    const shouldStopPropagation = triggerPressStart(e, "keyboard");
     if (shouldStopPropagation) {
       e.stopPropagation();
     }
@@ -632,16 +716,16 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
     // For Enter key on native buttons, the click fires on keydown
     // Set flag to ignore it
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       pressState.ignoreClickAfterPress = true;
     }
 
     // Set up global keyup listener
-    addGlobalListener('keyup', onKeyUp, { capture: true });
+    addGlobalListener("keyup", onKeyUp, { capture: true });
   };
 
   const onKeyUp = (e: KeyboardEvent): void => {
-    if (!pressState.isPressed || pressState.pointerType !== 'keyboard') {
+    if (!pressState.isPressed || pressState.pointerType !== "keyboard") {
       return;
     }
 
@@ -650,16 +734,16 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     }
 
     // Handle macOS Meta key bug
-    if (isMac() && e.key === 'Meta' && pressState.metaKeyEvents?.size) {
+    if (isMac() && e.key === "Meta" && pressState.metaKeyEvents?.size) {
       // When Meta releases, dispatch keyup for any keys that were pressed during
       for (const [key, event] of pressState.metaKeyEvents) {
         pressState.target?.dispatchEvent(
-          new KeyboardEvent('keyup', {
+          new KeyboardEvent("keyup", {
             key,
             code: event.code,
             bubbles: true,
             cancelable: true,
-          })
+          }),
         );
       }
       pressState.metaKeyEvents.clear();
@@ -667,25 +751,34 @@ export function createPress(props: CreatePressProps = {}): PressResult {
     }
 
     const target = pressState.target!;
-    const shouldStopPropagation = triggerPressUp(e, 'keyboard');
-    const shouldStopPropagationEnd = triggerPressEnd(e, 'keyboard', pressState.isOverTarget);
+    const eventTarget = getEventTarget(e) as Element;
+    const wasPressed = nodeContains(target, eventTarget);
+    const shouldStopPropagation = wasPressed ? triggerPressUp(e, "keyboard") : true;
+    const shouldStopPropagationEnd = triggerPressEnd(e, "keyboard", wasPressed);
 
     pressState.isPressed = false;
     pressState.pointerType = null;
 
     removeAllGlobalListeners();
 
-    // Prevent default to avoid triggering native action
-    e.preventDefault();
+    // Prevent default for non-native interactive elements, but preserve native
+    // input behavior such as checkbox Space toggling.
+    if (shouldPreventDefaultKeyboard(getEventTarget(e) as Element, e.key)) {
+      e.preventDefault();
+    }
 
-    // Fire synthetic click for keyboard activation
-    if (pressState.isOverTarget && pressState.target) {
-      triggerSyntheticClick(e, pressState.target as HTMLElement);
+    if (wasPressed && target instanceof HTMLElement) {
+      triggerSyntheticClick(e, target);
     }
 
-    // Handle link activation with non-Enter keys (Space)
-    // Native links only respond to Enter, but we want Space to work too
-    if (e.key === ' ' && isHTMLAnchorLink(target) && !linkClickedSet.has(target as HTMLElement)) {
+    // Handle link activation with non-Enter keys. Native links only respond to
+    // Enter, but role-overridden links should also work with Space.
+    if (
+      e.key !== "Enter" &&
+      isHTMLAnchorLink(target) &&
+      wasPressed &&
+      !linkClickedSet.has(target as HTMLElement)
+    ) {
       linkClickedSet.add(target as HTMLElement);
       openLink(target as HTMLAnchorElement, e);
       // Clean up the marker
@@ -694,10 +787,12 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       }, 0);
     }
 
-    // For Space key, the click fires after keyup
-    // Set flag to ignore it
-    if (e.key === ' ') {
+    // For Space key on non-native targets, the click fires after keyup.
+    // Set flag to ignore it when we already synthesized the click.
+    if (e.key === " " && wasPressed && shouldPreventDefaultKeyboard(target, e.key)) {
       pressState.ignoreClickAfterPress = true;
+    } else if (e.key === "Enter") {
+      pressState.ignoreClickAfterPress = false;
     }
 
     if (shouldStopPropagation && shouldStopPropagationEnd) {
@@ -709,7 +804,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
   const onClick: JSX.EventHandler<HTMLElement, MouseEvent> = (e) => {
     // Don't handle click if it's not on the target
-    if (!nodeContains(e.currentTarget, e.target as Element)) {
+    if (!eventPathContains(e.currentTarget, e)) {
       return;
     }
 
@@ -725,10 +820,6 @@ export function createPress(props: CreatePressProps = {}): PressResult {
         return;
       }
 
-      // Call user's onClick handler if provided
-      // This matches React-Aria's behavior for third-party library compatibility
-      props.onClick?.(e);
-
       // If triggered from a screen reader or by using element.click(),
       // trigger as if it were a keyboard/virtual click.
       let shouldStopPropagation = true;
@@ -736,21 +827,25 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       if (
         !pressState.ignoreEmulatedMouseEvents &&
         !pressState.isPressed &&
-        (pressState.pointerType === 'virtual' || isVirtualClick(e))
+        (pressState.pointerType === "virtual" || isVirtualClick(e))
       ) {
         pressState.target = e.currentTarget;
-        shouldStopPropagation = triggerPressStart(e, 'virtual');
-        shouldStopPropagation = triggerPressUp(e, 'virtual') && shouldStopPropagation;
-        shouldStopPropagation = triggerPressEnd(e, 'virtual', true) && shouldStopPropagation;
-      } else if (pressState.isPressed && pressState.pointerType !== 'keyboard') {
+        const stopPressStart = triggerPressStart(e, "virtual");
+        const stopPressUp = triggerPressUp(e, "virtual");
+        const stopPressEnd = triggerPressEnd(e, "virtual", true);
+        props.onClick?.(e);
+        shouldStopPropagation = stopPressStart && stopPressUp && stopPressEnd;
+      } else if (pressState.isPressed && pressState.pointerType !== "keyboard") {
         // Complete the press sequence for pointer/touch/mouse events
         const pointerType =
           pressState.pointerType ||
           ((e as unknown as PointerEvent).pointerType as PointerType) ||
-          'virtual';
-        shouldStopPropagation = triggerPressUp(e, pointerType);
-        shouldStopPropagation = triggerPressEnd(e, pointerType, true) && shouldStopPropagation;
+          "virtual";
+        const stopPressUp = triggerPressUp(e, pointerType);
+        const stopPressEnd = triggerPressEnd(e, pointerType, true);
+        shouldStopPropagation = stopPressUp && stopPressEnd;
         pressState.isOverTarget = false;
+        props.onClick?.(e);
         cancel(e);
       }
 
@@ -775,8 +870,8 @@ export function createPress(props: CreatePressProps = {}): PressResult {
   // Conditionally use pointer events or mouse events based on browser support
   // This matches React-Aria's approach exactly
 
-  const pressProps: JSX.HTMLAttributes<HTMLElement> & { 'data-solidaria-pressable': string } =
-    typeof PointerEvent !== 'undefined'
+  const pressProps: JSX.HTMLAttributes<HTMLElement> & { "data-solidaria-pressable": string } =
+    typeof PointerEvent !== "undefined"
       ? {
           // Keyboard events
           onKeyDown,
@@ -785,6 +880,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
           onDragStart,
           // Pointer events (preferred when available)
           onPointerDown,
+          onPointerUp: onPointerUpTarget,
           onPointerEnter,
           onPointerLeave,
           // Mouse down only for focus prevention when using pointer events
@@ -795,7 +891,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
           onTouchEnd,
           onTouchCancel,
           // Attribute for CSS touch-action
-          'data-solidaria-pressable': '',
+          "data-solidaria-pressable": "",
         }
       : {
           // Keyboard events
@@ -814,7 +910,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
           onTouchEnd,
           onTouchCancel,
           // Attribute for CSS touch-action
-          'data-solidaria-pressable': '',
+          "data-solidaria-pressable": "",
         };
 
   // Clean up on unmount
@@ -825,6 +921,10 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       pressState.clickCleanup();
       pressState.clickCleanup = null;
     }
+    if (pressState.focusCleanup) {
+      pressState.focusCleanup();
+      pressState.focusCleanup = null;
+    }
   });
 
   return {