diff --git a/cjs/v1/index.js b/cjs/v1/index.js index 311aea2..fc18f6a 100644 --- a/cjs/v1/index.js +++ b/cjs/v1/index.js @@ -31,4 +31,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */ -function __awaiter(e,t,n,r){return new(n||(n=Promise))((function(a,o){function i(e){try{u(r.next(e))}catch(e){o(e)}}function l(e){try{u(r.throw(e))}catch(e){o(e)}}function u(e){e.done?a(e.value):new n((function(t){t(e.value)})).then(i,l)}u((r=r.apply(e,t||[])).next())}))}class OpenStreetMap{constructor(e){let t="",n="";if(e&&e.searchBounds&&e.searchBounds.length){t=`&bounded=1&viewbox=${e.searchBounds.reduce((e,t)=>[...e,t.lng,t.lat],[]).join(",")}`}e&&"region"in e&&(n=`&countrycodes=${e.region}`),this.url=`https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&polygon_svg=1&namedetails=1${t}${n}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){const t=yield fetch(this.url+e),n=yield t.json();return this.formatResponse(n)}))}formatResponse(e){const t=e;return{info:e.length>0?t.map(e=>({bounds:e.boundingbox.map(e=>Number(e)),latitude:Number(e.lat),longitude:Number(e.lon),name:e.display_name})):"Not Found",raw:e}}}class BingMap{constructor(e){var t;this.key=null==e?void 0:e.providerKey;let n="";if(null===(t=null==e?void 0:e.searchBounds)||void 0===t?void 0:t.length){n=`&umv=${e.searchBounds.reduce((e,t)=>[...e,t.lat,t.lng],[]).join(",")}`}this.url=`https://dev.virtualearth.net/REST/v1/Locations?output=json${n}&key=${this.key}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){if(void 0===this.key)return{error:"BingMap requires an api key"};const t=yield fetch(this.url+e).then(e=>e.json());return this.formatResponse(t)}))}formatResponse(e){const t=e.resourceSets[0].resources;return{info:e.resourceSets[0].estimatedTotal>0?t.map(e=>({bounds:e.bbox.map(e=>Number(e)),latitude:Number(e.point.coordinates[0]),longitude:Number(e.point.coordinates[1]),name:e.name})):"Not Found",raw:e}}}var Providers={OpenStreetMap:OpenStreetMap,BingMap:BingMap};function asyncInputEvent(e,t,n=400){let r;return a=>{a.persist(),t&&t(a),clearTimeout(r),r=window.setTimeout(()=>{e(a)},n)}}const SearchInputCore=({placeholder:e="PlaceHolder",type:t="text",initialValue:n="",className:r="",debounceTime:a=400,getInputValueSetter:o=(()=>{}),onClick:i=(()=>{}),onDoubleClick:l=(()=>{}),onMouseDown:u=(()=>{}),onMouseEnter:s=(()=>{}),onMouseLeave:c=(()=>{}),onChange:f=(()=>{}),onChangeAsync:d=(()=>{}),onFocus:p=(()=>{}),onBlur:h=(()=>{}),onKeyUp:m=(()=>{}),onKeyDown:v=(()=>{}),onKeyPress:g=(()=>{}),onSubmit:y=(()=>{}),tabIndex:b=0},w)=>{const[k,T]=React__default.useState(n),x=React__default.useCallback((e,t)=>{t(e)},[]),E=React__default.useCallback(asyncInputEvent(e=>{e.preventDefault(),e.stopPropagation(),d(e)},e=>{e.preventDefault(),e.stopPropagation(),T(e.target.value),f(e)},a),[T]);return React__default.useLayoutEffect(()=>{o(T)},[T,o]),React__default.createElement("input",{tabIndex:b,ref:w,type:t,name:"SearchInput",value:k,placeholder:e,className:`search-input${r?` ${r}`:""}`,onClick:e=>x(e,i),onDoubleClick:e=>x(e,l),onMouseEnter:e=>x(e,s),onMouseLeave:e=>x(e,c),onMouseDown:e=>x(e,u),onChange:E,onFocus:e=>x(e,p),onBlur:e=>x(e,h),onKeyUp:e=>x(e,m),onKeyDown:e=>x(e,v),onKeyPress:e=>x(e,g),onSubmit:e=>x(e,y)})},SearchInput=React__default.forwardRef(SearchInputCore);function SearchCloseButton({className:e="",onClick:t=(e=>{e.preventDefault(),e.stopPropagation()})}){return React__default.createElement("button",{className:`search-control-close-button${e?` ${e}`:""}`,onClick:t},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("path",{d:"M5 5 L45 45 M45 5 L5 45"}),"Sorry, your browser does not support inline SVG."))}function SearchIconButton({className:e="",onClick:t=(()=>{}),onMouseEnter:n=(()=>{}),onMouseLeave:r=(()=>{})}){return React__default.createElement("button",{className:`${e||""}`,onClick:t,onMouseEnter:n,onMouseLeave:r},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("line",{x1:"35",y1:"35",x2:"46",y2:"46"}),React__default.createElement("circle",{cx:"23",cy:"23",r:"16",fill:"none"}),"Sorry, your browser does not support inline SVG."))}const SearchInfoListItem=({value:e,className:t,candidate:n,onClick:r,onKeyDown:a,children:o})=>{const i=React__default.useRef(null);return React__default.useEffect(()=>{e===n&&i.current&&i.current.offsetParent&&i.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n,e]),React__default.createElement("li",{ref:i,value:e,className:t,onClick:r,onKeyDown:a},o)},SearchInfoListCore=(e,t)=>{const{handler:n,list:r,tabIndex:a,activeIndex:o}=e,[i,l]=React__default.useState(0),u=React__default.useCallback(e=>{if(Array.isArray(r)){e.stopPropagation(),9!==e.keyCode&&e.preventDefault();const t=r.length;if((t<=i||i<0||13!==e.keyCode)&&32!==e.keyCode){const n=t<=i||i<0?0:i;38===e.keyCode?l(0===n?r.length-1:n-1):40===e.keyCode&&l(n+1===r.length?0:n+1)}else n(r[i],r,i)}},[l,i,r,n]);return React__default.useLayoutEffect(()=>l(0),[r]),Array.isArray(r)?React__default.createElement("ul",Object.assign({ref:t},void 0!==a?{tabIndex:e.tabIndex}:{},{className:"search-control-info-list",onKeyDown:u}),r.map((e,t)=>React__default.createElement(SearchInfoListItem,{value:t,candidate:i,key:`${e.name}-${t}`,className:`search-control-info-list-item${t===o||e.checked?" active":""}${i===t?" candidate":""}`,onClick:()=>{l(t),n(e,r,t)},onKeyDown:u},e.name))):React__default.createElement("span",{className:"search-control-info-span"},r)};SearchInfoListCore.displayName="SearchInfoList";const SearchInfoList=React__default.forwardRef(SearchInfoListCore);class SearchControl extends React.Component{constructor(e){if(super(e),this.setLock=e=>{this.lock=e},this.openSearch=()=>{this.setState({open:!0},()=>{var e;null===(e=this.input.current)||void 0===e||e.focus()})},this.closeSearch=()=>{this.setState({open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},()=>{this.inputValueSetter(""),this.SearchResponseInfo="",this.props.handler&&this.props.handler({event:"remove"})})},this.searchIconButtonOnClick=e=>{e.preventDefault(),e.stopPropagation(),this.state.open?this.closeSearch():this.openSearch()},this.inputBlur=e=>{var t;""===(null===(t=this.input.current)||void 0===t?void 0:t.value)&&!this.lock&&this.closeSearch()},this.inputClick=e=>{var t,n,r;null===(t=this.input.current)||void 0===t||t.focus(),(null===(n=this.input.current)||void 0===n?void 0:n.value.startsWith(":"))||null===this.lastInfo||""===this.lastInfo||""===(null===(r=this.input.current)||void 0===r?void 0:r.value)||(this.SearchResponseInfo=this.lastInfo,this.lastInfo=null,this.setState({showInfo:!0}))},this.inputKeyUp=e=>{13===e.keyCode&&this.beautifyValue(this.input.current.value)},this.closeClick=e=>{this.closeSearch()},this.sendToAction=e=>__awaiter(this,void 0,void 0,(function*(){if(!this.input.current.value.startsWith(":"))if(Object.prototype.hasOwnProperty.call(this.responseCache,this.input.current.value))this.showInfo(this.responseCache[this.input.current.value].info);else if(this.input.current.value.length>=3){this.showInfo("Searching...");const e=this.input.current.value,t=yield this.provider.search(e);if(t.error)return!1;this.responseCache[e]=t,this.showInfo(t.info)}})),this.syncInput=()=>{var e,t;!this.state.closeButton&&this.setState({closeButton:!0}),""===(null===(e=this.input.current)||void 0===e?void 0:e.value)&&(this.hideInfo(),this.state.closeButton&&this.setState({closeButton:!1})),null===(t=this.input.current)||void 0===t||t.value.startsWith(":")},this.listItemClick=(e,t,n)=>{this.showInfo(t,n),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(e.latitude),Number(e.longitude)),info:e.name,raw:this.responseCache[this.input.current.value].raw}}),this.props.closeResultsOnClick&&this.hideInfo()},this.setMaxHeight=()=>{const e=this.props.map?this.props.map.getContainer().getBoundingClientRect():document.body.getBoundingClientRect(),t=this.input.current.getBoundingClientRect(),n=`${Math.floor(.6*(e.bottom-t.bottom-10))}px`;this.selectbox.current&&this.selectbox.current.style&&(this.selectbox.current.style.maxHeight=n)},this.state={open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},this.SearchResponseInfo="",this.responseCache={},this.lastInfo=null,this.inputValueSetter=()=>{},this.selectbox=React.createRef(),this.div=React.createRef(),this.input=React.createRef(),this.props.customProvider)this.provider=this.props.customProvider;else{if(!this.props.provider||!Object.keys(Providers).includes(this.props.provider))throw new Error(`You set the provider prop to ${this.props.provider} but that isn't recognised. You can choose from ${Object.keys(Providers).join(", ")}`);{const e=Providers[this.props.provider];this.provider=new e(this.props.providerOptions)}}}beautifyValue(e){if(e.startsWith(":")){const t=e.slice(1).split(",").filter(e=>!isNaN(Number(e))).map(e=>Number(e||0));t.length<=1?this.showInfo("Please enter a valid lat, lng"):(this.hideInfo(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(t[0]),Number(t[1])),info:t.join(","),raw:t.join(",")}}))}else if(this.input.current.value.length<3){const e='Please enter a valid lat,lng starting with ":" or minimum 3 character to search';this.showInfo(e)}}hideInfo(){this.lastInfo=this.SearchResponseInfo,this.SearchResponseInfo="",this.setState({showInfo:!1})}showInfo(e,t){var n;this.SearchResponseInfo=React.createElement(SearchInfoList,{ref:this.selectbox,activeIndex:t,list:e,handler:this.listItemClick,tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex+1:2}),(null===(n=this.input.current)||void 0===n?void 0:n.value)&&this.setState({showInfo:!0})}componentDidMount(){if(this.setMaxHeight(),this.props.search&&!isNaN(Number(this.props.search.lat))&&!isNaN(Number(this.props.search.lng))){const e=`:${this.props.search.lat},${this.props.search.lng}`;this.inputValueSetter(e),this.openSearch(),this.syncInput(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(this.props.search.lat),Number(this.props.search.lng)),info:e,raw:this.props.search}})}}componentDidUpdate(){this.setMaxHeight(),this.state.showInfo}render(){return React.createElement("article",{className:`${this.props.className?`${this.props.className} `:""}search-control-wrap`},React.createElement("section",{className:`search-control${this.state.open?" search-control-active":""}`},React.createElement(SearchIconButton,{className:"search-control-icon-button",onClick:this.searchIconButtonOnClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1)}),React.createElement(SearchInput,{tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex:1,ref:this.input,getInputValueSetter:e=>this.inputValueSetter=e,className:"search-control-input",placeholder:this.props.inputPlaceholder,onClick:this.inputClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1),onChange:this.syncInput,onChangeAsync:this.sendToAction,onBlur:this.inputBlur,onKeyUp:this.inputKeyUp,onKeyPress:e=>{e.stopPropagation(),40===e.keyCode&&e.preventDefault()},onKeyDown:e=>{var t;40===e.keyCode&&(e.preventDefault(),e.stopPropagation(),null===(t=this.selectbox.current)||void 0===t||t.focus())},onSubmit:e=>e.preventDefault()}),React.createElement(SearchCloseButton,{className:this.state.closeButton?" search-control-close-button-active":"",onClick:this.closeClick})),React.createElement("section",{className:`search-control-info-wrapper${this.state.showInfo?"":" search-control-info-wrapper-close"}`},React.createElement("section",{ref:this.div,className:"search-control-info"},this.state.showInfo&&this.SearchResponseInfo)))}}SearchControl.propTypes={provider:PropTypes.string,providerKey:PropTypes.string,inputPlaceholder:PropTypes.string,coords:PropTypes.arrayOf(PropTypes.number),closeResultsOnClick:PropTypes.bool,openSearchOnLoad:PropTypes.bool,searchBounds:PropTypes.array,providerOptions:PropTypes.object},SearchControl.defaultProps={inputPlaceholder:"Search Lat,Lng",closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap"};class ReactLeafletSearch extends reactLeaflet.MapControl{constructor(e,t){var n;super(e),this.handler=({event:e,payload:t})=>{var n,r;"add"===e&&t?(null===(r=(n=this.props).onChange)||void 0===r||r.call(n,t),this.latLngHandler(t.latLng,t.info,t.raw)):this.setState({search:!1})},this.div=leaflet.DomUtil.create("div","leaflet-search-wrap"),leaflet.DomEvent.disableClickPropagation(this.div),leaflet.DomEvent.disableScrollPropagation(this.div),this.state={search:!1,info:!1},this.SearchInfo=null,this.map=t.map||(null===(n=e.leaflet)||void 0===n?void 0:n.map),this.markerRef=React__default.createRef()}createLeafletElement(e){return new(leaflet.Control.extend({onAdd:e=>this.div,onRemove:e=>{}}))(e)}latLngHandler(e,t,n){this.SearchInfo={info:t,latLng:e,raw:n};const r=React__default.createElement("div",null,React__default.createElement("p",null,Array.isArray(t)?t.toString():t),React__default.createElement("div",{className:"search-control-popup-seperator"}),React__default.createElement("div",null,`latitude: ${e.lat}`),React__default.createElement("div",null,`longitude: ${e.lng}`));this.goToLatLng(e,r)}goToLatLng(e,t){this.setState({search:e,info:t},()=>{this.flyTo()})}flyTo(){if(this.state.search)switch(this.props.mapStateModifier){case"flyTo":this.map&&this.map.flyTo(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;case"setView":this.map&&this.map.setView(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;default:"function"==typeof this.props.mapStateModifier&&this.props.mapStateModifier(this.state.search)}}componentDidMount(){super.componentDidMount&&super.componentDidMount(),reactDom.render(React__default.createElement(SearchControl,Object.assign({className:this.props.className,provider:this.props.provider,customProvider:this.props.customProvider,providerOptions:this.props.providerOptions,openSearchOnLoad:this.props.openSearchOnLoad,closeResultsOnClick:this.props.closeResultsOnClick,inputPlaceholder:this.props.inputPlaceholder,search:this.props.search,map:this.map,handler:this.handler},void 0!==this.props.tabIndex?{tabIndex:this.props.tabIndex}:{})),this.div)}componentDidUpdate(){this.markerRef.current&&this.markerRef.current.leafletElement.openPopup()}defaultPopUp(){return React__default.createElement(reactLeaflet.Popup,null,React__default.createElement("span",null,this.state.info))}render(){return this.SearchInfo&&this.state.search?this.props.children?this.props.children(this.SearchInfo):this.props.showMarker?React__default.createElement(reactLeaflet.Marker,Object.assign({ref:this.markerRef,key:`marker-search-${this.state.search.toString()}`,position:this.state.search},this.props.markerIcon?{icon:this.props.markerIcon}:{}),this.props.showPopup&&(this.props.popUp?this.props.popUp(this.SearchInfo):this.defaultPopUp())):null:null}}ReactLeafletSearch.defaultProps={inputPlaceholder:"Search Lat,Lng",showMarker:!0,showPopup:!0,zoom:10,closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap",mapStateModifier:"flyTo",zoomPanOptions:{animate:!0,duration:.25,easeLinearity:.25,noMoveStart:!1}},module.exports=ReactLeafletSearch; +function __awaiter(e,t,n,r){return new(n||(n=Promise))((function(a,o){function i(e){try{u(r.next(e))}catch(e){o(e)}}function l(e){try{u(r.throw(e))}catch(e){o(e)}}function u(e){e.done?a(e.value):new n((function(t){t(e.value)})).then(i,l)}u((r=r.apply(e,t||[])).next())}))}class OpenStreetMap{constructor(e){let t="",n="";if(e&&e.searchBounds&&e.searchBounds.length){t=`&bounded=1&viewbox=${e.searchBounds.reduce((e,t)=>[...e,t.lng,t.lat],[]).join(",")}`}e&&"region"in e&&(n=`&countrycodes=${e.region}`),this.url=`https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&polygon_svg=1&namedetails=1${t}${n}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){const t=yield fetch(this.url+e),n=yield t.json();return this.formatResponse(n)}))}formatResponse(e){const t=e;return{info:e.length>0?t.map(e=>({bounds:e.boundingbox.map(e=>Number(e)),latitude:Number(e.lat),longitude:Number(e.lon),name:e.display_name})):"Not Found",raw:e}}}class BingMap{constructor(e){var t;this.key=null==e?void 0:e.providerKey;let n="";if(null===(t=null==e?void 0:e.searchBounds)||void 0===t?void 0:t.length){n=`&umv=${e.searchBounds.reduce((e,t)=>[...e,t.lat,t.lng],[]).join(",")}`}this.url=`https://dev.virtualearth.net/REST/v1/Locations?output=json${n}&key=${this.key}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){if(void 0===this.key)return{error:"BingMap requires an api key"};const t=yield fetch(this.url+e).then(e=>e.json());return this.formatResponse(t)}))}formatResponse(e){const t=e.resourceSets[0].resources;return{info:e.resourceSets[0].estimatedTotal>0?t.map(e=>({bounds:e.bbox.map(e=>Number(e)),latitude:Number(e.point.coordinates[0]),longitude:Number(e.point.coordinates[1]),name:e.name})):"Not Found",raw:e}}}var Providers={OpenStreetMap:OpenStreetMap,BingMap:BingMap};function asyncInputEvent(e,t,n=400){let r;return a=>{a.persist(),t&&t(a),clearTimeout(r),r=window.setTimeout(()=>{e(a)},n)}}const SearchInputCore=({placeholder:e="PlaceHolder",type:t="text",initialValue:n="",className:r="",debounceTime:a=400,getInputValueSetter:o=(()=>{}),onClick:i=(()=>{}),onDoubleClick:l=(()=>{}),onMouseDown:u=(()=>{}),onMouseEnter:s=(()=>{}),onMouseLeave:c=(()=>{}),onChange:f=(()=>{}),onChangeAsync:d=(()=>{}),onFocus:p=(()=>{}),onBlur:h=(()=>{}),onKeyUp:m=(()=>{}),onKeyDown:v=(()=>{}),onKeyPress:g=(()=>{}),onSubmit:y=(()=>{}),tabIndex:b=0},w)=>{const[k,T]=React__default.useState(n),x=React__default.useCallback((e,t)=>{t(e)},[]),E=React__default.useCallback(asyncInputEvent(e=>{e.preventDefault(),e.stopPropagation(),d(e)},e=>{e.preventDefault(),e.stopPropagation(),T(e.target.value),f(e)},a),[T]);return React__default.useLayoutEffect(()=>{o(T)},[T,o]),React__default.createElement("input",{tabIndex:b,ref:w,type:t,name:"SearchInput",value:k,placeholder:e,className:`search-input${r?` ${r}`:""}`,onClick:e=>x(e,i),onDoubleClick:e=>x(e,l),onMouseEnter:e=>x(e,s),onMouseLeave:e=>x(e,c),onMouseDown:e=>x(e,u),onChange:E,onFocus:e=>x(e,p),onBlur:e=>x(e,h),onKeyUp:e=>x(e,m),onKeyDown:e=>x(e,v),onKeyPress:e=>x(e,g),onSubmit:e=>x(e,y)})},SearchInput=React__default.forwardRef(SearchInputCore);function SearchCloseButton({className:e="",onClick:t=(e=>{e.preventDefault(),e.stopPropagation()})}){return React__default.createElement("button",{type:"button",className:`search-control-close-button${e?` ${e}`:""}`,onClick:t},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("path",{d:"M5 5 L45 45 M45 5 L5 45"}),"Sorry, your browser does not support inline SVG."))}function SearchIconButton({className:e="",onClick:t=(()=>{}),onMouseEnter:n=(()=>{}),onMouseLeave:r=(()=>{})}){return React__default.createElement("button",{className:`${e||""}`,onClick:t,onMouseEnter:n,onMouseLeave:r},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("line",{x1:"35",y1:"35",x2:"46",y2:"46"}),React__default.createElement("circle",{cx:"23",cy:"23",r:"16",fill:"none"}),"Sorry, your browser does not support inline SVG."))}const SearchInfoListItem=({value:e,className:t,candidate:n,onClick:r,onKeyDown:a,children:o})=>{const i=React__default.useRef(null);return React__default.useEffect(()=>{e===n&&i.current&&i.current.offsetParent&&i.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n,e]),React__default.createElement("li",{ref:i,value:e,className:t,onClick:r,onKeyDown:a},o)},SearchInfoListCore=(e,t)=>{const{handler:n,list:r,tabIndex:a,activeIndex:o}=e,[i,l]=React__default.useState(0),u=React__default.useCallback(e=>{if(Array.isArray(r)){e.stopPropagation(),9!==e.keyCode&&e.preventDefault();const t=r.length;if((t<=i||i<0||13!==e.keyCode)&&32!==e.keyCode){const n=t<=i||i<0?0:i;38===e.keyCode?l(0===n?r.length-1:n-1):40===e.keyCode&&l(n+1===r.length?0:n+1)}else n(r[i],r,i)}},[l,i,r,n]);return React__default.useLayoutEffect(()=>l(0),[r]),Array.isArray(r)?React__default.createElement("ul",Object.assign({ref:t},void 0!==a?{tabIndex:e.tabIndex}:{},{className:"search-control-info-list",onKeyDown:u}),r.map((e,t)=>React__default.createElement(SearchInfoListItem,{value:t,candidate:i,key:`${e.name}-${t}`,className:`search-control-info-list-item${t===o||e.checked?" active":""}${i===t?" candidate":""}`,onClick:()=>{l(t),n(e,r,t)},onKeyDown:u},e.name))):React__default.createElement("span",{className:"search-control-info-span"},r)};SearchInfoListCore.displayName="SearchInfoList";const SearchInfoList=React__default.forwardRef(SearchInfoListCore);class SearchControl extends React.Component{constructor(e){if(super(e),this.setLock=e=>{this.lock=e},this.openSearch=()=>{this.setState({open:!0},()=>{var e;null===(e=this.input.current)||void 0===e||e.focus()})},this.closeSearch=()=>{this.setState({open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},()=>{this.inputValueSetter(""),this.SearchResponseInfo="",this.props.handler&&this.props.handler({event:"remove"})})},this.searchIconButtonOnClick=e=>{e.preventDefault(),e.stopPropagation(),this.state.open?this.closeSearch():this.openSearch()},this.inputBlur=e=>{var t;""===(null===(t=this.input.current)||void 0===t?void 0:t.value)&&!this.lock&&this.closeSearch()},this.inputClick=e=>{var t,n,r;null===(t=this.input.current)||void 0===t||t.focus(),(null===(n=this.input.current)||void 0===n?void 0:n.value.startsWith(":"))||null===this.lastInfo||""===this.lastInfo||""===(null===(r=this.input.current)||void 0===r?void 0:r.value)||(this.SearchResponseInfo=this.lastInfo,this.lastInfo=null,this.setState({showInfo:!0}))},this.inputKeyUp=e=>{13===e.keyCode&&this.beautifyValue(this.input.current.value)},this.closeClick=e=>{e.preventDefault(),e.stopPropagation(),this.closeSearch()},this.sendToAction=e=>__awaiter(this,void 0,void 0,(function*(){if(!this.input.current.value.startsWith(":"))if(Object.prototype.hasOwnProperty.call(this.responseCache,this.input.current.value))this.showInfo(this.responseCache[this.input.current.value].info);else if(this.input.current.value.length>=3){this.showInfo("Searching...");const e=this.input.current.value,t=yield this.provider.search(e);if(t.error)return!1;this.responseCache[e]=t,this.showInfo(t.info)}})),this.syncInput=()=>{var e,t;!this.state.closeButton&&this.setState({closeButton:!0}),""===(null===(e=this.input.current)||void 0===e?void 0:e.value)&&(this.hideInfo(),this.state.closeButton&&this.setState({closeButton:!1})),null===(t=this.input.current)||void 0===t||t.value.startsWith(":")},this.listItemClick=(e,t,n)=>{this.showInfo(t,n),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(e.latitude),Number(e.longitude)),info:e.name,raw:this.responseCache[this.input.current.value].raw}}),this.props.closeResultsOnClick&&this.hideInfo()},this.setMaxHeight=()=>{const e=this.props.map?this.props.map.getContainer().getBoundingClientRect():document.body.getBoundingClientRect(),t=this.input.current.getBoundingClientRect(),n=`${Math.floor(.6*(e.bottom-t.bottom-10))}px`;this.selectbox.current&&this.selectbox.current.style&&(this.selectbox.current.style.maxHeight=n)},this.state={open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},this.SearchResponseInfo="",this.responseCache={},this.lastInfo=null,this.inputValueSetter=()=>{},this.selectbox=React.createRef(),this.div=React.createRef(),this.input=React.createRef(),this.props.customProvider)this.provider=this.props.customProvider;else{if(!this.props.provider||!Object.keys(Providers).includes(this.props.provider))throw new Error(`You set the provider prop to ${this.props.provider} but that isn't recognised. You can choose from ${Object.keys(Providers).join(", ")}`);{const e=Providers[this.props.provider];this.provider=new e(this.props.providerOptions)}}}beautifyValue(e){if(e.startsWith(":")){const t=e.slice(1).split(",").filter(e=>!isNaN(Number(e))).map(e=>Number(e||0));t.length<=1?this.showInfo("Please enter a valid lat, lng"):(this.hideInfo(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(t[0]),Number(t[1])),info:t.join(","),raw:t.join(",")}}))}else if(this.input.current.value.length<3){const e='Please enter a valid lat,lng starting with ":" or minimum 3 character to search';this.showInfo(e)}}hideInfo(){this.lastInfo=this.SearchResponseInfo,this.SearchResponseInfo="",this.setState({showInfo:!1})}showInfo(e,t){var n;this.SearchResponseInfo=React.createElement(SearchInfoList,{ref:this.selectbox,activeIndex:t,list:e,handler:this.listItemClick,tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex+1:2}),(null===(n=this.input.current)||void 0===n?void 0:n.value)&&this.setState({showInfo:!0})}componentDidMount(){if(this.setMaxHeight(),this.props.search&&!isNaN(Number(this.props.search.lat))&&!isNaN(Number(this.props.search.lng))){const e=`:${this.props.search.lat},${this.props.search.lng}`;this.inputValueSetter(e),this.openSearch(),this.syncInput(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(this.props.search.lat),Number(this.props.search.lng)),info:e,raw:this.props.search}})}}componentDidUpdate(){this.setMaxHeight(),this.state.showInfo}render(){return React.createElement("article",{className:`${this.props.className?`${this.props.className} `:""}search-control-wrap`},React.createElement("section",{className:`search-control${this.state.open?" search-control-active":""}`},React.createElement(SearchIconButton,{className:"search-control-icon-button",onClick:this.searchIconButtonOnClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1)}),React.createElement(SearchInput,{tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex:1,ref:this.input,getInputValueSetter:e=>this.inputValueSetter=e,className:"search-control-input",placeholder:this.props.inputPlaceholder,onClick:this.inputClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1),onChange:this.syncInput,onChangeAsync:this.sendToAction,onBlur:this.inputBlur,onKeyUp:this.inputKeyUp,onKeyPress:e=>{e.stopPropagation(),40===e.keyCode&&e.preventDefault()},onKeyDown:e=>{var t;40===e.keyCode&&(e.preventDefault(),e.stopPropagation(),null===(t=this.selectbox.current)||void 0===t||t.focus())},onSubmit:e=>e.preventDefault()}),React.createElement(SearchCloseButton,{className:this.state.closeButton?" search-control-close-button-active":"",onClick:this.closeClick})),React.createElement("section",{className:`search-control-info-wrapper${this.state.showInfo?"":" search-control-info-wrapper-close"}`},React.createElement("section",{ref:this.div,className:"search-control-info"},this.state.showInfo&&this.SearchResponseInfo)))}}SearchControl.propTypes={provider:PropTypes.string,providerKey:PropTypes.string,inputPlaceholder:PropTypes.string,coords:PropTypes.arrayOf(PropTypes.number),closeResultsOnClick:PropTypes.bool,openSearchOnLoad:PropTypes.bool,searchBounds:PropTypes.array,providerOptions:PropTypes.object},SearchControl.defaultProps={inputPlaceholder:"Search Lat,Lng",closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap"};class ReactLeafletSearch extends reactLeaflet.MapControl{constructor(e,t){var n;super(e),this.handler=({event:e,payload:t})=>{var n,r;"add"===e&&t?(null===(r=(n=this.props).onChange)||void 0===r||r.call(n,t),this.latLngHandler(t.latLng,t.info,t.raw)):this.setState({search:!1})},this.div=leaflet.DomUtil.create("div","leaflet-search-wrap"),leaflet.DomEvent.disableClickPropagation(this.div),leaflet.DomEvent.disableScrollPropagation(this.div),this.state={search:!1,info:!1},this.SearchInfo=null,this.map=t.map||(null===(n=e.leaflet)||void 0===n?void 0:n.map),this.markerRef=React__default.createRef()}createLeafletElement(e){return new(leaflet.Control.extend({onAdd:e=>this.div,onRemove:e=>{}}))(e)}latLngHandler(e,t,n){this.SearchInfo={info:t,latLng:e,raw:n};const r=React__default.createElement("div",null,React__default.createElement("p",null,Array.isArray(t)?t.toString():t),React__default.createElement("div",{className:"search-control-popup-seperator"}),React__default.createElement("div",null,`latitude: ${e.lat}`),React__default.createElement("div",null,`longitude: ${e.lng}`));this.goToLatLng(e,r)}goToLatLng(e,t){this.setState({search:e,info:t},()=>{this.flyTo()})}flyTo(){if(this.state.search)switch(this.props.mapStateModifier){case"flyTo":this.map&&this.map.flyTo(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;case"setView":this.map&&this.map.setView(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;default:"function"==typeof this.props.mapStateModifier&&this.props.mapStateModifier(this.state.search)}}componentDidMount(){super.componentDidMount&&super.componentDidMount(),reactDom.render(React__default.createElement(SearchControl,Object.assign({className:this.props.className,provider:this.props.provider,customProvider:this.props.customProvider,providerOptions:this.props.providerOptions,openSearchOnLoad:this.props.openSearchOnLoad,closeResultsOnClick:this.props.closeResultsOnClick,inputPlaceholder:this.props.inputPlaceholder,search:this.props.search,map:this.map,handler:this.handler},void 0!==this.props.tabIndex?{tabIndex:this.props.tabIndex}:{})),this.div)}componentDidUpdate(){this.markerRef.current&&this.markerRef.current.leafletElement.openPopup()}defaultPopUp(){return React__default.createElement(reactLeaflet.Popup,null,React__default.createElement("span",null,this.state.info))}render(){return this.SearchInfo&&this.state.search?this.props.children?this.props.children(this.SearchInfo):this.props.showMarker?React__default.createElement(reactLeaflet.Marker,Object.assign({ref:this.markerRef,key:`marker-search-${this.state.search.toString()}`,position:this.state.search},this.props.markerIcon?{icon:this.props.markerIcon}:{}),this.props.showPopup&&(this.props.popUp?this.props.popUp(this.SearchInfo):this.defaultPopUp())):null:null}}ReactLeafletSearch.defaultProps={inputPlaceholder:"Search Lat,Lng",showMarker:!0,showPopup:!0,zoom:10,closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap",mapStateModifier:"flyTo",zoomPanOptions:{animate:!0,duration:.25,easeLinearity:.25,noMoveStart:!1}},module.exports=ReactLeafletSearch; diff --git a/cjs/v2/index.js b/cjs/v2/index.js index 65c9d91..0eb3616 100644 --- a/cjs/v2/index.js +++ b/cjs/v2/index.js @@ -31,4 +31,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */ -function __awaiter(e,t,n,r){return new(n||(n=Promise))((function(a,o){function i(e){try{u(r.next(e))}catch(e){o(e)}}function l(e){try{u(r.throw(e))}catch(e){o(e)}}function u(e){e.done?a(e.value):new n((function(t){t(e.value)})).then(i,l)}u((r=r.apply(e,t||[])).next())}))}class OpenStreetMap{constructor(e){let t="",n="";if(e&&e.searchBounds&&e.searchBounds.length){t=`&bounded=1&viewbox=${e.searchBounds.reduce((e,t)=>[...e,t.lng,t.lat],[]).join(",")}`}e&&"region"in e&&(n=`&countrycodes=${e.region}`),this.url=`https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&polygon_svg=1&namedetails=1${t}${n}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){const t=yield fetch(this.url+e),n=yield t.json();return this.formatResponse(n)}))}formatResponse(e){const t=e;return{info:e.length>0?t.map(e=>({bounds:e.boundingbox.map(e=>Number(e)),latitude:Number(e.lat),longitude:Number(e.lon),name:e.display_name})):"Not Found",raw:e}}}class BingMap{constructor(e){var t;this.key=null==e?void 0:e.providerKey;let n="";if(null===(t=null==e?void 0:e.searchBounds)||void 0===t?void 0:t.length){n=`&umv=${e.searchBounds.reduce((e,t)=>[...e,t.lat,t.lng],[]).join(",")}`}this.url=`https://dev.virtualearth.net/REST/v1/Locations?output=json${n}&key=${this.key}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){if(void 0===this.key)return{error:"BingMap requires an api key"};const t=yield fetch(this.url+e).then(e=>e.json());return this.formatResponse(t)}))}formatResponse(e){const t=e.resourceSets[0].resources;return{info:e.resourceSets[0].estimatedTotal>0?t.map(e=>({bounds:e.bbox.map(e=>Number(e)),latitude:Number(e.point.coordinates[0]),longitude:Number(e.point.coordinates[1]),name:e.name})):"Not Found",raw:e}}}var Providers={OpenStreetMap:OpenStreetMap,BingMap:BingMap};function asyncInputEvent(e,t,n=400){let r;return a=>{a.persist(),t&&t(a),clearTimeout(r),r=window.setTimeout(()=>{e(a)},n)}}const SearchInputCore=({placeholder:e="PlaceHolder",type:t="text",initialValue:n="",className:r="",debounceTime:a=400,getInputValueSetter:o=(()=>{}),onClick:i=(()=>{}),onDoubleClick:l=(()=>{}),onMouseDown:u=(()=>{}),onMouseEnter:s=(()=>{}),onMouseLeave:c=(()=>{}),onChange:f=(()=>{}),onChangeAsync:d=(()=>{}),onFocus:p=(()=>{}),onBlur:h=(()=>{}),onKeyUp:m=(()=>{}),onKeyDown:v=(()=>{}),onKeyPress:g=(()=>{}),onSubmit:y=(()=>{}),tabIndex:b=0},w)=>{const[k,T]=React__default.useState(n),x=React__default.useCallback((e,t)=>{t(e)},[]),E=React__default.useCallback(asyncInputEvent(e=>{e.preventDefault(),e.stopPropagation(),d(e)},e=>{e.preventDefault(),e.stopPropagation(),T(e.target.value),f(e)},a),[T]);return React__default.useLayoutEffect(()=>{o(T)},[T,o]),React__default.createElement("input",{tabIndex:b,ref:w,type:t,name:"SearchInput",value:k,placeholder:e,className:`search-input${r?` ${r}`:""}`,onClick:e=>x(e,i),onDoubleClick:e=>x(e,l),onMouseEnter:e=>x(e,s),onMouseLeave:e=>x(e,c),onMouseDown:e=>x(e,u),onChange:E,onFocus:e=>x(e,p),onBlur:e=>x(e,h),onKeyUp:e=>x(e,m),onKeyDown:e=>x(e,v),onKeyPress:e=>x(e,g),onSubmit:e=>x(e,y)})},SearchInput=React__default.forwardRef(SearchInputCore);function SearchCloseButton({className:e="",onClick:t=(e=>{e.preventDefault(),e.stopPropagation()})}){return React__default.createElement("button",{className:`search-control-close-button${e?` ${e}`:""}`,onClick:t},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("path",{d:"M5 5 L45 45 M45 5 L5 45"}),"Sorry, your browser does not support inline SVG."))}function SearchIconButton({className:e="",onClick:t=(()=>{}),onMouseEnter:n=(()=>{}),onMouseLeave:r=(()=>{})}){return React__default.createElement("button",{className:`${e||""}`,onClick:t,onMouseEnter:n,onMouseLeave:r},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("line",{x1:"35",y1:"35",x2:"46",y2:"46"}),React__default.createElement("circle",{cx:"23",cy:"23",r:"16",fill:"none"}),"Sorry, your browser does not support inline SVG."))}const SearchInfoListItem=({value:e,className:t,candidate:n,onClick:r,onKeyDown:a,children:o})=>{const i=React__default.useRef(null);return React__default.useEffect(()=>{e===n&&i.current&&i.current.offsetParent&&i.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n,e]),React__default.createElement("li",{ref:i,value:e,className:t,onClick:r,onKeyDown:a},o)},SearchInfoListCore=(e,t)=>{const{handler:n,list:r,tabIndex:a,activeIndex:o}=e,[i,l]=React__default.useState(0),u=React__default.useCallback(e=>{if(Array.isArray(r)){e.stopPropagation(),9!==e.keyCode&&e.preventDefault();const t=r.length;if((t<=i||i<0||13!==e.keyCode)&&32!==e.keyCode){const n=t<=i||i<0?0:i;38===e.keyCode?l(0===n?r.length-1:n-1):40===e.keyCode&&l(n+1===r.length?0:n+1)}else n(r[i],r,i)}},[l,i,r,n]);return React__default.useLayoutEffect(()=>l(0),[r]),Array.isArray(r)?React__default.createElement("ul",Object.assign({ref:t},void 0!==a?{tabIndex:e.tabIndex}:{},{className:"search-control-info-list",onKeyDown:u}),r.map((e,t)=>React__default.createElement(SearchInfoListItem,{value:t,candidate:i,key:`${e.name}-${t}`,className:`search-control-info-list-item${t===o||e.checked?" active":""}${i===t?" candidate":""}`,onClick:()=>{l(t),n(e,r,t)},onKeyDown:u},e.name))):React__default.createElement("span",{className:"search-control-info-span"},r)};SearchInfoListCore.displayName="SearchInfoList";const SearchInfoList=React__default.forwardRef(SearchInfoListCore);class SearchControl extends React.Component{constructor(e){if(super(e),this.setLock=e=>{this.lock=e},this.openSearch=()=>{this.setState({open:!0},()=>{var e;null===(e=this.input.current)||void 0===e||e.focus()})},this.closeSearch=()=>{this.setState({open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},()=>{this.inputValueSetter(""),this.SearchResponseInfo="",this.props.handler&&this.props.handler({event:"remove"})})},this.searchIconButtonOnClick=e=>{e.preventDefault(),e.stopPropagation(),this.state.open?this.closeSearch():this.openSearch()},this.inputBlur=e=>{var t;""===(null===(t=this.input.current)||void 0===t?void 0:t.value)&&!this.lock&&this.closeSearch()},this.inputClick=e=>{var t,n,r;null===(t=this.input.current)||void 0===t||t.focus(),(null===(n=this.input.current)||void 0===n?void 0:n.value.startsWith(":"))||null===this.lastInfo||""===this.lastInfo||""===(null===(r=this.input.current)||void 0===r?void 0:r.value)||(this.SearchResponseInfo=this.lastInfo,this.lastInfo=null,this.setState({showInfo:!0}))},this.inputKeyUp=e=>{13===e.keyCode&&this.beautifyValue(this.input.current.value)},this.closeClick=e=>{this.closeSearch()},this.sendToAction=e=>__awaiter(this,void 0,void 0,(function*(){if(!this.input.current.value.startsWith(":"))if(Object.prototype.hasOwnProperty.call(this.responseCache,this.input.current.value))this.showInfo(this.responseCache[this.input.current.value].info);else if(this.input.current.value.length>=3){this.showInfo("Searching...");const e=this.input.current.value,t=yield this.provider.search(e);if(t.error)return!1;this.responseCache[e]=t,this.showInfo(t.info)}})),this.syncInput=()=>{var e,t;!this.state.closeButton&&this.setState({closeButton:!0}),""===(null===(e=this.input.current)||void 0===e?void 0:e.value)&&(this.hideInfo(),this.state.closeButton&&this.setState({closeButton:!1})),null===(t=this.input.current)||void 0===t||t.value.startsWith(":")},this.listItemClick=(e,t,n)=>{this.showInfo(t,n),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(e.latitude),Number(e.longitude)),info:e.name,raw:this.responseCache[this.input.current.value].raw}}),this.props.closeResultsOnClick&&this.hideInfo()},this.setMaxHeight=()=>{const e=this.props.map?this.props.map.getContainer().getBoundingClientRect():document.body.getBoundingClientRect(),t=this.input.current.getBoundingClientRect(),n=`${Math.floor(.6*(e.bottom-t.bottom-10))}px`;this.selectbox.current&&this.selectbox.current.style&&(this.selectbox.current.style.maxHeight=n)},this.state={open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},this.SearchResponseInfo="",this.responseCache={},this.lastInfo=null,this.inputValueSetter=()=>{},this.selectbox=React.createRef(),this.div=React.createRef(),this.input=React.createRef(),this.props.customProvider)this.provider=this.props.customProvider;else{if(!this.props.provider||!Object.keys(Providers).includes(this.props.provider))throw new Error(`You set the provider prop to ${this.props.provider} but that isn't recognised. You can choose from ${Object.keys(Providers).join(", ")}`);{const e=Providers[this.props.provider];this.provider=new e(this.props.providerOptions)}}}beautifyValue(e){if(e.startsWith(":")){const t=e.slice(1).split(",").filter(e=>!isNaN(Number(e))).map(e=>Number(e||0));t.length<=1?this.showInfo("Please enter a valid lat, lng"):(this.hideInfo(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(t[0]),Number(t[1])),info:t.join(","),raw:t.join(",")}}))}else if(this.input.current.value.length<3){const e='Please enter a valid lat,lng starting with ":" or minimum 3 character to search';this.showInfo(e)}}hideInfo(){this.lastInfo=this.SearchResponseInfo,this.SearchResponseInfo="",this.setState({showInfo:!1})}showInfo(e,t){var n;this.SearchResponseInfo=React.createElement(SearchInfoList,{ref:this.selectbox,activeIndex:t,list:e,handler:this.listItemClick,tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex+1:2}),(null===(n=this.input.current)||void 0===n?void 0:n.value)&&this.setState({showInfo:!0})}componentDidMount(){if(this.setMaxHeight(),this.props.search&&!isNaN(Number(this.props.search.lat))&&!isNaN(Number(this.props.search.lng))){const e=`:${this.props.search.lat},${this.props.search.lng}`;this.inputValueSetter(e),this.openSearch(),this.syncInput(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(this.props.search.lat),Number(this.props.search.lng)),info:e,raw:this.props.search}})}}componentDidUpdate(){this.setMaxHeight(),this.state.showInfo}render(){return React.createElement("article",{className:`${this.props.className?`${this.props.className} `:""}search-control-wrap`},React.createElement("section",{className:`search-control${this.state.open?" search-control-active":""}`},React.createElement(SearchIconButton,{className:"search-control-icon-button",onClick:this.searchIconButtonOnClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1)}),React.createElement(SearchInput,{tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex:1,ref:this.input,getInputValueSetter:e=>this.inputValueSetter=e,className:"search-control-input",placeholder:this.props.inputPlaceholder,onClick:this.inputClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1),onChange:this.syncInput,onChangeAsync:this.sendToAction,onBlur:this.inputBlur,onKeyUp:this.inputKeyUp,onKeyPress:e=>{e.stopPropagation(),40===e.keyCode&&e.preventDefault()},onKeyDown:e=>{var t;40===e.keyCode&&(e.preventDefault(),e.stopPropagation(),null===(t=this.selectbox.current)||void 0===t||t.focus())},onSubmit:e=>e.preventDefault()}),React.createElement(SearchCloseButton,{className:this.state.closeButton?" search-control-close-button-active":"",onClick:this.closeClick})),React.createElement("section",{className:`search-control-info-wrapper${this.state.showInfo?"":" search-control-info-wrapper-close"}`},React.createElement("section",{ref:this.div,className:"search-control-info"},this.state.showInfo&&this.SearchResponseInfo)))}}SearchControl.propTypes={provider:PropTypes.string,providerKey:PropTypes.string,inputPlaceholder:PropTypes.string,coords:PropTypes.arrayOf(PropTypes.number),closeResultsOnClick:PropTypes.bool,openSearchOnLoad:PropTypes.bool,searchBounds:PropTypes.array,providerOptions:PropTypes.object},SearchControl.defaultProps={inputPlaceholder:"Search Lat,Lng",closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap"};class ReactLeafletSearch extends reactLeaflet.MapControl{constructor(e,t){var n;super(e),this.handler=({event:e,payload:t})=>{var n,r;"add"===e&&t?(null===(r=(n=this.props).onChange)||void 0===r||r.call(n,t),this.latLngHandler(t.latLng,t.info,t.raw)):this.setState({search:!1})},this.div=leaflet.DomUtil.create("div","leaflet-search-wrap"),leaflet.DomEvent.disableClickPropagation(this.div),leaflet.DomEvent.disableScrollPropagation(this.div),this.state={search:!1,info:!1},this.SearchInfo=null,this.map=t.map||(null===(n=e.leaflet)||void 0===n?void 0:n.map),this.markerRef=React__default.createRef()}createLeafletElement(e){return new(leaflet.Control.extend({onAdd:e=>this.div,onRemove:e=>{}}))(e)}latLngHandler(e,t,n){this.SearchInfo={info:t,latLng:e,raw:n};const r=React__default.createElement("div",null,React__default.createElement("p",null,Array.isArray(t)?t.toString():t),React__default.createElement("div",{className:"search-control-popup-seperator"}),React__default.createElement("div",null,`latitude: ${e.lat}`),React__default.createElement("div",null,`longitude: ${e.lng}`));this.goToLatLng(e,r)}goToLatLng(e,t){this.setState({search:e,info:t},()=>{this.flyTo()})}flyTo(){if(this.state.search)switch(this.props.mapStateModifier){case"flyTo":this.map&&this.map.flyTo(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;case"setView":this.map&&this.map.setView(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;default:"function"==typeof this.props.mapStateModifier&&this.props.mapStateModifier(this.state.search)}}componentDidMount(){super.componentDidMount&&super.componentDidMount(),reactDom.render(React__default.createElement(SearchControl,Object.assign({className:this.props.className,provider:this.props.provider,customProvider:this.props.customProvider,providerOptions:this.props.providerOptions,openSearchOnLoad:this.props.openSearchOnLoad,closeResultsOnClick:this.props.closeResultsOnClick,inputPlaceholder:this.props.inputPlaceholder,search:this.props.search,map:this.map,handler:this.handler},void 0!==this.props.tabIndex?{tabIndex:this.props.tabIndex}:{})),this.div)}componentDidUpdate(){this.markerRef.current&&this.markerRef.current.leafletElement.openPopup()}defaultPopUp(){return React__default.createElement(reactLeaflet.Popup,null,React__default.createElement("span",null,this.state.info))}render(){return this.SearchInfo&&this.state.search?this.props.children?this.props.children(this.SearchInfo):this.props.showMarker?React__default.createElement(reactLeaflet.Marker,Object.assign({ref:this.markerRef,key:`marker-search-${this.state.search.toString()}`,position:this.state.search},this.props.markerIcon?{icon:this.props.markerIcon}:{}),this.props.showPopup&&(this.props.popUp?this.props.popUp(this.SearchInfo):this.defaultPopUp())):null:null}}ReactLeafletSearch.defaultProps={inputPlaceholder:"Search Lat,Lng",showMarker:!0,showPopup:!0,zoom:10,closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap",mapStateModifier:"flyTo",zoomPanOptions:{animate:!0,duration:.25,easeLinearity:.25,noMoveStart:!1}};var SearchV2=reactLeaflet.withLeaflet(ReactLeafletSearch);module.exports=SearchV2; +function __awaiter(e,t,n,r){return new(n||(n=Promise))((function(a,o){function i(e){try{u(r.next(e))}catch(e){o(e)}}function l(e){try{u(r.throw(e))}catch(e){o(e)}}function u(e){e.done?a(e.value):new n((function(t){t(e.value)})).then(i,l)}u((r=r.apply(e,t||[])).next())}))}class OpenStreetMap{constructor(e){let t="",n="";if(e&&e.searchBounds&&e.searchBounds.length){t=`&bounded=1&viewbox=${e.searchBounds.reduce((e,t)=>[...e,t.lng,t.lat],[]).join(",")}`}e&&"region"in e&&(n=`&countrycodes=${e.region}`),this.url=`https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&polygon_svg=1&namedetails=1${t}${n}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){const t=yield fetch(this.url+e),n=yield t.json();return this.formatResponse(n)}))}formatResponse(e){const t=e;return{info:e.length>0?t.map(e=>({bounds:e.boundingbox.map(e=>Number(e)),latitude:Number(e.lat),longitude:Number(e.lon),name:e.display_name})):"Not Found",raw:e}}}class BingMap{constructor(e){var t;this.key=null==e?void 0:e.providerKey;let n="";if(null===(t=null==e?void 0:e.searchBounds)||void 0===t?void 0:t.length){n=`&umv=${e.searchBounds.reduce((e,t)=>[...e,t.lat,t.lng],[]).join(",")}`}this.url=`https://dev.virtualearth.net/REST/v1/Locations?output=json${n}&key=${this.key}&q=`}search(e){return __awaiter(this,void 0,void 0,(function*(){if(void 0===this.key)return{error:"BingMap requires an api key"};const t=yield fetch(this.url+e).then(e=>e.json());return this.formatResponse(t)}))}formatResponse(e){const t=e.resourceSets[0].resources;return{info:e.resourceSets[0].estimatedTotal>0?t.map(e=>({bounds:e.bbox.map(e=>Number(e)),latitude:Number(e.point.coordinates[0]),longitude:Number(e.point.coordinates[1]),name:e.name})):"Not Found",raw:e}}}var Providers={OpenStreetMap:OpenStreetMap,BingMap:BingMap};function asyncInputEvent(e,t,n=400){let r;return a=>{a.persist(),t&&t(a),clearTimeout(r),r=window.setTimeout(()=>{e(a)},n)}}const SearchInputCore=({placeholder:e="PlaceHolder",type:t="text",initialValue:n="",className:r="",debounceTime:a=400,getInputValueSetter:o=(()=>{}),onClick:i=(()=>{}),onDoubleClick:l=(()=>{}),onMouseDown:u=(()=>{}),onMouseEnter:s=(()=>{}),onMouseLeave:c=(()=>{}),onChange:f=(()=>{}),onChangeAsync:d=(()=>{}),onFocus:p=(()=>{}),onBlur:h=(()=>{}),onKeyUp:m=(()=>{}),onKeyDown:v=(()=>{}),onKeyPress:g=(()=>{}),onSubmit:y=(()=>{}),tabIndex:b=0},w)=>{const[k,T]=React__default.useState(n),x=React__default.useCallback((e,t)=>{t(e)},[]),E=React__default.useCallback(asyncInputEvent(e=>{e.preventDefault(),e.stopPropagation(),d(e)},e=>{e.preventDefault(),e.stopPropagation(),T(e.target.value),f(e)},a),[T]);return React__default.useLayoutEffect(()=>{o(T)},[T,o]),React__default.createElement("input",{tabIndex:b,ref:w,type:t,name:"SearchInput",value:k,placeholder:e,className:`search-input${r?` ${r}`:""}`,onClick:e=>x(e,i),onDoubleClick:e=>x(e,l),onMouseEnter:e=>x(e,s),onMouseLeave:e=>x(e,c),onMouseDown:e=>x(e,u),onChange:E,onFocus:e=>x(e,p),onBlur:e=>x(e,h),onKeyUp:e=>x(e,m),onKeyDown:e=>x(e,v),onKeyPress:e=>x(e,g),onSubmit:e=>x(e,y)})},SearchInput=React__default.forwardRef(SearchInputCore);function SearchCloseButton({className:e="",onClick:t=(e=>{e.preventDefault(),e.stopPropagation()})}){return React__default.createElement("button",{type:"button",className:`search-control-close-button${e?` ${e}`:""}`,onClick:t},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("path",{d:"M5 5 L45 45 M45 5 L5 45"}),"Sorry, your browser does not support inline SVG."))}function SearchIconButton({className:e="",onClick:t=(()=>{}),onMouseEnter:n=(()=>{}),onMouseLeave:r=(()=>{})}){return React__default.createElement("button",{className:`${e||""}`,onClick:t,onMouseEnter:n,onMouseLeave:r},React__default.createElement("svg",{viewBox:"0 0 50 50"},React__default.createElement("line",{x1:"35",y1:"35",x2:"46",y2:"46"}),React__default.createElement("circle",{cx:"23",cy:"23",r:"16",fill:"none"}),"Sorry, your browser does not support inline SVG."))}const SearchInfoListItem=({value:e,className:t,candidate:n,onClick:r,onKeyDown:a,children:o})=>{const i=React__default.useRef(null);return React__default.useEffect(()=>{e===n&&i.current&&i.current.offsetParent&&i.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n,e]),React__default.createElement("li",{ref:i,value:e,className:t,onClick:r,onKeyDown:a},o)},SearchInfoListCore=(e,t)=>{const{handler:n,list:r,tabIndex:a,activeIndex:o}=e,[i,l]=React__default.useState(0),u=React__default.useCallback(e=>{if(Array.isArray(r)){e.stopPropagation(),9!==e.keyCode&&e.preventDefault();const t=r.length;if((t<=i||i<0||13!==e.keyCode)&&32!==e.keyCode){const n=t<=i||i<0?0:i;38===e.keyCode?l(0===n?r.length-1:n-1):40===e.keyCode&&l(n+1===r.length?0:n+1)}else n(r[i],r,i)}},[l,i,r,n]);return React__default.useLayoutEffect(()=>l(0),[r]),Array.isArray(r)?React__default.createElement("ul",Object.assign({ref:t},void 0!==a?{tabIndex:e.tabIndex}:{},{className:"search-control-info-list",onKeyDown:u}),r.map((e,t)=>React__default.createElement(SearchInfoListItem,{value:t,candidate:i,key:`${e.name}-${t}`,className:`search-control-info-list-item${t===o||e.checked?" active":""}${i===t?" candidate":""}`,onClick:()=>{l(t),n(e,r,t)},onKeyDown:u},e.name))):React__default.createElement("span",{className:"search-control-info-span"},r)};SearchInfoListCore.displayName="SearchInfoList";const SearchInfoList=React__default.forwardRef(SearchInfoListCore);class SearchControl extends React.Component{constructor(e){if(super(e),this.setLock=e=>{this.lock=e},this.openSearch=()=>{this.setState({open:!0},()=>{var e;null===(e=this.input.current)||void 0===e||e.focus()})},this.closeSearch=()=>{this.setState({open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},()=>{this.inputValueSetter(""),this.SearchResponseInfo="",this.props.handler&&this.props.handler({event:"remove"})})},this.searchIconButtonOnClick=e=>{e.preventDefault(),e.stopPropagation(),this.state.open?this.closeSearch():this.openSearch()},this.inputBlur=e=>{var t;""===(null===(t=this.input.current)||void 0===t?void 0:t.value)&&!this.lock&&this.closeSearch()},this.inputClick=e=>{var t,n,r;null===(t=this.input.current)||void 0===t||t.focus(),(null===(n=this.input.current)||void 0===n?void 0:n.value.startsWith(":"))||null===this.lastInfo||""===this.lastInfo||""===(null===(r=this.input.current)||void 0===r?void 0:r.value)||(this.SearchResponseInfo=this.lastInfo,this.lastInfo=null,this.setState({showInfo:!0}))},this.inputKeyUp=e=>{13===e.keyCode&&this.beautifyValue(this.input.current.value)},this.closeClick=e=>{e.preventDefault(),e.stopPropagation(),this.closeSearch()},this.sendToAction=e=>__awaiter(this,void 0,void 0,(function*(){if(!this.input.current.value.startsWith(":"))if(Object.prototype.hasOwnProperty.call(this.responseCache,this.input.current.value))this.showInfo(this.responseCache[this.input.current.value].info);else if(this.input.current.value.length>=3){this.showInfo("Searching...");const e=this.input.current.value,t=yield this.provider.search(e);if(t.error)return!1;this.responseCache[e]=t,this.showInfo(t.info)}})),this.syncInput=()=>{var e,t;!this.state.closeButton&&this.setState({closeButton:!0}),""===(null===(e=this.input.current)||void 0===e?void 0:e.value)&&(this.hideInfo(),this.state.closeButton&&this.setState({closeButton:!1})),null===(t=this.input.current)||void 0===t||t.value.startsWith(":")},this.listItemClick=(e,t,n)=>{this.showInfo(t,n),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(e.latitude),Number(e.longitude)),info:e.name,raw:this.responseCache[this.input.current.value].raw}}),this.props.closeResultsOnClick&&this.hideInfo()},this.setMaxHeight=()=>{const e=this.props.map?this.props.map.getContainer().getBoundingClientRect():document.body.getBoundingClientRect(),t=this.input.current.getBoundingClientRect(),n=`${Math.floor(.6*(e.bottom-t.bottom-10))}px`;this.selectbox.current&&this.selectbox.current.style&&(this.selectbox.current.style.maxHeight=n)},this.state={open:this.props.openSearchOnLoad,closeButton:!1,showInfo:!1},this.SearchResponseInfo="",this.responseCache={},this.lastInfo=null,this.inputValueSetter=()=>{},this.selectbox=React.createRef(),this.div=React.createRef(),this.input=React.createRef(),this.props.customProvider)this.provider=this.props.customProvider;else{if(!this.props.provider||!Object.keys(Providers).includes(this.props.provider))throw new Error(`You set the provider prop to ${this.props.provider} but that isn't recognised. You can choose from ${Object.keys(Providers).join(", ")}`);{const e=Providers[this.props.provider];this.provider=new e(this.props.providerOptions)}}}beautifyValue(e){if(e.startsWith(":")){const t=e.slice(1).split(",").filter(e=>!isNaN(Number(e))).map(e=>Number(e||0));t.length<=1?this.showInfo("Please enter a valid lat, lng"):(this.hideInfo(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(t[0]),Number(t[1])),info:t.join(","),raw:t.join(",")}}))}else if(this.input.current.value.length<3){const e='Please enter a valid lat,lng starting with ":" or minimum 3 character to search';this.showInfo(e)}}hideInfo(){this.lastInfo=this.SearchResponseInfo,this.SearchResponseInfo="",this.setState({showInfo:!1})}showInfo(e,t){var n;this.SearchResponseInfo=React.createElement(SearchInfoList,{ref:this.selectbox,activeIndex:t,list:e,handler:this.listItemClick,tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex+1:2}),(null===(n=this.input.current)||void 0===n?void 0:n.value)&&this.setState({showInfo:!0})}componentDidMount(){if(this.setMaxHeight(),this.props.search&&!isNaN(Number(this.props.search.lat))&&!isNaN(Number(this.props.search.lng))){const e=`:${this.props.search.lat},${this.props.search.lng}`;this.inputValueSetter(e),this.openSearch(),this.syncInput(),this.props.handler&&this.props.handler({event:"add",payload:{latLng:new leaflet.LatLng(Number(this.props.search.lat),Number(this.props.search.lng)),info:e,raw:this.props.search}})}}componentDidUpdate(){this.setMaxHeight(),this.state.showInfo}render(){return React.createElement("article",{className:`${this.props.className?`${this.props.className} `:""}search-control-wrap`},React.createElement("section",{className:`search-control${this.state.open?" search-control-active":""}`},React.createElement(SearchIconButton,{className:"search-control-icon-button",onClick:this.searchIconButtonOnClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1)}),React.createElement(SearchInput,{tabIndex:void 0!==this.props.tabIndex?this.props.tabIndex:1,ref:this.input,getInputValueSetter:e=>this.inputValueSetter=e,className:"search-control-input",placeholder:this.props.inputPlaceholder,onClick:this.inputClick,onMouseEnter:()=>this.setLock(!0),onMouseLeave:()=>this.setLock(!1),onChange:this.syncInput,onChangeAsync:this.sendToAction,onBlur:this.inputBlur,onKeyUp:this.inputKeyUp,onKeyPress:e=>{e.stopPropagation(),40===e.keyCode&&e.preventDefault()},onKeyDown:e=>{var t;40===e.keyCode&&(e.preventDefault(),e.stopPropagation(),null===(t=this.selectbox.current)||void 0===t||t.focus())},onSubmit:e=>e.preventDefault()}),React.createElement(SearchCloseButton,{className:this.state.closeButton?" search-control-close-button-active":"",onClick:this.closeClick})),React.createElement("section",{className:`search-control-info-wrapper${this.state.showInfo?"":" search-control-info-wrapper-close"}`},React.createElement("section",{ref:this.div,className:"search-control-info"},this.state.showInfo&&this.SearchResponseInfo)))}}SearchControl.propTypes={provider:PropTypes.string,providerKey:PropTypes.string,inputPlaceholder:PropTypes.string,coords:PropTypes.arrayOf(PropTypes.number),closeResultsOnClick:PropTypes.bool,openSearchOnLoad:PropTypes.bool,searchBounds:PropTypes.array,providerOptions:PropTypes.object},SearchControl.defaultProps={inputPlaceholder:"Search Lat,Lng",closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap"};class ReactLeafletSearch extends reactLeaflet.MapControl{constructor(e,t){var n;super(e),this.handler=({event:e,payload:t})=>{var n,r;"add"===e&&t?(null===(r=(n=this.props).onChange)||void 0===r||r.call(n,t),this.latLngHandler(t.latLng,t.info,t.raw)):this.setState({search:!1})},this.div=leaflet.DomUtil.create("div","leaflet-search-wrap"),leaflet.DomEvent.disableClickPropagation(this.div),leaflet.DomEvent.disableScrollPropagation(this.div),this.state={search:!1,info:!1},this.SearchInfo=null,this.map=t.map||(null===(n=e.leaflet)||void 0===n?void 0:n.map),this.markerRef=React__default.createRef()}createLeafletElement(e){return new(leaflet.Control.extend({onAdd:e=>this.div,onRemove:e=>{}}))(e)}latLngHandler(e,t,n){this.SearchInfo={info:t,latLng:e,raw:n};const r=React__default.createElement("div",null,React__default.createElement("p",null,Array.isArray(t)?t.toString():t),React__default.createElement("div",{className:"search-control-popup-seperator"}),React__default.createElement("div",null,`latitude: ${e.lat}`),React__default.createElement("div",null,`longitude: ${e.lng}`));this.goToLatLng(e,r)}goToLatLng(e,t){this.setState({search:e,info:t},()=>{this.flyTo()})}flyTo(){if(this.state.search)switch(this.props.mapStateModifier){case"flyTo":this.map&&this.map.flyTo(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;case"setView":this.map&&this.map.setView(this.state.search,this.props.zoom,this.props.zoomPanOptions);break;default:"function"==typeof this.props.mapStateModifier&&this.props.mapStateModifier(this.state.search)}}componentDidMount(){super.componentDidMount&&super.componentDidMount(),reactDom.render(React__default.createElement(SearchControl,Object.assign({className:this.props.className,provider:this.props.provider,customProvider:this.props.customProvider,providerOptions:this.props.providerOptions,openSearchOnLoad:this.props.openSearchOnLoad,closeResultsOnClick:this.props.closeResultsOnClick,inputPlaceholder:this.props.inputPlaceholder,search:this.props.search,map:this.map,handler:this.handler},void 0!==this.props.tabIndex?{tabIndex:this.props.tabIndex}:{})),this.div)}componentDidUpdate(){this.markerRef.current&&this.markerRef.current.leafletElement.openPopup()}defaultPopUp(){return React__default.createElement(reactLeaflet.Popup,null,React__default.createElement("span",null,this.state.info))}render(){return this.SearchInfo&&this.state.search?this.props.children?this.props.children(this.SearchInfo):this.props.showMarker?React__default.createElement(reactLeaflet.Marker,Object.assign({ref:this.markerRef,key:`marker-search-${this.state.search.toString()}`,position:this.state.search},this.props.markerIcon?{icon:this.props.markerIcon}:{}),this.props.showPopup&&(this.props.popUp?this.props.popUp(this.SearchInfo):this.defaultPopUp())):null:null}}ReactLeafletSearch.defaultProps={inputPlaceholder:"Search Lat,Lng",showMarker:!0,showPopup:!0,zoom:10,closeResultsOnClick:!1,openSearchOnLoad:!1,search:void 0,provider:"OpenStreetMap",mapStateModifier:"flyTo",zoomPanOptions:{animate:!0,duration:.25,easeLinearity:.25,noMoveStart:!1}};var SearchV2=reactLeaflet.withLeaflet(ReactLeafletSearch);module.exports=SearchV2; diff --git a/es/index.js b/es/index.js index 1d9562a..4c0e818 100644 --- a/es/index.js +++ b/es/index.js @@ -30,4 +30,4 @@ object-assign * @return {boolean} True if the event is supported. * @internal * @license Modernizr 3.0.0pre (Custom Build) | MIT - */function Ko(e){if(!Xe)return!1;var t="on"+e,n=t in document;if(!n){var r=document.createElement("div");r.setAttribute(t,"return;"),n="function"==typeof r[t]}return n}var qo=new("function"==typeof WeakMap?WeakMap:Map);function Yo(e){var t=qo.get(e);return void 0===t&&(t=new Set,qo.set(e,t)),t}function Xo(e,t,n){if(!n.has(e)){switch(e){case Rr:Wo(Rr,t);break;case pr:case nr:Wo(pr,t),Wo(nr,t),n.add(nr),n.add(pr);break;case rr:case ir:Ko(e)&&Wo(e,t);break;case vr:case Ir:case Pr:break;default:-1!==zr.indexOf(e)||Fo(e,t)}n.add(e)}}var Go={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0};var Zo=["Webkit","ms","Moz","O"];function Jo(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||Go.hasOwnProperty(e)&&Go[e]?(""+t).trim():t+"px"}Object.keys(Go).forEach((function(e){Zo.forEach((function(t){Go[function(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}(t,e)]=Go[e]}))}));var ei=/([A-Z])/g,ti=/^ms-/;var ni=/^(?:webkit|moz|o)[A-Z]/,ri=/^-ms-/,ai=/-(.)/g,oi=/;\s*$/,ii={},li={},ui=!1,si=!1,ci=function(e){ii.hasOwnProperty(e)&&ii[e]||(ii[e]=!0,Oe(!1,"Unsupported style property %s. Did you mean %s?",e,e.replace(ri,"ms-").replace(ai,(function(e,t){return t.toUpperCase()}))))},fi=function(e,t){e.indexOf("-")>-1?ci(e):ni.test(e)?function(e){ii.hasOwnProperty(e)&&ii[e]||(ii[e]=!0,Oe(!1,"Unsupported vendor-prefixed style property %s. Did you mean %s?",e,e.charAt(0).toUpperCase()+e.slice(1)))}(e):oi.test(t)&&function(e,t){li.hasOwnProperty(t)&&li[t]||(li[t]=!0,Oe(!1,'Style property values shouldn\'t contain a semicolon. Try "%s: %s" instead.',e,t.replace(oi,"")))}(e,t),"number"==typeof t&&(isNaN(t)?function(e,t){ui||(ui=!0,Oe(!1,"`NaN` is an invalid value for the `%s` css style property.",e))}(e):isFinite(t)||function(e,t){si||(si=!0,Oe(!1,"`Infinity` is an invalid value for the `%s` css style property.",e))}(e))};function di(e){var t="",n="";for(var r in e)if(e.hasOwnProperty(r)){var a=e[r];if(null!=a){var o=0===r.indexOf("--");t+=n+(o?r:r.replace(ei,"-$1").toLowerCase().replace(ti,"-ms-"))+":",t+=Jo(r,a,o),n=";"}}return t||null}function pi(e,t){var n=e.style;for(var r in t)if(t.hasOwnProperty(r)){var a=0===r.indexOf("--");a||fi(r,t[r]);var o=Jo(r,t[r],a);"float"===r&&(r="cssFloat"),a?n.setProperty(r,o):n[r]=o}}var hi=n({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}),mi="__html",vi=null;function gi(e,t){if(t){if(hi[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(e+" is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`."+vi.getStackAddendum());if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error("Can only set one of `children` or `props.dangerouslySetInnerHTML`.");if(!("object"==typeof t.dangerouslySetInnerHTML&&mi in t.dangerouslySetInnerHTML))throw Error("`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.")}if(!t.suppressContentEditableWarning&&t.contentEditable&&null!=t.children&&Oe(!1,"A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional."),null!=t.style&&"object"!=typeof t.style)throw Error("The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX."+vi.getStackAddendum())}}function yi(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}vi=pe.ReactDebugCurrentFrame;var bi={accept:"accept",acceptcharset:"acceptCharset","accept-charset":"acceptCharset",accesskey:"accessKey",action:"action",allowfullscreen:"allowFullScreen",alt:"alt",as:"as",async:"async",autocapitalize:"autoCapitalize",autocomplete:"autoComplete",autocorrect:"autoCorrect",autofocus:"autoFocus",autoplay:"autoPlay",autosave:"autoSave",capture:"capture",cellpadding:"cellPadding",cellspacing:"cellSpacing",challenge:"challenge",charset:"charSet",checked:"checked",children:"children",cite:"cite",class:"className",classid:"classID",classname:"className",cols:"cols",colspan:"colSpan",content:"content",contenteditable:"contentEditable",contextmenu:"contextMenu",controls:"controls",controlslist:"controlsList",coords:"coords",crossorigin:"crossOrigin",dangerouslysetinnerhtml:"dangerouslySetInnerHTML",data:"data",datetime:"dateTime",default:"default",defaultchecked:"defaultChecked",defaultvalue:"defaultValue",defer:"defer",dir:"dir",disabled:"disabled",disablepictureinpicture:"disablePictureInPicture",download:"download",draggable:"draggable",enctype:"encType",for:"htmlFor",form:"form",formmethod:"formMethod",formaction:"formAction",formenctype:"formEncType",formnovalidate:"formNoValidate",formtarget:"formTarget",frameborder:"frameBorder",headers:"headers",height:"height",hidden:"hidden",high:"high",href:"href",hreflang:"hrefLang",htmlfor:"htmlFor",httpequiv:"httpEquiv","http-equiv":"httpEquiv",icon:"icon",id:"id",innerhtml:"innerHTML",inputmode:"inputMode",integrity:"integrity",is:"is",itemid:"itemID",itemprop:"itemProp",itemref:"itemRef",itemscope:"itemScope",itemtype:"itemType",keyparams:"keyParams",keytype:"keyType",kind:"kind",label:"label",lang:"lang",list:"list",loop:"loop",low:"low",manifest:"manifest",marginwidth:"marginWidth",marginheight:"marginHeight",max:"max",maxlength:"maxLength",media:"media",mediagroup:"mediaGroup",method:"method",min:"min",minlength:"minLength",multiple:"multiple",muted:"muted",name:"name",nomodule:"noModule",nonce:"nonce",novalidate:"noValidate",open:"open",optimum:"optimum",pattern:"pattern",placeholder:"placeholder",playsinline:"playsInline",poster:"poster",preload:"preload",profile:"profile",radiogroup:"radioGroup",readonly:"readOnly",referrerpolicy:"referrerPolicy",rel:"rel",required:"required",reversed:"reversed",role:"role",rows:"rows",rowspan:"rowSpan",sandbox:"sandbox",scope:"scope",scoped:"scoped",scrolling:"scrolling",seamless:"seamless",selected:"selected",shape:"shape",size:"size",sizes:"sizes",span:"span",spellcheck:"spellCheck",src:"src",srcdoc:"srcDoc",srclang:"srcLang",srcset:"srcSet",start:"start",step:"step",style:"style",summary:"summary",tabindex:"tabIndex",target:"target",title:"title",type:"type",usemap:"useMap",value:"value",width:"width",wmode:"wmode",wrap:"wrap",about:"about",accentheight:"accentHeight","accent-height":"accentHeight",accumulate:"accumulate",additive:"additive",alignmentbaseline:"alignmentBaseline","alignment-baseline":"alignmentBaseline",allowreorder:"allowReorder",alphabetic:"alphabetic",amplitude:"amplitude",arabicform:"arabicForm","arabic-form":"arabicForm",ascent:"ascent",attributename:"attributeName",attributetype:"attributeType",autoreverse:"autoReverse",azimuth:"azimuth",basefrequency:"baseFrequency",baselineshift:"baselineShift","baseline-shift":"baselineShift",baseprofile:"baseProfile",bbox:"bbox",begin:"begin",bias:"bias",by:"by",calcmode:"calcMode",capheight:"capHeight","cap-height":"capHeight",clip:"clip",clippath:"clipPath","clip-path":"clipPath",clippathunits:"clipPathUnits",cliprule:"clipRule","clip-rule":"clipRule",color:"color",colorinterpolation:"colorInterpolation","color-interpolation":"colorInterpolation",colorinterpolationfilters:"colorInterpolationFilters","color-interpolation-filters":"colorInterpolationFilters",colorprofile:"colorProfile","color-profile":"colorProfile",colorrendering:"colorRendering","color-rendering":"colorRendering",contentscripttype:"contentScriptType",contentstyletype:"contentStyleType",cursor:"cursor",cx:"cx",cy:"cy",d:"d",datatype:"datatype",decelerate:"decelerate",descent:"descent",diffuseconstant:"diffuseConstant",direction:"direction",display:"display",divisor:"divisor",dominantbaseline:"dominantBaseline","dominant-baseline":"dominantBaseline",dur:"dur",dx:"dx",dy:"dy",edgemode:"edgeMode",elevation:"elevation",enablebackground:"enableBackground","enable-background":"enableBackground",end:"end",exponent:"exponent",externalresourcesrequired:"externalResourcesRequired",fill:"fill",fillopacity:"fillOpacity","fill-opacity":"fillOpacity",fillrule:"fillRule","fill-rule":"fillRule",filter:"filter",filterres:"filterRes",filterunits:"filterUnits",floodopacity:"floodOpacity","flood-opacity":"floodOpacity",floodcolor:"floodColor","flood-color":"floodColor",focusable:"focusable",fontfamily:"fontFamily","font-family":"fontFamily",fontsize:"fontSize","font-size":"fontSize",fontsizeadjust:"fontSizeAdjust","font-size-adjust":"fontSizeAdjust",fontstretch:"fontStretch","font-stretch":"fontStretch",fontstyle:"fontStyle","font-style":"fontStyle",fontvariant:"fontVariant","font-variant":"fontVariant",fontweight:"fontWeight","font-weight":"fontWeight",format:"format",from:"from",fx:"fx",fy:"fy",g1:"g1",g2:"g2",glyphname:"glyphName","glyph-name":"glyphName",glyphorientationhorizontal:"glyphOrientationHorizontal","glyph-orientation-horizontal":"glyphOrientationHorizontal",glyphorientationvertical:"glyphOrientationVertical","glyph-orientation-vertical":"glyphOrientationVertical",glyphref:"glyphRef",gradienttransform:"gradientTransform",gradientunits:"gradientUnits",hanging:"hanging",horizadvx:"horizAdvX","horiz-adv-x":"horizAdvX",horizoriginx:"horizOriginX","horiz-origin-x":"horizOriginX",ideographic:"ideographic",imagerendering:"imageRendering","image-rendering":"imageRendering",in2:"in2",in:"in",inlist:"inlist",intercept:"intercept",k1:"k1",k2:"k2",k3:"k3",k4:"k4",k:"k",kernelmatrix:"kernelMatrix",kernelunitlength:"kernelUnitLength",kerning:"kerning",keypoints:"keyPoints",keysplines:"keySplines",keytimes:"keyTimes",lengthadjust:"lengthAdjust",letterspacing:"letterSpacing","letter-spacing":"letterSpacing",lightingcolor:"lightingColor","lighting-color":"lightingColor",limitingconeangle:"limitingConeAngle",local:"local",markerend:"markerEnd","marker-end":"markerEnd",markerheight:"markerHeight",markermid:"markerMid","marker-mid":"markerMid",markerstart:"markerStart","marker-start":"markerStart",markerunits:"markerUnits",markerwidth:"markerWidth",mask:"mask",maskcontentunits:"maskContentUnits",maskunits:"maskUnits",mathematical:"mathematical",mode:"mode",numoctaves:"numOctaves",offset:"offset",opacity:"opacity",operator:"operator",order:"order",orient:"orient",orientation:"orientation",origin:"origin",overflow:"overflow",overlineposition:"overlinePosition","overline-position":"overlinePosition",overlinethickness:"overlineThickness","overline-thickness":"overlineThickness",paintorder:"paintOrder","paint-order":"paintOrder",panose1:"panose1","panose-1":"panose1",pathlength:"pathLength",patterncontentunits:"patternContentUnits",patterntransform:"patternTransform",patternunits:"patternUnits",pointerevents:"pointerEvents","pointer-events":"pointerEvents",points:"points",pointsatx:"pointsAtX",pointsaty:"pointsAtY",pointsatz:"pointsAtZ",prefix:"prefix",preservealpha:"preserveAlpha",preserveaspectratio:"preserveAspectRatio",primitiveunits:"primitiveUnits",property:"property",r:"r",radius:"radius",refx:"refX",refy:"refY",renderingintent:"renderingIntent","rendering-intent":"renderingIntent",repeatcount:"repeatCount",repeatdur:"repeatDur",requiredextensions:"requiredExtensions",requiredfeatures:"requiredFeatures",resource:"resource",restart:"restart",result:"result",results:"results",rotate:"rotate",rx:"rx",ry:"ry",scale:"scale",security:"security",seed:"seed",shaperendering:"shapeRendering","shape-rendering":"shapeRendering",slope:"slope",spacing:"spacing",specularconstant:"specularConstant",specularexponent:"specularExponent",speed:"speed",spreadmethod:"spreadMethod",startoffset:"startOffset",stddeviation:"stdDeviation",stemh:"stemh",stemv:"stemv",stitchtiles:"stitchTiles",stopcolor:"stopColor","stop-color":"stopColor",stopopacity:"stopOpacity","stop-opacity":"stopOpacity",strikethroughposition:"strikethroughPosition","strikethrough-position":"strikethroughPosition",strikethroughthickness:"strikethroughThickness","strikethrough-thickness":"strikethroughThickness",string:"string",stroke:"stroke",strokedasharray:"strokeDasharray","stroke-dasharray":"strokeDasharray",strokedashoffset:"strokeDashoffset","stroke-dashoffset":"strokeDashoffset",strokelinecap:"strokeLinecap","stroke-linecap":"strokeLinecap",strokelinejoin:"strokeLinejoin","stroke-linejoin":"strokeLinejoin",strokemiterlimit:"strokeMiterlimit","stroke-miterlimit":"strokeMiterlimit",strokewidth:"strokeWidth","stroke-width":"strokeWidth",strokeopacity:"strokeOpacity","stroke-opacity":"strokeOpacity",suppresscontenteditablewarning:"suppressContentEditableWarning",suppresshydrationwarning:"suppressHydrationWarning",surfacescale:"surfaceScale",systemlanguage:"systemLanguage",tablevalues:"tableValues",targetx:"targetX",targety:"targetY",textanchor:"textAnchor","text-anchor":"textAnchor",textdecoration:"textDecoration","text-decoration":"textDecoration",textlength:"textLength",textrendering:"textRendering","text-rendering":"textRendering",to:"to",transform:"transform",typeof:"typeof",u1:"u1",u2:"u2",underlineposition:"underlinePosition","underline-position":"underlinePosition",underlinethickness:"underlineThickness","underline-thickness":"underlineThickness",unicode:"unicode",unicodebidi:"unicodeBidi","unicode-bidi":"unicodeBidi",unicoderange:"unicodeRange","unicode-range":"unicodeRange",unitsperem:"unitsPerEm","units-per-em":"unitsPerEm",unselectable:"unselectable",valphabetic:"vAlphabetic","v-alphabetic":"vAlphabetic",values:"values",vectoreffect:"vectorEffect","vector-effect":"vectorEffect",version:"version",vertadvy:"vertAdvY","vert-adv-y":"vertAdvY",vertoriginx:"vertOriginX","vert-origin-x":"vertOriginX",vertoriginy:"vertOriginY","vert-origin-y":"vertOriginY",vhanging:"vHanging","v-hanging":"vHanging",videographic:"vIdeographic","v-ideographic":"vIdeographic",viewbox:"viewBox",viewtarget:"viewTarget",visibility:"visibility",vmathematical:"vMathematical","v-mathematical":"vMathematical",vocab:"vocab",widths:"widths",wordspacing:"wordSpacing","word-spacing":"wordSpacing",writingmode:"writingMode","writing-mode":"writingMode",x1:"x1",x2:"x2",x:"x",xchannelselector:"xChannelSelector",xheight:"xHeight","x-height":"xHeight",xlinkactuate:"xlinkActuate","xlink:actuate":"xlinkActuate",xlinkarcrole:"xlinkArcrole","xlink:arcrole":"xlinkArcrole",xlinkhref:"xlinkHref","xlink:href":"xlinkHref",xlinkrole:"xlinkRole","xlink:role":"xlinkRole",xlinkshow:"xlinkShow","xlink:show":"xlinkShow",xlinktitle:"xlinkTitle","xlink:title":"xlinkTitle",xlinktype:"xlinkType","xlink:type":"xlinkType",xmlbase:"xmlBase","xml:base":"xmlBase",xmllang:"xmlLang","xml:lang":"xmlLang",xmlns:"xmlns","xml:space":"xmlSpace",xmlnsxlink:"xmlnsXlink","xmlns:xlink":"xmlnsXlink",xmlspace:"xmlSpace",y1:"y1",y2:"y2",y:"y",ychannelselector:"yChannelSelector",z:"z",zoomandpan:"zoomAndPan"},wi={"aria-current":0,"aria-details":0,"aria-disabled":0,"aria-hidden":0,"aria-invalid":0,"aria-keyshortcuts":0,"aria-label":0,"aria-roledescription":0,"aria-autocomplete":0,"aria-checked":0,"aria-expanded":0,"aria-haspopup":0,"aria-level":0,"aria-modal":0,"aria-multiline":0,"aria-multiselectable":0,"aria-orientation":0,"aria-placeholder":0,"aria-pressed":0,"aria-readonly":0,"aria-required":0,"aria-selected":0,"aria-sort":0,"aria-valuemax":0,"aria-valuemin":0,"aria-valuenow":0,"aria-valuetext":0,"aria-atomic":0,"aria-busy":0,"aria-live":0,"aria-relevant":0,"aria-dropeffect":0,"aria-grabbed":0,"aria-activedescendant":0,"aria-colcount":0,"aria-colindex":0,"aria-colspan":0,"aria-controls":0,"aria-describedby":0,"aria-errormessage":0,"aria-flowto":0,"aria-labelledby":0,"aria-owns":0,"aria-posinset":0,"aria-rowcount":0,"aria-rowindex":0,"aria-rowspan":0,"aria-setsize":0},ki={},xi=new RegExp("^(aria)-["+Ct+"]*$"),Ei=new RegExp("^(aria)[A-Z]["+Ct+"]*$"),Ti=Object.prototype.hasOwnProperty;function Si(e,t){if(Ti.call(ki,t)&&ki[t])return!0;if(Ei.test(t)){var n="aria-"+t.slice(4).toLowerCase(),r=wi.hasOwnProperty(n)?n:null;if(null==r)return Oe(!1,"Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.",t),ki[t]=!0,!0;if(t!==r)return Oe(!1,"Invalid ARIA attribute `%s`. Did you mean `%s`?",t,r),ki[t]=!0,!0}if(xi.test(t)){var a=t.toLowerCase(),o=wi.hasOwnProperty(a)?a:null;if(null==o)return ki[t]=!0,!1;if(t!==o)return Oe(!1,"Unknown ARIA attribute `%s`. Did you mean `%s`?",t,o),ki[t]=!0,!0}return!0}function Ci(e,t){yi(e,t)||function(e,t){var n=[];for(var r in t){Si(0,r)||n.push(r)}var a=n.map((function(e){return"`"+e+"`"})).join(", ");1===n.length?Oe(!1,"Invalid aria prop %s on <%s> tag. For details, see https://fb.me/invalid-aria-prop",a,e):n.length>1&&Oe(!1,"Invalid aria props %s on <%s> tag. For details, see https://fb.me/invalid-aria-prop",a,e)}(e,t)}var _i=!1;var Pi,Ri={},Ni=Object.prototype.hasOwnProperty,Ii=/^on./,Di=/^on[^A-Z]/,Oi=new RegExp("^(aria)-["+Ct+"]*$"),Mi=new RegExp("^(aria)[A-Z]["+Ct+"]*$");Pi=function(e,t,n,r){if(Ni.call(Ri,t)&&Ri[t])return!0;var a=t.toLowerCase();if("onfocusin"===a||"onfocusout"===a)return Oe(!1,"React uses onFocus and onBlur instead of onFocusIn and onFocusOut. All React events are normalized to bubble, so onFocusIn and onFocusOut are not needed/supported by React."),Ri[t]=!0,!0;if(r){if(h.hasOwnProperty(t))return!0;var o=v.hasOwnProperty(a)?v[a]:null;if(null!=o)return Oe(!1,"Invalid event handler property `%s`. Did you mean `%s`?",t,o),Ri[t]=!0,!0;if(Ii.test(t))return Oe(!1,"Unknown event handler property `%s`. It will be ignored.",t),Ri[t]=!0,!0}else if(Ii.test(t))return Di.test(t)&&Oe(!1,"Invalid event handler property `%s`. React events use the camelCase naming convention, for example `onClick`.",t),Ri[t]=!0,!0;if(Oi.test(t)||Mi.test(t))return!0;if("innerhtml"===a)return Oe(!1,"Directly setting property `innerHTML` is not permitted. For more information, lookup documentation on `dangerouslySetInnerHTML`."),Ri[t]=!0,!0;if("aria"===a)return Oe(!1,"The `aria` attribute is reserved for future use in React. Pass individual `aria-` attributes instead."),Ri[t]=!0,!0;if("is"===a&&null!=n&&"string"!=typeof n)return Oe(!1,"Received a `%s` for a string attribute `is`. If this is expected, cast the value to a string.",typeof n),Ri[t]=!0,!0;if("number"==typeof n&&isNaN(n))return Oe(!1,"Received NaN for the `%s` attribute. If this is expected, cast the value to a string.",t),Ri[t]=!0,!0;var i=Ut(t),l=null!==i&&i.type===bt;if(bi.hasOwnProperty(a)){var u=bi[a];if(u!==t)return Oe(!1,"Invalid DOM property `%s`. Did you mean `%s`?",t,u),Ri[t]=!0,!0}else if(!l&&t!==a)return Oe(!1,"React does not recognize the `%s` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `%s` instead. If you accidentally passed it from a parent component, remove it from the DOM element.",t,a),Ri[t]=!0,!0;return"boolean"==typeof n&&Mt(t,n,i,!1)?(n?Oe(!1,'Received `%s` for a non-boolean attribute `%s`.\n\nIf you want to write it to the DOM, pass a string instead: %s="%s" or %s={value.toString()}.',n,t,t,n,t):Oe(!1,'Received `%s` for a non-boolean attribute `%s`.\n\nIf you want to write it to the DOM, pass a string instead: %s="%s" or %s={value.toString()}.\n\nIf you used to conditionally omit it with %s={condition && value}, pass %s={condition ? value : undefined} instead.',n,t,t,n,t,t,t),Ri[t]=!0,!0):!!l||(Mt(t,n,i,!1)?(Ri[t]=!0,!1):"false"!==n&&"true"!==n||null===i||i.type!==kt||(Oe(!1,"Received the string `%s` for the boolean attribute `%s`. %s Did you mean %s={%s}?",n,t,"false"===n?"The browser will interpret it as a truthy value.":'Although this works, it will not work as expected if you pass the string "false".',t,n),Ri[t]=!0,!0))};var zi=function(e,t,n){var r=[];for(var a in t){Pi(0,a,t[a],n)||r.push(a)}var o=r.map((function(e){return"`"+e+"`"})).join(", ");1===r.length?Oe(!1,"Invalid value for prop %s on <%s> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior",o,e):r.length>1&&Oe(!1,"Invalid values for props %s on <%s> tag. Either remove them from the element, or pass a string or number value to keep them in the DOM. For details, see https://fb.me/react-attribute-behavior",o,e)};var Ui,Li,Ai,Fi,Wi,ji,Bi,Vi,Hi,$i,Qi=!1,Ki=!1,qi="dangerouslySetInnerHTML",Yi="suppressContentEditableWarning",Xi="suppressHydrationWarning",Gi="autoFocus",Zi="children",Ji="style",el="__html",tl=Un.html;Ui={time:!0,dialog:!0,webview:!0},Ai=function(e,t){Ci(e,t),function(e,t){"input"!==e&&"textarea"!==e&&"select"!==e||null==t||null!==t.value||_i||(_i=!0,"select"===e&&t.multiple?Oe(!1,"`value` prop on `%s` should not be null. Consider using an empty array when `multiple` is set to `true` to clear the component or `undefined` for uncontrolled components.",e):Oe(!1,"`value` prop on `%s` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.",e))}(e,t),function(e,t,n){yi(e,t)||zi(e,t,n)}(e,t,!0)},Vi=Xe&&!document.documentMode;var nl=/\r\n?/g,rl=/\u0000|\uFFFD/g;function al(e,t){!function(e,t){for(var n=Yo(t),r=m[e],a=0;a in <%s>.",t.nodeName.toLowerCase(),e.nodeName.toLowerCase()))}function dl(e,t){Qi||(Qi=!0,I(!1,'Did not expect server HTML to contain the text node "%s" in <%s>.',t.nodeValue,e.nodeName.toLowerCase()))}function pl(e,t,n){Qi||(Qi=!0,I(!1,"Expected server HTML to contain a matching <%s> in <%s>.",t,e.nodeName.toLowerCase()))}function hl(e,t){""!==t&&(Qi||(Qi=!0,I(!1,'Expected server HTML to contain a matching text node for "%s" in <%s>.',t,e.nodeName.toLowerCase())))}function ml(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function vl(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function gl(e){for(;e;){if(e.nextSibling)return e.nextSibling;e=e.parentNode}}function yl(e,t){for(var n=vl(e),r=0,a=0;n;){if(n.nodeType===Vn){if(a=r+n.textContent.length,r<=t&&a>=t)return{node:n,offset:t-r};r=a}n=vl(gl(n))}}function bl(e){var t=e.ownerDocument,n=t&&t.defaultView||window,r=n.getSelection&&n.getSelection();if(!r||0===r.rangeCount)return null;var a=r.anchorNode,o=r.anchorOffset,i=r.focusNode,l=r.focusOffset;try{a.nodeType,i.nodeType}catch(e){return null}return function(e,t,n,r,a){var o=0,i=-1,l=-1,u=0,s=0,c=e,f=null;e:for(;;){for(var d=null;c!==t||0!==n&&c.nodeType!==Vn||(i=o+n),c!==r||0!==a&&c.nodeType!==Vn||(l=o+a),c.nodeType===Vn&&(o+=c.nodeValue.length),null!==(d=c.firstChild);)f=c,c=d;for(;;){if(c===e)break e;if(f===t&&++u===n&&(i=o),f===r&&++s===a&&(l=o),null!==(d=c.nextSibling))break;f=(c=f).parentNode}c=d}if(-1===i||-1===l)return null;return{start:i,end:l}}(e,a,o,i,l)}function wl(e){return e&&e.nodeType===Vn}function kl(e){return e&&e.ownerDocument&&function e(t,n){return!(!t||!n)&&(t===n||!wl(t)&&(wl(n)?e(t,n.parentNode):"contains"in t?t.contains(n):!!t.compareDocumentPosition&&!!(16&t.compareDocumentPosition(n))))}(e.ownerDocument.documentElement,e)}function xl(e){try{return"string"==typeof e.contentWindow.location.href}catch(e){return!1}}function El(){for(var e=window,t=ml();t instanceof e.HTMLIFrameElement;){if(!xl(t))return t;t=ml((e=t.contentWindow).document)}return t}function Tl(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}function Sl(e){var t=El(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&kl(n)){null!==r&&Tl(n)&&function(e,t){var n=t.start,r=t.end;void 0===r&&(r=n);"selectionStart"in e?(e.selectionStart=n,e.selectionEnd=Math.min(r,e.value.length)):function(e,t){var n=e.ownerDocument||document,r=n&&n.defaultView||window;if(r.getSelection){var a=r.getSelection(),o=e.textContent.length,i=Math.min(t.start,o),l=void 0===t.end?i:Math.min(t.end,o);if(!a.extend&&i>l){var u=l;l=i,i=u}var s=yl(e,i),c=yl(e,l);if(s&&c){if(1===a.rangeCount&&a.anchorNode===s.node&&a.anchorOffset===s.offset&&a.focusNode===c.node&&a.focusOffset===c.offset)return;var f=n.createRange();f.setStart(s.node,s.offset),a.removeAllRanges(),i>l?(a.addRange(f),a.extend(c.node,c.offset)):(f.setEnd(c.node,c.offset),a.addRange(f))}}}(e,t)}(n,r);for(var a=[],o=n;o=o.parentNode;)o.nodeType===Bn&&a.push({element:o,left:o.scrollLeft,top:o.scrollTop});"function"==typeof n.focus&&n.focus();for(var i=0;i",o){var p="";"table"===u&&"tr"===e&&(p+=" Add a , or to your code to match the DOM tree generated by the browser."),I(!1,"validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s%s",f,u,d,p,s)}else I(!1,"validateDOMNesting(...): %s cannot appear as a descendant of <%s>.%s",f,u,s)}}},Ol="suppressHydrationWarning";var zl="$",Ul="/$",Ll="$?",Al="$!",Fl="style",Wl=null,jl=null;function Bl(e,t){switch(e){case"button":case"input":case"select":case"textarea":return!!t.autoFocus}return!1}function Vl(e){var t,n;Wl=Lo,n=El(),jl={focusedElem:n,selectionRange:Tl(n)?(t=n,("selectionStart"in t?{start:t.selectionStart,end:t.selectionEnd}:bl(t))||{start:0,end:0}):null},Ao(!1)}function Hl(e,t,n,r,a){var o=r;if(Cl(e,null,o.ancestorInfo),"string"==typeof t.children||"number"==typeof t.children){var i=""+t.children,l=_l(o.ancestorInfo,e);Cl(null,i,l)}var u=function(e,t,n,r){var a,o,i=ol(n),l=r;if(l===tl&&(l=Ln(e)),l===tl){if((a=yi(e,t))||e===e.toLowerCase()||Oe(!1,"<%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.",e),"script"===e){var u=i.createElement("div");u.innerHTML="