@gsretail.com/gui-core/build/core/AutoComplete/GuiAsyncComplete.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__rest as e,__spreadArray as l,__assign as t}from"../../node_modules/tslib/tslib.es6.js";import i from"react";import{Box as a,FormControl as n,Autocomplete as o,TextField as r,CircularProgress as s}from"@mui/material";import{GuiIcon as d}from"../../node_modules/@gsretail.com/gui-icons/dist/index.js";import u from"./GuiAutoComplete.styled.js";var m=u((function(u){var m=u.label,c=u.labelWidth,p=u.labelTextAlign,b=u.required,f=u.width,g=u.size,h=u.placeholder,O=u.readOnly,E=u.disabled,x=u.limitTags,C=u.disableCloseOnSelect,S=u.filterSelectedOptions,v=u.multiple,y=u.optionHeight,T=u.arrOption,w=u.getOptionLabel,A=u.value,P=u.onChange;u.children;var z=u.className,N=u.boxProps,j=u.disableClearable,I=e(u,["label","labelWidth","labelTextAlign","required","width","size","placeholder","readOnly","disabled","limitTags","disableCloseOnSelect","filterSelectedOptions","multiple","optionHeight","arrOption","getOptionLabel","value","onChange","children","className","boxProps","disableClearable"]),W=m?c:"0",q=i.useState(!1),H=q[0],L=q[1],G=i.useState([]),F=G[0],M=G[1],_=H&&0===F.length;return i.useEffect((function(){var e=!0;if(_)return e&&M(l([],T,!0)),function(){e=!1}}),[_]),i.useEffect((function(){H||M([])}),[H]),i.createElement(a,t({className:["gui-form gui-autoComplete",z&&z].join(" "),width:f},N),m&&i.createElement(a,{minWidth:c},i.createElement("label",{className:["gui-label",p&&"textAlign-"+p,b&&"Mui-required"].join(" ")},m)),i.createElement(a,{flexGrow:1,style:{maxWidth:"calc("+f+" - "+W+")"}},i.createElement(n,{variant:"outlined",style:{width:"100%"}},i.createElement(o,t({open:H,onOpen:function(){L(!0)},onClose:function(){L(!1)},isOptionEqualToValue:function(e,l){return e.label===l.label},options:T,getOptionLabel:w||function(e){return e.label||""},value:A,onChange:P,multiple:v,limitTags:x&&x,openOnFocus:!0,disableCloseOnSelect:!!v&&C,filterSelectedOptions:S,loading:_,renderInput:function(e){return i.createElement(r,t({},e,{InputProps:t(t({},e.InputProps),{endAdornment:i.createElement(i.Fragment,null,_?i.createElement(s,{color:"inherit",size:20}):null,e.InputProps.endAdornment)}),placeholder:h,size:g,disabled:E}))},ListboxProps:{style:{maxHeight:y}},popupIcon:i.createElement(d,{name:"ExpandMore"}),size:g,disabled:E,className:O?"Gui-readonly":"",disableClearable:j},I)),O?i.createElement(a,{className:"readonly-wrap"}):null)))}));m.defaultProps={labelWidth:"auto",labelTextAlign:"left",width:"100%",size:"small",limitTags:-1,optionHeight:"auto",disableCloseOnSelect:!0,multiple:!0};export{m as default};