@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 776 B
JavaScript
import{jsx as e}from"react/jsx-runtime";import{Box as r}from"@mui/material";import{useMemo as t}from"react";import l from"../AutocompleteBaseField/AutocompleteBaseField.js";import o from"../AutocompleteBaseField/_partials/AutocompleteChip.js";import a from"../AutocompleteBaseField/_partials/StyledAutocompleteInput.js";const i=i=>{const p=t(()=>i.placeholder&&Array.isArray(i.value)&&0===i.value.length,[i.value]);return e(l,{...i,multi:!0,grouped:i.grouped??!1,renderInput:r=>e(a,{...r,placeholder:p?i.placeholder:"",sizing:i.sizing,multi:!0}),renderValue:(t,l)=>{const a=Array.isArray(t)?t:[];return e(r,{sx:{display:"flex",flexWrap:"wrap",gap:.5},children:a.map((r,t)=>{const a=l({index:t});return e(o,{sizing:i.sizing,label:r.label,...a},t)})})}})};export{i as default};