From 545d6c4ddb1619aff703626a116430e661d33d4b Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Thu, 23 Dec 2021 18:08:02 +0100
Subject: [PATCH] Chore: move closePopover utility to a standalone file
 (#43478)

* Chore: move close popover utility to a standalone file

* remove duplicate function in colorpicker

* fixed incorrect import

* make method slightly flexible by removing type parameter
---
 .../src/components/ColorPicker/ColorPicker.tsx  | 17 ++---------------
 .../src/components/Tooltip/Tooltip.tsx          | 14 +-------------
 packages/grafana-ui/src/utils/closePopover.ts   | 13 +++++++++++++
 3 files changed, 16 insertions(+), 28 deletions(-)
 create mode 100644 packages/grafana-ui/src/utils/closePopover.ts

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index 9e58b73af1f..4d96440b69b 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -8,6 +8,7 @@ import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 import { css } from '@emotion/css';
 import { withTheme2, stylesFactory } from '../../themes';
 import { ColorSwatch } from './ColorSwatch';
+import { closePopover } from '../../utils/closePopover';
 
 /**
  * If you need custom trigger for the color picker you can do that with a render prop pattern and supply a function
@@ -38,20 +39,6 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
       return changeHandler(color);
     };
 
-    stopPropagation = (event: React.KeyboardEvent<HTMLDivElement>, hidePopper: () => void) => {
-      if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      if (event.key === 'Escape') {
-        hidePopper();
-      }
-
-      return;
-    };
-
     render() {
       const { theme, children } = this.props;
       const styles = getStyles(theme);
@@ -72,7 +59,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                     wrapperClassName={styles.colorPicker}
                     onMouseLeave={hidePopper}
                     onMouseEnter={showPopper}
-                    onKeyDown={(event) => this.stopPropagation(event, hidePopper)}
+                    onKeyDown={(event) => closePopover(event, hidePopper)}
                   />
                 )}
 
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 3b33660dc1e..80de3ea5793 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -2,6 +2,7 @@ import React, { createRef, FC } from 'react';
 import { VirtualElement } from '@popperjs/core';
 import { Popover } from './Popover';
 import { PopoverController, UsingPopperProps } from './PopoverController';
+import { closePopover } from '../../utils/closePopover';
 
 export interface TooltipProps extends UsingPopperProps {
   theme?: 'info' | 'error' | 'info-alt';
@@ -16,19 +17,6 @@ export type PopoverContent = string | React.ReactElement<any> | ((props: Popover
 export const Tooltip: FC<TooltipProps> = React.memo(({ children, theme, ...controllerProps }: TooltipProps) => {
   const tooltipTriggerRef = createRef<HTMLElement | VirtualElement>();
   const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
-  const closePopover = (event: React.KeyboardEvent<HTMLDivElement>, hidePopper: () => void) => {
-    if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
-      return;
-    }
-
-    event.stopPropagation();
-
-    if (event.key === 'Escape') {
-      hidePopper();
-    }
-
-    return;
-  };
 
   return (
     <PopoverController {...controllerProps}>
diff --git a/packages/grafana-ui/src/utils/closePopover.ts b/packages/grafana-ui/src/utils/closePopover.ts
new file mode 100644
index 00000000000..7869bb8e2c2
--- /dev/null
+++ b/packages/grafana-ui/src/utils/closePopover.ts
@@ -0,0 +1,13 @@
+export const closePopover = (event: React.KeyboardEvent, hidePopper: () => void) => {
+  if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
+    return;
+  }
+
+  event.stopPropagation();
+
+  if (event.key === 'Escape') {
+    hidePopper();
+  }
+
+  return;
+};