@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

package/dist/es2019/ui/DragPreview/index.js

@@ -25,7 +25,9 @@ export const DragPreview = ({
   }, /*#__PURE__*/React.createElement(DragInMotionIcon, {
     style: {
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: `${marginLeft}px`,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: `${marginTop}px`,
       transform: transform
     }

package/dist/es2019/ui/FloatingContextualButton/FixedButton.js

@@ -94,25 +94,29 @@ export const FixedButton = ({
     ref: observerTargetRef,
     style: {
       position: 'absolute',
-      top: '0px',
-      left: '0px',
-      width: `${BUTTON_WIDTH}px`,
-      height: `${BUTTON_WIDTH}px`
+      top: "var(--ds-space-0, 0px)",
+      left: "var(--ds-space-0, 0px)",
+      width: "var(--ds-space-250, 20px)",
+      // BUTTON_WIDTH
+      height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: fixedButtonRef,
     style: {
       position: 'fixed',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: stickyHeader.top + stickyHeader.padding + offset * 2,
       zIndex: akEditorTableCellOnStickyHeaderZIndex,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: calcLeftPos({
         buttonWidth: BUTTON_WIDTH,
         cellRectLeft: targetCellRect.left,
         cellRefWidth: targetCellRef.clientWidth,
         offset
       }),
-      width: `${BUTTON_WIDTH}px`,
-      height: `${BUTTON_WIDTH}px`
+      width: "var(--ds-space-250, 20px)",
+      // BUTTON_WIDTH
+      height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
     },
     className: ClassName.CONTEXTUAL_MENU_BUTTON_FIXED
   }, children)), mountTo);

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

@@ -70,11 +70,11 @@ export class ContextualMenu extends Component {
         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');
         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') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
@@ -84,7 +84,7 @@ export class ContextualMenu extends Component {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
             css: cellColourPreviewStyles(background),
-            className: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
@@ -122,7 +122,7 @@ export class ContextualMenu extends Component {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(MergeCellsIcon, null)) : undefined
         }, {
@@ -131,7 +131,7 @@ export class ContextualMenu extends Component {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(SplitCellIcon, null)) : undefined
         }];
@@ -149,14 +149,14 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumnRight : messages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddColRightIcon, null)) : undefined
       };
@@ -172,14 +172,14 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRowBelow : messages.insertRow),
+        content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddRowBelowIcon, null)) : undefined
       };
@@ -213,7 +213,7 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
@@ -245,7 +245,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
@@ -277,7 +277,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
@@ -301,7 +301,7 @@ export class ContextualMenu extends Component {
           allowDistributeColumns
         }
       } = getPluginState(editorView.state);
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         const {
           isTableScalingEnabled = false
@@ -329,7 +329,7 @@ export class ContextualMenu extends Component {
       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 ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
@@ -568,7 +568,7 @@ export class ContextualMenu extends Component {
     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 jsx("div", {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
@@ -591,7 +591,7 @@ export class ContextualMenu extends Component {
       fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
       boundariesElement: boundariesElement,
       offset: offset,
-      section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {
+      section: isDragAndDropEnabled && getBooleanFF('platform.editor.menu.group-items') ? {
         hasSeparator: true
       } : undefined
     }));

package/dist/es2019/ui/FloatingDeleteButton/index.js

@@ -251,8 +251,10 @@ class FloatingDeleteButton extends Component {
         return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("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) - (this.state.selectionType === 'column' ? this.state.scrollLeft : 0) - (this.props.isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0)
           }
         }, button), mountTo);

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

@@ -448,20 +448,20 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   if (!menuItems) {
     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/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -5,7 +5,6 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 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';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
@@ -106,37 +105,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 firstIndex = results.findIndex(value => keys.includes(value.key));
-        if (firstIndex === -1 || index <= firstIndex) {
+      const keys = ['row_numbers', 'header_row', 'header_column'];
+      let doubleItemCount = 0;
+      const firstIndex = results.findIndex(value => keys.includes(value.key));
+      if (firstIndex === -1 || index <= firstIndex) {
+        onItemActivated && onItemActivated({
+          item: results[index]
+        });
+        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[index]
+            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]
-        });
       }
     }
   }, innerMenu())));

package/dist/es2019/ui/FloatingInsertButton/InsertButton.js

@@ -90,6 +90,7 @@ export const InsertButtonForDragAndDrop = ({
       left: "var(--ds-space-150, 12px)"
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: '-3px'
     }
   })));

package/dist/es2019/ui/LayoutButton/index.js

@@ -97,7 +97,9 @@ class LayoutButton extends React.Component {
       "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
       }
     }, button);

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -187,7 +187,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/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js

@@ -74,8 +74,11 @@ export const ColumnDropTarget = ({
   return /*#__PURE__*/React.createElement("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/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -67,6 +67,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` : undefined
       },
       contentEditable: false

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

@@ -93,6 +93,7 @@ export default class NumberColumn extends Component {
     return /*#__PURE__*/React.createElement("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] : undefined,
         borderLeft: isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined
       },

package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -58,9 +58,13 @@ class RowControlsComponent extends Component {
         className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing)} ${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
         }
       }, /*#__PURE__*/React.createElement("button", {

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -127,6 +127,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-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`
@@ -171,7 +172,8 @@ const DragControlsComponent = ({
     style: {
       gridTemplateRows: heights,
       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` : "var(--ds-space-negative-025, -2px)"
     },
     onMouseMove: handleMouseMove,
     contentEditable: false

package/dist/es2019/ui/common-styles.js

@@ -130,6 +130,8 @@ const tableBorderStyles = () => {
     return `border: 1px solid ${tableBorderDeleteColor}`;
   }
 };
+
+// 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`
@@ -1012,6 +1014,8 @@ export const tableStyles = props => 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;

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

@@ -14,14 +14,14 @@ const InsertLine = cssString => css`
     ${cssString}
   }
 `;
-const Marker = () => css`
-  background-color: ${tableBorderColor};
-  position: absolute;
-  height: ${lineMarkerSize}px;
-  width: ${lineMarkerSize}px;
-  border-radius: 50%;
-  pointer-events: none;
-`;
+const Marker = () => css({
+  backgroundColor: tableBorderColor,
+  position: 'absolute',
+  height: `${lineMarkerSize}px`,
+  width: `${lineMarkerSize}px`,
+  borderRadius: '50%',
+  pointerEvents: 'none'
+});
 export const InsertMarker = cssString => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
     ${Marker()};
@@ -49,6 +49,9 @@ const Button = cssString => css`
   }
   ${cssString}
 `;
+
+// Explicit pixel values required here to ensure classic row controls align correctly
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const HeaderButton = cssString => css`
   .${ClassName.CONTROLS_BUTTON} {
     background: ${tableHeaderCellBackgroundColor};
@@ -214,23 +217,15 @@ export const dragCornerControlButton = () => css`
     position: relative;
   }
 `;
-export const insertColumnButtonWrapper = () => css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(`
+export const insertColumnButtonWrapper = () => css(InsertButton(), InsertButtonHover(), InsertLine(`
     width: 2px;
     left: 9px;
-  `)}
-`;
-export const insertRowButtonWrapper = () => css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(`
+  `));
+export const insertRowButtonWrapper = () => css(InsertButton(), InsertButtonHover(), InsertLine(`
     height: 2px;
     top: -11px;
     left: ${tableInsertColumnButtonSize - 1}px;
-  `)}
-`;
+  `));
 export const columnControlsLineMarker = () => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
     table
@@ -324,40 +319,34 @@ const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
 };
 const columnHeaderButton = cssString => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css`
-      background: ${tableHeaderCellBackgroundColor};
-      display: block;
-      box-sizing: border-box;
-      padding: 0;
-
-      :focus {
-        outline: none;
+    return css({
+      background: tableHeaderCellBackgroundColor,
+      display: 'block',
+      boxSizing: 'border-box',
+      padding: 0,
+      ':focus': {
+        outline: 'none'
       }
-
-      ${cssString}
-    `;
+    }, cssString);
   } else {
-    return css`
-      background: ${tableHeaderCellBackgroundColor};
-      border: 1px solid ${tableBorderColor};
-      display: block;
-      box-sizing: border-box;
-      padding: 0;
-
-      :focus {
-        outline: none;
+    return css({
+      background: tableHeaderCellBackgroundColor,
+      border: `1px solid ${tableBorderColor}`,
+      display: 'block',
+      boxSizing: 'border-box',
+      padding: 0,
+      ':focus': {
+        outline: 'none'
       }
-
-      ${cssString}
-    `;
+    }, cssString);
   }
 };
-const columnHeaderButtonSelected = () => css`
-  color: ${`var(--ds-text-inverse, ${N0})`};
-  background-color: ${tableToolbarSelectedColor};
-  border-color: ${tableBorderSelectedColor};
-  z-index: ${columnControlsSelectedZIndex};
-`;
+const columnHeaderButtonSelected = () => css({
+  color: `var(--ds-text-inverse, ${N0})`,
+  backgroundColor: tableToolbarSelectedColor,
+  borderColor: tableBorderSelectedColor,
+  zIndex: columnControlsSelectedZIndex
+});
 const getFloatingDotOverrides = () => {
   return getBooleanFF('platform.editor.custom-table-width') ? css`
         tr
@@ -680,6 +669,9 @@ const getLastColumnResizerOverrides = () => {
         }
       ` : '';
 };
+
+// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const resizeHandleOverrides = isDragAndDropEnabled => {
   if (isDragAndDropEnabled) {
     return css`
@@ -786,27 +778,31 @@ export const resizeHandle = isDragAndDropEnabled => css`
 `;
 
 // Drag and Drop: drop target insert line
-const tableCellColumnInsertLineStyles = css`
-  content: ' ';
-  position: absolute;
-  height: calc(100% + ${tableCellBorderWidth * 2}px);
-  width: ${insertLineWidth}px;
-  z-index: ${columnControlsZIndex * 2};
-`;
-const tableCellRowInsertLineStyles = css`
-  content: ' ';
-  position: absolute;
-  left: ${"var(--ds-space-negative-025, -2px)"};
-  height: ${insertLineWidth}px;
-  width: calc(100% + ${tableCellBorderWidth * 2}px);
-  z-index: ${columnControlsZIndex * 2};
-`;
-const insertLineActiveColor = css`
-  background-color: ${tableBorderSelectedColor};
-`;
-const insertLineInactiveColor = css`
-  background-color: ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`};
-`;
+const tableCellColumnInsertLineStyles = css({
+  content: "' '",
+  position: 'absolute',
+  height: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+  width: `${insertLineWidth}px`,
+  zIndex: columnControlsZIndex * 2
+});
+const tableCellRowInsertLineStyles = css({
+  content: "' '",
+  position: 'absolute',
+  left: "var(--ds-space-negative-025, -2px)",
+  height: `${insertLineWidth}px`,
+  width: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+  zIndex: columnControlsZIndex * 2
+});
+const insertLineActiveColor = css({
+  backgroundColor: tableBorderSelectedColor
+});
+const insertLineInactiveColor = css({
+  backgroundColor: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`
+});
+
+// Explicit pixel values required here to ensure correct positioning of line that is show on row
+// or column drag
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const insertLine = () => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {

package/dist/es2019/utils/guidelines.js

@@ -4,4 +4,4 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
 export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);
-export const defaultGuidelinesForPreserveTable = editorContainerWidth => createFixedGuidelinesFromLengths([0, ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth)]);
+export const defaultGuidelinesForPreserveTable = editorContainerWidth => createFixedGuidelinesFromLengths([0, ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth)], undefined, true);