@mbpockets/shared-ui 0.1.18

package/dist/TablePage/ModalProvider.cjs

@@ -0,0 +1,83 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ModalContext = react.createContext({
+  showModal: (content) => {
+  },
+  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 }) => {
+  const [modalContent, setModalContent] = react.useState(null);
+  const showModal = (content) => setModalContent(content);
+  const hideModal = () => setModalContent(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    modalContent && /* @__PURE__ */ jsxRuntime.jsx(Modal_default, { onClose: hideModal, children: modalContent })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
+
+exports.ModalContext = ModalContext;
+exports.ModalProvider = ModalProvider_default;
+exports.useModal = useModal;
+//# sourceMappingURL=ModalProvider.cjs.map
+//# sourceMappingURL=ModalProvider.cjs.map

package/dist/TablePage/ModalProvider.cjs.map

@@ -0,0 +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;"]}

package/dist/TablePage/ModalProvider.css

@@ -0,0 +1,49 @@
+/* src/components/shared/Modal/style.css */
+.modal-container {
+  margin: auto;
+  color: #000000;
+  top: 20px;
+  flex-direction: column;
+  width: fit-content;
+  height: fit-content;
+  background-color: lightgrey;
+  display: flex;
+}
+.modal-overlay {
+  position: fixed;
+  margin: auto;
+  color: #000000;
+  top: 20px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+.modal-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.modal-content button {
+  border: outset 1px;
+  border-radius: 0;
+  color: black;
+  cursor: pointer;
+  margin: auto;
+  padding: 8px 48px;
+}
+.modal-content button:focus {
+  outline: 1px dotted #333;
+  outline-offset: -4px;
+}
+.modal-control-strip {
+  align-content: end;
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
+}
+/*# sourceMappingURL=ModalProvider.css.map */

package/dist/TablePage/ModalProvider.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/shared/Modal/style.css"],"sourcesContent":["\r\n    .modal-container {\r\n        margin: auto;\r\n        color: #000000;\r\n        top: 20px;\r\n        flex-direction: column;\r\n        width: fit-content;\r\n        height: fit-content;\r\n        background-color: lightgrey;\r\n        display: flex;\r\n    }\r\n\r\n    .modal-overlay {\r\n        position: fixed;\r\n        margin: auto;\r\n        color: #000000;\r\n        top: 20px;\r\n        flex-direction: column;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.5);\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 1000;\r\n    }\r\n    .modal-content {\r\n        padding: 20px;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    .modal-content button {\r\n            border: outset 1px;\r\n            border-radius: 0;\r\n            color: black;\r\n            cursor: pointer;\r\n            margin: auto;\r\n            padding: 8px 48px;\r\n        }\r\n    .modal-content button:focus {\r\n            outline: 1px dotted #333;\r\n            outline-offset: -4px;\r\n    }\r\n    .modal-control-strip {\r\n        align-content: end;\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        padding: 5px;\r\n    }"],"mappings":";AACI,CAAC;AACG,UAAQ;AACR,SAAO;AACP,OAAK;AACL,kBAAgB;AAChB,SAAO;AACP,UAAQ;AACR,oBAAkB;AAClB,WAAS;AACb;AAEA,CAAC;AACG,YAAU;AACV,UAAQ;AACR,SAAO;AACP,OAAK;AACL,kBAAgB;AAChB,SAAO;AACP,UAAQ;AACR,oBAAkB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAChC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACT,WAAS;AACT,kBAAgB;AACpB;AACA,CALC,cAKc;AACP,UAAQ,OAAO;AACf,iBAAe;AACf,SAAO;AACP,UAAQ;AACR,UAAQ;AACR,WAAS,IAAI;AACjB;AACJ,CAbC,cAac,MAAM;AACb,WAAS,IAAI,OAAO;AACpB,kBAAgB;AACxB;AACA,CAAC;AACG,iBAAe;AACf,WAAS;AACT,mBAAiB;AACjB,WAAS;AACb;","names":[]}

package/dist/TablePage/ModalProvider.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ModalContextType = {
+    showModal: (content: ReactNode) => void;
+    hideModal: () => void;
+};
+declare const ModalContext: React.Context<ModalContextType>;
+declare const useModal: () => ModalContextType;
+
+type ModalProviderProps = {
+    children: ReactNode;
+};
+declare const ModalProvider: ({ children }: ModalProviderProps) => react_jsx_runtime.JSX.Element;
+
+export { ModalContext, ModalProvider, useModal };

package/dist/TablePage/ModalProvider.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ModalContextType = {
+    showModal: (content: ReactNode) => void;
+    hideModal: () => void;
+};
+declare const ModalContext: React.Context<ModalContextType>;
+declare const useModal: () => ModalContextType;
+
+type ModalProviderProps = {
+    children: ReactNode;
+};
+declare const ModalProvider: ({ children }: ModalProviderProps) => react_jsx_runtime.JSX.Element;
+
+export { ModalContext, ModalProvider, useModal };

package/dist/TablePage/ModalProvider.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { createContext, useContext, useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ModalContext = createContext({
+  showModal: (content) => {
+  },
+  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 }) => {
+  const [modalContent, setModalContent] = useState(null);
+  const showModal = (content) => setModalContent(content);
+  const hideModal = () => setModalContent(null);
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    modalContent && /* @__PURE__ */ jsx(Modal_default, { onClose: hideModal, children: modalContent })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
+
+export { ModalContext, ModalProvider_default as ModalProvider, useModal };
+//# sourceMappingURL=ModalProvider.mjs.map
+//# sourceMappingURL=ModalProvider.mjs.map

package/dist/TablePage/ModalProvider.mjs.map

@@ -0,0 +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;"]}