diff --git a/example/src/app.tsx b/example/src/app.tsx index f8773d8..6d54913 100644 --- a/example/src/app.tsx +++ b/example/src/app.tsx @@ -5,7 +5,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import Geosuggest from '../../src/Geosuggest'; -const App = (): JSX.Element => { +const App = (): React.JSX.Element => { /** * When the input receives focus */ diff --git a/package-lock.json b/package-lock.json index 5cde5df..587f105 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,8 +24,8 @@ "@types/jsdom": "^21.1.1", "@types/lodash.debounce": "^4.0.7", "@types/mocha": "^10.0.1", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", + "@types/react": "19.0.2", + "@types/react-dom": "19.0.2", "@types/sinon": "^10.0.16", "@typescript-eslint/eslint-plugin": "^6.2.1", "@typescript-eslint/parser": "^6.2.1", @@ -59,8 +59,8 @@ "typescript": "^5.1.6" }, "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -1096,6 +1096,26 @@ "react-dom": "^18.0.0" } }, + "node_modules/@testing-library/react/node_modules/@types/react": { + "version": "18.3.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", + "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", + "dev": true, + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@testing-library/react/node_modules/@types/react-dom": { + "version": "18.3.5", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz", + "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==", + "dev": true, + "peerDependencies": { + "@types/react": "^18.0.0" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -1255,29 +1275,28 @@ "dev": true }, "node_modules/@types/prop-types": { - "version": "15.7.3", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", - "dev": true + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "dev": true, + "peer": true }, "node_modules/@types/react": { - "version": "18.2.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz", - "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz", + "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==", "dev": true, "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "18.2.7", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", - "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz", + "integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==", "dev": true, - "dependencies": { - "@types/react": "*" + "peerDependencies": { + "@types/react": "^19.0.0" } }, "node_modules/@types/resolve": { @@ -1286,12 +1305,6 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "dev": true }, - "node_modules/@types/scheduler": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true - }, "node_modules/@types/semver": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", @@ -10070,6 +10083,26 @@ "@babel/runtime": "^7.12.5", "@testing-library/dom": "^9.0.0", "@types/react-dom": "^18.0.0" + }, + "dependencies": { + "@types/react": { + "version": "18.3.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", + "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", + "dev": true, + "peer": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-dom": { + "version": "18.3.5", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz", + "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==", + "dev": true, + "requires": {} + } } }, "@tootallnate/once": { @@ -10226,30 +10259,27 @@ "dev": true }, "@types/prop-types": { - "version": "15.7.3", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", - "dev": true + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "dev": true, + "peer": true }, "@types/react": { - "version": "18.2.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz", - "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz", + "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==", "dev": true, "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, "@types/react-dom": { - "version": "18.2.7", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", - "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz", + "integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==", "dev": true, - "requires": { - "@types/react": "*" - } + "requires": {} }, "@types/resolve": { "version": "1.20.2", @@ -10257,12 +10287,6 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "dev": true }, - "@types/scheduler": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true - }, "@types/semver": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", diff --git a/package.json b/package.json index 261c8bc..657a339 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ "url": "https://github.com/ubilabs/react-geosuggest/issues" }, "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "dependencies": { "classnames": "^2.3.2", @@ -34,8 +34,8 @@ "@types/jsdom": "^21.1.1", "@types/lodash.debounce": "^4.0.7", "@types/mocha": "^10.0.1", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", + "@types/react": "19.0.2", + "@types/react-dom": "19.0.2", "@types/sinon": "^10.0.16", "@typescript-eslint/eslint-plugin": "^6.2.1", "@typescript-eslint/parser": "^6.2.1", diff --git a/src/Geosuggest.tsx b/src/Geosuggest.tsx index c29578d..3dc4bab 100644 --- a/src/Geosuggest.tsx +++ b/src/Geosuggest.tsx @@ -604,7 +604,7 @@ export default class GeoSuggest extends React.Component { /** * Render the view */ - render(): JSX.Element { + render(): React.JSX.Element { const attributes = filterInputAttributes(this.props); const classes = classnames('geosuggest', this.props.className, { 'geosuggest--loading': this.state.isLoading @@ -612,7 +612,9 @@ export default class GeoSuggest extends React.Component { const input = ( (this.input = i)} + ref={(i: Input | null) => { + this.input = i; + }} value={this.state.userInput} doNotSubmitOnEnter={!this.state.isSuggestsHidden} ignoreTab={this.props.ignoreTab} diff --git a/src/input.tsx b/src/input.tsx index 176136e..ce32d0e 100644 --- a/src/input.tsx +++ b/src/input.tsx @@ -151,7 +151,7 @@ export default class Input extends React.PureComponent { /** * Render the view */ - render(): JSX.Element { + render(): React.JSX.Element { const attributes = filterInputAttributes(this.props); const classes = classnames('geosuggest__input', this.props.className); const shouldRenderLabel = this.props.label && this.props.id; @@ -174,7 +174,9 @@ export default class Input extends React.PureComponent { (this.input = i)} + ref={(i: HTMLInputElement | null) => { + this.input = i; + }} type={this.props.inputType} {...attributes} value={this.props.value} diff --git a/src/suggest-item.tsx b/src/suggest-item.tsx index 8d2386a..51ca196 100644 --- a/src/suggest-item.tsx +++ b/src/suggest-item.tsx @@ -17,7 +17,7 @@ interface Props { readonly renderSuggestItem?: ( suggest: Suggest, userInput: string - ) => JSX.Element | string; + ) => React.JSX.Element | string; readonly onMouseDown: (event: React.MouseEvent) => void; readonly onMouseOut: (event: React.MouseEvent) => void; } @@ -50,7 +50,10 @@ export default class SuggestItem extends React.PureComponent { /** * Replace matched text with the same in bold */ - formatMatchedText(userInput: string, suggest: Suggest): JSX.Element | string { + formatMatchedText( + userInput: string, + suggest: Suggest + ): React.JSX.Element | string { if (!userInput || !suggest.matchedSubstrings) { return suggest.label; } @@ -127,7 +130,7 @@ export default class SuggestItem extends React.PureComponent { /** * Render the view */ - render(): JSX.Element { + render(): React.JSX.Element { const {suggest} = this.props; const classes = classnames( 'geosuggest__item', @@ -140,7 +143,7 @@ export default class SuggestItem extends React.PureComponent { : null } ); - let content: JSX.Element | string = suggest.label; + let content: React.JSX.Element | string = suggest.label; if (this.props.renderSuggestItem) { content = this.props.renderSuggestItem(suggest, this.props.userInput); @@ -151,7 +154,9 @@ export default class SuggestItem extends React.PureComponent { return (
  • (this.ref = li)} + ref={(li: HTMLLIElement | null) => { + this.ref = li; + }} style={this.props.style} onMouseDown={this.props.onMouseDown} onMouseOut={this.props.onMouseOut} diff --git a/src/suggest-list.tsx b/src/suggest-list.tsx index 0f291ad..d8acbcc 100644 --- a/src/suggest-list.tsx +++ b/src/suggest-list.tsx @@ -24,7 +24,7 @@ interface Props { readonly renderSuggestItem?: ( suggest: Suggest, userInput: string - ) => JSX.Element | string; + ) => React.JSX.Element | string; readonly onSuggestSelect: (suggest: Suggest) => void; readonly onSuggestMouseDown: (event: React.MouseEvent) => void; readonly onSuggestMouseOut: (event: React.MouseEvent) => void; @@ -56,7 +56,7 @@ export default class SuggestList extends React.PureComponent { * Render the view * @return {Function} The React element to render */ - render(): JSX.Element { + render(): React.JSX.Element { const classes = classnames( 'geosuggest__suggests', this.props.suggestsClassName, diff --git a/src/types/props.ts b/src/types/props.ts index f240d6a..f578f50 100644 --- a/src/types/props.ts +++ b/src/types/props.ts @@ -44,7 +44,7 @@ export interface Props { readonly getSuggestLabel?: ( suggest: google.maps.places.AutocompletePrediction ) => string; - readonly renderSuggestItem?: (suggest: Suggest) => string | JSX.Element; + readonly renderSuggestItem?: (suggest: Suggest) => string | React.JSX.Element; readonly autoActivateFirstSuggest?: boolean; readonly style?: { input?: any;