@accelint/design-toolkit/dist/components/drawer/index.js

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

'use client';

import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {Broadcast}from'@accelint/bus';import {useEmit,useOn}from'@accelint/bus/react';import {isUUID}from'@accelint/core';import {Cancel,ChevronLeft}from'@accelint/icons';import {Pressable}from'@react-aria/interactions';import {createContext,useRef,useState,useCallback,useContext,useEffect}from'react';import {composeRenderProps,Heading,Header}from'react-aria-components';import {containsExactChildren}from'./../../lib/react.js';import {Button,ToggleButton}from'../button/index.js';import {Icon}from'../icon/index.js';import {Tooltip}from'../tooltip/index.js';import {ViewStackEventHandlers,useViewStackEmit,ViewStack,ViewStackContext}from'../view-stack/index.js';import {DrawerEventTypes}from'./events.js';import {DrawerStyles,DrawerMenuStyles,DrawerTitleStyles}from'./styles.js';const {layout:le,main:ce,drawer:pe,panel:me,view:ue,header:we,content:fe,footer:de}=DrawerStyles(),{menu:ge,item:De}=DrawerMenuStyles(),L=Broadcast.getInstance(),T=createContext({register:()=>{},unregister:()=>{},placement:"left"}),qe={...ViewStackEventHandlers,close:ViewStackEventHandlers.clear,open:e=>L.emit(DrawerEventTypes.open,{view:e}),toggle:e=>L.emit(DrawerEventTypes.toggle,{view:e})};function ve(){const e=useViewStackEmit(),r=useEmit(DrawerEventTypes.open),a=useEmit(DrawerEventTypes.toggle);return {...e,close:e.clear,open:n=>r({view:n}),toggle:n=>a({view:n})}}function y({children:e,for:r}){const{parent:a}=useContext(ViewStackContext),n=ve();function l(){for(const s of Array.isArray(r)?r:[r]){let[f,p]=isUUID(s)?["push",s]:s.split(":");p??=a,p&&n[f](p);}}return jsx(Pressable,{onPress:l,children:e})}y.displayName="Drawer.Trigger";function W(){return jsx(o.Trigger,{for:"close",children:jsx(Button,{variant:"icon",children:jsx(Icon,{children:jsx(Cancel,{})})})})}W.displayName="Drawer.Close";function O(){const{stack:e}=useContext(ViewStackContext);return e.length>1?jsx(o.Trigger,{for:"back",children:jsx(Button,{variant:"icon",children:jsx(Icon,{children:jsx(ChevronLeft,{})})})}):null}O.displayName="Drawer.Back";function A({className:e,...r}){return jsx("main",{...r,className:ce({className:e})})}A.displayName="Drawer.Layout.Main";function h({className:e,extend:r="left right",push:a,...n}){return jsx("div",{...n,className:le({className:e}),"data-extend":r,"data-push":a})}h.displayName="Drawer.Layout",h.Main=A;const ye={left:"right",right:"left",top:"bottom",bottom:"top"};function C({for:e,children:r,classNames:a,toggle:n,textValue:l,...s}){const{parent:f,stack:p}=useContext(ViewStackContext),{placement:m}=useContext(T),d=p.at(-1),P=n?"toggle":"open",c=useRef(null);return f?jsxs(Tooltip.Trigger,{children:[jsx(y,{for:`${P}:${e}`,children:jsx(ToggleButton,{...s,ref:c,className:composeRenderProps(a?.item,g=>De({className:g})),role:"tab",variant:"icon",isSelected:e===d||p.length>1&&p.includes(e),children:composeRenderProps(r,g=>jsx(Icon,{children:g}))})}),jsx(Tooltip,{triggerRef:c,placement:ye[m],offset:6,className:a?.tooltip,children:l})]}):null}C.displayName="Drawer.Menu.Item";function D({className:e,position:r="center",children:a,...n}){return containsExactChildren({children:a,componentName:D.displayName,restrictions:[[C,{min:1}],[y,{min:0,max:0}]]}),jsx("nav",{...n,className:ge({position:r,className:e}),children:a})}D.displayName="Drawer.Menu",D.Item=C;function k({className:e,...r}){return jsx("div",{...r,className:me({className:e})})}k.displayName="Drawer.Panel";function F({id:e,children:r,className:a,...n}){const{register:l,unregister:s}=useContext(T);return useEffect(()=>(l(e),()=>s(e)),[l,s,e]),jsx(ViewStack.View,{id:e,children:jsx("div",{...n,className:ue({className:a}),role:"tabpanel",children:r})})}F.displayName="Drawer.View";function $({className:e,level:r,...a}){return jsx(Heading,{...a,className:DrawerTitleStyles({className:e,level:r}),level:r})}$.displayName="Drawer.Title";function I({className:e,title:r,children:a,...n}){const{stack:l}=useContext(ViewStackContext),s=l.length>1?4:1;return jsx(Header,{...n,className:we({className:e}),children:r?jsxs(Fragment,{children:[jsx(o.Back,{}),jsx(o.Header.Title,{level:s,className:"w-fit",children:r}),jsx(o.Close,{})]}):a})}I.displayName="Drawer.Header",I.Title=$;function z({className:e,...r}){return jsx("div",{...r,className:fe({className:e})})}z.displayName="Drawer.Content";function G({className:e,...r}){return jsx("footer",{...r,className:de({className:e})})}G.displayName="Drawer.Footer";function o({id:e,children:r,className:a,defaultView:n,placement:l="left",size:s="medium",onChange:f,...p}){containsExactChildren({children:r,componentName:o.displayName,restrictions:[[D,{min:0,max:1}],[k,{min:1,max:1}]]});const m=useRef(new Set),[d,P]=useState(n||null),c=useViewStackEmit(),g=useCallback(i=>{m.current.has(i?.payload?.view)&&(c.clear(e),c.push(i.payload.view));},[e,c.clear,c.push]),K=useCallback(i=>{m.current.has(i?.payload?.view)&&(c.clear(e),d!==i?.payload?.view&&c.push(i.payload.view));},[e,d,c.clear,c.push]);return useOn(DrawerEventTypes.open,g),useOn(DrawerEventTypes.toggle,K),jsx(T.Provider,{value:{register:i=>m.current.add(i),unregister:i=>m.current.delete(i),placement:l},children:jsx(ViewStack,{id:e,defaultView:n,onChange:i=>{P(i),f?.(i);},children:jsx("div",{...p,className:pe({className:a}),"data-open":!!d||null,"data-placement":l,"data-size":s,children:r})})})}o.displayName="Drawer",o.Layout=h,o.Menu=D,o.Panel=k,o.View=F,o.Header=I,o.Content=z,o.Footer=G,o.Trigger=y,o.Close=W,o.Back=O;export{o as Drawer,T as DrawerContext,qe as DrawerEventHandlers,ve as useDrawerEmit};//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map