@xyo-network/react-event 7.5.5 → 7.5.7

package/dist/browser/hooks/useCustomEvent.d.ts

@@ -1,4 +1,4 @@
 import type { RefObject } from 'react';
-export type CustomEventDispatch<T = unknown> = (detail: T) => boolean | void;
-export declare const useCustomEvent: <TElement extends HTMLElement, TDetail = unknown>(type: string, listener?: CustomEventDispatch<TDetail>, customRef?: RefObject<TElement | null>) => [RefObject<TElement | null>, CustomEventDispatch<TDetail>];
+export type CustomEventListener<T = unknown> = (detail: T, event?: CustomEvent<T>) => boolean | void;
+export declare const useCustomEvent: <TElement extends HTMLElement, TDetail = unknown>(type: string, listener?: CustomEventListener<TDetail>, customRef?: RefObject<TElement | null>) => [RefObject<TElement | null>, CustomEventListener<TDetail>];
 //# sourceMappingURL=useCustomEvent.d.ts.map

package/dist/browser/hooks/useCustomEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCustomEvent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,GAAG,IAAI,CAAA;AAE5E,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,WAAW,EAAE,OAAO,GAAG,OAAO,EAC5E,MAAM,MAAM,EACZ,WAAW,mBAAmB,CAAC,OAAO,CAAC,EACvC,YAAY,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,KACrC,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAmC3D,CAAA"}
+{"version":3,"file":"useCustomEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCustomEvent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,IAAI,CAAA;AAEpG,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,WAAW,EAAE,OAAO,GAAG,OAAO,EAC5E,MAAM,MAAM,EACZ,WAAW,mBAAmB,CAAC,OAAO,CAAC,EACvC,YAAY,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,KACrC,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAqC3D,CAAA"}

package/dist/browser/hooks/useEvent.d.ts

@@ -5,8 +5,9 @@ export type EventVerb = 'click' | 'favorite';
 export interface Event<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> {
     data?: TData;
     noun: TNoun;
+    originalEvent?: Event;
     verb: TVerb;
 }
-export type EventDispatch<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> = (noun: TNoun, verb: TVerb, data?: TData) => boolean | void;
+export type EventDispatch<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> = (noun: TNoun, verb: TVerb, data?: TData, originalEvent?: Event) => boolean | void;
 export declare const useEvent: <T extends HTMLElement, TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string>(listener?: EventDispatch<TNoun, TVerb, TData>, sharableRef?: RefObject<T | null>) => [RefObject<T | null>, EventDispatch<TNoun, TVerb, TData>];
 //# sourceMappingURL=useEvent.d.ts.map

package/dist/browser/hooks/useEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;AAChG,MAAM,MAAM,eAAe,CAAC,SAAS,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI,IAAI,SAAS,SAAS,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEtH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,UAAU,CAAA;AAE5C,MAAM,WAAW,KAAK,CAAC,KAAK,GAAG,eAAe,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,GAAG,MAAM;IAC/E,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,IAAI,EAAE,KAAK,CAAA;IACX,IAAI,EAAE,KAAK,CAAA;CACZ;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,GAAG,eAAe,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,KAAK,KAAK,OAAO,GAAG,IAAI,CAAA;AAElJ,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,EAAE,KAAK,GAAG,eAAe,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,GAAG,MAAM,EACxG,WAAW,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC7C,cAAc,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAChC,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAiB1D,CAAA"}
+{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;AAChG,MAAM,MAAM,eAAe,CAAC,SAAS,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI,IAAI,SAAS,SAAS,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAEtH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,UAAU,CAAA;AAE5C,MAAM,WAAW,KAAK,CAAC,KAAK,GAAG,eAAe,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,GAAG,MAAM;IAC/E,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,IAAI,EAAE,KAAK,CAAA;IACX,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,IAAI,EAAE,KAAK,CAAA;CACZ;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,GAAG,eAAe,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,GAAG,MAAM,IAAI,CACtF,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,KAAK,EACX,IAAI,CAAC,EAAE,KAAK,EACZ,aAAa,CAAC,EAAE,KAAK,KAClB,OAAO,GAAG,IAAI,CAAA;AAEnB,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,EAAE,KAAK,GAAG,eAAe,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,GAAG,MAAM,EACxG,WAAW,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC7C,cAAc,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAChC,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAiB1D,CAAA"}

package/dist/browser/index.mjs

@@ -3,15 +3,17 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 
 // src/hooks/useCustomEvent.ts
 import { assertEx } from "@xylabs/sdk-js";
-import { createRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
 var useCustomEvent = /* @__PURE__ */ __name((type, listener, customRef) => {
-  const ref = customRef ?? createRef();
+  const newRef = useRef(null);
+  const ref = customRef ?? newRef;
   useEffect(() => {
     const element = ref?.current;
     const currentListener = listener;
     const handler = currentListener ? (event) => {
-      const detail = assertEx(event.detail, () => "Event missing detail");
-      const stop = currentListener(detail);
+      const customEvent = event;
+      const detail = assertEx(customEvent.detail, () => "Event missing detail");
+      const stop = currentListener(detail, customEvent);
       if (stop) {
         event.stopPropagation();
       }
@@ -43,12 +45,13 @@ var useCustomEvent = /* @__PURE__ */ __name((type, listener, customRef) => {
 // src/hooks/useEvent.ts
 var useEvent = /* @__PURE__ */ __name((listener, sharableRef) => {
   const [ref, customDispatch] = useCustomEvent("xyo", listener ? (detail) => {
-    return listener(detail.noun, detail.verb, detail.data);
+    return listener(detail.noun, detail.verb, detail.data, detail.originalEvent);
   } : void 0, sharableRef);
-  const dispatch = /* @__PURE__ */ __name((noun, verb, data) => {
+  const dispatch = /* @__PURE__ */ __name((noun, verb, data, originalEvent) => {
     return customDispatch({
       data,
       noun,
+      originalEvent,
       verb
     });
   }, "dispatch");

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useCustomEvent.ts","../../src/hooks/useEvent.ts"],"sourcesContent":["import { assertEx } from '@xylabs/sdk-js'\nimport type { RefObject } from 'react'\nimport { createRef, useEffect } from 'react'\n\nexport type CustomEventDispatch<T = unknown> = (detail: T) => boolean | void\n\nexport const useCustomEvent = <TElement extends HTMLElement, TDetail = unknown>(\n  type: string,\n  listener?: CustomEventDispatch<TDetail>,\n  customRef?: RefObject<TElement | null>,\n): [RefObject<TElement | null>, CustomEventDispatch<TDetail>] => {\n  const ref = customRef ?? createRef<TElement>()\n  useEffect(() => {\n    const element = ref?.current\n    const currentListener = listener\n    const handler\n      = currentListener\n        ? (event: CustomEventInit<TDetail> & Event) => {\n            const detail = assertEx(event.detail, () => 'Event missing detail')\n            const stop = currentListener(detail)\n            if (stop) {\n              event.stopPropagation()\n            }\n          }\n        : undefined\n\n    if (handler && element) {\n      element?.addEventListener(type, handler)\n    }\n    return () => {\n      if (handler && element) {\n        element?.removeEventListener(type, handler)\n      }\n    }\n  })\n  const dispatch: CustomEventDispatch<TDetail> = (detail?: TDetail) => {\n    const event = new CustomEvent<TDetail>(type, {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail,\n    })\n    ref.current?.dispatchEvent(event)\n  }\n  return [ref, dispatch]\n}\n","import type { RefObject } from 'react'\n\nimport { useCustomEvent } from './useCustomEvent.ts'\n\nexport type EventNoun = 'payload' | 'boundwitness' | 'address' | 'hash' | 'signature' | 'schema'\nexport type ExtendEventNoun<Extension extends string | void = void> = Extension extends string ? Extension : EventNoun\n\nexport type EventVerb = 'click' | 'favorite'\n\nexport interface Event<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> {\n  data?: TData\n  noun: TNoun\n  verb: TVerb\n}\n\nexport type EventDispatch<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> = (noun: TNoun, verb: TVerb, data?: TData) => boolean | void\n\nexport const useEvent = <T extends HTMLElement, TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string>(\n  listener?: EventDispatch<TNoun, TVerb, TData>,\n  sharableRef?: RefObject<T | null>,\n): [RefObject<T | null>, EventDispatch<TNoun, TVerb, TData>] => {\n  const [ref, customDispatch] = useCustomEvent<T, Event<TNoun, TVerb, TData>>(\n    'xyo',\n    listener\n      ? (detail: Event<TNoun, TVerb, TData>) => {\n          return listener(detail.noun, detail.verb, detail.data)\n        }\n      : undefined,\n    sharableRef,\n  )\n\n  const dispatch: EventDispatch<TNoun, TVerb, TData> = (noun: TNoun, verb: TVerb, data?: TData) => {\n    return customDispatch({\n      data, noun, verb,\n    })\n  }\n  return [ref, dispatch]\n}\n"],"mappings":";;;;AAAA,SAASA,gBAAgB;AAEzB,SAASC,WAAWC,iBAAiB;AAI9B,IAAMC,iBAAiB,wBAC5BC,MACAC,UACAC,cAAAA;AAEA,QAAMC,MAAMD,aAAaE,UAAAA;AACzBC,YAAU,MAAA;AACR,UAAMC,UAAUH,KAAKI;AACrB,UAAMC,kBAAkBP;AACxB,UAAMQ,UACFD,kBACE,CAACE,UAAAA;AACC,YAAMC,SAASC,SAASF,MAAMC,QAAQ,MAAM,sBAAA;AAC5C,YAAME,OAAOL,gBAAgBG,MAAAA;AAC7B,UAAIE,MAAM;AACRH,cAAMI,gBAAe;MACvB;IACF,IACAC;AAEN,QAAIN,WAAWH,SAAS;AACtBA,eAASU,iBAAiBhB,MAAMS,OAAAA;IAClC;AACA,WAAO,MAAA;AACL,UAAIA,WAAWH,SAAS;AACtBA,iBAASW,oBAAoBjB,MAAMS,OAAAA;MACrC;IACF;EACF,CAAA;AACA,QAAMS,WAAyC,wBAACP,WAAAA;AAC9C,UAAMD,QAAQ,IAAIS,YAAqBnB,MAAM;MAC3CoB,SAAS;MACTC,YAAY;MACZC,UAAU;MACVX;IACF,CAAA;AACAR,QAAII,SAASgB,cAAcb,KAAAA;EAC7B,GAR+C;AAS/C,SAAO;IAACP;IAAKe;;AACf,GAvC8B;;;ACWvB,IAAMM,WAAW,wBACtBC,UACAC,gBAAAA;AAEA,QAAM,CAACC,KAAKC,cAAAA,IAAkBC,eAC5B,OACAJ,WACI,CAACK,WAAAA;AACC,WAAOL,SAASK,OAAOC,MAAMD,OAAOE,MAAMF,OAAOG,IAAI;EACvD,IACAC,QACJR,WAAAA;AAGF,QAAMS,WAA+C,wBAACJ,MAAaC,MAAaC,SAAAA;AAC9E,WAAOL,eAAe;MACpBK;MAAMF;MAAMC;IACd,CAAA;EACF,GAJqD;AAKrD,SAAO;IAACL;IAAKQ;;AACf,GApBwB;","names":["assertEx","createRef","useEffect","useCustomEvent","type","listener","customRef","ref","createRef","useEffect","element","current","currentListener","handler","event","detail","assertEx","stop","stopPropagation","undefined","addEventListener","removeEventListener","dispatch","CustomEvent","bubbles","cancelable","composed","dispatchEvent","useEvent","listener","sharableRef","ref","customDispatch","useCustomEvent","detail","noun","verb","data","undefined","dispatch"]}
+{"version":3,"sources":["../../src/hooks/useCustomEvent.ts","../../src/hooks/useEvent.ts"],"sourcesContent":["import { assertEx } from '@xylabs/sdk-js'\nimport type { RefObject } from 'react'\nimport { useEffect, useRef } from 'react'\n\nexport type CustomEventListener<T = unknown> = (detail: T, event?: CustomEvent<T>) => boolean | void\n\nexport const useCustomEvent = <TElement extends HTMLElement, TDetail = unknown>(\n  type: string,\n  listener?: CustomEventListener<TDetail>,\n  customRef?: RefObject<TElement | null>,\n): [RefObject<TElement | null>, CustomEventListener<TDetail>] => {\n  const newRef = useRef<TElement>(null)\n  const ref = customRef ?? newRef\n  useEffect(() => {\n    const element = ref?.current\n    const currentListener = listener\n    const handler\n      = currentListener\n        ? (event: Event) => {\n            const customEvent = event as CustomEvent<TDetail>\n            const detail = assertEx(customEvent.detail, () => 'Event missing detail')\n            const stop = currentListener(detail, customEvent)\n            if (stop) {\n              event.stopPropagation()\n            }\n          }\n        : undefined\n\n    if (handler && element) {\n      element?.addEventListener(type, handler)\n    }\n    return () => {\n      if (handler && element) {\n        element?.removeEventListener(type, handler)\n      }\n    }\n  })\n  const dispatch: CustomEventListener<TDetail> = (detail?: TDetail) => {\n    const event = new CustomEvent<TDetail>(type, {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail,\n    })\n    ref.current?.dispatchEvent(event)\n  }\n  return [ref, dispatch]\n}\n","import type { RefObject } from 'react'\n\nimport { useCustomEvent } from './useCustomEvent.ts'\n\nexport type EventNoun = 'payload' | 'boundwitness' | 'address' | 'hash' | 'signature' | 'schema'\nexport type ExtendEventNoun<Extension extends string | void = void> = Extension extends string ? Extension : EventNoun\n\nexport type EventVerb = 'click' | 'favorite'\n\nexport interface Event<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> {\n  data?: TData\n  noun: TNoun\n  originalEvent?: Event\n  verb: TVerb\n}\n\nexport type EventDispatch<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> = (\n  noun: TNoun,\n  verb: TVerb,\n  data?: TData,\n  originalEvent?: Event,\n) => boolean | void\n\nexport const useEvent = <T extends HTMLElement, TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string>(\n  listener?: EventDispatch<TNoun, TVerb, TData>,\n  sharableRef?: RefObject<T | null>,\n): [RefObject<T | null>, EventDispatch<TNoun, TVerb, TData>] => {\n  const [ref, customDispatch] = useCustomEvent<T, Event<TNoun, TVerb, TData>>(\n    'xyo',\n    listener\n      ? (detail: Event<TNoun, TVerb, TData>) => {\n          return listener(detail.noun, detail.verb, detail.data, detail.originalEvent)\n        }\n      : undefined,\n    sharableRef,\n  )\n\n  const dispatch: EventDispatch<TNoun, TVerb, TData> = (noun: TNoun, verb: TVerb, data?: TData, originalEvent?: Event) => {\n    return customDispatch({\n      data, noun, originalEvent, verb,\n    })\n  }\n  return [ref, dispatch]\n}\n"],"mappings":";;;;AAAA,SAASA,gBAAgB;AAEzB,SAASC,WAAWC,cAAc;AAI3B,IAAMC,iBAAiB,wBAC5BC,MACAC,UACAC,cAAAA;AAEA,QAAMC,SAASC,OAAiB,IAAA;AAChC,QAAMC,MAAMH,aAAaC;AACzBG,YAAU,MAAA;AACR,UAAMC,UAAUF,KAAKG;AACrB,UAAMC,kBAAkBR;AACxB,UAAMS,UACFD,kBACE,CAACE,UAAAA;AACC,YAAMC,cAAcD;AACpB,YAAME,SAASC,SAASF,YAAYC,QAAQ,MAAM,sBAAA;AAClD,YAAME,OAAON,gBAAgBI,QAAQD,WAAAA;AACrC,UAAIG,MAAM;AACRJ,cAAMK,gBAAe;MACvB;IACF,IACAC;AAEN,QAAIP,WAAWH,SAAS;AACtBA,eAASW,iBAAiBlB,MAAMU,OAAAA;IAClC;AACA,WAAO,MAAA;AACL,UAAIA,WAAWH,SAAS;AACtBA,iBAASY,oBAAoBnB,MAAMU,OAAAA;MACrC;IACF;EACF,CAAA;AACA,QAAMU,WAAyC,wBAACP,WAAAA;AAC9C,UAAMF,QAAQ,IAAIU,YAAqBrB,MAAM;MAC3CsB,SAAS;MACTC,YAAY;MACZC,UAAU;MACVX;IACF,CAAA;AACAR,QAAIG,SAASiB,cAAcd,KAAAA;EAC7B,GAR+C;AAS/C,SAAO;IAACN;IAAKe;;AACf,GAzC8B;;;ACiBvB,IAAMM,WAAW,wBACtBC,UACAC,gBAAAA;AAEA,QAAM,CAACC,KAAKC,cAAAA,IAAkBC,eAC5B,OACAJ,WACI,CAACK,WAAAA;AACC,WAAOL,SAASK,OAAOC,MAAMD,OAAOE,MAAMF,OAAOG,MAAMH,OAAOI,aAAa;EAC7E,IACAC,QACJT,WAAAA;AAGF,QAAMU,WAA+C,wBAACL,MAAaC,MAAaC,MAAcC,kBAAAA;AAC5F,WAAON,eAAe;MACpBK;MAAMF;MAAMG;MAAeF;IAC7B,CAAA;EACF,GAJqD;AAKrD,SAAO;IAACL;IAAKS;;AACf,GApBwB;","names":["assertEx","useEffect","useRef","useCustomEvent","type","listener","customRef","newRef","useRef","ref","useEffect","element","current","currentListener","handler","event","customEvent","detail","assertEx","stop","stopPropagation","undefined","addEventListener","removeEventListener","dispatch","CustomEvent","bubbles","cancelable","composed","dispatchEvent","useEvent","listener","sharableRef","ref","customDispatch","useCustomEvent","detail","noun","verb","data","originalEvent","undefined","dispatch"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-event",
-  "version": "7.5.5",
+  "version": "7.5.7",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -43,10 +43,11 @@
     "src"
   ],
   "dependencies": {
-    "@xylabs/sdk-js": "~5.0.79"
+    "@xylabs/sdk-js": "~5.0.90"
   },
   "devDependencies": {
-    "@xylabs/ts-scripts-yarn3": "~7.3.2",
+    "@xylabs/ts-scripts-common": "~7.5.6",
+    "@xylabs/ts-scripts-yarn3": "~7.5.6",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {

package/src/hooks/useCustomEvent.ts

@@ -1,23 +1,25 @@
 import { assertEx } from '@xylabs/sdk-js'
 import type { RefObject } from 'react'
-import { createRef, useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
-export type CustomEventDispatch<T = unknown> = (detail: T) => boolean | void
+export type CustomEventListener<T = unknown> = (detail: T, event?: CustomEvent<T>) => boolean | void
 
 export const useCustomEvent = <TElement extends HTMLElement, TDetail = unknown>(
   type: string,
-  listener?: CustomEventDispatch<TDetail>,
+  listener?: CustomEventListener<TDetail>,
   customRef?: RefObject<TElement | null>,
-): [RefObject<TElement | null>, CustomEventDispatch<TDetail>] => {
-  const ref = customRef ?? createRef<TElement>()
+): [RefObject<TElement | null>, CustomEventListener<TDetail>] => {
+  const newRef = useRef<TElement>(null)
+  const ref = customRef ?? newRef
   useEffect(() => {
     const element = ref?.current
     const currentListener = listener
     const handler
       = currentListener
-        ? (event: CustomEventInit<TDetail> & Event) => {
-            const detail = assertEx(event.detail, () => 'Event missing detail')
-            const stop = currentListener(detail)
+        ? (event: Event) => {
+            const customEvent = event as CustomEvent<TDetail>
+            const detail = assertEx(customEvent.detail, () => 'Event missing detail')
+            const stop = currentListener(detail, customEvent)
             if (stop) {
               event.stopPropagation()
             }
@@ -33,7 +35,7 @@ export const useCustomEvent = <TElement extends HTMLElement, TDetail = unknown>(
       }
     }
   })
-  const dispatch: CustomEventDispatch<TDetail> = (detail?: TDetail) => {
+  const dispatch: CustomEventListener<TDetail> = (detail?: TDetail) => {
     const event = new CustomEvent<TDetail>(type, {
       bubbles: true,
       cancelable: true,

package/src/hooks/useEvent.ts

@@ -10,10 +10,16 @@ export type EventVerb = 'click' | 'favorite'
 export interface Event<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> {
   data?: TData
   noun: TNoun
+  originalEvent?: Event
   verb: TVerb
 }
 
-export type EventDispatch<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> = (noun: TNoun, verb: TVerb, data?: TData) => boolean | void
+export type EventDispatch<TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string> = (
+  noun: TNoun,
+  verb: TVerb,
+  data?: TData,
+  originalEvent?: Event,
+) => boolean | void
 
 export const useEvent = <T extends HTMLElement, TNoun = ExtendEventNoun, TVerb = EventVerb, TData = string>(
   listener?: EventDispatch<TNoun, TVerb, TData>,
@@ -23,15 +29,15 @@ export const useEvent = <T extends HTMLElement, TNoun = ExtendEventNoun, TVerb =
     'xyo',
     listener
       ? (detail: Event<TNoun, TVerb, TData>) => {
-          return listener(detail.noun, detail.verb, detail.data)
+          return listener(detail.noun, detail.verb, detail.data, detail.originalEvent)
         }
       : undefined,
     sharableRef,
   )
 
-  const dispatch: EventDispatch<TNoun, TVerb, TData> = (noun: TNoun, verb: TVerb, data?: TData) => {
+  const dispatch: EventDispatch<TNoun, TVerb, TData> = (noun: TNoun, verb: TVerb, data?: TData, originalEvent?: Event) => {
     return customDispatch({
-      data, noun, verb,
+      data, noun, originalEvent, verb,
     })
   }
   return [ref, dispatch]