@atlaskit/editor-plugin-table 7.6.4 → 7.6.6

package/dist/es2019/commands/column-resize.js

@@ -1,3 +1,4 @@
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
@@ -57,7 +58,10 @@ const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHan
   }
   return false;
 };
-export const initiateKeyboardColumnResizing = (state, dispatch, view) => {
+export const initiateKeyboardColumnResizing = ({
+  ariaNotify,
+  getIntl
+}) => (state, dispatch, view) => {
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
@@ -66,12 +70,19 @@ export const initiateKeyboardColumnResizing = (state, dispatch, view) => {
   } = state;
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const cell = findCellClosestToPos(selection.$from);
+  if (ariaNotify && getIntl) {
+    ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+  }
   if (selectionRect && cell && view) {
     return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
   }
   return false;
 };
-export const activateNextResizeArea = direction => (state, dispatch, view) => {
+export const activateNextResizeArea = ({
+  direction,
+  ariaNotify,
+  getIntl
+}) => (state, dispatch, view) => {
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
@@ -102,6 +113,18 @@ export const activateNextResizeArea = direction => (state, dispatch, view) => {
   }
   const currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
   const $nextCell = nextCell($currentCell, 'horiz', direction);
+  if (ariaNotify && getIntl) {
+    let columnDirection = '';
+    if (direction === 1) {
+      columnDirection = getIntl().formatMessage(messages.columnRightResize);
+    }
+    if (direction === -1) {
+      columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+    }
+    ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+      direction: columnDirection
+    }));
+  }
   if ($nextCell) {
     // we are somewhere in between the side columns of the table
     const offset = $nextCell.pos - $nextCell.start(-1);
@@ -121,7 +144,13 @@ export const activateNextResizeArea = direction => (state, dispatch, view) => {
   }
   return false;
 };
-export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, isTableScalingEnabled = false) => (state, dispatch, view) => {
+export const changeColumnWidthByStep = ({
+  stepSize,
+  getEditorContainerWidth,
+  isTableScalingEnabled,
+  ariaNotify,
+  getIntl
+}) => (state, dispatch, view) => {
   let customTr = state.tr;
   const fakeDispatch = tr => {
     customTr = tr;
@@ -183,9 +212,26 @@ export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, isTab
   if (dispatch) {
     dispatch(customTr);
   }
+  if (ariaNotify && getIntl) {
+    ariaNotify(getIntl().formatMessage(messages.changedColumnWidth, {
+      width: Math.floor(newResizeState.cols[colIndex].width)
+    }));
+    if (newResizeState.cols.length === colIndex + 1) {
+      if (newResizeState.overflow === true) {
+        ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+      }
+      if (newResizeState.overflow === false) {
+        ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+      }
+    }
+  }
   return true;
 };
-export const stopKeyboardColumnResizing = originalTr => (state, dispatch) => {
+export const stopKeyboardColumnResizing = ({
+  ariaNotify,
+  getIntl,
+  originalTr
+}) => (state, dispatch) => {
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
@@ -207,6 +253,9 @@ export const stopKeyboardColumnResizing = originalTr => (state, dispatch) => {
   tableResizingPluginCreateCommand({
     type: 'STOP_RESIZING'
   }, () => customTr.setMeta('scrollIntoView', false))(state, fakeDispatch);
+  if (ariaNotify && getIntl) {
+    ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+  }
   if (dispatch) {
     dispatch(customTr);
     return true;

package/dist/es2019/commands/go-to-next-cell.js

@@ -10,7 +10,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
-export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch, view) => {
+export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => direction => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
@@ -19,7 +19,10 @@ export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch,
     var _getPluginState;
     const isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
     if (isColumnResizing) {
-      stopKeyboardColumnResizing()(state, dispatch, view);
+      stopKeyboardColumnResizing({
+        ariaNotify: ariaNotify,
+        getIntl: getIntl
+      })(state, dispatch, view);
       return true;
     }
   }

package/dist/es2019/commands-with-analytics.js

@@ -168,7 +168,7 @@ export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, option
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
-export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod) => withEditorAnalyticsAPI(state => {
+export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod, ariaNotify, getIntl) => withEditorAnalyticsAPI(state => {
   const {
     table,
     totalRowCount,
@@ -193,7 +193,13 @@ export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepS
       totalColumnCount
     }
   };
-})(editorAnalyticsAPI)(changeColumnWidthByStep(stepSize, getEditorContainerWidth, isTableScalingEnabled));
+})(editorAnalyticsAPI)(changeColumnWidthByStep({
+  stepSize: stepSize,
+  getEditorContainerWidth: getEditorContainerWidth,
+  isTableScalingEnabled: isTableScalingEnabled,
+  ariaNotify: ariaNotify,
+  getIntl: getIntl
+}));
 export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,

package/dist/es2019/nodeviews/ExternalDropTargets.js

@@ -41,6 +41,7 @@ export const ExternalDropTargets = ({
       width: getTableWrapperWidth(),
       overflow: 'hidden',
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
       pointerEvents: 'auto',
       zIndex: `${dropTargetsZIndex}`
@@ -50,6 +51,7 @@ export const ExternalDropTargets = ({
     style: {
       display: 'flex',
       // move drop targets based on table wrapper scroll
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: `-${getScrollOffset()}px`
     }
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map((width, index) => {

package/dist/es2019/nodeviews/TableComponent.js

@@ -7,7 +7,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
-import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -21,7 +21,6 @@ import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup
 import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
@@ -737,7 +736,7 @@ class TableComponent extends React.Component {
       style: {
         visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
         top: `${topStickyShadowPosition}px`,
-        paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`
+        paddingBottom: `${isDragAndDropEnabled && "var(--ds-space-025, 2px)"}`
       }
     }), /*#__PURE__*/React.createElement("div", {
       className: classnames(ClassName.TABLE_NODE_WRAPPER),
@@ -756,10 +755,11 @@ class TableComponent extends React.Component {
     }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
       style: {
-        height: MAX_BROWSER_SCROLLBAR_HEIGHT,
+        height: "var(--ds-space-250, 20px)",
+        // MAX_BROWSER_SCROLLBAR_HEIGHT
         display: 'none',
         // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-        width: isResizing ? '0px' : '100%'
+        width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
       }
     }, /*#__PURE__*/React.createElement("div", {
       style: {
@@ -773,14 +773,16 @@ class TableComponent extends React.Component {
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
-        right: getBooleanFF('platform.editor.custom-table-width') ? `${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px` : '-2px'
+        right: getBooleanFF('platform.editor.custom-table-width') ? `${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
+        : "var(--ds-space-100, 8px)" // tableOverflowShadowWidth
+        }` : "var(--ds-space-negative-025, -2px)"
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
       style: {
         visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
         top: `${topStickyShadowPosition}px`,
-        paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`
+        paddingBottom: `${isDragAndDropEnabled && "var(--ds-space-025, 2px)"}`
       }
     })), /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,

package/dist/es2019/nodeviews/TableResizer.js

@@ -26,7 +26,7 @@ const handles = {
 };
 const handleStyles = {
   right: {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     right: '-14px',
     marginTop: "var(--ds-space-150, 12px)"
   }
@@ -289,6 +289,7 @@ export const TableResizer = ({
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
       return;
     }
+    setLocalTableWidth(newWidth);
     handleResizeStop({
       width: width,
       x: 0,

package/dist/es2019/plugin.js

@@ -169,13 +169,15 @@ const tablesPlugin = ({
       // plugin as it is currently swallowing backspace events inside tables
       {
         name: 'tableKeymap',
-        plugin: () => {
+        plugin: ({
+          getIntl
+        }) => {
           const {
             dragAndDropEnabled,
             isTableScalingEnabled = false,
             fullWidthEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',

package/dist/es2019/pm-plugins/keymap.js

@@ -18,10 +18,12 @@ const createTableWithAnalytics = (isTableScalingEnabled, isFullWidthModeEnabled,
   },
   eventType: EVENT_TYPE.TRACK
 })(editorAnalyticsAPI)(createTable(isTableScalingEnabled, isFullWidthModeEnabled));
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isFullWidthEnabled) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl) {
+  var _pluginInjectionApi$a;
   const list = {};
-  bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
-  bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
+  const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
+  bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
+  bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
   bindKeymapWithCommand(toggleTable.common, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
@@ -50,12 +52,26 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing, list);
-    bindKeymapWithCommand(moveRight.common, activateNextResizeArea(1), list);
-    bindKeymapWithCommand(moveLeft.common, activateNextResizeArea(-1), list);
-    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT), list);
-    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT), list);
-    bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing(), list);
+    bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
+      direction: 1,
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
+      direction: -1,
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
+    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
+      ariaNotify: ariaNotifyPlugin,
+      getIntl: getIntl
+    }), list);
   }
   return keymap(list);
 }

package/dist/es2019/pm-plugins/main.js

@@ -23,6 +23,7 @@ import { defaultHoveredCell, defaultTableSelection } from './default-table-selec
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) => {
+  var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
     isTableHovered: false,
@@ -44,6 +45,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds = [];
   let editorViewRef = null;
+  const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_accessibilityUtils = pluginInjectionApi.accessibilityUtils) === null || _accessibilityUtils === void 0 ? void 0 : _accessibilityUtils.actions.ariaNotify;
   const getCurrentEditorState = () => {
     const editorView = editorViewRef;
     if (!editorView) {
@@ -103,7 +105,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
             }
             const tableNode = findTable(state.selection);
             if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-              // when cursor leaves the table we need to stop column resizing
+              // when keyboard cursor leaves the table we need to stop column resizing
               const pluginPrevState = getPluginState(prevState);
               const isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
               if (isStopKeyboardColumResizing) {
@@ -115,11 +117,17 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
                   // Add/delete row
                   tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
                     // Jump to another table
-                    stopKeyboardColumnResizing()(state, dispatch);
+                    stopKeyboardColumnResizing({
+                      ariaNotify: ariaNotifyPlugin,
+                      getIntl: getIntl
+                    })(state, dispatch);
                   }
                 } else if (!tableNode) {
                   // selection outside of table
-                  stopKeyboardColumnResizing()(state, dispatch);
+                  stopKeyboardColumnResizing({
+                    ariaNotify: ariaNotifyPlugin,
+                    getIntl: getIntl
+                  })(state, dispatch);
                 }
               }
             }
@@ -235,7 +243,10 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
             isKeyboardResize
           } = getPluginState(state);
           if (isKeyboardResize) {
-            stopKeyboardColumnResizing()(state, dispatch);
+            stopKeyboardColumnResizing({
+              ariaNotify: ariaNotifyPlugin,
+              getIntl: getIntl
+            })(state, dispatch);
             return false;
           }
         }

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -132,7 +132,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing()(state, dispatch, view);
+          return stopKeyboardColumnResizing({})(state, dispatch, view);
         } else {
           return stopResizing()(state, dispatch);
         }
@@ -197,7 +197,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+          return stopKeyboardColumnResizing({
+            originalTr: tr
+          })(state, dispatch, view);
         } else {
           return stopResizing(tr)(state, dispatch);
         }

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

@@ -156,8 +156,8 @@ const DragHandleComponent = ({
       // 16px here because it's the size of drag handle button's large side
       width: isRow ? `${"var(--ds-space-200, 16px)"}` // 16px here because it's the size of drag handle button's large side
       : `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
-      left: isRow ? '3px' : undefined,
-      bottom: isColumn ? '0' : undefined,
+      left: isRow ? `${"var(--ds-space-050, 4px)"}` : undefined,
+      bottom: isColumn ? `${"var(--ds-space-0, 0px)"}` : undefined,
       alignSelf: isColumn ? 'none' : 'center',
       zIndex: isColumn ? '-1' : 'auto'
     },

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/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/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;