@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.53 kB
JavaScript
import{jsx as e}from"react/jsx-runtime";import{KeyboardArrowDown as l}from"@mui/icons-material";import{useTheme as t,Box as i}from"@mui/material";import{useBreakpoint as o}from"../../../utils/breakpoint.hook.js";import r from"../Typography/Typography.js";import{popperStyles as a}from"../AutocompleteBaseField/_partials/StyledPopper.js";import n from"../SelectItem/SelectItem.js";import m from"./StyledSelect.js";const s=({selections:s,disabled:p=!1,disablePortal:d=!1,inputRef:c,internalChange:u,onChange:h,placeholder:g="",selectOptionProps:f,sizing:v="lg",sx:b,value:x=[],multi:y,renderListItem:j,renderSelectedItem:I,...S})=>{const P=t(),z=o();return e(m,{sizing:v,inputRef:c,MenuProps:{disablePortal:d,sx:a(P,v),anchorOrigin:{vertical:"bottom",horizontal:"center"}},multiple:y,disabled:p,displayEmpty:!0,IconComponent:l,renderValue:l=>g&&!l||g&&0===l.length?e(r,{component:"p",variation:"sm"===z||"md"===z?"sm":"lg",sx:{color:P.custom.palette.text.placeholder},children:g}):I?e(i,{sx:{display:"flex",alignItems:"center",pl:P.p.xs,width:1},children:I(l,s?.find(({value:e})=>e===l)?.label)}):e(r,y?{id:"value-multi",component:"p",variation:"sm"===z||"md"===z?"sm":"lg",children:l.map(e=>s?.find(({value:l})=>l===e)?.label||e).join(", ")}:{id:"value-single",component:"p",variation:"sm"===z||"md"===z?"sm":"lg",children:s?.find(({value:e})=>e===l)?.label}),onChange:(e,l)=>{h&&h(e,l),u&&u()},sx:b,value:x,...S,children:s?.map(({value:l,label:t})=>e(n,{value:l,...f,sizing:v,children:j?j(l,t):t},l))})};export{s as default};