moorr-react-mui 0.1.7 → 0.1.9

package/cjs/index.css

@@ -1 +1,3 @@
-.moorr-button{display:inline-block;background-color:pink;}
+.moorr-button{display:inline-block;background-color:pink;}
+.moorr-modal-container>.moorr-modal-content-container{padding:0;display:flex;flex-direction:column;}.moorr-modal-container>.moorr-modal-content-container:focus-visible{border:none;outline:none;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3e3e3;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-header>.moorr-modal-header-color-bar{width:.25rem;height:100%;background-color:#aeaeae;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-header>h6{padding:1rem;flex-grow:1;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-body{display:flex;flex-grow:1;overflow-y:auto;padding:1rem;}.moorr-modal-container.moorr-slide-modal{align-items:flex-start;justify-content:flex-end;}.moorr-modal-container.moorr-slide-modal>.moorr-modal-content-container{height:100%;}
+.moorr-modal-container>.moorr-modal-body{padding:1rem;flex-grow:1;overflow:auto;}.moorr-modal-container>.moorr-modal-header{padding:1rem;}.moorr-modal-container>.moorr-modal-header>.tabs{margin-bottom:-1rem;}.moorr-modal-container>.moorr-modal-footer{display:flex;justify-content:space-between;flex-direction:row;padding:1rem;}.moorr-modal-container>.moorr-modal-footer>.left-buttons{display:flex;justify-content:flex-start;flex-direction:row;}.moorr-modal-container>.moorr-modal-footer>.status-message{flex-grow:1;}.moorr-modal-container>.moorr-modal-footer>.right-buttons{display:flex;justify-content:flex-end;flex-direction:row;}.moorr-modal-container>.moorr-modal-footer>.left-buttons button+button,.moorr-modal-container>.moorr-modal-footer>.right-buttons button+button{margin-left:.5rem;}

package/cjs/index.js

@@ -1 +1 @@
-"use strict";var e=require("moorr-common"),o=require("react");exports.Button=({type:t,label:r})=>(o.useEffect((()=>(console.log(`Message from moorr-react-mui: ${e.utils.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${e.utils.bye()}`)})),[]),t||(t="button"),o.createElement("button",{type:t,className:"moorr-button"},o.createElement("span",null,r)));
+"use strict";var e=require("react"),t=require("moorr-common"),o=require("@material-ui/core"),r=require("@material-ui/core/styles"),l=require("@material-ui/styles"),s=require("uuid"),a=require("react-dom"),i=require("@mui/material");const n={};var d=({stylePrefix:t,children:a})=>{let i;if(t)i=n[t]?n[t]:n[t]=l.createGenerateClassName({seed:t});else{const e=`MoorrStylesProvider-${s.v4()}-`;i=l.createGenerateClassName({seed:e})}return e.createElement(l.StylesProvider,{generateClassName:i,injectFirst:!0},e.createElement(o.StylesProvider,{generateClassName:i,injectFirst:!0},e.createElement(r.StylesProvider,{generateClassName:i},a)))};const c=()=>{setTimeout((()=>{const e=m.pop();e&&(a.unmountComponentAtNode(e),e.remove())}),300)};const m=[],u={},p=r.makeStyles((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{width:825,backgroundColor:e.palette.background.paper,borderRadius:"5px",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}}))),v=t=>{const r=p(),l={};t.fixedWidth&&(l.width=t.fixedWidth),t.fixedHeight&&(l.height=t.fixedHeight);let s=r.paper+" moorr-modal-content-container";t.contentClassName&&(s+=" "+t.contentClassName);let a=r.modal;switch(a+=" moorr-modal-container",t.effect){case"fade":a+=" moorr-fade-modal";break;case"slide":a+=" moorr-slide-modal"}const[n,d]=e.useState(!1),[c,m]=e.useState(!1);e.useEffect((()=>{m(!n&&!1!==t.showModal)}),[n,c]);return e.createElement(o.Modal,{className:a,open:c,onClose:e=>{d(!0),(null==t?void 0:t.onDismiss)&&t.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:o.Backdrop,BackdropProps:{timeout:300}},(()=>{switch(t.effect){case"fade":default:return e.createElement(o.Fade,{in:c},e.createElement("div",{className:s,style:l},t.children));case"slide":return e.createElement(i.Slide,{in:c,direction:"left",timeout:300},e.createElement("div",{className:s},t.children))}})())},h=e=>{var t,o,r,l,s;const a=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.modal;if(!a||!u[a])return Promise.reject("invalid-modal");const i=new u[a]((null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.props)||{}).open();(null===(r=null==e?void 0:e.detail)||void 0===r?void 0:r.then)&&i.then((t=>{var o,r;if(!(null==t?void 0:t.dismissed)&&(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.finally))try{null===(r=null==e?void 0:e.detail)||void 0===r||r.then(null==t?void 0:t.result)}catch(e){console.error(e)}})),(null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.catch)&&i.catch(null===(s=null==e?void 0:e.detail)||void 0===s?void 0:s.catch),i.finally((()=>{var t,o;if(null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.finally)try{null===(o=null==e?void 0:e.detail)||void 0===o||o.finally()}catch(e){console.error(e)}})),(null==e?void 0:e.detail)&&((null==e?void 0:e.detail).promise=i)};document&&(document.removeEventListener("openModal",h),document.addEventListener("openModal",h)),exports.Button=({type:o,label:r})=>(e.useEffect((()=>(console.log(`Message from moorr-react-mui: ${t.utils.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${t.utils.bye()}`)})),[]),o||(o="button"),e.createElement("button",{type:o,className:"moorr-button"},e.createElement("span",null,r))),exports.FadeModal=t=>e.createElement(v,{fixedWidth:t.widthValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss},e.createElement("div",{className:`${t.className} moorr-modal-container`},e.createElement("div",{className:"moorr-modal-header"},t.renderHeader),e.createElement("div",{className:"moorr-modal-body"},t.renderBody),e.createElement("div",{className:"moorr-modal-footer"},e.createElement("div",{className:"left-buttons"},t.renderLeftButtons),e.createElement("div",{className:"status-message"},t.renderStatusMessage),e.createElement("div",{className:"right-buttons"},t.renderRightButtons)))),exports.Modal=class{constructor(e){this._props=e}open(){return new Promise(((t,o)=>{let r,l;"function"==typeof this._props.onClose&&(r=this._props.onClose),this._props.onClose=e=>{r&&r(e),t({dismissed:!1,result:e}),c()},"function"==typeof this._props.onDismiss&&(l=this._props.onClose),this._props.onDismiss=()=>{l&&l(),t({dismissed:!0}),c()};let s=e.createElement(d,{stylePrefix:"MoorrFieldValidationModal"},e.createElement(this.getComponent(),this._props));m.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),a.render(s,this._container)}))}},exports.MoorrModal=v,exports.modals=u,exports.modalsStack=m;

package/cjs/typings/components/index.d.ts

@@ -1 +1,2 @@
 export { default as Button } from "./buttons";
+export * from "./style-provider.component";

package/cjs/typings/components/style-provider.component.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+interface StylesProviderProps {
+    stylePrefix: string;
+    children?: ReactNode;
+}
+declare const _default: ({ stylePrefix, children }: StylesProviderProps) => JSX.Element;
+export default _default;

package/cjs/typings/index.d.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./modals";

package/cjs/typings/modals/fade-modal.component.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "./fade-modal.styles.css";
+export interface FadeModalProps {
+    onClose?: (modalResult?: any) => void | undefined;
+    onDismiss?: (modalResult?: any) => void | undefined;
+    className?: string;
+    widthValue?: string;
+    paddingValue?: string;
+    showModal: boolean;
+    innerModal?: boolean;
+    renderHeader?: React.ReactNode;
+    renderBody?: React.ReactNode;
+    renderLeftButtons?: React.ReactNode;
+    renderStatusMessage?: React.ReactNode;
+    renderRightButtons?: React.ReactNode;
+}
+declare const FadeModal: React.FC<FadeModalProps>;
+export default FadeModal;

package/cjs/typings/modals/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MoorrModal } from "./modal.component";
+export * from "./modal";
+export { default as FadeModal } from "./fade-modal.component";

package/cjs/typings/modals/modal.component.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import "./modal.styles.css";
+interface ModalProps {
+    onClose?: (modalResult?: any) => void | undefined;
+    onDismiss?: (modalResult?: any) => void | undefined;
+    children: React.ReactNode;
+    showModal?: boolean;
+    fixedHeight?: string;
+    fixedWidth?: string;
+    contentClassName?: string;
+    effect?: string;
+}
+declare const Modal: (props: ModalProps) => JSX.Element;
+export default Modal;

package/cjs/typings/modals/modal.d.ts

@@ -0,0 +1,25 @@
+export interface ModalProps {
+    onClose: (modalResult?: any) => void | undefined;
+    onDismiss: (modalResult?: any) => void | undefined;
+}
+export interface ModalContructor {
+    new (props: ModalProps): Modal;
+}
+export declare abstract class Modal {
+    _props: ModalProps;
+    _container?: HTMLDivElement;
+    constructor(props?: any);
+    /**
+     *
+     */
+    abstract getComponent(): any;
+    /**
+     *
+     * @returns
+     */
+    open(): Promise<any>;
+}
+export declare const modalsStack: HTMLDivElement[];
+export declare const modals: {
+    [key: string]: ModalContructor;
+};

package/index.css

@@ -1 +1,3 @@
-.moorr-button{display:inline-block;background-color:pink;}
+.moorr-button{display:inline-block;background-color:pink;}
+.moorr-modal-container>.moorr-modal-content-container{padding:0;display:flex;flex-direction:column;}.moorr-modal-container>.moorr-modal-content-container:focus-visible{border:none;outline:none;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3e3e3;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-header>.moorr-modal-header-color-bar{width:.25rem;height:100%;background-color:#aeaeae;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-header>h6{padding:1rem;flex-grow:1;}.moorr-modal-container>.moorr-modal-content-container>.moorr-modal-body{display:flex;flex-grow:1;overflow-y:auto;padding:1rem;}.moorr-modal-container.moorr-slide-modal{align-items:flex-start;justify-content:flex-end;}.moorr-modal-container.moorr-slide-modal>.moorr-modal-content-container{height:100%;}
+.moorr-modal-container>.moorr-modal-body{padding:1rem;flex-grow:1;overflow:auto;}.moorr-modal-container>.moorr-modal-header{padding:1rem;}.moorr-modal-container>.moorr-modal-header>.tabs{margin-bottom:-1rem;}.moorr-modal-container>.moorr-modal-footer{display:flex;justify-content:space-between;flex-direction:row;padding:1rem;}.moorr-modal-container>.moorr-modal-footer>.left-buttons{display:flex;justify-content:flex-start;flex-direction:row;}.moorr-modal-container>.moorr-modal-footer>.status-message{flex-grow:1;}.moorr-modal-container>.moorr-modal-footer>.right-buttons{display:flex;justify-content:flex-end;flex-direction:row;}.moorr-modal-container>.moorr-modal-footer>.left-buttons button+button,.moorr-modal-container>.moorr-modal-footer>.right-buttons button+button{margin-left:.5rem;}

package/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import React from 'react';
+
 /** ---------------------------------------------------------------------------
  * Private
  * ----------------------------------------------------------------------------
@@ -13,4 +15,58 @@ interface Props {
  */
 declare const Button: ({ type, label }: Props) => JSX.Element;
 
-export { Button };
+interface ModalProps$1 {
+    onClose?: (modalResult?: any) => void | undefined;
+    onDismiss?: (modalResult?: any) => void | undefined;
+    children: React.ReactNode;
+    showModal?: boolean;
+    fixedHeight?: string;
+    fixedWidth?: string;
+    contentClassName?: string;
+    effect?: string;
+}
+declare const Modal$1: (props: ModalProps$1) => JSX.Element;
+
+interface ModalProps {
+    onClose: (modalResult?: any) => void | undefined;
+    onDismiss: (modalResult?: any) => void | undefined;
+}
+interface ModalContructor {
+    new (props: ModalProps): Modal;
+}
+declare abstract class Modal {
+    _props: ModalProps;
+    _container?: HTMLDivElement;
+    constructor(props?: any);
+    /**
+     *
+     */
+    abstract getComponent(): any;
+    /**
+     *
+     * @returns
+     */
+    open(): Promise<any>;
+}
+declare const modalsStack: HTMLDivElement[];
+declare const modals: {
+    [key: string]: ModalContructor;
+};
+
+interface FadeModalProps {
+    onClose?: (modalResult?: any) => void | undefined;
+    onDismiss?: (modalResult?: any) => void | undefined;
+    className?: string;
+    widthValue?: string;
+    paddingValue?: string;
+    showModal: boolean;
+    innerModal?: boolean;
+    renderHeader?: React.ReactNode;
+    renderBody?: React.ReactNode;
+    renderLeftButtons?: React.ReactNode;
+    renderStatusMessage?: React.ReactNode;
+    renderRightButtons?: React.ReactNode;
+}
+declare const FadeModal: React.FC<FadeModalProps>;
+
+export { Button, FadeModal, Modal, ModalContructor, ModalProps, Modal$1 as MoorrModal, modals, modalsStack };

package/index.js

@@ -1 +1 @@
-import{utils as o}from"moorr-common";import e,{useEffect as r}from"react";const t=({type:t,label:m})=>(r((()=>(console.log(`Message from moorr-react-mui: ${o.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${o.bye()}`)})),[]),t||(t="button"),e.createElement("button",{type:t,className:"moorr-button"},e.createElement("span",null,m)));export{t as Button};
+import e,{useEffect as o,useState as t}from"react";import{utils as l}from"moorr-common";import{StylesProvider as r,Modal as i,Backdrop as s,Fade as n}from"@material-ui/core";import{StylesProvider as a,makeStyles as d}from"@material-ui/core/styles";import{createGenerateClassName as m,StylesProvider as c}from"@material-ui/styles";import{v4 as u}from"uuid";import p from"react-dom";import{Slide as v}from"@mui/material";const h=({type:t,label:r})=>(o((()=>(console.log(`Message from moorr-react-mui: ${l.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${l.bye()}`)})),[]),t||(t="button"),e.createElement("button",{type:t,className:"moorr-button"},e.createElement("span",null,r))),f={};var y=({stylePrefix:o,children:t})=>{let l;if(o)l=f[o]?f[o]:f[o]=m({seed:o});else{const e=`MoorrStylesProvider-${u()}-`;l=m({seed:e})}return e.createElement(c,{generateClassName:l,injectFirst:!0},e.createElement(r,{generateClassName:l,injectFirst:!0},e.createElement(a,{generateClassName:l},t)))};const E=()=>{setTimeout((()=>{const e=N.pop();e&&(p.unmountComponentAtNode(e),e.remove())}),300)};let g=class{constructor(e){this._props=e}open(){return new Promise(((o,t)=>{let l,r;"function"==typeof this._props.onClose&&(l=this._props.onClose),this._props.onClose=e=>{l&&l(e),o({dismissed:!1,result:e}),E()},"function"==typeof this._props.onDismiss&&(r=this._props.onClose),this._props.onDismiss=()=>{r&&r(),o({dismissed:!0}),E()};let i=e.createElement(y,{stylePrefix:"MoorrFieldValidationModal"},e.createElement(this.getComponent(),this._props));N.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),p.render(i,this._container)}))}};const N=[],C={},M=d((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{width:825,backgroundColor:e.palette.background.paper,borderRadius:"5px",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}}))),b=l=>{const r=M(),a={};l.fixedWidth&&(a.width=l.fixedWidth),l.fixedHeight&&(a.height=l.fixedHeight);let d=r.paper+" moorr-modal-content-container";l.contentClassName&&(d+=" "+l.contentClassName);let m=r.modal;switch(m+=" moorr-modal-container",l.effect){case"fade":m+=" moorr-fade-modal";break;case"slide":m+=" moorr-slide-modal"}const[c,u]=t(!1),[p,h]=t(!1);o((()=>{h(!c&&!1!==l.showModal)}),[c,p]);return e.createElement(i,{className:m,open:p,onClose:e=>{u(!0),(null==l?void 0:l.onDismiss)&&l.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:s,BackdropProps:{timeout:300}},(()=>{switch(l.effect){case"fade":default:return e.createElement(n,{in:p},e.createElement("div",{className:d,style:a},l.children));case"slide":return e.createElement(v,{in:p,direction:"left",timeout:300},e.createElement("div",{className:d},l.children))}})())},w=o=>e.createElement(b,{fixedWidth:o.widthValue,showModal:o.showModal,onClose:o.onClose,onDismiss:o.onDismiss},e.createElement("div",{className:`${o.className} moorr-modal-container`},e.createElement("div",{className:"moorr-modal-header"},o.renderHeader),e.createElement("div",{className:"moorr-modal-body"},o.renderBody),e.createElement("div",{className:"moorr-modal-footer"},e.createElement("div",{className:"left-buttons"},o.renderLeftButtons),e.createElement("div",{className:"status-message"},o.renderStatusMessage),e.createElement("div",{className:"right-buttons"},o.renderRightButtons)))),_=e=>{var o,t,l,r,i;const s=null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.modal;if(!s||!C[s])return Promise.reject("invalid-modal");const n=new C[s]((null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.props)||{}).open();(null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.then)&&n.then((o=>{var t,l;if(!(null==o?void 0:o.dismissed)&&(null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.finally))try{null===(l=null==e?void 0:e.detail)||void 0===l||l.then(null==o?void 0:o.result)}catch(e){console.error(e)}})),(null===(r=null==e?void 0:e.detail)||void 0===r?void 0:r.catch)&&n.catch(null===(i=null==e?void 0:e.detail)||void 0===i?void 0:i.catch),n.finally((()=>{var o,t;if(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.finally)try{null===(t=null==e?void 0:e.detail)||void 0===t||t.finally()}catch(e){console.error(e)}})),(null==e?void 0:e.detail)&&((null==e?void 0:e.detail).promise=n)};document&&(document.removeEventListener("openModal",_),document.addEventListener("openModal",_));export{h as Button,w as FadeModal,g as Modal,b as MoorrModal,C as modals,N as modalsStack};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moorr-react-mui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Moorr React MUI Common Library",
   "scripts": {
     "_clear": "rimraf index.* && rimraf typings/* && rimraf cjs/*",
@@ -20,11 +20,11 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@types/react": "^18.0.27",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/uuid": "^9.0.0",
     "eslint": "^8.26.0",
     "jest": "^29.2.2",
-    "moorr-common": "^0.1.1",
-    "react": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.14.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -34,6 +34,17 @@
     "tslib": "^2.5.0",
     "typescript": "^4.9.5"
   },
+  "peerDependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/styles": "^4.11.4",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.8",
+    "moorr-common": "^0.1.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "jss": "^10.9.2"
+  },
   "main": "cjs/index.js",
   "module": "index.js",
   "files": [
@@ -42,4 +53,4 @@
   ],
   "types": "index.d.ts",
   "styles": "index.css"
-}
+}