Add onPointerLeave handler to active state polyfill (#429)

* Add onPointerLeave handler to active state polyfill

* fix: handle focus + active styles

Author: axyz

packages/react-strict-dom/src/native/modules/usePseudoStates.js

@@ -69,7 +69,6 @@ export function usePseudoStates(style: Style): Interaction {
         value.onMouseEnter = () => setMouseHover(true);
         value.onMouseLeave = () => setMouseHover(false);
         value.onPointerEnter = () => setPointerHover(true);
-        value.onPointerLeave = () => setPointerHover(false);
       }
       if (isFocusStyledElement) {
         value.onBlur = () => setFocus(false);
@@ -80,6 +79,16 @@ export function usePseudoStates(style: Style): Interaction {
         value.onPointerDown = () => setActive(true);
         value.onPointerUp = () => setActive(false);
       }
+      if (isHoverStyledElement || isActiveStyledElement) {
+        value.onPointerLeave = () => {
+          if (isHoverStyledElement) {
+            setPointerHover(false);
+          }
+          if (isActiveStyledElement) {
+            setActive(false);
+          }
+        }
+      }
     }
     return value;
   }, [isHoverStyledElement, isFocusStyledElement, isActiveStyledElement]);