@zeptonow/input-typeahead
Version:
An input typeahead component for react applications, convert any input into a typeahead with a dropdown of suggestions.
13 lines • 16.3 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _reactdom = require('react-dom');var se=(s,n,o)=>{_react.useEffect.call(void 0, ()=>{if(!o)return;let i=c=>{s.every(E=>E.current&&!E.current.contains(c.target))&&n(c)};return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[s,n,o])};var J=(s,n)=>{if(!s.current)return;let o=s.current,i=o.value,c=o.selectionStart||0,f=i.lastIndexOf(n,c-1);if(f>=0){let E=i.slice(0,f)+n;o.value=E;let d=f+n.length;o.setSelectionRange(d,d)}},X=(s,n)=>{if(!s.current)return null;let o=s.current,i=o.value,c=o.selectionStart||0,f=i.lastIndexOf(n,c-1);return f===-1?null:{searchStart:f,currentSearch:i.slice(f+1,c)}};var ie=s=>{if(!s.current)return{top:0,left:0};let n=s.current;if(n instanceof HTMLTextAreaElement){let o=document.createElement("div"),i=window.getComputedStyle(n);Array.from(i).forEach(R=>{o.style.setProperty(R,i.getPropertyValue(R))}),o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.visibility="hidden",o.style.overflow="hidden",o.style.height="auto",o.style.width=`${n.clientWidth}px`,o.style.boxSizing="border-box",o.style.paddingTop=i.paddingTop,o.style.paddingRight=i.paddingRight,o.style.paddingBottom=i.paddingBottom,o.style.paddingLeft=i.paddingLeft,o.style.whiteSpace=i.whiteSpace,o.style.wordWrap=i.wordWrap,o.style.lineHeight=i.lineHeight,o.style.fontFamily=i.fontFamily,o.style.fontSize=i.fontSize,o.style.fontWeight=i.fontWeight;let c=n.selectionStart||0,E=n.value.substring(0,c).replace(/\n/g,"<br>");o.innerHTML=E;let d=document.createElement("span");d.textContent="|",d.style.display="inline",d.style.width="0",d.style.overflow="hidden",o.appendChild(d),document.body.appendChild(o);let H=d.getBoundingClientRect(),m=o.getBoundingClientRect();document.body.removeChild(o);let F=parseInt(i.paddingLeft)||0;return{left:H.left-m.left+F,top:H.top-m.top-n.scrollTop}}else{let o=n.value.substring(0,n.selectionStart||0),i=document.createElement("span");i.style.font=window.getComputedStyle(n).font,i.style.position="absolute",i.style.visibility="hidden",i.style.whiteSpace="pre",i.textContent=o||"",document.body.appendChild(i);let c=i.getBoundingClientRect().width;document.body.removeChild(i);let f=parseInt(window.getComputedStyle(n).paddingLeft)||0;return{left:c+f-n.scrollLeft,top:0}}},le=s=>{let{position:n,maxVisibleOptions:o,currentOptionsLength:i,containerRef:c,inputRef:f,getCaretCoordinates:E}=s;if(!c.current||!f.current)return;let d=c.current,H=f.current,m=H.getBoundingClientRect();d.style.visibility="hidden",d.style.opacity="0";let P=Math.min(i,o)*36,r=d.offsetWidth,S=8,u=-4,A="0px",y="0px",g="";if(n==="cursor"){let I=E(),T=m.left+I.left,x=m.top+I.top,v=parseInt(window.getComputedStyle(H).lineHeight)||parseInt(window.getComputedStyle(H).fontSize)||16,p=window.innerHeight-(x+v),M=x;p<P+S&&M>=P+S?(y="",g=`${window.innerHeight-x+S}px`):(y=`${x+v+S}px`,g="");let L=Math.max(0,T-u);L+r>window.innerWidth?A=`${Math.max(0,window.innerWidth-r-10)}px`:A=`${L}px`}else{let I=m.top,T=window.innerHeight-m.bottom,x=n==="top"&&I<P+S||n==="bottom"&&T<P+S?n==="top"?"bottom":"top":n,v=m.left;v+r>window.innerWidth?A=`${Math.max(0,m.right-r)}px`:A=`${v}px`,x==="top"?(y="",g=`${window.innerHeight-m.top+S}px`):(y=`${m.bottom+S}px`,g="")}d.style.left=A,d.style.top=y,d.style.bottom=g,requestAnimationFrame(()=>{d&&(d.style.visibility="visible",d.style.opacity="1")})};var ae={maxHeight:"386px",backgroundColor:"white",boxShadow:"0 2px 10px rgba(0,0,0,0.12)",borderRadius:"8px",border:"1px solid rgba(0,0,0,0.1)",minWidth:"180px",overflowY:"auto",position:"fixed",zIndex:9999,visibility:"hidden",overflow:"auto",animation:"typeaheadFadeIn 0.18s ease-out forwards",transition:"all 0.18s ease-out",transform:"translateY(0)",width:"360px"},ce={padding:"12px 16px",display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid rgba(0,0,0,0.1)",position:"sticky",top:0,left:0,zIndex:2,backgroundColor:"white"},de={fontSize:"14px",fontWeight:600,color:"#101418",margin:0},pe={padding:"12px 16px",display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid rgba(0,0,0,0.1)",position:"sticky",top:0,left:0,zIndex:2,backgroundColor:"white"},ue={fontSize:"14px",fontWeight:500,color:"#101418",margin:0},fe={fontSize:"12px",color:"#101418",padding:"8px 12px",fontWeight:500,lineHeight:"20px",letterSpacing:"0.1px",display:"flex",alignItems:"center",justifyContent:"space-between",background:"none",border:"none",cursor:"pointer",width:"100%",textAlign:"left"},Q={fontSize:"12px",color:"#5A6477",fontWeight:400,lineHeight:"16px",letterSpacing:"0.1px"},he={background:"#F8E9FC"};var _jsxruntime = require('react/jsx-runtime');var Le=s=>_jsxruntime.jsx.call(void 0, "svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"none",...s,children:_jsxruntime.jsx.call(void 0, "path",{fill:"currentColor",stroke:"currentColor",strokeWidth:".8",d:"M10.354 12.646a.5.5 0 1 1-.707.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 1 1 .707.708L5.707 8l4.647 4.646Z"})}),Y=Le;var Ee=()=>_jsxruntime.jsx.call(void 0, "svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:_jsxruntime.jsx.call(void 0, "g",{id:"x-close",children:_jsxruntime.jsx.call(void 0, "path",{id:"vector",fillRule:"evenodd",clipRule:"evenodd",d:"M4.41107 4.4107C4.73651 4.08527 5.26414 4.08527 5.58958 4.4107L10.0003 8.82145L14.4111 4.4107C14.7365 4.08527 15.2641 4.08527 15.5896 4.4107C15.915 4.73614 15.915 5.26378 15.5896 5.58921L11.1788 9.99996L15.5896 14.4107C15.915 14.7361 15.915 15.2638 15.5896 15.5892C15.2641 15.9147 14.7365 15.9147 14.4111 15.5892L10.0003 11.1785L5.58958 15.5892C5.26414 15.9147 4.73651 15.9147 4.41107 15.5892C4.08563 15.2638 4.08563 14.7361 4.41107 14.4107L8.82181 9.99996L4.41107 5.58921C4.08563 5.26378 4.08563 4.73614 4.41107 4.4107Z",fill:"#5A6477"})})}),me=Ee;var Ae=({onClose:s,onBack:n,currentLevel:o,nestedPath:i})=>i.length>0?_jsxruntime.jsx.call(void 0, "div",{style:pe,children:_jsxruntime.jsxs.call(void 0, "div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[_jsxruntime.jsx.call(void 0, "button",{onClick:n,style:{background:"none",border:"none",cursor:"pointer",padding:"4px",display:"flex",alignItems:"center"},children:_jsxruntime.jsx.call(void 0, Y,{})}),_jsxruntime.jsx.call(void 0, "h3",{style:ue,children:_optionalChain([o, 'optionalAccess', _2 => _2.label])||"Back"})]})}):_jsxruntime.jsxs.call(void 0, "div",{style:ce,children:[_jsxruntime.jsx.call(void 0, "h3",{style:de,children:"Response Shortcuts"}),_jsxruntime.jsx.call(void 0, "button",{onClick:s,style:{background:"none",border:"none",cursor:"pointer",padding:"4px",display:"flex",alignItems:"center"},children:_jsxruntime.jsx.call(void 0, me,{})})]}),ve=Ae;var Oe=s=>_jsxruntime.jsx.call(void 0, "svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"none",...s,children:_jsxruntime.jsx.call(void 0, "path",{fill:"currentColor",fillRule:"evenodd",d:"M13.333 2c.368 0 .667.298.667.667v.963c0 1.095 0 1.957-.057 2.651-.058.709-.178 1.3-.452 1.838a4.667 4.667 0 0 1-2.039 2.039c-.537.274-1.129.394-1.837.452-.694.057-1.557.057-2.652.057H4.276l2.195 2.195a.667.667 0 1 1-.942.943L2.195 10.47a.667.667 0 0 1 0-.942L5.53 6.195a.667.667 0 1 1 .942.943L4.276 9.333h2.657c1.131 0 1.94 0 2.573-.052.626-.051 1.022-.149 1.34-.311a3.334 3.334 0 0 0 1.457-1.457c.162-.318.26-.714.311-1.34.052-.634.053-1.442.053-2.573v-.933c0-.369.298-.667.666-.667Z",clipRule:"evenodd"})}),Se=Oe;var xe=({option:s,isActive:n,customStyles:o,activeStyles:i,valueStyles:c,onClick:f})=>_jsxruntime.jsxs.call(void 0, "button",{style:{...fe,...n?he:{},...o,...n?i:{}},onClick:f,children:[_jsxruntime.jsxs.call(void 0, "div",{style:{display:"flex",flexDirection:"column",gap:"2px",width:"90%",flexShrink:0},children:[_jsxruntime.jsx.call(void 0, "span",{style:{color:"#101418"},children:s.label}),s.children?_jsxruntime.jsxs.call(void 0, "span",{style:{...Q,...c},children:[s.children.length," options"]}):null,s.description?_jsxruntime.jsx.call(void 0, "span",{style:{...Q,...c},children:s.description}):null]}),_jsxruntime.jsx.call(void 0, "div",{style:{width:"10%",textAlign:"center",flexShrink:0},children:s.children&&s.children.length>0?_jsxruntime.jsx.call(void 0, "span",{style:{rotate:"180deg",display:"inline-block"},children:_jsxruntime.jsx.call(void 0, Y,{color:n?"#9C27B0":"#667085"})}):n?_jsxruntime.jsx.call(void 0, "span",{style:{display:"inline-block"},children:_jsxruntime.jsx.call(void 0, Se,{color:n?"#9C27B0":"#5A6477"})}):null})]});var Ce=({options:s,triggerChar:n="/",position:o="bottom",activateMode:i="multiple",maxVisibleOptions:c=5,typeAheadContainerStyles:f,typeAheadOptionStyles:E,typeAheadActiveOptionStyle:d,typeAheadOptionValueStyles:H,onSelect:m,searchCallback:F,renderOption:R,renderHeader:P,inputRef:r,onWidgetStateChange:S})=>{let[u,A]=_react.useState.call(void 0, !1),[y,g]=_react.useState.call(void 0, []),[I,T]=_react.useState.call(void 0, s),[x,v]=_react.useState.call(void 0, 0),[p,M]=_react.useState.call(void 0, []),B=_react.useRef.call(void 0, null),L=_react.useRef.call(void 0, null),z=_react.useRef.call(void 0, new Map),V=_react.useRef.call(void 0, !1);_react.useEffect.call(void 0, ()=>{z.current.clear()},[y]),_react.useEffect.call(void 0, ()=>{p.length===0&&T(s)},[s,p.length]);let ne=_react.useCallback.call(void 0, ()=>ie(r),[r]),h=_react.useCallback.call(void 0, ()=>{le({position:o,maxVisibleOptions:c,currentOptionsLength:I.length,containerRef:B,inputRef:r,getCaretCoordinates:ne})},[o,c,I.length,B,r,ne]),b=_react.useCallback.call(void 0, (e=!1)=>{A(!1),v(0),e||(M([]),T(s)),g([]),V.current=!1,r.current&&r.current.focus()},[s,r]),q=_react.useCallback.call(void 0, (e,t)=>e?t.filter(a=>{if(F)return F(a,e);let l=a.label.toLowerCase().startsWith(e.toLowerCase()),C=a.value?a.value.toLowerCase().startsWith(e.toLowerCase()):!1;return l||C}):t,[F]),G=_react.useCallback.call(void 0, e=>{if(!r.current)return!1;let t=r.current,{searchStart:a,currentSearch:l}=e;if(!(a===0||a>0&&/\s/.test(t.value.charAt(a-1)))||i==="single"&&t.value.substring(0,a).trim().length>0||l.includes(" "))return!1;let w=[];if(p.length>0){let Z=_optionalChain([p, 'optionalAccess', _3 => _3[p.length-1], 'optionalAccess', _4 => _4.children])||[];l===""?w=Z:w=q(l,Z)}else l===""?w=s:w=q(l,s);return g(w),p.length>0||w.length>0},[q,r,p,s,i]),$=_react.useCallback.call(void 0, e=>{if(e.children&&e.children.length>0)M(t=>[...t,e]),T(e.children),g(e.children),v(0),J(r,n);else{if(r.current){let t=r.current,a=t.value,l=t.selectionStart||0,C=a.lastIndexOf(n,l-1);if(C>=0){let w=a.slice(0,C)+(e.value||e.label)+a.slice(l);t.value=w;let Z=C+(e.value||e.label).length;t.setSelectionRange(Z,Z),t.focus()}}_optionalChain([m, 'optionalCall', _5 => _5(e)]),b()}},[r,m,b,n]),j=_react.useCallback.call(void 0, ()=>{if(p.length>0){let e=[...p];if(e.pop(),e.length===0)M([]),T(s),g(s);else{M(e);let t=_optionalChain([e, 'optionalAccess', _6 => _6[e.length-1], 'optionalAccess', _7 => _7.children])||[];T(t),g(t)}v(0),h(),J(r,n)}},[p,s,h,r,n]);se([B,r],()=>{b(),r.current&&r.current.focus()},u);let oe=_react.useCallback.call(void 0, e=>{e.children&&e.children.length>0?(M(t=>[...t,e]),T(e.children),g(e.children),v(0),h(),J(r,n),r.current&&r.current.focus()):$(e)},[$,h,r,n]),re=_react.useCallback.call(void 0, ()=>{b(),r.current&&r.current.focus()},[b,r]),K=_react.useCallback.call(void 0, e=>{let t=z.current.get(e);if(t&&B.current){let a=B.current.getBoundingClientRect(),l=t.getBoundingClientRect();l.bottom>a.bottom?t.scrollIntoView({behavior:"smooth",block:"end"}):l.top<a.top&&t.scrollIntoView({behavior:"smooth",block:"end"})}},[]);return _react.useEffect.call(void 0, ()=>(L.current||(L.current=document.createElement("div"),document.body.appendChild(L.current)),()=>{L.current&&(document.body.removeChild(L.current),L.current=null)}),[]),_react.useEffect.call(void 0, ()=>{if(!r.current)return;let e=r.current,t=()=>{let a=X(r,n);if(!a){u&&b();return}G(a)||a.currentSearch===""?u?h():(A(!0),setTimeout(()=>{h()},0)):u&&a.currentSearch!==""&&p.length===0&&b()};if(u)return e.addEventListener("input",t),()=>e.removeEventListener("input",t);{let a=()=>{let l=X(r,n);l&&G(l)&&(A(!0),setTimeout(()=>h(),0))};return e.addEventListener("input",a),()=>e.removeEventListener("input",a)}},[u,r,n,h,b,G,p.length]),_react.useEffect.call(void 0, ()=>{if(!r.current)return;let e=r.current,t=a=>{let l=a;if(l.key===n){let C=e.value,w=e.selectionStart||0;if(!(w===0||w>0&&/\s/.test(C.charAt(w-1)))||i==="single"&&C.substring(0,w).trim().length>0)return;A(!0),T(s),g(s),setTimeout(()=>{h()},0)}else l.key==="Escape"&&b()};return e.addEventListener("keydown",t),()=>e.removeEventListener("keydown",t)},[n,s,h,b,r,i]),_react.useEffect.call(void 0, ()=>{if(!r.current||!u)return;let e=r.current,t=a=>{let l=a,C=l.key==="ArrowUp"||l.key==="ArrowDown"||l.key==="ArrowLeft"||l.key==="ArrowRight";(a.type!=="keyup"||!C)&&h()};return e.addEventListener("click",t),e.addEventListener("keyup",t),e.addEventListener("mouseup",t),()=>{e.removeEventListener("click",t),e.removeEventListener("keyup",t),e.removeEventListener("mouseup",t)}},[u,h,r]),_react.useEffect.call(void 0, ()=>{if(!S)return;let e=X(r,n);S({isActive:u,currentSearch:_optionalChain([e, 'optionalAccess', _8 => _8.currentSearch])||"",selectedOption:y[x]})},[u,y,x,r,n,S]),_react.useEffect.call(void 0, ()=>{let e=t=>{if(!(!u||!y.length))switch(t.key){case"ArrowDown":t.preventDefault(),V.current=!0,v(a=>{let l=(a+1)%y.length;return setTimeout(()=>K(l),0),l});break;case"ArrowUp":t.preventDefault(),V.current=!0,v(a=>{let l=(a-1+y.length)%y.length;return setTimeout(()=>K(l),0),l});break;case"Enter":u&&(t.preventDefault(),$(_optionalChain([y, 'optionalAccess', _9 => _9[x]])));break;case"Escape":u&&(t.preventDefault(),b());break;case"Alt":u&&(t.preventDefault(),j());break}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[u,y,x,$,b,j,K]),_react.useEffect.call(void 0, ()=>{let e=()=>{V.current=!1};return window.addEventListener("mousemove",e),()=>window.removeEventListener("mousemove",e)},[]),_react.useEffect.call(void 0, ()=>{if(u)return h(),window.addEventListener("resize",h),window.addEventListener("scroll",h),()=>{window.removeEventListener("resize",h),window.removeEventListener("scroll",h)}},[u,h]),!u||!L.current||!y.length?null:_reactdom.createPortal.call(void 0, _jsxruntime.jsxs.call(void 0, "div",{ref:B,style:{maxHeight:`${c*36}px`,...ae,...f},children:[_jsxruntime.jsx.call(void 0, "style",{children:`
@keyframes typeaheadFadeIn {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
`}),P?P({onClose:re,onBack:j,currentLevel:p[p.length-1],nestedPath:p}):_jsxruntime.jsx.call(void 0, ve,{onClose:re,onBack:j,currentLevel:p[p.length-1],nestedPath:p}),y.map((e,t)=>{let a=t===x;if(R){let l=R({option:e,isActive:a,onClick:()=>{e.children&&e.children.length>0?oe(e):$(e)}});return _react2.default.isValidElement(l)?_react2.default.cloneElement(l,{key:`${e.label}-${t}`}):l}return _jsxruntime.jsx.call(void 0, "div",{ref:l=>{l?z.current.set(t,l):z.current.delete(t)},onMouseEnter:()=>{V.current||(v(t),K(t))},children:_jsxruntime.jsx.call(void 0, xe,{option:e,isActive:a,customStyles:E,activeStyles:d,valueStyles:H,onClick:()=>{e.children&&e.children.length>0?oe(e):$(e)}})},`${e.label}-${t}`)})]}),L.current)};var wt=Ce;exports.default = wt;
//# sourceMappingURL=index.cjs.map