@mbpockets/shared-ui 0.2.0 → 0.2.5

package/dist/TablePage/ModalProvider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TablePage/ModalProvider/ModalContext.ts","../../../src/components/shared/Modal/index.tsx","../../../src/components/TablePage/ModalProvider/ModalProvider.tsx"],"names":["_a","jsxs","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\"\r\nimport { createContext, ReactNode, useContext } from \"react\";\r\n\r\ntype ModalContextType = {\r\n  showModal: (content: ReactNode) => void;\r\n  hideModal: () => void;\r\n}\r\n\r\nexport const ModalContext = createContext<ModalContextType>({\r\n  showModal: (content: ReactNode) => {},\r\n  hideModal: () => {},\r\n});\r\n\r\nexport const useModal = () => useContext(ModalContext);","\"use client\"\r\nimport React, { useEffect, useRef } from \"react\";\r\nimport \"./style.css\";\r\n\r\ninterface IModalProps {\r\n  onClose: () => void;\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst Modal: React.FC<IModalProps> = ({ onClose, children }) => {\r\n  const modalRef = useRef<HTMLDivElement>(null);\r\n  const previouslyFocusedElement = useRef<HTMLElement | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (children) {\r\n      previouslyFocusedElement.current = document.activeElement as HTMLElement;\r\n      modalRef.current?.focus();\r\n    }\r\n    return () => {\r\n      previouslyFocusedElement.current?.focus();\r\n    }\r\n  }, [children]);\r\n\r\n  const handleOnClose = () => {\r\n    onClose();\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key !== 'Tab') return;\r\n\r\n    const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(\r\n      'button, [tabindex]:not([tabindex=\"-1\"])'\r\n    );\r\n\r\n    if (!focusableElements || focusableElements.length === 0) return;\r\n\r\n    const first = focusableElements[0];\r\n    const last = focusableElements[focusableElements.length - 1];\r\n\r\n    if (e.shiftKey) {\r\n      // shift + tab\r\n      if (document.activeElement === first) {\r\n        e.preventDefault();\r\n        last.focus();\r\n      }\r\n    } else {\r\n      // tab\r\n      if (document.activeElement === last) {\r\n        e.preventDefault();\r\n        first.focus();\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"modal-overlay\"\r\n      onKeyDown={handleKeyDown}\r\n      ref={modalRef}\r\n      role=\"dialog\"\r\n      tabIndex={-1}\r\n    >\r\n      <div className=\"modal-container\">\r\n        <div className=\"modal-control-strip\">\r\n          <button onClick={handleOnClose}>X</button>\r\n        </div>\r\n        <div className=\"modal-content\">\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Modal;\r\n","\"use client\";\n\nimport React, { ReactNode, useState } from \"react\";\r\nimport { ModalContext } from './ModalContext';\r\nimport Modal from \"@/components/shared/Modal\";\r\n\r\ntype ModalProviderProps = {\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\r\n  const [modalContent, setModalContent] = useState<null | ReactNode>(null);\r\n\r\n  const showModal = (content: ReactNode) => setModalContent(content);\r\n  const hideModal = () => setModalContent(null);\r\n\r\n  return (\r\n    <ModalContext.Provider value={{ showModal, hideModal }}>\r\n      {children}\r\n      {modalContent && (\r\n        <Modal onClose={hideModal}>\r\n          {modalContent}\r\n        </Modal>\r\n      )}\r\n    </ModalContext.Provider>\r\n  );\r\n}\r\n\r\nexport default ModalProvider;"]}
+{"version":3,"sources":["../../../src/components/TablePage/ModalProvider/ModalContext.ts","../../../src/components/TablePage/ModalProvider/ModalProvider.tsx"],"names":["title","_a"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\"\r\nimport { createContext, ReactNode, useContext } from \"react\";\r\n\r\nexport type ModalOptions = {\r\n  acceptText?: string;\r\n  onAccept?: () => void;\r\n  onCancel?: () => void;\r\n}\r\n\r\ntype ModalContextType = {\r\n  showModal: (content: ReactNode, title: string, options?: ModalOptions) => void;\r\n  hideModal: () => void;\r\n}\r\n\r\nexport const ModalContext = createContext<ModalContextType>({\r\n  showModal: () => {},\r\n  hideModal: () => {},\r\n});\r\n\r\nexport const useModal = () => useContext(ModalContext);","\"use client\";\r\n\r\nimport React, { ReactNode, useState } from \"react\";\r\nimport Dialog from \"@mui/material/Dialog\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogActions from \"@mui/material/DialogActions\";\r\nimport Button from \"@mui/material/Button\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\nimport { ModalContext, ModalOptions } from '@/components';\r\nimport {Box} from \"@mui/material\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\n\r\ntype ModalProviderProps = {\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\r\n  const [modalContent, setModalContent] = useState<null | ReactNode>(null);\r\n  const [displayModal, setDisplayModal] = useState(false);\r\n  const [title, setTitle] = useState(\"\");\r\n  const [options, setOptions] = useState<ModalOptions>({});\r\n\r\n  const showModal = (content: ReactNode, title: string, opts?: ModalOptions) => {\r\n    setModalContent(content);\r\n    setTitle(title);\r\n    setOptions(opts ?? {});\r\n    setDisplayModal(true);\r\n  }\r\n  const hideModal = () => {\r\n    setDisplayModal(false);\r\n  };\r\n\r\n  return (\r\n    <ModalContext.Provider value={{ showModal, hideModal }}>\r\n      {children}\r\n      <Dialog open={displayModal} onClose={hideModal} sx={{height: \"85%\"}}>\r\n        <Box>\r\n          <DialogTitle sx={{marginRight: '20px', minWidth: '400px'}}>{title}</DialogTitle>\r\n          <IconButton\r\n            aria-label=\"close\"\r\n            onClick={hideModal}\r\n            sx={{ position: 'absolute', right: 8, top: 8 }}\r\n          >\r\n            <CloseIcon />\r\n          </IconButton>\r\n        </Box>\r\n        <DialogContent sx={{paddingTop: 0}}>\r\n          {modalContent}\r\n        </DialogContent>\r\n        {(options.acceptText || options.onAccept) && (\r\n          <DialogActions>\r\n            <Button variant=\"contained\" onClick={() => { hideModal(); options.onAccept?.(); }}>\r\n              {options.acceptText ?? \"OK\"}\r\n            </Button>\r\n            <Button onClick={() => { hideModal(); options.onCancel?.(); }}>Cancel</Button>\r\n          </DialogActions>\r\n        )}\r\n      </Dialog>\r\n    </ModalContext.Provider>\r\n  );\r\n}\r\n\r\nexport default ModalProvider;"]}

package/dist/TablePage/ModalProvider.cjs

@@ -2,76 +2,77 @@
 'use strict';
 
 var react = require('react');
+var Dialog = require('@mui/material/Dialog');
+var DialogContent = require('@mui/material/DialogContent');
+var DialogActions = require('@mui/material/DialogActions');
+var Button = require('@mui/material/Button');
+var IconButton = require('@mui/material/IconButton');
+var CloseIcon = require('@mui/icons-material/Close');
+var material = require('@mui/material');
+var DialogTitle = require('@mui/material/DialogTitle');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Dialog__default = /*#__PURE__*/_interopDefault(Dialog);
+var DialogContent__default = /*#__PURE__*/_interopDefault(DialogContent);
+var DialogActions__default = /*#__PURE__*/_interopDefault(DialogActions);
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
+var DialogTitle__default = /*#__PURE__*/_interopDefault(DialogTitle);
+
 var ModalContext = react.createContext({
-  showModal: (content) => {
+  showModal: () => {
   },
   hideModal: () => {
   }
 });
 var useModal = () => react.useContext(ModalContext);
-var Modal = ({ onClose, children }) => {
-  const modalRef = react.useRef(null);
-  const previouslyFocusedElement = react.useRef(null);
-  react.useEffect(() => {
-    var _a;
-    if (children) {
-      previouslyFocusedElement.current = document.activeElement;
-      (_a = modalRef.current) == null ? void 0 : _a.focus();
-    }
-    return () => {
-      var _a2;
-      (_a2 = previouslyFocusedElement.current) == null ? void 0 : _a2.focus();
-    };
-  }, [children]);
-  const handleOnClose = () => {
-    onClose();
-  };
-  const handleKeyDown = (e) => {
-    var _a;
-    if (e.key !== "Tab") return;
-    const focusableElements = (_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(
-      'button, [tabindex]:not([tabindex="-1"])'
-    );
-    if (!focusableElements || focusableElements.length === 0) return;
-    const first = focusableElements[0];
-    const last = focusableElements[focusableElements.length - 1];
-    if (e.shiftKey) {
-      if (document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      }
-    } else {
-      if (document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "modal-overlay",
-      onKeyDown: handleKeyDown,
-      ref: modalRef,
-      role: "dialog",
-      tabIndex: -1,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-container", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-control-strip", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleOnClose, children: "X" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-content", children })
-      ] })
-    }
-  );
-};
-var Modal_default = Modal;
 var ModalProvider = ({ children }) => {
+  var _a;
   const [modalContent, setModalContent] = react.useState(null);
-  const showModal = (content) => setModalContent(content);
-  const hideModal = () => setModalContent(null);
+  const [displayModal, setDisplayModal] = react.useState(false);
+  const [title, setTitle] = react.useState("");
+  const [options, setOptions] = react.useState({});
+  const showModal = (content, title2, opts) => {
+    setModalContent(content);
+    setTitle(title2);
+    setOptions(opts != null ? opts : {});
+    setDisplayModal(true);
+  };
+  const hideModal = () => {
+    setDisplayModal(false);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
     children,
-    modalContent && /* @__PURE__ */ jsxRuntime.jsx(Modal_default, { onClose: hideModal, children: modalContent })
+    /* @__PURE__ */ jsxRuntime.jsxs(Dialog__default.default, { open: displayModal, onClose: hideModal, sx: { height: "85%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle__default.default, { sx: { marginRight: "20px", minWidth: "400px" }, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton__default.default,
+          {
+            "aria-label": "close",
+            onClick: hideModal,
+            sx: { position: "absolute", right: 8, top: 8 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogContent__default.default, { sx: { paddingTop: 0 }, children: modalContent }),
+      (options.acceptText || options.onAccept) && /* @__PURE__ */ jsxRuntime.jsxs(DialogActions__default.default, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button__default.default, { variant: "contained", onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onAccept) == null ? void 0 : _a2.call(options);
+        }, children: (_a = options.acceptText) != null ? _a : "OK" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button__default.default, { onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onCancel) == null ? void 0 : _a2.call(options);
+        }, children: "Cancel" })
+      ] })
+    ] })
   ] });
 };
 var ModalProvider_default = ModalProvider;

package/dist/TablePage/ModalProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TablePage/ModalProvider/ModalContext.ts","../../src/components/shared/Modal/index.tsx","../../src/components/TablePage/ModalProvider/ModalProvider.tsx"],"names":["createContext","useContext","useRef","useEffect","_a","jsx","jsxs","useState"],"mappings":"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","file":"ModalProvider.cjs","sourcesContent":["\"use client\"\r\nimport { createContext, ReactNode, useContext } from \"react\";\r\n\r\ntype ModalContextType = {\r\n  showModal: (content: ReactNode) => void;\r\n  hideModal: () => void;\r\n}\r\n\r\nexport const ModalContext = createContext<ModalContextType>({\r\n  showModal: (content: ReactNode) => {},\r\n  hideModal: () => {},\r\n});\r\n\r\nexport const useModal = () => useContext(ModalContext);","\"use client\"\r\nimport React, { useEffect, useRef } from \"react\";\r\nimport \"./style.css\";\r\n\r\ninterface IModalProps {\r\n  onClose: () => void;\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst Modal: React.FC<IModalProps> = ({ onClose, children }) => {\r\n  const modalRef = useRef<HTMLDivElement>(null);\r\n  const previouslyFocusedElement = useRef<HTMLElement | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (children) {\r\n      previouslyFocusedElement.current = document.activeElement as HTMLElement;\r\n      modalRef.current?.focus();\r\n    }\r\n    return () => {\r\n      previouslyFocusedElement.current?.focus();\r\n    }\r\n  }, [children]);\r\n\r\n  const handleOnClose = () => {\r\n    onClose();\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key !== 'Tab') return;\r\n\r\n    const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(\r\n      'button, [tabindex]:not([tabindex=\"-1\"])'\r\n    );\r\n\r\n    if (!focusableElements || focusableElements.length === 0) return;\r\n\r\n    const first = focusableElements[0];\r\n    const last = focusableElements[focusableElements.length - 1];\r\n\r\n    if (e.shiftKey) {\r\n      // shift + tab\r\n      if (document.activeElement === first) {\r\n        e.preventDefault();\r\n        last.focus();\r\n      }\r\n    } else {\r\n      // tab\r\n      if (document.activeElement === last) {\r\n        e.preventDefault();\r\n        first.focus();\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"modal-overlay\"\r\n      onKeyDown={handleKeyDown}\r\n      ref={modalRef}\r\n      role=\"dialog\"\r\n      tabIndex={-1}\r\n    >\r\n      <div className=\"modal-container\">\r\n        <div className=\"modal-control-strip\">\r\n          <button onClick={handleOnClose}>X</button>\r\n        </div>\r\n        <div className=\"modal-content\">\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Modal;\r\n","\"use client\";\n\nimport React, { ReactNode, useState } from \"react\";\r\nimport { ModalContext } from './ModalContext';\r\nimport Modal from \"@/components/shared/Modal\";\r\n\r\ntype ModalProviderProps = {\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\r\n  const [modalContent, setModalContent] = useState<null | ReactNode>(null);\r\n\r\n  const showModal = (content: ReactNode) => setModalContent(content);\r\n  const hideModal = () => setModalContent(null);\r\n\r\n  return (\r\n    <ModalContext.Provider value={{ showModal, hideModal }}>\r\n      {children}\r\n      {modalContent && (\r\n        <Modal onClose={hideModal}>\r\n          {modalContent}\r\n        </Modal>\r\n      )}\r\n    </ModalContext.Provider>\r\n  );\r\n}\r\n\r\nexport default ModalProvider;"]}
+{"version":3,"sources":["../../src/components/TablePage/ModalProvider/ModalContext.ts","../../src/components/TablePage/ModalProvider/ModalProvider.tsx"],"names":["createContext","useContext","useState","title","jsxs","Dialog","Box","jsx","DialogTitle","IconButton","CloseIcon","DialogContent","DialogActions","Button","_a"],"mappings":"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","file":"ModalProvider.cjs","sourcesContent":["\"use client\"\r\nimport { createContext, ReactNode, useContext } from \"react\";\r\n\r\nexport type ModalOptions = {\r\n  acceptText?: string;\r\n  onAccept?: () => void;\r\n  onCancel?: () => void;\r\n}\r\n\r\ntype ModalContextType = {\r\n  showModal: (content: ReactNode, title: string, options?: ModalOptions) => void;\r\n  hideModal: () => void;\r\n}\r\n\r\nexport const ModalContext = createContext<ModalContextType>({\r\n  showModal: () => {},\r\n  hideModal: () => {},\r\n});\r\n\r\nexport const useModal = () => useContext(ModalContext);","\"use client\";\r\n\r\nimport React, { ReactNode, useState } from \"react\";\r\nimport Dialog from \"@mui/material/Dialog\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogActions from \"@mui/material/DialogActions\";\r\nimport Button from \"@mui/material/Button\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\nimport { ModalContext, ModalOptions } from '@/components';\r\nimport {Box} from \"@mui/material\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\n\r\ntype ModalProviderProps = {\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\r\n  const [modalContent, setModalContent] = useState<null | ReactNode>(null);\r\n  const [displayModal, setDisplayModal] = useState(false);\r\n  const [title, setTitle] = useState(\"\");\r\n  const [options, setOptions] = useState<ModalOptions>({});\r\n\r\n  const showModal = (content: ReactNode, title: string, opts?: ModalOptions) => {\r\n    setModalContent(content);\r\n    setTitle(title);\r\n    setOptions(opts ?? {});\r\n    setDisplayModal(true);\r\n  }\r\n  const hideModal = () => {\r\n    setDisplayModal(false);\r\n  };\r\n\r\n  return (\r\n    <ModalContext.Provider value={{ showModal, hideModal }}>\r\n      {children}\r\n      <Dialog open={displayModal} onClose={hideModal} sx={{height: \"85%\"}}>\r\n        <Box>\r\n          <DialogTitle sx={{marginRight: '20px', minWidth: '400px'}}>{title}</DialogTitle>\r\n          <IconButton\r\n            aria-label=\"close\"\r\n            onClick={hideModal}\r\n            sx={{ position: 'absolute', right: 8, top: 8 }}\r\n          >\r\n            <CloseIcon />\r\n          </IconButton>\r\n        </Box>\r\n        <DialogContent sx={{paddingTop: 0}}>\r\n          {modalContent}\r\n        </DialogContent>\r\n        {(options.acceptText || options.onAccept) && (\r\n          <DialogActions>\r\n            <Button variant=\"contained\" onClick={() => { hideModal(); options.onAccept?.(); }}>\r\n              {options.acceptText ?? \"OK\"}\r\n            </Button>\r\n            <Button onClick={() => { hideModal(); options.onCancel?.(); }}>Cancel</Button>\r\n          </DialogActions>\r\n        )}\r\n      </Dialog>\r\n    </ModalContext.Provider>\r\n  );\r\n}\r\n\r\nexport default ModalProvider;"]}

package/dist/TablePage/ModalProvider.d.cts

@@ -2,8 +2,13 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type ModalOptions = {
+    acceptText?: string;
+    onAccept?: () => void;
+    onCancel?: () => void;
+};
 type ModalContextType = {
-    showModal: (content: ReactNode) => void;
+    showModal: (content: ReactNode, title: string, options?: ModalOptions) => void;
     hideModal: () => void;
 };
 declare const ModalContext: React.Context<ModalContextType>;
@@ -14,4 +19,4 @@ type ModalProviderProps = {
 };
 declare const ModalProvider: ({ children }: ModalProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { ModalContext, ModalProvider, useModal };
+export { ModalContext, type ModalOptions, ModalProvider, useModal };

package/dist/TablePage/ModalProvider.d.ts

@@ -2,8 +2,13 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type ModalOptions = {
+    acceptText?: string;
+    onAccept?: () => void;
+    onCancel?: () => void;
+};
 type ModalContextType = {
-    showModal: (content: ReactNode) => void;
+    showModal: (content: ReactNode, title: string, options?: ModalOptions) => void;
     hideModal: () => void;
 };
 declare const ModalContext: React.Context<ModalContextType>;
@@ -14,4 +19,4 @@ type ModalProviderProps = {
 };
 declare const ModalProvider: ({ children }: ModalProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { ModalContext, ModalProvider, useModal };
+export { ModalContext, type ModalOptions, ModalProvider, useModal };

package/dist/TablePage/ModalProvider.mjs

@@ -1,75 +1,66 @@
 "use client";
-import { createContext, useContext, useState, useRef, useEffect } from 'react';
+import { createContext, useContext, useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box } from '@mui/material';
+import DialogTitle from '@mui/material/DialogTitle';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ModalContext = createContext({
-  showModal: (content) => {
+  showModal: () => {
   },
   hideModal: () => {
   }
 });
 var useModal = () => useContext(ModalContext);
-var Modal = ({ onClose, children }) => {
-  const modalRef = useRef(null);
-  const previouslyFocusedElement = useRef(null);
-  useEffect(() => {
-    var _a;
-    if (children) {
-      previouslyFocusedElement.current = document.activeElement;
-      (_a = modalRef.current) == null ? void 0 : _a.focus();
-    }
-    return () => {
-      var _a2;
-      (_a2 = previouslyFocusedElement.current) == null ? void 0 : _a2.focus();
-    };
-  }, [children]);
-  const handleOnClose = () => {
-    onClose();
-  };
-  const handleKeyDown = (e) => {
-    var _a;
-    if (e.key !== "Tab") return;
-    const focusableElements = (_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(
-      'button, [tabindex]:not([tabindex="-1"])'
-    );
-    if (!focusableElements || focusableElements.length === 0) return;
-    const first = focusableElements[0];
-    const last = focusableElements[focusableElements.length - 1];
-    if (e.shiftKey) {
-      if (document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      }
-    } else {
-      if (document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "modal-overlay",
-      onKeyDown: handleKeyDown,
-      ref: modalRef,
-      role: "dialog",
-      tabIndex: -1,
-      children: /* @__PURE__ */ jsxs("div", { className: "modal-container", children: [
-        /* @__PURE__ */ jsx("div", { className: "modal-control-strip", children: /* @__PURE__ */ jsx("button", { onClick: handleOnClose, children: "X" }) }),
-        /* @__PURE__ */ jsx("div", { className: "modal-content", children })
-      ] })
-    }
-  );
-};
-var Modal_default = Modal;
 var ModalProvider = ({ children }) => {
+  var _a;
   const [modalContent, setModalContent] = useState(null);
-  const showModal = (content) => setModalContent(content);
-  const hideModal = () => setModalContent(null);
+  const [displayModal, setDisplayModal] = useState(false);
+  const [title, setTitle] = useState("");
+  const [options, setOptions] = useState({});
+  const showModal = (content, title2, opts) => {
+    setModalContent(content);
+    setTitle(title2);
+    setOptions(opts != null ? opts : {});
+    setDisplayModal(true);
+  };
+  const hideModal = () => {
+    setDisplayModal(false);
+  };
   return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
     children,
-    modalContent && /* @__PURE__ */ jsx(Modal_default, { onClose: hideModal, children: modalContent })
+    /* @__PURE__ */ jsxs(Dialog, { open: displayModal, onClose: hideModal, sx: { height: "85%" }, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { sx: { marginRight: "20px", minWidth: "400px" }, children: title }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "close",
+            onClick: hideModal,
+            sx: { position: "absolute", right: 8, top: 8 },
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(DialogContent, { sx: { paddingTop: 0 }, children: modalContent }),
+      (options.acceptText || options.onAccept) && /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onAccept) == null ? void 0 : _a2.call(options);
+        }, children: (_a = options.acceptText) != null ? _a : "OK" }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onCancel) == null ? void 0 : _a2.call(options);
+        }, children: "Cancel" })
+      ] })
+    ] })
   ] });
 };
 var ModalProvider_default = ModalProvider;

package/dist/TablePage/ModalProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TablePage/ModalProvider/ModalContext.ts","../../src/components/shared/Modal/index.tsx","../../src/components/TablePage/ModalProvider/ModalProvider.tsx"],"names":["_a","jsxs","jsx"],"mappings":"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","file":"ModalProvider.mjs","sourcesContent":["\"use client\"\r\nimport { createContext, ReactNode, useContext } from \"react\";\r\n\r\ntype ModalContextType = {\r\n  showModal: (content: ReactNode) => void;\r\n  hideModal: () => void;\r\n}\r\n\r\nexport const ModalContext = createContext<ModalContextType>({\r\n  showModal: (content: ReactNode) => {},\r\n  hideModal: () => {},\r\n});\r\n\r\nexport const useModal = () => useContext(ModalContext);","\"use client\"\r\nimport React, { useEffect, useRef } from \"react\";\r\nimport \"./style.css\";\r\n\r\ninterface IModalProps {\r\n  onClose: () => void;\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst Modal: React.FC<IModalProps> = ({ onClose, children }) => {\r\n  const modalRef = useRef<HTMLDivElement>(null);\r\n  const previouslyFocusedElement = useRef<HTMLElement | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (children) {\r\n      previouslyFocusedElement.current = document.activeElement as HTMLElement;\r\n      modalRef.current?.focus();\r\n    }\r\n    return () => {\r\n      previouslyFocusedElement.current?.focus();\r\n    }\r\n  }, [children]);\r\n\r\n  const handleOnClose = () => {\r\n    onClose();\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key !== 'Tab') return;\r\n\r\n    const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(\r\n      'button, [tabindex]:not([tabindex=\"-1\"])'\r\n    );\r\n\r\n    if (!focusableElements || focusableElements.length === 0) return;\r\n\r\n    const first = focusableElements[0];\r\n    const last = focusableElements[focusableElements.length - 1];\r\n\r\n    if (e.shiftKey) {\r\n      // shift + tab\r\n      if (document.activeElement === first) {\r\n        e.preventDefault();\r\n        last.focus();\r\n      }\r\n    } else {\r\n      // tab\r\n      if (document.activeElement === last) {\r\n        e.preventDefault();\r\n        first.focus();\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"modal-overlay\"\r\n      onKeyDown={handleKeyDown}\r\n      ref={modalRef}\r\n      role=\"dialog\"\r\n      tabIndex={-1}\r\n    >\r\n      <div className=\"modal-container\">\r\n        <div className=\"modal-control-strip\">\r\n          <button onClick={handleOnClose}>X</button>\r\n        </div>\r\n        <div className=\"modal-content\">\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Modal;\r\n","\"use client\";\n\nimport React, { ReactNode, useState } from \"react\";\r\nimport { ModalContext } from './ModalContext';\r\nimport Modal from \"@/components/shared/Modal\";\r\n\r\ntype ModalProviderProps = {\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\r\n  const [modalContent, setModalContent] = useState<null | ReactNode>(null);\r\n\r\n  const showModal = (content: ReactNode) => setModalContent(content);\r\n  const hideModal = () => setModalContent(null);\r\n\r\n  return (\r\n    <ModalContext.Provider value={{ showModal, hideModal }}>\r\n      {children}\r\n      {modalContent && (\r\n        <Modal onClose={hideModal}>\r\n          {modalContent}\r\n        </Modal>\r\n      )}\r\n    </ModalContext.Provider>\r\n  );\r\n}\r\n\r\nexport default ModalProvider;"]}
+{"version":3,"sources":["../../src/components/TablePage/ModalProvider/ModalContext.ts","../../src/components/TablePage/ModalProvider/ModalProvider.tsx"],"names":["title","_a"],"mappings":";;;;;;;;;;;AAcO,IAAM,eAAe,aAAA,CAAgC;AAAA,EAC1D,WAAW,MAAM;AAAA,EAAC,CAAA;AAAA,EAClB,WAAW,MAAM;AAAA,EAAC;AACpB,CAAC;AAEM,IAAM,QAAA,GAAW,MAAM,UAAA,CAAW,YAAY;ACF9C,IAAM,aAAA,GAAgB,CAAC,EAAE,QAAA,EAAS,KAA0B;AAjBnE,EAAA,IAAA,EAAA;AAkBE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAA2B,IAAI,CAAA;AACvE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,EAAE,CAAA;AACrC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,CAAuB,EAAE,CAAA;AAEvD,EAAA,MAAM,SAAA,GAAY,CAAC,OAAA,EAAoBA,MAAAA,EAAe,IAAA,KAAwB;AAC5E,IAAA,eAAA,CAAgB,OAAO,CAAA;AACvB,IAAA,QAAA,CAASA,MAAK,CAAA;AACd,IAAA,UAAA,CAAW,IAAA,IAAA,IAAA,GAAA,IAAA,GAAQ,EAAE,CAAA;AACrB,IAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,EACtB,CAAA;AACA,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,EACvB,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,aAAa,QAAA,EAAb,EAAsB,OAAO,EAAE,SAAA,EAAW,WAAU,EAClD,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,IAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAM,YAAA,EAAc,OAAA,EAAS,WAAW,EAAA,EAAI,EAAC,MAAA,EAAQ,KAAA,EAAK,EAChE,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,IAAI,EAAC,WAAA,EAAa,QAAQ,QAAA,EAAU,OAAA,IAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBAClE,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAW,OAAA;AAAA,YACX,OAAA,EAAS,SAAA;AAAA,YACT,IAAI,EAAE,QAAA,EAAU,YAAY,KAAA,EAAO,CAAA,EAAG,KAAK,CAAA,EAAE;AAAA,YAE7C,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,OAAA,EACF,CAAA;AAAA,0BACC,aAAA,EAAA,EAAc,EAAA,EAAI,EAAC,UAAA,EAAY,CAAA,IAC7B,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,MAAA,CACE,OAAA,CAAQ,UAAA,IAAc,OAAA,CAAQ,QAAA,0BAC7B,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,WAAA,EAAY,OAAA,EAAS,MAAM;AApDvD,UAAA,IAAAC,GAAAA;AAoDyD,UAAA,SAAA,EAAU;AAAG,UAAA,CAAAA,GAAAA,GAAA,OAAA,CAAQ,QAAA,KAAR,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,QAAsB,CAAA,EAC7E,QAAA,EAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,UAAA,KAAR,IAAA,GAAA,EAAA,GAAsB,IAAA,EACzB,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,MAAM;AAvDnC,UAAA,IAAAA,GAAAA;AAuDqC,UAAA,SAAA,EAAU;AAAG,UAAA,CAAAA,GAAAA,GAAA,OAAA,CAAQ,QAAA,KAAR,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,QAAsB,GAAG,QAAA,EAAA,QAAA,EAAM;AAAA,OAAA,EACvE;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,qBAAA,GAAQ","file":"ModalProvider.mjs","sourcesContent":["\"use client\"\r\nimport { createContext, ReactNode, useContext } from \"react\";\r\n\r\nexport type ModalOptions = {\r\n  acceptText?: string;\r\n  onAccept?: () => void;\r\n  onCancel?: () => void;\r\n}\r\n\r\ntype ModalContextType = {\r\n  showModal: (content: ReactNode, title: string, options?: ModalOptions) => void;\r\n  hideModal: () => void;\r\n}\r\n\r\nexport const ModalContext = createContext<ModalContextType>({\r\n  showModal: () => {},\r\n  hideModal: () => {},\r\n});\r\n\r\nexport const useModal = () => useContext(ModalContext);","\"use client\";\r\n\r\nimport React, { ReactNode, useState } from \"react\";\r\nimport Dialog from \"@mui/material/Dialog\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport DialogActions from \"@mui/material/DialogActions\";\r\nimport Button from \"@mui/material/Button\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\nimport { ModalContext, ModalOptions } from '@/components';\r\nimport {Box} from \"@mui/material\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\n\r\ntype ModalProviderProps = {\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\r\n  const [modalContent, setModalContent] = useState<null | ReactNode>(null);\r\n  const [displayModal, setDisplayModal] = useState(false);\r\n  const [title, setTitle] = useState(\"\");\r\n  const [options, setOptions] = useState<ModalOptions>({});\r\n\r\n  const showModal = (content: ReactNode, title: string, opts?: ModalOptions) => {\r\n    setModalContent(content);\r\n    setTitle(title);\r\n    setOptions(opts ?? {});\r\n    setDisplayModal(true);\r\n  }\r\n  const hideModal = () => {\r\n    setDisplayModal(false);\r\n  };\r\n\r\n  return (\r\n    <ModalContext.Provider value={{ showModal, hideModal }}>\r\n      {children}\r\n      <Dialog open={displayModal} onClose={hideModal} sx={{height: \"85%\"}}>\r\n        <Box>\r\n          <DialogTitle sx={{marginRight: '20px', minWidth: '400px'}}>{title}</DialogTitle>\r\n          <IconButton\r\n            aria-label=\"close\"\r\n            onClick={hideModal}\r\n            sx={{ position: 'absolute', right: 8, top: 8 }}\r\n          >\r\n            <CloseIcon />\r\n          </IconButton>\r\n        </Box>\r\n        <DialogContent sx={{paddingTop: 0}}>\r\n          {modalContent}\r\n        </DialogContent>\r\n        {(options.acceptText || options.onAccept) && (\r\n          <DialogActions>\r\n            <Button variant=\"contained\" onClick={() => { hideModal(); options.onAccept?.(); }}>\r\n              {options.acceptText ?? \"OK\"}\r\n            </Button>\r\n            <Button onClick={() => { hideModal(); options.onCancel?.(); }}>Cancel</Button>\r\n          </DialogActions>\r\n        )}\r\n      </Dialog>\r\n    </ModalContext.Provider>\r\n  );\r\n}\r\n\r\nexport default ModalProvider;"]}