@atlaskit/editor-plugin-table 5.6.6 → 5.6.7

package/dist/types/ui/common-styles.d.ts

@@ -1,8 +1,7 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
 export declare const tableRowHeight = 44;
-export declare const tableStyles: (props: ThemeProps & {
+export declare const tableStyles: (props: {
     featureFlags?: FeatureFlags;
 }) => import("@emotion/react").SerializedStyles;
 export declare const tableFullPageEditorStyles: import("@emotion/react").SerializedStyles;

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

@@ -1,22 +1,22 @@
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
-export declare const tableCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-surface)">;
-export declare const tableHeaderCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
-export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-subtle)">;
-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 tableCellBackgroundColor: "var(--ds-surface)";
+export declare const tableHeaderCellBackgroundColor: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableToolbarColor: "var(--ds-background-neutral-subtle)";
+export declare const tableTextColor: "var(--ds-text-subtlest)";
+export declare const tableBorderColor: "var(--ds-background-accent-gray-subtler)";
 export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
-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 tableCellSelectedColor: "var(--ds-blanket-selected)";
+export declare const tableToolbarSelectedColor: "var(--ds-background-selected-pressed)";
+export declare const tableBorderSelectedColor: "var(--ds-border-focused)";
+export declare const tableCellSelectedDeleteIconColor: "var(--ds-icon-subtle)";
+export declare const tableCellSelectedDeleteIconBackground: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
+export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
+export declare const tableToolbarDeleteColor: "var(--ds-background-danger-pressed)";
+export declare const tableCellHoverDeleteIconColor: "var(--ds-icon-inverse)";
+export declare const tableCellHoverDeleteIconBackground: "var(--ds-background-danger-bold)";
 export declare const tableBorderRadiusSize = 3;
 export declare const tablePadding = 8;
 export declare const tableScrollbarOffset = 15;

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

@@ -1,20 +1,19 @@
-import type { 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: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragCornerControlButton: (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 InsertMarker: (cssString?: string) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButton: (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 dragInsertButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const dragCornerControlButton: () => import("@emotion/react").SerializedStyles;
+export declare const insertColumnButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => 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 floatingColumnControls: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const columnControlsDecoration: (props: ThemeProps) => 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 DeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const OverflowShadow: () => import("@emotion/react").SerializedStyles;
+export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
+export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
+export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertLine: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
+export declare const insertLine: () => import("@emotion/react").SerializedStyles;

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

@@ -1,3 +1,2 @@
-import type { ThemeProps } from '@atlaskit/theme/types';
-export declare const tableFloatingCellButtonStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const tableFloatingCellButtonSelectedStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonStyles: () => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonSelectedStyles: () => import("@emotion/react").SerializedStyles;

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

@@ -1,8 +1,7 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
 export declare const tableRowHeight = 44;
-export declare const tableStyles: (props: ThemeProps & {
+export declare const tableStyles: (props: {
     featureFlags?: FeatureFlags;
 }) => import("@emotion/react").SerializedStyles;
 export declare const tableFullPageEditorStyles: import("@emotion/react").SerializedStyles;

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

@@ -1,22 +1,22 @@
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
-export declare const tableCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-surface)">;
-export declare const tableHeaderCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
-export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-subtle)">;
-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 tableCellBackgroundColor: "var(--ds-surface)";
+export declare const tableHeaderCellBackgroundColor: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableToolbarColor: "var(--ds-background-neutral-subtle)";
+export declare const tableTextColor: "var(--ds-text-subtlest)";
+export declare const tableBorderColor: "var(--ds-background-accent-gray-subtler)";
 export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
-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 tableCellSelectedColor: "var(--ds-blanket-selected)";
+export declare const tableToolbarSelectedColor: "var(--ds-background-selected-pressed)";
+export declare const tableBorderSelectedColor: "var(--ds-border-focused)";
+export declare const tableCellSelectedDeleteIconColor: "var(--ds-icon-subtle)";
+export declare const tableCellSelectedDeleteIconBackground: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
+export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
+export declare const tableToolbarDeleteColor: "var(--ds-background-danger-pressed)";
+export declare const tableCellHoverDeleteIconColor: "var(--ds-icon-inverse)";
+export declare const tableCellHoverDeleteIconBackground: "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/ui/ui-styles.d.ts

@@ -1,20 +1,19 @@
-import type { 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: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragCornerControlButton: (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 InsertMarker: (cssString?: string) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButton: (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 dragInsertButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const dragCornerControlButton: () => import("@emotion/react").SerializedStyles;
+export declare const insertColumnButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => 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 floatingColumnControls: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const columnControlsDecoration: (props: ThemeProps) => 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 DeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const OverflowShadow: () => import("@emotion/react").SerializedStyles;
+export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
+export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
+export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertLine: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
+export declare const insertLine: () => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.6.6",
+  "version": "5.6.7",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
     "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.30.0",
-    "@atlaskit/tooltip": "^18.0.0",
+    "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "classnames": "^2.2.5",

package/src/ui/FloatingContextualButton/index.tsx

@@ -17,7 +17,6 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import type { ThemeProps } from '@atlaskit/theme/types';
 
 import { toggleContextualMenu } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -83,10 +82,9 @@ const FloatingContextualButtonInner = React.memo(
 
     const button = (
       <div
-        css={(theme: ThemeProps) => [
-          tableFloatingCellButtonStyles({ theme }),
-          isContextualMenuOpen &&
-            tableFloatingCellButtonSelectedStyles({ theme }),
+        css={[
+          tableFloatingCellButtonStyles(),
+          isContextualMenuOpen && tableFloatingCellButtonSelectedStyles(),
         ]}
       >
         <ToolbarButton

package/src/ui/FloatingContextualButton/styles.ts

@@ -1,28 +1,21 @@
 import { css } from '@emotion/react';
 
-import { B75, DN0, DN60, N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import type { ThemeProps } from '@atlaskit/theme/types';
+import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { contextualMenuTriggerSize } from '../consts';
 
-export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
+export const tableFloatingCellButtonStyles = () => css`
   > div {
     // Sits behind button to provide surface-color background
     background: ${token('elevation.surface', N20)};
-    border-radius: ${borderRadius()}px;
+    border-radius: ${token('border.radius', '3px')};
     display: flex;
     height: ${contextualMenuTriggerSize + 2}px;
     flex-direction: column;
   }
   && button {
-    background: ${themed({
-      light: token('color.background.neutral', 'none'),
-      dark: token('color.background.neutral', 'none'),
-    })(props)};
+    background: ${token('color.background.neutral', 'none')};
     flex-direction: column;
     margin: ${token('space.025', '2px')};
     outline: 2px solid ${token('elevation.surface', N0)};
@@ -32,19 +25,13 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
     display: flex;
   }
   && button:hover {
-    background: ${themed({
-      light: token('color.background.neutral.hovered', N30A),
-      dark: token('color.background.neutral.hovered', DN60),
-    })(props)};
+    background: ${token('color.background.neutral.hovered', N30A)};
   }
   && button:active {
-    background: ${themed({
-      light: token(
-        'color.background.neutral.pressed',
-        'rgba(179, 212, 255, 0.6)',
-      ),
-      dark: token('color.background.neutral.pressed', B75),
-    })(props)};
+    background: ${token(
+      'color.background.neutral.pressed',
+      'rgba(179, 212, 255, 0.6)',
+    )};
   }
   && button > span {
     margin: 0px ${token('space.negative.050', '-4px')};
@@ -54,23 +41,14 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
   }
 `;
 
-export const tableFloatingCellButtonSelectedStyles = (props: ThemeProps) => css`
+export const tableFloatingCellButtonSelectedStyles = () => css`
   && button {
-    background: ${themed({
-      light: token('color.background.selected', N700),
-      dark: token('color.background.selected', DN0),
-    })(props)};
+    background: ${token('color.background.selected', N700)};
   }
   && button:hover {
-    background: ${themed({
-      light: token('color.background.selected.hovered', N700),
-      dark: token('color.background.selected.hovered', DN0),
-    })(props)};
+    background: ${token('color.background.selected.hovered', N700)};
   }
   && button:active {
-    background: ${themed({
-      light: token('color.background.selected.pressed', N700),
-      dark: token('color.background.selected.pressed', DN0),
-    })(props)};
+    background: ${token('color.background.selected.pressed', N700)};
   }
 `;

package/src/ui/FloatingContextualMenu/styles.ts

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
@@ -18,7 +17,7 @@ export const cellColourPreviewStyles = (selectedColor: string) => css`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export const tablePopupStyles = css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
-    border-radius: ${borderRadius()}px;
+    border-radius: ${token('border.radius', '3px')};
     background: ${token('elevation.surface.overlay', 'white')};
     box-shadow: ${token(
       'elevation.shadow.overlay',
@@ -42,7 +41,7 @@ export const tablePopupStyles = css`
       content: '';
       display: block;
       border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${borderRadius()}px;
+      border-radius: ${token('border.radius', '3px')};
       width: 20px;
       height: 20px;
     }

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -47,7 +47,7 @@ export default class NumberColumn extends Component<Props, any> {
               : undefined,
           borderLeft:
             isDragAndDropEnabled && tableActive
-              ? `1px solid ${tableBorderColor()}`
+              ? `1px solid ${tableBorderColor}`
               : undefined,
         }}
         contentEditable={false}