piral-modals 1.0.0-pre.2217 → 1.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2021 smapiot
+Copyright (c) 2019 - 2023 smapiot
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,6 +1,6 @@
-[![Piral Logo](https://github.com/smapiot/piral/raw/master/docs/assets/logo.png)](https://piral.io)
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
 
-# [Piral Modals](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-modals.svg?style=flat)](https://www.npmjs.com/package/piral-modals) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
+# [Piral Modals](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-modals.svg?style=flat)](https://www.npmjs.com/package/piral-modals) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
 
 This is a plugin that only has a peer dependency to `piral-core`. What `piral-modals` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core` to easily trigger the display of modal dialogs from pilets.
 
@@ -10,6 +10,12 @@ If you have modal dialogs on your page that `piral-modals` gives you a nice abst
 
 Alternative: You could simply use an event to trigger opening a dialog. The event could transport a React component which would then be globally used. Alternatively, each pilet would come up with its own dialog design and management system.
 
+## Video
+
+We also have a video for this plugin:
+
+@[youtube](https://youtu.be/gZt7Ic1BHNA)
+
 ## Documentation
 
 The following functions are brought to the Pilet API.

package/esm/Modals.js

@@ -1,33 +1,33 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { useGlobalState } from 'piral-core';
 import { PiralModalsDialog, PiralModalsHost } from './components';
 function closeAll(modals) {
-    modals.forEach(function (m) { return m.close(); });
+    modals.forEach((m) => m.close());
 }
 function findModal(modals, name) {
     if (name) {
-        var modal = Object.keys(modals)
-            .filter(function (m) { return modals[m].name === name; })
-            .map(function (m) { return modals[m]; })[0];
+        const [modal] = Object.keys(modals)
+            .filter((m) => modals[m].name === name)
+            .map((m) => modals[m]);
         return modal;
     }
     return undefined;
 }
-export var Modals = function () {
-    var modals = useGlobalState(function (s) { return s.registry.modals; });
-    var dialogs = useGlobalState(function (s) { return s.modals; });
-    var close = function () { return closeAll(dialogs); };
-    var children = dialogs
-        .map(function (n) {
-        var reg = modals[n.name] || findModal(modals, n.alternative);
-        var Component = reg && reg.component;
-        var defaults = reg && reg.defaults;
-        return (Component && (React.createElement(PiralModalsDialog, __assign({}, n, { key: n.name }),
-            React.createElement(Component, { onClose: n.close, options: __assign(__assign({}, defaults), n.options) }))));
+export const Modals = () => {
+    const modals = useGlobalState((s) => s.registry.modals);
+    const dialogs = useGlobalState((s) => s.modals);
+    const close = () => closeAll(dialogs);
+    const children = dialogs
+        .map((n) => {
+        const reg = modals[n.name] || findModal(modals, n.alternative);
+        const Component = reg && reg.component;
+        const defaults = reg && reg.defaults;
+        const options = Object.assign(Object.assign({}, defaults), n.options);
+        return (Component && (React.createElement(PiralModalsDialog, Object.assign({}, n, { options: options, defaults: reg.defaults, layout: reg.layout, key: n.name }),
+            React.createElement(Component, { onClose: n.close, options: options }))));
     })
-        .filter(function (m) { return !!m; });
-    var open = children.length > 0;
+        .filter(Boolean);
+    const open = children.length > 0;
     return (React.createElement(PiralModalsHost, { open: open, close: close }, children));
 };
 Modals.displayName = 'Modals';

package/esm/Modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.js","sourceRoot":"","sources":["../src/Modals.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGlE,SAAS,QAAQ,CAAC,MAA8B;IAC9C,MAAM,CAAC,OAAO,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,EAAE,EAAT,CAAS,CAAC,CAAC;AACnC,CAAC;AAED,SAAS,SAAS,CAAC,MAAyC,EAAE,IAAY;IACxE,IAAI,IAAI,EAAE;QACD,IAAA,KAAK,GAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;aAChC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,EAAvB,CAAuB,CAAC;aACtC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,MAAM,CAAC,CAAC,CAAC,EAAT,CAAS,CAAC,GAFZ,CAEa;QAEzB,OAAO,KAAK,CAAC;KACd;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,IAAM,MAAM,GAAa;IAC9B,IAAM,MAAM,GAAG,cAAc,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAjB,CAAiB,CAAC,CAAC;IACxD,IAAM,OAAO,GAAG,cAAc,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,MAAM,EAAR,CAAQ,CAAC,CAAC;IAChD,IAAM,KAAK,GAAG,cAAM,OAAA,QAAQ,CAAC,OAAO,CAAC,EAAjB,CAAiB,CAAC;IACtC,IAAM,QAAQ,GAAG,OAAO;SACrB,GAAG,CAAC,UAAC,CAAC;QACL,IAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;QAC/D,IAAM,SAAS,GAAG,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;QACvC,IAAM,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;QACrC,OAAO,CACL,SAAS,IAAI,CACX,oBAAC,iBAAiB,eAAK,CAAC,IAAE,GAAG,EAAE,CAAC,CAAC,IAAI;YACnC,oBAAC,SAAS,IACR,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,OAAO,wBACF,QAAQ,GACR,CAAC,CAAC,OAAO,IAEd,CACgB,CACrB,CACF,CAAC;IACJ,CAAC,CAAC;SACD,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC;IACtB,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjC,OAAO,CACL,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IACtC,QAAQ,CACO,CACnB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Modals.js","sourceRoot":"","sources":["../src/Modals.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGlE,SAAS,QAAQ,CAAC,MAA8B;IAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AACnC,CAAC;AAED,SAAS,SAAS,CAAC,MAAyC,EAAE,IAAY;IACxE,IAAI,IAAI,EAAE;QACR,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;aAChC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC;aACtC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAEzB,OAAO,KAAK,CAAC;KACd;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAa,GAAG,EAAE;IACnC,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,OAAO;SACrB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACT,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;QAC/D,MAAM,SAAS,GAAG,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;QACvC,MAAM,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;QACrC,MAAM,OAAO,mCACR,QAAQ,GACR,CAAC,CAAC,OAAO,CACb,CAAC;QACF,OAAO,CACL,SAAS,IAAI,CACX,oBAAC,iBAAiB,oBAAK,CAAC,IAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI;YACjG,oBAAC,SAAS,IAAC,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAC/B,CACrB,CACF,CAAC;IACJ,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC,CAAC;IACnB,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjC,OAAO,CACL,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IACtC,QAAQ,CACO,CACnB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/esm/actions.js

@@ -1,15 +1,14 @@
-import { __assign } from "tslib";
-import { withKey, withoutKey, prependItem, excludeItem } from 'piral-core';
+import { withKey, withoutKey, prependItem, excludeOn } from 'piral-core';
 export function openModal(ctx, dialog) {
-    ctx.dispatch(function (state) { return (__assign(__assign({}, state), { modals: prependItem(state.modals, dialog) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { modals: prependItem(state.modals, dialog) })));
 }
 export function closeModal(ctx, dialog) {
-    ctx.dispatch(function (state) { return (__assign(__assign({}, state), { modals: excludeItem(state.modals, dialog) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { modals: excludeOn(state.modals, (modal) => modal.id === dialog.id) })));
 }
 export function registerModal(ctx, name, value) {
-    ctx.dispatch(function (state) { return (__assign(__assign({}, state), { registry: __assign(__assign({}, state.registry), { modals: withKey(state.registry.modals, name, value) }) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { modals: withKey(state.registry.modals, name, value) }) })));
 }
 export function unregisterModal(ctx, name) {
-    ctx.dispatch(function (state) { return (__assign(__assign({}, state), { registry: __assign(__assign({}, state.registry), { modals: withoutKey(state.registry.modals, name) }) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { modals: withoutKey(state.registry.modals, name) }) })));
 }
 //# sourceMappingURL=actions.js.map

package/esm/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAsB,MAAM,YAAY,CAAC;AAG/F,MAAM,UAAU,SAAS,CAAC,GAAuB,EAAE,MAAuB;IACxE,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uBACnB,KAAK,KACR,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,IACzC,EAHsB,CAGtB,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,GAAuB,EAAE,MAAuB;IACzE,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uBACnB,KAAK,KACR,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,IACzC,EAHsB,CAGtB,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,GAAuB,EAAE,IAAY,EAAE,KAAwB;IAC3F,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uBACnB,KAAK,KACR,QAAQ,wBACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,OAErD,EANsB,CAMtB,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,GAAuB,EAAE,IAAY;IACnE,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uBACnB,KAAK,KACR,QAAQ,wBACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,OAEjD,EANsB,CAMtB,CAAC,CAAC;AACN,CAAC"}
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAsB,MAAM,YAAY,CAAC;AAG7F,MAAM,UAAU,SAAS,CAAC,GAAuB,EAAE,MAAuB;IACxE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,IACzC,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,GAAuB,EAAE,MAAuB;IACzE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,IAClE,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,GAAuB,EAAE,IAAY,EAAE,KAAwB;IAC3F,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,OAErD,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,GAAuB,EAAE,IAAY;IACnE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,OAEjD,CAAC,CAAC;AACN,CAAC"}

package/esm/components.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
-import { ModalsHostProps, ModalsDialogProps } from './types';
-export declare const PiralModalsHost: React.ComponentType<ModalsHostProps>;
-export declare const PiralModalsDialog: React.ComponentType<ModalsDialogProps>;
+/// <reference types="react" />
+export declare const PiralModalsHost: import("react").ComponentType<import("./types").ModalsHostProps>;
+export declare const PiralModalsDialog: import("react").ComponentType<import("./types").ModalsDialogProps>;

package/esm/components.js

@@ -1,4 +1,4 @@
 import { getPiralComponent } from 'piral-core';
-export var PiralModalsHost = getPiralComponent('ModalsHost');
-export var PiralModalsDialog = getPiralComponent('ModalsDialog');
+export const PiralModalsHost = getPiralComponent('ModalsHost');
+export const PiralModalsDialog = getPiralComponent('ModalsDialog');
 //# sourceMappingURL=components.js.map

package/esm/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,CAAC,IAAM,eAAe,GAAyC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AACrG,MAAM,CAAC,IAAM,iBAAiB,GAA2C,iBAAiB,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAC/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC"}

package/esm/create.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 import { PiralPlugin } from 'piral-core';
-import { PiletModalsApi, BareModalComponentProps } from './types';
+import { PiletModalsApi, BareModalComponentProps, ModalLayoutOptions } from './types';
 export interface InitialModalDialog {
     /**
      * The name of the modal dialog.
@@ -13,7 +13,11 @@ export interface InitialModalDialog {
     /**
      * The default options for the modal dialog.
      */
-    defaults: any;
+    defaults?: any;
+    /**
+     * The layout options for the modal dialog.
+     */
+    layout?: ModalLayoutOptions;
 }
 /**
  * Available configuration options for the modals plugin.
@@ -23,6 +27,13 @@ export interface ModalsConfig {
      * The initial modal dialogs.
      */
     dialogs?: Array<InitialModalDialog>;
+    /**
+     * Defines how the next ID for the key is selected.
+     * By default a random number is used.
+     *
+     * @param name The name of the modal dialog.
+     */
+    selectId?(name: string): string;
 }
 /**
  * Creates new Pilet API extensions for support modal dialogs.

package/esm/create.js

@@ -1,56 +1,61 @@
-import { __assign } from "tslib";
 import * as actions from './actions';
-import { withApi, buildName } from 'piral-core';
+import { withApi, buildName, withRootExtension, withAll } from 'piral-core';
 import { DefaultHost, DefaultDialog } from './default';
+import { Modals } from './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: DefaultHost, ModalsDialog: DefaultDialog }, state.components), registry: Object.assign(Object.assign({}, state.registry), { modals }), modals: [] }));
+}
 /**
  * Creates new Pilet API extensions for support modal dialogs.
  */
-export function createModalsApi(config) {
-    if (config === void 0) { config = {}; }
-    var _a = config.dialogs, dialogs = _a === void 0 ? [] : _a;
-    return function (context) {
+export function createModalsApi(config = {}) {
+    const { dialogs = [], selectId = (name) => `${name}-${~~(Math.random() * 10000)}` } = config;
+    return (context) => {
         context.defineActions(actions);
-        context.dispatch(function (state) { return (__assign(__assign({}, state), { components: __assign({ ModalsHost: DefaultHost, ModalsDialog: DefaultDialog }, state.components), registry: __assign(__assign({}, state.registry), { modals: getModalDialogs(dialogs) }), modals: [] })); });
-        return function (api, target) {
-            var pilet = target.name;
+        context.dispatch(withAll(withModals(getModalDialogs(dialogs)), withRootExtension('piral-modals', Modals)));
+        return (api, target) => {
+            const pilet = target.name;
             return {
-                showModal: function (name, options) {
-                    var dialog = {
-                        name: buildName(pilet, name),
-                        alternative: name,
-                        options: options,
-                        close: function () {
-                            setTimeout(function () { return context.closeModal(dialog); }, 0);
+                showModal(simpleName, options) {
+                    const name = 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 = buildName(pilet, name);
+                registerModal(name, arg, defaults, layout = {}) {
+                    const id = buildName(pilet, name);
                     context.registerModal(id, {
-                        pilet: pilet,
-                        name: name,
+                        pilet,
+                        name,
                         component: withApi(context, arg, api, 'modal'),
-                        defaults: defaults,
+                        defaults,
+                        layout,
                     });
-                    return function () { return api.unregisterModal(name); };
+                    return () => api.unregisterModal(name);
                 },
-                unregisterModal: function (name) {
-                    var id = buildName(pilet, name);
+                unregisterModal(name) {
+                    const id = buildName(pilet, name);
                     context.unregisterModal(id);
                 },
             };

package/esm/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;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,MAAM,UAAU,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,uBACvB,KAAK,KACR,UAAU,aACR,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,aAAa,IACxB,KAAK,CAAC,UAAU,GAErB,QAAQ,wBACH,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,SAAS,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,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,aAAa,CAAC,EAAE,EAAE;wBACxB,KAAK,OAAA;wBACL,IAAI,MAAA;wBACJ,SAAS,EAAE,OAAO,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,SAAS,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"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"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"}

package/esm/default.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { defaultRender } from 'piral-core';
-export var 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))); };
-export var DefaultDialog = function (props) { return defaultRender(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,IAAM,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;AAEF,MAAM,CAAC,IAAM,aAAa,GAAgC,UAAC,KAAK,IAAK,OAAA,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,EAA7B,CAA6B,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/esm/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/lib/Modals.js

@@ -1,37 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modals = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var piral_core_1 = require("piral-core");
-var components_1 = require("./components");
+const React = require("react");
+const piral_core_1 = require("piral-core");
+const components_1 = require("./components");
 function closeAll(modals) {
-    modals.forEach(function (m) { return m.close(); });
+    modals.forEach((m) => m.close());
 }
 function findModal(modals, name) {
     if (name) {
-        var modal = Object.keys(modals)
-            .filter(function (m) { return modals[m].name === name; })
-            .map(function (m) { return modals[m]; })[0];
+        const [modal] = Object.keys(modals)
+            .filter((m) => modals[m].name === name)
+            .map((m) => modals[m]);
         return modal;
     }
     return undefined;
 }
-exports.Modals = function () {
-    var modals = piral_core_1.useGlobalState(function (s) { return s.registry.modals; });
-    var dialogs = piral_core_1.useGlobalState(function (s) { return s.modals; });
-    var close = function () { return closeAll(dialogs); };
-    var children = dialogs
-        .map(function (n) {
-        var reg = modals[n.name] || findModal(modals, n.alternative);
-        var Component = reg && reg.component;
-        var defaults = reg && reg.defaults;
-        return (Component && (React.createElement(components_1.PiralModalsDialog, tslib_1.__assign({}, n, { key: n.name }),
-            React.createElement(Component, { onClose: n.close, options: tslib_1.__assign(tslib_1.__assign({}, defaults), n.options) }))));
+const Modals = () => {
+    const modals = (0, piral_core_1.useGlobalState)((s) => s.registry.modals);
+    const dialogs = (0, piral_core_1.useGlobalState)((s) => s.modals);
+    const close = () => closeAll(dialogs);
+    const children = dialogs
+        .map((n) => {
+        const reg = modals[n.name] || findModal(modals, n.alternative);
+        const Component = reg && reg.component;
+        const defaults = reg && reg.defaults;
+        const options = Object.assign(Object.assign({}, defaults), n.options);
+        return (Component && (React.createElement(components_1.PiralModalsDialog, Object.assign({}, n, { options: options, defaults: reg.defaults, layout: reg.layout, key: n.name }),
+            React.createElement(Component, { onClose: n.close, options: options }))));
     })
-        .filter(function (m) { return !!m; });
-    var open = children.length > 0;
+        .filter(Boolean);
+    const open = children.length > 0;
     return (React.createElement(components_1.PiralModalsHost, { open: open, close: close }, children));
 };
+exports.Modals = Modals;
 exports.Modals.displayName = 'Modals';
 //# sourceMappingURL=Modals.js.map

package/lib/Modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.js","sourceRoot":"","sources":["../src/Modals.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,yCAA4C;AAC5C,2CAAkE;AAGlE,SAAS,QAAQ,CAAC,MAA8B;IAC9C,MAAM,CAAC,OAAO,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,EAAE,EAAT,CAAS,CAAC,CAAC;AACnC,CAAC;AAED,SAAS,SAAS,CAAC,MAAyC,EAAE,IAAY;IACxE,IAAI,IAAI,EAAE;QACD,IAAA,KAAK,GAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;aAChC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,EAAvB,CAAuB,CAAC;aACtC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,MAAM,CAAC,CAAC,CAAC,EAAT,CAAS,CAAC,GAFZ,CAEa;QAEzB,OAAO,KAAK,CAAC;KACd;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAEY,QAAA,MAAM,GAAa;IAC9B,IAAM,MAAM,GAAG,2BAAc,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAjB,CAAiB,CAAC,CAAC;IACxD,IAAM,OAAO,GAAG,2BAAc,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,MAAM,EAAR,CAAQ,CAAC,CAAC;IAChD,IAAM,KAAK,GAAG,cAAM,OAAA,QAAQ,CAAC,OAAO,CAAC,EAAjB,CAAiB,CAAC;IACtC,IAAM,QAAQ,GAAG,OAAO;SACrB,GAAG,CAAC,UAAC,CAAC;QACL,IAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;QAC/D,IAAM,SAAS,GAAG,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;QACvC,IAAM,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;QACrC,OAAO,CACL,SAAS,IAAI,CACX,oBAAC,8BAAiB,uBAAK,CAAC,IAAE,GAAG,EAAE,CAAC,CAAC,IAAI;YACnC,oBAAC,SAAS,IACR,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,OAAO,wCACF,QAAQ,GACR,CAAC,CAAC,OAAO,IAEd,CACgB,CACrB,CACF,CAAC;IACJ,CAAC,CAAC;SACD,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC;IACtB,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjC,OAAO,CACL,oBAAC,4BAAe,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IACtC,QAAQ,CACO,CACnB,CAAC;AACJ,CAAC,CAAC;AACF,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Modals.js","sourceRoot":"","sources":["../src/Modals.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,2CAA4C;AAC5C,6CAAkE;AAGlE,SAAS,QAAQ,CAAC,MAA8B;IAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AACnC,CAAC;AAED,SAAS,SAAS,CAAC,MAAyC,EAAE,IAAY;IACxE,IAAI,IAAI,EAAE;QACR,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;aAChC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC;aACtC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAEzB,OAAO,KAAK,CAAC;KACd;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAEM,MAAM,MAAM,GAAa,GAAG,EAAE;IACnC,MAAM,MAAM,GAAG,IAAA,2BAAc,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,IAAA,2BAAc,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,OAAO;SACrB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACT,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;QAC/D,MAAM,SAAS,GAAG,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;QACvC,MAAM,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;QACrC,MAAM,OAAO,mCACR,QAAQ,GACR,CAAC,CAAC,OAAO,CACb,CAAC;QACF,OAAO,CACL,SAAS,IAAI,CACX,oBAAC,8BAAiB,oBAAK,CAAC,IAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI;YACjG,oBAAC,SAAS,IAAC,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAC/B,CACrB,CACF,CAAC;IACJ,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC,CAAC;IACnB,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjC,OAAO,CACL,oBAAC,4BAAe,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IACtC,QAAQ,CACO,CACnB,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,MAAM,UA6BjB;AACF,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/lib/actions.js

@@ -1,22 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.unregisterModal = exports.registerModal = exports.closeModal = exports.openModal = void 0;
-var tslib_1 = require("tslib");
-var piral_core_1 = require("piral-core");
+const piral_core_1 = require("piral-core");
 function openModal(ctx, dialog) {
-    ctx.dispatch(function (state) { return (tslib_1.__assign(tslib_1.__assign({}, state), { modals: piral_core_1.prependItem(state.modals, dialog) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { modals: (0, piral_core_1.prependItem)(state.modals, dialog) })));
 }
 exports.openModal = openModal;
 function closeModal(ctx, dialog) {
-    ctx.dispatch(function (state) { return (tslib_1.__assign(tslib_1.__assign({}, state), { modals: piral_core_1.excludeItem(state.modals, dialog) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { modals: (0, piral_core_1.excludeOn)(state.modals, (modal) => modal.id === dialog.id) })));
 }
 exports.closeModal = closeModal;
 function registerModal(ctx, name, value) {
-    ctx.dispatch(function (state) { return (tslib_1.__assign(tslib_1.__assign({}, state), { registry: tslib_1.__assign(tslib_1.__assign({}, state.registry), { modals: piral_core_1.withKey(state.registry.modals, name, value) }) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { modals: (0, piral_core_1.withKey)(state.registry.modals, name, value) }) })));
 }
 exports.registerModal = registerModal;
 function unregisterModal(ctx, name) {
-    ctx.dispatch(function (state) { return (tslib_1.__assign(tslib_1.__assign({}, state), { registry: tslib_1.__assign(tslib_1.__assign({}, state.registry), { modals: piral_core_1.withoutKey(state.registry.modals, name) }) })); });
+    ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { modals: (0, piral_core_1.withoutKey)(state.registry.modals, name) }) })));
 }
 exports.unregisterModal = unregisterModal;
 //# sourceMappingURL=actions.js.map

package/lib/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":";;;;AAAA,yCAA+F;AAG/F,SAAgB,SAAS,CAAC,GAAuB,EAAE,MAAuB;IACxE,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uCACnB,KAAK,KACR,MAAM,EAAE,wBAAW,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,IACzC,EAHsB,CAGtB,CAAC,CAAC;AACN,CAAC;AALD,8BAKC;AAED,SAAgB,UAAU,CAAC,GAAuB,EAAE,MAAuB;IACzE,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uCACnB,KAAK,KACR,MAAM,EAAE,wBAAW,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,IACzC,EAHsB,CAGtB,CAAC,CAAC;AACN,CAAC;AALD,gCAKC;AAED,SAAgB,aAAa,CAAC,GAAuB,EAAE,IAAY,EAAE,KAAwB;IAC3F,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uCACnB,KAAK,KACR,QAAQ,wCACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,oBAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,OAErD,EANsB,CAMtB,CAAC,CAAC;AACN,CAAC;AARD,sCAQC;AAED,SAAgB,eAAe,CAAC,GAAuB,EAAE,IAAY;IACnE,GAAG,CAAC,QAAQ,CAAC,UAAC,KAAK,IAAK,OAAA,uCACnB,KAAK,KACR,QAAQ,wCACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,uBAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,OAEjD,EANsB,CAMtB,CAAC,CAAC;AACN,CAAC;AARD,0CAQC"}
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":";;;AAAA,2CAA6F;AAG7F,SAAgB,SAAS,CAAC,GAAuB,EAAE,MAAuB;IACxE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,MAAM,EAAE,IAAA,wBAAW,EAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,IACzC,CAAC,CAAC;AACN,CAAC;AALD,8BAKC;AAED,SAAgB,UAAU,CAAC,GAAuB,EAAE,MAAuB;IACzE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,MAAM,EAAE,IAAA,sBAAS,EAAC,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,IAClE,CAAC,CAAC;AACN,CAAC;AALD,gCAKC;AAED,SAAgB,aAAa,CAAC,GAAuB,EAAE,IAAY,EAAE,KAAwB;IAC3F,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,IAAA,oBAAO,EAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,OAErD,CAAC,CAAC;AACN,CAAC;AARD,sCAQC;AAED,SAAgB,eAAe,CAAC,GAAuB,EAAE,IAAY;IACnE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,MAAM,EAAE,IAAA,uBAAU,EAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,OAEjD,CAAC,CAAC;AACN,CAAC;AARD,0CAQC"}

package/lib/components.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
-import { ModalsHostProps, ModalsDialogProps } from './types';
-export declare const PiralModalsHost: React.ComponentType<ModalsHostProps>;
-export declare const PiralModalsDialog: React.ComponentType<ModalsDialogProps>;
+/// <reference types="react" />
+export declare const PiralModalsHost: import("react").ComponentType<import("./types").ModalsHostProps>;
+export declare const PiralModalsDialog: import("react").ComponentType<import("./types").ModalsDialogProps>;

package/lib/components.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PiralModalsDialog = exports.PiralModalsHost = void 0;
-var piral_core_1 = require("piral-core");
-exports.PiralModalsHost = piral_core_1.getPiralComponent('ModalsHost');
-exports.PiralModalsDialog = piral_core_1.getPiralComponent('ModalsDialog');
+const piral_core_1 = require("piral-core");
+exports.PiralModalsHost = (0, piral_core_1.getPiralComponent)('ModalsHost');
+exports.PiralModalsDialog = (0, piral_core_1.getPiralComponent)('ModalsDialog');
 //# sourceMappingURL=components.js.map

package/lib/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";;;AACA,yCAA+C;AAGlC,QAAA,eAAe,GAAyC,8BAAiB,CAAC,YAAY,CAAC,CAAC;AACxF,QAAA,iBAAiB,GAA2C,8BAAiB,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";;;AAAA,2CAA+C;AAElC,QAAA,eAAe,GAAG,IAAA,8BAAiB,EAAC,YAAY,CAAC,CAAC;AAClD,QAAA,iBAAiB,GAAG,IAAA,8BAAiB,EAAC,cAAc,CAAC,CAAC"}

package/lib/create.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 import { PiralPlugin } from 'piral-core';
-import { PiletModalsApi, BareModalComponentProps } from './types';
+import { PiletModalsApi, BareModalComponentProps, ModalLayoutOptions } from './types';
 export interface InitialModalDialog {
     /**
      * The name of the modal dialog.
@@ -13,7 +13,11 @@ export interface InitialModalDialog {
     /**
      * The default options for the modal dialog.
      */
-    defaults: any;
+    defaults?: any;
+    /**
+     * The layout options for the modal dialog.
+     */
+    layout?: ModalLayoutOptions;
 }
 /**
  * Available configuration options for the modals plugin.
@@ -23,6 +27,13 @@ export interface ModalsConfig {
      * The initial modal dialogs.
      */
     dialogs?: Array<InitialModalDialog>;
+    /**
+     * Defines how the next ID for the key is selected.
+     * By default a random number is used.
+     *
+     * @param name The name of the modal dialog.
+     */
+    selectId?(name: string): string;
 }
 /**
  * Creates new Pilet API extensions for support modal dialogs.