@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.1 kB
JavaScript
import{jsx as e,Fragment as r}from"react/jsx-runtime";import{usePopupState as t}from"material-ui-popup-state/hooks";import{mergeSx as p}from"merge-sx";import o from"../Popper/Popper.js";import i from"./MenuItem.js";const n=({menuItems:i,offset:n,placement:s,state:m,parentState:l,bindOn:c=["toggle"],trigger:d,width:f=192,slotProps:g})=>{const h=m||t({variant:"popper",parentPopupState:l});return e(o,{popperProps:{modifiers:n&&[{name:"offset",options:{offset:n}}],placement:s,...g?.popper},surfaceProps:{...g?.surface,sx:p({ml:1,p:1,width:f},g?.surface?.sx)},bindOn:c,trigger:d,state:h,children:e(r,{children:i?.map((e,r)=>a(e,r,h))})})},a=(p,n,s)=>{const m=t({variant:"popper"});return p.children?.length?e(o,{popperProps:{placement:"right-end"},surfaceProps:{sx:{p:1,width:p.width}},bindOn:["trigger","hover"],state:m,trigger:e(i,{...p,active:m.isOpen}),children:e(r,{children:p?.children?.map((e,r)=>a(e,r,s))})},`${p.label}-${n}`):e(i,{...p,onClick:e=>{return r=e,t=p?.onClick,r.stopPropagation(),void(t&&t(r));var r,t},baseState:s},`${p.label}-${n}`)};export{n as default,a as mapMenuItems};