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