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