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