@atlaskit/editor-plugin-table 7.16.9 → 7.16.11

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 (25) hide show
  1. package/CHANGELOG.md +1833 -1828
  2. package/dist/cjs/nodeviews/TableResizer.js +15 -9
  3. package/dist/cjs/ui/common-styles.js +13 -7
  4. package/dist/cjs/utils/guidelines.js +5 -2
  5. package/dist/cjs/utils/snapping.js +16 -7
  6. package/dist/es2019/nodeviews/TableResizer.js +13 -9
  7. package/dist/es2019/ui/common-styles.js +11 -3
  8. package/dist/es2019/utils/guidelines.js +5 -2
  9. package/dist/es2019/utils/snapping.js +16 -7
  10. package/dist/esm/nodeviews/TableResizer.js +15 -9
  11. package/dist/esm/ui/common-styles.js +13 -7
  12. package/dist/esm/utils/guidelines.js +5 -2
  13. package/dist/esm/utils/snapping.js +16 -7
  14. package/dist/types/utils/guidelines.d.ts +2 -1
  15. package/dist/types/utils/snapping.d.ts +6 -2
  16. package/dist/types-ts4.5/utils/guidelines.d.ts +2 -1
  17. package/dist/types-ts4.5/utils/snapping.d.ts +6 -2
  18. package/package.json +4 -3
  19. package/src/nodeviews/TableComponent.tsx +1 -1
  20. package/src/nodeviews/TableResizer.tsx +20 -10
  21. package/src/ui/common-styles.ts +15 -5
  22. package/src/utils/guidelines.ts +6 -2
  23. package/src/utils/snapping.ts +32 -19
  24. package/tsconfig.app.json +107 -107
  25. package/tsconfig.dev.json +47 -47
package/dist/cjs/nodeviews/TableResizer.js CHANGED
@@ -130,20 +130,26 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
130
130
  startMeasure = _useMeasureFramerate.startMeasure,
131
131
  endMeasure = _useMeasureFramerate.endMeasure,
132
132
  countFrames = _useMeasureFramerate.countFrames;
133
+ var excludeGuidelineConfig = (0, _react.useMemo)(function () {
134
+ return {
135
+ innerGuidelines: !!isTableAlignmentEnabled,
136
+ breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
137
+ };
138
+ }, [tableState, isTableAlignmentEnabled]);
133
139
  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref3) {
134
140
  var gap = _ref3.gap,
135
141
  keys = _ref3.keys;
136
142
  if (gap !== currentGap.current) {
137
143
  currentGap.current = gap;
138
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
144
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth);
139
145
  displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
140
146
  }
141
- }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
147
+ }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
142
148
  var guidelineSnaps = (0, _react.useMemo)(function () {
143
149
  return snappingEnabled ? {
144
- x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths
150
+ x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
145
151
  } : undefined;
146
- }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
152
+ }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
147
153
  var switchToCenterAlignment = (0, _react.useCallback)(function (pos, node, newWidth, state, dispatch) {
148
154
  if (isTableAlignmentEnabled && node && node.attrs.layout === _alignment.ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
149
155
  // We don't want to switch alignment in Full-width editor
@@ -193,12 +199,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
193
199
  name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
194
200
  });
195
201
  dispatch(tr);
196
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
202
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth);
197
203
  setSnappingEnabled(displayGuideline(visibleGuidelines));
198
204
  if (onResizeStart) {
199
205
  onResizeStart();
200
206
  }
201
- }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
207
+ }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
202
208
  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
203
209
  var _node$attrs$localId, _node$attrs;
204
210
  countFrames();
@@ -218,14 +224,14 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
218
224
  start: pos + 1,
219
225
  parentWidth: newWidth
220
226
  }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
221
- var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
227
+ var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
222
228
  updateActiveGuidelines(closestSnap);
223
229
 
224
230
  // When snapping to the full width guideline, resize the table to be 1800px
225
231
  var state = editorView.state,
226
232
  dispatch = editorView.dispatch;
227
233
  var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
228
- var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
234
+ var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig).filter(function (guideline) {
229
235
  return guideline.isFullWidth;
230
236
  })[0];
231
237
  var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
@@ -235,7 +241,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
235
241
  }, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
236
242
  updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
237
243
  return newWidth;
238
- }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
244
+ }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
239
245
  var scheduleResize = (0, _react.useMemo)(function () {
240
246
  return (0, _rafSchd.default)(handleResize);
241
247
  }, [handleResize]);
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;
22
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
23
23
  /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
24
24
  var cornerControlHeight = _consts2.tableToolbarSize + 1;
25
25
 
@@ -46,13 +46,19 @@ var viewModeSortStyles = function viewModeSortStyles() {
46
46
  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n th {\n .", " {\n + p {\n margin-top: 0 !important;\n }\n }\n\n &:has(.is-active) {\n .", " {\n opacity: 1;\n }\n }\n\n .", " {\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n }\n\n &:hover {\n .", " {\n opacity: 1;\n }\n }\n }\n "])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
47
47
  }
48
48
  };
49
+ var numberColumnFix = function numberColumnFix() {
50
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.editor-num-col-style-changes')) {
51
+ return '';
52
+ }
53
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n > table[data-number-column='true'] {\n width: calc(100% - 1px);\n }\n "])));
54
+ };
49
55
  var tableBorderStyles = function tableBorderStyles() {
50
56
  return "border-color: ".concat(_consts2.tableBorderDeleteColor);
51
57
  };
52
58
 
53
59
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
54
60
  var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeaderColumnControlsDecorationsStyle() {
55
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " .", " {\n z-index: 0;\n left: -1px;\n }\n\n .", "\n .", "::after {\n border-left: 1px solid ", ";\n }\n\n .", "\n tr:first-of-type\n th.", " {\n &.", ", &.", " {\n .", "::after {\n left: 0;\n }\n }\n }\n "])), _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);
61
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .", " .", " {\n z-index: 0;\n left: -1px;\n }\n\n .", "\n .", "::after {\n border-left: 1px solid ", ";\n }\n\n .", "\n tr:first-of-type\n th.", " {\n &.", ", &.", " {\n .", "::after {\n left: 0;\n }\n }\n }\n "])), _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);
56
62
  };
57
63
  var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle() {
58
64
  /*
@@ -61,21 +67,21 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
61
67
  see https://product-fabric.atlassian.net/browse/ED-19177
62
68
  */
63
69
  if (_utils.browser.gecko) {
64
- return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .", " > tbody::before {\n content: '';\n }\n "])), _types.TableCssClassName.TABLE_STICKY);
70
+ return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n .", " > tbody::before {\n content: '';\n }\n "])), _types.TableCssClassName.TABLE_STICKY);
65
71
  }
66
72
  };
67
73
 
68
74
  // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
69
75
  var baseTableStyles = exports.baseTableStyles = function baseTableStyles(props) {
70
76
  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
71
- return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n ", "\n\n ", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky .", ", tr.sticky .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", ",\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\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 }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n .", " {\n display: grid;\n align-items: center;\n position: absolute;\n z-index: ", ";\n\n .", " {\n position: absolute;\n align-self: end;\n height: 100%;\n width: 18px;\n }\n\n .", " {\n position: absolute;\n bottom: -3px;\n left: 2px;\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n pointer-events: none;\n }\n }\n\n .", " {\n .", " {\n height: 24px;\n position: absolute;\n top: ", ";\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n height: 24px;\n width: 100%;\n }\n\n .", " {\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n position: absolute;\n right: -2px;\n }\n }\n\n .", " {\n background: none;\n border: none;\n outline: none;\n position: absolute;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n cursor: pointer;\n\n :focus {\n outline: none;\n }\n }\n\n .", " {\n cursor: grab;\n pointer-events: auto;\n\n line-height: 0;\n padding: 0;\n border-radius: 6px;\n width: max-content;\n border: 2px solid ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n outline: none;\n\n &.placeholder {\n background-color: transparent;\n border: 2px solid transparent;\n }\n\n &.", " {\n cursor: pointer;\n & svg {\n & > rect.", " {\n fill: ", ";\n }\n & > rect {\n fill: ", ";\n }\n & > g > rect {\n fill: ", ";\n }\n }\n }\n\n &:not(.", ") {\n & svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n\n &:hover {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &:active {\n cursor: grabbing;\n }\n\n &.selected {\n :focus {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n &:active {\n outline: none;\n }\n\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.danger {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n }\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n // add a background above the first numbered column cell when sticky header is engaged\n // which hides the table when scrolling\n .", " {\n .", ":first-of-type::after {\n content: '';\n display: block;\n height: 33px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n\n // the extra pixel is accounting for borders\n top: -34px;\n left: -1px;\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 0px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", ":not(.", ") {\n cursor: pointer;\n }\n .", ":not(.", "):hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\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 th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* 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 td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n\n &.", ".", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n\n // override for DnD controls\n .", " {\n position: absolute;\n margin-top: ", "px;\n left: -", "px;\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n left: -", "px;\n }\n\n .", ".", ",\n .", ".", " {\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n .", " .", " {\n position: fixed;\n /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n z-index: ", ";\n }\n\n .", " {\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n\n > table[data-number-column='true'] {\n width: calc(100% - 1px);\n }\n }\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);
77
+ return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n ", "\n\n ", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky .", ", tr.sticky .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", ",\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\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 }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n .", " {\n display: grid;\n align-items: center;\n position: absolute;\n z-index: ", ";\n\n .", " {\n position: absolute;\n align-self: end;\n height: 100%;\n width: 18px;\n }\n\n .", " {\n position: absolute;\n bottom: -3px;\n left: 2px;\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n pointer-events: none;\n }\n }\n\n .", " {\n .", " {\n height: 24px;\n position: absolute;\n top: ", ";\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n height: 24px;\n width: 100%;\n }\n\n .", " {\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n position: absolute;\n right: -2px;\n }\n }\n\n .", " {\n background: none;\n border: none;\n outline: none;\n position: absolute;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n cursor: pointer;\n\n :focus {\n outline: none;\n }\n }\n\n .", " {\n cursor: grab;\n pointer-events: auto;\n\n line-height: 0;\n padding: 0;\n border-radius: 6px;\n width: max-content;\n border: 2px solid ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n outline: none;\n\n &.placeholder {\n background-color: transparent;\n border: 2px solid transparent;\n }\n\n &.", " {\n cursor: pointer;\n & svg {\n & > rect.", " {\n fill: ", ";\n }\n & > rect {\n fill: ", ";\n }\n & > g > rect {\n fill: ", ";\n }\n }\n }\n\n &:not(.", ") {\n & svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n\n &:hover {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &:active {\n cursor: grabbing;\n }\n\n &.selected {\n :focus {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n &:active {\n outline: none;\n }\n\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.danger {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n }\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n // add a background above the first numbered column cell when sticky header is engaged\n // which hides the table when scrolling\n .", " {\n .", ":first-of-type::after {\n content: '';\n display: block;\n height: 33px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n\n // the extra pixel is accounting for borders\n top: -34px;\n left: -1px;\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 0px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", ":not(.", ") {\n cursor: pointer;\n }\n .", ":not(.", "):hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\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 th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* 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 td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n\n &.", ".", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n\n // override for DnD controls\n .", " {\n position: absolute;\n margin-top: ", "px;\n left: -", "px;\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n left: -", "px;\n }\n\n .", ".", ",\n .", ".", " {\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n .", " .", " {\n position: fixed;\n /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n z-index: ", ";\n }\n\n .", " {\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n\n ", "\n }\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());
72
78
  };
73
79
 
74
80
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
75
81
  var tableStyles = exports.tableStyles = function tableStyles(props) {
76
- return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n ", "\n"])), baseTableStyles(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
82
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n ", "\n"])), baseTableStyles(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
77
83
  };
78
84
 
79
85
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
80
- var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
81
- var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
86
+ var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
87
+ var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
package/dist/cjs/utils/guidelines.js CHANGED
@@ -12,7 +12,10 @@ var _snapping = require("./snapping");
12
12
  // If we don't do this then the guidelines will not align correctly to the edge of the table
13
13
  var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
14
14
  var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
15
- var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
16
- var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, excludeInnerGuidelines);
15
+ var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
16
+ innerGuidelines: false,
17
+ breakoutPoints: false
18
+ };
19
+ var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, exclude);
17
20
  return (0, _guideline.createFixedGuidelinesFromLengths)(lengths, undefined, true);
18
21
  };
package/dist/cjs/utils/snapping.js CHANGED
@@ -19,24 +19,33 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
19
19
  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
20
20
  return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
21
21
  };
22
-
23
22
  // FF TablePreserve for calculateDefaultSnappings
24
23
  var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
25
24
  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
26
25
  var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
27
- var excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
26
+ var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
27
+ innerGuidelines: false,
28
+ breakoutPoints: false
29
+ };
28
30
  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
29
- if (excludeInnerGuidelines) {
30
- return [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
31
+ var guides = [dynamicFullWidthLine - lengthOffset];
32
+ if (!exclude.breakoutPoints) {
33
+ guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
31
34
  }
32
- return [0].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
35
+ if (!exclude.innerGuidelines) {
36
+ guides.unshift.apply(guides, [0].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset))));
37
+ }
38
+ return guides;
33
39
  };
34
40
  var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
35
41
 
36
42
  // FF TablePreserve for defaultSnappingWidths
37
43
  var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
38
- var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
39
- return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
44
+ var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
45
+ innerGuidelines: false,
46
+ breakoutPoints: false
47
+ };
48
+ return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
40
49
  };
41
50
 
42
51
  /**
package/dist/es2019/nodeviews/TableResizer.js CHANGED
@@ -118,19 +118,23 @@ export const TableResizer = ({
118
118
  endMeasure,
119
119
  countFrames
120
120
  } = useMeasureFramerate();
121
+ const excludeGuidelineConfig = useMemo(() => ({
122
+ innerGuidelines: !!isTableAlignmentEnabled,
123
+ breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
124
+ }), [tableState, isTableAlignmentEnabled]);
121
125
  const updateActiveGuidelines = useCallback(({
122
126
  gap,
123
127
  keys
124
128
  }) => {
125
129
  if (gap !== currentGap.current) {
126
130
  currentGap.current = gap;
127
- const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
131
+ const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
128
132
  displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
129
133
  }
130
- }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
134
+ }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
131
135
  const guidelineSnaps = useMemo(() => snappingEnabled ? {
132
- x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
133
- } : undefined, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
136
+ x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
137
+ } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
134
138
  const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
135
139
  if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
136
140
  // We don't want to switch alignment in Full-width editor
@@ -188,12 +192,12 @@ export const TableResizer = ({
188
192
  name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
189
193
  });
190
194
  dispatch(tr);
191
- const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
195
+ const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
192
196
  setSnappingEnabled(displayGuideline(visibleGuidelines));
193
197
  if (onResizeStart) {
194
198
  onResizeStart();
195
199
  }
196
- }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
200
+ }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
197
201
  const handleResize = useCallback((originalState, delta) => {
198
202
  var _node$attrs$localId, _node$attrs;
199
203
  countFrames();
@@ -213,7 +217,7 @@ export const TableResizer = ({
213
217
  start: pos + 1,
214
218
  parentWidth: newWidth
215
219
  }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
216
- const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
220
+ const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
217
221
  updateActiveGuidelines(closestSnap);
218
222
 
219
223
  // When snapping to the full width guideline, resize the table to be 1800px
@@ -222,7 +226,7 @@ export const TableResizer = ({
222
226
  dispatch
223
227
  } = editorView;
224
228
  const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
225
- const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(guideline => guideline.isFullWidth)[0];
229
+ const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
226
230
  const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
227
231
  const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
228
232
  chainCommands((state, dispatch) => {
@@ -232,7 +236,7 @@ export const TableResizer = ({
232
236
  }))(state, dispatch);
233
237
  updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
234
238
  return newWidth;
235
- }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
239
+ }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
236
240
  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
237
241
  const handleResizeStop = useCallback((originalState, delta) => {
238
242
  var _node$attrs$localId2, _node$attrs2;
package/dist/es2019/ui/common-styles.js CHANGED
@@ -157,6 +157,16 @@ const viewModeSortStyles = () => {
157
157
  `;
158
158
  }
159
159
  };
160
+ const numberColumnFix = () => {
161
+ if (getBooleanFF('platform.editor.table.editor-num-col-style-changes')) {
162
+ return '';
163
+ }
164
+ return css`
165
+ > table[data-number-column='true'] {
166
+ width: calc(100% - 1px);
167
+ }
168
+ `;
169
+ };
160
170
  const tableBorderStyles = () => {
161
171
  return `border-color: ${tableBorderDeleteColor}`;
162
172
  };
@@ -980,9 +990,7 @@ export const baseTableStyles = props => {
980
990
  overflow-y: hidden;
981
991
  position: relative;
982
992
 
983
- > table[data-number-column='true'] {
984
- width: calc(100% - 1px);
985
- }
993
+ ${numberColumnFix()}
986
994
  }
987
995
  `;
988
996
  };
package/dist/es2019/utils/guidelines.js CHANGED
@@ -4,7 +4,10 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
4
4
  // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
5
5
  // If we don't do this then the guidelines will not align correctly to the edge of the table
6
6
  export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);
7
- export const defaultGuidelinesForPreserveTable = (editorContainerWidth, excludeInnerGuidelines = false) => {
8
- const lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, excludeInnerGuidelines);
7
+ export const defaultGuidelinesForPreserveTable = (editorContainerWidth, exclude = {
8
+ innerGuidelines: false,
9
+ breakoutPoints: false
10
+ }) => {
11
+ const lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, exclude);
9
12
  return createFixedGuidelinesFromLengths(lengths, undefined, true);
10
13
  };
package/dist/es2019/utils/snapping.js CHANGED
@@ -4,20 +4,29 @@ import { tableResizerWidth } from '../ui/consts';
4
4
  const numberOfLanesInDefaultLayoutWidth = 12;
5
5
  const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map((v, i) => v * (i + 1) * 2);
6
6
  export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
7
-
8
7
  // FF TablePreserve for calculateDefaultSnappings
9
- export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, excludeInnerGuidelines = false) => {
8
+ export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, exclude = {
9
+ innerGuidelines: false,
10
+ breakoutPoints: false
11
+ }) => {
10
12
  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
11
- if (excludeInnerGuidelines) {
12
- return [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
13
+ const guides = [dynamicFullWidthLine - lengthOffset];
14
+ if (!exclude.breakoutPoints) {
15
+ guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
16
+ }
17
+ if (!exclude.innerGuidelines) {
18
+ guides.unshift(0, ...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset));
13
19
  }
14
- return [0, ...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
20
+ return guides;
15
21
  };
16
22
  export const defaultSnappingWidths = calculateDefaultSnappings();
17
23
 
18
24
  // FF TablePreserve for defaultSnappingWidths
19
- export const defaultTablePreserveSnappingWidths = (editorContainerWidth, excludeInnerGuidelines = false) => {
20
- return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
25
+ export const defaultTablePreserveSnappingWidths = (editorContainerWidth, exclude = {
26
+ innerGuidelines: false,
27
+ breakoutPoints: false
28
+ }) => {
29
+ return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
21
30
  };
22
31
 
23
32
  /**
package/dist/esm/nodeviews/TableResizer.js CHANGED
@@ -120,20 +120,26 @@ export var TableResizer = function TableResizer(_ref) {
120
120
  startMeasure = _useMeasureFramerate.startMeasure,
121
121
  endMeasure = _useMeasureFramerate.endMeasure,
122
122
  countFrames = _useMeasureFramerate.countFrames;
123
+ var excludeGuidelineConfig = useMemo(function () {
124
+ return {
125
+ innerGuidelines: !!isTableAlignmentEnabled,
126
+ breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
127
+ };
128
+ }, [tableState, isTableAlignmentEnabled]);
123
129
  var updateActiveGuidelines = useCallback(function (_ref3) {
124
130
  var gap = _ref3.gap,
125
131
  keys = _ref3.keys;
126
132
  if (gap !== currentGap.current) {
127
133
  currentGap.current = gap;
128
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
134
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
129
135
  displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
130
136
  }
131
- }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
137
+ }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
132
138
  var guidelineSnaps = useMemo(function () {
133
139
  return snappingEnabled ? {
134
- x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
140
+ x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
135
141
  } : undefined;
136
- }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
142
+ }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
137
143
  var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
138
144
  if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
139
145
  // We don't want to switch alignment in Full-width editor
@@ -183,12 +189,12 @@ export var TableResizer = function TableResizer(_ref) {
183
189
  name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
184
190
  });
185
191
  dispatch(tr);
186
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
192
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
187
193
  setSnappingEnabled(displayGuideline(visibleGuidelines));
188
194
  if (onResizeStart) {
189
195
  onResizeStart();
190
196
  }
191
- }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
197
+ }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
192
198
  var handleResize = useCallback(function (originalState, delta) {
193
199
  var _node$attrs$localId, _node$attrs;
194
200
  countFrames();
@@ -208,14 +214,14 @@ export var TableResizer = function TableResizer(_ref) {
208
214
  start: pos + 1,
209
215
  parentWidth: newWidth
210
216
  }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
211
- var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
217
+ var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
212
218
  updateActiveGuidelines(closestSnap);
213
219
 
214
220
  // When snapping to the full width guideline, resize the table to be 1800px
215
221
  var state = editorView.state,
216
222
  dispatch = editorView.dispatch;
217
223
  var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
218
- var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
224
+ var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig).filter(function (guideline) {
219
225
  return guideline.isFullWidth;
220
226
  })[0];
221
227
  var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
@@ -225,7 +231,7 @@ export var TableResizer = function TableResizer(_ref) {
225
231
  }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
226
232
  updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
227
233
  return newWidth;
228
- }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
234
+ }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
229
235
  var scheduleResize = useMemo(function () {
230
236
  return rafSchd(handleResize);
231
237
  }, [handleResize]);