@atlaskit/editor-plugin-floating-toolbar 1.13.20 → 1.14.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/ui/Dropdown.js +6 -3
  3. package/dist/cjs/ui/EmojiPickerButton.js +33 -26
  4. package/dist/cjs/ui/Toolbar.js +3 -1
  5. package/dist/es2019/ui/Dropdown.js +6 -3
  6. package/dist/es2019/ui/EmojiPickerButton.js +31 -27
  7. package/dist/es2019/ui/Toolbar.js +3 -1
  8. package/dist/esm/ui/Dropdown.js +6 -3
  9. package/dist/esm/ui/EmojiPickerButton.js +31 -27
  10. package/dist/esm/ui/Toolbar.js +3 -1
  11. package/dist/types/ui/Dropdown.d.ts +2 -1
  12. package/dist/types-ts4.5/ui/Dropdown.d.ts +2 -1
  13. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-plugin-floating-toolbar
2
2
 
3
+ ## 1.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#157867](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157867)
8
+ [`8398a1f0013fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8398a1f0013fc) -
9
+ [ux] ED-25331-add-spotlight-to-inline-comment-button
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 1.13.21
16
+
17
+ ### Patch Changes
18
+
19
+ - [#155668](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155668)
20
+ [`f948f63ced742`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f948f63ced742) -
21
+ We are testing replacing findDOMNode with an explicit ref behind a feature flag. If this fix is
22
+ successful it will be available in a later release.
23
+ - Updated dependencies
24
+
3
25
  ## 1.13.20
4
26
 
5
27
  ### Patch Changes
package/dist/cjs/ui/Dropdown.js CHANGED
@@ -150,7 +150,8 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
150
150
  alignDropdownWithToolbar = _this$props2.alignDropdownWithToolbar,
151
151
  footer = _this$props2.footer,
152
152
  onMount = _this$props2.onMount,
153
- pulse = _this$props2.pulse;
153
+ pulse = _this$props2.pulse,
154
+ spotlightConfig = _this$props2.spotlightConfig;
154
155
  var trigger;
155
156
  if (icon) {
156
157
  var TriggerIcon = hideExpandIcon ? icon : (0, _react2.jsx)(CompositeIcon, {
@@ -166,7 +167,8 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
166
167
  disabled: disabled,
167
168
  tooltipContent: tooltip,
168
169
  onMount: onMount,
169
- pulse: pulse
170
+ pulse: pulse,
171
+ spotlightConfig: spotlightConfig
170
172
  });
171
173
  } else {
172
174
  trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
@@ -188,7 +190,8 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
188
190
  ariaHasPopup: true,
189
191
  areaControls: dropdownListId,
190
192
  onMount: onMount,
191
- pulse: pulse
193
+ pulse: pulse,
194
+ spotlightConfig: spotlightConfig
192
195
  }, title);
193
196
  }
194
197
 
package/dist/cjs/ui/EmojiPickerButton.js CHANGED
@@ -1,12 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.EmojiPickerButton = void 0;
8
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
10
11
  var _react2 = require("@emotion/react");
11
12
  var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
12
13
  var _hooks = require("@atlaskit/editor-common/hooks");
@@ -16,6 +17,8 @@ var _emoji = require("@atlaskit/emoji");
16
17
  var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/emoji-add"));
17
18
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
18
19
  var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
20
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
19
22
  /**
20
23
  * @jsxRuntime classic
21
24
  * @jsx jsx
@@ -28,7 +31,21 @@ var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon")
28
31
  var emojiPickerButtonWrapper = (0, _react2.css)({
29
32
  position: 'relative'
30
33
  });
31
- var EmojiPickerWithListener = (0, _uiReact.withReactEditorViewOuterListeners)(_emoji.EmojiPicker);
34
+ var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
35
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.pluginInjectionApi, ['emoji']),
36
+ emojiState = _useSharedPluginState.emojiState;
37
+ var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
38
+ var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
39
+ if (!emojiProvider) {
40
+ return null;
41
+ }
42
+ return (0, _react2.jsx)(_emoji.EmojiPicker, {
43
+ emojiProvider: emojiProvider,
44
+ onSelection: props.updateEmoji,
45
+ onPickerRef: setOutsideClickTargetRef
46
+ });
47
+ };
48
+ var EmojiPickerWithListener = (0, _uiReact.withReactEditorViewOuterListeners)(EmojiPickerWithProvider);
32
49
  var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(props) {
33
50
  var buttonRef = _react.default.useRef(null);
34
51
  var _React$useState = _react.default.useState(false),
@@ -41,9 +58,9 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
41
58
  }
42
59
  // eslint-disable-next-line react-hooks/exhaustive-deps
43
60
  }, [isPopupOpen]);
44
- var togglePopup = function togglePopup() {
61
+ var togglePopup = (0, _react.useCallback)(function () {
45
62
  setIsPopupOpen(!isPopupOpen);
46
- };
63
+ }, [setIsPopupOpen, isPopupOpen]);
47
64
  var updateEmoji = function updateEmoji(emoji) {
48
65
  setIsPopupOpen(false);
49
66
  props.onChange && props.onChange(emoji);
@@ -52,10 +69,10 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
52
69
  (_props$editorView = props.editorView) === null || _props$editorView === void 0 || _props$editorView.focus();
53
70
  });
54
71
  };
55
- var isDetachedElement = function isDetachedElement(el) {
72
+ var isDetachedElement = (0, _react.useCallback)(function (el) {
56
73
  return !document.body.contains(el);
57
- };
58
- var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
74
+ }, []);
75
+ var handleEmojiClickOutside = (0, _react.useCallback)(function (e) {
59
76
  // Ignore click events for detached elements.
60
77
  // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
61
78
  // still in the document, and one once it's detached. Does not always occur, and
@@ -63,27 +80,12 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
63
80
  if (e && e.target && !isDetachedElement(e.target)) {
64
81
  togglePopup();
65
82
  }
66
- };
67
- var handleEmojiPressEscape = function handleEmojiPressEscape() {
83
+ }, [isDetachedElement, togglePopup]);
84
+ var handleEmojiPressEscape = (0, _react.useCallback)(function () {
68
85
  var _buttonRef$current;
69
86
  setIsPopupOpen(false);
70
87
  (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
71
- };
72
- var EmojiPickerWithProvider = function EmojiPickerWithProvider() {
73
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.pluginInjectionApi, ['emoji']),
74
- emojiState = _useSharedPluginState.emojiState;
75
- var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
76
- if (!emojiProvider) {
77
- return null;
78
- }
79
- return (0, _react2.jsx)(EmojiPickerWithListener, {
80
- emojiProvider: emojiProvider,
81
- onSelection: updateEmoji,
82
- onPickerRef: function onPickerRef() {},
83
- handleClickOutside: handleEmojiClickOutside,
84
- handleEscapeKeydown: handleEmojiPressEscape
85
- });
86
- };
88
+ }, [setIsPopupOpen, buttonRef]);
87
89
  var renderPopup = function renderPopup() {
88
90
  if (!buttonRef.current || !isPopupOpen) {
89
91
  return;
@@ -100,7 +102,12 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
100
102
  ,
101
103
  zIndex: props.setDisableParentScroll ? 600 : undefined,
102
104
  focusTrap: true
103
- }, (0, _react2.jsx)(EmojiPickerWithProvider, null));
105
+ }, (0, _react2.jsx)(EmojiPickerWithListener, {
106
+ handleEscapeKeydown: handleEmojiPressEscape,
107
+ handleClickOutside: handleEmojiClickOutside,
108
+ pluginInjectionApi: props.pluginInjectionApi,
109
+ updateEmoji: updateEmoji
110
+ }));
104
111
  };
105
112
  var title = props.title || '';
106
113
  return (0, _react2.jsx)("div", {
package/dist/cjs/ui/Toolbar.js CHANGED
@@ -136,6 +136,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
136
136
  return dispatchCommand(item.onBlur);
137
137
  },
138
138
  onMount: item.onMount,
139
+ onUnmount: item.onUnmount,
139
140
  selected: item.selected,
140
141
  disabled: item.disabled,
141
142
  tooltipContent: item.tooltipContent,
@@ -144,7 +145,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
144
145
  ariaHasPopup: item.ariaHasPopup,
145
146
  tabIndex: item.tabIndex,
146
147
  isRadioButton: item.isRadioButton,
147
- pulse: item.pulse
148
+ pulse: item.pulse,
149
+ spotlightConfig: item.spotlightConfig
148
150
  }, item.showTitle && item.title);
149
151
  case 'input':
150
152
  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2')) {
package/dist/es2019/ui/Dropdown.js CHANGED
@@ -128,7 +128,8 @@ export default class Dropdown extends Component {
128
128
  alignDropdownWithToolbar,
129
129
  footer,
130
130
  onMount,
131
- pulse
131
+ pulse,
132
+ spotlightConfig
132
133
  } = this.props;
133
134
  let trigger;
134
135
  if (icon) {
@@ -145,7 +146,8 @@ export default class Dropdown extends Component {
145
146
  disabled: disabled,
146
147
  tooltipContent: tooltip,
147
148
  onMount: onMount,
148
- pulse: pulse
149
+ pulse: pulse,
150
+ spotlightConfig: spotlightConfig
149
151
  });
150
152
  } else {
151
153
  trigger = jsx(Button, {
@@ -167,7 +169,8 @@ export default class Dropdown extends Component {
167
169
  ariaHasPopup: true,
168
170
  areaControls: dropdownListId,
169
171
  onMount: onMount,
170
- pulse: pulse
172
+ pulse: pulse,
173
+ spotlightConfig: spotlightConfig
171
174
  }, title);
172
175
  }
173
176
 
package/dist/es2019/ui/EmojiPickerButton.js CHANGED
@@ -2,14 +2,14 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import React from 'react';
5
+ import React, { useCallback, useContext } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import Button from '@atlaskit/button/standard-button';
10
10
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
11
11
  import { Popup } from '@atlaskit/editor-common/ui';
12
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
12
+ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
13
13
  import { EmojiPicker } from '@atlaskit/emoji';
14
14
  import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
15
15
  import Tooltip from '@atlaskit/tooltip';
@@ -20,7 +20,22 @@ import EditorEmojiAddIcon from './EditorEmojiAddIcon';
20
20
  const emojiPickerButtonWrapper = css({
21
21
  position: 'relative'
22
22
  });
23
- const EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPicker);
23
+ const EmojiPickerWithProvider = props => {
24
+ const {
25
+ emojiState
26
+ } = useSharedPluginState(props.pluginInjectionApi, ['emoji']);
27
+ const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
28
+ const emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
29
+ if (!emojiProvider) {
30
+ return null;
31
+ }
32
+ return jsx(EmojiPicker, {
33
+ emojiProvider: emojiProvider,
34
+ onSelection: props.updateEmoji,
35
+ onPickerRef: setOutsideClickTargetRef
36
+ });
37
+ };
38
+ const EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPickerWithProvider);
24
39
  export const EmojiPickerButton = props => {
25
40
  const buttonRef = React.useRef(null);
26
41
  const [isPopupOpen, setIsPopupOpen] = React.useState(false);
@@ -30,9 +45,9 @@ export const EmojiPickerButton = props => {
30
45
  }
31
46
  // eslint-disable-next-line react-hooks/exhaustive-deps
32
47
  }, [isPopupOpen]);
33
- const togglePopup = () => {
48
+ const togglePopup = useCallback(() => {
34
49
  setIsPopupOpen(!isPopupOpen);
35
- };
50
+ }, [setIsPopupOpen, isPopupOpen]);
36
51
  const updateEmoji = emoji => {
37
52
  setIsPopupOpen(false);
38
53
  props.onChange && props.onChange(emoji);
@@ -41,8 +56,8 @@ export const EmojiPickerButton = props => {
41
56
  (_props$editorView = props.editorView) === null || _props$editorView === void 0 ? void 0 : _props$editorView.focus();
42
57
  });
43
58
  };
44
- const isDetachedElement = el => !document.body.contains(el);
45
- const handleEmojiClickOutside = e => {
59
+ const isDetachedElement = useCallback(el => !document.body.contains(el), []);
60
+ const handleEmojiClickOutside = useCallback(e => {
46
61
  // Ignore click events for detached elements.
47
62
  // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
48
63
  // still in the document, and one once it's detached. Does not always occur, and
@@ -50,28 +65,12 @@ export const EmojiPickerButton = props => {
50
65
  if (e && e.target && !isDetachedElement(e.target)) {
51
66
  togglePopup();
52
67
  }
53
- };
54
- const handleEmojiPressEscape = () => {
68
+ }, [isDetachedElement, togglePopup]);
69
+ const handleEmojiPressEscape = useCallback(() => {
55
70
  var _buttonRef$current;
56
71
  setIsPopupOpen(false);
57
72
  (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
58
- };
59
- const EmojiPickerWithProvider = () => {
60
- const {
61
- emojiState
62
- } = useSharedPluginState(props.pluginInjectionApi, ['emoji']);
63
- const emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
64
- if (!emojiProvider) {
65
- return null;
66
- }
67
- return jsx(EmojiPickerWithListener, {
68
- emojiProvider: emojiProvider,
69
- onSelection: updateEmoji,
70
- onPickerRef: () => {},
71
- handleClickOutside: handleEmojiClickOutside,
72
- handleEscapeKeydown: handleEmojiPressEscape
73
- });
74
- };
73
+ }, [setIsPopupOpen, buttonRef]);
75
74
  const renderPopup = () => {
76
75
  if (!buttonRef.current || !isPopupOpen) {
77
76
  return;
@@ -88,7 +87,12 @@ export const EmojiPickerButton = props => {
88
87
  ,
89
88
  zIndex: props.setDisableParentScroll ? 600 : undefined,
90
89
  focusTrap: true
91
- }, jsx(EmojiPickerWithProvider, null));
90
+ }, jsx(EmojiPickerWithListener, {
91
+ handleEscapeKeydown: handleEmojiPressEscape,
92
+ handleClickOutside: handleEmojiClickOutside,
93
+ pluginInjectionApi: props.pluginInjectionApi,
94
+ updateEmoji: updateEmoji
95
+ }));
92
96
  };
93
97
  const title = props.title || '';
94
98
  return jsx("div", {
package/dist/es2019/ui/Toolbar.js CHANGED
@@ -116,6 +116,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
116
116
  onFocus: () => dispatchCommand(item.onFocus),
117
117
  onBlur: () => dispatchCommand(item.onBlur),
118
118
  onMount: item.onMount,
119
+ onUnmount: item.onUnmount,
119
120
  selected: item.selected,
120
121
  disabled: item.disabled,
121
122
  tooltipContent: item.tooltipContent,
@@ -124,7 +125,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
124
125
  ariaHasPopup: item.ariaHasPopup,
125
126
  tabIndex: item.tabIndex,
126
127
  isRadioButton: item.isRadioButton,
127
- pulse: item.pulse
128
+ pulse: item.pulse,
129
+ spotlightConfig: item.spotlightConfig
128
130
  }, item.showTitle && item.title);
129
131
  case 'input':
130
132
  if (fg('platform_editor_react18_phase2')) {
package/dist/esm/ui/Dropdown.js CHANGED
@@ -145,7 +145,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
145
145
  alignDropdownWithToolbar = _this$props2.alignDropdownWithToolbar,
146
146
  footer = _this$props2.footer,
147
147
  onMount = _this$props2.onMount,
148
- pulse = _this$props2.pulse;
148
+ pulse = _this$props2.pulse,
149
+ spotlightConfig = _this$props2.spotlightConfig;
149
150
  var trigger;
150
151
  if (icon) {
151
152
  var TriggerIcon = hideExpandIcon ? icon : jsx(CompositeIcon, {
@@ -161,7 +162,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
161
162
  disabled: disabled,
162
163
  tooltipContent: tooltip,
163
164
  onMount: onMount,
164
- pulse: pulse
165
+ pulse: pulse,
166
+ spotlightConfig: spotlightConfig
165
167
  });
166
168
  } else {
167
169
  trigger = jsx(Button, {
@@ -183,7 +185,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
183
185
  ariaHasPopup: true,
184
186
  areaControls: dropdownListId,
185
187
  onMount: onMount,
186
- pulse: pulse
188
+ pulse: pulse,
189
+ spotlightConfig: spotlightConfig
187
190
  }, title);
188
191
  }
189
192
 
package/dist/esm/ui/EmojiPickerButton.js CHANGED
@@ -3,14 +3,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  * @jsxRuntime classic
4
4
  * @jsx jsx
5
5
  */
6
- import React from 'react';
6
+ import React, { useCallback, useContext } from 'react';
7
7
 
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import Button from '@atlaskit/button/standard-button';
11
11
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
12
12
  import { Popup } from '@atlaskit/editor-common/ui';
13
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
13
+ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
14
14
  import { EmojiPicker } from '@atlaskit/emoji';
15
15
  import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
16
16
  import Tooltip from '@atlaskit/tooltip';
@@ -21,7 +21,21 @@ import EditorEmojiAddIcon from './EditorEmojiAddIcon';
21
21
  var emojiPickerButtonWrapper = css({
22
22
  position: 'relative'
23
23
  });
24
- var EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPicker);
24
+ var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
25
+ var _useSharedPluginState = useSharedPluginState(props.pluginInjectionApi, ['emoji']),
26
+ emojiState = _useSharedPluginState.emojiState;
27
+ var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
28
+ var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
29
+ if (!emojiProvider) {
30
+ return null;
31
+ }
32
+ return jsx(EmojiPicker, {
33
+ emojiProvider: emojiProvider,
34
+ onSelection: props.updateEmoji,
35
+ onPickerRef: setOutsideClickTargetRef
36
+ });
37
+ };
38
+ var EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPickerWithProvider);
25
39
  export var EmojiPickerButton = function EmojiPickerButton(props) {
26
40
  var buttonRef = React.useRef(null);
27
41
  var _React$useState = React.useState(false),
@@ -34,9 +48,9 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
34
48
  }
35
49
  // eslint-disable-next-line react-hooks/exhaustive-deps
36
50
  }, [isPopupOpen]);
37
- var togglePopup = function togglePopup() {
51
+ var togglePopup = useCallback(function () {
38
52
  setIsPopupOpen(!isPopupOpen);
39
- };
53
+ }, [setIsPopupOpen, isPopupOpen]);
40
54
  var updateEmoji = function updateEmoji(emoji) {
41
55
  setIsPopupOpen(false);
42
56
  props.onChange && props.onChange(emoji);
@@ -45,10 +59,10 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
45
59
  (_props$editorView = props.editorView) === null || _props$editorView === void 0 || _props$editorView.focus();
46
60
  });
47
61
  };
48
- var isDetachedElement = function isDetachedElement(el) {
62
+ var isDetachedElement = useCallback(function (el) {
49
63
  return !document.body.contains(el);
50
- };
51
- var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
64
+ }, []);
65
+ var handleEmojiClickOutside = useCallback(function (e) {
52
66
  // Ignore click events for detached elements.
53
67
  // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
54
68
  // still in the document, and one once it's detached. Does not always occur, and
@@ -56,27 +70,12 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
56
70
  if (e && e.target && !isDetachedElement(e.target)) {
57
71
  togglePopup();
58
72
  }
59
- };
60
- var handleEmojiPressEscape = function handleEmojiPressEscape() {
73
+ }, [isDetachedElement, togglePopup]);
74
+ var handleEmojiPressEscape = useCallback(function () {
61
75
  var _buttonRef$current;
62
76
  setIsPopupOpen(false);
63
77
  (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
64
- };
65
- var EmojiPickerWithProvider = function EmojiPickerWithProvider() {
66
- var _useSharedPluginState = useSharedPluginState(props.pluginInjectionApi, ['emoji']),
67
- emojiState = _useSharedPluginState.emojiState;
68
- var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
69
- if (!emojiProvider) {
70
- return null;
71
- }
72
- return jsx(EmojiPickerWithListener, {
73
- emojiProvider: emojiProvider,
74
- onSelection: updateEmoji,
75
- onPickerRef: function onPickerRef() {},
76
- handleClickOutside: handleEmojiClickOutside,
77
- handleEscapeKeydown: handleEmojiPressEscape
78
- });
79
- };
78
+ }, [setIsPopupOpen, buttonRef]);
80
79
  var renderPopup = function renderPopup() {
81
80
  if (!buttonRef.current || !isPopupOpen) {
82
81
  return;
@@ -93,7 +92,12 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
93
92
  ,
94
93
  zIndex: props.setDisableParentScroll ? 600 : undefined,
95
94
  focusTrap: true
96
- }, jsx(EmojiPickerWithProvider, null));
95
+ }, jsx(EmojiPickerWithListener, {
96
+ handleEscapeKeydown: handleEmojiPressEscape,
97
+ handleClickOutside: handleEmojiClickOutside,
98
+ pluginInjectionApi: props.pluginInjectionApi,
99
+ updateEmoji: updateEmoji
100
+ }));
97
101
  };
98
102
  var title = props.title || '';
99
103
  return jsx("div", {
package/dist/esm/ui/Toolbar.js CHANGED
@@ -129,6 +129,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
129
129
  return dispatchCommand(item.onBlur);
130
130
  },
131
131
  onMount: item.onMount,
132
+ onUnmount: item.onUnmount,
132
133
  selected: item.selected,
133
134
  disabled: item.disabled,
134
135
  tooltipContent: item.tooltipContent,
@@ -137,7 +138,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
137
138
  ariaHasPopup: item.ariaHasPopup,
138
139
  tabIndex: item.tabIndex,
139
140
  isRadioButton: item.isRadioButton,
140
- pulse: item.pulse
141
+ pulse: item.pulse,
142
+ spotlightConfig: item.spotlightConfig
141
143
  }, item.showTitle && item.title);
142
144
  case 'input':
143
145
  if (fg('platform_editor_react18_phase2')) {
package/dist/types/ui/Dropdown.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  import type { ReactElement } from 'react';
7
7
  import React, { Component } from 'react';
8
8
  import { jsx } from '@emotion/react';
9
- import type { CommandDispatch, DropdownOptions } from '@atlaskit/editor-common/types';
9
+ import type { CommandDispatch, DropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
10
10
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
11
11
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
12
12
  export interface Props {
@@ -34,6 +34,7 @@ export interface Props {
34
34
  footer?: React.ReactNode;
35
35
  /** If true, the component will have pulse onboarding effect around it. */
36
36
  pulse?: boolean;
37
+ spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
37
38
  }
38
39
  export interface State {
39
40
  isOpen: boolean;
package/dist/types-ts4.5/ui/Dropdown.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  import type { ReactElement } from 'react';
7
7
  import React, { Component } from 'react';
8
8
  import { jsx } from '@emotion/react';
9
- import type { CommandDispatch, DropdownOptions } from '@atlaskit/editor-common/types';
9
+ import type { CommandDispatch, DropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
10
10
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
11
11
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
12
12
  export interface Props {
@@ -34,6 +34,7 @@ export interface Props {
34
34
  footer?: React.ReactNode;
35
35
  /** If true, the component will have pulse onboarding effect around it. */
36
36
  pulse?: boolean;
37
+ spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
37
38
  }
38
39
  export interface State {
39
40
  isOpen: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-floating-toolbar",
3
- "version": "1.13.20",
3
+ "version": "1.14.0",
4
4
  "description": "Floating toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -26,9 +26,9 @@
26
26
  "@atlaskit/adf-utils": "^19.10.0",
27
27
  "@atlaskit/button": "^20.3.0",
28
28
  "@atlaskit/checkbox": "^15.1.0",
29
- "@atlaskit/editor-common": "^94.3.0",
30
- "@atlaskit/editor-palette": "1.6.2",
31
- "@atlaskit/editor-plugin-block-controls": "^2.10.0",
29
+ "@atlaskit/editor-common": "^94.8.0",
30
+ "@atlaskit/editor-palette": "1.6.3",
31
+ "@atlaskit/editor-plugin-block-controls": "^2.12.0",
32
32
  "@atlaskit/editor-plugin-context-panel": "^1.3.0",
33
33
  "@atlaskit/editor-plugin-copy-button": "^1.3.0",
34
34
  "@atlaskit/editor-plugin-decorations": "^1.3.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/modal-dialog": "^12.17.0",
45
45
  "@atlaskit/platform-feature-flags": "^0.3.0",
46
46
  "@atlaskit/primitives": "^12.2.0",
47
- "@atlaskit/select": "^18.3.0",
47
+ "@atlaskit/select": "^18.4.0",
48
48
  "@atlaskit/theme": "^14.0.0",
49
49
  "@atlaskit/tokens": "^2.0.0",
50
50
  "@atlaskit/tooltip": "^18.8.0",