@atlaskit/editor-plugin-table 7.1.1 → 7.1.3

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 (15) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +5 -2
  3. package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +4 -1
  4. package/dist/cjs/ui/common-styles.js +1 -1
  5. package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +3 -2
  6. package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +2 -1
  7. package/dist/es2019/ui/common-styles.js +1 -0
  8. package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +5 -2
  9. package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +4 -1
  10. package/dist/esm/ui/common-styles.js +1 -1
  11. package/package.json +1 -1
  12. package/src/__tests__/unit/nodeviews/TableComponent.tsx +1 -1
  13. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +8 -1
  14. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +6 -1
  15. package/src/ui/common-styles.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#70368](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70368) [`77021a60ef37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77021a60ef37) - Add button background css reset to drag handle button to fix issue on safari where the background can be seen through the svg graphic
8
+
9
+ ## 7.1.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [#70109](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70109) [`ecf39362df41`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ecf39362df41) - The drag preview size will now match the same size of the selection row/col region when a drag is started.
14
+
3
15
  ## 7.1.1
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js CHANGED
@@ -136,7 +136,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
136
136
  };
137
137
  }, [tableWrapper, handleScroll]);
138
138
  var generateHandleByType = function generateHandleByType(type) {
139
- var _rowHeights$reduce, _colWidths;
139
+ var _rowHeights$reduce, _colWidths$reduce;
140
140
  if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
141
141
  return null;
142
142
  }
@@ -157,6 +157,9 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
157
157
 
158
158
  // this indexes are used to calculate the drag and drop source
159
159
  var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
160
+ var previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce(function (sum, v, i) {
161
+ return sum + (v !== null && v !== void 0 ? v : _styles.tableCellMinWidth) * (indexes.includes(i) ? 1 : 0);
162
+ }, 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : _styles.tableCellMinWidth;
160
163
  return /*#__PURE__*/_react.default.createElement("div", {
161
164
  key: type,
162
165
  style: {
@@ -178,7 +181,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
178
181
  tableLocalId: localId || '',
179
182
  indexes: indexes,
180
183
  forceDefaultHandle: isHover ? false : isColumnsSelected,
181
- previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : _styles.tableCellMinWidth,
184
+ previewWidth: previewWidth,
182
185
  previewHeight: previewHeight,
183
186
  appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
184
187
  onClick: handleClick,
package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js CHANGED
@@ -143,6 +143,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
143
143
  var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
144
144
  var isSelecting = isRowsSelected && !isHover;
145
145
  var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
146
+ var previewHeight = rowHeights.reduce(function (sum, v, i) {
147
+ return sum + v * (indexes.includes(i) ? 1 : 0);
148
+ }, 0);
146
149
  return /*#__PURE__*/_react.default.createElement("div", {
147
150
  key: type,
148
151
  style: {
@@ -163,7 +166,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
163
166
  indexes: indexes,
164
167
  forceDefaultHandle: isHover ? false : isRowsSelected,
165
168
  previewWidth: tableWidth,
166
- previewHeight: rowHeights[rowIndex],
169
+ previewHeight: previewHeight,
167
170
  appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
168
171
  onClick: handleClick,
169
172
  onMouseOver: handleMouseOver,
package/dist/cjs/ui/common-styles.js CHANGED
@@ -73,7 +73,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
73
73
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
74
74
  var tableStyles = exports.tableStyles = function tableStyles(props) {
75
75
  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
76
- return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\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 ", ";\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\n .", ",\n tr.sticky\n .", " {\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 }\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 outline: none !important;\n\n &.", " {\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 &.selected {\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: ", "px;\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 }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (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, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts.tableCellBackgroundColor, _consts.tableBorderColor, _consts.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, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.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, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, _consts.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, (_consts.resizeHandlerAreaWidth - _consts.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, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.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, _consts.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts.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, _consts.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, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, _consts.tableBorderColor, _consts.tableBorderRadiusSize, _consts.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1 : _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.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(_consts.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.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)", _consts.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-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, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize : _editorSharedStyles.akEditorTableToolbarSize - 1, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.tableHeaderCellBackgroundColor, _consts.tableTextColor, _consts.tableBorderColor, _consts.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, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? 0 : 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.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, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.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, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.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, _consts.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, _consts.tableToolbarSize + 1, _consts.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts.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, tableWrapperStyles(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
76
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\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 ", ";\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\n .", ",\n tr.sticky\n .", " {\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 }\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 outline: none !important;\n background: transparent;\n\n &.", " {\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 &.selected {\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: ", "px;\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 }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (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, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts.tableCellBackgroundColor, _consts.tableBorderColor, _consts.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, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.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, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, _consts.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, (_consts.resizeHandlerAreaWidth - _consts.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, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.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, _consts.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts.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, _consts.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, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, _consts.tableBorderColor, _consts.tableBorderRadiusSize, _consts.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1 : _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.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(_consts.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.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)", _consts.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-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, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize : _editorSharedStyles.akEditorTableToolbarSize - 1, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.tableHeaderCellBackgroundColor, _consts.tableTextColor, _consts.tableBorderColor, _consts.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, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? 0 : 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.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, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.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, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.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, _consts.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, _consts.tableToolbarSize + 1, _consts.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts.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, tableWrapperStyles(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
77
77
  };
78
78
  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);
79
79
  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/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js CHANGED
@@ -135,7 +135,7 @@ export const ColumnControls = ({
135
135
  };
136
136
  }, [tableWrapper, handleScroll]);
137
137
  const generateHandleByType = type => {
138
- var _rowHeights$reduce, _colWidths;
138
+ var _rowHeights$reduce, _colWidths$reduce;
139
139
  if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
140
140
  return null;
141
141
  }
@@ -154,6 +154,7 @@ export const ColumnControls = ({
154
154
 
155
155
  // this indexes are used to calculate the drag and drop source
156
156
  const indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
157
+ const previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce((sum, v, i) => sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0), 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
157
158
  return /*#__PURE__*/React.createElement("div", {
158
159
  key: type,
159
160
  style: {
@@ -175,7 +176,7 @@ export const ColumnControls = ({
175
176
  tableLocalId: localId || '',
176
177
  indexes: indexes,
177
178
  forceDefaultHandle: isHover ? false : isColumnsSelected,
178
- previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
179
+ previewWidth: previewWidth,
179
180
  previewHeight: previewHeight,
180
181
  appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
181
182
  onClick: handleClick,
package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js CHANGED
@@ -133,6 +133,7 @@ const DragControlsComponent = ({
133
133
  const currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
134
134
  const isSelecting = isRowsSelected && !isHover;
135
135
  const indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
136
+ const previewHeight = rowHeights.reduce((sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0), 0);
136
137
  return /*#__PURE__*/React.createElement("div", {
137
138
  key: type,
138
139
  style: {
@@ -153,7 +154,7 @@ const DragControlsComponent = ({
153
154
  indexes: indexes,
154
155
  forceDefaultHandle: isHover ? false : isRowsSelected,
155
156
  previewWidth: tableWidth,
156
- previewHeight: rowHeights[rowIndex],
157
+ previewHeight: previewHeight,
157
158
  appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
158
159
  onClick: handleClick,
159
160
  onMouseOver: handleMouseOver,
package/dist/es2019/ui/common-styles.js CHANGED
@@ -685,6 +685,7 @@ export const tableStyles = props => {
685
685
  justify-content: center;
686
686
  align-items: center;
687
687
  outline: none !important;
688
+ background: transparent;
688
689
 
689
690
  &.${ClassName.DRAG_HANDLE_DISABLED} {
690
691
  & svg {
package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js CHANGED
@@ -127,7 +127,7 @@ export var ColumnControls = function ColumnControls(_ref) {
127
127
  };
128
128
  }, [tableWrapper, handleScroll]);
129
129
  var generateHandleByType = function generateHandleByType(type) {
130
- var _rowHeights$reduce, _colWidths;
130
+ var _rowHeights$reduce, _colWidths$reduce;
131
131
  if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
132
132
  return null;
133
133
  }
@@ -148,6 +148,9 @@ export var ColumnControls = function ColumnControls(_ref) {
148
148
 
149
149
  // this indexes are used to calculate the drag and drop source
150
150
  var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
151
+ var previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce(function (sum, v, i) {
152
+ return sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0);
153
+ }, 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
151
154
  return /*#__PURE__*/React.createElement("div", {
152
155
  key: type,
153
156
  style: {
@@ -169,7 +172,7 @@ export var ColumnControls = function ColumnControls(_ref) {
169
172
  tableLocalId: localId || '',
170
173
  indexes: indexes,
171
174
  forceDefaultHandle: isHover ? false : isColumnsSelected,
172
- previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
175
+ previewWidth: previewWidth,
173
176
  previewHeight: previewHeight,
174
177
  appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
175
178
  onClick: handleClick,
package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js CHANGED
@@ -133,6 +133,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
133
133
  var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
134
134
  var isSelecting = isRowsSelected && !isHover;
135
135
  var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
136
+ var previewHeight = rowHeights.reduce(function (sum, v, i) {
137
+ return sum + v * (indexes.includes(i) ? 1 : 0);
138
+ }, 0);
136
139
  return /*#__PURE__*/React.createElement("div", {
137
140
  key: type,
138
141
  style: {
@@ -153,7 +156,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
153
156
  indexes: indexes,
154
157
  forceDefaultHandle: isHover ? false : isRowsSelected,
155
158
  previewWidth: tableWidth,
156
- previewHeight: rowHeights[rowIndex],
159
+ previewHeight: previewHeight,
157
160
  appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
158
161
  onClick: handleClick,
159
162
  onMouseOver: handleMouseOver,
package/dist/esm/ui/common-styles.js CHANGED
@@ -66,7 +66,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
66
66
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
67
67
  export var tableStyles = function tableStyles(props) {
68
68
  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
69
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\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 ", ";\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\n .", ",\n tr.sticky\n .", " {\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 }\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 outline: none !important;\n\n &.", " {\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 &.selected {\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: ", "px;\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 }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", 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, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, 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-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, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, (_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, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, 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, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
69
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\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 ", ";\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\n .", ",\n tr.sticky\n .", " {\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 }\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 outline: none !important;\n background: transparent;\n\n &.", " {\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 &.selected {\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: ", "px;\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 }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", 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, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, 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-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, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, (_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, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, 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, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
70
70
  };
71
71
  export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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"])), ClassName.TABLE_NODE_WRAPPER);
72
72
  export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.1.1",
3
+ "version": "7.1.3",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/src/__tests__/unit/nodeviews/TableComponent.tsx CHANGED
@@ -7,11 +7,11 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
7
7
  import type { Command, DocBuilder } from '@atlaskit/editor-common/types';
8
8
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
9
9
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
10
- import { selectTableClosestToPos } from '@atlaskit/editor-tables/src/utils/select-nodes';
11
10
  import {
12
11
  findTable,
13
12
  findTableClosestToPos,
14
13
  selectTable,
14
+ selectTableClosestToPos,
15
15
  } from '@atlaskit/editor-tables/utils';
16
16
  // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
17
17
  import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx CHANGED
@@ -247,6 +247,13 @@ export const ColumnControls = ({
247
247
  : selectedColIndexes
248
248
  : colIndexes;
249
249
 
250
+ const previewWidth =
251
+ colWidths?.reduce<number>(
252
+ (sum, v, i) =>
253
+ sum + (v ?? tableCellMinWidth) * (indexes.includes(i) ? 1 : 0),
254
+ 0,
255
+ ) ?? tableCellMinWidth;
256
+
250
257
  return (
251
258
  <div
252
259
  key={type}
@@ -272,7 +279,7 @@ export const ColumnControls = ({
272
279
  tableLocalId={localId || ''}
273
280
  indexes={indexes}
274
281
  forceDefaultHandle={isHover ? false : isColumnsSelected}
275
- previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
282
+ previewWidth={previewWidth}
276
283
  previewHeight={previewHeight}
277
284
  appearance={
278
285
  isSelecting ? currentSelectionAppearance : hoveredAppearance
package/src/ui/TableFloatingControls/RowControls/DragControls.tsx CHANGED
@@ -235,6 +235,11 @@ const DragControlsComponent = ({
235
235
  : selectedRowIndexes
236
236
  : rowIndexes;
237
237
 
238
+ const previewHeight = rowHeights.reduce(
239
+ (sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0),
240
+ 0,
241
+ );
242
+
238
243
  return (
239
244
  <div
240
245
  key={type}
@@ -259,7 +264,7 @@ const DragControlsComponent = ({
259
264
  indexes={indexes}
260
265
  forceDefaultHandle={isHover ? false : isRowsSelected}
261
266
  previewWidth={tableWidth}
262
- previewHeight={rowHeights[rowIndex!]}
267
+ previewHeight={previewHeight}
263
268
  appearance={
264
269
  isSelecting ? currentSelectionAppearance : hoveredAppearance
265
270
  }
package/src/ui/common-styles.ts CHANGED
@@ -783,6 +783,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
783
783
  justify-content: center;
784
784
  align-items: center;
785
785
  outline: none !important;
786
+ background: transparent;
786
787
 
787
788
  &.${ClassName.DRAG_HANDLE_DISABLED} {
788
789
  & svg {