@atomico/hooks - npm Package Compare versions

Comparing version 3.33.3 to 3.33.4

package.json

 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.33.3",
+  "version": "3.33.4",
   "type": "module",
@@ -6,0 +6,0 @@ "workspaces": [

src/use-click-coordinates/use-click-coordinates.js

@@ -18,4 +18,4 @@ import { useCurrentValue } from "../use-current-value/use-current-value.js";
  *
- * @param {PointerEvent & TouchEvent} event
- * @returns {Coordinates|null}
+ * @param {{pageX:number,pageY:number, currentTarget:EventTarget|null}} event
+ * @returns {Coordinates}
  */
@@ -22,0 +22,0 @@ export function getCoordinates({ pageX: x, pageY: y, currentTarget }) {

src/use-history/use-history.js

@@ -11,3 +11,3 @@ import { useState } from "atomico";
   const [state] = useState(() => ({ history: [] }));
-  if (state.history.at(-1) !== value) {
+  if (state.history[state.history.length - 1] !== value) {
     state.history = [...state.history, value].slice(maxLength * -1);
@@ -14,0 +14,0 @@ }

src/use-reflect-event/use-reflect-event.js

@@ -7,9 +7,21 @@ import { useListener } from "../use-listener/use-listener.js";
  * @param {Event} event
+ * @param {boolean} [composed] - allows to reflect the events from target with independent shadowDOM to the host
  */
-export const reflectEvent = (current, event) => {
-  if (!event.composedPath().includes(current)) {
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    current.dispatchEvent(new event.constructor(event.type, event));
-  }
+export const reflectEvent = (current, event, composed) => {
+  const { currentTarget } = event;
+  const { shadowRoot } = currentTarget;
+  const path = event.composedPath();
+
+  if (path.includes(current)) return;
+
+  const index = path.indexOf(currentTarget);
+  const insetShadowRoot = path
+    .slice(0, index)
+    .find((el) => el instanceof ShadowRoot);
+
+  if (!composed && insetShadowRoot !== shadowRoot) return;
+
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  current.dispatchEvent(new event.constructor(event.type, event));
 };
@@ -21,4 +33,10 @@ /**
  * @param {import("atomico").Ref<Element>} refTo - event destination reference
+ * @param {{capture?:boolean, composed?:boolean}} [options] - allows to reflect the events from target with independent shadowDOM to the host
  */
-export function useReflectEvent(refFrom, refTo, type) {
+export function useReflectEvent(
+  refFrom,
+  refTo,
+  type,
+  { capture = true, composed = true } = {}
+) {
   useListener(
@@ -32,7 +50,6 @@ refFrom,
       const { current } = refTo;
-      if (!current || event.target == current) return;
-      reflectEvent(current, event);
+      current && reflectEvent(current, event, composed);
     },
-    { capture: true }
+    { capture }
   );
 }

src/use-router/use-router.js

@@ -5,3 +5,3 @@ import { useState, useEffect } from "atomico";
 export { redirect, getPath } from "./src/history.js";
-import { addListener } from "../use-listener/use-listener.js";
+import { useListener } from "../use-listener/use-listener.js";
 import { useCurrentValue } from "../use-current-value/use-current-value.js";
@@ -82,14 +82,22 @@
  */
-export function useRedirect(ref, { proxy, composed } = {}) {
-  useEffect(() => {
-    const { current } = ref;
-    /**
-     * @param {Event} ev
-     */
-    const handler = (ev) => {
-      const path = ev.composedPath();
+export function useRedirect(ref, { proxy, composed = true } = {}) {
+  useListener(
+    ref,
+    "click",
+    (event) => {
+      const { current } = ref;
+      const { shadowRoot } = current;
+
+      const path = event.composedPath();
+
+      const index = path.indexOf(current);
+
+      const insetShadowRoot = path
+        .slice(0, index)
+        .find((el) => el instanceof ShadowRoot);
+
+      if (!composed && insetShadowRoot !== shadowRoot) return;
+
       let target;
 
-      if (!composed && path.find((el) => el instanceof ShadowRoot)) return;
-
       while ((target = path.shift())) {
@@ -101,12 +109,13 @@ if (
         ) {
-          ev.preventDefault();
           const href = target.getAttribute("href");
-          if (!/^(http(s){0,1}:){0,1}\/\//.test(href))
+          if (!/^(http(s){0,1}:){0,1}\/\//.test(href)) {
+            event.preventDefault();
             redirect(proxy ? proxy(href) : href);
+          }
           break;
         }
       }
-    };
-    return addListener(current, "click", handler, { capture: true });
-  }, [ref]);
+    },
+    { capture: true }
+  );
 }
@@ -113,0 +122,0 @@

types/use-click-coordinates/use-click-coordinates.d.ts

@@ -9,6 +9,10 @@ /**
  *
- * @param {PointerEvent & TouchEvent} event
- * @returns {Coordinates|null}
+ * @param {{pageX:number,pageY:number, currentTarget:EventTarget|null}} event
+ * @returns {Coordinates}
  */
-export function getCoordinates({ pageX: x, pageY: y, currentTarget }: PointerEvent & TouchEvent): Coordinates | null;
+export function getCoordinates({ pageX: x, pageY: y, currentTarget }: {
+    pageX: number;
+    pageY: number;
+    currentTarget: EventTarget | null;
+}): Coordinates;
 export type Coordinates = {
@@ -15,0 +19,0 @@ x: number;

types/use-reflect-event/use-reflect-event.d.ts

@@ -6,4 +6,8 @@ /**
  * @param {import("atomico").Ref<Element>} refTo - event destination reference
+ * @param {{capture?:boolean, composed?:boolean}} [options] - allows to reflect the events from target with independent shadowDOM to the host
  */
-export function useReflectEvent(refFrom: import("atomico").Ref<Element>, refTo: import("atomico").Ref<Element>, type: string): void;
-export function reflectEvent(current: Element, event: Event): void;
+export function useReflectEvent(refFrom: import("atomico").Ref<Element>, refTo: import("atomico").Ref<Element>, type: string, { capture, composed }?: {
+    capture?: boolean | undefined;
+    composed?: boolean | undefined;
+} | undefined): void;
+export function reflectEvent(current: Element, event: Event, composed?: boolean | undefined): void;

No alert changes

Improved metrics

Total package byte prevSize

85990

increased by1.31%

Lines of code

2521

increased by1.04%

No dependency changes