Merge branch 'master' of https://github.com/grafana/grafana into piechart-react

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -1,6 +1,6 @@
 import React, { Component, createRef } from 'react';
-import PopperController from '../Tooltip/PopperController';
-import Popper from '../Tooltip/Popper';
+import { PopperController } from '../Tooltip/PopperController';
+import { Popper } from '../Tooltip/Popper';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { Themeable } from '../../types';
 import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -53,7 +53,7 @@ class Popper extends PureComponent<Props> {
                   // TODO: move modifiers config to popper controller
                   modifiers={{ preventOverflow: { enabled: true, boundariesElement: 'window' } }}
                 >
-                  {({ ref, style, placement, arrowProps }) => {
+                  {({ ref, style, placement, arrowProps, scheduleUpdate }) => {
                     return (
                       <div
                         onMouseEnter={onMouseEnter}
@@ -68,7 +68,12 @@ class Popper extends PureComponent<Props> {
                         className={`${wrapperClassName}`}
                       >
                         <div className={className}>
-                          {typeof content === 'string' ? content : React.cloneElement(content)}
+                          {typeof content === 'string' && content}
+                          {React.isValidElement(content) && React.cloneElement(content)}
+                          {typeof content === 'function' &&
+                            content({
+                              updatePopperPosition: scheduleUpdate,
+                            })}
                           {renderArrow &&
                             renderArrow({
                               arrowProps,
@@ -88,4 +93,4 @@ class Popper extends PureComponent<Props> {
   }
 }
 
-export default Popper;
+export { Popper };

packages/grafana-ui/src/components/Tooltip/PopperController.tsx

@@ -7,7 +7,7 @@ export interface PopperContentProps {
   updatePopperPosition?: () => void;
 }
 
-export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T>;
+export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T> | ((props: T) => JSX.Element);
 
 export interface UsingPopperProps {
   show?: boolean;
@@ -101,4 +101,4 @@ class PopperController extends React.Component<Props, State> {
   }
 }
 
-export default PopperController;
+export { PopperController };

packages/grafana-ui/src/components/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import * as PopperJS from 'popper.js';
-import Popper from './Popper';
-import PopperController, { UsingPopperProps } from './PopperController';
+import { Popper } from './Popper';
+import { PopperController, UsingPopperProps } from './PopperController';
 
 interface TooltipProps extends UsingPopperProps {
   theme?: 'info' | 'error';

packages/grafana-ui/src/components/index.ts

@@ -1,5 +1,7 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
+export { PopperController } from './Tooltip/PopperController';
+export { Popper } from './Tooltip/Popper';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';