@accelint/design-toolkit/dist/components/sidenav/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 {useOn,useEmit}from'@accelint/bus/react';import {uuid,isUUID}from'@accelint/core';import {ChevronLeft,ArrowNortheast,ChevronDown}from'@accelint/icons';import {createContext,useState,useContext,useRef}from'react';import {Provider,HeadingContext,DEFAULT_SLOT,Header,Button,composeRenderProps,Pressable,Text,TextContext,ToggleButton,Link,Heading,Disclosure,DisclosurePanel,DialogTrigger,Popover}from'react-aria-components';import {containsExactChildren,containsAnyOfExactChildren}from'./../../lib/react.js';import {Avatar,AvatarContext}from'../avatar/index.js';import {DividerContext}from'../divider/index.js';import {Icon,IconContext}from'../icon/index.js';import {Tooltip}from'../tooltip/index.js';import {SidenavEventTypes}from'./events.js';import {SidenavStyles}from'./styles.js';const{sidenav:ve,content:pe,header:ce,toggle:ue,heading:ge,divider:Ne,item:Se,text:z,transient:p,avatar:fe,avatarHeading:Pe,avatarIcon:V,avatarText:xe,link:Te,tooltip:b,menu:Ce,menuButton:_,menuHeading:ye,menuPanel:Ie,menuItem:Ee,panelHeading:He,panelContent:G}=SidenavStyles(),f=createContext({id:uuid(),isOpen:false});function d({id:a,className:t,isHiddenWhenClosed:n,children:i,...r}){containsExactChildren({children:i,componentName:d.displayName,restrictions:[[L,{min:1,max:1}],[A,{min:1,max:1}],[M,{min:0,max:1}]]});const[o,m]=useState(false);return useOn(SidenavEventTypes.toggle,s=>{s.payload.id===a&&m(K=>!K);}),useOn(SidenavEventTypes.open,s=>{!o&&s.payload.id===a&&m(true);}),useOn(SidenavEventTypes.close,s=>{o&&s.payload.id===a&&m(false);}),n&&!o?null:jsx(Provider,{values:[[HeadingContext,{slots:{[DEFAULT_SLOT]:{className:ge({className:p()})},menu:{className:ye({className:p()})},panel:{className:He()}}}],[f,{id:a,isOpen:o}]],children:jsx("nav",{...r,className:ve({className:t}),"data-open":o||null,children:i})})}d.displayName="Sidenav";function A({className:a,children:t,...n}){return jsx(Provider,{values:[[DividerContext,{className:Ne()}]],children:jsx("div",{...n,className:pe({className:a}),children:t})})}A.displayName="Sidenav.Content";function L({children:a,classNames:t,...n}){const i=useEmit(SidenavEventTypes.toggle),{id:r}=useContext(f);return jsx(Header,{...n,className:ce({className:t?.header}),children:jsxs(Button,{className:composeRenderProps(t?.button,o=>ue({className:o})),onPress:()=>i({id:r}),children:[a,jsx(Icon,{className:p(),children:jsx(ChevronLeft,{})})]})})}L.displayName="Sidenav.Header";function M(a){return jsx("footer",{...a})}M.displayName="Sidenav.Footer";function J({children:a,for:t,...n}){const[i,r]=isUUID(t)?["toggle",t]:t.split(":"),o=useEmit(SidenavEventTypes[i]);return jsx(Pressable,{...n,onPress:()=>o({id:r}),children:a})}J.displayName="Sidenav.Trigger";function k({children:a,classNames:t,textValue:n,...i}){containsAnyOfExactChildren({children:a,componentName:k.displayName,restrictions:[[[C,{min:1,max:1}]],[[Icon,{min:1,max:1}],[Text,{min:1,max:1}]]]});const{isOpen:r}=useContext(f),o=useRef(null);return jsx(Provider,{values:[[IconContext,{size:"medium"}],[TextContext,{className:z({className:p()})}]],children:jsxs(Tooltip.Trigger,{isDisabled:r,children:[jsx(ToggleButton,{...i,ref:o,className:composeRenderProps(t?.button,m=>Se({className:m})),children:a}),jsx(Tooltip,{parentRef:o,placement:"right",className:b(),children:n})]})})}k.displayName="Sidenav.Item";function B({children:a,classNames:t,textValue:n,...i}){containsExactChildren({children:a,componentName:B.displayName,restrictions:[[Icon,{min:1,max:1}],[Text,{min:1,max:1}]]});const{isOpen:r}=useContext(f),o=useRef(null);return jsx(Provider,{values:[[TextContext,{className:z({className:p()})}]],children:jsxs(Tooltip.Trigger,{isDisabled:r,children:[jsx(Link,{...i,ref:o,className:composeRenderProps(t?.button,m=>Te({className:m})),children:composeRenderProps(a,m=>jsxs(Fragment,{children:[m,jsx(Icon,{className:p(),children:jsx(ArrowNortheast,{})})]}))}),jsxs(Tooltip,{parentRef:o,placement:"right",className:b(),children:[n,jsx(Icon,{children:jsx(ArrowNortheast,{})})]})]})})}B.displayName="Sidenav.Link";function C({children:a,className:t,...n}){return containsAnyOfExactChildren({children:a,componentName:C.displayName,restrictions:[[[Avatar,{min:1,max:1}],[Heading,{min:1,max:1}],[Text,{min:0,max:1}]],[[Icon,{min:1,max:1}],[Heading,{min:1,max:1}],[Text,{min:0,max:1}]]]}),jsx(Provider,{values:[[IconContext,{size:"large",className:V()}],[HeadingContext,{className:Pe({className:p()})}],[TextContext,{className:xe({className:p()})}],[AvatarContext,{classNames:{avatar:V()}}]],children:jsx("div",{...n,className:fe({className:t}),children:a})})}C.displayName="Sidenav.Avatar";function y({icon:a,title:t,classNames:n,children:i,...r}){containsExactChildren({children:i,componentName:y.displayName,restrictions:[[I,{min:2}]]});const{isOpen:o}=useContext(f),m=useRef(null);return o?jsxs(Disclosure,{className:composeRenderProps(n?.menu,s=>Ce({className:s})),children:[jsxs(Button,{...r,slot:"trigger",className:composeRenderProps(n?.button,s=>_({className:s})),children:[a,jsx(Heading,{slot:"menu",children:t}),jsx(Icon,{className:p({className:n?.icon}),children:jsx(ChevronDown,{className:"transform group-expanded/menu:rotate-180"})})]}),jsx(DisclosurePanel,{className:composeRenderProps(n?.disclosurePanel,s=>s??""),children:jsx("div",{className:G({className:n?.panelContent}),children:i})})]}):jsxs(DialogTrigger,{children:[jsxs(Tooltip.Trigger,{isDisabled:o,children:[jsx(Button,{...r,ref:m,className:composeRenderProps(n?.button,s=>_({className:s})),children:a}),jsx(Tooltip,{parentRef:m,placement:"right",className:b(),children:t})]}),jsxs(Popover,{className:composeRenderProps(n?.popoverPanel,s=>Ie({className:s})),placement:"right top",shouldFlip:false,children:[jsx(Heading,{slot:"panel",children:t}),jsx("div",{className:G({className:n?.panelContent}),children:i})]})]})}y.displayName="Sidenav.Menu";function I({className:a,children:t,...n}){return containsExactChildren({children:t,componentName:I.displayName,restrictions:[[Text,{min:1,max:1}]]}),jsx(ToggleButton,{...n,className:composeRenderProps(a,i=>Ee({className:i})),children:t})}I.displayName="Sidenav.Menu.Item",y.Item=I,d.Trigger=J,d.Header=L,d.Item=k,d.Link=B,d.Avatar=C,d.Footer=M,d.Content=A,d.Menu=y;export{d as Sidenav};//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map