react-imperial-modal 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,7 @@ const S = () => {
|
|
|
5
5
|
return { promise: new Promise((l, n) => {
|
|
6
6
|
s = l, o = n;
|
|
7
7
|
}), resolve: s, reject: o };
|
|
8
|
-
},
|
|
8
|
+
}, I = "Escape", N = [
|
|
9
9
|
"a[href]:not([tabindex='-1'])",
|
|
10
10
|
"area[href]:not([tabindex='-1'])",
|
|
11
11
|
"input:not([disabled]):not([tabindex='-1'])",
|
|
@@ -18,17 +18,17 @@ const S = () => {
|
|
|
18
18
|
].join(", "), k = /* @__PURE__ */ (() => {
|
|
19
19
|
let s = 1;
|
|
20
20
|
return () => "modal_" + (s++ * 1664525 + 1013904223 >>> 0).toString(36);
|
|
21
|
-
})(),
|
|
21
|
+
})(), _ = function({ className: s, entry: o }) {
|
|
22
22
|
const { role: M = "dialog", label: l, labelledby: n, componentProps: v, Component: b } = o, d = R(null), { removeModal: c } = O(C);
|
|
23
23
|
K(() => {
|
|
24
24
|
requestAnimationFrame(() => {
|
|
25
25
|
var a;
|
|
26
|
-
d.current && (d.current.showModal(), (a = d.current.querySelector(
|
|
26
|
+
d.current && (d.current.showModal(), (a = d.current.querySelector(N)) == null || a.focus());
|
|
27
27
|
});
|
|
28
28
|
}, []);
|
|
29
29
|
const f = m(
|
|
30
30
|
(a) => {
|
|
31
|
-
a.key ===
|
|
31
|
+
a.key === I && !o.ignoreEscape && c(o.id);
|
|
32
32
|
},
|
|
33
33
|
[o, c]
|
|
34
34
|
);
|
|
@@ -44,6 +44,7 @@ const S = () => {
|
|
|
44
44
|
children: /* @__PURE__ */ j(
|
|
45
45
|
b,
|
|
46
46
|
{
|
|
47
|
+
modalId: o.id,
|
|
47
48
|
close: o.closeModal,
|
|
48
49
|
resolve: o.resolveModal,
|
|
49
50
|
reject: o.rejectModal,
|
|
@@ -97,7 +98,7 @@ const S = () => {
|
|
|
97
98
|
);
|
|
98
99
|
return /* @__PURE__ */ A(C.Provider, { value: p, children: [
|
|
99
100
|
/* @__PURE__ */ j("div", { ref: n, children: s }),
|
|
100
|
-
/* @__PURE__ */ j("div", { className: o.modalContainerClass, children: M.map((e) => /* @__PURE__ */ j(
|
|
101
|
+
/* @__PURE__ */ j("div", { className: o.modalContainerClass, children: M.map((e) => /* @__PURE__ */ j(_, { className: o.modalClass, entry: e }, e.id)) })
|
|
101
102
|
] });
|
|
102
103
|
}, V = () => {
|
|
103
104
|
const s = O(C);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(c
|
|
1
|
+
(function(i,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):(i=typeof globalThis<"u"?globalThis:i||self,c(i["react-imperial-modal"]={},i.jsxRuntime,i.React))})(this,(function(i,c,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 c.jsx("dialog",{ref:r,role:f,"aria-label":d,"aria-labelledby":n,className:l,onKeyDown:x,children:c.jsx(p,{modalId:o.id,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 c.jsxs(k.Provider,{value:h,children:[c.jsx("div",{ref:n,children:l}),c.jsx("div",{className:o.modalContainerClass,children:f.map(e=>c.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]};i.ModalProvider=T,i.useModal=K,i.useModalDangerously=L,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types.d.ts
CHANGED