@atlaskit/editor-plugin-table 5.6.5 → 5.6.7

package/src/ui/FloatingContextualButton/styles.ts

@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+
+import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+
+import { contextualMenuTriggerSize } from '../consts';
+
+export const tableFloatingCellButtonStyles = () => css`
+  > div {
+    // Sits behind button to provide surface-color background
+    background: ${token('elevation.surface', N20)};
+    border-radius: ${token('border.radius', '3px')};
+    display: flex;
+    height: ${contextualMenuTriggerSize + 2}px;
+    flex-direction: column;
+  }
+  && button {
+    background: ${token('color.background.neutral', 'none')};
+    flex-direction: column;
+    margin: ${token('space.025', '2px')};
+    outline: 2px solid ${token('elevation.surface', N0)};
+    border-radius: 1px;
+    padding: 0;
+    height: calc(100% - 4px);
+    display: flex;
+  }
+  && button:hover {
+    background: ${token('color.background.neutral.hovered', N30A)};
+  }
+  && button:active {
+    background: ${token(
+      'color.background.neutral.pressed',
+      'rgba(179, 212, 255, 0.6)',
+    )};
+  }
+  && button > span {
+    margin: 0px ${token('space.negative.050', '-4px')};
+  }
+  && span {
+    pointer-events: none;
+  }
+`;
+
+export const tableFloatingCellButtonSelectedStyles = () => css`
+  && button {
+    background: ${token('color.background.selected', N700)};
+  }
+  && button:hover {
+    background: ${token('color.background.selected.hovered', N700)};
+  }
+  && button:active {
+    background: ${token('color.background.selected.pressed', N700)};
+  }
+`;

package/src/{plugins/table/ui → 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/{plugins/table/ui → ui}/FloatingDeleteButton/DeleteButton.tsx

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

package/src/{plugins/table/ui → ui}/FloatingDeleteButton/getPopUpOptions.ts

@@ -6,7 +6,7 @@ import {
   tableToolbarSize,
 } from '../consts';
 
-import { CellSelectionType } from './types';
+import type { CellSelectionType } from './types';
 
 interface GetPopupOptions {
   left: number;

package/src/{plugins/table/ui → ui}/LayoutButton/index.tsx

@@ -1,21 +1,22 @@
 import React, { createRef } from 'react';
 
 import classnames from 'classnames';
-import { injectIntl, WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
 
-import { TableLayout } from '@atlaskit/adf-schema';
+import type { 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 { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 
 import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
-import { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 
 export interface Props {

package/src/{plugins/table/ui → 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}

package/src/{plugins/table/ui → ui}/common-styles.ts

@@ -23,7 +23,6 @@ import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
-import type { ThemeProps } from '@atlaskit/theme/types';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../types';
@@ -195,19 +194,15 @@ const breakoutWidthStyling = () => {
   `;
 };
 
-const tableBorderStyles = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => {
+const tableBorderStyles = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return `border-color: ${tableBorderDeleteColor(props)}`;
+    return `border-color: ${tableBorderDeleteColor}`;
   } else {
-    return `border: 1px solid ${tableBorderDeleteColor(props)}`;
+    return `border: 1px solid ${tableBorderDeleteColor}`;
   }
 };
 
-const tableStickyHeaderColumnControlsDecorationsStyle = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => {
+const tableStickyHeaderColumnControlsDecorationsStyle = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -217,7 +212,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
 
       .${ClassName.TABLE_STICKY}
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        border-left: 1px solid ${tableBorderColor(props)};
+        border-left: 1px solid ${tableBorderColor};
       }
 
       .${ClassName.TABLE_STICKY}
@@ -239,9 +234,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
   }
 };
 
-const tableStickyHeaderFirefoxFixStyle = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => {
+const tableStickyHeaderFirefoxFixStyle = () => {
   /*
     This is MAGIC!
     This fixes a bug which occurs in firefox when the first row becomes sticky.
@@ -290,9 +283,7 @@ const tableWrapperStyles = () => {
 };
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
-export const tableStyles = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => css`
+export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${token('color.background.neutral', N20A)};
     color: ${token('color.icon', N300)};
@@ -306,13 +297,13 @@ export const tableStyles = (
   }
 
   .ProseMirror {
-    ${tableSharedStyle(props)};
+    ${tableSharedStyle()};
     ${columnControlsLineMarker()};
-    ${hoveredDeleteButton(props)};
-    ${hoveredCell(props)};
+    ${hoveredDeleteButton()};
+    ${hoveredCell()};
     ${hoveredWarningCell};
-    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
-    ${resizeHandle(props)};
+    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine()};
+    ${resizeHandle()};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -326,15 +317,15 @@ export const tableStyles = (
       }
 
       td.${ClassName.TABLE_CELL} {
-        background-color: ${tableCellBackgroundColor(props)};
+        background-color: ${tableCellBackgroundColor};
 
         // ED-15246: Trello card is visible through a border of a table border
         // This fixes a border issue caused by relative positioned table cells
         &::after {
           height: 100%;
           content: '';
-          border-left: 1px solid ${tableBorderColor(props)};
-          border-bottom: 1px solid ${tableBorderColor(props)};
+          border-left: 1px solid ${tableBorderColor};
+          border-bottom: 1px solid ${tableBorderColor};
           position: absolute;
           right: 0px;
           top: 0px;
@@ -347,19 +338,19 @@ export const tableStyles = (
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
-      ${insertColumnButtonWrapper(props)}
+      ${insertColumnButtonWrapper()}
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
-      ${insertRowButtonWrapper(props)}
+      ${insertRowButtonWrapper()}
     }
 
-    ${dragInsertButtonWrapper(props)}
+    ${dragInsertButtonWrapper()}
 
-    ${dragCornerControlButton(props)}
+    ${dragCornerControlButton()}
 
     /* Delete button */
-    ${DeleteButton(props)}
+    ${DeleteButton()}
     /* Ends Delete button */
 
     /* sticky styles */
@@ -392,9 +383,9 @@ export const tableStyles = (
       width: ${tableToolbarSize}px;
     }
 
-    ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
+    ${tableStickyHeaderColumnControlsDecorationsStyle()}
 
-    ${tableStickyHeaderFirefoxFixStyle(props)}
+    ${tableStickyHeaderFirefoxFixStyle()}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
@@ -453,7 +444,7 @@ export const tableStyles = (
 
     tr.sticky th {
       border-bottom: ${stickyHeaderBorderBottomWidth}px solid
-        ${tableBorderColor(props)};
+        ${tableBorderColor};
       margin-right: -1px;
     }
 
@@ -522,7 +513,7 @@ export const tableStyles = (
     }
 
     ${sentinelStyles}
-    ${OverflowShadow(props)}
+    ${OverflowShadow()}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -577,8 +568,8 @@ export const tableStyles = (
     /* Breakout only works on top level unless wrapped in fragment mark */
     ${breakoutWidthStyling()}
 
-    ${columnControlsDecoration(props)};
-    ${rowControlsWrapperDotStyle(props)};
+    ${columnControlsDecoration()};
+    ${rowControlsWrapperDotStyle()};
 
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
@@ -590,7 +581,6 @@ export const tableStyles = (
         position: relative;
 
         ${InsertMarker(
-          props,
           `
           left: -11px;
           top: 9px;
@@ -611,10 +601,10 @@ export const tableStyles = (
       top: 0;
       width: ${tableToolbarSize + 1}px;
       height: ${tableToolbarSize + 1}px;
-      border: 1px solid ${tableBorderColor(props)};
+      border: 1px solid ${tableBorderColor};
       border-radius: 0;
       border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableHeaderCellBackgroundColor(props)};
+      background: ${tableHeaderCellBackgroundColor};
       box-sizing: border-box;
       padding: 0;
       :focus {
@@ -622,8 +612,8 @@ export const tableStyles = (
       }
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-color: ${tableBorderSelectedColor(props)};
-      background: ${tableToolbarSelectedColor(props)};
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -638,15 +628,15 @@ export const tableStyles = (
     }
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
-      border-color: ${tableBorderSelectedColor(props)};
-      background: ${tableToolbarSelectedColor(props)};
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
       cursor: pointer;
     }
 
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-      border-color: ${tableBorderDeleteColor(props)};
-      background: ${tableToolbarDeleteColor(props)};
+      border-color: ${tableBorderDeleteColor};
+      background: ${tableToolbarDeleteColor};
     }
 
     /* Row controls */
@@ -657,7 +647,6 @@ export const tableStyles = (
       position: relative;
 
       ${InsertMarker(
-        props,
         `
         bottom: -1px;
         left: -11px;
@@ -682,9 +671,8 @@ export const tableStyles = (
       }
 
       ${HeaderButton(
-        props,
         `
-        border-bottom: 1px solid ${tableBorderColor(props)};
+        border-bottom: 1px solid ${tableBorderColor};
         border-right: 0px;
         border-radius: 0;
         height: 100%;
@@ -835,11 +823,11 @@ export const tableStyles = (
       }
     }
 
-    ${floatingColumnControls(props)}
+    ${floatingColumnControls()}
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-      ${HeaderButtonHover(props)}
-      ${HeaderButtonDanger(props)}
+      ${HeaderButtonHover()}
+      ${HeaderButtonDanger()}
     }
 
     /* Numbered column */
@@ -857,23 +845,23 @@ export const tableStyles = (
     }
 
     .${ClassName.NUMBERED_COLUMN_BUTTON} {
-      border: 1px solid ${tableBorderColor(props)};
+      border: 1px solid ${tableBorderColor};
       box-sizing: border-box;
       margin-top: -1px;
       padding-bottom: 2px;
       padding: 10px 2px;
       text-align: center;
       font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableHeaderCellBackgroundColor(props)};
-      color: ${tableTextColor(props)};
-      border-color: ${tableBorderColor(props)};
+      background-color: ${tableHeaderCellBackgroundColor};
+      color: ${tableTextColor};
+      border-color: ${tableBorderColor};
 
       :first-child:not(style),
       style:first-child + * {
         margin-top: 0;
       }
       :last-child {
-        border-bottom: 1px solid ${tableBorderColor(props)};
+        border-bottom: 1px solid ${tableBorderColor};
       }
     }
 
@@ -908,9 +896,9 @@ export const tableStyles = (
         }
 
         .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-          border-bottom: 1px solid ${tableBorderSelectedColor(props)};
-          border-color: ${tableBorderSelectedColor(props)};
-          background-color: ${tableToolbarSelectedColor(props)};
+          border-bottom: 1px solid ${tableBorderSelectedColor};
+          border-color: ${tableBorderSelectedColor};
+          background-color: ${tableToolbarSelectedColor};
           position: relative;
           z-index: ${akEditorUnitZIndex};
           color: ${token('color.text.selected', N0)};
@@ -922,16 +910,16 @@ export const tableStyles = (
         cursor: pointer;
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
-        border-bottom: 1px solid ${tableBorderSelectedColor(props)};
-        border-color: ${tableBorderSelectedColor(props)};
-        background-color: ${tableToolbarSelectedColor(props)};
+        border-bottom: 1px solid ${tableBorderSelectedColor};
+        border-color: ${tableBorderSelectedColor};
+        background-color: ${tableToolbarSelectedColor};
         position: relative;
         z-index: ${akEditorUnitZIndex};
         color: ${token('color.text.selected', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${tableToolbarDeleteColor(props)};
-        border: 1px solid ${tableBorderDeleteColor(props)};
+        background-color: ${tableToolbarDeleteColor};
+        border: 1px solid ${tableBorderDeleteColor};
         border-left: 0;
         color: ${token('color.text.danger', R500)};
         position: relative;
@@ -992,15 +980,15 @@ export const tableStyles = (
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {
-        border: 1px solid ${tableBorderSelectedColor(props)};
+        border: 1px solid ${tableBorderSelectedColor};
       }
       .${ClassName.SELECTED_CELL}::after {
-        background: ${tableCellSelectedColor(props)};
+        background: ${tableCellSelectedColor};
         z-index: ${akEditorSmallZIndex};
       }
       th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
         td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        background: ${tableCellDeleteColor(props)};
+        background: ${tableCellDeleteColor};
         z-index: ${akEditorUnitZIndex * 100};
       }
       // ED-15246: Trello card is visible through a border of a table border
@@ -1014,7 +1002,7 @@ export const tableStyles = (
         &::after {
           height: 100%;
           width: 100%;
-          border: 1px solid ${tableBorderSelectedColor(props)};
+          border: 1px solid ${tableBorderSelectedColor};
           content: '';
           position: absolute;
           left: -1px;
@@ -1025,12 +1013,12 @@ export const tableStyles = (
           pointer-events: none;
         }
         &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles(props)};
+          ${tableBorderStyles()};
           z-index: ${akEditorUnitZIndex * 100};
         }
 
         &.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles(props)};
+          ${tableBorderStyles()};
           z-index: ${akEditorUnitZIndex * 100};
         }
       }

package/src/ui/consts.ts

@@ -0,0 +1,137 @@
+import {
+  tableCellBorderWidth,
+  tableMarginTop,
+} from '@atlaskit/editor-common/styles';
+import {
+  akEditorTableBorder,
+  akEditorTableBorderSelected,
+  akEditorTableCellBlanketDeleted,
+  akEditorTableCellBlanketSelected,
+  akEditorTableHeaderCellBackground,
+  akEditorTableToolbar,
+  akEditorTableToolbarSize,
+  akEditorUnitZIndex,
+  akRichMediaResizeZIndex,
+} from '@atlaskit/editor-shared-styles';
+import {
+  B200,
+  N0,
+  N20,
+  N200,
+  N20A,
+  N300,
+  R300,
+  R400,
+  R75,
+} from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+
+import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
+
+/**
+ * Basic colors added to prevent content overflow in table cells.
+ */
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4135
+export const tableCellBackgroundColor = token('elevation.surface', N0);
+
+export const tableHeaderCellBackgroundColor = token(
+  'color.background.accent.gray.subtlest',
+  akEditorTableHeaderCellBackground,
+);
+
+export const tableToolbarColor = token(
+  'color.background.neutral.subtle',
+  akEditorTableToolbar,
+);
+export const tableTextColor = token('color.text.subtlest', N200);
+export const tableBorderColor = token(
+  'color.background.accent.gray.subtler',
+  akEditorTableBorder,
+);
+export const tableFloatingControlsColor = token(
+  'color.background.neutral',
+  N20,
+);
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4461
+export const tableCellSelectedColor = token(
+  'color.blanket.selected',
+  akEditorTableCellBlanketSelected,
+);
+export const tableToolbarSelectedColor = token(
+  'color.background.selected.pressed',
+  B200,
+);
+export const tableBorderSelectedColor = token(
+  'color.border.focused',
+  akEditorTableBorderSelected,
+);
+export const tableCellSelectedDeleteIconColor = token(
+  'color.icon.subtle',
+  N300,
+);
+export const tableCellSelectedDeleteIconBackground = token(
+  'color.background.accent.gray.subtlest',
+  N20A,
+);
+export const tableCellDeleteColor = token(
+  'color.blanket.danger',
+  akEditorTableCellBlanketDeleted,
+);
+
+export const tableBorderDeleteColor = token('color.border.danger', R400);
+export const tableToolbarDeleteColor = token(
+  'color.background.danger.pressed',
+  R75,
+);
+export const tableCellHoverDeleteIconColor = token(
+  'color.icon.inverse',
+  'white',
+);
+export const tableCellHoverDeleteIconBackground = token(
+  'color.background.danger.bold',
+  R300,
+);
+export const tableBorderRadiusSize = 3;
+export const tablePadding = 8;
+export const tableScrollbarOffset = 15;
+export const tableMarginFullWidthMode = 2;
+export const tableInsertColumnButtonSize = 20;
+export const tableDeleteButtonSize = 16;
+export const tableDeleteButtonOffset = 6;
+export const tableToolbarSize = akEditorTableToolbarSize;
+export const tableControlsSpacing =
+  tableMarginTop + tablePadding - tableCellBorderWidth;
+export const tableInsertColumnButtonOffset = 3;
+export const layoutButtonSize = 32;
+export const lineMarkerOffsetFromColumnControls = 13;
+export const lineMarkerSize = 4;
+export const columnControlsDecorationHeight = 25;
+export const columnControlsZIndex = akEditorUnitZIndex * 10;
+export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
+export const rowControlsZIndex = akEditorUnitZIndex * 10;
+export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export const insertLineWidth = 3;
+export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
+export const resizeLineWidth = 2;
+export const resizeHandlerZIndex =
+  columnControlsZIndex + akRichMediaResizeZIndex;
+export const contextualMenuTriggerSize = 16;
+export const contextualMenuDropdownWidth = 180;
+export const stickyRowZIndex = resizeHandlerZIndex + 2;
+export const stickyRowOffsetTop = 8;
+export const stickyHeaderBorderBottomWidth = 1;
+export const tableOverflowShadowWidth = 8;
+export const tableOverflowShadowWidthWide = 32;
+
+export const dropTargetsZIndex = 14;
+
+export const TABLE_SNAP_GAP = 9;
+export const TABLE_HIGHLIGHT_GAP = 10;
+export const TABLE_HIGHLIGHT_TOLERANCE = 2;
+export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+
+export const dragMenuDropdownWidth = 240;
+export const dragTableInsertColumnButtonSize = 16;
+export const dropTargetExtendedWidth = 150;