react-imperial-modal 1.1.5 → 2.0.1

package/README.md

@@ -92,16 +92,6 @@ const Prompt = function(props) {
     <button onClick={() => close(promptValue)}>ok</button>
   </div>
 }
-
-const Alert = function(props) {
-  const { message, close } = props
-  
-  return <div>
-    <h1>Alert</h1>
-    <p>{message}</p>
-    <button onClick={close}>ok</button>
-  </div>
-}
 ```
 
 you can:

package/dist/Modal.d.ts

@@ -0,0 +1,7 @@
+import { ModalEntry } from './types';
+type InternalModalProps<T, P> = {
+    entry: ModalEntry<T, P>;
+    className?: string;
+};
+declare const Modal: <T, P>({ className, entry }: InternalModalProps<T, P>) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/ModalProvider.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ModalContextValue, ModalProviderProps } from './types';
+export declare const ModalContext: React.Context<ModalContextValue>;
+export declare const ModalProvider: ({ children, config }: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const withResolvers: <T>() => {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: unknown) => void;
+};
+export declare const ESC_KEY = "Escape";
+export declare const focusableSelector: string;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { ModalProvider } from './ModalProvider';
+import { useModal } from './useModal';
+import { ModalProps, ModalProviderConfig } from './types';
+export { ModalProvider, useModal };
+export type { ModalProps, ModalProviderConfig };

package/dist/react-imperial-modal.d.ts

@@ -0,0 +1,2 @@
+export * from './index'
+export {}

package/dist/react-imperial-modal.js

@@ -0,0 +1,142 @@
+import { jsx as C, jsxs as O } from "react/jsx-runtime";
+import I, { useRef as P, useContext as A, useLayoutEffect as K, useCallback as u, useState as L, useMemo as R } from "react";
+const q = () => {
+  let s, t;
+  return { promise: new Promise((i, l) => {
+    s = i, t = l;
+  }), resolve: s, reject: t };
+}, D = "Escape", N = [
+  "a[href]:not([tabindex='-1'])",
+  "area[href]:not([tabindex='-1'])",
+  "input:not([disabled]):not([tabindex='-1'])",
+  "select:not([disabled]):not([tabindex='-1'])",
+  "textarea:not([disabled]):not([tabindex='-1'])",
+  "button:not([disabled]):not([tabindex='-1'])",
+  "iframe:not([tabindex='-1'])",
+  "[tabindex]:not([tabindex='-1'])",
+  "[contentEditable=true]:not([tabindex='-1'])"
+].join(", "), B = function({ className: s, entry: t }) {
+  const { role: a = "dialog", label: i, labelledby: l, componentProps: d, Component: M } = t, n = P(null), { removeModal: m } = A(S);
+  K(() => {
+    requestAnimationFrame(() => {
+      var r;
+      n.current && (n.current.showModal(), (r = n.current.querySelector(N)) == null || r.focus());
+    });
+  }, []);
+  const f = u(
+    (r) => {
+      r.key === D && !t.ignoreEscape && m(t.instanceId);
+    },
+    [t, m]
+  );
+  return /* @__PURE__ */ C(
+    "dialog",
+    {
+      ref: n,
+      role: a,
+      "aria-label": i,
+      "aria-labelledby": l,
+      className: s,
+      onKeyDown: f,
+      children: /* @__PURE__ */ C(
+        M,
+        {
+          close: t.closeModal,
+          resolve: t.resolveModal,
+          reject: t.rejectModal,
+          ...d
+        }
+      )
+    }
+  );
+}, g = () => {
+  throw new Error(
+    "Attempted to call useModal outside of modal context. Make sure your component is inside ModalProvider."
+  );
+}, S = I.createContext({
+  addModal: g,
+  removeModal: g,
+  resolveModal: g,
+  rejectModal: g
+}), F = {
+  bodyOpenClass: "modal-open",
+  modalContainerClass: "modals",
+  modalClass: "modal"
+}, w = document.documentElement, k = document.body, Y = ({ children: s, config: t = {} }) => {
+  const [a, i] = L([]), l = R(() => ({ ...F, ...t }), [t]), d = P(null), M = P([]), n = a.at(-1), m = u(() => {
+    var e;
+    k.classList.add(l.bodyOpenClass), (e = d == null ? void 0 : d.current) == null || e.setAttribute("aria-hidden", "true"), w.style.overflow = "hidden";
+  }, [l]), f = u(() => {
+    var e;
+    k.classList.remove(l.bodyOpenClass), (e = d == null ? void 0 : d.current) == null || e.removeAttribute("aria-hidden"), w.style.overflow = "";
+  }, [l]), r = u(
+    (e) => {
+      i((o) => o.includes(e) ? o : (o.length === 0 && m(), M.current.push(document.activeElement), [...o, e]));
+    },
+    [m]
+  ), p = u(
+    (e) => {
+      i((o) => {
+        const E = o.find((y) => y.instanceId === e), c = e === void 0 ? n : E, v = o.length === 1, j = M.current.pop();
+        return !c || !o.includes(c) ? o : (v && j && w.contains(j) && j.focus(), v && f(), o.filter((y) => c !== y));
+      });
+    },
+    [f, n]
+  ), b = u(
+    (e, o) => {
+      const E = a.find((v) => v.instanceId === o), c = o === void 0 ? n : E;
+      c == null || c.resolveModal(e || null);
+    },
+    [a, n]
+  ), x = u(
+    (e, o) => {
+      const E = a.find((v) => v.instanceId === o), c = o === void 0 ? n : E;
+      c == null || c.rejectModal(e || null);
+    },
+    [a, n]
+  ), h = R(
+    () => ({ addModal: r, removeModal: p, resolveModal: b, rejectModal: x }),
+    [r, p, b, x]
+  );
+  return /* @__PURE__ */ O(S.Provider, { value: h, children: [
+    /* @__PURE__ */ C("div", { ref: d, children: s }),
+    /* @__PURE__ */ C("div", { className: l.modalContainerClass, children: a.map((e) => /* @__PURE__ */ C(
+      B,
+      {
+        className: l.modalClass,
+        entry: e
+      },
+      e.instanceId
+    )) })
+  ] });
+};
+let T = 1;
+const _ = () => {
+  const s = A(S);
+  return [u(
+    (a, i, l = !1, d, M, n = "dialog") => {
+      const { promise: m, resolve: f, reject: r } = q(), p = (T++ / 5).toString(32), b = () => s.removeModal(p), x = Object.assign(m, {
+        instanceId: p,
+        Component: a,
+        componentProps: i,
+        ignoreEscape: l,
+        labelledby: M,
+        label: d,
+        role: n,
+        resolveModal: (h) => {
+          f(h), b();
+        },
+        rejectModal: (h) => {
+          r(h), b();
+        },
+        closeModal: b
+      });
+      return s.addModal(x), x;
+    },
+    [s]
+  ), s.resolveModal, s.rejectModal];
+};
+export {
+  Y as ModalProvider,
+  _ as useModal
+};

package/dist/react-imperial-modal.umd.cjs

@@ -0,0 +1 @@
+(function(u,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],c):(u=typeof globalThis<"u"?globalThis:u||self,c(u["react-imperial-modal"]={},u.jsxRuntime,u.React))})(this,(function(u,c,e){"use strict";const O=()=>{let l,n;return{promise:new Promise((f,d)=>{l=f,n=d}),resolve:l,reject:n}},q="Escape",A=["a[href]:not([tabindex='-1'])","area[href]:not([tabindex='-1'])","input:not([disabled]):not([tabindex='-1'])","select:not([disabled]):not([tabindex='-1'])","textarea:not([disabled]):not([tabindex='-1'])","button:not([disabled]):not([tabindex='-1'])","iframe:not([tabindex='-1'])","[tabindex]:not([tabindex='-1'])","[contentEditable=true]:not([tabindex='-1'])"].join(", "),T=function({className:l,entry:n}){const{role:a="dialog",label:f,labelledby:d,componentProps:r,Component:M}=n,s=e.useRef(null),{removeModal:b}=e.useContext(g);e.useLayoutEffect(()=>{requestAnimationFrame(()=>{var m;s.current&&(s.current.showModal(),(m=s.current.querySelector(A))==null||m.focus())})},[]);const v=e.useCallback(m=>{m.key===q&&!n.ignoreEscape&&b(n.instanceId)},[n,b]);return c.jsx("dialog",{ref:s,role:a,"aria-label":f,"aria-labelledby":d,className:l,onKeyDown:v,children:c.jsx(M,{close:n.closeModal,resolve:n.resolveModal,reject:n.rejectModal,...r})})},y=()=>{throw new Error("Attempted to call useModal outside of modal context. Make sure your component is inside ModalProvider.")},g=e.createContext({addModal:y,removeModal:y,resolveModal:y,rejectModal:y}),I={bodyOpenClass:"modal-open",modalContainerClass:"modals",modalClass:"modal"},k=document.documentElement,S=document.body,K=({children:l,config:n={}})=>{const[a,f]=e.useState([]),d=e.useMemo(()=>({...I,...n}),[n]),r=e.useRef(null),M=e.useRef([]),s=a.at(-1),b=e.useCallback(()=>{var o;S.classList.add(d.bodyOpenClass),(o=r==null?void 0:r.current)==null||o.setAttribute("aria-hidden","true"),k.style.overflow="hidden"},[d]),v=e.useCallback(()=>{var o;S.classList.remove(d.bodyOpenClass),(o=r==null?void 0:r.current)==null||o.removeAttribute("aria-hidden"),k.style.overflow=""},[d]),m=e.useCallback(o=>{f(t=>t.includes(o)?t:(t.length===0&&b(),M.current.push(document.activeElement),[...t,o]))},[b]),h=e.useCallback(o=>{f(t=>{const E=t.find(P=>P.instanceId===o),i=o===void 0?s:E,x=t.length===1,w=M.current.pop();return!i||!t.includes(i)?t:(x&&w&&k.contains(w)&&w.focus(),x&&v(),t.filter(P=>i!==P))})},[v,s]),p=e.useCallback((o,t)=>{const E=a.find(x=>x.instanceId===t),i=t===void 0?s:E;i==null||i.resolveModal(o||null)},[a,s]),C=e.useCallback((o,t)=>{const E=a.find(x=>x.instanceId===t),i=t===void 0?s:E;i==null||i.rejectModal(o||null)},[a,s]),j=e.useMemo(()=>({addModal:m,removeModal:h,resolveModal:p,rejectModal:C}),[m,h,p,C]);return c.jsxs(g.Provider,{value:j,children:[c.jsx("div",{ref:r,children:l}),c.jsx("div",{className:d.modalContainerClass,children:a.map(o=>c.jsx(T,{className:d.modalClass,entry:o},o.instanceId))})]})};let L=1;const D=()=>{const l=e.useContext(g);return[e.useCallback((a,f,d=!1,r,M,s="dialog")=>{const{promise:b,resolve:v,reject:m}=O(),h=(L++/5).toString(32),p=()=>l.removeModal(h),C=Object.assign(b,{instanceId:h,Component:a,componentProps:f,ignoreEscape:d,labelledby:M,label:r,role:s,resolveModal:j=>{v(j),p()},rejectModal:j=>{m(j),p()},closeModal:p});return l.addModal(C),C},[l]),l.resolveModal,l.rejectModal]};u.ModalProvider=K,u.useModal=D,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export interface ModalProps<T> {
+    resolve: (val: T | null) => void;
+    reject: (reason?: unknown) => void;
+    close: () => void;
+}
+export type ModalEntry<T, P> = Promise<T | null> & {
+    instanceId: string;
+    Component: React.ComponentType<P & ModalProps<T>>;
+    componentProps: P;
+    resolveModal: (val: T | null) => void;
+    rejectModal: (reason?: unknown) => void;
+    closeModal: () => void;
+    ignoreEscape?: boolean;
+    labelledby?: string;
+    label?: string;
+    role?: string;
+};
+export type ModalProviderConfig = {
+    bodyOpenClass?: string;
+    modalContainerClass?: string;
+    modalClass?: string;
+};
+export type ModalProviderProps = {
+    children?: ReactNode;
+    config?: ModalProviderConfig;
+};
+export type ModalContextValue = {
+    addModal: (entry: ModalEntry<unknown, unknown>) => void;
+    removeModal: (instanceId?: string) => void;
+    resolveModal: (val: unknown | null, instanceId?: string) => void;
+    rejectModal: (val: unknown | null, instanceId?: string) => void;
+};

package/dist/useModal.d.ts

@@ -0,0 +1,2 @@
+import { ModalEntry, ModalProps } from './types';
+export declare const useModal: () => readonly [<T, P>(Component: React.ComponentType<P & ModalProps<T>>, componentProps: P, ignoreEscape?: boolean, label?: string, labelledby?: string, role?: string) => ModalEntry<T, P>, (val: unknown | null, instanceId?: string) => void, (val: unknown | null, instanceId?: string) => void];

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "react-imperial-modal",
-  "version": "1.1.5",
+  "version": "2.0.1",
   "description": "imperative modal api for react",
   "author": "Greg Archer (greg.taff@gmail.com)",
   "license": "MIT",
   "homepage": "https://github.com/nihlton/react-imperial-modal#readme",
-  "main": "build/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nihlton/react-imperial-modal.git"
@@ -18,34 +17,50 @@
     "modal",
     "imperative"
   ],
-  "scripts": {
-    "start": "webpack --watch",
-    "build": "webpack"
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/react-imperial-modal.umd.cjs",
+  "module": "./dist/react-imperial-modal.js",
+  "types": "./dist/react-imperial-modal.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/react-imperial-modal.d.ts",
+      "import": "./dist/react-imperial-modal.js",
+      "require": "./dist/react-imperial-modal.umd.cjs"
+    }
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
-  "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-es2015": "^7.0.0-beta.53",
-    "@babel/preset-react": "^7.0.0",
-    "babel-cli": "^6.26.0",
-    "babel-loader": "^8.0.6",
-    "html-webpack-plugin": "^3.2.0",
-    "webpack": "^4.35.0",
-    "webpack-cli": "^3.0.4",
-    "ts-loader": "^7.0.0"
+  "dependencies": {},
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit"
   },
-  "dependencies": {
-    "@types/jest": "^25.2.2",
-    "@types/node": "^14.0.1",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "typescript": "^3.9.2"
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "sass": "^1.95.1",
+    "simpl-grid": "2.0.14",
+    "source-map-loader": "^0.2.4",
+    "ts-loader": "^7.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.50.1",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [ "@babel/preset-react", "@babel/preset-env"],
-  "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-transform-react-jsx",
-    "@babel/plugin-proposal-class-properties"
-  ]
-}

package/build/index.js

@@ -1,2 +0,0 @@
-module.exports=function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){e.exports=require("react")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ModalContext=void 0;const o=n(0),r=e=>{throw new Error("Attempted to call useModal outside of modal context. Make sure your component is inside ModalProvider.")};t.ModalContext=o.createContext({addModal:r,removeModal:r})},function(e,t,n){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),r=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||t.hasOwnProperty(n)||o(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),r(n(3),t),r(n(5),t)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ModalProvider=void 0;const o=n(0),r=n(1),l=n(4),{useRef:a,useState:d,useCallback:s,useMemo:i}=o,u={bodyOpenClass:"modal-open",modalShadeClass:"modal-shade",modalContainerClass:"modals",modalClass:"modal"},c=[];t.ModalProvider=({children:e,config:t={},appElement:n=(()=>{})})=>{const[f,m]=d([]),b=Object.assign(Object.assign({},u),t),v=a(),p=s(e=>{c.push(document.activeElement),0===f.length&&(()=>{const e=n()||(null==v?void 0:v.current);document.documentElement.style.overflow="hidden",document.body.classList.add(b.bodyOpenClass),e.setAttribute("aria-hidden","true")})(),f.includes(e)?console.warn("tried to open a modal that was already opened"):m(t=>[...t,e])},[f]),y=s(e=>{const t=c.pop();document.documentElement.contains(t)&&t.focus(),1===f.length&&(()=>{var e;const t=n()||(null==v?void 0:v.current);document.documentElement.style.overflow="",null===(e=null===document||void 0===document?void 0:document.body)||void 0===e||e.classList.remove(b.bodyOpenClass),t.removeAttribute("aria-hidden")})(),f.includes(e)?m(t=>{const n=[...t];return n.splice(n.indexOf(e),1),n}):console.warn("tried to close a modal that isn't open")},[f]),x=i(()=>({addModal:p,removeModal:y}),[f]),M=e=>{e.resolver(),y(e)};return o.createElement(r.ModalContext.Provider,{value:x},o.createElement(o.Fragment,null,o.createElement("div",{ref:v},e),f.length>0&&o.createElement("div",{className:b.modalContainerClass,onKeyDown:e=>{const t=f.slice(-1)[0];"Escape"===e.key&&t.userDismiss&&M(t)}},f.map((e,t)=>o.createElement(l.default,{key:"modal-"+t,className:b.modalClass,label:e.label,role:e.role},e.modal)),o.createElement("div",{className:b.modalShadeClass,onClick:()=>{f.slice(-1)[0].userDismiss&&M(f.slice(-1)[0])}}))))}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=n(0),{useRef:r,useEffect:l}=o,a=["a[href]:not([tabindex='-1'])","area[href]:not([tabindex='-1'])","input:not([disabled]):not([tabindex='-1'])","select:not([disabled]):not([tabindex='-1'])","textarea:not([disabled]):not([tabindex='-1'])","button:not([disabled]):not([tabindex='-1'])","iframe:not([tabindex='-1'])","[tabindex]:not([tabindex='-1'])","[contentEditable=true]:not([tabindex='-1'])"].join(", ");t.default=function(e){const{className:t,children:n,label:d,role:s}=e,i=r();l(()=>{u([0,1])},[i]);const u=e=>{var t;const n=(Array.from(null===(t=null==i?void 0:i.current)||void 0===t?void 0:t.querySelectorAll(a))||[]).slice(...e)[0];n&&n.focus()};return o.createElement(o.Fragment,null,o.createElement("div",{tabIndex:0,onFocus:()=>u([-1])}),o.createElement("div",{role:s,"aria-label":d,ref:i,className:t},n),o.createElement("div",{tabIndex:0,onFocus:()=>u([0,1])}))}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.useModal=t.usePrevious=void 0;const o=n(0),r=n(1);function l(e){const t=o.useRef();return o.useEffect(()=>{t.current=e},[e]),t.current}t.usePrevious=l,t.useModal=()=>{const[e,t]=o.useState([]),n=l(e)||[],a=o.useContext(r.ModalContext);o.useEffect(()=>{const t=e.filter(e=>!n.includes(e)),o=n.filter(t=>!e.includes(t));t.forEach(e=>{a.addModal(e)}),o.forEach(e=>{a.removeModal(e)})},[e]);return[(e,n="",o="dialog",r=!0)=>{let l;const a=new Promise(e=>{l=e}),d={modal:e,resolver:l,label:n,role:o,userDismiss:r};return t(e=>[...e,d]),a},(e,n)=>{t(t=>{const o=t.find(t=>t.modal===e),r=[...t];return r.splice(r.indexOf(o),1),o.resolver(n),r})}]}}]);
-//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"react\"","webpack:///./src/ModalContext.ts","webpack:///./src/index.ts","webpack:///./src/ModalProvider.tsx","webpack:///./src/Modal.tsx","webpack:///./src/useModal.ts"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","require","useWithoutProvider","modalEntry","Error","ModalContext","React","createContext","addModal","removeModal","useRef","useState","useCallback","useMemo","defaultConfig","bodyOpenClass","modalShadeClass","modalContainerClass","modalClass","previouslyFocusedElements","ModalProvider","children","config","appElement","modalEntries","setModalEntries","configuration","appContainer","push","document","activeElement","length","ariaTarget","current","documentElement","style","overflow","body","classList","add","setAttribute","modalSetup","includes","console","warn","openModals","previouslyFocusedElement","pop","contains","focus","remove","removeAttribute","modalTakeDown","newModals","splice","indexOf","contextValue","internalClose","entry","resolver","Provider","Fragment","ref","className","onKeyDown","event","topModal","slice","userDismiss","map","label","role","modal","onClick","useEffect","focusableSelector","join","props","modalRef","handleTabBoundary","indexes","element","Array","from","querySelectorAll","tabIndex","onFocus","usePrevious","useModal","localModalEntries","setLocalModalEntries","prevEntries","context","useContext","addedModals","filter","removedModals","forEach","modalPromise","Promise","resolve","currentModalEntries","result","thisEntry","find","newModalEntries"],"mappings":"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","file":"../build/index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n","module.exports = require(\"react\");","import * as React from 'react'\r\nimport {ModalEntry} from \"./types\";\r\n\r\nconst useWithoutProvider = (modalEntry : ModalEntry) : void => {\r\n  throw new Error( 'Attempted to call useModal outside of modal context. Make sure your component is inside ModalProvider.' )\r\n}\r\n\r\nexport const ModalContext = React.createContext({\r\n  addModal: useWithoutProvider,\r\n  removeModal: useWithoutProvider\r\n})\r\n","export * from './ModalProvider'\r\nexport * from './useModal'\r\n","import * as React from 'react'\r\nimport { ReactElement } from 'react'\r\nimport { ModalContext } from './ModalContext'\r\nimport Modal from './Modal'\r\n\r\nimport { ModalEntry, ModalProviderProps } from './types'\r\n\r\nconst { useRef, useState, useCallback, useMemo } = React\r\n\r\nconst defaultConfig = {\r\n  bodyOpenClass: 'modal-open',\r\n  modalShadeClass: 'modal-shade',\r\n  modalContainerClass: 'modals',\r\n  modalClass: 'modal'\r\n}\r\n\r\nconst previouslyFocusedElements : HTMLElement[] = []\r\nconst ESC_KEY = 'Escape'\r\n\r\n\r\nexport const ModalProvider = ({ children, config = {}, appElement = () => {} }: ModalProviderProps ) : ReactElement => {\r\n  const [ modalEntries, setModalEntries ] = useState([])\r\n  const configuration = {...defaultConfig, ...config}\r\n  const appContainer = useRef()\r\n  \r\n  const modalSetup = () : void => {\r\n    // showing first modal\r\n    const ariaTarget = appElement() || appContainer?.current\r\n    document.documentElement.style.overflow = 'hidden'\r\n    document.body.classList.add(configuration.bodyOpenClass)\r\n    ariaTarget.setAttribute('aria-hidden', 'true');\r\n  }\r\n  \r\n  const modalTakeDown = () : void => {\r\n    // removing last modal\r\n    const ariaTarget = appElement() || appContainer?.current\r\n    document.documentElement.style.overflow = ''\r\n    document?.body?.classList.remove(configuration.bodyOpenClass)\r\n    ariaTarget.removeAttribute('aria-hidden');\r\n  }\r\n  \r\n  const addModal = useCallback((modalEntry : ModalEntry) : void => {\r\n    // remember where focus was\r\n    previouslyFocusedElements.push(document.activeElement as HTMLInputElement)\r\n    \r\n    if (modalEntries.length === 0) {\r\n      modalSetup()\r\n    }\r\n    \r\n    if (modalEntries.includes(modalEntry)) {\r\n      console.warn('tried to open a modal that was already opened')\r\n    } else {\r\n      setModalEntries(openModals => [...openModals, modalEntry ])\r\n    }\r\n  }, [modalEntries])\r\n  \r\n  const removeModal = useCallback((modalEntry : ModalEntry) : void => {\r\n    // set focus back\r\n    const previouslyFocusedElement:HTMLElement = previouslyFocusedElements.pop()\r\n    if (document.documentElement.contains(previouslyFocusedElement)) {\r\n      previouslyFocusedElement.focus()\r\n    }\r\n  \r\n    if (modalEntries.length === 1) {\r\n      modalTakeDown()\r\n    }\r\n    \r\n    if (modalEntries.includes(modalEntry)) {\r\n      setModalEntries(openModals => {\r\n        const newModals = [...openModals]\r\n        newModals.splice(newModals.indexOf(modalEntry), 1)\r\n        return newModals\r\n      })\r\n    } else {\r\n      console.warn(`tried to close a modal that isn't open`)\r\n    }\r\n  }, [modalEntries])\r\n  \r\n  const contextValue = useMemo(() => ({ addModal, removeModal }), [modalEntries]);\r\n\r\n  const handleShade = () => {\r\n    const topModal = modalEntries.slice(-1)[0]\r\n    if (topModal.userDismiss) {\r\n      internalClose(modalEntries.slice(-1)[0])\r\n    }\r\n  }\r\n\r\n  const handleKey = (event : React.KeyboardEvent) : void => {\r\n    const topModal = modalEntries.slice(-1)[0]\r\n    if (event.key === ESC_KEY && topModal.userDismiss) {\r\n      internalClose(topModal)\r\n    }\r\n  }\r\n\r\n  const internalClose = (entry: ModalEntry) : void => {\r\n    entry.resolver()\r\n    removeModal(entry)\r\n  }\r\n  \r\n  return <ModalContext.Provider value={contextValue}>\r\n    <React.Fragment>\r\n      <div ref={appContainer}>{children}</div>\r\n      {modalEntries.length > 0 && <div className={configuration.modalContainerClass} onKeyDown={handleKey}>\r\n        {modalEntries.map((modalEntry, i) => (\r\n          <Modal\r\n            key={`modal-${i}`}\r\n            className={configuration.modalClass}\r\n            label={modalEntry.label}\r\n            role={modalEntry.role}\r\n          >{modalEntry.modal}</Modal>\r\n        ))}\r\n        <div className={configuration.modalShadeClass} onClick={handleShade} />\r\n      </div>}\r\n    </React.Fragment>\r\n  </ModalContext.Provider>\r\n}\r\n","import * as React from 'react'\r\nimport {ReactChildren, ReactElement} from \"react\";\r\nconst { useRef, useEffect } = React\r\n\r\nconst focusableSelector = [\r\n  'a[href]:not([tabindex=\\'-1\\'])',\r\n  'area[href]:not([tabindex=\\'-1\\'])',\r\n  'input:not([disabled]):not([tabindex=\\'-1\\'])',\r\n  'select:not([disabled]):not([tabindex=\\'-1\\'])',\r\n  'textarea:not([disabled]):not([tabindex=\\'-1\\'])',\r\n  'button:not([disabled]):not([tabindex=\\'-1\\'])',\r\n  'iframe:not([tabindex=\\'-1\\'])',\r\n  '[tabindex]:not([tabindex=\\'-1\\'])',\r\n  '[contentEditable=true]:not([tabindex=\\'-1\\'])'\r\n].join(', ')\r\n\r\ntype ModalProps = {\r\n  className?: string,\r\n  children?: ReactChildren,\r\n  label?: string,\r\n  role?: string,\r\n}\r\n\r\nconst Modal = function (props : ModalProps): ReactElement {\r\n  const { className, children, label, role } = props\r\n  const modalRef = useRef<HTMLDivElement>()\r\n  \r\n  useEffect(() => {\r\n    handleTabBoundary([0, 1])\r\n  }, [ modalRef ])\r\n  \r\n  const handleTabBoundary = (indexes : number[]) : void => {\r\n    const focusableElements = Array.from(modalRef?.current?.querySelectorAll<HTMLElement>(focusableSelector)) || []\r\n    const element = focusableElements.slice(...indexes)[0]\r\n    \r\n    if (element) { element.focus() }\r\n  }\r\n  \r\n  return <React.Fragment>\r\n    <div tabIndex={0} onFocus={() => handleTabBoundary([-1])}/>\r\n    <div\r\n      role={role}\r\n      aria-label={label}\r\n      ref={modalRef}\r\n      className={className}>{children}</div>\r\n    <div tabIndex={0} onFocus={() => handleTabBoundary([0, 1])}/>\r\n  </React.Fragment>\r\n}\r\n\r\nexport default Modal\r\n","import {useRef, useState, useEffect, useContext, ReactElement} from 'react'\r\nimport { ModalContext } from './ModalContext'\r\nimport {ModalEntry} from \"./types\";\r\n\r\nexport function usePrevious(value : any) : any {\r\n  const ref = useRef()\r\n  useEffect(() => { ref.current = value }, [value])\r\n  \r\n  return ref.current\r\n}\r\n\r\nexport const useModal = () => {\r\n  const [ localModalEntries, setLocalModalEntries ] = useState([])\r\n  const prevEntries: ModalEntry[] = usePrevious(localModalEntries) || []\r\n  \r\n  const context = useContext(ModalContext);\r\n  \r\n  useEffect(() => {\r\n    const addedModals = localModalEntries.filter(modalEntry => !prevEntries.includes(modalEntry))\r\n    const removedModals = prevEntries.filter(modalEntry => !localModalEntries.includes(modalEntry))\r\n  \r\n    addedModals.forEach(modalEntry => { context.addModal(modalEntry) })\r\n    removedModals.forEach(modalEntry => { context.removeModal(modalEntry) })\r\n  }, [ localModalEntries ])\r\n  \r\n  const open = (modal : ReactElement, label: string = '', role: string = 'dialog', userDismiss: boolean = true): Promise<any> => {\r\n    let resolver: () => any\r\n    const modalPromise = new Promise((resolve) => { resolver = resolve })\r\n    const modalEntry = {modal, resolver, label, role, userDismiss}\r\n    setLocalModalEntries(currentModalEntries => [...currentModalEntries, modalEntry ])\r\n    \r\n    return modalPromise\r\n  }\r\n  \r\n  const close = (modal: ReactElement, result: any) : void => {\r\n    setLocalModalEntries(currentModalEntries => {\r\n      const thisEntry = currentModalEntries.find(entry => entry.modal === modal)\r\n      const newModalEntries = [...currentModalEntries]\r\n      newModalEntries.splice(newModalEntries.indexOf(thisEntry), 1)\r\n      thisEntry.resolver(result)\r\n      return newModalEntries\r\n    })\r\n  }\r\n  \r\n  return [ open, close ]\r\n}\r\n"],"sourceRoot":""}

package/src/Modal.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-import {ReactChildren, ReactElement} from "react";
-const { useRef, useEffect } = React
-
-const focusableSelector = [
-  'a[href]:not([tabindex=\'-1\'])',
-  'area[href]:not([tabindex=\'-1\'])',
-  'input:not([disabled]):not([tabindex=\'-1\'])',
-  'select:not([disabled]):not([tabindex=\'-1\'])',
-  'textarea:not([disabled]):not([tabindex=\'-1\'])',
-  'button:not([disabled]):not([tabindex=\'-1\'])',
-  'iframe:not([tabindex=\'-1\'])',
-  '[tabindex]:not([tabindex=\'-1\'])',
-  '[contentEditable=true]:not([tabindex=\'-1\'])'
-].join(', ')
-
-type ModalProps = {
-  className?: string,
-  children?: ReactChildren,
-  label?: string,
-  role?: string,
-}
-
-const Modal = function (props : ModalProps): ReactElement {
-  const { className, children, label, role } = props
-  const modalRef = useRef<HTMLDivElement>()
-  
-  useEffect(() => {
-    handleTabBoundary([0, 1])
-  }, [ modalRef ])
-  
-  const handleTabBoundary = (indexes : number[]) : void => {
-    const focusableElements = Array.from(modalRef?.current?.querySelectorAll<HTMLElement>(focusableSelector)) || []
-    const element = focusableElements.slice(...indexes)[0]
-    
-    if (element) { element.focus() }
-  }
-  
-  return <React.Fragment>
-    <div tabIndex={0} onFocus={() => handleTabBoundary([-1])}/>
-    <div
-      role={role}
-      aria-label={label}
-      ref={modalRef}
-      className={className}>{children}</div>
-    <div tabIndex={0} onFocus={() => handleTabBoundary([0, 1])}/>
-  </React.Fragment>
-}
-
-export default Modal

package/src/ModalContext.ts

@@ -1,11 +0,0 @@
-import * as React from 'react'
-import {ModalEntry} from "./types";
-
-const useWithoutProvider = (modalEntry : ModalEntry) : void => {
-  throw new Error( 'Attempted to call useModal outside of modal context. Make sure your component is inside ModalProvider.' )
-}
-
-export const ModalContext = React.createContext({
-  addModal: useWithoutProvider,
-  removeModal: useWithoutProvider
-})

package/src/ModalProvider.tsx

@@ -1,116 +0,0 @@
-import * as React from 'react'
-import { ReactElement } from 'react'
-import { ModalContext } from './ModalContext'
-import Modal from './Modal'
-
-import { ModalEntry, ModalProviderProps } from './types'
-
-const { useRef, useState, useCallback, useMemo } = React
-
-const defaultConfig = {
-  bodyOpenClass: 'modal-open',
-  modalShadeClass: 'modal-shade',
-  modalContainerClass: 'modals',
-  modalClass: 'modal'
-}
-
-const previouslyFocusedElements : HTMLElement[] = []
-const ESC_KEY = 'Escape'
-
-
-export const ModalProvider = ({ children, config = {}, appElement = () => {} }: ModalProviderProps ) : ReactElement => {
-  const [ modalEntries, setModalEntries ] = useState([])
-  const configuration = {...defaultConfig, ...config}
-  const appContainer = useRef()
-  
-  const modalSetup = () : void => {
-    // showing first modal
-    const ariaTarget = appElement() || appContainer?.current
-    document.documentElement.style.overflow = 'hidden'
-    document.body.classList.add(configuration.bodyOpenClass)
-    ariaTarget.setAttribute('aria-hidden', 'true');
-  }
-  
-  const modalTakeDown = () : void => {
-    // removing last modal
-    const ariaTarget = appElement() || appContainer?.current
-    document.documentElement.style.overflow = ''
-    document?.body?.classList.remove(configuration.bodyOpenClass)
-    ariaTarget.removeAttribute('aria-hidden');
-  }
-  
-  const addModal = useCallback((modalEntry : ModalEntry) : void => {
-    // remember where focus was
-    previouslyFocusedElements.push(document.activeElement as HTMLInputElement)
-    
-    if (modalEntries.length === 0) {
-      modalSetup()
-    }
-    
-    if (modalEntries.includes(modalEntry)) {
-      console.warn('tried to open a modal that was already opened')
-    } else {
-      setModalEntries(openModals => [...openModals, modalEntry ])
-    }
-  }, [modalEntries])
-  
-  const removeModal = useCallback((modalEntry : ModalEntry) : void => {
-    // set focus back
-    const previouslyFocusedElement:HTMLElement = previouslyFocusedElements.pop()
-    if (document.documentElement.contains(previouslyFocusedElement)) {
-      previouslyFocusedElement.focus()
-    }
-  
-    if (modalEntries.length === 1) {
-      modalTakeDown()
-    }
-    
-    if (modalEntries.includes(modalEntry)) {
-      setModalEntries(openModals => {
-        const newModals = [...openModals]
-        newModals.splice(newModals.indexOf(modalEntry), 1)
-        return newModals
-      })
-    } else {
-      console.warn(`tried to close a modal that isn't open`)
-    }
-  }, [modalEntries])
-  
-  const contextValue = useMemo(() => ({ addModal, removeModal }), [modalEntries]);
-
-  const handleShade = () => {
-    const topModal = modalEntries.slice(-1)[0]
-    if (topModal.userDismiss) {
-      internalClose(modalEntries.slice(-1)[0])
-    }
-  }
-
-  const handleKey = (event : React.KeyboardEvent) : void => {
-    const topModal = modalEntries.slice(-1)[0]
-    if (event.key === ESC_KEY && topModal.userDismiss) {
-      internalClose(topModal)
-    }
-  }
-
-  const internalClose = (entry: ModalEntry) : void => {
-    entry.resolver()
-    removeModal(entry)
-  }
-  
-  return <ModalContext.Provider value={contextValue}>
-    <React.Fragment>
-      <div ref={appContainer}>{children}</div>
-      {modalEntries.length > 0 && <div className={configuration.modalContainerClass} onKeyDown={handleKey}>
-        {modalEntries.map((modalEntry, i) => (
-          <Modal
-            key={`modal-${i}`}
-            className={configuration.modalClass}
-            label={modalEntry.label}
-            role={modalEntry.role}
-          >{modalEntry.modal}</Modal>
-        ))}
-        <div className={configuration.modalShadeClass} onClick={handleShade} />
-      </div>}
-    </React.Fragment>
-  </ModalContext.Provider>
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './ModalProvider'
-export * from './useModal'

package/src/types.ts

@@ -1,21 +0,0 @@
-import {ReactChildren, ReactElement} from 'react'
-
-export type ModalEntry = {
-  modal: ReactElement,
-  resolver: () => Promise<any>,
-  label?: string,
-  role?: string
-}
-
-export type ModalProviderConfig = {
-  bodyOpenClass?: string
-  modalShadeClass?: string
-  modalContainerClass?: string
-  modalClass?: string
-}
-
-export type ModalProviderProps = {
-  children?: ReactChildren
-  config?: ModalProviderConfig
-  appElement?: () => HTMLElement | void
-}

package/src/useModal.ts

@@ -1,46 +0,0 @@
-import {useRef, useState, useEffect, useContext, ReactElement} from 'react'
-import { ModalContext } from './ModalContext'
-import {ModalEntry} from "./types";
-
-export function usePrevious(value : any) : any {
-  const ref = useRef()
-  useEffect(() => { ref.current = value }, [value])
-  
-  return ref.current
-}
-
-export const useModal = () => {
-  const [ localModalEntries, setLocalModalEntries ] = useState([])
-  const prevEntries: ModalEntry[] = usePrevious(localModalEntries) || []
-  
-  const context = useContext(ModalContext);
-  
-  useEffect(() => {
-    const addedModals = localModalEntries.filter(modalEntry => !prevEntries.includes(modalEntry))
-    const removedModals = prevEntries.filter(modalEntry => !localModalEntries.includes(modalEntry))
-  
-    addedModals.forEach(modalEntry => { context.addModal(modalEntry) })
-    removedModals.forEach(modalEntry => { context.removeModal(modalEntry) })
-  }, [ localModalEntries ])
-  
-  const open = (modal : ReactElement, label: string = '', role: string = 'dialog', userDismiss: boolean = true): Promise<any> => {
-    let resolver: () => any
-    const modalPromise = new Promise((resolve) => { resolver = resolve })
-    const modalEntry = {modal, resolver, label, role, userDismiss}
-    setLocalModalEntries(currentModalEntries => [...currentModalEntries, modalEntry ])
-    
-    return modalPromise
-  }
-  
-  const close = (modal: ReactElement, result: any) : void => {
-    setLocalModalEntries(currentModalEntries => {
-      const thisEntry = currentModalEntries.find(entry => entry.modal === modal)
-      const newModalEntries = [...currentModalEntries]
-      newModalEntries.splice(newModalEntries.indexOf(thisEntry), 1)
-      thisEntry.resolver(result)
-      return newModalEntries
-    })
-  }
-  
-  return [ open, close ]
-}

package/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./build/",
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "commonjs",
-    "target": "es6",
-    "jsx": "react"
-  }
-}

package/webpack.config.js

@@ -1,49 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  mode: 'production',
-  entry: './src/index.ts',
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: '../build/index.js',
-    libraryTarget: 'commonjs2'
-  },
-  devtool: 'source-map',
-  resolve: {
-    // Add '.ts' and '.tsx' as resolvable extensions.
-    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts(x?)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: "ts-loader"
-          }
-        ]
-      },
-      {
-        enforce: "pre",
-        test: /\.js$/,
-        loader: "source-map-loader"
-      },
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, 'src'),
-        exclude: /(node_modules|bower_components|build)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ["@babel/env"],
-          }
-        }
-      },
-    ]
-  },
-  externals: {
-    'react': 'commonjs react',
-    'react-dom': 'commonjs react-dom'
-  }
-};