@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.16 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 s=({menuItems:i,offset:s,placement:a,state:m,parentState:l,bindOn:c=["toggle"],trigger:d,width:f=192,showItemNumbers:u=!1,slotProps:h})=>{const g=m||t({variant:"popper",parentPopupState:l});return e(o,{popperProps:{modifiers:s&&[{name:"offset",options:{offset:s}}],placement:a,...h?.popper},surfaceProps:{...h?.surface,sx:p({ml:1,p:1,width:f},h?.surface?.sx)},bindOn:c,trigger:d,state:g,children:e(r,{children:i?.map((e,r)=>n(e,r,g,u))})})},n=(p,s,a,m)=>{const l=t({variant:"popper"});return p.children?.length?e(o,{popperProps:{placement:"right-end"},surfaceProps:{sx:{p:1,width:p.width}},bindOn:["trigger","hover"],state:l,trigger:e(i,{...p,active:l.isOpen}),children:e(r,{children:p?.children?.map((e,r)=>n(e,r,a))})},`${p.label}-${s}`):e(i,{...p,onClick:e=>{return r=e,t=p?.onClick,r.stopPropagation(),void(t&&t(r));var r,t},baseState:a,showItemNumber:m,itemNumber:s+1},`${p.label}-${s}`)};export{s as default,n as mapMenuItems};