@atlaskit/editor-common 93.1.5 → 93.1.6

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 (53) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/afm-cc/tsconfig.json +3 -0
  3. package/dist/cjs/analytics/types/engagement-platform-events.js +5 -0
  4. package/dist/cjs/analytics/types/enums.js +1 -0
  5. package/dist/cjs/element-browser/components/StatelessElementBrowser.js +1 -2
  6. package/dist/cjs/monitoring/error.js +1 -1
  7. package/dist/cjs/ui/DropList/index.js +1 -1
  8. package/dist/cjs/ui/FloatingToolbar/Button.js +6 -2
  9. package/dist/cjs/ui/Mention/index.js +15 -3
  10. package/dist/cjs/ui/Mention/mention-with-providers.js +58 -8
  11. package/dist/cjs/ui/Pulse/Pulse.js +36 -0
  12. package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +2 -11
  13. package/dist/cjs/ui-menu/DropdownMenu/index.js +5 -20
  14. package/dist/cjs/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +5 -9
  15. package/dist/es2019/analytics/types/engagement-platform-events.js +1 -0
  16. package/dist/es2019/analytics/types/enums.js +1 -0
  17. package/dist/es2019/element-browser/components/StatelessElementBrowser.js +1 -2
  18. package/dist/es2019/monitoring/error.js +1 -1
  19. package/dist/es2019/ui/DropList/index.js +1 -1
  20. package/dist/es2019/ui/FloatingToolbar/Button.js +6 -2
  21. package/dist/es2019/ui/Mention/index.js +15 -2
  22. package/dist/es2019/ui/Mention/mention-with-providers.js +49 -2
  23. package/dist/es2019/ui/Pulse/Pulse.js +29 -0
  24. package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +2 -11
  25. package/dist/es2019/ui-menu/DropdownMenu/index.js +5 -20
  26. package/dist/es2019/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +5 -9
  27. package/dist/esm/analytics/types/engagement-platform-events.js +1 -0
  28. package/dist/esm/analytics/types/enums.js +1 -0
  29. package/dist/esm/element-browser/components/StatelessElementBrowser.js +1 -2
  30. package/dist/esm/monitoring/error.js +1 -1
  31. package/dist/esm/ui/DropList/index.js +1 -1
  32. package/dist/esm/ui/FloatingToolbar/Button.js +6 -2
  33. package/dist/esm/ui/Mention/index.js +15 -2
  34. package/dist/esm/ui/Mention/mention-with-providers.js +59 -10
  35. package/dist/esm/ui/Pulse/Pulse.js +29 -0
  36. package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +2 -11
  37. package/dist/esm/ui-menu/DropdownMenu/index.js +5 -20
  38. package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +5 -9
  39. package/dist/types/analytics/types/engagement-platform-events.d.ts +20 -0
  40. package/dist/types/analytics/types/enums.d.ts +2 -1
  41. package/dist/types/analytics/types/events.d.ts +2 -1
  42. package/dist/types/types/floating-toolbar.d.ts +4 -0
  43. package/dist/types/ui/FloatingToolbar/Button.d.ts +3 -1
  44. package/dist/types/ui/Mention/mention-with-providers.d.ts +2 -1
  45. package/dist/types/ui/Pulse/Pulse.d.ts +18 -0
  46. package/dist/types-ts4.5/analytics/types/engagement-platform-events.d.ts +20 -0
  47. package/dist/types-ts4.5/analytics/types/enums.d.ts +2 -1
  48. package/dist/types-ts4.5/analytics/types/events.d.ts +2 -1
  49. package/dist/types-ts4.5/types/floating-toolbar.d.ts +4 -0
  50. package/dist/types-ts4.5/ui/FloatingToolbar/Button.d.ts +3 -1
  51. package/dist/types-ts4.5/ui/Mention/mention-with-providers.d.ts +2 -1
  52. package/dist/types-ts4.5/ui/Pulse/Pulse.d.ts +18 -0
  53. package/package.json +7 -9
@@ -1,5 +1,4 @@
1
1
  import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
2
- import { fg } from '@atlaskit/platform-feature-flags';
3
2
  const hasEnabledItems = list => list.some(item => item.getAttribute('aria-disabled') !== 'true');
4
3
 
5
4
  /**
@@ -112,11 +111,7 @@ export const MenuArrowKeyNavigationProvider = ({
112
111
  if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
113
112
  return;
114
113
  }
115
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
116
- if (!disableCloseOnArrowClick) {
117
- handleClose(event);
118
- }
119
- } else {
114
+ if (!disableCloseOnArrowClick) {
120
115
  handleClose(event);
121
116
  }
122
117
  if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
@@ -127,11 +122,7 @@ export const MenuArrowKeyNavigationProvider = ({
127
122
  if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
128
123
  return;
129
124
  }
130
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
131
- if (!disableCloseOnArrowClick) {
132
- handleClose(event);
133
- }
134
- } else {
125
+ if (!disableCloseOnArrowClick) {
135
126
  handleClose(event);
136
127
  }
137
128
  if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
@@ -195,9 +195,9 @@ export default class DropdownMenuWrapper extends PureComponent {
195
195
  shouldFitContainer: true,
196
196
  isTriggerNotTabbable: true,
197
197
  handleClickOutside: this.handleClose,
198
- handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
198
+ handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
199
199
  handleEnterKeydown: e => {
200
- if (fg('platform_editor_a11y_table_context_menu') || fg('platform-editor-a11y-image-border-options-dropdown')) {
200
+ if (fg('platform_editor_a11y_table_context_menu')) {
201
201
  if (!allowEnterDefaultBehavior) {
202
202
  e.preventDefault();
203
203
  }
@@ -305,27 +305,12 @@ export function DropdownMenuItem({
305
305
  const _handleSubmenuActive = event => {
306
306
  setSubmenuActive(Boolean(event.target instanceof HTMLElement && event.target.closest(`.${DropdownMenuSharedCssClassName.SUBMENU}`)));
307
307
  };
308
- let ariaLabel;
309
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
310
- ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
311
- } else {
312
- ariaLabel = item['aria-label'] || String(item.content);
313
- }
314
- let testId;
315
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
316
- testId = item['data-testid'] || `dropdown-item__${item.content}`;
317
- } else {
318
- testId = `dropdown-item__${String(item.content)}`;
319
- }
308
+ const ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
309
+ const testId = item['data-testid'] || `dropdown-item__${item.content}`;
320
310
 
321
311
  // From time to time we don't want to have any tabIndex on item wrapper
322
312
  // especially when we pass any interactive element as a item.content
323
- let tabIndex;
324
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
325
- tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
326
- } else {
327
- tabIndex = -1;
328
- }
313
+ const tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
329
314
  const dropListItem = jsx("div", {
330
315
  css: () => buttonStyles(item.isActive, submenuActive),
331
316
  tabIndex: tabIndex,
@@ -8,7 +8,6 @@ import React, { useCallback, useLayoutEffect, useRef } from 'react';
8
8
 
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { css, jsx } from '@emotion/react';
11
- import { fg } from '@atlaskit/platform-feature-flags';
12
11
  import { ELEMENT_BROWSER_ID } from '../../element-browser';
13
12
  import { fullPageMessages as messages } from '../../messages';
14
13
  import { EDIT_AREA_ID } from '../../ui';
@@ -115,7 +114,7 @@ export const ToolbarArrowKeyNavigationProvider = ({
115
114
  * @param event
116
115
  */
117
116
  const handleKeyDown = event => {
118
- var _document$querySelect, _document$querySelect2, _wrapperRef$current2;
117
+ var _document$querySelect, _document$querySelect2, _wrapperRef$current, _wrapperRef$current2;
119
118
  // To trap the focus inside the horizontal toolbar for left and right arrow keys
120
119
  const targetElement = event.target;
121
120
  if (targetElement instanceof HTMLElement && !targetElement.closest(`${childComponentSelector}`)) {
@@ -129,13 +128,10 @@ export const ToolbarArrowKeyNavigationProvider = ({
129
128
  // if menu wrapper exists, then a menu is open and arrow keys will be handled by MenuArrowKeyNavigationProvider
130
129
  return;
131
130
  }
132
- if (fg('editor-fix-esc-main-toolbar-navigation')) {
133
- var _wrapperRef$current;
134
- const elementBrowser = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector(`#${ELEMENT_BROWSER_ID}`);
135
- if (elementBrowser) {
136
- // if element browser is open, then arrow keys will be handled by MenuArrowKeyNavigationProvider
137
- return;
138
- }
131
+ const elementBrowser = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector(`#${ELEMENT_BROWSER_ID}`);
132
+ if (elementBrowser) {
133
+ // if element browser is open, then arrow keys will be handled by MenuArrowKeyNavigationProvider
134
+ return;
139
135
  }
140
136
  const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
141
137
  if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
@@ -253,6 +253,7 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
253
253
  ACTION_SUBJECT["ELEMENT"] = "element";
254
254
  ACTION_SUBJECT["CONTEXT_MENU"] = "contextMenu";
255
255
  ACTION_SUBJECT["INLINE_DIALOG"] = "inlineDialog";
256
+ ACTION_SUBJECT["ENGAGEMENT_PLATFORM"] = "engagementPlatform";
256
257
  return ACTION_SUBJECT;
257
258
  }({});
258
259
  export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
11
11
  import { FormattedMessage } from 'react-intl-next';
12
12
  import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
13
13
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
14
- import { fg } from '@atlaskit/platform-feature-flags';
15
14
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
16
15
  import { DEVICE_BREAKPOINT_NUMBERS, ELEMENT_BROWSER_ID, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
17
16
  import useContainerWidth from '../hooks/use-container-width';
@@ -215,7 +214,7 @@ function StatelessElementBrowser(props) {
215
214
  return jsx("div", {
216
215
  css: wrapper,
217
216
  "data-testid": "element-browser",
218
- id: fg('editor-fix-esc-main-toolbar-navigation') ? ELEMENT_BROWSER_ID : undefined
217
+ id: ELEMENT_BROWSER_ID
219
218
  }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
220
219
  selectedItemIndex: selectedItemIndex,
221
220
  focusedItemIndex: focusedItemIndex,
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  import { isFedRamp } from './environment';
8
8
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
9
9
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
10
- var packageVersion = "93.1.5";
10
+ var packageVersion = "93.1.6";
11
11
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
12
12
  // Remove URL as it has UGC
13
13
  // TODO: Sanitise the URL instead of just removing it
@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
21
21
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
22
22
  import Layer from '../Layer';
23
23
  var packageName = "@atlaskit/editor-common";
24
- var packageVersion = "93.1.5";
24
+ var packageVersion = "93.1.6";
25
25
  var halfFocusRing = 1;
26
26
  var dropOffset = '0, 8';
27
27
  var DropList = /*#__PURE__*/function (_Component) {
@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
6
6
  import React, { useEffect } from 'react';
7
7
  import Button from '@atlaskit/button/custom-theme-button';
8
8
  import Tooltip from '@atlaskit/tooltip';
9
+ import { Pulse } from '../Pulse/Pulse';
9
10
  import { getButtonStyles, iconOnlySpacing } from './styles';
10
11
  export default (function (_ref) {
11
12
  var title = _ref.title,
@@ -35,7 +36,8 @@ export default (function (_ref) {
35
36
  tabIndex = _ref.tabIndex,
36
37
  areaControls = _ref.areaControls,
37
38
  ariaLabel = _ref.ariaLabel,
38
- isRadioButton = _ref.isRadioButton;
39
+ isRadioButton = _ref.isRadioButton,
40
+ pulse = _ref.pulse;
39
41
  // Check if there's only an icon and add additional styles
40
42
  var iconOnly = (icon || iconAfter) && !children;
41
43
  var customSpacing = iconOnly ? iconOnlySpacing : {};
@@ -58,6 +60,8 @@ export default (function (_ref) {
58
60
  }, /*#__PURE__*/React.createElement("div", {
59
61
  onMouseEnter: onMouseEnter,
60
62
  onMouseLeave: onMouseLeave
63
+ }, /*#__PURE__*/React.createElement(Pulse, {
64
+ pulse: pulse
61
65
  }, /*#__PURE__*/React.createElement(Button
62
66
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
63
67
  , {
@@ -100,5 +104,5 @@ export default (function (_ref) {
100
104
  // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
101
105
  ,
102
106
  tabIndex: tabIndex
103
- }, children)));
107
+ }, children))));
104
108
  });
@@ -7,9 +7,11 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
7
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
8
  function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
9
9
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
10
+ /* eslint-disable @repo/internal/react/no-class-components */
10
11
  import React, { PureComponent } from 'react';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
11
13
  import { ProviderFactory, WithProviders } from '../../provider-factory';
12
- import MentionWithProviders from './mention-with-providers';
14
+ import { MentionWithProviders, MentionWithProvidersOld } from './mention-with-providers';
13
15
  var Mention = /*#__PURE__*/function (_PureComponent) {
14
16
  _inherits(Mention, _PureComponent);
15
17
  var _super = _createSuper(Mention);
@@ -26,7 +28,18 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
26
28
  localId = _this$props.localId;
27
29
  var mentionProvider = providers.mentionProvider,
28
30
  profilecardProvider = providers.profilecardProvider;
29
- return /*#__PURE__*/React.createElement(MentionWithProviders, {
31
+ if (fg('platform_editor_react18_mention_with_provider')) {
32
+ return /*#__PURE__*/React.createElement(MentionWithProviders, {
33
+ id: id,
34
+ text: text,
35
+ accessLevel: accessLevel,
36
+ localId: localId,
37
+ eventHandlers: eventHandlers,
38
+ mentionProvider: mentionProvider,
39
+ profilecardProvider: profilecardProvider
40
+ });
41
+ }
42
+ return /*#__PURE__*/React.createElement(MentionWithProvidersOld, {
30
43
  id: id,
31
44
  text: text,
32
45
  accessLevel: accessLevel,
@@ -6,19 +6,69 @@ import _inherits from "@babel/runtime/helpers/inherits";
6
6
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
7
7
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
8
8
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
9
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
9
10
  function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
10
11
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
11
- import React, { PureComponent } from 'react';
12
+ import React, { PureComponent, useLayoutEffect, useRef, useState } from 'react';
12
13
  import { ResourcedMention } from '@atlaskit/mention/element';
13
14
  import ResourcedMentionWithProfilecard from './mention-with-profilecard';
14
15
  var GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
15
16
  var noop = function noop() {};
16
- var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
17
- _inherits(MentionWithProviders, _PureComponent);
18
- var _super = _createSuper(MentionWithProviders);
19
- function MentionWithProviders() {
17
+ export var MentionWithProviders = function MentionWithProviders(_ref) {
18
+ var accessLevel = _ref.accessLevel,
19
+ eventHandlers = _ref.eventHandlers,
20
+ id = _ref.id,
21
+ mentionProvider = _ref.mentionProvider,
22
+ profilecardProviderResolver = _ref.profilecardProvider,
23
+ text = _ref.text,
24
+ localId = _ref.localId;
25
+ var _useState = useState(null),
26
+ _useState2 = _slicedToArray(_useState, 2),
27
+ profilecardProvider = _useState2[0],
28
+ setProfilecardProvider = _useState2[1];
29
+ var mountedRef = useRef(true);
30
+ useLayoutEffect(function () {
31
+ mountedRef.current = true;
32
+ return function () {
33
+ mountedRef.current = false;
34
+ };
35
+ }, []);
36
+ useLayoutEffect(function () {
37
+ // We are not using async/await here to avoid having an intermediate Promise
38
+ // introduced by the transpiler.
39
+ // This will allow consumer to use a SynchronousPromise.resolve and avoid useless
40
+ // rerendering
41
+ profilecardProviderResolver === null || profilecardProviderResolver === void 0 || profilecardProviderResolver.then(function (result) {
42
+ if (mountedRef.current) {
43
+ setProfilecardProvider(result);
44
+ }
45
+ }).catch(function () {
46
+ if (mountedRef.current) {
47
+ setProfilecardProvider(null);
48
+ }
49
+ });
50
+ }, [profilecardProviderResolver]);
51
+ var MentionComponent = profilecardProviderResolver && GENERIC_USER_IDS.indexOf(id) === -1 ? ResourcedMentionWithProfilecard : ResourcedMention;
52
+ return /*#__PURE__*/React.createElement(MentionComponent, {
53
+ id: id,
54
+ text: text,
55
+ accessLevel: accessLevel,
56
+ localId: localId,
57
+ mentionProvider: mentionProvider,
58
+ profilecardProvider: profilecardProvider,
59
+ onClick: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onClick,
60
+ onMouseEnter: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseEnter,
61
+ onMouseLeave: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseLeave
62
+ });
63
+ };
64
+
65
+ // eslint-disable-next-line @repo/internal/react/no-class-components
66
+ export var MentionWithProvidersOld = /*#__PURE__*/function (_PureComponent) {
67
+ _inherits(MentionWithProvidersOld, _PureComponent);
68
+ var _super = _createSuper(MentionWithProvidersOld);
69
+ function MentionWithProvidersOld() {
20
70
  var _this;
21
- _classCallCheck(this, MentionWithProviders);
71
+ _classCallCheck(this, MentionWithProvidersOld);
22
72
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
23
73
  args[_key] = arguments[_key];
24
74
  }
@@ -28,7 +78,7 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
28
78
  });
29
79
  return _this;
30
80
  }
31
- _createClass(MentionWithProviders, [{
81
+ _createClass(MentionWithProvidersOld, [{
32
82
  key: "UNSAFE_componentWillMount",
33
83
  value: function UNSAFE_componentWillMount() {
34
84
  this.updateProfilecardProvider(this.props);
@@ -90,6 +140,5 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
90
140
  }, actionHandlers));
91
141
  }
92
142
  }]);
93
- return MentionWithProviders;
94
- }(PureComponent);
95
- export { MentionWithProviders as default };
143
+ return MentionWithProvidersOld;
144
+ }(PureComponent);
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { SpotlightPulse } from '@atlaskit/onboarding';
3
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
+ /**
5
+ * Wraps children with {@link SpotlightPulse} component.
6
+ *
7
+ * It adds pulse effect to children if `pulse` is `true`.
8
+ *
9
+ * This custom component exists because the {@link SpotlightPulse} with `pulse={false}` renders extra `div` around `children`.
10
+ * We want to keep `children` as it is if there is no `pulse`.
11
+ */
12
+ export function Pulse(_ref) {
13
+ var pulse = _ref.pulse,
14
+ _ref$radius = _ref.radius,
15
+ radius = _ref$radius === void 0 ? 3 : _ref$radius,
16
+ children = _ref.children;
17
+ if (editorExperiment('platform_editor_ai_onboarding', 'test') && pulse) {
18
+ return (
19
+ /*#__PURE__*/
20
+ // SpotlightPulse shows pulse effect if `pulse` is `undefined`.
21
+ // That's why we need to cast `pulse` to `false` if it's `undefined`.
22
+ React.createElement(SpotlightPulse, {
23
+ radius: radius,
24
+ pulse: pulse !== null && pulse !== void 0 ? pulse : false
25
+ }, children)
26
+ );
27
+ }
28
+ return /*#__PURE__*/React.createElement(React.Fragment, null, children);
29
+ }
@@ -1,6 +1,5 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
3
- import { fg } from '@atlaskit/platform-feature-flags';
4
3
  var hasEnabledItems = function hasEnabledItems(list) {
5
4
  return list.some(function (item) {
6
5
  return item.getAttribute('aria-disabled') !== 'true';
@@ -121,11 +120,7 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
121
120
  if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
122
121
  return;
123
122
  }
124
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
125
- if (!disableCloseOnArrowClick) {
126
- handleClose(event);
127
- }
128
- } else {
123
+ if (!disableCloseOnArrowClick) {
129
124
  handleClose(event);
130
125
  }
131
126
  if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
@@ -136,11 +131,7 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
136
131
  if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
137
132
  return;
138
133
  }
139
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
140
- if (!disableCloseOnArrowClick) {
141
- handleClose(event);
142
- }
143
- } else {
134
+ if (!disableCloseOnArrowClick) {
144
135
  handleClose(event);
145
136
  }
146
137
  if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
@@ -182,9 +182,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
182
182
  shouldFitContainer: true,
183
183
  isTriggerNotTabbable: true,
184
184
  handleClickOutside: this.handleClose,
185
- handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
185
+ handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
186
186
  handleEnterKeydown: function handleEnterKeydown(e) {
187
- if (fg('platform_editor_a11y_table_context_menu') || fg('platform-editor-a11y-image-border-options-dropdown')) {
187
+ if (fg('platform_editor_a11y_table_context_menu')) {
188
188
  if (!allowEnterDefaultBehavior) {
189
189
  e.preventDefault();
190
190
  }
@@ -299,27 +299,12 @@ export function DropdownMenuItem(_ref) {
299
299
  var _handleSubmenuActive = function _handleSubmenuActive(event) {
300
300
  setSubmenuActive(Boolean(event.target instanceof HTMLElement && event.target.closest(".".concat(DropdownMenuSharedCssClassName.SUBMENU))));
301
301
  };
302
- var ariaLabel;
303
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
304
- ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
305
- } else {
306
- ariaLabel = item['aria-label'] || String(item.content);
307
- }
308
- var testId;
309
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
310
- testId = item['data-testid'] || "dropdown-item__".concat(item.content);
311
- } else {
312
- testId = "dropdown-item__".concat(String(item.content));
313
- }
302
+ var ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
303
+ var testId = item['data-testid'] || "dropdown-item__".concat(item.content);
314
304
 
315
305
  // From time to time we don't want to have any tabIndex on item wrapper
316
306
  // especially when we pass any interactive element as a item.content
317
- var tabIndex;
318
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
319
- tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
320
- } else {
321
- tabIndex = -1;
322
- }
307
+ var tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
323
308
  var dropListItem = jsx("div", {
324
309
  css: function css() {
325
310
  return buttonStyles(item.isActive, submenuActive);
@@ -8,7 +8,6 @@ import React, { useCallback, useLayoutEffect, useRef } from 'react';
8
8
 
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { css, jsx } from '@emotion/react';
11
- import { fg } from '@atlaskit/platform-feature-flags';
12
11
  import { ELEMENT_BROWSER_ID } from '../../element-browser';
13
12
  import { fullPageMessages as messages } from '../../messages';
14
13
  import { EDIT_AREA_ID } from '../../ui';
@@ -113,7 +112,7 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
113
112
  * @param event
114
113
  */
115
114
  var handleKeyDown = function handleKeyDown(event) {
116
- var _document$querySelect, _document$querySelect2, _wrapperRef$current2;
115
+ var _document$querySelect, _document$querySelect2, _wrapperRef$current, _wrapperRef$current2;
117
116
  // To trap the focus inside the horizontal toolbar for left and right arrow keys
118
117
  var targetElement = event.target;
119
118
  if (targetElement instanceof HTMLElement && !targetElement.closest("".concat(childComponentSelector))) {
@@ -127,13 +126,10 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
127
126
  // if menu wrapper exists, then a menu is open and arrow keys will be handled by MenuArrowKeyNavigationProvider
128
127
  return;
129
128
  }
130
- if (fg('editor-fix-esc-main-toolbar-navigation')) {
131
- var _wrapperRef$current;
132
- var elementBrowser = wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector("#".concat(ELEMENT_BROWSER_ID));
133
- if (elementBrowser) {
134
- // if element browser is open, then arrow keys will be handled by MenuArrowKeyNavigationProvider
135
- return;
136
- }
129
+ var elementBrowser = wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector("#".concat(ELEMENT_BROWSER_ID));
130
+ if (elementBrowser) {
131
+ // if element browser is open, then arrow keys will be handled by MenuArrowKeyNavigationProvider
132
+ return;
137
133
  }
138
134
  var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
139
135
  if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
@@ -0,0 +1,20 @@
1
+ import type { ACTION, ACTION_SUBJECT } from './enums';
2
+ import type { UIAEP } from './utils';
3
+ /**
4
+ * Payload of an engagement platform event that is sent when an error occurs.
5
+ *
6
+ * It's used by `@atlassian/editor-plugin-engagement-platform` plugin.
7
+ */
8
+ type EngagementPlatformErroredAEP = UIAEP<ACTION.ERRORED, ACTION_SUBJECT.ENGAGEMENT_PLATFORM, undefined, {
9
+ /** The error message. */
10
+ error: string;
11
+ /** The error stack trace. */
12
+ errorStack?: string;
13
+ }, undefined>;
14
+ /**
15
+ * Payload of an engagement platform event.
16
+ *
17
+ * It's used by `@atlassian/editor-plugin-engagement-platform` plugin.
18
+ */
19
+ export type EngagementPlatformEventPayload = EngagementPlatformErroredAEP;
20
+ export {};
@@ -255,7 +255,8 @@ export declare enum ACTION_SUBJECT {
255
255
  DRAG = "drag",
256
256
  ELEMENT = "element",
257
257
  CONTEXT_MENU = "contextMenu",
258
- INLINE_DIALOG = "inlineDialog"
258
+ INLINE_DIALOG = "inlineDialog",
259
+ ENGAGEMENT_PLATFORM = "engagementPlatform"
259
260
  }
260
261
  export declare enum ACTION_SUBJECT_ID {
261
262
  ACTION = "action",
@@ -11,6 +11,7 @@ import type { DatasourceClickedPayload } from './datasource-clicked-events';
11
11
  import type { DateEventPayload } from './date-events';
12
12
  import type { ElementBrowserEventPayload } from './element-browser-events';
13
13
  import type { ElementEventPayload } from './element-events';
14
+ import type { EngagementPlatformEventPayload } from './engagement-platform-events';
14
15
  import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, CONTENT_COMPONENT, FLOATING_CONTROLS_TITLE } from './enums';
15
16
  import type { ExperimentalEventPayload } from './experimental-events';
16
17
  import type { ExtensionEventPayload } from './extension-events';
@@ -44,7 +45,7 @@ export type SimplifiedNode = {
44
45
  marks?: string[];
45
46
  content?: SimplifiedNode[];
46
47
  };
47
- export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | CutCopyEventPayload | ErrorEventPayload | ExperimentalEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | ContextMenuEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload;
48
+ export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | CutCopyEventPayload | ErrorEventPayload | ExperimentalEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | ContextMenuEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload | EngagementPlatformEventPayload;
48
49
  type CustomPanelEventPayload = TrackAEP<ACTION.CHANGED_BACKGROUND_COLOR | ACTION.CHANGED_ICON | ACTION.REMOVE_ICON, ACTION_SUBJECT.PANEL, ACTION_SUBJECT_ID.PANEL, {
49
50
  previousColor: string;
50
51
  newColor: string;
@@ -131,6 +131,8 @@ export type FloatingToolbarButton<T extends {}> = {
131
131
  tabIndex?: number | null | undefined;
132
132
  focusEditoronEnter?: boolean;
133
133
  supportsViewMode?: boolean;
134
+ /** If true, the component will have pulse onboarding effect around it. */
135
+ pulse?: boolean;
134
136
  };
135
137
  export type FloatingToolbarInput<T extends {}> = {
136
138
  id: string;
@@ -217,6 +219,8 @@ export type FloatingToolbarDropdown<T extends {}> = {
217
219
  alignDropdownWithToolbar?: boolean;
218
220
  onToggle?: (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
219
221
  footer?: React.ReactNode;
222
+ /** If true, the component will have pulse onboarding effect around it. */
223
+ pulse?: boolean;
220
224
  };
221
225
  type FloatingToolbarExtensionsPlaceholder = {
222
226
  type: 'extensions-placeholder';
@@ -29,6 +29,8 @@ export interface Props {
29
29
  tabIndex?: number | null | undefined;
30
30
  areaControls?: string;
31
31
  isRadioButton?: boolean;
32
+ /** If true, the component will have pulse onboarding effect around it. */
33
+ pulse?: boolean;
32
34
  }
33
- declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onMount, selected, disabled, href, target, appearance, children, className, tooltipContent, tooltipStyle, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, }: Props) => JSX.Element;
35
+ declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onMount, selected, disabled, href, target, appearance, children, className, tooltipContent, tooltipStyle, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, pulse, }: Props) => JSX.Element;
34
36
  export default _default;
@@ -14,7 +14,8 @@ export interface Props {
14
14
  export interface State {
15
15
  profilecardProvider: ProfilecardProvider | null;
16
16
  }
17
- export default class MentionWithProviders extends PureComponent<Props, State> {
17
+ export declare const MentionWithProviders: ({ accessLevel, eventHandlers, id, mentionProvider, profilecardProvider: profilecardProviderResolver, text, localId, }: Props) => JSX.Element;
18
+ export declare class MentionWithProvidersOld extends PureComponent<Props, State> {
18
19
  state: State;
19
20
  UNSAFE_componentWillMount(): void;
20
21
  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
@@ -0,0 +1,18 @@
1
+ import { type ReactNode } from 'react';
2
+ interface Props {
3
+ /** If true, the component will have pulse onboarding effect around it. */
4
+ pulse?: boolean;
5
+ /** The radius of the pulse effect. */
6
+ radius?: number;
7
+ children: ReactNode;
8
+ }
9
+ /**
10
+ * Wraps children with {@link SpotlightPulse} component.
11
+ *
12
+ * It adds pulse effect to children if `pulse` is `true`.
13
+ *
14
+ * This custom component exists because the {@link SpotlightPulse} with `pulse={false}` renders extra `div` around `children`.
15
+ * We want to keep `children` as it is if there is no `pulse`.
16
+ */
17
+ export declare function Pulse({ pulse, radius, children }: Props): JSX.Element;
18
+ export {};
@@ -0,0 +1,20 @@
1
+ import type { ACTION, ACTION_SUBJECT } from './enums';
2
+ import type { UIAEP } from './utils';
3
+ /**
4
+ * Payload of an engagement platform event that is sent when an error occurs.
5
+ *
6
+ * It's used by `@atlassian/editor-plugin-engagement-platform` plugin.
7
+ */
8
+ type EngagementPlatformErroredAEP = UIAEP<ACTION.ERRORED, ACTION_SUBJECT.ENGAGEMENT_PLATFORM, undefined, {
9
+ /** The error message. */
10
+ error: string;
11
+ /** The error stack trace. */
12
+ errorStack?: string;
13
+ }, undefined>;
14
+ /**
15
+ * Payload of an engagement platform event.
16
+ *
17
+ * It's used by `@atlassian/editor-plugin-engagement-platform` plugin.
18
+ */
19
+ export type EngagementPlatformEventPayload = EngagementPlatformErroredAEP;
20
+ export {};
@@ -255,7 +255,8 @@ export declare enum ACTION_SUBJECT {
255
255
  DRAG = "drag",
256
256
  ELEMENT = "element",
257
257
  CONTEXT_MENU = "contextMenu",
258
- INLINE_DIALOG = "inlineDialog"
258
+ INLINE_DIALOG = "inlineDialog",
259
+ ENGAGEMENT_PLATFORM = "engagementPlatform"
259
260
  }
260
261
  export declare enum ACTION_SUBJECT_ID {
261
262
  ACTION = "action",
@@ -11,6 +11,7 @@ import type { DatasourceClickedPayload } from './datasource-clicked-events';
11
11
  import type { DateEventPayload } from './date-events';
12
12
  import type { ElementBrowserEventPayload } from './element-browser-events';
13
13
  import type { ElementEventPayload } from './element-events';
14
+ import type { EngagementPlatformEventPayload } from './engagement-platform-events';
14
15
  import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, CONTENT_COMPONENT, FLOATING_CONTROLS_TITLE } from './enums';
15
16
  import type { ExperimentalEventPayload } from './experimental-events';
16
17
  import type { ExtensionEventPayload } from './extension-events';
@@ -44,7 +45,7 @@ export type SimplifiedNode = {
44
45
  marks?: string[];
45
46
  content?: SimplifiedNode[];
46
47
  };
47
- export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | CutCopyEventPayload | ErrorEventPayload | ExperimentalEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | ContextMenuEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload;
48
+ export type AnalyticsEventPayload<T = void> = AvatarEventPayload | GeneralEventPayload<T> | FormatEventPayload | SubstituteEventPayload | InsertEventPayload | NodeEventPayload | MoveContentEventPayload | MediaEventPayload | TableEventPayload | PasteEventPayload | CutCopyEventPayload | ErrorEventPayload | ExperimentalEventPayload | FindReplaceEventPayload | DateEventPayload | SelectionEventPayload | ListEventPayload | ConfigPanelEventPayload | ElementBrowserEventPayload | CreateLinkInlineDialogEventPayload | HighlightActionsEventPayload | UnsupportedContentPayload | ExtensionEventPayload | TransactionEventPayload | TypeAheadPayload | UnlinkToolbarAEP | EditLinkToolbarAEP | OpenSettingsToolbarAEP | CustomPanelEventPayload | FeatureExposureAEP | NewCollabSyncUpErrorAEP | UnsupportedContentTooltipPayload | ReferentialityEventPayload | LoomEventPayload | MBEEventPayload | HighlightEventPayload | DatasourceClickedPayload | ElementEventPayload | ContextMenuEventPayload | VisitedLinkAEP | ViewEventPayload | MediaUploadEventPayload | EngagementPlatformEventPayload;
48
49
  type CustomPanelEventPayload = TrackAEP<ACTION.CHANGED_BACKGROUND_COLOR | ACTION.CHANGED_ICON | ACTION.REMOVE_ICON, ACTION_SUBJECT.PANEL, ACTION_SUBJECT_ID.PANEL, {
49
50
  previousColor: string;
50
51
  newColor: string;