@atlaskit/editor-common 110.4.9 → 110.4.10

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 (44) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/extensibility/Extension/Extension/index.js +8 -3
  3. package/dist/cjs/extensibility/Extension/InlineExtension/index.js +21 -4
  4. package/dist/cjs/extensibility/Extension/InlineExtension/styles.js +1 -14
  5. package/dist/cjs/extensibility/Extension/Lozenge/EditToggle.js +2 -1
  6. package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js +19 -5
  7. package/dist/cjs/extensibility/ExtensionComponent.js +7 -6
  8. package/dist/cjs/extensibility/ExtensionNodeWrapper.js +36 -6
  9. package/dist/cjs/extensibility/MultiBodiedExtension/index.js +10 -4
  10. package/dist/cjs/monitoring/error.js +1 -1
  11. package/dist/cjs/toolbar/index.js +0 -12
  12. package/dist/cjs/toolbar/rank.js +3 -5
  13. package/dist/cjs/ui/DropList/index.js +1 -1
  14. package/dist/es2019/extensibility/Extension/Extension/index.js +9 -4
  15. package/dist/es2019/extensibility/Extension/InlineExtension/index.js +23 -6
  16. package/dist/es2019/extensibility/Extension/InlineExtension/styles.js +0 -13
  17. package/dist/es2019/extensibility/Extension/Lozenge/EditToggle.js +2 -1
  18. package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js +18 -5
  19. package/dist/es2019/extensibility/ExtensionComponent.js +7 -6
  20. package/dist/es2019/extensibility/ExtensionNodeWrapper.js +36 -6
  21. package/dist/es2019/extensibility/MultiBodiedExtension/index.js +10 -4
  22. package/dist/es2019/monitoring/error.js +1 -1
  23. package/dist/es2019/toolbar/index.js +1 -1
  24. package/dist/es2019/toolbar/rank.js +0 -8
  25. package/dist/es2019/ui/DropList/index.js +1 -1
  26. package/dist/esm/extensibility/Extension/Extension/index.js +9 -4
  27. package/dist/esm/extensibility/Extension/InlineExtension/index.js +23 -6
  28. package/dist/esm/extensibility/Extension/InlineExtension/styles.js +0 -13
  29. package/dist/esm/extensibility/Extension/Lozenge/EditToggle.js +2 -1
  30. package/dist/esm/extensibility/Extension/Lozenge/ExtensionLabel.js +19 -5
  31. package/dist/esm/extensibility/ExtensionComponent.js +7 -6
  32. package/dist/esm/extensibility/ExtensionNodeWrapper.js +36 -6
  33. package/dist/esm/extensibility/MultiBodiedExtension/index.js +10 -4
  34. package/dist/esm/monitoring/error.js +1 -1
  35. package/dist/esm/toolbar/index.js +1 -1
  36. package/dist/esm/toolbar/rank.js +2 -4
  37. package/dist/esm/ui/DropList/index.js +1 -1
  38. package/dist/types/extensibility/Extension/InlineExtension/styles.d.ts +0 -1
  39. package/dist/types/toolbar/index.d.ts +1 -1
  40. package/dist/types/toolbar/rank.d.ts +0 -8
  41. package/dist/types-ts4.5/extensibility/Extension/InlineExtension/styles.d.ts +0 -1
  42. package/dist/types-ts4.5/toolbar/index.d.ts +1 -1
  43. package/dist/types-ts4.5/toolbar/rank.d.ts +0 -8
  44. package/package.json +2 -2
@@ -11,6 +11,7 @@ import { FormattedMessage, defineMessages } from 'react-intl-next';
11
11
  import CustomizeIcon from '@atlaskit/icon/core/customize';
12
12
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
13
13
  import { Box, xcss } from '@atlaskit/primitives';
14
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
15
  import Tooltip from '@atlaskit/tooltip';
15
16
  const containerStyles = css({
16
17
  textAlign: 'left',
@@ -21,6 +22,12 @@ const containerStyles = css({
21
22
  marginTop: "var(--ds-space-300, 24px)"
22
23
  }
23
24
  });
25
+ const showLabelStyles = css({
26
+ opacity: 1
27
+ });
28
+ const hideLabelStyles = css({
29
+ opacity: 0
30
+ });
24
31
  const labelStyles = css({
25
32
  opacity: 0,
26
33
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -90,6 +97,9 @@ const iconStyles = css({
90
97
  display: 'none'
91
98
  }
92
99
  });
100
+ const bodiedMacroIconStyles = css({
101
+ display: 'none'
102
+ });
93
103
  const i18n = defineMessages({
94
104
  configure: {
95
105
  id: 'editor-common-extensibility.macro.button.configure',
@@ -121,7 +131,7 @@ export const ExtensionLabel = ({
121
131
  pluginInjectionApi
122
132
  }) => {
123
133
  const isInlineExtension = extensionName === 'inlineExtension';
124
- const showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
134
+ const showDefaultBodiedStyles = expValEquals('cc_editor_ttvc_release_bundle_one', 'isEnabled', true) ? isBodiedMacro : isBodiedMacro && !isNodeHovered;
125
135
  const shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI);
126
136
  const containerClassNames = classnames({
127
137
  bodied: isBodiedMacro
@@ -132,7 +142,7 @@ export const ExtensionLabel = ({
132
142
  bodied: isBodiedMacro,
133
143
  'bodied-border': showDefaultBodiedStyles,
134
144
  'bodied-background': showDefaultBodiedStyles,
135
- 'show-label': shouldShowBodiedMacroLabel,
145
+ 'show-label': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : shouldShowBodiedMacroLabel,
136
146
  'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
137
147
  'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
138
148
  // Need this separate class since we don't ever want to show the label during view mode
@@ -140,7 +150,8 @@ export const ExtensionLabel = ({
140
150
  'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
141
151
  });
142
152
  const iconClassNames = classnames({
143
- 'hide-icon': isBodiedMacro && !isNodeHovered
153
+ 'hide-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : isBodiedMacro && !isNodeHovered,
154
+ 'extension-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true)
144
155
  });
145
156
  return (
146
157
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable
@@ -180,12 +191,14 @@ export const ExtensionLabel = ({
180
191
  // Ignored via go/ees005
181
192
  // eslint-disable-next-line react/jsx-props-no-spreading
182
193
  }, tooltipProps, {
183
- css: labelStyles
194
+ css: [labelStyles, ...(expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? [!showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles] : [])]
184
195
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
185
196
  ,
186
197
  className: labelClassNames
187
198
  }), text, jsx("span", {
188
- css: iconStyles,
199
+ css: [iconStyles, isBodiedMacro && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && bodiedMacroIconStyles]
200
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
201
+ ,
189
202
  className: iconClassNames,
190
203
  "data-testid": "config-icon"
191
204
  }, jsx(CustomizeIcon, {
@@ -5,6 +5,7 @@ import React, { Component, useEffect, useLayoutEffect, useRef, useState } from '
5
5
  import memoizeOne from 'memoize-one';
6
6
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
9
  import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
9
10
  import { getExtensionRenderer, nodeToJSON, toJSON } from '../utils';
10
11
  import Extension from './Extension/Extension';
@@ -212,8 +213,8 @@ class ExtensionComponentInner extends Component {
212
213
  macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
213
214
  isNodeSelected: selectedNode === node,
214
215
  isNodeNested: isNodeNested,
215
- isNodeHovered: this.state.isNodeHovered,
216
- setIsNodeHovered: this.setIsNodeHovered,
216
+ isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
217
+ setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
217
218
  isLivePageViewMode: isLivePageViewMode,
218
219
  allowBodiedOverride: allowBodiedOverride
219
220
  });
@@ -234,9 +235,9 @@ class ExtensionComponentInner extends Component {
234
235
  pluginInjectionApi: pluginInjectionApi,
235
236
  macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
236
237
  isNodeSelected: selectedNode === node,
237
- isNodeHovered: this.state.isNodeHovered,
238
+ isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
238
239
  isNodeNested: isNodeNested,
239
- setIsNodeHovered: this.setIsNodeHovered,
240
+ setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
240
241
  showLivePagesBodiedMacrosRendererView: !!(showLivePagesBodiedMacrosRendererView !== null && showLivePagesBodiedMacrosRendererView !== void 0 && showLivePagesBodiedMacrosRendererView(nodeToJSON(node))),
241
242
  showUpdatedLivePages1PBodiedExtensionUI: !!(showUpdatedLivePages1PBodiedExtensionUI !== null && showUpdatedLivePages1PBodiedExtensionUI !== void 0 && showUpdatedLivePages1PBodiedExtensionUI(nodeToJSON(node))),
242
243
  showBodiedExtensionRendererView: showBodiedExtensionRendererView,
@@ -249,8 +250,8 @@ class ExtensionComponentInner extends Component {
249
250
  macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
250
251
  isNodeSelected: selectedNode === node,
251
252
  pluginInjectionApi: pluginInjectionApi,
252
- isNodeHovered: this.state.isNodeHovered,
253
- setIsNodeHovered: this.setIsNodeHovered,
253
+ isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
254
+ setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
254
255
  isLivePageViewMode: isLivePageViewMode
255
256
  }, extensionHandlerResult);
256
257
  default:
@@ -8,6 +8,7 @@ import React from 'react';
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 classnames from 'classnames';
11
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
12
  import { ZERO_WIDTH_SPACE } from '../whitespace';
12
13
  const styles = css({
13
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -19,6 +20,37 @@ const styles = css({
19
20
  position: 'relative'
20
21
  }
21
22
  });
23
+ const hoverStyles = css({
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
25
+ ':has(.extension-label:hover) .extension-container, :has(.extension-edit-toggle-container:hover) .extension-container': {
26
+ boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
27
+ },
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
29
+ ':has(.extension-container:hover) .extension-label, :has(.extension-edit-toggle-container:hover) .extension-label, .extension-label:hover': {
30
+ opacity: 1,
31
+ backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
32
+ boxShadow: 'none',
33
+ cursor: 'pointer',
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
+ '&.always-hide-label': {
36
+ opacity: 0,
37
+ cursor: 'auto'
38
+ },
39
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
40
+ '&.with-bodied-macro-live-page-styles': {
41
+ backgroundColor: "var(--ds-background-input, #FFFFFF)",
42
+ boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
43
+ }
44
+ },
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
46
+ ':has(.extension-label:hover) .extension-icon, :has(.extension-container:hover) .extension-icon, :has(.extension-edit-toggle-container:hover) .extension-icon': {
47
+ display: 'inline'
48
+ },
49
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
50
+ ':has(.extension-label:hover) .extension-edit-toggle-container, :has(.extension-container:hover) .extension-edit-toggle-container, .extension-edit-toggle-container:hover': {
51
+ opacity: 1
52
+ }
53
+ });
22
54
  /**
23
55
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
24
56
  * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
@@ -39,11 +71,9 @@ export const ExtensionNodeWrapper = ({
39
71
  'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
40
72
  relative: showMacroInteractionDesignUpdates
41
73
  });
42
- return (
74
+ return jsx("span", {
43
75
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
44
- jsx("span", {
45
- className: wrapperClassNames,
46
- css: styles
47
- }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE)
48
- );
76
+ className: wrapperClassNames,
77
+ css: [styles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
78
+ }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
49
79
  };
@@ -11,6 +11,7 @@ import React, { Fragment, useState } from 'react';
11
11
  import { css, jsx } from '@emotion/react';
12
12
  import classnames from 'classnames';
13
13
  import EditorFileIcon from '@atlaskit/icon/core/migration/file--editor-file';
14
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
15
  import { useSharedPluginStateWithSelector } from '../../hooks';
15
16
  import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
16
17
  import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
@@ -33,6 +34,11 @@ const imageStyles = css({
33
34
  maxHeight: '24px',
34
35
  maxWidth: '24px'
35
36
  });
37
+ const hoverStyles = css({
38
+ '&:hover': {
39
+ boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
40
+ }
41
+ });
36
42
  const MultiBodiedExtensionFrames = ({
37
43
  articleRef
38
44
  }) => {
@@ -157,7 +163,7 @@ const MultiBodiedExtensionWithWidth = ({
157
163
  'with-danger-overlay': showMacroInteractionDesignUpdates,
158
164
  'with-padding-background-styles': showMacroInteractionDesignUpdates,
159
165
  'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
160
- 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
166
+ 'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered
161
167
  });
162
168
  const containerClassNames = classnames('multiBodiedExtension--container', {
163
169
  'remove-padding': showMacroInteractionDesignUpdates
@@ -187,10 +193,10 @@ const MultiBodiedExtensionWithWidth = ({
187
193
  pluginInjectionApi: pluginInjectionApi
188
194
  }), jsx("div", {
189
195
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
190
- className: wrapperClassNames
196
+ className: wrapperClassNames,
197
+ css: [
191
198
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
192
- ,
193
- css: mbeExtensionWrapperCSSStyles,
199
+ mbeExtensionWrapperCSSStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
194
200
  "data-testid": "multiBodiedExtension--wrapper",
195
201
  "data-layout": node.attrs.layout
196
202
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -1,7 +1,7 @@
1
1
  import { isFedRamp } from './environment';
2
2
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
3
3
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
4
- const packageVersion = "110.4.8";
4
+ const packageVersion = "110.4.9";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // Ignored via go/ees007
@@ -1,7 +1,7 @@
1
1
  // Disable no-re-export rule for entry point files
2
2
  /* eslint-disable @atlaskit/editor/no-re-export */
3
3
 
4
- export { TOOLBAR_RANK, AI_SECTION_RANK, ROVO_GROUP_RANK, IMPROVE_WRITING_GROUP_RANK, ROVO_MENU_RANK, ROVO_PROMPT_MENU_SECTION_RANK, CHANGE_TONE_MENU_RANK, CHANGE_TONE_MENU_SECTION_RANK, TRANSLATE_MENU_RANK, COLLAB_SECTION_RANK, COMMENT_GROUP_RANK, TEXT_SECTION_RANK, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_COLLAPSED_RANK, TEXT_COLLAPSED_GROUP_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_RANK, TEXT_STYLES_MENU_SECTION_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_GROUP_COLLAPSED_RANK, TEXT_FORMAT_MENU_RANK, TEXT_FORMATTING_MENU_SECTION_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, OVERFLOW_SECTION_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU_RANK, PIN_MENU_SECTION_RANK, INSERT_BLOCK_SECTION_RANK, TASK_LIST_GROUP_RANK, MEDIA_GROUP_RANK, MENTION_GROUP_RANK, EMOJI_GROUP_RANK, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, INSERT_GROUP_RANK, LINKING_SECTION_RANK, LINKING_GROUP_RANK, ALIGNMENT_GROUP_RANK, ALIGNMENT_MENU_RANK, ALIGNMENT_MENU_SECTION_RANK, LISTS_INDENTATION_GROUP_RANK, LISTS_INDENTATION_GROUP_COLLAPSED_RANK, LISTS_INDENTATION_MENU_RANK, LISTS_INDENTATION_MENU_SECTION_RANK, TRACK_CHANGES_SECTION_RANK, TRACK_CHANGES_SECTION_RANK_NEW, UNDO_CHANGES_GROUP_RANK, REDO_CHANGES_GROUP_RANK, TRACK_CHANGES_GROUP_RANK, TRACK_CHANGES_GROUP_RANK_NEW, PIN_GROUP_RANK, PIN_SECTION_RANK, LOOM_MENU_SECTION_RANK, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK, DEFINE_GROUP_RANK, CODE_BLOCK_GROUP_RANK, ROVO_GROUP_DISPLAY_SMALL_RANK } from './rank';
4
+ export { TOOLBAR_RANK, AI_SECTION_RANK, ROVO_GROUP_RANK, IMPROVE_WRITING_GROUP_RANK, ROVO_MENU_RANK, ROVO_PROMPT_MENU_SECTION_RANK, CHANGE_TONE_MENU_RANK, CHANGE_TONE_MENU_SECTION_RANK, TRANSLATE_MENU_RANK, COLLAB_SECTION_RANK, COMMENT_GROUP_RANK, TEXT_SECTION_RANK, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_COLLAPSED_RANK, TEXT_COLLAPSED_GROUP_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_RANK, TEXT_STYLES_MENU_SECTION_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_GROUP_COLLAPSED_RANK, TEXT_FORMAT_MENU_RANK, TEXT_FORMATTING_MENU_SECTION_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, OVERFLOW_SECTION_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU_RANK, PIN_MENU_SECTION_RANK, INSERT_BLOCK_SECTION_RANK, TASK_LIST_GROUP_RANK, MEDIA_GROUP_RANK, MENTION_GROUP_RANK, EMOJI_GROUP_RANK, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, INSERT_GROUP_RANK, LINKING_SECTION_RANK, LINKING_GROUP_RANK, ALIGNMENT_GROUP_RANK, ALIGNMENT_MENU_RANK, ALIGNMENT_MENU_SECTION_RANK, LISTS_INDENTATION_GROUP_RANK, LISTS_INDENTATION_GROUP_COLLAPSED_RANK, LISTS_INDENTATION_MENU_RANK, LISTS_INDENTATION_MENU_SECTION_RANK, TRACK_CHANGES_SECTION_RANK, UNDO_CHANGES_GROUP_RANK, REDO_CHANGES_GROUP_RANK, TRACK_CHANGES_GROUP_RANK, PIN_GROUP_RANK, PIN_SECTION_RANK, LOOM_MENU_SECTION_RANK, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK, DEFINE_GROUP_RANK, CODE_BLOCK_GROUP_RANK, ROVO_GROUP_DISPLAY_SMALL_RANK } from './rank';
5
5
  export { TOOLBARS, AI_SECTION, ROVO_GROUP, IMPROVE_WRITING_GROUP, IMPROVE_WRITING_BUTTON, ROVO_HERO_BUTTON, ROVO_MENU, ROVO_PROMPT_MENU_SECTION, MAKE_SHORTER_MENU_ITEM, MAKE_LONGER_MENU_ITEM, CHANGE_TONE_NESTED_MENU, SPELLING_AND_GRAMMAR_MENU_ITEM, CHANGE_TONE_MENU_SECTION, MORE_PROFESSIONAL_MENU_ITEM, MORE_CASUAL_MENU_ITEM, MORE_EMPATHETIC_MENU_ITEM, TRANSLATE_NESTED_MENU, TRANSLATE_MENU_SECTION, TEXT_SECTION, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_GROUP, TEXT_COLLAPSED_MENU, TEXT_FORMATTING_GROUP, TEXT_FORMATTING_GROUP_INLINE, TEXT_FORMATTING_GROUP_COLLAPSED, BOLD_BUTTON_GROUP, UNDERLINE_BUTTON_GROUP, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMATTING_HERO_BUTTON_COLLAPSED, BOLD_BUTTON, UNDERLINE_BUTTON, TEXT_FORMATTING_MENU, TEXT_FORMATTING_MENU_SECTION, TEXT_STYLES_GROUP, TEXT_STYLES_MENU, TEXT_STYLES_MENU_SECTION, NORMAL_TEXT_MENU_ITEM, HEADING_1_MENU_ITEM, HEADING_2_MENU_ITEM, HEADING_3_MENU_ITEM, HEADING_4_MENU_ITEM, HEADING_5_MENU_ITEM, HEADING_6_MENU_ITEM, BLOCK_QUOTE_MENU_ITEM, BOLD_MENU_ITEM, ITALIC_MENU_ITEM, UNDERLINE_MENU_ITEM, STRIKE_MENU_ITEM, CODE_MENU_ITEM, SUBSCRIPT_MENU_ITEM, SUPERSCRIPT_MENU_ITEM, CLEAR_FORMARTTING_MENU_SECTION, CLEAR_FORMATTING_MENU_ITEM, LISTS_INDENTATION_GROUP, LISTS_INDENTATION_GROUP_COLLAPSED, LISTS_INDENTATION_GROUP_INLINE, BULLETED_LIST_BUTTON_GROUP, BULLETED_LIST_BUTTON, LISTS_INDENTATION_HERO_BUTTON, LISTS_INDENTATION_HERO_BUTTON_COLLAPSED, LISTS_INDENTATION_MENU, LISTS_INDENTATION_MENU_SECTION, BULLETED_LIST_MENU_ITEM, NUMBERED_LIST_MENU_ITEM, TASK_LIST_MENU_ITEM, INDENT_MENU_ITEM, OUTDENT_MENU_ITEM, INSERT_BLOCK_SECTION, TASK_LIST_BUTTON, TASK_LIST_GROUP, MEDIA_BUTTON, MEDIA_GROUP, MENTION_BUTTON, MENTION_GROUP, EMOJI_BUTTON, EMOJI_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, LINKING_SECTION, LINKING_GROUP, LINKING_BUTTON, COLLAB_SECTION, COMMENT_GROUP, COMMENT_HERO_BUTTON, APPS_SECTION, OVERFLOW_SECTION, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, HIGHLIGHT_MENU_ITEM, CLEAR_COLOR_MENU_ITEM, OVERFLOW_GROUP, OVERFLOW_MENU, PIN_MENU_SECTION, PIN_MENU_ITEM, ALIGNMENT_GROUP, ALIGNMENT_MENU, ALIGNMENT_MENU_SECTION, ALIGN_LEFT_MENU_ITEM, ALIGN_CENTER_MENU_ITEM, ALIGN_RIGHT_MENU_ITEM, UNDO_CHANGES_GROUP, REDO_CHANGES_GROUP, TRACK_CHANGES_GROUP, TRACK_CHANGES_SECTION, UNDO_BUTTON, REDO_BUTTON, TRACK_CHANGES_BUTTON, PIN_SECTION, PIN_GROUP, PIN_BUTTON, LOOM_MENU_SECTION, LOOM_MENU_ITEM, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_MENU_PRIMARY_TOOLBAR, SELECTION_EXTENSION_MENU_SECTION, DEFINE_MENU_ITEM, DEFINE_GROUP, DEFINE_BUTTON, AI_VIEW_SECTION, ROVO_GROUP_VIEW, CODE_BLOCK_GROUP, CODE_BLOCK_BUTTON, IMPROVE_WRITING_MENU_ITEM, ROVO_GROUP_DISPLAY_SMALL, ROVO_MENU_DISPLAY_SMALL, ROVO_PROMPT_MENU_SECTION_DISPLAY_SMALL } from './keys';
6
6
  export { useEditorToolbar, EditorToolbarProvider } from './context';
7
7
  export { EditorToolbarUIProvider } from './EditorToolbarUIProvider';
@@ -267,9 +267,6 @@ export const COMMENT_GROUP_RANK = {
267
267
  */
268
268
 
269
269
  export const TRACK_CHANGES_SECTION_RANK = {
270
- [TRACK_CHANGES_GROUP.key]: 100
271
- };
272
- export const TRACK_CHANGES_SECTION_RANK_NEW = {
273
270
  [UNDO_CHANGES_GROUP.key]: 100,
274
271
  [REDO_CHANGES_GROUP.key]: 200,
275
272
  [TRACK_CHANGES_GROUP.key]: 300
@@ -281,11 +278,6 @@ export const REDO_CHANGES_GROUP_RANK = {
281
278
  [REDO_BUTTON.key]: 100
282
279
  };
283
280
  export const TRACK_CHANGES_GROUP_RANK = {
284
- [UNDO_BUTTON.key]: 100,
285
- [REDO_BUTTON.key]: 200,
286
- [TRACK_CHANGES_BUTTON.key]: 300
287
- };
288
- export const TRACK_CHANGES_GROUP_RANK_NEW = {
289
281
  [TRACK_CHANGES_BUTTON.key]: 100
290
282
  };
291
283
 
@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
14
14
  import { fg } from '@atlaskit/platform-feature-flags';
15
15
  import Layer from '../Layer';
16
16
  const packageName = "@atlaskit/editor-common";
17
- const packageVersion = "110.4.8";
17
+ const packageVersion = "110.4.9";
18
18
  const halfFocusRing = 1;
19
19
  const dropOffset = '0, 8';
20
20
  const fadeIn = keyframes({
@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
12
12
  import React, { Fragment } from 'react';
13
13
 
14
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
- import { jsx } from '@emotion/react';
15
+ import { css, jsx } from '@emotion/react';
16
16
  import classnames from 'classnames';
17
17
  import { fg } from '@atlaskit/platform-feature-flags';
18
18
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -24,6 +24,11 @@ import ExtensionLozenge from '../Lozenge';
24
24
  import { overlay } from '../styles';
25
25
  import { isEmptyBodiedMacro } from './extension-utils';
26
26
  import { content, contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
27
+ var hoverStyles = css({
28
+ '&:hover': {
29
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
30
+ }
31
+ });
27
32
  function ExtensionWithPluginState(props) {
28
33
  var _node$attrs, _node$attrs2;
29
34
  var node = props.node,
@@ -82,7 +87,7 @@ function ExtensionWithPluginState(props) {
82
87
  'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
83
88
  'with-bodied-border': showMacroInteractionDesignUpdates && (hasBody || isLegacyContentMacroExtension(node)) && !showBodiedExtensionRendererView && show1PBodiedExtensionBorder,
84
89
  'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
85
- 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
90
+ 'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered,
86
91
  'with-danger-overlay': showMacroInteractionDesignUpdates,
87
92
  'without-frame': removeBorder,
88
93
  'legacy-content': showLegacyContentHeader
@@ -158,9 +163,9 @@ function ExtensionWithPluginState(props) {
158
163
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
159
164
  ,
160
165
  className: classNames,
161
- css:
166
+ css: [
162
167
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
163
- wrapperStyleInheritedCursor
168
+ wrapperStyleInheritedCursor, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
164
169
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
165
170
  ,
166
171
  style: customContainerStyles
@@ -5,15 +5,32 @@
5
5
  import React, { Fragment } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
8
+ import { css, jsx } from '@emotion/react';
9
9
  import classnames from 'classnames';
10
10
  import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
11
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
13
  import { useSharedPluginStateWithSelector } from '../../../hooks';
13
14
  import { createWidthContext, WidthContext } from '../../../ui';
14
15
  import ExtensionLozenge from '../Lozenge';
15
16
  import { overlay } from '../styles';
16
- import { inlineWrapperStyles, wrapperStyle } from './styles';
17
+ import { wrapperStyle } from './styles';
18
+ var inlineWrapperStyles = css({
19
+ maxWidth: '100%',
20
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
21
+ 'tr &': {
22
+ maxWidth: 'inherit'
23
+ },
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
25
+ '.rich-media-item': {
26
+ maxWidth: '100%'
27
+ }
28
+ });
29
+ var hoverStyles = css({
30
+ '&:hover': {
31
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
32
+ }
33
+ });
17
34
  var InlineExtension = function InlineExtension(props) {
18
35
  var node = props.node,
19
36
  pluginInjectionApi = props.pluginInjectionApi,
@@ -37,7 +54,7 @@ var InlineExtension = function InlineExtension(props) {
37
54
  'with-overlay': !showMacroInteractionDesignUpdates,
38
55
  'with-children': hasChildren,
39
56
  'with-danger-overlay': showMacroInteractionDesignUpdates,
40
- 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
57
+ 'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered
41
58
  });
42
59
  var rendererContainerWidth = 0;
43
60
  if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
@@ -63,10 +80,10 @@ var InlineExtension = function InlineExtension(props) {
63
80
  setIsNodeHovered: setIsNodeHovered,
64
81
  pluginInjectionApi: pluginInjectionApi
65
82
  }), jsx("div", {
66
- "data-testid": "inline-extension-wrapper"
83
+ "data-testid": "inline-extension-wrapper",
84
+ css: [
67
85
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
68
- ,
69
- css: [wrapperStyle, inlineWrapperStyles]
86
+ wrapperStyle, inlineWrapperStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
70
87
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
71
88
  ,
72
89
  className: classNames
@@ -25,17 +25,4 @@ export var wrapperStyle = css(wrapperDefault, {
25
25
  '&.with-hover-border': {
26
26
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
27
27
  }
28
- });
29
-
30
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
31
- export var inlineWrapperStyles = css({
32
- maxWidth: '100%',
33
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
34
- 'tr &': {
35
- maxWidth: 'inherit'
36
- },
37
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
38
- '.rich-media-item': {
39
- maxWidth: '100%'
40
- }
41
28
  });
@@ -12,6 +12,7 @@ import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
12
12
  import EditIcon from '@atlaskit/icon/core/edit';
13
13
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
14
14
  import { Flex, xcss } from '@atlaskit/primitives';
15
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
16
  var buttonContainerStyles = css({
16
17
  opacity: 0,
17
18
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -90,7 +91,7 @@ export var EditToggle = function EditToggle(_ref) {
90
91
  "data-testid": "extension-edit-toggle-container"
91
92
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
92
93
  ,
93
- css: isNodeHovered ? [buttonContainerStyles, showButtonContainerStyle] : buttonContainerStyles
94
+ css: [buttonContainerStyles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? null : isNodeHovered && showButtonContainerStyle]
94
95
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
95
96
  ,
96
97
  style: customContainerStyles
@@ -1,3 +1,4 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
3
  /**
3
4
  * @jsxRuntime classic
@@ -11,6 +12,7 @@ import { FormattedMessage, defineMessages } from 'react-intl-next';
11
12
  import CustomizeIcon from '@atlaskit/icon/core/customize';
12
13
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
13
14
  import { Box, xcss } from '@atlaskit/primitives';
15
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
16
  import Tooltip from '@atlaskit/tooltip';
15
17
  var containerStyles = css({
16
18
  textAlign: 'left',
@@ -21,6 +23,12 @@ var containerStyles = css({
21
23
  marginTop: "var(--ds-space-300, 24px)"
22
24
  }
23
25
  });
26
+ var showLabelStyles = css({
27
+ opacity: 1
28
+ });
29
+ var hideLabelStyles = css({
30
+ opacity: 0
31
+ });
24
32
  var labelStyles = css({
25
33
  opacity: 0,
26
34
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -90,6 +98,9 @@ var iconStyles = css({
90
98
  display: 'none'
91
99
  }
92
100
  });
101
+ var bodiedMacroIconStyles = css({
102
+ display: 'none'
103
+ });
93
104
  var i18n = defineMessages({
94
105
  configure: {
95
106
  id: 'editor-common-extensibility.macro.button.configure',
@@ -120,7 +131,7 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
120
131
  showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
121
132
  pluginInjectionApi = _ref.pluginInjectionApi;
122
133
  var isInlineExtension = extensionName === 'inlineExtension';
123
- var showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
134
+ var showDefaultBodiedStyles = expValEquals('cc_editor_ttvc_release_bundle_one', 'isEnabled', true) ? isBodiedMacro : isBodiedMacro && !isNodeHovered;
124
135
  var shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI);
125
136
  var containerClassNames = classnames({
126
137
  bodied: isBodiedMacro
@@ -131,7 +142,7 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
131
142
  bodied: isBodiedMacro,
132
143
  'bodied-border': showDefaultBodiedStyles,
133
144
  'bodied-background': showDefaultBodiedStyles,
134
- 'show-label': shouldShowBodiedMacroLabel,
145
+ 'show-label': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : shouldShowBodiedMacroLabel,
135
146
  'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
136
147
  'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
137
148
  // Need this separate class since we don't ever want to show the label during view mode
@@ -139,7 +150,8 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
139
150
  'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
140
151
  });
141
152
  var iconClassNames = classnames({
142
- 'hide-icon': isBodiedMacro && !isNodeHovered
153
+ 'hide-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : isBodiedMacro && !isNodeHovered,
154
+ 'extension-icon': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true)
143
155
  });
144
156
  return (
145
157
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable
@@ -180,12 +192,14 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
180
192
  // Ignored via go/ees005
181
193
  // eslint-disable-next-line react/jsx-props-no-spreading
182
194
  }, tooltipProps, {
183
- css: labelStyles
195
+ css: [labelStyles].concat(_toConsumableArray(expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? [!showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles] : []))
184
196
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
185
197
  ,
186
198
  className: labelClassNames
187
199
  }), text, jsx("span", {
188
- css: iconStyles,
200
+ css: [iconStyles, isBodiedMacro && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && bodiedMacroIconStyles]
201
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
202
+ ,
189
203
  className: iconClassNames,
190
204
  "data-testid": "config-icon"
191
205
  }, jsx(CustomizeIcon, {
@@ -17,6 +17,7 @@ import React, { Component, useEffect, useLayoutEffect, useRef, useState } from '
17
17
  import memoizeOne from 'memoize-one';
18
18
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
19
19
  import { fg } from '@atlaskit/platform-feature-flags';
20
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
20
21
  import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
21
22
  import { getExtensionRenderer, nodeToJSON, toJSON } from '../utils';
22
23
  import Extension from './Extension/Extension';
@@ -250,8 +251,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
250
251
  macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
251
252
  isNodeSelected: selectedNode === node,
252
253
  isNodeNested: isNodeNested,
253
- isNodeHovered: this.state.isNodeHovered,
254
- setIsNodeHovered: this.setIsNodeHovered,
254
+ isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
255
+ setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
255
256
  isLivePageViewMode: isLivePageViewMode,
256
257
  allowBodiedOverride: allowBodiedOverride
257
258
  });
@@ -272,9 +273,9 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
272
273
  pluginInjectionApi: pluginInjectionApi,
273
274
  macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
274
275
  isNodeSelected: selectedNode === node,
275
- isNodeHovered: this.state.isNodeHovered,
276
+ isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
276
277
  isNodeNested: isNodeNested,
277
- setIsNodeHovered: this.setIsNodeHovered,
278
+ setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
278
279
  showLivePagesBodiedMacrosRendererView: !!(showLivePagesBodiedMacrosRendererView !== null && showLivePagesBodiedMacrosRendererView !== void 0 && showLivePagesBodiedMacrosRendererView(nodeToJSON(node))),
279
280
  showUpdatedLivePages1PBodiedExtensionUI: !!(showUpdatedLivePages1PBodiedExtensionUI !== null && showUpdatedLivePages1PBodiedExtensionUI !== void 0 && showUpdatedLivePages1PBodiedExtensionUI(nodeToJSON(node))),
280
281
  showBodiedExtensionRendererView: showBodiedExtensionRendererView,
@@ -287,8 +288,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
287
288
  macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
288
289
  isNodeSelected: selectedNode === node,
289
290
  pluginInjectionApi: pluginInjectionApi,
290
- isNodeHovered: this.state.isNodeHovered,
291
- setIsNodeHovered: this.setIsNodeHovered,
291
+ isNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.state.isNodeHovered,
292
+ setIsNodeHovered: expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? undefined : this.setIsNodeHovered,
292
293
  isLivePageViewMode: isLivePageViewMode
293
294
  }, extensionHandlerResult);
294
295
  default:
@@ -8,6 +8,7 @@ import React from 'react';
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 classnames from 'classnames';
11
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
12
  import { ZERO_WIDTH_SPACE } from '../whitespace';
12
13
  var styles = css({
13
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -19,6 +20,37 @@ var styles = css({
19
20
  position: 'relative'
20
21
  }
21
22
  });
23
+ var hoverStyles = css({
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
25
+ ':has(.extension-label:hover) .extension-container, :has(.extension-edit-toggle-container:hover) .extension-container': {
26
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
27
+ },
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
29
+ ':has(.extension-container:hover) .extension-label, :has(.extension-edit-toggle-container:hover) .extension-label, .extension-label:hover': {
30
+ opacity: 1,
31
+ backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
32
+ boxShadow: 'none',
33
+ cursor: 'pointer',
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
+ '&.always-hide-label': {
36
+ opacity: 0,
37
+ cursor: 'auto'
38
+ },
39
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
40
+ '&.with-bodied-macro-live-page-styles': {
41
+ backgroundColor: "var(--ds-background-input, #FFFFFF)",
42
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
43
+ }
44
+ },
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
46
+ ':has(.extension-label:hover) .extension-icon, :has(.extension-container:hover) .extension-icon, :has(.extension-edit-toggle-container:hover) .extension-icon': {
47
+ display: 'inline'
48
+ },
49
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
50
+ ':has(.extension-label:hover) .extension-edit-toggle-container, :has(.extension-container:hover) .extension-edit-toggle-container, .extension-edit-toggle-container:hover': {
51
+ opacity: 1
52
+ }
53
+ });
22
54
  /**
23
55
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
24
56
  * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
@@ -37,11 +69,9 @@ export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
37
69
  'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
38
70
  relative: showMacroInteractionDesignUpdates
39
71
  });
40
- return (
72
+ return jsx("span", {
41
73
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
42
- jsx("span", {
43
- className: wrapperClassNames,
44
- css: styles
45
- }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE)
46
- );
74
+ className: wrapperClassNames,
75
+ css: [styles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
76
+ }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
47
77
  };