Fix: reverted back to `import * as module` instead of using namespaces (#23069)

* Removed namespace declaration to prevent issues with external plugins.

* fixed imports and tests.

packages/grafana-data/src/datetime/datemath.test.ts

 import sinon, { SinonFakeTimers } from 'sinon';
 import sinon, { SinonFakeTimers } from 'sinon';
 import each from 'lodash/each';
 import each from 'lodash/each';
 
 
-import { dateMath } from './datemath';
+import * as dateMath from './datemath';
 import { dateTime, DurationUnit, DateTime } from './moment_wrapper';
 import { dateTime, DurationUnit, DateTime } from './moment_wrapper';
 
 
 describe('DateMath', () => {
 describe('DateMath', () => {

packages/grafana-data/src/datetime/datemath.ts

@@ -5,161 +5,158 @@ import { TimeZone } from '../types/index';
 
 
 const units: DurationUnit[] = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
 const units: DurationUnit[] = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
 
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace dateMath {
-  export function isMathString(text: string | DateTime | Date): boolean {
-    if (!text) {
-      return false;
-    }
+export function isMathString(text: string | DateTime | Date): boolean {
+  if (!text) {
+    return false;
+  }
 
 
-    if (typeof text === 'string' && (text.substring(0, 3) === 'now' || text.includes('||'))) {
-      return true;
-    } else {
-      return false;
-    }
+  if (typeof text === 'string' && (text.substring(0, 3) === 'now' || text.includes('||'))) {
+    return true;
+  } else {
+    return false;
   }
   }
+}
 
 
-  /**
-   * Parses different types input to a moment instance. There is a specific formatting language that can be used
-   * if text arg is string. See unit tests for examples.
-   * @param text
-   * @param roundUp See parseDateMath function.
-   * @param timezone Only string 'utc' is acceptable here, for anything else, local timezone is used.
-   */
-  export function parse(
-    text?: string | DateTime | Date | null,
-    roundUp?: boolean,
-    timezone?: TimeZone
-  ): DateTime | undefined {
-    if (!text) {
-      return undefined;
-    }
+/**
+ * Parses different types input to a moment instance. There is a specific formatting language that can be used
+ * if text arg is string. See unit tests for examples.
+ * @param text
+ * @param roundUp See parseDateMath function.
+ * @param timezone Only string 'utc' is acceptable here, for anything else, local timezone is used.
+ */
+export function parse(
+  text?: string | DateTime | Date | null,
+  roundUp?: boolean,
+  timezone?: TimeZone
+): DateTime | undefined {
+  if (!text) {
+    return undefined;
+  }
 
 
-    if (typeof text !== 'string') {
-      if (isDateTime(text)) {
-        return text;
-      }
-      if (isDate(text)) {
-        return dateTime(text);
-      }
-      // We got some non string which is not a moment nor Date. TS should be able to check for that but not always.
-      return undefined;
+  if (typeof text !== 'string') {
+    if (isDateTime(text)) {
+      return text;
+    }
+    if (isDate(text)) {
+      return dateTime(text);
+    }
+    // We got some non string which is not a moment nor Date. TS should be able to check for that but not always.
+    return undefined;
+  } else {
+    let time;
+    let mathString = '';
+    let index;
+    let parseString;
+
+    if (text.substring(0, 3) === 'now') {
+      time = dateTimeForTimeZone(timezone);
+      mathString = text.substring('now'.length);
     } else {
     } else {
-      let time;
-      let mathString = '';
-      let index;
-      let parseString;
-
-      if (text.substring(0, 3) === 'now') {
-        time = dateTimeForTimeZone(timezone);
-        mathString = text.substring('now'.length);
+      index = text.indexOf('||');
+      if (index === -1) {
+        parseString = text;
+        mathString = ''; // nothing else
       } else {
       } else {
-        index = text.indexOf('||');
-        if (index === -1) {
-          parseString = text;
-          mathString = ''; // nothing else
-        } else {
-          parseString = text.substring(0, index);
-          mathString = text.substring(index + 2);
-        }
-        // We're going to just require ISO8601 timestamps, k?
-        time = dateTime(parseString, ISO_8601);
-      }
-
-      if (!mathString.length) {
-        return time;
+        parseString = text.substring(0, index);
+        mathString = text.substring(index + 2);
       }
       }
-
-      return parseDateMath(mathString, time, roundUp);
+      // We're going to just require ISO8601 timestamps, k?
+      time = dateTime(parseString, ISO_8601);
     }
     }
-  }
 
 
-  /**
-   * Checks if text is a valid date which in this context means that it is either a Moment instance or it can be parsed
-   * by parse function. See parse function to see what is considered acceptable.
-   * @param text
-   */
-  export function isValid(text: string | DateTime): boolean {
-    const date = parse(text);
-    if (!date) {
-      return false;
+    if (!mathString.length) {
+      return time;
     }
     }
 
 
-    if (isDateTime(date)) {
-      return date.isValid();
-    }
+    return parseDateMath(mathString, time, roundUp);
+  }
+}
 
 
+/**
+ * Checks if text is a valid date which in this context means that it is either a Moment instance or it can be parsed
+ * by parse function. See parse function to see what is considered acceptable.
+ * @param text
+ */
+export function isValid(text: string | DateTime): boolean {
+  const date = parse(text);
+  if (!date) {
     return false;
     return false;
   }
   }
 
 
-  /**
-   * Parses math part of the time string and shifts supplied time according to that math. See unit tests for examples.
-   * @param mathString
-   * @param time
-   * @param roundUp If true it will round the time to endOf time unit, otherwise to startOf time unit.
-   */
-  // TODO: Had to revert Andrejs `time: moment.Moment` to `time: any`
-  export function parseDateMath(mathString: string, time: any, roundUp?: boolean): DateTime | undefined {
-    const strippedMathString = mathString.replace(/\s/g, '');
-    const dateTime = time;
-    let i = 0;
-    const len = strippedMathString.length;
-
-    while (i < len) {
-      const c = strippedMathString.charAt(i++);
-      let type;
-      let num;
-      let unit;
-
-      if (c === '/') {
-        type = 0;
-      } else if (c === '+') {
-        type = 1;
-      } else if (c === '-') {
-        type = 2;
-      } else {
-        return undefined;
-      }
+  if (isDateTime(date)) {
+    return date.isValid();
+  }
 
 
-      if (isNaN(parseInt(strippedMathString.charAt(i), 10))) {
-        num = 1;
-      } else if (strippedMathString.length === 2) {
-        num = strippedMathString.charAt(i);
-      } else {
-        const numFrom = i;
-        while (!isNaN(parseInt(strippedMathString.charAt(i), 10))) {
-          i++;
-          if (i > 10) {
-            return undefined;
-          }
-        }
-        num = parseInt(strippedMathString.substring(numFrom, i), 10);
-      }
+  return false;
+}
 
 
-      if (type === 0) {
-        // rounding is only allowed on whole, single, units (eg M or 1M, not 0.5M or 2M)
-        if (num !== 1) {
+/**
+ * Parses math part of the time string and shifts supplied time according to that math. See unit tests for examples.
+ * @param mathString
+ * @param time
+ * @param roundUp If true it will round the time to endOf time unit, otherwise to startOf time unit.
+ */
+// TODO: Had to revert Andrejs `time: moment.Moment` to `time: any`
+export function parseDateMath(mathString: string, time: any, roundUp?: boolean): DateTime | undefined {
+  const strippedMathString = mathString.replace(/\s/g, '');
+  const dateTime = time;
+  let i = 0;
+  const len = strippedMathString.length;
+
+  while (i < len) {
+    const c = strippedMathString.charAt(i++);
+    let type;
+    let num;
+    let unit;
+
+    if (c === '/') {
+      type = 0;
+    } else if (c === '+') {
+      type = 1;
+    } else if (c === '-') {
+      type = 2;
+    } else {
+      return undefined;
+    }
+
+    if (isNaN(parseInt(strippedMathString.charAt(i), 10))) {
+      num = 1;
+    } else if (strippedMathString.length === 2) {
+      num = strippedMathString.charAt(i);
+    } else {
+      const numFrom = i;
+      while (!isNaN(parseInt(strippedMathString.charAt(i), 10))) {
+        i++;
+        if (i > 10) {
           return undefined;
           return undefined;
         }
         }
       }
       }
-      unit = strippedMathString.charAt(i++);
+      num = parseInt(strippedMathString.substring(numFrom, i), 10);
+    }
 
 
-      if (!includes(units, unit)) {
+    if (type === 0) {
+      // rounding is only allowed on whole, single, units (eg M or 1M, not 0.5M or 2M)
+      if (num !== 1) {
         return undefined;
         return undefined;
-      } else {
-        if (type === 0) {
-          if (roundUp) {
-            dateTime.endOf(unit);
-          } else {
-            dateTime.startOf(unit);
-          }
-        } else if (type === 1) {
-          dateTime.add(num, unit);
-        } else if (type === 2) {
-          dateTime.subtract(num, unit);
+      }
+    }
+    unit = strippedMathString.charAt(i++);
+
+    if (!includes(units, unit)) {
+      return undefined;
+    } else {
+      if (type === 0) {
+        if (roundUp) {
+          dateTime.endOf(unit);
+        } else {
+          dateTime.startOf(unit);
         }
         }
+      } else if (type === 1) {
+        dateTime.add(num, unit);
+      } else if (type === 2) {
+        dateTime.subtract(num, unit);
       }
       }
     }
     }
-    return dateTime;
   }
   }
+  return dateTime;
 }
 }

packages/grafana-data/src/datetime/index.ts

 // Names are too general to export globally
 // Names are too general to export globally
-export { dateMath } from './datemath';
-export { rangeUtil } from './rangeutil';
+import * as dateMath from './datemath';
+import * as rangeUtil from './rangeutil';
 export * from './moment_wrapper';
 export * from './moment_wrapper';
 export * from './timezones';
 export * from './timezones';
 export * from './formats';
 export * from './formats';
+export { dateMath, rangeUtil };

packages/grafana-data/src/types/appEvents.ts

@@ -5,11 +5,8 @@ export interface AppEvent<T> {
   payload?: T;
   payload?: T;
 }
 }
 
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace AppEvents {
-  export type AlertPayload = [string, string?];
+export type AlertPayload = [string, string?];
 
 
-  export const alertSuccess = eventFactory<AlertPayload>('alert-success');
-  export const alertWarning = eventFactory<AlertPayload>('alert-warning');
-  export const alertError = eventFactory<AlertPayload>('alert-error');
-}
+export const alertSuccess = eventFactory<AlertPayload>('alert-success');
+export const alertWarning = eventFactory<AlertPayload>('alert-warning');
+export const alertError = eventFactory<AlertPayload>('alert-error');

packages/grafana-data/src/types/index.ts

@@ -24,5 +24,9 @@ export * from './theme';
 export * from './orgs';
 export * from './orgs';
 export * from './flot';
 export * from './flot';
 
 
-export { AppEvent, AppEvents } from './appEvents';
-export { PanelEvents } from './panelEvents';
+import * as AppEvents from './appEvents';
+import { AppEvent } from './appEvents';
+export { AppEvent, AppEvents };
+
+import * as PanelEvents from './panelEvents';
+export { PanelEvents };

packages/grafana-data/src/types/panelEvents.ts

@@ -2,28 +2,25 @@ import { eventFactory } from './utils';
 import { DataQueryError, DataQueryResponseData } from './datasource';
 import { DataQueryError, DataQueryResponseData } from './datasource';
 import { AngularPanelMenuItem } from './panel';
 import { AngularPanelMenuItem } from './panel';
 
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace PanelEvents {
-  /** Payloads */
-  export interface PanelChangeViewPayload {
-    fullscreen?: boolean;
-    edit?: boolean;
-    panelId?: number;
-    toggle?: boolean;
-  }
-
-  /** Events */
-  export const refresh = eventFactory('refresh');
-  export const componentDidMount = eventFactory('component-did-mount');
-  export const dataError = eventFactory<DataQueryError>('data-error');
-  export const dataReceived = eventFactory<DataQueryResponseData[]>('data-received');
-  export const dataSnapshotLoad = eventFactory<DataQueryResponseData[]>('data-snapshot-load');
-  export const editModeInitialized = eventFactory('init-edit-mode');
-  export const initPanelActions = eventFactory<AngularPanelMenuItem[]>('init-panel-actions');
-  export const panelChangeView = eventFactory<PanelChangeViewPayload>('panel-change-view');
-  export const panelInitialized = eventFactory('panel-initialized');
-  export const panelSizeChanged = eventFactory('panel-size-changed');
-  export const panelTeardown = eventFactory('panel-teardown');
-  export const render = eventFactory<any>('render');
-  export const viewModeChanged = eventFactory('view-mode-changed');
+/** Payloads */
+export interface PanelChangeViewPayload {
+  fullscreen?: boolean;
+  edit?: boolean;
+  panelId?: number;
+  toggle?: boolean;
 }
 }
+
+/** Events */
+export const refresh = eventFactory('refresh');
+export const componentDidMount = eventFactory('component-did-mount');
+export const dataError = eventFactory<DataQueryError>('data-error');
+export const dataReceived = eventFactory<DataQueryResponseData[]>('data-received');
+export const dataSnapshotLoad = eventFactory<DataQueryResponseData[]>('data-snapshot-load');
+export const editModeInitialized = eventFactory('init-edit-mode');
+export const initPanelActions = eventFactory<AngularPanelMenuItem[]>('init-panel-actions');
+export const panelChangeView = eventFactory<PanelChangeViewPayload>('panel-change-view');
+export const panelInitialized = eventFactory('panel-initialized');
+export const panelSizeChanged = eventFactory('panel-size-changed');
+export const panelTeardown = eventFactory('panel-teardown');
+export const render = eventFactory<any>('render');
+export const viewModeChanged = eventFactory('view-mode-changed');

packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { HorizontalGroup } from '../Layout/Layout';
 import { HorizontalGroup } from '../Layout/Layout';
 import Forms from '../Forms';
 import Forms from '../Forms';
 import { MappingType, RangeMap, ValueMap, ValueMapping } from '@grafana/data';
 import { MappingType, RangeMap, ValueMap, ValueMapping } from '@grafana/data';
-import { styleMixins } from '../../themes/mixins';
+import * as styleMixins from '../../themes/mixins';
 import { useTheme } from '../../themes';
 import { useTheme } from '../../themes';
 import { FieldConfigItemHeaderTitle } from '../FieldConfigs/FieldConfigItemHeaderTitle';
 import { FieldConfigItemHeaderTitle } from '../FieldConfigs/FieldConfigItemHeaderTitle';
 
 

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

@@ -3,4 +3,6 @@ import { getTheme, mockTheme } from './getTheme';
 import { selectThemeVariant } from './selectThemeVariant';
 import { selectThemeVariant } from './selectThemeVariant';
 export { stylesFactory } from './stylesFactory';
 export { stylesFactory } from './stylesFactory';
 export { ThemeContext, withTheme, mockTheme, getTheme, selectThemeVariant, useTheme, mockThemeContext };
 export { ThemeContext, withTheme, mockTheme, getTheme, selectThemeVariant, useTheme, mockThemeContext };
-export { styleMixins } from './mixins';
+
+import * as styleMixins from './mixins';
+export { styleMixins };

packages/grafana-ui/src/themes/mixins.ts

@@ -3,11 +3,9 @@ import { selectThemeVariant } from './selectThemeVariant';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { stylesFactory } from './stylesFactory';
 import { stylesFactory } from './stylesFactory';
 
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace styleMixins {
-  export function cardChrome(theme: GrafanaTheme): string {
-    if (theme.isDark) {
-      return `
+export function cardChrome(theme: GrafanaTheme): string {
+  if (theme.isDark) {
+    return `
        background: linear-gradient(135deg, ${theme.colors.dark8}, ${theme.colors.dark6});
        background: linear-gradient(135deg, ${theme.colors.dark8}, ${theme.colors.dark6});
        &:hover {
        &:hover {
          background: linear-gradient(135deg, ${theme.colors.dark9}, ${theme.colors.dark6});
          background: linear-gradient(135deg, ${theme.colors.dark9}, ${theme.colors.dark6});
@@ -15,9 +13,9 @@ export namespace styleMixins {
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
        border-radius: ${theme.border.radius.md};
        border-radius: ${theme.border.radius.md};
     `;
     `;
-    }
+  }
 
 
-    return `
+  return `
        background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray7});
        background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray7});
        &:hover {
        &:hover {
          background: linear-gradient(135deg, ${theme.colors.gray7}, ${theme.colors.gray6});
          background: linear-gradient(135deg, ${theme.colors.gray7}, ${theme.colors.gray6});
@@ -25,11 +23,11 @@ export namespace styleMixins {
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        border-radius: ${theme.border.radius.md};
        border-radius: ${theme.border.radius.md};
     `;
     `;
-  }
+}
 
 
-  export function listItem(theme: GrafanaTheme): string {
-    if (theme.isDark) {
-      return `
+export function listItem(theme: GrafanaTheme): string {
+  if (theme.isDark) {
+    return `
        background: ${theme.colors.dark7};
        background: ${theme.colors.dark7};
        &:hover {
        &:hover {
          background: ${theme.colors.dark9};
          background: ${theme.colors.dark9};
@@ -37,9 +35,9 @@ export namespace styleMixins {
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
        border-radius: ${theme.border.radius.md};
        border-radius: ${theme.border.radius.md};
     `;
     `;
-    }
+  }
 
 
-    return `
+  return `
        background: ${theme.colors.gray7};
        background: ${theme.colors.gray7};
        &:hover {
        &:hover {
          background: ${theme.colors.gray6};
          background: ${theme.colors.gray6};
@@ -47,55 +45,54 @@ export namespace styleMixins {
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        border-radius: ${theme.border.radius.md};
        border-radius: ${theme.border.radius.md};
     `;
     `;
-  }
+}
 
 
-  export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
-    const borderColor = selectThemeVariant(
-      {
-        light: theme.colors.gray85,
-        dark: theme.colors.dark9,
-      },
-      theme.type
-    );
-    const shadow = selectThemeVariant(
-      {
-        light: theme.colors.gray85,
-        dark: theme.colors.black,
-      },
-      theme.type
-    );
-    const headerBg = selectThemeVariant(
-      {
-        light: theme.colors.white,
-        dark: theme.colors.dark1,
-      },
-      theme.type
-    );
+export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
+  const borderColor = selectThemeVariant(
+    {
+      light: theme.colors.gray85,
+      dark: theme.colors.dark9,
+    },
+    theme.type
+  );
+  const shadow = selectThemeVariant(
+    {
+      light: theme.colors.gray85,
+      dark: theme.colors.black,
+    },
+    theme.type
+  );
+  const headerBg = selectThemeVariant(
+    {
+      light: theme.colors.white,
+      dark: theme.colors.dark1,
+    },
+    theme.type
+  );
 
 
-    return {
-      wrapper: css`
-        border: 1px dashed ${borderColor};
-        margin-bottom: ${theme.spacing.md};
-        transition: box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-        box-shadow: none;
-        &:hover {
-          box-shadow: 0 0 10px ${shadow};
-        }
-      `,
-      headerWrapper: css`
-        background: ${headerBg};
-        padding: ${theme.spacing.xs} 0;
-      `,
+  return {
+    wrapper: css`
+      border: 1px dashed ${borderColor};
+      margin-bottom: ${theme.spacing.md};
+      transition: box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+      box-shadow: none;
+      &:hover {
+        box-shadow: 0 0 10px ${shadow};
+      }
+    `,
+    headerWrapper: css`
+      background: ${headerBg};
+      padding: ${theme.spacing.xs} 0;
+    `,
 
 
-      content: css`
+    content: css`
         padding: ${theme.spacing.xs} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
         padding: ${theme.spacing.xs} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
         border-top: 1px dashed ${borderColor};
         border-top: 1px dashed ${borderColor};
         > *:last-child {
         > *:last-child {
           margin-bottom: 0;
           margin-bottom: 0;
       `,
       `,
-      itemContent: css`
-        padding: ${theme.spacing.xs} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
-      `,
-    };
-  });
-}
+    itemContent: css`
+      padding: ${theme.spacing.xs} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
+    `,
+  };
+});

packages/grafana-ui/src/utils/dom.ts

-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace DOMUtil {
-  // Node.closest() polyfill
-  if ('Element' in window && !Element.prototype.closest) {
-    Element.prototype.closest = function(this: any, s: string) {
-      const matches = (this.document || this.ownerDocument).querySelectorAll(s);
-      let el = this;
-      let i;
+// Node.closest() polyfill
+if ('Element' in window && !Element.prototype.closest) {
+  Element.prototype.closest = function(this: any, s: string) {
+    const matches = (this.document || this.ownerDocument).querySelectorAll(s);
+    let el = this;
+    let i;
+    // eslint-disable-next-line
+    do {
+      i = matches.length;
       // eslint-disable-next-line
       // eslint-disable-next-line
-      do {
-        i = matches.length;
-        // eslint-disable-next-line
-        while (--i >= 0 && matches.item(i) !== el) {}
-        el = el.parentElement;
-      } while (i < 0 && el);
-      return el;
-    };
-  }
+      while (--i >= 0 && matches.item(i) !== el) {}
+      el = el.parentElement;
+    } while (i < 0 && el);
+    return el;
+  };
+}
 
 
-  export function getPreviousCousin(node: any, selector: string) {
-    let sibling = node.parentElement.previousSibling;
-    let el;
-    while (sibling) {
-      el = sibling.querySelector(selector);
-      if (el) {
-        return el;
-      }
-      sibling = sibling.previousSibling;
+export function getPreviousCousin(node: any, selector: string) {
+  let sibling = node.parentElement.previousSibling;
+  let el;
+  while (sibling) {
+    el = sibling.querySelector(selector);
+    if (el) {
+      return el;
     }
     }
-    return undefined;
+    sibling = sibling.previousSibling;
   }
   }
+  return undefined;
+}
 
 
-  export function getNextCharacter(global?: any) {
-    const selection = (global || window).getSelection();
-    if (!selection || !selection.anchorNode) {
-      return null;
-    }
-
-    const range = selection.getRangeAt(0);
-    const text = selection.anchorNode.textContent;
-    const offset = range.startOffset;
-    return text!.substr(offset, 1);
+export function getNextCharacter(global?: any) {
+  const selection = (global || window).getSelection();
+  if (!selection || !selection.anchorNode) {
+    return null;
   }
   }
+
+  const range = selection.getRangeAt(0);
+  const text = selection.anchorNode.textContent;
+  const offset = range.startOffset;
+  return text!.substr(offset, 1);
 }
 }

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

@@ -6,5 +6,5 @@ export * from './tags';
 export * from './measureText';
 export * from './measureText';
 export { default as ansicolor } from './ansicolor';
 export { default as ansicolor } from './ansicolor';
 
 
-// Export with a namespace
-export { DOMUtil } from './dom'; // includes Element.closest polyfil
+import * as DOMUtil from './dom'; // includes Element.closest polyfil
+export { DOMUtil };