@atlaskit/editor-plugin-table 23.3.12 → 23.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 23.4.0
+
+### Minor Changes
+
+- [`26cdaa58ad1b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26cdaa58ad1b5) -
+  Cleaned up stale feature gate platform_editor_table_sticky_header_patch_2. Merged sticky header
+  mask styles and removed gate from tablePlugin plugin registration.
+
+### Patch Changes
+
+- [`c70fd1e57edcf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c70fd1e57edcf) -
+  Cleaned up stale feature flag `platform_editor_lovability_select_all_shortcut`
+- [`edeed2f3314cd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/edeed2f3314cd) -
+  Fix rounded table edge interaction overlays
+- Updated dependencies
+
 ## 23.3.12
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableCell.js

@@ -72,7 +72,7 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
       }
     });
     if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
-      _this.updateTableEdgeAttrs(node);
+      _this.updateTableEdgeAttrs();
     }
 
     // CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
@@ -123,7 +123,7 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
      */
   }, {
     key: "updateTableEdgeAttrs",
-    value: function updateTableEdgeAttrs(node) {
+    value: function updateTableEdgeAttrs() {
       var pos = this.getPos();
       if (pos === undefined) {
         return;
@@ -218,9 +218,6 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
         removedAttrs.forEach(function (key) {
           return _this2.dom.removeAttribute(key);
         });
-        if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
-          this.updateTableEdgeAttrs(node);
-        }
         return true;
       }
 

package/dist/cjs/nodeviews/TableComponent.js

@@ -140,6 +140,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           header.scrollLeft = _this.wrapper.scrollLeft;
           header.style.marginRight = '2px';
         }
+        if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+          (0, _dom.syncStickyRowToTable)(_this.table);
+        }
       }
 
       // force update to for table controls to re-align
@@ -978,7 +981,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       , {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: this.setWrapperRef
-      }, allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        contentEditable: false,
+        "aria-hidden": "true"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: _types.TableCssClassName.TABLE_CORNER_MASK,
+        "data-corner": "left"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        contentEditable: false,
+        "aria-hidden": "true"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: _types.TableCssClassName.TABLE_CORNER_MASK,
+        "data-corner": "right"
+      })), allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         "data-vc-nvs": "true",

package/dist/cjs/nodeviews/TableRow.js

@@ -18,6 +18,7 @@ var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -704,6 +705,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         return;
       }
       this.dom.style.removeProperty('width');
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+        (0, _dom.clearStickyCornerMaskPositions)(table);
+      }
       this.dom.classList.remove('sticky');
       table.classList.remove(_types.TableCssClassName.TABLE_STICKY);
       this.isSticky = false;

package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js

@@ -952,6 +952,9 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         return;
       }
       this.dom.style.removeProperty('width');
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+        (0, _dom.clearStickyCornerMaskPositions)(table);
+      }
       this.dom.classList.remove('sticky');
       table.classList.remove(_types.TableCssClassName.TABLE_STICKY);
       this.isLegacySticky = false;

package/dist/cjs/nodeviews/toDOM.js

@@ -19,6 +19,7 @@ var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _misc = require("../pm-plugins/table-resizing/utils/misc");
 var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
+var _types = require("../types");
 var _tableContainerStyles = require("./table-container-styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -66,6 +67,17 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
       }
+      var roundedTableCornerMasks = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        class: _types.TableCssClassName.TABLE_CORNER_MASK,
+        'data-corner': 'left'
+      }], ['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        class: _types.TableCssClassName.TABLE_CORNER_MASK,
+        'data-corner': 'right'
+      }]] : [];
       var tableContainerDiv = ['div', {
         class: 'pm-table-container',
         'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -78,7 +90,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
         class: 'pm-table-wrapper'
-      }, ['table', attrs, colgroup, ['tbody', 0]]], ['div', {
+      }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]]), ['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
       }]].concat((0, _toConsumableArray2.default)((0, _coreUtils.isSSRStreaming)() ? [['div', {

package/dist/cjs/pm-plugins/commands/selection.js

@@ -10,7 +10,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _toolbar = require("../../ui/toolbar");
 var _pluginFactory = require("../plugin-factory");
 var _misc = require("./misc");
@@ -470,7 +469,7 @@ var modASelectTable = exports.modASelectTable = function modASelectTable(editorS
       var isCellSelection = selection instanceof _cellSelection.CellSelection;
 
       // if no cells are selected
-      if (!isCellSelection && (0, _expValEquals.expValEquals)('platform_editor_lovability_select_all_shortcut', 'isEnabled', true)) {
+      if (!isCellSelection) {
         return selectTableCell(state, dispatch);
       }
       // else if any number of cells are selected but not the full table

package/dist/cjs/pm-plugins/table-resizing/utils/dom.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateStickyMargins = exports.updateControls = exports.syncStickyRowToTable = exports.isClickNear = exports.getResizeCellPos = void 0;
+exports.updateStickyMargins = exports.updateControls = exports.syncStickyRowToTable = exports.isClickNear = exports.getResizeCellPos = exports.clearStickyCornerMaskPositions = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../../../types");
 var _pluginFactory = require("../../plugin-factory");
 var _columnControls = require("../../utils/column-controls");
@@ -103,5 +104,34 @@ var applyTableWidthToStickyRow = function applyTableWidthToStickyRow(tableRef, h
     var newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
     headerRow.style.width = "".concat(newWidth, "px");
     headerRow.scrollLeft = wrapper.scrollLeft;
+    if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+      syncCornerMasksToStickyRow(tableRef, headerRow, wrapper);
+    }
+  }
+};
+var clearStickyCornerMaskPositions = exports.clearStickyCornerMaskPositions = function clearStickyCornerMaskPositions(tableRef) {
+  var wrapper = tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement;
+  if (!wrapper) {
+    return;
+  }
+  wrapper.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_CORNER_MASK)).forEach(function (mask) {
+    mask.style.removeProperty('left');
+  });
+};
+var syncCornerMasksToStickyRow = function syncCornerMasksToStickyRow(tableRef, headerRow, wrapper) {
+  var cornerMasks = wrapper.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_CORNER_MASK));
+  if (!cornerMasks.length) {
+    return;
+  }
+  var isLegacySticky = tableRef.classList.contains(_types.TableCssClassName.TABLE_STICKY) && headerRow.classList.contains('sticky');
+  if (!isLegacySticky) {
+    clearStickyCornerMaskPositions(tableRef);
+    return;
   }
+  var stickyRowRect = headerRow.getBoundingClientRect();
+  cornerMasks.forEach(function (mask) {
+    var corner = mask.dataset.corner;
+    var left = corner === 'right' ? stickyRowRect.right - 11 : stickyRowRect.left - 1;
+    mask.style.left = "".concat(left, "px");
+  });
 };

package/dist/cjs/tablePlugin.js

@@ -500,7 +500,7 @@ var tablePlugin = function tablePlugin(_ref) {
           return (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? (0, _editorContentAreaHeight.createPlugin)() : undefined;
         }
       }];
-      if (!(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_2')) {
+      if (!(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
         plugins.push({
           name: 'tableAnchorNames',
           plugin: function plugin() {

package/dist/cjs/types/index.js

@@ -147,6 +147,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   NODEVIEW_WRAPPER: 'tableView-content-wrap',
   TABLE_SELECTED: "".concat(_adfSchema.tablePrefixSelector, "-table__selected"),
   TABLE_CELL: _adfSchema.tableCellSelector,
+  TABLE_CORNER_MASK: "".concat(_adfSchema.tablePrefixSelector, "-corner-mask"),
   TABLE_HEADER_CELL: _adfSchema.tableHeaderSelector,
   TABLE_STICKY: "".concat(_adfSchema.tablePrefixSelector, "-sticky"),
   TABLE_CHROMELESS: "".concat(_adfSchema.tablePrefixSelector, "-chromeless"),

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -73,13 +73,21 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         tableActive = _this$props3.tableActive,
         updateCellHoverLocation = _this$props3.updateCellHoverLocation;
       var rowHeights = (0, _rowControls.getRowHeights)(tableRef);
+      var getMarginTop = function getMarginTop() {
+        if (!hasHeaderRow || _this2.props.stickyTop === undefined) {
+          return undefined;
+        }
+
+        // with platform_editor_table_q4_loveability enabled, table controls have margin-top of 1px applied. Offset this here.
+        return rowHeights[0] + 1;
+      };
       if ((0, _coreUtils.isSSR)()) {
         return /*#__PURE__*/_react.default.createElement("div", {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className: _types.TableCssClassName.NUMBERED_COLUMN,
           style: {
             // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-            marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+            marginTop: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? getMarginTop() : hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
             borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
             "1px solid ".concat(_consts.tableBorderColor) : undefined,
             // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -93,7 +101,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         className: _types.TableCssClassName.NUMBERED_COLUMN,
         style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+          marginTop: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? getMarginTop() : hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
           borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           "1px solid ".concat(_consts.tableBorderColor) : undefined,
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop