@useloops/design-system/dist/systems/WebCore/Select/Autocomplete.js

The official React based Loops design system

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