@atlaskit/editor-plugin-table 7.23.0 → 7.24.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 (93) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +6 -3
  3. package/dist/cjs/nodeviews/TableContainer.js +4 -2
  4. package/dist/cjs/nodeviews/lazy-node-views.js +4 -3
  5. package/dist/cjs/nodeviews/table.js +3 -2
  6. package/dist/cjs/plugin.js +5 -3
  7. package/dist/cjs/pm-plugins/main.js +4 -7
  8. package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js +34 -19
  9. package/dist/cjs/pm-plugins/table-resizing/utils/resize-logic.js +3 -0
  10. package/dist/cjs/toolbar.js +15 -12
  11. package/dist/cjs/types.js +2 -0
  12. package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +14 -8
  13. package/dist/cjs/ui/FloatingInsertButton/InsertButton.js +6 -5
  14. package/dist/cjs/ui/FloatingInsertButton/index.js +5 -3
  15. package/dist/cjs/ui/TableFloatingColumnControls/index.js +4 -3
  16. package/dist/cjs/ui/TableFloatingControls/index.js +3 -2
  17. package/dist/cjs/ui/common-styles.js +1 -1
  18. package/dist/cjs/ui/ui-styles.js +1 -1
  19. package/dist/es2019/nodeviews/TableComponent.js +6 -3
  20. package/dist/es2019/nodeviews/TableContainer.js +4 -2
  21. package/dist/es2019/nodeviews/lazy-node-views.js +4 -3
  22. package/dist/es2019/nodeviews/table.js +3 -2
  23. package/dist/es2019/plugin.js +5 -3
  24. package/dist/es2019/pm-plugins/main.js +4 -7
  25. package/dist/es2019/pm-plugins/table-resizing/utils/resize-column.js +41 -25
  26. package/dist/es2019/pm-plugins/table-resizing/utils/resize-logic.js +1 -0
  27. package/dist/es2019/toolbar.js +15 -12
  28. package/dist/es2019/types.js +2 -0
  29. package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +14 -8
  30. package/dist/es2019/ui/FloatingInsertButton/InsertButton.js +8 -6
  31. package/dist/es2019/ui/FloatingInsertButton/index.js +6 -4
  32. package/dist/es2019/ui/TableFloatingColumnControls/index.js +5 -4
  33. package/dist/es2019/ui/TableFloatingControls/index.js +3 -2
  34. package/dist/es2019/ui/common-styles.js +8 -0
  35. package/dist/es2019/ui/ui-styles.js +4 -0
  36. package/dist/esm/nodeviews/TableComponent.js +6 -3
  37. package/dist/esm/nodeviews/TableContainer.js +4 -2
  38. package/dist/esm/nodeviews/lazy-node-views.js +4 -3
  39. package/dist/esm/nodeviews/table.js +3 -2
  40. package/dist/esm/plugin.js +5 -3
  41. package/dist/esm/pm-plugins/main.js +4 -7
  42. package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js +35 -21
  43. package/dist/esm/pm-plugins/table-resizing/utils/resize-logic.js +3 -0
  44. package/dist/esm/toolbar.js +15 -12
  45. package/dist/esm/types.js +2 -0
  46. package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +14 -8
  47. package/dist/esm/ui/FloatingInsertButton/InsertButton.js +6 -5
  48. package/dist/esm/ui/FloatingInsertButton/index.js +6 -4
  49. package/dist/esm/ui/TableFloatingColumnControls/index.js +5 -4
  50. package/dist/esm/ui/TableFloatingControls/index.js +3 -2
  51. package/dist/esm/ui/common-styles.js +1 -1
  52. package/dist/esm/ui/ui-styles.js +1 -1
  53. package/dist/types/nodeviews/TableContainer.d.ts +2 -1
  54. package/dist/types/nodeviews/lazy-node-views.d.ts +1 -0
  55. package/dist/types/nodeviews/table.d.ts +1 -1
  56. package/dist/types/nodeviews/types.d.ts +1 -0
  57. package/dist/types/plugin.d.ts +1 -0
  58. package/dist/types/pm-plugins/main.d.ts +1 -1
  59. package/dist/types/types.d.ts +2 -0
  60. package/dist/types/ui/FloatingInsertButton/InsertButton.d.ts +2 -1
  61. package/dist/types/ui/FloatingInsertButton/index.d.ts +1 -0
  62. package/dist/types/ui/TableFloatingColumnControls/index.d.ts +2 -1
  63. package/dist/types/ui/TableFloatingControls/index.d.ts +2 -1
  64. package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +2 -1
  65. package/dist/types-ts4.5/nodeviews/lazy-node-views.d.ts +1 -0
  66. package/dist/types-ts4.5/nodeviews/table.d.ts +1 -1
  67. package/dist/types-ts4.5/nodeviews/types.d.ts +1 -0
  68. package/dist/types-ts4.5/plugin.d.ts +1 -0
  69. package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -1
  70. package/dist/types-ts4.5/types.d.ts +2 -0
  71. package/dist/types-ts4.5/ui/FloatingInsertButton/InsertButton.d.ts +2 -1
  72. package/dist/types-ts4.5/ui/FloatingInsertButton/index.d.ts +1 -0
  73. package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts +2 -1
  74. package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts +2 -1
  75. package/package.json +6 -6
  76. package/src/nodeviews/TableComponent.tsx +3 -0
  77. package/src/nodeviews/TableContainer.tsx +3 -0
  78. package/src/nodeviews/lazy-node-views.ts +4 -0
  79. package/src/nodeviews/table.tsx +2 -0
  80. package/src/nodeviews/types.ts +1 -0
  81. package/src/plugin.tsx +4 -0
  82. package/src/pm-plugins/main.ts +3 -4
  83. package/src/pm-plugins/table-resizing/utils/resize-column.ts +59 -31
  84. package/src/pm-plugins/table-resizing/utils/resize-logic.ts +1 -0
  85. package/src/toolbar.tsx +19 -14
  86. package/src/types.ts +2 -0
  87. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +20 -7
  88. package/src/ui/FloatingInsertButton/InsertButton.tsx +12 -4
  89. package/src/ui/FloatingInsertButton/index.tsx +5 -2
  90. package/src/ui/TableFloatingColumnControls/index.tsx +8 -3
  91. package/src/ui/TableFloatingControls/index.tsx +5 -1
  92. package/src/ui/common-styles.ts +8 -0
  93. package/src/ui/ui-styles.ts +4 -0
package/dist/esm/ui/TableFloatingColumnControls/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { useEffect, useMemo, useRef, useState } from 'react';
3
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
4
4
  import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
5
5
  import { TableCssClassName as ClassName } from '../../types';
6
6
  import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
@@ -22,7 +22,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
22
22
  isNumberColumnEnabled = _ref.isNumberColumnEnabled,
23
23
  getScrollOffset = _ref.getScrollOffset,
24
24
  tableWrapperHeight = _ref.tableWrapperHeight,
25
- api = _ref.api;
25
+ api = _ref.api,
26
+ isChromelessEditor = _ref.isChromelessEditor;
26
27
  var _useState = useState(false),
27
28
  _useState2 = _slicedToArray(_useState, 2),
28
29
  isDragging = _useState2[0],
@@ -74,7 +75,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
74
75
  ref: containerRef
75
76
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
76
77
  ,
77
- className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
78
+ className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : ''),
78
79
  "data-testid": "table-floating-column-controls-wrapper"
79
80
  }, /*#__PURE__*/React.createElement(ColumnControls, {
80
81
  editorView: editorView,
@@ -92,7 +93,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
92
93
  isNumberColumnEnabled: isNumberColumnEnabled,
93
94
  isDragging: isDragging,
94
95
  getScrollOffset: getScrollOffset,
95
- api: getBooleanFF('platform.editor.table.use-shared-state-hook') ? api : undefined
96
+ api: fg('platform.editor.table.use-shared-state-hook') ? api : undefined
96
97
  }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
97
98
  tableRef: tableRef,
98
99
  isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
package/dist/esm/ui/TableFloatingControls/index.js CHANGED
@@ -28,7 +28,8 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
28
28
  hoveredCell = _ref.hoveredCell,
29
29
  isTableHovered = _ref.isTableHovered,
30
30
  tableWrapperWidth = _ref.tableWrapperWidth,
31
- api = _ref.api;
31
+ api = _ref.api,
32
+ isChromelessEditor = _ref.isChromelessEditor;
32
33
  var _selectRow = useCallback(function (row, expand) {
33
34
  var state = editorView.state,
34
35
  dispatch = editorView.dispatch;
@@ -71,7 +72,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
71
72
  return null;
72
73
  }
73
74
  var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
74
- var wrapperClassName = isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
75
+ var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
75
76
  var tablePos = (_findTable = findTable(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
76
77
  var isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
77
78
  var shouldShowCornerControls = fg('platform_editor_element_drag_and_drop_ed_24041') ? !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested : !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop);
package/dist/esm/ui/common-styles.js CHANGED
@@ -72,7 +72,7 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
72
72
  // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
73
73
  export var baseTableStyles = function baseTableStyles(props) {
74
74
  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
75
- return css(_templateObject7 || (_templateObject7 = _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\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);
75
+ return css(_templateObject7 || (_templateObject7 = _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\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\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\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_ROW_CONTROLS_WRAPPER, ClassName.DRAG_CONTROLS_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.DRAG_CONTROLS_CHROMELESS, 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);
76
76
  };
77
77
 
78
78
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
package/dist/esm/ui/ui-styles.js CHANGED
@@ -49,7 +49,7 @@ var InsertButtonHover = function InsertButtonHover() {
49
49
  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), ClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
50
50
  };
51
51
  export var dragInsertButtonWrapper = function dragInsertButtonWrapper() {
52
- return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n height: ", dragTableInsertColumnButtonSize, "px;\n width: ").concat(dragTableInsertColumnButtonSize, "px;\n ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
52
+ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\t.", " {\n\t\tleft: 6px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n height: ", dragTableInsertColumnButtonSize, "px;\n width: ").concat(dragTableInsertColumnButtonSize, "px;\n ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
53
53
  };
54
54
 
55
55
  // Explicit pixel values required here to ensure corner button aligns correctly
package/dist/types/nodeviews/TableContainer.d.ts CHANGED
@@ -52,6 +52,7 @@ type TableContainerProps = {
52
52
  isTableAlignmentEnabled?: boolean;
53
53
  shouldUseIncreasedScalingPercent?: boolean;
54
54
  isCommentEditor?: boolean;
55
+ isChromelessEditor?: boolean;
55
56
  };
56
- export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
57
+ export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
57
58
  export {};
package/dist/types/nodeviews/lazy-node-views.d.ts CHANGED
@@ -16,6 +16,7 @@ type TableViewOptions = {
16
16
  pluginInjectionApi?: PluginInjectionAPI;
17
17
  isTableAlignmentEnabled?: boolean;
18
18
  isCommentEditor?: boolean;
19
+ isChromelessEditor?: boolean;
19
20
  };
20
21
  export declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
21
22
  type TableCellViewOptions = {
package/dist/types/nodeviews/table.d.ts CHANGED
@@ -32,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
32
32
  }): boolean;
33
33
  destroy(): void;
34
34
  }
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, isCommentEditor?: 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, isCommentEditor?: boolean, isChromelessEditor?: boolean) => NodeView;
36
36
  export {};
package/dist/types/nodeviews/types.d.ts CHANGED
@@ -13,6 +13,7 @@ export type TableOptions = {
13
13
  isTableScalingEnabled?: boolean;
14
14
  isTableAlignmentEnabled?: boolean;
15
15
  isCommentEditor?: boolean;
16
+ isChromelessEditor?: boolean;
16
17
  };
17
18
  export interface Props {
18
19
  node: PmNode;
package/dist/types/plugin.d.ts CHANGED
@@ -22,6 +22,7 @@ export interface TablePluginOptions {
22
22
  isTableAlignmentEnabled?: boolean;
23
23
  isNewColumnResizingEnabled?: boolean;
24
24
  isCommentEditor?: boolean;
25
+ isChromelessEditor?: boolean;
25
26
  }
26
27
  type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
27
28
  type MediaPlugin = NextEditorPlugin<'media', {
package/dist/types/pm-plugins/main.d.ts CHANGED
@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
5
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
6
6
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
7
7
  import type { PluginConfig, PluginInjectionAPI } from '../types';
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, isCommentEditor?: 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, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;
package/dist/types/types.d.ts CHANGED
@@ -318,6 +318,7 @@ export declare const TableCssClassName: {
318
318
  DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
319
319
  DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: string;
320
320
  DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: string;
321
+ DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: string;
321
322
  DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
322
323
  CONTROLS_INSERT_MARKER: string;
323
324
  CONTROLS_INSERT_COLUMN: string;
@@ -333,6 +334,7 @@ export declare const TableCssClassName: {
333
334
  /** drag and drop controls */
334
335
  DRAG_ROW_CONTROLS_WRAPPER: string;
335
336
  DRAG_ROW_CONTROLS: string;
337
+ DRAG_CONTROLS_CHROMELESS: string;
336
338
  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
337
339
  DRAG_ROW_FLOATING_INSERT_DOT: string;
338
340
  DRAG_COLUMN_CONTROLS: string;
package/dist/types/ui/FloatingInsertButton/InsertButton.d.ts CHANGED
@@ -7,8 +7,9 @@ export interface ButtonProps {
7
7
  tableRef: HTMLElement;
8
8
  onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
9
9
  hasStickyHeaders: boolean;
10
+ isChromelessEditor?: boolean;
10
11
  }
11
- export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
12
+ export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, isChromelessEditor, }: ButtonProps & WrappedComponentProps) => JSX.Element;
12
13
  export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps>> & {
13
14
  WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps>;
14
15
  };
package/dist/types/ui/FloatingInsertButton/index.d.ts CHANGED
@@ -22,6 +22,7 @@ export interface Props {
22
22
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
23
23
  editorAnalyticsAPI?: EditorAnalyticsAPI;
24
24
  getEditorFeatureFlags?: GetEditorFeatureFlags;
25
+ isChromelessEditor?: boolean;
25
26
  }
26
27
  export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
27
28
  static displayName: string;
package/dist/types/ui/TableFloatingColumnControls/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface Props {
27
27
  getScrollOffset?: () => number;
28
28
  tableWrapperHeight?: number;
29
29
  api?: PluginInjectionAPI;
30
+ isChromelessEditor?: boolean;
30
31
  }
31
- export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, }: Props) => JSX.Element | null;
32
+ export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => JSX.Element | null;
32
33
  export default TableFloatingColumnControls;
package/dist/types/ui/TableFloatingControls/index.d.ts CHANGED
@@ -28,8 +28,9 @@ export interface TableFloatingControlsProps {
28
28
  stickyHeader?: RowStickyState;
29
29
  insertRowButtonIndex?: number;
30
30
  tableWrapperWidth?: number;
31
+ isChromelessEditor?: boolean;
31
32
  }
32
- export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, }: TableFloatingControlsProps & {
33
+ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, isChromelessEditor, }: TableFloatingControlsProps & {
33
34
  api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
34
35
  pluginConfiguration: import("../../plugin").TablePluginOptions | undefined;
35
36
  actions: {
package/dist/types-ts4.5/nodeviews/TableContainer.d.ts CHANGED
@@ -52,6 +52,7 @@ type TableContainerProps = {
52
52
  isTableAlignmentEnabled?: boolean;
53
53
  shouldUseIncreasedScalingPercent?: boolean;
54
54
  isCommentEditor?: boolean;
55
+ isChromelessEditor?: boolean;
55
56
  };
56
- export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
57
+ export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
57
58
  export {};
package/dist/types-ts4.5/nodeviews/lazy-node-views.d.ts CHANGED
@@ -16,6 +16,7 @@ type TableViewOptions = {
16
16
  pluginInjectionApi?: PluginInjectionAPI;
17
17
  isTableAlignmentEnabled?: boolean;
18
18
  isCommentEditor?: boolean;
19
+ isChromelessEditor?: boolean;
19
20
  };
20
21
  export declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
21
22
  type TableCellViewOptions = {
package/dist/types-ts4.5/nodeviews/table.d.ts CHANGED
@@ -32,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
32
32
  }): boolean;
33
33
  destroy(): void;
34
34
  }
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, isCommentEditor?: 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, isCommentEditor?: boolean, isChromelessEditor?: boolean) => NodeView;
36
36
  export {};
package/dist/types-ts4.5/nodeviews/types.d.ts CHANGED
@@ -13,6 +13,7 @@ export type TableOptions = {
13
13
  isTableScalingEnabled?: boolean;
14
14
  isTableAlignmentEnabled?: boolean;
15
15
  isCommentEditor?: boolean;
16
+ isChromelessEditor?: boolean;
16
17
  };
17
18
  export interface Props {
18
19
  node: PmNode;
package/dist/types-ts4.5/plugin.d.ts CHANGED
@@ -22,6 +22,7 @@ export interface TablePluginOptions {
22
22
  isTableAlignmentEnabled?: boolean;
23
23
  isNewColumnResizingEnabled?: boolean;
24
24
  isCommentEditor?: boolean;
25
+ isChromelessEditor?: boolean;
25
26
  }
26
27
  type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
27
28
  type MediaPlugin = NextEditorPlugin<'media', {
package/dist/types-ts4.5/pm-plugins/main.d.ts CHANGED
@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
5
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
6
6
  import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
7
7
  import type { PluginConfig, PluginInjectionAPI } from '../types';
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, isCommentEditor?: 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, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -318,6 +318,7 @@ export declare const TableCssClassName: {
318
318
  DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
319
319
  DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: string;
320
320
  DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: string;
321
+ DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: string;
321
322
  DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
322
323
  CONTROLS_INSERT_MARKER: string;
323
324
  CONTROLS_INSERT_COLUMN: string;
@@ -333,6 +334,7 @@ export declare const TableCssClassName: {
333
334
  /** drag and drop controls */
334
335
  DRAG_ROW_CONTROLS_WRAPPER: string;
335
336
  DRAG_ROW_CONTROLS: string;
337
+ DRAG_CONTROLS_CHROMELESS: string;
336
338
  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
337
339
  DRAG_ROW_FLOATING_INSERT_DOT: string;
338
340
  DRAG_COLUMN_CONTROLS: string;
package/dist/types-ts4.5/ui/FloatingInsertButton/InsertButton.d.ts CHANGED
@@ -7,8 +7,9 @@ export interface ButtonProps {
7
7
  tableRef: HTMLElement;
8
8
  onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
9
9
  hasStickyHeaders: boolean;
10
+ isChromelessEditor?: boolean;
10
11
  }
11
- export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
12
+ export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, isChromelessEditor, }: ButtonProps & WrappedComponentProps) => JSX.Element;
12
13
  export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps>> & {
13
14
  WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps>;
14
15
  };
package/dist/types-ts4.5/ui/FloatingInsertButton/index.d.ts CHANGED
@@ -22,6 +22,7 @@ export interface Props {
22
22
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
23
23
  editorAnalyticsAPI?: EditorAnalyticsAPI;
24
24
  getEditorFeatureFlags?: GetEditorFeatureFlags;
25
+ isChromelessEditor?: boolean;
25
26
  }
26
27
  export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
27
28
  static displayName: string;
package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface Props {
27
27
  getScrollOffset?: () => number;
28
28
  tableWrapperHeight?: number;
29
29
  api?: PluginInjectionAPI;
30
+ isChromelessEditor?: boolean;
30
31
  }
31
- export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, }: Props) => JSX.Element | null;
32
+ export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => JSX.Element | null;
32
33
  export default TableFloatingColumnControls;
package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts CHANGED
@@ -28,8 +28,9 @@ export interface TableFloatingControlsProps {
28
28
  stickyHeader?: RowStickyState;
29
29
  insertRowButtonIndex?: number;
30
30
  tableWrapperWidth?: number;
31
+ isChromelessEditor?: boolean;
31
32
  }
32
- export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, }: TableFloatingControlsProps & {
33
+ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, isChromelessEditor, }: TableFloatingControlsProps & {
33
34
  api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
34
35
  pluginConfiguration: import("../../plugin").TablePluginOptions | undefined;
35
36
  actions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.23.0",
3
+ "version": "7.24.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": "^40.3.0",
32
32
  "@atlaskit/button": "^19.1.0",
33
33
  "@atlaskit/custom-steps": "^0.6.0",
34
- "@atlaskit/editor-common": "^86.8.0",
34
+ "@atlaskit/editor-common": "^87.0.0",
35
35
  "@atlaskit/editor-palette": "1.6.0",
36
36
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
37
37
  "@atlaskit/editor-plugin-analytics": "^1.6.0",
@@ -43,7 +43,7 @@
43
43
  "@atlaskit/editor-prosemirror": "5.0.1",
44
44
  "@atlaskit/editor-shared-styles": "^2.13.0",
45
45
  "@atlaskit/editor-tables": "^2.8.0",
46
- "@atlaskit/icon": "^22.7.0",
46
+ "@atlaskit/icon": "^22.8.0",
47
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",
@@ -105,9 +105,6 @@
105
105
  "platform_editor_lazy-node-views": {
106
106
  "type": "boolean"
107
107
  },
108
- "platform.editor.transform-slice-for-nested-expand": {
109
- "type": "boolean"
110
- },
111
108
  "platform.editor.table.use-shared-state-hook": {
112
109
  "type": "boolean"
113
110
  },
@@ -125,6 +122,9 @@
125
122
  },
126
123
  "platform_editor_a11y_table_context_menu": {
127
124
  "type": "boolean"
125
+ },
126
+ "platform_editor_announce_cell_options_hotkeys": {
127
+ "type": "boolean"
128
128
  }
129
129
  }
130
130
  }
package/src/nodeviews/TableComponent.tsx CHANGED
@@ -703,6 +703,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
703
703
  stickyHeader={this.state.stickyHeader}
704
704
  tableWrapperWidth={this.state.tableWrapperWidth}
705
705
  api={pluginInjectionApi}
706
+ isChromelessEditor={options?.isChromelessEditor}
706
707
  />
707
708
  );
708
709
  const tableContainerWidth = getTableContainerWidth(node);
@@ -729,6 +730,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
729
730
  getScrollOffset={() => this.wrapper?.scrollLeft || 0}
730
731
  tableWrapperHeight={this.state.tableWrapperHeight}
731
732
  api={pluginInjectionApi}
733
+ isChromelessEditor={options?.isChromelessEditor}
732
734
  />
733
735
  ) : null;
734
736
 
@@ -789,6 +791,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
789
791
  isTableAlignmentEnabled={isTableAlignmentEnabled}
790
792
  shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
791
793
  isCommentEditor={options?.isCommentEditor}
794
+ isChromelessEditor={options?.isChromelessEditor}
792
795
  >
793
796
  <div
794
797
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
package/src/nodeviews/TableContainer.tsx CHANGED
@@ -405,6 +405,7 @@ type TableContainerProps = {
405
405
  isTableAlignmentEnabled?: boolean;
406
406
  shouldUseIncreasedScalingPercent?: boolean;
407
407
  isCommentEditor?: boolean;
408
+ isChromelessEditor?: boolean;
408
409
  };
409
410
 
410
411
  export const TableContainer = ({
@@ -426,6 +427,7 @@ export const TableContainer = ({
426
427
  isTableAlignmentEnabled,
427
428
  shouldUseIncreasedScalingPercent,
428
429
  isCommentEditor,
430
+ isChromelessEditor,
429
431
  }: PropsWithChildren<TableContainerProps>) => {
430
432
  if (isTableResizingEnabled && !isNested) {
431
433
  return (
@@ -463,6 +465,7 @@ export const TableContainer = ({
463
465
  style={{
464
466
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
465
467
  width: 'inherit',
468
+ marginLeft: isChromelessEditor ? 18 : undefined,
466
469
  }}
467
470
  >
468
471
  {children}
package/src/nodeviews/lazy-node-views.ts CHANGED
@@ -23,6 +23,7 @@ type TableViewOptions = {
23
23
  pluginInjectionApi?: PluginInjectionAPI;
24
24
  isTableAlignmentEnabled?: boolean;
25
25
  isCommentEditor?: boolean;
26
+ isChromelessEditor?: boolean;
26
27
  };
27
28
 
28
29
  export const lazyTableView = (options: TableViewOptions) => {
@@ -40,6 +41,7 @@ export const lazyTableView = (options: TableViewOptions) => {
40
41
  options.pluginInjectionApi,
41
42
  options.isTableAlignmentEnabled,
42
43
  options.isCommentEditor,
44
+ options.isChromelessEditor,
43
45
  );
44
46
  };
45
47
  }
@@ -65,6 +67,7 @@ export const lazyTableView = (options: TableViewOptions) => {
65
67
  pluginInjectionApi,
66
68
  isTableAlignmentEnabled,
67
69
  isCommentEditor,
70
+ isChromelessEditor,
68
71
  } = getNodeViewOptions();
69
72
 
70
73
  return createTableView(
@@ -79,6 +82,7 @@ export const lazyTableView = (options: TableViewOptions) => {
79
82
  pluginInjectionApi,
80
83
  isTableAlignmentEnabled,
81
84
  isCommentEditor,
85
+ isChromelessEditor,
82
86
  );
83
87
  };
84
88
  });
package/src/nodeviews/table.tsx CHANGED
@@ -365,6 +365,7 @@ export const createTableView = (
365
365
  pluginInjectionApi?: PluginInjectionAPI,
366
366
  isTableAlignmentEnabled?: boolean,
367
367
  isCommentEditor?: boolean,
368
+ isChromelessEditor?: boolean,
368
369
  ): NodeView => {
369
370
  const {
370
371
  pluginConfig,
@@ -392,6 +393,7 @@ export const createTableView = (
392
393
  isTableScalingEnabled, // same as options.isTableScalingEnabled
393
394
  isTableAlignmentEnabled,
394
395
  isCommentEditor,
396
+ isChromelessEditor,
395
397
  },
396
398
  getEditorContainerWidth,
397
399
  getEditorFeatureFlags,
package/src/nodeviews/types.ts CHANGED
@@ -15,6 +15,7 @@ export type TableOptions = {
15
15
  isTableScalingEnabled?: boolean;
16
16
  isTableAlignmentEnabled?: boolean;
17
17
  isCommentEditor?: boolean;
18
+ isChromelessEditor?: boolean;
18
19
  };
19
20
 
20
21
  export interface Props {