@atlaskit/editor-plugin-table 7.6.4 → 7.6.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 +14 -0
- package/dist/cjs/commands/column-resize.js +62 -16
- package/dist/cjs/commands/go-to-next-cell.js +5 -2
- package/dist/cjs/commands-with-analytics.js +8 -2
- package/dist/cjs/nodeviews/ExternalDropTargets.js +2 -0
- package/dist/cjs/nodeviews/TableComponent.js +8 -6
- package/dist/cjs/nodeviews/TableResizer.js +2 -1
- package/dist/cjs/plugin.js +58 -57
- package/dist/cjs/pm-plugins/keymap.js +26 -8
- package/dist/cjs/pm-plugins/main.js +15 -4
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +4 -2
- package/dist/cjs/ui/DragHandle/index.js +2 -2
- package/dist/cjs/ui/DragPreview/index.js +2 -0
- package/dist/cjs/ui/FloatingContextualButton/FixedButton.js +10 -6
- package/dist/cjs/ui/FloatingDeleteButton/index.js +2 -0
- package/dist/cjs/ui/FloatingInsertButton/InsertButton.js +1 -0
- package/dist/cjs/ui/LayoutButton/index.js +2 -0
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +2 -0
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +3 -0
- package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +1 -0
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +1 -0
- package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js +4 -0
- package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +3 -1
- package/dist/cjs/ui/common-styles.js +4 -0
- package/dist/cjs/ui/ui-styles.js +93 -37
- package/dist/es2019/commands/column-resize.js +53 -4
- package/dist/es2019/commands/go-to-next-cell.js +5 -2
- package/dist/es2019/commands-with-analytics.js +8 -2
- package/dist/es2019/nodeviews/ExternalDropTargets.js +2 -0
- package/dist/es2019/nodeviews/TableComponent.js +9 -7
- package/dist/es2019/nodeviews/TableResizer.js +2 -1
- package/dist/es2019/plugin.js +4 -2
- package/dist/es2019/pm-plugins/keymap.js +25 -9
- package/dist/es2019/pm-plugins/main.js +15 -4
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +4 -2
- package/dist/es2019/ui/DragHandle/index.js +2 -2
- package/dist/es2019/ui/DragPreview/index.js +2 -0
- package/dist/es2019/ui/FloatingContextualButton/FixedButton.js +10 -6
- package/dist/es2019/ui/FloatingDeleteButton/index.js +2 -0
- package/dist/es2019/ui/FloatingInsertButton/InsertButton.js +1 -0
- package/dist/es2019/ui/LayoutButton/index.js +2 -0
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +2 -0
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +3 -0
- package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +1 -0
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +1 -0
- package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js +4 -0
- package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +3 -1
- package/dist/es2019/ui/common-styles.js +4 -0
- package/dist/es2019/ui/ui-styles.js +66 -70
- package/dist/esm/commands/column-resize.js +62 -16
- package/dist/esm/commands/go-to-next-cell.js +5 -2
- package/dist/esm/commands-with-analytics.js +8 -2
- package/dist/esm/nodeviews/ExternalDropTargets.js +2 -0
- package/dist/esm/nodeviews/TableComponent.js +9 -7
- package/dist/esm/nodeviews/TableResizer.js +2 -1
- package/dist/esm/plugin.js +58 -57
- package/dist/esm/pm-plugins/keymap.js +26 -8
- package/dist/esm/pm-plugins/main.js +15 -4
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +4 -2
- package/dist/esm/ui/DragHandle/index.js +2 -2
- package/dist/esm/ui/DragPreview/index.js +2 -0
- package/dist/esm/ui/FloatingContextualButton/FixedButton.js +10 -6
- package/dist/esm/ui/FloatingDeleteButton/index.js +2 -0
- package/dist/esm/ui/FloatingInsertButton/InsertButton.js +1 -0
- package/dist/esm/ui/LayoutButton/index.js +2 -0
- package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +2 -0
- package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +3 -0
- package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +1 -0
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +1 -0
- package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js +4 -0
- package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +3 -1
- package/dist/esm/ui/common-styles.js +4 -0
- package/dist/esm/ui/ui-styles.js +93 -37
- package/dist/types/commands/column-resize.d.ts +23 -4
- package/dist/types/commands/go-to-next-cell.d.ts +2 -1
- package/dist/types/commands-with-analytics.d.ts +2 -1
- package/dist/types/pm-plugins/keymap.d.ts +3 -1
- package/dist/types/types.d.ts +7 -0
- package/dist/types-ts4.5/commands/column-resize.d.ts +23 -4
- package/dist/types-ts4.5/commands/go-to-next-cell.d.ts +2 -1
- package/dist/types-ts4.5/commands-with-analytics.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/keymap.d.ts +3 -1
- package/dist/types-ts4.5/types.d.ts +7 -0
- package/package.json +4 -4
- package/src/commands/column-resize.ts +105 -29
- package/src/commands/go-to-next-cell.ts +10 -2
- package/src/commands-with-analytics.ts +11 -5
- package/src/nodeviews/ExternalDropTargets.tsx +2 -0
- package/src/nodeviews/TableComponent.tsx +14 -16
- package/src/nodeviews/TableResizer.tsx +2 -1
- package/src/plugin.tsx +3 -1
- package/src/pm-plugins/keymap.ts +44 -6
- package/src/pm-plugins/main.ts +18 -4
- package/src/pm-plugins/table-resizing/event-handlers.ts +6 -2
- package/src/types.ts +8 -0
- package/src/ui/DragHandle/index.tsx +2 -2
- package/src/ui/DragPreview/index.tsx +2 -0
- package/src/ui/FloatingContextualButton/FixedButton.tsx +9 -6
- package/src/ui/FloatingDeleteButton/index.tsx +2 -0
- package/src/ui/FloatingInsertButton/InsertButton.tsx +1 -0
- package/src/ui/LayoutButton/index.tsx +2 -0
- package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +2 -0
- package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +3 -0
- package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +1 -0
- package/src/ui/TableFloatingControls/NumberColumn/index.tsx +1 -0
- package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +4 -0
- package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +5 -1
- package/src/ui/common-styles.ts +2 -0
- package/src/ui/ui-styles.ts +90 -79
package/dist/esm/ui/ui-styles.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
|
|
5
5
|
import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
@@ -11,111 +11,167 @@ var InsertLine = function InsertLine(cssString) {
|
|
|
11
11
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
|
|
12
12
|
};
|
|
13
13
|
var Marker = function Marker() {
|
|
14
|
-
return css(
|
|
14
|
+
return css({
|
|
15
|
+
backgroundColor: tableBorderColor,
|
|
16
|
+
position: 'absolute',
|
|
17
|
+
height: "".concat(lineMarkerSize, "px"),
|
|
18
|
+
width: "".concat(lineMarkerSize, "px"),
|
|
19
|
+
borderRadius: '50%',
|
|
20
|
+
pointerEvents: 'none'
|
|
21
|
+
});
|
|
15
22
|
};
|
|
16
23
|
export var InsertMarker = function InsertMarker(cssString) {
|
|
17
|
-
return css(
|
|
24
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .", " {\n ", ";\n ", "\n }\n"])), ClassName.CONTROLS_INSERT_MARKER, Marker(), cssString);
|
|
18
25
|
};
|
|
19
26
|
var Button = function Button(cssString) {
|
|
20
|
-
return css(
|
|
27
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: ", ";\n border-width: 0px;\n display: inline-flex;\n max-width: 100%;\n text-align: center;\n margin: 0px;\n padding: 0px;\n text-decoration: none;\n transition: background 0.1s ease-out 0s,\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n outline: none !important;\n cursor: none;\n\n > .", " {\n display: inline-flex;\n max-height: 100%;\n max-width: 100%;\n }\n ", "\n"])), "var(--ds-border-radius, 3px)", ClassName.CONTROLS_BUTTON_ICON, cssString);
|
|
21
28
|
};
|
|
29
|
+
|
|
30
|
+
// Explicit pixel values required here to ensure classic row controls align correctly
|
|
31
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
22
32
|
export var HeaderButton = function HeaderButton(cssString) {
|
|
23
|
-
return css(
|
|
33
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n ", "\n }\n\n .", "::after {\n content: ' ';\n background-color: transparent;\n left: -15px;\n top: 0;\n position: absolute;\n width: 15px;\n height: 100%;\n z-index: 1;\n }\n\n .active .", " {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n }\n"])), ClassName.CONTROLS_BUTTON, tableHeaderCellBackgroundColor, tableBorderColor, cssString, ClassName.ROW_CONTROLS_BUTTON, ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor, tableBorderSelectedColor);
|
|
24
34
|
};
|
|
25
35
|
export var HeaderButtonHover = function HeaderButtonHover() {
|
|
26
|
-
return css(
|
|
36
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", ":hover {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor, tableBorderSelectedColor);
|
|
27
37
|
};
|
|
28
38
|
export var HeaderButtonDanger = function HeaderButtonDanger() {
|
|
29
|
-
return css(
|
|
39
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", " .", " {\n background-color: ", ";\n border-color: ", ";\n position: relative;\n z-index: ", ";\n }\n"])), ClassName.HOVERED_CELL_IN_DANGER, ClassName.CONTROLS_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex);
|
|
30
40
|
};
|
|
31
41
|
var InsertButton = function InsertButton() {
|
|
32
|
-
return css(
|
|
42
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .", " {\n position: absolute;\n z-index: ", ";\n bottom: 0;\n }\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n ", "\n }\n .", " {\n display: none;\n }\n &:hover .", " {\n display: flex;\n }\n"])), ClassName.CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.CONTROLS_INSERT_BUTTON_INNER, ClassName.CONTROLS_INSERT_BUTTON, tableInsertColumnButtonSize, tableInsertColumnButtonSize, ClassName.CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n ")), ClassName.CONTROLS_INSERT_LINE, ClassName.CONTROLS_INSERT_LINE);
|
|
33
43
|
};
|
|
34
44
|
var InsertButtonHover = function InsertButtonHover() {
|
|
35
|
-
return css(
|
|
45
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
|
|
36
46
|
};
|
|
37
47
|
export var dragInsertButtonWrapper = function dragInsertButtonWrapper() {
|
|
38
|
-
return css(
|
|
48
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n .", " {\n position: absolute;\n z-index: ", ";\n }\n\n .", " {\n bottom: -3px;\n left: 2px;\n }\n\n .", " {\n left: -3px;\n bottom: -2px;\n }\n\n .", " {\n ", "\n }\n\n .", ":hover {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n height: ", dragTableInsertColumnButtonSize, "px;\n width: ").concat(dragTableInsertColumnButtonSize, "px;\n ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
|
|
39
49
|
};
|
|
40
50
|
|
|
41
51
|
// Explicit pixel values required here to ensure corner button aligns correctly
|
|
42
52
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
43
53
|
export var dragCornerControlButton = function dragCornerControlButton() {
|
|
44
|
-
return css(
|
|
54
|
+
return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n .", " {\n width: 15px;\n height: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: -17px;\n left: -5px;\n background-color: transparent;\n border: none;\n padding: 0;\n outline: none;\n z-index: ", ";\n\n &.active .", " {\n background-color: ", ";\n width: 10px;\n height: 10px;\n border-width: 2px;\n border-radius: 4px;\n\n top: 3px;\n left: 2px;\n }\n\n &:hover {\n cursor: pointer;\n\n .", " {\n width: 10px;\n height: 10px;\n border-radius: 4px;\n top: 3px;\n left: 2px;\n }\n }\n }\n\n .", " {\n border: 1px solid ", ";\n background-color: ", ";\n border-radius: 2px;\n width: 5px;\n height: 5px;\n position: relative;\n }\n"])), ClassName.DRAG_CORNER_BUTTON, akEditorUnitZIndex * 99, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", ClassName.DRAG_CORNER_BUTTON_INNER, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
|
|
45
55
|
};
|
|
46
56
|
export var insertColumnButtonWrapper = function insertColumnButtonWrapper() {
|
|
47
|
-
return css(
|
|
57
|
+
return css(InsertButton(), InsertButtonHover(), InsertLine("\n width: 2px;\n left: 9px;\n "));
|
|
48
58
|
};
|
|
49
59
|
export var insertRowButtonWrapper = function insertRowButtonWrapper() {
|
|
50
|
-
return css(
|
|
60
|
+
return css(InsertButton(), InsertButtonHover(), InsertLine("\n height: 2px;\n top: -11px;\n left: ".concat(tableInsertColumnButtonSize - 1, "px;\n ")));
|
|
51
61
|
};
|
|
52
62
|
export var columnControlsLineMarker = function columnControlsLineMarker() {
|
|
53
|
-
return css(
|
|
63
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
|
|
54
64
|
};
|
|
55
65
|
export var DeleteButton = function DeleteButton() {
|
|
56
|
-
return css(
|
|
66
|
+
return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(tableCellSelectedDeleteIconBackground, ";\n color: ").concat(tableCellSelectedDeleteIconColor, ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor);
|
|
57
67
|
};
|
|
58
68
|
export var OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
|
|
59
|
-
return css(
|
|
69
|
+
return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: ", ";\n }\n .", " {\n ", "\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", getBooleanFF('platform.editor.custom-table-width') ? "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px)") : "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2, "px)"), ClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), ClassName.TABLE_LEFT_SHADOW, tableBorderColor);
|
|
60
70
|
};
|
|
61
71
|
var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
|
|
62
72
|
if (!isDragAndDropEnabled) {
|
|
63
|
-
return css(
|
|
73
|
+
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n "])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTopWithControl, tableMarginTopWithControl);
|
|
64
74
|
}
|
|
65
75
|
};
|
|
66
76
|
var columnHeaderButton = function columnHeaderButton(cssString) {
|
|
67
77
|
if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
|
|
68
|
-
return css(
|
|
78
|
+
return css({
|
|
79
|
+
background: tableHeaderCellBackgroundColor,
|
|
80
|
+
display: 'block',
|
|
81
|
+
boxSizing: 'border-box',
|
|
82
|
+
padding: 0,
|
|
83
|
+
':focus': {
|
|
84
|
+
outline: 'none'
|
|
85
|
+
}
|
|
86
|
+
}, cssString);
|
|
69
87
|
} else {
|
|
70
|
-
return css(
|
|
88
|
+
return css({
|
|
89
|
+
background: tableHeaderCellBackgroundColor,
|
|
90
|
+
border: "1px solid ".concat(tableBorderColor),
|
|
91
|
+
display: 'block',
|
|
92
|
+
boxSizing: 'border-box',
|
|
93
|
+
padding: 0,
|
|
94
|
+
':focus': {
|
|
95
|
+
outline: 'none'
|
|
96
|
+
}
|
|
97
|
+
}, cssString);
|
|
71
98
|
}
|
|
72
99
|
};
|
|
73
100
|
var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
|
|
74
|
-
return css(
|
|
101
|
+
return css({
|
|
102
|
+
color: "var(--ds-text-inverse, ".concat(N0, ")"),
|
|
103
|
+
backgroundColor: tableToolbarSelectedColor,
|
|
104
|
+
borderColor: tableBorderSelectedColor,
|
|
105
|
+
zIndex: columnControlsSelectedZIndex
|
|
106
|
+
});
|
|
75
107
|
};
|
|
76
108
|
var getFloatingDotOverrides = function getFloatingDotOverrides() {
|
|
77
|
-
return getBooleanFF('platform.editor.custom-table-width') ? css(
|
|
109
|
+
return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n tr\n th:last-child\n .", "::before,\n tr\n td:last-child\n .", "::before {\n content: '';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: ", ";\n right: 0px;\n }\n "])), ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, lineMarkerSize, lineMarkerSize, "var(--ds-space-025, 2px)") : '';
|
|
78
110
|
};
|
|
79
111
|
export var floatingColumnControls = function floatingColumnControls() {
|
|
80
|
-
return css(
|
|
112
|
+
return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n .", " {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n\n .", " {\n display: flex;\n flex-direction: row;\n }\n }\n\n .", " {\n box-sizing: border-box;\n\n .", " {\n display: grid;\n justify-items: center;\n }\n }\n "])), ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER);
|
|
81
113
|
};
|
|
82
114
|
export var rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle() {
|
|
83
|
-
return css(
|
|
115
|
+
return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n // override for DnD controls\n div.", ">.", "::after {\n display: none;\n }\n\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n "])), ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor, lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth);
|
|
84
116
|
};
|
|
85
117
|
export var columnControlsDecoration = function columnControlsDecoration() {
|
|
86
118
|
if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
|
|
87
|
-
return css(
|
|
119
|
+
return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: 100%;\n left: 0;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), ClassName.COLUMN_CONTROLS_DECORATIONS, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor, lineMarkerSize, lineMarkerSize, columnHeaderButton("\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n border-top: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n border-bottom: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n box-sizing: content-box;\n height: ").concat(tableToolbarSize - 1, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), getFloatingDotOverrides(), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), tableCellBorderWidth, tableBorderSelectedColor, tableCellBorderWidth, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, tableCellBorderWidth, tableBorderDeleteColor, tableCellBorderWidth, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
|
|
88
120
|
} else {
|
|
89
|
-
return css(
|
|
121
|
+
return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor, lineMarkerSize, lineMarkerSize, columnHeaderButton("\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n border-bottom: none;\n height: ").concat(tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), getFloatingDotOverrides(), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
|
|
90
122
|
}
|
|
91
123
|
};
|
|
92
124
|
export var hoveredDeleteButton = function hoveredDeleteButton() {
|
|
93
|
-
return css(
|
|
125
|
+
return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n\n .", " > table {\n td.", "::after {\n background: ", ";\n border: 1px solid ", ";\n }\n th.", " {\n background-color: unset;\n }\n th.", "::after {\n background: ", ";\n border: 1px solid ", ";\n }\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor);
|
|
94
126
|
};
|
|
95
127
|
export var hoveredCell = function hoveredCell() {
|
|
96
|
-
return css(
|
|
128
|
+
return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n .", ".", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor);
|
|
97
129
|
};
|
|
98
|
-
export var hoveredWarningCell = css(
|
|
130
|
+
export var hoveredWarningCell = css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n td.", " {\n background-color: ", " !important; // We need to override the background-color added to the cell\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
|
|
99
131
|
|
|
100
132
|
// move the resize handle zone completely inside the table cell to avoid overflow
|
|
101
133
|
var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
|
|
102
|
-
return getBooleanFF('platform.editor.custom-table-width') ? css(
|
|
134
|
+
return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n tr\n th:last-child\n .", ",\n tr\n td:last-child\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: 0;\n cursor: col-resize;\n z-index: ", ";\n }\n "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
|
|
103
135
|
};
|
|
136
|
+
|
|
137
|
+
// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
|
|
138
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
104
139
|
var resizeHandleOverrides = function resizeHandleOverrides(isDragAndDropEnabled) {
|
|
105
140
|
if (isDragAndDropEnabled) {
|
|
106
|
-
return css(
|
|
141
|
+
return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n "])), ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2);
|
|
107
142
|
}
|
|
108
|
-
return css(
|
|
143
|
+
return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n "])), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth);
|
|
109
144
|
};
|
|
110
145
|
export var resizeHandle = function resizeHandle(isDragAndDropEnabled) {
|
|
111
|
-
return css(
|
|
146
|
+
return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n .", " {\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: -", "px;\n cursor: col-resize;\n z-index: ", ";\n }\n\n ", "\n\n ", "\n\n table\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n top: -", "px;\n height: calc(100% + ", "px);\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(isDragAndDropEnabled), ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
|
|
112
147
|
};
|
|
113
148
|
|
|
114
149
|
// Drag and Drop: drop target insert line
|
|
115
|
-
var tableCellColumnInsertLineStyles = css(
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
150
|
+
var tableCellColumnInsertLineStyles = css({
|
|
151
|
+
content: "' '",
|
|
152
|
+
position: 'absolute',
|
|
153
|
+
height: "calc(100% + ".concat(tableCellBorderWidth * 2, "px)"),
|
|
154
|
+
width: "".concat(insertLineWidth, "px"),
|
|
155
|
+
zIndex: columnControlsZIndex * 2
|
|
156
|
+
});
|
|
157
|
+
var tableCellRowInsertLineStyles = css({
|
|
158
|
+
content: "' '",
|
|
159
|
+
position: 'absolute',
|
|
160
|
+
left: "var(--ds-space-negative-025, -2px)",
|
|
161
|
+
height: "".concat(insertLineWidth, "px"),
|
|
162
|
+
width: "calc(100% + ".concat(tableCellBorderWidth * 2, "px)"),
|
|
163
|
+
zIndex: columnControlsZIndex * 2
|
|
164
|
+
});
|
|
165
|
+
var insertLineActiveColor = css({
|
|
166
|
+
backgroundColor: tableBorderSelectedColor
|
|
167
|
+
});
|
|
168
|
+
var insertLineInactiveColor = css({
|
|
169
|
+
backgroundColor: "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
// Explicit pixel values required here to ensure correct positioning of line that is show on row
|
|
173
|
+
// or column drag
|
|
174
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
119
175
|
export var insertLine = function insertLine() {
|
|
120
|
-
return css(
|
|
176
|
+
return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n .", " {\n td.", "::before {\n ", "\n left: -1px;\n top: -1px;\n ", "\n }\n\n td.", "::before {\n ", "\n left: -1px;\n top: -1px;\n ", "\n }\n\n th.", "::before {\n ", "\n left: -1px;\n top: -", "px;\n ", "\n }\n\n th.", "::before {\n ", "\n left: -1px;\n top: -", "px;\n ", "\n }\n\n td.", "::before {\n ", "\n left: ", ";\n top: -1px;\n ", "\n }\n\n td.", "::before {\n ", "\n left: ", ";\n top: -1px;\n ", "\n }\n\n th.", "::before {\n ", "\n left: ", ";\n top: -", "px;\n ", "\n }\n\n th.", "::before {\n ", "\n left: ", ";\n top: -", "px;\n ", "\n }\n\n td.", "::before {\n ", "\n right: -1px;\n top: -1px;\n ", "\n }\n\n td.", "::before {\n ", "\n right: -1px;\n top: -1px;\n ", "\n }\n\n th.", "::before {\n ", "\n right: -1px;\n top: -", "px;\n ", "\n }\n\n th.", "::before {\n ", "\n right: -1px;\n top: -", "px;\n ", "\n }\n\n td.", "::before {\n ", "\n top: -1px;\n ", "\n }\n\n td.", "::before {\n ", "\n top: -1px;\n ", "\n }\n\n th.", "::before {\n ", "\n top: -1px;\n ", "\n }\n\n th.", "::before {\n ", "\n top: -1px;\n ", "\n }\n\n td.", "::before {\n ", "\n bottom: 0;\n ", "\n }\n\n td.", "::before {\n ", "\n bottom: 0;\n ", "\n }\n\n th.", "::before {\n ", "\n bottom: 0;\n ", "\n }\n\n th.", "::before {\n ", "\n bottom: 0;\n ", "\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, ClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
|
|
121
177
|
};
|
|
@@ -1,7 +1,26 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
2
3
|
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
4
|
import type { Direction } from '@atlaskit/editor-tables/types';
|
|
4
|
-
export declare const initiateKeyboardColumnResizing:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, }: {
|
|
6
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
7
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
8
|
+
}) => Command;
|
|
9
|
+
export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, }: {
|
|
10
|
+
direction: Direction;
|
|
11
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
12
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
13
|
+
}) => Command;
|
|
14
|
+
export declare const changeColumnWidthByStep: ({ stepSize, getEditorContainerWidth, isTableScalingEnabled, ariaNotify, getIntl, }: {
|
|
15
|
+
stepSize: number;
|
|
16
|
+
getEditorContainerWidth: GetEditorContainerWidth;
|
|
17
|
+
isTableScalingEnabled: boolean;
|
|
18
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
19
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
20
|
+
originalTr?: Transaction | undefined;
|
|
21
|
+
}) => Command;
|
|
22
|
+
export declare const stopKeyboardColumnResizing: ({ ariaNotify, getIntl, originalTr, }: {
|
|
23
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
24
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
25
|
+
originalTr?: Transaction | undefined;
|
|
26
|
+
}) => Command;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
3
4
|
import type { Direction } from '@atlaskit/editor-tables/types';
|
|
4
|
-
export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (direction: Direction) => Command;
|
|
5
|
+
export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => (direction: Direction) => Command;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
2
3
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
@@ -11,7 +12,7 @@ export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalytic
|
|
|
11
12
|
export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number) => Command;
|
|
12
13
|
export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
|
|
13
14
|
export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
|
|
14
|
-
export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT) => Command;
|
|
15
|
+
export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => Command;
|
|
15
16
|
export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
|
|
16
17
|
export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
|
|
17
18
|
export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
4
|
import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
4
|
-
|
|
5
|
+
import type { PluginInjectionAPIWithA11y } from '../types';
|
|
6
|
+
export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
|
|
5
7
|
export default keymapPlugin;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -26,6 +26,13 @@ export interface InsertRowOptions {
|
|
|
26
26
|
moveCursorToInsertedRow: boolean;
|
|
27
27
|
}
|
|
28
28
|
export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
|
|
29
|
+
export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
|
|
30
|
+
accessibilityUtils?: {
|
|
31
|
+
actions: {
|
|
32
|
+
ariaNotify: (message: string) => void | undefined;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
29
36
|
export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
|
|
30
37
|
isResizing: boolean;
|
|
31
38
|
isTableResizing?: boolean;
|
|
@@ -1,7 +1,26 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
2
3
|
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
4
|
import type { Direction } from '@atlaskit/editor-tables/types';
|
|
4
|
-
export declare const initiateKeyboardColumnResizing:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, }: {
|
|
6
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
7
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
8
|
+
}) => Command;
|
|
9
|
+
export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, }: {
|
|
10
|
+
direction: Direction;
|
|
11
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
12
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
13
|
+
}) => Command;
|
|
14
|
+
export declare const changeColumnWidthByStep: ({ stepSize, getEditorContainerWidth, isTableScalingEnabled, ariaNotify, getIntl, }: {
|
|
15
|
+
stepSize: number;
|
|
16
|
+
getEditorContainerWidth: GetEditorContainerWidth;
|
|
17
|
+
isTableScalingEnabled: boolean;
|
|
18
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
19
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
20
|
+
originalTr?: Transaction | undefined;
|
|
21
|
+
}) => Command;
|
|
22
|
+
export declare const stopKeyboardColumnResizing: ({ ariaNotify, getIntl, originalTr, }: {
|
|
23
|
+
ariaNotify?: ((message: string) => void) | undefined;
|
|
24
|
+
getIntl?: (() => IntlShape) | undefined;
|
|
25
|
+
originalTr?: Transaction | undefined;
|
|
26
|
+
}) => Command;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
3
4
|
import type { Direction } from '@atlaskit/editor-tables/types';
|
|
4
|
-
export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (direction: Direction) => Command;
|
|
5
|
+
export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => (direction: Direction) => Command;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
2
3
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
@@ -11,7 +12,7 @@ export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalytic
|
|
|
11
12
|
export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number) => Command;
|
|
12
13
|
export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
|
|
13
14
|
export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
|
|
14
|
-
export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT) => Command;
|
|
15
|
+
export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => Command;
|
|
15
16
|
export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
|
|
16
17
|
export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
|
|
17
18
|
export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import type { IntlShape } from 'react-intl-next/src/types';
|
|
1
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
4
|
import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
4
|
-
|
|
5
|
+
import type { PluginInjectionAPIWithA11y } from '../types';
|
|
6
|
+
export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
|
|
5
7
|
export default keymapPlugin;
|
|
@@ -26,6 +26,13 @@ export interface InsertRowOptions {
|
|
|
26
26
|
moveCursorToInsertedRow: boolean;
|
|
27
27
|
}
|
|
28
28
|
export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
|
|
29
|
+
export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
|
|
30
|
+
accessibilityUtils?: {
|
|
31
|
+
actions: {
|
|
32
|
+
ariaNotify: (message: string) => void | undefined;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
29
36
|
export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
|
|
30
37
|
isResizing: boolean;
|
|
31
38
|
isTableResizing?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.6.
|
|
3
|
+
"version": "7.6.6",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"runReact18": false
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@atlaskit/adf-schema": "^35.
|
|
32
|
-
"@atlaskit/custom-steps": "^0.0.
|
|
31
|
+
"@atlaskit/adf-schema": "^35.8.0",
|
|
32
|
+
"@atlaskit/custom-steps": "^0.0.17",
|
|
33
33
|
"@atlaskit/editor-common": "^78.22.0",
|
|
34
34
|
"@atlaskit/editor-palette": "1.5.3",
|
|
35
35
|
"@atlaskit/editor-plugin-analytics": "^1.0.0",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
|
|
47
47
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
|
|
48
48
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
49
|
-
"@atlaskit/primitives": "^5.
|
|
49
|
+
"@atlaskit/primitives": "^5.2.0",
|
|
50
50
|
"@atlaskit/theme": "^12.7.0",
|
|
51
51
|
"@atlaskit/toggle": "^13.0.0",
|
|
52
52
|
"@atlaskit/tokens": "^1.42.0",
|