@atlaskit/editor-plugin-table 1.5.3 → 1.5.5

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,17 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 1.5.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.5.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [`00d7488cf36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00d7488cf36) - [ux] The table shadow sentinels when rendered out of view would sometimes return a 0 root bounds object in the intersection observer. This became an issue because we ignore intersection entities with 0 root bounds. This fixes the right shadow not appear on tablessimply by removing the root bounds check from the observer
14
+
3
15
  ## 1.5.3
4
16
 
5
17
  ### Patch Changes
@@ -28,15 +28,11 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
28
28
  }
29
29
  if (!_this.tableIntersectionObserver) {
30
30
  var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
31
- var _entry$rootBounds, _entry$rootBounds2;
32
- if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
33
- return;
34
- }
35
31
  if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
36
32
  return;
37
33
  }
38
34
  _this.updateStickyShadowsHeightIfChanged();
39
- _this.checkIntersectionEvent(entry, _this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW);
35
+ _this.updateShadowState(_this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
40
36
  };
41
37
  _this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
42
38
  entries.forEach(function (entry) {
@@ -50,17 +46,6 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
50
46
  return;
51
47
  }
52
48
  });
53
- (0, _defineProperty2.default)(this, "checkIntersectionEvent", function (entry, shadowKey) {
54
- if (
55
- // If it's in full view, don't show shadow.
56
- entry.isIntersecting && entry.intersectionRatio === 1) {
57
- _this.updateShadowState(shadowKey, false);
58
- } else if (
59
- // If it's in partial view, show a shadow
60
- entry.intersectionRatio < 1) {
61
- _this.updateShadowState(shadowKey, true);
62
- }
63
- });
64
49
  (0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
65
50
  var _this$table, _this$table2;
66
51
  _this.isSticky = !!isSticky;
@@ -59,10 +59,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
59
59
  if (_this.state[shadowKey] === value) {
60
60
  return;
61
61
  }
62
- // need this check to satisfy types for the setState argument
63
- if (shadowKey === _types.ShadowEvent.SHOW_BEFORE_SHADOW) {
64
- return _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
65
- }
66
62
  _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
67
63
  });
68
64
  (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "createShadowSentinels", function (table) {
@@ -123,11 +119,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
123
119
  if (!tableOverflowShadowsOptimization) {
124
120
  _this.updateShadows();
125
121
  }
126
- if (_this.wrapper.scrollLeft === 0) {
127
- _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false));
128
- } else {
129
- _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, true));
130
- }
122
+ _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
131
123
  });
132
124
  (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
133
125
  var _this$props = _this.props,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.5.3",
3
+ "version": "1.5.5",
4
4
  "sideEffects": false
5
5
  }
@@ -17,15 +17,11 @@ export class OverflowShadowsObserver {
17
17
  }
18
18
  if (!this.tableIntersectionObserver) {
19
19
  const intersectonOnbserverCallback = entry => {
20
- var _entry$rootBounds, _entry$rootBounds2;
21
- if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
22
- return;
23
- }
24
20
  if (entry.target !== this.leftShadowSentinel && entry.target !== this.rightShadowSentinel) {
25
21
  return;
26
22
  }
27
23
  this.updateStickyShadowsHeightIfChanged();
28
- this.checkIntersectionEvent(entry, this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
24
+ this.updateShadowState(this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
29
25
  };
30
26
  this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
31
27
  entries.forEach(entry => intersectonOnbserverCallback(entry));
@@ -37,17 +33,6 @@ export class OverflowShadowsObserver {
37
33
  return;
38
34
  }
39
35
  });
40
- _defineProperty(this, "checkIntersectionEvent", (entry, shadowKey) => {
41
- if (
42
- // If it's in full view, don't show shadow.
43
- entry.isIntersecting && entry.intersectionRatio === 1) {
44
- this.updateShadowState(shadowKey, false);
45
- } else if (
46
- // If it's in partial view, show a shadow
47
- entry.intersectionRatio < 1) {
48
- this.updateShadowState(shadowKey, true);
49
- }
50
- });
51
36
  _defineProperty(this, "observeShadowSentinels", isSticky => {
52
37
  var _this$table, _this$table2;
53
38
  this.isSticky = !!isSticky;
@@ -39,12 +39,6 @@ class TableComponent extends React.Component {
39
39
  if (this.state[shadowKey] === value) {
40
40
  return;
41
41
  }
42
- // need this check to satisfy types for the setState argument
43
- if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
44
- return this.setState({
45
- [shadowKey]: value
46
- });
47
- }
48
42
  this.setState({
49
43
  [shadowKey]: value
50
44
  });
@@ -113,15 +107,9 @@ class TableComponent extends React.Component {
113
107
  if (!tableOverflowShadowsOptimization) {
114
108
  this.updateShadows();
115
109
  }
116
- if (this.wrapper.scrollLeft === 0) {
117
- this.setState({
118
- [ShadowEvent.SHOW_BEFORE_SHADOW]: false
119
- });
120
- } else {
121
- this.setState({
122
- [ShadowEvent.SHOW_BEFORE_SHADOW]: true
123
- });
124
- }
110
+ this.setState({
111
+ [ShadowEvent.SHOW_BEFORE_SHADOW]: this.wrapper.scrollLeft !== 0
112
+ });
125
113
  });
126
114
  _defineProperty(this, "handleTableResizing", () => {
127
115
  const {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.5.3",
3
+ "version": "1.5.5",
4
4
  "sideEffects": false
5
5
  }
@@ -21,15 +21,11 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
21
21
  }
22
22
  if (!_this.tableIntersectionObserver) {
23
23
  var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
24
- var _entry$rootBounds, _entry$rootBounds2;
25
- if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
26
- return;
27
- }
28
24
  if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
29
25
  return;
30
26
  }
31
27
  _this.updateStickyShadowsHeightIfChanged();
32
- _this.checkIntersectionEvent(entry, _this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
28
+ _this.updateShadowState(_this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
33
29
  };
34
30
  _this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
35
31
  entries.forEach(function (entry) {
@@ -43,17 +39,6 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
43
39
  return;
44
40
  }
45
41
  });
46
- _defineProperty(this, "checkIntersectionEvent", function (entry, shadowKey) {
47
- if (
48
- // If it's in full view, don't show shadow.
49
- entry.isIntersecting && entry.intersectionRatio === 1) {
50
- _this.updateShadowState(shadowKey, false);
51
- } else if (
52
- // If it's in partial view, show a shadow
53
- entry.intersectionRatio < 1) {
54
- _this.updateShadowState(shadowKey, true);
55
- }
56
- });
57
42
  _defineProperty(this, "observeShadowSentinels", function (isSticky) {
58
43
  var _this$table, _this$table2;
59
44
  _this.isSticky = !!isSticky;
@@ -54,10 +54,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
54
54
  if (_this.state[shadowKey] === value) {
55
55
  return;
56
56
  }
57
- // need this check to satisfy types for the setState argument
58
- if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
59
- return _this.setState(_defineProperty({}, shadowKey, value));
60
- }
61
57
  _this.setState(_defineProperty({}, shadowKey, value));
62
58
  });
63
59
  _defineProperty(_assertThisInitialized(_this), "createShadowSentinels", function (table) {
@@ -118,11 +114,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
118
114
  if (!tableOverflowShadowsOptimization) {
119
115
  _this.updateShadows();
120
116
  }
121
- if (_this.wrapper.scrollLeft === 0) {
122
- _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, false));
123
- } else {
124
- _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, true));
125
- }
117
+ _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
126
118
  });
127
119
  _defineProperty(_assertThisInitialized(_this), "handleTableResizing", function () {
128
120
  var _this$props = _this.props,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.5.3",
3
+ "version": "1.5.5",
4
4
  "sideEffects": false
5
5
  }
@@ -11,7 +11,6 @@ export declare class OverflowShadowsObserver {
11
11
  private stickyRowHeight;
12
12
  constructor(updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void, table: HTMLElement, wrapper: HTMLDivElement);
13
13
  private init;
14
- private checkIntersectionEvent;
15
14
  private updateStickyShadowsHeightIfChanged;
16
15
  private getStickyCell;
17
16
  observeShadowSentinels: (isSticky?: boolean) => void;
@@ -11,7 +11,6 @@ export declare class OverflowShadowsObserver {
11
11
  private stickyRowHeight;
12
12
  constructor(updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void, table: HTMLElement, wrapper: HTMLDivElement);
13
13
  private init;
14
- private checkIntersectionEvent;
15
14
  private updateStickyShadowsHeightIfChanged;
16
15
  private getStickyCell;
17
16
  observeShadowSentinels: (isSticky?: boolean) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.5.3",
3
+ "version": "1.5.5",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,10 +27,10 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@atlaskit/adf-schema": "^25.8.0",
30
- "@atlaskit/editor-common": "^74.5.0",
30
+ "@atlaskit/editor-common": "^74.6.0",
31
31
  "@atlaskit/editor-palette": "1.4.3",
32
- "@atlaskit/editor-plugin-analytics": "^0.0.1",
33
- "@atlaskit/editor-plugin-content-insertion": "^0.0.1",
32
+ "@atlaskit/editor-plugin-analytics": "^0.0.2",
33
+ "@atlaskit/editor-plugin-content-insertion": "^0.0.2",
34
34
  "@atlaskit/editor-shared-styles": "^2.4.0",
35
35
  "@atlaskit/editor-tables": "^2.3.0",
36
36
  "@atlaskit/icon": "^21.12.0",
@@ -63,7 +63,7 @@
63
63
  "devDependencies": {
64
64
  "@atlaskit/analytics-next": "^9.1.0",
65
65
  "@atlaskit/button": "^16.7.0",
66
- "@atlaskit/editor-core": "^185.1.0",
66
+ "@atlaskit/editor-core": "^185.2.0",
67
67
  "@atlaskit/editor-plugin-decorations": "^0.1.0",
68
68
  "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
69
69
  "@atlaskit/editor-plugin-grid": "^0.1.0",
@@ -318,7 +318,6 @@ describe('Table analytic events', () => {
318
318
 
319
319
  setColorWithAnalytics(editorAnalyticsAPIFake)(
320
320
  INPUT_METHOD.CONTEXT_MENU,
321
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
322
321
  B50,
323
322
  )(editorView.state, editorView.dispatch);
324
323
  });
@@ -39,21 +39,19 @@ export class OverflowShadowsObserver {
39
39
  const intersectonOnbserverCallback = (
40
40
  entry: IntersectionObserverEntry,
41
41
  ) => {
42
- if (!entry.rootBounds?.height && !entry.rootBounds?.width) {
43
- return;
44
- }
45
42
  if (
46
43
  entry.target !== this.leftShadowSentinel &&
47
44
  entry.target !== this.rightShadowSentinel
48
45
  ) {
49
46
  return;
50
47
  }
48
+
51
49
  this.updateStickyShadowsHeightIfChanged();
52
- this.checkIntersectionEvent(
53
- entry,
50
+ this.updateShadowState(
54
51
  this.leftShadowSentinel === entry.target
55
52
  ? ShadowEvent.SHOW_BEFORE_SHADOW
56
53
  : ShadowEvent.SHOW_AFTER_SHADOW,
54
+ entry.intersectionRatio !== 1,
57
55
  );
58
56
  };
59
57
 
@@ -71,24 +69,6 @@ export class OverflowShadowsObserver {
71
69
  }
72
70
  };
73
71
 
74
- private checkIntersectionEvent = (
75
- entry: IntersectionObserverEntry,
76
- shadowKey: ShadowEvent,
77
- ) => {
78
- if (
79
- // If it's in full view, don't show shadow.
80
- entry.isIntersecting &&
81
- entry.intersectionRatio === 1
82
- ) {
83
- this.updateShadowState(shadowKey, false);
84
- } else if (
85
- // If it's in partial view, show a shadow
86
- entry.intersectionRatio < 1
87
- ) {
88
- this.updateShadowState(shadowKey, true);
89
- }
90
- };
91
-
92
72
  private updateStickyShadowsHeightIfChanged() {
93
73
  if (!this.isSticky) {
94
74
  return;
@@ -280,11 +280,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
280
280
  if (this.state[shadowKey] === value) {
281
281
  return;
282
282
  }
283
- // need this check to satisfy types for the setState argument
284
- if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
285
- return this.setState({ [shadowKey]: value });
286
- }
287
- this.setState({ [shadowKey]: value });
283
+ this.setState({ [shadowKey]: value } as Pick<TableState, typeof shadowKey>);
288
284
  };
289
285
 
290
286
  private createShadowSentinels = (table: HTMLTableElement | null) => {
@@ -537,11 +533,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
537
533
  this.updateShadows();
538
534
  }
539
535
 
540
- if (this.wrapper.scrollLeft === 0) {
541
- this.setState({ [ShadowEvent.SHOW_BEFORE_SHADOW]: false });
542
- } else {
543
- this.setState({ [ShadowEvent.SHOW_BEFORE_SHADOW]: true });
544
- }
536
+ this.setState({
537
+ [ShadowEvent.SHOW_BEFORE_SHADOW]: this.wrapper.scrollLeft !== 0,
538
+ });
545
539
  };
546
540
 
547
541
  private handleTableResizing = () => {