react-modal-global - npm Package Compare versions

Comparing version 2.3.2 to 2.3.3

dist/index.d.ts

@@ -307,2 +307,4 @@ import EventEmitter from 'eventemitter3';
     onClose?(): void;
+    onUserClose?(): void;
+    onUnmountClose?(): void;
     params?: Partial<ModalParams>;
@@ -309,0 +311,0 @@ }

dist/index.ts

@@ -1,20 +0,17 @@
-'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var EventEmitter=require("eventemitter3"),jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactDom=require("react-dom");function _interopDefaultLegacy(a){return a&&"object"===typeof a&&"default"in a?a:{"default":a}}var EventEmitter__default=_interopDefaultLegacy(EventEmitter);
-function __classPrivateFieldGet(a,b,c,d){if("a"===c&&!d)throw new TypeError("Private accessor was defined without a getter");if("function"===typeof b?a!==b||!d:!b.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===c?d:"a"===c?d.call(a):d?d.value:b.get(a)}
-function __classPrivateFieldSet(a,b,c,d,e){if("m"===d)throw new TypeError("Private method is not writable");if("a"===d&&!e)throw new TypeError("Private accessor was defined without a setter");if("function"===typeof b?a!==b||!e:!b.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===d?e.call(a,c):e?e.value=c:b.set(a,c),c}
-"function"===typeof SuppressedError?SuppressedError:function(a,b,c){c=Error(c);return c.name="SuppressedError",c.error=a,c.suppressed=b,c};class Deffered{constructor(){this.promise=new Promise((a,b)=>{this.resolve=a;this.reject=b})}}function classWithModifiers(a,...b){b=b.filter(Boolean);if(!b.length)return a;b=b.map(c=>a+"--"+c);return a+" "+b.join(" ")}
-function serialize(a){function b(){let c=new WeakSet;return(d,e)=>{if("object"===typeof e&&null!==e){if(c.has(e))return;c.add(e)}return e}}return null==a?String(a):JSON.stringify(a,function(){let c=b();return(d,e)=>{e=e instanceof Function?e.name===d||0===e.name.length?e.toString():e.name:e;return c(d,e)}}())}function stopPropagation(a){return({target:b,currentTarget:c})=>{b instanceof Element&&c instanceof Element&&b!==c||(null===a||void 0===a?void 0:a())}}
-function cyrb53(a,b=0){let c=3735928559^b;b^=1103547991;for(let d=0,e;d<a.length;d++)e=a.charCodeAt(d),c=Math.imul(c^e,2654435761),b=Math.imul(b^e,1597334677);c=Math.imul(c^c>>>16,2246822507);c^=Math.imul(b^b>>>13,3266489909);b=Math.imul(b^b>>>16,2246822507);b^=Math.imul(c^c>>>13,3266489909);return 4294967296*(2097151&b)+(c>>>0)}let MODAL_SEED=Date.now(),DEFAULT_PARAMS={id:-1,closable:!0,keepMounted:!1,layer:0,label:"Content is unknown. Bad guy didn't set a label.",weak:!1,fork:!1};
-class ModalWindow{constructor(a,b){this.close=()=>{this.closed||(this.closed=!0,this.deffered.resolve(),this.events.emit("close"))};this.serialized=serialize({component:a,params:b});this.id=cyrb53(this.serialized,MODAL_SEED);this.component=a;this.params=Object.assign(Object.assign({},DEFAULT_PARAMS),b);this.closed=!1;this.events=new EventEmitter__default["default"];this.deffered=new Deffered;this.events.emit("open")}then(a,b){return this.deffered.promise.then(a,b)}on(a,b){this.events.on(a,b);return()=>
-{this.events.off(a,b)}}}var _ModalController_active,_ModalController_snapshot;
-class ModalController{constructor(a){this.config=a;this.windows=new Set;this.events=new EventEmitter__default["default"];_ModalController_active.set(this,!1);_ModalController_snapshot.set(this,{active:this.active,windows:[]});this.subscribe(()=>this.refreshSnapshot())}set active(a){__classPrivateFieldSet(this,_ModalController_active,a,"f")}get active(){return __classPrivateFieldGet(this,_ModalController_active,"f")}hide(){!1!==this.active&&(this.active=!1,this.events.emit("update"))}show(){!0!==this.active&&
-(this.active=!0,this.events.emit("update"))}open(a,...[b]){var c;let d=new ModalWindow(a,Object.assign(Object.assign({},null===(c=this.config)||void 0===c?void 0:c.defaultParams),b));d.on("close",()=>this.close(d));if(this.active&&(a=[...this.windows].at(-1),(null===a||void 0===a?void 0:a.id)===d.id))return a;0<this.windows.size&&!this.active&&this.windows.clear();this.windows.add(d);this.events.emit("add",d);this.show();return d}openNamed(a,...[b]){a=this.getNamedComponent(a);return this.open(a,
-b)}replace(a,...[b]){let c=[...this.windows].at(-1);null!=c&&this.windows.delete(c);return this.open(a,b)}replaceNamed(a,...[b]){a=this.getNamedComponent(a);return this.replace(a,b)}close(a){0!==this.windows.size&&this.windows.has(a)&&(1===this.windows.size?this.hide():(this.windows.delete(a),this.events.emit("remove",a)))}closeById(a){[...this.windows].filter(b=>b.params.id===a).forEach(b=>this.close(b))}closeByComponent(a,b){[...this.windows].filter(c=>c.component!==a||null!=b&&c.params.params!==
-b?!1:!0).forEach(c=>this.close(c))}closeByName(a){a=this.getNamedComponent(a);this.closeByComponent(a)}closeAll(){this.windows.forEach(a=>this.close(a))}getNamedComponent(a){let b={config:this.config,componentName:a};if(null==this.config)throw Error("ModalController `config` is not defined.",{cause:b});if(null==this.config.components)throw Error("ModalController `config.components` is not defined.",{cause:b});return this.config.components[a]}on(a,b){this.events.on(a,b);return()=>{this.events.off(a,
-b)}}subscribe(a){this.events.on("add",a);this.events.on("remove",a);this.events.on("update",a);return()=>{this.events.off("add",a);this.events.off("remove",a);this.events.off("update",a)}}getSnapshot(){return __classPrivateFieldGet(this,_ModalController_snapshot,"f")}refreshSnapshot(){__classPrivateFieldSet(this,_ModalController_snapshot,{active:this.active,windows:[...this.windows]},"f")}}_ModalController_active=new WeakMap;_ModalController_snapshot=new WeakMap;let modalContext=react.createContext(null);
-function useModalWindow(){let a=react.useContext(modalContext);if(!a)throw Error(`ModalError: ${useModalWindow.name} must be used within a modal context.`);return a}function useModalSnapshot(a){return react.useSyncExternalStore(a.subscribe.bind(a),a.getSnapshot.bind(a))}
-function ModalContainer(a){var b;let {active:c,windows:d}=useModalSnapshot(a.controller),e=null!==(b=a.className)&&void 0!==b?b:"modal";a=d.reduceRight((g,f)=>{null==g[f.params.layer]&&(g[f.params.layer]=f);return g},[]);return jsxRuntime.jsx("div",{className:classWithModifiers(e,c&&"active"),"aria-modal":!0,"aria-hidden":!c,children:a.map(g=>jsxRuntime.jsx("div",{className:classWithModifiers(e+"__container"),onClick:stopPropagation(function(){g.params.closable&&g.close()}),children:jsxRuntime.jsx(modalContext.Provider,
-{value:g,children:react.createElement(g.component,Object.assign({},g.params,{key:g.id}))})},g.id))})}
-function DrawerLayout(a){let b=useModalWindow();return jsxRuntime.jsx("div",{className:"drawer-layout",style:{"--drawer-width":a.width},children:jsxRuntime.jsxs("div",{className:"drawer-layout__container",children:[b.params.closable&&jsxRuntime.jsx("button",{className:"drawer-layout__close",type:"button",onClick:b.close,children:"\u2573"}),jsxRuntime.jsx("div",{className:"drawer-layout__inner",children:a.children})]})})}
-function PopupLayout(a){let b=useModalWindow();return jsxRuntime.jsx("div",{className:"popup-layout",style:{"--popup-width":a.width},children:jsxRuntime.jsxs("div",{className:"popup-layout__container",children:[b.params.closable&&jsxRuntime.jsx("button",{className:"popup-layout__close",type:"button",onClick:b.close,children:"\u2573"}),jsxRuntime.jsx("div",{className:"popup-layout__inner",children:a.children})]})})}
-function ModalPortal(a){function b(f){f=null===f||void 0===f?void 0:f.parentElement;null!=f&&g(f)}let c=react.useId(),d=react.useRef(new ModalWindow(()=>null,{})),[e,g]=react.useState(null);react.useEffect(()=>{let f=a.controller.open(()=>jsxRuntime.jsx("div",{style:{display:"none"},ref:b}),Object.assign(Object.assign({},a.params),{id:c}));d.current=f;if(a.onClose)f.on("close",a.onClose);return()=>f.close()},[a.controller,c]);return null==e?null:jsxRuntime.jsx(modalContext.Provider,{value:d.current,
-children:reactDom.createPortal(a.children,e,c)})}exports.DrawerLayout=DrawerLayout;exports.ModalContainer=ModalContainer;exports.ModalController=ModalController;exports.ModalPortal=ModalPortal;exports.ModalWindow=ModalWindow;exports.PopupLayout=PopupLayout;exports.useModalSnapshot=useModalSnapshot;exports.useModalWindow=useModalWindow
+import{createPortal}from'react-dom';import{createContext,useContext,useSyncExternalStore,createElement,useId,useRef,useState,useEffect}from'react';import{jsx,jsxs}from'react/jsx-runtime';import EventEmitter from'eventemitter3';function h(a,b,c,d){if("a"===c&&!d)throw new TypeError("Private accessor was defined without a getter");if("function"===typeof b?a!==b||!d:!b.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===c?d:"a"===c?d.call(a):d?d.value:b.get(a)}
+function k(a,b,c,d,e){if("m"===d)throw new TypeError("Private method is not writable");if("a"===d&&!e)throw new TypeError("Private accessor was defined without a setter");if("function"===typeof b?a!==b||!e:!b.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===d?e.call(a,c):e?e.value=c:b.set(a,c),c}"function"===typeof SuppressedError?SuppressedError:function(a,b,c){c=Error(c);return c.name="SuppressedError",c.error=a,c.suppressed=b,c};
+class l{constructor(){this.promise=new Promise((a,b)=>{this.resolve=a;this.reject=b})}}function m(a,...b){b=b.filter(Boolean);if(!b.length)return a;b=b.map(c=>a+"--"+c);return a+" "+b.join(" ")}function n(a){function b(){let c=new WeakSet;return(d,e)=>{if("object"===typeof e&&null!==e){if(c.has(e))return;c.add(e)}return e}}return null==a?String(a):JSON.stringify(a,function(){let c=b();return(d,e)=>{e=e instanceof Function?e.name===d||0===e.name.length?e.toString():e.name:e;return c(d,e)}}())}
+function r(a){return({target:b,currentTarget:c})=>{b instanceof Element&&c instanceof Element&&b!==c||(null===a||void 0===a?void 0:a())}}function t(a,b=0){let c=3735928559^b;b^=1103547991;for(let d=0,e;d<a.length;d++)e=a.charCodeAt(d),c=Math.imul(c^e,2654435761),b=Math.imul(b^e,1597334677);c=Math.imul(c^c>>>16,2246822507);c^=Math.imul(b^b>>>13,3266489909);b=Math.imul(b^b>>>16,2246822507);b^=Math.imul(c^c>>>13,3266489909);return 4294967296*(2097151&b)+(c>>>0)}
+let u=Date.now(),v={id:-1,closable:!0,keepMounted:!1,layer:0,label:"Content is unknown. Bad guy didn't set a label.",weak:!1,fork:!1};
+class w{constructor(a,b){this.close=()=>{this.closed||(this.closed=!0,this.deffered.resolve(),this.events.emit("close"))};this.serialized=n({component:a,params:b});this.id=t(this.serialized,u);this.component=a;this.params=Object.assign(Object.assign({},v),b);this.closed=!1;this.events=new EventEmitter;this.deffered=new l;this.events.emit("open")}then(a,b){return this.deffered.promise.then(a,b)}on(a,b){this.events.on(a,b);return()=>{this.events.off(a,b)}}}var x,y;
+class z{constructor(a){this.config=a;this.windows=new Set;this.events=new EventEmitter;x.set(this,!1);y.set(this,{active:this.active,windows:[]});this.subscribe(()=>this.refreshSnapshot())}set active(a){k(this,x,a,"f")}get active(){return h(this,x,"f")}hide(){!1!==this.active&&(this.active=!1,this.events.emit("update"))}show(){!0!==this.active&&(this.active=!0,this.events.emit("update"))}open(a,...[b]){var c;let d=new w(a,Object.assign(Object.assign({},null===(c=this.config)||void 0===c?void 0:c.defaultParams),
+b));d.on("close",()=>this.close(d));if(this.active&&(a=[...this.windows].at(-1),(null===a||void 0===a?void 0:a.id)===d.id))return a;0<this.windows.size&&!this.active&&this.windows.clear();this.windows.add(d);this.events.emit("add",d);this.show();return d}openNamed(a,...[b]){a=this.getNamedComponent(a);return this.open(a,b)}replace(a,...[b]){let c=[...this.windows].at(-1);null!=c&&this.windows.delete(c);return this.open(a,b)}replaceNamed(a,...[b]){a=this.getNamedComponent(a);return this.replace(a,
+b)}close(a){0!==this.windows.size&&this.windows.has(a)&&(1===this.windows.size?this.hide():(this.windows.delete(a),this.events.emit("remove",a)))}closeById(a){[...this.windows].filter(b=>b.params.id===a).forEach(b=>this.close(b))}closeByComponent(a,b){[...this.windows].filter(c=>c.component!==a||null!=b&&c.params.params!==b?!1:!0).forEach(c=>this.close(c))}closeByName(a){a=this.getNamedComponent(a);this.closeByComponent(a)}closeAll(){this.windows.forEach(a=>this.close(a))}getNamedComponent(a){let b=
+{config:this.config,componentName:a};if(null==this.config)throw Error("ModalController `config` is not defined.",{cause:b});if(null==this.config.components)throw Error("ModalController `config.components` is not defined.",{cause:b});return this.config.components[a]}on(a,b){this.events.on(a,b);return()=>{this.events.off(a,b)}}subscribe(a){this.events.on("add",a);this.events.on("remove",a);this.events.on("update",a);return()=>{this.events.off("add",a);this.events.off("remove",a);this.events.off("update",
+a)}}getSnapshot(){return h(this,y,"f")}refreshSnapshot(){k(this,y,{active:this.active,windows:[...this.windows]},"f")}}x=new WeakMap;y=new WeakMap;let A=createContext(null);function B(){let a=useContext(A);if(!a)throw Error(`ModalError: ${B.name} must be used within a modal context.`);return a}function C(a){return useSyncExternalStore(a.subscribe.bind(a),a.getSnapshot.bind(a))}
+function DrawerLayout(a){let b=B();return jsx("div",{className:"drawer-layout",style:{"--drawer-width":a.width},children:jsxs("div",{className:"drawer-layout__container",children:[b.params.closable&&jsx("button",{className:"drawer-layout__close",type:"button",onClick:b.close,children:"\u2573"}),jsx("div",{className:"drawer-layout__inner",children:a.children})]})})};
+function ModalContainer(a){var b;let {active:c,windows:d}=C(a.controller),e=null!==(b=a.className)&&void 0!==b?b:"modal";a=d.reduceRight((g,f)=>{null==g[f.params.layer]&&(g[f.params.layer]=f);return g},[]);return jsx("div",{className:m(e,c&&"active"),"aria-modal":!0,"aria-hidden":!c,children:a.map(g=>jsx("div",{className:m(e+"__container"),onClick:r(function(){g.params.closable&&g.close()}),children:jsx(A.Provider,{value:g,children:createElement(g.component,Object.assign({},g.params,{key:g.id}))})},
+g.id))})};
+function ModalPortal(a){function b(f){f=null===f||void 0===f?void 0:f.parentElement;null!=f&&g(f)}let c=useId(),d=useRef(new w(()=>null,{})),[e,g]=useState(null);useEffect(()=>{let f=a.controller.open(()=>jsx("div",{style:{display:"none"},ref:b}),Object.assign(Object.assign({},a.params),{id:c}));d.current=f;if(a.onClose)f.on("close",a.onClose);let p=a.onUserClose&&f.on("close",a.onUserClose);return()=>{var q;null===p||void 0===p?void 0:p();null===(q=a.onUnmountClose)||void 0===q?void 0:q.call(a);
+f.close()}},[a.controller,c]);return null==e?null:jsx(A.Provider,{value:d.current,children:createPortal(a.children,e,c)})};function PopupLayout(a){let b=B();return jsx("div",{className:"popup-layout",style:{"--popup-width":a.width},children:jsxs("div",{className:"popup-layout__container",children:[b.params.closable&&jsx("button",{className:"popup-layout__close",type:"button",onClick:b.close,children:"\u2573"}),jsx("div",{className:"popup-layout__inner",children:a.children})]})})};
+export{DrawerLayout,ModalContainer,z as ModalController,ModalPortal,w as ModalWindow,PopupLayout,C as useModalSnapshot,B as useModalWindow}

package.json

 {
   "name": "react-modal-global",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Highly reusable React Modal that can be run from useEffect.",
@@ -27,8 +27,10 @@ "main": "dist/index.ts",
     "@rollup/plugin-typescript": "^11.1.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.4.0",
     "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "eslint": "^8.6.0",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -41,3 +43,3 @@ "eslint-plugin-simple-import-sort": "^10.0.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.2.2"
   },
@@ -44,0 +46,0 @@ "scripts": {

No alert changes

Worsened metrics

Total package byte prevSize

36519

decreased by-2.45%

Dev dependency count

18

increased by12.5%

Lines of code

340

decreased by-1.73%

No dependency changes