@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.13 kB
JavaScript
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Check as o,CloseRounded as t,KeyboardArrowDown as r}from"@mui/icons-material";import{Box as i,autocompleteClasses as n}from"@mui/material";import s,{useState as a,useEffect as p,forwardRef as u}from"react";import{StyledTextField as m}from"../utils/autocomplete.styles.js";import c from"./AutocompleteListbox.js";import d from"./AutocompletePopper.js";import{StyledAutocomplete as b,StyledChip as g}from"./StyledAutocomplete.js";const f=({selections:f,disableClearable:h=!1,disabled:v,internalChange:y,grouped:x=!1,multiple:A=!0,onChange:z,placeholder:C="",renderListItem:O,sizing:S="lg",value:j=(A?[]:"")})=>{const[I,k]=a(f.filter(e=>j.includes(e?.value)));p(()=>{null!=j&&k(f.filter(e=>j.includes(e?.value)))},[j]);const L=(e,l)=>{if(z){const o=l?f.map(({value:e})=>e):[];k(l?f:[]),z(e,o,"selectOption"),y&&y()}},F=e=>null!==e&&(!Array.isArray(e)||e.length>0);return e(b,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e(r,{}),sizing:S,disabled:v,disableClearable:h,autoComplete:!0,multiple:A,...x?{groupBy:e=>(e=>Object.hasOwn(e,"group"))(e)?e.group:"",renderGroup:o=>l(s.Fragment,{children:[0!==parseInt(`${o.key}`)&&e(i,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),e(i,{component:"div",className:n.groupLabel,children:o.group}),o.children]},o.key)}:{},renderInput:l=>e(m,{...l,placeholder:F(I)?void 0:C,sizing:S}),options:f,renderTags:(l,o)=>l.map((l,r)=>{const{key:i,...n}=o({index:r});return e(g,{sizing:S,deleteIcon:e(t,{fontSize:"small"}),label:l.label,...n},i)}),onChange:(e,l,o)=>{const t=Array.isArray(l)?l.map(e=>e.value):l?.value??null;k(l),z?.(e,t,o),y?.()},slots:{popper:l=>e(d,{...l,sizing:S})},isOptionEqualToValue:(e,l)=>e.value===l.value,renderOption:(t,r,{selected:i})=>{const{key:n,...s}=t;return l("li",{...s,children:[e("span",{children:O?O(r.value,r.label):r.label}),e(o,{sx:{visibility:i?"visible":"hidden",fontSize:"16px"}})]},n)},ListboxComponent:u((l,o)=>e(c,{ref:o,...l,showSelectAll:A,handleSelectAll:L,value:I,selections:f,sizing:S})),value:I})};export{f as default};