@atlaskit/editor-plugin-table 26.0.5 → 26.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/ui/common-styles.js +2 -2
- package/dist/cjs/ui/rounded-table-styles.js +4 -5
- package/dist/es2019/ui/common-styles.js +2 -2
- package/dist/es2019/ui/rounded-table-styles.js +47 -48
- package/dist/esm/ui/common-styles.js +2 -2
- package/dist/esm/ui/rounded-table-styles.js +4 -5
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 26.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`7eef7404cacac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7eef7404cacac) -
|
|
8
|
+
Clean up feature gate `platform_editor_table_q4_patch_1`
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 26.0.5
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -76,9 +76,9 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
76
76
|
};
|
|
77
77
|
var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedStyle(props) {
|
|
78
78
|
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", "\n\n\t", ";\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px\n\t\t\t", ";\n\t\tborder-right: 0 none;\n\t\t", "/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid\n\t\t\t", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* use :before element to hide table row insert dots when legacy table sticky header is activated */\n\t", "\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\t", "\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\n\t\tth.", "::after {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tposition: absolute;\n\t\t\tright: 0px;\n\t\t\ttop: 0px;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tdisplay: inline-block;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid transparent;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(tr.", ")::before {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t", "\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", " tr.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", " 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t.", "\n\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t", "\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\t", "\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " > .", " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", ";\n\t\theight: ", ";\n\t\tmargin-left: ", ";\n\t\t", "\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-top: 1px solid ", ";\n\t}\n\n\t.ak-editor-selected-node .", "[data-number-column=\"true\"]:not(.", ") .", " tr:first-of-type th:first-of-type {\n\t\t/* Recolour the number-column corner mask to match the selected cells. Keep this identical\n\t\t to the .selectedCell ::before rule below \u2014 never set margin-top (the base negative\n\t\t margin aligns the mask) or radius (rounded generically by data-reaches-* rules). */\n\t\t&::before {\n\t\t\toutline: none;\n\t\t\tborder-left-color: ", ";\n\t\t\t", "\n\t\t\tborder-top-color: ", ";\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\t", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\t", "\n\t}\n\t.", "[data-number-column=\"true\"].", ".", " .", " tr:first-of-type th:first-of-type::before, .", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t", "\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n"])), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)(),
|
|
79
|
-
// Only block getSelectionStyles when our replacement (gated by q4
|
|
79
|
+
// Only block getSelectionStyles when our replacement (gated by q4) owns the
|
|
80
80
|
// decoration, so node selection is never left unstyled.
|
|
81
|
-
(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
81
|
+
(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts.akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts.akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts.akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts.akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts3.tableCellBackgroundColor, _consts3.tableBorderColor, _consts3.tableBorderColor, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts3.stickyRowOffsetTop, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts3.stickyRowOffsetTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(_editorSharedStyles.akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(_consts3.tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t which would otherwise leave it the default colour (.active recolours the\n\t\t\t rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(_consts3.tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(_consts3.tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts3.tableToolbarSize, _consts3.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts3.tableToolbarSize, _consts3.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts3.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts3.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts3.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _consts3.stickyHeaderBorderBottomWidth, _consts3.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, (0, _expValEquals.expValEquals)('platform_editor_table_col_insert', 'isEnabled', true) ? // Mask geometry mirrors the drag-handle wrapper geometry from
|
|
82
82
|
// editor-plugin-block-controls/src/ui/drag-handle.tsx
|
|
83
83
|
// (`buttonWrapperStyles`):
|
|
84
84
|
// height = paddingTop (=calc(space.400 - 1px)) + paddingBottom (=space.200) + DRAG_HANDLE_HEIGHT
|
|
@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
12
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
14
13
|
var _types = require("../types");
|
|
15
14
|
var _consts = require("./consts");
|
|
@@ -53,14 +52,14 @@ var roundedTableStickyHeaderCornerMaskStyles = function roundedTableStickyHeader
|
|
|
53
52
|
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), _types.TableCssClassName.TABLE_CORNER_MASK, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts.nativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_CORNER_MASK, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_4', 'isEnabled', true) ? "".concat(_types.TableCssClassName.NATIVE_STICKY, ".").concat(_types.TableCssClassName.NATIVE_STICKY_ACTIVE) : _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK);
|
|
54
53
|
};
|
|
55
54
|
var roundedTableStickyHeaderOverlayStyles = function roundedTableStickyHeaderOverlayStyles() {
|
|
56
|
-
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, (0,
|
|
55
|
+
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, (0, _react.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* Node-selected (ak-editor-selected-node) sticky header: the pinned row leaves the table's\n\t\t\t\t rounded overlay behind, so recolour its painted top edge to the selected colour too. */\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr.", ".", "\n\t\t\t> th.", "[data-reaches-top]::after,\n\t\t\t.", ".", "\n\t\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]::after {\n\t\t\tborder-top-color: ", ";\n\t\t}\n\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderSelectedColor));
|
|
57
56
|
};
|
|
58
57
|
var roundedTableStickyHeaderShadowStyles = function roundedTableStickyHeaderShadowStyles() {
|
|
59
|
-
return (0, _react.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Native sticky row */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t/* Legacy sticky row */\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: inset 0 -1px ", " !important;\n\t}\n\n\t/*\n\t\tBox-shadow below active sticky header.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", " {\n\t\tbox-shadow:\n\t\t\tinset 0 -1px ", ",\n\t\t\t0 6px 4px -4px ", " !important;\n\t}\n\n\t/*\n\t\tSticky headers leave the table's rounded outer overlay behind, so make the\n\t\treserved 1px top-border slot visible on the pinned row.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-top] {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/*\n\t\tRestore legacy sticky corner side borders after the row is pinned outside the\n\t\ttable's outer overlay. (Pinned row top edge is painted by the cell ::after\n\t\toverlay in roundedTableStickyHeaderOverlayStyles.)\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-left],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-left] {\n\t\tborder-left-color: ", ";\n\t}\n\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-right],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-right] {\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\t/*\n\t\tPaint the legacy sticky bottom edge on cells so it aligns under display: grid.\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", " {\n\t\tborder-bottom: 1px solid ", ";\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\n\t", "\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0,
|
|
58
|
+
return (0, _react.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Native sticky row */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t/* Legacy sticky row */\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: inset 0 -1px ", " !important;\n\t}\n\n\t/*\n\t\tBox-shadow below active sticky header.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", " {\n\t\tbox-shadow:\n\t\t\tinset 0 -1px ", ",\n\t\t\t0 6px 4px -4px ", " !important;\n\t}\n\n\t/*\n\t\tSticky headers leave the table's rounded outer overlay behind, so make the\n\t\treserved 1px top-border slot visible on the pinned row.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-top] {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/*\n\t\tRestore legacy sticky corner side borders after the row is pinned outside the\n\t\ttable's outer overlay. (Pinned row top edge is painted by the cell ::after\n\t\toverlay in roundedTableStickyHeaderOverlayStyles.)\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-left],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-left] {\n\t\tborder-left-color: ", ";\n\t}\n\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-right],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-right] {\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\t/*\n\t\tPaint the legacy sticky bottom edge on cells so it aligns under display: grid.\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", " {\n\t\tborder-bottom: 1px solid ", ";\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\n\t", "\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* Node-selected (ak-editor-selected-node) sticky header: recolour the bottom-edge\n\t\t\t\t shadow to the selected colour so it matches the rest of the selection. */\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr.", ",\n\t\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table.", "\n\t\t\t> tbody\n\t\t\t> tr.sticky {\n\t\t\tbox-shadow: inset 0 -1px ", " !important;\n\t\t}\n\n\t\t/* Active (pinned) variant keeps its drop shadow but recolours the bottom border. */\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr.", ".", " {\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 -1px ", ",\n\t\t\t\t0 6px 4px -4px ", " !important;\n\t\t}\n\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _consts.tableBorderSelectedColor, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts.tableBorderSelectedColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)"));
|
|
60
59
|
};
|
|
61
60
|
var roundedTableOverrides = exports.roundedTableOverrides = function roundedTableOverrides() {
|
|
62
|
-
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"])),
|
|
61
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"])),
|
|
63
62
|
// Base corner radius is emitted from the SSR-rendered EditorContentContainer
|
|
64
63
|
// (tableRoundedCornerStyles in editor-core); only the interaction overlays remain here.
|
|
65
|
-
roundedTableCellCornerInteractionOverlayStyles()
|
|
64
|
+
roundedTableCellCornerInteractionOverlayStyles(), roundedTableInteractionOverlayStyles(), roundedTableSelectedNodeStyles(), roundedTableNumberedColumnStyles(), roundedTableStickyHeaderCellCornerStyles(), roundedTableStickyHeaderNumberColumnStyles(), roundedTableStickyHeaderCornerMaskStyles(), roundedTableStickyHeaderOverlayStyles(), roundedTableStickyHeaderShadowStyles());
|
|
66
65
|
};
|
|
@@ -222,9 +222,9 @@ const baseTableStylesWithoutSharedStyle = props => css`
|
|
|
222
222
|
${insertLine()};
|
|
223
223
|
${resizeHandle()};
|
|
224
224
|
${
|
|
225
|
-
// Only block getSelectionStyles when our replacement (gated by q4
|
|
225
|
+
// Only block getSelectionStyles when our replacement (gated by q4) owns the
|
|
226
226
|
// decoration, so node selection is never left unstyled.
|
|
227
|
-
expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
227
|
+
expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles};
|
|
228
228
|
${rangeSelectionStylesForFakeBorders};
|
|
229
229
|
${viewModeSortStyles()};
|
|
230
230
|
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
5
|
import { tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
6
6
|
import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
8
|
import { TableCssClassName as ClassName } from '../types';
|
|
10
9
|
import { nativeStickyHeaderZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellSelectedColor } from './consts';
|
|
@@ -577,24 +576,24 @@ const roundedTableStickyHeaderOverlayStyles = () => css`
|
|
|
577
576
|
border-left-color: transparent;
|
|
578
577
|
}
|
|
579
578
|
|
|
580
|
-
${
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
579
|
+
${css`
|
|
580
|
+
/* Node-selected (ak-editor-selected-node) sticky header: the pinned row leaves the table's
|
|
581
|
+
rounded overlay behind, so recolour its painted top edge to the selected colour too. */
|
|
582
|
+
.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName}
|
|
583
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
584
|
+
> table
|
|
585
|
+
> tbody
|
|
586
|
+
> tr.${ClassName.NATIVE_STICKY}.${ClassName.NATIVE_STICKY_ACTIVE}
|
|
587
|
+
> th.${ClassName.TABLE_HEADER_CELL}[data-reaches-top]::after,
|
|
588
|
+
.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName}
|
|
589
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
590
|
+
> table
|
|
591
|
+
> tbody
|
|
592
|
+
> tr.${ClassName.NATIVE_STICKY}.${ClassName.NATIVE_STICKY_ACTIVE}
|
|
593
|
+
> td.${ClassName.TABLE_CELL}[data-reaches-top]::after {
|
|
594
|
+
border-top-color: ${tableBorderSelectedColor};
|
|
595
|
+
}
|
|
596
|
+
`}
|
|
598
597
|
`;
|
|
599
598
|
const roundedTableStickyHeaderShadowStyles = () => css`
|
|
600
599
|
/* Native sticky row */
|
|
@@ -702,41 +701,41 @@ const roundedTableStickyHeaderShadowStyles = () => css`
|
|
|
702
701
|
box-shadow: none !important;
|
|
703
702
|
}
|
|
704
703
|
|
|
705
|
-
${
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
704
|
+
${css`
|
|
705
|
+
/* Node-selected (ak-editor-selected-node) sticky header: recolour the bottom-edge
|
|
706
|
+
shadow to the selected colour so it matches the rest of the selection. */
|
|
707
|
+
.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName}
|
|
708
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
709
|
+
> table
|
|
710
|
+
> tbody
|
|
711
|
+
> tr.${ClassName.NATIVE_STICKY},
|
|
712
|
+
.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName}
|
|
713
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
714
|
+
> table.${ClassName.TABLE_STICKY}
|
|
715
|
+
> tbody
|
|
716
|
+
> tr.sticky {
|
|
717
|
+
box-shadow: inset 0 -1px ${tableBorderSelectedColor} !important;
|
|
718
|
+
}
|
|
720
719
|
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
720
|
+
/* Active (pinned) variant keeps its drop shadow but recolours the bottom border. */
|
|
721
|
+
.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName}
|
|
722
|
+
.${ClassName.TABLE_NODE_WRAPPER}
|
|
723
|
+
> table
|
|
724
|
+
> tbody
|
|
725
|
+
> tr.${ClassName.NATIVE_STICKY}.${ClassName.NATIVE_STICKY_ACTIVE} {
|
|
726
|
+
box-shadow:
|
|
727
|
+
inset 0 -1px ${tableBorderSelectedColor},
|
|
728
|
+
0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} !important;
|
|
729
|
+
}
|
|
730
|
+
`}
|
|
732
731
|
`;
|
|
733
732
|
export const roundedTableOverrides = () => css`
|
|
734
|
-
${
|
|
733
|
+
${
|
|
735
734
|
// Base corner radius is emitted from the SSR-rendered EditorContentContainer
|
|
736
735
|
// (tableRoundedCornerStyles in editor-core); only the interaction overlays remain here.
|
|
737
|
-
roundedTableCellCornerInteractionOverlayStyles()
|
|
736
|
+
roundedTableCellCornerInteractionOverlayStyles()}
|
|
738
737
|
${roundedTableInteractionOverlayStyles()}
|
|
739
|
-
${
|
|
738
|
+
${roundedTableSelectedNodeStyles()}
|
|
740
739
|
${roundedTableNumberedColumnStyles()}
|
|
741
740
|
${roundedTableStickyHeaderCellCornerStyles()}
|
|
742
741
|
${roundedTableStickyHeaderNumberColumnStyles()}
|
|
@@ -71,9 +71,9 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
71
71
|
};
|
|
72
72
|
var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedStyle(props) {
|
|
73
73
|
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", "\n\n\t", ";\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px\n\t\t\t", ";\n\t\tborder-right: 0 none;\n\t\t", "/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid\n\t\t\t", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* use :before element to hide table row insert dots when legacy table sticky header is activated */\n\t", "\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\t", "\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\n\t\tth.", "::after {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tposition: absolute;\n\t\t\tright: 0px;\n\t\t\ttop: 0px;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tdisplay: inline-block;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid transparent;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(tr.", ")::before {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t", "\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", " tr.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", " 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t.", "\n\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t", "\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\t", "\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " > .", " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", ";\n\t\theight: ", ";\n\t\tmargin-left: ", ";\n\t\t", "\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-top: 1px solid ", ";\n\t}\n\n\t.ak-editor-selected-node .", "[data-number-column=\"true\"]:not(.", ") .", " tr:first-of-type th:first-of-type {\n\t\t/* Recolour the number-column corner mask to match the selected cells. Keep this identical\n\t\t to the .selectedCell ::before rule below \u2014 never set margin-top (the base negative\n\t\t margin aligns the mask) or radius (rounded generically by data-reaches-* rules). */\n\t\t&::before {\n\t\t\toutline: none;\n\t\t\tborder-left-color: ", ";\n\t\t\t", "\n\t\t\tborder-top-color: ", ";\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\t", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\t", "\n\t}\n\t.", "[data-number-column=\"true\"].", ".", " .", " tr:first-of-type th:first-of-type::before, .", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t", "\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n"])), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(),
|
|
74
|
-
// Only block getSelectionStyles when our replacement (gated by q4
|
|
74
|
+
// Only block getSelectionStyles when our replacement (gated by q4) owns the
|
|
75
75
|
// decoration, so node selection is never left unstyled.
|
|
76
|
-
expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)
|
|
76
|
+
expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t which would otherwise leave it the default colour (.active recolours the\n\t\t\t rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(ClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, ClassName.TABLE_STICKY, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.NESTED_TABLE_WITH_CONTROLS, ClassName.NESTED_TABLE_WITH_CONTROLS, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, expValEquals('platform_editor_table_col_insert', 'isEnabled', true) ? // Mask geometry mirrors the drag-handle wrapper geometry from
|
|
77
77
|
// editor-plugin-block-controls/src/ui/drag-handle.tsx
|
|
78
78
|
// (`buttonWrapperStyles`):
|
|
79
79
|
// height = paddingTop (=calc(space.400 - 1px)) + paddingBottom (=space.200) + DRAG_HANDLE_HEIGHT
|
|
@@ -6,7 +6,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
6
6
|
import { css } from '@emotion/react';
|
|
7
7
|
import { tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
8
8
|
import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
10
|
import { TableCssClassName as ClassName } from '../types';
|
|
12
11
|
import { nativeStickyHeaderZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellSelectedColor } from './consts';
|
|
@@ -47,14 +46,14 @@ var roundedTableStickyHeaderCornerMaskStyles = function roundedTableStickyHeader
|
|
|
47
46
|
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), ClassName.TABLE_CORNER_MASK, tableMarginTop, "var(--ds-surface, #FFFFFF)", nativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_CORNER_MASK, akEditorTableNumberColumnWidth, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, expValEquals('platform_editor_table_q4_patch_4', 'isEnabled', true) ? "".concat(ClassName.NATIVE_STICKY, ".").concat(ClassName.NATIVE_STICKY_ACTIVE) : ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK);
|
|
48
47
|
};
|
|
49
48
|
var roundedTableStickyHeaderOverlayStyles = function roundedTableStickyHeaderOverlayStyles() {
|
|
50
|
-
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_HEADER_CELL,
|
|
49
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_HEADER_CELL, css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t\t/* Node-selected (ak-editor-selected-node) sticky header: the pinned row leaves the table's\n\t\t\t\t rounded overlay behind, so recolour its painted top edge to the selected colour too. */\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr.", ".", "\n\t\t\t> th.", "[data-reaches-top]::after,\n\t\t\t.", ".", "\n\t\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]::after {\n\t\t\tborder-top-color: ", ";\n\t\t}\n\t"])), ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, tableBorderSelectedColor));
|
|
51
50
|
};
|
|
52
51
|
var roundedTableStickyHeaderShadowStyles = function roundedTableStickyHeaderShadowStyles() {
|
|
53
|
-
return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t/* Native sticky row */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t/* Legacy sticky row */\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: inset 0 -1px ", " !important;\n\t}\n\n\t/*\n\t\tBox-shadow below active sticky header.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", " {\n\t\tbox-shadow:\n\t\t\tinset 0 -1px ", ",\n\t\t\t0 6px 4px -4px ", " !important;\n\t}\n\n\t/*\n\t\tSticky headers leave the table's rounded outer overlay behind, so make the\n\t\treserved 1px top-border slot visible on the pinned row.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-top] {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/*\n\t\tRestore legacy sticky corner side borders after the row is pinned outside the\n\t\ttable's outer overlay. (Pinned row top edge is painted by the cell ::after\n\t\toverlay in roundedTableStickyHeaderOverlayStyles.)\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-left],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-left] {\n\t\tborder-left-color: ", ";\n\t}\n\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-right],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-right] {\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\t/*\n\t\tPaint the legacy sticky bottom edge on cells so it aligns under display: grid.\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", " {\n\t\tborder-bottom: 1px solid ", ";\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\n\t", "\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON,
|
|
52
|
+
return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t/* Native sticky row */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t/* Legacy sticky row */\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: inset 0 -1px ", " !important;\n\t}\n\n\t/*\n\t\tBox-shadow below active sticky header.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", " {\n\t\tbox-shadow:\n\t\t\tinset 0 -1px ", ",\n\t\t\t0 6px 4px -4px ", " !important;\n\t}\n\n\t/*\n\t\tSticky headers leave the table's rounded outer overlay behind, so make the\n\t\treserved 1px top-border slot visible on the pinned row.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-top] {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/*\n\t\tRestore legacy sticky corner side borders after the row is pinned outside the\n\t\ttable's outer overlay. (Pinned row top edge is painted by the cell ::after\n\t\toverlay in roundedTableStickyHeaderOverlayStyles.)\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-left],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-left] {\n\t\tborder-left-color: ", ";\n\t}\n\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-right],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-right] {\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\t/*\n\t\tPaint the legacy sticky bottom edge on cells so it aligns under display: grid.\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", " {\n\t\tborder-bottom: 1px solid ", ";\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\n\t", "\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t/* Node-selected (ak-editor-selected-node) sticky header: recolour the bottom-edge\n\t\t\t\t shadow to the selected colour so it matches the rest of the selection. */\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr.", ",\n\t\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table.", "\n\t\t\t> tbody\n\t\t\t> tr.sticky {\n\t\t\tbox-shadow: inset 0 -1px ", " !important;\n\t\t}\n\n\t\t/* Active (pinned) variant keeps its drop shadow but recolours the bottom border. */\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr.", ".", " {\n\t\t\tbox-shadow:\n\t\t\t\tinset 0 -1px ", ",\n\t\t\t\t0 6px 4px -4px ", " !important;\n\t\t}\n\t"])), ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, tableBorderSelectedColor, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, tableBorderSelectedColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)"));
|
|
54
53
|
};
|
|
55
54
|
export var roundedTableOverrides = function roundedTableOverrides() {
|
|
56
|
-
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"])),
|
|
55
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"])),
|
|
57
56
|
// Base corner radius is emitted from the SSR-rendered EditorContentContainer
|
|
58
57
|
// (tableRoundedCornerStyles in editor-core); only the interaction overlays remain here.
|
|
59
|
-
roundedTableCellCornerInteractionOverlayStyles()
|
|
58
|
+
roundedTableCellCornerInteractionOverlayStyles(), roundedTableInteractionOverlayStyles(), roundedTableSelectedNodeStyles(), roundedTableNumberedColumnStyles(), roundedTableStickyHeaderCellCornerStyles(), roundedTableStickyHeaderNumberColumnStyles(), roundedTableStickyHeaderCornerMaskStyles(), roundedTableStickyHeaderOverlayStyles(), roundedTableStickyHeaderShadowStyles());
|
|
60
59
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "26.0.
|
|
3
|
+
"version": "26.0.6",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"uuid": "^3.1.0"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
|
-
"@atlaskit/editor-common": "^118.
|
|
71
|
+
"@atlaskit/editor-common": "^118.5.0",
|
|
72
72
|
"react": "^18.2.0 || ^19.2.0",
|
|
73
73
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
74
74
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -122,9 +122,6 @@
|
|
|
122
122
|
"platform_editor_table_height_analytics_event": {
|
|
123
123
|
"type": "boolean"
|
|
124
124
|
},
|
|
125
|
-
"platform_editor_table_q4_patch_1": {
|
|
126
|
-
"type": "boolean"
|
|
127
|
-
},
|
|
128
125
|
"platform_editor_col_insert_patch_1": {
|
|
129
126
|
"type": "boolean"
|
|
130
127
|
},
|