@expofp/floorplan/dist/esm/components/Autocomplete.js

Interactive floor plan library for expos and events

import{jsx as u,jsxs as B,Fragment as te}from"react/jsx-runtime";import"./Autocomplete.scss";import ne from"classnames";import{useEffect as j,useRef as I,useState as f}from"react";import{createPortal as re}from"react-dom";import{t as oe}from"../utils/i18n";import se from"../utils/useOnClickOutside";import{useRenderTarget as le}from"../utils/useRenderTarget";const x={ENTER:13,ESCAPE:27,ARROW_UP:38,ARROW_DOWN:40,DELETE:46},ce=({placeholder:K,options:o,value:s,showClear:y=!1,onChange:U})=>{const L=le(),E=I(null),m=I(null),P=I(null),p=I(!1),A=e=>e.value,a=e=>e.label,b=e=>o.findIndex(t=>t.value===e.value&&t.label===e.label),S=e=>{if(e)return o.find(t=>t.value===e.value&&t.label===e.label)},V=()=>{if(!s)return"";const e=S(s);return e?a(e):""},[c,v]=f([]),[D,R]=f(V()),[F,_]=f(s?b(s):null),[n,i]=f(F),[l,d]=f(!1),[T,C]=f(""),[k,$]=f({top:0,left:0,width:0}),w=()=>{if(E.current&&l){const e=E.current.getBoundingClientRect();$({top:e.bottom+window.scrollY+4,left:e.left+window.scrollX,width:e.width})}};j(()=>{if(l)return w(),window.addEventListener("scroll",w,!0),window.addEventListener("resize",w),()=>{window.removeEventListener("scroll",w,!0),window.removeEventListener("resize",w)}},[l]),se([E,P],()=>{d(!1)});const N=e=>{const t=S(e);R(t?a(t):""),C(""),v([]),U?.(e)};j(()=>{if(p.current){p.current=!1;return}const e=s?b(s):-1,t=e>=0?o[e]:null;_(e>=0?e:null),i(e>=0?e:null),R(t?a(t):""),C(""),v([])},[s,o]);const z=e=>{const t=b(e);p.current=!0,N(e),_(t),i(t),d(!1),m.current?.blur()},M=e=>{e.preventDefault(),e.stopPropagation();const t=e.currentTarget,r=t.getAttribute("data-value")||t.innerText,h=t.getAttribute("data-label")||t.innerText,O=o.find(g=>A(g)===r&&a(g)===h)??o.find(g=>A(g)===r);v([]),z(O)},W=(e=!1)=>{N(void 0),_(null),i(null),e&&m.current?.focus()},Y=()=>{d(!0)},X=()=>{setTimeout(()=>{if(p.current){p.current=!1;return}!D&&s&&N(s)},200)},q=()=>{if(!D&&n===null||T&&n===null)return;p.current=!0;const e=c.length>0?c:o;if(n!==null&&e[n]){const t=e[n],r=b(t);N(t),_(r),i(r)}d(!1),m.current?.blur()},G=()=>{!l||n===0||n===null||i(n-1)},H=()=>{if(!l){d(!0);return}const e=c.length>0?c:o,t=n===null?0:n+1;t<e.length&&i(t)},J=e=>{switch(e.keyCode){case x.ENTER:q();break;case x.ARROW_UP:G();break;case x.ARROW_DOWN:H();break;case x.DELETE:W(!0);break;case x.ESCAPE:T||(e.preventDefault(),d(!1),m.current?.blur());break}},Q=e=>{const t=e.target.value,r=t.toLowerCase(),h=t?o.filter(O=>a(O).toLowerCase().includes(r)):[];d(!0),R(t),C(t),i(null),v(h)},Z=()=>{const e=c.length>0?c:o;return T&&c.length===0?u("div",{className:"efp-autocomplete__empty",children:oe("No options")}):u("ul",{children:e.map((t,r)=>{const h=r===n,O=c.length===0&&r===F;return u("li",{className:h?"is-focus":O?"is-active":void 0,"data-value":A(t),"data-label":a(t),onMouseDown:ee=>ee.preventDefault(),onClick:M,children:a(t)},r)})})};return B(te,{children:[u("div",{ref:E,className:ne("efp-autocomplete",{"is-open":l,"with-clear":l&&y}),children:B("div",{className:"efp-autocomplete__inner",children:[u("input",{type:"search",className:"efp-autocomplete__input",onChange:Q,onFocus:Y,onBlur:X,onKeyDown:J,value:D,placeholder:K,ref:m}),y&&l&&D&&u("div",{className:"efp-autocomplete__clear",onMouseDown:e=>{e.preventDefault(),W(!0)}})]})}),l&&L&&re(u("div",{ref:P,className:"efp-autocomplete-options",style:{top:`${k.top}px`,left:`${k.left}px`,width:`${k.width}px`},children:u("div",{className:"efp-autocomplete-options__scroll",children:Z()})}),L)]})};export default ce;