@wethegit/react-modal/dist/react-modal.cjs

A customizable, accessible modal window component for React projects.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),p=require("react-dom"),s=require("react");function u(o=[]){if(!o||!Array.isArray(o)||!o.length)return;const n=[];return o.forEach(e=>{typeof e=="string"&&n.push(e)}),n.flat().join(" ")}const M="_modalVisuallyHidden_1s1k3_1",_={modalVisuallyHidden:M},m=s.forwardRef(function(n,e){return a.jsx("div",{...n,className:_.modalVisuallyHidden,ref:e,tabIndex:0})}),y="_modalFocusBounds_xz88e_1",x={modalFocusBounds:y},w=s.forwardRef(function(n,e){return a.jsx("div",{className:x.modalFocusBounds,ref:e,tabIndex:0})}),g="_modalInner_1rf32_1",v={modalInner:g};function E({children:o,className:n,...e}){const r=s.useRef(null),c=s.useRef(null),l=s.useRef(null),i=()=>{const t=c.current;t&&t.focus()},f=()=>{const t=l.current;t&&t.focus()};return s.useEffect(()=>{i()},[]),a.jsxs("div",{className:u([v.modalInner,n]),ref:r,role:"dialog","aria-modal":"true",tabIndex:0,...e,children:[a.jsx(m,{onFocus:f}),a.jsx(w,{ref:c}),o,a.jsx(w,{ref:l}),a.jsx(m,{onFocus:i})]})}const F="_ModalFixed_1a3wg_1",b="_ModalAbsolute_1a3wg_5",j={ModalFixed:F,ModalAbsolute:b};function k({renderTo:o,className:n,...e}){const r=u([j.ModalFixed,n]),c=a.jsx(E,{className:r,...e});return o?p.createPortal(c,o):c}const C="_modalBackdrop_1wima_1",B={modalBackdrop:C};function R({className:o,...n}){return a.jsx("div",{className:u([B.modalBackdrop,o]),...n})}const $="_modalContent_x5n6k_1",I={modalContent:$};function H({className:o,...n}){return a.jsx("div",{className:u([I.modalContent,o]),...n})}var h=(o=>(o.CLOSED="closed",o.OPEN="open",o))(h||{});function N(o={}){const{triggerRef:n,hash:e}=o,[r,c]=s.useState("closed"),l=s.useCallback(()=>{let t;c(d=>d!=="closed"?"closed":(t=d,d)),t!=="closed"&&(e&&window&&window.location.hash===`#${e}`&&(window.location.hash="",window.history.replaceState({},"",window.location.pathname)),n&&n.current&&n.current.focus())},[n,e]),i=s.useCallback(()=>{let t;c(d=>d!=="open"?"open":(t=d,d)),t!=="open"&&e&&window&&window.location.hash!==`#${e}`&&(window.location.hash=`#${e}`)},[e]),f=s.useCallback(()=>{r==="closed"?i():l()},[l,i,r]);return s.useEffect(()=>{if(!e)return;const t=()=>{window.location.hash===`#${e}`?i():l()};return t(),window.addEventListener("hashchange",t),()=>{window.removeEventListener("hashchange",t)}},[l,i,e]),s.useEffect(()=>{const t=d=>{d.code==="Escape"&&l()};return window.addEventListener("keyup",t),()=>{window.removeEventListener("keyup",t)}},[l]),{isOpen:r!=="closed",toggle:f}}exports.Modal=k;exports.ModalBackdrop=R;exports.ModalContent=H;exports.ModalStates=h;exports.useModal=N;