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

Useful react components and hooks

import{createContext as f}from"@fewings/react/contextSelector";var a=f({items:[],setItems:()=>{},idRef:{current:0}});import{useContextSelector as p}from"@fewings/react/contextSelector";function h(){let r=p(a,t=>t.setItems),v=p(a,t=>t.idRef),l=t=>{r(s=>s.filter(e=>e.id!==t))};return{open:(t,s)=>new Promise((e,d)=>{let i=v.current++,c={id:i,render:t,options:s,resolve:n=>{l(i),e(n)},reject:n=>{l(i),d(n)}};r(n=>[...n,c])}),closeAll:()=>{r([])}}}import{useRef as O,useState as u}from"react";import{createPortal as C}from"react-dom";import{jsx as y,jsxs as x}from"react/jsx-runtime";function A({children:r,containerStyle:v,containerClassName:l}){let[o,m]=u([]),t=O(0),s=e=>{if(!e.target.closest("[data-overlay-content]")){let c=o[o.length-1];c?.options?.closeOnClickOutside&&c.reject("clickOutside")}};return x(a.Provider,{value:{items:o,setItems:m,idRef:t},children:[o.length>0&&C(y("div",{"data-overlay-container":!0,onClick:s,style:{position:"fixed",inset:0,zIndex:9999,background:"#08090ACC",...v},className:l,children:o.map(e=>y("div",{"data-overlay-content":!0,style:{width:0,height:0},children:e.render({resolve:e.resolve,reject:e.reject})},e.id))}),document.body),r]})}export{a as OverlayContext,A as OverlayProvider,h as useOverlay};