@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.27 kB
JavaScript
;var e=require("react/jsx-runtime"),l=require("@mui/icons-material"),t=require("@mui/material"),r=require("react"),a=require("../SelectItem/SelectItem.js"),s=require("./_partials/AutocompleteListbox.js"),o=require("./_partials/AutocompletePopper.js"),u=require("./_partials/StyledAutocompleteField.js");function n(e){return e&&e.__esModule?e:{default:e}}var i=n(r);module.exports=({selections:n,disableClearable:p=!1,disabled:c,internalChange:d,grouped:b=!1,multi:m,onChange:g,placeholder:v="",renderListItem:f,renderInput:x,renderValue:j,sizing:y="lg",value:h=(m?[]:""),getOptionLabel:A,slots:q,...O})=>{const[S,C]=r.useState(n?.find(e=>h===e?.value)||null),[I,B]=r.useState(Array.isArray(h)?h.flatMap(e=>n?.find(l=>l.value===e)??[]):[]);r.useEffect(()=>{if(m&&Array.isArray(h)&&B(h.flatMap(e=>n?.find(l=>l.value===e)??[])),!m&&"string"==typeof h){const e=n?.find(e=>e.value===h)||null;C(e)}},[h]);const k=i.default.useCallback((e,l)=>{const t=(m?I:[S].filter(Boolean)).length===n?.length,r=l&&t,a=r?[]:l?n:[],s=r?[]:l?n.map(({value:e})=>e):[];m?B(a):C(a[0]||null),g?.(e,s,"selectOption"),d?.()},[n,m,g,d,I]);return e.jsx(u,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e.jsx(l.KeyboardArrowDown,{}),disabled:c,disableClearable:p,multiple:m,options:n,renderInput:x,renderValue:j,value:m?I:S,isOptionEqualToValue:(e,l)=>e.value===l.value,onChange:(e,l,t)=>{const r=(e=>Array.isArray(e)?e.map(e=>e.value):e?.value??null)(l);m?B(l):C(l),g?.(e,r,t),d?.()},...b?{groupBy:e=>{const l=e;return(e=>Object.hasOwn(e,"group"))(l)?l.group:""},renderGroup:l=>e.jsxs(i.default.Fragment,{children:[0!==parseInt(`${l.key}`)&&e.jsx(t.Box,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),l.group&&e.jsx(t.Box,{component:"div",className:t.autocompleteClasses.groupLabel,children:l.group}),l.children]},l.key)}:{},getOptionLabel:e=>"object"==typeof e&&null!==e&&"label"in e?e.label:"",renderOption:(l,t,{selected:r})=>{const{key:s,...o}=l,u=t;return e.jsxs(a,{value:u.value,sizing:y,selected:r,...o,children:[f?f(u.value,u.label):u.label," "]},u.value)},slots:{...q,popper:l=>e.jsx(o,{...l,sizing:y}),listbox:l=>e.jsx(s,{...l,handleSelectAll:k,showSelectAll:Boolean(m),value:m?I:S,selections:n,sizing:y})}})};