retro-react/dist/esm/components/autocomplete/Autocomplete.js

A React component library for building retro-style websites

import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as o,useRef as s,useState as t,useEffect as r}from"react";import{jsxs as l,jsx as n}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as i}from"../../utils/classNames.js";import a from"../../constants/commonClassNames.js";import{AutocompleteInput as c,SuggestionItem as u,SuggestionsList as m,ClearButton as g,AutocompleteWrapper as d}from"./Autocomplete.styled.js";const p=o(((o,p)=>{var{suggestions:f=[],onSuggestionSelect:h,variant:v="filled",size:j="medium",rounded:b=!1,color:N="primary",noResultsMessage:y="No suggestions",clearable:$=!0,className:w,sx:C}=o,k=e(o,["suggestions","onSuggestionSelect","variant","size","rounded","color","noResultsMessage","clearable","className","sx"]);const x=s(null),[D,O]=t(""),[A,M]=t([]),[S,T]=t(!1),[z,E]=t(!1),[H,_]=t(-1),[L,R]=t(!1);r((()=>{if(x.current){const e=Array.from(x.current.childNodes)[H];if(e){const o=e.offsetTop,s=o+e.clientHeight,t=x.current.scrollTop;s>t+x.current.clientHeight?x.current.scrollTop=s-x.current.clientHeight:o<t&&(x.current.scrollTop=o)}}}),[H]),r((()=>{if(D&&!S){const e=f.filter((e=>e.toLowerCase().includes(D.toLowerCase())));M(e),R(!0),_(-1)}else R(!1),_(-1)}),[D,f,S]);return l(d,Object.assign({className:i("autocomplete-root",w,a),sx:C},{children:[n(c,Object.assign({value:D,$variant:v,$size:j,$rounded:b,$color:N,onBlur:()=>{S||z||O("")},onChange:e=>{O(e.target.value),T(!1)},onKeyDown:e=>{if("ArrowDown"===e.key)e.preventDefault(),L&&A.length>0&&(H<A.length-1?_(H+1):_(0));else if("ArrowUp"===e.key)e.preventDefault(),L&&A.length>0&&_(H>0?H-1:A.length-1);else if("Enter"===e.key){if(e.preventDefault(),L&&H>=0&&A[H]){const e=A[H];O(e),R(!1),T(!0),h&&h(e)}}else"Escape"===e.key&&(R(!1),_(-1))},ref:p,className:"autocomplete-input"},k),void 0),L&&n(m,Object.assign({ref:x,$color:N,onMouseDown:()=>{E(!0)},onMouseUp:()=>{E(!1)},className:"autocomplete-suggestions"},{children:A.length>0?A.map(((e,o)=>n(u,Object.assign({$color:N,$highlighted:o===H,$selected:!1,onClick:()=>(e=>{O(e),R(!1),h&&h(e),T(!0)})(e),onMouseEnter:()=>_(o),className:o===H?"active-suggestion":void 0},{children:e}),e))):n("li",Object.assign({style:{padding:"0.5rem 1rem",color:"inherit",cursor:"default"}},{children:y}),void 0)}),void 0),$&&D&&!k.disabled&&n(g,Object.assign({className:"autocomplete-clear-button",onClick:()=>O(""),"aria-label":"Clear input"},{children:"×"}),void 0)]}),void 0)}));p.displayName="Autocomplete";export{p as Autocomplete};