From 81d405d7becf7e9937355cc8a7ec2fe810e9d8c0 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 11 Mar 2022 17:16:24 +0100 Subject: [PATCH 1/2] Updated to latest react-datepicker major version --- package-lock.json | 158 ++++++-------------------------------- package.json | 2 +- src/utils/DateInput.scss | 10 ++- src/utils/InfoTooltip.tsx | 4 +- 4 files changed, 34 insertions(+), 140 deletions(-) diff --git a/package-lock.json b/package-lock.json index 54b2480e..e3edd139 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "react-chartjs-2": "^3.3.0", "react-colorful": "^5.5.1", "react-copy-to-clipboard": "^5.0.4", - "react-datepicker": "^3.6.0", + "react-datepicker": "^4.7.0", "react-dom": "^17.0.2", "react-external-link": "^1.2.2", "react-leaflet": "^3.2.5", @@ -2375,19 +2375,6 @@ "react": ">=16.x" } }, - "node_modules/@hypnosphi/create-react-context": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz", - "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==", - "dependencies": { - "gud": "^1.0.0", - "warning": "^4.0.3" - }, - "peerDependencies": { - "prop-types": "^15.0.0", - "react": ">=0.14.0" - } - }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -4382,20 +4369,6 @@ "react-popper": "^2.2.5" } }, - "node_modules/@types/react-datepicker/node_modules/react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", - "dev": true, - "dependencies": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - }, - "peerDependencies": { - "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17" - } - }, "node_modules/@types/react-dom": { "version": "17.0.13", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.13.tgz", @@ -13172,11 +13145,6 @@ "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==", "dev": true }, - "node_modules/gud": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", - "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" - }, "node_modules/gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", @@ -18779,12 +18747,6 @@ "node": ">=6" } }, - "node_modules/popper.js": { - "version": "1.14.6", - "resolved": "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz", - "integrity": "sha1-qyDdTt+SiLiztlMcR8NhEHtgtLA=", - "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1" - }, "node_modules/portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -24106,15 +24068,16 @@ } }, "node_modules/react-datepicker": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.6.0.tgz", - "integrity": "sha512-QCCtC1Y5kXZSbULbP33P2p0yTU+0Det7eBFABVM2k6AqdIvyBHVkO/hlq2WDeHlPtaf+DEniCIYjrv2BFdUMHw==", + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz", + "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==", "dependencies": { + "@popperjs/core": "^2.9.2", "classnames": "^2.2.6", - "date-fns": "^2.0.1", + "date-fns": "^2.24.0", "prop-types": "^15.7.2", - "react-onclickoutside": "^6.10.0", - "react-popper": "^1.3.8" + "react-onclickoutside": "^6.12.0", + "react-popper": "^2.2.5" }, "peerDependencies": { "react": "^16.9.0 || ^17", @@ -24439,19 +24402,16 @@ } }, "node_modules/react-popper": { - "version": "1.3.10", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.10.tgz", - "integrity": "sha512-sZfwHtHCMst0L0G/c83/Y/K1f9fNWMEKsk/cGAor68rQBHB75WuDQ7k95tkce8QNaUHhg9uFXIJbZO0eWRvJbw==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", "dependencies": { - "@babel/runtime": "^7.1.2", - "@hypnosphi/create-react-context": "^0.3.1", - "popper.js": "^1.14.4", - "prop-types": "^15.6.1", - "typed-styles": "^0.0.7", + "react-fast-compare": "^3.0.1", "warning": "^4.0.2" }, "peerDependencies": { - "react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0" + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17" } }, "node_modules/react-redux": { @@ -24579,19 +24539,6 @@ "react-dom": ">=16.8.0" } }, - "node_modules/reactstrap/node_modules/react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", - "dependencies": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - }, - "peerDependencies": { - "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17" - } - }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -28947,11 +28894,6 @@ "underscore": "^1.12.1" } }, - "node_modules/typed-styles": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", - "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" - }, "node_modules/typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -33025,15 +32967,6 @@ "prop-types": "^15.7.2" } }, - "@hypnosphi/create-react-context": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz", - "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==", - "requires": { - "gud": "^1.0.0", - "warning": "^4.0.3" - } - }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -34559,18 +34492,6 @@ "@types/react": "*", "date-fns": "^2.0.1", "react-popper": "^2.2.5" - }, - "dependencies": { - "react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", - "dev": true, - "requires": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - } - } } }, "@types/react-dom": { @@ -41539,11 +41460,6 @@ "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==", "dev": true }, - "gud": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", - "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" - }, "gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", @@ -45898,11 +45814,6 @@ "ts-pnp": "^1.1.6" } }, - "popper.js": { - "version": "1.14.6", - "resolved": "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz", - "integrity": "sha1-qyDdTt+SiLiztlMcR8NhEHtgtLA=" - }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -50125,15 +50036,16 @@ } }, "react-datepicker": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.6.0.tgz", - "integrity": "sha512-QCCtC1Y5kXZSbULbP33P2p0yTU+0Det7eBFABVM2k6AqdIvyBHVkO/hlq2WDeHlPtaf+DEniCIYjrv2BFdUMHw==", + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz", + "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==", "requires": { + "@popperjs/core": "^2.9.2", "classnames": "^2.2.6", - "date-fns": "^2.0.1", + "date-fns": "^2.24.0", "prop-types": "^15.7.2", - "react-onclickoutside": "^6.10.0", - "react-popper": "^1.3.8" + "react-onclickoutside": "^6.12.0", + "react-popper": "^2.2.5" } }, "react-dev-utils": { @@ -50376,15 +50288,11 @@ "requires": {} }, "react-popper": { - "version": "1.3.10", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.10.tgz", - "integrity": "sha512-sZfwHtHCMst0L0G/c83/Y/K1f9fNWMEKsk/cGAor68rQBHB75WuDQ7k95tkce8QNaUHhg9uFXIJbZO0eWRvJbw==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", "requires": { - "@babel/runtime": "^7.1.2", - "@hypnosphi/create-react-context": "^0.3.1", - "popper.js": "^1.14.4", - "prop-types": "^15.6.1", - "typed-styles": "^0.0.7", + "react-fast-compare": "^3.0.1", "warning": "^4.0.2" } }, @@ -50477,17 +50385,6 @@ "prop-types": "^15.5.8", "react-popper": "^2.2.4", "react-transition-group": "^4.4.2" - }, - "dependencies": { - "react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", - "requires": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - } - } } }, "read-pkg": { @@ -53913,11 +53810,6 @@ "underscore": "^1.12.1" } }, - "typed-styles": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", - "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" - }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", diff --git a/package.json b/package.json index c222e138..c9a19f8a 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "react-chartjs-2": "^3.3.0", "react-colorful": "^5.5.1", "react-copy-to-clipboard": "^5.0.4", - "react-datepicker": "^3.6.0", + "react-datepicker": "^4.7.0", "react-dom": "^17.0.2", "react-external-link": "^1.2.2", "react-leaflet": "^3.2.5", diff --git a/src/utils/DateInput.scss b/src/utils/DateInput.scss index b6de89b3..8c0877b8 100644 --- a/src/utils/DateInput.scss +++ b/src/utils/DateInput.scss @@ -88,8 +88,9 @@ z-index: 2; &[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle { - border-top-color: var(--primary-color); - border-bottom-color: var(--border-color); + &::after { + border-top-color: var(--primary-color); + } &::before { border-top-color: var(--border-color); @@ -97,8 +98,9 @@ } &[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle { - border-top-color: var(--border-color); - border-bottom-color: var(--secondary-color); + &::after { + border-bottom-color: var(--secondary-color); + } &::before { border-bottom-color: var(--border-color); diff --git a/src/utils/InfoTooltip.tsx b/src/utils/InfoTooltip.tsx index c7cffd25..fead3f4b 100644 --- a/src/utils/InfoTooltip.tsx +++ b/src/utils/InfoTooltip.tsx @@ -1,12 +1,12 @@ import { FC, useRef } from 'react'; -import * as Popper from 'popper.js'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; import { UncontrolledTooltip } from 'reactstrap'; +import { Placement } from '@popperjs/core'; interface InfoTooltipProps { className?: string; - placement: Popper.Placement; + placement: Placement; } export const InfoTooltip: FC = ({ className = '', placement, children }) => { From 8a1edfe7cf13f738a48ad3ceae8ae812213cf175 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 11 Mar 2022 17:23:43 +0100 Subject: [PATCH 2/2] Fixed usage of old module in InfoTooltip test --- test/utils/InfoTooltip.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/utils/InfoTooltip.test.tsx b/test/utils/InfoTooltip.test.tsx index aacd574c..bce776a5 100644 --- a/test/utils/InfoTooltip.test.tsx +++ b/test/utils/InfoTooltip.test.tsx @@ -1,6 +1,6 @@ import { shallow } from 'enzyme'; import { UncontrolledTooltip } from 'reactstrap'; -import Popper from 'popper.js'; +import { Placement } from '@popperjs/core'; import { InfoTooltip } from '../../src/utils/InfoTooltip'; describe('', () => { @@ -28,10 +28,10 @@ describe('', () => { }); it.each([ - [ 'right' as Popper.Placement ], - [ 'left' as Popper.Placement ], - [ 'top' as Popper.Placement ], - [ 'bottom' as Popper.Placement ], + [ 'right' as Placement ], + [ 'left' as Placement ], + [ 'top' as Placement ], + [ 'bottom' as Placement ], ])('places tooltip where requested', (placement) => { const wrapper = shallow(); const tooltip = wrapper.find(UncontrolledTooltip);