react-autosuggestions/dist/AutoSuggest.js

An accessible React component to take the pain out of creating auto-suggestion components

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-autosuggestions"]=t(require("react")):e["react-autosuggestions"]=t(e.react)}(self,(function(e){return(()=>{var t={228:e=>{e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}},858:e=>{e.exports=function(e){if(Array.isArray(e))return e}},646:(e,t,n)=>{var r=n(228);e.exports=function(e){if(Array.isArray(e))return r(e)}},713:e=>{e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},860:e=>{e.exports=function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}},884:e=>{e.exports=function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==s.return||s.return()}finally{if(o)throw i}}return n}}},521:e=>{e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}},206:e=>{e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}},38:(e,t,n)=>{var r=n(858),o=n(884),i=n(379),a=n(521);e.exports=function(e,t){return r(e)||o(e,t)||i(e,t)||a()}},319:(e,t,n)=>{var r=n(646),o=n(860),i=n(379),a=n(206);e.exports=function(e){return r(e)||o(e)||i(e)||a()}},379:(e,t,n)=>{var r=n(228);e.exports=function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}},602:(e,t,n)=>{"use strict";n.r(t),n.d(t,{AutoSuggest:()=>P});var r=n(38),o=n.n(r),i=n(713),a=n.n(i),s=n(297),c=n.n(s),u=n(319),l=n.n(u);function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){a()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var p=function(e){var t=e.abbr,n=void 0===t?void 0:t,r=e.id,i=e.name,a=void 0===i?void 0:i,s=e.onClick,u=e.selected,l=e.styles,d=e.value,p=c().useState(),g=o()(p,2),b=g[0],v=g[1],y=r===u,m=f(f(f({},l.suggestionOption),b&&f({},l.hoveredSuggestionOption)),y&&f({},l.selectedSuggestionOption));return c().createElement("li",{abbr:n&&n,"aria-selected":y,className:y?"auto-suggestions highlighted":"auto-suggestions",id:r,name:a&&a,onClick:s,onMouseEnter:function(){v(!0)},onMouseLeave:function(){v(!1)},role:"option",style:m,textvalue:d},d)},g=c().forwardRef((function(e,t){var n=e.id,r=e.onClick,o=e.options,i=e.styles,a=(e.name,e.selected);return o[0].value&&o[0].name&&o[0].abbr?c().createElement("ul",{"aria-labelledby":"".concat(n,"-label"),id:"".concat(n,"--autosuggest-options"),ref:t,role:"listbox",style:i.suggestionOptions&&i.suggestionOptions},o&&o.map((function(e,t){var o=e.name,s=e.value,u=e.abbr;return c().createElement(p,{abbr:u,id:"".concat(n,"-suggestion-").concat(t),key:t,name:o,onClick:r,selected:a,styles:i,value:s})}))):o[0].value&&o[0].name?c().createElement("ul",{"aria-labelledby":"".concat(n,"-label"),id:"".concat(n,"--autosuggest-options"),ref:t,role:"listbox",style:i.suggestionOptions&&i.suggestionOptions},o&&o.map((function(e,t){var o=e.name,s=e.value;return c().createElement(p,{id:"".concat(n,"-suggestion-").concat(t),key:t,name:o,onClick:r,selected:a,styles:i,value:s})}))):c().createElement("ul",{"aria-labelledby":"".concat(n,"-label"),id:"".concat(n,"--autosuggest-options"),ref:t,role:"listbox",style:i.suggestionOptions&&i.suggestionOptions},o&&o.map((function(e,t){return c().createElement(p,{id:"".concat(n,"-suggestion-").concat(t),key:t,onClick:r,selected:a,styles:i,value:e})})))}));function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?b(Object(n),!0).forEach((function(t){a()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var y=c().forwardRef((function(e,t){var n=e.activeDescendant,r=e.clearText,i=e.dataType,a=e.disabled,s=e.error,u=void 0!==s&&s,d=e.id,f=e.loading,p=void 0!==f&&f,b=e.name,y=e.noResult,m=void 0!==y&&y,h=e.openListbox,O=e.options,S=e.searchText,x=void 0===S?"":S,w=e.setActiveDescendant,j=e.setLoading,E=void 0===j?function(){}:j,C=e.setOpenListbox,P=e.setSearchText,k=e.styles,D=!(!k.searchField||!k.searchField.focus)&&k.searchField.focus,T=c().createRef(),F="".concat(b[0].toUpperCase()).concat(b.slice(1));t.current&&D&&(t.current.addEventListener("focus",(function(e){D&&Object.entries(D).forEach((function(t,n){var r=o()(t,2),i=r[0],a=r[1];e.target.style[i]=a}))})),t.current.addEventListener("blur",(function(e){D&&Object.entries(D).forEach((function(t){var n=o()(t,2),r=n[0];n[1],e.target.style[r]=k.searchField[r]}))})));var L=d||b;return c().createElement(c().Fragment,null,c().createElement("div",{id:"".concat(L,"-announcement"),className:"visually-hidden","aria-live":"polite","data-type":i,style:k.announcement&&k.announcement},h&&O&&O.length>0?"".concat(O.length," suggestions displayed.  To navigate, use up and down arrow keys."):""),c().createElement("div",null,c().createElement("div",{id:"".concat(L,"-searchField"),role:"combobox","aria-expanded":h?"true":"false","aria-owns":"".concat(L,"-input"),"aria-haspopup":"listbox","aria-controls":"".concat(L,"-autosuggest-options"),style:k.combobox&&k.combobox},c().createElement("label",{id:"".concat(L,"-label"),style:k.searchLabel&&k.searchLabel},F),c().createElement("input",{id:"".concat(L,"-input"),type:"text",className:p?"loading searchfield":"searchfield",autoComplete:"off","aria-autocomplete":"both",ref:t,onChange:function(e){t.current.focus(),P(e.target.value),C(!0)},onKeyDown:function(e){var t=T.current&&l()(T.current.children).find((function(e){return e.id===n}));switch(e.which){case 27:C(!1),E(!1),w(void 0),r();break;case 9:case 13:if(C(!1),E(!1),w(void 0),t)return e.preventDefault(),e.stopPropagation(),function(e){var t=e.getAttribute("textvalue");P(t)}(t);break;case 38:return e.preventDefault(),e.stopPropagation(),function(e){if(h){var t=e;if(t&&t.previousElementSibling){var n=t.previousElementSibling;n&&w(n.id),e=!1}else t=T.current.lastChild,w(t.id)}}(t);case 40:return e.preventDefault(),e.stopPropagation(),function(e){if(h){var t=e;if(t&&t.nextElementSibling){var n=t.nextElementSibling;n&&w(n.id),e=!1}else t=T.current.firstChild,w(t.id)}}(t);default:return}},value:x,"aria-labelledby":"".concat(L,"-label"),style:v(v({},k.searchField),p&&v({},k.loadingStyles)),"aria-activedescendant":n,disabled:!!a})),p&&c().createElement("p",{style:k.announcement&&k.announcement},"Loading ",F," options"),c().createElement("div",{className:"autocompleteSuggestions",id:"".concat(L,"-autocomplete"),style:k.suggestionsContainer?v(v({},k.suggestionsContainer),{},{display:h?"block":"none"}):{display:h?"block":"none"}},h&&O.length>0&&c().createElement(g,{id:L,name:b,onClick:function(e){return P(e.target.getAttribute("textvalue")),w(void 0),C(!1),void E(!1)},options:O,ref:T,selected:n,styles:k}))),m&&c().createElement("p",null,"No results found"),u&&c().createElement("p",null,"Results could not be fetched"))})),m=function(e){var t=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"});return e.sort(t.compare)},h=function(e){var t=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"});return e.sort((function(e,n){return t.compare(e.value,n.value)}))},O=c().forwardRef((function(e,t){var n=e.caseInsensitive,r=e.disabled,i=e.handleChange,a=e.id,s=e.isOpen,u=e.name,l=e.options,d=e.setIsOpen,f=e.styles,p=e.type,g=e.value,b=function(e){return e[0]?"string"==typeof e[0]?[m(e),"string"]:e[0].value?[h(e),"object"]:[e,""]:[e,""]}(l),v=o()(b,2),O=v[0],S=v[1],x=c().useState(O),w=o()(x,2),j=w[0],E=w[1],C=c().useState(!1),P=o()(C,2),k=P[0],D=P[1],T=c().useState(),F=o()(T,2),L=F[0],A=F[1];return c().useEffect((function(){if(s&&g){var e=[];"string"===S&&(e=n?l.filter((function(e){return e.toUpperCase().startsWith(g.toUpperCase())})):l.filter((function(e){return e.startsWith(g)}))),"object"===S&&(e=n?l.filter((function(e){return e.value.toUpperCase().startsWith(g.toUpperCase())})):l.filter((function(e){return e.value.startsWith(g)}))),E(e),e.length>=1&&d(!0)}}),[g,s,l]),c().useEffect((function(){g||d(!1)}),[g]),c().useEffect((function(){!1===s&&(E([]),D(!1))}),[s]),c().createElement(y,{activeDescendant:L,clearText:function(){i()},dataType:p,disabled:r,id:a,name:u,noResult:k,openListbox:s,options:j,ref:t,searchText:g,setActiveDescendant:A,setOpenListbox:d,setSearchText:function(e){i(e)},styles:f})})),S=n(300),x=n.n(S),w=c().forwardRef((function(e,t){var n=e.debounceTime,r=void 0===n?200:n,i=e.disabled,a=e.handleChange,s=e.id,u=e.isOpen,l=e.name,d=e.setIsOpen,f=e.styles,p=e.type,g=e.url,b=void 0===g?"":g,v=e.value,m=c().useState([]),h=o()(m,2),O=h[0],S=h[1],w=c().useState(!1),j=o()(w,2),E=j[0],C=j[1],P=c().useState(!1),k=o()(P,2),D=k[0],T=k[1],F=function(e,t,n){var r=c().useState(e),i=o()(r,2),a=i[0],s=i[1];return c().useEffect((function(){var n=setTimeout((function(){s(e)}),t);return function(){clearTimeout(n)}}),[e,t,n]),n?a:""}(v,r,u),L=c().useState(!1),A=o()(L,2),I=A[0],R=A[1],U=c().useState(),M=o()(U,2),q=M[0],N=M[1];if(c().useEffect((function(){u&&v&&R(!0),u&&v&&F&&v===F&&x()("".concat(b,"/").concat(encodeURIComponent(F))).then((function(e){return e.json()})).then((function(e){e&&e.length?(S(e),T(!1)):(d(!1),S([]),T(!0)),R(!1),C(!1)})).catch((function(){C(!0),R(!1)}))}),[u,v,F,b]),c().useEffect((function(){v||(R(!1),d(!1))})),""===b)throw new Error("AutoSuggestServer requires a url parameter");return c().createElement(y,{activeDescendant:q,clearText:function(){a()},dataType:p,disabled:i,error:E,id:s,loading:I,name:l,noResult:D,openListbox:u,options:O,ref:t,searchText:v,setActiveDescendant:N,setLoading:R,setOpenListbox:d,setSearchText:function(e){a(e)},styles:f})})),j={announcement:{position:"absolute",clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",width:"1px",overflow:"hidden"},combobox:{display:"inline-block"},hoveredSuggestionOption:{background:"#110D3B",color:"#FFF"},loadingStyles:{backgroundImage:"url(https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif)",backgroundPosition:"right center",backgroundRepeat:"no-repeat"},searchField:{padding:".5rem",border:"2px solid #c8c8c8",backgroundColor:"#fff",borderRadius:"6px",color:"#000",fontWeight:"normal",fontSize:"1.35rem",margin:"0 auto",width:"19rem",focus:{color:"#000",border:"2px solid #005499",outline:"none"}},searchLabel:{display:"block",fontSize:"1.35rem"},selectedSuggestionOption:{background:"#110D3B",color:"#FFF"},suggestionsContainer:{display:"block",position:"absolute",border:"1px solid #999",background:"#fff",width:"20rem",zIndex:"1"},suggestionOption:{margin:"0",padding:".5rem",fontSize:"1.35rem",whiteSpace:"nowrap",overflow:"hidden",cursor:"default"},suggestionOptions:{margin:"0",padding:"0",listStyle:"none"}};function E(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?E(Object(n),!0).forEach((function(t){a()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):E(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var P=function(e){var t=e.caseInsensitive,n=void 0===t||t,r=e.debounceTime,i=void 0===r?200:r,a=e.disabled,s=void 0!==a&&a,u=e.handleChange,l=e.id,d=e.name,f=void 0===d?"Search":d,p=e.options,g=void 0===p?[]:p,b=e.styles,v=void 0===b?j:b,y=e.type,m=void 0===y?"":y,h=e.url,S=void 0===h?"":h,x=e.value,E={announcement:C(C({},j.announcement),v.announcement),combobox:C(C({},j.combobox),v.combobox),hoveredSuggestionOption:C(C({},j.hoveredSuggestionOption),v.hoveredSuggestionOption),loadingStyles:C(C({},j.loadingStyles),v.loadingStyles),searchField:C(C(C({},j.searchField),v.searchField),{},{focus:C(C({},j.searchField.focus),v.searchField&&v.searchField.focus&&C({},v.searchField.focus))}),searchLabel:C(C({},j.searchLabel),v.searchLabel),selectedSuggestionOption:C(C({},j.selectedSuggestionOption),v.selectedSuggestionOption),suggestionsContainer:C(C({},j.suggestionsContainer),v.suggestionsContainer),suggestionOptions:C(C({},j.suggestionOptions),v.suggestionOptions),suggestionOption:C(C({},j.suggestionOption),v.suggestionOption)},P=c().useState(!1),k=o()(P,2),D=k[0],T=k[1],F=c().useRef(null),L=c().useCallback((function(e){F.current.contains(e.target)||T(!1)}),[F.current]);return c().useEffect((function(){return document.addEventListener("click",L),function(){document.removeEventListener("click",L)}}),[]),"server"===m||S?c().createElement(w,{debounceTime:i,disabled:s,handleChange:u,id:l,isOpen:D,name:f,setIsOpen:T,styles:E,type:"Server",ref:F,url:S,value:x}):c().createElement(O,{caseInsensitive:n,disabled:s,handleChange:u,id:l,isOpen:D,name:f,options:g,ref:F,setIsOpen:T,type:"Client",styles:E,value:x})}},300:(e,t)=>{"use strict";var n=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==n)return n;throw new Error("unable to locate global object")}();e.exports=t=n.fetch,n.fetch&&(t.default=n.fetch.bind(n)),t.Headers=n.Headers,t.Request=n.Request,t.Response=n.Response},297:t=>{"use strict";t.exports=e}},n={};function r(e){if(n[e])return n[e].exports;var o=n[e]={exports:{}};return t[e](o,o.exports,r),o.exports}return r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r(602)})()}));