@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.04 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Check as l,KeyboardArrowDown as o}from"@mui/icons-material";import{styled as i,createFilterOptions as n}from"@mui/material";import{forwardRef as r,useState as a}from"react";import{StyledTextField as s}from"../utils/autocomplete.styles.js";import{StyledCreatableAutocomplete as u,StyledCreatablePopper as p}from"./StyledCreatableAutocomplete.js";const d=i("ul")(()=>({listStyle:"none",padding:0,margin:0,overflow:"auto",width:"100%"})),c=r((t,l)=>e(d,{ref:l,...t})),m=n({trim:!0}),b=(e,t)=>e?.trim().toLowerCase()===t.toLowerCase().trim(),f=({options:i,value:n,onChange:r,internalChange:d,placeholder:f="",sizing:h="lg",disabled:g=!1,fullWidth:v=!1})=>{const[y,C]=a(i?.find(e=>e.value===n)??""),j=(e,t,l)=>{let o;if(null===t)return o="",C(o),void r?.(o);if("createOption"===l&&"string"==typeof t){o=i.find(e=>b(e.label,t))??{value:t,label:t}}else o="object"==typeof t?(e=>{if(!e)return"";if("object"==typeof e&&e?.label?.startsWith('Add "')&&e?.label?.endsWith('"')){const t=e.label.substring(5,e.label.length-1);return{value:t,label:t}}return e})(t):"";C(o);const n="object"==typeof o?o.value:"";r?.(n??""),d?.()};return e(u,{disabledItemsFocusable:!0,autoFocus:!1,value:y,onChange:(e,t,l)=>{j(0,t,l)},onInputChange:(e,t)=>{e&&"keydown"===e.type&&"Enter"===e.key&&t&&j(0,t,"create-option")},filterOptions:(e,t)=>{const l=m(e,t),{inputValue:o}=t,i=e.some(e=>b(e.label,o));return""===o||i||l.push({value:o,label:`Add "${o}"`}),l},freeSolo:!0,selectOnFocus:!0,handleHomeEndKeys:!0,sizing:h,disabled:g,options:i,popupIcon:e(o,{}),isOptionEqualToValue:(e,t)=>e.value===t.value,getOptionLabel:e=>"string"==typeof e?e:e?.label||"",sx:v?{width:"100%"}:void 0,renderInput:t=>e(s,{...t,placeholder:y?void 0:f,sizing:h}),renderOption:(o,i,{selected:n})=>{const{key:r,id:a,...s}=o;return t("li",{id:a,...s,children:[e("span",{children:i.label}),e(l,{sx:{visibility:n?"visible":"hidden",fontSize:"16px"}})]},`${r}-${a}`)},slots:{popper:t=>e(p,{...t,sizing:h}),listbox:c}})};export{f as default};