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