@atlaskit/editor-plugin-table 22.4.3 → 22.4.4
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 +8 -0
- package/dist/cjs/nodeviews/TableComponent.js +1 -1
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +1 -2
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +4 -6
- package/dist/cjs/ui/common-styles.js +4 -4
- package/dist/es2019/nodeviews/TableComponent.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +1 -2
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +4 -4
- package/dist/es2019/ui/common-styles.js +167 -66
- package/dist/esm/nodeviews/TableComponent.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +1 -2
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +4 -6
- package/dist/esm/ui/common-styles.js +4 -4
- package/package.json +8 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 22.4.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`4c459a2718b67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c459a2718b67) -
|
|
8
|
+
Clean up synced block feature gates
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 22.4.3
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -143,7 +143,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
143
143
|
var tablePos = _this.props.getPos();
|
|
144
144
|
var isNested = (0, _nodes.isTableNested)(_this.props.view.state, tablePos);
|
|
145
145
|
var parentWidth = _this.getParentNodeWidth();
|
|
146
|
-
var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos)
|
|
146
|
+
var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos);
|
|
147
147
|
if (useMeasuredWidthForBodiedSyncBlock) {
|
|
148
148
|
// Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
|
|
149
149
|
// value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
|
|
@@ -11,7 +11,6 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
|
11
11
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
12
12
|
var _syncBlock = require("@atlaskit/editor-common/sync-block");
|
|
13
13
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
14
|
var _columnWidth = require("../../transforms/column-width");
|
|
16
15
|
var _nodes = require("../../utils/nodes");
|
|
17
16
|
var _misc = require("../utils/misc");
|
|
@@ -179,7 +178,7 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
|
|
|
179
178
|
// table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
|
|
180
179
|
// parentWidth here so that the scaled colgroup fits within the sync-block
|
|
181
180
|
// container without overflowing.
|
|
182
|
-
var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content)))
|
|
181
|
+
var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content)));
|
|
183
182
|
var BORDER_COLLAPSE_WIDTH_PX = 1;
|
|
184
183
|
var adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
|
|
185
184
|
resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
@@ -80,9 +80,8 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
80
80
|
style: {
|
|
81
81
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
82
82
|
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
|
|
83
|
-
borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
84
|
-
|
|
85
|
-
? "1px solid ".concat(_consts.tableBorderColor) : undefined,
|
|
83
|
+
borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
84
|
+
"1px solid ".concat(_consts.tableBorderColor) : undefined,
|
|
86
85
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
87
86
|
visibility: 'hidden' // Ensure the column is not visible during SSR
|
|
88
87
|
},
|
|
@@ -95,9 +94,8 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
95
94
|
style: {
|
|
96
95
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
97
96
|
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
|
|
98
|
-
borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
99
|
-
|
|
100
|
-
? "1px solid ".concat(_consts.tableBorderColor) : undefined,
|
|
97
|
+
borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
98
|
+
"1px solid ".concat(_consts.tableBorderColor) : undefined,
|
|
101
99
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
102
100
|
visibility: 'visible'
|
|
103
101
|
},
|
|
@@ -70,16 +70,16 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
72
|
var roundedTableCellCornerStyles = function roundedTableCellCornerStyles() {
|
|
73
|
-
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > table {\n\t\t/* Round table corner cells (including merged cells that span to the edge)\n\t\t and their interaction overlays. The data-reaches-* attributes are set by the\n\t\t TableCell node view based on each cell's position + rowspan/colspan. */\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\tborder-bottom-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)");
|
|
73
|
+
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > table {\n\t\t/* Round table corner cells (including merged cells that span to the edge)\n\t\t and their interaction overlays. The data-reaches-* attributes are set by the\n\t\t TableCell node view based on each cell's position + rowspan/colspan. */\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\tborder-bottom-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)");
|
|
74
74
|
};
|
|
75
75
|
var roundedTableInteractionOverlayStyles = function roundedTableInteractionOverlayStyles() {
|
|
76
|
-
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > table {\n\t\t/* Active-cell highlight base properties (replaces activeCellHighlightStyles).\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,\n\t\t so that left/right/top/bottom determine the size instead. */\n\t\ttd.", ".", "::after,\n\t\tth.", ".", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-shadow: ", ";\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tz-index: ", ";\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t/* Normalize selected/hover/danger overlays to the same box model as active-cell.\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */\n\t\ttd.", "::after,\n\t\ttd.", "::after,\n\t\tth.", ".", "::after,\n\t\tth.", ".", "::after,\n\t\tth.", ".", "::after,\n\t\ttd.", ".", "::after {\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t}\n\n\t\t/* Active-cell overlays: clamp outer sides using data-reaches-* attributes.\n\t\t Internal sides keep -1px overlap; true outer edges are clamped to 0. */\n\t\t> tbody
|
|
76
|
+
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > table {\n\t\t/* Active-cell highlight base properties (replaces activeCellHighlightStyles).\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,\n\t\t so that left/right/top/bottom determine the size instead. */\n\t\ttd.", ".", "::after,\n\t\t\tth.", ".", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-shadow: ", ";\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tz-index: ", ";\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t/* Normalize selected/hover/danger overlays to the same box model as active-cell.\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */\n\t\ttd.", "::after,\n\t\t\ttd.", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\ttd.", ".", "::after {\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t}\n\n\t\t/* Active-cell overlays: clamp outer sides using data-reaches-* attributes.\n\t\t Internal sides keep -1px overlap; true outer edges are clamped to 0. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-top].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-top].", "::after {\n\t\t\ttop: 0;\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", "::after {\n\t\t\tleft: 0;\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", "::after {\n\t\t\tright: 0;\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", "::after {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t/* Selected/hover/active overlays: clamp outer left side and draw overlay border. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", " {\n\t\t\tborder-left-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tleft: 0;\n\t\t\t\tborder-left-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Danger/delete overlays: clamp outer left side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", " {\n\t\t\tborder-left-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tleft: 0;\n\t\t\t\tborder-left-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Selected/hover/active overlays: clamp outer right side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", " {\n\t\t\tborder-right-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tright: 0;\n\t\t\t\tborder-right-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Danger/delete overlays: clamp outer right side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", " {\n\t\t\tborder-right-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tright: 0;\n\t\t\t\tborder-right-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Selected/hover/active overlays: clamp outer bottom side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", " {\n\t\t\tborder-bottom-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tborder-bottom-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Danger/delete overlays: clamp outer bottom side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", " {\n\t\t\tborder-bottom-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tborder-bottom-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, "var(--ds-border-selected, #1868DB)", "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)", _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts2.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts2.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts2.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts2.tableBorderDeleteColor);
|
|
77
77
|
};
|
|
78
78
|
var roundedTableNumberedColumnStyles = function roundedTableNumberedColumnStyles() {
|
|
79
|
-
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Numbered columns are separate, so they need their own rounded edge owner. */\n\t.", "[data-number-column='true'] {\n\t\t/* Override the inline/container left border and replace it with one rounded pseudo-border. */\n\t\t> .", "
|
|
79
|
+
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Numbered columns are separate, so they need their own rounded edge owner. */\n\t.", "[data-number-column='true'] {\n\t\t/* Override the inline/container left border and replace it with one rounded pseudo-border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder-left: 0;\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Prevent individual number buttons from drawing a straight left border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".active,\n\t\t\t> .", "\n\t\t\t.", ".active {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t/* When numbered column is present, the visual left edge belongs to the number column widget.\n\t\t Zero out any left-side border-radius on the cell and its overlays/pseudo-borders \u2014\n\t\t but leave right-side radii untouched so right-edge cells still round correctly. */\n\t\t.", " > table > tbody > tr > th[data-reaches-top][data-reaches-left],\n\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: 0;\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom][data-reaches-left],\n\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: 0;\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t/* Preserve rounded numbered-column corners across normal, active, and danger states. */\n\t\t.", ":first-of-type {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ":last-of-type {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":first-of-type,\n\t\t\t.", ".", ":first-of-type,\n\t\t\t.", ".active:first-of-type {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":last-of-type,\n\t\t\t.", ".", ":last-of-type,\n\t\t\t.", ".active:last-of-type {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":first-of-type::after {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":last-of-type::after {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t/* Sticky numbered-column mask also needs the same top-left radius. */\n\t\t.", "\n\t\t\ttr\n\t\t\tth[data-reaches-top][data-reaches-left]::before {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _consts2.tableBorderColor, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, "var(--ds-radius-medium, 6px)");
|
|
80
80
|
};
|
|
81
81
|
var roundedTableStickyHeaderStyles = function roundedTableStickyHeaderStyles() {
|
|
82
|
-
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */\n\t.", "
|
|
82
|
+
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\t> th[data-reaches-left],\n\t\t> td[data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> td[data-reaches-right],\n\t\t> th[data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " .", "::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t.", "[data-number-column='true'] .", " tr th[data-reaches-top][data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " tr.", " th[data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " .", " th[data-reaches-left]::before {\n\t\tborder-top-left-radius: ", ";\n\t\tclip-path: inset(0 0 0 0 round ", " 0 0 0);\n\t\tbox-shadow: none !important;\n\t}\n\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: none !important;\n\t}\n\n\t.", ".", ":has(tr.sticky)\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tbox-shadow: none !important;\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON);
|
|
83
83
|
};
|
|
84
84
|
var roundedTableOverrides = function roundedTableOverrides() {
|
|
85
85
|
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t", "\n\t", "\n\t", "\n"])), roundedTableCellCornerStyles(), roundedTableInteractionOverlayStyles(), roundedTableNumberedColumnStyles(), roundedTableStickyHeaderStyles());
|
|
@@ -123,7 +123,7 @@ class TableComponent extends React.Component {
|
|
|
123
123
|
const tablePos = this.props.getPos();
|
|
124
124
|
const isNested = isTableNested(this.props.view.state, tablePos);
|
|
125
125
|
let parentWidth = this.getParentNodeWidth();
|
|
126
|
-
const useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(this.props.view.state, tablePos)
|
|
126
|
+
const useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(this.props.view.state, tablePos);
|
|
127
127
|
if (useMeasuredWidthForBodiedSyncBlock) {
|
|
128
128
|
// Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
|
|
129
129
|
// value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
|
|
@@ -2,7 +2,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
|
2
2
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
4
4
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import { updateColumnWidths } from '../../transforms/column-width';
|
|
7
6
|
import { getTableWidth } from '../../utils/nodes';
|
|
8
7
|
import { getLayoutSize } from '../utils/misc';
|
|
@@ -165,7 +164,7 @@ export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabl
|
|
|
165
164
|
// table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
|
|
166
165
|
// parentWidth here so that the scaled colgroup fits within the sync-block
|
|
167
166
|
// container without overflowing.
|
|
168
|
-
const isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, `.${BodiedSyncBlockSharedCssClassName.content}`))
|
|
167
|
+
const isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, `.${BodiedSyncBlockSharedCssClassName.content}`));
|
|
169
168
|
const BORDER_COLLAPSE_WIDTH_PX = 1;
|
|
170
169
|
const adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
|
|
171
170
|
resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
@@ -60,9 +60,9 @@ export default class NumberColumn extends Component {
|
|
|
60
60
|
style: {
|
|
61
61
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
62
62
|
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
|
|
63
|
-
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
63
|
+
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ?
|
|
64
64
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
65
|
-
|
|
65
|
+
`1px solid ${tableBorderColor}` : undefined,
|
|
66
66
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
67
67
|
visibility: 'hidden' // Ensure the column is not visible during SSR
|
|
68
68
|
},
|
|
@@ -75,9 +75,9 @@ export default class NumberColumn extends Component {
|
|
|
75
75
|
style: {
|
|
76
76
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
77
77
|
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
|
|
78
|
-
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
78
|
+
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ?
|
|
79
79
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
80
|
-
|
|
80
|
+
`1px solid ${tableBorderColor}` : undefined,
|
|
81
81
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
82
82
|
visibility: 'visible'
|
|
83
83
|
},
|
|
@@ -229,7 +229,7 @@ const roundedTableCellCornerStyles = () => css`
|
|
|
229
229
|
|
|
230
230
|
&::after,
|
|
231
231
|
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
232
|
-
|
|
232
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
233
233
|
border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
234
234
|
}
|
|
235
235
|
}
|
|
@@ -240,7 +240,7 @@ const roundedTableCellCornerStyles = () => css`
|
|
|
240
240
|
|
|
241
241
|
&::after,
|
|
242
242
|
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
243
|
-
|
|
243
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
244
244
|
border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
245
245
|
}
|
|
246
246
|
}
|
|
@@ -251,7 +251,7 @@ const roundedTableCellCornerStyles = () => css`
|
|
|
251
251
|
|
|
252
252
|
&::after,
|
|
253
253
|
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
254
|
-
|
|
254
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
255
255
|
border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
256
256
|
}
|
|
257
257
|
}
|
|
@@ -262,7 +262,7 @@ const roundedTableCellCornerStyles = () => css`
|
|
|
262
262
|
|
|
263
263
|
&::after,
|
|
264
264
|
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
265
|
-
|
|
265
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
266
266
|
border-bottom-right-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
267
267
|
}
|
|
268
268
|
}
|
|
@@ -274,7 +274,7 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
274
274
|
width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,
|
|
275
275
|
so that left/right/top/bottom determine the size instead. */
|
|
276
276
|
td.${ClassName.TABLE_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after,
|
|
277
|
-
|
|
277
|
+
th.${ClassName.TABLE_HEADER_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after {
|
|
278
278
|
border: 1px solid ${"var(--ds-border-selected, #1868DB)"};
|
|
279
279
|
box-shadow: ${"var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"};
|
|
280
280
|
content: '';
|
|
@@ -292,11 +292,11 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
292
292
|
/* Normalize selected/hover/danger overlays to the same box model as active-cell.
|
|
293
293
|
width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */
|
|
294
294
|
td.${ClassName.HOVERED_CELL}::after,
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
295
|
+
td.${ClassName.SELECTED_CELL}::after,
|
|
296
|
+
th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL}::after,
|
|
297
|
+
th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL}::after,
|
|
298
|
+
th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
299
|
+
td.${ClassName.TABLE_CELL}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
300
300
|
left: -1px;
|
|
301
301
|
right: -1px;
|
|
302
302
|
top: -1px;
|
|
@@ -307,33 +307,61 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
307
307
|
|
|
308
308
|
/* Active-cell overlays: clamp outer sides using data-reaches-* attributes.
|
|
309
309
|
Internal sides keep -1px overlap; true outer edges are clamped to 0. */
|
|
310
|
-
> tbody
|
|
311
|
-
|
|
310
|
+
> tbody
|
|
311
|
+
> tr
|
|
312
|
+
> td[data-reaches-top].${ClassName.ACTIVE_CURSOR_CELL}::after,
|
|
313
|
+
> tbody
|
|
314
|
+
> tr
|
|
315
|
+
> th[data-reaches-top].${ClassName.ACTIVE_CURSOR_CELL}::after {
|
|
312
316
|
top: 0;
|
|
313
317
|
}
|
|
314
318
|
|
|
315
|
-
> tbody
|
|
316
|
-
|
|
319
|
+
> tbody
|
|
320
|
+
> tr
|
|
321
|
+
> td[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL}::after,
|
|
322
|
+
> tbody
|
|
323
|
+
> tr
|
|
324
|
+
> th[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL}::after {
|
|
317
325
|
left: 0;
|
|
318
326
|
}
|
|
319
327
|
|
|
320
|
-
> tbody
|
|
321
|
-
|
|
328
|
+
> tbody
|
|
329
|
+
> tr
|
|
330
|
+
> td[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL}::after,
|
|
331
|
+
> tbody
|
|
332
|
+
> tr
|
|
333
|
+
> th[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL}::after {
|
|
322
334
|
right: 0;
|
|
323
335
|
}
|
|
324
336
|
|
|
325
|
-
> tbody
|
|
326
|
-
|
|
337
|
+
> tbody
|
|
338
|
+
> tr
|
|
339
|
+
> td[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL}::after,
|
|
340
|
+
> tbody
|
|
341
|
+
> tr
|
|
342
|
+
> th[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL}::after {
|
|
327
343
|
bottom: 0;
|
|
328
344
|
}
|
|
329
345
|
|
|
330
346
|
/* Selected/hover/active overlays: clamp outer left side and draw overlay border. */
|
|
331
|
-
> tbody
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
347
|
+
> tbody
|
|
348
|
+
> tr
|
|
349
|
+
> td[data-reaches-left].${ClassName.SELECTED_CELL},
|
|
350
|
+
> tbody
|
|
351
|
+
> tr
|
|
352
|
+
> th[data-reaches-left].${ClassName.SELECTED_CELL},
|
|
353
|
+
> tbody
|
|
354
|
+
> tr
|
|
355
|
+
> td[data-reaches-left].${ClassName.HOVERED_CELL},
|
|
356
|
+
> tbody
|
|
357
|
+
> tr
|
|
358
|
+
> th[data-reaches-left].${ClassName.HOVERED_CELL},
|
|
359
|
+
> tbody
|
|
360
|
+
> tr
|
|
361
|
+
> td[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL},
|
|
362
|
+
> tbody
|
|
363
|
+
> tr
|
|
364
|
+
> th[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL} {
|
|
337
365
|
border-left-color: transparent;
|
|
338
366
|
|
|
339
367
|
&::after {
|
|
@@ -343,8 +371,12 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
343
371
|
}
|
|
344
372
|
|
|
345
373
|
/* Danger/delete overlays: clamp outer left side. */
|
|
346
|
-
> tbody
|
|
347
|
-
|
|
374
|
+
> tbody
|
|
375
|
+
> tr
|
|
376
|
+
> td[data-reaches-left].${ClassName.HOVERED_CELL_IN_DANGER},
|
|
377
|
+
> tbody
|
|
378
|
+
> tr
|
|
379
|
+
> th[data-reaches-left].${ClassName.HOVERED_CELL_IN_DANGER} {
|
|
348
380
|
border-left-color: transparent;
|
|
349
381
|
|
|
350
382
|
&::after {
|
|
@@ -354,12 +386,24 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
354
386
|
}
|
|
355
387
|
|
|
356
388
|
/* Selected/hover/active overlays: clamp outer right side. */
|
|
357
|
-
> tbody
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
389
|
+
> tbody
|
|
390
|
+
> tr
|
|
391
|
+
> td[data-reaches-right].${ClassName.SELECTED_CELL},
|
|
392
|
+
> tbody
|
|
393
|
+
> tr
|
|
394
|
+
> th[data-reaches-right].${ClassName.SELECTED_CELL},
|
|
395
|
+
> tbody
|
|
396
|
+
> tr
|
|
397
|
+
> td[data-reaches-right].${ClassName.HOVERED_CELL},
|
|
398
|
+
> tbody
|
|
399
|
+
> tr
|
|
400
|
+
> th[data-reaches-right].${ClassName.HOVERED_CELL},
|
|
401
|
+
> tbody
|
|
402
|
+
> tr
|
|
403
|
+
> td[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL},
|
|
404
|
+
> tbody
|
|
405
|
+
> tr
|
|
406
|
+
> th[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL} {
|
|
363
407
|
border-right-color: transparent;
|
|
364
408
|
|
|
365
409
|
&::after {
|
|
@@ -369,8 +413,12 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
369
413
|
}
|
|
370
414
|
|
|
371
415
|
/* Danger/delete overlays: clamp outer right side. */
|
|
372
|
-
> tbody
|
|
373
|
-
|
|
416
|
+
> tbody
|
|
417
|
+
> tr
|
|
418
|
+
> td[data-reaches-right].${ClassName.HOVERED_CELL_IN_DANGER},
|
|
419
|
+
> tbody
|
|
420
|
+
> tr
|
|
421
|
+
> th[data-reaches-right].${ClassName.HOVERED_CELL_IN_DANGER} {
|
|
374
422
|
border-right-color: transparent;
|
|
375
423
|
|
|
376
424
|
&::after {
|
|
@@ -380,12 +428,24 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
380
428
|
}
|
|
381
429
|
|
|
382
430
|
/* Selected/hover/active overlays: clamp outer bottom side. */
|
|
383
|
-
> tbody
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
431
|
+
> tbody
|
|
432
|
+
> tr
|
|
433
|
+
> td[data-reaches-bottom].${ClassName.SELECTED_CELL},
|
|
434
|
+
> tbody
|
|
435
|
+
> tr
|
|
436
|
+
> th[data-reaches-bottom].${ClassName.SELECTED_CELL},
|
|
437
|
+
> tbody
|
|
438
|
+
> tr
|
|
439
|
+
> td[data-reaches-bottom].${ClassName.HOVERED_CELL},
|
|
440
|
+
> tbody
|
|
441
|
+
> tr
|
|
442
|
+
> th[data-reaches-bottom].${ClassName.HOVERED_CELL},
|
|
443
|
+
> tbody
|
|
444
|
+
> tr
|
|
445
|
+
> td[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL},
|
|
446
|
+
> tbody
|
|
447
|
+
> tr
|
|
448
|
+
> th[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL} {
|
|
389
449
|
border-bottom-color: transparent;
|
|
390
450
|
|
|
391
451
|
&::after {
|
|
@@ -394,8 +454,12 @@ const roundedTableInteractionOverlayStyles = () => css`
|
|
|
394
454
|
}
|
|
395
455
|
|
|
396
456
|
/* Danger/delete overlays: clamp outer bottom side. */
|
|
397
|
-
> tbody
|
|
398
|
-
|
|
457
|
+
> tbody
|
|
458
|
+
> tr
|
|
459
|
+
> td[data-reaches-bottom].${ClassName.HOVERED_CELL_IN_DANGER},
|
|
460
|
+
> tbody
|
|
461
|
+
> tr
|
|
462
|
+
> th[data-reaches-bottom].${ClassName.HOVERED_CELL_IN_DANGER} {
|
|
399
463
|
border-bottom-color: transparent;
|
|
400
464
|
|
|
401
465
|
&::after {
|
|
@@ -408,8 +472,10 @@ const roundedTableNumberedColumnStyles = () => css`
|
|
|
408
472
|
/* Numbered columns are separate, so they need their own rounded edge owner. */
|
|
409
473
|
.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
|
|
410
474
|
/* Override the inline/container left border and replace it with one rounded pseudo-border. */
|
|
411
|
-
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
412
|
-
|
|
475
|
+
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
476
|
+
.${ClassName.NUMBERED_COLUMN},
|
|
477
|
+
> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
|
|
478
|
+
.${ClassName.NUMBERED_COLUMN} {
|
|
413
479
|
position: relative;
|
|
414
480
|
border-left: 0;
|
|
415
481
|
|
|
@@ -429,17 +495,25 @@ const roundedTableNumberedColumnStyles = () => css`
|
|
|
429
495
|
}
|
|
430
496
|
|
|
431
497
|
/* Prevent individual number buttons from drawing a straight left border. */
|
|
432
|
-
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
433
|
-
|
|
498
|
+
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
499
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON},
|
|
500
|
+
> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
|
|
501
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON} {
|
|
434
502
|
border-left-color: transparent;
|
|
435
503
|
}
|
|
436
504
|
|
|
437
|
-
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
505
|
+
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
506
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER},
|
|
507
|
+
> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
|
|
508
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER},
|
|
509
|
+
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
510
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE},
|
|
511
|
+
> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
|
|
512
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE},
|
|
513
|
+
> .${ClassName.ROW_CONTROLS_WRAPPER}
|
|
514
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.active,
|
|
515
|
+
> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
|
|
516
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.active {
|
|
443
517
|
border-left-color: transparent;
|
|
444
518
|
}
|
|
445
519
|
|
|
@@ -447,7 +521,11 @@ const roundedTableNumberedColumnStyles = () => css`
|
|
|
447
521
|
Zero out any left-side border-radius on the cell and its overlays/pseudo-borders —
|
|
448
522
|
but leave right-side radii untouched so right-edge cells still round correctly. */
|
|
449
523
|
.${ClassName.TABLE_NODE_WRAPPER} > table > tbody > tr > th[data-reaches-top][data-reaches-left],
|
|
450
|
-
.${ClassName.TABLE_NODE_WRAPPER}
|
|
524
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
525
|
+
> table
|
|
526
|
+
> tbody
|
|
527
|
+
> tr
|
|
528
|
+
> td[data-reaches-top][data-reaches-left] {
|
|
451
529
|
border-top-left-radius: 0;
|
|
452
530
|
|
|
453
531
|
&::after,
|
|
@@ -456,8 +534,16 @@ const roundedTableNumberedColumnStyles = () => css`
|
|
|
456
534
|
}
|
|
457
535
|
}
|
|
458
536
|
|
|
459
|
-
.${ClassName.TABLE_NODE_WRAPPER}
|
|
460
|
-
|
|
537
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
538
|
+
> table
|
|
539
|
+
> tbody
|
|
540
|
+
> tr
|
|
541
|
+
> th[data-reaches-bottom][data-reaches-left],
|
|
542
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
543
|
+
> table
|
|
544
|
+
> tbody
|
|
545
|
+
> tr
|
|
546
|
+
> td[data-reaches-bottom][data-reaches-left] {
|
|
461
547
|
border-bottom-left-radius: 0;
|
|
462
548
|
|
|
463
549
|
&::after,
|
|
@@ -476,14 +562,14 @@ const roundedTableNumberedColumnStyles = () => css`
|
|
|
476
562
|
}
|
|
477
563
|
|
|
478
564
|
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:first-of-type,
|
|
479
|
-
|
|
480
|
-
|
|
565
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE}:first-of-type,
|
|
566
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.active:first-of-type {
|
|
481
567
|
border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
482
568
|
}
|
|
483
569
|
|
|
484
570
|
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:last-of-type,
|
|
485
|
-
|
|
486
|
-
|
|
571
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE}:last-of-type,
|
|
572
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}.active:last-of-type {
|
|
487
573
|
border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
488
574
|
}
|
|
489
575
|
|
|
@@ -496,15 +582,23 @@ const roundedTableNumberedColumnStyles = () => css`
|
|
|
496
582
|
}
|
|
497
583
|
|
|
498
584
|
/* Sticky numbered-column mask also needs the same top-left radius. */
|
|
499
|
-
.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW}
|
|
585
|
+
.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW}
|
|
586
|
+
tr
|
|
587
|
+
th[data-reaches-top][data-reaches-left]::before {
|
|
500
588
|
border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
501
589
|
}
|
|
502
590
|
}
|
|
503
591
|
`;
|
|
504
592
|
const roundedTableStickyHeaderStyles = () => css`
|
|
505
593
|
/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */
|
|
506
|
-
.${ClassName.TABLE_NODE_WRAPPER}
|
|
507
|
-
|
|
594
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
595
|
+
> table
|
|
596
|
+
> tbody
|
|
597
|
+
> tr.${ClassName.NATIVE_STICKY},
|
|
598
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
599
|
+
> table.${ClassName.TABLE_STICKY}
|
|
600
|
+
> tbody
|
|
601
|
+
> tr.sticky {
|
|
508
602
|
> th[data-reaches-left],
|
|
509
603
|
> td[data-reaches-left] {
|
|
510
604
|
border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
|
|
@@ -538,15 +632,22 @@ const roundedTableStickyHeaderStyles = () => css`
|
|
|
538
632
|
box-shadow: none !important;
|
|
539
633
|
}
|
|
540
634
|
|
|
541
|
-
.${ClassName.TABLE_NODE_WRAPPER}
|
|
542
|
-
|
|
635
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
636
|
+
> table
|
|
637
|
+
> tbody
|
|
638
|
+
> tr.${ClassName.NATIVE_STICKY},
|
|
639
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
640
|
+
> table.${ClassName.TABLE_STICKY}
|
|
641
|
+
> tbody
|
|
642
|
+
> tr.sticky {
|
|
543
643
|
box-shadow: none !important;
|
|
544
644
|
}
|
|
545
645
|
|
|
546
|
-
.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}:has(tr.sticky)
|
|
646
|
+
.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}:has(tr.sticky)
|
|
647
|
+
.${ClassName.NUMBERED_COLUMN}
|
|
648
|
+
.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
|
|
547
649
|
box-shadow: none !important;
|
|
548
650
|
}
|
|
549
|
-
|
|
550
651
|
`;
|
|
551
652
|
const roundedTableOverrides = () => css`
|
|
552
653
|
${roundedTableCellCornerStyles()}
|
|
@@ -137,7 +137,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
137
137
|
var tablePos = _this.props.getPos();
|
|
138
138
|
var isNested = isTableNested(_this.props.view.state, tablePos);
|
|
139
139
|
var parentWidth = _this.getParentNodeWidth();
|
|
140
|
-
var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(_this.props.view.state, tablePos)
|
|
140
|
+
var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(_this.props.view.state, tablePos);
|
|
141
141
|
if (useMeasuredWidthForBodiedSyncBlock) {
|
|
142
142
|
// Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
|
|
143
143
|
// value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
|
|
@@ -5,7 +5,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
|
5
5
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
6
6
|
import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
7
7
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { updateColumnWidths } from '../../transforms/column-width';
|
|
10
9
|
import { getTableWidth } from '../../utils/nodes';
|
|
11
10
|
import { getLayoutSize } from '../utils/misc';
|
|
@@ -171,7 +170,7 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos, api) {
|
|
|
171
170
|
// table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
|
|
172
171
|
// parentWidth here so that the scaled colgroup fits within the sync-block
|
|
173
172
|
// container without overflowing.
|
|
174
|
-
var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(BodiedSyncBlockSharedCssClassName.content)))
|
|
173
|
+
var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(BodiedSyncBlockSharedCssClassName.content)));
|
|
175
174
|
var BORDER_COLLAPSE_WIDTH_PX = 1;
|
|
176
175
|
var adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
|
|
177
176
|
resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
@@ -71,9 +71,8 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
|
|
|
71
71
|
style: {
|
|
72
72
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
73
73
|
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
|
|
74
|
-
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
75
|
-
|
|
76
|
-
? "1px solid ".concat(tableBorderColor) : undefined,
|
|
74
|
+
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
75
|
+
"1px solid ".concat(tableBorderColor) : undefined,
|
|
77
76
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
78
77
|
visibility: 'hidden' // Ensure the column is not visible during SSR
|
|
79
78
|
},
|
|
@@ -86,9 +85,8 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
|
|
|
86
85
|
style: {
|
|
87
86
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
88
87
|
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
|
|
89
|
-
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
90
|
-
|
|
91
|
-
? "1px solid ".concat(tableBorderColor) : undefined,
|
|
88
|
+
borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
89
|
+
"1px solid ".concat(tableBorderColor) : undefined,
|
|
92
90
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
93
91
|
visibility: 'visible'
|
|
94
92
|
},
|
|
@@ -65,16 +65,16 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
65
65
|
}
|
|
66
66
|
};
|
|
67
67
|
var roundedTableCellCornerStyles = function roundedTableCellCornerStyles() {
|
|
68
|
-
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.", " > table {\n\t\t/* Round table corner cells (including merged cells that span to the edge)\n\t\t and their interaction overlays. The data-reaches-* attributes are set by the\n\t\t TableCell node view based on each cell's position + rowspan/colspan. */\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\tborder-bottom-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)");
|
|
68
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.", " > table {\n\t\t/* Round table corner cells (including merged cells that span to the edge)\n\t\t and their interaction overlays. The data-reaches-* attributes are set by the\n\t\t TableCell node view based on each cell's position + rowspan/colspan. */\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\tborder-bottom-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)");
|
|
69
69
|
};
|
|
70
70
|
var roundedTableInteractionOverlayStyles = function roundedTableInteractionOverlayStyles() {
|
|
71
|
-
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.", " > table {\n\t\t/* Active-cell highlight base properties (replaces activeCellHighlightStyles).\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,\n\t\t so that left/right/top/bottom determine the size instead. */\n\t\ttd.", ".", "::after,\n\t\tth.", ".", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-shadow: ", ";\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tz-index: ", ";\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t/* Normalize selected/hover/danger overlays to the same box model as active-cell.\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */\n\t\ttd.", "::after,\n\t\ttd.", "::after,\n\t\tth.", ".", "::after,\n\t\tth.", ".", "::after,\n\t\tth.", ".", "::after,\n\t\ttd.", ".", "::after {\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t}\n\n\t\t/* Active-cell overlays: clamp outer sides using data-reaches-* attributes.\n\t\t Internal sides keep -1px overlap; true outer edges are clamped to 0. */\n\t\t> tbody
|
|
71
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.", " > table {\n\t\t/* Active-cell highlight base properties (replaces activeCellHighlightStyles).\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,\n\t\t so that left/right/top/bottom determine the size instead. */\n\t\ttd.", ".", "::after,\n\t\t\tth.", ".", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-shadow: ", ";\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tz-index: ", ";\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t/* Normalize selected/hover/danger overlays to the same box model as active-cell.\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */\n\t\ttd.", "::after,\n\t\t\ttd.", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\ttd.", ".", "::after {\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t}\n\n\t\t/* Active-cell overlays: clamp outer sides using data-reaches-* attributes.\n\t\t Internal sides keep -1px overlap; true outer edges are clamped to 0. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-top].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-top].", "::after {\n\t\t\ttop: 0;\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", "::after {\n\t\t\tleft: 0;\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", "::after {\n\t\t\tright: 0;\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", "::after,\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", "::after {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t/* Selected/hover/active overlays: clamp outer left side and draw overlay border. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", " {\n\t\t\tborder-left-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tleft: 0;\n\t\t\t\tborder-left-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Danger/delete overlays: clamp outer left side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-left].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-left].", " {\n\t\t\tborder-left-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tleft: 0;\n\t\t\t\tborder-left-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Selected/hover/active overlays: clamp outer right side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", " {\n\t\t\tborder-right-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tright: 0;\n\t\t\t\tborder-right-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Danger/delete overlays: clamp outer right side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-right].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-right].", " {\n\t\t\tborder-right-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tright: 0;\n\t\t\t\tborder-right-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Selected/hover/active overlays: clamp outer bottom side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", " {\n\t\t\tborder-bottom-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tborder-bottom-color: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Danger/delete overlays: clamp outer bottom side. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom].", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom].", " {\n\t\t\tborder-bottom-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tborder-bottom-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.TABLE_HEADER_CELL, ClassName.ACTIVE_CURSOR_CELL, "var(--ds-border-selected, #1868DB)", "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)", akEditorSmallZIndex, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.SELECTED_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, ClassName.SELECTED_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, ClassName.SELECTED_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor);
|
|
72
72
|
};
|
|
73
73
|
var roundedTableNumberedColumnStyles = function roundedTableNumberedColumnStyles() {
|
|
74
|
-
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t/* Numbered columns are separate, so they need their own rounded edge owner. */\n\t.", "[data-number-column='true'] {\n\t\t/* Override the inline/container left border and replace it with one rounded pseudo-border. */\n\t\t> .", "
|
|
74
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t/* Numbered columns are separate, so they need their own rounded edge owner. */\n\t.", "[data-number-column='true'] {\n\t\t/* Override the inline/container left border and replace it with one rounded pseudo-border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder-left: 0;\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Prevent individual number buttons from drawing a straight left border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".active,\n\t\t\t> .", "\n\t\t\t.", ".active {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t/* When numbered column is present, the visual left edge belongs to the number column widget.\n\t\t Zero out any left-side border-radius on the cell and its overlays/pseudo-borders \u2014\n\t\t but leave right-side radii untouched so right-edge cells still round correctly. */\n\t\t.", " > table > tbody > tr > th[data-reaches-top][data-reaches-left],\n\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: 0;\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom][data-reaches-left],\n\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: 0;\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t/* Preserve rounded numbered-column corners across normal, active, and danger states. */\n\t\t.", ":first-of-type {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ":last-of-type {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":first-of-type,\n\t\t\t.", ".", ":first-of-type,\n\t\t\t.", ".active:first-of-type {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":last-of-type,\n\t\t\t.", ".", ":last-of-type,\n\t\t\t.", ".active:last-of-type {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":first-of-type::after {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":last-of-type::after {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t/* Sticky numbered-column mask also needs the same top-left radius. */\n\t\t.", "\n\t\t\ttr\n\t\t\tth[data-reaches-top][data-reaches-left]::before {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableBorderColor, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", ClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-medium, 6px)", ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-medium, 6px)", ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, "var(--ds-radius-medium, 6px)");
|
|
75
75
|
};
|
|
76
76
|
var roundedTableStickyHeaderStyles = function roundedTableStickyHeaderStyles() {
|
|
77
|
-
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */\n\t.", "
|
|
77
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\t> th[data-reaches-left],\n\t\t> td[data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> td[data-reaches-right],\n\t\t> th[data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " .", "::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t.", "[data-number-column='true'] .", " tr th[data-reaches-top][data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " tr.", " th[data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " .", " th[data-reaches-left]::before {\n\t\tborder-top-left-radius: ", ";\n\t\tclip-path: inset(0 0 0 0 round ", " 0 0 0);\n\t\tbox-shadow: none !important;\n\t}\n\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: none !important;\n\t}\n\n\t.", ".", ":has(tr.sticky)\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tbox-shadow: none !important;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY_ACTIVE, "var(--ds-radius-medium, 6px)", "var(--ds-radius-medium, 6px)", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON);
|
|
78
78
|
};
|
|
79
79
|
var roundedTableOverrides = function roundedTableOverrides() {
|
|
80
80
|
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t", "\n\t", "\n\t", "\n\t", "\n"])), roundedTableCellCornerStyles(), roundedTableInteractionOverlayStyles(), roundedTableNumberedColumnStyles(), roundedTableStickyHeaderStyles());
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "22.4.
|
|
3
|
+
"version": "22.4.4",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
35
35
|
"@atlaskit/editor-plugin-accessibility-utils": "^10.1.0",
|
|
36
36
|
"@atlaskit/editor-plugin-analytics": "^10.0.0",
|
|
37
|
-
"@atlaskit/editor-plugin-batch-attribute-updates": "^10.
|
|
37
|
+
"@atlaskit/editor-plugin-batch-attribute-updates": "^10.1.0",
|
|
38
38
|
"@atlaskit/editor-plugin-content-insertion": "^10.1.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-viewmode": "^12.1.0",
|
|
40
40
|
"@atlaskit/editor-plugin-extension": "13.5.0",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"@atlaskit/editor-plugin-user-intent": "^8.2.0",
|
|
48
48
|
"@atlaskit/editor-plugin-width": "^11.1.0",
|
|
49
49
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
50
|
-
"@atlaskit/editor-shared-styles": "^3.
|
|
51
|
-
"@atlaskit/editor-tables": "^2.
|
|
52
|
-
"@atlaskit/editor-toolbar": "^1.
|
|
53
|
-
"@atlaskit/editor-ui-control-model": "^1.
|
|
50
|
+
"@atlaskit/editor-shared-styles": "^3.11.0",
|
|
51
|
+
"@atlaskit/editor-tables": "^2.10.0",
|
|
52
|
+
"@atlaskit/editor-toolbar": "^1.4.0",
|
|
53
|
+
"@atlaskit/editor-ui-control-model": "^1.2.0",
|
|
54
54
|
"@atlaskit/icon": "^34.5.0",
|
|
55
55
|
"@atlaskit/insm": "^0.4.0",
|
|
56
56
|
"@atlaskit/menu": "^8.5.0",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
60
60
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
|
61
61
|
"@atlaskit/primitives": "^19.0.0",
|
|
62
|
-
"@atlaskit/tmp-editor-statsig": "^80.
|
|
62
|
+
"@atlaskit/tmp-editor-statsig": "^80.3.0",
|
|
63
63
|
"@atlaskit/toggle": "^15.6.0",
|
|
64
64
|
"@atlaskit/tokens": "^13.0.0",
|
|
65
65
|
"@atlaskit/tooltip": "^22.2.0",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"uuid": "^3.1.0"
|
|
75
75
|
},
|
|
76
76
|
"peerDependencies": {
|
|
77
|
-
"@atlaskit/editor-common": "^114.
|
|
77
|
+
"@atlaskit/editor-common": "^114.32.0",
|
|
78
78
|
"react": "^18.2.0",
|
|
79
79
|
"react-dom": "^18.2.0",
|
|
80
80
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -166,9 +166,6 @@
|
|
|
166
166
|
},
|
|
167
167
|
"platform_editor_max_width_default_width": {
|
|
168
168
|
"type": "boolean"
|
|
169
|
-
},
|
|
170
|
-
"platform_synced_block_patch_9": {
|
|
171
|
-
"type": "boolean"
|
|
172
169
|
}
|
|
173
170
|
},
|
|
174
171
|
"devDependencies": {
|