@atlaskit/editor-plugin-table 7.28.1 → 7.28.3

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 (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/FloatingContextualButton/FixedButton.js +18 -7
  3. package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +3 -1
  4. package/dist/es2019/ui/FloatingContextualButton/FixedButton.js +19 -8
  5. package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +3 -1
  6. package/dist/esm/ui/FloatingContextualButton/FixedButton.js +19 -8
  7. package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +3 -1
  8. package/package.json +5 -5
  9. package/src/ui/FloatingContextualButton/FixedButton.tsx +23 -9
  10. package/src/ui/TableFloatingControls/NumberColumn/index.tsx +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.28.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#145959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145959)
8
+ [`ea00ae7d7d94f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea00ae7d7d94f) -
9
+ [ED-25130] Fix sticky header numbered column when using the new breakout css logic
10
+ (container-type)
11
+ - Updated dependencies
12
+
13
+ ## 7.28.2
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 7.28.1
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/FloatingContextualButton/FixedButton.js CHANGED
@@ -89,8 +89,24 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
89
89
  };
90
90
  }
91
91
  }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
92
- var targetCellRect = targetCellRef.getBoundingClientRect();
93
92
  var fixedButtonTop = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
93
+ var containerLeft = (0, _react.useMemo)(function () {
94
+ if (!(0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css')) {
95
+ return 0;
96
+ }
97
+ var container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
98
+ return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
99
+ }, [targetCellRef]);
100
+ var left = (0, _react.useMemo)(function () {
101
+ var targetCellRect = targetCellRef.getBoundingClientRect();
102
+ var baseLeft = calcLeftPos({
103
+ buttonWidth: BUTTON_WIDTH,
104
+ cellRectLeft: targetCellRect.left,
105
+ cellRefWidth: targetCellRef.clientWidth,
106
+ offset: offset
107
+ });
108
+ return baseLeft - containerLeft;
109
+ }, [containerLeft, targetCellRef, offset]);
94
110
 
95
111
  // Using a portal here to ensure wrapperRef has the tableWrapper as an
96
112
  // ancestor. This is required to make the Intersection Observer work.
@@ -125,12 +141,7 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
125
141
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
126
142
  zIndex: _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex,
127
143
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
128
- left: calcLeftPos({
129
- buttonWidth: BUTTON_WIDTH,
130
- cellRectLeft: targetCellRect.left,
131
- cellRefWidth: targetCellRef.clientWidth,
132
- offset: offset
133
- }),
144
+ left: left,
134
145
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
135
146
  width: "var(--ds-space-250, 20px)",
136
147
  // BUTTON_WIDTH
package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js CHANGED
@@ -17,6 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
17
17
  var _classnames2 = _interopRequireDefault(require("classnames"));
18
18
  var _state = require("@atlaskit/editor-prosemirror/state");
19
19
  var _utils = require("@atlaskit/editor-tables/utils");
20
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
21
  var _commands = require("../../../commands");
21
22
  var _types = require("../../../types");
22
23
  var _utils2 = require("../../../utils");
@@ -76,9 +77,10 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
76
77
  stickyTop = _this$props3.stickyTop,
77
78
  hasHeaderRow = _this$props3.hasHeaderRow;
78
79
  if (stickyTop && hasHeaderRow && index === 0) {
80
+ var topOffset = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : stickyTop;
79
81
  return {
80
82
  height: rowHeight,
81
- top: "".concat(stickyTop, "px")
83
+ top: "".concat(topOffset, "px")
82
84
  };
83
85
  }
84
86
  return {
package/dist/es2019/ui/FloatingContextualButton/FixedButton.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React, { useEffect, useMemo, useRef } from 'react';
2
2
  import rafSchedule from 'raf-schd';
3
3
  import { createPortal } from 'react-dom';
4
4
  import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
@@ -81,8 +81,24 @@ export const FixedButton = ({
81
81
  };
82
82
  }
83
83
  }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
84
- const targetCellRect = targetCellRef.getBoundingClientRect();
85
84
  const fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
85
+ const containerLeft = useMemo(() => {
86
+ if (!fg('platform_editor_breakout_use_css')) {
87
+ return 0;
88
+ }
89
+ const container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
90
+ return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
91
+ }, [targetCellRef]);
92
+ const left = useMemo(() => {
93
+ const targetCellRect = targetCellRef.getBoundingClientRect();
94
+ const baseLeft = calcLeftPos({
95
+ buttonWidth: BUTTON_WIDTH,
96
+ cellRectLeft: targetCellRect.left,
97
+ cellRefWidth: targetCellRef.clientWidth,
98
+ offset
99
+ });
100
+ return baseLeft - containerLeft;
101
+ }, [containerLeft, targetCellRef, offset]);
86
102
 
87
103
  // Using a portal here to ensure wrapperRef has the tableWrapper as an
88
104
  // ancestor. This is required to make the Intersection Observer work.
@@ -117,12 +133,7 @@ export const FixedButton = ({
117
133
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
118
134
  zIndex: akEditorTableCellOnStickyHeaderZIndex,
119
135
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
120
- left: calcLeftPos({
121
- buttonWidth: BUTTON_WIDTH,
122
- cellRectLeft: targetCellRect.left,
123
- cellRefWidth: targetCellRef.clientWidth,
124
- offset
125
- }),
136
+ left,
126
137
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
127
138
  width: "var(--ds-space-250, 20px)",
128
139
  // BUTTON_WIDTH
package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js CHANGED
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
3
3
  import classnames from 'classnames';
4
4
  import { Selection } from '@atlaskit/editor-prosemirror/state';
5
5
  import { isRowSelected } from '@atlaskit/editor-tables/utils';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { clearHoverSelection } from '../../../commands';
7
8
  import { TableCssClassName as ClassName } from '../../../types';
8
9
  import { getRowHeights } from '../../../utils';
@@ -57,9 +58,10 @@ export default class NumberColumn extends Component {
57
58
  hasHeaderRow
58
59
  } = this.props;
59
60
  if (stickyTop && hasHeaderRow && index === 0) {
61
+ const topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
60
62
  return {
61
63
  height: rowHeight,
62
- top: `${stickyTop}px`
64
+ top: `${topOffset}px`
63
65
  };
64
66
  }
65
67
  return {
package/dist/esm/ui/FloatingContextualButton/FixedButton.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React, { useEffect, useMemo, useRef } from 'react';
2
2
  import rafSchedule from 'raf-schd';
3
3
  import { createPortal } from 'react-dom';
4
4
  import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
@@ -79,8 +79,24 @@ export var FixedButton = function FixedButton(_ref2) {
79
79
  };
80
80
  }
81
81
  }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
82
- var targetCellRect = targetCellRef.getBoundingClientRect();
83
82
  var fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
83
+ var containerLeft = useMemo(function () {
84
+ if (!fg('platform_editor_breakout_use_css')) {
85
+ return 0;
86
+ }
87
+ var container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
88
+ return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
89
+ }, [targetCellRef]);
90
+ var left = useMemo(function () {
91
+ var targetCellRect = targetCellRef.getBoundingClientRect();
92
+ var baseLeft = calcLeftPos({
93
+ buttonWidth: BUTTON_WIDTH,
94
+ cellRectLeft: targetCellRect.left,
95
+ cellRefWidth: targetCellRef.clientWidth,
96
+ offset: offset
97
+ });
98
+ return baseLeft - containerLeft;
99
+ }, [containerLeft, targetCellRef, offset]);
84
100
 
85
101
  // Using a portal here to ensure wrapperRef has the tableWrapper as an
86
102
  // ancestor. This is required to make the Intersection Observer work.
@@ -115,12 +131,7 @@ export var FixedButton = function FixedButton(_ref2) {
115
131
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
116
132
  zIndex: akEditorTableCellOnStickyHeaderZIndex,
117
133
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
118
- left: calcLeftPos({
119
- buttonWidth: BUTTON_WIDTH,
120
- cellRectLeft: targetCellRect.left,
121
- cellRefWidth: targetCellRef.clientWidth,
122
- offset: offset
123
- }),
134
+ left: left,
124
135
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
125
136
  width: "var(--ds-space-250, 20px)",
126
137
  // BUTTON_WIDTH
package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js CHANGED
@@ -11,6 +11,7 @@ import React, { Component } from 'react';
11
11
  import classnames from 'classnames';
12
12
  import { Selection } from '@atlaskit/editor-prosemirror/state';
13
13
  import { isRowSelected } from '@atlaskit/editor-tables/utils';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
14
15
  import { clearHoverSelection } from '../../../commands';
15
16
  import { TableCssClassName as ClassName } from '../../../types';
16
17
  import { getRowHeights } from '../../../utils';
@@ -66,9 +67,10 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
66
67
  stickyTop = _this$props3.stickyTop,
67
68
  hasHeaderRow = _this$props3.hasHeaderRow;
68
69
  if (stickyTop && hasHeaderRow && index === 0) {
70
+ var topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
69
71
  return {
70
72
  height: rowHeight,
71
- top: "".concat(stickyTop, "px")
73
+ top: "".concat(topOffset, "px")
72
74
  };
73
75
  }
74
76
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.28.1",
3
+ "version": "7.28.3",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -30,8 +30,8 @@
30
30
  "@atlaskit/adf-schema": "^40.9.0",
31
31
  "@atlaskit/button": "^20.2.0",
32
32
  "@atlaskit/custom-steps": "^0.7.0",
33
- "@atlaskit/editor-common": "^91.1.0",
34
- "@atlaskit/editor-palette": "1.6.0",
33
+ "@atlaskit/editor-common": "^91.2.0",
34
+ "@atlaskit/editor-palette": "1.6.1",
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
37
37
  "@atlaskit/editor-plugin-batch-attribute-updates": "1.0.6",
@@ -43,7 +43,7 @@
43
43
  "@atlaskit/editor-prosemirror": "6.0.0",
44
44
  "@atlaskit/editor-shared-styles": "^3.0.0",
45
45
  "@atlaskit/editor-tables": "^2.8.0",
46
- "@atlaskit/icon": "^22.18.0",
46
+ "@atlaskit/icon": "^22.19.0",
47
47
  "@atlaskit/menu": "^2.12.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.3.0",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/theme": "^13.0.0",
54
54
  "@atlaskit/tmp-editor-statsig": "^2.1.8",
55
55
  "@atlaskit/toggle": "^13.4.0",
56
- "@atlaskit/tokens": "^1.61.0",
56
+ "@atlaskit/tokens": "^2.0.0",
57
57
  "@atlaskit/tooltip": "^18.7.0",
58
58
  "@babel/runtime": "^7.0.0",
59
59
  "@emotion/react": "^11.7.1",
package/src/ui/FloatingContextualButton/FixedButton.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React, { useEffect, useMemo, useRef } from 'react';
2
2
 
3
3
  import rafSchedule from 'raf-schd';
4
4
  import { createPortal } from 'react-dom';
@@ -130,10 +130,29 @@ export const FixedButton = ({
130
130
  isContextualMenuOpen,
131
131
  ]);
132
132
 
133
- const targetCellRect = targetCellRef.getBoundingClientRect();
134
-
135
133
  const fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
136
134
 
135
+ const containerLeft = useMemo(() => {
136
+ if (!fg('platform_editor_breakout_use_css')) {
137
+ return 0;
138
+ }
139
+
140
+ const container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
141
+ return container?.getBoundingClientRect().left || 0;
142
+ }, [targetCellRef]);
143
+
144
+ const left = useMemo(() => {
145
+ const targetCellRect = targetCellRef.getBoundingClientRect();
146
+ const baseLeft = calcLeftPos({
147
+ buttonWidth: BUTTON_WIDTH,
148
+ cellRectLeft: targetCellRect.left,
149
+ cellRefWidth: targetCellRef.clientWidth,
150
+ offset,
151
+ });
152
+
153
+ return baseLeft - containerLeft;
154
+ }, [containerLeft, targetCellRef, offset]);
155
+
137
156
  // Using a portal here to ensure wrapperRef has the tableWrapper as an
138
157
  // ancestor. This is required to make the Intersection Observer work.
139
158
  return createPortal(
@@ -166,12 +185,7 @@ export const FixedButton = ({
166
185
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
167
186
  zIndex: akEditorTableCellOnStickyHeaderZIndex,
168
187
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
169
- left: calcLeftPos({
170
- buttonWidth: BUTTON_WIDTH,
171
- cellRectLeft: targetCellRect.left,
172
- cellRefWidth: targetCellRef.clientWidth,
173
- offset,
174
- }),
188
+ left,
175
189
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
176
190
  width: token('space.250', '20px'), // BUTTON_WIDTH
177
191
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/src/ui/TableFloatingControls/NumberColumn/index.tsx CHANGED
@@ -5,6 +5,7 @@ import classnames from 'classnames';
5
5
  import { Selection } from '@atlaskit/editor-prosemirror/state';
6
6
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
7
7
  import { isRowSelected } from '@atlaskit/editor-tables/utils';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
 
9
10
  import { clearHoverSelection } from '../../../commands';
10
11
  import { TableCssClassName as ClassName } from '../../../types';
@@ -111,9 +112,11 @@ export default class NumberColumn extends Component<Props, any> {
111
112
  private getCellStyles = (index: number, rowHeight: number) => {
112
113
  const { stickyTop, hasHeaderRow } = this.props;
113
114
  if (stickyTop && hasHeaderRow && index === 0) {
115
+ const topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
116
+
114
117
  return {
115
118
  height: rowHeight,
116
- top: `${stickyTop}px`,
119
+ top: `${topOffset}px`,
117
120
  };
118
121
  }
119
122
  return {