@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -126,11 +126,9 @@ export class ContextualMenu extends Component<
     const { isOpen, mountPoint, offset, boundariesElement, editorView } =
       this.props;
     const { isDragAndDropEnabled } = getPluginState(editorView.state);
-    const items =
-      isDragAndDropEnabled &&
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-        ? this.createNewContextMenuItems()
-        : this.createOriginalContextMenuItems();
+    const items = isDragAndDropEnabled
+      ? this.createNewContextMenuItems()
+      : this.createOriginalContextMenuItems();
 
     return (
       <div
@@ -161,9 +159,6 @@ export class ContextualMenu extends Component<
           offset={offset}
           section={
             isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) &&
             getBooleanFF('platform.editor.menu.group-items')
               ? { hasSeparator: true }
               : undefined
@@ -210,33 +205,24 @@ export class ContextualMenu extends Component<
         node?.attrs?.background || '#ffffff',
       );
       return {
-        content:
-          isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-            ? formatMessage(messages.backgroundColor)
-            : formatMessage(messages.cellBackground),
+        content: isDragAndDropEnabled
+          ? formatMessage(messages.backgroundColor)
+          : formatMessage(messages.cellBackground),
         value: { name: 'background' },
-        elemBefore:
-          isDragAndDropEnabled &&
-          getBooleanFF(
-            'platform.editor.table.new-cell-context-menu-styling',
-          ) ? (
-            <span css={elementBeforeIconStyles}>
-              <EditorBackgroundColorIcon
-                label={formatMessage(messages.backgroundColor)}
-                size="medium"
-              />
-            </span>
-          ) : undefined,
+        elemBefore: isDragAndDropEnabled ? (
+          <span css={elementBeforeIconStyles}>
+            <EditorBackgroundColorIcon
+              label={formatMessage(messages.backgroundColor)}
+              size="medium"
+            />
+          </span>
+        ) : undefined,
         elemAfter: (
           <div className={DropdownMenuSharedCssClassName.SUBMENU}>
             <div
               css={cellColourPreviewStyles(background)}
               className={
-                isDragAndDropEnabled &&
-                getBooleanFF(
-                  'platform.editor.table.new-cell-context-menu-styling',
-                )
+                isDragAndDropEnabled
                   ? ClassName.CONTEXTUAL_MENU_ICON_SMALL
                   : ClassName.CONTEXTUAL_MENU_ICON
               }
@@ -280,29 +266,21 @@ export class ContextualMenu extends Component<
           content: formatMessage(messages.mergeCells),
           value: { name: 'merge' },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore:
-            isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) ? (
-              <span css={elementBeforeIconStyles}>
-                <MergeCellsIcon />
-              </span>
-            ) : undefined,
+          elemBefore: isDragAndDropEnabled ? (
+            <span css={elementBeforeIconStyles}>
+              <MergeCellsIcon />
+            </span>
+          ) : undefined,
         },
         {
           content: formatMessage(messages.splitCell),
           value: { name: 'split' },
           isDisabled: !splitCell(state),
-          elemBefore:
-            isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) ? (
-              <span css={elementBeforeIconStyles}>
-                <SplitCellIcon />
-              </span>
-            ) : undefined,
+          elemBefore: isDragAndDropEnabled ? (
+            <span css={elementBeforeIconStyles}>
+              <SplitCellIcon />
+            </span>
+          ) : undefined,
         },
       ] as MenuItem[];
     }
@@ -318,20 +296,15 @@ export class ContextualMenu extends Component<
 
     return {
       content: formatMessage(
-        isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addColumnRight
-          : messages.insertColumn,
+        isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
       ),
       value: { name: 'insert_column' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <AddColRightIcon />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <AddColRightIcon />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -344,20 +317,15 @@ export class ContextualMenu extends Component<
 
     return {
       content: formatMessage(
-        isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addRowBelow
-          : messages.insertRow,
+        isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow,
       ),
       value: { name: 'insert_row' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <AddRowBelowIcon />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <AddRowBelowIcon />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -378,17 +346,15 @@ export class ContextualMenu extends Component<
       }),
       value: { name: 'clear' },
       elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <CrossCircleIcon
-              label={formatMessage(messages.clearCells, {
-                0: Math.max(noOfColumns, noOfRows),
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <CrossCircleIcon
+            label={formatMessage(messages.clearCells, {
+              0: Math.max(noOfColumns, noOfRows),
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -408,17 +374,15 @@ export class ContextualMenu extends Component<
         0: noOfColumns,
       }),
       value: { name: 'delete_column' },
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <RemoveIcon
-              label={formatMessage(messages.removeColumns, {
-                0: noOfColumns,
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <RemoveIcon
+            label={formatMessage(messages.removeColumns, {
+              0: noOfColumns,
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -438,17 +402,15 @@ export class ContextualMenu extends Component<
         0: noOfRows,
       }),
       value: { name: 'delete_row' },
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <RemoveIcon
-              label={formatMessage(messages.removeRows, {
-                0: noOfRows,
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <RemoveIcon
+            label={formatMessage(messages.removeRows, {
+              0: noOfRows,
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -463,11 +425,7 @@ export class ContextualMenu extends Component<
       isDragAndDropEnabled,
       pluginConfig: { allowDistributeColumns },
     } = getPluginState(editorView.state);
-    if (
-      allowDistributeColumns &&
-      (!isDragAndDropEnabled ||
-        !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
-    ) {
+    if (allowDistributeColumns && !isDragAndDropEnabled) {
       const { isTableScalingEnabled = false } = getPluginState(
         editorView.state,
       );
@@ -498,11 +456,7 @@ export class ContextualMenu extends Component<
     } = this.props;
     const { isDragAndDropEnabled } = getPluginState(editorView.state);
 
-    if (
-      allowColumnSorting &&
-      (!isDragAndDropEnabled ||
-        !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
-    ) {
+    if (allowColumnSorting && !isDragAndDropEnabled) {
       const hasMergedCellsInTable =
         getMergedCellsPositions(editorView.state.tr).length > 0;
       const warning = hasMergedCellsInTable

package/src/ui/FloatingDeleteButton/index.tsx

@@ -347,8 +347,10 @@ class FloatingDeleteButton extends Component<Props, State> {
           <div
             style={{
               position: 'fixed',
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
               zIndex: stickyRowZIndex,
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               left:
                 rect.left +
                 (pos.left || 0) -

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -620,27 +620,18 @@ export const DragMenu = React.memo(
       return null;
     }
 
-    if (
-      allowBackgroundColor &&
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-    ) {
+    if (allowBackgroundColor) {
       menuItems[0].items.unshift(createBackgroundColorMenuItem());
     }
 
     // If first row, add toggle for Header row, default is true
     // If first column, add toggle for Header column, default is false
-    if (
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling') &&
-      index === 0
-    ) {
+    if (index === 0) {
       menuItems.push({ items: [createHeaderRowColumnMenuItem(direction)] });
     }
 
     // All rows, add toggle for numbered rows, default is false
-    if (
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling') &&
-      direction === 'row'
-    ) {
+    if (direction === 'row') {
       index === 0
         ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem())
         : menuItems.push({ items: [createRowNumbersMenuItem()] });

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -11,7 +11,6 @@ import {
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -150,39 +149,31 @@ export const DropdownMenu = ({
             // The logic below normalises the index value based on the number
             // of menu items with 2 focusable elements, and adjusts the index to ensure
             // the correct menu item is sent in onItemActivated callback
-            if (
-              getBooleanFF(
-                'platform.editor.table.new-cell-context-menu-styling',
-              )
-            ) {
-              const keys = ['row_numbers', 'header_row', 'header_column'];
-              let doubleItemCount = 0;
+            const keys = ['row_numbers', 'header_row', 'header_column'];
+            let doubleItemCount = 0;
 
-              const firstIndex = results.findIndex((value) =>
-                keys.includes(value.key!),
-              );
+            const firstIndex = results.findIndex((value) =>
+              keys.includes(value.key!),
+            );
+
+            if (firstIndex === -1 || index <= firstIndex) {
+              onItemActivated && onItemActivated({ item: results[index] });
+              return;
+            }
 
-              if (firstIndex === -1 || index <= firstIndex) {
-                onItemActivated && onItemActivated({ item: results[index] });
+            for (let i = firstIndex; i < results.length; i += 1) {
+              if (keys.includes(results[i].key!)) {
+                doubleItemCount += 1;
+              }
+              if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+                onItemActivated && onItemActivated({ item: results[i] });
                 return;
               }
 
-              for (let i = firstIndex; i < results.length; i += 1) {
-                if (keys.includes(results[i].key!)) {
-                  doubleItemCount += 1;
-                }
-                if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-                  onItemActivated && onItemActivated({ item: results[i] });
-                  return;
-                }
-
-                if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-                  onItemActivated && onItemActivated({ item: results[i] });
-                  return;
-                }
+              if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+                onItemActivated && onItemActivated({ item: results[i] });
+                return;
               }
-            } else {
-              onItemActivated && onItemActivated({ item: results[index] });
             }
           }}
         >

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -145,6 +145,7 @@ export const InsertButtonForDragAndDrop = ({
               : {
                   height:
                     getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
+                  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                   top: '-3px',
                 }
           }

package/src/ui/LayoutButton/index.tsx

@@ -125,7 +125,9 @@ class LayoutButton extends React.Component<Props & WrappedComponentProps, any> {
         aria-label={title}
         style={{
           position: 'fixed',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: pos.top + 22,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           left: tablePos.right,
         }}
       >

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -304,7 +304,9 @@ export const ColumnControls = ({
         data-testid="table-floating-column-controls"
         style={{
           gridTemplateColumns: widths,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           width: stickyTop ? containerWidth : undefined,
           overflowX: stickyTop ? 'hidden' : 'visible',
           pointerEvents: isDragging ? 'none' : undefined,

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -95,8 +95,11 @@ export const ColumnDropTarget = ({
     <div
       ref={dropTargetRef}
       style={{
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         width: width && `${width - 1}px`,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         height: height && `${height}px`,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         marginTop: marginTop && `${marginTop}px`,
         pointerEvents: 'auto',
         flexShrink: 0,

package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -41,6 +41,7 @@ class CornerControlComponent extends Component<
           sticky: this.props.stickyTop !== undefined,
         })}
         style={{
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top:
             this.props.stickyTop !== undefined
               ? `${this.props.stickyTop}px`

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -41,6 +41,7 @@ export default class NumberColumn extends Component<Props, any> {
       <div
         className={ClassName.NUMBERED_COLUMN}
         style={{
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop:
             hasHeaderRow && this.props.stickyTop !== undefined
               ? rowHeights[0]

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -82,11 +82,15 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
                   )} ${thisRowSticky ? 'sticky' : ''}`}
                   key={startIndex}
                   style={{
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     height: height,
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     marginTop: `${marginTop}px`,
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     top: thisRowSticky
                       ? `${this.props.stickyTop! + 3}px`
                       : undefined,
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     paddingTop: thisRowSticky
                       ? `${tableControlsSpacing}px`
                       : undefined,

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -215,6 +215,7 @@ const DragControlsComponent = ({
           width: '9px',
           height: '100%',
           position: 'relative',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           right: '-0.5px',
         }}
         data-testid={`table-floating-row-${
@@ -297,7 +298,10 @@ const DragControlsComponent = ({
         gridTemplateColumns: isDragging
           ? `${dropTargetExtendedWidth}px 14px ${tableWidth}px`
           : '0px 14px 0px',
-        left: isDragging ? `-${dropTargetExtendedWidth + 2}px` : `-2px`,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+        left: isDragging
+          ? `-${dropTargetExtendedWidth + 2}px`
+          : token('space.negative.025', '-2px'),
       }}
       onMouseMove={handleMouseMove}
       contentEditable={false}

package/src/ui/common-styles.ts

@@ -211,6 +211,7 @@ const tableBorderStyles = () => {
   }
 };
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const tableStickyHeaderColumnControlsDecorationsStyle = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
@@ -1116,6 +1117,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   ${shadowSentinelStyles}
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;