@solid-aria/interactions - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { FocusEvents, FocusWithinEvents, KeyboardEvents, PressEvents } from '@solid-aria/types';
+import { FocusEvents, FocusWithinEvents, HoverEvents, KeyboardEvents, PressEvents } from '@solid-aria/types';
 import { MaybeAccessor } from '@solid-primitives/utils';
@@ -63,3 +63,3 @@ import { Accessor } from 'solid-js';
  */
-declare function useInteractionModality(): Accessor<Modality>;
+declare function createInteractionModality(): Accessor<Modality>;
 /**
@@ -94,2 +94,31 @@ * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
 
+interface CreateHoverProps extends HoverEvents {
+    /**
+     * Whether the hover events should be disabled.
+     */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+}
+interface HoverElementProps {
+    onPointerEnter?: (event: PointerEvent) => void;
+    onPointerLeave?: (event: PointerEvent) => void;
+    onTouchStart?: () => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+}
+interface HoverResult {
+    /**
+     * Props to spread on the target element.
+     */
+    hoverProps: Accessor<HoverElementProps>;
+    /**
+     * Whether the target element is hovered.
+     */
+    isHovered: Accessor<boolean>;
+}
+/**
+ * Handles pointer hover interactions for an element. Normalizes behavior
+ * across browsers and platforms, and ignores emulated mouse events on touch devices.
+ */
+declare function createHover(props: CreateHoverProps): HoverResult;
+
 interface CreateKeyboardProps extends KeyboardEvents {
@@ -101,3 +130,3 @@ /**
 }
-interface keyboardElementProps {
+interface KeyboardElementProps {
     /**
@@ -116,3 +145,3 @@ * Handler that is called when a key is pressed.
      */
-    keyboardProps: Accessor<keyboardElementProps>;
+    keyboardProps: Accessor<KeyboardElementProps>;
 }
@@ -155,2 +184,2 @@ /**
 
-export { CreateFocusProps, CreateFocusWithinProps, CreateKeyboardProps, CreatePressProps, FocusElementProps, FocusResult, FocusWithinElementProps, FocusWithinResult, KeyboardResult, PressElementProps, PressResult, createFocus, createFocusVisible, createFocusVisibleListener, createFocusWithin, createKeyboard, createPress, getInteractionModality, isKeyboardFocusVisible, keyboardElementProps, setInteractionModality, setupGlobalFocusEvents, useInteractionModality };
+export { CreateFocusProps, CreateFocusWithinProps, CreateHoverProps, CreateKeyboardProps, CreatePressProps, FocusElementProps, FocusResult, FocusWithinElementProps, FocusWithinResult, HoverElementProps, HoverResult, KeyboardElementProps, KeyboardResult, PressElementProps, PressResult, createFocus, createFocusVisible, createFocusVisibleListener, createFocusWithin, createHover, createInteractionModality, createKeyboard, createPress, getInteractionModality, isKeyboardFocusVisible, setInteractionModality, setupGlobalFocusEvents };

dist/index.js

@@ -176,3 +176,3 @@ // src/createFocus.ts
 }
-function useInteractionModality() {
+function createInteractionModality() {
   setupGlobalFocusEvents();
@@ -255,9 +255,137 @@ const [modality, setModality] = createSignal2(currentModality);
 
+// src/createHover.ts
+import { access as access4 } from "@solid-primitives/utils";
+import { createEffect as createEffect2, createMemo as createMemo3, createSignal as createSignal4, on as on2, onCleanup as onCleanup3, onMount as onMount2 } from "solid-js";
+var globalIgnoreEmulatedMouseEvents = false;
+var hoverCount = 0;
+function setGlobalIgnoreEmulatedMouseEvents() {
+  globalIgnoreEmulatedMouseEvents = true;
+  setTimeout(() => {
+    globalIgnoreEmulatedMouseEvents = false;
+  }, 50);
+}
+function handleGlobalPointerEvent(e) {
+  if (e.pointerType === "touch") {
+    setGlobalIgnoreEmulatedMouseEvents();
+  }
+}
+function setupGlobalTouchEvents() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (typeof PointerEvent !== "undefined") {
+    document.addEventListener("pointerup", handleGlobalPointerEvent);
+  } else {
+    document.addEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
+  }
+  hoverCount++;
+  return () => {
+    hoverCount--;
+    if (hoverCount > 0) {
+      return;
+    }
+    if (typeof PointerEvent !== "undefined") {
+      document.removeEventListener("pointerup", handleGlobalPointerEvent);
+    } else {
+      document.removeEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
+    }
+  };
+}
+function createHover(props) {
+  const [isHovered, setIsHovered] = createSignal4(false);
+  const [ignoreEmulatedMouseEvents, setIgnoreEmulatedMouseEvents] = createSignal4(false);
+  const [pointerType, setPointerType] = createSignal4("");
+  const [target, setTarget] = createSignal4(null);
+  const triggerHoverStart = (event, pointerType2) => {
+    var _a, _b;
+    setPointerType(pointerType2);
+    const eventCurrentTarget = event.currentTarget;
+    const eventTarget = event.target;
+    if (access4(props.isDisabled) || pointerType2 === "touch" || isHovered() || !(eventCurrentTarget == null ? void 0 : eventCurrentTarget.contains(eventTarget))) {
+      return;
+    }
+    setTarget(eventCurrentTarget);
+    (_a = props.onHoverStart) == null ? void 0 : _a.call(props, {
+      type: "hoverstart",
+      target: eventCurrentTarget,
+      pointerType: pointerType2
+    });
+    (_b = props.onHoverChange) == null ? void 0 : _b.call(props, true);
+    setIsHovered(true);
+  };
+  const triggerHoverEnd = (event, pointerType2) => {
+    var _a, _b;
+    setPointerType("");
+    setTarget(null);
+    if (pointerType2 === "touch" || !isHovered() || !event.currentTarget) {
+      return;
+    }
+    (_a = props.onHoverEnd) == null ? void 0 : _a.call(props, {
+      type: "hoverend",
+      target: event.currentTarget,
+      pointerType: pointerType2
+    });
+    (_b = props.onHoverChange) == null ? void 0 : _b.call(props, false);
+    setIsHovered(false);
+  };
+  const onPointerEnter = (event) => {
+    if (globalIgnoreEmulatedMouseEvents && event.pointerType === "mouse") {
+      return;
+    }
+    triggerHoverStart(event, event.pointerType);
+  };
+  const onPointerLeave = (event) => {
+    const eventCurrentTarget = event.currentTarget;
+    const eventTarget = event.target;
+    if (access4(props.isDisabled) || !(eventCurrentTarget == null ? void 0 : eventCurrentTarget.contains(eventTarget))) {
+      return;
+    }
+    triggerHoverEnd(event, event.pointerType);
+  };
+  const onTouchStart = () => {
+    setIgnoreEmulatedMouseEvents(true);
+  };
+  const onMouseEnter = (event) => {
+    if (!ignoreEmulatedMouseEvents() && !globalIgnoreEmulatedMouseEvents) {
+      triggerHoverStart(event, "mouse");
+    }
+    setIgnoreEmulatedMouseEvents(false);
+  };
+  const onMouseLeave = (event) => {
+    const eventCurrentTarget = event.currentTarget;
+    const eventTarget = event.target;
+    if (access4(props.isDisabled) || !(eventCurrentTarget == null ? void 0 : eventCurrentTarget.contains(eventTarget))) {
+      return;
+    }
+    triggerHoverEnd(event, "mouse");
+  };
+  const hoverProps = createMemo3(() => {
+    if (typeof PointerEvent !== "undefined") {
+      return { onPointerEnter, onPointerLeave };
+    } else {
+      return { onTouchStart, onMouseEnter, onMouseLeave };
+    }
+  });
+  onMount2(() => {
+    const cleanupFn = setupGlobalTouchEvents();
+    onCleanup3(() => cleanupFn == null ? void 0 : cleanupFn());
+  });
+  createEffect2(on2(() => access4(props.isDisabled), (newValue) => {
+    if (newValue) {
+      triggerHoverEnd({ currentTarget: target() }, pointerType());
+    }
+  }));
+  return {
+    hoverProps,
+    isHovered
+  };
+}
+
 // src/createKeyboard.ts
-import { access as access4 } from "@solid-primitives/utils";
-import { createMemo as createMemo3 } from "solid-js";
+import { access as access5 } from "@solid-primitives/utils";
+import { createMemo as createMemo4 } from "solid-js";
 function createKeyboard(props) {
   const onKeyDown = (event) => {
     var _a;
-    if (access4(props.isDisabled)) {
+    if (access5(props.isDisabled)) {
       return;
@@ -269,3 +397,3 @@ }
     var _a;
-    if (access4(props.isDisabled)) {
+    if (access5(props.isDisabled)) {
       return;
@@ -275,3 +403,3 @@ }
   };
-  const keyboardProps = createMemo3(() => ({
+  const keyboardProps = createMemo4(() => ({
     onKeyDown,
@@ -284,8 +412,8 @@ onKeyUp
 // src/createPress.ts
-import { access as access5 } from "@solid-primitives/utils";
-import { createMemo as createMemo4 } from "solid-js";
+import { access as access6 } from "@solid-primitives/utils";
+import { createMemo as createMemo5 } from "solid-js";
 function createPress(props) {
   const onClick = (event) => {
     var _a;
-    if (access5(props.isDisabled)) {
+    if (access6(props.isDisabled)) {
       return;
@@ -297,3 +425,3 @@ }
     var _a, _b;
-    if (access5(props.isDisabled)) {
+    if (access6(props.isDisabled)) {
       return;
@@ -306,3 +434,3 @@ }
     var _a, _b;
-    if (access5(props.isDisabled)) {
+    if (access6(props.isDisabled)) {
       return;
@@ -313,3 +441,3 @@ }
   };
-  const pressProps = createMemo4(() => ({
+  const pressProps = createMemo5(() => ({
     onClick,
@@ -326,2 +454,4 @@ onMouseDown,
   createFocusWithin,
+  createHover,
+  createInteractionModality,
   createKeyboard,
@@ -332,4 +462,3 @@ createPress,
   setInteractionModality,
-  setupGlobalFocusEvents,
-  useInteractionModality
+  setupGlobalFocusEvents
 };

package.json

 {
   "name": "@solid-aria/interactions",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
@@ -34,4 +34,4 @@ "description": "A collection of low level user interactions primitives.",
   "dependencies": {
-    "@solid-aria/types": "^0.0.1",
-    "@solid-aria/utils": "^0.0.1"
+    "@solid-aria/types": "^0.0.2",
+    "@solid-aria/utils": "^0.0.2"
   },
@@ -58,4 +58,3 @@ "peerDependencies": {
     "typecheck": "tsc --noEmit"
-  },
-  "readme": "<p>\n  <img width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Interactions\" alt=\"Solid Aria - Interactions\">\n</p>\n\n# @solid-aria/interactions\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)\n[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)\n[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/interactions?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/interactions)\n[![version](https://img.shields.io/npm/v/@solid-aria/interactions?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/interactions)\n[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)\n\nA collection of low level user interactions primitives.\n\n## Installation\n\n```bash\nnpm install @solid-aria/interactions\n# or\nyarn add @solid-aria/interactions\n# or\npnpm add @solid-aria/interactions\n```\n\n## Changelog\n\nAll notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.\n"
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41088

increased by26.37%

Lines of code

1103

increased by34.84%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@solid-aria/types@0.0.2(transitive)

• + Added@solid-aria/utils@0.0.2(transitive)

• - Removed@solid-aria/types@0.0.1(transitive)

• - Removed@solid-aria/utils@0.0.1(transitive)

• Updated@solid-aria/types@^0.0.2

• Updated@solid-aria/utils@^0.0.2