@atlaskit/editor-plugin-table 7.3.0 → 7.3.2

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -7,7 +7,6 @@ export interface ColumnControlsProps {
     isInDanger?: boolean;
     tableRef: HTMLTableElement;
     hoveredCell?: CellHoverMeta;
-    isResizing?: boolean;
     stickyTop?: number;
     localId?: string;
     rowHeights?: number[];
@@ -19,5 +18,5 @@ export interface ColumnControlsProps {
     isDragging?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types-ts4.5/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -11,8 +11,8 @@ type DragControlsProps = {
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;
-    isResizing?: boolean;
     isTableHovered?: boolean;
+    isResizing?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     selectRows: (rowIndexes: number[]) => void;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -56,3 +56,4 @@ export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;
+export declare const colorPalletteColumns = 7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.1",
     "@atlaskit/custom-steps": "^0.0.13",
-    "@atlaskit/editor-common": "^77.3.0",
+    "@atlaskit/editor-common": "^77.4.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -41,6 +41,7 @@
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.5.0",
     "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/menu": "^2.1.5",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",

package/src/commands/misc.ts

@@ -463,7 +463,11 @@ export const setMultipleCellAttrs =
     return false;
   };
 
-export const selectColumn = (column: number, expand?: boolean) =>
+export const selectColumn = (
+  column: number,
+  expand?: boolean,
+  triggeredByKeyboard = false,
+) =>
   createCommand(
     (state) => {
       const cells = getCellsInColumn(column)(state.tr.selection);
@@ -487,7 +491,9 @@ export const selectColumn = (column: number, expand?: boolean) =>
       };
     },
     (tr: Transaction) =>
-      selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false),
+      selectColumnTransform(column, expand)(tr)
+        .setMeta('addToHistory', false)
+        .setMeta('selectedColumnViaKeyboard', triggeredByKeyboard),
   );
 
 export const selectColumns = (columnIndexes: number[]) =>
@@ -537,7 +543,11 @@ export const selectColumns = (columnIndexes: number[]) =>
     },
   );
 
-export const selectRow = (row: number, expand?: boolean) =>
+export const selectRow = (
+  row: number,
+  expand?: boolean,
+  triggeredByKeyboard = false,
+) =>
   createCommand(
     (state) => {
       let targetCellPosition;
@@ -548,7 +558,10 @@ export const selectRow = (row: number, expand?: boolean) =>
 
       return { type: 'SET_TARGET_CELL_POSITION', data: { targetCellPosition } };
     },
-    (tr) => selectRowTransform(row, expand)(tr).setMeta('addToHistory', false),
+    (tr) =>
+      selectRowTransform(row, expand)(tr)
+        .setMeta('addToHistory', false)
+        .setMeta('selectedRowViaKeyboard', triggeredByKeyboard),
   );
 
 export const selectRows = (rowIndexes: number[]) =>

package/src/commands/selection.ts

@@ -157,7 +157,7 @@ export const selectColumns =
       | ExtractInjectionAPI<typeof tablePlugin>['selection']
       | undefined,
   ) =>
-  (): Command =>
+  (triggeredByKeyboard = false): Command =>
   (state, dispatch) => {
     const { selection } = state;
     const table = findTable(selection);
@@ -170,7 +170,11 @@ export const selectColumns =
       })(state, dispatch);
     }
     if (table && rect) {
-      return selectColumn(rect.left)(state, dispatch);
+      return selectColumn(
+        rect.left,
+        undefined,
+        triggeredByKeyboard,
+      )(state, dispatch);
     }
     return false;
   };
@@ -181,7 +185,7 @@ export const selectRows =
       | ExtractInjectionAPI<typeof tablePlugin>['selection']
       | undefined,
   ) =>
-  (): Command =>
+  (triggeredByKeyboard = false): Command =>
   (state, dispatch) => {
     const { selection } = state;
     const table = findTable(selection);
@@ -194,7 +198,11 @@ export const selectRows =
       })(state, dispatch);
     }
     if (table && rect) {
-      return selectRow(rect.top)(state, dispatch);
+      return selectRow(
+        rect.top,
+        undefined,
+        triggeredByKeyboard,
+      )(state, dispatch);
     }
     return false;
   };

package/src/pm-plugins/drag-and-drop/actions.ts

@@ -37,6 +37,7 @@ export type DragAndDropToggleDragMenuAction = DragAndDropAction<
     isDragMenuOpen: boolean;
     direction: TableDirection;
     index: number;
+    isKeyboardModeActive: boolean;
   }
 >;
 

package/src/pm-plugins/drag-and-drop/commands.ts

@@ -18,6 +18,7 @@ import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import type { TriggerType } from './types';
 
 // TODO: This command is a placeholder example. Please replace this if required.
 export const getDecorations = (state: EditorState): DecorationSet => {
@@ -122,6 +123,7 @@ export const toggleDragMenu = (
   isDragMenuOpen: boolean | undefined,
   direction?: TableDirection,
   index?: number,
+  trigger: TriggerType = 'mouse',
 ) =>
   createCommand(
     (state) => {
@@ -165,6 +167,7 @@ export const toggleDragMenu = (
           isDragMenuOpen: updatedMenuOpenState,
           direction: direction ?? previousDragMenuDirection,
           index: index ?? previousDragMenuIndex,
+          isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard',
         },
       };
     },

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -242,6 +242,7 @@ export const createPlugin = (
       isDragMenuOpen: false,
       dragMenuIndex: 0,
       isDragging: false,
+      isKeyboardModeActive: false,
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -251,6 +252,21 @@ export const createPlugin = (
         getTablePluginState(newState);
       const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
 
+      transactions.forEach((transaction) => {
+        if (transaction.getMeta('selectedRowViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-row');
+          if (button) {
+            (button as HTMLButtonElement).focus();
+          }
+        }
+        if (transaction.getMeta('selectedColumnViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-column');
+          if (button) {
+            (button as HTMLButtonElement).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.
       // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
@@ -296,6 +312,37 @@ export const createPlugin = (
         const { decorationSet } = getPluginState(state);
         return decorationSet;
       },
+      handleKeyDown: (view, event) => {
+        const isDragHandleFocused = [
+          'drag-handle-button-row',
+          'drag-handle-button-column',
+        ].includes(((event.target as HTMLElement) || null)?.id);
+        const keysToTrap = ['Enter', ' '];
+        const keysToTrapWhen = [
+          'ArrowUp',
+          'ArrowDown',
+          'ArrowLeft',
+          'ArrowRight',
+        ];
+        const { isDragMenuOpen } = getPluginState(view.state);
+
+        // 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/src/pm-plugins/drag-and-drop/reducer.ts

@@ -30,6 +30,7 @@ export default (
         isDragMenuOpen: action.data.isDragMenuOpen,
         dragMenuDirection: action.data.direction,
         dragMenuIndex: action.data.index,
+        isKeyboardModeActive: action.data.isKeyboardModeActive,
       };
     default:
       return pluginState;

package/src/pm-plugins/drag-and-drop/types.ts

@@ -12,4 +12,7 @@ export interface DragAndDropPluginState {
   dragMenuDirection?: TableDirection;
   dragMenuIndex: number;
   isDragging: boolean;
+  isKeyboardModeActive: boolean;
 }
+
+export type TriggerType = 'mouse' | 'keyboard';

package/src/pm-plugins/table-selection-keymap.ts

@@ -43,13 +43,13 @@ export function tableSelectionKeymapPlugin(
   if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
     bindKeymapArrayWithCommand(
       selectColumn,
-      selectColumns(editorSelectionAPI)(),
+      selectColumns(editorSelectionAPI)(true),
       list,
     );
 
     bindKeymapArrayWithCommand(
       selectRow,
-      selectRows(editorSelectionAPI)(),
+      selectRows(editorSelectionAPI)(true),
       list,
     );
   }

package/src/ui/DragHandle/HandleIconComponent.tsx

@@ -8,19 +8,12 @@ import {
 
 type HandleIconProps = {
   forceDefaultHandle: boolean;
-  isRowHandleHovered: boolean;
-  isColumnHandleHovered: boolean;
+  isHandleHovered: boolean;
   hasMergedCells: boolean;
 };
 
 export const HandleIconComponent = (props: HandleIconProps) => {
-  const {
-    forceDefaultHandle,
-    isRowHandleHovered,
-    isColumnHandleHovered,
-    hasMergedCells,
-  } = props;
-  const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
+  const { forceDefaultHandle, isHandleHovered, hasMergedCells } = props;
 
   if (isHandleHovered || forceDefaultHandle) {
     return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;

package/src/ui/DragHandle/index.tsx

@@ -13,6 +13,8 @@ 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 { token } from '@atlaskit/tokens';
 
+import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
+import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
@@ -22,7 +24,12 @@ import { DragPreview } from '../DragPreview';
 
 import { HandleIconComponent } from './HandleIconComponent';
 
-type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
+export type DragHandleAppearance =
+  | 'default'
+  | 'selected'
+  | 'disabled'
+  | 'danger'
+  | 'placeholder';
 
 type DragHandleProps = {
   tableLocalId: string;
@@ -35,7 +42,10 @@ type DragHandleProps = {
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
-  onMouseUp?: MouseEventHandler;
+  toggleDragMenu?: (
+    trigger: TriggerType,
+    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
   editorView: EditorView;
   isDragMenuTarget: boolean; // this is identify which current handle component is
 };
@@ -51,7 +61,7 @@ const DragHandleComponent = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
-  onMouseUp,
+  toggleDragMenu,
   onClick,
   editorView,
   intl: { formatMessage },
@@ -60,10 +70,13 @@ const DragHandleComponent = ({
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
+  const {
+    state,
+    state: { selection },
+  } = editorView;
+  const { hoveredColumns, hoveredRows } = getPluginState(state);
+  const { isDragMenuOpen } = getDnDPluginState(state);
 
-  const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
-
-  const { selection } = editorView.state;
   const isRow = direction === 'row';
   const isColumn = direction === 'column';
 
@@ -80,8 +93,7 @@ const DragHandleComponent = ({
 
   const handleIconProps = {
     forceDefaultHandle,
-    isColumnHandleHovered,
-    isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells,
   };
 
@@ -145,6 +157,7 @@ const DragHandleComponent = ({
   return (
     <>
       <button
+        type="button"
         className={ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE}
         data-testid="table-drag-handle-clickable-zone-button"
         style={{
@@ -162,6 +175,7 @@ const DragHandleComponent = ({
         onClick={onClick}
       />
       <button
+        type="button"
         id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
         className={classnames(
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
@@ -179,24 +193,33 @@ const DragHandleComponent = ({
         aria-label={formatMessage(
           isRow ? messages.rowDragHandle : messages.columnDragHandle,
         )}
+        aria-expanded={isDragMenuOpen && isDragMenuTarget ? 'true' : 'false'}
+        aria-haspopup="menu"
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
         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}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            toggleDragMenu && toggleDragMenu('keyboard');
+          }
+        }}
       >
-        {/* cannot block pointer events in Firefox as it breaks Dragging functionality */}
-        {browser.gecko ? (
-          <HandleIconComponent {...handleIconProps} />
-        ) : (
-          <span style={{ pointerEvents: 'none' }}>
+        {appearance !== 'placeholder' ? (
+          //  cannot block pointer events in Firefox as it breaks Dragging functionality
+          browser.gecko ? (
             <HandleIconComponent {...handleIconProps} />
-          </span>
-        )}
+          ) : (
+            <span style={{ pointerEvents: 'none' }}>
+              <HandleIconComponent {...handleIconProps} />
+            </span>
+          )
+        ) : null}
       </button>
       {previewContainer &&
         previewWidth !== undefined &&