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

A React component library for building retro-style websites

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