@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.92 kB
JavaScript
import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useState as i,useCallback as o}from"react";import a from"@mui/material/Collapse";import m from"@mui/material/List";import s from"@mui/material/ListItemText";import d from"@mui/material/Divider";import n from"@mui/icons-material/ExpandLess";import l from"@mui/icons-material/ExpandMore";import p from"clsx";import c from"@mui/material/Box";import u from"@mui/material/Stack";import{useDrawerContext as x}from"../../DrawerContext.js";import{DrawerCondensedListItem as f}from"../DrawerCondensedListItem/DrawerCondensedListItem.container.js";import{DrawerNestedListItem as h}from"../DrawerNestedListItem/DrawerNestedListItem.container.js";const L="NexusDrawerSection",I=i=>{const{condensed:a}=x(),{header:m,open:d,collapsible:c,onClick:f}=i,h={cursor:c?"pointer":"default"},I=o((()=>{c&&f?.()}),[c,f]);return e(u,{direction:"row",sx:[{px:4},...Array.isArray(h)?h:[h]],onClick:I,className:p(`${L}Header-root`,`${L}-header-root`),"data-testid":`${L}-header-root`,children:[r(s,{primary:m,primaryTypographyProps:{variant:a?"caption":void 0,sx:{fontWeight:700}},className:p(`${L}Header-text`,`${L}-header-text`),"data-testid":`${L}-header-text`}),!a&&c&&r(t,{children:r(d?n:l,{sx:{color:"grey.600"}})})]})},y=t=>{const{header:s,collapsible:n,startExpanded:l,styleMode:p="mui",divider:u,items:y=[],ListItemButtonProps:$,sx:v,children:w,...C}=t,{condensed:D}=x(),[N,P]=i(l),b=o((()=>{P(!N)}),[N]);return e(c,{"data-testid":`${L}-root`,children:[s&&r(I,{open:N,collapsible:n,header:s,onClick:b}),r(a,{in:!n||N,timeout:"auto",unmountOnExit:!0,children:e(m,{disablePadding:!0,...C,children:[y.map((e=>D?r(f,{item:e,ListItemButtonProps:$},e.nodeId):r(h,{styleMode:p,item:e,level:0,ListProps:C,ListItemButtonProps:$},e.nodeId))),w]})}),u&&r(d,{sx:{mb:D?2:0},className:`${L}-divider`,"data-testid":`${L}-divider`})]})};export{y as DrawerSectionComponent,L as prefix};