@aweebit/react-essentials 0.5.2 → 0.5.3

package/dist/hooks/useEventListener.d.ts

@@ -11,9 +11,10 @@
  * It is the user's responsibility to make sure `element` and `options` values
  * are correctly memoized!
  */
-declare function useEventListener<K extends keyof SVGElementEventMap, T extends SVGElement>(eventName: K, handler: (event: SVGElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof SVGElementEventMap, T extends SVGElement>(eventName: K, handler: (this: T, event: SVGElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement>(eventName: K, handler: (this: T, event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (this: Document, event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (this: Window, event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener(eventName: string, handler: (this: EventTarget, event: Event) => void, element?: EventTarget, options?: boolean | AddEventListenerOptions): void;
 export default useEventListener;
 //# sourceMappingURL=useEventListener.d.ts.map

package/dist/hooks/useEventListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../lib/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;GAMG;AAGH,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,kBAAkB,EAClC,CAAC,SAAS,UAAU,EAEpB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/C,OAAO,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,mBAAmB,EACnC,CAAC,SAAS,WAAW,EAErB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EAChD,OAAO,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACxD,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7C,OAAO,EAAE,QAAQ,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EACtD,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3C,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAiCR,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../lib/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;GAMG;AAGH,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,kBAAkB,EAClC,CAAC,SAAS,UAAU,EAEpB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,EACxD,OAAO,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,mBAAmB,EACnC,CAAC,SAAS,WAAW,EAErB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EACzD,OAAO,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACxD,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7D,OAAO,EAAE,QAAQ,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EACtD,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EACzD,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,EAClD,OAAO,CAAC,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAiCR,eAAe,gBAAgB,CAAC"}

package/dist/hooks/useEventListener.js

@@ -15,8 +15,8 @@ function useEventListener(eventName, handler, element, options) {
         // Define the listening target
         const targetElement = element ?? window;
         // Create event listener that calls handler function stored in ref
-        const listener = (event) => {
-            savedHandler.current(event);
+        const listener = function (event) {
+            savedHandler.current.call(this, event);
         };
         targetElement.addEventListener(eventName, listener, options);
         // Remove event listener on cleanup

package/dist/hooks/useEventListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.js","sourceRoot":"","sources":["../../lib/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgD3D,SAAS,gBAAgB,CACvB,SAAiB,EACjB,OAA+B,EAC/B,OAAqB,EACrB,OAA2C;IAE3C,mCAAmC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,eAAe,CAAC,GAAG,EAAE;QACnB,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IACjC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;QAC9B,MAAM,aAAa,GAAG,OAAO,IAAI,MAAM,CAAC;QAExC,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,CAAC,KAAK,EAAE,EAAE;YACzC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useEventListener.js","sourceRoot":"","sources":["../../lib/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAwD3D,SAAS,gBAAgB,CACvB,SAAiB,EACjB,OAAkD,EAClD,OAAqB,EACrB,OAA2C;IAE3C,mCAAmC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,eAAe,CAAC,GAAG,EAAE;QACnB,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IACjC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;QAC9B,MAAM,aAAa,GAAG,OAAO,IAAI,MAAM,CAAC;QAExC,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,UAAU,KAAK;YAC9C,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,eAAe,gBAAgB,CAAC"}

package/lib/hooks/useEventListener.ts

@@ -21,7 +21,7 @@ function useEventListener<
   T extends SVGElement,
 >(
   eventName: K,
-  handler: (event: SVGElementEventMap[K]) => void,
+  handler: (this: T, event: SVGElementEventMap[K]) => void,
   element: T,
   options?: boolean | AddEventListenerOptions,
 ): void;
@@ -32,7 +32,7 @@ function useEventListener<
   T extends HTMLElement,
 >(
   eventName: K,
-  handler: (event: HTMLElementEventMap[K]) => void,
+  handler: (this: T, event: HTMLElementEventMap[K]) => void,
   element: T,
   options?: boolean | AddEventListenerOptions,
 ): void;
@@ -40,7 +40,7 @@ function useEventListener<
 // Document Event based useEventListener interface
 function useEventListener<K extends keyof DocumentEventMap>(
   eventName: K,
-  handler: (event: DocumentEventMap[K]) => void,
+  handler: (this: Document, event: DocumentEventMap[K]) => void,
   element: Document,
   options?: boolean | AddEventListenerOptions,
 ): void;
@@ -48,14 +48,22 @@ function useEventListener<K extends keyof DocumentEventMap>(
 // Window Event based useEventListener interface
 function useEventListener<K extends keyof WindowEventMap>(
   eventName: K,
-  handler: (event: WindowEventMap[K]) => void,
+  handler: (this: Window, event: WindowEventMap[K]) => void,
   element?: Window,
   options?: boolean | AddEventListenerOptions,
 ): void;
 
+// Fallback overload for all other event targets and types
 function useEventListener(
   eventName: string,
-  handler: (event: Event) => void,
+  handler: (this: EventTarget, event: Event) => void,
+  element?: EventTarget,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener(
+  eventName: string,
+  handler: (this: EventTarget, event: Event) => void,
   element?: EventTarget,
   options?: boolean | AddEventListenerOptions,
 ) {
@@ -71,8 +79,8 @@ function useEventListener(
     const targetElement = element ?? window;
 
     // Create event listener that calls handler function stored in ref
-    const listener: typeof handler = (event) => {
-      savedHandler.current(event);
+    const listener: typeof handler = function (event) {
+      savedHandler.current.call(this, event);
     };
 
     targetElement.addEventListener(eventName, listener, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aweebit/react-essentials",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "repository": "github:aweebit/react-essentials",
   "main": "dist/index.js",