@atlaskit/editor-plugin-table 16.3.2 → 16.3.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 16.3.4
+
+### Patch Changes
+
+- [`275fdae298e95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/275fdae298e95) -
+  [ux] EDITOR-4412 Show/hide header column/row and numbered column toggles in drag controls based on
+  editor props
+- Updated dependencies
+
+## 16.3.3
+
+### Patch Changes
+
+- [`e225fb5074e28`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e225fb5074e28) -
+  [ux] Update logic for enabling drag and drop in tables
+- Updated dependencies
+
 ## 16.3.2
 
 ### Patch Changes

package/dist/cjs/tablePlugin.js

@@ -67,7 +67,7 @@ var TABLE_WIDTH_INFO_TIMEOUT = 10000;
  * from `@atlaskit/editor-core`.
  */
 var tablePlugin = function tablePlugin(_ref) {
-  var _config$tableOptions, _fg, _api$analytics, _options$getEditorFea, _options$getEditorFea2;
+  var _config$tableOptions, _api$analytics, _options$getEditorFea, _options$getEditorFea2;
   var config = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -75,7 +75,7 @@ var tablePlugin = function tablePlugin(_ref) {
   };
   var options = _objectSpread(_objectSpread({}, config), {}, {
     tableOptions: (_config$tableOptions = config === null || config === void 0 ? void 0 : config.tableOptions) !== null && _config$tableOptions !== void 0 ? _config$tableOptions : {},
-    dragAndDropEnabled: (_fg = (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd')) !== null && _fg !== void 0 ? _fg : config === null || config === void 0 ? void 0 : config.dragAndDropEnabled
+    dragAndDropEnabled: (config === null || config === void 0 ? void 0 : config.dragAndDropEnabled) || (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd')
   });
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
     var _api$width$sharedStat, _api$width, _document$body$offset, _document;

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -23,6 +23,7 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _paintBucket = _interopRequireDefault(require("@atlaskit/icon/core/paint-bucket"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
@@ -358,14 +359,8 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   var toggleRowNumbers = function toggleRowNumbers() {
     (0, _commandsWithAnalytics.toggleNumberColumnWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
   };
-  var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
-    return direction === 'column' ? {
-      key: 'header_column',
-      content: formatMessage(_messages.tableMessages.headerColumn),
-      value: {
-        name: 'header_column'
-      },
-      elemAfter:
+  var HeaderColumnToggle = function HeaderColumnToggle() {
+    return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       (0, _react2.jsx)("div", {
         css: _styles2.toggleStyles
@@ -375,13 +370,10 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         onChange: toggleHeaderColumn,
         isChecked: (0, _nodes.checkIfHeaderColumnEnabled)(selection)
       }))
-    } : {
-      key: 'header_row',
-      content: formatMessage(_messages.tableMessages.headerRow),
-      value: {
-        name: 'header_row'
-      },
-      elemAfter:
+    );
+  };
+  var HeaderRowToggle = function HeaderRowToggle() {
+    return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       (0, _react2.jsx)("div", {
         css: _styles2.toggleStyles
@@ -391,8 +383,47 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         onChange: toggleHeaderRow,
         isChecked: (0, _nodes.checkIfHeaderRowEnabled)(selection)
       }))
+    );
+  };
+  var createHeaderRowColumnMenuItemOld = function createHeaderRowColumnMenuItemOld(direction) {
+    return direction === 'column' ? {
+      key: 'header_column',
+      content: formatMessage(_messages.tableMessages.headerColumn),
+      value: {
+        name: 'header_column'
+      },
+      elemAfter: (0, _react2.jsx)(HeaderColumnToggle, null)
+    } : {
+      key: 'header_row',
+      content: formatMessage(_messages.tableMessages.headerRow),
+      value: {
+        name: 'header_row'
+      },
+      elemAfter: (0, _react2.jsx)(HeaderRowToggle, null)
     };
   };
+  var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
+    if (direction === 'column' && (pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderColumn)) {
+      return {
+        key: 'header_column',
+        content: formatMessage(_messages.tableMessages.headerColumn),
+        value: {
+          name: 'header_column'
+        },
+        elemAfter: (0, _react2.jsx)(HeaderColumnToggle, null)
+      };
+    }
+    if (direction === 'row' && (pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderRow)) {
+      return {
+        key: 'header_row',
+        content: formatMessage(_messages.tableMessages.headerRow),
+        value: {
+          name: 'header_row'
+        },
+        elemAfter: (0, _react2.jsx)(HeaderRowToggle, null)
+      };
+    }
+  };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
       key: 'row_numbers',
@@ -518,13 +549,20 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
   if (index === 0) {
-    menuItems.push({
-      items: [createHeaderRowColumnMenuItem(direction)]
-    });
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd')) {
+      menuItems.push({
+        items: [createHeaderRowColumnMenuItemOld(direction)]
+      });
+    } else if ((pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderColumn || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderRow) && (0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd')) {
+      var headerRowColumnMenuItem = createHeaderRowColumnMenuItem(direction);
+      headerRowColumnMenuItem && menuItems.push({
+        items: [headerRowColumnMenuItem]
+      });
+    }
   }
 
   // All rows, add toggle for numbered rows, default is false
-  if (direction === 'row') {
+  if (direction === 'row' && ((0, _platformFeatureFlags.fg)('platform_editor_enable_table_dnd') ? (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.advanced) || (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowNumberColumn) : true)) {
     index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
       items: [createRowNumbersMenuItem()]
     });

package/dist/es2019/tablePlugin.js

@@ -56,14 +56,14 @@ const tablePlugin = ({
   config,
   api
 }) => {
-  var _config$tableOptions, _fg, _api$analytics, _options$getEditorFea, _options$getEditorFea2;
+  var _config$tableOptions, _api$analytics, _options$getEditorFea, _options$getEditorFea2;
   const editorViewRef = {
     current: null
   };
   const options = {
     ...config,
     tableOptions: (_config$tableOptions = config === null || config === void 0 ? void 0 : config.tableOptions) !== null && _config$tableOptions !== void 0 ? _config$tableOptions : {},
-    dragAndDropEnabled: (_fg = fg('platform_editor_enable_table_dnd')) !== null && _fg !== void 0 ? _fg : config === null || config === void 0 ? void 0 : config.dragAndDropEnabled
+    dragAndDropEnabled: (config === null || config === void 0 ? void 0 : config.dragAndDropEnabled) || fg('platform_editor_enable_table_dnd')
   };
   const defaultGetEditorContainerWidth = () => {
     var _api$width$sharedStat, _api$width, _document$body$offset, _document, _document$body;

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -21,6 +21,7 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -352,41 +353,65 @@ const DragMenu = /*#__PURE__*/React.memo(({
   const toggleRowNumbers = () => {
     toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
   };
-  const createHeaderRowColumnMenuItem = direction => {
+  const HeaderColumnToggle = () =>
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("div", {
+    css: toggleStyles
+  }, jsx(Toggle, {
+    id: "toggle-header-column",
+    label: formatMessage(messages.headerColumn),
+    onChange: toggleHeaderColumn,
+    isChecked: checkIfHeaderColumnEnabled(selection)
+  }));
+  const HeaderRowToggle = () =>
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("div", {
+    css: toggleStyles
+  }, jsx(Toggle, {
+    id: "toggle-header-row",
+    label: formatMessage(messages.headerRow),
+    onChange: toggleHeaderRow,
+    isChecked: checkIfHeaderRowEnabled(selection)
+  }));
+  const createHeaderRowColumnMenuItemOld = direction => {
     return direction === 'column' ? {
       key: 'header_column',
       content: formatMessage(messages.headerColumn),
       value: {
         name: 'header_column'
       },
-      elemAfter:
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: toggleStyles
-      }, jsx(Toggle, {
-        id: "toggle-header-column",
-        label: formatMessage(messages.headerColumn),
-        onChange: toggleHeaderColumn,
-        isChecked: checkIfHeaderColumnEnabled(selection)
-      }))
+      elemAfter: jsx(HeaderColumnToggle, null)
     } : {
       key: 'header_row',
       content: formatMessage(messages.headerRow),
       value: {
         name: 'header_row'
       },
-      elemAfter:
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: toggleStyles
-      }, jsx(Toggle, {
-        id: "toggle-header-row",
-        label: formatMessage(messages.headerRow),
-        onChange: toggleHeaderRow,
-        isChecked: checkIfHeaderRowEnabled(selection)
-      }))
+      elemAfter: jsx(HeaderRowToggle, null)
     };
   };
+  const createHeaderRowColumnMenuItem = direction => {
+    if (direction === 'column' && (pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderColumn)) {
+      return {
+        key: 'header_column',
+        content: formatMessage(messages.headerColumn),
+        value: {
+          name: 'header_column'
+        },
+        elemAfter: jsx(HeaderColumnToggle, null)
+      };
+    }
+    if (direction === 'row' && (pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderRow)) {
+      return {
+        key: 'header_row',
+        content: formatMessage(messages.headerRow),
+        value: {
+          name: 'header_row'
+        },
+        elemAfter: jsx(HeaderRowToggle, null)
+      };
+    }
+  };
   const createRowNumbersMenuItem = () => {
     return {
       key: 'row_numbers',
@@ -517,13 +542,20 @@ const DragMenu = /*#__PURE__*/React.memo(({
   // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
   if (index === 0) {
-    menuItems.push({
-      items: [createHeaderRowColumnMenuItem(direction)]
-    });
+    if (!fg('platform_editor_enable_table_dnd')) {
+      menuItems.push({
+        items: [createHeaderRowColumnMenuItemOld(direction)]
+      });
+    } else if ((pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderColumn || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderRow) && fg('platform_editor_enable_table_dnd')) {
+      const headerRowColumnMenuItem = createHeaderRowColumnMenuItem(direction);
+      headerRowColumnMenuItem && menuItems.push({
+        items: [headerRowColumnMenuItem]
+      });
+    }
   }
 
   // All rows, add toggle for numbered rows, default is false
-  if (direction === 'row') {
+  if (direction === 'row' && (fg('platform_editor_enable_table_dnd') ? (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.advanced) || (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowNumberColumn) : true)) {
     index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
       items: [createRowNumbersMenuItem()]
     });

package/dist/esm/tablePlugin.js

@@ -58,7 +58,7 @@ var TABLE_WIDTH_INFO_TIMEOUT = 10000;
  * from `@atlaskit/editor-core`.
  */
 var tablePlugin = function tablePlugin(_ref) {
-  var _config$tableOptions, _fg, _api$analytics, _options$getEditorFea, _options$getEditorFea2;
+  var _config$tableOptions, _api$analytics, _options$getEditorFea, _options$getEditorFea2;
   var config = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -66,7 +66,7 @@ var tablePlugin = function tablePlugin(_ref) {
   };
   var options = _objectSpread(_objectSpread({}, config), {}, {
     tableOptions: (_config$tableOptions = config === null || config === void 0 ? void 0 : config.tableOptions) !== null && _config$tableOptions !== void 0 ? _config$tableOptions : {},
-    dragAndDropEnabled: (_fg = fg('platform_editor_enable_table_dnd')) !== null && _fg !== void 0 ? _fg : config === null || config === void 0 ? void 0 : config.dragAndDropEnabled
+    dragAndDropEnabled: (config === null || config === void 0 ? void 0 : config.dragAndDropEnabled) || fg('platform_editor_enable_table_dnd')
   });
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
     var _api$width$sharedStat, _api$width, _document$body$offset, _document;

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -23,6 +23,7 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -347,14 +348,8 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   var toggleRowNumbers = function toggleRowNumbers() {
     toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
   };
-  var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
-    return direction === 'column' ? {
-      key: 'header_column',
-      content: formatMessage(messages.headerColumn),
-      value: {
-        name: 'header_column'
-      },
-      elemAfter:
+  var HeaderColumnToggle = function HeaderColumnToggle() {
+    return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       jsx("div", {
         css: toggleStyles
@@ -364,13 +359,10 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         onChange: toggleHeaderColumn,
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
-    } : {
-      key: 'header_row',
-      content: formatMessage(messages.headerRow),
-      value: {
-        name: 'header_row'
-      },
-      elemAfter:
+    );
+  };
+  var HeaderRowToggle = function HeaderRowToggle() {
+    return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       jsx("div", {
         css: toggleStyles
@@ -380,8 +372,47 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         onChange: toggleHeaderRow,
         isChecked: checkIfHeaderRowEnabled(selection)
       }))
+    );
+  };
+  var createHeaderRowColumnMenuItemOld = function createHeaderRowColumnMenuItemOld(direction) {
+    return direction === 'column' ? {
+      key: 'header_column',
+      content: formatMessage(messages.headerColumn),
+      value: {
+        name: 'header_column'
+      },
+      elemAfter: jsx(HeaderColumnToggle, null)
+    } : {
+      key: 'header_row',
+      content: formatMessage(messages.headerRow),
+      value: {
+        name: 'header_row'
+      },
+      elemAfter: jsx(HeaderRowToggle, null)
     };
   };
+  var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
+    if (direction === 'column' && (pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderColumn)) {
+      return {
+        key: 'header_column',
+        content: formatMessage(messages.headerColumn),
+        value: {
+          name: 'header_column'
+        },
+        elemAfter: jsx(HeaderColumnToggle, null)
+      };
+    }
+    if (direction === 'row' && (pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderRow)) {
+      return {
+        key: 'header_row',
+        content: formatMessage(messages.headerRow),
+        value: {
+          name: 'header_row'
+        },
+        elemAfter: jsx(HeaderRowToggle, null)
+      };
+    }
+  };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
       key: 'row_numbers',
@@ -507,13 +538,20 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
   if (index === 0) {
-    menuItems.push({
-      items: [createHeaderRowColumnMenuItem(direction)]
-    });
+    if (!fg('platform_editor_enable_table_dnd')) {
+      menuItems.push({
+        items: [createHeaderRowColumnMenuItemOld(direction)]
+      });
+    } else if ((pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.advanced || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderColumn || pluginConfig !== null && pluginConfig !== void 0 && pluginConfig.allowHeaderRow) && fg('platform_editor_enable_table_dnd')) {
+      var headerRowColumnMenuItem = createHeaderRowColumnMenuItem(direction);
+      headerRowColumnMenuItem && menuItems.push({
+        items: [headerRowColumnMenuItem]
+      });
+    }
   }
 
   // All rows, add toggle for numbered rows, default is false
-  if (direction === 'row') {
+  if (direction === 'row' && (fg('platform_editor_enable_table_dnd') ? (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.advanced) || (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowNumberColumn) : true)) {
     index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
       items: [createRowNumbersMenuItem()]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "16.3.2",
+	"version": "16.3.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^7.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^7.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^9.0.0",
-		"@atlaskit/editor-plugin-extension": "10.0.2",
+		"@atlaskit/editor-plugin-extension": "10.0.3",
 		"@atlaskit/editor-plugin-guideline": "^7.0.0",
 		"@atlaskit/editor-plugin-interaction": "^13.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^4.0.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.23.0",
+		"@atlaskit/tmp-editor-statsig": "^16.25.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/tokens": "^10.0.0",
 		"@atlaskit/tooltip": "^20.14.0",