@atlaskit/editor-common 111.13.1 → 111.14.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-common
 
+## 111.14.0
+
+### Minor Changes
+
+- [`a287a6035ed71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a287a6035ed71) -
+  [EDITOR-5005] export VanillaTooltip from the editor-common package and update references
+
 ## 111.13.1
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "111.13.0";
+var packageVersion = "111.13.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "111.13.0";
+var packageVersion = "111.13.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/vanilla-tooltip/index.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VanillaTooltip = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@popperjs/core");
+var _bindEventListener = require("bind-event-listener");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var startingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+};
+var endingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+};
+
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ */
+var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
+  function VanillaTooltip(button, content,
+  /**
+   * Id associated to the tooltip - must be unique.
+   */
+  id,
+  /**
+   * Class Name – used for styling.
+   */
+  className) {
+    var _this = this;
+    var timeout = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 300;
+    (0, _classCallCheck2.default)(this, VanillaTooltip);
+    (0, _defineProperty2.default)(this, "listeners", []);
+    (0, _defineProperty2.default)(this, "shouldHidePopover", false);
+    (0, _defineProperty2.default)(this, "isDisplayed", false);
+    this.button = button;
+    this.timeout = timeout;
+    var tooltip = document.createElement('span');
+    tooltip.role = 'tooltip';
+    tooltip.popover = 'hint';
+    tooltip.className = className;
+    tooltip.id = id;
+    tooltip.textContent = content;
+    this.tooltip = tooltip;
+
+    // Button preparation
+    button.appendChild(tooltip);
+    // Prepare the button to have the popover target and accessibility properties
+    button.setAttribute('popovertarget', tooltip.id);
+    button.setAttribute('aria-describedby', tooltip.id);
+    var showEvents = ['mouseenter', 'focus'];
+    var hideEvents = ['mouseleave', 'blur'];
+    showEvents.forEach(function (event) {
+      _this.listeners.push((0, _bindEventListener.bind)(button, {
+        type: event,
+        listener: function listener() {
+          return _this.show();
+        }
+      }));
+    });
+    hideEvents.forEach(function (event) {
+      _this.listeners.push((0, _bindEventListener.bind)(button, {
+        type: event,
+        listener: function listener() {
+          return _this.hide();
+        }
+      }));
+    });
+    this.listeners.push((0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: function listener(e) {
+        if (e.key === 'Escape') {
+          _this.hide(true);
+        }
+      }
+    }));
+
+    // Hide the tooltip if the hide transition has completed
+    this.tooltip.ontransitionend = function () {
+      if (_this.shouldHidePopover) {
+        _this.tooltip.hidePopover();
+      }
+    };
+  }
+  return (0, _createClass2.default)(VanillaTooltip, [{
+    key: "createPopperInstance",
+    value: function createPopperInstance() {
+      this.popperInstance = (0, _core.createPopper)(this.button, this.tooltip, {
+        placement: 'top',
+        modifiers: [startingOffset]
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$popperInstance;
+      (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
+      this.listeners.forEach(function (listener) {
+        listener();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+      var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = true;
+      // Disable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this2$popperInstance;
+        (_this2$popperInstance = _this2.popperInstance) === null || _this2$popperInstance === void 0 || _this2$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [startingOffset, {
+              name: 'eventListeners',
+              enabled: false
+            }]
+          });
+        });
+        _this2.tooltip.style.opacity = '0';
+        _this2.isDisplayed = false;
+        // If transition animations are disabled immediately hide the popover
+        if (_this2.tooltip.style.transition === 'none') {
+          _this2.tooltip.hidePopover();
+        }
+      }, immediate ? 0 : this.timeout);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var _this3 = this;
+      if (this.isDisplayed) {
+        return;
+      }
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = false;
+
+      // Make the tooltip visible - but hide until
+      this.tooltip.style.visibility = 'hidden';
+      this.tooltip.showPopover();
+
+      // Update its position
+      if (!this.popperInstance) {
+        this.createPopperInstance();
+      } else {
+        this.popperInstance.update();
+      }
+
+      // Enable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this3$popperInstance;
+        _this3.tooltip.style.opacity = '1';
+        _this3.tooltip.style.visibility = 'visible';
+        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [endingOffset, {
+              name: 'eventListeners',
+              enabled: true
+            }]
+          });
+        });
+        _this3.isDisplayed = true;
+      }, this.timeout);
+    }
+  }]);
+}();

package/dist/es2019/monitoring/error.js

@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "111.13.0";
+const packageVersion = "111.13.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/ui/DropList/index.js

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "111.13.0";
+const packageVersion = "111.13.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/vanilla-tooltip/index.js

@@ -0,0 +1,148 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { createPopper } from '@popperjs/core';
+import { bind } from 'bind-event-listener';
+const startingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+};
+const endingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+};
+
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ */
+export class VanillaTooltip {
+  constructor(button, content,
+  /**
+   * Id associated to the tooltip - must be unique.
+   */
+  id,
+  /**
+   * Class Name – used for styling.
+   */
+  className, timeout = 300) {
+    _defineProperty(this, "listeners", []);
+    _defineProperty(this, "shouldHidePopover", false);
+    _defineProperty(this, "isDisplayed", false);
+    this.button = button;
+    this.timeout = timeout;
+    const tooltip = document.createElement('span');
+    tooltip.role = 'tooltip';
+    tooltip.popover = 'hint';
+    tooltip.className = className;
+    tooltip.id = id;
+    tooltip.textContent = content;
+    this.tooltip = tooltip;
+
+    // Button preparation
+    button.appendChild(tooltip);
+    // Prepare the button to have the popover target and accessibility properties
+    button.setAttribute('popovertarget', tooltip.id);
+    button.setAttribute('aria-describedby', tooltip.id);
+    const showEvents = ['mouseenter', 'focus'];
+    const hideEvents = ['mouseleave', 'blur'];
+    showEvents.forEach(event => {
+      this.listeners.push(bind(button, {
+        type: event,
+        listener: () => this.show()
+      }));
+    });
+    hideEvents.forEach(event => {
+      this.listeners.push(bind(button, {
+        type: event,
+        listener: () => this.hide()
+      }));
+    });
+    this.listeners.push(bind(window, {
+      type: 'keydown',
+      listener: e => {
+        if (e.key === 'Escape') {
+          this.hide(true);
+        }
+      }
+    }));
+
+    // Hide the tooltip if the hide transition has completed
+    this.tooltip.ontransitionend = () => {
+      if (this.shouldHidePopover) {
+        this.tooltip.hidePopover();
+      }
+    };
+  }
+  createPopperInstance() {
+    this.popperInstance = createPopper(this.button, this.tooltip, {
+      placement: 'top',
+      modifiers: [startingOffset]
+    });
+  }
+  destroy() {
+    var _this$popperInstance;
+    (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 ? void 0 : _this$popperInstance.destroy();
+    this.listeners.forEach(listener => {
+      listener();
+    });
+  }
+  hide(immediate = false) {
+    clearTimeout(this.currentTimeoutId);
+    this.shouldHidePopover = true;
+    // Disable the event listeners
+    this.currentTimeoutId = setTimeout(() => {
+      var _this$popperInstance2;
+      (_this$popperInstance2 = this.popperInstance) === null || _this$popperInstance2 === void 0 ? void 0 : _this$popperInstance2.setOptions(options => ({
+        ...options,
+        modifiers: [startingOffset, {
+          name: 'eventListeners',
+          enabled: false
+        }]
+      }));
+      this.tooltip.style.opacity = '0';
+      this.isDisplayed = false;
+      // If transition animations are disabled immediately hide the popover
+      if (this.tooltip.style.transition === 'none') {
+        this.tooltip.hidePopover();
+      }
+    }, immediate ? 0 : this.timeout);
+  }
+  show() {
+    if (this.isDisplayed) {
+      return;
+    }
+    clearTimeout(this.currentTimeoutId);
+    this.shouldHidePopover = false;
+
+    // Make the tooltip visible - but hide until
+    this.tooltip.style.visibility = 'hidden';
+    this.tooltip.showPopover();
+
+    // Update its position
+    if (!this.popperInstance) {
+      this.createPopperInstance();
+    } else {
+      this.popperInstance.update();
+    }
+
+    // Enable the event listeners
+    this.currentTimeoutId = setTimeout(() => {
+      var _this$popperInstance3;
+      this.tooltip.style.opacity = '1';
+      this.tooltip.style.visibility = 'visible';
+      (_this$popperInstance3 = this.popperInstance) === null || _this$popperInstance3 === void 0 ? void 0 : _this$popperInstance3.setOptions(options => ({
+        ...options,
+        modifiers: [endingOffset, {
+          name: 'eventListeners',
+          enabled: true
+        }]
+      }));
+      this.isDisplayed = true;
+    }, this.timeout);
+  }
+}

package/dist/esm/monitoring/error.js

@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "111.13.0";
+var packageVersion = "111.13.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "111.13.0";
+var packageVersion = "111.13.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/esm/vanilla-tooltip/index.js

@@ -0,0 +1,173 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { createPopper } from '@popperjs/core';
+import { bind } from 'bind-event-listener';
+var startingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+};
+var endingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+};
+
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ */
+export var VanillaTooltip = /*#__PURE__*/function () {
+  function VanillaTooltip(button, content,
+  /**
+   * Id associated to the tooltip - must be unique.
+   */
+  id,
+  /**
+   * Class Name – used for styling.
+   */
+  className) {
+    var _this = this;
+    var timeout = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 300;
+    _classCallCheck(this, VanillaTooltip);
+    _defineProperty(this, "listeners", []);
+    _defineProperty(this, "shouldHidePopover", false);
+    _defineProperty(this, "isDisplayed", false);
+    this.button = button;
+    this.timeout = timeout;
+    var tooltip = document.createElement('span');
+    tooltip.role = 'tooltip';
+    tooltip.popover = 'hint';
+    tooltip.className = className;
+    tooltip.id = id;
+    tooltip.textContent = content;
+    this.tooltip = tooltip;
+
+    // Button preparation
+    button.appendChild(tooltip);
+    // Prepare the button to have the popover target and accessibility properties
+    button.setAttribute('popovertarget', tooltip.id);
+    button.setAttribute('aria-describedby', tooltip.id);
+    var showEvents = ['mouseenter', 'focus'];
+    var hideEvents = ['mouseleave', 'blur'];
+    showEvents.forEach(function (event) {
+      _this.listeners.push(bind(button, {
+        type: event,
+        listener: function listener() {
+          return _this.show();
+        }
+      }));
+    });
+    hideEvents.forEach(function (event) {
+      _this.listeners.push(bind(button, {
+        type: event,
+        listener: function listener() {
+          return _this.hide();
+        }
+      }));
+    });
+    this.listeners.push(bind(window, {
+      type: 'keydown',
+      listener: function listener(e) {
+        if (e.key === 'Escape') {
+          _this.hide(true);
+        }
+      }
+    }));
+
+    // Hide the tooltip if the hide transition has completed
+    this.tooltip.ontransitionend = function () {
+      if (_this.shouldHidePopover) {
+        _this.tooltip.hidePopover();
+      }
+    };
+  }
+  return _createClass(VanillaTooltip, [{
+    key: "createPopperInstance",
+    value: function createPopperInstance() {
+      this.popperInstance = createPopper(this.button, this.tooltip, {
+        placement: 'top',
+        modifiers: [startingOffset]
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$popperInstance;
+      (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
+      this.listeners.forEach(function (listener) {
+        listener();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+      var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = true;
+      // Disable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this2$popperInstance;
+        (_this2$popperInstance = _this2.popperInstance) === null || _this2$popperInstance === void 0 || _this2$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [startingOffset, {
+              name: 'eventListeners',
+              enabled: false
+            }]
+          });
+        });
+        _this2.tooltip.style.opacity = '0';
+        _this2.isDisplayed = false;
+        // If transition animations are disabled immediately hide the popover
+        if (_this2.tooltip.style.transition === 'none') {
+          _this2.tooltip.hidePopover();
+        }
+      }, immediate ? 0 : this.timeout);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var _this3 = this;
+      if (this.isDisplayed) {
+        return;
+      }
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = false;
+
+      // Make the tooltip visible - but hide until
+      this.tooltip.style.visibility = 'hidden';
+      this.tooltip.showPopover();
+
+      // Update its position
+      if (!this.popperInstance) {
+        this.createPopperInstance();
+      } else {
+        this.popperInstance.update();
+      }
+
+      // Enable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this3$popperInstance;
+        _this3.tooltip.style.opacity = '1';
+        _this3.tooltip.style.visibility = 'visible';
+        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [endingOffset, {
+              name: 'eventListeners',
+              enabled: true
+            }]
+          });
+        });
+        _this3.isDisplayed = true;
+      }, this.timeout);
+    }
+  }]);
+}();

package/dist/types/vanilla-tooltip/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ */
+export declare class VanillaTooltip {
+    private button;
+    private timeout;
+    private popperInstance;
+    private listeners;
+    private currentTimeoutId;
+    private shouldHidePopover;
+    private tooltip;
+    private isDisplayed;
+    constructor(button: HTMLButtonElement, content: string, 
+    /**
+     * Id associated to the tooltip - must be unique.
+     */
+    id: string, 
+    /**
+     * Class Name – used for styling.
+     */
+    className: string, timeout?: number);
+    private createPopperInstance;
+    destroy(): void;
+    private hide;
+    private show;
+}

package/dist/types-ts4.5/vanilla-tooltip/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ */
+export declare class VanillaTooltip {
+    private button;
+    private timeout;
+    private popperInstance;
+    private listeners;
+    private currentTimeoutId;
+    private shouldHidePopover;
+    private tooltip;
+    private isDisplayed;
+    constructor(button: HTMLButtonElement, content: string, 
+    /**
+     * Id associated to the tooltip - must be unique.
+     */
+    id: string, 
+    /**
+     * Class Name – used for styling.
+     */
+    className: string, timeout?: number);
+    private createPopperInstance;
+    destroy(): void;
+    private hide;
+    private show;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "111.13.1",
+	"version": "111.14.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -88,6 +88,7 @@
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"@emotion/react": "^11.7.1",
+		"@popperjs/core": "^2.11.8",
 		"@sentry/browser": "^6.18.2",
 		"@sentry/integrations": "^6.18.2",
 		"@sentry/types": "^6.18.2",

package/vanilla-tooltip/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/editor-common/vanilla-tooltip",
+  "main": "../dist/cjs/vanilla-tooltip/index.js",
+  "module": "../dist/esm/vanilla-tooltip/index.js",
+  "module:es2019": "../dist/es2019/vanilla-tooltip/index.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/vanilla-tooltip/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/vanilla-tooltip/index.d.ts"
+      ]
+    }
+  }
+}