@atlaskit/editor-plugin-table 5.6.6 → 5.7.0

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
@@ -14,6 +15,10 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { splitCell } from '@atlaskit/editor-tables/utils';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -22,6 +27,7 @@ import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
+import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
 import { cellColourPreviewStyles } from './styles';
 export class ContextualMenu extends Component {
   constructor(...args) {
@@ -40,46 +46,43 @@ export class ContextualMenu extends Component {
         ref.style.left = `-${rect.width}px`;
       }
     });
-    _defineProperty(this, "createItems", () => {
+    _defineProperty(this, "createBackgroundColorItem", () => {
       const {
-        allowMergeCells,
-        allowColumnSorting,
         allowBackgroundColor,
         editorView: {
           state
         },
         isOpen,
-        selectionRect,
         intl: {
           formatMessage
         },
         editorView
       } = this.props;
-      const items = [];
       const {
         isSubmenuOpen
       } = this.state;
-      // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
         targetCellPosition,
-        pluginConfig: {
-          allowDistributeColumns
-        }
+        isDragAndDropEnabled
       } = getPluginState(editorView.state);
       if (allowBackgroundColor) {
         var _node$attrs;
         const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
-        items.push({
-          content: formatMessage(messages.cellBackground),
+        return {
+          content: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
           value: {
             name: 'background'
           },
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(EditorBackgroundColorIcon, {
+            label: formatMessage(messages.backgroundColor),
+            size: "medium"
+          }) : undefined,
           elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
             css: cellColourPreviewStyles(background),
-            className: ClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
@@ -93,26 +96,95 @@ export class ContextualMenu extends Component {
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
           })))
-        });
+        };
       }
-      items.push({
-        content: formatMessage(messages.insertColumn),
+    });
+    _defineProperty(this, "createMergeSplitCellItems", () => {
+      const {
+        allowMergeCells,
+        editorView: {
+          state
+        },
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      if (allowMergeCells) {
+        return [{
+          content: formatMessage(messages.mergeCells),
+          value: {
+            name: 'merge'
+          },
+          isDisabled: !canMergeCells(state.tr),
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(MergeCellsIcon, null) : undefined
+        }, {
+          content: formatMessage(messages.splitCell),
+          value: {
+            name: 'split'
+          },
+          isDisabled: !splitCell(state),
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(SplitCellIcon, null) : undefined
+        }];
+      }
+      return [];
+    });
+    _defineProperty(this, "createInsertColumnItem", () => {
+      const {
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      return {
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumn : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
-        }, tooltip(addColumnAfter))
-      });
-      items.push({
-        content: formatMessage(messages.insertRow),
+        }, tooltip(addColumnAfter)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddColRightIcon, null) : undefined
+      };
+    });
+    _defineProperty(this, "createInsertRowItem", () => {
+      const {
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      return {
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRow : messages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
-        }, tooltip(addRowAfter))
-      });
+        }, tooltip(addRowAfter)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddRowBelowIcon, null) : undefined
+      };
+    });
+    _defineProperty(this, "createClearCellsItem", () => {
+      const {
+        selectionRect,
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
       const {
         top,
         bottom,
@@ -121,85 +193,186 @@ export class ContextualMenu extends Component {
       } = selectionRect;
       const noOfColumns = right - left;
       const noOfRows = bottom - top;
-      items.push({
+      return {
+        content: formatMessage(messages.clearCells, {
+          0: Math.max(noOfColumns, noOfRows)
+        }),
+        value: {
+          name: 'clear'
+        },
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(backspace)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(CrossCircleIcon, {
+          label: formatMessage(messages.clearCells, {
+            0: Math.max(noOfColumns, noOfRows)
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(this, "createDeleteColumnItem", () => {
+      const {
+        selectionRect,
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      const {
+        right,
+        left
+      } = selectionRect;
+      const noOfColumns = right - left;
+      return {
         content: formatMessage(messages.removeColumns, {
           0: noOfColumns
         }),
         value: {
           name: 'delete_column'
-        }
-      });
-      items.push({
+        },
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+          label: formatMessage(messages.removeColumns, {
+            0: noOfColumns
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(this, "createDeleteRowItem", () => {
+      const {
+        selectionRect,
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      const {
+        bottom,
+        top
+      } = selectionRect;
+      const noOfRows = bottom - top;
+      return {
         content: formatMessage(messages.removeRows, {
           0: noOfRows
         }),
         value: {
           name: 'delete_row'
+        },
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+          label: formatMessage(messages.removeRows, {
+            0: noOfRows
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(this, "createDistributeColumnsItem", () => {
+      const {
+        selectionRect,
+        intl: {
+          formatMessage
+        },
+        editorView,
+        getEditorContainerWidth
+      } = this.props;
+      const {
+        isDragAndDropEnabled,
+        pluginConfig: {
+          allowDistributeColumns
         }
-      });
-      if (allowMergeCells) {
-        items.push({
-          content: formatMessage(messages.mergeCells),
-          value: {
-            name: 'merge'
-          },
-          isDisabled: !canMergeCells(state.tr)
-        });
-        items.push({
-          content: formatMessage(messages.splitCell),
-          value: {
-            name: 'split'
-          },
-          isDisabled: !splitCell(state)
-        });
-      }
-      if (allowDistributeColumns) {
+      } = getPluginState(editorView.state);
+      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
         var _newResizeState$chang;
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), this.props.getEditorContainerWidth);
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
         const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
-        items.push({
+        return {
           content: formatMessage(messages.distributeColumns),
           value: {
             name: 'distribute_columns'
           },
           isDisabled: !wouldChange
-        });
+        };
       }
-      if (allowColumnSorting) {
-        const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+      return null;
+    });
+    _defineProperty(this, "createSortColumnItems", () => {
+      const {
+        intl: {
+          formatMessage
+        },
+        editorView,
+        allowColumnSorting
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      if (allowColumnSorting && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+        const hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
         const warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
           isDisabled: true
         } : {};
-        items.push({
+        return [{
           content: formatMessage(messages.sortColumnASC),
           value: {
             name: 'sort_column_asc'
           },
           ...warning
-        });
-        items.push({
+        }, {
           content: formatMessage(messages.sortColumnDESC),
           value: {
             name: 'sort_column_desc'
           },
           ...warning
-        });
+        }];
       }
-      items.push({
-        content: formatMessage(messages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
-        value: {
-          name: 'clear'
-        },
-        elemAfter: jsx("div", {
-          css: shortcutStyle
-        }, tooltip(backspace))
-      });
-      return items.length ? [{
+      return null;
+    });
+    _defineProperty(this, "createOriginalContextMenuItems", () => {
+      let items = [];
+      const backgroundColorItem = this.createBackgroundColorItem();
+      backgroundColorItem && items.push(backgroundColorItem);
+      items.push(this.createInsertColumnItem());
+      items.push(this.createInsertRowItem());
+      items.push(this.createDeleteColumnItem());
+      items.push(this.createDeleteRowItem());
+      items.push(...this.createMergeSplitCellItems());
+      const distributeColumnsItem = this.createDistributeColumnsItem();
+      distributeColumnsItem && items.push(distributeColumnsItem);
+      const sortColumnItems = this.createSortColumnItems();
+      sortColumnItems && items.push(...sortColumnItems);
+      items.push(this.createClearCellsItem());
+      return [{
         items
-      }] : null;
+      }];
+    });
+    _defineProperty(this, "createNewContextMenuItems", () => {
+      const backgroundColorItem = this.createBackgroundColorItem();
+      const mergeSplitCellItems = this.createMergeSplitCellItems();
+      const insertColumnItem = this.createInsertColumnItem();
+      const insertRowItem = this.createInsertRowItem();
+      const clearCellsItem = this.createClearCellsItem();
+      const deleteColumnItem = this.createDeleteColumnItem();
+      const deleteRowItem = this.createDeleteRowItem();
+
+      // Group items so when table.menu.group-items FF is enabled, a divider shows under split cell, above add column
+      let items = [{
+        items: []
+      }, {
+        items: []
+      }];
+      backgroundColorItem && items[0].items.push(backgroundColorItem);
+      items[0].items.push(...mergeSplitCellItems);
+      items[1].items.push(insertColumnItem);
+      items[1].items.push(insertRowItem);
+      items[1].items.push(clearCellsItem);
+      items[1].items.push(deleteColumnItem);
+      items[1].items.push(deleteRowItem);
+      return items;
     });
     _defineProperty(this, "onMenuItemActivated", ({
       item
@@ -369,12 +542,13 @@ export class ContextualMenu extends Component {
       isOpen,
       mountPoint,
       offset,
-      boundariesElement
+      boundariesElement,
+      editorView
     } = this.props;
-    const items = this.createItems();
-    if (!items) {
-      return null;
-    }
+    const {
+      isDragAndDropEnabled
+    } = getPluginState(editorView.state);
+    const items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
     return jsx("div", {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
@@ -396,7 +570,10 @@ export class ContextualMenu extends Component {
       fitHeight: 188,
       fitWidth: contextualMenuDropdownWidth,
       boundariesElement: boundariesElement,
-      offset: offset
+      offset: offset,
+      section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {
+        hasSeparator: true
+      } : undefined
     }));
   }
 }

package/dist/es2019/ui/FloatingContextualMenu/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../../types';
 import { contextualMenuDropdownWidth } from '../consts';
 export const cellColourPreviewStyles = selectedColor => css`
@@ -14,7 +13,7 @@ export const cellColourPreviewStyles = selectedColor => css`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export const tablePopupStyles = css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
-    border-radius: ${borderRadius()}px;
+    border-radius: ${"var(--ds-border-radius, 3px)"};
     background: ${"var(--ds-surface-overlay, white)"};
     box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
     display: block;
@@ -35,7 +34,7 @@ export const tablePopupStyles = css`
       content: '';
       display: block;
       border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${borderRadius()}px;
+      border-radius: ${"var(--ds-border-radius, 3px)"};
       width: 20px;
       height: 20px;
     }
@@ -47,4 +46,24 @@ export const tablePopupStyles = css`
       color: ${`var(--ds-icon, ${N90})`};
     }
   }
+
+  .${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
+    display: flex;
+
+    &::before {
+      content: '';
+      display: block;
+      border: 1px solid ${tableBackgroundBorderColor};
+      border-radius: ${"var(--ds-border-radius, 3px)"};
+      width: 14px;
+      height: 14px;
+    }
+
+    &::after {
+      content: '›';
+      margin-left: ${"var(--ds-space-050, 4px)"};
+      line-height: 14px;
+      color: ${`var(--ds-icon, ${N90})`};
+    }
+  }
 `;

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

@@ -94,7 +94,7 @@ export default class NumberColumn extends Component {
       className: ClassName.NUMBERED_COLUMN,
       style: {
         marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-        borderLeft: isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor()}` : undefined
+        borderLeft: isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined
       },
       contentEditable: false
     }, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {