piral-modals 1.0.0-pre.2296 → 1.0.0

package/lib/create.js

@@ -1,59 +1,64 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createModalsApi = void 0;
-var tslib_1 = require("tslib");
-var actions = require("./actions");
-var piral_core_1 = require("piral-core");
-var default_1 = require("./default");
+const actions = require("./actions");
+const piral_core_1 = require("piral-core");
+const default_1 = require("./default");
+const Modals_1 = require("./Modals");
 function getModalDialogs(dialogs) {
-    var modals = {};
-    for (var _i = 0, dialogs_1 = dialogs; _i < dialogs_1.length; _i++) {
-        var _a = dialogs_1[_i], name_1 = _a.name, component = _a.component, defaults = _a.defaults;
-        modals["global-" + name_1] = {
+    const modals = {};
+    for (const { name, component, defaults, layout = {} } of dialogs) {
+        modals[`global-${name}`] = {
             pilet: undefined,
-            name: name_1,
-            component: component,
-            defaults: defaults,
+            name,
+            component,
+            defaults,
+            layout,
         };
     }
     return modals;
 }
+function withModals(modals) {
+    return (state) => (Object.assign(Object.assign({}, state), { components: Object.assign({ ModalsHost: default_1.DefaultHost, ModalsDialog: default_1.DefaultDialog }, state.components), registry: Object.assign(Object.assign({}, state.registry), { modals }), modals: [] }));
+}
 /**
  * Creates new Pilet API extensions for support modal dialogs.
  */
-function createModalsApi(config) {
-    if (config === void 0) { config = {}; }
-    var _a = config.dialogs, dialogs = _a === void 0 ? [] : _a;
-    return function (context) {
+function createModalsApi(config = {}) {
+    const { dialogs = [], selectId = (name) => `${name}-${~~(Math.random() * 10000)}` } = config;
+    return (context) => {
         context.defineActions(actions);
-        context.dispatch(function (state) { return (tslib_1.__assign(tslib_1.__assign({}, state), { components: tslib_1.__assign({ ModalsHost: default_1.DefaultHost, ModalsDialog: default_1.DefaultDialog }, state.components), registry: tslib_1.__assign(tslib_1.__assign({}, state.registry), { modals: getModalDialogs(dialogs) }), modals: [] })); });
-        return function (api, target) {
-            var pilet = target.name;
+        context.dispatch((0, piral_core_1.withAll)(withModals(getModalDialogs(dialogs)), (0, piral_core_1.withRootExtension)('piral-modals', Modals_1.Modals)));
+        return (api, target) => {
+            const pilet = target.name;
             return {
-                showModal: function (name, options) {
-                    var dialog = {
-                        name: piral_core_1.buildName(pilet, name),
-                        alternative: name,
-                        options: options,
-                        close: function () {
-                            setTimeout(function () { return context.closeModal(dialog); }, 0);
+                showModal(simpleName, options) {
+                    const name = (0, piral_core_1.buildName)(pilet, simpleName);
+                    const dialog = {
+                        id: selectId(name),
+                        name,
+                        alternative: simpleName,
+                        options,
+                        close() {
+                            context.closeModal(dialog);
                         },
                     };
                     context.openModal(dialog);
                     return dialog.close;
                 },
-                registerModal: function (name, arg, defaults) {
-                    var id = piral_core_1.buildName(pilet, name);
+                registerModal(name, arg, defaults, layout = {}) {
+                    const id = (0, piral_core_1.buildName)(pilet, name);
                     context.registerModal(id, {
-                        pilet: pilet,
-                        name: name,
-                        component: piral_core_1.withApi(context, arg, api, 'modal'),
-                        defaults: defaults,
+                        pilet,
+                        name,
+                        component: (0, piral_core_1.withApi)(context, arg, api, 'modal'),
+                        defaults,
+                        layout,
                     });
-                    return function () { return api.unregisterModal(name); };
+                    return () => api.unregisterModal(name);
                 },
-                unregisterModal: function (name) {
-                    var id = piral_core_1.buildName(pilet, name);
+                unregisterModal(name) {
+                    const id = (0, piral_core_1.buildName)(pilet, name);
                     context.unregisterModal(id);
                 },
             };

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;;AAAA,mCAAqC;AAErC,yCAAmE;AACnE,qCAAuD;AA4BvD,SAAS,eAAe,CAAC,OAAkC;IACzD,IAAM,MAAM,GAA4B,EAAE,CAAC;IAE3C,KAA4C,UAAO,EAAP,mBAAO,EAAP,qBAAO,EAAP,IAAO,EAAE;QAA1C,IAAA,kBAA6B,EAA3B,MAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;QACpC,MAAM,CAAC,YAAU,MAAM,CAAC,GAAG;YACzB,KAAK,EAAE,SAAS;YAChB,IAAI,QAAA;YACJ,SAAS,WAAA;YACT,QAAQ,UAAA;SACT,CAAC;KACH;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;GAEG;AACH,SAAgB,eAAe,CAAC,MAAyB;IAAzB,uBAAA,EAAA,WAAyB;IAC/C,IAAA,KAAiB,MAAM,QAAX,EAAZ,OAAO,mBAAG,EAAE,KAAA,CAAY;IAEhC,OAAO,UAAC,OAAO;QACb,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uCACvB,KAAK,KACR,UAAU,qBACR,UAAU,EAAE,qBAAW,EACvB,YAAY,EAAE,uBAAa,IACxB,KAAK,CAAC,UAAU,GAErB,QAAQ,wCACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,KAElC,MAAM,EAAE,EAAE,IACV,EAZ0B,CAY1B,CAAC,CAAC;QAEJ,OAAO,UAAC,GAAG,EAAE,MAAM;YACjB,IAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;YAE1B,OAAO;gBACL,SAAS,YAAC,IAAI,EAAE,OAAO;oBACrB,IAAM,MAAM,GAAG;wBACb,IAAI,EAAE,sBAAS,CAAC,KAAK,EAAE,IAAI,CAAC;wBAC5B,WAAW,EAAE,IAAI;wBACjB,OAAO,SAAA;wBACP,KAAK;4BACH,UAAU,CAAC,cAAM,OAAA,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAA1B,CAA0B,EAAE,CAAC,CAAC,CAAC;wBAClD,CAAC;qBACF,CAAC;oBACF,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;oBAC1B,OAAO,MAAM,CAAC,KAAK,CAAC;gBACtB,CAAC;gBACD,aAAa,YAAC,IAAI,EAAE,GAAG,EAAE,QAAQ;oBAC/B,IAAM,EAAE,GAAG,sBAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,aAAa,CAAC,EAAE,EAAE;wBACxB,KAAK,OAAA;wBACL,IAAI,MAAA;wBACJ,SAAS,EAAE,oBAAO,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC;wBAC9C,QAAQ,UAAA;qBACT,CAAC,CAAC;oBACH,OAAO,cAAM,OAAA,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,EAAzB,CAAyB,CAAC;gBACzC,CAAC;gBACD,eAAe,YAAC,IAAI;oBAClB,IAAM,EAAE,GAAG,sBAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;gBAC9B,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AArDD,0CAqDC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"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"}

package/lib/default.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultDialog = exports.DefaultHost = void 0;
-var React = require("react");
-var piral_core_1 = require("piral-core");
-exports.DefaultHost = function (props) { return (React.createElement("div", { className: "piral-modals-host", key: "default_modals" }, props.open && React.createElement("div", { className: "piral-modals-overlay" }, props.children))); };
-exports.DefaultDialog = function (props) { return piral_core_1.defaultRender(props.children); };
+const React = require("react");
+const piral_core_1 = require("piral-core");
+const DefaultHost = (props) => (React.createElement("div", { className: "piral-modals-host" }, props.open && React.createElement("div", { className: "piral-modals-overlay" }, props.children)));
+exports.DefaultHost = DefaultHost;
+const DefaultDialog = (props) => (0, piral_core_1.defaultRender)(props.children);
+exports.DefaultDialog = DefaultDialog;
 //# sourceMappingURL=default.js.map

package/lib/default.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,yCAA2C;AAG9B,QAAA,WAAW,GAA8B,UAAC,KAAK,IAAK,OAAA,CAC/D,6BAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAC,gBAAgB,IACpD,KAAK,CAAC,IAAI,IAAI,6BAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACvE,CACP,EAJgE,CAIhE,CAAC;AAEW,QAAA,aAAa,GAAgC,UAAC,KAAK,IAAK,OAAA,0BAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,EAA7B,CAA6B,CAAC"}
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,2CAA2C;AAGpC,MAAM,WAAW,GAA8B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC/D,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,KAAK,CAAC,IAAI,IAAI,6BAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACvE,CACP,CAAC;AAJW,QAAA,WAAW,eAItB;AAEK,MAAM,aAAa,GAAgC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,0BAAa,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAAtF,QAAA,aAAa,iBAAyE"}

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./create"), exports);
 tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./Modals"), exports);

package/lib/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { Dict, WrappedComponent, BaseComponentProps, BaseRegistration, Disposable, AnyComponent, RegistrationDisposer } from 'piral-core';
+import type { ComponentType, ReactNode } from 'react';
+import type { Dict, WrappedComponent, BaseComponentProps, BaseRegistration, Disposable, AnyComponent, RegistrationDisposer } from 'piral-core';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletModalsApi {
     }
@@ -61,8 +61,29 @@ export interface ModalsHostProps {
      * Callback to invoke closing the modal dialog.
      */
     close(): void;
+    /**
+     * The dialogs to display.
+     */
+    children?: ReactNode;
 }
 export interface ModalsDialogProps extends OpenModalDialog {
+    /**
+     * The layout options given for the current dialog.
+     */
+    layout: ModalLayoutOptions;
+    /**
+     * The provided default options.
+     */
+    defaults: any;
+    /**
+     * The content of the dialog to display.
+     */
+    children?: ReactNode;
+}
+/**
+ * The options provided for the dialog layout.
+ */
+export interface ModalLayoutOptions {
 }
 /**
  * The error used when a registered modal dialog crashed.
@@ -80,8 +101,16 @@ export interface ModalErrorInfoProps {
      * Callback for closing the modal programmatically.
      */
     onClose(): void;
+    /**
+     * The name of the pilet emitting the error.
+     */
+    pilet?: string;
 }
 export interface OpenModalDialog {
+    /**
+     * Gets the ID of the modal to open. For tracking its state.
+     */
+    id: string;
     /**
      * Specifies the fully qualified name of the dialog to show.
      */
@@ -113,6 +142,7 @@ export interface ModalRegistration extends BaseRegistration {
     name: string;
     component: WrappedComponent<ModalComponentProps<any>>;
     defaults: any;
+    layout: ModalLayoutOptions;
 }
 export interface BaseModalOptions {
 }
@@ -120,8 +150,8 @@ export interface PiralCustomModalsMap {
 }
 export interface PiralModalsMap extends PiralCustomModalsMap {
 }
-export declare type ModalOptions<T> = T extends keyof PiralModalsMap ? PiralModalsMap[T] & BaseModalOptions : T extends string ? BaseModalOptions : T;
-export declare type ModalComponentProps<T> = BaseComponentProps & BareModalComponentProps<ModalOptions<T>>;
+export type ModalOptions<T> = T extends keyof PiralModalsMap ? PiralModalsMap[T] & BaseModalOptions : T extends string ? BaseModalOptions : T;
+export type ModalComponentProps<T> = BaseComponentProps & BareModalComponentProps<ModalOptions<T>>;
 export interface PiletModalsApi {
     /**
      * Shows a modal dialog with the given name.
@@ -137,8 +167,9 @@ export interface PiletModalsApi {
      * @param name The name of the modal to register.
      * @param Component The component to render the page.
      * @param defaults Optionally, sets the default values for the inserted options.
+     * @param layout Optionally, sets the layout options for the dialog wrapper.
      */
-    registerModal<T>(name: T extends string ? T : string, Component: AnyComponent<ModalComponentProps<T>>, defaults?: ModalOptions<T>): RegistrationDisposer;
+    registerModal<T>(name: T extends string ? T : string, Component: AnyComponent<ModalComponentProps<T>>, defaults?: ModalOptions<T>, layout?: ModalLayoutOptions): RegistrationDisposer;
     /**
      * Unregisters a modal by its name.
      * @param name The name that was previously registered.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-modals",
-  "version": "1.0.0-pre.2296",
+  "version": "1.0.0",
   "description": "Plugin for the display of modal dialogs in Piral.",
   "keywords": [
     "piral",
@@ -20,11 +20,29 @@
   "module": "esm/index.js",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    },
+    "./esm/*": {
+      "import": "./esm/*"
+    },
+    "./lib/*": {
+      "require": "./lib/*"
+    },
+    "./_/*": {
+      "import": "./esm/*.js",
+      "require": "./lib/*.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
     "esm",
     "lib",
-    "src"
+    "src",
+    "piral-modals.min.js"
   ],
   "repository": {
     "type": "git",
@@ -34,17 +52,22 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
-    "build": "yarn build:commonjs && yarn build:esnext",
+    "cleanup": "rimraf esm lib piral-modals.min.js",
+    "build": "yarn build:bundle && yarn build:commonjs && yarn build:esnext",
+    "build:bundle": "esbuild src/index.ts --outfile=piral-modals.min.js --bundle --external:piral-core --external:react --minify --global-name=piralModals",
     "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
     "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-modals.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2296"
+    "@types/react": "^18.0.0",
+    "piral-core": "^1.0.0",
+    "react": "^18.0.0"
   },
   "peerDependencies": {
-    "piral-core": "0.13.x"
+    "piral-core": "0.14.x || 0.15.x",
+    "react": ">=16.8.0"
   },
-  "gitHead": "8dc47ff93be1eefcc3e226a1e7dd4d58615b4e0c"
+  "gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
 }

package/piral-modals.min.js

@@ -0,0 +1 @@
+var piralModals=(()=>{var N=Object.create;var y=Object.defineProperty,$=Object.defineProperties,k=Object.getOwnPropertyDescriptor,E=Object.getOwnPropertyDescriptors,K=Object.getOwnPropertyNames,G=Object.getOwnPropertySymbols,L=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var O=(o,t,a)=>t in o?y(o,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):o[t]=a,e=(o,t)=>{for(var a in t||(t={}))H.call(t,a)&&O(o,a,t[a]);if(G)for(var a of G(t))T.call(t,a)&&O(o,a,t[a]);return o},i=(o,t)=>$(o,E(t)),S=o=>y(o,"__esModule",{value:!0});var g=(o=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(o,{get:(t,a)=>(typeof require!="undefined"?require:t)[a]}):o)(function(o){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+o+'" is not supported')});var v=(o,t)=>{S(o);for(var a in t)y(o,a,{get:t[a],enumerable:!0})},j=(o,t,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of K(t))!H.call(o,l)&&l!=="default"&&y(o,l,{get:()=>t[l],enumerable:!(a=k(t,l))||a.enumerable});return o},M=o=>j(S(y(o!=null?N(L(o)):{},"default",o&&o.__esModule&&"default"in o?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o);var Z={};v(Z,{Modals:()=>h,PiralModalsDialog:()=>b,PiralModalsHost:()=>R,createModalsApi:()=>Y});var P={};v(P,{closeModal:()=>z,openModal:()=>q,registerModal:()=>J,unregisterModal:()=>Q});var p=M(g("piral-core"));function q(o,t){o.dispatch(a=>i(e({},a),{modals:(0,p.prependItem)(a.modals,t)}))}function z(o,t){o.dispatch(a=>i(e({},a),{modals:(0,p.excludeOn)(a.modals,l=>l.id===t.id)}))}function J(o,t,a){o.dispatch(l=>i(e({},l),{registry:i(e({},l.registry),{modals:(0,p.withKey)(l.registry.modals,t,a)})}))}function Q(o,t){o.dispatch(a=>i(e({},a),{registry:i(e({},a.registry),{modals:(0,p.withoutKey)(a.registry.modals,t)})}))}var d=M(g("piral-core"));var x=M(g("react")),w=M(g("piral-core")),I=o=>x.createElement("div",{className:"piral-modals-host"},o.open&&x.createElement("div",{className:"piral-modals-overlay"},o.children)),B=o=>(0,w.defaultRender)(o.children);var D=M(g("react")),A=M(g("piral-core"));var C=M(g("piral-core")),R=(0,C.getPiralComponent)("ModalsHost"),b=(0,C.getPiralComponent)("ModalsDialog");function U(o){o.forEach(t=>t.close())}function V(o,t){if(t){let[a]=Object.keys(o).filter(l=>o[l].name===t).map(l=>o[l]);return a}}var h=()=>{let o=(0,A.useGlobalState)(r=>r.registry.modals),t=(0,A.useGlobalState)(r=>r.modals),a=()=>U(t),l=t.map(r=>{let s=o[r.name]||V(o,r.alternative),n=s&&s.component,c=s&&s.defaults,m=e(e({},c),r.options);return n&&D.createElement(b,i(e({},r),{options:m,defaults:s.defaults,layout:s.layout,key:r.name}),D.createElement(n,{onClose:r.close,options:m}))}).filter(Boolean),f=l.length>0;return D.createElement(R,{open:f,close:a},l)};h.displayName="Modals";function W(o){let t={};for(let{name:a,component:l,defaults:f,layout:r={}}of o)t[`global-${a}`]={pilet:void 0,name:a,component:l,defaults:f,layout:r};return t}function X(o){return t=>i(e({},t),{components:e({ModalsHost:I,ModalsDialog:B},t.components),registry:i(e({},t.registry),{modals:o}),modals:[]})}function Y(o={}){let{dialogs:t=[],selectId:a=l=>`${l}-${~~(Math.random()*1e4)}`}=o;return l=>(l.defineActions(P),l.dispatch((0,d.withAll)(X(W(t)),(0,d.withRootExtension)("piral-modals",h))),(f,r)=>{let s=r.name;return{showModal(n,c){let m=(0,d.buildName)(s,n),u={id:a(m),name:m,alternative:n,options:c,close(){l.closeModal(u)}};return l.openModal(u),u.close},registerModal(n,c,m,u={}){let F=(0,d.buildName)(s,n);return l.registerModal(F,{pilet:s,name:n,component:(0,d.withApi)(l,c,f,"modal"),defaults:m,layout:u}),()=>f.unregisterModal(n)},unregisterModal(n){let c=(0,d.buildName)(s,n);l.unregisterModal(c)}}})}return Z;})();

package/src/Modals.test.tsx

@@ -1,127 +1,193 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import create from 'zustand';
+import { StateContext } from 'piral-core';
+import { render, fireEvent } from '@testing-library/react';
 import { Modals } from './Modals';
-import { PiralModalsHost } from './components';
 
-const state = {
-  registry: {
-    modals: {},
-  },
-  modals: [],
-};
-
-jest.mock('piral-core', () => ({
-  useGlobalState(cb: any) {
-    return cb(state);
-  },
-  getPiralComponent() {
-    return ({ children }) => <div>{children}</div>;
-  },
-}));
+function createMockContainer(registeredModals: Record<string, any>, openModals: Array<any>) {
+  const state = create(() => ({
+    components: {
+      ModalsHost: ({ open, children, close }) => (
+        <div role="host">
+          {open && (
+            <div role="overlay">
+              <button role="close" onClick={close}>
+                Close
+              </button>
+              {children}
+            </div>
+          )}
+        </div>
+      ),
+    },
+    registry: {
+      modals: registeredModals,
+    },
+    modals: openModals,
+  }));
+  return {
+    context: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+      defineActions() {},
+      converters: {},
+      readState(select) {
+        return select(state.getState());
+      },
+      state,
+      dispatch(update) {
+        state.setState(update(state.getState()));
+      },
+    } as any,
+    api: {} as any,
+  };
+}
 
 describe('Modals Component Shell Module', () => {
   it('Should display nothing is nothing is there', () => {
-    state.registry.modals = {};
-    state.modals = [];
-    const node = mount(<Modals />);
-    expect(node.find(PiralModalsHost).prop('open')).toBe(false);
+    const { context } = createMockContainer({}, []);
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Modals />
+      </StateContext.Provider>,
+    );
+    expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should display something if something is there and wanted', () => {
-    state.registry.modals = {
-      foo: {
-        component: () => <div />,
-      },
-    };
-    state.modals = [
+    const { context } = createMockContainer(
       {
-        name: 'foo',
-        options: {},
+        foo: {
+          component: () => <div />,
+        },
       },
-    ];
-    const node = mount(<Modals />);
-    expect(node.find(PiralModalsHost).prop('open')).toBe(true);
+      [
+        {
+          name: 'foo',
+          options: {},
+        },
+      ],
+    );
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Modals />
+      </StateContext.Provider>,
+    );
+    expect(node.queryByRole('overlay')).not.toBe(null);
   });
 
   it('Should display nothing if something is there and not wanted', () => {
-    state.registry.modals = {
-      foo: {
-        component: () => <div />,
+    const { context } = createMockContainer(
+      {
+        foo: {
+          component: () => <div />,
+        },
       },
-    };
-    state.modals = [];
-    const node = mount(<Modals />);
-    expect(node.find(PiralModalsHost).prop('open')).toBe(false);
+      [],
+    );
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Modals />
+      </StateContext.Provider>,
+    );
+    expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should display something if something is there and wanted even indirectly', () => {
-    state.registry.modals = {
-      'abc:foo': {
-        component: () => <div />,
-        name: 'bar',
-      },
-    };
-    state.modals = [
+    const { context } = createMockContainer(
       {
-        name: 'xyz:foo',
-        alternative: 'bar',
-        options: {},
+        'abc:foo': {
+          component: () => <div />,
+          name: 'bar',
+        },
       },
-    ];
-    const node = mount(<Modals />);
-    expect(node.find(PiralModalsHost).prop('open')).toBe(true);
+      [
+        {
+          name: 'xyz:foo',
+          alternative: 'bar',
+          options: {},
+        },
+      ],
+    );
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Modals />
+      </StateContext.Provider>,
+    );
+    expect(node.queryByRole('overlay')).not.toBe(null);
   });
 
   it('Should display nothing is something is there and not wanted with indirection', () => {
-    state.registry.modals = {
-      'abc:foo': {
-        component: () => <div />,
-        name: 'qxz',
-      },
-    };
-    state.modals = [
+    const { context } = createMockContainer(
       {
-        name: 'xyz:foo',
-        alternative: 'bar',
-        options: {},
+        'abc:foo': {
+          component: () => <div />,
+          name: 'qxz',
+        },
       },
-    ];
-    const node = mount(<Modals />);
-    expect(node.find(PiralModalsHost).prop('open')).toBe(false);
+      [
+        {
+          name: 'xyz:foo',
+          alternative: 'bar',
+          options: {},
+        },
+      ],
+    );
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Modals />
+      </StateContext.Provider>,
+    );
+    expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should display nothing if nothing is available even if wanted', () => {
-    state.registry.modals = {};
-    state.modals = [
+    const { context } = createMockContainer({}, [
       {
         name: 'foo',
         options: {},
       },
-    ];
-    const node = mount(<Modals />);
-    expect(node.find(PiralModalsHost).prop('open')).toBe(false);
+    ]);
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Modals />
+      </StateContext.Provider>,
+    );
+    expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should close all available dialogs', () => {
     const close = jest.fn();
-    state.registry.modals = {};
-    state.modals = [
-      {
-        name: 'foo',
-        options: {},
-        close,
-      },
+    const { context } = createMockContainer(
       {
-        name: 'bar',
-        options: {},
-        close,
+        foo: {
+          component: () => <div />,
+        },
+        bar: {
+          component: () => <div />,
+        },
       },
-    ];
-    const node = mount(<Modals />);
-    const closeAll = node.find(PiralModalsHost).prop('close');
-    expect(typeof closeAll).toBe('function');
+      [
+        {
+          name: 'foo',
+          options: {},
+          close,
+        },
+        {
+          name: 'bar',
+          options: {},
+          close,
+        },
+      ],
+    );
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Modals />
+      </StateContext.Provider>,
+    );
     expect(close).toHaveBeenCalledTimes(0);
-    closeAll();
+    fireEvent.click(node.getByRole('close'));
     expect(close).toHaveBeenCalledTimes(2);
   });
 });

package/src/Modals.tsx

@@ -28,21 +28,19 @@ export const Modals: React.FC = () => {
       const reg = modals[n.name] || findModal(modals, n.alternative);
       const Component = reg && reg.component;
       const defaults = reg && reg.defaults;
+      const options = {
+        ...defaults,
+        ...n.options,
+      };
       return (
         Component && (
-          <PiralModalsDialog {...n} key={n.name}>
-            <Component
-              onClose={n.close}
-              options={{
-                ...defaults,
-                ...n.options,
-              }}
-            />
+          <PiralModalsDialog {...n} options={options} defaults={reg.defaults} layout={reg.layout} key={n.name}>
+            <Component onClose={n.close} options={options} />
           </PiralModalsDialog>
         )
       );
     })
-    .filter((m) => !!m);
+    .filter(Boolean);
   const open = children.length > 0;
 
   return (