@atlaskit/editor-plugin-table 24.6.1 → 25.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -0
- package/dist/cjs/entry-points/types.js +0 -6
- package/dist/cjs/nodeviews/TableCell.js +23 -1
- package/dist/cjs/nodeviews/rounded-table-edges.js +74 -11
- package/dist/cjs/nodeviews/table.js +0 -7
- package/dist/cjs/types/index.js +2 -6
- package/dist/cjs/ui/TableFloatingControls/index.js +1 -17
- package/dist/cjs/ui/common-styles.js +4 -5
- package/dist/cjs/ui/consts.js +1 -3
- package/dist/cjs/ui/ui-styles.js +12 -18
- package/dist/es2019/entry-points/types.js +1 -1
- package/dist/es2019/nodeviews/TableCell.js +23 -1
- package/dist/es2019/nodeviews/rounded-table-edges.js +72 -10
- package/dist/es2019/nodeviews/table.js +0 -7
- package/dist/es2019/types/index.js +0 -5
- package/dist/es2019/ui/TableFloatingControls/index.js +1 -17
- package/dist/es2019/ui/common-styles.js +3 -60
- package/dist/es2019/ui/consts.js +0 -2
- package/dist/es2019/ui/ui-styles.js +3 -57
- package/dist/esm/entry-points/types.js +1 -1
- package/dist/esm/nodeviews/TableCell.js +23 -1
- package/dist/esm/nodeviews/rounded-table-edges.js +73 -10
- package/dist/esm/nodeviews/table.js +0 -7
- package/dist/esm/types/index.js +0 -5
- package/dist/esm/ui/TableFloatingControls/index.js +1 -17
- package/dist/esm/ui/common-styles.js +6 -7
- package/dist/esm/ui/consts.js +0 -2
- package/dist/esm/ui/ui-styles.js +14 -20
- package/dist/types/entry-points/types.d.ts +1 -1
- package/dist/types/nodeviews/rounded-table-edges.d.ts +16 -0
- package/dist/types/types/index.d.ts +0 -9
- package/dist/types/ui/consts.d.ts +0 -2
- package/dist/types/ui/ui-styles.d.ts +0 -2
- package/package.json +17 -20
- package/dist/cjs/nodeviews/OverflowShadowsObserver.js +0 -132
- package/dist/cjs/nodeviews/update-overflow-shadows.js +0 -16
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -118
- package/dist/cjs/ui/TableFloatingControls/CornerControls/types.js +0 -5
- package/dist/es2019/nodeviews/OverflowShadowsObserver.js +0 -112
- package/dist/es2019/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -126
- package/dist/es2019/ui/TableFloatingControls/CornerControls/types.js +0 -1
- package/dist/esm/nodeviews/OverflowShadowsObserver.js +0 -125
- package/dist/esm/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -109
- package/dist/esm/ui/TableFloatingControls/CornerControls/types.js +0 -1
- package/dist/types/nodeviews/OverflowShadowsObserver.d.ts +0 -26
- package/dist/types/nodeviews/__mocks__/OverflowShadowsObserver.d.ts +0 -9
- package/dist/types/nodeviews/__mocks__/OverridableMock.d.ts +0 -9
- package/dist/types/nodeviews/update-overflow-shadows.d.ts +0 -1
- package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +0 -15
- package/dist/types/ui/TableFloatingControls/CornerControls/types.d.ts +0 -11
package/dist/cjs/ui/ui-styles.js
CHANGED
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.dragCornerControlButton = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.
|
|
7
|
+
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.dragCornerControlButton = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
|
12
12
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
13
13
|
var _types = require("../types");
|
|
14
14
|
var _consts = require("./consts");
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
16
16
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
18
18
|
var InsertLine = function InsertLine(cssString) {
|
|
@@ -88,12 +88,6 @@ var columnControlsLineMarker = exports.columnControlsLineMarker = function colum
|
|
|
88
88
|
var DeleteButton = exports.DeleteButton = function DeleteButton() {
|
|
89
89
|
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(_consts.tableCellSelectedDeleteIconBackground, ";\n color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
|
|
90
90
|
};
|
|
91
|
-
var OverflowShadow = exports.OverflowShadow = function OverflowShadow() {
|
|
92
|
-
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\tdisplay: block;\n\t\theight: calc(100% - ", "px);\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to left, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(\n\t\t\t\tto right,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: 0px;\n\t}\n\t.", "[data-number-column='true'] > :not(.", ").", " {\n\t\tleft: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to right, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(to left, ", " 0px, transparent 1px);\n\t\tleft: calc(100% - ", "px);\n\t}\n\t.", " {\n\t\t.", " {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
|
|
93
|
-
};
|
|
94
|
-
var OverflowShadowLessPadding = exports.OverflowShadowLessPadding = function OverflowShadowLessPadding(tableOverflowShadowWidth) {
|
|
95
|
-
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\twidth: ", "px;\n\t}\n\n\t.", " {\n\t\tleft: 6px;\n\t}\n\t.", ".", " {\n\t\tleft: 8px;\n\t}\n\n\t.", " {\n\t\tleft: calc(100% - 6px);\n\t}\n\t.", ".", " {\n\t\tleft: calc(100% - 16px);\n\t}\n"])), _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS);
|
|
96
|
-
};
|
|
97
91
|
var columnHeaderButton = function columnHeaderButton(cssString) {
|
|
98
92
|
return (0, _react.css)({
|
|
99
93
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -121,34 +115,34 @@ var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
|
|
|
121
115
|
});
|
|
122
116
|
};
|
|
123
117
|
var getFloatingDotOverrides = function getFloatingDotOverrides() {
|
|
124
|
-
return (0, _react.css)(
|
|
118
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", "::before,\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", "::before {\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: ", ";\n\t\t\tright: 0px;\n\t\t}\n\t"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)");
|
|
125
119
|
};
|
|
126
120
|
var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls() {
|
|
127
|
-
return (0, _react.css)(
|
|
121
|
+
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: grid;\n\t\t\t\tjustify-items: center;\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER);
|
|
128
122
|
};
|
|
129
123
|
var rowControlsWrapperDotStyle = exports.rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle() {
|
|
130
|
-
return (0, _react.css)(
|
|
124
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* override for DnD controls */\n\t\tdiv.", ">.", "::after {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tdiv.", ">.", "::after {\n\t\t\tcontent: ' ';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: -", "px;\n\t\t\tright: -1px;\n\t\t}\n\t"])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
131
125
|
};
|
|
132
126
|
var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration() {
|
|
133
|
-
return (0, _react.css)(
|
|
127
|
+
return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tdisplay: none;\n\t\t\tcursor: pointer;\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\tleft: 0;\n\t\t\ttop: -", "px;\n\t\t\theight: ", "px;\n\t\t\t/* floating dot for adding column button */\n\t\t\t&::before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\theight: ", "px;\n\t\t\t\twidth: ", "px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tpointer-events: none;\n\t\t\t\ttop: 2px;\n\t\t\t\tright: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: ' ';\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* floating dot for adding column button - overriding style on last column to avoid scroll */\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t.", "::after {\n\t\t\t\t", ";\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-negative-025, -2px)", columnHeaderButton("\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n box-sizing: content-box;\n height: ").concat(_consts.tableToolbarSize - 1, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
|
|
134
128
|
};
|
|
135
129
|
var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton() {
|
|
136
|
-
return (0, _react.css)(
|
|
130
|
+
return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " {\n\t\t.", ", .", ", .", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t.", " > table {\n\t\t\ttd.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\tth.", " {\n\t\t\t\tbackground-color: unset;\n\t\t\t}\n\t\t\tth.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts.tableBorderDeleteColor, ";"), _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor);
|
|
137
131
|
};
|
|
138
132
|
var hoveredCell = exports.hoveredCell = function hoveredCell() {
|
|
139
|
-
return (0, _react.css)(
|
|
133
|
+
return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\t", "\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts.tableBorderSelectedColor, ";"), _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts.tableBorderColor, ";"));
|
|
140
134
|
};
|
|
141
135
|
|
|
142
136
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
143
|
-
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(
|
|
137
|
+
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; /* We need to override the background-color added to the cell */\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)");
|
|
144
138
|
|
|
145
139
|
// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
|
|
146
140
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
147
141
|
var resizeLineStyles = function resizeLineStyles() {
|
|
148
|
-
return (0, _react.css)(
|
|
142
|
+
return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\t\tth.", "::before, td.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before,\n\t\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t/* Styles when drag and drop is disabled - will be removed */\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tleft: ", ";\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tright: -1px;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\t"])), _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
149
143
|
};
|
|
150
144
|
var resizeHandle = exports.resizeHandle = function resizeHandle() {
|
|
151
|
-
return (0, _react.css)(
|
|
145
|
+
return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: -", "px;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", ",\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\n\t\ttable\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after,\n\t /* Styles when drag and drop is disabled - will be removed */\n\t\ttable\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n\t\t\ttop: -", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, resizeLineStyles(), _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
152
146
|
};
|
|
153
147
|
|
|
154
148
|
// Drag and Drop: drop target insert line
|
|
@@ -186,5 +180,5 @@ var insertLineInactiveColor = (0, _react.css)({
|
|
|
186
180
|
// or column drag
|
|
187
181
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
188
182
|
var insertLine = exports.insertLine = function insertLine() {
|
|
189
|
-
return (0, _react.css)(
|
|
183
|
+
return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
|
|
190
184
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
2
|
-
export { RESIZE_HANDLE_AREA_DECORATION_GAP,
|
|
2
|
+
export { RESIZE_HANDLE_AREA_DECORATION_GAP, TableCssClassName, TableDecorations } from '../types/index';
|
|
@@ -2,7 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
|
|
3
3
|
import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { TableMap } from '@atlaskit/editor-tables';
|
|
5
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
5
6
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
|
+
import { getRoundedTableCellEdgeState } from './rounded-table-edges';
|
|
6
8
|
import TableNodeView from './TableNodeViewBase';
|
|
7
9
|
const DEFAULT_COL_SPAN = 1;
|
|
8
10
|
const DEFAULT_ROW_SPAN = 1;
|
|
@@ -119,8 +121,19 @@ export default class TableCell extends TableNodeView {
|
|
|
119
121
|
if (tableNode.type.name !== 'table') {
|
|
120
122
|
return;
|
|
121
123
|
}
|
|
122
|
-
const tableMap = TableMap.get(tableNode);
|
|
123
124
|
const cellStartInTable = pos - resolvedPos.start(tableDepth);
|
|
125
|
+
if (isExperimentEnabled('platform_editor_table_q4_patch_6')) {
|
|
126
|
+
const edgeState = getRoundedTableCellEdgeState(tableNode, cellStartInTable);
|
|
127
|
+
if (!edgeState) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
this.setDataAttr('data-reaches-top', edgeState.reachesTop);
|
|
131
|
+
this.setDataAttr('data-reaches-bottom', edgeState.reachesBottom);
|
|
132
|
+
this.setDataAttr('data-reaches-left', edgeState.reachesLeft);
|
|
133
|
+
this.setDataAttr('data-reaches-right', edgeState.reachesRight);
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
const tableMap = TableMap.get(tableNode);
|
|
124
137
|
const cellRect = tableMap.findCell(cellStartInTable);
|
|
125
138
|
this.setDataAttr('data-reaches-top', cellRect.top === 0);
|
|
126
139
|
this.setDataAttr('data-reaches-bottom', cellRect.bottom >= tableMap.height);
|
|
@@ -131,6 +144,15 @@ export default class TableCell extends TableNodeView {
|
|
|
131
144
|
}
|
|
132
145
|
}
|
|
133
146
|
setDataAttr(attr, value) {
|
|
147
|
+
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_6')) {
|
|
148
|
+
const hasAttr = this.dom.hasAttribute(attr);
|
|
149
|
+
if (value && !hasAttr) {
|
|
150
|
+
this.dom.setAttribute(attr, 'true');
|
|
151
|
+
} else if (!value && hasAttr) {
|
|
152
|
+
this.dom.removeAttribute(attr);
|
|
153
|
+
}
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
134
156
|
if (value) {
|
|
135
157
|
this.dom.setAttribute(attr, 'true');
|
|
136
158
|
} else {
|
|
@@ -1,4 +1,49 @@
|
|
|
1
1
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
2
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
3
|
+
const roundedTableCellEdgeStateCache = new WeakMap();
|
|
4
|
+
const addEdgeState = (edgeStates, offset, edge) => {
|
|
5
|
+
let edgeState = edgeStates.get(offset);
|
|
6
|
+
if (!edgeState) {
|
|
7
|
+
edgeState = {
|
|
8
|
+
reachesTop: false,
|
|
9
|
+
reachesBottom: false,
|
|
10
|
+
reachesLeft: false,
|
|
11
|
+
reachesRight: false
|
|
12
|
+
};
|
|
13
|
+
edgeStates.set(offset, edgeState);
|
|
14
|
+
}
|
|
15
|
+
edgeState[edge] = true;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Returns the rounded-edge membership for a cell offset.
|
|
20
|
+
*
|
|
21
|
+
* The first lookup for a table scans only the TableMap's four borders and caches edge cells.
|
|
22
|
+
* Interior cells have no cache entry and require no DOM attributes. Subsequent cell nodeview
|
|
23
|
+
* constructors perform an O(1) lookup. The cache is keyed by the immutable table node, so
|
|
24
|
+
* structural document changes naturally create a fresh entry.
|
|
25
|
+
*/
|
|
26
|
+
export const getRoundedTableCellEdgeState = (tableNode, cellOffset) => {
|
|
27
|
+
let edgeStates = roundedTableCellEdgeStateCache.get(tableNode);
|
|
28
|
+
if (!edgeStates) {
|
|
29
|
+
const {
|
|
30
|
+
width,
|
|
31
|
+
height,
|
|
32
|
+
map
|
|
33
|
+
} = TableMap.get(tableNode);
|
|
34
|
+
edgeStates = new Map();
|
|
35
|
+
for (let column = 0; column < width; column++) {
|
|
36
|
+
addEdgeState(edgeStates, map[column], 'reachesTop');
|
|
37
|
+
addEdgeState(edgeStates, map[(height - 1) * width + column], 'reachesBottom');
|
|
38
|
+
}
|
|
39
|
+
for (let row = 0; row < height; row++) {
|
|
40
|
+
addEdgeState(edgeStates, map[row * width], 'reachesLeft');
|
|
41
|
+
addEdgeState(edgeStates, map[row * width + width - 1], 'reachesRight');
|
|
42
|
+
}
|
|
43
|
+
roundedTableCellEdgeStateCache.set(tableNode, edgeStates);
|
|
44
|
+
}
|
|
45
|
+
return edgeStates.get(cellOffset);
|
|
46
|
+
};
|
|
2
47
|
const setDataAttr = (cell, attr, value) => {
|
|
3
48
|
const hasAttr = cell.hasAttribute(attr);
|
|
4
49
|
if (value && !hasAttr) {
|
|
@@ -54,16 +99,7 @@ const refreshRoundedTableEdgeAttrs = (table, tableNode) => {
|
|
|
54
99
|
// Keep existing edge attrs if the current shape cannot be mapped safely.
|
|
55
100
|
}
|
|
56
101
|
};
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* Builds a lightweight signature of the cells sitting on the table's four borders, using
|
|
60
|
-
* their (immutable) ProseMirror node references. The signature changes whenever a border
|
|
61
|
-
* cell is added, removed, merged, or moved (row/column reorder via drag-and-drop) but stays
|
|
62
|
-
* stable across pure text edits in non-edge cells. This lets the controller decide cheaply
|
|
63
|
-
* (O(rows + cols)) whether the rounded-edge attrs need a full refresh, instead of only
|
|
64
|
-
* reacting to width/height changes.
|
|
65
|
-
*/
|
|
66
|
-
const getTableEdgeSignature = tableNode => {
|
|
102
|
+
const getLegacyTableEdgeSignature = tableNode => {
|
|
67
103
|
const edgeCells = [];
|
|
68
104
|
const lastRowIndex = tableNode.childCount - 1;
|
|
69
105
|
tableNode.forEach((row, _rowOffset, rowIndex) => {
|
|
@@ -77,6 +113,32 @@ const getTableEdgeSignature = tableNode => {
|
|
|
77
113
|
});
|
|
78
114
|
return edgeCells;
|
|
79
115
|
};
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Builds a lightweight signature of the cells sitting on the table's four borders, using
|
|
119
|
+
* their immutable ProseMirror node references. Top and bottom rows are visited in full;
|
|
120
|
+
* interior rows contribute only their first and last cells, making this O(rows + columns).
|
|
121
|
+
*/
|
|
122
|
+
const getPerimeterTableEdgeSignature = tableNode => {
|
|
123
|
+
const edgeCells = [];
|
|
124
|
+
const lastRowIndex = tableNode.childCount - 1;
|
|
125
|
+
tableNode.forEach((row, _rowOffset, rowIndex) => {
|
|
126
|
+
if (rowIndex === 0 || rowIndex === lastRowIndex) {
|
|
127
|
+
row.forEach(cell => {
|
|
128
|
+
edgeCells.push(cell);
|
|
129
|
+
});
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
if (row.firstChild) {
|
|
133
|
+
edgeCells.push(row.firstChild);
|
|
134
|
+
}
|
|
135
|
+
if (row.childCount > 1 && row.lastChild) {
|
|
136
|
+
edgeCells.push(row.lastChild);
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
return edgeCells;
|
|
140
|
+
};
|
|
141
|
+
const getTableEdgeSignature = tableNode => isExperimentEnabled('platform_editor_table_q4_patch_6') ? getPerimeterTableEdgeSignature(tableNode) : getLegacyTableEdgeSignature(tableNode);
|
|
80
142
|
const tableEdgeSignaturesDiffer = (prev, next) => {
|
|
81
143
|
if (!prev || prev.length !== next.length) {
|
|
82
144
|
return true;
|
|
@@ -303,13 +303,6 @@ export default class TableView extends ReactNodeView {
|
|
|
303
303
|
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
304
304
|
return false;
|
|
305
305
|
}
|
|
306
|
-
|
|
307
|
-
// ED-16668
|
|
308
|
-
// Do not remove this fixes an issue with windows firefox that relates to
|
|
309
|
-
// the addition of the shadow sentinels
|
|
310
|
-
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
311
|
-
return false;
|
|
312
|
-
}
|
|
313
306
|
if (!this.contentDOM) {
|
|
314
307
|
return true;
|
|
315
308
|
}
|
|
@@ -166,11 +166,6 @@ export const TableCssClassName = {
|
|
|
166
166
|
NO_OVERFLOW: `${tablePrefixSelector}-no-overflow`,
|
|
167
167
|
ACTIVE_CURSOR_CELL: `${tablePrefixSelector}-active-cursor-cell`
|
|
168
168
|
};
|
|
169
|
-
export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
|
|
170
|
-
ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
|
|
171
|
-
ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
|
|
172
|
-
return ShadowEvent;
|
|
173
|
-
}({});
|
|
174
169
|
|
|
175
170
|
/**
|
|
176
171
|
* Drag and Drop interfaces
|
|
@@ -7,12 +7,8 @@ import { Fragment, useCallback } from 'react';
|
|
|
7
7
|
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
9
|
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
|
|
10
|
-
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
10
|
import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
|
|
13
|
-
import { isTableNested } from '../../pm-plugins/utils/nodes';
|
|
14
11
|
import { TableCssClassName as ClassName } from '../../types';
|
|
15
|
-
import { DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
|
|
16
12
|
import NumberColumn from './NumberColumn';
|
|
17
13
|
import { DragControlsWithSelection } from './RowControls/DragControls';
|
|
18
14
|
// Row controls
|
|
@@ -34,7 +30,6 @@ export const TableFloatingControls = ({
|
|
|
34
30
|
api,
|
|
35
31
|
isChromelessEditor
|
|
36
32
|
}) => {
|
|
37
|
-
var _findTable;
|
|
38
33
|
const _selectRow = useCallback((row, expand) => {
|
|
39
34
|
const {
|
|
40
35
|
state,
|
|
@@ -88,11 +83,6 @@ export const TableFloatingControls = ({
|
|
|
88
83
|
}
|
|
89
84
|
const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
|
|
90
85
|
const wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
|
|
91
|
-
const tablePos = (_findTable = findTable(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
|
|
92
|
-
// Ignored via go/ees005
|
|
93
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
94
|
-
const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
|
|
95
|
-
const shouldShowCornerControls = isNested && !fg('platform_editor_nested_dnd_styles_changes');
|
|
96
86
|
return jsx("div", {
|
|
97
87
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
98
88
|
className: wrapperClassName
|
|
@@ -112,13 +102,7 @@ export const TableFloatingControls = ({
|
|
|
112
102
|
updateCellHoverLocation: updateCellHoverLocation,
|
|
113
103
|
stickyTop: stickyTop,
|
|
114
104
|
isDragAndDropEnabled: isDragAndDropEnabled
|
|
115
|
-
}) : null, tableActive && jsx(Fragment, null,
|
|
116
|
-
editorView: editorView,
|
|
117
|
-
tableRef: tableRef,
|
|
118
|
-
isInDanger: isInDanger,
|
|
119
|
-
isResizing: isResizing,
|
|
120
|
-
api: api
|
|
121
|
-
}), jsx(DragControlsWithSelection, {
|
|
105
|
+
}) : null, tableActive && jsx(Fragment, null, jsx(DragControlsWithSelection, {
|
|
122
106
|
tableRef: tableRef,
|
|
123
107
|
tableNode: tableNode,
|
|
124
108
|
hoveredCell: hoveredCell,
|
|
@@ -17,9 +17,9 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
|
17
17
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
18
18
|
import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
|
|
19
19
|
import { TableCssClassName as ClassName } from '../types';
|
|
20
|
-
import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, columnControlsDecorationHeight, dragRowControlsWidth, nativeStickyHeaderZIndex, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, stickyRowZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableColumnControlsHeight, tableControlsSpacing, tableHeaderCellBackgroundColor, tableHeaderCellSelectedColor, tableInsertColumnButtonSize,
|
|
20
|
+
import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, columnControlsDecorationHeight, dragRowControlsWidth, nativeStickyHeaderZIndex, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, stickyRowZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableColumnControlsHeight, tableControlsSpacing, tableHeaderCellBackgroundColor, tableHeaderCellSelectedColor, tableInsertColumnButtonSize, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
|
|
21
21
|
import { roundedTableOverrides } from './rounded-table-styles';
|
|
22
|
-
import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper,
|
|
22
|
+
import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
|
|
23
23
|
const cornerControlHeight = tableToolbarSize + 1;
|
|
24
24
|
|
|
25
25
|
/*
|
|
@@ -122,22 +122,6 @@ const stickyScrollbarContainerStyles = `.${ClassName.TABLE_CONTAINER} {
|
|
|
122
122
|
}
|
|
123
123
|
}`;
|
|
124
124
|
const stickyScrollbarStyles = `${stickyScrollbarContainerStyles} ${stickyScrollbarSentinelStyles}`;
|
|
125
|
-
const shadowSentinelStyles = `
|
|
126
|
-
.${ClassName.TABLE_SHADOW_SENTINEL_LEFT},
|
|
127
|
-
.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
|
|
128
|
-
position: absolute;
|
|
129
|
-
top: 0;
|
|
130
|
-
height: 100%;
|
|
131
|
-
width: 1px;
|
|
132
|
-
visibility: hidden;
|
|
133
|
-
}
|
|
134
|
-
.${ClassName.TABLE_SHADOW_SENTINEL_LEFT} {
|
|
135
|
-
left: 0;
|
|
136
|
-
}
|
|
137
|
-
.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
|
|
138
|
-
right: 0;
|
|
139
|
-
}
|
|
140
|
-
`;
|
|
141
125
|
const breakoutWidthStyling = () => {
|
|
142
126
|
return css`
|
|
143
127
|
> *:not([data-mark-type='fragment'])
|
|
@@ -397,17 +381,6 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && fg('p
|
|
|
397
381
|
}
|
|
398
382
|
}
|
|
399
383
|
|
|
400
|
-
.${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
|
|
401
|
-
left: unset;
|
|
402
|
-
position: fixed;
|
|
403
|
-
/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */
|
|
404
|
-
z-index: ${akEditorTableCellOnStickyHeaderZIndex};
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
.${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
|
|
408
|
-
padding-bottom: ${tableToolbarSize}px;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
384
|
.tableView-content-wrap:has(.tableView-content-wrap):has(
|
|
412
385
|
.${ClassName.NESTED_TABLE_WITH_CONTROLS}
|
|
413
386
|
) {
|
|
@@ -623,12 +596,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && fg('p
|
|
|
623
596
|
}
|
|
624
597
|
|
|
625
598
|
${sentinelStyles}
|
|
626
|
-
${
|
|
627
|
-
${stickyScrollbarStyles}
|
|
628
|
-
|
|
629
|
-
.${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
|
|
630
|
-
height: 0; /* stop overflow flash & set correct height in update-overflow-shadows.ts */
|
|
631
|
-
}
|
|
599
|
+
${stickyScrollbarStyles}
|
|
632
600
|
|
|
633
601
|
.less-padding {
|
|
634
602
|
padding: 0 ${tablePadding}px;
|
|
@@ -659,24 +627,6 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && fg('p
|
|
|
659
627
|
&.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
|
|
660
628
|
padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
|
|
661
629
|
}
|
|
662
|
-
.${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
|
|
663
|
-
width: ${tableOverflowShadowWidth}px;
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
.${ClassName.TABLE_LEFT_SHADOW} {
|
|
667
|
-
left: 6px;
|
|
668
|
-
}
|
|
669
|
-
.${ClassName.TABLE_LEFT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
|
|
670
|
-
left: 8px;
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
.${ClassName.TABLE_RIGHT_SHADOW} {
|
|
674
|
-
left: calc(100% - 6px);
|
|
675
|
-
}
|
|
676
|
-
.${ClassName.TABLE_RIGHT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
|
|
677
|
-
left: calc(100% - 16px);
|
|
678
|
-
}
|
|
679
|
-
|
|
680
630
|
.${TableSharedCssClassName.TABLE_LEFT_BORDER} {
|
|
681
631
|
left: 8px;
|
|
682
632
|
}
|
|
@@ -1226,11 +1176,6 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && fg('p
|
|
|
1226
1176
|
`}
|
|
1227
1177
|
}
|
|
1228
1178
|
|
|
1229
|
-
.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
|
|
1230
|
-
.${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
|
|
1231
|
-
z-index: ${akEditorUnitZIndex};
|
|
1232
|
-
}
|
|
1233
|
-
|
|
1234
1179
|
.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
|
|
1235
1180
|
position: absolute;
|
|
1236
1181
|
top: ${tableMarginTop}px;
|
|
@@ -1390,8 +1335,6 @@ export const tableStyles = props => css`
|
|
|
1390
1335
|
.ProseMirror.${ClassName.RESIZE_CURSOR} {
|
|
1391
1336
|
cursor: col-resize;
|
|
1392
1337
|
}
|
|
1393
|
-
|
|
1394
|
-
${shadowSentinelStyles}
|
|
1395
1338
|
`;
|
|
1396
1339
|
|
|
1397
1340
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
package/dist/es2019/ui/consts.js
CHANGED
|
@@ -56,8 +56,6 @@ export const contextualMenuDropdownWidthDnD = 250;
|
|
|
56
56
|
export const stickyRowZIndex = resizeHandlerZIndex + 2;
|
|
57
57
|
export const stickyRowOffsetTop = 8;
|
|
58
58
|
export const stickyHeaderBorderBottomWidth = 1;
|
|
59
|
-
export const tableOverflowShadowWidth = 8;
|
|
60
|
-
export const tableOverflowShadowWidthWide = 32;
|
|
61
59
|
export const tablePopupMenuFitHeight = 188;
|
|
62
60
|
export const tableColumnControlsHeight = 24;
|
|
63
61
|
export const nativeStickyHeaderZIndex = akEditorTableCellOnStickyHeaderZIndex - 5;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
|
|
2
2
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
|
-
import { tableCellBorderWidth
|
|
5
|
-
import {
|
|
4
|
+
import { tableCellBorderWidth } from '@atlaskit/editor-common/styles';
|
|
5
|
+
import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
6
6
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
7
|
import { TableCssClassName as ClassName } from '../types';
|
|
8
|
-
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize,
|
|
8
|
+
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
|
|
9
9
|
const InsertLine = cssString => css`
|
|
10
10
|
.${ClassName.CONTROLS_INSERT_LINE} {
|
|
11
11
|
background: ${tableBorderSelectedColor};
|
|
@@ -273,60 +273,6 @@ export const DeleteButton = () => css`
|
|
|
273
273
|
cursor: pointer;
|
|
274
274
|
}
|
|
275
275
|
`;
|
|
276
|
-
export const OverflowShadow = () => css`
|
|
277
|
-
.${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
|
|
278
|
-
display: block;
|
|
279
|
-
height: calc(100% - ${tableMarginTop}px);
|
|
280
|
-
position: absolute;
|
|
281
|
-
pointer-events: none;
|
|
282
|
-
top: ${tableMarginTop}px;
|
|
283
|
-
z-index: ${akEditorShadowZIndex};
|
|
284
|
-
width: ${tableOverflowShadowWidthWide}px;
|
|
285
|
-
}
|
|
286
|
-
.${ClassName.TABLE_LEFT_SHADOW} {
|
|
287
|
-
background:
|
|
288
|
-
linear-gradient(to left, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%),
|
|
289
|
-
linear-gradient(
|
|
290
|
-
to right,
|
|
291
|
-
${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px,
|
|
292
|
-
transparent 1px
|
|
293
|
-
);
|
|
294
|
-
left: 0px;
|
|
295
|
-
}
|
|
296
|
-
.${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
|
|
297
|
-
left: ${akEditorTableNumberColumnWidth - 1}px;
|
|
298
|
-
}
|
|
299
|
-
.${ClassName.TABLE_RIGHT_SHADOW} {
|
|
300
|
-
background:
|
|
301
|
-
linear-gradient(to right, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%),
|
|
302
|
-
linear-gradient(to left, ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px, transparent 1px);
|
|
303
|
-
left: calc(100% - ${tableOverflowShadowWidthWide}px);
|
|
304
|
-
}
|
|
305
|
-
.${ClassName.WITH_CONTROLS} {
|
|
306
|
-
.${ClassName.TABLE_LEFT_SHADOW} {
|
|
307
|
-
border-left: 1px solid ${tableBorderColor};
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
`;
|
|
311
|
-
export const OverflowShadowLessPadding = tableOverflowShadowWidth => css`
|
|
312
|
-
.${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
|
|
313
|
-
width: ${tableOverflowShadowWidth}px;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
.${ClassName.TABLE_LEFT_SHADOW} {
|
|
317
|
-
left: 6px;
|
|
318
|
-
}
|
|
319
|
-
.${ClassName.TABLE_LEFT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
|
|
320
|
-
left: 8px;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.${ClassName.TABLE_RIGHT_SHADOW} {
|
|
324
|
-
left: calc(100% - 6px);
|
|
325
|
-
}
|
|
326
|
-
.${ClassName.TABLE_RIGHT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
|
|
327
|
-
left: calc(100% - 16px);
|
|
328
|
-
}
|
|
329
|
-
`;
|
|
330
276
|
const columnHeaderButton = cssString => {
|
|
331
277
|
return css({
|
|
332
278
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
2
|
-
export { RESIZE_HANDLE_AREA_DECORATION_GAP,
|
|
2
|
+
export { RESIZE_HANDLE_AREA_DECORATION_GAP, TableCssClassName, TableDecorations } from '../types/index';
|