@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 3.4 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),o=require("merge-sx");require("../../BrandCore/colorRamps.js");var r=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var i=require("../../BrandCore/Icon/Icon.js"),s=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var n=require("../Label/Label.js"),a=require("../Tooltip/Tooltip.js"),l=require("../Typography/Typography.js");const c=t.styled(t.Button,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:o})=>({borderRadius:o.spacing(o.custom.radius.sm),maxWidth:"100%",padding:o.spacing(.5,1),textTransform:"none",width:"100%",textOverflow:"ellipsis",whiteSpace:"nowrap",...s.buttonInteraction(o,e),backgroundColor:e?o.custom.palette.surface.sunken:"transparent","& p":{minHeight:t},"&:disabled":{backgroundColor:"inherit","& p":{color:o.custom.palette.text.disabled}}})),d=t.styled(t.Box)(({theme:e})=>({padding:e.spacing(.5,1)})),p=t.styled(t.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),textAlign:"left"})),h=t.styled(t.Stack,{shouldForwardProp:e=>"iconHeight"!==e})(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"}));module.exports=({baseState:s,label:x,active:u,danger:m,divider:g,heading:j,selected:y,disabled:v,closeOnClick:b,hidden:f,onClick:w,startIcon:B,slotProps:C,tooltip:q,showItemNumber:I=!1,itemNumber:k,children:H})=>{const S=t.useTheme(),T=3*r.base;return f?null:g?e.jsx(t.Box,{sx:{height:32,display:"flex",alignItems:"center"},children:e.jsx(t.Box,{sx:{borderBottom:`1px solid ${S.custom.palette.stroke.default}`,width:"100%"}})}):x?j?e.jsx(d,{children:e.jsx(l,{component:"p",type:"button",variation:"md",sx:{color:S.custom.palette.text.secondary},children:x})}):e.jsx(c,{active:u,disabled:v,onClick:e=>{w&&w(e),b&&s?.close()},iconHeight:T,sx:{[`&.${t.buttonBaseClasses.root} .${t.typographyClasses.root}`]:{minHeight:"initial"}},children:e.jsxs(p,{sx:{width:"100%",justifyContent:"space-between",gap:1},children:[e.jsxs(p,{sx:{flex:"1 1 auto",gap:1,minWidth:0},children:[I&&!!k&&e.jsx(n,{body:k,sizing:"xxs",colorScheme:"neutral",sx:{minWidth:32}}),void 0!==B&&e.jsx(i.default,{name:B,...C?.startIcon}),q?e.jsx(a,{message:x,slotProps:{wrapper:{sx:{minWidth:0,overflow:"hidden",flex:"1 1 auto"}}},children:e.jsx(l,{monospaced:!0,component:"p",sx:o.mergeSx({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},m&&{color:S.custom.palette.text.negative},j&&{color:S.custom.palette.text.secondary}),type:"button",variation:"md",children:x})}):e.jsx(l,{monospaced:!0,component:"p",sx:o.mergeSx({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},m&&{color:S.custom.palette.text.negative},j&&{color:S.custom.palette.text.secondary}),type:"button",variation:"md",children:x})]}),e.jsxs(h,{iconHeight:T,minWidth:T,children:[H?.length&&H.length>0&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(i.default,{name:"chevron-right",size:T})})}),y&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(i.default,{name:"check",size:T})})})]})]})}):null};