@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.16 kB
JavaScript
;var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("material-ui-popup-state/hooks"),o=require("merge-sx"),s=require("react"),n=require("../Surface/Surface.js");const t={trigger:i.bindTrigger,contextMenu:i.bindContextMenu,toggle:i.bindToggle,hover:i.bindHover,focus:i.bindFocus,doubleClick:i.bindDoubleClick};module.exports=({bindOn:a=["toggle"],trigger:c,children:l,state:p,...u})=>{const d=p||i.usePopupState({variant:"popper"}),x={transition:!0,sx:o.mergeSx({zIndex:e=>e.zIndex.modal},u.popperProps?.sx),...u.popperProps},g={...u.clickAwayListenerProps,onClickAway:e=>{u.clickAwayListenerProps?.onClickAway?u.clickAwayListenerProps.onClickAway(e,d):d.close()}},m={timeout:350,...u.transitionFadeProps},{sx:b,...P}={variation:"overlay",borderradius:"md",...u.surfaceProps},k=s.useMemo(()=>a.reduce((e,r)=>({...e,...t[r](d)}),{}),[a]);return e.jsx(r.ClickAwayListener,{...g,children:e.jsxs(r.Box,{children:[e.jsx(r.Box,{sx:{display:"flex"},...k,children:c}),e.jsx(r.Popper,{...i.bindPopper(d),...x,children:({TransitionProps:i})=>e.jsx(r.Fade,{...i,...m,children:e.jsx(n,{sx:o.mergeSx({p:2},b),...P,children:l})})})]})})};