@atlaskit/editor-plugin-table 22.2.11 → 22.2.13
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.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/pm-plugins/active-cell-highlight/plugin.js +86 -0
- package/dist/cjs/tablePlugin.js +21 -12
- package/dist/cjs/types/index.js +2 -1
- package/dist/cjs/ui/common-styles.js +10 -7
- package/dist/es2019/pm-plugins/active-cell-highlight/plugin.js +80 -0
- package/dist/es2019/tablePlugin.js +7 -0
- package/dist/es2019/types/index.js +2 -1
- package/dist/es2019/ui/common-styles.js +19 -0
- package/dist/esm/pm-plugins/active-cell-highlight/plugin.js +80 -0
- package/dist/esm/tablePlugin.js +9 -0
- package/dist/esm/types/index.js +2 -1
- package/dist/esm/ui/common-styles.js +10 -7
- package/dist/types/pm-plugins/active-cell-highlight/plugin.d.ts +11 -0
- package/dist/types/types/index.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/active-cell-highlight/plugin.d.ts +11 -0
- package/dist/types-ts4.5/types/index.d.ts +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 22.2.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 22.2.12
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`7f1df88caac2a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f1df88caac2a) -
|
|
14
|
+
Add active cell highlight to table cells - highlights the current table cell when cursor is inside
|
|
15
|
+
it
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 22.2.11
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createPlugin = exports.activeCellHighlightPluginKey = void 0;
|
|
7
|
+
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
8
|
+
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
|
+
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
10
|
+
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
11
|
+
var _utils = require("@atlaskit/editor-tables/utils");
|
|
12
|
+
var _types = require("../../types");
|
|
13
|
+
var EMPTY_STATE = {
|
|
14
|
+
cellPos: -1,
|
|
15
|
+
decorationSet: _view.DecorationSet.empty
|
|
16
|
+
};
|
|
17
|
+
var activeCellHighlightPluginKey = exports.activeCellHighlightPluginKey = new _state.PluginKey('tableActiveCellHighlight');
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Returns the position of the cell containing the cursor, or -1 if the cursor
|
|
21
|
+
* is not in a table cell or the selection is a CellSelection.
|
|
22
|
+
*/
|
|
23
|
+
var getActiveCellPos = function getActiveCellPos(state) {
|
|
24
|
+
if (state.selection instanceof _cellSelection.CellSelection) {
|
|
25
|
+
return -1;
|
|
26
|
+
}
|
|
27
|
+
try {
|
|
28
|
+
var cell = (0, _utils.findCellClosestToPos)(state.selection.$from);
|
|
29
|
+
return cell ? cell.pos : -1;
|
|
30
|
+
} catch (_unused) {
|
|
31
|
+
return -1;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
var buildState = function buildState(cellPos, state) {
|
|
35
|
+
if (cellPos === -1) {
|
|
36
|
+
return EMPTY_STATE;
|
|
37
|
+
}
|
|
38
|
+
try {
|
|
39
|
+
var cell = state.doc.nodeAt(cellPos);
|
|
40
|
+
if (!cell) {
|
|
41
|
+
return EMPTY_STATE;
|
|
42
|
+
}
|
|
43
|
+
var decoration = _view.Decoration.node(cellPos, cellPos + cell.nodeSize, {
|
|
44
|
+
class: _types.TableCssClassName.ACTIVE_CURSOR_CELL
|
|
45
|
+
});
|
|
46
|
+
return {
|
|
47
|
+
cellPos: cellPos,
|
|
48
|
+
decorationSet: _view.DecorationSet.create(state.doc, [decoration])
|
|
49
|
+
};
|
|
50
|
+
} catch (_unused2) {
|
|
51
|
+
return EMPTY_STATE;
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
var createPlugin = exports.createPlugin = function createPlugin() {
|
|
55
|
+
return new _safePlugin.SafePlugin({
|
|
56
|
+
key: activeCellHighlightPluginKey,
|
|
57
|
+
state: {
|
|
58
|
+
init: function init(_, state) {
|
|
59
|
+
return buildState(getActiveCellPos(state), state);
|
|
60
|
+
},
|
|
61
|
+
apply: function apply(tr, prev, _oldState, newState) {
|
|
62
|
+
if (tr.docChanged) {
|
|
63
|
+
// Doc changed — always rebuild since positions may have shifted
|
|
64
|
+
return buildState(getActiveCellPos(newState), newState);
|
|
65
|
+
}
|
|
66
|
+
if (!tr.selectionSet) {
|
|
67
|
+
// Neither doc nor selection changed — nothing to do
|
|
68
|
+
return prev;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Selection changed — only rebuild if cursor moved to a different cell
|
|
72
|
+
var nextCellPos = getActiveCellPos(newState);
|
|
73
|
+
if (nextCellPos === prev.cellPos) {
|
|
74
|
+
return prev;
|
|
75
|
+
}
|
|
76
|
+
return buildState(nextCellPos, newState);
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
props: {
|
|
80
|
+
decorations: function decorations(state) {
|
|
81
|
+
var _activeCellHighlightP, _activeCellHighlightP2;
|
|
82
|
+
return (_activeCellHighlightP = (_activeCellHighlightP2 = activeCellHighlightPluginKey.getState(state)) === null || _activeCellHighlightP2 === void 0 ? void 0 : _activeCellHighlightP2.decorationSet) !== null && _activeCellHighlightP !== void 0 ? _activeCellHighlightP : _view.DecorationSet.empty;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
};
|
package/dist/cjs/tablePlugin.js
CHANGED
|
@@ -24,24 +24,25 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
24
24
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
25
25
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
26
26
|
var _toDOM = require("./nodeviews/toDOM");
|
|
27
|
-
var _plugin = require("./pm-plugins/
|
|
27
|
+
var _plugin = require("./pm-plugins/active-cell-highlight/plugin");
|
|
28
|
+
var _plugin2 = require("./pm-plugins/analytics/plugin");
|
|
28
29
|
var _insert = require("./pm-plugins/commands/insert");
|
|
29
30
|
var _createPluginConfig = require("./pm-plugins/create-plugin-config");
|
|
30
|
-
var
|
|
31
|
-
var
|
|
31
|
+
var _plugin3 = require("./pm-plugins/decorations/plugin");
|
|
32
|
+
var _plugin4 = require("./pm-plugins/drag-and-drop/plugin");
|
|
32
33
|
var _pluginKey = require("./pm-plugins/drag-and-drop/plugin-key");
|
|
33
34
|
var _editorContentAreaHeight = require("./pm-plugins/editor-content-area-height");
|
|
34
35
|
var _keymap = require("./pm-plugins/keymap");
|
|
35
36
|
var _main = require("./pm-plugins/main");
|
|
36
37
|
var _pluginKey2 = require("./pm-plugins/plugin-key");
|
|
37
38
|
var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
|
|
38
|
-
var
|
|
39
|
+
var _plugin5 = require("./pm-plugins/sticky-headers/plugin");
|
|
39
40
|
var _pluginKey3 = require("./pm-plugins/sticky-headers/plugin-key");
|
|
40
41
|
var _util = require("./pm-plugins/sticky-headers/util");
|
|
41
42
|
var _tableAnalytics = require("./pm-plugins/table-analytics");
|
|
42
|
-
var
|
|
43
|
+
var _plugin6 = require("./pm-plugins/table-anchor-names/plugin");
|
|
43
44
|
var _tableLocalId = require("./pm-plugins/table-local-id");
|
|
44
|
-
var
|
|
45
|
+
var _plugin7 = require("./pm-plugins/table-resizing/plugin");
|
|
45
46
|
var _pluginFactory = require("./pm-plugins/table-resizing/plugin-factory");
|
|
46
47
|
var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
|
|
47
48
|
var _tableSizeSelector = require("./pm-plugins/table-size-selector");
|
|
@@ -308,14 +309,14 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
308
309
|
isTableScalingEnabled = _ref5.isTableScalingEnabled;
|
|
309
310
|
var _pluginConfig2 = (0, _createPluginConfig.pluginConfig)(tableOptions),
|
|
310
311
|
allowColumnResizing = _pluginConfig2.allowColumnResizing;
|
|
311
|
-
return allowColumnResizing ? (0,
|
|
312
|
+
return allowColumnResizing ? (0, _plugin7.createPlugin)(dispatch, {
|
|
312
313
|
lastColumnResizable: !fullWidthEnabled
|
|
313
314
|
}, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
|
|
314
315
|
}
|
|
315
316
|
}, {
|
|
316
317
|
name: 'tableEditing',
|
|
317
318
|
plugin: function plugin() {
|
|
318
|
-
return (0,
|
|
319
|
+
return (0, _plugin3.createPlugin)();
|
|
319
320
|
}
|
|
320
321
|
},
|
|
321
322
|
// Needs to be lower priority than editor-tables.tableEditing
|
|
@@ -366,7 +367,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
366
367
|
name: 'tableStickyHeaders',
|
|
367
368
|
plugin: function plugin(_ref0) {
|
|
368
369
|
var dispatch = _ref0.dispatch;
|
|
369
|
-
return options && options.tableOptions.stickyHeaders ? (0,
|
|
370
|
+
return options && options.tableOptions.stickyHeaders ? (0, _plugin5.createPlugin)(dispatch, function () {
|
|
370
371
|
return [];
|
|
371
372
|
}) : undefined;
|
|
372
373
|
}
|
|
@@ -374,7 +375,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
374
375
|
name: 'tableDragAndDrop',
|
|
375
376
|
plugin: function plugin(_ref1) {
|
|
376
377
|
var dispatch = _ref1.dispatch;
|
|
377
|
-
return (0,
|
|
378
|
+
return (0, _plugin4.createPlugin)(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api);
|
|
378
379
|
}
|
|
379
380
|
}, {
|
|
380
381
|
name: 'tableViewModeSort',
|
|
@@ -418,7 +419,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
418
419
|
plugin: function plugin(_ref15) {
|
|
419
420
|
var dispatch = _ref15.dispatch,
|
|
420
421
|
dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
|
|
421
|
-
return (0,
|
|
422
|
+
return (0, _plugin2.createPlugin)(dispatch, dispatchAnalyticsEvent);
|
|
422
423
|
}
|
|
423
424
|
}, {
|
|
424
425
|
name: 'tableGetEditorViewReferencePlugin',
|
|
@@ -491,7 +492,15 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
491
492
|
plugins.push({
|
|
492
493
|
name: 'tableAnchorNames',
|
|
493
494
|
plugin: function plugin() {
|
|
494
|
-
return (0,
|
|
495
|
+
return (0, _plugin6.createPlugin)();
|
|
496
|
+
}
|
|
497
|
+
});
|
|
498
|
+
}
|
|
499
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
500
|
+
plugins.push({
|
|
501
|
+
name: 'tableActiveCellHighlight',
|
|
502
|
+
plugin: function plugin() {
|
|
503
|
+
return (0, _plugin.createPlugin)();
|
|
495
504
|
}
|
|
496
505
|
});
|
|
497
506
|
}
|
package/dist/cjs/types/index.js
CHANGED
|
@@ -168,7 +168,8 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
|
|
|
168
168
|
WITH_LAST_ROW_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line__inactive"),
|
|
169
169
|
NATIVE_STICKY: "".concat(_adfSchema.tablePrefixSelector, "-row-native-sticky"),
|
|
170
170
|
NATIVE_STICKY_ACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-row-native-sticky-active"),
|
|
171
|
-
NO_OVERFLOW: "".concat(_adfSchema.tablePrefixSelector, "-no-overflow")
|
|
171
|
+
NO_OVERFLOW: "".concat(_adfSchema.tablePrefixSelector, "-no-overflow"),
|
|
172
|
+
ACTIVE_CURSOR_CELL: "".concat(_adfSchema.tablePrefixSelector, "-active-cursor-cell")
|
|
172
173
|
});
|
|
173
174
|
var ShadowEvent = exports.ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
|
|
174
175
|
ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
|
|
@@ -20,7 +20,7 @@ var _consts = require("../pm-plugins/view-mode-sort/consts");
|
|
|
20
20
|
var _types = require("../types");
|
|
21
21
|
var _consts2 = require("./consts");
|
|
22
22
|
var _uiStyles = require("./ui-styles");
|
|
23
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0;
|
|
23
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
|
|
24
24
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
25
25
|
// Entry file in package.json
|
|
26
26
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
|
|
@@ -69,24 +69,27 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
69
69
|
return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), _types.TableCssClassName.TABLE_STICKY);
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
|
+
var activeCellHighlightStyles = function activeCellHighlightStyles() {
|
|
73
|
+
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\ttd.", ".", "::after,\n\t\t\t\tth.", ".", "::after {\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tbox-shadow: ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: -1px;\n\t\t\t\tz-index: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, "var(--ds-border-selected, #1868DB)", "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)", _editorSharedStyles.akEditorSmallZIndex);
|
|
74
|
+
};
|
|
72
75
|
var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedStyle(props) {
|
|
73
76
|
var _props$featureFlags;
|
|
74
|
-
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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\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.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\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\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/** When cleaning up, merge this with the mask style above */\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", "\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\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid ", ";\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\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\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\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\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\t", "\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\n\t", "\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\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\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\tborder-left-color: ", ";\n\t\t\tborder-top-color: ", ";\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\tbackground: ", ";\n\t\t\t}\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\tbackground: ", ";\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\tbackground: ", ";\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: ", ";\n\t\tborder-left: ", ";\n\t\tbackground: ", ";\n\t\t", "\n\n\t\t", "\n\t}\n\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", "\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"])), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)(), rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts2.tableCellBackgroundColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.stickyRowOffsetTop, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, #FFFFFF)", _consts2.tableToolbarSize, _consts2.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize, _consts2.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.tableToolbarSize, "var(--ds-surface, #FFFFFF)", _consts2.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, #FFFFFF)", _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tableToolbarSize, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _consts2.stickyHeaderBorderBottomWidth, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts2.tableBorderColor, _consts2.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "th.".concat(_types.TableCssClassName.TABLE_HEADER_CELL, "::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ").concat(_consts2.tableBorderColor, ";\n\t\t\t\tborder-bottom: 1px solid ").concat(_consts2.tableBorderColor, ";\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}") : "", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts2.stickyRowZIndex, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_2') ? "\n\t\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\t\tborder-top: ").concat(_styles.tableMarginTop, "px solid transparent;\n\t\t}\n\n\t\t.").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types.TableCssClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\t\tborder-top: ").concat(_styles.tableMarginTop, "px solid ", "var(--ds-surface, #FFFFFF)", ";\n\t\t}") : (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "\n\t\t\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\t\t\tmargin-top: 1px;\n\t\t\t}") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts2.tableColumnControlsHeight, _consts2.aboveNativeStickyHeaderZIndex, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? "\n\t\t.".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, ":has(~ .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ") {\n\t\t\tmargin-top: 0;\n\t\t}\n\t") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts2.belowNativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? "tr.".concat(_types.TableCssClassName.NATIVE_STICKY) : '', _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _consts2.tableColumnControlsHeight, _types.TableCssClassName.NATIVE_STICKY, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _types.TableCssClassName.WITH_CONTROLS, _consts2.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableControlsSpacing, _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableControlsSpacing - _consts2.tableToolbarSize, "var(--ds-surface, #FFFFFF)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts2.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize + 1, _consts2.tableToolbarSize + 1, _consts2.tableBorderColor, _consts2.tableBorderRadiusSize, _consts2.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _consts2.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts2.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts2.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n border-bottom: 1px solid ".concat(_consts2.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts2.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts2.rowControlsZIndex + 4, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts2.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", _consts2.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts2.tableColumnControlsHeight, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(10) : "10px", (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(14) : (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts2.tableHeaderCellBackgroundColor, _consts2.tableTextColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? "/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, " {\n\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\t").concat(numberedColumnButtonSelectedStyles, "\n\t\t\t\t").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableToolbarDeleteColor, _consts2.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorUnitZIndex, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? ".tableView-content-wrap.danger {\n\t\t:not(.".concat(_types.TableCssClassName.IS_RESIZING, ") .").concat(_types.TableCssClassName.WITH_CONTROLS, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\tbackground-color: ").concat(_consts2.tableToolbarDeleteColor, ";\n\t\t\t\tborder: 1px solid ").concat(_consts2.tableBorderDeleteColor, ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", "var(--ds-text-danger, #AE2E24)", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ").concat(_editorSharedStyles.akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts2.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts2.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _consts2.tableBorderDeleteColor, _consts2.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _consts2.tableCellDeleteColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts2.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts2.tableCellDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts2.tableCellDeleteColor, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts2.tableToolbarSize + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_styles.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts2.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(_styles.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts2.tableToolbarSize, "px;\n\t\t"), _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "\n\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.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(_styles.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(_consts2.nativeStickyHeaderZIndex + 1, ";\n\t}") : ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.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(_styles.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(_consts2.nativeStickyHeaderZIndex + 1, ";\n\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.dragRowControlsWidth, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.dragRowControlsWidth, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts2.nativeStickyHeaderZIndex - 1, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _editorSharedStyles.akEditorTableNumberColumnWidth, _consts2.stickyRowOffsetTop, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "0.5px solid ".concat(_consts2.tableBorderColor) : "1px solid ".concat(_consts2.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : "1px solid ".concat(_consts2.tableBorderColor), "var(--ds-background-accent-gray-subtlest, #F0F1F2)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top: 1px solid ".concat(_consts2.tableBorderColor, ";") : "", (0, _browser.getBrowserInfo)().gecko && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "border-top: 1px solid ".concat(_consts2.tableBorderColor, ";") : "border-top: none;", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? ".ak-editor-selected-node .".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"]:not(.").concat(_types.TableCssClassName.TABLE_SELECTED, ") .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type {\n\t\t\t&::before {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ").concat(_consts2.tableBorderSelectedColor, ";\n\t\t\t\tbackground: ").concat(_consts2.tableCellSelectedColor, ";\n\t\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_SELECTED, _consts2.tableBorderSelectedColor, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top-color: ".concat(_consts2.tableBorderSelectedColor, ";") : "", _consts2.tableHeaderCellSelectedColor, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.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(_consts2.tableCellDeleteColor, ";\n\t\t}\n\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.TABLE_SELECTED, ".").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ").concat(_consts2.tableBorderDeleteColor, ";\n\t\tborder-top-color: ").concat(_consts2.tableBorderDeleteColor, ";\n\t\tbackground: ").concat(_consts2.tableCellDeleteColor, ";\n\t\t}") : "\t.".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tbackground: ").concat(_consts2.tableCellDeleteColor, ";\n\t\t\t}\n\t\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tborder-left-color: ").concat(_consts2.tableBorderDeleteColor, ";\n\t\t\t\tbackground: ").concat(_consts2.tableCellDeleteColor, ";\n\t\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, ".").concat(_types.TableCssClassName.WITH_CONTROLS, ":has(tr.sticky) .").concat(_types.TableCssClassName.NUMBERED_COLUMN, " .").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tbox-shadow: 0 -5px 0 1px ").concat(_consts2.tableBorderColor, ";\n\t\t}") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
|
|
77
|
+
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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\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.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\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\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/** When cleaning up, merge this with the mask style above */\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", "\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\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid ", ";\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\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\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\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\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\t", "\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\n\t", "\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\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\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\tborder-left-color: ", ";\n\t\t\tborder-top-color: ", ";\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\tbackground: ", ";\n\t\t\t}\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\tbackground: ", ";\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\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Active cursor cell highlight */\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: ", ";\n\t\tborder-left: ", ";\n\t\tbackground: ", ";\n\t\t", "\n\n\t\t", "\n\t}\n\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", "\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"])), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)(), rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts2.tableCellBackgroundColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.stickyRowOffsetTop, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, #FFFFFF)", _consts2.tableToolbarSize, _consts2.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize, _consts2.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.tableToolbarSize, "var(--ds-surface, #FFFFFF)", _consts2.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, #FFFFFF)", _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tableToolbarSize, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _consts2.stickyHeaderBorderBottomWidth, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts2.tableBorderColor, _consts2.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "th.".concat(_types.TableCssClassName.TABLE_HEADER_CELL, "::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ").concat(_consts2.tableBorderColor, ";\n\t\t\t\tborder-bottom: 1px solid ").concat(_consts2.tableBorderColor, ";\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}") : "", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts2.stickyRowZIndex, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_2') ? "\n\t\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\t\tborder-top: ").concat(_styles.tableMarginTop, "px solid transparent;\n\t\t}\n\n\t\t.").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types.TableCssClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\t\tborder-top: ").concat(_styles.tableMarginTop, "px solid ", "var(--ds-surface, #FFFFFF)", ";\n\t\t}") : (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "\n\t\t\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\t\t\tmargin-top: 1px;\n\t\t\t}") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts2.tableColumnControlsHeight, _consts2.aboveNativeStickyHeaderZIndex, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? "\n\t\t.".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, ":has(~ .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ") {\n\t\t\tmargin-top: 0;\n\t\t}\n\t") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts2.belowNativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? "tr.".concat(_types.TableCssClassName.NATIVE_STICKY) : '', _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _consts2.tableColumnControlsHeight, _types.TableCssClassName.NATIVE_STICKY, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _types.TableCssClassName.WITH_CONTROLS, _consts2.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableControlsSpacing, _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableControlsSpacing - _consts2.tableToolbarSize, "var(--ds-surface, #FFFFFF)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts2.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize + 1, _consts2.tableToolbarSize + 1, _consts2.tableBorderColor, _consts2.tableBorderRadiusSize, _consts2.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _consts2.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts2.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts2.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n border-bottom: 1px solid ".concat(_consts2.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts2.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts2.rowControlsZIndex + 4, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts2.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", _consts2.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts2.tableColumnControlsHeight, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(10) : "10px", (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(14) : (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts2.tableHeaderCellBackgroundColor, _consts2.tableTextColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? "/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, " {\n\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\t").concat(numberedColumnButtonSelectedStyles, "\n\t\t\t\t").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableToolbarDeleteColor, _consts2.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorUnitZIndex, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? ".tableView-content-wrap.danger {\n\t\t:not(.".concat(_types.TableCssClassName.IS_RESIZING, ") .").concat(_types.TableCssClassName.WITH_CONTROLS, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\tbackground-color: ").concat(_consts2.tableToolbarDeleteColor, ";\n\t\t\t\tborder: 1px solid ").concat(_consts2.tableBorderDeleteColor, ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", "var(--ds-text-danger, #AE2E24)", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ").concat(_editorSharedStyles.akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts2.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts2.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _consts2.tableBorderDeleteColor, _consts2.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _consts2.tableCellDeleteColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts2.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts2.tableCellDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts2.tableCellDeleteColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? activeCellHighlightStyles() : '', _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts2.tableToolbarSize + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_styles.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts2.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(_styles.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts2.tableToolbarSize, "px;\n\t\t"), _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "\n\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.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(_styles.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(_consts2.nativeStickyHeaderZIndex + 1, ";\n\t}") : ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.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(_styles.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(_consts2.nativeStickyHeaderZIndex + 1, ";\n\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.dragRowControlsWidth, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.dragRowControlsWidth, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts2.nativeStickyHeaderZIndex - 1, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _editorSharedStyles.akEditorTableNumberColumnWidth, _consts2.stickyRowOffsetTop, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "0.5px solid ".concat(_consts2.tableBorderColor) : "1px solid ".concat(_consts2.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : "1px solid ".concat(_consts2.tableBorderColor), "var(--ds-background-accent-gray-subtlest, #F0F1F2)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top: 1px solid ".concat(_consts2.tableBorderColor, ";") : "", (0, _browser.getBrowserInfo)().gecko && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "border-top: 1px solid ".concat(_consts2.tableBorderColor, ";") : "border-top: none;", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? ".ak-editor-selected-node .".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"]:not(.").concat(_types.TableCssClassName.TABLE_SELECTED, ") .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type {\n\t\t\t&::before {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ").concat(_consts2.tableBorderSelectedColor, ";\n\t\t\t\tbackground: ").concat(_consts2.tableCellSelectedColor, ";\n\t\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_SELECTED, _consts2.tableBorderSelectedColor, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top-color: ".concat(_consts2.tableBorderSelectedColor, ";") : "", _consts2.tableHeaderCellSelectedColor, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.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(_consts2.tableCellDeleteColor, ";\n\t\t}\n\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.TABLE_SELECTED, ".").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ").concat(_consts2.tableBorderDeleteColor, ";\n\t\tborder-top-color: ").concat(_consts2.tableBorderDeleteColor, ";\n\t\tbackground: ").concat(_consts2.tableCellDeleteColor, ";\n\t\t}") : "\t.".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tbackground: ").concat(_consts2.tableCellDeleteColor, ";\n\t\t\t}\n\t\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tborder-left-color: ").concat(_consts2.tableBorderDeleteColor, ";\n\t\t\t\tbackground: ").concat(_consts2.tableCellDeleteColor, ";\n\t\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, ".").concat(_types.TableCssClassName.WITH_CONTROLS, ":has(tr.sticky) .").concat(_types.TableCssClassName.NUMBERED_COLUMN, " .").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tbox-shadow: 0 -5px 0 1px ").concat(_consts2.tableBorderColor, ";\n\t\t}") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
|
|
75
78
|
};
|
|
76
79
|
|
|
77
80
|
// re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
|
|
78
81
|
var baseTableStyles = exports.baseTableStyles = function baseTableStyles(props) {
|
|
79
|
-
return (0, _react.css)(
|
|
82
|
+
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t", ";\n"])), (0, _styles.tableSharedStyle)(), baseTableStylesWithoutSharedStyle(props));
|
|
80
83
|
};
|
|
81
84
|
|
|
82
85
|
// TODO: DSP-4139 - Remove this when we have a better solution for the table toolbar
|
|
83
86
|
var tableStyles = exports.tableStyles = function tableStyles(props) {
|
|
84
|
-
return (0, _react.css)(
|
|
87
|
+
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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"])), baseTableStylesWithoutSharedStyle(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
|
|
85
88
|
};
|
|
86
89
|
|
|
87
90
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
88
|
-
var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(
|
|
91
|
+
var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
89
92
|
|
|
90
93
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
91
|
-
var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(
|
|
92
|
-
var tableAnchorStyles = (0, _react.css)(
|
|
94
|
+
var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
|
|
95
|
+
var tableAnchorStyles = (0, _react.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\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\n\t.pm-table-with-controls .pm-table-wrapper-no-overflow [data-prosemirror-node-name='tableRow'] {\n\t\tanchor-name: var(", ", attr(data-node-anchor type(<custom-ident>)));\n\t}\n"])), _styles.ANCHOR_VARIABLE_NAME, _styles.ANCHOR_VARIABLE_NAME);
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
5
|
+
import { findCellClosestToPos } from '@atlaskit/editor-tables/utils';
|
|
6
|
+
import { TableCssClassName as ClassName } from '../../types';
|
|
7
|
+
const EMPTY_STATE = {
|
|
8
|
+
cellPos: -1,
|
|
9
|
+
decorationSet: DecorationSet.empty
|
|
10
|
+
};
|
|
11
|
+
export const activeCellHighlightPluginKey = new PluginKey('tableActiveCellHighlight');
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Returns the position of the cell containing the cursor, or -1 if the cursor
|
|
15
|
+
* is not in a table cell or the selection is a CellSelection.
|
|
16
|
+
*/
|
|
17
|
+
const getActiveCellPos = state => {
|
|
18
|
+
if (state.selection instanceof CellSelection) {
|
|
19
|
+
return -1;
|
|
20
|
+
}
|
|
21
|
+
try {
|
|
22
|
+
const cell = findCellClosestToPos(state.selection.$from);
|
|
23
|
+
return cell ? cell.pos : -1;
|
|
24
|
+
} catch {
|
|
25
|
+
return -1;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const buildState = (cellPos, state) => {
|
|
29
|
+
if (cellPos === -1) {
|
|
30
|
+
return EMPTY_STATE;
|
|
31
|
+
}
|
|
32
|
+
try {
|
|
33
|
+
const cell = state.doc.nodeAt(cellPos);
|
|
34
|
+
if (!cell) {
|
|
35
|
+
return EMPTY_STATE;
|
|
36
|
+
}
|
|
37
|
+
const decoration = Decoration.node(cellPos, cellPos + cell.nodeSize, {
|
|
38
|
+
class: ClassName.ACTIVE_CURSOR_CELL
|
|
39
|
+
});
|
|
40
|
+
return {
|
|
41
|
+
cellPos,
|
|
42
|
+
decorationSet: DecorationSet.create(state.doc, [decoration])
|
|
43
|
+
};
|
|
44
|
+
} catch {
|
|
45
|
+
return EMPTY_STATE;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
export const createPlugin = () => {
|
|
49
|
+
return new SafePlugin({
|
|
50
|
+
key: activeCellHighlightPluginKey,
|
|
51
|
+
state: {
|
|
52
|
+
init: (_, state) => {
|
|
53
|
+
return buildState(getActiveCellPos(state), state);
|
|
54
|
+
},
|
|
55
|
+
apply: (tr, prev, _oldState, newState) => {
|
|
56
|
+
if (tr.docChanged) {
|
|
57
|
+
// Doc changed — always rebuild since positions may have shifted
|
|
58
|
+
return buildState(getActiveCellPos(newState), newState);
|
|
59
|
+
}
|
|
60
|
+
if (!tr.selectionSet) {
|
|
61
|
+
// Neither doc nor selection changed — nothing to do
|
|
62
|
+
return prev;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Selection changed — only rebuild if cursor moved to a different cell
|
|
66
|
+
const nextCellPos = getActiveCellPos(newState);
|
|
67
|
+
if (nextCellPos === prev.cellPos) {
|
|
68
|
+
return prev;
|
|
69
|
+
}
|
|
70
|
+
return buildState(nextCellPos, newState);
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
props: {
|
|
74
|
+
decorations: state => {
|
|
75
|
+
var _activeCellHighlightP, _activeCellHighlightP2;
|
|
76
|
+
return (_activeCellHighlightP = (_activeCellHighlightP2 = activeCellHighlightPluginKey.getState(state)) === null || _activeCellHighlightP2 === void 0 ? void 0 : _activeCellHighlightP2.decorationSet) !== null && _activeCellHighlightP !== void 0 ? _activeCellHighlightP : DecorationSet.empty;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
};
|
|
@@ -15,6 +15,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
15
15
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
16
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
17
17
|
import { tableNodeSpecWithFixedToDOM } from './nodeviews/toDOM';
|
|
18
|
+
import { createPlugin as createActiveCellHighlightPlugin } from './pm-plugins/active-cell-highlight/plugin';
|
|
18
19
|
import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
|
|
19
20
|
import { insertTableWithNestingSupport } from './pm-plugins/commands/insert';
|
|
20
21
|
import { pluginConfig } from './pm-plugins/create-plugin-config';
|
|
@@ -479,6 +480,12 @@ const tablePlugin = ({
|
|
|
479
480
|
plugin: () => createTableAnchorNamesPlugin()
|
|
480
481
|
});
|
|
481
482
|
}
|
|
483
|
+
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
484
|
+
plugins.push({
|
|
485
|
+
name: 'tableActiveCellHighlight',
|
|
486
|
+
plugin: () => createActiveCellHighlightPlugin()
|
|
487
|
+
});
|
|
488
|
+
}
|
|
482
489
|
const browser = getBrowserInfo();
|
|
483
490
|
|
|
484
491
|
// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
|
|
@@ -163,7 +163,8 @@ export const TableCssClassName = {
|
|
|
163
163
|
WITH_LAST_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-row-insert-line__inactive`,
|
|
164
164
|
NATIVE_STICKY: `${tablePrefixSelector}-row-native-sticky`,
|
|
165
165
|
NATIVE_STICKY_ACTIVE: `${tablePrefixSelector}-row-native-sticky-active`,
|
|
166
|
-
NO_OVERFLOW: `${tablePrefixSelector}-no-overflow
|
|
166
|
+
NO_OVERFLOW: `${tablePrefixSelector}-no-overflow`,
|
|
167
|
+
ACTIVE_CURSOR_CELL: `${tablePrefixSelector}-active-cursor-cell`
|
|
167
168
|
};
|
|
168
169
|
export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
|
|
169
170
|
ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
|
|
@@ -218,6 +218,22 @@ const tableStickyHeaderFirefoxFixStyle = () => {
|
|
|
218
218
|
`;
|
|
219
219
|
}
|
|
220
220
|
};
|
|
221
|
+
const activeCellHighlightStyles = () => {
|
|
222
|
+
return css`
|
|
223
|
+
.${ClassName.TABLE_NODE_WRAPPER} {
|
|
224
|
+
td.${ClassName.TABLE_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after,
|
|
225
|
+
th.${ClassName.TABLE_HEADER_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after {
|
|
226
|
+
border: 1px solid ${"var(--ds-border-selected, #1868DB)"};
|
|
227
|
+
box-shadow: ${"var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"};
|
|
228
|
+
content: '';
|
|
229
|
+
position: absolute;
|
|
230
|
+
inset: -1px;
|
|
231
|
+
z-index: ${akEditorSmallZIndex};
|
|
232
|
+
pointer-events: none;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
`;
|
|
236
|
+
};
|
|
221
237
|
const baseTableStylesWithoutSharedStyle = props => {
|
|
222
238
|
var _props$featureFlags;
|
|
223
239
|
return css`
|
|
@@ -1123,6 +1139,9 @@ const baseTableStylesWithoutSharedStyle = props => {
|
|
|
1123
1139
|
}
|
|
1124
1140
|
}
|
|
1125
1141
|
|
|
1142
|
+
/* Active cursor cell highlight */
|
|
1143
|
+
${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? activeCellHighlightStyles() : ''}
|
|
1144
|
+
|
|
1126
1145
|
/* override for DnD controls */
|
|
1127
1146
|
.${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
|
|
1128
1147
|
position: absolute;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
5
|
+
import { findCellClosestToPos } from '@atlaskit/editor-tables/utils';
|
|
6
|
+
import { TableCssClassName as ClassName } from '../../types';
|
|
7
|
+
var EMPTY_STATE = {
|
|
8
|
+
cellPos: -1,
|
|
9
|
+
decorationSet: DecorationSet.empty
|
|
10
|
+
};
|
|
11
|
+
export var activeCellHighlightPluginKey = new PluginKey('tableActiveCellHighlight');
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Returns the position of the cell containing the cursor, or -1 if the cursor
|
|
15
|
+
* is not in a table cell or the selection is a CellSelection.
|
|
16
|
+
*/
|
|
17
|
+
var getActiveCellPos = function getActiveCellPos(state) {
|
|
18
|
+
if (state.selection instanceof CellSelection) {
|
|
19
|
+
return -1;
|
|
20
|
+
}
|
|
21
|
+
try {
|
|
22
|
+
var cell = findCellClosestToPos(state.selection.$from);
|
|
23
|
+
return cell ? cell.pos : -1;
|
|
24
|
+
} catch (_unused) {
|
|
25
|
+
return -1;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
var buildState = function buildState(cellPos, state) {
|
|
29
|
+
if (cellPos === -1) {
|
|
30
|
+
return EMPTY_STATE;
|
|
31
|
+
}
|
|
32
|
+
try {
|
|
33
|
+
var cell = state.doc.nodeAt(cellPos);
|
|
34
|
+
if (!cell) {
|
|
35
|
+
return EMPTY_STATE;
|
|
36
|
+
}
|
|
37
|
+
var decoration = Decoration.node(cellPos, cellPos + cell.nodeSize, {
|
|
38
|
+
class: ClassName.ACTIVE_CURSOR_CELL
|
|
39
|
+
});
|
|
40
|
+
return {
|
|
41
|
+
cellPos: cellPos,
|
|
42
|
+
decorationSet: DecorationSet.create(state.doc, [decoration])
|
|
43
|
+
};
|
|
44
|
+
} catch (_unused2) {
|
|
45
|
+
return EMPTY_STATE;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
export var createPlugin = function createPlugin() {
|
|
49
|
+
return new SafePlugin({
|
|
50
|
+
key: activeCellHighlightPluginKey,
|
|
51
|
+
state: {
|
|
52
|
+
init: function init(_, state) {
|
|
53
|
+
return buildState(getActiveCellPos(state), state);
|
|
54
|
+
},
|
|
55
|
+
apply: function apply(tr, prev, _oldState, newState) {
|
|
56
|
+
if (tr.docChanged) {
|
|
57
|
+
// Doc changed — always rebuild since positions may have shifted
|
|
58
|
+
return buildState(getActiveCellPos(newState), newState);
|
|
59
|
+
}
|
|
60
|
+
if (!tr.selectionSet) {
|
|
61
|
+
// Neither doc nor selection changed — nothing to do
|
|
62
|
+
return prev;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Selection changed — only rebuild if cursor moved to a different cell
|
|
66
|
+
var nextCellPos = getActiveCellPos(newState);
|
|
67
|
+
if (nextCellPos === prev.cellPos) {
|
|
68
|
+
return prev;
|
|
69
|
+
}
|
|
70
|
+
return buildState(nextCellPos, newState);
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
props: {
|
|
74
|
+
decorations: function decorations(state) {
|
|
75
|
+
var _activeCellHighlightP, _activeCellHighlightP2;
|
|
76
|
+
return (_activeCellHighlightP = (_activeCellHighlightP2 = activeCellHighlightPluginKey.getState(state)) === null || _activeCellHighlightP2 === void 0 ? void 0 : _activeCellHighlightP2.decorationSet) !== null && _activeCellHighlightP !== void 0 ? _activeCellHighlightP : DecorationSet.empty;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
};
|
package/dist/esm/tablePlugin.js
CHANGED
|
@@ -18,6 +18,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
18
18
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
19
19
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
20
|
import { tableNodeSpecWithFixedToDOM } from './nodeviews/toDOM';
|
|
21
|
+
import { createPlugin as createActiveCellHighlightPlugin } from './pm-plugins/active-cell-highlight/plugin';
|
|
21
22
|
import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
|
|
22
23
|
import { insertTableWithNestingSupport } from './pm-plugins/commands/insert';
|
|
23
24
|
import { pluginConfig } from './pm-plugins/create-plugin-config';
|
|
@@ -486,6 +487,14 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
486
487
|
}
|
|
487
488
|
});
|
|
488
489
|
}
|
|
490
|
+
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
491
|
+
plugins.push({
|
|
492
|
+
name: 'tableActiveCellHighlight',
|
|
493
|
+
plugin: function plugin() {
|
|
494
|
+
return createActiveCellHighlightPlugin();
|
|
495
|
+
}
|
|
496
|
+
});
|
|
497
|
+
}
|
|
489
498
|
var browser = getBrowserInfo();
|
|
490
499
|
|
|
491
500
|
// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
|
package/dist/esm/types/index.js
CHANGED
|
@@ -165,7 +165,8 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
|
|
|
165
165
|
WITH_LAST_ROW_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-last-row-insert-line__inactive"),
|
|
166
166
|
NATIVE_STICKY: "".concat(tablePrefixSelector, "-row-native-sticky"),
|
|
167
167
|
NATIVE_STICKY_ACTIVE: "".concat(tablePrefixSelector, "-row-native-sticky-active"),
|
|
168
|
-
NO_OVERFLOW: "".concat(tablePrefixSelector, "-no-overflow")
|
|
168
|
+
NO_OVERFLOW: "".concat(tablePrefixSelector, "-no-overflow"),
|
|
169
|
+
ACTIVE_CURSOR_CELL: "".concat(tablePrefixSelector, "-active-cursor-cell")
|
|
169
170
|
});
|
|
170
171
|
export var ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
|
|
171
172
|
ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
|
|
@@ -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, _templateObject0, _templateObject1;
|
|
3
3
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
4
4
|
// Entry file in package.json
|
|
5
5
|
|
|
@@ -64,24 +64,27 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
64
64
|
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), ClassName.TABLE_STICKY);
|
|
65
65
|
}
|
|
66
66
|
};
|
|
67
|
+
var activeCellHighlightStyles = function activeCellHighlightStyles() {
|
|
68
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\ttd.", ".", "::after,\n\t\t\t\tth.", ".", "::after {\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tbox-shadow: ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: -1px;\n\t\t\t\tz-index: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t"])), ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.TABLE_HEADER_CELL, ClassName.ACTIVE_CURSOR_CELL, "var(--ds-border-selected, #1868DB)", "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)", akEditorSmallZIndex);
|
|
69
|
+
};
|
|
67
70
|
var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedStyle(props) {
|
|
68
71
|
var _props$featureFlags;
|
|
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\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.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\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\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/** When cleaning up, merge this with the mask style above */\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", "\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\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid ", ";\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\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\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\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\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\t", "\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\n\t", "\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\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\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\tborder-left-color: ", ";\n\t\t\tborder-top-color: ", ";\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\tbackground: ", ";\n\t\t\t}\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\tbackground: ", ";\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\tbackground: ", ";\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: ", ";\n\t\tborder-left: ", ";\n\t\tbackground: ", ";\n\t\t", "\n\n\t\t", "\n\t}\n\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", "\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"])), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, 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(), ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, #FFFFFF)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, #FFFFFF)", 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, #FFFFFF)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, #FFFFFF)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", 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)", fg('platform_editor_table_sticky_header_patch_1') ? "th.".concat(ClassName.TABLE_HEADER_CELL, "::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderColor, ";\n\t\t\t\tborder-bottom: 1px solid ").concat(tableBorderColor, ";\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}") : "", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, "var(--ds-surface, #FFFFFF)", stickyRowZIndex, fg('platform_editor_table_sticky_header_patch_2') ? "\n\t\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\t\tborder-top: ").concat(tableMarginTop, "px solid transparent;\n\t\t}\n\n\t\t.").concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\t\tborder-top: ").concat(tableMarginTop, "px solid ", "var(--ds-surface, #FFFFFF)", ";\n\t\t}") : fg('platform_editor_table_sticky_header_patch_1') ? "\n\t\t\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\t\t\tmargin-top: 1px;\n\t\t\t}") : "", ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, aboveNativeStickyHeaderZIndex, fg('platform_editor_table_sticky_header_patch_7') ? "\n\t\t.".concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, ":has(~ .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ") {\n\t\t\tmargin-top: 0;\n\t\t}\n\t") : "", 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, fg('platform_editor_table_sticky_header_patch_4') ? "tr.".concat(ClassName.NATIVE_STICKY) : '', 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, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize, "var(--ds-surface, #FFFFFF)", 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, TableSharedCssClassName.TABLE_LEFT_BORDER, TableSharedCssClassName.TABLE_RIGHT_BORDER, 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, #DDDEE1)", 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, #DDDEE1)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(10) : "10px", expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(14) : relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, editorExperiment('platform_editor_block_menu', true) ? "/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.".concat(akEditorSelectedNodeClassName, " {\n\t\t.").concat(ClassName.NUMBERED_COLUMN, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\t").concat(numberedColumnButtonSelectedStyles, "\n\t\t\t\t").concat(hideNativeBrowserTextSelectionStyles, "\n\t\t\t}\n\t\t}\n\t}") : '', ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, editorExperiment('platform_editor_block_menu', 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, #AE2E24)", ";\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.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableBorderDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, tableCellDeleteColor, 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, tableCellDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, tableCellDeleteColor, 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, expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "0.5px solid ".concat(tableBorderColor) : "1px solid ".concat(tableBorderColor), expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : "1px solid ".concat(tableBorderColor), "var(--ds-background-accent-gray-subtlest, #F0F1F2)", fg('platform_editor_table_sticky_header_patch_1') ? "border-top: 1px solid ".concat(tableBorderColor, ";") : "", getBrowserInfo().gecko && expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "border-top: 1px solid ".concat(tableBorderColor, ";") : "border-top: none;", fg('platform_editor_table_sticky_header_patch_7') ? ".ak-editor-selected-node .".concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"]:not(.").concat(ClassName.TABLE_SELECTED, ") .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type {\n\t\t\t&::before {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderSelectedColor, ";\n\t\t\t\tbackground: ").concat(tableCellSelectedColor, ";\n\t\t\t}\n\t}") : '', 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, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? ".".concat(ClassName.TABLE_CONTAINER, ".").concat(ClassName.WITH_CONTROLS, ":has(tr.sticky) .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tbox-shadow: 0 -5px 0 1px ").concat(tableBorderColor, ";\n\t\t}") : "", 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);
|
|
72
|
+
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\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.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\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\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/** When cleaning up, merge this with the mask style above */\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", "\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\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid ", ";\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\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\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\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\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\t", "\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\n\t", "\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\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\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\tborder-left-color: ", ";\n\t\t\tborder-top-color: ", ";\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\tbackground: ", ";\n\t\t\t}\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\tbackground: ", ";\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\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Active cursor cell highlight */\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: ", ";\n\t\tborder-left: ", ";\n\t\tbackground: ", ";\n\t\t", "\n\n\t\t", "\n\t}\n\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", "\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"])), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, 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(), ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, #FFFFFF)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, #FFFFFF)", 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, #FFFFFF)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, #FFFFFF)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", 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)", fg('platform_editor_table_sticky_header_patch_1') ? "th.".concat(ClassName.TABLE_HEADER_CELL, "::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderColor, ";\n\t\t\t\tborder-bottom: 1px solid ").concat(tableBorderColor, ";\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}") : "", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, "var(--ds-surface, #FFFFFF)", stickyRowZIndex, fg('platform_editor_table_sticky_header_patch_2') ? "\n\t\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\t\tborder-top: ").concat(tableMarginTop, "px solid transparent;\n\t\t}\n\n\t\t.").concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\t\tborder-top: ").concat(tableMarginTop, "px solid ", "var(--ds-surface, #FFFFFF)", ";\n\t\t}") : fg('platform_editor_table_sticky_header_patch_1') ? "\n\t\t\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\t\t\tmargin-top: 1px;\n\t\t\t}") : "", ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, aboveNativeStickyHeaderZIndex, fg('platform_editor_table_sticky_header_patch_7') ? "\n\t\t.".concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, ":has(~ .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ") {\n\t\t\tmargin-top: 0;\n\t\t}\n\t") : "", 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, fg('platform_editor_table_sticky_header_patch_4') ? "tr.".concat(ClassName.NATIVE_STICKY) : '', 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, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize, "var(--ds-surface, #FFFFFF)", 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, TableSharedCssClassName.TABLE_LEFT_BORDER, TableSharedCssClassName.TABLE_RIGHT_BORDER, 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, #DDDEE1)", 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, #DDDEE1)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(10) : "10px", expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? relativeSizeToBaseFontSize(14) : relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, editorExperiment('platform_editor_block_menu', true) ? "/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.".concat(akEditorSelectedNodeClassName, " {\n\t\t.").concat(ClassName.NUMBERED_COLUMN, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\t").concat(numberedColumnButtonSelectedStyles, "\n\t\t\t\t").concat(hideNativeBrowserTextSelectionStyles, "\n\t\t\t}\n\t\t}\n\t}") : '', ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, editorExperiment('platform_editor_block_menu', 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, #AE2E24)", ";\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.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableBorderDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, tableCellDeleteColor, 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, tableCellDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, tableCellDeleteColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? activeCellHighlightStyles() : '', 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, expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "0.5px solid ".concat(tableBorderColor) : "1px solid ".concat(tableBorderColor), expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : "1px solid ".concat(tableBorderColor), "var(--ds-background-accent-gray-subtlest, #F0F1F2)", fg('platform_editor_table_sticky_header_patch_1') ? "border-top: 1px solid ".concat(tableBorderColor, ";") : "", getBrowserInfo().gecko && expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "border-top: 1px solid ".concat(tableBorderColor, ";") : "border-top: none;", fg('platform_editor_table_sticky_header_patch_7') ? ".ak-editor-selected-node .".concat(ClassName.TABLE_CONTAINER, "[data-number-column=\"true\"]:not(.").concat(ClassName.TABLE_SELECTED, ") .").concat(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type {\n\t\t\t&::before {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderSelectedColor, ";\n\t\t\t\tbackground: ").concat(tableCellSelectedColor, ";\n\t\t\t}\n\t}") : '', 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, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? ".".concat(ClassName.TABLE_CONTAINER, ".").concat(ClassName.WITH_CONTROLS, ":has(tr.sticky) .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tbox-shadow: 0 -5px 0 1px ").concat(tableBorderColor, ";\n\t\t}") : "", 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);
|
|
70
73
|
};
|
|
71
74
|
|
|
72
75
|
// re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
|
|
73
76
|
export var baseTableStyles = function baseTableStyles(props) {
|
|
74
|
-
return css(
|
|
77
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n"])), tableSharedStyle(), baseTableStylesWithoutSharedStyle(props));
|
|
75
78
|
};
|
|
76
79
|
|
|
77
80
|
// TODO: DSP-4139 - Remove this when we have a better solution for the table toolbar
|
|
78
81
|
export var tableStyles = function tableStyles(props) {
|
|
79
|
-
return css(
|
|
82
|
+
return css(_templateObject8 || (_templateObject8 = _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"])), baseTableStylesWithoutSharedStyle(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
|
|
80
83
|
};
|
|
81
84
|
|
|
82
85
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
83
|
-
export var tableFullPageEditorStyles = css(
|
|
86
|
+
export var tableFullPageEditorStyles = css(_templateObject9 || (_templateObject9 = _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);
|
|
84
87
|
|
|
85
88
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
86
|
-
export var tableCommentEditorStyles = css(
|
|
87
|
-
var tableAnchorStyles = css(
|
|
89
|
+
export var tableCommentEditorStyles = css(_templateObject0 || (_templateObject0 = _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);
|
|
90
|
+
var tableAnchorStyles = css(_templateObject1 || (_templateObject1 = _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\n\t.pm-table-with-controls .pm-table-wrapper-no-overflow [data-prosemirror-node-name='tableRow'] {\n\t\tanchor-name: var(", ", attr(data-node-anchor type(<custom-ident>)));\n\t}\n"])), ANCHOR_VARIABLE_NAME, ANCHOR_VARIABLE_NAME);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
interface ActiveCellHighlightState {
|
|
5
|
+
/** Position of the currently highlighted cell, or -1 if none */
|
|
6
|
+
cellPos: number;
|
|
7
|
+
decorationSet: DecorationSet;
|
|
8
|
+
}
|
|
9
|
+
export declare const activeCellHighlightPluginKey: PluginKey<ActiveCellHighlightState>;
|
|
10
|
+
export declare const createPlugin: () => SafePlugin<ActiveCellHighlightState>;
|
|
11
|
+
export {};
|
|
@@ -319,6 +319,7 @@ export declare enum TableDecorations {
|
|
|
319
319
|
ROW_INSERT_LINE = "ROW_INSERT_LINE"
|
|
320
320
|
}
|
|
321
321
|
export declare const TableCssClassName: {
|
|
322
|
+
ACTIVE_CURSOR_CELL: string;
|
|
322
323
|
/** Classic controls */
|
|
323
324
|
COLUMN_CONTROLS: string;
|
|
324
325
|
COLUMN_CONTROLS_DECORATIONS: string;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
interface ActiveCellHighlightState {
|
|
5
|
+
/** Position of the currently highlighted cell, or -1 if none */
|
|
6
|
+
cellPos: number;
|
|
7
|
+
decorationSet: DecorationSet;
|
|
8
|
+
}
|
|
9
|
+
export declare const activeCellHighlightPluginKey: PluginKey<ActiveCellHighlightState>;
|
|
10
|
+
export declare const createPlugin: () => SafePlugin<ActiveCellHighlightState>;
|
|
11
|
+
export {};
|
|
@@ -319,6 +319,7 @@ export declare enum TableDecorations {
|
|
|
319
319
|
ROW_INSERT_LINE = "ROW_INSERT_LINE"
|
|
320
320
|
}
|
|
321
321
|
export declare const TableCssClassName: {
|
|
322
|
+
ACTIVE_CURSOR_CELL: string;
|
|
322
323
|
/** Classic controls */
|
|
323
324
|
COLUMN_CONTROLS: string;
|
|
324
325
|
COLUMN_CONTROLS_DECORATIONS: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "22.2.
|
|
3
|
+
"version": "22.2.13",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^10.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-content-insertion": "^10.0.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-viewmode": "^12.0.0",
|
|
40
|
-
"@atlaskit/editor-plugin-extension": "13.1.
|
|
40
|
+
"@atlaskit/editor-plugin-extension": "13.1.7",
|
|
41
41
|
"@atlaskit/editor-plugin-guideline": "^10.0.0",
|
|
42
42
|
"@atlaskit/editor-plugin-interaction": "^19.0.0",
|
|
43
43
|
"@atlaskit/editor-plugin-limited-mode": "^7.1.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
57
57
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
|
58
58
|
"@atlaskit/primitives": "^19.0.0",
|
|
59
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
59
|
+
"@atlaskit/tmp-editor-statsig": "^73.0.0",
|
|
60
60
|
"@atlaskit/toggle": "^15.6.0",
|
|
61
61
|
"@atlaskit/tokens": "^13.0.0",
|
|
62
62
|
"@atlaskit/tooltip": "^21.2.0",
|