@atlaskit/editor-plugin-table 2.3.0 → 2.4.0

package/src/plugins/table/transforms/split.ts

@@ -1,8 +1,8 @@
 import { Node as ProseMirrorNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import { CellAttributes } from '@atlaskit/adf-schema';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 /**
  * Helper to split all the cells in a range of columns

package/src/plugins/table/types.ts

@@ -1,6 +1,5 @@
 import { Node as PmNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
 import { DecorationSet } from 'prosemirror-view';
 import { IntlShape } from 'react-intl-next';
 
@@ -10,11 +9,12 @@ import {
   TableLayout,
   tablePrefixSelector,
 } from '@atlaskit/adf-schema';
-import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
-
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+
 import type tablePlugin from './index';
 
 export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;

package/src/plugins/table/ui/FloatingContextualButton/FixedButton.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+
 import rafSchedule from 'raf-schd';
+import { createPortal } from 'react-dom';
 
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+
 import { RowStickyState } from '../../pm-plugins/sticky-headers';
-import { insertColumnButtonOffset } from '../common-styles';
 import { TableCssClassName as ClassName } from '../../types';
+import { insertColumnButtonOffset } from '../common-styles';
 
 export const BUTTON_WIDTH = 20;
 

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

@@ -1,33 +1,34 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 
+import { jsx } from '@emotion/react';
+import { Node as PMNode } from 'prosemirror-model';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
-import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+import { injectIntl, WrappedComponentProps } from 'react-intl-next';
 
 import { TableLayout } from '@atlaskit/adf-schema';
+import {
+  ACTION_SUBJECT,
+  DispatchAnalyticsEvent,
+} from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-
-import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { ThemeProps } from '@atlaskit/theme/types';
 
 import { toggleContextualMenu } from '../../commands';
 import { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
-import FixedButton from './FixedButton';
 
-import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import FixedButton from './FixedButton';
 import {
-  tableFloatingCellButtonStyles,
   tableFloatingCellButtonSelectedStyles,
+  tableFloatingCellButtonStyles,
 } from './styles';
-import { Node as PMNode } from 'prosemirror-model';
-import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import { ThemeProps } from '@atlaskit/theme/types';
 
 export interface Props {
   editorView: EditorView;

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

@@ -1,10 +1,12 @@
 import { css } from '@emotion/react';
+
 import { B75, DN0, DN60, N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { contextualMenuTriggerSize } from '../consts';
-import { token } from '@atlaskit/tokens';
 import { themed } from '@atlaskit/theme/components';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { ThemeProps } from '@atlaskit/theme/types';
+import { token } from '@atlaskit/tokens';
+
+import { contextualMenuTriggerSize } from '../consts';
 
 export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
   > div {

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -1,50 +1,49 @@
 /** @jsx jsx */
 import { Component } from 'react';
+
 import { jsx } from '@emotion/react';
-import { Rect } from '@atlaskit/editor-tables/table-map';
-import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import { splitCell } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import {
   defineMessages,
-  WrappedComponentProps,
   injectIntl,
+  WrappedComponentProps,
 } from 'react-intl-next';
 
+type DropdownItem = MenuItem & {
+  value: {
+    name: string;
+  };
+};
+
+import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   addColumnAfter,
   addRowAfter,
   backspace,
   tooltip,
 } from '@atlaskit/editor-common/keymaps';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import {
-  ColorPalette,
   backgroundPaletteTooltipMessages,
   cellBackgroundColorPalette,
+  ColorPalette,
 } from '@atlaskit/editor-common/ui-color';
-import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import {
   ArrowKeyNavigationType,
   DropdownMenu,
 } from '@atlaskit/editor-common/ui-menu';
-
-import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { cellColourPreviewStyles } from './styles';
 import { closestElement } from '@atlaskit/editor-common/utils';
-
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
-
-import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
-type DropdownItem = MenuItem & {
-  value: {
-    name: string;
-  };
-};
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+import { splitCell } from '@atlaskit/editor-tables/utils';
 
 import {
   clearHoverSelection,
@@ -56,6 +55,7 @@ import {
 import {
   deleteColumnsWithAnalytics,
   deleteRowsWithAnalytics,
+  distributeColumnsWidthsWithAnalytics,
   emptyMultipleCellsWithAnalytics,
   insertColumnWithAnalytics,
   insertRowWithAnalytics,
@@ -63,21 +63,20 @@ import {
   setColorWithAnalytics,
   sortColumnWithAnalytics,
   splitCellWithAnalytics,
-  distributeColumnsWidthsWithAnalytics,
 } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-resizing/utils/resize-state';
 import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import {
   getMergedCellsPositions,
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
 } from '../../utils';
-import tableMessages from '../messages';
 import { contextualMenuDropdownWidth } from '../consts';
-import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-resizing/utils/resize-state';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import tableMessages from '../messages';
+
+import { cellColourPreviewStyles } from './styles';
 
 export const messages = defineMessages({
   cellBackground: {

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

@@ -1,17 +1,21 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-
 import { EditorState } from 'prosemirror-state';
 import { findDomRefAtPos } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import {
   findCellRectClosestToPos,
   getSelectionRect,
   isSelectionType,
 } from '@atlaskit/editor-tables/utils';
-import { EditorView } from 'prosemirror-view';
-
-import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { pluginKey } from '../../pm-plugins/plugin-key';
@@ -20,14 +24,9 @@ import {
   contextualMenuDropdownWidth,
   contextualMenuTriggerSize,
 } from '../consts';
-import { tablePopupStyles } from './styles';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
 import ContextualMenu from './ContextualMenu';
+import { tablePopupStyles } from './styles';
 
 // offset of the contextual menu dropdown
 const calculateOffset = (targetCellRef: HTMLElement, state: EditorState) => {

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

@@ -1,17 +1,21 @@
 import { css } from '@emotion/react';
+
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
-import { contextualMenuDropdownWidth } from '../consts';
-import { TableCssClassName as ClassName } from '../../types';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
+import { TableCssClassName as ClassName } from '../../types';
+import { contextualMenuDropdownWidth } from '../consts';
+
 export const cellColourPreviewStyles = (selectedColor: string) => css`
   &::before {
     background: ${selectedColor};
   }
 `;
 
+// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
+// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export const tablePopupStyles = css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${borderRadius()}px;
@@ -24,7 +28,7 @@ export const tablePopupStyles = css`
     position: absolute;
     top: 0;
     left: ${contextualMenuDropdownWidth}px;
-    padding: 8px;
+    padding: ${token('space.100', '8px')};
 
     > div {
       padding: 0;
@@ -45,7 +49,7 @@ export const tablePopupStyles = css`
 
     &::after {
       content: '›';
-      margin-left: 4px;
+      margin-left: ${token('space.050', '4px')};
       line-height: 20px;
       color: ${token('color.icon', N90)};
     }

package/src/plugins/table/ui/FloatingDeleteButton/DeleteButton.tsx

@@ -1,8 +1,11 @@
 import React, { SyntheticEvent } from 'react';
 
-import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+import {
+  injectIntl,
+  MessageDescriptor,
+  WrappedComponentProps,
+} from 'react-intl-next';
 
-import { MessageDescriptor } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
 export interface ButtonProps {

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

@@ -1,19 +1,20 @@
 import React, { Component, SyntheticEvent } from 'react';
 
 import { Selection } from 'prosemirror-state';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import {
-  getSelectionRect,
-  isTableSelected,
-} from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import { createPortal } from 'react-dom';
 
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import {
+  getSelectionRect,
+  isTableSelected,
+} from '@atlaskit/editor-tables/utils';
 
-import { closestElement } from '@atlaskit/editor-common/utils';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import {
   deleteColumnsWithAnalytics,
@@ -28,13 +29,12 @@ import {
   getRowDeleteButtonParams,
   getRowHeights,
 } from '../../utils';
-import tableMessages from '../messages';
 import { stickyRowZIndex } from '../consts';
+import tableMessages from '../messages';
 
 import DeleteButton from './DeleteButton';
 import getPopupOptions from './getPopUpOptions';
 import { CellSelectionType } from './types';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 
 export interface Props {
   editorView: EditorView;

package/src/plugins/table/ui/FloatingInsertButton/InsertButton.tsx

@@ -1,17 +1,16 @@
 import React, { SyntheticEvent } from 'react';
 
-import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+import { injectIntl, WrappedComponentProps } from 'react-intl-next';
 
+import * as keymaps from '@atlaskit/editor-common/keymaps';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
+import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import Tooltip from '@atlaskit/tooltip';
 
-import * as keymaps from '@atlaskit/editor-common/keymaps';
-
-import { closestElement } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../../types';
-import tableMessages from '../messages';
 import { tableToolbarSize } from '../consts';
+import tableMessages from '../messages';
 
 export interface ButtonProps {
   type: 'row' | 'column';

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

@@ -1,17 +1,27 @@
 import React from 'react';
 
 import { Node as PmNode } from 'prosemirror-model';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findDomRefAtPos } from 'prosemirror-utils';
-import { findTable } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
-import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+import { injectIntl, WrappedComponentProps } from 'react-intl-next';
 
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import {
+  ACTION,
+  ACTION_SUBJECT,
+  AnalyticsEventPayload,
+  CONTENT_COMPONENT,
+  DispatchAnalyticsEvent,
+  EVENT_TYPE,
+  INPUT_METHOD,
+} from '@atlaskit/editor-common/analytics';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
-
 import { closestElement } from '@atlaskit/editor-common/utils';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
 import {
   insertColumnWithAnalytics,
   insertRowWithAnalytics,
@@ -21,12 +31,6 @@ import { checkIfNumberColumnEnabled } from '../../utils';
 
 import getPopupOptions from './getPopupOptions';
 import InsertButton from './InsertButton';
-import {
-  DispatchAnalyticsEvent,
-  AnalyticsEventPayload,
-} from '@atlaskit/editor-common/analytics';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 
 export interface Props {
   editorView: EditorView;
@@ -44,12 +48,6 @@ export interface Props {
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
-import {
-  ACTION,
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-  CONTENT_COMPONENT,
-} from '@atlaskit/editor-common/analytics';
 
 export class FloatingInsertButton extends React.Component<
   Props & WrappedComponentProps,

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

@@ -1,22 +1,22 @@
 import React, { createRef } from 'react';
 
 import classnames from 'classnames';
+import { findDomRefAtPos } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
-import { WrappedComponentProps, injectIntl } from 'react-intl-next';
+import { injectIntl, WrappedComponentProps } from 'react-intl-next';
 
 import { TableLayout } from '@atlaskit/adf-schema';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import commonMessages from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { PopupPosition } from '@atlaskit/editor-common/ui';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 
-import commonMessages from '@atlaskit/editor-common/messages';
-import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
-import { TableCssClassName as ClassName } from '../../types';
 import { RowStickyState } from '../../pm-plugins/sticky-headers';
-import { findDomRefAtPos } from 'prosemirror-utils';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { TableCssClassName as ClassName } from '../../types';
 
 export interface Props {
   editorView: EditorView;

package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx

@@ -1,15 +1,16 @@
 import React, { Component } from 'react';
+
+import classnames from 'classnames';
+import { EditorView } from 'prosemirror-view';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { defineMessages, injectIntl } from 'react-intl-next';
 
-import classnames from 'classnames';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findTable,
   isTableSelected,
   selectTable,
 } from '@atlaskit/editor-tables/utils';
-import { EditorView } from 'prosemirror-view';
 
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';

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

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 
 import { Selection } from 'prosemirror-state';
-import { isRowSelected } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 
+import { isRowSelected } from '@atlaskit/editor-tables/utils';
+
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';

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

@@ -3,18 +3,17 @@ import React, { Component } from 'react';
 import { Selection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 
-import { browser } from '@atlaskit/editor-common/utils';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { browser } from '@atlaskit/editor-common/utils';
 
 import { hoverRows, selectRow } from '../../commands';
 import { RowStickyState } from '../../pm-plugins/sticky-headers';
-
 import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { RowControls } from './RowControls';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
 export interface Props {
   editorView: EditorView;

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

@@ -5,66 +5,65 @@ import {
   tableSharedStyle,
 } from '@atlaskit/editor-common/styles';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import { fontSize } from '@atlaskit/theme/constants';
-import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
 import {
-  SelectionStyle,
-  getSelectionStyles,
+  akEditorSelectedNodeClassName,
   akEditorSmallZIndex,
-  akEditorTableNumberColumnWidth,
   akEditorStickyHeaderZIndex,
+  akEditorTableNumberColumnWidth,
   akEditorTableToolbarSize,
   akEditorUnitZIndex,
-  akEditorSelectedNodeClassName,
+  getSelectionStyles,
   relativeFontSizeToBase16,
+  SelectionStyle,
 } from '@atlaskit/editor-shared-styles';
-
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
+import { ThemeProps } from '@atlaskit/theme/types';
+import { token } from '@atlaskit/tokens';
+
 import { TableCssClassName as ClassName } from '../types';
 
 import {
-  tableCellBackgroundColor,
-  tableHeaderCellBackgroundColor,
+  columnControlsDecorationHeight,
+  resizeHandlerAreaWidth,
+  resizeLineWidth,
+  stickyHeaderBorderBottomWidth,
+  stickyRowOffsetTop,
+  stickyRowZIndex,
   tableBorderColor,
-  tableCellSelectedColor,
-  tableToolbarSelectedColor,
-  tableBorderSelectedColor,
-  tableCellDeleteColor,
   tableBorderDeleteColor,
-  tableToolbarDeleteColor,
   tableBorderRadiusSize,
+  tableBorderSelectedColor,
+  tableCellBackgroundColor,
+  tableCellDeleteColor,
+  tableCellSelectedColor,
+  tableControlsSpacing,
+  tableHeaderCellBackgroundColor,
+  tableInsertColumnButtonSize,
   tablePadding,
   tableScrollbarOffset,
-  resizeHandlerAreaWidth,
-  resizeLineWidth,
-  tableToolbarSize,
-  tableInsertColumnButtonSize,
-  tableControlsSpacing,
   tableTextColor,
-  stickyRowZIndex,
-  columnControlsDecorationHeight,
-  stickyRowOffsetTop,
-  stickyHeaderBorderBottomWidth,
+  tableToolbarDeleteColor,
+  tableToolbarSelectedColor,
+  tableToolbarSize,
 } from './consts';
-
 import {
+  columnControlsDecoration,
+  columnControlsLineMarker,
+  DeleteButton,
   HeaderButton,
-  HeaderButtonHover,
   HeaderButtonDanger,
+  HeaderButtonHover,
+  hoveredCell,
+  hoveredDeleteButton,
+  hoveredWarningCell,
   insertColumnButtonWrapper,
+  InsertMarker,
   insertRowButtonWrapper,
-  columnControlsLineMarker,
-  DeleteButton,
   OverflowShadow,
-  columnControlsDecoration,
-  hoveredDeleteButton,
-  hoveredCell,
-  hoveredWarningCell,
   resizeHandle,
-  InsertMarker,
 } from './ui-styles';
-import { ThemeProps } from '@atlaskit/theme/types';
-import { token } from '@atlaskit/tokens';
 
 const cornerControlHeight = tableToolbarSize + 1;
 

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

@@ -1,14 +1,3 @@
-import {
-  B200,
-  B300,
-  N20,
-  R400,
-  R75,
-  DN400,
-  N200,
-  DN30,
-  N0,
-} from '@atlaskit/theme/colors';
 import {
   tableCellBorderWidth,
   tableMarginTop,
@@ -22,12 +11,22 @@ import {
   akEditorUnitZIndex,
   akRichMediaResizeZIndex,
 } from '@atlaskit/editor-shared-styles';
+import {
+  B200,
+  B300,
+  DN30,
+  DN400,
+  N0,
+  N20,
+  N200,
+  R400,
+  R75,
+} from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
-import { themed } from '@atlaskit/theme/components';
-
 /**
  * Basic colors added to prevent content overflow in table cells.
  */