react-modal-global - npm Package Compare versions

Comparing version 1.2.0-rc2 to 1.2.0-rc3

dist/index.d.ts

 import EventEmitter from 'eventemitter3';
 import { ReactElement, ReactNode, ComponentLifecycle } from 'react';
-import { HasRequiredKeys } from 'type-fest';
+import { HasRequiredKeys, SetOptional } from 'type-fest';
 
@@ -194,4 +194,10 @@ type ModalComponent<P = unknown> = ((props: P) => ReactElement | null) | (() => ReactElement | null);
     controller?: ModalController;
+    onClosed?(): void;
     children: ReactNode;
 }
+/**
+ * Renders given children as a modal.
+ *
+ * Can render
+ */
 declare function ModalView(props: ModalViewProps): null;
@@ -201,6 +207,25 @@ interface ModalOpenProps<ComponentProps> extends Partial<ModalParams> {
     componentProps: ComponentProps;
+    onClosed?(): void;
     controller?: ModalController;
 }
-declare function ModalOpen<ComponentProps>(props: ModalOpenProps<ComponentProps>): null;
+/**
+ * Opens a modal with given component and props.
+ *
+ * Similar to `ModalView`, but it opens a modal instead of rendering it as a child.
+ * It can be closed by component and given id.
+ */
+declare function ModalOpen<ComponentProps>(props: keyof ComponentProps extends never ? SetOptional<ModalOpenProps<ComponentProps>, "componentProps"> : ModalOpenProps<ComponentProps>): null;
+interface ModalGroupProps {
+    /**
+     * Called when a modal from this group is closed.
+     */
+    onClosed?(): void;
+    /**
+     * Called when all modals from this group are closed.
+     */
+    onAllClosed?(): void;
+    children: ReactElement<ModalViewProps | ModalOpenProps<unknown>>[];
+}
+declare function ModalGroup(props: ModalGroupProps): JSX.Element;
 
-export { Modal, ModalContainer, ModalController, ModalOpen, ModalView, useModalContext };
+export { Modal, ModalContainer, ModalController, ModalGroup, ModalOpen, ModalView, useModalContext };

dist/index.ts

@@ -13,3 +13,5 @@ 'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var EventEmitter=require("eventemitter3"),jsxRuntime=require("react/jsx-runtime"),react=require("react"),_=require("lodash"),reactUse=require("react-use");function _interopDefaultLegacy(a){return a&&"object"===typeof a&&"default"in a?a:{"default":a}}var EventEmitter__default=_interopDefaultLegacy(EventEmitter),___default=_interopDefaultLegacy(_);
 jsxRuntime.jsx("div",Object.assign({className:classWithModifiers(g,"active"),"aria-modal":!0},{children:jsxRuntime.jsx("div",Object.assign({className:g+"__container",onClick:h.params.closable?stopPropagation(h.close):void 0},{children:jsxRuntime.jsx(modalContext.Provider,Object.assign({value:h},{children:jsxRuntime.jsx(h.component,Object.assign({},h.params))}))}))}),h.params.id))]})}
-function useModalContext(){let a=react.useContext(modalContext);if(!a)throw Error("ModalError: useModalContext must be used within a modalContext");return a}function ModalView(a){let b=react.useId();react.useEffect(()=>{(a.controller||Modal).open(function(){return jsxRuntime.jsx(jsxRuntime.Fragment,{children:a.children})},{id:b})},[a.children,a.controller]);reactUse.useUnmount(()=>{(a.controller||Modal).closeById(b)});return null}
-function ModalOpen(a){react.useEffect(()=>{let b=a.controller||Modal,c=Object.assign(Object.assign({},a.componentProps),___default["default"].omit(a,"component","componentProps","controller")),d=b.open(a.component,c);return()=>{d.close()}},[a.component,serialize(a.componentProps),a.controller]);return null}exports.Modal=Modal;exports.ModalContainer=ModalContainer;exports.ModalController=ModalController;exports.ModalOpen=ModalOpen;exports.ModalView=ModalView;exports.useModalContext=useModalContext
+function useModalContext(){let a=react.useContext(modalContext);if(!a)throw Error("ModalError: useModalContext must be used within a modalContext");return a}function ModalView(a){let b=react.useId();react.useEffect(()=>{let c=(a.controller||Modal).open(function(){return jsxRuntime.jsx(jsxRuntime.Fragment,{children:a.children})},{id:b});c.then(a.onClosed);return()=>{setTimeout(()=>c.close())}},[a.children,a.controller]);reactUse.useUnmount(()=>{(a.controller||Modal).closeById(b)});return null}
+function ModalOpen(a){react.useEffect(()=>{let b=a.controller||Modal,c=Object.assign(Object.assign({},a.componentProps),___default["default"].omit(a,"component","componentProps","controller")),d=b.open(a.component,c);d.then(a.onClosed);return()=>{setTimeout(()=>d.close())}},[a.component,serialize(a.componentProps),a.controller]);return null}
+function ModalGroup(a){let [b,{inc:c,reset:d}]=reactUse.useCounter(0);react.useEffect(()=>{for(let e of a.children){let g=e.props.onClosed;e.props.onClosed=()=>{var k,f;c();null===(k=a.onClosed)||void 0===k?void 0:k.call(a);b===a.children.length-1&&(null===(f=a.onAllClosed)||void 0===f?void 0:f.call(a));null===g||void 0===g?void 0:g()}}return()=>d()},[a.children]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:a.children})}exports.Modal=Modal;exports.ModalContainer=ModalContainer;
+exports.ModalController=ModalController;exports.ModalGroup=ModalGroup;exports.ModalOpen=ModalOpen;exports.ModalView=ModalView;exports.useModalContext=useModalContext

package.json

 {
   "name": "react-modal-global",
-  "version": "1.2.0-rc2",
+  "version": "1.2.0-rc3",
   "description": "Highly reusable React Modal that can be run from useEffect.",
@@ -5,0 +5,0 @@ "main": "dist/index.ts",

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

27962

increased by5.07%

Lines of code

253

increased by12.44%

No dependency changes