react-input-suggestions/dist/index.js

A React input component with pluggable suggestions and autocomplete

"use strict";var P=Object.create;var R=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var _=(e,n)=>{for(var o in n)R(e,o,{get:n[o],enumerable:!0})},x=(e,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of q(n))!X.call(e,s)&&s!==o&&R(e,s,{get:()=>n[s],enumerable:!(r=U(n,s))||r.enumerable});return e};var v=(e,n,o)=>(o=e!=null?P(z(e)):{},x(n||!e||!e.__esModule?R(o,"default",{value:e,enumerable:!0}):o,e)),W=e=>x(R({},"__esModule",{value:!0}),e);var V={};_(V,{InputSuggestions:()=>K,useSuggestions:()=>T});module.exports=W(V);var m=require("react"),w="ArrowDown",L="ArrowUp",$="Enter",j="Tab";var T=(e,n,o)=>{let[r,s]=(0,m.useState)(!1);(0,m.useEffect)(()=>{s(Boolean(e&&e.current&&e.current.value.length>0&&o.length>0))},[e,o]),(0,m.useEffect)(()=>{let t=l=>{r&&!n.current?.contains(l.target)&&s(!1)};return n.current?.querySelectorAll("li")?.forEach(l=>{l.firstChild.tabIndex=0}),document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[n,r]);let u=t=>{n.current?.querySelector(`li:${t}-of-type`)?.firstChild?.focus()},h=()=>n.current?.querySelector("li > *:focus"),b=t=>{t.currentTarget.value&&!h()&&[w,L].includes(t.key)&&(t.preventDefault(),t.key===w&&u("first"),t.key===L&&u("last"))},g=t=>{t?.currentTarget?.firstChild?.focus()},S=(t,l)=>{t.preventDefault();let E=t.currentTarget?.[`${l}`]?.firstChild;E?E.focus():u(l==="nextSibling"?"first":"last")},f=(t,l)=>{S(t,l)};return{selectInitialResult:b,onResultsHover:g,onResultsKeyDown:t=>{[w,j].includes(t.key)?f(t,"nextSibling"):t.key===L?f(t,"previousSibling"):t.key!==$&&e.current?.focus()},showSuggestions:r,setShowSuggestions:s,onInputFocus:t=>{document.activeElement===e.current&&t.currentTarget.value!==""&&s(!0)}}};var d=require("react");var c=v(require("react")),M=v(require("react-string-replace")),H=require("react/jsx-runtime"),i={get:e=>{if(["string","number"].includes(typeof e))return e;if(e instanceof Array)return[...new Set(e.map(i.get))].join(" ");if(typeof e=="object"&&e)return i.get(e.props.children)},highlightKeyword:(e,n)=>(0,M.default)(e,n,(o,r)=>(0,H.jsx)("mark",{children:o},r)),cloneChildren:(e,n)=>c.Children.map(e,o=>o.props?(0,c.cloneElement)(o,{children:i.highlightKeyword(i.cloneChildren(o.props.children,n),n)}):o),wrap:(e,n)=>{let o=e,{props:{children:r}}=o;return c.default.cloneElement(o,{children:typeof r=="string"?i.highlightKeyword(r,n):i.cloneChildren(r,n)})}};var k=v(require("@emotion/styled")),C=k.default.div`
  position: relative;

  input {
    width: 100%;
  }

  mark {
    display: inline;
    padding: 0;
  }

  ul {
    position: absolute;
    top: 100%;
    width: 100%;
    box-sizing: border-box;
    list-style-type: none;
    overflow-y: auto;

    li > * {
      display: block;
      cursor: pointer;
      text-decoration: none;

      &:focus {
        border: 0;
        box-shadow: 0;
        outline: 0;
      }
    }
  }

  ${({withTheme:e})=>e&&`input {
      font-size: 1rem;
      padding: 20px;
      border: 1px solid #dadada;
      background: #efefef;
      width: 100%;
      outline: 0;
    }

    ul {
      padding: 0;
      margin-top: -3px;
      border: 1px solid #dadada;
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
      font-size: 1rem;

      li > * {
        padding: 1rem;

        &:focus {
          background: #efefef;
        }
      }
    }
  `}
`;var p=require("react/jsx-runtime"),B=({suggestions:e,type:n="search",name:o="q",placeholder:r="Search",autoFocus:s=!1,className:u="",withTheme:h=!1,id:b,onChange:g,highlightKeywords:S=!1})=>{let[f,I]=(0,d.useState)(e),y=(0,d.useRef)(null),t=(0,d.useRef)(null),{selectInitialResult:l,onResultsHover:E,onResultsKeyDown:N,showSuggestions:A,onInputFocus:D}=T(y,t,f),F=a=>I(e.filter(O=>i.get(O)?.toLowerCase().includes(a.target.value.toLowerCase()||"")));return(0,p.jsxs)(C,{id:b,className:u,withTheme:h,children:[(0,p.jsx)("input",{ref:y,type:n,name:o,placeholder:r,autoFocus:s,onChange:a=>{g&&g(a),F(a)},onKeyDown:l,onFocus:D,spellCheck:!1,autoComplete:"off",autoCapitalize:"off"}),A&&(0,p.jsx)("ul",{ref:t,children:f.map(a=>(0,p.jsx)("li",{onMouseOver:E,onKeyDown:N,children:S?i.wrap(a,y.current?.value||""):a},i.get(a)))})]})},K=B;