jb-core 0.0.3 → 0.1.0

package/README.md

@@ -1,6 +1,30 @@
 # jb-core
 
-core modules of jb-design system
+core modules of jb-design system mostly contain functions that help you manage your web-components & tools to connect them to ReactJS components.
+
+## js modules
+
+### listenAndSilentEvent
+
+this function listen to event in the capture phase and stop it's propagation and call your handler so you will be the only one who capture this event used for event forwarding (transformation) in web-components.
+
+```js
+  listenAndSilentEvent(inputDom, 'keyup', yourOnKeyUpHandler);
+  listenAndSilentEvent(inputDom, 'keyup', yourOnKeyUpHandler,{passive:true});
+```
+
+### create events
+
+these functions will create events base on existing event objects used mostly for event forwarding.
+
+```ts
+  #onInputInput(e:InputEvent){
+    const event = createInputEvent('input', e, { cancelable: false });
+    this.dispatchEvent(event);
+  }
+    
+```
+we also have `createKeyboardEvent`, `createInputEvent`, `createFocusEvent`.
 
 ## React modules:
 
@@ -14,4 +38,4 @@ import {useEvent} from 'jb-core/react';
 useEvent(ref,'event',props.onEvent);
 //for example
 useEvent(ref,'change',props.onChange);
-```
+```

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";exports.createInputEvent=function(e,t,a){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,isComposing:t.isComposing,view:t.view,which:t.which,data:t.data,dataTransfer:t.dataTransfer,inputType:t.inputType,targetRanges:"function"==typeof t.getTargetRanges()?t.getTargetRanges():[],...a};return new InputEvent(e,o)},exports.createKeyboardEvent=function(e,t,a){const o={altKey:t.altKey,bubbles:t.bubbles,cancelable:t.cancelable,code:t.code,composed:t.composed,ctrlKey:t.ctrlKey,detail:t.detail,isComposing:t.isComposing,key:t.key,location:t.location,metaKey:t.metaKey,repeat:t.repeat,shiftKey:t.shiftKey,view:t.view,charCode:t.charCode,keyCode:t.keyCode,which:t.which,...a};return new KeyboardEvent(e,o)};
+"use strict";exports.createFocusEvent=function(e,t,a){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,view:t.view,which:t.which,relatedTarget:t.relatedTarget,...a};return new FocusEvent(e,o)},exports.createInputEvent=function(e,t,a){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,isComposing:t.isComposing,view:t.view,which:t.which,data:t.data,dataTransfer:t.dataTransfer,inputType:t.inputType,targetRanges:"function"==typeof t.getTargetRanges()?t.getTargetRanges():[],...a};return new InputEvent(e,o)},exports.createKeyboardEvent=function(e,t,a){const o={altKey:t.altKey,bubbles:t.bubbles,cancelable:t.cancelable,code:t.code,composed:t.composed,ctrlKey:t.ctrlKey,detail:t.detail,isComposing:t.isComposing,key:t.key,location:t.location,metaKey:t.metaKey,repeat:t.repeat,shiftKey:t.shiftKey,view:t.view,charCode:t.charCode,keyCode:t.keyCode,which:t.which,...a};return new KeyboardEvent(e,o)},exports.isMobile=()=>/Mobi/i.test(window.navigator.userAgent),exports.listenAndSilentEvent=function(e,t,a,o={}){document.addEventListener(t,(t=>{t.composedPath().includes(e)&&(t.stopPropagation(),t.stopImmediatePropagation(),a(t))}),{capture:!0,...o})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../lib/events.ts"],"sourcesContent":["/**\r\n * add type to event target for easier access to target\r\n */\r\nexport type EventTypeWithTarget<TEvent,TTarget> = TEvent & {\r\n  target: TTarget;\r\n};\r\n/**\r\n * create a keyboardEvent based on e value and replace them with initObj\r\n */\r\nexport function createKeyboardEvent(eventName:string,e:KeyboardEvent,initObj:KeyboardEventInit){\r\n  const initialObject: KeyboardEventInit = {\r\n    altKey:e.altKey,\r\n    bubbles:e.bubbles,\r\n    cancelable:e.cancelable,\r\n    code:e.code,\r\n    composed:e.composed,\r\n    ctrlKey:e.ctrlKey,\r\n    detail:e.detail,\r\n    isComposing:e.isComposing,\r\n    key:e.key,\r\n    location:e.location,\r\n    metaKey:e.metaKey,\r\n    repeat:e.repeat,\r\n    shiftKey:e.shiftKey,\r\n    view:e.view,\r\n    charCode:e.charCode,\r\n    keyCode:e.keyCode,\r\n    which:e.which,\r\n    ...initObj   \r\n  };\r\n  const event = new KeyboardEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n/**\r\n * create a keyboardEvent based on e value and replace them with initObj\r\n */\r\nexport function createInputEvent(eventName:string,e:InputEvent,initObj:InputEventInit){\r\n  const initialObject: InputEventInit = {\r\n    bubbles:e.bubbles,\r\n    cancelable:e.cancelable,\r\n    composed:e.composed,\r\n    detail:e.detail,\r\n    isComposing:e.isComposing,\r\n    view:e.view,\r\n    which:e.which,\r\n    data:e.data,\r\n    dataTransfer:e.dataTransfer,\r\n    inputType:e.inputType,\r\n    targetRanges: typeof e.getTargetRanges() == \"function\"?e.getTargetRanges():[],\r\n    ...initObj   \r\n  };\r\n  const event = new InputEvent(eventName, initialObject);\r\n  return event;\r\n}"],"names":["eventName","e","initObj","initialObject","bubbles","cancelable","composed","detail","isComposing","view","which","data","dataTransfer","inputType","targetRanges","getTargetRanges","InputEvent","altKey","code","ctrlKey","key","location","metaKey","repeat","shiftKey","charCode","keyCode","KeyboardEvent"],"mappings":"+CAoCiCA,EAAiBC,EAAaC,GAC7D,MAAMC,EAAgC,CACpCC,QAAQH,EAAEG,QACVC,WAAWJ,EAAEI,WACbC,SAASL,EAAEK,SACXC,OAAON,EAAEM,OACTC,YAAYP,EAAEO,YACdC,KAAKR,EAAEQ,KACPC,MAAMT,EAAES,MACRC,KAAKV,EAAEU,KACPC,aAAaX,EAAEW,aACfC,UAAUZ,EAAEY,UACZC,aAA4C,mBAAvBb,EAAEc,kBAAgCd,EAAEc,kBAAkB,MACxEb,GAGL,OADc,IAAIc,WAAWhB,EAAWG,EAE1C,uCA5CoCH,EAAiBC,EAAgBC,GACnE,MAAMC,EAAmC,CACvCc,OAAOhB,EAAEgB,OACTb,QAAQH,EAAEG,QACVC,WAAWJ,EAAEI,WACba,KAAKjB,EAAEiB,KACPZ,SAASL,EAAEK,SACXa,QAAQlB,EAAEkB,QACVZ,OAAON,EAAEM,OACTC,YAAYP,EAAEO,YACdY,IAAInB,EAAEmB,IACNC,SAASpB,EAAEoB,SACXC,QAAQrB,EAAEqB,QACVC,OAAOtB,EAAEsB,OACTC,SAASvB,EAAEuB,SACXf,KAAKR,EAAEQ,KACPgB,SAASxB,EAAEwB,SACXC,QAAQzB,EAAEyB,QACVhB,MAAMT,EAAES,SACLR,GAGL,OADc,IAAIyB,cAAc3B,EAAWG,EAE7C"}
+{"version":3,"file":"index.cjs.js","sources":["../lib/events.ts","../lib/device-detection.ts"],"sourcesContent":["/**\r\n * add type to event target for easier access to target\r\n */\r\nexport type EventTypeWithTarget<TEvent, TTarget> = TEvent & {\r\n  target: TTarget;\r\n};\r\n/**\r\n * this function will stop event from propagate even in capturing phase and will call handler only if event target is the element\r\n */\r\nexport function listenAndSilentEvent<TEvent extends Event, TTarget>(element: TTarget, eventName: string, handler: (e:TEvent) => void, options: AddEventListenerOptions = {}) {\r\n  document.addEventListener(eventName, (e: TEvent) => {\r\n    if (e.composedPath().includes(element as unknown as EventTarget)) {\r\n      e.stopPropagation();\r\n      e.stopImmediatePropagation();\r\n      handler(e);\r\n    }\r\n  },{capture:true,...options});\r\n}\r\n/**\r\n * create a keyboardEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createKeyboardEvent(eventName: string, e: KeyboardEvent, initObj: KeyboardEventInit) {\r\n  const initialObject: KeyboardEventInit = {\r\n    altKey: e.altKey,\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    code: e.code,\r\n    composed: e.composed,\r\n    ctrlKey: e.ctrlKey,\r\n    detail: e.detail,\r\n    isComposing: e.isComposing,\r\n    key: e.key,\r\n    location: e.location,\r\n    metaKey: e.metaKey,\r\n    repeat: e.repeat,\r\n    shiftKey: e.shiftKey,\r\n    view: e.view,\r\n    charCode: e.charCode,\r\n    keyCode: e.keyCode,\r\n    which: e.which,\r\n    ...initObj\r\n  };\r\n  const event = new KeyboardEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n/**\r\n * create a InputEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createInputEvent(eventName: string, e: InputEvent, initObj: InputEventInit) {\r\n  const initialObject: InputEventInit = {\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    composed: e.composed,\r\n    detail: e.detail,\r\n    isComposing: e.isComposing,\r\n    view: e.view,\r\n    which: e.which,\r\n    data: e.data,\r\n    dataTransfer: e.dataTransfer,\r\n    inputType: e.inputType,\r\n    targetRanges: typeof e.getTargetRanges() == \"function\" ? e.getTargetRanges() : [],\r\n    ...initObj\r\n  };\r\n  const event = new InputEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n\r\n/**\r\n * create a InputEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createFocusEvent(eventName: string, e: FocusEvent, initObj: FocusEventInit) {\r\n  const initialObject: FocusEventInit = {\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    composed: e.composed,\r\n    detail: e.detail,\r\n    view: e.view,\r\n    which: e.which,\r\n    relatedTarget: e.relatedTarget,\r\n    ...initObj\r\n  };\r\n  const event = new FocusEvent(eventName, initialObject);\r\n  return event;\r\n}","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["eventName","e","initObj","initialObject","bubbles","cancelable","composed","detail","view","which","relatedTarget","FocusEvent","isComposing","data","dataTransfer","inputType","targetRanges","getTargetRanges","InputEvent","altKey","code","ctrlKey","key","location","metaKey","repeat","shiftKey","charCode","keyCode","KeyboardEvent","test","window","navigator","userAgent","element","handler","options","document","addEventListener","composedPath","includes","stopPropagation","stopImmediatePropagation","capture"],"mappings":"+CAsEiCA,EAAmBC,EAAeC,GACjE,MAAMC,EAAgC,CACpCC,QAASH,EAAEG,QACXC,WAAYJ,EAAEI,WACdC,SAAUL,EAAEK,SACZC,OAAQN,EAAEM,OACVC,KAAMP,EAAEO,KACRC,MAAOR,EAAEQ,MACTC,cAAeT,EAAES,iBACdR,GAGL,OADc,IAAIS,WAAWX,EAAWG,EAE1C,oCAnCiCH,EAAmBC,EAAeC,GACjE,MAAMC,EAAgC,CACpCC,QAASH,EAAEG,QACXC,WAAYJ,EAAEI,WACdC,SAAUL,EAAEK,SACZC,OAAQN,EAAEM,OACVK,YAAaX,EAAEW,YACfJ,KAAMP,EAAEO,KACRC,MAAOR,EAAEQ,MACTI,KAAMZ,EAAEY,KACRC,aAAcb,EAAEa,aAChBC,UAAWd,EAAEc,UACbC,aAA4C,mBAAvBf,EAAEgB,kBAAkChB,EAAEgB,kBAAoB,MAC5Ef,GAGL,OADc,IAAIgB,WAAWlB,EAAWG,EAE1C,uCA5CoCH,EAAmBC,EAAkBC,GACvE,MAAMC,EAAmC,CACvCgB,OAAQlB,EAAEkB,OACVf,QAASH,EAAEG,QACXC,WAAYJ,EAAEI,WACde,KAAMnB,EAAEmB,KACRd,SAAUL,EAAEK,SACZe,QAASpB,EAAEoB,QACXd,OAAQN,EAAEM,OACVK,YAAaX,EAAEW,YACfU,IAAKrB,EAAEqB,IACPC,SAAUtB,EAAEsB,SACZC,QAASvB,EAAEuB,QACXC,OAAQxB,EAAEwB,OACVC,SAAUzB,EAAEyB,SACZlB,KAAMP,EAAEO,KACRmB,SAAU1B,EAAE0B,SACZC,QAAS3B,EAAE2B,QACXnB,MAAOR,EAAEQ,SACNP,GAGL,OADc,IAAI2B,cAAc7B,EAAWG,EAE7C,mBC5CwB,IACf,QAAQ2B,KAAKC,OAAOC,UAAUC,wCDQjC,SAA8DC,EAAkBlC,EAAmBmC,EAA6BC,EAAmC,CAAA,GACvKC,SAASC,iBAAiBtC,GAAYC,IAChCA,EAAEsC,eAAeC,SAASN,KAC5BjC,EAAEwC,kBACFxC,EAAEyC,2BACFP,EAAQlC,GACT,GACD,CAAC0C,SAAQ,KAAQP,GACrB"}

package/dist/index.js

@@ -1,2 +1,2 @@
-function e(e,t,a){const o={altKey:t.altKey,bubbles:t.bubbles,cancelable:t.cancelable,code:t.code,composed:t.composed,ctrlKey:t.ctrlKey,detail:t.detail,isComposing:t.isComposing,key:t.key,location:t.location,metaKey:t.metaKey,repeat:t.repeat,shiftKey:t.shiftKey,view:t.view,charCode:t.charCode,keyCode:t.keyCode,which:t.which,...a};return new KeyboardEvent(e,o)}function t(e,t,a){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,isComposing:t.isComposing,view:t.view,which:t.which,data:t.data,dataTransfer:t.dataTransfer,inputType:t.inputType,targetRanges:"function"==typeof t.getTargetRanges()?t.getTargetRanges():[],...a};return new InputEvent(e,o)}export{t as createInputEvent,e as createKeyboardEvent};
+function e(e,t,a,o={}){document.addEventListener(t,(t=>{t.composedPath().includes(e)&&(t.stopPropagation(),t.stopImmediatePropagation(),a(t))}),{capture:!0,...o})}function t(e,t,a){const o={altKey:t.altKey,bubbles:t.bubbles,cancelable:t.cancelable,code:t.code,composed:t.composed,ctrlKey:t.ctrlKey,detail:t.detail,isComposing:t.isComposing,key:t.key,location:t.location,metaKey:t.metaKey,repeat:t.repeat,shiftKey:t.shiftKey,view:t.view,charCode:t.charCode,keyCode:t.keyCode,which:t.which,...a};return new KeyboardEvent(e,o)}function a(e,t,a){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,isComposing:t.isComposing,view:t.view,which:t.which,data:t.data,dataTransfer:t.dataTransfer,inputType:t.inputType,targetRanges:"function"==typeof t.getTargetRanges()?t.getTargetRanges():[],...a};return new InputEvent(e,o)}function o(e,t,a){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,view:t.view,which:t.which,relatedTarget:t.relatedTarget,...a};return new FocusEvent(e,o)}const n=()=>/Mobi/i.test(window.navigator.userAgent);export{o as createFocusEvent,a as createInputEvent,t as createKeyboardEvent,n as isMobile,e as listenAndSilentEvent};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../lib/events.ts"],"sourcesContent":["/**\r\n * add type to event target for easier access to target\r\n */\r\nexport type EventTypeWithTarget<TEvent,TTarget> = TEvent & {\r\n  target: TTarget;\r\n};\r\n/**\r\n * create a keyboardEvent based on e value and replace them with initObj\r\n */\r\nexport function createKeyboardEvent(eventName:string,e:KeyboardEvent,initObj:KeyboardEventInit){\r\n  const initialObject: KeyboardEventInit = {\r\n    altKey:e.altKey,\r\n    bubbles:e.bubbles,\r\n    cancelable:e.cancelable,\r\n    code:e.code,\r\n    composed:e.composed,\r\n    ctrlKey:e.ctrlKey,\r\n    detail:e.detail,\r\n    isComposing:e.isComposing,\r\n    key:e.key,\r\n    location:e.location,\r\n    metaKey:e.metaKey,\r\n    repeat:e.repeat,\r\n    shiftKey:e.shiftKey,\r\n    view:e.view,\r\n    charCode:e.charCode,\r\n    keyCode:e.keyCode,\r\n    which:e.which,\r\n    ...initObj   \r\n  };\r\n  const event = new KeyboardEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n/**\r\n * create a keyboardEvent based on e value and replace them with initObj\r\n */\r\nexport function createInputEvent(eventName:string,e:InputEvent,initObj:InputEventInit){\r\n  const initialObject: InputEventInit = {\r\n    bubbles:e.bubbles,\r\n    cancelable:e.cancelable,\r\n    composed:e.composed,\r\n    detail:e.detail,\r\n    isComposing:e.isComposing,\r\n    view:e.view,\r\n    which:e.which,\r\n    data:e.data,\r\n    dataTransfer:e.dataTransfer,\r\n    inputType:e.inputType,\r\n    targetRanges: typeof e.getTargetRanges() == \"function\"?e.getTargetRanges():[],\r\n    ...initObj   \r\n  };\r\n  const event = new InputEvent(eventName, initialObject);\r\n  return event;\r\n}"],"names":["createKeyboardEvent","eventName","e","initObj","initialObject","altKey","bubbles","cancelable","code","composed","ctrlKey","detail","isComposing","key","location","metaKey","repeat","shiftKey","view","charCode","keyCode","which","KeyboardEvent","createInputEvent","data","dataTransfer","inputType","targetRanges","getTargetRanges","InputEvent"],"mappings":"SASgBA,EAAoBC,EAAiBC,EAAgBC,GACnE,MAAMC,EAAmC,CACvCC,OAAOH,EAAEG,OACTC,QAAQJ,EAAEI,QACVC,WAAWL,EAAEK,WACbC,KAAKN,EAAEM,KACPC,SAASP,EAAEO,SACXC,QAAQR,EAAEQ,QACVC,OAAOT,EAAES,OACTC,YAAYV,EAAEU,YACdC,IAAIX,EAAEW,IACNC,SAASZ,EAAEY,SACXC,QAAQb,EAAEa,QACVC,OAAOd,EAAEc,OACTC,SAASf,EAAEe,SACXC,KAAKhB,EAAEgB,KACPC,SAASjB,EAAEiB,SACXC,QAAQlB,EAAEkB,QACVC,MAAMnB,EAAEmB,SACLlB,GAGL,OADc,IAAImB,cAAcrB,EAAWG,EAE7C,UAIgBmB,EAAiBtB,EAAiBC,EAAaC,GAC7D,MAAMC,EAAgC,CACpCE,QAAQJ,EAAEI,QACVC,WAAWL,EAAEK,WACbE,SAASP,EAAEO,SACXE,OAAOT,EAAES,OACTC,YAAYV,EAAEU,YACdM,KAAKhB,EAAEgB,KACPG,MAAMnB,EAAEmB,MACRG,KAAKtB,EAAEsB,KACPC,aAAavB,EAAEuB,aACfC,UAAUxB,EAAEwB,UACZC,aAA4C,mBAAvBzB,EAAE0B,kBAAgC1B,EAAE0B,kBAAkB,MACxEzB,GAGL,OADc,IAAI0B,WAAW5B,EAAWG,EAE1C"}
+{"version":3,"file":"index.js","sources":["../lib/events.ts","../lib/device-detection.ts"],"sourcesContent":["/**\r\n * add type to event target for easier access to target\r\n */\r\nexport type EventTypeWithTarget<TEvent, TTarget> = TEvent & {\r\n  target: TTarget;\r\n};\r\n/**\r\n * this function will stop event from propagate even in capturing phase and will call handler only if event target is the element\r\n */\r\nexport function listenAndSilentEvent<TEvent extends Event, TTarget>(element: TTarget, eventName: string, handler: (e:TEvent) => void, options: AddEventListenerOptions = {}) {\r\n  document.addEventListener(eventName, (e: TEvent) => {\r\n    if (e.composedPath().includes(element as unknown as EventTarget)) {\r\n      e.stopPropagation();\r\n      e.stopImmediatePropagation();\r\n      handler(e);\r\n    }\r\n  },{capture:true,...options});\r\n}\r\n/**\r\n * create a keyboardEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createKeyboardEvent(eventName: string, e: KeyboardEvent, initObj: KeyboardEventInit) {\r\n  const initialObject: KeyboardEventInit = {\r\n    altKey: e.altKey,\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    code: e.code,\r\n    composed: e.composed,\r\n    ctrlKey: e.ctrlKey,\r\n    detail: e.detail,\r\n    isComposing: e.isComposing,\r\n    key: e.key,\r\n    location: e.location,\r\n    metaKey: e.metaKey,\r\n    repeat: e.repeat,\r\n    shiftKey: e.shiftKey,\r\n    view: e.view,\r\n    charCode: e.charCode,\r\n    keyCode: e.keyCode,\r\n    which: e.which,\r\n    ...initObj\r\n  };\r\n  const event = new KeyboardEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n/**\r\n * create a InputEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createInputEvent(eventName: string, e: InputEvent, initObj: InputEventInit) {\r\n  const initialObject: InputEventInit = {\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    composed: e.composed,\r\n    detail: e.detail,\r\n    isComposing: e.isComposing,\r\n    view: e.view,\r\n    which: e.which,\r\n    data: e.data,\r\n    dataTransfer: e.dataTransfer,\r\n    inputType: e.inputType,\r\n    targetRanges: typeof e.getTargetRanges() == \"function\" ? e.getTargetRanges() : [],\r\n    ...initObj\r\n  };\r\n  const event = new InputEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n\r\n/**\r\n * create a InputEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createFocusEvent(eventName: string, e: FocusEvent, initObj: FocusEventInit) {\r\n  const initialObject: FocusEventInit = {\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    composed: e.composed,\r\n    detail: e.detail,\r\n    view: e.view,\r\n    which: e.which,\r\n    relatedTarget: e.relatedTarget,\r\n    ...initObj\r\n  };\r\n  const event = new FocusEvent(eventName, initialObject);\r\n  return event;\r\n}","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["listenAndSilentEvent","element","eventName","handler","options","document","addEventListener","e","composedPath","includes","stopPropagation","stopImmediatePropagation","capture","createKeyboardEvent","initObj","initialObject","altKey","bubbles","cancelable","code","composed","ctrlKey","detail","isComposing","key","location","metaKey","repeat","shiftKey","view","charCode","keyCode","which","KeyboardEvent","createInputEvent","data","dataTransfer","inputType","targetRanges","getTargetRanges","InputEvent","createFocusEvent","relatedTarget","FocusEvent","isMobile","test","window","navigator","userAgent"],"mappings":"AASM,SAAUA,EAAoDC,EAAkBC,EAAmBC,EAA6BC,EAAmC,CAAA,GACvKC,SAASC,iBAAiBJ,GAAYK,IAChCA,EAAEC,eAAeC,SAASR,KAC5BM,EAAEG,kBACFH,EAAEI,2BACFR,EAAQI,GACT,GACD,CAACK,SAAQ,KAAQR,GACrB,UAIgBS,EAAoBX,EAAmBK,EAAkBO,GACvE,MAAMC,EAAmC,CACvCC,OAAQT,EAAES,OACVC,QAASV,EAAEU,QACXC,WAAYX,EAAEW,WACdC,KAAMZ,EAAEY,KACRC,SAAUb,EAAEa,SACZC,QAASd,EAAEc,QACXC,OAAQf,EAAEe,OACVC,YAAahB,EAAEgB,YACfC,IAAKjB,EAAEiB,IACPC,SAAUlB,EAAEkB,SACZC,QAASnB,EAAEmB,QACXC,OAAQpB,EAAEoB,OACVC,SAAUrB,EAAEqB,SACZC,KAAMtB,EAAEsB,KACRC,SAAUvB,EAAEuB,SACZC,QAASxB,EAAEwB,QACXC,MAAOzB,EAAEyB,SACNlB,GAGL,OADc,IAAImB,cAAc/B,EAAWa,EAE7C,UAIgBmB,EAAiBhC,EAAmBK,EAAeO,GACjE,MAAMC,EAAgC,CACpCE,QAASV,EAAEU,QACXC,WAAYX,EAAEW,WACdE,SAAUb,EAAEa,SACZE,OAAQf,EAAEe,OACVC,YAAahB,EAAEgB,YACfM,KAAMtB,EAAEsB,KACRG,MAAOzB,EAAEyB,MACTG,KAAM5B,EAAE4B,KACRC,aAAc7B,EAAE6B,aAChBC,UAAW9B,EAAE8B,UACbC,aAA4C,mBAAvB/B,EAAEgC,kBAAkChC,EAAEgC,kBAAoB,MAC5EzB,GAGL,OADc,IAAI0B,WAAWtC,EAAWa,EAE1C,UAKgB0B,EAAiBvC,EAAmBK,EAAeO,GACjE,MAAMC,EAAgC,CACpCE,QAASV,EAAEU,QACXC,WAAYX,EAAEW,WACdE,SAAUb,EAAEa,SACZE,OAAQf,EAAEe,OACVO,KAAMtB,EAAEsB,KACRG,MAAOzB,EAAEyB,MACTU,cAAenC,EAAEmC,iBACd5B,GAGL,OADc,IAAI6B,WAAWzC,EAAWa,EAE1C,CCnFO,MAAM6B,EAAW,IACf,QAAQC,KAAKC,OAAOC,UAAUC"}

package/dist/index.umd.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBCore={})}(this,(function(e){"use strict";e.createInputEvent=function(e,t,o){const n={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,isComposing:t.isComposing,view:t.view,which:t.which,data:t.data,dataTransfer:t.dataTransfer,inputType:t.inputType,targetRanges:"function"==typeof t.getTargetRanges()?t.getTargetRanges():[],...o};return new InputEvent(e,n)},e.createKeyboardEvent=function(e,t,o){const n={altKey:t.altKey,bubbles:t.bubbles,cancelable:t.cancelable,code:t.code,composed:t.composed,ctrlKey:t.ctrlKey,detail:t.detail,isComposing:t.isComposing,key:t.key,location:t.location,metaKey:t.metaKey,repeat:t.repeat,shiftKey:t.shiftKey,view:t.view,charCode:t.charCode,keyCode:t.keyCode,which:t.which,...o};return new KeyboardEvent(e,n)}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBCore={})}(this,(function(e){"use strict";e.createFocusEvent=function(e,t,n){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,view:t.view,which:t.which,relatedTarget:t.relatedTarget,...n};return new FocusEvent(e,o)},e.createInputEvent=function(e,t,n){const o={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,isComposing:t.isComposing,view:t.view,which:t.which,data:t.data,dataTransfer:t.dataTransfer,inputType:t.inputType,targetRanges:"function"==typeof t.getTargetRanges()?t.getTargetRanges():[],...n};return new InputEvent(e,o)},e.createKeyboardEvent=function(e,t,n){const o={altKey:t.altKey,bubbles:t.bubbles,cancelable:t.cancelable,code:t.code,composed:t.composed,ctrlKey:t.ctrlKey,detail:t.detail,isComposing:t.isComposing,key:t.key,location:t.location,metaKey:t.metaKey,repeat:t.repeat,shiftKey:t.shiftKey,view:t.view,charCode:t.charCode,keyCode:t.keyCode,which:t.which,...n};return new KeyboardEvent(e,o)},e.isMobile=()=>/Mobi/i.test(window.navigator.userAgent),e.listenAndSilentEvent=function(e,t,n,o={}){document.addEventListener(t,(t=>{t.composedPath().includes(e)&&(t.stopPropagation(),t.stopImmediatePropagation(),n(t))}),{capture:!0,...o})}}));
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../lib/events.ts"],"sourcesContent":["/**\r\n * add type to event target for easier access to target\r\n */\r\nexport type EventTypeWithTarget<TEvent,TTarget> = TEvent & {\r\n  target: TTarget;\r\n};\r\n/**\r\n * create a keyboardEvent based on e value and replace them with initObj\r\n */\r\nexport function createKeyboardEvent(eventName:string,e:KeyboardEvent,initObj:KeyboardEventInit){\r\n  const initialObject: KeyboardEventInit = {\r\n    altKey:e.altKey,\r\n    bubbles:e.bubbles,\r\n    cancelable:e.cancelable,\r\n    code:e.code,\r\n    composed:e.composed,\r\n    ctrlKey:e.ctrlKey,\r\n    detail:e.detail,\r\n    isComposing:e.isComposing,\r\n    key:e.key,\r\n    location:e.location,\r\n    metaKey:e.metaKey,\r\n    repeat:e.repeat,\r\n    shiftKey:e.shiftKey,\r\n    view:e.view,\r\n    charCode:e.charCode,\r\n    keyCode:e.keyCode,\r\n    which:e.which,\r\n    ...initObj   \r\n  };\r\n  const event = new KeyboardEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n/**\r\n * create a keyboardEvent based on e value and replace them with initObj\r\n */\r\nexport function createInputEvent(eventName:string,e:InputEvent,initObj:InputEventInit){\r\n  const initialObject: InputEventInit = {\r\n    bubbles:e.bubbles,\r\n    cancelable:e.cancelable,\r\n    composed:e.composed,\r\n    detail:e.detail,\r\n    isComposing:e.isComposing,\r\n    view:e.view,\r\n    which:e.which,\r\n    data:e.data,\r\n    dataTransfer:e.dataTransfer,\r\n    inputType:e.inputType,\r\n    targetRanges: typeof e.getTargetRanges() == \"function\"?e.getTargetRanges():[],\r\n    ...initObj   \r\n  };\r\n  const event = new InputEvent(eventName, initialObject);\r\n  return event;\r\n}"],"names":["eventName","e","initObj","initialObject","bubbles","cancelable","composed","detail","isComposing","view","which","data","dataTransfer","inputType","targetRanges","getTargetRanges","InputEvent","altKey","code","ctrlKey","key","location","metaKey","repeat","shiftKey","charCode","keyCode","KeyboardEvent"],"mappings":"0QAoCiCA,EAAiBC,EAAaC,GAC7D,MAAMC,EAAgC,CACpCC,QAAQH,EAAEG,QACVC,WAAWJ,EAAEI,WACbC,SAASL,EAAEK,SACXC,OAAON,EAAEM,OACTC,YAAYP,EAAEO,YACdC,KAAKR,EAAEQ,KACPC,MAAMT,EAAES,MACRC,KAAKV,EAAEU,KACPC,aAAaX,EAAEW,aACfC,UAAUZ,EAAEY,UACZC,aAA4C,mBAAvBb,EAAEc,kBAAgCd,EAAEc,kBAAkB,MACxEb,GAGL,OADc,IAAIc,WAAWhB,EAAWG,EAE1C,iCA5CoCH,EAAiBC,EAAgBC,GACnE,MAAMC,EAAmC,CACvCc,OAAOhB,EAAEgB,OACTb,QAAQH,EAAEG,QACVC,WAAWJ,EAAEI,WACba,KAAKjB,EAAEiB,KACPZ,SAASL,EAAEK,SACXa,QAAQlB,EAAEkB,QACVZ,OAAON,EAAEM,OACTC,YAAYP,EAAEO,YACdY,IAAInB,EAAEmB,IACNC,SAASpB,EAAEoB,SACXC,QAAQrB,EAAEqB,QACVC,OAAOtB,EAAEsB,OACTC,SAASvB,EAAEuB,SACXf,KAAKR,EAAEQ,KACPgB,SAASxB,EAAEwB,SACXC,QAAQzB,EAAEyB,QACVhB,MAAMT,EAAES,SACLR,GAGL,OADc,IAAIyB,cAAc3B,EAAWG,EAE7C"}
+{"version":3,"file":"index.umd.js","sources":["../lib/events.ts","../lib/device-detection.ts"],"sourcesContent":["/**\r\n * add type to event target for easier access to target\r\n */\r\nexport type EventTypeWithTarget<TEvent, TTarget> = TEvent & {\r\n  target: TTarget;\r\n};\r\n/**\r\n * this function will stop event from propagate even in capturing phase and will call handler only if event target is the element\r\n */\r\nexport function listenAndSilentEvent<TEvent extends Event, TTarget>(element: TTarget, eventName: string, handler: (e:TEvent) => void, options: AddEventListenerOptions = {}) {\r\n  document.addEventListener(eventName, (e: TEvent) => {\r\n    if (e.composedPath().includes(element as unknown as EventTarget)) {\r\n      e.stopPropagation();\r\n      e.stopImmediatePropagation();\r\n      handler(e);\r\n    }\r\n  },{capture:true,...options});\r\n}\r\n/**\r\n * create a keyboardEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createKeyboardEvent(eventName: string, e: KeyboardEvent, initObj: KeyboardEventInit) {\r\n  const initialObject: KeyboardEventInit = {\r\n    altKey: e.altKey,\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    code: e.code,\r\n    composed: e.composed,\r\n    ctrlKey: e.ctrlKey,\r\n    detail: e.detail,\r\n    isComposing: e.isComposing,\r\n    key: e.key,\r\n    location: e.location,\r\n    metaKey: e.metaKey,\r\n    repeat: e.repeat,\r\n    shiftKey: e.shiftKey,\r\n    view: e.view,\r\n    charCode: e.charCode,\r\n    keyCode: e.keyCode,\r\n    which: e.which,\r\n    ...initObj\r\n  };\r\n  const event = new KeyboardEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n/**\r\n * create a InputEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createInputEvent(eventName: string, e: InputEvent, initObj: InputEventInit) {\r\n  const initialObject: InputEventInit = {\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    composed: e.composed,\r\n    detail: e.detail,\r\n    isComposing: e.isComposing,\r\n    view: e.view,\r\n    which: e.which,\r\n    data: e.data,\r\n    dataTransfer: e.dataTransfer,\r\n    inputType: e.inputType,\r\n    targetRanges: typeof e.getTargetRanges() == \"function\" ? e.getTargetRanges() : [],\r\n    ...initObj\r\n  };\r\n  const event = new InputEvent(eventName, initialObject);\r\n  return event;\r\n}\r\n\r\n/**\r\n * create a InputEvent based on `e` value and replace them with initObj\r\n */\r\nexport function createFocusEvent(eventName: string, e: FocusEvent, initObj: FocusEventInit) {\r\n  const initialObject: FocusEventInit = {\r\n    bubbles: e.bubbles,\r\n    cancelable: e.cancelable,\r\n    composed: e.composed,\r\n    detail: e.detail,\r\n    view: e.view,\r\n    which: e.which,\r\n    relatedTarget: e.relatedTarget,\r\n    ...initObj\r\n  };\r\n  const event = new FocusEvent(eventName, initialObject);\r\n  return event;\r\n}","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["eventName","e","initObj","initialObject","bubbles","cancelable","composed","detail","view","which","relatedTarget","FocusEvent","isComposing","data","dataTransfer","inputType","targetRanges","getTargetRanges","InputEvent","altKey","code","ctrlKey","key","location","metaKey","repeat","shiftKey","charCode","keyCode","KeyboardEvent","test","window","navigator","userAgent","element","handler","options","document","addEventListener","composedPath","includes","stopPropagation","stopImmediatePropagation","capture"],"mappings":"0QAsEiCA,EAAmBC,EAAeC,GACjE,MAAMC,EAAgC,CACpCC,QAASH,EAAEG,QACXC,WAAYJ,EAAEI,WACdC,SAAUL,EAAEK,SACZC,OAAQN,EAAEM,OACVC,KAAMP,EAAEO,KACRC,MAAOR,EAAEQ,MACTC,cAAeT,EAAES,iBACdR,GAGL,OADc,IAAIS,WAAWX,EAAWG,EAE1C,8BAnCiCH,EAAmBC,EAAeC,GACjE,MAAMC,EAAgC,CACpCC,QAASH,EAAEG,QACXC,WAAYJ,EAAEI,WACdC,SAAUL,EAAEK,SACZC,OAAQN,EAAEM,OACVK,YAAaX,EAAEW,YACfJ,KAAMP,EAAEO,KACRC,MAAOR,EAAEQ,MACTI,KAAMZ,EAAEY,KACRC,aAAcb,EAAEa,aAChBC,UAAWd,EAAEc,UACbC,aAA4C,mBAAvBf,EAAEgB,kBAAkChB,EAAEgB,kBAAoB,MAC5Ef,GAGL,OADc,IAAIgB,WAAWlB,EAAWG,EAE1C,iCA5CoCH,EAAmBC,EAAkBC,GACvE,MAAMC,EAAmC,CACvCgB,OAAQlB,EAAEkB,OACVf,QAASH,EAAEG,QACXC,WAAYJ,EAAEI,WACde,KAAMnB,EAAEmB,KACRd,SAAUL,EAAEK,SACZe,QAASpB,EAAEoB,QACXd,OAAQN,EAAEM,OACVK,YAAaX,EAAEW,YACfU,IAAKrB,EAAEqB,IACPC,SAAUtB,EAAEsB,SACZC,QAASvB,EAAEuB,QACXC,OAAQxB,EAAEwB,OACVC,SAAUzB,EAAEyB,SACZlB,KAAMP,EAAEO,KACRmB,SAAU1B,EAAE0B,SACZC,QAAS3B,EAAE2B,QACXnB,MAAOR,EAAEQ,SACNP,GAGL,OADc,IAAI2B,cAAc7B,EAAWG,EAE7C,aC5CwB,IACf,QAAQ2B,KAAKC,OAAOC,UAAUC,kCDQjC,SAA8DC,EAAkBlC,EAAmBmC,EAA6BC,EAAmC,CAAA,GACvKC,SAASC,iBAAiBtC,GAAYC,IAChCA,EAAEsC,eAAeC,SAASN,KAC5BjC,EAAEwC,kBACFxC,EAAEyC,2BACFP,EAAQlC,GACT,GACD,CAAC0C,SAAQ,KAAQP,GACrB"}

package/dist/web-component/jb-core/lib/device-detection.d.ts

@@ -0,0 +1 @@
+export declare const isMobile: () => boolean;

package/dist/web-component/jb-core/lib/events.d.ts

@@ -5,10 +5,18 @@ export type EventTypeWithTarget<TEvent, TTarget> = TEvent & {
     target: TTarget;
 };
 /**
- * create a keyboardEvent based on e value and replace them with initObj
+ * this function will stop event from propagate even in capturing phase and will call handler only if event target is the element
+ */
+export declare function listenAndSilentEvent<TEvent extends Event, TTarget>(element: TTarget, eventName: string, handler: (e: TEvent) => void, options?: AddEventListenerOptions): void;
+/**
+ * create a keyboardEvent based on `e` value and replace them with initObj
  */
 export declare function createKeyboardEvent(eventName: string, e: KeyboardEvent, initObj: KeyboardEventInit): KeyboardEvent;
 /**
- * create a keyboardEvent based on e value and replace them with initObj
+ * create a InputEvent based on `e` value and replace them with initObj
  */
 export declare function createInputEvent(eventName: string, e: InputEvent, initObj: InputEventInit): InputEvent;
+/**
+ * create a InputEvent based on `e` value and replace them with initObj
+ */
+export declare function createFocusEvent(eventName: string, e: FocusEvent, initObj: FocusEventInit): FocusEvent;

package/dist/web-component/jb-core/lib/index.d.ts

@@ -1 +1,2 @@
 export * from "./events.js";
+export * from "./device-detection.js";

package/lib/device-detection.ts

@@ -0,0 +1,3 @@
+export const isMobile = ()=>{
+  return /Mobi/i.test(window.navigator.userAgent);
+};

package/lib/events.ts

@@ -1,54 +1,84 @@
 /**
  * add type to event target for easier access to target
  */
-export type EventTypeWithTarget<TEvent,TTarget> = TEvent & {
+export type EventTypeWithTarget<TEvent, TTarget> = TEvent & {
   target: TTarget;
 };
 /**
- * create a keyboardEvent based on e value and replace them with initObj
+ * this function will stop event from propagate even in capturing phase and will call handler only if event target is the element
  */
-export function createKeyboardEvent(eventName:string,e:KeyboardEvent,initObj:KeyboardEventInit){
+export function listenAndSilentEvent<TEvent extends Event, TTarget>(element: TTarget, eventName: string, handler: (e:TEvent) => void, options: AddEventListenerOptions = {}) {
+  document.addEventListener(eventName, (e: TEvent) => {
+    if (e.composedPath().includes(element as unknown as EventTarget)) {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      handler(e);
+    }
+  },{capture:true,...options});
+}
+/**
+ * create a keyboardEvent based on `e` value and replace them with initObj
+ */
+export function createKeyboardEvent(eventName: string, e: KeyboardEvent, initObj: KeyboardEventInit) {
   const initialObject: KeyboardEventInit = {
-    altKey:e.altKey,
-    bubbles:e.bubbles,
-    cancelable:e.cancelable,
-    code:e.code,
-    composed:e.composed,
-    ctrlKey:e.ctrlKey,
-    detail:e.detail,
-    isComposing:e.isComposing,
-    key:e.key,
-    location:e.location,
-    metaKey:e.metaKey,
-    repeat:e.repeat,
-    shiftKey:e.shiftKey,
-    view:e.view,
-    charCode:e.charCode,
-    keyCode:e.keyCode,
-    which:e.which,
-    ...initObj   
+    altKey: e.altKey,
+    bubbles: e.bubbles,
+    cancelable: e.cancelable,
+    code: e.code,
+    composed: e.composed,
+    ctrlKey: e.ctrlKey,
+    detail: e.detail,
+    isComposing: e.isComposing,
+    key: e.key,
+    location: e.location,
+    metaKey: e.metaKey,
+    repeat: e.repeat,
+    shiftKey: e.shiftKey,
+    view: e.view,
+    charCode: e.charCode,
+    keyCode: e.keyCode,
+    which: e.which,
+    ...initObj
   };
   const event = new KeyboardEvent(eventName, initialObject);
   return event;
 }
 /**
- * create a keyboardEvent based on e value and replace them with initObj
+ * create a InputEvent based on `e` value and replace them with initObj
  */
-export function createInputEvent(eventName:string,e:InputEvent,initObj:InputEventInit){
+export function createInputEvent(eventName: string, e: InputEvent, initObj: InputEventInit) {
   const initialObject: InputEventInit = {
-    bubbles:e.bubbles,
-    cancelable:e.cancelable,
-    composed:e.composed,
-    detail:e.detail,
-    isComposing:e.isComposing,
-    view:e.view,
-    which:e.which,
-    data:e.data,
-    dataTransfer:e.dataTransfer,
-    inputType:e.inputType,
-    targetRanges: typeof e.getTargetRanges() == "function"?e.getTargetRanges():[],
-    ...initObj   
+    bubbles: e.bubbles,
+    cancelable: e.cancelable,
+    composed: e.composed,
+    detail: e.detail,
+    isComposing: e.isComposing,
+    view: e.view,
+    which: e.which,
+    data: e.data,
+    dataTransfer: e.dataTransfer,
+    inputType: e.inputType,
+    targetRanges: typeof e.getTargetRanges() == "function" ? e.getTargetRanges() : [],
+    ...initObj
   };
   const event = new InputEvent(eventName, initialObject);
   return event;
+}
+
+/**
+ * create a InputEvent based on `e` value and replace them with initObj
+ */
+export function createFocusEvent(eventName: string, e: FocusEvent, initObj: FocusEventInit) {
+  const initialObject: FocusEventInit = {
+    bubbles: e.bubbles,
+    cancelable: e.cancelable,
+    composed: e.composed,
+    detail: e.detail,
+    view: e.view,
+    which: e.which,
+    relatedTarget: e.relatedTarget,
+    ...initObj
+  };
+  const event = new FocusEvent(eventName, initialObject);
+  return event;
 }

package/lib/index.ts

@@ -1 +1,2 @@
-export * from "./events.js";
+export * from "./events.js";
+export * from "./device-detection.js";

package/package.json

@@ -10,10 +10,11 @@
     "jb",
     "jb-core",
     "web-component tools",
+    "event",
     "react component",
     "event"
   ],
-  "version": "0.0.3",
+  "version": "0.1.0",
   "bugs": "https://github.com/javadbat/jb-core/issues",
   "license": "MIT",
   "files": [

package/react/dist/index.cjs.js

@@ -12,12 +12,12 @@ function useEvent(ref, event, handler, passive = false) {
         const dom = ref.current;
         if (dom) {
             // initiate the event handler
-            dom.addEventListener(event, internalHandler, passive);
+            dom.addEventListener(event, internalHandler, { passive, capture: false });
         }
         // this will clean up the event every time the component is re-rendered
         return function cleanup() {
             if (dom) {
-                dom.removeEventListener(event, internalHandler, passive);
+                dom.removeEventListener(event, internalHandler, { passive, capture: false });
             }
         };
     }, [ref, event, handler, passive]);

package/react/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../lib/use-event.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\r\n\r\nexport function useEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler?:(e:TEvent)=>void, passive = false) {\r\n  const internalHandler = useCallback((e:TEvent)=>{\r\n    if(ref.current && typeof handler == \"function\"){\r\n      handler(e);\r\n    }\r\n  },[ref,handler]);\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, internalHandler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, internalHandler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}"],"names":["useCallback","useEffect"],"mappings":";;;;AAEM,SAAU,QAAQ,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;AAC/I,IAAA,MAAM,eAAe,GAAGA,iBAAW,CAAC,CAAC,CAAQ,KAAG;QAC9C,IAAG,GAAG,CAAC,OAAO,IAAI,OAAO,OAAO,IAAI,UAAU,EAAC;YAC7C,OAAO,CAAC,CAAC,CAAC,CAAC;AACZ,SAAA;AACH,KAAC,EAAC,CAAC,GAAG,EAAC,OAAO,CAAC,CAAC,CAAC;IACjBC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;AACxB,QAAA,IAAI,GAAG,EAAE;;YAEP,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;AACvD,SAAA;;AAED,QAAA,OAAO,SAAS,OAAO,GAAA;AACrB,YAAA,IAAG,GAAG,EAAC;gBACL,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;AAC1D,aAAA;AACH,SAAC,CAAC;KACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;AACjC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../lib/use-event.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\r\n\r\nexport function useEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler?:(e:TEvent)=>void, passive = false) {\r\n  const internalHandler = useCallback((e:TEvent)=>{\r\n    if(ref.current && typeof handler == \"function\"){\r\n      handler(e);\r\n    }\r\n  },[ref,handler]);\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, internalHandler, { passive, capture:false }); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, internalHandler, {passive, capture:false});\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}"],"names":["useCallback","useEffect"],"mappings":";;;;AAEM,SAAU,QAAQ,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;AAC/I,IAAA,MAAM,eAAe,GAAGA,iBAAW,CAAC,CAAC,CAAQ,KAAG;QAC9C,IAAG,GAAG,CAAC,OAAO,IAAI,OAAO,OAAO,IAAI,UAAU,EAAC;YAC7C,OAAO,CAAC,CAAC,CAAC,CAAC;AACZ,SAAA;AACH,KAAC,EAAC,CAAC,GAAG,EAAC,OAAO,CAAC,CAAC,CAAC;IACjBC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;AACxB,QAAA,IAAI,GAAG,EAAE;;AAEP,YAAA,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC,KAAK,EAAE,CAAC,CAAC;AAC1E,SAAA;;AAED,QAAA,OAAO,SAAS,OAAO,GAAA;AACrB,YAAA,IAAG,GAAG,EAAC;AACL,gBAAA,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC,KAAK,EAAC,CAAC,CAAC;AAC3E,aAAA;AACH,SAAC,CAAC;KACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;AACjC;;;;"}

package/react/dist/index.js

@@ -10,12 +10,12 @@ function useEvent(ref, event, handler, passive = false) {
         const dom = ref.current;
         if (dom) {
             // initiate the event handler
-            dom.addEventListener(event, internalHandler, passive);
+            dom.addEventListener(event, internalHandler, { passive, capture: false });
         }
         // this will clean up the event every time the component is re-rendered
         return function cleanup() {
             if (dom) {
-                dom.removeEventListener(event, internalHandler, passive);
+                dom.removeEventListener(event, internalHandler, { passive, capture: false });
             }
         };
     }, [ref, event, handler, passive]);

package/react/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../lib/use-event.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\r\n\r\nexport function useEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler?:(e:TEvent)=>void, passive = false) {\r\n  const internalHandler = useCallback((e:TEvent)=>{\r\n    if(ref.current && typeof handler == \"function\"){\r\n      handler(e);\r\n    }\r\n  },[ref,handler]);\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, internalHandler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, internalHandler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}"],"names":[],"mappings":";;AAEM,SAAU,QAAQ,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;AAC/I,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,CAAQ,KAAG;QAC9C,IAAG,GAAG,CAAC,OAAO,IAAI,OAAO,OAAO,IAAI,UAAU,EAAC;YAC7C,OAAO,CAAC,CAAC,CAAC,CAAC;AACZ,SAAA;AACH,KAAC,EAAC,CAAC,GAAG,EAAC,OAAO,CAAC,CAAC,CAAC;IACjB,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;AACxB,QAAA,IAAI,GAAG,EAAE;;YAEP,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;AACvD,SAAA;;AAED,QAAA,OAAO,SAAS,OAAO,GAAA;AACrB,YAAA,IAAG,GAAG,EAAC;gBACL,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;AAC1D,aAAA;AACH,SAAC,CAAC;KACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;AACjC;;;;"}
+{"version":3,"file":"index.js","sources":["../lib/use-event.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\r\n\r\nexport function useEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler?:(e:TEvent)=>void, passive = false) {\r\n  const internalHandler = useCallback((e:TEvent)=>{\r\n    if(ref.current && typeof handler == \"function\"){\r\n      handler(e);\r\n    }\r\n  },[ref,handler]);\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, internalHandler, { passive, capture:false }); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, internalHandler, {passive, capture:false});\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}"],"names":[],"mappings":";;AAEM,SAAU,QAAQ,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;AAC/I,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,CAAQ,KAAG;QAC9C,IAAG,GAAG,CAAC,OAAO,IAAI,OAAO,OAAO,IAAI,UAAU,EAAC;YAC7C,OAAO,CAAC,CAAC,CAAC,CAAC;AACZ,SAAA;AACH,KAAC,EAAC,CAAC,GAAG,EAAC,OAAO,CAAC,CAAC,CAAC;IACjB,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;AACxB,QAAA,IAAI,GAAG,EAAE;;AAEP,YAAA,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC,KAAK,EAAE,CAAC,CAAC;AAC1E,SAAA;;AAED,QAAA,OAAO,SAAS,OAAO,GAAA;AACrB,YAAA,IAAG,GAAG,EAAC;AACL,gBAAA,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC,KAAK,EAAC,CAAC,CAAC;AAC3E,aAAA;AACH,SAAC,CAAC;KACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;AACjC;;;;"}

package/react/dist/index.umd.js

@@ -14,12 +14,12 @@
           const dom = ref.current;
           if (dom) {
               // initiate the event handler
-              dom.addEventListener(event, internalHandler, passive);
+              dom.addEventListener(event, internalHandler, { passive, capture: false });
           }
           // this will clean up the event every time the component is re-rendered
           return function cleanup() {
               if (dom) {
-                  dom.removeEventListener(event, internalHandler, passive);
+                  dom.removeEventListener(event, internalHandler, { passive, capture: false });
               }
           };
       }, [ref, event, handler, passive]);

package/react/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../lib/use-event.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\r\n\r\nexport function useEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler?:(e:TEvent)=>void, passive = false) {\r\n  const internalHandler = useCallback((e:TEvent)=>{\r\n    if(ref.current && typeof handler == \"function\"){\r\n      handler(e);\r\n    }\r\n  },[ref,handler]);\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, internalHandler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, internalHandler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}"],"names":["useCallback","useEffect"],"mappings":";;;;;;EAEM,SAAU,QAAQ,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;EAC/I,IAAA,MAAM,eAAe,GAAGA,iBAAW,CAAC,CAAC,CAAQ,KAAG;UAC9C,IAAG,GAAG,CAAC,OAAO,IAAI,OAAO,OAAO,IAAI,UAAU,EAAC;cAC7C,OAAO,CAAC,CAAC,CAAC,CAAC;EACZ,SAAA;EACH,KAAC,EAAC,CAAC,GAAG,EAAC,OAAO,CAAC,CAAC,CAAC;MACjBC,eAAS,CAAC,MAAK;EACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;EACxB,QAAA,IAAI,GAAG,EAAE;;cAEP,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;EACvD,SAAA;;EAED,QAAA,OAAO,SAAS,OAAO,GAAA;EACrB,YAAA,IAAG,GAAG,EAAC;kBACL,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;EAC1D,aAAA;EACH,SAAC,CAAC;OACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;EACjC;;;;;;;;"}
+{"version":3,"file":"index.umd.js","sources":["../lib/use-event.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\r\n\r\nexport function useEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler?:(e:TEvent)=>void, passive = false) {\r\n  const internalHandler = useCallback((e:TEvent)=>{\r\n    if(ref.current && typeof handler == \"function\"){\r\n      handler(e);\r\n    }\r\n  },[ref,handler]);\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, internalHandler, { passive, capture:false }); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, internalHandler, {passive, capture:false});\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}"],"names":["useCallback","useEffect"],"mappings":";;;;;;EAEM,SAAU,QAAQ,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;EAC/I,IAAA,MAAM,eAAe,GAAGA,iBAAW,CAAC,CAAC,CAAQ,KAAG;UAC9C,IAAG,GAAG,CAAC,OAAO,IAAI,OAAO,OAAO,IAAI,UAAU,EAAC;cAC7C,OAAO,CAAC,CAAC,CAAC,CAAC;EACZ,SAAA;EACH,KAAC,EAAC,CAAC,GAAG,EAAC,OAAO,CAAC,CAAC,CAAC;MACjBC,eAAS,CAAC,MAAK;EACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;EACxB,QAAA,IAAI,GAAG,EAAE;;EAEP,YAAA,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC,KAAK,EAAE,CAAC,CAAC;EAC1E,SAAA;;EAED,QAAA,OAAO,SAAS,OAAO,GAAA;EACrB,YAAA,IAAG,GAAG,EAAC;EACL,gBAAA,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC,KAAK,EAAC,CAAC,CAAC;EAC3E,aAAA;EACH,SAAC,CAAC;OACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;EACjC;;;;;;;;"}

package/react/lib/use-event.ts

@@ -10,12 +10,12 @@ export function useEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(r
     const dom = ref.current;
     if (dom) {
       // initiate the event handler
-      dom.addEventListener(event, internalHandler, passive); 
+      dom.addEventListener(event, internalHandler, { passive, capture:false }); 
     }
     // this will clean up the event every time the component is re-rendered
     return function cleanup() {
       if(dom){
-        dom.removeEventListener(event, internalHandler, passive);
+        dom.removeEventListener(event, internalHandler, {passive, capture:false});
       }
     };
   },[ref,event,handler,passive]);