sate-lib/lib/components/drawer/useDrawer.js

A lightweight and modular React component library designed for modern web interfaces. **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.

import{useEffect as e,useLayoutEffect as t,useState as r}from"react";function n({open:n,onOpenChange:o}){let[u,i]=r(n),[m,c]=r(!1);return e(()=>{if(n)i(!0);else{c(!1);let e=setTimeout(()=>i(!1),350);return()=>clearTimeout(e)}},[n]),t(()=>{if(!u)return;let e=requestAnimationFrame(()=>{c(!0)});return()=>{cancelAnimationFrame(e)}},[u]),e(()=>{if(!u)return;document.documentElement.style.scrollBehavior="auto",document.body.style.pointerEvents="none",document.querySelector("main")?.setAttribute("inert",""),document.querySelector("footer")?.setAttribute("inert","");let e=e=>{"Escape"===e.key&&o(!1)};return window.addEventListener("keydown",e),()=>{document.documentElement.style.scrollBehavior="",document.body.style.pointerEvents="",document.querySelector("main")?.removeAttribute("inert"),document.querySelector("footer")?.removeAttribute("inert"),window.removeEventListener("keydown",e)}},[u,o]),{onClose:()=>o(!1),present:u,state:m?"open":"closed"}}export{n as useDrawer};