piral-modals 0.15.0-alpha.4396 → 0.15.0-beta.4411

package/esm/default.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { defaultRender } from 'piral-core';
-export const DefaultHost = (props) => (React.createElement("div", { className: "piral-modals-host", key: "default_modals" }, props.open && React.createElement("div", { className: "piral-modals-overlay" }, props.children)));
+export const DefaultHost = (props) => (React.createElement("div", { className: "piral-modals-host" }, props.open && React.createElement("div", { className: "piral-modals-overlay" }, props.children)));
 export const DefaultDialog = (props) => defaultRender(props.children);
 //# sourceMappingURL=default.js.map

package/esm/default.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,CAAC,MAAM,WAAW,GAA8B,CAAC,KAAK,EAAE,EAAE,CAAC,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,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAgC,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,CAAC,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;AAEF,MAAM,CAAC,MAAM,aAAa,GAAgC,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC"}

package/lib/default.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultDialog = exports.DefaultHost = void 0;
 const React = require("react");
 const piral_core_1 = require("piral-core");
-const DefaultHost = (props) => (React.createElement("div", { className: "piral-modals-host", key: "default_modals" }, props.open && React.createElement("div", { className: "piral-modals-overlay" }, props.children)));
+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;

package/lib/default.js.map

@@ -1 +1 @@
-{"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,EAAC,GAAG,EAAC,gBAAgB,IACpD,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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-modals",
-  "version": "0.15.0-alpha.4396",
+  "version": "0.15.0-beta.4411",
   "description": "Plugin for the display of modal dialogs in Piral.",
   "keywords": [
     "piral",
@@ -62,12 +62,12 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
-    "piral-core": "0.15.0-alpha.4396",
+    "piral-core": "0.15.0-beta.4411",
     "react": "^18.0.0"
   },
   "peerDependencies": {
     "piral-core": "0.14.x || 0.15.x",
     "react": ">=16.8.0"
   },
-  "gitHead": "62abff4d61634b3ecffda2407f1c29f1de929b4c"
+  "gitHead": "4f5faf811d34692b5f2d3042b9fb732fa8d64cb0"
 }

package/piral-modals.min.js

@@ -1 +1 @@
-var piralModals=(()=>{var F=Object.create;var y=Object.defineProperty,N=Object.defineProperties,T=Object.getOwnPropertyDescriptor,$=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertyNames,G=Object.getOwnPropertySymbols,K=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty,L=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))L.call(t,a)&&O(o,a,t[a]);return o},i=(o,t)=>N(o,$(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 E(t))!H.call(o,l)&&l!=="default"&&y(o,l,{get:()=>t[l],enumerable:!(a=T(t,l))||a.enumerable});return o},M=o=>j(S(y(o!=null?F(K(o)):{},"default",o&&o.__esModule&&"default"in o?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o);var Y={};v(Y,{Modals:()=>h,PiralModalsDialog:()=>b,PiralModalsHost:()=>R,createModalsApi:()=>X});var P={};v(P,{closeModal:()=>q,openModal:()=>_,registerModal:()=>z,unregisterModal:()=>J});var p=M(g("piral-core"));function _(o,t){o.dispatch(a=>i(e({},a),{modals:(0,p.prependItem)(a.modals,t)}))}function q(o,t){o.dispatch(a=>i(e({},a),{modals:(0,p.excludeOn)(a.modals,l=>l.id===t.id)}))}function z(o,t,a){o.dispatch(l=>i(e({},l),{registry:i(e({},l.registry),{modals:(0,p.withKey)(l.registry.modals,t,a)})}))}function J(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",key:"default_modals"},o.open&&x.createElement("div",{className:"piral-modals-overlay"},o.children)),k=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 Q(o){o.forEach(t=>t.close())}function U(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=()=>Q(t),l=t.map(r=>{let s=o[r.name]||U(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 V(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 W(o){return t=>i(e({},t),{components:e({ModalsHost:I,ModalsDialog:k},t.components),registry:i(e({},t.registry),{modals:o}),modals:[]})}function X(o={}){let{dialogs:t=[],selectId:a=l=>`${l}-${~~(Math.random()*1e4)}`}=o;return l=>(l.defineActions(P),l.dispatch((0,d.withAll)(W(V(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(){setTimeout(()=>l.closeModal(u),0)}};return l.openModal(u),u.close},registerModal(n,c,m,u={}){let B=(0,d.buildName)(s,n);return l.registerModal(B,{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 Y;})();
+var piralModals=(()=>{var N=Object.create;var y=Object.defineProperty,T=Object.defineProperties,$=Object.getOwnPropertyDescriptor,k=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertyNames,G=Object.getOwnPropertySymbols,K=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty,L=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))L.call(t,a)&&O(o,a,t[a]);return o},i=(o,t)=>T(o,k(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 E(t))!H.call(o,l)&&l!=="default"&&y(o,l,{get:()=>t[l],enumerable:!(a=$(t,l))||a.enumerable});return o},M=o=>j(S(y(o!=null?N(K(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(){setTimeout(()=>l.closeModal(u),0)}};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/default.tsx

@@ -3,7 +3,7 @@ import { defaultRender } from 'piral-core';
 import { ModalsHostProps, ModalsDialogProps } from './types';
 
 export const DefaultHost: React.FC<ModalsHostProps> = (props) => (
-  <div className="piral-modals-host" key="default_modals">
+  <div className="piral-modals-host">
     {props.open && <div className="piral-modals-overlay">{props.children}</div>}
   </div>
 );