@atlaskit/editor-common 111.13.0 → 111.14.0

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/analytics/types/insert-events.d.ts

@@ -54,7 +54,7 @@ type InsertExpandAEP = InsertAEP<ACTION_SUBJECT_ID.EXPAND | ACTION_SUBJECT_ID.NE
 }, undefined>;
 type InsertActionDecisionAEP = InsertAEP<ACTION_SUBJECT_ID.DECISION | ACTION_SUBJECT_ID.ACTION, {
     containerAri?: string;
-    inputMethod: INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.FORMATTING | INPUT_METHOD.KEYBOARD;
+    inputMethod: INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.FORMATTING | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB;
     listLocalId: string;
     listSize: number;
     localId: string;

package/dist/types/messages/table.d.ts

@@ -117,12 +117,12 @@ export declare const messages: {
     rowNumbers: {
         id: string;
         defaultMessage: string;
-        desciption: string;
+        description: string;
     };
     numberedRows: {
         id: string;
         defaultMessage: string;
-        desciption: string;
+        description: string;
     };
     rowsAreInserted: {
         id: string;

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/analytics/types/insert-events.d.ts

@@ -54,7 +54,7 @@ type InsertExpandAEP = InsertAEP<ACTION_SUBJECT_ID.EXPAND | ACTION_SUBJECT_ID.NE
 }, undefined>;
 type InsertActionDecisionAEP = InsertAEP<ACTION_SUBJECT_ID.DECISION | ACTION_SUBJECT_ID.ACTION, {
     containerAri?: string;
-    inputMethod: INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.FORMATTING | INPUT_METHOD.KEYBOARD;
+    inputMethod: INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.FORMATTING | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB;
     listLocalId: string;
     listSize: number;
     localId: string;

package/dist/types-ts4.5/messages/table.d.ts

@@ -117,12 +117,12 @@ export declare const messages: {
     rowNumbers: {
         id: string;
         defaultMessage: string;
-        desciption: string;
+        description: string;
     };
     numberedRows: {
         id: string;
         defaultMessage: string;
-        desciption: string;
+        description: string;
     };
     rowsAreInserted: {
         id: string;

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.0",
+	"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"
+      ]
+    }
+  }
+}