@atlaskit/editor-plugin-table 7.3.0 → 7.3.1

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

@@ -76,7 +76,7 @@ export const TableFloatingColumnControls = ({
     }
     return [0];
   }, [tableRef, tableRect.height]);
-  if (!tableRef || !tableActive) {
+  if (!tableRef || !tableActive || isResizing) {
     return null;
   }
   const colWidths = getColumnsWidths(editorView);
@@ -97,7 +97,6 @@ export const TableFloatingColumnControls = ({
     editorView: editorView,
     hoveredCell: hoveredCell,
     tableRef: tableRef,
-    isResizing: isResizing,
     tableActive: tableActive,
     isTableHovered: isTableHovered,
     stickyTop: tableActive ? stickyTop : undefined,

package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -8,6 +8,7 @@ import { TableCssClassName as ClassName } from '../../../types';
 const DragCornerControlsComponent = ({
   editorView,
   isInDanger,
+  isResizing,
   intl: {
     formatMessage
   }
@@ -36,6 +37,9 @@ const DragCornerControlsComponent = ({
     }
     return isTableSelected(selection);
   }, [editorView.state]);
+  if (isResizing) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("button", {
     className: classnames(ClassName.DRAG_CORNER_BUTTON, {
       active: isActive,

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

@@ -73,11 +73,11 @@ const DragControlsComponent = ({
       }
     });
   }, [editorView]);
-  const onMouseUp = useCallback(event => {
-    if (event.shiftKey) {
+  const toggleDragMenuHandler = useCallback((trigger, event) => {
+    if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
+    toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
   }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   const handleMouseOut = useCallback(() => {
@@ -114,29 +114,13 @@ const DragControlsComponent = ({
       selectRows(selectedRowIndexes);
     }
   }, [rowIndex, selectRow, selectRows, selectedRowIndexes]);
-  const generateHandleByType = type => {
-    if (!hoveredCell) {
-      return null;
-    }
+  const generateHandleByType = (type, appearance, gridRow, indexes) => {
     const isHover = type === 'hover';
-    const isRowsSelected = selectedRowIndexes.length > 0;
-    const showCondition = isHover ? isRowsSelected && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedRowIndexes.length < rowHeights.length && rowIndex < rowHeights.length && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
-    if (!showCondition) {
-      return null;
-    }
-    const gridRowPosition = `${rowIndex + 1} / span 1`;
-
-    // if more than one row is selected, ensure the handle spans over the selected range
-    const selectedRowPosition = `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
-    const hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    const currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
-    const isSelecting = isRowsSelected && !isHover;
-    const indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
     const previewHeight = rowHeights.reduce((sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0), 0);
     return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
-        gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
+        gridRow,
         gridColumn: '2',
         // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
         display: 'flex',
@@ -145,33 +129,42 @@ const DragControlsComponent = ({
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": `table-floating-row-${isSelecting ? selectedRowIndexes[0] : rowIndex}-drag-handle`
+      "data-testid": `table-floating-row-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,
-      forceDefaultHandle: isHover ? false : isRowsSelected,
+      forceDefaultHandle: !isHover,
       previewWidth: tableWidth,
       previewHeight: previewHeight,
-      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
+      appearance: appearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
-      onMouseUp: onMouseUp,
+      toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));
   };
-  const rowHandles = hoveredCell => {
-    if (!hoveredCell) {
+  const rowHandles = () => {
+    const handles = [];
+    const isRowSelected = selectedRowIndexes.length > 0;
+    const isEntireTableSelected = rowHeights.length > selectedRowIndexes.length;
+    if (!tableActive) {
       return null;
     }
-    if (hoveredCell.rowIndex === undefined) {
-      return generateHandleByType('selected');
+
+    // placeholder / selected need to always render at least one handle
+    // so it can be focused via keyboard shortcuts
+    handles.push(generateHandleByType('selected', isRowSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`, selectedRowIndexes));
+    if (hoveredCell && isTableHovered && rowIndex !== undefined && !selectedRowIndexes.includes(rowIndex) && rowIndex < rowHeights.length) {
+      handles.push(generateHandleByType('hover', 'default', `${rowIndex + 1} / span 1`, rowIndexes));
     }
-    const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
-    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
+    return handles;
   };
+  if (isResizing) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -181,7 +174,7 @@ const DragControlsComponent = ({
     },
     onMouseMove: handleMouseMove,
     contentEditable: false
-  }, !isResizing && rowsParams.map(({
+  }, rowsParams.map(({
     startIndex,
     endIndex
   }, index) => /*#__PURE__*/React.createElement(Fragment, {
@@ -210,6 +203,6 @@ const DragControlsComponent = ({
       position: 'relative',
       left: "var(--ds-space-negative-100, -8px)"
     }
-  }))), tableActive && isTableHovered && !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
+  }))), rowHandles());
 };
 export const DragControls = injectIntl(DragControlsComponent);

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

@@ -684,8 +684,13 @@ export const tableStyles = props => {
       display: flex;
       justify-content: center;
       align-items: center;
-      outline: none !important;
       background: transparent;
+      outline: none;
+
+      &.placeholder {
+        background-color: transparent;
+        border: 2px solid transparent;
+      }
 
       &.${ClassName.DRAG_HANDLE_DISABLED} {
         & svg {
@@ -723,6 +728,11 @@ export const tableStyles = props => {
         }
 
         &.selected {
+          :focus {
+            outline: 2px solid ${"var(--ds-border-focused, #2684FF)"};
+            outline-offset: 1px;
+          }
+
           svg {
             rect {
               fill: ${"var(--ds-background-accent-blue-subtle, #579dff)"};

package/dist/es2019/ui/consts.js

@@ -68,4 +68,5 @@ export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
-export const dropTargetExtendedWidth = 150;
+export const dropTargetExtendedWidth = 150;
+export const colorPalletteColumns = 7;

package/dist/esm/commands/misc.js

@@ -321,6 +321,7 @@ export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, targetCel
   };
 };
 export var selectColumn = function selectColumn(column, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return createCommand(function (state) {
     var cells = getCellsInColumn(column)(state.tr.selection);
     if (!cells || !cells.length || typeof cells[0].pos !== 'number') {
@@ -337,7 +338,7 @@ export var selectColumn = function selectColumn(column, expand) {
       }
     };
   }, function (tr) {
-    return selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false);
+    return selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false).setMeta('selectedColumnViaKeyboard', triggeredByKeyboard);
   });
 };
 export var selectColumns = function selectColumns(columnIndexes) {
@@ -372,6 +373,7 @@ export var selectColumns = function selectColumns(columnIndexes) {
   });
 };
 export var selectRow = function selectRow(row, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return createCommand(function (state) {
     var targetCellPosition;
     var cells = getCellsInRow(row)(state.tr.selection);
@@ -385,7 +387,7 @@ export var selectRow = function selectRow(row, expand) {
       }
     };
   }, function (tr) {
-    return selectRowTransform(row, expand)(tr).setMeta('addToHistory', false);
+    return selectRowTransform(row, expand)(tr).setMeta('addToHistory', false).setMeta('selectedRowViaKeyboard', triggeredByKeyboard);
   });
 };
 export var selectRows = function selectRows(rowIndexes) {

package/dist/esm/commands/selection.js

@@ -82,6 +82,7 @@ var arrowRightFromCellSelection = function arrowRightFromCellSelection(editorSel
 };
 export var selectColumns = function selectColumns(editorSelectionAPI) {
   return function () {
+    var triggeredByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return function (state, dispatch) {
       var selection = state.selection;
       var table = findTable(selection);
@@ -94,7 +95,7 @@ export var selectColumns = function selectColumns(editorSelectionAPI) {
         })(state, dispatch);
       }
       if (table && rect) {
-        return selectColumn(rect.left)(state, dispatch);
+        return selectColumn(rect.left, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };
@@ -102,6 +103,7 @@ export var selectColumns = function selectColumns(editorSelectionAPI) {
 };
 export var selectRows = function selectRows(editorSelectionAPI) {
   return function () {
+    var triggeredByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return function (state, dispatch) {
       var selection = state.selection;
       var table = findTable(selection);
@@ -114,7 +116,7 @@ export var selectRows = function selectRows(editorSelectionAPI) {
         })(state, dispatch);
       }
       if (table && rect) {
-        return selectRow(rect.top)(state, dispatch);
+        return selectRow(rect.top, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };

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

@@ -6,7 +6,6 @@ import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-
 // TODO: This command is a placeholder example. Please replace this if required.
 export var getDecorations = function getDecorations(state) {
   var _pluginKey$getState;
@@ -79,6 +78,7 @@ export var moveSource = function moveSource(sourceType, sourceIndexes, targetInd
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
+  var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
   return createCommand(function (state) {
     var _getPluginState3 = getPluginState(state),
       previousOpenState = _getPluginState3.isDragMenuOpen,
@@ -105,7 +105,8 @@ export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, i
       data: {
         isDragMenuOpen: updatedMenuOpenState,
         direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
-        index: index !== null && index !== void 0 ? index : previousDragMenuIndex
+        index: index !== null && index !== void 0 ? index : previousDragMenuIndex,
+        isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard'
       }
     };
   }, function (tr) {

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

@@ -164,7 +164,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
         dropTargetIndex: 0,
         isDragMenuOpen: false,
         dragMenuIndex: 0,
-        isDragging: false
+        isDragging: false,
+        isKeyboardModeActive: false
       };
     }),
     key: pluginKey,
@@ -176,6 +177,20 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
       var _getPluginState = getPluginState(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
         dragMenuIndex = _getPluginState.dragMenuIndex;
+      transactions.forEach(function (transaction) {
+        if (transaction.getMeta('selectedRowViaKeyboard')) {
+          var button = document.querySelector('#drag-handle-button-row');
+          if (button) {
+            button.focus();
+          }
+        }
+        if (transaction.getMeta('selectedColumnViaKeyboard')) {
+          var _button = document.querySelector('#drag-handle-button-column');
+          if (_button) {
+            _button.focus();
+          }
+        }
+      });
 
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
@@ -216,6 +231,23 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
         var _getPluginState2 = getPluginState(state),
           decorationSet = _getPluginState2.decorationSet;
         return decorationSet;
+      },
+      handleKeyDown: function handleKeyDown(view, event) {
+        var _ref8;
+        var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref8 = event.target || null) === null || _ref8 === void 0 ? void 0 : _ref8.id);
+        var keysToTrap = ['Enter', ' '];
+        var keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+        var _getPluginState3 = getPluginState(view.state),
+          isDragMenuOpen = _getPluginState3.isDragMenuOpen;
+
+        // drag handle is focused, and user presses any key return them back to editing
+        if (isDragHandleFocused && !isDragMenuOpen && !keysToTrap.includes(event.key)) {
+          view.dom.focus();
+          return true;
+        }
+        if (isDragHandleFocused && keysToTrap.includes(event.key) || isDragMenuOpen && keysToTrapWhen.includes(event.key)) {
+          return true;
+        }
       }
     }
   });

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

@@ -23,7 +23,8 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         isDragMenuOpen: action.data.isDragMenuOpen,
         dragMenuDirection: action.data.direction,
-        dragMenuIndex: action.data.index
+        dragMenuIndex: action.data.index,
+        isKeyboardModeActive: action.data.isKeyboardModeActive
       });
     default:
       return pluginState;

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

@@ -7,8 +7,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
   if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
-    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(), list);
-    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(), list);
+    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
+    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
   }
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);

package/dist/esm/ui/DragHandle/HandleIconComponent.js

@@ -2,10 +2,8 @@ import React from 'react';
 import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../icons';
 export var HandleIconComponent = function HandleIconComponent(props) {
   var forceDefaultHandle = props.forceDefaultHandle,
-    isRowHandleHovered = props.isRowHandleHovered,
-    isColumnHandleHovered = props.isColumnHandleHovered,
+    isHandleHovered = props.isHandleHovered,
     hasMergedCells = props.hasMergedCells;
-  var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   if (isHandleHovered || forceDefaultHandle) {
     return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }

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

@@ -8,6 +8,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
@@ -28,7 +29,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
-    _onMouseUp = _ref.onMouseUp,
+    toggleDragMenu = _ref.toggleDragMenu,
     onClick = _ref.onClick,
     editorView = _ref.editorView,
     formatMessage = _ref.intl.formatMessage;
@@ -37,10 +38,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     previewContainer = _useState2[0],
     setPreviewContainer = _useState2[1];
-  var _getPluginState = getPluginState(editorView.state),
+  var state = editorView.state,
+    selection = editorView.state.selection;
+  var _getPluginState = getPluginState(state),
     hoveredColumns = _getPluginState.hoveredColumns,
     hoveredRows = _getPluginState.hoveredRows;
-  var selection = editorView.state.selection;
+  var _getDnDPluginState = getDnDPluginState(state),
+    isDragMenuOpen = _getDnDPluginState.isDragMenuOpen;
   var isRow = direction === 'row';
   var isColumn = direction === 'column';
   var isRowHandleHovered = isRow && hoveredRows.length > 0;
@@ -50,8 +54,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [indexes, isRow, selection]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
-    isColumnHandleHovered: isColumnHandleHovered,
-    isRowHandleHovered: isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells: hasMergedCells
   };
   useEffect(function () {
@@ -134,20 +137,29 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     },
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
+    "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
+    "aria-haspopup": "menu",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: function onMouseUp(e) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      _onMouseUp && _onMouseUp(e);
+      toggleDragMenu && toggleDragMenu('mouse', e);
     },
-    onClick: onClick
-  }, browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        toggleDragMenu && toggleDragMenu('keyboard');
+      }
+    }
+  }, appearance !== 'placeholder' ?
+  //  cannot block pointer events in Firefox as it breaks Dragging functionality
+  browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps))), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps)) : null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight