@atlaskit/editor-plugin-table 24.4.15 → 24.4.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 24.4.17
4
+
5
+ ### Patch Changes
6
+
7
+ - [`161922d5b8cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/161922d5b8cee) -
8
+ Fix editor tooltips affected by inline top-layer rendering. Table cell menu tooltips are no longer
9
+ constrained by the button background selector, and layout column drag handles now own their
10
+ wrapper layout without flattening the tooltip's visual surface.
11
+ - Updated dependencies
12
+
13
+ ## 24.4.16
14
+
15
+ ### Patch Changes
16
+
17
+ - [`6afed619aa443`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6afed619aa443) -
18
+ Clean up experiment `platform_editor_table_close_cell_menu_on_move_exp`
19
+ - Updated dependencies
20
+
3
21
  ## 24.4.15
4
22
 
5
23
  ### Patch Changes
@@ -78,29 +78,21 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
78
78
  tableHeader = _tr$doc$type$schema$n2.tableHeader;
79
79
  var cell = (0, _utils2.findParentNodeOfType)([tableCell, tableHeader])(tr.selection);
80
80
  var targetCellPosition = cell ? cell.pos : undefined;
81
- if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
82
- var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
83
- var closeContextualMenu = shouldCloseLegacyContextualMenu({
84
- pluginState: pluginState,
85
- targetCellPositionChanged: targetCellPositionChanged,
86
- tr: tr
87
- });
88
- if (!targetCellPositionChanged && !closeContextualMenu) {
89
- return pluginState;
90
- }
91
-
92
- // Close the legacy contextual menu when moving cells because the cell background
93
- // color submenu can otherwise remain open against the previous cell selection.
94
- return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
95
- isContextualMenuOpen: false
96
- } : {}), {}, {
97
- targetCellPosition: targetCellPosition
98
- });
99
- }
100
- if (pluginState.targetCellPosition === targetCellPosition) {
81
+ var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
82
+ var closeContextualMenu = shouldCloseLegacyContextualMenu({
83
+ pluginState: pluginState,
84
+ targetCellPositionChanged: targetCellPositionChanged,
85
+ tr: tr
86
+ });
87
+ if (!targetCellPositionChanged && !closeContextualMenu) {
101
88
  return pluginState;
102
89
  }
103
- return _objectSpread(_objectSpread({}, pluginState), {}, {
90
+
91
+ // Close the legacy contextual menu when moving cells because the cell background
92
+ // color submenu can otherwise remain open against the previous cell selection.
93
+ return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
94
+ isContextualMenuOpen: false
95
+ } : {}), {}, {
104
96
  targetCellPosition: targetCellPosition
105
97
  });
106
98
  };
@@ -5,11 +5,57 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
7
7
  var _react = require("@emotion/react");
8
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
9
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
9
10
  var _consts = require("../consts");
10
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
12
 
12
- var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
13
+ // Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
14
+ var topLayerTooltipCellButtonStyles = function topLayerTooltipCellButtonStyles() {
15
+ return (0, _react.css)({
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
17
+ '> div:not([popover])': {
18
+ // Sits behind button to provide surface-color background
19
+ background: "var(--ds-surface, #FFFFFF)",
20
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
21
+ borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
22
+ display: 'flex',
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
24
+ height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
25
+ width: "var(--ds-space-250, 20px)",
26
+ flexDirection: 'column'
27
+ },
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
29
+ '&& button': {
30
+ background: "var(--ds-background-neutral, #0515240F)",
31
+ flexDirection: 'column',
32
+ margin: "var(--ds-space-025, 2px)",
33
+ outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
35
+ borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
36
+ padding: 0,
37
+ height: 'calc(100% - 4px)',
38
+ display: 'flex'
39
+ },
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
41
+ '&& button:hover': {
42
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
43
+ },
44
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
45
+ '&& button:active': {
46
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
47
+ },
48
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
49
+ '&& button > span': {
50
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
51
+ },
52
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
53
+ '&& span': {
54
+ pointerEvents: 'none'
55
+ }
56
+ });
57
+ };
58
+ var legacyCellButtonStyles = function legacyCellButtonStyles() {
13
59
  return (0, _react.css)({
14
60
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
15
61
  '> div': {
@@ -53,6 +99,9 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
53
99
  }
54
100
  });
55
101
  };
102
+ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
103
+ return (0, _platformFeatureFlags.fg)('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
104
+ };
56
105
  var tableFloatingCellButtonSelectedStyles = exports.tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
57
106
  return (0, _react.css)({
58
107
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -543,32 +543,21 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
543
543
  }
544
544
  });
545
545
  (0, _defineProperty2.default)(_this, "toggleOpen", function () {
546
- var _this$props8 = _this.props,
547
- isOpen = _this$props8.isOpen,
548
- _this$props8$editorVi = _this$props8.editorView,
549
- state = _this$props8$editorVi.state,
550
- dispatch = _this$props8$editorVi.dispatch;
551
- if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
552
- if ((0, _pluginFactory.getPluginState)(state).isContextualMenuOpen) {
553
- (0, _commands.toggleContextualMenu)()(state, dispatch);
554
- }
555
- _this.closeSubmenu();
556
- return;
557
- }
558
- (0, _commands.toggleContextualMenu)()(state, dispatch);
559
- if (!isOpen) {
560
- _this.setState({
561
- isSubmenuOpen: false
562
- });
546
+ var _this$props$editorVie = _this.props.editorView,
547
+ state = _this$props$editorVie.state,
548
+ dispatch = _this$props$editorVie.dispatch;
549
+ if ((0, _pluginFactory.getPluginState)(state).isContextualMenuOpen) {
550
+ (0, _commands.toggleContextualMenu)()(state, dispatch);
563
551
  }
552
+ _this.closeSubmenu();
564
553
  });
565
554
  (0, _defineProperty2.default)(_this, "handleOpenChange", function (payload) {
566
- var _this$props9 = _this.props,
567
- _this$props9$editorVi = _this$props9.editorView,
568
- state = _this$props9$editorVi.state,
569
- dispatch = _this$props9$editorVi.dispatch,
570
- dom = _this$props9$editorVi.dom,
571
- isCellMenuOpenByKeyboard = _this$props9.isCellMenuOpenByKeyboard;
555
+ var _this$props8 = _this.props,
556
+ _this$props8$editorVi = _this$props8.editorView,
557
+ state = _this$props8$editorVi.state,
558
+ dispatch = _this$props8$editorVi.dispatch,
559
+ dom = _this$props8$editorVi.dom,
560
+ isCellMenuOpenByKeyboard = _this$props8.isCellMenuOpenByKeyboard;
572
561
  if (payload) {
573
562
  var event = payload.event;
574
563
  if (event && event instanceof KeyboardEvent) {
@@ -607,11 +596,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
607
596
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
608
597
  (0, _defineProperty2.default)(_this, "handleItemMouseEnter", function (_ref4) {
609
598
  var item = _ref4.item;
610
- var _this$props0 = _this.props,
611
- _this$props0$editorVi = _this$props0.editorView,
612
- state = _this$props0$editorVi.state,
613
- dispatch = _this$props0$editorVi.dispatch,
614
- selectionRect = _this$props0.selectionRect;
599
+ var _this$props9 = _this.props,
600
+ _this$props9$editorVi = _this$props9.editorView,
601
+ state = _this$props9$editorVi.state,
602
+ dispatch = _this$props9$editorVi.dispatch,
603
+ selectionRect = _this$props9.selectionRect;
615
604
  if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
616
605
  if (item.value.name === 'background') {
617
606
  if (!_this.state.isSubmenuOpen) {
@@ -635,9 +624,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
635
624
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
636
625
  (0, _defineProperty2.default)(_this, "handleItemMouseLeave", function (_ref5) {
637
626
  var item = _ref5.item;
638
- var _this$props$editorVie = _this.props.editorView,
639
- state = _this$props$editorVie.state,
640
- dispatch = _this$props$editorVie.dispatch;
627
+ var _this$props$editorVie2 = _this.props.editorView,
628
+ state = _this$props$editorVie2.state,
629
+ dispatch = _this$props$editorVie2.dispatch;
641
630
  if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
642
631
  if (item.value.name === 'background') {
643
632
  _this.closeSubmenu();
@@ -655,31 +644,22 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
655
644
  }
656
645
  });
657
646
  (0, _defineProperty2.default)(_this, "setColor", function (color) {
658
- var _this$props1 = _this.props,
659
- editorView = _this$props1.editorView,
660
- editorAnalyticsAPI = _this$props1.editorAnalyticsAPI,
661
- isCellMenuOpenByKeyboard = _this$props1.isCellMenuOpenByKeyboard;
647
+ var _this$props0 = _this.props,
648
+ editorView = _this$props0.editorView,
649
+ editorAnalyticsAPI = _this$props0.editorAnalyticsAPI,
650
+ isCellMenuOpenByKeyboard = _this$props0.isCellMenuOpenByKeyboard;
662
651
  var state = editorView.state,
663
652
  dispatch = editorView.dispatch,
664
653
  dom = editorView.dom;
665
654
  (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
666
655
  if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
667
656
  _this.toggleOpen();
668
- } else if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
657
+ } else {
669
658
  _this.toggleOpen();
670
659
  if (isCellMenuOpenByKeyboard) {
671
660
  (0, _commands.setFocusToCellMenu)(false)(editorView.state, dispatch);
672
661
  dom.focus();
673
662
  }
674
- } else {
675
- (0, _commands.toggleContextualMenu)()(state, dispatch);
676
- _this.setState({
677
- isSubmenuOpen: false
678
- });
679
- if (isCellMenuOpenByKeyboard) {
680
- (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
681
- dom.focus();
682
- }
683
663
  }
684
664
  });
685
665
  return _this;
@@ -711,12 +691,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
711
691
  }, {
712
692
  key: "render",
713
693
  value: function render() {
714
- var _this$props10 = this.props,
715
- isOpen = _this$props10.isOpen,
716
- offset = _this$props10.offset,
717
- boundariesElement = _this$props10.boundariesElement,
718
- isCellMenuOpenByKeyboard = _this$props10.isCellMenuOpenByKeyboard,
719
- api = _this$props10.api;
694
+ var _this$props1 = this.props,
695
+ isOpen = _this$props1.isOpen,
696
+ offset = _this$props1.offset,
697
+ boundariesElement = _this$props1.boundariesElement,
698
+ isCellMenuOpenByKeyboard = _this$props1.isCellMenuOpenByKeyboard,
699
+ api = _this$props1.api;
720
700
  var items = this.createContextMenuItems();
721
701
  var isOpenAllowed = false;
722
702
  isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
@@ -72,32 +72,23 @@ const updateTargetCellPosition = ({
72
72
  } = tr.doc.type.schema.nodes;
73
73
  const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
74
74
  const targetCellPosition = cell ? cell.pos : undefined;
75
- if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
76
- const targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
77
- const closeContextualMenu = shouldCloseLegacyContextualMenu({
78
- pluginState,
79
- targetCellPositionChanged,
80
- tr
81
- });
82
- if (!targetCellPositionChanged && !closeContextualMenu) {
83
- return pluginState;
84
- }
85
-
86
- // Close the legacy contextual menu when moving cells because the cell background
87
- // color submenu can otherwise remain open against the previous cell selection.
88
- return {
89
- ...pluginState,
90
- ...(closeContextualMenu ? {
91
- isContextualMenuOpen: false
92
- } : {}),
93
- targetCellPosition
94
- };
95
- }
96
- if (pluginState.targetCellPosition === targetCellPosition) {
75
+ const targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
76
+ const closeContextualMenu = shouldCloseLegacyContextualMenu({
77
+ pluginState,
78
+ targetCellPositionChanged,
79
+ tr
80
+ });
81
+ if (!targetCellPositionChanged && !closeContextualMenu) {
97
82
  return pluginState;
98
83
  }
84
+
85
+ // Close the legacy contextual menu when moving cells because the cell background
86
+ // color submenu can otherwise remain open against the previous cell selection.
99
87
  return {
100
88
  ...pluginState,
89
+ ...(closeContextualMenu ? {
90
+ isContextualMenuOpen: false
91
+ } : {}),
101
92
  targetCellPosition
102
93
  };
103
94
  };
@@ -1,8 +1,53 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { contextualMenuTriggerSize } from '../consts';
5
- export const tableFloatingCellButtonStyles = () => css({
6
+
7
+ // Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
8
+ const topLayerTooltipCellButtonStyles = () => css({
9
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
10
+ '> div:not([popover])': {
11
+ // Sits behind button to provide surface-color background
12
+ background: "var(--ds-surface, #FFFFFF)",
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
14
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
15
+ display: 'flex',
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
17
+ height: `${contextualMenuTriggerSize + 2}px`,
18
+ width: "var(--ds-space-250, 20px)",
19
+ flexDirection: 'column'
20
+ },
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
22
+ '&& button': {
23
+ background: "var(--ds-background-neutral, #0515240F)",
24
+ flexDirection: 'column',
25
+ margin: "var(--ds-space-025, 2px)",
26
+ outline: `2px solid ${"var(--ds-surface, #FFFFFF)"}`,
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
28
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
29
+ padding: 0,
30
+ height: 'calc(100% - 4px)',
31
+ display: 'flex'
32
+ },
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
+ '&& button:hover': {
35
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
36
+ },
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
38
+ '&& button:active': {
39
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
40
+ },
41
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
42
+ '&& button > span': {
43
+ margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
44
+ },
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
46
+ '&& span': {
47
+ pointerEvents: 'none'
48
+ }
49
+ });
50
+ const legacyCellButtonStyles = () => css({
6
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
7
52
  '> div': {
8
53
  // Sits behind button to provide surface-color background
@@ -44,6 +89,7 @@ export const tableFloatingCellButtonStyles = () => css({
44
89
  pointerEvents: 'none'
45
90
  }
46
91
  });
92
+ export const tableFloatingCellButtonStyles = () => fg('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
47
93
  export const tableFloatingCellButtonSelectedStyles = () => css({
48
94
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
49
95
  '&& button': {
@@ -574,25 +574,15 @@ export class ContextualMenu extends Component {
574
574
  });
575
575
  _defineProperty(this, "toggleOpen", () => {
576
576
  const {
577
- isOpen,
578
577
  editorView: {
579
578
  state,
580
579
  dispatch
581
580
  }
582
581
  } = this.props;
583
- if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
584
- if (getPluginState(state).isContextualMenuOpen) {
585
- toggleContextualMenu()(state, dispatch);
586
- }
587
- this.closeSubmenu();
588
- return;
589
- }
590
- toggleContextualMenu()(state, dispatch);
591
- if (!isOpen) {
592
- this.setState({
593
- isSubmenuOpen: false
594
- });
582
+ if (getPluginState(state).isContextualMenuOpen) {
583
+ toggleContextualMenu()(state, dispatch);
595
584
  }
585
+ this.closeSubmenu();
596
586
  });
597
587
  _defineProperty(this, "handleOpenChange", payload => {
598
588
  const {
@@ -709,21 +699,12 @@ export class ContextualMenu extends Component {
709
699
  setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
710
700
  if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
711
701
  this.toggleOpen();
712
- } else if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
702
+ } else {
713
703
  this.toggleOpen();
714
704
  if (isCellMenuOpenByKeyboard) {
715
705
  setFocusToCellMenu(false)(editorView.state, dispatch);
716
706
  dom.focus();
717
707
  }
718
- } else {
719
- toggleContextualMenu()(state, dispatch);
720
- this.setState({
721
- isSubmenuOpen: false
722
- });
723
- if (isCellMenuOpenByKeyboard) {
724
- setFocusToCellMenu(false)(state, dispatch);
725
- dom.focus();
726
- }
727
708
  }
728
709
  });
729
710
  }
@@ -74,29 +74,21 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
74
74
  tableHeader = _tr$doc$type$schema$n2.tableHeader;
75
75
  var cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
76
76
  var targetCellPosition = cell ? cell.pos : undefined;
77
- if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
78
- var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
79
- var closeContextualMenu = shouldCloseLegacyContextualMenu({
80
- pluginState: pluginState,
81
- targetCellPositionChanged: targetCellPositionChanged,
82
- tr: tr
83
- });
84
- if (!targetCellPositionChanged && !closeContextualMenu) {
85
- return pluginState;
86
- }
87
-
88
- // Close the legacy contextual menu when moving cells because the cell background
89
- // color submenu can otherwise remain open against the previous cell selection.
90
- return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
91
- isContextualMenuOpen: false
92
- } : {}), {}, {
93
- targetCellPosition: targetCellPosition
94
- });
95
- }
96
- if (pluginState.targetCellPosition === targetCellPosition) {
77
+ var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
78
+ var closeContextualMenu = shouldCloseLegacyContextualMenu({
79
+ pluginState: pluginState,
80
+ targetCellPositionChanged: targetCellPositionChanged,
81
+ tr: tr
82
+ });
83
+ if (!targetCellPositionChanged && !closeContextualMenu) {
97
84
  return pluginState;
98
85
  }
99
- return _objectSpread(_objectSpread({}, pluginState), {}, {
86
+
87
+ // Close the legacy contextual menu when moving cells because the cell background
88
+ // color submenu can otherwise remain open against the previous cell selection.
89
+ return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
90
+ isContextualMenuOpen: false
91
+ } : {}), {}, {
100
92
  targetCellPosition: targetCellPosition
101
93
  });
102
94
  };
@@ -1,8 +1,55 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { contextualMenuTriggerSize } from '../consts';
5
- export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
6
+
7
+ // Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
8
+ var topLayerTooltipCellButtonStyles = function topLayerTooltipCellButtonStyles() {
9
+ return css({
10
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
11
+ '> div:not([popover])': {
12
+ // Sits behind button to provide surface-color background
13
+ background: "var(--ds-surface, #FFFFFF)",
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
15
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
16
+ display: 'flex',
17
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
18
+ height: "".concat(contextualMenuTriggerSize + 2, "px"),
19
+ width: "var(--ds-space-250, 20px)",
20
+ flexDirection: 'column'
21
+ },
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
23
+ '&& button': {
24
+ background: "var(--ds-background-neutral, #0515240F)",
25
+ flexDirection: 'column',
26
+ margin: "var(--ds-space-025, 2px)",
27
+ outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
29
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
30
+ padding: 0,
31
+ height: 'calc(100% - 4px)',
32
+ display: 'flex'
33
+ },
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
35
+ '&& button:hover': {
36
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
37
+ },
38
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
39
+ '&& button:active': {
40
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
41
+ },
42
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
43
+ '&& button > span': {
44
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
45
+ },
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
47
+ '&& span': {
48
+ pointerEvents: 'none'
49
+ }
50
+ });
51
+ };
52
+ var legacyCellButtonStyles = function legacyCellButtonStyles() {
6
53
  return css({
7
54
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
8
55
  '> div': {
@@ -46,6 +93,9 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
46
93
  }
47
94
  });
48
95
  };
96
+ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
97
+ return fg('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
98
+ };
49
99
  export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
50
100
  return css({
51
101
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -540,32 +540,21 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
540
540
  }
541
541
  });
542
542
  _defineProperty(_this, "toggleOpen", function () {
543
- var _this$props8 = _this.props,
544
- isOpen = _this$props8.isOpen,
545
- _this$props8$editorVi = _this$props8.editorView,
546
- state = _this$props8$editorVi.state,
547
- dispatch = _this$props8$editorVi.dispatch;
548
- if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
549
- if (getPluginState(state).isContextualMenuOpen) {
550
- toggleContextualMenu()(state, dispatch);
551
- }
552
- _this.closeSubmenu();
553
- return;
554
- }
555
- toggleContextualMenu()(state, dispatch);
556
- if (!isOpen) {
557
- _this.setState({
558
- isSubmenuOpen: false
559
- });
543
+ var _this$props$editorVie = _this.props.editorView,
544
+ state = _this$props$editorVie.state,
545
+ dispatch = _this$props$editorVie.dispatch;
546
+ if (getPluginState(state).isContextualMenuOpen) {
547
+ toggleContextualMenu()(state, dispatch);
560
548
  }
549
+ _this.closeSubmenu();
561
550
  });
562
551
  _defineProperty(_this, "handleOpenChange", function (payload) {
563
- var _this$props9 = _this.props,
564
- _this$props9$editorVi = _this$props9.editorView,
565
- state = _this$props9$editorVi.state,
566
- dispatch = _this$props9$editorVi.dispatch,
567
- dom = _this$props9$editorVi.dom,
568
- isCellMenuOpenByKeyboard = _this$props9.isCellMenuOpenByKeyboard;
552
+ var _this$props8 = _this.props,
553
+ _this$props8$editorVi = _this$props8.editorView,
554
+ state = _this$props8$editorVi.state,
555
+ dispatch = _this$props8$editorVi.dispatch,
556
+ dom = _this$props8$editorVi.dom,
557
+ isCellMenuOpenByKeyboard = _this$props8.isCellMenuOpenByKeyboard;
569
558
  if (payload) {
570
559
  var event = payload.event;
571
560
  if (event && event instanceof KeyboardEvent) {
@@ -604,11 +593,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
604
593
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
605
594
  _defineProperty(_this, "handleItemMouseEnter", function (_ref4) {
606
595
  var item = _ref4.item;
607
- var _this$props0 = _this.props,
608
- _this$props0$editorVi = _this$props0.editorView,
609
- state = _this$props0$editorVi.state,
610
- dispatch = _this$props0$editorVi.dispatch,
611
- selectionRect = _this$props0.selectionRect;
596
+ var _this$props9 = _this.props,
597
+ _this$props9$editorVi = _this$props9.editorView,
598
+ state = _this$props9$editorVi.state,
599
+ dispatch = _this$props9$editorVi.dispatch,
600
+ selectionRect = _this$props9.selectionRect;
612
601
  if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
613
602
  if (item.value.name === 'background') {
614
603
  if (!_this.state.isSubmenuOpen) {
@@ -632,9 +621,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
632
621
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
633
622
  _defineProperty(_this, "handleItemMouseLeave", function (_ref5) {
634
623
  var item = _ref5.item;
635
- var _this$props$editorVie = _this.props.editorView,
636
- state = _this$props$editorVie.state,
637
- dispatch = _this$props$editorVie.dispatch;
624
+ var _this$props$editorVie2 = _this.props.editorView,
625
+ state = _this$props$editorVie2.state,
626
+ dispatch = _this$props$editorVie2.dispatch;
638
627
  if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
639
628
  if (item.value.name === 'background') {
640
629
  _this.closeSubmenu();
@@ -652,31 +641,22 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
652
641
  }
653
642
  });
654
643
  _defineProperty(_this, "setColor", function (color) {
655
- var _this$props1 = _this.props,
656
- editorView = _this$props1.editorView,
657
- editorAnalyticsAPI = _this$props1.editorAnalyticsAPI,
658
- isCellMenuOpenByKeyboard = _this$props1.isCellMenuOpenByKeyboard;
644
+ var _this$props0 = _this.props,
645
+ editorView = _this$props0.editorView,
646
+ editorAnalyticsAPI = _this$props0.editorAnalyticsAPI,
647
+ isCellMenuOpenByKeyboard = _this$props0.isCellMenuOpenByKeyboard;
659
648
  var state = editorView.state,
660
649
  dispatch = editorView.dispatch,
661
650
  dom = editorView.dom;
662
651
  setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
663
652
  if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
664
653
  _this.toggleOpen();
665
- } else if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
654
+ } else {
666
655
  _this.toggleOpen();
667
656
  if (isCellMenuOpenByKeyboard) {
668
657
  setFocusToCellMenu(false)(editorView.state, dispatch);
669
658
  dom.focus();
670
659
  }
671
- } else {
672
- toggleContextualMenu()(state, dispatch);
673
- _this.setState({
674
- isSubmenuOpen: false
675
- });
676
- if (isCellMenuOpenByKeyboard) {
677
- setFocusToCellMenu(false)(state, dispatch);
678
- dom.focus();
679
- }
680
660
  }
681
661
  });
682
662
  return _this;
@@ -708,12 +688,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
708
688
  }, {
709
689
  key: "render",
710
690
  value: function render() {
711
- var _this$props10 = this.props,
712
- isOpen = _this$props10.isOpen,
713
- offset = _this$props10.offset,
714
- boundariesElement = _this$props10.boundariesElement,
715
- isCellMenuOpenByKeyboard = _this$props10.isCellMenuOpenByKeyboard,
716
- api = _this$props10.api;
691
+ var _this$props1 = this.props,
692
+ isOpen = _this$props1.isOpen,
693
+ offset = _this$props1.offset,
694
+ boundariesElement = _this$props1.boundariesElement,
695
+ isCellMenuOpenByKeyboard = _this$props1.isCellMenuOpenByKeyboard,
696
+ api = _this$props1.api;
717
697
  var items = this.createContextMenuItems();
718
698
  var isOpenAllowed = false;
719
699
  isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "24.4.15",
3
+ "version": "24.4.17",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/editor-plugin-batch-attribute-updates": "^12.0.0",
30
30
  "@atlaskit/editor-plugin-content-insertion": "^12.0.0",
31
31
  "@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
32
- "@atlaskit/editor-plugin-extension": "15.0.34",
32
+ "@atlaskit/editor-plugin-extension": "15.0.36",
33
33
  "@atlaskit/editor-plugin-guideline": "^12.0.0",
34
34
  "@atlaskit/editor-plugin-interaction": "^23.0.0",
35
35
  "@atlaskit/editor-plugin-limited-mode": "^9.0.0",
@@ -47,17 +47,17 @@
47
47
  "@atlaskit/icon-lab": "^7.4.0",
48
48
  "@atlaskit/insm": "^1.0.0",
49
49
  "@atlaskit/menu": "^9.2.0",
50
- "@atlaskit/platform-feature-flags": "^2.0.0",
50
+ "@atlaskit/platform-feature-flags": "^2.1.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
52
52
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
53
53
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
54
- "@atlaskit/primitives": "^22.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^130.0.0",
54
+ "@atlaskit/primitives": "^22.1.0",
55
+ "@atlaskit/tmp-editor-statsig": "^132.0.0",
56
56
  "@atlaskit/toggle": "^17.1.0",
57
- "@atlaskit/tokens": "^16.1.0",
57
+ "@atlaskit/tokens": "^16.2.0",
58
58
  "@atlaskit/tooltip": "^23.1.0",
59
59
  "@babel/runtime": "^7.0.0",
60
- "@compiled/react": "^0.22.2",
60
+ "@compiled/react": "^1.0.0",
61
61
  "@emotion/react": "^11.7.1",
62
62
  "bind-event-listener": "^3.0.0",
63
63
  "classnames": "^2.2.5",
@@ -67,7 +67,7 @@
67
67
  "uuid": "^3.1.0"
68
68
  },
69
69
  "peerDependencies": {
70
- "@atlaskit/editor-common": "^116.33.0",
70
+ "@atlaskit/editor-common": "^116.35.0",
71
71
  "react": "^18.2.0",
72
72
  "react-dom": "^18.2.0",
73
73
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -159,6 +159,9 @@
159
159
  },
160
160
  "platform_editor_table_cell_menu_update": {
161
161
  "type": "boolean"
162
+ },
163
+ "platform-dst-top-layer-tooltip": {
164
+ "type": "boolean"
162
165
  }
163
166
  },
164
167
  "devDependencies": {