@atlaskit/editor-plugin-table 15.4.21 → 15.4.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/nodeviews/{TableComponentNext.js → TableComponent.js} +3 -3
  3. package/dist/cjs/nodeviews/TableComponentWithSharedState.js +2 -9
  4. package/dist/cjs/nodeviews/toDOM.js +1 -32
  5. package/dist/cjs/pm-plugins/table-resizing/utils/consts.js +0 -1
  6. package/dist/cjs/ui/common-styles.js +7 -14
  7. package/dist/es2019/nodeviews/{TableComponentNext.js → TableComponent.js} +3 -3
  8. package/dist/es2019/nodeviews/TableComponentWithSharedState.js +1 -6
  9. package/dist/es2019/nodeviews/toDOM.js +1 -32
  10. package/dist/es2019/pm-plugins/table-resizing/utils/consts.js +0 -1
  11. package/dist/es2019/ui/common-styles.js +39 -52
  12. package/dist/esm/nodeviews/{TableComponentNext.js → TableComponent.js} +3 -3
  13. package/dist/esm/nodeviews/TableComponentWithSharedState.js +1 -8
  14. package/dist/esm/nodeviews/toDOM.js +1 -32
  15. package/dist/esm/pm-plugins/table-resizing/utils/consts.js +0 -1
  16. package/dist/esm/ui/common-styles.js +8 -15
  17. package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts +1 -1
  18. package/dist/types/ui/icons/DragHandleDisabledIcon.d.ts +1 -1
  19. package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts +1 -1
  20. package/dist/types-ts4.5/ui/icons/DragHandleDisabledIcon.d.ts +1 -1
  21. package/package.json +9 -4
  22. package/dist/cjs/nodeviews/TableComponentLegacy.js +0 -1141
  23. package/dist/es2019/nodeviews/TableComponentLegacy.js +0 -1114
  24. package/dist/esm/nodeviews/TableComponentLegacy.js +0 -1135
  25. package/dist/types/nodeviews/TableComponentLegacy.d.ts +0 -47
  26. package/dist/types/nodeviews/TableComponentNext.d.ts +0 -47
  27. /package/dist/{types-ts4.5/nodeviews/TableComponentNext.d.ts → types/nodeviews/TableComponent.d.ts} +0 -0
  28. /package/dist/types-ts4.5/nodeviews/{TableComponentLegacy.d.ts → TableComponent.d.ts} +0 -0
package/dist/es2019/ui/common-styles.js CHANGED
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
8
8
  import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
9
9
  import { ANCHOR_VARIABLE_NAME, tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
10
10
  import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
11
- import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
11
+ import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
12
12
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
14
  import { N0, N40A, R500 } from '@atlaskit/theme/colors';
@@ -41,6 +41,12 @@ const rangeSelectionStyles = `
41
41
  }
42
42
  }
43
43
  `;
44
+ const rangeSelectionStylesForFakeBorders = `
45
+ .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} .pm-table-left-border,
46
+ .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} .pm-table-right-border {
47
+ background: ${akEditorSelectedBorderColor};
48
+ }
49
+ `;
44
50
  const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
45
51
  > .${ClassName.TABLE_STICKY_SENTINEL_TOP}, > .${ClassName.TABLE_STICKY_SENTINEL_BOTTOM} {
46
52
  position: absolute;
@@ -204,47 +210,6 @@ const tableStickyHeaderFirefoxFixStyle = () => {
204
210
  }
205
211
  };
206
212
 
207
- /**
208
- * Styles for the table scroll inline shadow
209
- * inspired by https://css-scroll-shadows.vercel.app/
210
- */
211
- const tableScrollInlineShadowStyles = () => {
212
- return css`
213
- .${ClassName.TABLE_SCROLL_INLINE_SHADOW} {
214
- --editor-table-shadow-cover: #fff;
215
- --editor-table-shadow-color: ${"var(--ds-shadow-overflow-spread, #1E1F2129)"};
216
- --editor-table-shadow-size: ${"var(--ds-space-100, 8px)"};
217
- background-image:
218
- linear-gradient(to right, var(--editor-table-shadow-cover) 33%, transparent),
219
- linear-gradient(to right, transparent, var(--editor-table-shadow-cover) 66%),
220
- linear-gradient(to right, var(--editor-table-shadow-color), transparent),
221
- linear-gradient(to left, var(--editor-table-shadow-color), transparent);
222
- background-size:
223
- calc(var(--editor-table-shadow-size) * 3) 100%,
224
- calc(var(--editor-table-shadow-size) * 3) 100%,
225
- calc(var(--editor-table-shadow-size) * 1) 100%,
226
- calc(var(--editor-table-shadow-size) * 1) 100%;
227
- background-position:
228
- left ${"var(--ds-space-300, 24px)"},
229
- right ${"var(--ds-space-300, 24px)"},
230
- left ${"var(--ds-space-300, 24px)"},
231
- right ${"var(--ds-space-300, 24px)"};
232
- background-attachment: local, local, scroll, scroll;
233
- background-repeat: no-repeat;
234
-
235
- th,
236
- td {
237
- mix-blend-mode: multiply;
238
- }
239
- }
240
-
241
- .${ClassName.TABLE_STICKY} .${ClassName.TABLE_SCROLL_INLINE_SHADOW} tr.sticky th,
242
- .${ClassName.TABLE_STICKY} .${ClassName.TABLE_SCROLL_INLINE_SHADOW} tr.sticky td {
243
- mix-blend-mode: normal;
244
- }
245
- `;
246
- };
247
-
248
213
  // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
249
214
  export const baseTableStyles = props => {
250
215
  var _props$featureFlags;
@@ -257,6 +222,7 @@ export const baseTableStyles = props => {
257
222
  ${insertLine()};
258
223
  ${resizeHandle()};
259
224
  ${rangeSelectionStyles};
225
+ ${fg('platform_editor_table_numbered_table_border') && rangeSelectionStylesForFakeBorders};
260
226
  ${viewModeSortStyles()};
261
227
  ${expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles};
262
228
 
@@ -288,8 +254,6 @@ export const baseTableStyles = props => {
288
254
  }
289
255
  }
290
256
 
291
- ${expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') && tableScrollInlineShadowStyles()}
292
-
293
257
  .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
294
258
  ${insertColumnButtonWrapper()}
295
259
  }
@@ -1167,16 +1131,27 @@ export const baseTableStyles = props => {
1167
1131
  top: ${tableMarginTop}px;
1168
1132
  }
1169
1133
 
1134
+ ${fg('platform_editor_table_sticky_header_patch_1') ? `
1170
1135
  .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} > .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
1171
1136
  /* +2px is to overlap the table border on the sides */
1172
1137
  width: calc(anchor-size(width) + 2px);
1173
1138
  height: ${tableMarginTop}px;
1174
1139
  background: ${"var(--ds-surface, #FFFFFF)"};
1140
+ top: unset;
1175
1141
  position: fixed;
1176
1142
  position-area: top center;
1177
1143
  position-visibility: anchors-visible;
1178
1144
  z-index: ${nativeStickyHeaderZIndex + 1};
1179
- }
1145
+ }` : `.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} > .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
1146
+ /* +2px is to overlap the table border on the sides */
1147
+ width: calc(anchor-size(width) + 2px);
1148
+ height: ${tableMarginTop}px;
1149
+ background: ${"var(--ds-surface, #FFFFFF)"};
1150
+ position: fixed;
1151
+ position-area: top center;
1152
+ position-visibility: anchors-visible;
1153
+ z-index: ${nativeStickyHeaderZIndex + 1};
1154
+ }`}
1180
1155
 
1181
1156
  /** Mask for content to the left of the column controls */
1182
1157
 
@@ -1205,24 +1180,36 @@ export const baseTableStyles = props => {
1205
1180
  outline: 1px solid ${tableBorderColor};
1206
1181
  border-left: 1px solid ${tableBorderColor};
1207
1182
  background: ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"};
1183
+ ${fg('platform_editor_table_sticky_header_patch_1') ? `border-top: 1px solid ${tableBorderColor};` : ``}
1208
1184
  }
1209
1185
 
1210
1186
  .${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.TABLE_SELECTED} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.HOVERED_CELL_IN_DANGER}):first-of-type::before, .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.HOVERED_CELL_IN_DANGER}, .${ClassName.COLUMN_SELECTED}):first-of-type::before {
1211
1187
  outline: none;
1212
1188
  border-left-color: ${tableBorderSelectedColor};
1189
+ ${fg('platform_editor_table_sticky_header_patch_1') ? `border-top-color: ${tableBorderSelectedColor};` : ``}
1213
1190
  background: ${tableHeaderCellSelectedColor};
1214
1191
  }
1215
1192
 
1216
- .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
1217
- outline: none;
1218
- background: ${tableCellDeleteColor};
1219
- }
1220
-
1221
- .${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
1193
+ ${fg('platform_editor_table_sticky_header_patch_1') ? `.${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:first-of-type::before, .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
1194
+ outline: none;
1195
+ border-left: unset;
1196
+ border-top: unset;
1197
+ background: ${tableCellDeleteColor};
1198
+ }
1199
+ .${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.TABLE_SELECTED}.${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th:first-of-type::before, .${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
1222
1200
  outline: none;
1223
1201
  border-left-color: ${tableBorderDeleteColor};
1202
+ border-top-color: ${tableBorderDeleteColor};
1224
1203
  background: ${tableCellDeleteColor};
1225
- }
1204
+ }` : ` .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
1205
+ outline: none;
1206
+ background: ${tableCellDeleteColor};
1207
+ }
1208
+ .${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
1209
+ outline: none;
1210
+ border-left-color: ${tableBorderDeleteColor};
1211
+ background: ${tableCellDeleteColor};
1212
+ }`}
1226
1213
 
1227
1214
  .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} .${ClassName.NATIVE_STICKY_ACTIVE} th:first-of-type::before {
1228
1215
  box-shadow: 0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"};
package/dist/esm/nodeviews/{TableComponentNext.js → TableComponent.js} RENAMED
@@ -916,7 +916,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
916
916
  }
917
917
  }), /*#__PURE__*/React.createElement("div", {
918
918
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
919
- className: classnames(ClassName.TABLE_NODE_WRAPPER, expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') && ClassName.TABLE_SCROLL_INLINE_SHADOW),
919
+ className: classnames(ClassName.TABLE_NODE_WRAPPER),
920
920
  ref: function ref(elem) {
921
921
  _this5.wrapper = elem;
922
922
  if (elem) {
@@ -963,14 +963,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
963
963
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
964
964
  className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
965
965
  "data-testid": "sticky-scrollbar-sentinel-bottom"
966
- }), expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') && /*#__PURE__*/React.createElement("div", {
966
+ }), /*#__PURE__*/React.createElement("div", {
967
967
  contentEditable: false
968
968
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
969
969
  ,
970
970
  className: ClassName.TABLE_LEFT_BORDER,
971
971
  "data-with-numbered-table": node.attrs.isNumberColumnEnabled,
972
972
  "data-testid": "table-left-border"
973
- }), expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') && /*#__PURE__*/React.createElement("div", {
973
+ }), /*#__PURE__*/React.createElement("div", {
974
974
  contentEditable: false
975
975
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
976
976
  ,
package/dist/esm/nodeviews/TableComponentWithSharedState.js CHANGED
@@ -1,18 +1,11 @@
1
1
  import React from 'react';
2
2
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { findTable } from '@atlaskit/editor-tables';
4
- import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
5
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
- import TableComponentLegacy from './TableComponentLegacy';
7
- import TableComponentNext from './TableComponentNext';
4
+ import TableComponent from './TableComponent';
8
5
 
9
6
  // Ignored via go/ees005
10
7
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
11
8
 
12
- var TableComponent = componentWithCondition(function () {
13
- return expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3');
14
- }, TableComponentNext, TableComponentLegacy);
15
-
16
9
  /**
17
10
  * Use useSharedPluginState to control re-renders from plugin dependencies
18
11
  */
package/dist/esm/nodeviews/toDOM.js CHANGED
@@ -40,37 +40,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
40
40
  if (config.allowColumnResizing) {
41
41
  colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
42
42
  }
43
-
44
- // For Chromeless editor, and nested tables in full page editor
45
- var tableContainerDivLegacy = ['div', {
46
- class: 'pm-table-container',
47
- 'data-number-column': node.attrs.isNumberColumnEnabled,
48
- 'data-layout': node.attrs.layout,
49
- 'data-testid': 'table-container'
50
- }, ['div', {
51
- class: 'pm-table-sticky-sentinel-top',
52
- 'data-testid': 'sticky-sentinel-top'
53
- }], ['div', {
54
- class: 'pm-table-row-controls-wrapper'
55
- }, ['div']], ['div', {
56
- class: 'pm-table-with-left-shadow',
57
- style: 'visibility: hidden'
58
- }], ['div', {
59
- class: 'pm-table-wrapper'
60
- }, ['table', attrs, ['span', {
61
- class: 'pm-table-shadow-sentinel-right'
62
- }], ['span', {
63
- class: 'pm-table-shadow-sentinel-left'
64
- }], colgroup, ['tbody', 0]]], ['div', {
65
- class: 'pm-table-with-right-shadow',
66
- style: 'visibility: hidden'
67
- }], ['div', {
68
- class: 'pm-table-sticky-sentinel-bottom',
69
- 'data-testid': 'sticky-sentinel-bottom'
70
- }]];
71
-
72
- // removed the left/right shadow divs
73
- var tableContainerDivNext = ['div', {
43
+ var tableContainerDiv = ['div', {
74
44
  class: 'pm-table-container',
75
45
  'data-number-column': node.attrs.isNumberColumnEnabled,
76
46
  'data-layout': node.attrs.layout,
@@ -86,7 +56,6 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
86
56
  class: 'pm-table-sticky-sentinel-bottom',
87
57
  'data-testid': 'sticky-sentinel-bottom'
88
58
  }]];
89
- var tableContainerDiv = expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
90
59
  if (!config.tableResizingEnabled || config.isNested) {
91
60
  return ['div', {
92
61
  class: 'tableView-content-wrap',
package/dist/esm/pm-plugins/table-resizing/utils/consts.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export var COLUMN_MIN_WIDTH = 48;
2
- // Remove TABLE_MAX_WIDTH_OLD when cleaning up editor_tinymce_full_width_mode experiment
3
2
  export var TABLE_FULL_WIDTH = 1800;
4
3
  export var TABLE_MAX_WIDTH = 4000;
5
4
  export var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
package/dist/esm/ui/common-styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
3
3
  /* eslint-disable @atlaskit/editor/no-re-export */
4
4
  // Entry file in package.json
5
5
 
@@ -10,7 +10,7 @@ import { css } from '@emotion/react';
10
10
  import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
11
11
  import { ANCHOR_VARIABLE_NAME, tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
12
12
  import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
13
- import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
13
+ import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
14
14
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
15
15
  import { fg } from '@atlaskit/platform-feature-flags';
16
16
  import { N0, N40A, R500 } from '@atlaskit/theme/colors';
@@ -31,6 +31,7 @@ var cornerControlHeight = tableToolbarSize + 1;
31
31
  export var insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
32
32
  export var tableRowHeight = 44;
33
33
  var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n th,td {\n ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n\n // The non-break space /00a0 in :after selector caused a table scroll issue when pressing Cmd+A to select table\n // This line is to override the content of :after selector from the shared getSelectionStyles\n &::after {\n content: '';\n }\n }\n}\n");
34
+ var rangeSelectionStylesForFakeBorders = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " .pm-table-left-border,\n.").concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " .pm-table-right-border {\n\t background: ").concat(akEditorSelectedBorderColor, ";\n}\n");
34
35
  var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n position: absolute;\n width: 100%;\n height: 1px;\n margin-top: -1px;\n // need this to avoid sentinel being focused via keyboard\n // this still allows it to be detected by intersection observer\n visibility: hidden;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: ").concat(columnControlsDecorationHeight, "px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n }\n &.").concat(ClassName.WITH_CONTROLS, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: 0px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n }\n }\n}");
35
36
  var stickyScrollbarSentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n position: absolute;\n width: 100%;\n height: 1px;\n margin-top: -1px;\n // need this to avoid sentinel being focused via keyboard\n // this still allows it to be detected by intersection observer\n visibility: hidden;\n }\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n top: ").concat(columnControlsDecorationHeight + tableRowHeight * 3, "px;\n }\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n bottom: ").concat(MAX_BROWSER_SCROLLBAR_HEIGHT, "px;\n }\n}");
36
37
  var stickyScrollbarContainerStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n width: 100%;\n display: none;\n overflow-x: auto;\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n}");
@@ -62,28 +63,20 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
62
63
  }
63
64
  };
64
65
 
65
- /**
66
- * Styles for the table scroll inline shadow
67
- * inspired by https://css-scroll-shadows.vercel.app/
68
- */
69
- var tableScrollInlineShadowStyles = function tableScrollInlineShadowStyles() {
70
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\t--editor-table-shadow-cover: #fff;\n\t\t\t--editor-table-shadow-color: ", ";\n\t\t\t--editor-table-shadow-size: ", ";\n\t\t\tbackground-image:\n\t\t\t\tlinear-gradient(to right, var(--editor-table-shadow-cover) 33%, transparent),\n\t\t\t\tlinear-gradient(to right, transparent, var(--editor-table-shadow-cover) 66%),\n\t\t\t\tlinear-gradient(to right, var(--editor-table-shadow-color), transparent),\n\t\t\t\tlinear-gradient(to left, var(--editor-table-shadow-color), transparent);\n\t\t\tbackground-size:\n\t\t\t\tcalc(var(--editor-table-shadow-size) * 3) 100%,\n\t\t\t\tcalc(var(--editor-table-shadow-size) * 3) 100%,\n\t\t\t\tcalc(var(--editor-table-shadow-size) * 1) 100%,\n\t\t\t\tcalc(var(--editor-table-shadow-size) * 1) 100%;\n\t\t\tbackground-position:\n\t\t\t\tleft ", ",\n\t\t\t\tright ", ",\n\t\t\t\tleft ", ",\n\t\t\t\tright ", ";\n\t\t\tbackground-attachment: local, local, scroll, scroll;\n\t\t\tbackground-repeat: no-repeat;\n\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tmix-blend-mode: multiply;\n\t\t\t}\n\t\t}\n\n\t\t.", " .", " tr.sticky th,\n\t\t.", " .", " tr.sticky td {\n\t\t\tmix-blend-mode: normal;\n\t\t}\n\t"])), ClassName.TABLE_SCROLL_INLINE_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", ClassName.TABLE_STICKY, ClassName.TABLE_SCROLL_INLINE_SHADOW, ClassName.TABLE_STICKY, ClassName.TABLE_SCROLL_INLINE_SHADOW);
71
- };
72
-
73
66
  // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
74
67
  export var baseTableStyles = function baseTableStyles(props) {
75
68
  var _props$featureFlags;
76
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t", "\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: calc(", " - 5);\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t", "\n\n\t.", ".sticky {\n\t\tborder-top: ", "px\n\t\t\tsolid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; /* stop overflow flash & set correct height in update-overflow-shadows.ts */\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", "\n\t\t\t2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t", "\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t", "\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " > .", " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", "px;\n\t\theight: 100%;\n\t\tmargin-left: -", "px;\n\t\tmargin-top: -", "px;\n\t\toutline: 1px solid ", ";\n\t\tborder-left: 1px solid ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, viewModeSortStyles(), expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') && tableScrollInlineShadowStyles(), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? stickyRowOffsetTop : stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t") : "\n \t.".concat(ClassName.TABLE_STICKY, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? stickyRowOffsetTop : stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t"), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, ClassName.NESTED_TABLE_WITH_CONTROLS, ClassName.NESTED_TABLE_WITH_CONTROLS, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.NATIVE_STICKY, tableMarginTop, akEditorTableCellOnStickyHeaderZIndex, tableBorderColor, tableBorderColor, ClassName.NATIVE_STICKY_ACTIVE, tableBorderColor, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, "var(--ds-surface, #FFFFFF)", stickyRowZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, aboveNativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, belowNativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableColumnControlsHeight, ClassName.NATIVE_STICKY, akEditorTableNumberColumnWidth, akEditorTableNumberColumnWidth, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, ClassName.WITH_CONTROLS, ClassName.NATIVE_STICKY, tableMarginTop, ClassName.WITH_CONTROLS, tableControlsSpacing, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing : tableControlsSpacing + 2, "px;\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing : tableControlsSpacing + 2, "px;\n\t\t}\n\t\t"), ClassName.CORNER_CONTROLS, fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing - tableToolbarSize : tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n border-bottom: 1px solid ".concat(tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.DRAG_ROW_CONTROLS, rowControlsZIndex + 4, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, tableColumnControlsHeight, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(10) : "10px", expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(14) : relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, " {\n\t\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t/* the extra pixel is accounting for borders */\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.TABLE_STICKY, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t/* the extra pixel is accounting for borders */\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t"), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? ".tableView-content-wrap.danger {\n\t\t:not(.".concat(ClassName.IS_RESIZING, ") .").concat(ClassName.WITH_CONTROLS, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\tbackground-color: ").concat(tableToolbarDeleteColor, ";\n\t\t\t\tborder: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", "var(--ds-text-danger, ".concat(R500, ")"), ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ").concat(akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t}") : '', ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, ClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(tableToolbarSize, "px;\n\t\t"), ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, "var(--ds-surface, #FFFFFF)", nativeStickyHeaderZIndex + 1, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableNumberColumnWidth + dragRowControlsWidth, akEditorTableNumberColumnWidth + dragRowControlsWidth, tableMarginTop, "var(--ds-surface, #FFFFFF)", nativeStickyHeaderZIndex - 1, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, akEditorTableNumberColumnWidth - 1, akEditorTableNumberColumnWidth, stickyRowOffsetTop, tableBorderColor, tableBorderColor, "var(--ds-background-accent-gray-subtlest, #F0F1F2)", ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_SELECTED, tableBorderSelectedColor, tableHeaderCellSelectedColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_SELECTED, tableCellDeleteColor, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, tableBorderDeleteColor, tableCellDeleteColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.NESTED_TABLE_WITH_CONTROLS, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
69
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t", "\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: calc(", " - 5);\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t", "\n\n\t.", ".sticky {\n\t\tborder-top: ", "px\n\t\t\tsolid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; /* stop overflow flash & set correct height in update-overflow-shadows.ts */\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", "\n\t\t\t2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t", "\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t", "\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t", "\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", "px;\n\t\theight: 100%;\n\t\tmargin-left: -", "px;\n\t\tmargin-top: -", "px;\n\t\toutline: 1px solid ", ";\n\t\tborder-left: 1px solid ", ";\n\t\tbackground: ", ";\n\t\t", "\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t}\n\n\t", "\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, fg('platform_editor_table_numbered_table_border') && rangeSelectionStylesForFakeBorders, viewModeSortStyles(), expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? stickyRowOffsetTop : stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t") : "\n \t.".concat(ClassName.TABLE_STICKY, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? stickyRowOffsetTop : stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t"), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, ClassName.NESTED_TABLE_WITH_CONTROLS, ClassName.NESTED_TABLE_WITH_CONTROLS, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.NATIVE_STICKY, tableMarginTop, akEditorTableCellOnStickyHeaderZIndex, tableBorderColor, tableBorderColor, ClassName.NATIVE_STICKY_ACTIVE, tableBorderColor, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, "var(--ds-surface, #FFFFFF)", stickyRowZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, aboveNativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, belowNativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableColumnControlsHeight, ClassName.NATIVE_STICKY, akEditorTableNumberColumnWidth, akEditorTableNumberColumnWidth, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, ClassName.WITH_CONTROLS, ClassName.NATIVE_STICKY, tableMarginTop, ClassName.WITH_CONTROLS, tableControlsSpacing, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing : tableControlsSpacing + 2, "px;\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing : tableControlsSpacing + 2, "px;\n\t\t}\n\t\t"), ClassName.CORNER_CONTROLS, fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing - tableToolbarSize : tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n border-bottom: 1px solid ".concat(tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.DRAG_ROW_CONTROLS, rowControlsZIndex + 4, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, tableColumnControlsHeight, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(10) : "10px", expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(14) : relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, " {\n\t\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t/* the extra pixel is accounting for borders */\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.TABLE_STICKY, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t/* the extra pixel is accounting for borders */\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t"), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? ".tableView-content-wrap.danger {\n\t\t:not(.".concat(ClassName.IS_RESIZING, ") .").concat(ClassName.WITH_CONTROLS, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\tbackground-color: ").concat(tableToolbarDeleteColor, ";\n\t\t\t\tborder: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", "var(--ds-text-danger, ".concat(R500, ")"), ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ").concat(akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t}") : '', ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, ClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(tableToolbarSize, "px;\n\t\t"), ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, fg('platform_editor_table_sticky_header_patch_1') ? "\n\t.".concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ").concat(tableMarginTop, "px;\n\t\tbackground: ", "var(--ds-surface, #FFFFFF)", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ").concat(nativeStickyHeaderZIndex + 1, ";\n\t}") : ".".concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ").concat(tableMarginTop, "px;\n\t\tbackground: ", "var(--ds-surface, #FFFFFF)", ";\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ").concat(nativeStickyHeaderZIndex + 1, ";\n\t}"), ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableNumberColumnWidth + dragRowControlsWidth, akEditorTableNumberColumnWidth + dragRowControlsWidth, tableMarginTop, "var(--ds-surface, #FFFFFF)", nativeStickyHeaderZIndex - 1, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, akEditorTableNumberColumnWidth - 1, akEditorTableNumberColumnWidth, stickyRowOffsetTop, tableBorderColor, tableBorderColor, "var(--ds-background-accent-gray-subtlest, #F0F1F2)", fg('platform_editor_table_sticky_header_patch_1') ? "border-top: 1px solid ".concat(tableBorderColor, ";") : "", ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_SELECTED, tableBorderSelectedColor, fg('platform_editor_table_sticky_header_patch_1') ? "border-top-color: ".concat(tableBorderSelectedColor, ";") : "", tableHeaderCellSelectedColor, fg('platform_editor_table_sticky_header_patch_1') ? ".".concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(ClassName.HOVERED_CELL_IN_DANGER, ":first-of-type::before, .").concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(ClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(ClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\toutline: none;\n\t\t\tborder-left: unset;\n\t\t\tborder-top: unset;\n\t\t\tbackground: ").concat(tableCellDeleteColor, ";\n\t\t}\n\t\t.").concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(ClassName.TABLE_SELECTED, ".").concat(ClassName.HOVERED_DELETE_BUTTON, " .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type::before, .").concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(ClassName.HOVERED_DELETE_BUTTON, " .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(ClassName.SELECTED_CELL, ":not(.").concat(ClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ").concat(tableBorderDeleteColor, ";\n\t\tborder-top-color: ").concat(tableBorderDeleteColor, ";\n\t\tbackground: ").concat(tableCellDeleteColor, ";\n\t\t}") : "\t.".concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(ClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(ClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tbackground: ").concat(tableCellDeleteColor, ";\n\t\t\t}\n\t\t\t.").concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(ClassName.HOVERED_DELETE_BUTTON, " .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(ClassName.SELECTED_CELL, ":not(.").concat(ClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tborder-left-color: ").concat(tableBorderDeleteColor, ";\n\t\t\t\tbackground: ").concat(tableCellDeleteColor, ";\n\t\t}"), ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.NESTED_TABLE_WITH_CONTROLS, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
77
70
  };
78
71
 
79
72
  // TODO: DSP-4139 - Remove this when we have a better solution for the table toolbar
80
73
  export var tableStyles = function tableStyles(props) {
81
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
74
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
82
75
  };
83
76
 
84
77
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
85
- export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
78
+ export var tableFullPageEditorStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
86
79
 
87
80
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
88
- export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
89
- var tableAnchorStyles = css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t.pm-table-with-controls .pm-table-wrapper-no-overflow [data-prosemirror-node-name='tableHeader'] {\n\t\tanchor-name: var(", ", attr(data-node-anchor type(<custom-ident>)));\n\t}\n"])), ANCHOR_VARIABLE_NAME);
81
+ export var tableCommentEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
82
+ var tableAnchorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.pm-table-with-controls .pm-table-wrapper-no-overflow [data-prosemirror-node-name='tableHeader'] {\n\t\tanchor-name: var(", ", attr(data-node-anchor type(<custom-ident>)));\n\t}\n"])), ANCHOR_VARIABLE_NAME);
package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts CHANGED
@@ -6,5 +6,5 @@ interface Props {
6
6
  marginTop?: number;
7
7
  width?: number;
8
8
  }
9
- export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop }: Props) => React.JSX.Element;
9
+ export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop, }: Props) => React.JSX.Element;
10
10
  export {};
package/dist/types/ui/icons/DragHandleDisabledIcon.d.ts CHANGED
@@ -2,5 +2,5 @@ import React from 'react';
2
2
  interface DragHandleDisabledIconProps {
3
3
  style?: React.CSSProperties;
4
4
  }
5
- export declare const DragHandleDisabledIcon: ({ style }: DragHandleDisabledIconProps) => React.JSX.Element;
5
+ export declare const DragHandleDisabledIcon: ({ style, }: DragHandleDisabledIconProps) => React.JSX.Element;
6
6
  export {};
package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts CHANGED
@@ -6,5 +6,5 @@ interface Props {
6
6
  marginTop?: number;
7
7
  width?: number;
8
8
  }
9
- export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop }: Props) => React.JSX.Element;
9
+ export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop, }: Props) => React.JSX.Element;
10
10
  export {};
package/dist/types-ts4.5/ui/icons/DragHandleDisabledIcon.d.ts CHANGED
@@ -2,5 +2,5 @@ import React from 'react';
2
2
  interface DragHandleDisabledIconProps {
3
3
  style?: React.CSSProperties;
4
4
  }
5
- export declare const DragHandleDisabledIcon: ({ style }: DragHandleDisabledIconProps) => React.JSX.Element;
5
+ export declare const DragHandleDisabledIcon: ({ style, }: DragHandleDisabledIconProps) => React.JSX.Element;
6
6
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "15.4.21",
3
+ "version": "15.4.22",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -52,13 +52,12 @@
52
52
  "@atlaskit/insm": "^0.2.0",
53
53
  "@atlaskit/menu": "^8.4.0",
54
54
  "@atlaskit/platform-feature-flags": "^1.1.0",
55
- "@atlaskit/platform-feature-flags-react": "^0.4.0",
56
55
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
57
56
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
58
57
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
59
58
  "@atlaskit/primitives": "^16.4.0",
60
59
  "@atlaskit/theme": "^21.0.0",
61
- "@atlaskit/tmp-editor-statsig": "^15.1.0",
60
+ "@atlaskit/tmp-editor-statsig": "^15.7.0",
62
61
  "@atlaskit/toggle": "^15.1.0",
63
62
  "@atlaskit/tokens": "^8.4.0",
64
63
  "@atlaskit/tooltip": "^20.11.0",
@@ -71,7 +70,7 @@
71
70
  "uuid": "^3.1.0"
72
71
  },
73
72
  "peerDependencies": {
74
- "@atlaskit/editor-common": "^110.40.0",
73
+ "@atlaskit/editor-common": "^110.41.0",
75
74
  "react": "^18.2.0",
76
75
  "react-dom": "^18.2.0",
77
76
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -144,11 +143,17 @@
144
143
  "platform_editor_table_height_analytics": {
145
144
  "type": "boolean"
146
145
  },
146
+ "platform_editor_table_sticky_header_patch_1": {
147
+ "type": "boolean"
148
+ },
147
149
  "platform_editor_table_height_analytics_event": {
148
150
  "type": "boolean"
149
151
  },
150
152
  "platform_editor_ai_aifc_patch_ga": {
151
153
  "type": "boolean"
154
+ },
155
+ "platform_editor_table_numbered_table_border": {
156
+ "type": "boolean"
152
157
  }
153
158
  }
154
159
  }