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

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

"use client";
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useId as i,useEffect as n}from"react";import t from"./overlay.js";import a from"../input/button.js";import{combineClasses as l,classes as d,combineRefs as s}from"../../core/utils.js";import{Animatable as c}from"@infinityfx/lively";import m from"./scrollarea.js";import{createStyles as u}from"../../core/style.js";import p from"../../hooks/use-fluid.js";import f from"../../hooks/use-media-query.js";import{useLink as h}from"@infinityfx/lively/hooks";import{Icon as g}from"../../core/icons.js";const v=u("modal",(e=>({".modal":{background:"var(--f-clr-bg-100)",borderRadius:"var(--f-radius-med)",display:"flex",flexDirection:"column",paddingBlock:"var(--f-spacing-med)",minWidth:"min(100vw, 16em)",border:"solid 1px var(--f-clr-fg-200)",margin:"var(--f-spacing-lrg)",maxHeight:"calc(100% - var(--f-spacing-lrg) * 2)",touchAction:"none"},".scrollarea":{paddingInline:"var(--f-spacing-med)"},".header":{display:"flex",alignItems:"center",fontWeight:700,paddingInline:"var(--f-spacing-med)",paddingBottom:"var(--f-spacing-med)",color:"var(--f-clr-text-100)"},".handle":{position:"relative",height:"5px",width:"48px",backgroundColor:"var(--f-clr-grey-200)",borderRadius:"99px",alignSelf:"center",display:"none"},".title":{flexGrow:1,color:"var(--f-clr-heading-100)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".modal":{width:"100vw",alignSelf:"flex-end",margin:0,borderRadius:"var(--f-radius-lrg)",borderBottomRightRadius:0,borderBottomLeftRadius:0,paddingBottom:"calc(var(--f-spacing-med) + 32px)",marginBottom:"-32px"},".handle":{display:"block"}}})));function x({children:u,cc:x={},show:b,onClose:w,title:y,mobileClosing:k="handle",ref:j,...B}){const N=l(v,x),R=o(null),C=o(null),E=o(null),L=h(0),I=i(),S=p(),$=f(`(max-width: ${S.breakpoints.mob}px)`);return n((()=>{function e(e){if(!E.current||!C.current)return;if(!e.touches.length){return L()/C.current.clientHeight>.35?w():L.set(0,{duration:.25}),E.current=null}const{clientY:r}=e.touches[0],o=Math.max(r-E.current.clientY,-32);L.set(o)}return window.addEventListener("touchmove",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("touchmove",e),window.removeEventListener("touchend",e)}}),[]),e(t,{show:b,onClose:w,children:e(c,{id:"modal",onAnimationEnd:()=>L.set(0),initial:$?{translate:"0% 100%"}:{translate:"0px 20px",opacity:0},animate:{translate:L((e=>`0px ${e}px`))},animations:{mob:{translate:["0% 100%","0% 0%"],duration:.25,composite:"combine"},dsk:{opacity:[0,.2,1],scale:[.9,1],duration:.25}},triggers:[{on:"mount",name:$?"mob":"dsk"},{on:"unmount",reverse:!0,name:$?"mob":"dsk"}],children:r("div",{...B,ref:s(j,C),className:d(N.modal,B.className),role:"dialog","aria-modal":!0,"aria-labelledby":I,onTouchStart:e=>{"handle"!==k||R.current?.contains(e.target)||(E.current=e.touches[0])},children:[$&&"handle"===k&&e("div",{className:N.handle}),r("div",{className:N.header,children:[e("span",{id:I,className:N.title,children:y}),("button"===k||!$)&&e(a,{compact:!0,variant:"minimal",onClick:w,children:e(g,{type:"close"})})]}),e(m,{className:N.scrollarea,ref:R,children:u})]})})})}export{x as default};
//# sourceMappingURL=modal.js.map