@atlaskit/editor-plugin-table 7.24.0 → 7.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/nodeviews/TableComponent.js +6 -3
- package/dist/cjs/nodeviews/TableContainer.js +4 -2
- package/dist/cjs/nodeviews/lazy-node-views.js +4 -3
- package/dist/cjs/nodeviews/table.js +3 -2
- package/dist/cjs/plugin.js +5 -3
- package/dist/cjs/pm-plugins/main.js +3 -2
- package/dist/cjs/types.js +2 -0
- package/dist/cjs/ui/FloatingInsertButton/InsertButton.js +6 -5
- package/dist/cjs/ui/FloatingInsertButton/index.js +5 -3
- package/dist/cjs/ui/TableFloatingColumnControls/index.js +4 -3
- package/dist/cjs/ui/TableFloatingControls/index.js +3 -2
- package/dist/cjs/ui/common-styles.js +1 -1
- package/dist/cjs/ui/ui-styles.js +1 -1
- package/dist/es2019/nodeviews/TableComponent.js +6 -3
- package/dist/es2019/nodeviews/TableContainer.js +4 -2
- package/dist/es2019/nodeviews/lazy-node-views.js +4 -3
- package/dist/es2019/nodeviews/table.js +3 -2
- package/dist/es2019/plugin.js +5 -3
- package/dist/es2019/pm-plugins/main.js +3 -2
- package/dist/es2019/types.js +2 -0
- package/dist/es2019/ui/FloatingInsertButton/InsertButton.js +8 -6
- package/dist/es2019/ui/FloatingInsertButton/index.js +6 -4
- package/dist/es2019/ui/TableFloatingColumnControls/index.js +5 -4
- package/dist/es2019/ui/TableFloatingControls/index.js +3 -2
- package/dist/es2019/ui/common-styles.js +8 -0
- package/dist/es2019/ui/ui-styles.js +4 -0
- package/dist/esm/nodeviews/TableComponent.js +6 -3
- package/dist/esm/nodeviews/TableContainer.js +4 -2
- package/dist/esm/nodeviews/lazy-node-views.js +4 -3
- package/dist/esm/nodeviews/table.js +3 -2
- package/dist/esm/plugin.js +5 -3
- package/dist/esm/pm-plugins/main.js +3 -2
- package/dist/esm/types.js +2 -0
- package/dist/esm/ui/FloatingInsertButton/InsertButton.js +6 -5
- package/dist/esm/ui/FloatingInsertButton/index.js +6 -4
- package/dist/esm/ui/TableFloatingColumnControls/index.js +5 -4
- package/dist/esm/ui/TableFloatingControls/index.js +3 -2
- package/dist/esm/ui/common-styles.js +1 -1
- package/dist/esm/ui/ui-styles.js +1 -1
- package/dist/types/nodeviews/TableContainer.d.ts +2 -1
- package/dist/types/nodeviews/lazy-node-views.d.ts +1 -0
- package/dist/types/nodeviews/table.d.ts +1 -1
- package/dist/types/nodeviews/types.d.ts +1 -0
- package/dist/types/plugin.d.ts +1 -0
- package/dist/types/pm-plugins/main.d.ts +1 -1
- package/dist/types/types.d.ts +2 -0
- package/dist/types/ui/FloatingInsertButton/InsertButton.d.ts +2 -1
- package/dist/types/ui/FloatingInsertButton/index.d.ts +1 -0
- package/dist/types/ui/TableFloatingColumnControls/index.d.ts +2 -1
- package/dist/types/ui/TableFloatingControls/index.d.ts +2 -1
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +2 -1
- package/dist/types-ts4.5/nodeviews/lazy-node-views.d.ts +1 -0
- package/dist/types-ts4.5/nodeviews/table.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/types.d.ts +1 -0
- package/dist/types-ts4.5/plugin.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +2 -0
- package/dist/types-ts4.5/ui/FloatingInsertButton/InsertButton.d.ts +2 -1
- package/dist/types-ts4.5/ui/FloatingInsertButton/index.d.ts +1 -0
- package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts +2 -1
- package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts +2 -1
- package/package.json +2 -2
- package/src/nodeviews/TableComponent.tsx +3 -0
- package/src/nodeviews/TableContainer.tsx +3 -0
- package/src/nodeviews/lazy-node-views.ts +4 -0
- package/src/nodeviews/table.tsx +2 -0
- package/src/nodeviews/types.ts +1 -0
- package/src/plugin.tsx +4 -0
- package/src/pm-plugins/main.ts +2 -0
- package/src/types.ts +2 -0
- package/src/ui/FloatingInsertButton/InsertButton.tsx +12 -4
- package/src/ui/FloatingInsertButton/index.tsx +5 -2
- package/src/ui/TableFloatingColumnControls/index.tsx +8 -3
- package/src/ui/TableFloatingControls/index.tsx +5 -1
- package/src/ui/common-styles.ts +8 -0
- package/src/ui/ui-styles.ts +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.24.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#124890](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124890)
|
|
8
|
+
[`04951dd1969d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/04951dd1969d5) -
|
|
9
|
+
[ux] ED-24278: Turned on table dnd in chromeless editor
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 7.24.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
|
@@ -736,7 +736,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
736
736
|
headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
|
|
737
737
|
stickyHeader: this.state.stickyHeader,
|
|
738
738
|
tableWrapperWidth: this.state.tableWrapperWidth,
|
|
739
|
-
api: pluginInjectionApi
|
|
739
|
+
api: pluginInjectionApi,
|
|
740
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
740
741
|
});
|
|
741
742
|
var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(node);
|
|
742
743
|
var colControls = isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
|
|
@@ -764,7 +765,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
764
765
|
return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
|
|
765
766
|
},
|
|
766
767
|
tableWrapperHeight: this.state.tableWrapperHeight,
|
|
767
|
-
api: pluginInjectionApi
|
|
768
|
+
api: pluginInjectionApi,
|
|
769
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
768
770
|
}) : null;
|
|
769
771
|
var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
|
|
770
772
|
var shadowStyle = (0, _memoizeOne.default)(function (visible) {
|
|
@@ -810,7 +812,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
810
812
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
811
813
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
812
814
|
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
|
|
813
|
-
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
|
|
815
|
+
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
|
|
816
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
814
817
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
815
818
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
816
819
|
className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
|
|
@@ -297,7 +297,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
|
|
|
297
297
|
isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
|
|
298
298
|
isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
|
|
299
299
|
shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
|
|
300
|
-
isCommentEditor = _ref6.isCommentEditor
|
|
300
|
+
isCommentEditor = _ref6.isCommentEditor,
|
|
301
|
+
isChromelessEditor = _ref6.isChromelessEditor;
|
|
301
302
|
if (isTableResizingEnabled && !isNested) {
|
|
302
303
|
return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
|
|
303
304
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -329,7 +330,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
|
|
|
329
330
|
}),
|
|
330
331
|
style: {
|
|
331
332
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
332
|
-
width: 'inherit'
|
|
333
|
+
width: 'inherit',
|
|
334
|
+
marginLeft: isChromelessEditor ? 18 : undefined
|
|
333
335
|
}
|
|
334
336
|
}, children);
|
|
335
337
|
};
|
|
@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
16
16
|
var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
|
|
17
17
|
if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
|
|
18
18
|
return function (node, view, getPos) {
|
|
19
|
-
return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor);
|
|
19
|
+
return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor, options.isChromelessEditor);
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
var loader = function loader() {
|
|
@@ -34,8 +34,9 @@ var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
|
|
|
34
34
|
dispatchAnalyticsEvent = _getNodeViewOptions.dispatchAnalyticsEvent,
|
|
35
35
|
pluginInjectionApi = _getNodeViewOptions.pluginInjectionApi,
|
|
36
36
|
isTableAlignmentEnabled = _getNodeViewOptions.isTableAlignmentEnabled,
|
|
37
|
-
isCommentEditor = _getNodeViewOptions.isCommentEditor
|
|
38
|
-
|
|
37
|
+
isCommentEditor = _getNodeViewOptions.isCommentEditor,
|
|
38
|
+
isChromelessEditor = _getNodeViewOptions.isChromelessEditor;
|
|
39
|
+
return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor);
|
|
39
40
|
};
|
|
40
41
|
});
|
|
41
42
|
return result;
|
|
@@ -290,7 +290,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
290
290
|
}]);
|
|
291
291
|
return TableView;
|
|
292
292
|
}(_reactNodeView.default);
|
|
293
|
-
var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor) {
|
|
293
|
+
var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor) {
|
|
294
294
|
var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
|
|
295
295
|
pluginConfig = _getPluginState2.pluginConfig,
|
|
296
296
|
isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
|
|
@@ -317,7 +317,8 @@ var createTableView = exports.createTableView = function createTableView(node, v
|
|
|
317
317
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
318
318
|
// same as options.isTableScalingEnabled
|
|
319
319
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
320
|
-
isCommentEditor: isCommentEditor
|
|
320
|
+
isCommentEditor: isCommentEditor,
|
|
321
|
+
isChromelessEditor: isChromelessEditor
|
|
321
322
|
},
|
|
322
323
|
getEditorContainerWidth: getEditorContainerWidth,
|
|
323
324
|
getEditorFeatureFlags: getEditorFeatureFlags,
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -204,8 +204,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
|
|
|
204
204
|
dragAndDropEnabled = _ref3.dragAndDropEnabled,
|
|
205
205
|
isTableScalingEnabled = _ref3.isTableScalingEnabled,
|
|
206
206
|
isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
|
|
207
|
-
isCommentEditor = _ref3.isCommentEditor
|
|
208
|
-
|
|
207
|
+
isCommentEditor = _ref3.isCommentEditor,
|
|
208
|
+
isChromelessEditor = _ref3.isChromelessEditor;
|
|
209
|
+
return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
|
|
209
210
|
}
|
|
210
211
|
}, {
|
|
211
212
|
name: 'tablePMColResizing',
|
|
@@ -433,7 +434,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
|
|
|
433
434
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
434
435
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
435
436
|
getEditorContainerWidth: defaultGetEditorContainerWidth,
|
|
436
|
-
getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
|
|
437
|
+
getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
|
|
438
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
437
439
|
}), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
|
|
438
440
|
editorView: editorView,
|
|
439
441
|
mountPoint: popupsMountPoint,
|
|
@@ -30,7 +30,7 @@ var _pluginFactory = require("./plugin-factory");
|
|
|
30
30
|
var _pluginKey = require("./plugin-key");
|
|
31
31
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
32
32
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
33
|
-
var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) {
|
|
33
|
+
var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
|
|
34
34
|
var _accessibilityUtils;
|
|
35
35
|
var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
|
|
36
36
|
pluginConfig: pluginConfig,
|
|
@@ -260,7 +260,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
|
|
|
260
260
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
261
261
|
pluginInjectionApi: pluginInjectionApi,
|
|
262
262
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
263
|
-
isCommentEditor: isCommentEditor
|
|
263
|
+
isCommentEditor: isCommentEditor,
|
|
264
|
+
isChromelessEditor: isChromelessEditor
|
|
264
265
|
}),
|
|
265
266
|
tableRow: (0, _lazyNodeViews.lazyTableRowView)({
|
|
266
267
|
eventDispatcher: eventDispatcher
|
package/dist/cjs/types.js
CHANGED
|
@@ -81,6 +81,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
|
|
|
81
81
|
DRAG_CONTROLS_INSERT_BUTTON_INNER: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner"),
|
|
82
82
|
DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-column"),
|
|
83
83
|
DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-row"),
|
|
84
|
+
DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-row-chromeless"),
|
|
84
85
|
DRAG_CONTROLS_INSERT_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-wrap"),
|
|
85
86
|
CONTROLS_INSERT_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-marker"),
|
|
86
87
|
CONTROLS_INSERT_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-column"),
|
|
@@ -96,6 +97,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
|
|
|
96
97
|
/** drag and drop controls */
|
|
97
98
|
DRAG_ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-controls-wrapper"),
|
|
98
99
|
DRAG_ROW_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-controls"),
|
|
100
|
+
DRAG_CONTROLS_CHROMELESS: "drag-controls-chromeless",
|
|
99
101
|
DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-floating-insert-dot-wrapper"),
|
|
100
102
|
DRAG_ROW_FLOATING_INSERT_DOT: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-floating-insert-dot"),
|
|
101
103
|
DRAG_COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-controls"),
|
|
@@ -41,12 +41,12 @@ var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDrop
|
|
|
41
41
|
}
|
|
42
42
|
return 0;
|
|
43
43
|
};
|
|
44
|
-
var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
|
|
44
|
+
var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled, isChromelessEditor) {
|
|
45
45
|
// The line gets width 100% from the table,
|
|
46
46
|
// but since we have an overflow on the left,
|
|
47
47
|
// we should add an offset to make up for it.
|
|
48
48
|
var LINE_OFFSET = 4;
|
|
49
|
-
var DRAG_LINE_OFFSET = 6;
|
|
49
|
+
var DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
|
|
50
50
|
var parentElement = tableRef.parentElement,
|
|
51
51
|
offsetWidth = tableRef.offsetWidth;
|
|
52
52
|
var parentOffsetWidth = parentElement.offsetWidth;
|
|
@@ -66,7 +66,8 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
|
|
|
66
66
|
tableRef = _ref2.tableRef,
|
|
67
67
|
type = _ref2.type,
|
|
68
68
|
formatMessage = _ref2.intl.formatMessage,
|
|
69
|
-
hasStickyHeaders = _ref2.hasStickyHeaders
|
|
69
|
+
hasStickyHeaders = _ref2.hasStickyHeaders,
|
|
70
|
+
isChromelessEditor = _ref2.isChromelessEditor;
|
|
70
71
|
var isRow = type === 'row';
|
|
71
72
|
var content = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
72
73
|
content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
|
|
@@ -76,7 +77,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
|
|
|
76
77
|
position: "top"
|
|
77
78
|
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
78
79
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
79
|
-
className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), _classnames))
|
|
80
|
+
className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow && !isChromelessEditor), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, isRow && isChromelessEditor), _classnames))
|
|
80
81
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
81
82
|
type: "button"
|
|
82
83
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -100,7 +101,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
|
|
|
100
101
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
101
102
|
,
|
|
102
103
|
style: type === 'row' ? {
|
|
103
|
-
width: getInsertLineWidth(tableRef, true),
|
|
104
|
+
width: getInsertLineWidth(tableRef, true, isChromelessEditor),
|
|
104
105
|
left: "var(--ds-space-150, 12px)"
|
|
105
106
|
} : {
|
|
106
107
|
height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
|
|
@@ -59,7 +59,8 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
|
|
|
59
59
|
isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
|
|
60
60
|
isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
|
|
61
61
|
isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
|
|
62
|
-
dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent
|
|
62
|
+
dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
|
|
63
|
+
isChromelessEditor = _this$props.isChromelessEditor;
|
|
63
64
|
|
|
64
65
|
// TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
|
|
65
66
|
if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
|
|
@@ -144,7 +145,8 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
|
|
|
144
145
|
type: type,
|
|
145
146
|
tableRef: tableRef,
|
|
146
147
|
onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
|
|
147
|
-
hasStickyHeaders: this.props.hasStickyHeaders || false
|
|
148
|
+
hasStickyHeaders: this.props.hasStickyHeaders || false,
|
|
149
|
+
isChromelessEditor: isChromelessEditor
|
|
148
150
|
}) : /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
|
|
149
151
|
type: type,
|
|
150
152
|
tableRef: tableRef,
|
|
@@ -208,7 +210,7 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
|
|
|
208
210
|
tableDuplicateCellColouring = _ref$tableDuplicateCe === void 0 ? false : _ref$tableDuplicateCe,
|
|
209
211
|
_ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
|
|
210
212
|
tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
|
|
211
|
-
var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.
|
|
213
|
+
var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent');
|
|
212
214
|
var state = editorView.state,
|
|
213
215
|
dispatch = editorView.dispatch;
|
|
214
216
|
(0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
|
|
@@ -32,7 +32,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
|
|
|
32
32
|
isNumberColumnEnabled = _ref.isNumberColumnEnabled,
|
|
33
33
|
getScrollOffset = _ref.getScrollOffset,
|
|
34
34
|
tableWrapperHeight = _ref.tableWrapperHeight,
|
|
35
|
-
api = _ref.api
|
|
35
|
+
api = _ref.api,
|
|
36
|
+
isChromelessEditor = _ref.isChromelessEditor;
|
|
36
37
|
var _useState = (0, _react.useState)(false),
|
|
37
38
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
38
39
|
isDragging = _useState2[0],
|
|
@@ -84,7 +85,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
|
|
|
84
85
|
ref: containerRef
|
|
85
86
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
86
87
|
,
|
|
87
|
-
className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
|
|
88
|
+
className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + _types.TableCssClassName.DRAG_CONTROLS_CHROMELESS : ''),
|
|
88
89
|
"data-testid": "table-floating-column-controls-wrapper"
|
|
89
90
|
}, /*#__PURE__*/_react.default.createElement(_ColumnControls.ColumnControls, {
|
|
90
91
|
editorView: editorView,
|
|
@@ -102,7 +103,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
|
|
|
102
103
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
103
104
|
isDragging: isDragging,
|
|
104
105
|
getScrollOffset: getScrollOffset,
|
|
105
|
-
api: (0, _platformFeatureFlags.
|
|
106
|
+
api: (0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook') ? api : undefined
|
|
106
107
|
}), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
|
|
107
108
|
tableRef: tableRef,
|
|
108
109
|
isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
|
|
@@ -38,7 +38,8 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
|
|
|
38
38
|
hoveredCell = _ref.hoveredCell,
|
|
39
39
|
isTableHovered = _ref.isTableHovered,
|
|
40
40
|
tableWrapperWidth = _ref.tableWrapperWidth,
|
|
41
|
-
api = _ref.api
|
|
41
|
+
api = _ref.api,
|
|
42
|
+
isChromelessEditor = _ref.isChromelessEditor;
|
|
42
43
|
var _selectRow = (0, _react.useCallback)(function (row, expand) {
|
|
43
44
|
var state = editorView.state,
|
|
44
45
|
dispatch = editorView.dispatch;
|
|
@@ -81,7 +82,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
|
|
|
81
82
|
return null;
|
|
82
83
|
}
|
|
83
84
|
var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
|
|
84
|
-
var wrapperClassName = isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
|
|
85
|
+
var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + _types.TableCssClassName.DRAG_CONTROLS_CHROMELESS : _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
|
|
85
86
|
var tablePos = (_findTable = (0, _utils2.findTable)(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
|
|
86
87
|
var isNested = tablePos !== undefined && (0, _nodes.isTableNested)(editorView.state, tablePos);
|
|
87
88
|
var shouldShowCornerControls = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24041') ? !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested : !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop);
|
|
@@ -78,7 +78,7 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
78
78
|
// re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
|
|
79
79
|
var baseTableStyles = exports.baseTableStyles = function baseTableStyles(props) {
|
|
80
80
|
var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
|
|
81
|
-
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\n\t\t", "\n\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t// https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of the rows control dot\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: 24px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: 24px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: 10px 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t// add a background above the first numbered column cell when sticky header is engaged\n\t// which hides the table when scrolling\n\t.", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t// the extra pixel is accounting for borders\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n"])), (0, _styles.tableSharedStyle)(), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts2.tableCellBackgroundColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts2.tableToolbarSize, _consts2.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize, _consts2.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.tableToolbarSize, "var(--ds-surface, white)", _consts2.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", stickyHeaderMarginTop(), "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tableToolbarSize, _consts2.stickyHeaderBorderBottomWidth, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts2.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableControlsSpacing - _consts2.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts2.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize + 1, _consts2.tableToolbarSize + 1, _consts2.tableBorderColor, _consts2.tableBorderRadiusSize, _consts2.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _consts2.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts2.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts2.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n border-bottom: 1px solid ".concat(_consts2.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts2.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _consts2.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts2.tableHeaderCellBackgroundColor, _consts2.tableTextColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableToolbarDeleteColor, _consts2.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts2.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts2.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts2.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts2.tableToolbarSize + 1, _consts2.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts2.tableToolbarSize, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
81
|
+
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\n\t\t", "\n\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t// https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of the rows control dot\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: 24px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: 24px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: 10px 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t// add a background above the first numbered column cell when sticky header is engaged\n\t// which hides the table when scrolling\n\t.", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t// the extra pixel is accounting for borders\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n"])), (0, _styles.tableSharedStyle)(), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts2.tableCellBackgroundColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts2.tableToolbarSize, _consts2.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize, _consts2.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts2.tableToolbarSize, "var(--ds-surface, white)", _consts2.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts2.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", stickyHeaderMarginTop(), "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tableToolbarSize, _consts2.stickyHeaderBorderBottomWidth, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts2.resizeHandlerAreaWidth - _consts2.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts2.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableControlsSpacing - _consts2.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts2.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_CONTROLS_CHROMELESS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts2.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_CONTROLS_CHROMELESS, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts2.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts2.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts2.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableToolbarSize + 1, _consts2.tableToolbarSize + 1, _consts2.tableBorderColor, _consts2.tableBorderRadiusSize, _consts2.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _consts2.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts2.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts2.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n border-bottom: 1px solid ".concat(_consts2.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts2.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _consts2.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts2.tableHeaderCellBackgroundColor, _consts2.tableTextColor, _consts2.tableBorderColor, _consts2.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _consts2.tableBorderSelectedColor, _consts2.tableBorderSelectedColor, _consts2.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableToolbarDeleteColor, _consts2.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts2.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts2.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts2.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts2.tableToolbarSize + 1, _consts2.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts2.tableToolbarSize, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
82
82
|
};
|
|
83
83
|
|
|
84
84
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
package/dist/cjs/ui/ui-styles.js
CHANGED
|
@@ -56,7 +56,7 @@ var InsertButtonHover = function InsertButtonHover() {
|
|
|
56
56
|
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
57
57
|
};
|
|
58
58
|
var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragInsertButtonWrapper() {
|
|
59
|
-
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n height: ", _consts.dragTableInsertColumnButtonSize, "px;\n width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
59
|
+
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\t.", " {\n\t\tleft: 6px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n height: ", _consts.dragTableInsertColumnButtonSize, "px;\n width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
60
60
|
};
|
|
61
61
|
|
|
62
62
|
// Explicit pixel values required here to ensure corner button aligns correctly
|
|
@@ -722,7 +722,8 @@ class TableComponent extends React.Component {
|
|
|
722
722
|
headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
|
|
723
723
|
stickyHeader: this.state.stickyHeader,
|
|
724
724
|
tableWrapperWidth: this.state.tableWrapperWidth,
|
|
725
|
-
api: pluginInjectionApi
|
|
725
|
+
api: pluginInjectionApi,
|
|
726
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
726
727
|
});
|
|
727
728
|
const tableContainerWidth = getTableContainerWidth(node);
|
|
728
729
|
const colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
|
|
@@ -750,7 +751,8 @@ class TableComponent extends React.Component {
|
|
|
750
751
|
return ((_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.scrollLeft) || 0;
|
|
751
752
|
},
|
|
752
753
|
tableWrapperHeight: this.state.tableWrapperHeight,
|
|
753
|
-
api: pluginInjectionApi
|
|
754
|
+
api: pluginInjectionApi,
|
|
755
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
754
756
|
}) : null;
|
|
755
757
|
const shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
|
|
756
758
|
const shadowStyle = memoizeOne(visible => ({
|
|
@@ -799,7 +801,8 @@ class TableComponent extends React.Component {
|
|
|
799
801
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
800
802
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
801
803
|
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
|
|
802
|
-
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
|
|
804
|
+
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
|
|
805
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
803
806
|
}, /*#__PURE__*/React.createElement("div", {
|
|
804
807
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
805
808
|
className: ClassName.TABLE_STICKY_SENTINEL_TOP,
|
|
@@ -296,7 +296,8 @@ export const TableContainer = ({
|
|
|
296
296
|
isTableWithFixedColumnWidthsOptionEnabled,
|
|
297
297
|
isTableAlignmentEnabled,
|
|
298
298
|
shouldUseIncreasedScalingPercent,
|
|
299
|
-
isCommentEditor
|
|
299
|
+
isCommentEditor,
|
|
300
|
+
isChromelessEditor
|
|
300
301
|
}) => {
|
|
301
302
|
if (isTableResizingEnabled && !isNested) {
|
|
302
303
|
return /*#__PURE__*/React.createElement(ResizableTableContainer
|
|
@@ -329,7 +330,8 @@ export const TableContainer = ({
|
|
|
329
330
|
}),
|
|
330
331
|
style: {
|
|
331
332
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
332
|
-
width: 'inherit'
|
|
333
|
+
width: 'inherit',
|
|
334
|
+
marginLeft: isChromelessEditor ? 18 : undefined
|
|
333
335
|
}
|
|
334
336
|
}, children);
|
|
335
337
|
};
|
|
@@ -7,7 +7,7 @@ import TableRow from './TableRow';
|
|
|
7
7
|
export const lazyTableView = options => {
|
|
8
8
|
if (!fg('platform_editor_lazy-node-views')) {
|
|
9
9
|
return (node, view, getPos) => {
|
|
10
|
-
return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor);
|
|
10
|
+
return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor, options.isChromelessEditor);
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
13
|
const loader = () => {
|
|
@@ -24,9 +24,10 @@ export const lazyTableView = options => {
|
|
|
24
24
|
dispatchAnalyticsEvent,
|
|
25
25
|
pluginInjectionApi,
|
|
26
26
|
isTableAlignmentEnabled,
|
|
27
|
-
isCommentEditor
|
|
27
|
+
isCommentEditor,
|
|
28
|
+
isChromelessEditor
|
|
28
29
|
} = getNodeViewOptions();
|
|
29
|
-
return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor);
|
|
30
|
+
return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor);
|
|
30
31
|
};
|
|
31
32
|
});
|
|
32
33
|
return result;
|
|
@@ -255,7 +255,7 @@ export default class TableView extends ReactNodeView {
|
|
|
255
255
|
super.destroy();
|
|
256
256
|
}
|
|
257
257
|
}
|
|
258
|
-
export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor) => {
|
|
258
|
+
export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor) => {
|
|
259
259
|
const {
|
|
260
260
|
pluginConfig,
|
|
261
261
|
isFullWidthModeEnabled,
|
|
@@ -284,7 +284,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
|
|
|
284
284
|
isTableScalingEnabled,
|
|
285
285
|
// same as options.isTableScalingEnabled
|
|
286
286
|
isTableAlignmentEnabled,
|
|
287
|
-
isCommentEditor
|
|
287
|
+
isCommentEditor,
|
|
288
|
+
isChromelessEditor
|
|
288
289
|
},
|
|
289
290
|
getEditorContainerWidth,
|
|
290
291
|
getEditorFeatureFlags,
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -195,9 +195,10 @@ const tablesPlugin = ({
|
|
|
195
195
|
dragAndDropEnabled,
|
|
196
196
|
isTableScalingEnabled,
|
|
197
197
|
isTableAlignmentEnabled,
|
|
198
|
-
isCommentEditor
|
|
198
|
+
isCommentEditor,
|
|
199
|
+
isChromelessEditor
|
|
199
200
|
} = options || {};
|
|
200
|
-
return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
|
|
201
|
+
return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
|
|
201
202
|
}
|
|
202
203
|
}, {
|
|
203
204
|
name: 'tablePMColResizing',
|
|
@@ -427,7 +428,8 @@ const tablesPlugin = ({
|
|
|
427
428
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
428
429
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
429
430
|
getEditorContainerWidth: defaultGetEditorContainerWidth,
|
|
430
|
-
getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
|
|
431
|
+
getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
|
|
432
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
|
|
431
433
|
}), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
|
|
432
434
|
editorView: editorView,
|
|
433
435
|
mountPoint: popupsMountPoint,
|
|
@@ -20,7 +20,7 @@ import { isHeaderRowRequired } from '../utils/paste';
|
|
|
20
20
|
import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
|
|
21
21
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
22
22
|
import { pluginKey } from './plugin-key';
|
|
23
|
-
export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) => {
|
|
23
|
+
export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
|
|
24
24
|
var _accessibilityUtils;
|
|
25
25
|
const state = createPluginState(dispatch, {
|
|
26
26
|
pluginConfig,
|
|
@@ -258,7 +258,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
258
258
|
dispatchAnalyticsEvent,
|
|
259
259
|
pluginInjectionApi,
|
|
260
260
|
isTableAlignmentEnabled,
|
|
261
|
-
isCommentEditor
|
|
261
|
+
isCommentEditor,
|
|
262
|
+
isChromelessEditor
|
|
262
263
|
}),
|
|
263
264
|
tableRow: lazyTableRowView({
|
|
264
265
|
eventDispatcher
|