react-searchbox-like-youtube/index.esm.js

Customizable Searchbox with autocomplete and highlighted results for React applications.

import './index.css'
import{createContext as Ee,useContext as Ne,useEffect as N,useRef as f,useState as d}from"react";import{useEffect as he,useState as ve}from"react";import{useEffect as ie,useState as ce}from"react";var ue=()=>{let[e,r]=ce(window.innerWidth),a=e<=768,t=()=>{r(window.innerWidth)};return ie(()=>(window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}),[]),{isMobile:a}},v=ue;var g=(e,r)=>{let a;return e.title.toLowerCase().includes(r.toLocaleLowerCase())&&(a=e),a};import{jsx as V}from"react/jsx-runtime";var me=({size:e="mini"})=>V("svg",{viewBox:"0 0 24 24",className:`fill-black dark:fill-white transition-all ${e==="normal"?"w-6 h-6":"w-5 h-5"}`,role:"search",focusable:"false",children:V("g",{children:V("path",{d:"M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z"})})}),S=me;import{jsx as y}from"react/jsx-runtime";var fe=()=>y("div",{children:y("svg",{xmlns:"http://www.w3.org/2000/svg",enableBackground:"new 0 0 24 24",height:"24",className:"fill-black dark:fill-white",viewBox:"0 0 24 24",width:"24",children:y("path",{d:"M21,11v1H5.64l6.72,6.72l-0.71,0.71L3.72,11.5l7.92-7.92l0.71,0.71L5.64,11H21z"})})}),T=fe;import{jsx as L}from"react/jsx-runtime";var de=()=>L("div",{children:L("svg",{viewBox:"0 0 24 24",className:"fill-gray-600 dark:fill-white",focusable:"false",children:L("g",{children:L("path",{d:"M12.7,12l6.6,6.6l-0.7,0.7L12,12.7l-6.6,6.6l-0.7-0.7l6.6-6.6L4.6,5.4l0.7-0.7l6.6,6.6l6.6-6.6l0.7,0.7L12.7,12z"})})})}),B=de;import{jsx as D}from"react/jsx-runtime";var pe=({size:e="mini"})=>D("svg",{viewBox:"0 0 24 24",className:e==="normal"?"w-6 h-6":"w-5 h-5",fill:"black",role:"search",focusable:"false",children:D("g",{children:D("path",{d:"M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z"})})}),F=pe;import{jsx as l,jsxs as I}from"react/jsx-runtime";var ge=()=>{let e=b(),{isMobile:r}=v(),[a,t]=ve(!1),u=()=>{e.setShowLeftSearchSvg(!0),e.refs.respBg.current?.classList.remove("hidden")},s=o=>{o.target.value!==" "&&(e.setValue(o.target.value),e.setTempVal(o.target.value),e.onChange(o.target.value),e.setArr(e.results?.slice(0,10).filter(p=>g(p,o.target.value))))},i=()=>{e.setValue(""),e.setTempVal(""),e.refs.input.current?.focus()},c=()=>{r?e.value!==""&&(e.setTempVal(e.value),e.setValue(e.value),e.setArr(void 0),e.setShowSB(!1),e.setShowDummyInput(!0),e.refs.respSbButton.current?.classList.add("hidden")):(e.setTempVal(e.value),e.setValue(""),e.setArr(void 0),e.setShowLeftSearchSvg(!1))},x=()=>{e.setValue(""),e.setTempVal(""),e.setShowSB(!1),e.setShowDummyInput(!1),e.refs.respSbButton.current?.classList.remove("hidden")},m=o=>{switch(o.type){case"mouseenter":t(!0);break;case"mouseleave":t(!1);break}},R=o=>{if(o.code==="Backspace"&&e.tempVal.length<1&&(e.setArr(void 0),e.setActive(-1)),e.arr!==void 0)switch(o.code){case"ArrowDown":o.preventDefault(),e.active<e.arr.length-1?(e.setActive(e.active+1),e.setTempVal(e.arr[e.active+1].title)):(e.setActive(0),e.setTempVal(e.arr[0].title));break;case"ArrowUp":o.preventDefault(),e.active>0?(e.setActive(e.active-1),e.setTempVal(e.arr[e.active-1].title)):(e.setActive(e.arr.length-1),e.setTempVal(e.arr[e.arr.length-1].title));break;case"Enter":o.preventDefault(),e.active>-1?(e.setArr(void 0),e.setTempVal(e.arr[e.active].title),e.setValue(e.arr[e.active].title),e.setActive(-1),e.setShowLeftSearchSvg(!1),e.refs.input.current?.blur(),e.onSearch(e.arr[e.active])):(e.setTempVal(e.value),e.setValue(""),e.setShowLeftSearchSvg(!1),e.refs.input.current?.blur(),e.onSearch(e.value));break}};return he(()=>{e.showLeftSearchSvg&&(e.refs.input.current?.classList.add("!transition-none"),setTimeout(()=>{e.refs.input.current?.classList.remove("!transition-none")},150))},[e.showLeftSearchSvg]),I("div",{className:"relative flex w-full",children:[r?l("button",{type:"button",onClick:x,role:"back-button",className:"input-back-button",children:l(T,{})}):e.showLeftSearchSvg&&I("div",{ref:e.refs.inputSearchIcon,role:"inputSearchIcon",className:"input-search-icon",children:[l(S,{size:"mini"}),l("div",{className:"absolute w-[4px] h-[34px] -right-[1px] bottom-0 md:bg-white md:dark:dark-bg"})]}),I("div",{className:`input-comp ${e.tempVal.length>0?"input-comp-resp":""}`,children:[l("input",{type:"text",ref:e.refs.input,onFocus:u,onChange:s,onKeyDown:R,value:e.tempVal,placeholder:e.placeholder??"Search something",className:`input ${e.showLeftSearchSvg?"input-focus":""}`}),l("button",{onClick:i,role:"clear",ref:e.refs.clearButton,className:`input-clear-button ${e.tempVal.length>0?"":"hidden"}`,children:l("div",{className:"input-clear-button-svg",children:l(B,{})})}),I("button",{role:"search-button",onClick:c,onMouseEnter:m,onMouseLeave:m,className:"input-search-button",children:[l(S,{size:"normal"}),a&&!r&&l("div",{role:"popup",className:"search-popup",children:l("p",{children:"Search!"})})]})]}),r&&l("div",{ref:e.refs.respBg,className:"resp-background",role:"responsive-bg"})]})},A=ge;import{useEffect as we}from"react";import{jsx as k,jsxs as be}from"react/jsx-runtime";var Se=()=>k("div",{children:be("svg",{width:"13",height:"13",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[k("rect",{width:"22",height:"6",fill:"#B7B7B7"}),k("rect",{width:"22",height:"6",transform:"translate(0 22) rotate(-90)",fill:"#B7B7B7"}),k("rect",{width:"32.8325",height:"6",transform:"translate(23.2158 27.4585) rotate(-135)",fill:"#B7B7B7"})]})}),q=Se;import{Fragment as Be,jsx as n,jsxs as M}from"react/jsx-runtime";var xe=()=>{let e=b(),{isMobile:r}=v(),a=s=>{let i=n("span",{role:"results-text",className:"",children:s}),c=s.split(new RegExp(`(${e.value})`,"gi"));return c.length>1&&(i=M("div",{role:"results-text",className:"text-sm md:text-base",children:[n("span",{children:c[0]}),n("span",{className:"font-semibold",children:c[1]}),n("span",{children:c[2]})]})),i},t=s=>{e.setTempVal(s.title),e.setValue(""),e.onClick(s),r&&(e.setShowSB(!1),e.setShowDummyInput(!0),e.refs.respSbButton.current?.classList.add("hidden"))},u=s=>{e.setValue(s),e.setTempVal(s),e.refs.input.current?.focus(),e.setArr(e.results?.slice(0,10).filter(i=>g(i,s)))};return we(()=>{e.value.length<2&&e.setArr(void 0)},[e.value]),n(Be,{children:e.arr!==void 0&&e.arr.length>0&&e.value.length>1&&M("div",{ref:e.refs.result,className:"results",children:[n("div",{className:"ghost"}),n("ul",{role:"search-results",className:"results-ul",children:e.arr.map((s,i)=>M("li",{className:`results-li ${e.active===i?"bg-[#00000010]":""}`,children:[M("button",{className:"w-full text-left flex",onClick:()=>t(s),children:[!r&&n("div",{className:"results-li-icon",children:n(F,{size:"mini"})}),a(s.title)]}),n("button",{type:"button",role:"arrow-button",className:"arrow",onClick:()=>u(s.title),children:n(q,{})})]},s.id))})]})})},H=xe;import{jsx as E,jsxs as Le}from"react/jsx-runtime";var Ce=()=>{let e=b(),r=()=>{e.setShowSB(!0),e.refs.input.current?.focus()};return E("div",{ref:e.refs.dummyInput,onClick:r,role:"dummy-input",className:"w-full",children:Le("div",{className:"w-full h-8 bg-gray-100 dark:dark-bg-secondary rounded-lg items-center px-1.5 flex justify-between",children:[E("span",{className:"truncate text-sm text-gray-500 dark:text-white",children:e.tempVal}),E("div",{className:"w-6 h-6",children:E(B,{})})]})})},G=Ce;import{useEffect as Ie}from"react";var ke=e=>{Ie(()=>{e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")},[e])},Q=ke;var Me=(e,r)=>{let a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),t=a!==null?{r:parseInt(a[1],16),g:parseInt(a[2],16),b:parseInt(a[3],16)}:null;t!==null&&(t.r=t.r+r>255?255:t.r+r,t.g=t.g+r>255?255:t.g+r,t.b=t.b+r>255?255:t.b+r);let u=`
    rgb(
      ${t?.r.toString()},
      ${t?.b.toString()},
      ${t?.b.toString()}
      )
    `;return u.replaceAll(/[\n ]/gi,""),{lightDark:u}},Y=Me;import{jsx as w,jsxs as z}from"react/jsx-runtime";var Z=Ee({}),Re=({onChange:e,onClick:r,onSearch:a,results:t,nightMode:u=!1,placeholder:s,sx:i={}})=>{let{lightBg:c="#FFFFFF",darkBg:x="#0F0F0F"}=i,{isMobile:m}=v(),{lightDark:R}=Y(x,20),[o,p]=d(!0),[P,W]=d(""),[_,j]=d(""),[ee,te]=d([]),[re,O]=d(),[se,oe]=d(-1),[ae,K]=d(!1),[J,U]=d(!1),h={main:f(null),input:f(null),result:f(null),respBg:f(null),inputSearchIcon:f(null),clearButton:f(null),dummyInput:f(null),respSbButton:f(null)},le=()=>{p(!0)},ne={refs:h,showSB:o,setShowSB:p,results:t,placeholder:s,onChange:e,onClick:r,filteredResults:ee,setFilteredResults:te,value:P,setValue:W,tempVal:_,setTempVal:j,showLeftSearchSvg:ae,setShowLeftSearchSvg:K,showDummyInput:J,setShowDummyInput:U,darkBg:x,lightBg:c,arr:re,setArr:O,active:se,setActive:oe,onSearch:a};return N(()=>{let C=X=>{h.main.current?.contains(X.target)||(K(!1),W("")),m&&h.respBg.current?.contains(X.target)&&(p(!1),U(!1),h.respSbButton.current?.classList.remove("hidden"))};return window.addEventListener("click",C),()=>window.removeEventListener("click",C)},[]),N(()=>{p(!m)},[m]),N(()=>{m&&o&&h.input.current?.focus()},[o]),N(()=>{O(t?.slice(0,10).filter(async C=>g(C,P)))},[t]),Q(u),w("div",{style:{"--lightBg":c,"--darkBg":x,"--darkBgSecondary":R},children:z(Z.Provider,{value:ne,children:[m&&z("div",{className:"flex",children:[J&&w(G,{}),w("button",{ref:h.respSbButton,role:"responsive-search-button",type:"button",onClick:le,className:"w-fit block ml-auto",children:w(S,{size:"normal"})})]}),o&&z("div",{ref:h.main,id:"sbly",role:"searchbox",className:"searchbox",children:[w(A,{}),w(H,{})]})]})})},b=()=>Ne(Z),$=Re;var Ut=$;export{Ut as default};