@atlaskit/editor-plugin-table 2.6.12 → 2.6.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.13
+
+### Patch Changes
+
+- [`8fe864e4f7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8fe864e4f7a) - [ux] ED-19336: Fixed insert column button not visible when sticky header is enabled."
+
 ## 2.6.12
 
 ### Patch Changes

package/dist/cjs/plugins/table/ui/FloatingInsertButton/index.js

@@ -19,6 +19,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
@@ -114,6 +115,12 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var tableWrapper = (0, _utils.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
       var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
       var hasNumberedColumns = (0, _utils4.checkIfNumberColumnEnabled)(editorView.state.selection);
+
+      // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+      // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+      // Only when inserting a column, otherwise set to undefined
+      // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+      var zIndex = type === 'column' ? _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex : undefined;
       return /*#__PURE__*/_react.default.createElement(_ui.Popup, (0, _extends2.default)({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,
@@ -121,7 +128,9 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: tableWrapper,
         forcePlacement: true,
         allowOutOfBounds: true
-      }, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
+      }, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, tableContainerWrapper), {
+        zIndex: zIndex
+      }), /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
         type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.12",
+	"version": "2.6.13",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js

@@ -6,6 +6,7 @@ import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } f
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -97,6 +98,12 @@ export class FloatingInsertButton extends React.Component {
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
     const hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
+
+    // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+    // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+    // Only when inserting a column, otherwise set to undefined
+    // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+    const zIndex = type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
     return /*#__PURE__*/React.createElement(Popup, _extends({
       target: targetCellRef,
       mountTo: tableContainerWrapper || mountPoint,
@@ -104,7 +111,9 @@ export class FloatingInsertButton extends React.Component {
       scrollableElement: tableWrapper,
       forcePlacement: true,
       allowOutOfBounds: true
-    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/React.createElement(InsertButton, {
+    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+      zIndex: zIndex
+    }), /*#__PURE__*/React.createElement(InsertButton, {
       type: type,
       tableRef: tableRef,
       onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.12",
+	"version": "2.6.13",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js

@@ -14,6 +14,7 @@ import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } f
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -107,6 +108,12 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
       var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
       var hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
+
+      // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+      // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+      // Only when inserting a column, otherwise set to undefined
+      // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+      var zIndex = type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
       return /*#__PURE__*/React.createElement(Popup, _extends({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,
@@ -114,7 +121,9 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: tableWrapper,
         forcePlacement: true,
         allowOutOfBounds: true
-      }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/React.createElement(InsertButton, {
+      }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+        zIndex: zIndex
+      }), /*#__PURE__*/React.createElement(InsertButton, {
         type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.12",
+	"version": "2.6.13",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.12",
+  "version": "2.6.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/plugins/table/ui/FloatingInsertButton/index.tsx

@@ -18,6 +18,7 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -176,6 +177,13 @@ export class FloatingInsertButton extends React.Component<
       editorView.state.selection,
     );
 
+    // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+    // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+    // Only when inserting a column, otherwise set to undefined
+    // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+    const zIndex: number | undefined =
+      type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
+
     return (
       <Popup
         target={targetCellRef}
@@ -190,6 +198,7 @@ export class FloatingInsertButton extends React.Component<
           hasNumberedColumns,
           tableContainerWrapper,
         )}
+        zIndex={zIndex}
       >
         <InsertButton
           type={type}