@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -21,6 +21,7 @@ import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import type { TriggerType } from '../../../pm-plugins/drag-and-drop/types';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import type {
@@ -34,6 +35,7 @@ import {
   getSelectedRowIndexes,
 } from '../../../utils';
 import { dropTargetExtendedWidth } from '../../consts';
+import type { DragHandleAppearance } from '../../DragHandle';
 import { DragHandle } from '../../DragHandle';
 import RowDropTarget from '../RowDropTarget';
 
@@ -45,8 +47,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;
@@ -111,16 +113,16 @@ const DragControlsComponent = ({
     });
   }, [editorView]);
 
-  const onMouseUp = useCallback(
-    (event) => {
-      if (event.shiftKey) {
+  const toggleDragMenuHandler = useCallback(
+    (trigger: TriggerType, event) => {
+      if (event?.shiftKey) {
         return;
       }
-
       toggleDragMenu(
         undefined,
         'row',
         hoveredCell?.rowIndex,
+        trigger,
       )(editorView.state, editorView.dispatch);
     },
     [editorView, hoveredCell?.rowIndex],
@@ -186,53 +188,14 @@ const DragControlsComponent = ({
     [rowIndex, selectRow, selectRows, selectedRowIndexes],
   );
 
-  const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
-    if (!hoveredCell) {
-      return null;
-    }
+  const generateHandleByType = (
+    type: HandleTypes,
+    appearance: DragHandleAppearance,
+    gridRow: string,
+    indexes: number[],
+  ) => {
     const isHover = type === 'hover';
 
-    const isRowsSelected = selectedRowIndexes.length > 0;
-
-    const showCondition = isHover
-      ? isRowsSelected &&
-        !selectedRowIndexes.includes(rowIndex!) &&
-        Number.isFinite(hoveredCell?.colIndex)
-      : selectedRowIndexes.length < rowHeights.length &&
-        rowIndex! < rowHeights.length &&
-        Number.isFinite(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,
@@ -242,7 +205,7 @@ const DragControlsComponent = ({
       <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',
@@ -252,7 +215,7 @@ const DragControlsComponent = ({
           right: '-0.5px',
         }}
         data-testid={`table-floating-row-${
-          isSelecting ? selectedRowIndexes[0] : rowIndex
+          isHover ? rowIndex : selectedRowIndexes[0]
         }-drag-handle`}
       >
         <DragHandle
@@ -260,41 +223,68 @@ const DragControlsComponent = ({
           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}
         />
       </div>
     );
   };
 
-  const rowHandles = (hoveredCell: CellHoverMeta | undefined) => {
-    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,
+      ),
+    );
 
-    const sortedHandles = [
-      generateHandleByType('hover'),
-      generateHandleByType('selected'),
-    ];
+    if (
+      hoveredCell &&
+      isTableHovered &&
+      rowIndex !== undefined &&
+      !selectedRowIndexes.includes(rowIndex) &&
+      rowIndex < rowHeights.length
+    ) {
+      handles.push(
+        generateHandleByType(
+          'hover',
+          'default',
+          `${rowIndex + 1} / span 1`,
+          rowIndexes,
+        ),
+      );
+    }
 
-    return hoveredCell.rowIndex < selectedRowIndexes[0]
-      ? sortedHandles
-      : sortedHandles.reverse();
+    return handles;
   };
 
+  if (isResizing) {
+    return null;
+  }
+
   return (
     <div
       className={ClassName.DRAG_ROW_CONTROLS}
@@ -308,44 +298,39 @@ const DragControlsComponent = ({
       onMouseMove={handleMouseMove}
       contentEditable={false}
     >
-      {!isResizing &&
-        rowsParams.map(({ startIndex, endIndex }, index) => (
-          <Fragment key={index}>
-            <div
+      {rowsParams.map(({ startIndex, endIndex }, index) => (
+        <Fragment key={index}>
+          <div
+            style={{
+              gridRow: `${index + 1} / span 1`,
+              gridColumn: '2',
+            }}
+            data-start-index={startIndex}
+            data-end-index={endIndex}
+            className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
+            contentEditable={false}
+            key={`insert-dot-${index}`}
+          >
+            <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
+          </div>
+          {isDragging && (
+            <RowDropTarget
+              key={`drop-target-${index}`}
+              index={index}
+              localId={currentNodeLocalId}
               style={{
+                gridColumn: '1 / span 3',
                 gridRow: `${index + 1} / span 1`,
-                gridColumn: '2',
+                height: '100%',
+                pointerEvents: 'auto',
+                position: 'relative',
+                left: token('space.negative.100', '-8px'),
               }}
-              data-start-index={startIndex}
-              data-end-index={endIndex}
-              className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
-              contentEditable={false}
-              key={`insert-dot-${index}`}
-            >
-              <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
-            </div>
-            {isDragging && (
-              <RowDropTarget
-                key={`drop-target-${index}`}
-                index={index}
-                localId={currentNodeLocalId}
-                style={{
-                  gridColumn: '1 / span 3',
-                  gridRow: `${index + 1} / span 1`,
-                  height: '100%',
-                  pointerEvents: 'auto',
-                  position: 'relative',
-                  left: token('space.negative.100', '-8px'),
-                }}
-              />
-            )}
-          </Fragment>
-        ))}
-      {tableActive &&
-        isTableHovered &&
-        !isResizing &&
-        Number.isFinite(rowIndex) &&
-        rowHandles(hoveredCell)}
+            />
+          )}
+        </Fragment>
+      ))}
+      {rowHandles()}
     </div>
   );
 };

package/src/ui/common-styles.ts

@@ -782,8 +782,13 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
       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 {
@@ -821,6 +826,11 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
         }
 
         &.selected {
+          :focus {
+            outline: 2px solid ${token('color.border.focused', '#2684FF')};
+            outline-offset: 1px;
+          }
+
           svg {
             rect {
               fill: ${token('color.background.accent.blue.subtle', '#579dff')};

package/src/ui/consts.ts

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

package/tsconfig.app.json

@@ -66,6 +66,9 @@
     {
       "path": "../../design-system/icon/tsconfig.app.json"
     },
+    {
+      "path": "../../design-system/menu/tsconfig.app.json"
+    },
     {
       "path": "../../platform/feature-flags/tsconfig.app.json"
     },