@atlaskit/editor-plugin-table 2.4.0 → 2.5.1

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

@@ -7,12 +7,16 @@ export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"v
 export declare const tableTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
 export declare const tableBorderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtler)">;
 export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
-export declare const tableCellSelectedColor: "var(--ds-blanket-selected)";
-export declare const tableToolbarSelectedColor: "var(--ds-background-selected-bold)";
-export declare const tableBorderSelectedColor: "var(--ds-border-selected)";
-export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
-export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
-export declare const tableToolbarDeleteColor: "var(--ds-background-danger-bold)";
+export declare const tableCellSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-selected)">;
+export declare const tableToolbarSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-pressed)">;
+export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
+export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
+export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
+export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
+export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
+export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
+export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
+export declare const tableCellHoverDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-bold)">;
 export declare const tableBorderRadiusSize = 3;
 export declare const tablePadding = 8;
 export declare const tableScrollbarOffset = 15;

package/dist/types/plugins/table/ui/ui-styles.d.ts

@@ -1,15 +1,15 @@
 import { ThemeProps } from '@atlaskit/theme/types';
 export declare const InsertMarker: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
-export declare const insertColumnButtonWrapper: import("@emotion/react").SerializedStyles;
-export declare const insertRowButtonWrapper: import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
-export declare const DeleteButton: import("@emotion/react").SerializedStyles;
+export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const hoveredDeleteButton: import("@emotion/react").SerializedStyles;
-export declare const hoveredCell: import("@emotion/react").SerializedStyles;
+export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

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

@@ -7,12 +7,16 @@ export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"v
 export declare const tableTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
 export declare const tableBorderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtler)">;
 export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
-export declare const tableCellSelectedColor: "var(--ds-blanket-selected)";
-export declare const tableToolbarSelectedColor: "var(--ds-background-selected-bold)";
-export declare const tableBorderSelectedColor: "var(--ds-border-selected)";
-export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
-export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
-export declare const tableToolbarDeleteColor: "var(--ds-background-danger-bold)";
+export declare const tableCellSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-selected)">;
+export declare const tableToolbarSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-pressed)">;
+export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
+export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
+export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
+export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
+export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
+export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
+export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
+export declare const tableCellHoverDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-bold)">;
 export declare const tableBorderRadiusSize = 3;
 export declare const tablePadding = 8;
 export declare const tableScrollbarOffset = 15;

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

@@ -1,15 +1,15 @@
 import { ThemeProps } from '@atlaskit/theme/types';
 export declare const InsertMarker: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
-export declare const insertColumnButtonWrapper: import("@emotion/react").SerializedStyles;
-export declare const insertRowButtonWrapper: import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
-export declare const DeleteButton: import("@emotion/react").SerializedStyles;
+export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const hoveredDeleteButton: import("@emotion/react").SerializedStyles;
-export declare const hoveredCell: import("@emotion/react").SerializedStyles;
+export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.2.0",
-    "@atlaskit/editor-common": "^74.23.0",
+    "@atlaskit/editor-common": "^74.26.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.6",

package/src/__tests__/unit/pm-plugins/main.ts

@@ -34,6 +34,17 @@ import * as miscCommands from '../../../plugins/table/commands/misc';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 
+jest.mock('prosemirror-utils', () => {
+  // Unblock prosemirror bump:
+  // Workaround to enable spy on prosemirror-utils cjs bundle
+  const originalModule = jest.requireActual('prosemirror-utils');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
 describe('tables: main plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/ui/FloatingContextualButton.tsx

@@ -32,6 +32,17 @@ import FloatingContextualButton, {
   Props as FloatingContextualButtonProps,
 } from '../../../plugins/table/ui/FloatingContextualButton';
 
+jest.mock('prosemirror-utils', () => {
+  // Unblock prosemirror bump:
+  // Workaround to enable spy on prosemirror-utils cjs bundle
+  const originalModule = jest.requireActual('prosemirror-utils');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
 const createEditor = createProsemirrorEditorFactory();
 let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
 const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/ui/FloatingInsertButton.tsx

@@ -39,6 +39,17 @@ import {
   Props as FloatingInsertButtonProps,
 } from '../../../plugins/table/ui/FloatingInsertButton';
 
+jest.mock('prosemirror-utils', () => {
+  // Unblock prosemirror bump:
+  // Workaround to enable spy on prosemirror-utils cjs bundle
+  const originalModule = jest.requireActual('prosemirror-utils');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
 const getEditorContainerWidth = () => ({ width: 500 });
 const createEditor = createEditorFactory<TablePluginState>();
 const createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -199,6 +199,7 @@ export const TableResizer = ({
       maxWidth={maxWidth}
       snapGap={TABLE_SNAP_GAP}
       snap={guidelineSnaps}
+      handlePositioning="adjacent"
     >
       {children}
     </ResizerNext>

package/src/plugins/table/ui/FloatingContextualButton/styles.ts

@@ -24,7 +24,7 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
     })(props)};
     flex-direction: column;
     margin: 2px;
-    outline: 2px solid ${token('color.border', N0)};
+    outline: 2px solid ${token('elevation.surface', N0)};
     border-radius: 1px;
     padding: 0;
     height: calc(100% - 4px);

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

@@ -185,10 +185,10 @@ export const tableStyles = (
   .ProseMirror {
     ${tableSharedStyle(props)};
     ${columnControlsLineMarker()};
-    ${hoveredDeleteButton};
-    ${hoveredCell};
+    ${hoveredDeleteButton(props)};
+    ${hoveredCell(props)};
     ${hoveredWarningCell};
-    ${resizeHandle};
+    ${resizeHandle(props)};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -223,15 +223,15 @@ export const tableStyles = (
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
-      ${insertColumnButtonWrapper}
+      ${insertColumnButtonWrapper(props)}
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
-      ${insertRowButtonWrapper}
+      ${insertRowButtonWrapper(props)}
     }
 
     /* Delete button */
-    ${DeleteButton}
+    ${DeleteButton(props)}
     /* Ends Delete button */
 
     /* sticky styles */
@@ -485,11 +485,8 @@ export const tableStyles = (
       }
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-color: ${tableBorderSelectedColor};
-      background: ${token(
-        'color.background.selected',
-        tableToolbarSelectedColor,
-      )};
+      border-color: ${tableBorderSelectedColor(props)};
+      background: ${tableToolbarSelectedColor(props)};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -502,18 +499,15 @@ export const tableStyles = (
     }
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
-      border-color: ${tableBorderSelectedColor};
-      background: ${token(
-        'color.background.selected',
-        tableToolbarSelectedColor,
-      )};
+      border-color: ${tableBorderSelectedColor(props)};
+      background: ${tableToolbarSelectedColor(props)};
       cursor: pointer;
     }
 
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-      border-color: ${tableBorderDeleteColor};
-      background: ${token('color.background.danger', tableToolbarDeleteColor)};
+      border-color: ${tableBorderDeleteColor(props)};
+      background: ${tableToolbarDeleteColor(props)};
     }
 
     /* Row controls */
@@ -572,8 +566,8 @@ export const tableStyles = (
     }
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-      ${HeaderButtonHover()}
-      ${HeaderButtonDanger()}
+      ${HeaderButtonHover(props)}
+      ${HeaderButtonDanger(props)}
     }
 
     /* Numbered column */
@@ -618,12 +612,9 @@ export const tableStyles = (
         }
 
         .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-          border-bottom: 1px solid ${tableBorderSelectedColor};
-          border-color: ${tableBorderSelectedColor};
-          background-color: ${token(
-            'color.background.selected',
-            tableToolbarSelectedColor,
-          )};
+          border-bottom: 1px solid ${tableBorderSelectedColor(props)};
+          border-color: ${tableBorderSelectedColor(props)};
+          background-color: ${tableToolbarSelectedColor(props)};
           position: relative;
           z-index: ${akEditorUnitZIndex};
           color: ${token('color.text.selected', N0)};
@@ -635,22 +626,16 @@ export const tableStyles = (
         cursor: pointer;
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
-        border-bottom: 1px solid ${tableBorderSelectedColor};
-        border-color: ${tableBorderSelectedColor};
-        background-color: ${token(
-          'color.background.selected',
-          tableToolbarSelectedColor,
-        )};
+        border-bottom: 1px solid ${tableBorderSelectedColor(props)};
+        border-color: ${tableBorderSelectedColor(props)};
+        background-color: ${tableToolbarSelectedColor(props)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
         color: ${token('color.text.selected', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${token(
-          'color.background.danger',
-          tableToolbarDeleteColor,
-        )};
-        border: 1px solid ${tableBorderDeleteColor};
+        background-color: ${tableToolbarDeleteColor(props)};
+        border: 1px solid ${tableBorderDeleteColor(props)};
         border-left: 0;
         color: ${token('color.text.danger', R500)};
         position: relative;
@@ -711,15 +696,15 @@ export const tableStyles = (
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {
-        border: 1px solid ${tableBorderSelectedColor};
+        border: 1px solid ${tableBorderSelectedColor(props)};
       }
       .${ClassName.SELECTED_CELL}::after {
-        background: ${tableCellSelectedColor};
+        background: ${tableCellSelectedColor(props)};
         z-index: ${akEditorSmallZIndex};
       }
       th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
         td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        background: ${tableCellDeleteColor};
+        background: ${tableCellDeleteColor(props)};
         z-index: ${akEditorUnitZIndex * 100};
       }
       // ED-15246: Trello card is visible through a border of a table border
@@ -727,7 +712,7 @@ export const tableStyles = (
         &::after {
           height: 100%;
           width: 100%;
-          border: 1px solid ${tableBorderSelectedColor};
+          border: 1px solid ${tableBorderSelectedColor(props)};
           content: '';
           position: absolute;
           left: -1px;
@@ -738,7 +723,7 @@ export const tableStyles = (
           pointer-events: none;
         }
         &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          border: 1px solid ${tableBorderDeleteColor};
+          border: 1px solid ${tableBorderDeleteColor(props)};
           z-index: ${akEditorUnitZIndex * 100};
         }
       }

package/src/plugins/table/ui/consts.ts

@@ -5,6 +5,9 @@ import {
 import {
   akEditorTableBorder,
   akEditorTableBorderDark,
+  akEditorTableBorderSelected,
+  akEditorTableCellBlanketDeleted,
+  akEditorTableCellBlanketSelected,
   akEditorTableToolbar,
   akEditorTableToolbarDark,
   akEditorTableToolbarSize,
@@ -13,12 +16,14 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import {
   B200,
-  B300,
   DN30,
   DN400,
   N0,
   N20,
   N200,
+  N20A,
+  N300,
+  R300,
   R400,
   R75,
 } from '@atlaskit/theme/colors';
@@ -58,24 +63,46 @@ export const tableFloatingControlsColor = token(
   N20,
 );
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
-export const tableCellSelectedColor = token(
-  'color.blanket.selected',
-  'rgba(179, 212, 255, 0.3)',
-);
-export const tableToolbarSelectedColor = token(
-  'color.background.selected.bold',
-  B200,
-);
-export const tableBorderSelectedColor = token('color.border.selected', B300);
-export const tableCellDeleteColor = token(
-  'color.blanket.danger',
-  'rgba(255, 235, 230, 0.3)',
-);
-export const tableBorderDeleteColor = token('color.border.danger', R400);
-export const tableToolbarDeleteColor = token(
-  'color.background.danger.bold',
-  R75,
-);
+export const tableCellSelectedColor = themed({
+  light: token('color.blanket.selected', akEditorTableCellBlanketSelected),
+  dark: token('color.blanket.selected', akEditorTableCellBlanketSelected),
+});
+export const tableToolbarSelectedColor = themed({
+  light: token('color.background.selected.pressed', B200),
+  dark: token('color.background.selected.pressed', B200),
+});
+export const tableBorderSelectedColor = themed({
+  light: token('color.border.focused', akEditorTableBorderSelected),
+  dark: token('color.border.focused', akEditorTableBorderSelected),
+});
+export const tableCellSelectedDeleteIconColor = themed({
+  light: token('color.icon.subtle', N300),
+  dark: token('color.icon.subtle', N300),
+});
+export const tableCellSelectedDeleteIconBackground = themed({
+  light: token('color.background.accent.gray.subtlest', N20A),
+  dark: token('color.background.accent.gray.subtlest', N20A),
+});
+export const tableCellDeleteColor = themed({
+  light: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
+  dark: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
+});
+export const tableBorderDeleteColor = themed({
+  light: token('color.border.danger', R400),
+  dark: token('color.border.danger', R400),
+});
+export const tableToolbarDeleteColor = themed({
+  light: token('color.background.danger.pressed', R75),
+  dark: token('color.background.danger.pressed', R75),
+});
+export const tableCellHoverDeleteIconColor = themed({
+  light: token('color.icon.inverse', 'white'),
+  dark: token('color.icon.inverse', 'white'),
+});
+export const tableCellHoverDeleteIconBackground = themed({
+  light: token('color.background.danger.bold', R300),
+  dark: token('color.background.danger.bold', R300),
+});
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;