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

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)}
                   />
                 )}
 

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}>

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;
+};