npm - @atlaskit/editor-plugin-table - Versions diffs - 5.3.33 → 5.3.35 - Mend

@atlaskit/editor-plugin-table 5.3.33 → 5.3.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js CHANGED Viewed

@@ -1,6 +1,7 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
@@ -30,6 +31,7 @@ const getInsertLineWidth = (tableRef, isDragAndDropEnabled) => {
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   const LINE_OFFSET = 4;
+  const DRAG_LINE_OFFSET = 6;
   const {
     parentElement,
     offsetWidth
@@ -40,7 +42,8 @@ const getInsertLineWidth = (tableRef, isDragAndDropEnabled) => {
   } = parentElement;
   const diff = offsetWidth - parentOffsetWidth;
   const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
-  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + LINE_OFFSET;
+  const lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
+  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
 };
 const tooltipMessageByType = type => {
   return type === 'row' ? messages.insertRow : messages.insertColumn;
@@ -54,43 +57,47 @@ export const InsertButtonForDragAndDrop = ({
   },
   hasStickyHeaders
 }) => {
+  const isRow = type === 'row';
   const content = /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(type)),
-      keymap: type === 'row' ? addRowAfter : addColumnAfter
+      description: formatMessage(isRow ? messages.insertRowDrag : messages.insertColumnDrag),
+      keymap: isRow ? addRowAfter : addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER
+    className: classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, {
+      [ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow,
+      [ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN]: !isRow
+    })
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: ClassName.DRAG_CONTROLS_INSERT_BUTTON,
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React.createElement("svg", {
-    width: "10",
-    height: "10",
-    viewBox: "0 0 10 10",
+    className: ClassName.CONTROLS_BUTTON_ICON,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M5.41667 4.58333V2.91667C5.41667 2.80616 5.37277 2.70018 5.29463 2.62204C5.21649 2.5439 5.11051 2.5 5 2.5C4.88949 2.5 4.78351 2.5439 4.70537 2.62204C4.62723 2.70018 4.58333 2.80616 4.58333 2.91667V4.58333H2.91667C2.80616 4.58333 2.70018 4.62723 2.62204 4.70537C2.5439 4.78351 2.5 4.88949 2.5 5C2.5 5.11051 2.5439 5.21649 2.62204 5.29463C2.70018 5.37277 2.80616 5.41667 2.91667 5.41667H4.58333V7.08333C4.58333 7.19384 4.62723 7.29982 4.70537 7.37796C4.78351 7.4561 4.88949 7.5 5 7.5C5.11051 7.5 5.21649 7.4561 5.29463 7.37796C5.37277 7.29982 5.41667 7.19384 5.41667 7.08333V5.41667H7.08333C7.19384 5.41667 7.29982 5.37277 7.37796 5.29463C7.4561 5.21649 7.5 5.11051 7.5 5C7.5 4.88949 7.4561 4.78351 7.37796 4.70537C7.29982 4.62723 7.19384 4.58333 7.08333 4.58333H5.41667Z",
+    d: "M8.66667 7.33333V4.66667C8.66667 4.48986 8.59643 4.32029 8.47141 4.19526C8.34638 4.07024 8.17682 4 8 4C7.82318 4 7.65362 4.07024 7.52859 4.19526C7.40357 4.32029 7.33333 4.48986 7.33333 4.66667V7.33333H4.66667C4.48986 7.33333 4.32029 7.40357 4.19526 7.52859C4.07024 7.65362 4 7.82318 4 8C4 8.17682 4.07024 8.34638 4.19526 8.47141C4.32029 8.59643 4.48986 8.66667 4.66667 8.66667H7.33333V11.3333C7.33333 11.5101 7.40357 11.6797 7.52859 11.8047C7.65362 11.9298 7.82318 12 8 12C8.17682 12 8.34638 11.9298 8.47141 11.8047C8.59643 11.6797 8.66667 11.5101 8.66667 11.3333V8.66667H11.3333C11.5101 8.66667 11.6797 8.59643 11.8047 8.47141C11.9298 8.34638 12 8.17682 12 8C12 7.82318 11.9298 7.65362 11.8047 7.52859C11.6797 7.40357 11.5101 7.33333 11.3333 7.33333H8.66667Z",
     fill: "currentColor"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
     style: type === 'row' ? {
       width: getInsertLineWidth(tableRef, true),
-      left: '14px'
+      left: "var(--ds-space-150, 12px)"
     } : {
-      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
+      top: '-3px'
     }
   })));
-  const floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  const floatingButtonClassName = isRow ? ClassName.CONTROLS_FLOATING_BUTTON_ROW : ClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
   return /*#__PURE__*/React.createElement("div", {
     className: floatingButtonClassName
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
+    className: `${ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
   }, content));
 };
 export const DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);

package/dist/es2019/plugins/table/ui/common-styles.js CHANGED Viewed

@@ -656,11 +656,6 @@ export const tableStyles = props => {
       }
     }
-    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW}
-      .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
-      bottom: -1px;
-    }
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
       padding: 0;

package/dist/es2019/plugins/table/ui/consts.js CHANGED Viewed

@@ -108,4 +108,5 @@ export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export const dragMenuDropdownWidth = 240;
+export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;

package/dist/es2019/plugins/table/ui/ui-styles.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellDisabledColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellDisabledColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor(props)};
@@ -133,8 +133,16 @@ export const dragInsertButtonWrapper = props => css`
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
     position: absolute;
     z-index: ${akEditorUnitZIndex + 10};
-    bottom: -5px;
-    left: 3px;
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN} {
+    bottom: -3px;
+    left: 2px;
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW} {
+    left: -3px;
+    bottom: -2px;
   }
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
@@ -143,6 +151,8 @@ export const dragInsertButtonWrapper = props => css`
     color: ${`var(--ds-icon, ${N300})`};
     border: 1px solid ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
     border-radius: 50%;
+    height: ${dragTableInsertColumnButtonSize}px;
+    width: ${dragTableInsertColumnButtonSize}px;
   `)}
   }
@@ -752,6 +762,8 @@ export const resizeHandle = props => css`
     }
   }
 `;
+// Drag and Drop: drop target insert line
 export const insertLine = props => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {

package/dist/es2019/plugins/table/utils/drag-menu.js CHANGED Viewed

@@ -133,7 +133,9 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, tableMap,
     icon,
     onClick: (state, dispatch) => {
       if (canMove(index)) {
-        moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+        requestAnimationFrame(() => {
+          moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+        });
         return true;
       }
       return false;

package/dist/es2019/plugins/table/utils/transforms.js ADDED Viewed

@@ -0,0 +1,5 @@
+export const combineTransforms = (transforms, tr) => {
+  return transforms.reduce((prev, curr) => {
+    return curr(prev);
+  }, tr);
+};

package/dist/esm/plugins/table/event-handlers.js CHANGED Viewed

@@ -350,7 +350,7 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    if (getPluginState(view.state).isDragAndDropEnabled) {
+    if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
     return eventHandler(view, mouseEvent, elementContentRects);

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/commands.js CHANGED Viewed

@@ -1,7 +1,9 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
+import { combineTransforms } from '../../utils/transforms';
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
@@ -71,11 +73,15 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
+    var anchor = tr.selection.anchor;
+    var selectStartOfTable = function selectStartOfTable(newTr) {
+      return newTr.setSelection(TextSelection.create(newTr.doc, anchor));
+    };
     var isTableRow = sourceType === 'table-row';
-    var move = isTableRow ? moveRow : moveColumn;
-    var newTr = move(sourceIndex, targetIndex)(tr);
-    var select = isTableRow ? selectRow : selectColumn;
-    return select(targetIndex)(newTr);
+    if (isTableRow) {
+      return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], tr);
+    }
+    return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], tr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js CHANGED Viewed

@@ -20,7 +20,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
         isDragMenuOpen: false,
-        dragMenuIndex: 0
+        dragMenuIndex: 0,
+        isDragging: false
       };
     }),
     key: pluginKey,
@@ -125,7 +126,9 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             }
             var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
-            moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            requestAnimationFrame(function () {
+              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+            });
           }
         })
       };

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/reducer.js CHANGED Viewed

@@ -9,13 +9,15 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
-        dropTargetIndex: action.data.index
+        dropTargetIndex: action.data.index,
+        isDragging: true
       });
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragging: false
       });
     case DragAndDropActionType.TOGGLE_DRAG_MENU:
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/esm/plugins/table/types.js CHANGED Viewed

@@ -67,6 +67,8 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   LAYOUT_BUTTON: "".concat(tablePrefixSelector, "-layout-button"),
   DRAG_CONTROLS_INSERT_BUTTON: "".concat(tablePrefixSelector, "-controls__drag-insert-button"),
   DRAG_CONTROLS_INSERT_BUTTON_INNER: "".concat(tablePrefixSelector, "-controls__drag-insert-button-inner"),
+  DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: "".concat(tablePrefixSelector, "-controls__drag-insert-button-inner-column"),
+  DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: "".concat(tablePrefixSelector, "-controls__drag-insert-button-inner-row"),
   DRAG_CONTROLS_INSERT_BUTTON_WRAP: "".concat(tablePrefixSelector, "-controls__drag-insert-button-wrap"),
   CONTROLS_INSERT_MARKER: "".concat(tablePrefixSelector, "-controls__insert-marker"),
   CONTROLS_INSERT_COLUMN: "".concat(tablePrefixSelector, "-controls__insert-column"),

package/dist/esm/plugins/table/ui/FloatingInsertButton/InsertButton.js CHANGED Viewed

@@ -1,6 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
@@ -30,6 +32,7 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnab
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   var LINE_OFFSET = 4;
+  var DRAG_LINE_OFFSET = 6;
   var parentElement = tableRef.parentElement,
     offsetWidth = tableRef.offsetWidth;
   var parentOffsetWidth = parentElement.offsetWidth;
@@ -37,54 +40,57 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnab
     scrollLeft = _ref.scrollLeft;
   var diff = offsetWidth - parentOffsetWidth;
   var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
-  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + LINE_OFFSET;
+  var lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
+  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
 };
 var tooltipMessageByType = function tooltipMessageByType(type) {
   return type === 'row' ? messages.insertRow : messages.insertColumn;
 };
 export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref2) {
+  var _classnames;
   var onMouseDown = _ref2.onMouseDown,
     tableRef = _ref2.tableRef,
     type = _ref2.type,
     formatMessage = _ref2.intl.formatMessage,
     hasStickyHeaders = _ref2.hasStickyHeaders;
+  var isRow = type === 'row';
   var content = /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(type)),
-      keymap: type === 'row' ? addRowAfter : addColumnAfter
+      description: formatMessage(isRow ? messages.insertRowDrag : messages.insertColumnDrag),
+      keymap: isRow ? addRowAfter : addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER
+    className: classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, _defineProperty(_classnames, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow), _defineProperty(_classnames, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), _classnames))
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: ClassName.DRAG_CONTROLS_INSERT_BUTTON,
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React.createElement("svg", {
-    width: "10",
-    height: "10",
-    viewBox: "0 0 10 10",
+    className: ClassName.CONTROLS_BUTTON_ICON,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M5.41667 4.58333V2.91667C5.41667 2.80616 5.37277 2.70018 5.29463 2.62204C5.21649 2.5439 5.11051 2.5 5 2.5C4.88949 2.5 4.78351 2.5439 4.70537 2.62204C4.62723 2.70018 4.58333 2.80616 4.58333 2.91667V4.58333H2.91667C2.80616 4.58333 2.70018 4.62723 2.62204 4.70537C2.5439 4.78351 2.5 4.88949 2.5 5C2.5 5.11051 2.5439 5.21649 2.62204 5.29463C2.70018 5.37277 2.80616 5.41667 2.91667 5.41667H4.58333V7.08333C4.58333 7.19384 4.62723 7.29982 4.70537 7.37796C4.78351 7.4561 4.88949 7.5 5 7.5C5.11051 7.5 5.21649 7.4561 5.29463 7.37796C5.37277 7.29982 5.41667 7.19384 5.41667 7.08333V5.41667H7.08333C7.19384 5.41667 7.29982 5.37277 7.37796 5.29463C7.4561 5.21649 7.5 5.11051 7.5 5C7.5 4.88949 7.4561 4.78351 7.37796 4.70537C7.29982 4.62723 7.19384 4.58333 7.08333 4.58333H5.41667Z",
+    d: "M8.66667 7.33333V4.66667C8.66667 4.48986 8.59643 4.32029 8.47141 4.19526C8.34638 4.07024 8.17682 4 8 4C7.82318 4 7.65362 4.07024 7.52859 4.19526C7.40357 4.32029 7.33333 4.48986 7.33333 4.66667V7.33333H4.66667C4.48986 7.33333 4.32029 7.40357 4.19526 7.52859C4.07024 7.65362 4 7.82318 4 8C4 8.17682 4.07024 8.34638 4.19526 8.47141C4.32029 8.59643 4.48986 8.66667 4.66667 8.66667H7.33333V11.3333C7.33333 11.5101 7.40357 11.6797 7.52859 11.8047C7.65362 11.9298 7.82318 12 8 12C8.17682 12 8.34638 11.9298 8.47141 11.8047C8.59643 11.6797 8.66667 11.5101 8.66667 11.3333V8.66667H11.3333C11.5101 8.66667 11.6797 8.59643 11.8047 8.47141C11.9298 8.34638 12 8.17682 12 8C12 7.82318 11.9298 7.65362 11.8047 7.52859C11.6797 7.40357 11.5101 7.33333 11.3333 7.33333H8.66667Z",
     fill: "currentColor"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
     style: type === 'row' ? {
       width: getInsertLineWidth(tableRef, true),
-      left: '14px'
+      left: "var(--ds-space-150, 12px)"
     } : {
-      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
+      top: '-3px'
     }
   })));
-  var floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  var floatingButtonClassName = isRow ? ClassName.CONTROLS_FLOATING_BUTTON_ROW : ClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
   return /*#__PURE__*/React.createElement("div", {
     className: floatingButtonClassName
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(ClassName.CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
+    className: "".concat(ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
   }, content));
 };
 export var DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);

package/dist/esm/plugins/table/ui/common-styles.js CHANGED Viewed

@@ -61,7 +61,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export var tableStyles = function tableStyles(props) {
   var _props$featureFlags;
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    ", "\n\n    ", "\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    ", "\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n\n        // https://product-fabric.atlassian.net/browse/ED-16386\n        // Fixes issue where the extra padding that is added here throws off the position\n        // of the rows control dot\n        &::after {\n          right: 6px !important;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n      .", ", .", " {\n        width: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level unless wrapped in fragment mark */\n    ", "\n\n    ", ";\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    .", " {\n      display: grid;\n      align-items: center;\n      position: absolute;\n      left: -", "px;\n      z-index: ", ";\n\n      .", " {\n        align-self: end;\n        position: absolute;\n        height: 100%;\n        width: 24px;\n      }\n\n      .", " {\n        position: absolute;\n        bottom: -3px;\n        left: 6px;\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n      }\n    }\n\n    .", " {\n      .", " {\n        height: 24px;\n        position: absolute;\n        top: ", ";\n        z-index: ", ";\n      }\n\n      .", " {\n        position: absolute;\n        height: 24px;\n        width: 100%;\n      }\n\n      .", " {\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n        position: absolute;\n        right: -2px;\n      }\n    }\n\n    .", "\n      .", " {\n      bottom: -1px;\n    }\n\n    .", " {\n      cursor: grab;\n      padding: 0;\n\n      border-radius: 6px;\n      width: max-content;\n      height: max-content;\n      border: 2px solid ", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      outline: none !important;\n\n      &:not(.", ") {\n        & > svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n\n        &:hover {\n          svg {\n            rect {\n              fill: ", ";\n            }\n            g {\n              fill: ", ";\n            }\n          }\n        }\n\n        &.selected {\n          svg {\n            rect {\n              fill: ", ";\n            }\n            g {\n              fill: ", ";\n            }\n          }\n        }\n\n        &.danger {\n          svg {\n            rect {\n              fill: ", ";\n            }\n            g {\n              fill: ", ";\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    // add a background above the first numbered column cell when sticky header is engaged\n    // which hides the table when scrolling\n    .", ":first-of-type::after {\n      content: '';\n      display: block;\n      height: 33px;\n      width: 100%;\n      background-color: ", ";\n      position: absolute;\n\n      // the extra pixel is accounting for borders\n      top: -34px;\n      left: -1px;\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: ", "px;\n\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", ":not(.", ") {\n        cursor: pointer;\n      }\n      .", ":not(.", "):hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n      // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n      margin-right: -1px;\n      // Allows better positioning for the shadow sentinels - ED-16668\n      position: relative;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      /* ED-19064: To fix when enable header column in the table,\n       and selection the header column, the right border is not tableBorderSelectedColor\n       when deleting the header column, the right border is not tableToolbarDeleteColor */\n      td.", ",\n        td.", ",\n        th.", ".", ",\n        th.", ".", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    ", "\n    .", ".", " {\n      z-index: ", ";\n    }\n\n    .", " {\n      position: absolute;\n      top: ", "px;\n    }\n\n    ", "\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  /*\n  ED-15882: When custom start numbers is enabled for lists, we have\n  styles that handle this generally (in editor-common) so we can\n  throw away the older table-specific styles here.\n  */\n  ", "\n\n  ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), disabledCell(props), hoveredWarningCell, getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props), resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), dragInsertButtonWrapper(props), dragCornerControlButton(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), rowControlsWrapperDotStyle(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, dropTargetExtendedWidth + 4, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", akEditorUnitZIndex * 13, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.CONTROLS_FLOATING_BUTTON_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, tableRowControlStyles(), ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    ", "\n\n    ", "\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    ", "\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n\n        // https://product-fabric.atlassian.net/browse/ED-16386\n        // Fixes issue where the extra padding that is added here throws off the position\n        // of the rows control dot\n        &::after {\n          right: 6px !important;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n      .", ", .", " {\n        width: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level unless wrapped in fragment mark */\n    ", "\n\n    ", ";\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    .", " {\n      display: grid;\n      align-items: center;\n      position: absolute;\n      left: -", "px;\n      z-index: ", ";\n\n      .", " {\n        align-self: end;\n        position: absolute;\n        height: 100%;\n        width: 24px;\n      }\n\n      .", " {\n        position: absolute;\n        bottom: -3px;\n        left: 6px;\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n      }\n    }\n\n    .", " {\n      .", " {\n        height: 24px;\n        position: absolute;\n        top: ", ";\n        z-index: ", ";\n      }\n\n      .", " {\n        position: absolute;\n        height: 24px;\n        width: 100%;\n      }\n\n      .", " {\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n        position: absolute;\n        right: -2px;\n      }\n    }\n\n    .", " {\n      cursor: grab;\n      padding: 0;\n\n      border-radius: 6px;\n      width: max-content;\n      height: max-content;\n      border: 2px solid ", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      outline: none !important;\n\n      &:not(.", ") {\n        & > svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n\n        &:hover {\n          svg {\n            rect {\n              fill: ", ";\n            }\n            g {\n              fill: ", ";\n            }\n          }\n        }\n\n        &.selected {\n          svg {\n            rect {\n              fill: ", ";\n            }\n            g {\n              fill: ", ";\n            }\n          }\n        }\n\n        &.danger {\n          svg {\n            rect {\n              fill: ", ";\n            }\n            g {\n              fill: ", ";\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    // add a background above the first numbered column cell when sticky header is engaged\n    // which hides the table when scrolling\n    .", ":first-of-type::after {\n      content: '';\n      display: block;\n      height: 33px;\n      width: 100%;\n      background-color: ", ";\n      position: absolute;\n\n      // the extra pixel is accounting for borders\n      top: -34px;\n      left: -1px;\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: ", "px;\n\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", ":not(.", ") {\n        cursor: pointer;\n      }\n      .", ":not(.", "):hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n      // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n      margin-right: -1px;\n      // Allows better positioning for the shadow sentinels - ED-16668\n      position: relative;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      /* ED-19064: To fix when enable header column in the table,\n       and selection the header column, the right border is not tableBorderSelectedColor\n       when deleting the header column, the right border is not tableToolbarDeleteColor */\n      td.", ",\n        td.", ",\n        th.", ".", ",\n        th.", ".", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    ", "\n    .", ".", " {\n      z-index: ", ";\n    }\n\n    .", " {\n      position: absolute;\n      top: ", "px;\n    }\n\n    ", "\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  /*\n  ED-15882: When custom start numbers is enabled for lists, we have\n  styles that handle this generally (in editor-common) so we can\n  throw away the older table-specific styles here.\n  */\n  ", "\n\n  ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), disabledCell(props), hoveredWarningCell, getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props), resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), dragInsertButtonWrapper(props), dragCornerControlButton(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), rowControlsWrapperDotStyle(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, dropTargetExtendedWidth + 4, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", akEditorUnitZIndex * 13, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, tableRowControlStyles(), ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
 };
 export var tableFullPageEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n    margin-right: -1px;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
 export var tableCommentEditorStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

package/dist/esm/plugins/table/ui/consts.js CHANGED Viewed

@@ -108,4 +108,5 @@ export var TABLE_HIGHLIGHT_GAP = 10;
 export var TABLE_HIGHLIGHT_TOLERANCE = 2;
 export var STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export var dragMenuDropdownWidth = 240;
+export var dragTableInsertColumnButtonSize = 16;
 export var dropTargetExtendedWidth = 150;

package/dist/esm/plugins/table/ui/ui-styles.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellDisabledColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellDisabledColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 var InsertLine = function InsertLine(props, cssString) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor(props), akEditorUnitZIndex, cssString);
 };
@@ -36,7 +36,7 @@ var InsertButtonHover = function InsertButtonHover() {
   return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
 };
 export var dragInsertButtonWrapper = function dragInsertButtonWrapper(props) {
-  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n    bottom: -5px;\n    left: 3px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", ":hover {\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n  ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n  }\n\n  .", " {\n    bottom: -3px;\n    left: 2px;\n  }\n\n  .", " {\n    left: -3px;\n    bottom: -2px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", ":hover {\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n    height: ", dragTableInsertColumnButtonSize, "px;\n    width: ").concat(dragTableInsertColumnButtonSize, "px;\n  ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
 };
 export var dragCornerControlButton = function dragCornerControlButton(props) {
   return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  .", " {\n    width: 12px;\n    height: 12px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    background-color: ", ";\n    border-radius: 50%;\n    border: none;\n    padding: 0;\n    outline: none;\n    z-index: ", ";\n\n    &.active .", " {\n      background-color: ", ";\n      border-color: ", ";\n    }\n\n    &:hover {\n      cursor: pointer;\n\n      .", " {\n        border-color: ", ";\n      }\n    }\n  }\n\n  .", " {\n    border: 1px solid\n      ", ";\n    border-radius: 50%;\n    width: 6px;\n    height: 6px;\n  }\n"])), ClassName.DRAG_CORNER_BUTTON, "var(--ds-space-negative-075, -6px)", "var(--ds-space-075, 6px)", "var(--ds-surface, #FFF)", akEditorUnitZIndex * 99, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", "var(--ds-border-selected, #0C66E4)", ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-background-accent-gray-subtler, #DCDFE4)");
@@ -110,6 +110,8 @@ var resizeHandleOverrides = function resizeHandleOverrides(props) {
 export var resizeHandle = function resizeHandle(props) {
   return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
 };
+// Drag and Drop: drop target insert line
 export var insertLine = function insertLine(props) {
   return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2);
 };

package/dist/esm/plugins/table/utils/drag-menu.js CHANGED Viewed

@@ -141,7 +141,9 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
-          moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+          requestAnimationFrame(function () {
+            moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+          });
           return true;
         }
         return false;

package/dist/esm/plugins/table/utils/transforms.js ADDED Viewed

@@ -0,0 +1,5 @@
+export var combineTransforms = function combineTransforms(transforms, tr) {
+  return transforms.reduce(function (prev, curr) {
+    return curr(prev);
+  }, tr);
+};

package/dist/types/plugins/table/pm-plugins/drag-and-drop/types.d.ts CHANGED Viewed

@@ -8,4 +8,5 @@ export interface DragAndDropPluginState {
     isDragMenuOpen: boolean;
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
+    isDragging: boolean;
 }

package/dist/types/plugins/table/types.d.ts CHANGED Viewed

@@ -268,6 +268,8 @@ export declare const TableCssClassName: {
     LAYOUT_BUTTON: string;
     DRAG_CONTROLS_INSERT_BUTTON: string;
     DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: string;
     DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;

package/dist/types/plugins/table/ui/consts.d.ts CHANGED Viewed

@@ -53,4 +53,5 @@ export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export declare const dragMenuDropdownWidth = 240;
+export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

package/dist/types/plugins/table/utils/transforms.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
2	+ export declare const combineTransforms: (transforms: ((tr: Transaction) => Transaction)[], tr: Transaction) => Transaction;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/types.d.ts CHANGED Viewed

@@ -8,4 +8,5 @@ export interface DragAndDropPluginState {
     isDragMenuOpen: boolean;
     dragMenuDirection?: TableDirection;
     dragMenuIndex: number;
+    isDragging: boolean;
 }

package/dist/types-ts4.5/plugins/table/types.d.ts CHANGED Viewed

@@ -268,6 +268,8 @@ export declare const TableCssClassName: {
     LAYOUT_BUTTON: string;
     DRAG_CONTROLS_INSERT_BUTTON: string;
     DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: string;
     DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;