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