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