@atlaskit/editor-plugin-table 7.6.4 → 7.6.6

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

@@ -21,11 +21,15 @@ var createTableWithAnalytics = function createTableWithAnalytics(isTableScalingE
   })(editorAnalyticsAPI)(createTable(isTableScalingEnabled, isFullWidthModeEnabled));
 };
 export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
+  var _pluginInjectionApi$a;
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isFullWidthEnabled = arguments.length > 4 ? arguments[4] : undefined;
+  var pluginInjectionApi = arguments.length > 5 ? arguments[5] : undefined;
+  var getIntl = arguments.length > 6 ? arguments[6] : undefined;
   var list = {};
-  bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
-  bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
+  var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === 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);
@@ -54,12 +58,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/esm/pm-plugins/main.js

@@ -26,6 +26,7 @@ import { defaultHoveredCell, defaultTableSelection } from './default-table-selec
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) {
+  var _accessibilityUtils;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     isTableHovered: false,
@@ -46,6 +47,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   var invalidTableIds = [];
   var editorViewRef = null;
+  var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_accessibilityUtils = pluginInjectionApi.accessibilityUtils) === null || _accessibilityUtils === void 0 ? void 0 : _accessibilityUtils.actions.ariaNotify;
   var getCurrentEditorState = function getCurrentEditorState() {
     var editorView = editorViewRef;
     if (!editorView) {
@@ -107,7 +109,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
             }
             var 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
               var pluginPrevState = getPluginState(prevState);
               var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
               if (isStopKeyboardColumResizing) {
@@ -119,11 +121,17 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
                   // 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);
                 }
               }
             }
@@ -230,7 +238,10 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           var _getPluginState = getPluginState(state),
             isKeyboardResize = _getPluginState.isKeyboardResize;
           if (isKeyboardResize) {
-            stopKeyboardColumnResizing()(state, dispatch);
+            stopKeyboardColumnResizing({
+              ariaNotify: ariaNotifyPlugin,
+              getIntl: getIntl
+            })(state, dispatch);
             return false;
           }
         }

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

@@ -123,7 +123,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           /** 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);
         }
@@ -184,7 +184,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           /** 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/esm/ui/DragHandle/index.js

@@ -154,8 +154,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       // 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% - ".concat(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/esm/ui/DragPreview/index.js

@@ -24,7 +24,9 @@ export var DragPreview = function DragPreview(_ref) {
   }, /*#__PURE__*/React.createElement(DragInMotionIcon, {
     style: {
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: "".concat(marginLeft, "px"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: "".concat(marginTop, "px"),
       transform: transform
     }

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

@@ -92,25 +92,29 @@ export var FixedButton = function FixedButton(_ref2) {
     ref: observerTargetRef,
     style: {
       position: 'absolute',
-      top: '0px',
-      left: '0px',
-      width: "".concat(BUTTON_WIDTH, "px"),
-      height: "".concat(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: offset
       }),
-      width: "".concat(BUTTON_WIDTH, "px"),
-      height: "".concat(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/esm/ui/FloatingDeleteButton/index.js

@@ -199,8 +199,10 @@ var FloatingDeleteButton = /*#__PURE__*/function (_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/esm/ui/FloatingInsertButton/InsertButton.js

@@ -83,6 +83,7 @@ export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref
       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/esm/ui/LayoutButton/index.js

@@ -117,7 +117,9 @@ var LayoutButton = /*#__PURE__*/function (_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/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -182,7 +182,9 @@ export var ColumnControls = function ColumnControls(_ref) {
     "data-testid": "table-floating-column-controls",
     style: {
       gridTemplateColumns: widths,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: 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/esm/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js

@@ -74,8 +74,11 @@ export var ColumnDropTarget = function ColumnDropTarget(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     ref: dropTargetRef,
     style: {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       width: width && "".concat(width - 1, "px"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       height: height && "".concat(height, "px"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: marginTop && "".concat(marginTop, "px"),
       pointerEvents: 'auto',
       flexShrink: 0

package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -76,6 +76,7 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
           sticky: this.props.stickyTop !== undefined
         }),
         style: {
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
         },
         contentEditable: false

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

@@ -102,6 +102,7 @@ var NumberColumn = /*#__PURE__*/function (_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 ".concat(tableBorderColor) : undefined
         },

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

@@ -70,9 +70,13 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
           className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing), " ").concat(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: "".concat(marginTop, "px"),
+            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
             top: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
+            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
             paddingTop: thisRowSticky ? "".concat(tableControlsSpacing, "px") : undefined
           }
         }, /*#__PURE__*/React.createElement("button", {

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

@@ -129,6 +129,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         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-".concat(isHover ? rowIndex : selectedRowIndexes[0], "-drag-handle")
@@ -173,7 +174,8 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     style: {
       gridTemplateRows: heights,
       gridTemplateColumns: isDragging ? "".concat(dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
-      left: isDragging ? "-".concat(dropTargetExtendedWidth + 2, "px") : "-2px"
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      left: isDragging ? "-".concat(dropTargetExtendedWidth + 2, "px") : "var(--ds-space-negative-025, -2px)"
     },
     onMouseMove: handleMouseMove,
     contentEditable: false

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

@@ -40,6 +40,8 @@ var tableBorderStyles = function tableBorderStyles() {
     return "border: 1px solid ".concat(tableBorderDeleteColor);
   }
 };
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeaderColumnControlsDecorationsStyle() {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      .", " .", " {\n        z-index: 0;\n        left: -1px;\n      }\n\n      .", "\n        .", "::after {\n        border-left: 1px solid ", ";\n      }\n\n      .", "\n        tr:first-of-type\n        th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            left: 0;\n          }\n        }\n      }\n    "])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS);
@@ -75,5 +77,7 @@ export var baseTableStyles = function baseTableStyles(props) {
 export var tableStyles = function tableStyles(props) {
   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  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\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)", baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
 };
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 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);