@atlaskit/editor-common 120.3.3 → 120.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 120.4.0
+
+### Minor Changes
+
+- [`d1701a4710adf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d1701a4710adf) -
+  EDITOR-8658 improve vanilla tooltip api
+
+  `VanillaTooltip` now accepts any `HTMLElement` as its trigger, generates its own tooltip id when
+  none is passed, and only binds its Escape listener while the tooltip is visible.
+
+  These changes are behind the `platform_editor_use_vanilla_components` experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 120.3.3
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "120.3.2";
+var packageVersion = "120.3.3";
 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 = "120.3.2";
+var packageVersion = "120.3.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

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

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@popperjs/core");
 var _bindEventListener = require("bind-event-listener");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _unsafeImperative = require("@atlaskit/popper/unsafe-imperative");
 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; }
@@ -26,6 +27,26 @@ var endingOffset = {
     offset: [0, 8]
   }
 };
+
+/**
+ * Namespaced to keep generated ids from colliding with ids the host page owns, since they share
+ * the document's single id space.
+ */
+var TOOLTIP_ID_PREFIX = 'ak-editor-internal-tooltip';
+
+/**
+ * Generates a tooltip id for `aria-describedby`/`popovertarget`.
+ *
+ * `crypto.randomUUID` covers effectively all production traffic
+ * The counter is only a fallback for environments without it (for example a non-secure context)
+ * and is scoped to this closure rather than module state.
+ */
+var generateTooltipId = function () {
+  var count = 0;
+  return function () {
+    return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "".concat(TOOLTIP_ID_PREFIX, "-").concat(crypto.randomUUID()) : "".concat(TOOLTIP_ID_PREFIX, "-").concat(count += 1);
+  };
+}();
 function getCreatePopper() {
   if ((0, _fg.fg)('platform-dst-popper-consolidation')) {
     return _unsafeImperative.createPopper;
@@ -40,9 +61,31 @@ function getCreatePopper() {
  * Uses popperJS for positioning
  */
 var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
-  function VanillaTooltip(button, content,
   /**
-   * Id associated to the tooltip - must be unique.
+   * Set only while this tooltip is on screen, so no listener is retained at rest.
+   */
+
+  function VanillaTooltip(
+  /**
+   * The element that the tooltip describes and Popper uses as its anchor.
+   *
+   * Prefer a `<button>`: it is focusable and announced by assistive tech for free, and is the
+   * only element the browser honours `popovertarget` on. Anything else works, since this
+   * class calls `showPopover()`/`hidePopover()` itself, but then make sure it:
+   *
+   * - **Renders its children**, as the tooltip is appended to the trigger. `<img>`, `<input>`
+   *   and `<br>` accept the append without error but never render it, leaving the tooltip
+   *   silently at zero size.
+   * - **Is reachable**, if keyboard and screen reader users need the tooltip — usually
+   *   `tabindex="0"` plus a role and accessible name, since `focus`/`blur` are bound to the
+   *   trigger and `aria-describedby` is set on it.
+   */
+  trigger, content,
+  /**
+   * Id associated to the tooltip - must be unique within the document.
+   *
+   * Pass `undefined` to have one generated, which is preferred: callers otherwise have to
+   * solve uniqueness themselves, and every consumer had solved it differently.
    */
   id,
   /**
@@ -69,29 +112,30 @@ var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "listeners", []);
     (0, _defineProperty2.default)(this, "shouldHidePopover", false);
     (0, _defineProperty2.default)(this, "isDisplayed", false);
-    this.button = button;
+    this.trigger = trigger;
     this.timeout = timeout;
     this.onShow = onShow;
-    var tooltip = document.createElement('span');
+    // Created in the trigger's own document rather than the global one, so nothing depends on
+    // the parent realm when the editor renders inside an iframe. Gated alongside the Escape
+    // listener's window so the whole iframe fix moves as a single unit.
+    var ownerDocument = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components') ? trigger.ownerDocument : document;
+    var tooltip = ownerDocument.createElement('span');
     tooltip.role = 'tooltip';
     tooltip.popover = 'hint';
     tooltip.className = className;
-    tooltip.id = id;
+    tooltip.id = id !== null && id !== void 0 ? id : generateTooltipId();
     tooltip.textContent = content;
     if (styles) {
       Object.assign(tooltip.style, styles);
     }
     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);
+    this.trigger.appendChild(tooltip);
+    this.trigger.setAttribute('popovertarget', tooltip.id);
+    this.trigger.setAttribute('aria-describedby', tooltip.id);
     var showEvents = ['mouseenter', 'focus'];
     var hideEvents = ['mouseleave', 'blur'];
     showEvents.forEach(function (event) {
-      _this.listeners.push((0, _bindEventListener.bind)(button, {
+      _this.listeners.push((0, _bindEventListener.bind)(_this.trigger, {
         type: event,
         listener: function listener() {
           return _this.show();
@@ -99,21 +143,26 @@ var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
       }));
     });
     hideEvents.forEach(function (event) {
-      _this.listeners.push((0, _bindEventListener.bind)(button, {
+      _this.listeners.push((0, _bindEventListener.bind)(_this.trigger, {
         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);
+
+    // Bound for this tooltip's whole lifetime, even while it is off screen. The experiment
+    // moves this to `show()` so nothing is retained at rest.
+    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
+      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 () {
@@ -125,7 +174,7 @@ var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
   return (0, _createClass2.default)(VanillaTooltip, [{
     key: "createPopperInstance",
     value: function createPopperInstance() {
-      this.popperInstance = getCreatePopper()(this.button, this.tooltip, {
+      this.popperInstance = getCreatePopper()(this.trigger, this.tooltip, {
         placement: 'top',
         modifiers: [startingOffset]
       });
@@ -137,22 +186,65 @@ var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
       // Cancels any pending show/hide, which would otherwise run against detached DOM and
       // invoke `onShow` after the owner has gone away.
       clearTimeout(this.currentTimeoutId);
+      // Destroying while visible must not leave the listener bound to a dead tooltip.
+      this.unbindEscapeListener();
       (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
       this.listeners.forEach(function (listener) {
         listener();
       });
     }
+
+    /**
+     * Starts listening for Escape to dismiss this tooltip.
+     *
+     * A tooltip only ever needs one Escape listener, so this does nothing when one is already
+     * bound.
+     */
+  }, {
+    key: "bindEscapeListener",
+    value: function bindEscapeListener() {
+      var _this$trigger$ownerDo,
+        _this2 = this;
+      if (this.unbindEscape) {
+        return;
+      }
+      this.unbindEscape = (0, _bindEventListener.bind)((_this$trigger$ownerDo = this.trigger.ownerDocument.defaultView) !== null && _this$trigger$ownerDo !== void 0 ? _this$trigger$ownerDo : window, {
+        type: 'keydown',
+        listener: function listener(e) {
+          if (e.key === 'Escape') {
+            _this2.hide(true);
+          }
+        }
+      });
+    }
+
+    /**
+     * Stops listening for Escape, so no listener is retained while this tooltip is off screen.
+     *
+     * Does nothing when no listener is bound.
+     */
+  }, {
+    key: "unbindEscapeListener",
+    value: function unbindEscapeListener() {
+      var _this$unbindEscape;
+      (_this$unbindEscape = this.unbindEscape) === null || _this$unbindEscape === void 0 || _this$unbindEscape.call(this);
+      this.unbindEscape = undefined;
+    }
   }, {
     key: "hide",
     value: function hide() {
-      var _this2 = this;
+      var _this3 = this;
       var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       clearTimeout(this.currentTimeoutId);
+
+      // Unbound synchronously so a repeated Escape does not re-enter this tooltip while the
+      // hide is still pending.
+      this.unbindEscapeListener();
       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) {
+        var _this3$popperInstance;
+        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
           return _objectSpread(_objectSpread({}, options), {}, {
             modifiers: [startingOffset, {
               name: 'eventListeners',
@@ -160,18 +252,25 @@ var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
             }]
           });
         });
-        _this2.tooltip.style.opacity = '0';
-        _this2.isDisplayed = false;
+        _this3.tooltip.style.opacity = '0';
+        _this3.isDisplayed = false;
         // If transition animations are disabled immediately hide the popover
-        if (_this2.tooltip.style.transition === 'none') {
-          _this2.tooltip.hidePopover();
+        if (_this3.tooltip.style.transition === 'none') {
+          _this3.tooltip.hidePopover();
         }
       }, immediate ? 0 : this.timeout);
     }
   }, {
     key: "show",
     value: function show() {
-      var _this3 = this;
+      var _this4 = this;
+      // Bound before the open delay so Escape can dismiss during it, and before the
+      // `isDisplayed` guard so re-hovering a tooltip whose hide is still pending (`hide()`
+      // unbinds synchronously, but the tooltip stays on screen until its timeout) restores
+      // Escape rather than leaving the visible tooltip undismissable.
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
+        this.bindEscapeListener();
+      }
       if (this.isDisplayed) {
         return;
       }
@@ -191,10 +290,10 @@ var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
 
       // Enable the event listeners
       this.currentTimeoutId = setTimeout(function () {
-        var _this3$popperInstance, _this3$onShow;
-        _this3.tooltip.style.opacity = '1';
-        _this3.tooltip.style.visibility = 'visible';
-        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
+        var _this4$popperInstance, _this4$onShow;
+        _this4.tooltip.style.opacity = '1';
+        _this4.tooltip.style.visibility = 'visible';
+        (_this4$popperInstance = _this4.popperInstance) === null || _this4$popperInstance === void 0 || _this4$popperInstance.setOptions(function (options) {
           return _objectSpread(_objectSpread({}, options), {}, {
             modifiers: [endingOffset, {
               name: 'eventListeners',
@@ -202,8 +301,8 @@ var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
             }]
           });
         });
-        _this3.isDisplayed = true;
-        (_this3$onShow = _this3.onShow) === null || _this3$onShow === void 0 || _this3$onShow.call(_this3);
+        _this4.isDisplayed = true;
+        (_this4$onShow = _this4.onShow) === null || _this4$onShow === void 0 || _this4$onShow.call(_this4);
       }, this.timeout);
     }
   }]);

package/dist/es2019/monitoring/error.js

@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "120.3.2";
+const packageVersion = "120.3.3";
 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/fg';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "120.3.2";
+const packageVersion = "120.3.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createPopper as createLegacyPopper } from '@popperjs/core';
 import { bind } from 'bind-event-listener';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createPopper as createWrappedPopper } from '@atlaskit/popper/unsafe-imperative';
 const startingOffset = {
@@ -15,6 +16,24 @@ const endingOffset = {
     offset: [0, 8]
   }
 };
+
+/**
+ * Namespaced to keep generated ids from colliding with ids the host page owns, since they share
+ * the document's single id space.
+ */
+const TOOLTIP_ID_PREFIX = 'ak-editor-internal-tooltip';
+
+/**
+ * Generates a tooltip id for `aria-describedby`/`popovertarget`.
+ *
+ * `crypto.randomUUID` covers effectively all production traffic
+ * The counter is only a fallback for environments without it (for example a non-secure context)
+ * and is scoped to this closure rather than module state.
+ */
+const generateTooltipId = (() => {
+  let count = 0;
+  return () => typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? `${TOOLTIP_ID_PREFIX}-${crypto.randomUUID()}` : `${TOOLTIP_ID_PREFIX}-${count += 1}`;
+})();
 function getCreatePopper() {
   if (fg('platform-dst-popper-consolidation')) {
     return createWrappedPopper;
@@ -29,9 +48,31 @@ function getCreatePopper() {
  * Uses popperJS for positioning
  */
 export class VanillaTooltip {
-  constructor(button, content,
   /**
-   * Id associated to the tooltip - must be unique.
+   * Set only while this tooltip is on screen, so no listener is retained at rest.
+   */
+
+  constructor(
+  /**
+   * The element that the tooltip describes and Popper uses as its anchor.
+   *
+   * Prefer a `<button>`: it is focusable and announced by assistive tech for free, and is the
+   * only element the browser honours `popovertarget` on. Anything else works, since this
+   * class calls `showPopover()`/`hidePopover()` itself, but then make sure it:
+   *
+   * - **Renders its children**, as the tooltip is appended to the trigger. `<img>`, `<input>`
+   *   and `<br>` accept the append without error but never render it, leaving the tooltip
+   *   silently at zero size.
+   * - **Is reachable**, if keyboard and screen reader users need the tooltip — usually
+   *   `tabindex="0"` plus a role and accessible name, since `focus`/`blur` are bound to the
+   *   trigger and `aria-describedby` is set on it.
+   */
+  trigger, content,
+  /**
+   * Id associated to the tooltip - must be unique within the document.
+   *
+   * Pass `undefined` to have one generated, which is preferred: callers otherwise have to
+   * solve uniqueness themselves, and every consumer had solved it differently.
    */
   id,
   /**
@@ -53,47 +94,53 @@ export class VanillaTooltip {
     _defineProperty(this, "listeners", []);
     _defineProperty(this, "shouldHidePopover", false);
     _defineProperty(this, "isDisplayed", false);
-    this.button = button;
+    this.trigger = trigger;
     this.timeout = timeout;
     this.onShow = onShow;
-    const tooltip = document.createElement('span');
+    // Created in the trigger's own document rather than the global one, so nothing depends on
+    // the parent realm when the editor renders inside an iframe. Gated alongside the Escape
+    // listener's window so the whole iframe fix moves as a single unit.
+    const ownerDocument = isExperimentEnabled('platform_editor_use_vanilla_components') ? trigger.ownerDocument : document;
+    const tooltip = ownerDocument.createElement('span');
     tooltip.role = 'tooltip';
     tooltip.popover = 'hint';
     tooltip.className = className;
-    tooltip.id = id;
+    tooltip.id = id !== null && id !== void 0 ? id : generateTooltipId();
     tooltip.textContent = content;
     if (styles) {
       Object.assign(tooltip.style, styles);
     }
     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);
+    this.trigger.appendChild(tooltip);
+    this.trigger.setAttribute('popovertarget', tooltip.id);
+    this.trigger.setAttribute('aria-describedby', tooltip.id);
     const showEvents = ['mouseenter', 'focus'];
     const hideEvents = ['mouseleave', 'blur'];
     showEvents.forEach(event => {
-      this.listeners.push(bind(button, {
+      this.listeners.push(bind(this.trigger, {
         type: event,
         listener: () => this.show()
       }));
     });
     hideEvents.forEach(event => {
-      this.listeners.push(bind(button, {
+      this.listeners.push(bind(this.trigger, {
         type: event,
         listener: () => this.hide()
       }));
     });
-    this.listeners.push(bind(window, {
-      type: 'keydown',
-      listener: e => {
-        if (e.key === 'Escape') {
-          this.hide(true);
+
+    // Bound for this tooltip's whole lifetime, even while it is off screen. The experiment
+    // moves this to `show()` so nothing is retained at rest.
+    if (!isExperimentEnabled('platform_editor_use_vanilla_components')) {
+      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 = () => {
@@ -103,7 +150,7 @@ export class VanillaTooltip {
     };
   }
   createPopperInstance() {
-    this.popperInstance = getCreatePopper()(this.button, this.tooltip, {
+    this.popperInstance = getCreatePopper()(this.trigger, this.tooltip, {
       placement: 'top',
       modifiers: [startingOffset]
     });
@@ -113,13 +160,51 @@ export class VanillaTooltip {
     // Cancels any pending show/hide, which would otherwise run against detached DOM and
     // invoke `onShow` after the owner has gone away.
     clearTimeout(this.currentTimeoutId);
+    // Destroying while visible must not leave the listener bound to a dead tooltip.
+    this.unbindEscapeListener();
     (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 ? void 0 : _this$popperInstance.destroy();
     this.listeners.forEach(listener => {
       listener();
     });
   }
+
+  /**
+   * Starts listening for Escape to dismiss this tooltip.
+   *
+   * A tooltip only ever needs one Escape listener, so this does nothing when one is already
+   * bound.
+   */
+  bindEscapeListener() {
+    var _this$trigger$ownerDo;
+    if (this.unbindEscape) {
+      return;
+    }
+    this.unbindEscape = bind((_this$trigger$ownerDo = this.trigger.ownerDocument.defaultView) !== null && _this$trigger$ownerDo !== void 0 ? _this$trigger$ownerDo : window, {
+      type: 'keydown',
+      listener: e => {
+        if (e.key === 'Escape') {
+          this.hide(true);
+        }
+      }
+    });
+  }
+
+  /**
+   * Stops listening for Escape, so no listener is retained while this tooltip is off screen.
+   *
+   * Does nothing when no listener is bound.
+   */
+  unbindEscapeListener() {
+    var _this$unbindEscape;
+    (_this$unbindEscape = this.unbindEscape) === null || _this$unbindEscape === void 0 ? void 0 : _this$unbindEscape.call(this);
+    this.unbindEscape = undefined;
+  }
   hide(immediate = false) {
     clearTimeout(this.currentTimeoutId);
+
+    // Unbound synchronously so a repeated Escape does not re-enter this tooltip while the
+    // hide is still pending.
+    this.unbindEscapeListener();
     this.shouldHidePopover = true;
     // Disable the event listeners
     this.currentTimeoutId = setTimeout(() => {
@@ -140,6 +225,13 @@ export class VanillaTooltip {
     }, immediate ? 0 : this.timeout);
   }
   show() {
+    // Bound before the open delay so Escape can dismiss during it, and before the
+    // `isDisplayed` guard so re-hovering a tooltip whose hide is still pending (`hide()`
+    // unbinds synchronously, but the tooltip stays on screen until its timeout) restores
+    // Escape rather than leaving the visible tooltip undismissable.
+    if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
+      this.bindEscapeListener();
+    }
     if (this.isDisplayed) {
       return;
     }

package/dist/esm/monitoring/error.js

@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "120.3.2";
+var packageVersion = "120.3.3";
 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/fg';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "120.3.2";
+var packageVersion = "120.3.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

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

@@ -5,6 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 as createLegacyPopper } from '@popperjs/core';
 import { bind } from 'bind-event-listener';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createPopper as createWrappedPopper } from '@atlaskit/popper/unsafe-imperative';
 var startingOffset = {
@@ -19,6 +20,26 @@ var endingOffset = {
     offset: [0, 8]
   }
 };
+
+/**
+ * Namespaced to keep generated ids from colliding with ids the host page owns, since they share
+ * the document's single id space.
+ */
+var TOOLTIP_ID_PREFIX = 'ak-editor-internal-tooltip';
+
+/**
+ * Generates a tooltip id for `aria-describedby`/`popovertarget`.
+ *
+ * `crypto.randomUUID` covers effectively all production traffic
+ * The counter is only a fallback for environments without it (for example a non-secure context)
+ * and is scoped to this closure rather than module state.
+ */
+var generateTooltipId = function () {
+  var count = 0;
+  return function () {
+    return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "".concat(TOOLTIP_ID_PREFIX, "-").concat(crypto.randomUUID()) : "".concat(TOOLTIP_ID_PREFIX, "-").concat(count += 1);
+  };
+}();
 function getCreatePopper() {
   if (fg('platform-dst-popper-consolidation')) {
     return createWrappedPopper;
@@ -33,9 +54,31 @@ function getCreatePopper() {
  * Uses popperJS for positioning
  */
 export var VanillaTooltip = /*#__PURE__*/function () {
-  function VanillaTooltip(button, content,
   /**
-   * Id associated to the tooltip - must be unique.
+   * Set only while this tooltip is on screen, so no listener is retained at rest.
+   */
+
+  function VanillaTooltip(
+  /**
+   * The element that the tooltip describes and Popper uses as its anchor.
+   *
+   * Prefer a `<button>`: it is focusable and announced by assistive tech for free, and is the
+   * only element the browser honours `popovertarget` on. Anything else works, since this
+   * class calls `showPopover()`/`hidePopover()` itself, but then make sure it:
+   *
+   * - **Renders its children**, as the tooltip is appended to the trigger. `<img>`, `<input>`
+   *   and `<br>` accept the append without error but never render it, leaving the tooltip
+   *   silently at zero size.
+   * - **Is reachable**, if keyboard and screen reader users need the tooltip — usually
+   *   `tabindex="0"` plus a role and accessible name, since `focus`/`blur` are bound to the
+   *   trigger and `aria-describedby` is set on it.
+   */
+  trigger, content,
+  /**
+   * Id associated to the tooltip - must be unique within the document.
+   *
+   * Pass `undefined` to have one generated, which is preferred: callers otherwise have to
+   * solve uniqueness themselves, and every consumer had solved it differently.
    */
   id,
   /**
@@ -62,29 +105,30 @@ export var VanillaTooltip = /*#__PURE__*/function () {
     _defineProperty(this, "listeners", []);
     _defineProperty(this, "shouldHidePopover", false);
     _defineProperty(this, "isDisplayed", false);
-    this.button = button;
+    this.trigger = trigger;
     this.timeout = timeout;
     this.onShow = onShow;
-    var tooltip = document.createElement('span');
+    // Created in the trigger's own document rather than the global one, so nothing depends on
+    // the parent realm when the editor renders inside an iframe. Gated alongside the Escape
+    // listener's window so the whole iframe fix moves as a single unit.
+    var ownerDocument = isExperimentEnabled('platform_editor_use_vanilla_components') ? trigger.ownerDocument : document;
+    var tooltip = ownerDocument.createElement('span');
     tooltip.role = 'tooltip';
     tooltip.popover = 'hint';
     tooltip.className = className;
-    tooltip.id = id;
+    tooltip.id = id !== null && id !== void 0 ? id : generateTooltipId();
     tooltip.textContent = content;
     if (styles) {
       Object.assign(tooltip.style, styles);
     }
     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);
+    this.trigger.appendChild(tooltip);
+    this.trigger.setAttribute('popovertarget', tooltip.id);
+    this.trigger.setAttribute('aria-describedby', tooltip.id);
     var showEvents = ['mouseenter', 'focus'];
     var hideEvents = ['mouseleave', 'blur'];
     showEvents.forEach(function (event) {
-      _this.listeners.push(bind(button, {
+      _this.listeners.push(bind(_this.trigger, {
         type: event,
         listener: function listener() {
           return _this.show();
@@ -92,21 +136,26 @@ export var VanillaTooltip = /*#__PURE__*/function () {
       }));
     });
     hideEvents.forEach(function (event) {
-      _this.listeners.push(bind(button, {
+      _this.listeners.push(bind(_this.trigger, {
         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);
+
+    // Bound for this tooltip's whole lifetime, even while it is off screen. The experiment
+    // moves this to `show()` so nothing is retained at rest.
+    if (!isExperimentEnabled('platform_editor_use_vanilla_components')) {
+      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 () {
@@ -118,7 +167,7 @@ export var VanillaTooltip = /*#__PURE__*/function () {
   return _createClass(VanillaTooltip, [{
     key: "createPopperInstance",
     value: function createPopperInstance() {
-      this.popperInstance = getCreatePopper()(this.button, this.tooltip, {
+      this.popperInstance = getCreatePopper()(this.trigger, this.tooltip, {
         placement: 'top',
         modifiers: [startingOffset]
       });
@@ -130,22 +179,65 @@ export var VanillaTooltip = /*#__PURE__*/function () {
       // Cancels any pending show/hide, which would otherwise run against detached DOM and
       // invoke `onShow` after the owner has gone away.
       clearTimeout(this.currentTimeoutId);
+      // Destroying while visible must not leave the listener bound to a dead tooltip.
+      this.unbindEscapeListener();
       (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
       this.listeners.forEach(function (listener) {
         listener();
       });
     }
+
+    /**
+     * Starts listening for Escape to dismiss this tooltip.
+     *
+     * A tooltip only ever needs one Escape listener, so this does nothing when one is already
+     * bound.
+     */
+  }, {
+    key: "bindEscapeListener",
+    value: function bindEscapeListener() {
+      var _this$trigger$ownerDo,
+        _this2 = this;
+      if (this.unbindEscape) {
+        return;
+      }
+      this.unbindEscape = bind((_this$trigger$ownerDo = this.trigger.ownerDocument.defaultView) !== null && _this$trigger$ownerDo !== void 0 ? _this$trigger$ownerDo : window, {
+        type: 'keydown',
+        listener: function listener(e) {
+          if (e.key === 'Escape') {
+            _this2.hide(true);
+          }
+        }
+      });
+    }
+
+    /**
+     * Stops listening for Escape, so no listener is retained while this tooltip is off screen.
+     *
+     * Does nothing when no listener is bound.
+     */
+  }, {
+    key: "unbindEscapeListener",
+    value: function unbindEscapeListener() {
+      var _this$unbindEscape;
+      (_this$unbindEscape = this.unbindEscape) === null || _this$unbindEscape === void 0 || _this$unbindEscape.call(this);
+      this.unbindEscape = undefined;
+    }
   }, {
     key: "hide",
     value: function hide() {
-      var _this2 = this;
+      var _this3 = this;
       var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       clearTimeout(this.currentTimeoutId);
+
+      // Unbound synchronously so a repeated Escape does not re-enter this tooltip while the
+      // hide is still pending.
+      this.unbindEscapeListener();
       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) {
+        var _this3$popperInstance;
+        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
           return _objectSpread(_objectSpread({}, options), {}, {
             modifiers: [startingOffset, {
               name: 'eventListeners',
@@ -153,18 +245,25 @@ export var VanillaTooltip = /*#__PURE__*/function () {
             }]
           });
         });
-        _this2.tooltip.style.opacity = '0';
-        _this2.isDisplayed = false;
+        _this3.tooltip.style.opacity = '0';
+        _this3.isDisplayed = false;
         // If transition animations are disabled immediately hide the popover
-        if (_this2.tooltip.style.transition === 'none') {
-          _this2.tooltip.hidePopover();
+        if (_this3.tooltip.style.transition === 'none') {
+          _this3.tooltip.hidePopover();
         }
       }, immediate ? 0 : this.timeout);
     }
   }, {
     key: "show",
     value: function show() {
-      var _this3 = this;
+      var _this4 = this;
+      // Bound before the open delay so Escape can dismiss during it, and before the
+      // `isDisplayed` guard so re-hovering a tooltip whose hide is still pending (`hide()`
+      // unbinds synchronously, but the tooltip stays on screen until its timeout) restores
+      // Escape rather than leaving the visible tooltip undismissable.
+      if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
+        this.bindEscapeListener();
+      }
       if (this.isDisplayed) {
         return;
       }
@@ -184,10 +283,10 @@ export var VanillaTooltip = /*#__PURE__*/function () {
 
       // Enable the event listeners
       this.currentTimeoutId = setTimeout(function () {
-        var _this3$popperInstance, _this3$onShow;
-        _this3.tooltip.style.opacity = '1';
-        _this3.tooltip.style.visibility = 'visible';
-        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
+        var _this4$popperInstance, _this4$onShow;
+        _this4.tooltip.style.opacity = '1';
+        _this4.tooltip.style.visibility = 'visible';
+        (_this4$popperInstance = _this4.popperInstance) === null || _this4$popperInstance === void 0 || _this4$popperInstance.setOptions(function (options) {
           return _objectSpread(_objectSpread({}, options), {}, {
             modifiers: [endingOffset, {
               name: 'eventListeners',
@@ -195,8 +294,8 @@ export var VanillaTooltip = /*#__PURE__*/function () {
             }]
           });
         });
-        _this3.isDisplayed = true;
-        (_this3$onShow = _this3.onShow) === null || _this3$onShow === void 0 || _this3$onShow.call(_this3);
+        _this4.isDisplayed = true;
+        (_this4$onShow = _this4.onShow) === null || _this4$onShow === void 0 || _this4$onShow.call(_this4);
       }, this.timeout);
     }
   }]);

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

@@ -5,7 +5,21 @@
  * Uses popperJS for positioning
  */
 export declare class VanillaTooltip {
-    private button;
+    /**
+     * The element that the tooltip describes and Popper uses as its anchor.
+     *
+     * Prefer a `<button>`: it is focusable and announced by assistive tech for free, and is the
+     * only element the browser honours `popovertarget` on. Anything else works, since this
+     * class calls `showPopover()`/`hidePopover()` itself, but then make sure it:
+     *
+     * - **Renders its children**, as the tooltip is appended to the trigger. `<img>`, `<input>`
+     *   and `<br>` accept the append without error but never render it, leaving the tooltip
+     *   silently at zero size.
+     * - **Is reachable**, if keyboard and screen reader users need the tooltip — usually
+     *   `tabindex="0"` plus a role and accessible name, since `focus`/`blur` are bound to the
+     *   trigger and `aria-describedby` is set on it.
+     */
+    private trigger;
     private timeout;
     /**
      * Called when the tooltip has become visible, after `timeout` has elapsed.
@@ -19,11 +33,33 @@ export declare class VanillaTooltip {
     private shouldHidePopover;
     private tooltip;
     private isDisplayed;
-    constructor(button: HTMLButtonElement, content: string, 
     /**
-     * Id associated to the tooltip - must be unique.
+     * Set only while this tooltip is on screen, so no listener is retained at rest.
+     */
+    private unbindEscape;
+    constructor(
+    /**
+     * The element that the tooltip describes and Popper uses as its anchor.
+     *
+     * Prefer a `<button>`: it is focusable and announced by assistive tech for free, and is the
+     * only element the browser honours `popovertarget` on. Anything else works, since this
+     * class calls `showPopover()`/`hidePopover()` itself, but then make sure it:
+     *
+     * - **Renders its children**, as the tooltip is appended to the trigger. `<img>`, `<input>`
+     *   and `<br>` accept the append without error but never render it, leaving the tooltip
+     *   silently at zero size.
+     * - **Is reachable**, if keyboard and screen reader users need the tooltip — usually
+     *   `tabindex="0"` plus a role and accessible name, since `focus`/`blur` are bound to the
+     *   trigger and `aria-describedby` is set on it.
+     */
+    trigger: HTMLElement, content: string, 
+    /**
+     * Id associated to the tooltip - must be unique within the document.
+     *
+     * Pass `undefined` to have one generated, which is preferred: callers otherwise have to
+     * solve uniqueness themselves, and every consumer had solved it differently.
      */
-    id: string, 
+    id: string | undefined, 
     /**
      * Class Name – used for styling.
      */
@@ -33,7 +69,7 @@ export declare class VanillaTooltip {
      * Useful when the tooltip is rendered in the browser's top layer (via Popover API),
      * where ancestor CSS selectors cannot reach it.
      */
-    styles?: Record<string, string>, 
+    styles?: Readonly<Record<string, string>>, 
     /**
      * Called when the tooltip has become visible, after `timeout` has elapsed.
      * Not called when the pointer leaves before the tooltip is shown, matching
@@ -42,6 +78,19 @@ export declare class VanillaTooltip {
     onShow?: (() => void) | undefined);
     private createPopperInstance;
     destroy(): void;
+    /**
+     * Starts listening for Escape to dismiss this tooltip.
+     *
+     * A tooltip only ever needs one Escape listener, so this does nothing when one is already
+     * bound.
+     */
+    private bindEscapeListener;
+    /**
+     * Stops listening for Escape, so no listener is retained while this tooltip is off screen.
+     *
+     * Does nothing when no listener is bound.
+     */
+    private unbindEscapeListener;
     private hide;
     private show;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "120.3.3",
+	"version": "120.4.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"