@atlaskit/editor-plugin-table 5.3.4 → 5.3.6
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 +12 -0
- package/dist/cjs/plugins/table/nodeviews/TableRow.js +53 -35
- package/dist/cjs/plugins/table/types.js +1 -0
- package/dist/cjs/plugins/table/ui/DragHandle/index.js +25 -13
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +3 -2
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/icons/DragHandleIcon.js +63 -0
- package/dist/es2019/plugins/table/nodeviews/TableRow.js +22 -7
- package/dist/es2019/plugins/table/types.js +1 -0
- package/dist/es2019/plugins/table/ui/DragHandle/index.js +24 -13
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +3 -2
- package/dist/es2019/plugins/table/ui/common-styles.js +9 -0
- package/dist/es2019/plugins/table/ui/icons/DragHandleIcon.js +54 -0
- package/dist/esm/plugins/table/nodeviews/TableRow.js +53 -35
- package/dist/esm/plugins/table/types.js +1 -0
- package/dist/esm/plugins/table/ui/DragHandle/index.js +25 -13
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +3 -2
- package/dist/esm/plugins/table/ui/common-styles.js +1 -1
- package/dist/esm/plugins/table/ui/icons/DragHandleIcon.js +55 -0
- package/dist/types/plugins/table/nodeviews/TableRow.d.ts +1 -0
- package/dist/types/plugins/table/types.d.ts +1 -0
- package/dist/types/plugins/table/ui/DragHandle/index.d.ts +3 -1
- package/dist/types/plugins/table/ui/icons/DragHandleIcon.d.ts +7 -0
- package/dist/types-ts4.5/plugins/table/nodeviews/TableRow.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/types.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts +3 -1
- package/dist/types-ts4.5/plugins/table/ui/icons/DragHandleIcon.d.ts +7 -0
- package/package.json +1 -2
- package/src/plugins/table/nodeviews/TableRow.ts +12 -6
- package/src/plugins/table/types.ts +1 -1
- package/src/plugins/table/ui/DragHandle/index.tsx +31 -12
- package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx +4 -1
- package/src/plugins/table/ui/common-styles.ts +9 -0
- package/src/plugins/table/ui/icons/DragHandleIcon.tsx +74 -0
- package/tsconfig.app.json +0 -3
|
@@ -1,17 +1,32 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
|
|
3
2
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { N200, N700 } from '@atlaskit/theme/colors';
|
|
4
|
+
import { TableCssClassName as ClassName } from '../../types';
|
|
5
|
+
import { DragHandleIcon } from '../icons/DragHandleIcon';
|
|
6
|
+
const mapStateToProps = state => {
|
|
7
|
+
switch (state) {
|
|
8
|
+
case 'danger':
|
|
9
|
+
case 'disabled':
|
|
10
|
+
case 'selected':
|
|
11
|
+
case 'default':
|
|
12
|
+
default:
|
|
13
|
+
return {
|
|
14
|
+
backgroundColor: `var(--ds-background-accent-gray-subtlest, ${N200})`,
|
|
15
|
+
foregroundColor: `var(--ds-icon-subtle, ${N700})`
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
};
|
|
6
19
|
export const DragHandle = ({
|
|
7
20
|
tableLocalId,
|
|
8
21
|
direction = 'row',
|
|
22
|
+
state = 'default',
|
|
9
23
|
indexes,
|
|
10
24
|
onClick,
|
|
11
25
|
onMouseOver,
|
|
12
26
|
onMouseOut
|
|
13
27
|
}) => {
|
|
14
28
|
const dragHandleDivRef = useRef(null);
|
|
29
|
+
const iconProps = mapStateToProps(state);
|
|
15
30
|
useEffect(() => {
|
|
16
31
|
const dragHandleDivRefCurrent = dragHandleDivRef.current;
|
|
17
32
|
if (dragHandleDivRefCurrent) {
|
|
@@ -27,15 +42,11 @@ export const DragHandle = ({
|
|
|
27
42
|
});
|
|
28
43
|
}
|
|
29
44
|
}, [tableLocalId, direction, indexes]);
|
|
30
|
-
return /*#__PURE__*/React.createElement("
|
|
31
|
-
|
|
45
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
46
|
+
className: ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
|
|
32
47
|
style: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
}, /*#__PURE__*/React.createElement(DragHandleButton, {
|
|
39
|
-
label: "blah"
|
|
40
|
-
}));
|
|
48
|
+
transform: direction === 'column' ? 'none' : 'rotate(90deg)'
|
|
49
|
+
},
|
|
50
|
+
ref: dragHandleDivRef
|
|
51
|
+
}, /*#__PURE__*/React.createElement(DragHandleIcon, iconProps));
|
|
41
52
|
};
|
|
@@ -13,7 +13,7 @@ const DragControlsComponent = ({
|
|
|
13
13
|
editorView
|
|
14
14
|
}) => {
|
|
15
15
|
const rowHeights = getRowHeights(tableRef);
|
|
16
|
-
const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
|
|
16
|
+
const heights = rowHeights.map((height, index) => `${height - 1}px`).join(' ');
|
|
17
17
|
const onClick = (index, event) => {};
|
|
18
18
|
const onMouseOver = () => {};
|
|
19
19
|
const onMouseOut = () => {};
|
|
@@ -30,7 +30,8 @@ const DragControlsComponent = ({
|
|
|
30
30
|
}
|
|
31
31
|
}, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
|
|
32
32
|
style: {
|
|
33
|
-
gridRow: `${rowIndex + 1} / span 1
|
|
33
|
+
gridRow: `${rowIndex + 1} / span 1`,
|
|
34
|
+
display: 'flex'
|
|
34
35
|
}
|
|
35
36
|
}, /*#__PURE__*/React.createElement(DragHandle, {
|
|
36
37
|
onClick: event => onClick(rowIndex, event),
|
|
@@ -605,6 +605,15 @@ export const tableStyles = props => {
|
|
|
605
605
|
display: grid;
|
|
606
606
|
align-items: center;
|
|
607
607
|
position: absolute;
|
|
608
|
+
left: -4px;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
|
|
612
|
+
cursor: grab;
|
|
613
|
+
width: max-content;
|
|
614
|
+
padding: 0;
|
|
615
|
+
border: none;
|
|
616
|
+
background: none;
|
|
608
617
|
}
|
|
609
618
|
|
|
610
619
|
${floatingColumnControls(props)}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export const DragHandleIcon = ({
|
|
4
|
+
backgroundColor,
|
|
5
|
+
foregroundColor
|
|
6
|
+
}) => /*#__PURE__*/React.createElement("svg", {
|
|
7
|
+
width: "28",
|
|
8
|
+
height: "20",
|
|
9
|
+
viewBox: "0 0 28 20",
|
|
10
|
+
fill: "none",
|
|
11
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
12
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
13
|
+
x: "1",
|
|
14
|
+
y: "1",
|
|
15
|
+
width: "26",
|
|
16
|
+
height: "18",
|
|
17
|
+
rx: "5",
|
|
18
|
+
fill: backgroundColor || '#F1F2F4'
|
|
19
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
20
|
+
clipPath: "url(#clip0_125_45007)"
|
|
21
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
22
|
+
d: "M11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13C10.5523 13 11 12.5523 11 12Z",
|
|
23
|
+
fill: foregroundColor || '#626F86'
|
|
24
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
25
|
+
d: "M11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9C10.5523 9 11 8.55228 11 8Z",
|
|
26
|
+
fill: foregroundColor || '#626F86'
|
|
27
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
28
|
+
d: "M19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12Z",
|
|
29
|
+
fill: foregroundColor || '#626F86'
|
|
30
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
31
|
+
d: "M19 8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8C17 8.55228 17.4477 9 18 9C18.5523 9 19 8.55228 19 8Z",
|
|
32
|
+
fill: foregroundColor || '#626F86'
|
|
33
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
34
|
+
d: "M15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13C14.5523 13 15 12.5523 15 12Z",
|
|
35
|
+
fill: foregroundColor || '#626F86'
|
|
36
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
37
|
+
d: "M15 8C15 7.44772 14.5523 7 14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9C14.5523 9 15 8.55228 15 8Z",
|
|
38
|
+
fill: foregroundColor || '#626F86'
|
|
39
|
+
})), /*#__PURE__*/React.createElement("rect", {
|
|
40
|
+
x: "1",
|
|
41
|
+
y: "1",
|
|
42
|
+
width: "26",
|
|
43
|
+
height: "18",
|
|
44
|
+
rx: "5",
|
|
45
|
+
stroke: "white",
|
|
46
|
+
strokeWidth: "2"
|
|
47
|
+
}), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
48
|
+
id: "clip0_125_45007"
|
|
49
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
50
|
+
width: "16",
|
|
51
|
+
height: "24",
|
|
52
|
+
fill: "white",
|
|
53
|
+
transform: "matrix(0 -1 1 0 2 18)"
|
|
54
|
+
}))));
|
|
@@ -162,6 +162,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
162
162
|
}, {
|
|
163
163
|
key: "addDropTarget",
|
|
164
164
|
value: function addDropTarget(element) {
|
|
165
|
+
var _this2 = this;
|
|
165
166
|
var pos = this.getPos();
|
|
166
167
|
if (!Number.isFinite(pos)) {
|
|
167
168
|
return;
|
|
@@ -169,15 +170,15 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
169
170
|
if (this.dropTargetCleanup) {
|
|
170
171
|
this.dropTargetCleanup();
|
|
171
172
|
}
|
|
172
|
-
var resolvedPos = this.view.state.doc.resolve(pos);
|
|
173
|
-
var targetIndex = resolvedPos.index();
|
|
174
|
-
var localId = resolvedPos.parent.attrs.localId;
|
|
175
173
|
this.dropTargetCleanup = dropTargetForElements({
|
|
176
174
|
element: element,
|
|
177
175
|
canDrop: function canDrop(_ref2) {
|
|
178
176
|
var _data$indexes, _data$indexes2;
|
|
179
177
|
var source = _ref2.source;
|
|
180
178
|
var data = source.data;
|
|
179
|
+
var _this2$getCurrentData = _this2.getCurrentData(),
|
|
180
|
+
localId = _this2$getCurrentData.localId,
|
|
181
|
+
targetIndex = _this2$getCurrentData.targetIndex;
|
|
181
182
|
return (
|
|
182
183
|
// Only draggables of row type can be dropped on this target
|
|
183
184
|
data.type === 'table-row' &&
|
|
@@ -187,9 +188,15 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
187
188
|
!!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
|
|
188
189
|
);
|
|
189
190
|
},
|
|
191
|
+
getIsSticky: function getIsSticky() {
|
|
192
|
+
return true;
|
|
193
|
+
},
|
|
190
194
|
getData: function getData(_ref3) {
|
|
191
195
|
var input = _ref3.input,
|
|
192
196
|
element = _ref3.element;
|
|
197
|
+
var _this2$getCurrentData2 = _this2.getCurrentData(),
|
|
198
|
+
localId = _this2$getCurrentData2.localId,
|
|
199
|
+
targetIndex = _this2$getCurrentData2.targetIndex;
|
|
193
200
|
var data = {
|
|
194
201
|
localId: localId,
|
|
195
202
|
type: 'table-row',
|
|
@@ -203,6 +210,17 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
203
210
|
}
|
|
204
211
|
});
|
|
205
212
|
}
|
|
213
|
+
}, {
|
|
214
|
+
key: "getCurrentData",
|
|
215
|
+
value: function getCurrentData() {
|
|
216
|
+
var resolvedPos = this.view.state.doc.resolve(this.getPos());
|
|
217
|
+
var targetIndex = resolvedPos.index();
|
|
218
|
+
var localId = resolvedPos.parent.attrs.localId;
|
|
219
|
+
return {
|
|
220
|
+
targetIndex: targetIndex,
|
|
221
|
+
localId: localId
|
|
222
|
+
};
|
|
223
|
+
}
|
|
206
224
|
}, {
|
|
207
225
|
key: "subscribe",
|
|
208
226
|
value: function subscribe() {
|
|
@@ -251,7 +269,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
251
269
|
}, {
|
|
252
270
|
key: "initObservers",
|
|
253
271
|
value: function initObservers() {
|
|
254
|
-
var
|
|
272
|
+
var _this3 = this;
|
|
255
273
|
if (!this.dom || this.dom.dataset.isObserved) {
|
|
256
274
|
return;
|
|
257
275
|
}
|
|
@@ -268,15 +286,15 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
268
286
|
window.requestAnimationFrame(function () {
|
|
269
287
|
var _getTree;
|
|
270
288
|
// we expect tree to be defined after animation frame
|
|
271
|
-
var tableContainer = (_getTree = getTree(
|
|
289
|
+
var tableContainer = (_getTree = getTree(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
|
|
272
290
|
if (tableContainer) {
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
[
|
|
291
|
+
_this3.sentinels.top = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
|
|
292
|
+
_this3.sentinels.bottom = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
|
|
293
|
+
[_this3.sentinels.top, _this3.sentinels.bottom].forEach(function (el) {
|
|
276
294
|
// skip if already observed for another row on this table
|
|
277
295
|
if (el && !el.dataset.isObserved) {
|
|
278
296
|
el.dataset.isObserved = 'true';
|
|
279
|
-
|
|
297
|
+
_this3.intersectionObserver.observe(el);
|
|
280
298
|
}
|
|
281
299
|
});
|
|
282
300
|
}
|
|
@@ -288,27 +306,27 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
288
306
|
}, {
|
|
289
307
|
key: "createResizeObserver",
|
|
290
308
|
value: function createResizeObserver() {
|
|
291
|
-
var
|
|
309
|
+
var _this4 = this;
|
|
292
310
|
this.resizeObserver = new ResizeObserver(function (entries) {
|
|
293
|
-
var tree = getTree(
|
|
311
|
+
var tree = getTree(_this4.dom);
|
|
294
312
|
if (!tree) {
|
|
295
313
|
return;
|
|
296
314
|
}
|
|
297
315
|
var table = tree.table;
|
|
298
316
|
entries.forEach(function (entry) {
|
|
299
|
-
var
|
|
317
|
+
var _this4$editorScrollab;
|
|
300
318
|
// On resize of the parent scroll element we need to adjust the width
|
|
301
319
|
// of the sticky header
|
|
302
|
-
if (entry.target.className === ((
|
|
303
|
-
|
|
320
|
+
if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
|
|
321
|
+
_this4.updateStickyHeaderWidth();
|
|
304
322
|
} else {
|
|
305
323
|
var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
|
|
306
|
-
if (
|
|
324
|
+
if (_this4.sentinels.bottom &&
|
|
307
325
|
// When the table header is sticky, it would be taller by a 1px (border-bottom),
|
|
308
326
|
// So we adding this check to allow a 1px difference.
|
|
309
|
-
Math.abs(newHeight - (
|
|
310
|
-
|
|
311
|
-
|
|
327
|
+
Math.abs(newHeight - (_this4.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
|
|
328
|
+
_this4.stickyRowHeight = newHeight;
|
|
329
|
+
_this4.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
|
|
312
330
|
updateTableMargin(table);
|
|
313
331
|
}
|
|
314
332
|
}
|
|
@@ -318,9 +336,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
318
336
|
}, {
|
|
319
337
|
key: "createIntersectionObserver",
|
|
320
338
|
value: function createIntersectionObserver() {
|
|
321
|
-
var
|
|
339
|
+
var _this5 = this;
|
|
322
340
|
this.intersectionObserver = new IntersectionObserver(function (entries, _) {
|
|
323
|
-
var tree = getTree(
|
|
341
|
+
var tree = getTree(_this5.dom);
|
|
324
342
|
if (!tree) {
|
|
325
343
|
return;
|
|
326
344
|
}
|
|
@@ -343,28 +361,28 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
343
361
|
var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
|
|
344
362
|
if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
|
|
345
363
|
var _entry$rootBounds3;
|
|
346
|
-
tree &&
|
|
347
|
-
|
|
364
|
+
tree && _this5.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
|
|
365
|
+
_this5.lastStickyTimestamp = Date.now();
|
|
348
366
|
} else {
|
|
349
|
-
table &&
|
|
367
|
+
table && _this5.makeRowHeaderNotSticky(table);
|
|
350
368
|
}
|
|
351
369
|
}
|
|
352
370
|
if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
|
|
353
371
|
var _entry$rootBounds4;
|
|
354
|
-
var sentinelIsAboveScrollArea = entry.boundingClientRect.top -
|
|
372
|
+
var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this5.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
|
|
355
373
|
if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
|
|
356
374
|
// Not a perfect solution, but need to this code specific for FireFox ED-19177
|
|
357
375
|
if (browser.gecko) {
|
|
358
|
-
if (
|
|
359
|
-
|
|
376
|
+
if (_this5.lastStickyTimestamp && Date.now() - _this5.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
|
|
377
|
+
_this5.makeRowHeaderNotSticky(table);
|
|
360
378
|
}
|
|
361
379
|
} else {
|
|
362
|
-
|
|
380
|
+
_this5.makeRowHeaderNotSticky(table);
|
|
363
381
|
}
|
|
364
382
|
} else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
|
|
365
383
|
var _entry$rootBounds5;
|
|
366
|
-
tree &&
|
|
367
|
-
|
|
384
|
+
tree && _this5.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
|
|
385
|
+
_this5.lastStickyTimestamp = Date.now();
|
|
368
386
|
}
|
|
369
387
|
}
|
|
370
388
|
return;
|
|
@@ -439,12 +457,12 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
439
457
|
}, {
|
|
440
458
|
key: "refireIntersectionObservers",
|
|
441
459
|
value: function refireIntersectionObservers() {
|
|
442
|
-
var
|
|
460
|
+
var _this6 = this;
|
|
443
461
|
if (this.isSticky) {
|
|
444
462
|
[this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
|
|
445
|
-
if (el &&
|
|
446
|
-
|
|
447
|
-
|
|
463
|
+
if (el && _this6.intersectionObserver) {
|
|
464
|
+
_this6.intersectionObserver.unobserve(el);
|
|
465
|
+
_this6.intersectionObserver.observe(el);
|
|
448
466
|
}
|
|
449
467
|
});
|
|
450
468
|
}
|
|
@@ -453,7 +471,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
453
471
|
key: "makeHeaderRowSticky",
|
|
454
472
|
value: function makeHeaderRowSticky(tree, scrollTop) {
|
|
455
473
|
var _tbody$firstChild,
|
|
456
|
-
|
|
474
|
+
_this7 = this;
|
|
457
475
|
// If header row height is more than 50% of viewport height don't do this
|
|
458
476
|
if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
|
|
459
477
|
return;
|
|
@@ -490,7 +508,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
|
|
|
490
508
|
});
|
|
491
509
|
var fastScrollThresholdMs = 500;
|
|
492
510
|
setTimeout(function () {
|
|
493
|
-
|
|
511
|
+
_this7.refireIntersectionObservers();
|
|
494
512
|
}, fastScrollThresholdMs);
|
|
495
513
|
}
|
|
496
514
|
this.dom.style.top = "".concat(domTop, "px");
|
|
@@ -82,6 +82,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
|
|
|
82
82
|
/** Controls with drag handle */
|
|
83
83
|
COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: "".concat(tablePrefixSelector, "-column-controls-decoration-with-drag"),
|
|
84
84
|
ROW_CONTROLS_WITH_DRAG: "".concat(tablePrefixSelector, "-row-controls-with-drag"),
|
|
85
|
+
DRAG_HANDLE_BUTTON_CONTAINER: "".concat(tablePrefixSelector, "-drag-handle-button-container"),
|
|
85
86
|
/** Other classes */
|
|
86
87
|
NUMBERED_COLUMN: "".concat(tablePrefixSelector, "-numbered-column"),
|
|
87
88
|
NUMBERED_COLUMN_BUTTON: "".concat(tablePrefixSelector, "-numbered-column__button"),
|
|
@@ -1,17 +1,33 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
|
|
3
2
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { N200, N700 } from '@atlaskit/theme/colors';
|
|
4
|
+
import { TableCssClassName as ClassName } from '../../types';
|
|
5
|
+
import { DragHandleIcon } from '../icons/DragHandleIcon';
|
|
6
|
+
var mapStateToProps = function mapStateToProps(state) {
|
|
7
|
+
switch (state) {
|
|
8
|
+
case 'danger':
|
|
9
|
+
case 'disabled':
|
|
10
|
+
case 'selected':
|
|
11
|
+
case 'default':
|
|
12
|
+
default:
|
|
13
|
+
return {
|
|
14
|
+
backgroundColor: "var(--ds-background-accent-gray-subtlest, ".concat(N200, ")"),
|
|
15
|
+
foregroundColor: "var(--ds-icon-subtle, ".concat(N700, ")")
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
};
|
|
6
19
|
export var DragHandle = function DragHandle(_ref) {
|
|
7
20
|
var tableLocalId = _ref.tableLocalId,
|
|
8
21
|
_ref$direction = _ref.direction,
|
|
9
22
|
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
|
23
|
+
_ref$state = _ref.state,
|
|
24
|
+
state = _ref$state === void 0 ? 'default' : _ref$state,
|
|
10
25
|
indexes = _ref.indexes,
|
|
11
26
|
onClick = _ref.onClick,
|
|
12
27
|
onMouseOver = _ref.onMouseOver,
|
|
13
28
|
onMouseOut = _ref.onMouseOut;
|
|
14
29
|
var dragHandleDivRef = useRef(null);
|
|
30
|
+
var iconProps = mapStateToProps(state);
|
|
15
31
|
useEffect(function () {
|
|
16
32
|
var dragHandleDivRefCurrent = dragHandleDivRef.current;
|
|
17
33
|
if (dragHandleDivRefCurrent) {
|
|
@@ -27,15 +43,11 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
27
43
|
});
|
|
28
44
|
}
|
|
29
45
|
}, [tableLocalId, direction, indexes]);
|
|
30
|
-
return /*#__PURE__*/React.createElement("
|
|
31
|
-
|
|
46
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
47
|
+
className: ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
|
|
32
48
|
style: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
}, /*#__PURE__*/React.createElement(DragHandleButton, {
|
|
39
|
-
label: "blah"
|
|
40
|
-
}));
|
|
49
|
+
transform: direction === 'column' ? 'none' : 'rotate(90deg)'
|
|
50
|
+
},
|
|
51
|
+
ref: dragHandleDivRef
|
|
52
|
+
}, /*#__PURE__*/React.createElement(DragHandleIcon, iconProps));
|
|
41
53
|
};
|
|
@@ -12,7 +12,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
|
|
|
12
12
|
tableActive = _ref.tableActive,
|
|
13
13
|
editorView = _ref.editorView;
|
|
14
14
|
var rowHeights = getRowHeights(tableRef);
|
|
15
|
-
var heights = rowHeights.map(function (height) {
|
|
15
|
+
var heights = rowHeights.map(function (height, index) {
|
|
16
16
|
return "".concat(height - 1, "px");
|
|
17
17
|
}).join(' ');
|
|
18
18
|
var _onClick = function onClick(index, event) {};
|
|
@@ -31,7 +31,8 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
|
|
33
33
|
style: {
|
|
34
|
-
gridRow: "".concat(rowIndex + 1, " / span 1")
|
|
34
|
+
gridRow: "".concat(rowIndex + 1, " / span 1"),
|
|
35
|
+
display: 'flex'
|
|
35
36
|
}
|
|
36
37
|
}, /*#__PURE__*/React.createElement(DragHandle, {
|
|
37
38
|
onClick: function onClick(event) {
|
|
@@ -61,7 +61,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
|
|
|
61
61
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
62
62
|
export var tableStyles = function tableStyles(props) {
|
|
63
63
|
var _props$featureFlags;
|
|
64
|
-
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n .", " {\n display: grid;\n align-items: center;\n position: absolute;\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n // add a background above the first numbered column cell when sticky header is engaged\n // which hides the table when scrolling\n .", ":first-of-type::after {\n content: '';\n display: block;\n height: 33px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n\n // the extra pixel is accounting for borders\n top: -34px;\n left: -1px;\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", ":not(.", ") {\n cursor: pointer;\n }\n .", ":not(.", "):hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n ", "\n .", ".", " {\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props), resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.ROW_CONTROLS_WITH_DRAG, floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, tableRowControlStyles(), ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.COLUMN_CONTROLS_WRAPPER, tableMarginTop + 1, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
64
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n .", " {\n display: grid;\n align-items: center;\n position: absolute;\n left: -4px;\n }\n\n .", " {\n cursor: grab;\n width: max-content;\n padding: 0;\n border: none;\n background: none;\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n // add a background above the first numbered column cell when sticky header is engaged\n // which hides the table when scrolling\n .", ":first-of-type::after {\n content: '';\n display: block;\n height: 33px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n\n // the extra pixel is accounting for borders\n top: -34px;\n left: -1px;\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", ":not(.", ") {\n cursor: pointer;\n }\n .", ":not(.", "):hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n ", "\n .", ".", " {\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props), resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.ROW_CONTROLS_WITH_DRAG, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, tableRowControlStyles(), ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.COLUMN_CONTROLS_WRAPPER, tableMarginTop + 1, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
65
65
|
};
|
|
66
66
|
export var tableFullPageEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), ClassName.TABLE_NODE_WRAPPER);
|
|
67
67
|
export var tableCommentEditorStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export var DragHandleIcon = function DragHandleIcon(_ref) {
|
|
4
|
+
var backgroundColor = _ref.backgroundColor,
|
|
5
|
+
foregroundColor = _ref.foregroundColor;
|
|
6
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
7
|
+
width: "28",
|
|
8
|
+
height: "20",
|
|
9
|
+
viewBox: "0 0 28 20",
|
|
10
|
+
fill: "none",
|
|
11
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
12
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
13
|
+
x: "1",
|
|
14
|
+
y: "1",
|
|
15
|
+
width: "26",
|
|
16
|
+
height: "18",
|
|
17
|
+
rx: "5",
|
|
18
|
+
fill: backgroundColor || '#F1F2F4'
|
|
19
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
20
|
+
clipPath: "url(#clip0_125_45007)"
|
|
21
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
22
|
+
d: "M11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13C10.5523 13 11 12.5523 11 12Z",
|
|
23
|
+
fill: foregroundColor || '#626F86'
|
|
24
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
25
|
+
d: "M11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9C10.5523 9 11 8.55228 11 8Z",
|
|
26
|
+
fill: foregroundColor || '#626F86'
|
|
27
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
28
|
+
d: "M19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12Z",
|
|
29
|
+
fill: foregroundColor || '#626F86'
|
|
30
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
31
|
+
d: "M19 8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8C17 8.55228 17.4477 9 18 9C18.5523 9 19 8.55228 19 8Z",
|
|
32
|
+
fill: foregroundColor || '#626F86'
|
|
33
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
34
|
+
d: "M15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13C14.5523 13 15 12.5523 15 12Z",
|
|
35
|
+
fill: foregroundColor || '#626F86'
|
|
36
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
37
|
+
d: "M15 8C15 7.44772 14.5523 7 14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9C14.5523 9 15 8.55228 15 8Z",
|
|
38
|
+
fill: foregroundColor || '#626F86'
|
|
39
|
+
})), /*#__PURE__*/React.createElement("rect", {
|
|
40
|
+
x: "1",
|
|
41
|
+
y: "1",
|
|
42
|
+
width: "26",
|
|
43
|
+
height: "18",
|
|
44
|
+
rx: "5",
|
|
45
|
+
stroke: "white",
|
|
46
|
+
strokeWidth: "2"
|
|
47
|
+
}), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
48
|
+
id: "clip0_125_45007"
|
|
49
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
50
|
+
width: "16",
|
|
51
|
+
height: "24",
|
|
52
|
+
fill: "white",
|
|
53
|
+
transform: "matrix(0 -1 1 0 2 18)"
|
|
54
|
+
}))));
|
|
55
|
+
};
|