@dashadmin/dash-dialog 1.3.25 → 1.3.28

package/README.md

@@ -0,0 +1,30 @@
+# @dashadmin/dash-dialog
+
+> Dialog components for Dash (AppDialog and friends).
+
+## Overview
+
+Reusable dialog primitives such as `AppDialog` used for confirmations and modal content.
+
+## Key exports & features
+
+- `AppDialog` component
+- Composable dialog primitives
+
+## Installation
+
+```bash
+# From the public npm registry
+npm install @dashadmin/dash-dialog
+
+# Or the local Verdaccio registry (unscoped)
+npm install dash-dialog --registry http://localhost:4873
+```
+
+## Development & publishing
+
+This package is part of the **dash-frontend-core** monorepo. See [`DEVELOPMENT.md`](../../DEVELOPMENT.md) for the source-modification workflow, local Verdaccio publishing, npm publishing and version-bump policy.
+
+---
+
+_Part of the [Dash Framework](https://www.npmjs.com/org/dashadmin) · `@dashadmin` scope._

package/dist/AppDialog.js

@@ -1 +1,127 @@
-import{Fragment as e,jsx as o,jsxs as f}from"react/jsx-runtime";import*as c from"react";import{Dialog as T,DialogTitle as x,DialogContent as k,DialogActions as y,Button as p,Paper as F}from"@mui/material";const I=t=>o(F,{...t}),_=t=>{const{onClose:l,onConfirm:i,onCancel:s,open:a,closeText:w=o(e,{}),confirmText:C=o(e,{}),cancelText:d=o(e,{}),title:u,variant:E,className:m,showCancelButton:g=!1,showConfirmButton:D=!0,dialogActions:h,content:P,children:O,...A}=t,[B,n]=c.useState(a);return c.useEffect(()=>{n(a)},[a]),f(T,{hideBackdrop:!0,disableEnforceFocus:!0,PaperComponent:I,onClose:r=>{n(!1),l&&l()},className:m,open:B,...A,children:[o(x,{id:"alert-dialog-title",children:u}),o(k,{children:O||P}),f(y,{children:[h||o(e,{}),g===!0?o(p,{onClick:r=>{n(!1),s&&s()},children:d}):o(e,{}),D===!0?o(p,{onClick:r=>{n(!1),i&&i()},children:C}):o(e,{})]})]})};var z=_;export{_ as AppDialog,z as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Paper
+} from "@mui/material";
+const PaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(Paper, __spreadValues({}, props));
+};
+const AppDialog = (props) => {
+  const _a = props, {
+    onClose,
+    onConfirm,
+    onCancel,
+    open,
+    closeText = /* @__PURE__ */ jsx(Fragment, {}),
+    confirmText = /* @__PURE__ */ jsx(Fragment, {}),
+    cancelText = /* @__PURE__ */ jsx(Fragment, {}),
+    title,
+    variant,
+    className,
+    showCancelButton = false,
+    showConfirmButton = true,
+    dialogActions,
+    content,
+    children
+  } = _a, rest = __objRest(_a, [
+    "onClose",
+    "onConfirm",
+    "onCancel",
+    "open",
+    "closeText",
+    "confirmText",
+    "cancelText",
+    "title",
+    "variant",
+    "className",
+    "showCancelButton",
+    "showConfirmButton",
+    "dialogActions",
+    "content",
+    "children"
+  ]);
+  const [isModalOpen, setIsModalOpen] = React.useState(open);
+  React.useEffect(() => {
+    setIsModalOpen(open);
+  }, [open]);
+  const handleOnClose = (_e) => {
+    setIsModalOpen(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+  const handleOnCancel = (_e) => {
+    setIsModalOpen(false);
+    if (onCancel) {
+      onCancel();
+    }
+  };
+  const handleOnConfirm = (_e) => {
+    setIsModalOpen(false);
+    if (onConfirm) {
+      onConfirm();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    __spreadProps(__spreadValues({
+      hideBackdrop: true,
+      disableEnforceFocus: true,
+      PaperComponent,
+      onClose: handleOnClose,
+      className,
+      open: isModalOpen
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "alert-dialog-title", children: title }),
+        /* @__PURE__ */ jsx(DialogContent, { children: children || content }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          dialogActions || /* @__PURE__ */ jsx(Fragment, {}),
+          showCancelButton === true ? /* @__PURE__ */ jsx(Button, { onClick: handleOnCancel, children: cancelText }) : /* @__PURE__ */ jsx(Fragment, {}),
+          showConfirmButton === true ? /* @__PURE__ */ jsx(Button, { onClick: handleOnConfirm, children: confirmText }) : /* @__PURE__ */ jsx(Fragment, {})
+        ] })
+      ]
+    })
+  );
+};
+var AppDialog_default = AppDialog;
+export {
+  AppDialog,
+  AppDialog_default as default
+};

package/dist/DialogService.js

@@ -1 +1,82 @@
-import{Fragment as x,jsx as n,jsxs as h}from"react/jsx-runtime";import{AppDialog as P}from"./AppDialog";import{createContext as D,useContext as f,useState as u}from"react";import{Portal as S}from"@mui/material";const l=D(null),E=()=>f(l),v=i=>{const{component:r,componentProps:a={},children:p}=i,s=r||P,c={open:!1,variant:"default",content:"",title:"",children:null},[o,e]=u({...c,...a}),d=()=>{e(null),o.onCancel&&o.onCancel()},C=()=>{e(null),o.onClose&&o.onClose()},g=()=>{e(null),o.onConfirm&&o.onConfirm()},m=t=>{e({...o,...t,...t?{open:!0}:{open:!1}})};return h(x,{children:[n(S,{children:n(s,{sx:{zIndex:1e6},...o,onConfirm:()=>g(),onClose:()=>C(),onCancel:()=>d()})}),n(l.Provider,{value:m,children:p})]})};var H=v;export{l as DialogServiceContext,v as DialogServiceProvider,H as default,E as useDialog};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AppDialog } from "./AppDialog";
+import {
+  createContext,
+  useContext,
+  useState
+} from "react";
+import { Portal } from "@mui/material";
+const DialogServiceContext = createContext(null);
+const useDialog = () => useContext(DialogServiceContext);
+const DialogServiceProvider = (props) => {
+  const { component, componentProps = {}, children } = props;
+  const DialogComponent = component || AppDialog;
+  const defaultState = {
+    open: false,
+    variant: "default",
+    content: "",
+    title: "",
+    children: null
+  };
+  const [dialogState, setDialogState] = useState(__spreadValues(__spreadValues({}, defaultState), componentProps));
+  const handleCancel = () => {
+    setDialogState(null);
+    if (dialogState.onCancel) {
+      dialogState.onCancel();
+    }
+  };
+  const handleClose = () => {
+    setDialogState(null);
+    if (dialogState.onClose) {
+      dialogState.onClose();
+    }
+  };
+  const handleConfirm = () => {
+    setDialogState(null);
+    if (dialogState.onConfirm) {
+      dialogState.onConfirm();
+    }
+  };
+  const exposedDialogHook = (options) => {
+    setDialogState(__spreadValues(__spreadValues(__spreadValues({}, dialogState), options), options ? { open: true } : { open: false }));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      DialogComponent,
+      __spreadProps(__spreadValues({
+        sx: { zIndex: 1e6 }
+      }, dialogState), {
+        onConfirm: () => handleConfirm(),
+        onClose: () => handleClose(),
+        onCancel: () => handleCancel()
+      })
+    ) }),
+    /* @__PURE__ */ jsx(DialogServiceContext.Provider, { value: exposedDialogHook, children })
+  ] });
+};
+var DialogService_default = DialogServiceProvider;
+export {
+  DialogServiceContext,
+  DialogServiceProvider,
+  DialogService_default as default,
+  useDialog
+};

package/dist/index.js

@@ -1,92 +1,12 @@
-import { jsx as e, Fragment as o, jsxs as h } from "react/jsx-runtime";
-import * as x from "react";
-import { createContext as T, useState as A, useContext as _ } from "react";
-import { Dialog as j, DialogTitle as w, DialogContent as E, DialogActions as F, Button as D, Paper as I, Portal as M } from "@mui/material";
-const b = (l) => /* @__PURE__ */ e(I, { ...l }), z = (l) => {
-  const {
-    onClose: i,
-    onConfirm: r,
-    onCancel: c,
-    open: a,
-    closeText: m = /* @__PURE__ */ e(o, {}),
-    confirmText: n = /* @__PURE__ */ e(o, {}),
-    cancelText: t = /* @__PURE__ */ e(o, {}),
-    title: C,
-    variant: p,
-    className: f,
-    showCancelButton: u = !1,
-    showConfirmButton: s = !0,
-    dialogActions: v,
-    content: S,
-    children: P,
-    ...k
-  } = l, [B, d] = x.useState(a);
-  return x.useEffect(() => {
-    d(a);
-  }, [a]), /* @__PURE__ */ h(
-    j,
-    {
-      hideBackdrop: !0,
-      disableEnforceFocus: !0,
-      PaperComponent: b,
-      onClose: (g) => {
-        d(!1), i && i();
-      },
-      className: f,
-      open: B,
-      ...k,
-      children: [
-        /* @__PURE__ */ e(w, { id: "alert-dialog-title", children: C }),
-        /* @__PURE__ */ e(E, { children: P || S }),
-        /* @__PURE__ */ h(F, { children: [
-          v || /* @__PURE__ */ e(o, {}),
-          u === !0 ? /* @__PURE__ */ e(D, { onClick: (g) => {
-            d(!1), c && c();
-          }, children: t }) : /* @__PURE__ */ e(o, {}),
-          s === !0 ? /* @__PURE__ */ e(D, { onClick: (g) => {
-            d(!1), r && r();
-          }, children: n }) : /* @__PURE__ */ e(o, {})
-        ] })
-      ]
-    }
-  );
-}, O = T(null), J = () => _(O), K = (l) => {
-  const { component: i, componentProps: r = {}, children: c } = l, a = i || z, m = {
-    open: !1,
-    variant: "default",
-    content: "",
-    title: "",
-    children: null
-  }, [n, t] = A({ ...m, ...r }), C = () => {
-    t(null), n.onCancel && n.onCancel();
-  }, p = () => {
-    t(null), n.onClose && n.onClose();
-  }, f = () => {
-    t(null), n.onConfirm && n.onConfirm();
-  }, u = (s) => {
-    t({
-      ...n,
-      ...s,
-      ...s ? { open: !0 } : { open: !1 }
-    });
-  };
-  return /* @__PURE__ */ h(o, { children: [
-    /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
-      a,
-      {
-        sx: { zIndex: 1e6 },
-        ...n,
-        onConfirm: () => f(),
-        onClose: () => p(),
-        onCancel: () => C()
-      }
-    ) }),
-    /* @__PURE__ */ e(O.Provider, { value: u, children: c })
-  ] });
-};
+import {
+  DialogServiceProvider,
+  useDialog,
+  DialogServiceContext
+} from "./DialogService";
+import { default as default2 } from "./AppDialog";
 export {
-  O as DialogServiceContext,
-  K as DialogServiceProvider,
-  z as default,
-  J as useDialog
+  DialogServiceContext,
+  DialogServiceProvider,
+  default2 as default,
+  useDialog
 };

package/package.json

@@ -1,123 +1,133 @@
 {
-  "name": "@dashadmin/dash-dialog",
-  "version": "1.3.25",
-  "private": false,
-  "main": "dist/index.js",
-  "type": "module",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "dependencies": {
-    "@emotion/react": "latest",
-    "@emotion/styled": "latest",
-    "@mui/material": "^7.3.10",
-    "@rollup/plugin-alias": "latest",
-    "@rollup/plugin-commonjs": "latest",
-    "@rollup/plugin-node-resolve": "latest",
-    "@rollup/plugin-replace": "latest",
-    "@rollup/plugin-typescript": "latest",
-    "query-string": "latest",
-    "react-admin": "5.14.7",
-    "react-custom-scrollbars-2": "latest",
-    "react-draggable": "latest",
-    "@achmadk/react-loading-overlay": "latest",
-    "react-query": "latest",
-    "react-redux": "latest",
-    "react-router": "7.17.0",
-    "react-router-dom": "7.17.0",
-    "react-spinners": "latest",
-    "react-toastify": "latest",
-    "rollup-plugin-cleaner": "latest",
-    "rollup-plugin-dts": "latest",
-    "rollup-plugin-peer-deps-external": "latest",
-    "rollup-plugin-svg": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "latest",
-    "@babel/preset-env": "latest",
-    "@babel/preset-react": "latest",
-    "@babel/preset-typescript": "latest",
-    "@commitlint/config-conventional": "latest",
-    "@types/node": "latest",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "@zerollup/ts-transform-paths": "latest",
-    "babel-loader": "latest",
-    "eslint": "latest",
-    "eslint-config-airbnb": "latest",
-    "eslint-config-airbnb-typescript": "latest",
-    "eslint-config-prettier": "latest",
-    "eslint-import-resolver-typescript": "latest",
-    "eslint-plugin-html": "latest",
-    "eslint-plugin-import": "latest",
-    "eslint-plugin-jsdoc": "latest",
-    "eslint-plugin-json": "latest",
-    "eslint-plugin-jsx-a11y": "latest",
-    "eslint-plugin-prettier": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
-    "query-string": "latest",
-    "react-dom": "latest",
-    "rollup": "latest",
-    "rollup-plugin-copy-assets": "latest",
-    "rollup-plugin-external-globals": "latest",
-    "rollup-plugin-includepaths": "latest",
-    "rollup-plugin-less": "latest",
-    "@rollup/plugin-node-resolve": "latest",
-    "rollup-plugin-postcss": "latest",
-    "rollup-plugin-sourcemaps": "latest",
-    "rollup-plugin-typescript2": "latest",
-    "tsc-alias": "latest",
-    "ttypescript": "latest",
-    "typescript": "latest",
-    "vite": "^5.2.0",
-    "@dashadmin/dash-eslint": "1.3.25",
-    "@dashadmin/dash-tsconfig": "1.3.25",
-    "@dashadmin/dash-prettier": "1.3.25"
-  },
-  "peerDependencies": {
-    "react": "latest",
-    "@hello-pangea/dnd": "latest",
-    "react-custom-scrollbars-2": "latest",
-    "react-dom": "latest"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "_todo_storybook": {
-    "eslint-plugin-storybook": "latest"
-  },
-  "publishConfig": {
-    "name": "@dashadmin/dash-dialog",
-    "access": "public"
-  },
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js"
-    },
-    "./src/*": {
-      "import": "./dist/*.js"
-    }
-  },
-  "scripts": {
-    "lint": "eslint --ext .ts,.tsx .",
-    "format": "pnpm prettier --write . && pnpm format-check && pnpm lint",
-    "lint:check": "pnpm prettier --check .",
-    "lint:fix": "pnpm prettier --write .",
-    "check-updates": "pnpm npm-check-updates",
-    "updates-packages": "pnpm npm-check-updates -u",
-    "build": "rm -rf dist && node ../dash-build/compile.mjs && vite build"
-  }
-}
+	"name": "@dashadmin/dash-dialog",
+	"version": "1.3.28",
+	"main": "dist/index.js",
+	"type": "module",
+	"scripts": {
+		"lint": "eslint --ext .ts,.tsx .",
+		"format": "pnpm prettier --write . && pnpm format-check && pnpm lint",
+		"lint:check": "pnpm prettier --check .",
+		"lint:fix": "pnpm prettier --write .",
+		"check-updates": "pnpm npm-check-updates",
+		"updates-packages": "pnpm npm-check-updates -u",
+		"build": "tsup"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"dependencies": {
+		"@emotion/react": "latest",
+		"@emotion/styled": "latest",
+		"@mui/material": "^7.3.10",
+		"@rollup/plugin-alias": "latest",
+		"@rollup/plugin-commonjs": "latest",
+		"@rollup/plugin-node-resolve": "latest",
+		"@rollup/plugin-replace": "latest",
+		"@rollup/plugin-typescript": "latest",
+		"query-string": "latest",
+		"react-admin": "5.14.6",
+		"react-custom-scrollbars-2": "latest",
+		"react-draggable": "latest",
+		"react-loading-overlay-ts": "latest",
+		"react-query": "latest",
+		"react-redux": "latest",
+		"react-router": "^7.9.6",
+		"react-router-dom": "^7.9.6",
+		"react-spinners": "latest",
+		"react-toastify": "latest",
+		"rollup-plugin-cleaner": "latest",
+		"rollup-plugin-dts": "latest",
+		"rollup-plugin-peer-deps-external": "latest",
+		"rollup-plugin-svg": "latest"
+	},
+	"devDependencies": {
+		"@babel/core": "latest",
+		"@babel/preset-env": "latest",
+		"@babel/preset-react": "latest",
+		"@babel/preset-typescript": "latest",
+		"@commitlint/config-conventional": "latest",
+		"@types/node": "latest",
+		"@types/react": "latest",
+		"@types/react-dom": "latest",
+		"@zerollup/ts-transform-paths": "latest",
+		"babel-loader": "latest",
+		"eslint": "latest",
+		"eslint-config-airbnb": "latest",
+		"eslint-config-airbnb-typescript": "latest",
+		"eslint-config-prettier": "latest",
+		"@dashadmin/dash-eslint": "workspace:*",
+		"eslint-import-resolver-typescript": "latest",
+		"eslint-plugin-html": "latest",
+		"eslint-plugin-import": "latest",
+		"eslint-plugin-jsdoc": "latest",
+		"eslint-plugin-json": "latest",
+		"eslint-plugin-jsx-a11y": "latest",
+		"eslint-plugin-prettier": "latest",
+		"eslint-plugin-react": "latest",
+		"eslint-plugin-react-hooks": "latest",
+		"@dashadmin/dash-prettier": "workspace:*",
+		"query-string": "latest",
+		"react-dom": "latest",
+		"rollup": "latest",
+		"rollup-plugin-copy-assets": "latest",
+		"rollup-plugin-external-globals": "latest",
+		"rollup-plugin-includepaths": "latest",
+		"rollup-plugin-less": "latest",
+		"rollup-plugin-node-resolve": "latest",
+		"rollup-plugin-postcss": "latest",
+		"rollup-plugin-sourcemaps": "latest",
+		"rollup-plugin-typescript2": "latest",
+		"@dashadmin/dash-tsconfig": "workspace:*",
+		"tsc": "latest",
+		"tsc-alias": "latest",
+		"ttypescript": "latest",
+		"typescript": "latest"
+	},
+	"peerDependencies": {
+		"react": "latest",
+		"react-custom-scrollbars-2": "^4.5.0",
+		"react-dom": "latest"
+	},
+	"eslintConfig": {
+		"extends": "react-app"
+	},
+	"_todo_storybook": {
+		"eslint-plugin-storybook": "latest"
+	},
+	"module": "dist/index.js",
+	"types": "./src/index.ts",
+	"exports": {
+		".": "./dist/index.js",
+		"./*": "./dist/*.js",
+		"./src/*": "./dist/*.js"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"typesVersions": {
+		"*": {
+			"src/*": [
+				"src/*",
+				"src/*/index"
+			],
+			"*": [
+				"src/*",
+				"src/*/index"
+			]
+		}
+	}
+}

package/src/AppDialog.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Paper,
+  PaperProps,
+} from '@mui/material';
+
+//import Draggable from 'react-draggable';
+import IAppDialogProps from './IAppDialogProps';
+
+//const DraggableInstance: any = Draggable;
+
+const PaperComponent = (props: PaperProps) => {
+  /*return <DraggableInstance>
+    <Paper {...props} />
+  </DraggableInstance>*/
+  return <Paper {...props} />
+};
+
+export const AppDialog: React.FC<IAppDialogProps> = (props) => {  const {
+    onClose,
+    onConfirm,
+    onCancel,
+    open,
+    closeText = <></>,
+    confirmText = <></>,
+    cancelText = <></>,
+    title,
+    variant,
+    className,
+    showCancelButton = false,
+    showConfirmButton = true,
+    dialogActions,
+    content,
+    children,
+    ...rest
+  } = props;
+
+  const [isModalOpen, setIsModalOpen] = React.useState(open);
+
+  React.useEffect(() => {
+    setIsModalOpen(open);
+  }, [open]);
+
+  const handleOnClose = (_e: any) => {
+    setIsModalOpen(false);
+    if (onClose) { onClose(); }
+  };
+
+  const handleOnCancel = (_e: any) => {
+    setIsModalOpen(false);
+    if (onCancel) { onCancel(); }
+  };
+
+  const handleOnConfirm = (_e: any) => {
+    setIsModalOpen(false);
+    if (onConfirm) { onConfirm(); }
+  };
+
+  return (
+    <Dialog
+      hideBackdrop
+      disableEnforceFocus
+      PaperComponent={PaperComponent}
+      onClose={handleOnClose}
+      className={className}
+      open={isModalOpen}
+      {...rest}
+    >
+      <DialogTitle id='alert-dialog-title'>{title}</DialogTitle>
+      <DialogContent>{children || content}</DialogContent>
+      <DialogActions>
+        {dialogActions || <></>}
+        {showCancelButton === true ? (
+          <Button onClick={handleOnCancel}>{cancelText}</Button>
+        ) : (
+          <></>
+        )}
+        {showConfirmButton === true ? (
+          <Button onClick={handleOnConfirm} /*autoFocus*/>
+            {confirmText}
+          </Button>
+        ) : (
+          <></>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+
+export default AppDialog;

package/src/DialogService.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import IAppDialogProps, { AppDialogOptions } from './IAppDialogProps';
+
+import { AppDialog } from './AppDialog';
+import {
+	FC,
+	PropsWithChildren,
+	createContext,
+	useContext,
+	useState,
+} from 'react';
+import { Portal } from '@mui/material';
+
+export const DialogServiceContext =
+	createContext<(options: AppDialogOptions) => void>(null);
+
+export const useDialog = () => useContext(DialogServiceContext);
+
+export interface IDialogServiceProviderProps extends PropsWithChildren {
+	component?: FC<IAppDialogProps>;
+	componentProps?: Partial<IAppDialogProps>;
+}
+export const DialogServiceProvider = (props: IDialogServiceProviderProps) => {
+	const { component, componentProps = {}, children } = props;
+
+	const DialogComponent: FC<IAppDialogProps> = component || AppDialog;
+
+	const defaultState: IAppDialogProps = {
+		open: false,
+		variant: 'default',
+		content: '',
+		title: '',
+		children: null,
+	};
+
+	const [dialogState, setDialogState] = useState<IAppDialogProps>({...defaultState,...componentProps});
+
+	/*const openDialog = (options: IAppDialogProps) => {
+    setDialogState({...dialogState,...options});
+  };*/
+
+	const handleCancel = () => {
+		setDialogState(null);
+		if (dialogState.onCancel) {
+			dialogState.onCancel();
+		}
+	};
+
+	const handleClose = () => {
+		setDialogState(null);
+		if (dialogState.onClose) {
+			dialogState.onClose();
+		}
+	};
+
+	const handleConfirm = () => {
+		setDialogState(null);
+		if (dialogState.onConfirm) {
+			dialogState.onConfirm();
+		}
+	};
+
+	const exposedDialogHook = (options: AppDialogOptions) => {
+		setDialogState({
+			...dialogState,
+			...options,
+			...(options ? { open: true } : { open: false }),
+		});
+	};
+
+	return <>
+		<Portal><DialogComponent sx={{ zIndex: 1000000 }} // Ensure modal is on top
+			//open={Boolean(dialogState)}
+			{...dialogState}
+			/*...(dialogState?.onSubmit && { onSubmit:() => handleSubmit() })*/
+			/*...(dialogState?.onClose && { onClose:() => handleClose() })*/
+			onConfirm={() => handleConfirm()}
+			onClose={() => handleClose()}
+			onCancel={() => handleCancel()}
+		/>
+        </Portal>
+		<DialogServiceContext.Provider value={exposedDialogHook}>
+			{children}
+		</DialogServiceContext.Provider>
+	</>;
+};
+
+export default DialogServiceProvider;

package/src/IAppDialogProps.ts

@@ -0,0 +1,39 @@
+import { ModalProps } from '@mui/material';
+import { JSX, PropsWithChildren } from 'react';
+
+export interface IAppDialogProps extends PropsWithChildren<Omit<ModalProps, 'content' | 'title'| 'children'>> {	/** */
+	variant: 'default' | 'info' | 'success' | 'danger';
+	/** */
+	//onSubmit?: () => void;
+	/** */
+	onClose?: () => void;
+	/** */
+	onConfirm?: () => void;
+	/** */
+	onCancel?: () => void;
+	/** */
+	closeText?: React.ReactNode;
+	/** */
+	confirmText?: React.ReactNode;
+	/** */
+	cancelText?: React.ReactNode;
+	/** */
+	showCancelButton?: boolean;
+    /** */
+	showCloseButton?: boolean;
+	/** */
+	showConfirmButton?: boolean;
+	/** */
+	dialogActions?: JSX.Element;
+
+	/** */
+	title: string | JSX.Element;
+	/** */
+	content?: string | JSX.Element;
+	/** enable/disable sound (optional) */
+   
+	sound?: boolean;
+}
+export type AppDialogOptions = Omit<IAppDialogProps, 'open' | 'children'>;
+
+export default IAppDialogProps;

package/src/index.ts

@@ -0,0 +1,7 @@
+export {
+	DialogServiceProvider,
+	useDialog,
+	DialogServiceContext,
+} from './DialogService';
+
+export { default } from "./AppDialog";