From 671b31931578d28a88617aebdaf7fe6a592967ef Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 20 Nov 2020 08:12:42 +0100 Subject: [PATCH] Fix warnings for conflicting style rules (#29249) * Bump popper * Bump react-transition group * Fix react conflicting style ruls warning * Fix ts --- package.json | 7 ++-- packages/grafana-ui/package.json | 7 ++-- .../components/DataLinks/DataLinkInput.tsx | 24 ++++++++++--- .../src/components/Tooltip/Popover.tsx | 24 ++++++------- .../app/core/components/Animations/FadeIn.tsx | 2 +- yarn.lock | 36 ++++++++++++++++--- 6 files changed, 72 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index f464f60812f..c6aed20af7e 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "@types/react-redux": "7.1.7", "@types/react-select": "3.0.8", "@types/react-test-renderer": "16.9.2", - "@types/react-transition-group": "4.2.4", + "@types/react-transition-group": "4.4.0", "@types/react-window": "1.8.1", "@types/redux-logger": "3.0.7", "@types/redux-mock-store": "1.0.2", @@ -207,6 +207,7 @@ }, "dependencies": { "@grafana/slate-react": "0.22.9-grafana", + "@popperjs/core": "2.5.4", "@reduxjs/toolkit": "1.3.4", "@sentry/browser": "5.25.0", "@sentry/types": "5.24.2", @@ -269,12 +270,12 @@ "react-grid-layout": "0.17.1", "react-highlight-words": "0.16.0", "react-loadable": "5.5.0", - "react-popper": "1.3.3", + "react-popper": "2.2.4", "react-redux": "7.2.0", "react-reverse-portal": "^2.0.1", "react-sizeme": "2.6.12", "react-split-pane": "0.1.89", - "react-transition-group": "4.3.0", + "react-transition-group": "4.4.1", "react-use": "13.27.0", "react-virtualized-auto-sizer": "1.0.2", "react-window": "1.8.5", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 77a872c2514..b10ea7e0aad 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -32,6 +32,7 @@ "@grafana/slate-react": "0.22.9-grafana", "@grafana/tsconfig": "^1.0.0-rc1", "@iconscout/react-unicons": "1.1.4", + "@popperjs/core": "2.5.4", "@torkelo/react-select": "3.0.8", "@types/hoist-non-react-statics": "3.3.1", "@types/react-beautiful-dnd": "12.1.2", @@ -64,10 +65,10 @@ "react-highlight-words": "0.16.0", "react-hook-form": "5.1.3", "react-monaco-editor": "0.36.0", - "react-popper": "1.3.3", + "react-popper": "2.2.4", "react-storybook-addon-props-combinations": "1.1.0", "react-table": "7.0.0", - "react-transition-group": "4.3.0", + "react-transition-group": "4.4.1", "slate": "0.47.8", "tinycolor2": "1.4.1", "uplot": "1.3.0" @@ -95,7 +96,7 @@ "@types/react": "16.9.9", "@types/react-custom-scrollbars": "4.0.5", "@types/react-test-renderer": "16.9.2", - "@types/react-transition-group": "4.2.4", + "@types/react-transition-group": "4.4.0", "@types/rollup-plugin-visualizer": "2.6.0", "@types/tinycolor2": "1.4.1", "common-tags": "^1.8.0", diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx index ba4d9ccbee3..821cde4c7ce 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx @@ -149,11 +149,25 @@ export const DataLinkInput: React.FC = memo( {({ ref, style, placement }) => { return ( diff --git a/packages/grafana-ui/src/components/Tooltip/Popover.tsx b/packages/grafana-ui/src/components/Tooltip/Popover.tsx index 49daf9c589e..52b66a0222d 100644 --- a/packages/grafana-ui/src/components/Tooltip/Popover.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Popover.tsx @@ -6,7 +6,9 @@ import Transition from 'react-transition-group/Transition'; import { PopoverContent } from './Tooltip'; const defaultTransitionStyles = { - transition: 'opacity 200ms linear', + transitionProperty: 'opacity', + transitionDuration: '200ms', + transitionTimingFunction: 'linear', opacity: 0, }; @@ -26,14 +28,9 @@ interface Props extends React.HTMLAttributes { referenceElement: PopperJS.ReferenceObject; wrapperClassName?: string; renderArrow?: RenderPopperArrowFn; - eventsEnabled?: boolean; } class Popover extends PureComponent { - static defaultProps: Partial = { - eventsEnabled: true, - }; - render() { const { content, @@ -45,7 +42,6 @@ class Popover extends PureComponent { wrapperClassName, renderArrow, referenceElement, - eventsEnabled, } = this.props; return ( @@ -57,11 +53,15 @@ class Popover extends PureComponent { - {({ ref, style, placement, arrowProps, scheduleUpdate }) => { + {({ ref, style, placement, arrowProps, update }) => { return (
{ {React.isValidElement(content) && React.cloneElement(content)} {typeof content === 'function' && content({ - updatePopperPosition: scheduleUpdate, + updatePopperPosition: update, })} {renderArrow && renderArrow({ diff --git a/public/app/core/components/Animations/FadeIn.tsx b/public/app/core/components/Animations/FadeIn.tsx index a782a418b3c..30d02f3171d 100644 --- a/public/app/core/components/Animations/FadeIn.tsx +++ b/public/app/core/components/Animations/FadeIn.tsx @@ -6,7 +6,7 @@ interface Props { children: JSX.Element; in: boolean; unmountOnExit?: boolean; - onExited?: ExitHandler; + onExited?: ExitHandler; } export const FadeIn: FC = props => { diff --git a/yarn.lock b/yarn.lock index 29a6db459e4..6c439642334 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5005,6 +5005,11 @@ once "^1.4.0" universal-user-agent "^4.0.0" +"@popperjs/core@2.5.4": + version "2.5.4" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a" + integrity sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ== + "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf" @@ -6919,10 +6924,10 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@4.2.4": - version "4.2.4" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d" - integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA== +"@types/react-transition-group@4.4.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d" + integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w== dependencies: "@types/react" "*" @@ -22566,6 +22571,11 @@ react-fast-compare@^2.0.4: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== +react-fast-compare@^3.0.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + react-focus-lock@^2.1.0: version "2.2.1" resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a" @@ -22726,6 +22736,14 @@ react-popper@1.3.3: typed-styles "^0.0.7" warning "^4.0.2" +react-popper@2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.4.tgz#d2ad3d2474ac9f1abf93df3099d408e5aa6a2e22" + integrity sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew== + dependencies: + react-fast-compare "^3.0.1" + warning "^4.0.2" + react-popper@^1.3.4: version "1.3.4" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.4.tgz#f0cd3b0d30378e1f663b0d79bcc8614221652ced" @@ -22902,6 +22920,16 @@ react-transition-group@4.3.0, react-transition-group@^4.3.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-transition-group@4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" + integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-transition-group@^2.2.1: version "2.9.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"