From b9733fadc87e68aa6c90f4a73e46fbf8bc41dd5b Mon Sep 17 00:00:00 2001 From: Frank Mecklenburg Date: Thu, 25 Jan 2024 14:48:23 +0100 Subject: [PATCH] 2.16.2 --- CHANGELOG.md | 8 ++++++++ dist/react-geosuggest.js | 4 ++-- dist/react-geosuggest.min.js | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 5 files changed, 14 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 293f4ed..cbb9180 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +### 2.16.2 (2024-01-25) + + +#### Bug Fixes + +* **Geosuggest:** fix input id and label for (#491) ([267b4ac4](https://github.com/ubilabs/react-geosuggest/commit/267b4ac4a200391d7cf295a1a5868d6b58fc9b85)) + + ### 2.16.1 (2023-10-02) diff --git a/dist/react-geosuggest.js b/dist/react-geosuggest.js index 2fad202..8ab4419 100644 --- a/dist/react-geosuggest.js +++ b/dist/react-geosuggest.js @@ -720,7 +720,7 @@ var Geosuggest = (function (React) { attributes.tabIndex = 0; } return (React__namespace.createElement(React__namespace.Fragment, null, - shouldRenderLabel && (React__namespace.createElement("label", { className: "geosuggest__label", htmlFor: this.props.id }, this.props.label)), + shouldRenderLabel && (React__namespace.createElement("label", { className: "geosuggest__label", htmlFor: "geosuggest__input".concat(this.props.id ? "--".concat(this.props.id) : '') }, this.props.label)), React__namespace.createElement("input", __assign({ className: classes, id: "geosuggest__input".concat(this.props.id ? "--".concat(this.props.id) : ''), ref: function (i) { return (_this.input = i); }, type: this.props.inputType }, attributes, { value: this.props.value, style: this.props.style, onKeyDown: this.onInputKeyDown, onChange: this.onChange, onKeyPress: this.props.onKeyPress, onFocus: this.props.onFocus, onBlur: this.props.onBlur, role: "combobox", "aria-expanded": !this.props.isSuggestsHidden, "aria-activedescendant": this.props.activeSuggest ? this.props.activeSuggest.placeId : // eslint-disable-next-line no-undefined @@ -1380,7 +1380,7 @@ var Geosuggest = (function (React) { }); var input = (React__namespace.createElement(Input, __assign({ className: this.props.inputClassName, ref: function (i) { return (_this.input = i); }, value: this.state.userInput, doNotSubmitOnEnter: !this.state.isSuggestsHidden, ignoreTab: this.props.ignoreTab, ignoreEnter: this.props.ignoreEnter, style: this.props.style && this.props.style.input, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.props.onKeyDown, onKeyPress: this.props.onKeyPress, inputType: this.props.inputType, onNext: this.onNext, onPrev: this.onPrev, onSelect: this.onSelect, onEscape: this.hideSuggests, isSuggestsHidden: this.state.isSuggestsHidden, activeSuggest: this.state.activeSuggest, label: this.props.label, id: this.props.id, listId: this.listId }, attributes))); var suggestionsList = (React__namespace.createElement(SuggestList, { isHidden: this.state.isSuggestsHidden, style: this.props.style && this.props.style.suggests, suggestItemStyle: this.props.style && this.props.style.suggestItem, userInput: this.state.userInput, isHighlightMatch: Boolean(this.props.highlightMatch), suggestsClassName: this.props.suggestsClassName, suggestItemClassName: this.props.suggestItemClassName, suggests: this.state.suggests, hiddenClassName: this.props.suggestsHiddenClassName, suggestItemActiveClassName: this.props.suggestItemActiveClassName, activeSuggest: this.state.activeSuggest, onSuggestNoResults: this.onSuggestNoResults, onSuggestMouseDown: this.onSuggestMouseDown, onSuggestMouseOut: this.onSuggestMouseOut, onSuggestSelect: this.selectSuggest, renderSuggestItem: this.props.renderSuggestItem, listId: this.listId, listLabel: this.listLabel })); - return (React__namespace.createElement("div", { className: classes, id: this.props.id }, + return (React__namespace.createElement("div", { className: classes, id: "geosuggest__wrapper".concat(this.props.id ? "--".concat(this.props.id) : '') }, React__namespace.createElement("div", { className: "geosuggest__input-wrapper" }, input), React__namespace.createElement("div", { className: "geosuggest__suggests-wrapper" }, suggestionsList))); }; diff --git a/dist/react-geosuggest.min.js b/dist/react-geosuggest.min.js index 380681e..66f15ef 100644 --- a/dist/react-geosuggest.min.js +++ b/dist/react-geosuggest.min.js @@ -3,4 +3,4 @@ var Geosuggest=function(t){"use strict";function e(t){var e=Object.create(null); Copyright (c) 2018 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames - */p=a,function(){var t={}.hasOwnProperty;function e(){for(var s=[],o=0;o=e||s<0||l&&t-a>=i}function f(){var t=N();if(d(t))return S(t);u=setTimeout(f,function(t){var s=e-(t-p);return l?C(s,i-(t-a)):s}(t))}function S(t){return u=void 0,c&&o?h(t):(o=n=void 0,r)}function v(){var t=N(),s=d(t);if(o=arguments,n=this,p=t,s){if(void 0===u)return function(t){return a=t,u=setTimeout(f,e),g?h(t):r}(p);if(l)return u=setTimeout(f,e),h(p)}return void 0===u&&(u=setTimeout(f,e)),r}return e=M(e)||0,x(s)&&(g=!!s.leading,i=(l="maxWait"in s)?w(M(s.maxWait)||0,e):i,c="trailing"in s?!!s.trailing:c),v.cancel=function(){void 0!==u&&clearTimeout(u),a=0,o=p=n=u=void 0},v.flush=function(){return void 0===u?r:S(N())},v},T=u(O),D={autoActivateFirstSuggest:!1,disabled:!1,fixtures:[],getSuggestLabel:function(t){return t.description},highlightMatch:!0,ignoreEnter:!1,ignoreTab:!1,initialValue:"",maxFixtures:10,minLength:1,onKeyDown:function(){},onKeyPress:function(){},placeholder:"Search places",queryDelay:250,skipSuggest:function(){return!1},style:{},inputType:"text"},E=["autoCapitalize","autoComplete","autoCorrect","autoFocus","disabled","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","inputMode","maxLength","name","onClick","onContextMenu","onCopy","onCut","onDoubleClick","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onPaste","pattern","placeholder","readOnly","required","size","spellCheck","tabIndex","title","aria-atomic","aria-busy","aria-controls","aria-current","aria-describedby","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-live","aria-owns","aria-relevant","aria-roledescription","aria-activedescendant","aria-autocomplete","aria-multiline","aria-placeholder","aria-readonly","aria-required"];function _(t){var e={};return Object.keys(t).forEach((function(s){var o=s.startsWith("data-");(E.includes(s)||o)&&(e[s]=t[s])})),e}var P=function(t){function e(e){var s=t.call(this,e)||this;return s.input=null,s.onChange=s.onChange.bind(s),s.onInputKeyDown=s.onInputKeyDown.bind(s),s}return n(e,t),e.prototype.onChange=function(){this.input&&this.props.onChange(this.input.value)},e.prototype.onInputKeyDown=function(t){switch(this.props.onKeyDown&&this.props.onKeyDown(t),t.which){case 40:t.shiftKey||(t.preventDefault(),this.props.onNext());break;case 38:t.shiftKey||(t.preventDefault(),this.props.onPrev());break;case 13:this.props.doNotSubmitOnEnter&&t.preventDefault(),this.props.ignoreEnter||this.props.onSelect();break;case 9:this.props.ignoreTab||this.props.onSelect();break;case 27:this.props.onEscape()}},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.render=function(){var t=this,e=_(this.props),o=g("geosuggest__input",this.props.className),n=this.props.label&&this.props.id;return e.tabIndex||(e.tabIndex=0),s.createElement(s.Fragment,null,n&&s.createElement("label",{className:"geosuggest__label",htmlFor:this.props.id},this.props.label),s.createElement("input",i({className:o,id:"geosuggest__input".concat(this.props.id?"--".concat(this.props.id):""),ref:function(e){return t.input=e},type:this.props.inputType},e,{value:this.props.value,style:this.props.style,onKeyDown:this.onInputKeyDown,onChange:this.onChange,onKeyPress:this.props.onKeyPress,onFocus:this.props.onFocus,onBlur:this.props.onBlur,role:"combobox","aria-expanded":!this.props.isSuggestsHidden,"aria-activedescendant":this.props.activeSuggest?this.props.activeSuggest.placeId:void 0,"aria-owns":this.props.listId})))},e.defaultProps={activeSuggest:null,autoComplete:"off",className:"",isSuggestsHidden:!0,listId:"",inputType:"text",onBlur:function(){},onChange:function(){},onEscape:function(){},onFocus:function(){},onKeyDown:function(){},onKeyPress:function(){},onNext:function(){},onPrev:function(){},onSelect:function(){},value:""},e}(s.PureComponent),A=function(t){function e(e){var s=t.call(this,e)||this;return s.ref=null,s.onClick=s.onClick.bind(s),s}return n(e,t),e.prototype.makeBold=function(t){return s.createElement("b",{className:"geosuggest__item__matched-text"},t)},e.prototype.formatMatchedText=function(t,e){if(!t||!e.matchedSubstrings)return e.label;for(var o=[],n=0,i=0,r=e.matchedSubstrings;in&&o.push(e.label.substring(n,p));var g=p+a,l=this.makeBold(e.label.substring(p,g));o.push(l),n=g}return ne.scrollTop+e.clientHeight;(s||o)&&(e.scrollTop=t.offsetTop-e.offsetTop-e.clientHeight/2+t.clientHeight/2)}},e.prototype.onClick=function(t){t.preventDefault(),this.props.onSelect(this.props.suggest)},e.prototype.render=function(){var t,e=this,o=this.props.suggest,n=g("geosuggest__item",this.props.className,this.props.suggestItemClassName,{"geosuggest__item--active":this.props.isActive},((t={})[this.props.activeClassName||""]=this.props.activeClassName?this.props.isActive:null,t)),i=o.label;return this.props.renderSuggestItem?i=this.props.renderSuggestItem(o,this.props.userInput):this.props.isHighlightMatch&&(i=this.formatMatchedText(this.props.userInput,o)),s.createElement("li",{className:n,ref:function(t){return e.ref=t},style:this.props.style,onMouseDown:this.props.onMouseDown,onMouseOut:this.props.onMouseOut,onClick:this.onClick,role:"option","aria-selected":this.props.isActive,id:o.placeId},i)},e}(s.PureComponent),k=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.isHidden=function(){return this.props.isHidden||0===this.props.suggests.length},e.prototype.componentDidUpdate=function(t){t.suggests!==this.props.suggests&&0===this.props.suggests.length&&this.props.onSuggestNoResults()},e.prototype.render=function(){var t,e=this,o=g("geosuggest__suggests",this.props.suggestsClassName,{"geosuggest__suggests--hidden":this.isHidden()},((t={})[this.props.hiddenClassName||""]=this.props.hiddenClassName?this.isHidden():null,t));return s.createElement("ul",{className:o,style:this.props.style,role:"listbox","aria-label":this.props.listLabel,id:this.props.listId},this.props.suggests.map((function(t){var o=e.props.activeSuggest&&t.placeId===e.props.activeSuggest.placeId||!1;return s.createElement(A,{key:t.placeId,className:t.className||"",userInput:e.props.userInput,isHighlightMatch:e.props.isHighlightMatch,suggest:t,style:e.props.suggestItemStyle,suggestItemClassName:e.props.suggestItemClassName,isActive:o,activeClassName:e.props.suggestItemActiveClassName,onMouseDown:e.props.onSuggestMouseDown,onMouseOut:e.props.onSuggestMouseOut,onSelect:e.props.onSuggestSelect,renderSuggestItem:e.props.renderSuggestItem})})))},e}(s.PureComponent);return function(t){function e(e){var s=t.call(this,e)||this;return s.googleMaps=null,s.autocompleteService=null,s.placesService=null,s.sessionToken=void 0,s.geocoder=null,s.input=null,s.state={activeSuggest:null,ignoreBlur:!1,isLoading:!1,isSuggestsHidden:!0,suggests:[],userInput:e.initialValue||""},s.onInputChange=s.onInputChange.bind(s),s.onAfterInputChange=s.onAfterInputChange.bind(s),s.onInputFocus=s.onInputFocus.bind(s),s.onInputBlur=s.onInputBlur.bind(s),s.onNext=s.onNext.bind(s),s.onPrev=s.onPrev.bind(s),s.onSelect=s.onSelect.bind(s),s.onSuggestMouseDown=s.onSuggestMouseDown.bind(s),s.onSuggestMouseOut=s.onSuggestMouseOut.bind(s),s.onSuggestNoResults=s.onSuggestNoResults.bind(s),s.hideSuggests=s.hideSuggests.bind(s),s.selectSuggest=s.selectSuggest.bind(s),s.listId="geosuggest__list".concat(e.id?"--".concat(e.id):""),s.listLabel=e.label?"".concat(e.label," options"):"options",e.queryDelay&&(s.onAfterInputChange=T(s.onAfterInputChange,e.queryDelay)),s}return n(e,t),e.prototype.componentDidUpdate=function(t){t.initialValue!==this.props.initialValue&&this.setState({userInput:this.props.initialValue||""}),JSON.stringify(t.fixtures)!==JSON.stringify(this.props.fixtures)&&this.searchSuggests()},e.prototype.componentDidMount=function(){if("undefined"!=typeof window){var t=this.props.googleMaps||window.google&&window.google.maps||this.googleMaps;t?(this.googleMaps=t,this.autocompleteService=new t.places.AutocompleteService,this.placesService=new t.places.PlacesService(document.createElement("div")),this.sessionToken=new t.places.AutocompleteSessionToken,this.geocoder=new t.Geocoder):console&&console.error("Google maps API was not found in the page.")}},e.prototype.componentWillUnmount=function(){clearTimeout(this.timer)},e.prototype.onInputChange=function(t){t||this.props.onSuggestSelect&&this.props.onSuggestSelect(),this.setState({userInput:t},this.onAfterInputChange)},e.prototype.onAfterInputChange=function(){this.showSuggests(),this.props.onChange&&this.props.onChange(this.state.userInput)},e.prototype.onInputFocus=function(){this.props.onFocus&&this.props.onFocus(),this.showSuggests()},e.prototype.onInputBlur=function(){this.state.ignoreBlur||this.hideSuggests(),this.props.onBlur&&this.props.onBlur(this.state.userInput)},e.prototype.onNext=function(){this.activateSuggest("next")},e.prototype.onPrev=function(){this.activateSuggest("prev")},e.prototype.onSelect=function(){this.selectSuggest(this.state.activeSuggest)},e.prototype.onSuggestMouseDown=function(){this.setState({ignoreBlur:!0})},e.prototype.onSuggestMouseOut=function(){this.setState({ignoreBlur:!1})},e.prototype.onSuggestNoResults=function(){this.props.onSuggestNoResults&&this.props.onSuggestNoResults(this.state.userInput)},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.update=function(t){this.setState({userInput:t}),this.props.onChange&&this.props.onChange(t)},e.prototype.clear=function(){this.setState({userInput:""},this.hideSuggests)},e.prototype.searchSuggests=function(){var t=this;if(this.state.userInput){var e={input:this.state.userInput,sessionToken:this.sessionToken},s=this.state.userInput.length;if(this.props.minLength&&s=a||p&&!p(t)&&t.label.match(l)&&(c++,n.push(i(i({},t),{isFixture:!0,matchedSubstrings:[{length:r.length,offset:t.label.search(l)}],placeId:t.placeId||t.label})))})),t.forEach((function(t){p&&!p(t)&&n.push({description:t.description,isFixture:!1,label:s.props.getSuggestLabel?s.props.getSuggestLabel(t):"",matchedSubstrings:t.matched_substrings,placeId:t.place_id})})),o=this.updateActiveSuggest(n),this.props.onUpdateSuggests&&this.props.onUpdateSuggests(n,o),this.setState({suggests:n,activeSuggest:o},e)},e.prototype.updateActiveSuggest=function(t){void 0===t&&(t=[]);var e=this.state.activeSuggest;if(e){var s=t.filter((function(t){return e&&e.placeId===t.placeId&&e.isFixture===t.isFixture}))[0];e=s||null}return e},e.prototype.showSuggests=function(){this.searchSuggests(),this.setState({isSuggestsHidden:!1})},e.prototype.hideSuggests=function(){var t=this;this.timer=window.setTimeout((function(){t.setState({activeSuggest:null,isSuggestsHidden:!0})}),100)},e.prototype.activateSuggest=function(t){if(this.state.isSuggestsHidden)this.showSuggests();else{for(var e=this.state.suggests.length-1,s="next"===t,o=null,n=0,i=0;i<=e;i++)this.state.suggests[i]===this.state.activeSuggest&&(n=s?i+1:i-1);this.state.activeSuggest||(n=s?0:e),n>=0&&n<=e&&(o=this.state.suggests[n]),this.props.onActivateSuggest&&this.props.onActivateSuggest(o),this.setState({activeSuggest:o})}},e.prototype.selectSuggest=function(t){var e=t||{isFixture:!0,label:this.state.userInput,placeId:this.state.userInput};if(!t&&this.props.autoActivateFirstSuggest&&this.state.suggests.length>0&&(e=this.state.suggests[0]),this.setState({isSuggestsHidden:!0,userInput:"object"!=typeof e.label?e.label:e.description||""}),e.location)return this.setState({ignoreBlur:!1}),void(this.props.onSuggestSelect&&this.props.onSuggestSelect(e));this.geocodeSuggest(e)},e.prototype.geocodeSuggest=function(t){var e=this;if(this.geocoder)if(t.placeId&&!t.isFixture&&this.placesService){var s={placeId:t.placeId,sessionToken:this.sessionToken};this.props.placeDetailFields&&(s.fields=this.props.placeDetailFields,s.fields.unshift("geometry")),this.placesService.getDetails(s,(function(s,o){if(o===e.googleMaps.places.PlacesServiceStatus.OK){var n=s,r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.sessionToken=new google.maps.places.AutocompleteSessionToken,e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}else{s={address:t.label,bounds:this.props.bounds,componentRestrictions:this.props.country?{country:this.props.country}:void 0,location:this.props.location};this.geocoder.geocode(s,(function(s,o){if(o===e.googleMaps.GeocoderStatus.OK){var n=s[0],r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}},e.prototype.render=function(){var t=this,e=_(this.props),o=g("geosuggest",this.props.className,{"geosuggest--loading":this.state.isLoading}),n=s.createElement(P,i({className:this.props.inputClassName,ref:function(e){return t.input=e},value:this.state.userInput,doNotSubmitOnEnter:!this.state.isSuggestsHidden,ignoreTab:this.props.ignoreTab,ignoreEnter:this.props.ignoreEnter,style:this.props.style&&this.props.style.input,onChange:this.onInputChange,onFocus:this.onInputFocus,onBlur:this.onInputBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,inputType:this.props.inputType,onNext:this.onNext,onPrev:this.onPrev,onSelect:this.onSelect,onEscape:this.hideSuggests,isSuggestsHidden:this.state.isSuggestsHidden,activeSuggest:this.state.activeSuggest,label:this.props.label,id:this.props.id,listId:this.listId},e)),r=s.createElement(k,{isHidden:this.state.isSuggestsHidden,style:this.props.style&&this.props.style.suggests,suggestItemStyle:this.props.style&&this.props.style.suggestItem,userInput:this.state.userInput,isHighlightMatch:Boolean(this.props.highlightMatch),suggestsClassName:this.props.suggestsClassName,suggestItemClassName:this.props.suggestItemClassName,suggests:this.state.suggests,hiddenClassName:this.props.suggestsHiddenClassName,suggestItemActiveClassName:this.props.suggestItemActiveClassName,activeSuggest:this.state.activeSuggest,onSuggestNoResults:this.onSuggestNoResults,onSuggestMouseDown:this.onSuggestMouseDown,onSuggestMouseOut:this.onSuggestMouseOut,onSuggestSelect:this.selectSuggest,renderSuggestItem:this.props.renderSuggestItem,listId:this.listId,listLabel:this.listLabel});return s.createElement("div",{className:o,id:this.props.id},s.createElement("div",{className:"geosuggest__input-wrapper"},n),s.createElement("div",{className:"geosuggest__suggests-wrapper"},r))},e.defaultProps=D,e}(s.Component)}(React); + */p=a,function(){var t={}.hasOwnProperty;function e(){for(var s=[],o=0;o=e||s<0||l&&t-a>=i}function f(){var t=N();if(d(t))return S(t);u=setTimeout(f,function(t){var s=e-(t-p);return l?C(s,i-(t-a)):s}(t))}function S(t){return u=void 0,c&&o?h(t):(o=n=void 0,r)}function v(){var t=N(),s=d(t);if(o=arguments,n=this,p=t,s){if(void 0===u)return function(t){return a=t,u=setTimeout(f,e),g?h(t):r}(p);if(l)return u=setTimeout(f,e),h(p)}return void 0===u&&(u=setTimeout(f,e)),r}return e=M(e)||0,x(s)&&(g=!!s.leading,i=(l="maxWait"in s)?w(M(s.maxWait)||0,e):i,c="trailing"in s?!!s.trailing:c),v.cancel=function(){void 0!==u&&clearTimeout(u),a=0,o=p=n=u=void 0},v.flush=function(){return void 0===u?r:S(N())},v},T=u(O),_={autoActivateFirstSuggest:!1,disabled:!1,fixtures:[],getSuggestLabel:function(t){return t.description},highlightMatch:!0,ignoreEnter:!1,ignoreTab:!1,initialValue:"",maxFixtures:10,minLength:1,onKeyDown:function(){},onKeyPress:function(){},placeholder:"Search places",queryDelay:250,skipSuggest:function(){return!1},style:{},inputType:"text"},D=["autoCapitalize","autoComplete","autoCorrect","autoFocus","disabled","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","inputMode","maxLength","name","onClick","onContextMenu","onCopy","onCut","onDoubleClick","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onPaste","pattern","placeholder","readOnly","required","size","spellCheck","tabIndex","title","aria-atomic","aria-busy","aria-controls","aria-current","aria-describedby","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-live","aria-owns","aria-relevant","aria-roledescription","aria-activedescendant","aria-autocomplete","aria-multiline","aria-placeholder","aria-readonly","aria-required"];function E(t){var e={};return Object.keys(t).forEach((function(s){var o=s.startsWith("data-");(D.includes(s)||o)&&(e[s]=t[s])})),e}var P=function(t){function e(e){var s=t.call(this,e)||this;return s.input=null,s.onChange=s.onChange.bind(s),s.onInputKeyDown=s.onInputKeyDown.bind(s),s}return n(e,t),e.prototype.onChange=function(){this.input&&this.props.onChange(this.input.value)},e.prototype.onInputKeyDown=function(t){switch(this.props.onKeyDown&&this.props.onKeyDown(t),t.which){case 40:t.shiftKey||(t.preventDefault(),this.props.onNext());break;case 38:t.shiftKey||(t.preventDefault(),this.props.onPrev());break;case 13:this.props.doNotSubmitOnEnter&&t.preventDefault(),this.props.ignoreEnter||this.props.onSelect();break;case 9:this.props.ignoreTab||this.props.onSelect();break;case 27:this.props.onEscape()}},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.render=function(){var t=this,e=E(this.props),o=g("geosuggest__input",this.props.className),n=this.props.label&&this.props.id;return e.tabIndex||(e.tabIndex=0),s.createElement(s.Fragment,null,n&&s.createElement("label",{className:"geosuggest__label",htmlFor:"geosuggest__input".concat(this.props.id?"--".concat(this.props.id):"")},this.props.label),s.createElement("input",i({className:o,id:"geosuggest__input".concat(this.props.id?"--".concat(this.props.id):""),ref:function(e){return t.input=e},type:this.props.inputType},e,{value:this.props.value,style:this.props.style,onKeyDown:this.onInputKeyDown,onChange:this.onChange,onKeyPress:this.props.onKeyPress,onFocus:this.props.onFocus,onBlur:this.props.onBlur,role:"combobox","aria-expanded":!this.props.isSuggestsHidden,"aria-activedescendant":this.props.activeSuggest?this.props.activeSuggest.placeId:void 0,"aria-owns":this.props.listId})))},e.defaultProps={activeSuggest:null,autoComplete:"off",className:"",isSuggestsHidden:!0,listId:"",inputType:"text",onBlur:function(){},onChange:function(){},onEscape:function(){},onFocus:function(){},onKeyDown:function(){},onKeyPress:function(){},onNext:function(){},onPrev:function(){},onSelect:function(){},value:""},e}(s.PureComponent),A=function(t){function e(e){var s=t.call(this,e)||this;return s.ref=null,s.onClick=s.onClick.bind(s),s}return n(e,t),e.prototype.makeBold=function(t){return s.createElement("b",{className:"geosuggest__item__matched-text"},t)},e.prototype.formatMatchedText=function(t,e){if(!t||!e.matchedSubstrings)return e.label;for(var o=[],n=0,i=0,r=e.matchedSubstrings;in&&o.push(e.label.substring(n,p));var g=p+a,l=this.makeBold(e.label.substring(p,g));o.push(l),n=g}return ne.scrollTop+e.clientHeight;(s||o)&&(e.scrollTop=t.offsetTop-e.offsetTop-e.clientHeight/2+t.clientHeight/2)}},e.prototype.onClick=function(t){t.preventDefault(),this.props.onSelect(this.props.suggest)},e.prototype.render=function(){var t,e=this,o=this.props.suggest,n=g("geosuggest__item",this.props.className,this.props.suggestItemClassName,{"geosuggest__item--active":this.props.isActive},((t={})[this.props.activeClassName||""]=this.props.activeClassName?this.props.isActive:null,t)),i=o.label;return this.props.renderSuggestItem?i=this.props.renderSuggestItem(o,this.props.userInput):this.props.isHighlightMatch&&(i=this.formatMatchedText(this.props.userInput,o)),s.createElement("li",{className:n,ref:function(t){return e.ref=t},style:this.props.style,onMouseDown:this.props.onMouseDown,onMouseOut:this.props.onMouseOut,onClick:this.onClick,role:"option","aria-selected":this.props.isActive,id:o.placeId},i)},e}(s.PureComponent),k=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.isHidden=function(){return this.props.isHidden||0===this.props.suggests.length},e.prototype.componentDidUpdate=function(t){t.suggests!==this.props.suggests&&0===this.props.suggests.length&&this.props.onSuggestNoResults()},e.prototype.render=function(){var t,e=this,o=g("geosuggest__suggests",this.props.suggestsClassName,{"geosuggest__suggests--hidden":this.isHidden()},((t={})[this.props.hiddenClassName||""]=this.props.hiddenClassName?this.isHidden():null,t));return s.createElement("ul",{className:o,style:this.props.style,role:"listbox","aria-label":this.props.listLabel,id:this.props.listId},this.props.suggests.map((function(t){var o=e.props.activeSuggest&&t.placeId===e.props.activeSuggest.placeId||!1;return s.createElement(A,{key:t.placeId,className:t.className||"",userInput:e.props.userInput,isHighlightMatch:e.props.isHighlightMatch,suggest:t,style:e.props.suggestItemStyle,suggestItemClassName:e.props.suggestItemClassName,isActive:o,activeClassName:e.props.suggestItemActiveClassName,onMouseDown:e.props.onSuggestMouseDown,onMouseOut:e.props.onSuggestMouseOut,onSelect:e.props.onSuggestSelect,renderSuggestItem:e.props.renderSuggestItem})})))},e}(s.PureComponent);return function(t){function e(e){var s=t.call(this,e)||this;return s.googleMaps=null,s.autocompleteService=null,s.placesService=null,s.sessionToken=void 0,s.geocoder=null,s.input=null,s.state={activeSuggest:null,ignoreBlur:!1,isLoading:!1,isSuggestsHidden:!0,suggests:[],userInput:e.initialValue||""},s.onInputChange=s.onInputChange.bind(s),s.onAfterInputChange=s.onAfterInputChange.bind(s),s.onInputFocus=s.onInputFocus.bind(s),s.onInputBlur=s.onInputBlur.bind(s),s.onNext=s.onNext.bind(s),s.onPrev=s.onPrev.bind(s),s.onSelect=s.onSelect.bind(s),s.onSuggestMouseDown=s.onSuggestMouseDown.bind(s),s.onSuggestMouseOut=s.onSuggestMouseOut.bind(s),s.onSuggestNoResults=s.onSuggestNoResults.bind(s),s.hideSuggests=s.hideSuggests.bind(s),s.selectSuggest=s.selectSuggest.bind(s),s.listId="geosuggest__list".concat(e.id?"--".concat(e.id):""),s.listLabel=e.label?"".concat(e.label," options"):"options",e.queryDelay&&(s.onAfterInputChange=T(s.onAfterInputChange,e.queryDelay)),s}return n(e,t),e.prototype.componentDidUpdate=function(t){t.initialValue!==this.props.initialValue&&this.setState({userInput:this.props.initialValue||""}),JSON.stringify(t.fixtures)!==JSON.stringify(this.props.fixtures)&&this.searchSuggests()},e.prototype.componentDidMount=function(){if("undefined"!=typeof window){var t=this.props.googleMaps||window.google&&window.google.maps||this.googleMaps;t?(this.googleMaps=t,this.autocompleteService=new t.places.AutocompleteService,this.placesService=new t.places.PlacesService(document.createElement("div")),this.sessionToken=new t.places.AutocompleteSessionToken,this.geocoder=new t.Geocoder):console&&console.error("Google maps API was not found in the page.")}},e.prototype.componentWillUnmount=function(){clearTimeout(this.timer)},e.prototype.onInputChange=function(t){t||this.props.onSuggestSelect&&this.props.onSuggestSelect(),this.setState({userInput:t},this.onAfterInputChange)},e.prototype.onAfterInputChange=function(){this.showSuggests(),this.props.onChange&&this.props.onChange(this.state.userInput)},e.prototype.onInputFocus=function(){this.props.onFocus&&this.props.onFocus(),this.showSuggests()},e.prototype.onInputBlur=function(){this.state.ignoreBlur||this.hideSuggests(),this.props.onBlur&&this.props.onBlur(this.state.userInput)},e.prototype.onNext=function(){this.activateSuggest("next")},e.prototype.onPrev=function(){this.activateSuggest("prev")},e.prototype.onSelect=function(){this.selectSuggest(this.state.activeSuggest)},e.prototype.onSuggestMouseDown=function(){this.setState({ignoreBlur:!0})},e.prototype.onSuggestMouseOut=function(){this.setState({ignoreBlur:!1})},e.prototype.onSuggestNoResults=function(){this.props.onSuggestNoResults&&this.props.onSuggestNoResults(this.state.userInput)},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.update=function(t){this.setState({userInput:t}),this.props.onChange&&this.props.onChange(t)},e.prototype.clear=function(){this.setState({userInput:""},this.hideSuggests)},e.prototype.searchSuggests=function(){var t=this;if(this.state.userInput){var e={input:this.state.userInput,sessionToken:this.sessionToken},s=this.state.userInput.length;if(this.props.minLength&&s=a||p&&!p(t)&&t.label.match(l)&&(c++,n.push(i(i({},t),{isFixture:!0,matchedSubstrings:[{length:r.length,offset:t.label.search(l)}],placeId:t.placeId||t.label})))})),t.forEach((function(t){p&&!p(t)&&n.push({description:t.description,isFixture:!1,label:s.props.getSuggestLabel?s.props.getSuggestLabel(t):"",matchedSubstrings:t.matched_substrings,placeId:t.place_id})})),o=this.updateActiveSuggest(n),this.props.onUpdateSuggests&&this.props.onUpdateSuggests(n,o),this.setState({suggests:n,activeSuggest:o},e)},e.prototype.updateActiveSuggest=function(t){void 0===t&&(t=[]);var e=this.state.activeSuggest;if(e){var s=t.filter((function(t){return e&&e.placeId===t.placeId&&e.isFixture===t.isFixture}))[0];e=s||null}return e},e.prototype.showSuggests=function(){this.searchSuggests(),this.setState({isSuggestsHidden:!1})},e.prototype.hideSuggests=function(){var t=this;this.timer=window.setTimeout((function(){t.setState({activeSuggest:null,isSuggestsHidden:!0})}),100)},e.prototype.activateSuggest=function(t){if(this.state.isSuggestsHidden)this.showSuggests();else{for(var e=this.state.suggests.length-1,s="next"===t,o=null,n=0,i=0;i<=e;i++)this.state.suggests[i]===this.state.activeSuggest&&(n=s?i+1:i-1);this.state.activeSuggest||(n=s?0:e),n>=0&&n<=e&&(o=this.state.suggests[n]),this.props.onActivateSuggest&&this.props.onActivateSuggest(o),this.setState({activeSuggest:o})}},e.prototype.selectSuggest=function(t){var e=t||{isFixture:!0,label:this.state.userInput,placeId:this.state.userInput};if(!t&&this.props.autoActivateFirstSuggest&&this.state.suggests.length>0&&(e=this.state.suggests[0]),this.setState({isSuggestsHidden:!0,userInput:"object"!=typeof e.label?e.label:e.description||""}),e.location)return this.setState({ignoreBlur:!1}),void(this.props.onSuggestSelect&&this.props.onSuggestSelect(e));this.geocodeSuggest(e)},e.prototype.geocodeSuggest=function(t){var e=this;if(this.geocoder)if(t.placeId&&!t.isFixture&&this.placesService){var s={placeId:t.placeId,sessionToken:this.sessionToken};this.props.placeDetailFields&&(s.fields=this.props.placeDetailFields,s.fields.unshift("geometry")),this.placesService.getDetails(s,(function(s,o){if(o===e.googleMaps.places.PlacesServiceStatus.OK){var n=s,r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.sessionToken=new google.maps.places.AutocompleteSessionToken,e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}else{s={address:t.label,bounds:this.props.bounds,componentRestrictions:this.props.country?{country:this.props.country}:void 0,location:this.props.location};this.geocoder.geocode(s,(function(s,o){if(o===e.googleMaps.GeocoderStatus.OK){var n=s[0],r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}},e.prototype.render=function(){var t=this,e=E(this.props),o=g("geosuggest",this.props.className,{"geosuggest--loading":this.state.isLoading}),n=s.createElement(P,i({className:this.props.inputClassName,ref:function(e){return t.input=e},value:this.state.userInput,doNotSubmitOnEnter:!this.state.isSuggestsHidden,ignoreTab:this.props.ignoreTab,ignoreEnter:this.props.ignoreEnter,style:this.props.style&&this.props.style.input,onChange:this.onInputChange,onFocus:this.onInputFocus,onBlur:this.onInputBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,inputType:this.props.inputType,onNext:this.onNext,onPrev:this.onPrev,onSelect:this.onSelect,onEscape:this.hideSuggests,isSuggestsHidden:this.state.isSuggestsHidden,activeSuggest:this.state.activeSuggest,label:this.props.label,id:this.props.id,listId:this.listId},e)),r=s.createElement(k,{isHidden:this.state.isSuggestsHidden,style:this.props.style&&this.props.style.suggests,suggestItemStyle:this.props.style&&this.props.style.suggestItem,userInput:this.state.userInput,isHighlightMatch:Boolean(this.props.highlightMatch),suggestsClassName:this.props.suggestsClassName,suggestItemClassName:this.props.suggestItemClassName,suggests:this.state.suggests,hiddenClassName:this.props.suggestsHiddenClassName,suggestItemActiveClassName:this.props.suggestItemActiveClassName,activeSuggest:this.state.activeSuggest,onSuggestNoResults:this.onSuggestNoResults,onSuggestMouseDown:this.onSuggestMouseDown,onSuggestMouseOut:this.onSuggestMouseOut,onSuggestSelect:this.selectSuggest,renderSuggestItem:this.props.renderSuggestItem,listId:this.listId,listLabel:this.listLabel});return s.createElement("div",{className:o,id:"geosuggest__wrapper".concat(this.props.id?"--".concat(this.props.id):"")},s.createElement("div",{className:"geosuggest__input-wrapper"},n),s.createElement("div",{className:"geosuggest__suggests-wrapper"},r))},e.defaultProps=_,e}(s.Component)}(React); diff --git a/package-lock.json b/package-lock.json index 15807ad..5cde5df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ubilabs/react-geosuggest", - "version": "2.16.1", + "version": "2.16.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ubilabs/react-geosuggest", - "version": "2.16.1", + "version": "2.16.2", "license": "MIT", "dependencies": { "classnames": "^2.3.2", diff --git a/package.json b/package.json index c2a92fc..261c8bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ubilabs/react-geosuggest", - "version": "2.16.1", + "version": "2.16.2", "description": "A React autosuggest for the Google Maps Places API.", "main": "module/Geosuggest.umd.js", "module": "module/Geosuggest.esm.js",