@atlaskit/editor-plugin-block-controls 8.3.3 → 8.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 8.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`a287a6035ed71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a287a6035ed71) -
8
+ [EDITOR-5005] export VanillaTooltip from the editor-common package and update references
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 8.3.4
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 8.3.3
4
21
 
5
22
  ### Patch Changes
@@ -8,6 +8,7 @@ exports.createVanillaButton = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
10
10
  var _messages = require("@atlaskit/editor-common/messages");
11
+ var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
11
12
  var _model = require("@atlaskit/editor-prosemirror/model");
12
13
  var _state = require("@atlaskit/editor-prosemirror/state");
13
14
  var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -15,7 +16,6 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
15
16
  var _documentChecks = require("../ui/utils/document-checks");
16
17
  var _editorCommands = require("../ui/utils/editor-commands");
17
18
  var _quickInsertCalculatePosition = require("./quick-insert-calculate-position");
18
- var _vanillaTooltip = require("./vanilla-tooltip");
19
19
  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; }
20
20
  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; }
21
21
  // Based on platform/packages/design-system/icon/svgs/utility/add.svg
@@ -72,7 +72,7 @@ var createVanillaButton = exports.createVanillaButton = function createVanillaBu
72
72
  button.onclick = function () {
73
73
  return handleQuickInsert(props);
74
74
  };
75
- var tooltip = new _vanillaTooltip.VanillaTooltip(button, props.formatMessage(_messages.blockControlsMessages.insert), 'quick-insert-button-tooltip');
75
+ var tooltip = new _vanillaTooltip.VanillaTooltip(button, props.formatMessage(_messages.blockControlsMessages.insert), 'quick-insert-button-tooltip', 'blocks-quick-insert-tooltip');
76
76
  props.cleanupCallbacks.push(function () {
77
77
  tooltip.destroy();
78
78
  });
@@ -1,5 +1,6 @@
1
1
  import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
2
2
  import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
3
+ import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
3
4
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
4
5
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
5
6
  import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -7,7 +8,6 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
7
8
  import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from '../ui/utils/document-checks';
8
9
  import { createNewLine } from '../ui/utils/editor-commands';
9
10
  import { calculatePosition } from './quick-insert-calculate-position';
10
- import { VanillaTooltip } from './vanilla-tooltip';
11
11
  // Based on platform/packages/design-system/icon/svgs/utility/add.svg
12
12
  const plusButtonDOM = ['http://www.w3.org/2000/svg svg', {
13
13
  width: '12',
@@ -63,7 +63,7 @@ export const createVanillaButton = props => {
63
63
  const button = dom.querySelector('button[data-testid="editor-quick-insert-button"]');
64
64
  if (button instanceof HTMLButtonElement) {
65
65
  button.onclick = () => handleQuickInsert(props);
66
- const tooltip = new VanillaTooltip(button, props.formatMessage(messages.insert), 'quick-insert-button-tooltip');
66
+ const tooltip = new VanillaTooltip(button, props.formatMessage(messages.insert), 'quick-insert-button-tooltip', 'blocks-quick-insert-tooltip');
67
67
  props.cleanupCallbacks.push(() => {
68
68
  tooltip.destroy();
69
69
  });
@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  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; }
4
4
  import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
5
5
  import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
6
+ import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
6
7
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
7
8
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
8
9
  import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -10,7 +11,6 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
10
11
  import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from '../ui/utils/document-checks';
11
12
  import { createNewLine } from '../ui/utils/editor-commands';
12
13
  import { calculatePosition } from './quick-insert-calculate-position';
13
- import { VanillaTooltip } from './vanilla-tooltip';
14
14
  // Based on platform/packages/design-system/icon/svgs/utility/add.svg
15
15
  var plusButtonDOM = ['http://www.w3.org/2000/svg svg', {
16
16
  width: '12',
@@ -65,7 +65,7 @@ export var createVanillaButton = function createVanillaButton(props) {
65
65
  button.onclick = function () {
66
66
  return handleQuickInsert(props);
67
67
  };
68
- var tooltip = new VanillaTooltip(button, props.formatMessage(messages.insert), 'quick-insert-button-tooltip');
68
+ var tooltip = new VanillaTooltip(button, props.formatMessage(messages.insert), 'quick-insert-button-tooltip', 'blocks-quick-insert-tooltip');
69
69
  props.cleanupCallbacks.push(function () {
70
70
  tooltip.destroy();
71
71
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "8.3.3",
3
+ "version": "8.4.0",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -54,19 +54,18 @@
54
54
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
55
55
  "@atlaskit/primitives": "^18.0.0",
56
56
  "@atlaskit/theme": "^21.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^24.1.0",
57
+ "@atlaskit/tmp-editor-statsig": "^25.2.0",
58
58
  "@atlaskit/tokens": "^11.0.0",
59
59
  "@atlaskit/tooltip": "^20.14.0",
60
60
  "@babel/runtime": "^7.0.0",
61
61
  "@emotion/react": "^11.7.1",
62
- "@popperjs/core": "^2.11.8",
63
62
  "bind-event-listener": "^3.0.0",
64
63
  "memoize-one": "^6.0.0",
65
64
  "raf-schd": "^4.0.3",
66
65
  "uuid": "^3.1.0"
67
66
  },
68
67
  "peerDependencies": {
69
- "@atlaskit/editor-common": "^111.12.0",
68
+ "@atlaskit/editor-common": "^111.14.0",
70
69
  "react": "^18.2.0",
71
70
  "react-dom": "^18.2.0",
72
71
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -1,179 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.VanillaTooltip = void 0;
8
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
9
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
- var _core = require("@popperjs/core");
12
- var _bindEventListener = require("bind-event-listener");
13
- 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; }
14
- 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; }
15
- var startingOffset = {
16
- name: 'offset',
17
- options: {
18
- offset: [0, 4]
19
- }
20
- };
21
- var endingOffset = {
22
- name: 'offset',
23
- options: {
24
- offset: [0, 8]
25
- }
26
- };
27
-
28
- /**
29
- * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
30
- *
31
- * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
32
- * Uses popperJS for positioning
33
- *
34
- * @warning Still experimental. One day we can likely want to move this to a common package.
35
- */
36
- var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
37
- function VanillaTooltip(button, content,
38
- /**
39
- * Id associated to the tooltip - must be unique.
40
- */
41
- id) {
42
- var _this = this;
43
- var timeout = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300;
44
- (0, _classCallCheck2.default)(this, VanillaTooltip);
45
- (0, _defineProperty2.default)(this, "listeners", []);
46
- (0, _defineProperty2.default)(this, "shouldHidePopover", false);
47
- (0, _defineProperty2.default)(this, "isDisplayed", false);
48
- this.button = button;
49
- this.timeout = timeout;
50
- var tooltip = document.createElement('span');
51
- tooltip.role = 'tooltip';
52
- tooltip.popover = 'hint';
53
- // Warning: Currently this is used for styling - only works in the block controls package
54
- tooltip.className = 'blocks-quick-insert-tooltip';
55
- tooltip.id = id;
56
- tooltip.textContent = content;
57
- this.tooltip = tooltip;
58
-
59
- // Button preparation
60
- button.appendChild(tooltip);
61
- // Prepare the button to have the popover target and accessibility properties
62
- button.setAttribute('popovertarget', tooltip.id);
63
- button.setAttribute('aria-describedby', tooltip.id);
64
- var showEvents = ['mouseenter', 'focus'];
65
- var hideEvents = ['mouseleave', 'blur'];
66
- showEvents.forEach(function (event) {
67
- _this.listeners.push((0, _bindEventListener.bind)(button, {
68
- type: event,
69
- listener: function listener() {
70
- return _this.show();
71
- }
72
- }));
73
- });
74
- hideEvents.forEach(function (event) {
75
- _this.listeners.push((0, _bindEventListener.bind)(button, {
76
- type: event,
77
- listener: function listener() {
78
- return _this.hide();
79
- }
80
- }));
81
- });
82
- this.listeners.push((0, _bindEventListener.bind)(window, {
83
- type: 'keydown',
84
- listener: function listener(e) {
85
- if (e.key === 'Escape') {
86
- _this.hide(true);
87
- }
88
- }
89
- }));
90
-
91
- // Hide the tooltip if the hide transition has completed
92
- this.tooltip.ontransitionend = function () {
93
- if (_this.shouldHidePopover) {
94
- _this.tooltip.hidePopover();
95
- }
96
- };
97
- }
98
- return (0, _createClass2.default)(VanillaTooltip, [{
99
- key: "createPopperInstance",
100
- value: function createPopperInstance() {
101
- this.popperInstance = (0, _core.createPopper)(this.button, this.tooltip, {
102
- placement: 'top',
103
- modifiers: [startingOffset]
104
- });
105
- }
106
- }, {
107
- key: "destroy",
108
- value: function destroy() {
109
- var _this$popperInstance;
110
- (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
111
- this.listeners.forEach(function (listener) {
112
- listener();
113
- });
114
- }
115
- }, {
116
- key: "hide",
117
- value: function hide() {
118
- var _this2 = this;
119
- var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
120
- clearTimeout(this.currentTimeoutId);
121
- this.shouldHidePopover = true;
122
- // Disable the event listeners
123
- this.currentTimeoutId = setTimeout(function () {
124
- var _this2$popperInstance;
125
- (_this2$popperInstance = _this2.popperInstance) === null || _this2$popperInstance === void 0 || _this2$popperInstance.setOptions(function (options) {
126
- return _objectSpread(_objectSpread({}, options), {}, {
127
- modifiers: [startingOffset, {
128
- name: 'eventListeners',
129
- enabled: false
130
- }]
131
- });
132
- });
133
- _this2.tooltip.style.opacity = '0';
134
- _this2.isDisplayed = false;
135
- // If transition animations are disabled immediately hide the popover
136
- if (_this2.tooltip.style.transition === 'none') {
137
- _this2.tooltip.hidePopover();
138
- }
139
- }, immediate ? 0 : this.timeout);
140
- }
141
- }, {
142
- key: "show",
143
- value: function show() {
144
- var _this3 = this;
145
- if (this.isDisplayed) {
146
- return;
147
- }
148
- clearTimeout(this.currentTimeoutId);
149
- this.shouldHidePopover = false;
150
-
151
- // Make the tooltip visible - but hide until
152
- this.tooltip.style.visibility = 'hidden';
153
- this.tooltip.showPopover();
154
-
155
- // Update its position
156
- if (!this.popperInstance) {
157
- this.createPopperInstance();
158
- } else {
159
- this.popperInstance.update();
160
- }
161
-
162
- // Enable the event listeners
163
- this.currentTimeoutId = setTimeout(function () {
164
- var _this3$popperInstance;
165
- _this3.tooltip.style.opacity = '1';
166
- _this3.tooltip.style.visibility = 'visible';
167
- (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
168
- return _objectSpread(_objectSpread({}, options), {}, {
169
- modifiers: [endingOffset, {
170
- name: 'eventListeners',
171
- enabled: true
172
- }]
173
- });
174
- });
175
- _this3.isDisplayed = true;
176
- }, this.timeout);
177
- }
178
- }]);
179
- }();
@@ -1,147 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import { createPopper } from '@popperjs/core';
3
- import { bind } from 'bind-event-listener';
4
- const startingOffset = {
5
- name: 'offset',
6
- options: {
7
- offset: [0, 4]
8
- }
9
- };
10
- const endingOffset = {
11
- name: 'offset',
12
- options: {
13
- offset: [0, 8]
14
- }
15
- };
16
-
17
- /**
18
- * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
19
- *
20
- * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
21
- * Uses popperJS for positioning
22
- *
23
- * @warning Still experimental. One day we can likely want to move this to a common package.
24
- */
25
- export class VanillaTooltip {
26
- constructor(button, content,
27
- /**
28
- * Id associated to the tooltip - must be unique.
29
- */
30
- id, timeout = 300) {
31
- _defineProperty(this, "listeners", []);
32
- _defineProperty(this, "shouldHidePopover", false);
33
- _defineProperty(this, "isDisplayed", false);
34
- this.button = button;
35
- this.timeout = timeout;
36
- const tooltip = document.createElement('span');
37
- tooltip.role = 'tooltip';
38
- tooltip.popover = 'hint';
39
- // Warning: Currently this is used for styling - only works in the block controls package
40
- tooltip.className = 'blocks-quick-insert-tooltip';
41
- tooltip.id = id;
42
- tooltip.textContent = content;
43
- this.tooltip = tooltip;
44
-
45
- // Button preparation
46
- button.appendChild(tooltip);
47
- // Prepare the button to have the popover target and accessibility properties
48
- button.setAttribute('popovertarget', tooltip.id);
49
- button.setAttribute('aria-describedby', tooltip.id);
50
- const showEvents = ['mouseenter', 'focus'];
51
- const hideEvents = ['mouseleave', 'blur'];
52
- showEvents.forEach(event => {
53
- this.listeners.push(bind(button, {
54
- type: event,
55
- listener: () => this.show()
56
- }));
57
- });
58
- hideEvents.forEach(event => {
59
- this.listeners.push(bind(button, {
60
- type: event,
61
- listener: () => this.hide()
62
- }));
63
- });
64
- this.listeners.push(bind(window, {
65
- type: 'keydown',
66
- listener: e => {
67
- if (e.key === 'Escape') {
68
- this.hide(true);
69
- }
70
- }
71
- }));
72
-
73
- // Hide the tooltip if the hide transition has completed
74
- this.tooltip.ontransitionend = () => {
75
- if (this.shouldHidePopover) {
76
- this.tooltip.hidePopover();
77
- }
78
- };
79
- }
80
- createPopperInstance() {
81
- this.popperInstance = createPopper(this.button, this.tooltip, {
82
- placement: 'top',
83
- modifiers: [startingOffset]
84
- });
85
- }
86
- destroy() {
87
- var _this$popperInstance;
88
- (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 ? void 0 : _this$popperInstance.destroy();
89
- this.listeners.forEach(listener => {
90
- listener();
91
- });
92
- }
93
- hide(immediate = false) {
94
- clearTimeout(this.currentTimeoutId);
95
- this.shouldHidePopover = true;
96
- // Disable the event listeners
97
- this.currentTimeoutId = setTimeout(() => {
98
- var _this$popperInstance2;
99
- (_this$popperInstance2 = this.popperInstance) === null || _this$popperInstance2 === void 0 ? void 0 : _this$popperInstance2.setOptions(options => ({
100
- ...options,
101
- modifiers: [startingOffset, {
102
- name: 'eventListeners',
103
- enabled: false
104
- }]
105
- }));
106
- this.tooltip.style.opacity = '0';
107
- this.isDisplayed = false;
108
- // If transition animations are disabled immediately hide the popover
109
- if (this.tooltip.style.transition === 'none') {
110
- this.tooltip.hidePopover();
111
- }
112
- }, immediate ? 0 : this.timeout);
113
- }
114
- show() {
115
- if (this.isDisplayed) {
116
- return;
117
- }
118
- clearTimeout(this.currentTimeoutId);
119
- this.shouldHidePopover = false;
120
-
121
- // Make the tooltip visible - but hide until
122
- this.tooltip.style.visibility = 'hidden';
123
- this.tooltip.showPopover();
124
-
125
- // Update its position
126
- if (!this.popperInstance) {
127
- this.createPopperInstance();
128
- } else {
129
- this.popperInstance.update();
130
- }
131
-
132
- // Enable the event listeners
133
- this.currentTimeoutId = setTimeout(() => {
134
- var _this$popperInstance3;
135
- this.tooltip.style.opacity = '1';
136
- this.tooltip.style.visibility = 'visible';
137
- (_this$popperInstance3 = this.popperInstance) === null || _this$popperInstance3 === void 0 ? void 0 : _this$popperInstance3.setOptions(options => ({
138
- ...options,
139
- modifiers: [endingOffset, {
140
- name: 'eventListeners',
141
- enabled: true
142
- }]
143
- }));
144
- this.isDisplayed = true;
145
- }, this.timeout);
146
- }
147
- }
@@ -1,172 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
- 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; }
5
- 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; }
6
- import { createPopper } from '@popperjs/core';
7
- import { bind } from 'bind-event-listener';
8
- var startingOffset = {
9
- name: 'offset',
10
- options: {
11
- offset: [0, 4]
12
- }
13
- };
14
- var endingOffset = {
15
- name: 'offset',
16
- options: {
17
- offset: [0, 8]
18
- }
19
- };
20
-
21
- /**
22
- * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
23
- *
24
- * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
25
- * Uses popperJS for positioning
26
- *
27
- * @warning Still experimental. One day we can likely want to move this to a common package.
28
- */
29
- export var VanillaTooltip = /*#__PURE__*/function () {
30
- function VanillaTooltip(button, content,
31
- /**
32
- * Id associated to the tooltip - must be unique.
33
- */
34
- id) {
35
- var _this = this;
36
- var timeout = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300;
37
- _classCallCheck(this, VanillaTooltip);
38
- _defineProperty(this, "listeners", []);
39
- _defineProperty(this, "shouldHidePopover", false);
40
- _defineProperty(this, "isDisplayed", false);
41
- this.button = button;
42
- this.timeout = timeout;
43
- var tooltip = document.createElement('span');
44
- tooltip.role = 'tooltip';
45
- tooltip.popover = 'hint';
46
- // Warning: Currently this is used for styling - only works in the block controls package
47
- tooltip.className = 'blocks-quick-insert-tooltip';
48
- tooltip.id = id;
49
- tooltip.textContent = content;
50
- this.tooltip = tooltip;
51
-
52
- // Button preparation
53
- button.appendChild(tooltip);
54
- // Prepare the button to have the popover target and accessibility properties
55
- button.setAttribute('popovertarget', tooltip.id);
56
- button.setAttribute('aria-describedby', tooltip.id);
57
- var showEvents = ['mouseenter', 'focus'];
58
- var hideEvents = ['mouseleave', 'blur'];
59
- showEvents.forEach(function (event) {
60
- _this.listeners.push(bind(button, {
61
- type: event,
62
- listener: function listener() {
63
- return _this.show();
64
- }
65
- }));
66
- });
67
- hideEvents.forEach(function (event) {
68
- _this.listeners.push(bind(button, {
69
- type: event,
70
- listener: function listener() {
71
- return _this.hide();
72
- }
73
- }));
74
- });
75
- this.listeners.push(bind(window, {
76
- type: 'keydown',
77
- listener: function listener(e) {
78
- if (e.key === 'Escape') {
79
- _this.hide(true);
80
- }
81
- }
82
- }));
83
-
84
- // Hide the tooltip if the hide transition has completed
85
- this.tooltip.ontransitionend = function () {
86
- if (_this.shouldHidePopover) {
87
- _this.tooltip.hidePopover();
88
- }
89
- };
90
- }
91
- return _createClass(VanillaTooltip, [{
92
- key: "createPopperInstance",
93
- value: function createPopperInstance() {
94
- this.popperInstance = createPopper(this.button, this.tooltip, {
95
- placement: 'top',
96
- modifiers: [startingOffset]
97
- });
98
- }
99
- }, {
100
- key: "destroy",
101
- value: function destroy() {
102
- var _this$popperInstance;
103
- (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
104
- this.listeners.forEach(function (listener) {
105
- listener();
106
- });
107
- }
108
- }, {
109
- key: "hide",
110
- value: function hide() {
111
- var _this2 = this;
112
- var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
113
- clearTimeout(this.currentTimeoutId);
114
- this.shouldHidePopover = true;
115
- // Disable the event listeners
116
- this.currentTimeoutId = setTimeout(function () {
117
- var _this2$popperInstance;
118
- (_this2$popperInstance = _this2.popperInstance) === null || _this2$popperInstance === void 0 || _this2$popperInstance.setOptions(function (options) {
119
- return _objectSpread(_objectSpread({}, options), {}, {
120
- modifiers: [startingOffset, {
121
- name: 'eventListeners',
122
- enabled: false
123
- }]
124
- });
125
- });
126
- _this2.tooltip.style.opacity = '0';
127
- _this2.isDisplayed = false;
128
- // If transition animations are disabled immediately hide the popover
129
- if (_this2.tooltip.style.transition === 'none') {
130
- _this2.tooltip.hidePopover();
131
- }
132
- }, immediate ? 0 : this.timeout);
133
- }
134
- }, {
135
- key: "show",
136
- value: function show() {
137
- var _this3 = this;
138
- if (this.isDisplayed) {
139
- return;
140
- }
141
- clearTimeout(this.currentTimeoutId);
142
- this.shouldHidePopover = false;
143
-
144
- // Make the tooltip visible - but hide until
145
- this.tooltip.style.visibility = 'hidden';
146
- this.tooltip.showPopover();
147
-
148
- // Update its position
149
- if (!this.popperInstance) {
150
- this.createPopperInstance();
151
- } else {
152
- this.popperInstance.update();
153
- }
154
-
155
- // Enable the event listeners
156
- this.currentTimeoutId = setTimeout(function () {
157
- var _this3$popperInstance;
158
- _this3.tooltip.style.opacity = '1';
159
- _this3.tooltip.style.visibility = 'visible';
160
- (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
161
- return _objectSpread(_objectSpread({}, options), {}, {
162
- modifiers: [endingOffset, {
163
- name: 'eventListeners',
164
- enabled: true
165
- }]
166
- });
167
- });
168
- _this3.isDisplayed = true;
169
- }, this.timeout);
170
- }
171
- }]);
172
- }();
@@ -1,27 +0,0 @@
1
- /**
2
- * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
3
- *
4
- * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
5
- * Uses popperJS for positioning
6
- *
7
- * @warning Still experimental. One day we can likely want to move this to a common package.
8
- */
9
- export declare class VanillaTooltip {
10
- private button;
11
- private timeout;
12
- private popperInstance;
13
- private listeners;
14
- private currentTimeoutId;
15
- private shouldHidePopover;
16
- private tooltip;
17
- private isDisplayed;
18
- constructor(button: HTMLButtonElement, content: string,
19
- /**
20
- * Id associated to the tooltip - must be unique.
21
- */
22
- id: string, timeout?: number);
23
- private createPopperInstance;
24
- destroy(): void;
25
- private hide;
26
- private show;
27
- }
@@ -1,27 +0,0 @@
1
- /**
2
- * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
3
- *
4
- * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
5
- * Uses popperJS for positioning
6
- *
7
- * @warning Still experimental. One day we can likely want to move this to a common package.
8
- */
9
- export declare class VanillaTooltip {
10
- private button;
11
- private timeout;
12
- private popperInstance;
13
- private listeners;
14
- private currentTimeoutId;
15
- private shouldHidePopover;
16
- private tooltip;
17
- private isDisplayed;
18
- constructor(button: HTMLButtonElement, content: string,
19
- /**
20
- * Id associated to the tooltip - must be unique.
21
- */
22
- id: string, timeout?: number);
23
- private createPopperInstance;
24
- destroy(): void;
25
- private hide;
26
- private show;
27
- }