import React,{useEffect,useState,useRef,createContext,useContext,useCallback,useMemo}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn";const FLASH_DATA_ID="ui-flashes";const FlashContext=createContext(undefined);const FlashProvider=({children})=>{const[flashes,setFlashes]=useState([]);const removeFlash=useCallback(flashId=>{setFlashes(prev=>prev.filter(item=>item.id!==flashId))},[]);const addFlashes=useCallback(newFlashes=>{setFlashes(prev=>{const withIds=newFlashes.filter(flash=>!prev.some(existing=>existing.content===flash.content&&existing.type===flash.type)).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false,removeFlash}));return[...prev,...withIds]})},[removeFlash]);const contextValue=useMemo(()=>({flashes,addFlashes,removeFlash}),[flashes,addFlashes,removeFlash]);return React.createElement(FlashContext.Provider,{value:contextValue},children)};const useFlashContext=()=>{const context=useContext(FlashContext);if(context===undefined){throw new Error("useFlashContext must be used within FlashProvider")}return context};const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-green-400",notice:"bg-blue-400",info:"bg-blue-400",alert:"bg-orange-600"};const FLASH_TEXT_COLOR={error:"text-neutral-000",success:"text-neutral-1300",notice:"text-neutral-1300",info:"text-neutral-1300",alert:"text-neutral-000"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[type,closeFlash])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{if(id){removeFlash(id)}},100)};useAutoHide(type,closeFlash);const animateEntry=!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-check-outline",error:"icon-gui-exclamation-triangle-outline",alert:"icon-gui-exclamation-triangle-outline",info:""};const iconColor={notice:FLASH_TEXT_COLOR.notice,success:FLASH_TEXT_COLOR.success,error:FLASH_TEXT_COLOR.error,alert:FLASH_TEXT_COLOR.alert,info:""};return React.createElement("div",{className:cn("ui-flash-message ui-grid-px",animateEntry&&"ui-flash-message-enter"),style:style,ref:ref,"data-id":"ui-flash","data-testid":"ui-flash"},React.createElement("div",{className:cn(FLASH_BG_COLOR[type],"p-8 flex align-center rounded shadow-container-subtle")},withIcons[type]&&iconColor[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-4 self-baseline"}),React.createElement("p",{className:cn("ui-text-p1 mr-4",FLASH_TEXT_COLOR[type]),dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&React.createElement(Icon,{name:"icon-gui-x-mark-outline",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=()=>{const{flashes,removeFlash}=useFlashContext();return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashes.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{const context=useContext(FlashContext);useEffect(()=>{if(!context){console.warn("BackendFlashes must be used within FlashProvider");return}const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type:type,content}});if(transformedFlashes.length>0){context.addFlashes(transformedFlashes)}},[flashes]);if(!context)return null;return React.createElement(Flashes,null)};export{FLASH_DATA_ID,Flashes,FlashProvider,useFlashContext};export default BackendFlashes;
//# sourceMappingURL=Flash.js.map