@elastic/react-search-ui/lib/index.mjs

A React library for building search experiences

var ie=Object.defineProperty,ce=Object.defineProperties;var ue=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var X=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var z=(t,e,r)=>e in t?ie(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,o=(t,e)=>{for(var r in e||(e={}))X.call(e,r)&&z(t,r,e[r]);if(E)for(var r of E(e))G.call(e,r)&&z(t,r,e[r]);return t},N=(t,e)=>ce(t,ue(e));var p=(t,e)=>{var r={};for(var n in t)X.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(t!=null&&E)for(var n of E(t))e.indexOf(n)<0&&G.call(t,n)&&(r[n]=t[n]);return r};import H from"react";import le from"react";var pe=le.createContext(null),R=pe;function fe(t){return o(o({},t.driver.getState()),t.driver.getActions())}function K(t,e,r){return(r.mapContextToProps||e)(t,r)||{}}function he(t){if(!t)throw"withSearch requires a function to be provided which returns an object with at least one value.";return function(e){var r;return r=class extends H.PureComponent{constructor(a,c){super(a);this.subscription=a=>{this.mounted&&this.setState(c=>K(o(o({},c),a),t,this.props))};this.mounted=!1,this.state=o({},K(fe(c),t,a))}componentDidMount(){this.mounted=!0,this.context.driver.subscribeToStateChanges(this.subscription)}componentWillUnmount(){this.mounted=!1,this.context.driver.unsubscribeToStateChanges(this.subscription)}render(){let a=p(this.props,[]);return H.createElement(e,o(o({},this.state),a))}},r.contextType=R,r}}var L=he;import me from"react";function de({mapContextToProps:t,children:e}){let r=L(t)(n=>e(n));return me.createElement(r,null)}var Se=de;import Pe,{useState as Ce,useEffect as j}from"react";import{SearchDriver as xe}from"@elastic/search-ui";var ge={moreFilters:({visibleOptionsCount:t,showingAll:e})=>{let r=e?"All ":"";return r+=`${t} options shown.`,r}},Z=ge;var ve=({children:t,config:e,driver:r})=>{let[n,a]=Ce(null);if(j(()=>{let u=r||new xe(N(o({},e),{a11yNotificationMessages:o(o({},Z),e.a11yNotificationMessages)}));return a(u),()=>{u.tearDown()}},[]),j(()=>{n&&n.setSearchQuery(e.searchQuery)},[e.searchQuery]),j(()=>{n&&n.setAutocompleteQuery(e.autocompleteQuery)},[e.autocompleteQuery]),!n)return null;let c={driver:n};return Pe.createElement(R.Provider,{value:c},t)},we=ve;import Re from"react";import{ErrorBoundary as ke}from"@elastic/react-search-ui-views";import{useContext as ye,useEffect as Te,useState as be}from"react";function f(t){let e=ye(R);if(!e)throw new Error("useSearch must be used within a SearchProvider");let[r,n]=be(()=>t?t(o(o({},e.driver.getState()),e.driver.getActions())):o(o({},e.driver.getState()),e.driver.getActions()));return Te(()=>{let a=c=>{n(u=>{let l=o(o({},u),c);return t?t(l):l})};return e.driver.subscribeToStateChanges(a),()=>{e.driver.unsubscribeToStateChanges(a)}},[e.driver,t]),r}var Fe=a=>{var c=a,{children:t,className:e,view:r}=c,n=p(c,["children","className","view"]);let{error:u}=f(),l=r||ke,h=o({className:e,children:t,error:u},n);return Re.createElement(l,o({},h))},Ve=Fe;import{MultiCheckboxFacet as Ae}from"@elastic/react-search-ui-views";import{helpers as Ie}from"@elastic/search-ui";import Be from"react";import{useState as Y}from"react";var M=t=>typeof t=="string"?t.normalize("NFD").replace(/[\u0300-\u036f]/g,""):"";var{markSelectedFacetValuesFromFilters:De}=Ie,Ee=d=>{var m=d,{className:t,field:e,filterType:r="all",label:n,view:a,isFilterable:c=!1,show:u=5,persistent:l=!1}=m,h=p(m,["className","field","filterType","label","view","isFilterable","show","persistent"]);let{filters:g,facets:P,addFilter:v,removeFilter:w,setFilter:y,a11yNotify:B}=f(),[V,k]=Y(""),[T,O]=Y(u),Q=s=>{let S=T+10,b=S>=s;b&&(S=s),B("moreFilters",{visibleOptionsCount:S,showingAll:b}),O(S)},W=s=>{k(s)},A=P[e];if(!A)return null;let $=A[0],C=De($,g,e,r).data,D=C.filter(s=>s.selected).map(s=>s.value);if(!C.length&&!D.length)return null;V.trim()&&(C=C.filter(s=>{var b;let S;switch(typeof s.value){case"string":S=M(s.value).toLowerCase();break;case"number":S=s.value.toString();break;case"object":S=typeof((b=s==null?void 0:s.value)==null?void 0:b.name)=="string"?M(s.value.name).toLowerCase():"";break;default:S="";break}return S.includes(M(V).toLowerCase())}));let J=a||Ae,I=o({className:t,label:n,onMoreClick:Q.bind(void 0,C.length),onRemove:s=>{w(e,s,r)},onChange:s=>{y(e,s,r,l)},onSelect:s=>{v(e,s,r,l)},options:C.slice(0,T),showMore:C.length>T,values:D,showSearch:c,onSearch:s=>{W(s)},searchPlaceholder:`Filter ${n}`},h);return Be.createElement(J,o({},I))},Ne=Ee;import Me from"react";import{Paging as Oe}from"@elastic/react-search-ui-views";var Qe=n=>{var a=n,{className:t,view:e}=a,r=p(a,["className","view"]);let{current:c,resultsPerPage:u,totalPages:l,setCurrent:h}=f();if(l===0)return null;let d=e||Oe,m=o({className:t,current:c,resultsPerPage:u,totalPages:l,onChange:h},r);return Me.createElement(d,o({},m))},We=Qe;import $e from"react";import{PagingInfo as Je}from"@elastic/react-search-ui-views";var Le=n=>{var a=n,{className:t,view:e}=a,r=p(a,["className","view"]);let{pagingStart:c,pagingEnd:u,resultSearchTerm:l,totalResults:h}=f(),d=e||Je,m=o({className:t,searchTerm:l,start:c,end:u,totalResults:h},r);return $e.createElement(d,o({},m))},je=Le;import Ue from"react";import{Result as _e}from"@elastic/react-search-ui-views";var qe=c=>{var u=c,{result:t,shouldTrackClickThrough:e=!0,clickThroughTags:r=[],view:n}=u,a=p(u,["result","shouldTrackClickThrough","clickThroughTags","view"]);let{trackClickThrough:l}=f(),h=P=>{e&&l(P,r)},d=n||_e,m=t.id.raw,g=o({result:t,key:`result-${m}`,onClickLink:()=>h(m)},a);return Ue.createElement(d,o({},g))},U=qe;import ee from"react";import{Result as ze,Results as Xe}from"@elastic/react-search-ui-views";function Ge(t,e){if(!(!t[e]||!t[e].raw))return t[e].raw}var He=h=>{var d=h,{clickThroughTags:t=[],resultView:e,shouldTrackClickThrough:r=!0,titleField:n,urlField:a,thumbnailField:c,view:u}=d,l=p(d,["clickThroughTags","resultView","shouldTrackClickThrough","titleField","urlField","thumbnailField","view"]);let{results:m}=f(),g=u||Xe,P=e||ze,v=m.map(y=>ee.createElement(U,{key:`result-${Ge(y,"id")}`,titleField:n,urlField:a,thumbnailField:c,view:P,shouldTrackClickThrough:r,clickThroughTags:t,result:y})),w=o({children:v},l);return ee.createElement(g,o({},w))},Ke=He;import Ze from"react";import{ResultsPerPage as Ye}from"@elastic/react-search-ui-views";var et=a=>{var c=a,{className:t,options:e=[20,40,60],view:r}=c,n=p(c,["className","options","view"]);let{resultsPerPage:u,setResultsPerPage:l}=f(),h=r||Ye,d=o({className:t,onChange:m=>{l(m)},options:e,value:u},n);return Ze.createElement(h,o({},d))},tt=et;import rt,{useState as ot}from"react";import{SearchBox as nt}from"@elastic/react-search-ui-views";var at=w=>{var y=w,{autocompleteMinimumCharacters:t=0,autocompleteResults:e,autocompleteSuggestions:r,className:n,autocompleteView:a,inputProps:c,inputView:u,onSelectAutocomplete:l,shouldClearFilters:h=!0,onSubmit:d,searchAsYouType:m,debounceLength:g,view:P}=y,v=p(y,["autocompleteMinimumCharacters","autocompleteResults","autocompleteSuggestions","className","autocompleteView","inputProps","inputView","onSelectAutocomplete","shouldClearFilters","onSubmit","searchAsYouType","debounceLength","view"]);let{autocompletedResults:B,autocompletedSuggestions:V,searchTerm:k,setSearchTerm:T,trackAutocompleteClickThrough:O,trackAutocompleteSuggestionClickThrough:Q}=f(),[W,A]=ot(!1),$=()=>{A(!0)},C=()=>{A(!1)},D=i=>{i.preventDefault(),T(k,{shouldClearFilters:h})},J=i=>{let x=N(o({autocompleteMinimumCharacters:t},(e||r||m)&&{debounce:g||200}),{shouldClearFilters:h,refresh:!!m,autocompleteResults:!!e,autocompleteSuggestions:!!r});T(i,x)},I=i=>{var x;if(e){let F=e===!0?{clickThroughTags:[],shouldTrackClickThrough:!0}:e;if(!i.suggestion&&F.shouldTrackClickThrough!==!1){let{clickThroughTags:ae=[]}=F,se=(x=i.id)==null?void 0:x.raw;O(se,ae)}i.suggestion&&Q(i.suggestion,i.index,[])}},s=i=>{T(i,{shouldClearFilters:h})},S=i=>{if(i)if(I(i),!i.suggestion&&typeof e!="boolean"){let x=i[e.urlField]?i[e.urlField].raw:"";if(x){let F=typeof e!="boolean"&&e.linkTarget||"_self";window.open(x,F)}}else s(i.suggestion)},b=P||nt,re=(!!e||!!r)&&k.length>=t,_=Object.entries(V).reduce((i,[x,F])=>i+F.length,0),oe=_+B.length,q;l&&(q=i=>{l(i,{notifyAutocompleteSelected:I,completeSuggestion:s,autocompleteResults:e},S)});let ne=o({allAutocompletedItemsCount:oe,autocompleteView:a,autocompleteResults:e,autocompleteSuggestions:r,autocompletedResults:B,autocompletedSuggestions:V,className:n,autocompletedSuggestionsCount:_,completeSuggestion:s,isFocused:W,notifyAutocompleteSelected:I,onChange:i=>J(i),onSelectAutocomplete:q||S,onSubmit:d?i=>{i.preventDefault(),d(k)}:D,useAutocomplete:re,value:k,inputProps:o({onFocus:$,onBlur:C},c),inputView:u},v);return rt.createElement(b,o({},ne))},st=at;import it from"react";import{Sorting as ct}from"@elastic/react-search-ui-views";function ut(t,e){if(e.indexOf("|||")===-1)return t.find(a=>JSON.stringify(a.value)===e);let[r,n]=e.split("|||");return t.find(a=>a.value===r&&a.direction===n)}function te(t,e,r){return r&&r.length>0?JSON.stringify(r):`${t}|||${e}`}function lt(t){return Array.isArray(t.value)?JSON.stringify(t.value):te(t.value,t.direction,null)}function pt(t){return{label:t.name,value:lt(t)}}var ft=c=>{var u=c,{className:t,label:e,sortOptions:r,view:n}=u,a=p(u,["className","label","sortOptions","view"]);let{sortDirection:l,sortField:h,sortList:d,setSort:m}=f(),g=n||ct,P=o({className:t,label:e,onChange:v=>{let w=ut(r,v);m(w.value,w.direction)},options:r.map(pt),value:te(h,l,d)},a);return it.createElement(g,o({},P))},ht=ft;export{Ve as ErrorBoundary,Ne as Facet,We as Paging,je as PagingInfo,U as Result,Ke as Results,tt as ResultsPerPage,st as SearchBox,R as SearchContext,we as SearchProvider,ht as Sorting,Se as WithSearch,f as useSearch,L as withSearch};