react-modal-global - npm Package Compare versions

Comparing version 2.3.3 to 2.3.4

dist/index.d.ts

@@ -1,6 +0,14 @@
-import EventEmitter from 'eventemitter3';
 import { JSXElementConstructor, ExoticComponent, ComponentProps, ReactNode } from 'react';
 import { HasRequiredKeys } from 'type-fest';
 import { IsAny } from 'type-fest/source/is-any';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type EventEmitterListener = (...args: never[]) => void;
+declare class EventEmitter<Events extends Record<EventName, EventEmitterListener>, EventName extends keyof Events = keyof Events> {
+    private callbacks;
+    on<Event extends keyof Events>(event: Event, callback: Events[Event]): void;
+    off<Event extends keyof Events>(event: Event, callback: Events[Event]): void;
+    emit<Event extends keyof Events>(event: Event, ...args: Parameters<Events[Event]>): void;
+}
+
 interface ExternalStore<T> {
@@ -36,19 +44,2 @@ subscribe(callback: () => void): () => void;
     /**
-     * Use `id` parameter with unique value instead.
-     * @example
-     * Modal.open(Component, { id: 1 })
-     * @example
-     * Modal.open(Component, { id: 2 })
-     * @example
-     * Modal.open(Component, { id: Date.now() })
-     *
-     * @deprecated
-    */
-    weak: boolean;
-    /**
-     * Use `layer` instead.
-     * @deprecated
-    */
-    fork: boolean;
-    /**
      * Forks the modal window to a new layer.
@@ -87,4 +78,4 @@ *
 interface ModalWindowEvents {
-    open: [];
-    close: [];
+    open(): void;
+    close(): void;
 }
@@ -149,3 +140,3 @@ declare class ModalWindow<CustomParams = unknown> {
      */
-    on<K extends keyof ModalWindowEvents>(event: K, listener: (...args: ModalWindowEvents[K]) => void): () => void;
+    on<K extends keyof ModalWindowEvents>(event: K, listener: ModalWindowEvents[K]): () => void;
 }
@@ -160,5 +151,5 @@ /**
 interface ModalControllerEvents {
-    add: [ModalWindowAny];
-    remove: [ModalWindowAny];
-    update: [];
+    add(modalWindow: ModalWindowAny): void;
+    remove(modalWindow: ModalWindowAny): void;
+    update(): void;
 }
@@ -245,3 +236,3 @@ interface ModalControllerConfig<Components extends ModalNamedComponents = ModalNamedComponents> {
      */
-    on<T extends keyof ModalControllerEvents>(event: T, listener: (...args: ModalControllerEvents[T]) => void): () => void;
+    on<T extends keyof ModalControllerEvents>(event: T, listener: ModalControllerEvents[T]): () => void;
     /**
@@ -276,3 +267,3 @@ * Used for container component to get the current state.
 }
-declare function ModalContainer(props: ModalContainerProps): JSX.Element;
+declare function ModalContainer(props: ModalContainerProps): react_jsx_runtime.JSX.Element;
 
@@ -294,14 +285,2 @@ /**
 
-interface DrawerLayoutProps {
-    width?: string;
-    children: ReactNode;
-}
-declare function DrawerLayout(props: DrawerLayoutProps): JSX.Element;
-
-interface PopupLayoutProps {
-    width?: string;
-    children: ReactNode;
-}
-declare function PopupLayout(props: PopupLayoutProps): JSX.Element;
-
 interface ModalPortalProps {
@@ -323,4 +302,4 @@ /**
  */
-declare function ModalPortal(props: ModalPortalProps): JSX.Element | null;
+declare function ModalPortal(props: ModalPortalProps): react_jsx_runtime.JSX.Element | null;
 
-export { DrawerLayout, ModalContainer, ModalController, ModalPortal, ModalWindow, PopupLayout, useModalSnapshot, useModalWindow };
+export { ModalContainer, ModalController, ModalPortal, ModalWindow, useModalSnapshot, useModalWindow };

dist/index.ts

@@ -1,17 +0,16 @@
-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)}
+import{createPortal}from'react-dom';import{createContext,useContext,useSyncExternalStore,createElement,useId,useRef,useState,useEffect}from'react';import{jsx}from'react/jsx-runtime';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),
+class l{constructor(){this.callbacks={}}on(a,b){var c,d,e;null!==(c=(e=this.callbacks)[a])&&void 0!==c?c:e[a]=new Set;null===(d=this.callbacks[a])||void 0===d?void 0:d.add(b)}off(a,b){var c;null===(c=this.callbacks[a])||void 0===c?void 0:c.delete(b)}emit(a,...b){a=this.callbacks[a];if(null!=a)for(let c of a)c(...b)}}class m{constructor(){this.promise=new Promise((a,b)=>{this.resolve=a;this.reject=b})}}
+function q(a,...b){b=b.filter(Boolean);if(!b.length)return a;b=b.map(c=>a+"--"+c);return a+" "+b.join(" ")}function r(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 t(a){return({target:b,currentTarget:c})=>{b instanceof Element&&c instanceof Element&&b!==c||(null===a||void 0===a?void 0:a())}}function u(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 v=Date.now(),w={id:-1,closable:!0,keepMounted:!1,layer:0,label:"Content is unknown. Bad guy didn't set a label."};
+class x{constructor(a,b){this.close=()=>{this.closed||(this.closed=!0,this.deffered.resolve(),this.events.emit("close"))};this.serialized=r({component:a,params:b});this.id=u(this.serialized,v);this.component=a;this.params=Object.assign(Object.assign({},w),b);this.closed=!1;this.events=new l;this.deffered=new m;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 y,z;
+class A{constructor(a){this.config=a;this.windows=new Set;this.events=new l;y.set(this,!1);z.set(this,{active:this.active,windows:[]});this.subscribe(()=>this.refreshSnapshot())}set active(a){k(this,y,a,"f")}get active(){return h(this,y,"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 x(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}))})},
+a)}}getSnapshot(){return h(this,z,"f")}refreshSnapshot(){k(this,z,{active:this.active,windows:[...this.windows]},"f")}}y=new WeakMap;z=new WeakMap;let B=createContext(null);function C(){let a=useContext(B);if(!a)throw Error(`ModalError: ${C.name} must be used within a modal context.`);return a}function D(a){return useSyncExternalStore(a.subscribe.bind(a),a.getSnapshot.bind(a))}
+function ModalContainer(a){var b;let {active:c,windows:d}=D(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:q(e,c&&"active"),"aria-modal":!0,"aria-hidden":!c,children:a.map(g=>jsx("div",{className:q(e+"__container"),onClick:t(function(){g.params.closable&&g.close()}),children:jsx(B.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}
+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 x(()=>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 n=a.onUserClose&&f.on("close",a.onUserClose);return()=>{var p;null===n||void 0===n?void 0:n();null===(p=a.onUnmountClose)||void 0===p?void 0:p.call(a);
+f.close()}},[a.controller,c]);return null==e?null:jsx(B.Provider,{value:d.current,children:createPortal(a.children,e,c)})};export{ModalContainer,A as ModalController,ModalPortal,x as ModalWindow,D as useModalSnapshot,C as useModalWindow}

package.json

 {
   "name": "react-modal-global",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Highly reusable React Modal that can be run from useEffect.",
@@ -21,3 +21,2 @@ "main": "dist/index.ts",
   "dependencies": {
-    "eventemitter3": "^5.0.0",
     "type-fest": "^4.0.0"
@@ -40,3 +39,3 @@ },
     "rollup": "^2.77.0",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-dts": "^6.1.0",
     "sass": "^1.53.0",
@@ -43,0 +42,0 @@ "tslib": "^2.4.0",

README.md

@@ -40,3 +40,3 @@ <h1 align="center">📦 React Modal Global</h1>
 
-I was insipered a lot by packages like [react-toastify](https://npmjs.com/package/react-toastify) and [react-modal](https://npmjs.com/package/react-modal).
+I was inspired by packages like [react-toastify](https://npmjs.com/package/react-toastify) and [react-modal](https://npmjs.com/package/react-modal).
 
@@ -46,3 +46,3 @@ ## Playgrounds
 | --- | --- |
-| Example of layouts usage | [![Edit react-modal-global](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-modal-global-examples-47yoil)        |
+| Example of layouts usage | [![Edit react-modal-global](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-modal-global)        |
 | Example of usage with ChakraUI (by [@laurensnl](https://github.com/laurensnl)) | [![Edit react-modal-global](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakraui-nextjs-react-modal-global-h0g21f) |
@@ -81,3 +81,3 @@
       {/* It's better if `ModalContainer` goes after all other components */}
-      <ModalContainer controller={Modal} /> 
+      <ModalContainer controller={Modal} />
     </>
@@ -385,3 +385,3 @@ )
 This approach lacks of flexibility, but it's easier to use.
-There also may be problems 
+There also may be problems
 - styling, because you can't style a modal component itself, you can only style a container
@@ -388,0 +388,0 @@ - multiple languages, because you can't apply its own translation to each modal window separately, you will have to pass it to a method, which is not convenient

No alert changes

Improved metrics

Dependency count

3

decreased by-25%

Worsened metrics

Total package byte prevSize

33888

decreased by-7.2%

Number of package files

6

decreased by-14.29%

Lines of code

318

decreased by-6.47%

Dependency changes

• - Removedeventemitter3@^5.0.0

• - Removedeventemitter3@5.0.1(transitive)