react-imperial-modal 2.0.0 → 3.0.0

package/dist/constants.d.ts

@@ -5,3 +5,4 @@ export declare const withResolvers: <T>() => {
 };
 export declare const ESC_KEY = "Escape";
 export declare const focusableSelector: string;
+export declare const modalId: () => string;

package/dist/index.d.ts

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

package/dist/react-imperial-modal.js

@@ -1,11 +1,11 @@
-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 = [
+import { jsx as j, jsxs as A } from "react/jsx-runtime";
+import D, { useRef as R, useContext as O, useLayoutEffect as K, useCallback as m, useState as L, useMemo as q } from "react";
+const S = () => {
+  let s, o;
+  return { promise: new Promise((l, n) => {
+    s = l, o = n;
+  }), resolve: s, reject: o };
+}, N = "Escape", _ = [
   "a[href]:not([tabindex='-1'])",
   "area[href]:not([tabindex='-1'])",
   "input:not([disabled]):not([tabindex='-1'])",
@@ -15,128 +15,141 @@ const q = () => {
   "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);
+].join(", "), k = /* @__PURE__ */ (() => {
+  let s = 1;
+  return () => "modal_" + (s++ * 1664525 + 1013904223 >>> 0).toString(36);
+})(), B = function({ className: s, entry: o }) {
+  const { role: M = "dialog", label: l, labelledby: n, componentProps: v, Component: b } = o, d = R(null), { removeModal: c } = O(C);
   K(() => {
     requestAnimationFrame(() => {
-      var r;
-      n.current && (n.current.showModal(), (r = n.current.querySelector(N)) == null || r.focus());
+      var a;
+      d.current && (d.current.showModal(), (a = d.current.querySelector(_)) == null || a.focus());
     });
   }, []);
-  const f = u(
-    (r) => {
-      r.key === D && !t.ignoreEscape && m(t.instanceId);
+  const f = m(
+    (a) => {
+      a.key === N && !o.ignoreEscape && c(o.id);
     },
-    [t, m]
+    [o, c]
   );
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ j(
     "dialog",
     {
-      ref: n,
-      role: a,
-      "aria-label": i,
-      "aria-labelledby": l,
+      ref: d,
+      role: M,
+      "aria-label": l,
+      "aria-labelledby": n,
       className: s,
       onKeyDown: f,
-      children: /* @__PURE__ */ C(
-        M,
+      children: /* @__PURE__ */ j(
+        b,
         {
-          close: t.closeModal,
-          resolve: t.resolveModal,
-          reject: t.rejectModal,
-          ...d
+          close: o.closeModal,
+          resolve: o.resolveModal,
+          reject: o.rejectModal,
+          ...v
         }
       )
     }
   );
-}, g = () => {
+}, y = () => {
   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(() => {
+}, C = D.createContext({
+  addModal: y,
+  removeModal: y,
+  resolveModal: y,
+  rejectModal: y
+}), g = document.documentElement, P = document.body, T = ({ children: s, config: o = {} }) => {
+  const [M, l] = L([]), n = R(null), v = R([]), b = m(() => {
     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(() => {
+    o.bodyOpenClass && P.classList.add(o.bodyOpenClass), (e = n == null ? void 0 : n.current) == null || e.setAttribute("aria-hidden", "true"), g.style.overflow = "hidden";
+  }, [o]), d = m(() => {
     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(
+    o.bodyOpenClass && P.classList.remove(o.bodyOpenClass), (e = n == null ? void 0 : n.current) == null || e.removeAttribute("aria-hidden"), g.style.overflow = "";
+  }, [o]), c = m(
     (e) => {
-      i((o) => o.includes(e) ? o : (o.length === 0 && m(), M.current.push(document.activeElement), [...o, e]));
+      l((t) => t.includes(e) ? t : (t.length === 0 && b(), v.current.push(document.activeElement), [...t, e]));
     },
-    [m]
-  ), p = u(
+    [b]
+  ), f = m(
     (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));
+      l((t) => {
+        const u = t.at(-1), E = t.find((w) => w.id === e), x = e === void 0 ? u : E, r = t.length === 1, h = v.current.pop();
+        return !x || !t.includes(x) ? t : (r && h && g.contains(h) && h.focus(), r && d(), t.filter((w) => x !== w));
       });
     },
-    [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]
+    [d]
+  ), a = m((e, t) => {
+    l((u) => {
+      const E = u.at(-1), x = u.find((h) => h.id === t), r = t === void 0 ? E : x;
+      return r == null || r.resolveModal(e || null), u;
+    });
+  }, []), i = m((e, t) => {
+    l((u) => {
+      const E = u.at(-1), x = u.find((h) => h.id === t), r = t === void 0 ? E : x;
+      return r == null || r.rejectModal(e), u;
+    });
+  }, []), p = q(
+    () => ({ addModal: c, removeModal: f, resolveModal: a, rejectModal: i }),
+    [c, f, a, i]
   );
-  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
-    )) })
+  return /* @__PURE__ */ A(C.Provider, { value: p, children: [
+    /* @__PURE__ */ j("div", { ref: n, children: s }),
+    /* @__PURE__ */ j("div", { className: o.modalContainerClass, children: M.map((e) => /* @__PURE__ */ j(B, { className: o.modalClass, entry: e }, e.id)) })
   ] });
-};
-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,
+}, V = () => {
+  const s = O(C);
+  return m(
+    (o, M, l = !1, n, v, b = "dialog") => {
+      const { promise: d, resolve: c, reject: f } = S(), a = k(), i = () => s.removeModal(a), p = Object.assign(d, {
+        id: a,
+        Component: o,
+        componentProps: M,
         ignoreEscape: l,
-        labelledby: M,
-        label: d,
-        role: n,
-        resolveModal: (h) => {
-          f(h), b();
+        labelledby: v,
+        label: n,
+        role: b,
+        resolveModal: (e) => {
+          c(e), i();
+        },
+        rejectModal: (e) => {
+          f(e), i();
+        },
+        closeModal: i
+      });
+      return s.addModal(p), p;
+    },
+    [s]
+  );
+}, W = () => {
+  const s = O(C);
+  return [m(
+    (M, l, n = !1, v, b, d = "dialog") => {
+      const { promise: c, resolve: f, reject: a } = S(), i = k(), p = () => s.removeModal(i), e = Object.assign(c, {
+        id: i,
+        Component: M,
+        componentProps: l,
+        ignoreEscape: n,
+        labelledby: b,
+        label: v,
+        role: d,
+        resolveModal: (t) => {
+          f(t), p();
         },
-        rejectModal: (h) => {
-          r(h), b();
+        rejectModal: (t) => {
+          a(t), p();
         },
-        closeModal: b
+        closeModal: p
       });
-      return s.addModal(x), x;
+      return s.addModal(e), e;
     },
     [s]
-  ), s.resolveModal, s.rejectModal];
+  ), s.removeModal, s.resolveModal, s.rejectModal];
 };
 export {
-  Y as ModalProvider,
-  _ as useModal
+  T as ModalProvider,
+  V as useModal,
+  W as useModalDangerously
 };

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

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

package/dist/types.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-export interface ModalProps<T> {
+export interface ModalProps<T = void> {
     resolve: (val: T | null) => void;
     reject: (reason?: unknown) => void;
     close: () => void;
 }
 export type ModalEntry<T, P> = Promise<T | null> & {
-    instanceId: string;
+    id: string;
     Component: React.ComponentType<P & ModalProps<T>>;
     componentProps: P;
     resolveModal: (val: T | null) => void;
@@ -27,7 +27,7 @@ export type ModalProviderProps = {
 };
 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;
+    removeModal: (id?: string) => void;
+    resolveModal: (val: unknown | null, id?: string) => void;
+    rejectModal: (reason?: unknown, id?: string) => void;
 };

package/dist/useModal.d.ts

@@ -1,2 +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];
+export declare const useModal: () => <T, P>(Component: React.ComponentType<P & ModalProps<T>>, componentProps: P, ignoreEscape?: boolean, label?: string, labelledby?: string, role?: string) => ModalEntry<T, P>;

package/dist/useModalDangerously.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-imperial-modal",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "imperative modal api for react",
   "author": "Greg Archer (greg.taff@gmail.com)",
   "license": "MIT",
@@ -32,8 +32,8 @@
     }
   },
   "peerDependencies": {
-    "react": ">=16.8.6",
-    "react-dom": ">=16.8.6"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "dependencies": {},
   "scripts": {