@atlaskit/editor-plugin-table 5.3.4 → 5.3.6

package/dist/types/plugins/table/types.d.ts

@@ -279,6 +279,7 @@ export declare const TableCssClassName: {
     /** Controls with drag handle */
     COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: string;
     ROW_CONTROLS_WITH_DRAG: string;
+    DRAG_HANDLE_BUTTON_CONTAINER: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;

package/dist/types/plugins/table/ui/DragHandle/index.d.ts

@@ -1,11 +1,13 @@
 import type { MouseEventHandler } from 'react';
+type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
     direction?: 'column' | 'row';
+    state?: DragHandleState;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, indexes, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, state, indexes, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types/plugins/table/ui/icons/DragHandleIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface DragHandleIconProps {
+    backgroundColor?: string;
+    foregroundColor?: string;
+}
+export declare const DragHandleIcon: ({ backgroundColor, foregroundColor, }: DragHandleIconProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/plugins/table/nodeviews/TableRow.d.ts

@@ -37,6 +37,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
      * Methods
      */
     private addDropTarget;
+    private getCurrentData;
     private headerRowMouseScrollEnd;
     private headerRowMouseScroll;
     private subscribe;

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -279,6 +279,7 @@ export declare const TableCssClassName: {
     /** Controls with drag handle */
     COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: string;
     ROW_CONTROLS_WITH_DRAG: string;
+    DRAG_HANDLE_BUTTON_CONTAINER: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -1,11 +1,13 @@
 import type { MouseEventHandler } from 'react';
+type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
     direction?: 'column' | 'row';
+    state?: DragHandleState;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, indexes, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, state, indexes, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/icons/DragHandleIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface DragHandleIconProps {
+    backgroundColor?: string;
+    foregroundColor?: string;
+}
+export declare const DragHandleIcon: ({ backgroundColor, foregroundColor, }: DragHandleIconProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.4",
+  "version": "5.3.6",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,6 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
-    "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^0.4.0",
     "@atlaskit/primitives": "^1.6.7",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",

package/src/plugins/table/nodeviews/TableRow.ts

@@ -192,14 +192,11 @@ export default class TableRow
       this.dropTargetCleanup();
     }
 
-    const resolvedPos = this.view.state.doc.resolve(pos);
-    const targetIndex = resolvedPos.index();
-    const localId = resolvedPos.parent.attrs.localId;
-
     this.dropTargetCleanup = dropTargetForElements({
       element: element,
-      canDrop({ source }) {
+      canDrop: ({ source }) => {
         const data = source.data as DraggableSourceData;
+        const { localId, targetIndex } = this.getCurrentData();
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-row' &&
@@ -210,7 +207,9 @@ export default class TableRow
           data.indexes?.indexOf(targetIndex) === -1
         );
       },
-      getData({ input, element }) {
+      getIsSticky: () => true,
+      getData: ({ input, element }) => {
+        const { localId, targetIndex } = this.getCurrentData();
         const data = {
           localId,
           type: 'table-row',
@@ -225,6 +224,13 @@ export default class TableRow
     });
   }
 
+  private getCurrentData() {
+    const resolvedPos = this.view.state.doc.resolve(this.getPos()!);
+    const targetIndex = resolvedPos.index();
+    const localId = resolvedPos.parent.attrs.localId;
+    return { targetIndex, localId };
+  }
+
   private headerRowMouseScrollEnd = debounce(() => {
     this.dom.classList.remove('no-pointer-events');
   }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT);

package/src/plugins/table/types.ts

@@ -300,8 +300,8 @@ export const TableCssClassName = {
 
   /** Controls with drag handle */
   COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: `${tablePrefixSelector}-column-controls-decoration-with-drag`,
-
   ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+  DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
 
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -1,30 +1,50 @@
 import type { MouseEventHandler } from 'react';
 import React, { useEffect, useRef } from 'react';
 
-import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { N200, N700 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
+import { TableCssClassName as ClassName } from '../../types';
+import { DragHandleIcon } from '../icons/DragHandleIcon';
+
+type DragHandleState = 'default' | 'selected' | 'disabled' | 'danger';
+
 type DragHandleProps = {
   tableLocalId: string;
   indexes: number[];
   direction?: 'column' | 'row';
+  state?: DragHandleState;
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
 };
 
-// TODO: use for now, in future replace with custom @atlaskit/icon/glyph/drag-handler
-// width is too large (24px), should be 16px
+const mapStateToProps = (state: DragHandleState) => {
+  switch (state) {
+    case 'danger':
+    case 'disabled':
+    case 'selected':
+    case 'default':
+    default:
+      return {
+        backgroundColor: token('color.background.accent.gray.subtlest', N200),
+        foregroundColor: token('color.icon.subtle', N700),
+      };
+  }
+};
+
 export const DragHandle = ({
   tableLocalId,
   direction = 'row',
+  state = 'default',
   indexes,
   onClick,
   onMouseOver,
   onMouseOut,
 }: DragHandleProps) => {
-  const dragHandleDivRef = useRef<HTMLDivElement>(null);
+  const dragHandleDivRef = useRef<HTMLButtonElement>(null);
+  const iconProps = mapStateToProps(state);
 
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
@@ -41,17 +61,16 @@ export const DragHandle = ({
       });
     }
   }, [tableLocalId, direction, indexes]);
+
   return (
-    <div
-      ref={dragHandleDivRef}
+    <button
+      className={ClassName.DRAG_HANDLE_BUTTON_CONTAINER}
       style={{
-        backgroundColor: `${token('elevation.surface', 'white')}`,
-        borderRadius: '4px',
-        border: `2px solid ${token('elevation.surface', 'white')}`,
-        transform: direction === 'column' ? 'rotate(90deg)' : 'none',
+        transform: direction === 'column' ? 'none' : 'rotate(90deg)',
       }}
+      ref={dragHandleDivRef}
     >
-      <DragHandleButton label="blah" />
-    </div>
+      <DragHandleIcon {...iconProps} />
+    </button>
   );
 };

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

@@ -29,7 +29,9 @@ const DragControlsComponent = ({
   editorView,
 }: DragControlsProps & WrappedComponentProps) => {
   const rowHeights = getRowHeights(tableRef);
-  const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
+  const heights = rowHeights
+    .map((height, index) => `${height - 1}px`)
+    .join(' ');
 
   const onClick = (
     index: number,
@@ -57,6 +59,7 @@ const DragControlsComponent = ({
         <div
           style={{
             gridRow: `${(rowIndex as number) + 1} / span 1`,
+            display: 'flex',
           }}
         >
           <DragHandle

package/src/plugins/table/ui/common-styles.ts

@@ -702,6 +702,15 @@ export const tableStyles = (
       display: grid;
       align-items: center;
       position: absolute;
+      left: -4px;
+    }
+
+    .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
+      cursor: grab;
+      width: max-content;
+      padding: 0;
+      border: none;
+      background: none;
     }
 
     ${floatingColumnControls(props)}

package/src/plugins/table/ui/icons/DragHandleIcon.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+
+interface DragHandleIconProps {
+  backgroundColor?: string;
+  foregroundColor?: string;
+}
+
+export const DragHandleIcon = ({
+  backgroundColor,
+  foregroundColor,
+}: DragHandleIconProps) => (
+  <svg
+    width="28"
+    height="20"
+    viewBox="0 0 28 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="1"
+      y="1"
+      width="26"
+      height="18"
+      rx="5"
+      fill={backgroundColor || '#F1F2F4'}
+    />
+    <g clipPath="url(#clip0_125_45007)">
+      <path
+        d="M11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13C10.5523 13 11 12.5523 11 12Z"
+        fill={foregroundColor || '#626F86'}
+      />
+      <path
+        d="M11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9C10.5523 9 11 8.55228 11 8Z"
+        fill={foregroundColor || '#626F86'}
+      />
+      <path
+        d="M19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12Z"
+        fill={foregroundColor || '#626F86'}
+      />
+      <path
+        d="M19 8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8C17 8.55228 17.4477 9 18 9C18.5523 9 19 8.55228 19 8Z"
+        fill={foregroundColor || '#626F86'}
+      />
+      <path
+        d="M15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13C14.5523 13 15 12.5523 15 12Z"
+        fill={foregroundColor || '#626F86'}
+      />
+      <path
+        d="M15 8C15 7.44772 14.5523 7 14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9C14.5523 9 15 8.55228 15 8Z"
+        fill={foregroundColor || '#626F86'}
+      />
+    </g>
+    <rect
+      x="1"
+      y="1"
+      width="26"
+      height="18"
+      rx="5"
+      stroke="white"
+      strokeWidth="2"
+    />
+    <defs>
+      <clipPath id="clip0_125_45007">
+        <rect
+          width="16"
+          height="24"
+          fill="white"
+          transform="matrix(0 -1 1 0 2 18)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/tsconfig.app.json

@@ -75,9 +75,6 @@
     {
       "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
     },
-    {
-      "path": "../../pragmatic-drag-and-drop/react-accessibility/tsconfig.app.json"
-    },
     {
       "path": "../../design-system/primitives/tsconfig.app.json"
     },