@atlaskit/editor-plugin-table 9.5.8 → 9.5.9

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 (16) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +2 -1
  3. package/dist/cjs/pm-plugins/view-mode-sort/utils.js +5 -4
  4. package/dist/cjs/ui/common-styles.js +1 -1
  5. package/dist/es2019/nodeviews/TableComponent.js +2 -1
  6. package/dist/es2019/pm-plugins/view-mode-sort/utils.js +5 -4
  7. package/dist/es2019/ui/common-styles.js +11 -7
  8. package/dist/esm/nodeviews/TableComponent.js +2 -1
  9. package/dist/esm/pm-plugins/view-mode-sort/utils.js +5 -4
  10. package/dist/esm/ui/common-styles.js +1 -1
  11. package/dist/types/pm-plugins/view-mode-sort/utils.d.ts +2 -2
  12. package/dist/types-ts4.5/pm-plugins/view-mode-sort/utils.d.ts +2 -2
  13. package/package.json +1 -1
  14. package/src/nodeviews/TableComponent.tsx +4 -1
  15. package/src/pm-plugins/view-mode-sort/utils.ts +14 -4
  16. package/src/ui/common-styles.ts +11 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 9.5.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [#115089](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115089)
8
+ [`cebfa87c2825a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cebfa87c2825a) -
9
+ [ux] [ED-26564] This change fixes the table sort functionality for tables containing nested
10
+ tables, and fixes the styling for the table sort button when selected (is active).
11
+
3
12
  ## 9.5.8
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/nodeviews/TableComponent.js CHANGED
@@ -338,6 +338,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
338
338
  (0, _defineProperty3.default)(_this, "handleScrollDebounced", (0, _rafSchd.default)(_this.handleScroll));
339
339
  (0, _defineProperty3.default)(_this, "handleAutoSizeDebounced", (0, _rafSchd.default)(_this.handleAutoSize));
340
340
  (0, _defineProperty3.default)(_this, "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
341
+ (0, _defineProperty3.default)(_this, "updateShadowStateDebounced", (0, _rafSchd.default)(_this.updateShadowState));
341
342
  var _options = props.options,
342
343
  _containerWidth = props.containerWidth,
343
344
  _getNode = props.getNode;
@@ -733,7 +734,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
733
734
  // that happens when a table is nested in expand and expand's width is
734
735
  // changed via breakout button
735
736
  window.requestAnimationFrame(function () {
736
- _this4.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this4.updateShadowState,
737
+ _this4.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? _this4.updateShadowStateDebounced : _this4.updateShadowState,
737
738
  // Ignored via go/ees005
738
739
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
739
740
  _this4.table, _this4.wrapper);
package/dist/cjs/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -9,10 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _types = require("@atlaskit/editor-common/types");
11
11
  var _utils = require("@atlaskit/editor-common/utils");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _consts = require("./consts");
13
14
  var unsort = exports.unsort = function unsort(oldOrder, tableElement) {
14
- var rows = tableElement.querySelectorAll('tr');
15
- var tbody = tableElement.querySelector('tbody');
15
+ var tbody = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelector(":scope > tbody") : tableElement.querySelector('tbody');
16
+ var rows = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelectorAll(":scope > tbody > tr") : tableElement.querySelectorAll('tr');
16
17
  var sortedOrder = (0, _toConsumableArray2.default)(oldOrder).sort(function (a, b) {
17
18
  return a.value - b.value;
18
19
  });
@@ -117,8 +118,8 @@ var toggleSort = exports.toggleSort = function toggleSort(view, event, pluginSta
117
118
  };
118
119
  var getTableElements = exports.getTableElements = function getTableElements(tableId) {
119
120
  var tableElement = document.querySelector("table[data-table-local-id=\"".concat(tableId, "\"]"));
120
- var tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
121
- var rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
121
+ var tbody = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(':scope > tbody') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
122
+ var rows = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll(':scope > tbody > tr') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
122
123
  return {
123
124
  tbody: tbody,
124
125
  rows: rows
package/dist/cjs/ui/common-styles.js CHANGED
@@ -43,7 +43,7 @@ var breakoutWidthStyling = function breakoutWidthStyling() {
43
43
  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER);
44
44
  };
45
45
  var viewModeSortStyles = function viewModeSortStyles() {
46
- return (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _types.TableCssClassName.TABLE_CONTAINER, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
46
+ return (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _types.TableCssClassName.TABLE_CONTAINER, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
47
47
  };
48
48
  var tableBorderStyles = function tableBorderStyles() {
49
49
  return "border-color: ".concat(_consts2.tableBorderDeleteColor);
package/dist/es2019/nodeviews/TableComponent.js CHANGED
@@ -336,6 +336,7 @@ class TableComponent extends React.Component {
336
336
  _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
337
337
  _defineProperty(this, "handleAutoSizeDebounced", rafSchedule(this.handleAutoSize));
338
338
  _defineProperty(this, "handleWindowResizeDebounced", rafSchedule(this.handleWindowResize));
339
+ _defineProperty(this, "updateShadowStateDebounced", rafSchedule(this.updateShadowState));
339
340
  const {
340
341
  options: _options,
341
342
  containerWidth: _containerWidth,
@@ -702,7 +703,7 @@ class TableComponent extends React.Component {
702
703
  // that happens when a table is nested in expand and expand's width is
703
704
  // changed via breakout button
704
705
  window.requestAnimationFrame(() => {
705
- this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState,
706
+ this.overflowShadowsObserver = new OverflowShadowsObserver(fg('platform_editor_nested_tables_view_mode_sort') ? this.updateShadowStateDebounced : this.updateShadowState,
706
707
  // Ignored via go/ees005
707
708
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
708
709
  this.table, this.wrapper);
package/dist/es2019/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { SortOrder } from '@atlaskit/editor-common/types';
2
2
  import { convertProsemirrorTableNodeToArrayOfRows, createCompareNodes } from '@atlaskit/editor-common/utils';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
4
5
  export const unsort = (oldOrder, tableElement) => {
5
- const rows = tableElement.querySelectorAll('tr');
6
- const tbody = tableElement.querySelector('tbody');
6
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelector(`:scope > tbody`) : tableElement.querySelector('tbody');
7
+ const rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelectorAll(`:scope > tbody > tr`) : tableElement.querySelectorAll('tr');
7
8
  const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
8
9
  sortedOrder.forEach(item => {
9
10
  tbody === null || tbody === void 0 ? void 0 : tbody.appendChild(rows[item.index + 1]);
@@ -107,8 +108,8 @@ export const toggleSort = (view, event, pluginState) => {
107
108
  };
108
109
  export const getTableElements = tableId => {
109
110
  const tableElement = document.querySelector(`table[data-table-local-id="${tableId}"]`);
110
- const tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
111
- const rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
111
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(':scope > tbody') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
112
+ const rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll(':scope > tbody > tr') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
112
113
  return {
113
114
  tbody,
114
115
  rows
package/dist/es2019/ui/common-styles.js CHANGED
@@ -134,16 +134,20 @@ const viewModeSortStyles = () => {
134
134
  }
135
135
  }
136
136
 
137
- &:has(.is-active) {
138
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
139
- opacity: 1;
137
+ > .${SORTING_ICON_CLASS_NAME} {
138
+ &:has(.is-active) {
139
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
140
+ opacity: 1;
141
+ }
140
142
  }
141
143
  }
142
144
 
143
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
144
- opacity: 0;
145
- &:focus {
146
- opacity: 1;
145
+ > .${SORTING_ICON_CLASS_NAME} {
146
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
147
+ opacity: 0;
148
+ &:focus {
149
+ opacity: 1;
150
+ }
147
151
  }
148
152
  }
149
153
 
package/dist/esm/nodeviews/TableComponent.js CHANGED
@@ -332,6 +332,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
332
332
  _defineProperty(_this, "handleScrollDebounced", rafSchedule(_this.handleScroll));
333
333
  _defineProperty(_this, "handleAutoSizeDebounced", rafSchedule(_this.handleAutoSize));
334
334
  _defineProperty(_this, "handleWindowResizeDebounced", rafSchedule(_this.handleWindowResize));
335
+ _defineProperty(_this, "updateShadowStateDebounced", rafSchedule(_this.updateShadowState));
335
336
  var _options = props.options,
336
337
  _containerWidth = props.containerWidth,
337
338
  _getNode = props.getNode;
@@ -727,7 +728,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
727
728
  // that happens when a table is nested in expand and expand's width is
728
729
  // changed via breakout button
729
730
  window.requestAnimationFrame(function () {
730
- _this4.overflowShadowsObserver = new OverflowShadowsObserver(_this4.updateShadowState,
731
+ _this4.overflowShadowsObserver = new OverflowShadowsObserver(fg('platform_editor_nested_tables_view_mode_sort') ? _this4.updateShadowStateDebounced : _this4.updateShadowState,
731
732
  // Ignored via go/ees005
732
733
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
733
734
  _this4.table, _this4.wrapper);
package/dist/esm/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -2,10 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  import { SortOrder } from '@atlaskit/editor-common/types';
4
4
  import { convertProsemirrorTableNodeToArrayOfRows, createCompareNodes } from '@atlaskit/editor-common/utils';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
6
7
  export var unsort = function unsort(oldOrder, tableElement) {
7
- var rows = tableElement.querySelectorAll('tr');
8
- var tbody = tableElement.querySelector('tbody');
8
+ var tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelector(":scope > tbody") : tableElement.querySelector('tbody');
9
+ var rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelectorAll(":scope > tbody > tr") : tableElement.querySelectorAll('tr');
9
10
  var sortedOrder = _toConsumableArray(oldOrder).sort(function (a, b) {
10
11
  return a.value - b.value;
11
12
  });
@@ -110,8 +111,8 @@ export var toggleSort = function toggleSort(view, event, pluginState) {
110
111
  };
111
112
  export var getTableElements = function getTableElements(tableId) {
112
113
  var tableElement = document.querySelector("table[data-table-local-id=\"".concat(tableId, "\"]"));
113
- var tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
114
- var rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
114
+ var tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(':scope > tbody') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
115
+ var rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll(':scope > tbody > tr') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
115
116
  return {
116
117
  tbody: tbody,
117
118
  rows: rows
package/dist/esm/ui/common-styles.js CHANGED
@@ -38,7 +38,7 @@ var breakoutWidthStyling = function breakoutWidthStyling() {
38
38
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
39
39
  };
40
40
  var viewModeSortStyles = function viewModeSortStyles() {
41
- return fg('platform_editor_nested_tables_view_mode_sort') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, ClassName.TABLE_CONTAINER, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
41
+ return fg('platform_editor_nested_tables_view_mode_sort') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, ClassName.TABLE_CONTAINER, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
42
42
  };
43
43
  var tableBorderStyles = function tableBorderStyles() {
44
44
  return "border-color: ".concat(tableBorderDeleteColor);
package/dist/types/pm-plugins/view-mode-sort/utils.d.ts CHANGED
@@ -6,6 +6,6 @@ export declare const unsort: (oldOrder: {
6
6
  }[], tableElement: HTMLElement) => void;
7
7
  export declare const toggleSort: (view: EditorView, event: Event, pluginState: TableSortMeta) => void;
8
8
  export declare const getTableElements: (tableId: string) => {
9
- tbody: HTMLTableSectionElement | null | undefined;
10
- rows: NodeListOf<HTMLTableRowElement> | undefined;
9
+ tbody: Element | null | undefined;
10
+ rows: NodeListOf<Element> | undefined;
11
11
  };
package/dist/types-ts4.5/pm-plugins/view-mode-sort/utils.d.ts CHANGED
@@ -6,6 +6,6 @@ export declare const unsort: (oldOrder: {
6
6
  }[], tableElement: HTMLElement) => void;
7
7
  export declare const toggleSort: (view: EditorView, event: Event, pluginState: TableSortMeta) => void;
8
8
  export declare const getTableElements: (tableId: string) => {
9
- tbody: HTMLTableSectionElement | null | undefined;
10
- rows: NodeListOf<HTMLTableRowElement> | undefined;
9
+ tbody: Element | null | undefined;
10
+ rows: NodeListOf<Element> | undefined;
11
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "9.5.8",
3
+ "version": "9.5.9",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/src/nodeviews/TableComponent.tsx CHANGED
@@ -651,7 +651,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
651
651
  // changed via breakout button
652
652
  window.requestAnimationFrame(() => {
653
653
  this.overflowShadowsObserver = new OverflowShadowsObserver(
654
- this.updateShadowState,
654
+ fg('platform_editor_nested_tables_view_mode_sort')
655
+ ? this.updateShadowStateDebounced
656
+ : this.updateShadowState,
655
657
  // Ignored via go/ees005
656
658
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
657
659
  this.table as HTMLElement,
@@ -1335,6 +1337,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
1335
1337
  private handleScrollDebounced = rafSchedule(this.handleScroll);
1336
1338
  private handleAutoSizeDebounced = rafSchedule(this.handleAutoSize);
1337
1339
  private handleWindowResizeDebounced = rafSchedule(this.handleWindowResize);
1340
+ private updateShadowStateDebounced = rafSchedule(this.updateShadowState);
1338
1341
  }
1339
1342
 
1340
1343
  export default injectIntl(TableComponent);
package/src/pm-plugins/view-mode-sort/utils.ts CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  } from '@atlaskit/editor-common/utils';
6
6
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
7
7
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
 
9
10
  import {
10
11
  IS_DISABLED_CLASS_NAME,
@@ -14,8 +15,12 @@ import {
14
15
  import type { TableSortMeta } from './types';
15
16
 
16
17
  export const unsort = (oldOrder: { index: number; value: number }[], tableElement: HTMLElement) => {
17
- const rows = tableElement.querySelectorAll('tr');
18
- const tbody = tableElement.querySelector('tbody');
18
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort')
19
+ ? tableElement.querySelector(`:scope > tbody`)
20
+ : tableElement.querySelector('tbody');
21
+ const rows = fg('platform_editor_nested_tables_view_mode_sort')
22
+ ? tableElement.querySelectorAll(`:scope > tbody > tr`)
23
+ : tableElement.querySelectorAll('tr');
19
24
 
20
25
  const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
21
26
  sortedOrder.forEach((item) => {
@@ -129,7 +134,12 @@ export const toggleSort = (view: EditorView, event: Event, pluginState: TableSor
129
134
 
130
135
  export const getTableElements = (tableId: string) => {
131
136
  const tableElement = document.querySelector(`table[data-table-local-id="${tableId}"]`);
132
- const tbody = tableElement?.querySelector('tbody');
133
- const rows = tableElement?.querySelectorAll('tr');
137
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort')
138
+ ? tableElement?.querySelector(':scope > tbody')
139
+ : tableElement?.querySelector('tbody');
140
+
141
+ const rows = fg('platform_editor_nested_tables_view_mode_sort')
142
+ ? tableElement?.querySelectorAll(':scope > tbody > tr')
143
+ : tableElement?.querySelectorAll('tr');
134
144
  return { tbody, rows };
135
145
  };
package/src/ui/common-styles.ts CHANGED
@@ -206,16 +206,20 @@ const viewModeSortStyles = () => {
206
206
  }
207
207
  }
208
208
 
209
- &:has(.is-active) {
210
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
211
- opacity: 1;
209
+ > .${SORTING_ICON_CLASS_NAME} {
210
+ &:has(.is-active) {
211
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
212
+ opacity: 1;
213
+ }
212
214
  }
213
215
  }
214
216
 
215
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
216
- opacity: 0;
217
- &:focus {
218
- opacity: 1;
217
+ > .${SORTING_ICON_CLASS_NAME} {
218
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
219
+ opacity: 0;
220
+ &:focus {
221
+ opacity: 1;
222
+ }
219
223
  }
220
224
  }
221
225