@unleashit/modal/dist/chunk-723UIZTO.mjs

Responsive modal component for React with custom header, footer and more.

import { a, b } from './chunk-VRFFRWRJ.mjs';
import * as s from 'react';
import s__default, { useState, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
import { z } from 'zod';

function C(e,o){s.useEffect(()=>{let t=r=>{e&&r.key==="Escape"&&o();};return document.addEventListener("keyup",t,!1),()=>{document.removeEventListener("keyup",t,!1);}},[e,o]);}function k(){let[e,o]=s.useState("auto");return s.useLayoutEffect(()=>{let r=Array.from(document.querySelectorAll("body *")).reduce((n,m)=>{let c=parseFloat(window.getComputedStyle(m).zIndex);return c&&!Number.isNaN(m)&&n.push(c),n},[]).sort().pop(),a=typeof r=="number"?r+1:"auto";o(a);},[]),e}var v=(e,o,t)=>{let{current:r}=s.useRef(document.body.style),a=s.useRef(""),n=s.useCallback(()=>{r[e]=a.current,r.length||document.body.removeAttribute("style");},[r,e]);s.useLayoutEffect(()=>(a.current=r[e]||"",()=>{n();}),[r,e,n]),s.useLayoutEffect(()=>{t?r[e]=o:n();},[r,t,e,n,o]);};var P="unl";var h={};a(h,{camelToKebab:()=>L,clearOnError:()=>Y,convertToSentence:()=>G,genClassNames:()=>J,getDefaultsFromZodObject:()=>x,isCSSModule:()=>q,normalizeComponentProp:()=>X,reactComponentCase:()=>U,removeUndefined:()=>_,stringToKebab:()=>M});var _=e=>e.filter(o=>o!==void 0),U=e=>e.replace(/(?:^\w|[A-Z]|\b\w)/g,o=>o.toUpperCase()).replace(/\s+/g,""),L=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/\s/,"-").toLowerCase(),M=e=>{let o=e.match(/[0-9]{1,}(?=\b)|[A-Z]{2,}(?=[A-Z][a-z]+|[0-9]|\b|_)|[A-Z]?[a-z]+|[A-Z]|[0-9]+/g);return !o||o.length===0?e:o.map(t=>t.toLowerCase()).join("-")},G=e=>e.charAt(0).toUpperCase()+e.slice(1).split(/(?=[A-Z])/).join(" "),q=(e,o)=>e||o,J=(e,o)=>({clsName:t=>!o||!(t in o)?`${P}-${e}__${L(t)}`:o[t]}),X=(e,o)=>{if(s.isValidElement(e))return o&&Object.keys(o).length?s.cloneElement(e,o):e;if(typeof e=="function")return s.createElement(e,{...o});throw new TypeError("Prop received that is not a valid React component type or node")};function x(e){if(e instanceof z.ZodEffects)return e.innerType()instanceof z.ZodEffects?x(e.innerType()):x(z.ZodObject.create(e.innerType().shape));function o(t){if(t instanceof z.ZodDefault)return t._def.defaultValue();if(t instanceof z.ZodArray)return [];if(t instanceof z.ZodString)return "";if(t instanceof z.ZodObject)return x(t);if("innerType"in t._def)return o(t._def.innerType)}return Object.fromEntries(Object.entries(e.shape).map(([t,r])=>[t,o(r)]))}function Y(e){return e.filter(o=>o.clearOnServerError).map(o=>o.name)}var B=({cssVars:e,varNames:o})=>{if(!e)return {};let t={};return o.forEach(r=>{if(r in e){let a=`--unl-${M(r)}`;t[a]=e[r];}}),t};var {genClassNames:te}=h,re=["px","%","em","rem","vw","vh","vmin","vmax"],ne=["modalPadding","lightModeOverlayColor","darkModeOverlayColor","lightModeTextColor","darkModeTextColor","lightModeBackgroundColor","darkModeBackgroundColor","lightModeHeaderColor","darkModeHeaderColor","lightModeHeaderShadow","darkModeHeaderShadow","lightModeBorderColor","darkModeBorderColor","smallWidth","mediumWidth","largeWidth","fullWidth","modalYPosition","breakXs","breakSm","breakMd","breakLg"],T=({isOpen:e=!1,size:o="medium",onClose:t=()=>{},closeBtn:r=!0,closeOnOverlayClick:a=!0,animationSupport:n=!0,animationCloseTimeout:m=300,header:c,footer:p,overlayColor:i,darkMode:F=!1,cssVars:D,cssModule:E={},children:V})=>{let[$,b$1]=useState(!e),[O,R]=useState(e),S=useRef();useLayoutEffect(()=>(e?(b$1(!1),n&&(S.current=window.setTimeout(()=>{R(!0);},0))):n?(R(!1),S.current=window.setTimeout(()=>{b$1(!0);},m)):b$1(!0),()=>window.clearTimeout(S.current)),[m,n,e]),v("overflow","hidden",e);let j=k();C(e,t);let{clsName:d}=s__default.useMemo(()=>te(T.displayName,E),[E]),z=useCallback(g=>{if(!a)return;g.stopPropagation(),g.target.getAttribute("data-modal")&&t();},[a,t]),Z=useMemo(()=>re.some(g=>o.endsWith(g))?{maxWidth:o}:void 0,[o]),K=useMemo(()=>typeof i=="object"&&"light"in i?{"--unl-light-mode-overlay-color":i.light,"--unl-dark-mode-overlay-color":i.dark}:typeof i=="string"?{"--unl-light-mode-overlay-color":i,"--unl-dark-mode-overlay-color":i}:!1,[i]);return $?null:s__default.createElement("div",{onClick:z,"data-modal":"true","data-theme":F?"dark":"light",className:d("overlay"),style:{...i&&K,zIndex:j,...B({cssVars:D,varNames:ne})}},s__default.createElement("div",{className:`${d("child")}${Z?"":` ${d(`child--${o}`)}`} ${n&&O?`${d("child--in")}`:""}`,style:Z},r&&s__default.createElement("div",{className:d("close")},s__default.createElement("button",{onClick:t,type:"button",className:d("closeBtn")},b)),c&&s__default.createElement("header",{className:d("header")},typeof c=="string"?c:s__default.createElement(c,null)),s__default.createElement("div",{className:d("body")},V),p&&s__default.createElement("footer",{className:d("footer")},typeof p=="string"?p:s__default.createElement(p,null))))};T.displayName="modal";var ve=T;

export { T as a, ve as b };