@atlaskit/editor-plugin-table 7.19.12 → 7.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/nodeviews/table.js +2 -4
  3. package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +1 -1
  4. package/dist/cjs/ui/common-styles.js +20 -11
  5. package/dist/es2019/nodeviews/table.js +3 -5
  6. package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +1 -1
  7. package/dist/es2019/ui/common-styles.js +15 -4
  8. package/dist/esm/nodeviews/table.js +3 -5
  9. package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +1 -1
  10. package/dist/esm/ui/common-styles.js +21 -12
  11. package/dist/types/nodeviews/table.d.ts +1 -2
  12. package/dist/types/nodeviews/types.d.ts +1 -3
  13. package/dist/types/pm-plugins/main.d.ts +1 -2
  14. package/dist/types-ts4.5/nodeviews/table.d.ts +1 -2
  15. package/dist/types-ts4.5/nodeviews/types.d.ts +1 -3
  16. package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -2
  17. package/package.json +3 -3
  18. package/src/nodeviews/table.tsx +3 -10
  19. package/src/nodeviews/types.ts +1 -3
  20. package/src/pm-plugins/main.ts +1 -2
  21. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +1 -1
  22. package/src/ui/common-styles.ts +17 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.20.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#120417](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120417)
8
+ [`26e76bb38b63f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/26e76bb38b63f) -
9
+ [ux] ECA11Y-175: This changes improves the floating toolbar a11y by making the image border
10
+ options menu accessible for keyboard-only users, and is behind the feature gate
11
+ `platform-editor-a11y-image-border-options-dropdown`.
12
+ - [#120475](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120475)
13
+ [`f1755b740ebba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f1755b740ebba) -
14
+ [ux] When narrow Main Toolber is enabled, remove margin top from sticky table header.
15
+ - Updated dependencies
16
+
17
+ ## 7.20.0
18
+
19
+ ### Minor Changes
20
+
21
+ - [#119966](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119966)
22
+ [`596ad24e38929`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/596ad24e38929) -
23
+ Clean up typescript references to LegacyPortalProviderAPI
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies
28
+
3
29
  ## 7.19.12
4
30
 
5
31
  ### Patch Changes
package/dist/cjs/nodeviews/table.js CHANGED
@@ -75,7 +75,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
75
75
  function TableView(props) {
76
76
  var _this;
77
77
  (0, _classCallCheck2.default)(this, TableView);
78
- _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
78
+ _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
79
79
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNode", function () {
80
80
  return _this.node;
81
81
  });
@@ -132,7 +132,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
132
132
  key: "render",
133
133
  value: function render(props, forwardRef) {
134
134
  var _this3 = this;
135
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook')) {
135
+ if ((0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
136
136
  return /*#__PURE__*/_react.default.createElement(_TableComponentWithSharedState.TableComponentWithSharedState, {
137
137
  forwardRef: forwardRef,
138
138
  getNode: this.getNode,
@@ -297,7 +297,6 @@ var createTableView = exports.createTableView = function createTableView(node, v
297
297
  var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
298
298
  allowColumnResizing = _getPluginConfig.allowColumnResizing,
299
299
  allowControls = _getPluginConfig.allowControls;
300
- var hasIntlContext = true;
301
300
  return new TableView({
302
301
  node: node,
303
302
  view: view,
@@ -318,7 +317,6 @@ var createTableView = exports.createTableView = function createTableView(node, v
318
317
  getEditorContainerWidth: getEditorContainerWidth,
319
318
  getEditorFeatureFlags: getEditorFeatureFlags,
320
319
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
321
- hasIntlContext: hasIntlContext,
322
320
  pluginInjectionApi: pluginInjectionApi
323
321
  }).init();
324
322
  };
package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -718,7 +718,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
718
718
  section: isDragAndDropEnabled ? {
719
719
  hasSeparator: true
720
720
  } : undefined,
721
- isAllowEnterDefaultBehavior: (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
721
+ allowEnterDefaultBehavior: (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
722
722
  }));
723
723
  }
724
724
  }]);
package/dist/cjs/ui/common-styles.js CHANGED
@@ -19,7 +19,7 @@ var _consts = require("../pm-plugins/view-mode-sort/consts");
19
19
  var _types = require("../types");
20
20
  var _consts2 = require("./consts");
21
21
  var _uiStyles = require("./ui-styles");
22
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
22
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
23
23
  /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
24
24
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
25
  var cornerControlHeight = _consts2.tableToolbarSize + 1;
@@ -42,16 +42,25 @@ var shadowSentinelStyles = "\n .".concat(_types.TableCssClassName.TABLE_SHADOW_
42
42
  var breakoutWidthStyling = function breakoutWidthStyling() {
43
43
  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER);
44
44
  };
45
+ var stickyHeaderMarginTop = function stickyHeaderMarginTop() {
46
+ // Exceptional case: can't add this FF to package.json as a new ratcheting rule was added to prevent new LD flags.
47
+ // This LD flag existed in other packages before the rule was introduced.
48
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
49
+ if (!(0, _platformFeatureFlags.fg)('platform.confluence.frontend.narrow-full-page-editor-toolbar')) {
50
+ return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tmargin-top: 2px;\n\t\t"])));
51
+ }
52
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
53
+ };
45
54
  var viewModeSortStyles = function viewModeSortStyles() {
46
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.live-pages-sorting_4malx')) {
47
- return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tth {\n\t\t\t\t.", " {\n\t\t\t\t\t+ p {\n\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
55
+ if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
56
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tth {\n\t\t\t\t.", " {\n\t\t\t\t\t+ p {\n\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
48
57
  }
49
58
  };
50
59
  var numberColumnFix = function numberColumnFix() {
51
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.editor-num-col-style-changes')) {
60
+ if ((0, _platformFeatureFlags.fg)('platform.editor.table.editor-num-col-style-changes')) {
52
61
  return '';
53
62
  }
54
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t> table[data-number-column='true'] {\n\t\t\twidth: calc(100% - 1px);\n\t\t}\n\t"])));
63
+ return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t> table[data-number-column='true'] {\n\t\t\twidth: calc(100% - 1px);\n\t\t}\n\t"])));
55
64
  };
56
65
  var tableBorderStyles = function tableBorderStyles() {
57
66
  return "border-color: ".concat(_consts2.tableBorderDeleteColor);
@@ -59,7 +68,7 @@ var tableBorderStyles = function tableBorderStyles() {
59
68
 
60
69
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
61
70
  var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeaderColumnControlsDecorationsStyle() {
62
- return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
71
+ return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
63
72
  };
64
73
  var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle() {
65
74
  /*
@@ -68,23 +77,23 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
68
77
  see https://product-fabric.atlassian.net/browse/ED-19177
69
78
  */
70
79
  if (_utils.browser.gecko) {
71
- return (0, _react.css)(_templateObject5 || (_templateObject5 = (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);
80
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = (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);
72
81
  }
73
82
  };
74
83
 
75
84
  // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
76
85
  var baseTableStyles = exports.baseTableStyles = function baseTableStyles(props) {
77
86
  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
78
- 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\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\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 /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":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\n\t\tmargin-top: 2px;\n\n\t\tbox-shadow: 0 6px 4px -4px ", ";\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\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\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\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\t\t", ";\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\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of 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\tpadding: 0 ", "px;\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\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\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: 24px;\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: 24px;\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: 10px 2px;\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\t// which hides the table when scrolling\n\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\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\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\n\t\t", "\n\t}\n"])), (0, _styles.tableSharedStyle)(), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), _types.TableCssClassName.LAST_ITEM_IN_CELL, _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, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _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, white)", _consts2.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _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, _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.WITH_CONTROLS, _consts2.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableControlsSpacing - _consts2.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), _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_COLUMN_CONTROLS_WRAPPER, _consts2.tablePadding, _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_RIGHT_SHADOW, _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, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _consts2.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts2.tableHeaderCellBackgroundColor, _consts2.tableTextColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _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, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _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, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableToolbarDeleteColor, _consts2.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _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.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _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, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts2.tableToolbarSize + 1, _consts2.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts2.tableToolbarSize, _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, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, _types.TableCssClassName.TABLE_NODE_WRAPPER, numberColumnFix());
87
+ return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\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 /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":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\n\t\t", "\n\n\t\tbox-shadow: 0 6px 4px -4px ", ";\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\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\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\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\t\t", ";\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\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of 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\tpadding: 0 ", "px;\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\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\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: 24px;\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: 24px;\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: 10px 2px;\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\t// which hides the table when scrolling\n\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\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\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\n\t\t", "\n\t}\n"])), (0, _styles.tableSharedStyle)(), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), _types.TableCssClassName.LAST_ITEM_IN_CELL, _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, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _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, white)", _consts2.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", stickyHeaderMarginTop(), "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _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, _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.WITH_CONTROLS, _consts2.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableControlsSpacing - _consts2.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), _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_COLUMN_CONTROLS_WRAPPER, _consts2.tablePadding, _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_RIGHT_SHADOW, _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, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _consts2.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts2.tableHeaderCellBackgroundColor, _consts2.tableTextColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _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, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _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, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableToolbarDeleteColor, _consts2.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _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.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _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, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts2.tableToolbarSize + 1, _consts2.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts2.tableToolbarSize, _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, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, _types.TableCssClassName.TABLE_NODE_WRAPPER, numberColumnFix());
79
88
  };
80
89
 
81
90
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
82
91
  var tableStyles = exports.tableStyles = function tableStyles(props) {
83
- return (0, _react.css)(_templateObject7 || (_templateObject7 = (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"])), baseTableStyles(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
92
+ return (0, _react.css)(_templateObject9 || (_templateObject9 = (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"])), baseTableStyles(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
84
93
  };
85
94
 
86
95
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
87
- var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (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);
96
+ var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (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);
88
97
 
89
98
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
90
- var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (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);
99
+ var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (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);
package/dist/es2019/nodeviews/table.js CHANGED
@@ -6,7 +6,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
6
6
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
7
7
  import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
8
8
  import { TableMap } from '@atlaskit/editor-tables/table-map';
9
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { pluginConfig as getPluginConfig } from '../create-plugin-config';
11
11
  import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
12
12
  import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -53,7 +53,7 @@ const toDOM = (node, props) => {
53
53
  };
54
54
  export default class TableView extends ReactNodeView {
55
55
  constructor(props) {
56
- super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
56
+ super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
57
57
  _defineProperty(this, "getNode", () => {
58
58
  return this.node;
59
59
  });
@@ -99,7 +99,7 @@ export default class TableView extends ReactNodeView {
99
99
  }
100
100
  }
101
101
  render(props, forwardRef) {
102
- if (getBooleanFF('platform.editor.table.use-shared-state-hook')) {
102
+ if (fg('platform.editor.table.use-shared-state-hook')) {
103
103
  return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
104
104
  forwardRef: forwardRef,
105
105
  getNode: this.getNode,
@@ -264,7 +264,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
264
264
  allowColumnResizing,
265
265
  allowControls
266
266
  } = getPluginConfig(pluginConfig);
267
- const hasIntlContext = true;
268
267
  return new TableView({
269
268
  node,
270
269
  view,
@@ -285,7 +284,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
285
284
  getEditorContainerWidth,
286
285
  getEditorFeatureFlags,
287
286
  dispatchAnalyticsEvent,
288
- hasIntlContext,
289
287
  pluginInjectionApi
290
288
  }).init();
291
289
  };
package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -768,7 +768,7 @@ export class ContextualMenu extends Component {
768
768
  section: isDragAndDropEnabled ? {
769
769
  hasSeparator: true
770
770
  } : undefined,
771
- isAllowEnterDefaultBehavior: fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
771
+ allowEnterDefaultBehavior: fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
772
772
  }));
773
773
  }
774
774
  }
package/dist/es2019/ui/common-styles.js CHANGED
@@ -7,7 +7,7 @@ import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
7
7
  import { browser } from '@atlaskit/editor-common/utils';
8
8
  import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
9
9
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
10
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
11
11
  import { N0, N40A, R500 } from '@atlaskit/theme/colors';
12
12
  import { fontSize } from '@atlaskit/theme/constants';
13
13
  import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
@@ -123,8 +123,19 @@ const breakoutWidthStyling = () => {
123
123
  }
124
124
  `;
125
125
  };
126
+ const stickyHeaderMarginTop = () => {
127
+ // Exceptional case: can't add this FF to package.json as a new ratcheting rule was added to prevent new LD flags.
128
+ // This LD flag existed in other packages before the rule was introduced.
129
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
130
+ if (!fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')) {
131
+ return css`
132
+ margin-top: 2px;
133
+ `;
134
+ }
135
+ return css``;
136
+ };
126
137
  const viewModeSortStyles = () => {
127
- if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
138
+ if (fg('platform.editor.table.live-pages-sorting_4malx')) {
128
139
  return css`
129
140
  th {
130
141
  .${SORTING_ICON_CLASS_NAME} {
@@ -156,7 +167,7 @@ const viewModeSortStyles = () => {
156
167
  }
157
168
  };
158
169
  const numberColumnFix = () => {
159
- if (getBooleanFF('platform.editor.table.editor-num-col-style-changes')) {
170
+ if (fg('platform.editor.table.editor-num-col-style-changes')) {
160
171
  return '';
161
172
  }
162
173
  return css`
@@ -332,7 +343,7 @@ export const baseTableStyles = props => {
332
343
  background: ${"var(--ds-surface, white)"};
333
344
  box-sizing: content-box;
334
345
 
335
- margin-top: 2px;
346
+ ${stickyHeaderMarginTop()}
336
347
 
337
348
  box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
338
349
  margin-left: -1px;
package/dist/esm/nodeviews/table.js CHANGED
@@ -17,7 +17,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
17
17
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
18
18
  import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
19
19
  import { TableMap } from '@atlaskit/editor-tables/table-map';
20
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
20
+ import { fg } from '@atlaskit/platform-feature-flags';
21
21
  import { pluginConfig as getPluginConfig } from '../create-plugin-config';
22
22
  import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
23
23
  import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -68,7 +68,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
68
68
  function TableView(props) {
69
69
  var _this;
70
70
  _classCallCheck(this, TableView);
71
- _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
71
+ _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
72
72
  _defineProperty(_assertThisInitialized(_this), "getNode", function () {
73
73
  return _this.node;
74
74
  });
@@ -125,7 +125,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
125
125
  key: "render",
126
126
  value: function render(props, forwardRef) {
127
127
  var _this3 = this;
128
- if (getBooleanFF('platform.editor.table.use-shared-state-hook')) {
128
+ if (fg('platform.editor.table.use-shared-state-hook')) {
129
129
  return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
130
130
  forwardRef: forwardRef,
131
131
  getNode: this.getNode,
@@ -291,7 +291,6 @@ export var createTableView = function createTableView(node, view, getPos, portal
291
291
  var _getPluginConfig = getPluginConfig(pluginConfig),
292
292
  allowColumnResizing = _getPluginConfig.allowColumnResizing,
293
293
  allowControls = _getPluginConfig.allowControls;
294
- var hasIntlContext = true;
295
294
  return new TableView({
296
295
  node: node,
297
296
  view: view,
@@ -312,7 +311,6 @@ export var createTableView = function createTableView(node, view, getPos, portal
312
311
  getEditorContainerWidth: getEditorContainerWidth,
313
312
  getEditorFeatureFlags: getEditorFeatureFlags,
314
313
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
315
- hasIntlContext: hasIntlContext,
316
314
  pluginInjectionApi: pluginInjectionApi
317
315
  }).init();
318
316
  };
package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -711,7 +711,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
711
711
  section: isDragAndDropEnabled ? {
712
712
  hasSeparator: true
713
713
  } : undefined,
714
- isAllowEnterDefaultBehavior: fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
714
+ allowEnterDefaultBehavior: fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
715
715
  }));
716
716
  }
717
717
  }]);
package/dist/esm/ui/common-styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
3
3
  /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
4
4
 
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -9,7 +9,7 @@ import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
9
9
  import { browser } from '@atlaskit/editor-common/utils';
10
10
  import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
11
11
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
12
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
13
13
  import { N0, N40A, R500 } from '@atlaskit/theme/colors';
14
14
  import { fontSize } from '@atlaskit/theme/constants';
15
15
  import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
@@ -36,16 +36,25 @@ var shadowSentinelStyles = "\n .".concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT,
36
36
  var breakoutWidthStyling = function breakoutWidthStyling() {
37
37
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
38
38
  };
39
+ var stickyHeaderMarginTop = function stickyHeaderMarginTop() {
40
+ // Exceptional case: can't add this FF to package.json as a new ratcheting rule was added to prevent new LD flags.
41
+ // This LD flag existed in other packages before the rule was introduced.
42
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
43
+ if (!fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')) {
44
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\tmargin-top: 2px;\n\t\t"])));
45
+ }
46
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
47
+ };
39
48
  var viewModeSortStyles = function viewModeSortStyles() {
40
- if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
41
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\tth {\n\t\t\t\t.", " {\n\t\t\t\t\t+ p {\n\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
49
+ if (fg('platform.editor.table.live-pages-sorting_4malx')) {
50
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\tth {\n\t\t\t\t.", " {\n\t\t\t\t\t+ p {\n\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
42
51
  }
43
52
  };
44
53
  var numberColumnFix = function numberColumnFix() {
45
- if (getBooleanFF('platform.editor.table.editor-num-col-style-changes')) {
54
+ if (fg('platform.editor.table.editor-num-col-style-changes')) {
46
55
  return '';
47
56
  }
48
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t> table[data-number-column='true'] {\n\t\t\twidth: calc(100% - 1px);\n\t\t}\n\t"])));
57
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t> table[data-number-column='true'] {\n\t\t\twidth: calc(100% - 1px);\n\t\t}\n\t"])));
49
58
  };
50
59
  var tableBorderStyles = function tableBorderStyles() {
51
60
  return "border-color: ".concat(tableBorderDeleteColor);
@@ -53,7 +62,7 @@ var tableBorderStyles = function tableBorderStyles() {
53
62
 
54
63
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
55
64
  var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeaderColumnControlsDecorationsStyle() {
56
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS);
65
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS);
57
66
  };
58
67
  var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle() {
59
68
  /*
@@ -62,23 +71,23 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
62
71
  see https://product-fabric.atlassian.net/browse/ED-19177
63
72
  */
64
73
  if (browser.gecko) {
65
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), ClassName.TABLE_STICKY);
74
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), ClassName.TABLE_STICKY);
66
75
  }
67
76
  };
68
77
 
69
78
  // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
70
79
  export var baseTableStyles = function baseTableStyles(props) {
71
80
  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
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\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\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 /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":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\n\t\tmargin-top: 2px;\n\n\t\tbox-shadow: 0 6px 4px -4px ", ";\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\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\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\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\t\t", ";\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\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of 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\tpadding: 0 ", "px;\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\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\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: 24px;\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: 24px;\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: 10px 2px;\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\t// which hides the table when scrolling\n\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\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\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\n\t\t", "\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine(), resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, 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.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, 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, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_NODE_WRAPPER, numberColumnFix());
81
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\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 /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":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\n\t\t", "\n\n\t\tbox-shadow: 0 6px 4px -4px ", ";\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\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\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\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\t\t", ";\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\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of 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\tpadding: 0 ", "px;\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\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\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: 24px;\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: 24px;\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: 10px 2px;\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\t// which hides the table when scrolling\n\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\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\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\n\t\t", "\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine(), resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", stickyHeaderMarginTop(), "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, 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.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, 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, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_NODE_WRAPPER, numberColumnFix());
73
82
  };
74
83
 
75
84
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
76
85
  export var tableStyles = function tableStyles(props) {
77
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
86
+ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
78
87
  };
79
88
 
80
89
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
81
- export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
90
+ export var tableFullPageEditorStyles = css(_templateObject10 || (_templateObject10 = _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);
82
91
 
83
92
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
84
- export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
93
+ export var tableCommentEditorStyles = css(_templateObject11 || (_templateObject11 = _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);
package/dist/types/nodeviews/table.d.ts CHANGED
@@ -2,7 +2,6 @@
2
2
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
3
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
4
4
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
5
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
6
5
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
7
6
  import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
8
7
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -33,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
33
32
  }): boolean;
34
33
  destroy(): void;
35
34
  }
36
- export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean) => NodeView;
35
+ export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean) => NodeView;
37
36
  export {};
package/dist/types/nodeviews/types.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
2
2
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
3
3
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
4
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
5
4
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
6
5
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
7
6
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -20,13 +19,12 @@ export interface Props {
20
19
  allowColumnResizing?: boolean;
21
20
  allowControls?: boolean;
22
21
  cellMinWidth?: number;
23
- portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI;
22
+ portalProviderAPI: PortalProviderAPI;
24
23
  eventDispatcher: EventDispatcher;
25
24
  getPos: () => number | undefined;
26
25
  options?: TableOptions;
27
26
  getEditorContainerWidth: GetEditorContainerWidth;
28
27
  getEditorFeatureFlags: GetEditorFeatureFlags;
29
28
  dispatchAnalyticsEvent: DispatchAnalyticsEvent;
30
- hasIntlContext: boolean;
31
29
  pluginInjectionApi?: PluginInjectionAPI;
32
30
  }
package/dist/types/pm-plugins/main.d.ts CHANGED
@@ -2,8 +2,7 @@ import type { IntlShape } from 'react-intl-next';
2
2
  import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
3
  import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
4
4
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
5
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
6
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
7
6
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
8
7
  import type { PluginConfig, PluginInjectionAPI } from '../types';
9
- export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => SafePlugin<import("../types").TablePluginState>;
8
+ export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => SafePlugin<import("../types").TablePluginState>;
package/dist/types-ts4.5/nodeviews/table.d.ts CHANGED
@@ -2,7 +2,6 @@
2
2
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
3
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
4
4
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
5
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
6
5
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
7
6
  import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
8
7
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -33,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
33
32
  }): boolean;
34
33
  destroy(): void;
35
34
  }
36
- export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean) => NodeView;
35
+ export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean) => NodeView;
37
36
  export {};
package/dist/types-ts4.5/nodeviews/types.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
2
2
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
3
3
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
4
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
5
4
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
6
5
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
7
6
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -20,13 +19,12 @@ export interface Props {
20
19
  allowColumnResizing?: boolean;
21
20
  allowControls?: boolean;
22
21
  cellMinWidth?: number;
23
- portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI;
22
+ portalProviderAPI: PortalProviderAPI;
24
23
  eventDispatcher: EventDispatcher;
25
24
  getPos: () => number | undefined;
26
25
  options?: TableOptions;
27
26
  getEditorContainerWidth: GetEditorContainerWidth;
28
27
  getEditorFeatureFlags: GetEditorFeatureFlags;
29
28
  dispatchAnalyticsEvent: DispatchAnalyticsEvent;
30
- hasIntlContext: boolean;
31
29
  pluginInjectionApi?: PluginInjectionAPI;
32
30
  }
package/dist/types-ts4.5/pm-plugins/main.d.ts CHANGED
@@ -2,8 +2,7 @@ import type { IntlShape } from 'react-intl-next';
2
2
  import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
3
  import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
4
4
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
5
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
6
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
7
6
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
8
7
  import type { PluginConfig, PluginInjectionAPI } from '../types';
9
- export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => SafePlugin<import("../types").TablePluginState>;
8
+ export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => SafePlugin<import("../types").TablePluginState>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.19.12",
3
+ "version": "7.20.1",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/adf-schema": "^39.0.3",
32
32
  "@atlaskit/button": "^18.4.0",
33
33
  "@atlaskit/custom-steps": "^0.4.0",
34
- "@atlaskit/editor-common": "^84.5.0",
34
+ "@atlaskit/editor-common": "^85.1.0",
35
35
  "@atlaskit/editor-palette": "1.6.0",
36
36
  "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
37
37
  "@atlaskit/editor-plugin-analytics": "^1.4.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/editor-shared-styles": "^2.13.0",
45
45
  "@atlaskit/editor-tables": "^2.7.0",
46
46
  "@atlaskit/icon": "^22.6.0",
47
- "@atlaskit/menu": "^2.7.0",
47
+ "@atlaskit/menu": "^2.8.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.3.0",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
50
50
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
package/src/nodeviews/table.tsx CHANGED
@@ -5,7 +5,6 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
5
5
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
6
6
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
7
7
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
8
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
9
8
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
10
9
  import type {
11
10
  GetEditorContainerWidth,
@@ -20,7 +19,7 @@ import type { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state'
20
19
  import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
21
20
  import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
22
21
  import { TableMap } from '@atlaskit/editor-tables/table-map';
23
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
22
+ import { fg } from '@atlaskit/platform-feature-flags';
24
23
 
25
24
  import { pluginConfig as getPluginConfig } from '../create-plugin-config';
26
25
  import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
@@ -102,10 +101,6 @@ export default class TableView extends ReactNodeView<Props> {
102
101
  props.portalProviderAPI,
103
102
  props.eventDispatcher,
104
103
  props,
105
- undefined,
106
- undefined,
107
- undefined,
108
- props.hasIntlContext,
109
104
  );
110
105
  this.getPos = props.getPos;
111
106
  this.eventDispatcher = props.eventDispatcher;
@@ -183,7 +178,7 @@ export default class TableView extends ReactNodeView<Props> {
183
178
  };
184
179
 
185
180
  render(props: Props, forwardRef: ForwardRef) {
186
- if (getBooleanFF('platform.editor.table.use-shared-state-hook')) {
181
+ if (fg('platform.editor.table.use-shared-state-hook')) {
187
182
  return (
188
183
  <TableComponentWithSharedState
189
184
  forwardRef={forwardRef}
@@ -358,7 +353,7 @@ export const createTableView = (
358
353
  node: PmNode,
359
354
  view: EditorView,
360
355
  getPos: getPosHandler,
361
- portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI,
356
+ portalProviderAPI: PortalProviderAPI,
362
357
  eventDispatcher: EventDispatcher,
363
358
  getEditorContainerWidth: GetEditorContainerWidth,
364
359
  getEditorFeatureFlags: GetEditorFeatureFlags,
@@ -375,7 +370,6 @@ export const createTableView = (
375
370
  isTableScalingEnabled, // same as options.isTableScalingEnabled
376
371
  } = getPluginState(view.state);
377
372
  const { allowColumnResizing, allowControls } = getPluginConfig(pluginConfig);
378
- const hasIntlContext = true;
379
373
 
380
374
  return new TableView({
381
375
  node,
@@ -396,7 +390,6 @@ export const createTableView = (
396
390
  getEditorContainerWidth,
397
391
  getEditorFeatureFlags,
398
392
  dispatchAnalyticsEvent,
399
- hasIntlContext,
400
393
  pluginInjectionApi,
401
394
  }).init();
402
395
  };
package/src/nodeviews/types.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
2
2
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
3
3
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
4
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
5
4
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
6
5
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
7
6
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -23,13 +22,12 @@ export interface Props {
23
22
  allowColumnResizing?: boolean;
24
23
  allowControls?: boolean;
25
24
  cellMinWidth?: number;
26
- portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI;
25
+ portalProviderAPI: PortalProviderAPI;
27
26
  eventDispatcher: EventDispatcher;
28
27
  getPos: () => number | undefined;
29
28
  options?: TableOptions;
30
29
  getEditorContainerWidth: GetEditorContainerWidth;
31
30
  getEditorFeatureFlags: GetEditorFeatureFlags;
32
31
  dispatchAnalyticsEvent: DispatchAnalyticsEvent;
33
- hasIntlContext: boolean;
34
32
  pluginInjectionApi?: PluginInjectionAPI;
35
33
  }
package/src/pm-plugins/main.ts CHANGED
@@ -10,7 +10,6 @@ import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/edito
10
10
  import { insideTable } from '@atlaskit/editor-common/core-utils';
11
11
  import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
12
12
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
13
- import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
14
13
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
15
14
  import {
16
15
  transformSliceToRemoveOpenBodiedExtension,
@@ -79,7 +78,7 @@ import { pluginKey } from './plugin-key';
79
78
  export const createPlugin = (
80
79
  dispatchAnalyticsEvent: DispatchAnalyticsEvent,
81
80
  dispatch: Dispatch,
82
- portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI,
81
+ portalProviderAPI: PortalProviderAPI,
83
82
  eventDispatcher: EventDispatcher,
84
83
  pluginConfig: PluginConfig,
85
84
  getEditorContainerWidth: GetEditorContainerWidth,
package/src/ui/FloatingContextualMenu/ContextualMenu.tsx CHANGED
@@ -186,7 +186,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
186
186
  boundariesElement={boundariesElement}
187
187
  offset={offset}
188
188
  section={isDragAndDropEnabled ? { hasSeparator: true } : undefined}
189
- isAllowEnterDefaultBehavior={
189
+ allowEnterDefaultBehavior={
190
190
  fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
191
191
  }
192
192
  />
package/src/ui/common-styles.ts CHANGED
@@ -21,7 +21,7 @@ import {
21
21
  SelectionStyle,
22
22
  } from '@atlaskit/editor-shared-styles';
23
23
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
24
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
24
+ import { fg } from '@atlaskit/platform-feature-flags';
25
25
  import { N0, N40A, R500 } from '@atlaskit/theme/colors';
26
26
  import { fontSize } from '@atlaskit/theme/constants';
27
27
  import { token } from '@atlaskit/tokens';
@@ -196,8 +196,21 @@ const breakoutWidthStyling = () => {
196
196
  `;
197
197
  };
198
198
 
199
+ const stickyHeaderMarginTop = () => {
200
+ // Exceptional case: can't add this FF to package.json as a new ratcheting rule was added to prevent new LD flags.
201
+ // This LD flag existed in other packages before the rule was introduced.
202
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
203
+ if (!fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')) {
204
+ return css`
205
+ margin-top: 2px;
206
+ `;
207
+ }
208
+
209
+ return css``;
210
+ };
211
+
199
212
  const viewModeSortStyles = () => {
200
- if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
213
+ if (fg('platform.editor.table.live-pages-sorting_4malx')) {
201
214
  return css`
202
215
  th {
203
216
  .${SORTING_ICON_CLASS_NAME} {
@@ -230,7 +243,7 @@ const viewModeSortStyles = () => {
230
243
  };
231
244
 
232
245
  const numberColumnFix = () => {
233
- if (getBooleanFF('platform.editor.table.editor-num-col-style-changes')) {
246
+ if (fg('platform.editor.table.editor-num-col-style-changes')) {
234
247
  return '';
235
248
  }
236
249
 
@@ -407,7 +420,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
407
420
  background: ${token('elevation.surface', 'white')};
408
421
  box-sizing: content-box;
409
422
 
410
- margin-top: 2px;
423
+ ${stickyHeaderMarginTop()}
411
424
 
412
425
  box-shadow: 0 6px 4px -4px ${token('elevation.shadow.overflow.perimeter', N40A)};
413
426
  margin-left: -1px;