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