react-modal-global - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/index.d.ts

@@ -36,2 +36,12 @@ import EventEmitter from 'eventemitter3';
 interface ModalWindow<P = unknown> {
+    /**
+     * Unique id of the modal window.
+     * If two modals have the same id, they will be treated as the same modal.
+     *
+     * This is usually used in `key` prop for React components.
+     *
+     * @note
+     * This is not the same as `params.id` because `id` is unique for each modal window.
+     */
+    readonly id: string;
     component: ModalComponent<ModalParams & P>;
@@ -199,3 +209,4 @@ params: ModalParams & P;
 declare function useModalContext<T>(): ModalWindow<T extends ModalComponent<infer Props> ? Props : T>;
+declare function useModalState(controller?: ModalController): ModalState;
 
-export { Modal, ModalContainer, ModalController, useModalContext };
+export { Modal, ModalContainer, ModalController, useModalContext, useModalState };

dist/index.ts

@@ -1,12 +0,13 @@
-'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var EventEmitter=require("eventemitter3"),jsxRuntime=require("react/jsx-runtime"),react=require("react");function _interopDefaultLegacy(a){return a&&"object"===typeof a&&"default"in a?a:{"default":a}}var EventEmitter__default=_interopDefaultLegacy(EventEmitter);
+'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var EventEmitter=require("eventemitter3"),uuid=require("uuid"),jsxRuntime=require("react/jsx-runtime"),react=require("react");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 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(c,d){d=b()(c,d);c=d instanceof Function?d.name===c?d.toString():d.name:d;return c})}
-function stopPropagation(a){return({target:b,currentTarget:c})=>{b instanceof Element&&c instanceof Element&&b!==c||(null===a||void 0===a?void 0:a())}}var _ModalController_isOpen;let DEFAULT_PARAMS={id:0,closable:!0,weak:!1,fork:!1};
-class ModalController{constructor(){_ModalController_isOpen.set(this,!1);this.windows=new Set;this.events=new EventEmitter__default["default"]}set isOpen(a){__classPrivateFieldSet(this,_ModalController_isOpen,a,"f")}get isOpen(){return __classPrivateFieldGet(this,_ModalController_isOpen,"f")}open(a,...[b]){let c=()=>{},d=new Promise(f=>c=f);b=Object.assign(Object.assign({},DEFAULT_PARAMS),b);let e={component:a,params:b,close:()=>{this.remove(e);c()},closed:!1,focused:!0};this.add(e);return Object.assign(Object.assign({},
-e),{then(f,h){return d.then(f,h)}})}replace(a,...[b]){let c=[...this.windows].at(-1);null!=c&&this.windows.delete(c);return this.open(a,b)}add(a){!1===this.isOpen&&0<this.windows.size&&this.windows.clear();this.isOpen=!0;this.windows.add(a);this.events.emit("add",a)}remove(a){if(this.windows.has(a)){if(1===this.windows.size&&(this.isOpen=!1,!a.params.weak)){this.events.emit("update");return}this.windows.delete(a);this.events.emit("remove",a)}}findByComponent(a,b){return[...this.windows].filter(c=>
-c.component!==a?!1:null!=b?serialize(b)===serialize(c.params):!0)}findById(a){return[...this.windows].filter(b=>b.params.id===a)}closeByComponent(a,b){this.findByComponent(a,b).forEach(c=>c.close())}closeById(a){this.findById(a).forEach(b=>b.close())}closeAll(){this.isOpen=!1;this.events.emit("update")}observe(a){let b=()=>{const c={isOpen:this.isOpen,windows:[...this.windows]};a(c)};b();this.events.on("add",b);this.events.on("remove",b);this.events.on("update",b);return()=>{this.events.off("add",
-b);this.events.off("remove",b);this.events.off("update",b)}}}_ModalController_isOpen=new WeakMap;let Modal=new ModalController,modalContext=react.createContext(null);function useModalContext(){let a=react.useContext(modalContext);if(!a)throw Error("ModalError: useModalContext must be used within a modalContext");return a}let DEFAULT_STATE={isOpen:!1,windows:[]};function useModalState(a=Modal){let [b,c]=react.useState(DEFAULT_STATE);react.useEffect(()=>a.observe(c),[a]);return 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(c,d){d=b()(c,d);c=d instanceof Function?d.name===c||0===d.name.length?d.toString():d.name:d;return c})}function serializeWindow(a,b){return serialize({component:a,params:b})}
+function stopPropagation(a){return({target:b,currentTarget:c})=>{b instanceof Element&&c instanceof Element&&b!==c||(null===a||void 0===a?void 0:a())}}var _ModalController_isOpen;let MODAL_UUID_NAMESPACE="48c89dcc-92d8-5d98-9842-81954e142ee2",DEFAULT_PARAMS={id:0,closable:!0,weak:!1,fork:!1};
+class ModalController{constructor(){_ModalController_isOpen.set(this,!1);this.windows=new Set;this.events=new EventEmitter__default["default"]}set isOpen(a){__classPrivateFieldSet(this,_ModalController_isOpen,a,"f")}get isOpen(){return __classPrivateFieldGet(this,_ModalController_isOpen,"f")}open(a,...[b]){let c=()=>{},d=new Promise(f=>c=f);b=Object.assign(Object.assign({},DEFAULT_PARAMS),b);let e={id:uuid.v5(serializeWindow(a,b),MODAL_UUID_NAMESPACE),component:a,params:b,close:()=>{this.remove(e);
+c()},closed:!1,focused:!0};this.add(e);return Object.assign(Object.assign({},e),{then(f,h){return d.then(f,h)}})}replace(a,...[b]){let c=[...this.windows].at(-1);null!=c&&this.windows.delete(c);return this.open(a,b)}add(a){!1===this.isOpen&&0<this.windows.size&&this.windows.clear();this.isOpen=!0;this.windows.add(a);this.events.emit("add",a)}remove(a){if(this.windows.has(a)){if(1===this.windows.size&&(this.isOpen=!1,!a.params.weak)){this.events.emit("update");return}this.windows.delete(a);this.events.emit("remove",
+a)}}findByComponent(a,b){return[...this.windows].filter(c=>c.component!==a?!1:null!=b?serialize(b)===serialize(c.params):!0)}findById(a){return[...this.windows].filter(b=>b.params.id===a)}closeByComponent(a,b){this.findByComponent(a,b).forEach(c=>c.close())}closeById(a){this.findById(a).forEach(b=>b.close())}closeAll(){this.isOpen=!1;this.events.emit("update")}observe(a){let b=()=>{const c={isOpen:this.isOpen,windows:[...this.windows]};a(c)};b();this.events.on("add",b);this.events.on("remove",b);
+this.events.on("update",b);return()=>{this.events.off("add",b);this.events.off("remove",b);this.events.off("update",b)}}}_ModalController_isOpen=new WeakMap;let Modal=new ModalController,modalContext=react.createContext(null);function useModalContext(){let a=react.useContext(modalContext);if(!a)throw Error("ModalError: useModalContext must be used within a modalContext");return a}let DEFAULT_STATE={isOpen:!1,windows:[]};
+function useModalState(a=Modal){let [b,c]=react.useState(DEFAULT_STATE);react.useEffect(()=>a.observe(c),[a]);return b}
 function ModalContainer(a){var b,c;let d=useModalState(a.controller),e=a.className||"modal";a=a.template||react.Fragment;let f=d.windows.at(-1),h=(null===(b=null===f||void 0===f?void 0:f.params)||void 0===b?0:b.closable)?stopPropagation(f.close):void 0;b=f?Object.assign(Object.assign({},f),{closed:!d.isOpen,focused:!0}):null;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",Object.assign({className:classWithModifiers(e,d.isOpen&&"active"),"aria-modal":!0,"aria-hidden":!d.isOpen},
 {children:jsxRuntime.jsx("div",Object.assign({className:e+"__container",onClick:h},{children:jsxRuntime.jsx(modalContext.Provider,Object.assign({value:b},{children:jsxRuntime.jsx(a,{children:(null===f||void 0===f?void 0:f.component)&&react.createElement(f.component,Object.assign({},f.params,{key:null===(c=null===f||void 0===f?void 0:f.params)||void 0===c?void 0:c.id}))})}))}))})),[...d.windows].reverse().filter(g=>g.params.fork).map(g=>jsxRuntime.jsx("div",Object.assign({className:classWithModifiers(e,
-"active"),"aria-modal":!0},{children:jsxRuntime.jsx("div",Object.assign({className:e+"__container",onClick:g.params.closable?stopPropagation(g.close):void 0},{children:jsxRuntime.jsx(modalContext.Provider,Object.assign({value:g},{children:jsxRuntime.jsx(g.component,Object.assign({},g.params))}))}))}),g.params.id))]})}exports.Modal=Modal;exports.ModalContainer=ModalContainer;exports.ModalController=ModalController;exports.useModalContext=useModalContext
+"active"),"aria-modal":!0},{children:jsxRuntime.jsx("div",Object.assign({className:e+"__container",onClick:g.params.closable?stopPropagation(g.close):void 0},{children:jsxRuntime.jsx(modalContext.Provider,Object.assign({value:g},{children:jsxRuntime.jsx(g.component,Object.assign({},g.params))}))}))}),g.params.id))]})}exports.Modal=Modal;exports.ModalContainer=ModalContainer;exports.ModalController=ModalController;exports.useModalContext=useModalContext;exports.useModalState=useModalState

package.json

 {
   "name": "react-modal-global",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Highly reusable React Modal that can be run from useEffect.",
@@ -15,3 +15,5 @@ "main": "dist/index.ts",
   "dependencies": {
-    "eventemitter3": "^5.0.0"
+    "eventemitter3": "^5.0.0",
+    "uuid": "^9.0.0",
+    "type-fest": "^3.5.5"
   },
@@ -25,2 +27,3 @@ "devDependencies": {
     "@types/react": "^18.0.15",
+    "@types/uuid": "^9.0.1",
     "eslint": "^8.6.0",
@@ -35,3 +38,2 @@ "eslint-plugin-react": "7.30.1",
     "tslib": "^2.4.0",
-    "type-fest": "^3.5.5",
     "typescript": "^4.9.5"
@@ -38,0 +40,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26282

increased by2.9%

Lines of code

231

increased by5.96%

Worsened metrics

Dependency count

4

increased by100%

Dependency changes

• + Addedtype-fest@^3.5.5

• + Addeduuid@^9.0.0

• + Addedtype-fest@3.13.1(transitive)

• + Addeduuid@9.0.1(transitive)