@fewings/react/dist/overlay/index.js

Useful react components and hooks

"use strict";var y=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var r in t)y(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of R(t))!P.call(e,a)&&a!==r&&y(e,a,{get:()=>t[a],enumerable:!(s=x(t,a))||s.enumerable});return e};var h=e=>g(y({},"__esModule",{value:!0}),e);var S={};I(S,{OverlayContext:()=>l,OverlayProvider:()=>N,useOverlay:()=>k});module.exports=h(S);var u=require("@fewings/react/contextSelector"),l=(0,u.createContext)({items:[],setItems:()=>{},idRef:{current:0}});var f=require("@fewings/react/contextSelector");function k(){let e=(0,f.useContextSelector)(l,n=>n.setItems),t=(0,f.useContextSelector)(l,n=>n.idRef),r=n=>{e(i=>i.filter(o=>o.id!==n))};return{open:(n,i)=>new Promise((o,O)=>{let m=t.current++,d={id:m,render:n,options:i,resolve:c=>{r(m),o(c)},reject:c=>{r(m),O(c)}};e(c=>[...c,d])}),closeAll:()=>{e([])}}}var p=require("react");var C=require("react-dom"),v=require("react/jsx-runtime");function N({children:e,containerStyle:t,containerClassName:r}){let[s,a]=(0,p.useState)([]),n=(0,p.useRef)(0),i=o=>{if(!o.target.closest("[data-overlay-content]")){let d=s[s.length-1];d?.options?.closeOnClickOutside&&d.reject("clickOutside")}};return(0,v.jsxs)(l.Provider,{value:{items:s,setItems:a,idRef:n},children:[s.length>0&&(0,C.createPortal)((0,v.jsx)("div",{"data-overlay-container":!0,onClick:i,style:{position:"fixed",inset:0,zIndex:9999,background:"#08090ACC",...t},className:r,children:s.map(o=>(0,v.jsx)("div",{"data-overlay-content":!0,style:{width:0,height:0},children:o.render({resolve:o.resolve,reject:o.reject})},o.id))}),document.body),e]})}