@infinityfx/fluid/dist/components/layout/overlay.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as t,jsxs as e}from"react/jsx-runtime";import{Animatable as o}from"@infinityfx/lively";import{LayoutGroup as n}from"@infinityfx/lively/layout";import{useRef as r,useState as i,useEffect as c}from"react";import{createPortal as l}from"react-dom";import{createStyles as u}from"../../core/style.js";import{combineClasses as m}from"../../core/utils.js";import s from"../../hooks/use-focus-trap.js";const d={count:0},a=t=>{const e=document.documentElement.scrollHeight>document.documentElement.clientHeight;document.documentElement.style.overflowY=t?"":"hidden",document.body.style.overflowY=t||!e?"":"scroll"},f=u("overlay",{".wrapper":{position:"fixed",top:0,left:0,zIndex:999},".overlay":{position:"absolute",width:"100vw",height:"100dvh",display:"flex",justifyContent:"center",alignItems:"center"},".tint":{position:"absolute",inset:0,backgroundColor:"rgb(0, 0, 0, .35)",backdropFilter:"blur(6px)"},".overlay > *:not(:first-child)":{isolation:"isolate"}});function p({children:u,cc:p={},show:y,onClose:v}){const h=m(f,p),w=r(!1),g=s(y),[x,E]=i(!1),[b,k]=i(!1);return c((()=>{y||k(!1)}),[y]),c((()=>{function t(t){y&&"Escape"===t.key&&v()}return E(!0),w.current!==y&&(d.count+=y?1:-1),w.current=y,x&&y&&(a(!1),g.current&&(g.current.style.zIndex=(d.count+999).toString())),y||d.count||a(!0),window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t),y&&y===w.current&&(d.count--,w.current=!1),d.count||a(!0)}}),[y]),x?l(t(n,{children:t("div",{ref:g,className:h.wrapper,children:y&&e("div",{className:h.overlay,style:{pointerEvents:b?void 0:"none"},children:[t(o,{id:"overlay",animations:{mount:{opacity:[0,1],duration:.25},unmount:{opacity:[0,1],duration:.25}},triggers:[{on:"mount",name:"mount"},{on:"unmount",name:"unmount",reverse:!0}],onAnimationEnd:t=>"mount"===t&&k(!0),children:t("div",{className:h.tint,onClick:v})}),u]})})}),document.getElementById("__fluid")):null}export{p as default};
//# sourceMappingURL=overlay.js.map