@atlaskit/editor-plugin-table 23.4.3 → 24.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/dist/cjs/nodeviews/TableCell.js +4 -27
- package/dist/cjs/nodeviews/TableComponent.js +1 -1
- package/dist/cjs/nodeviews/rounded-table-edges.js +168 -0
- package/dist/cjs/nodeviews/table.js +17 -68
- package/dist/cjs/pm-plugins/table-resizing/utils/dom.js +16 -1
- package/dist/cjs/ui/FloatingContextualButton/styles.js +5 -2
- package/dist/cjs/ui/common-styles.js +1 -1
- package/dist/es2019/nodeviews/TableCell.js +4 -27
- package/dist/es2019/nodeviews/TableComponent.js +2 -2
- package/dist/es2019/nodeviews/rounded-table-edges.js +150 -0
- package/dist/es2019/nodeviews/table.js +15 -62
- package/dist/es2019/pm-plugins/table-resizing/utils/dom.js +15 -0
- package/dist/es2019/ui/FloatingContextualButton/styles.js +5 -2
- package/dist/es2019/ui/common-styles.js +14 -0
- package/dist/esm/nodeviews/TableCell.js +4 -27
- package/dist/esm/nodeviews/TableComponent.js +2 -2
- package/dist/esm/nodeviews/rounded-table-edges.js +161 -0
- package/dist/esm/nodeviews/table.js +17 -68
- package/dist/esm/pm-plugins/table-resizing/utils/dom.js +15 -0
- package/dist/esm/ui/FloatingContextualButton/styles.js +5 -2
- package/dist/esm/ui/common-styles.js +1 -1
- package/dist/types/nodeviews/TableCell.d.ts +0 -5
- package/dist/types/nodeviews/rounded-table-edges.d.ts +26 -0
- package/dist/types/nodeviews/table.d.ts +1 -2
- package/dist/types/pm-plugins/table-resizing/utils/dom.d.ts +4 -0
- package/package.json +38 -46
|
@@ -72,7 +72,7 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
74
|
var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedStyle(props) {
|
|
75
|
-
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.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\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/* 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: calc(", " - 5);\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\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\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(.", " ", ")\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\n .", " .", " {\n\t\theight: 0; /* stop overflow flash & set correct height in update-overflow-shadows.ts */\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\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\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: ", "\n\t\t\t2px;\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\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\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\tmargin-top: ", ";\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\t", "\n\n\t\t", "\n\t}\n\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\t", "\n\t\tbackground: ", ";\n\t}\n\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)(), 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)", _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.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts3.tableToolbarSize, _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, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts3.resizeHandlerAreaWidth - _consts3.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts3.resizeHandlerAreaWidth - _consts3.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _consts3.tableBorderColor, _consts3.tableBorderColor, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts3.tableBorderColor, _consts3.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "th.".concat(_types.TableCssClassName.TABLE_HEADER_CELL, "::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ").concat(_consts3.tableBorderColor, ";\n\t\t\t\tborder-bottom: 1px solid ").concat(_consts3.tableBorderColor, ";\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}") : "", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _styles.tableMarginTop, _consts3.stickyRowZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _styles.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts3.tableColumnControlsHeight, _consts3.aboveNativeStickyHeaderZIndex, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? "\n\t\t.".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, ":has(~ .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ") {\n\t\t\tmargin-top: 0;\n\t\t}\n\t") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts3.belowNativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? "tr.".concat(_types.TableCssClassName.NATIVE_STICKY) : '', _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _consts3.tableColumnControlsHeight, _types.TableCssClassName.NATIVE_STICKY, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _types.TableCssClassName.WITH_CONTROLS, _consts3.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts3.tableControlsSpacing, _types.TableCssClassName.CORNER_CONTROLS, _consts3.tableControlsSpacing - _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)", sentinelStyles, (0, _uiStyles.OverflowShadow)(), stickyScrollbarStyles, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts3.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts3.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts3.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts3.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts3.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts3.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts3.tableToolbarSize + 1, _consts3.tableToolbarSize + 1, _consts3.tableBorderColor, _consts3.tableBorderRadiusSize, _consts3.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts3.tableBorderSelectedColor, _consts3.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts3.tableBorderSelectedColor, _consts3.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts3.tableBorderDeleteColor, _consts3.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts3.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts3.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n border-bottom: 1px solid ".concat(_consts3.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts3.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts3.rowControlsZIndex + 4, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts3.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", _consts3.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts3.tableColumnControlsHeight, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts3.tableBorderColor, (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(10) : "10px", (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(14) : (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts3.tableHeaderCellBackgroundColor, _consts3.tableTextColor, _consts3.tableBorderColor, _consts3.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts3.tableBorderColor, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? "/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, " {\n\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\t").concat(numberedColumnButtonSelectedStyles, "\n\t\t\t\t").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts3.tableToolbarDeleteColor, _consts3.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorUnitZIndex, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? ".tableView-content-wrap.danger {\n\t\t:not(.".concat(_types.TableCssClassName.IS_RESIZING, ") .").concat(_types.TableCssClassName.WITH_CONTROLS, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\tbackground-color: ").concat(_consts3.tableToolbarDeleteColor, ";\n\t\t\t\tborder: 1px solid ").concat(_consts3.tableBorderDeleteColor, ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", "var(--ds-text-danger, #AE2E24)", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ").concat(_editorSharedStyles.akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts3.tableBorderSelectedColor, ";"), _types.TableCssClassName.SELECTED_CELL, _consts3.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(_consts3.tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(_consts3.tableBorderDeleteColor, ";"), _consts3.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _consts3.tableCellDeleteColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts3.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts3.tableCellDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts3.tableCellDeleteColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _roundedTableStyles.roundedTableOverrides)() : '', _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts3.tableToolbarSize + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_styles.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts3.tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(_styles.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts3.tableToolbarSize, "px;\n\t\t"), _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "\n\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ").concat(_styles.tableMarginTop, "px;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ").concat(_consts3.nativeStickyHeaderZIndex + 1, ";\n\t\t").concat((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", "\n\t}") : ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ").concat(_styles.tableMarginTop, "px;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ").concat(_consts3.nativeStickyHeaderZIndex + 1, ";\n\t\t").concat((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\tmargin-bottom: 1px;" : "", "\n\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts3.dragRowControlsWidth, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts3.dragRowControlsWidth, _styles.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts3.nativeStickyHeaderZIndex - 1, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px") : "".concat(_editorSharedStyles.akEditorTableNumberColumnWidth - 1, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_editorSharedStyles.akEditorTableNumberColumnWidth + 1, "px") : "-".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_consts3.stickyRowOffsetTop + 1, "px") : "-".concat(_consts3.stickyRowOffsetTop, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'none' : (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "0.5px solid ".concat(_consts3.tableBorderColor) : "1px solid ".concat(_consts3.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "1px solid ".concat(_consts3.tableBorderColor) : (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : "1px solid ".concat(_consts3.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom: 1px solid ".concat(_consts3.tableBorderColor, ";") : "", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top: 1px solid ".concat(_consts3.tableBorderColor, ";") : "", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) || (0, _browser.getBrowserInfo)().gecko && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "border-top: 1px solid ".concat(_consts3.tableBorderColor, ";") : "border-top: none;", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? ".ak-editor-selected-node .".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"]:not(.").concat(_types.TableCssClassName.TABLE_SELECTED, ") .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type {\n\t\t\t&::before {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ").concat(_consts3.tableBorderSelectedColor, ";\n\t\t\t\tbackground: ").concat(_consts3.tableCellSelectedColor, ";\n\t\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_SELECTED, _consts3.tableBorderSelectedColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(_consts3.tableBorderSelectedColor) : '', (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top-color: ".concat(_consts3.tableBorderSelectedColor, ";") : "", _consts3.tableHeaderCellSelectedColor, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\toutline: none;\n\t\t\tborder-left: unset;\n\t\t\tborder-top: unset;\n\t\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t}\n\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.TABLE_SELECTED, ".").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ").concat(_consts3.tableBorderDeleteColor, ";\n\t\tborder-top-color: ").concat(_consts3.tableBorderDeleteColor, ";\n\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t}") : "\t.".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t\t}\n\t\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tborder-left-color: ").concat(_consts3.tableBorderDeleteColor, ";\n\t\t\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, ".").concat(_types.TableCssClassName.WITH_CONTROLS, ":has(tr.sticky) .").concat(_types.TableCssClassName.NUMBERED_COLUMN, " .").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tbox-shadow: 0 -5px 0 1px ").concat(_consts3.tableBorderColor, ";\n\t\t}") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
|
|
75
|
+
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", "\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.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\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/* 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: calc(", " - 5);\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\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\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(.", " ", ")\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\n .", " .", " {\n\t\theight: 0; /* stop overflow flash & set correct height in update-overflow-shadows.ts */\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\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\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: ", "\n\t\t\t2px;\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\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\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\tmargin-top: ", ";\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\t", "\n\n\t\t", "\n\t}\n\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\t", "\n\t\tbackground: ", ";\n\t}\n\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)(), 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.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts3.tableToolbarSize, _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, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts3.resizeHandlerAreaWidth - _consts3.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts3.resizeHandlerAreaWidth - _consts3.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _consts3.tableBorderColor, _consts3.tableBorderColor, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts3.tableBorderColor, _consts3.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "th.".concat(_types.TableCssClassName.TABLE_HEADER_CELL, "::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ").concat(_consts3.tableBorderColor, ";\n\t\t\t\tborder-bottom: 1px solid ").concat(_consts3.tableBorderColor, ";\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}") : "", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _styles.tableMarginTop, _consts3.stickyRowZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _styles.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts3.tableColumnControlsHeight, _consts3.aboveNativeStickyHeaderZIndex, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? "\n\t\t.".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, ":has(~ .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ") {\n\t\t\tmargin-top: 0;\n\t\t}\n\t") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts3.belowNativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? "tr.".concat(_types.TableCssClassName.NATIVE_STICKY) : '', _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _consts3.tableColumnControlsHeight, _types.TableCssClassName.NATIVE_STICKY, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NATIVE_STICKY, _styles.tableMarginTop, _types.TableCssClassName.WITH_CONTROLS, _consts3.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts3.tableControlsSpacing, _types.TableCssClassName.CORNER_CONTROLS, _consts3.tableControlsSpacing - _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)", sentinelStyles, (0, _uiStyles.OverflowShadow)(), stickyScrollbarStyles, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts3.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts3.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts3.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts3.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts3.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts3.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts3.tableToolbarSize + 1, _consts3.tableToolbarSize + 1, _consts3.tableBorderColor, _consts3.tableBorderRadiusSize, _consts3.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts3.tableBorderSelectedColor, _consts3.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts3.tableBorderSelectedColor, _consts3.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts3.tableBorderDeleteColor, _consts3.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts3.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts3.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n border-bottom: 1px solid ".concat(_consts3.tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts3.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _consts3.rowControlsZIndex + 4, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts3.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", _consts3.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts3.tableColumnControlsHeight, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts3.tableBorderColor, (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(10) : "10px", (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? (0, _editorSharedStyles.relativeSizeToBaseFontSize)(14) : (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _consts3.tableHeaderCellBackgroundColor, _consts3.tableTextColor, _consts3.tableBorderColor, _consts3.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts3.tableBorderColor, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? "/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, " {\n\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\t").concat(numberedColumnButtonSelectedStyles, "\n\t\t\t\t").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts3.tableToolbarDeleteColor, _consts3.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorUnitZIndex, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? ".tableView-content-wrap.danger {\n\t\t:not(.".concat(_types.TableCssClassName.IS_RESIZING, ") .").concat(_types.TableCssClassName.WITH_CONTROLS, " {\n\t\t\t.").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, " {\n\t\t\t\tbackground-color: ").concat(_consts3.tableToolbarDeleteColor, ";\n\t\t\t\tborder: 1px solid ").concat(_consts3.tableBorderDeleteColor, ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", "var(--ds-text-danger, #AE2E24)", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ").concat(_editorSharedStyles.akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts3.tableBorderSelectedColor, ";"), _types.TableCssClassName.SELECTED_CELL, _consts3.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(_consts3.tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(_consts3.tableBorderDeleteColor, ";"), _consts3.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _consts3.tableCellDeleteColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts3.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts3.tableCellDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _consts3.tableCellDeleteColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _roundedTableStyles.roundedTableOverrides)() : '', _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts3.tableToolbarSize + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_styles.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts3.tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(_styles.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts3.tableToolbarSize, "px;\n\t\t"), _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "\n\t.".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ").concat(_styles.tableMarginTop, "px;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ").concat(_consts3.nativeStickyHeaderZIndex + 1, ";\n\t\t").concat((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", "\n\t}") : ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " > .").concat(_types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ").concat(_styles.tableMarginTop, "px;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ").concat(_consts3.nativeStickyHeaderZIndex + 1, ";\n\t\t").concat((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\tmargin-bottom: 1px;" : "", "\n\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts3.dragRowControlsWidth, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts3.dragRowControlsWidth, _styles.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts3.nativeStickyHeaderZIndex - 1, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px") : "".concat(_editorSharedStyles.akEditorTableNumberColumnWidth - 1, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_editorSharedStyles.akEditorTableNumberColumnWidth + 1, "px") : "-".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_consts3.stickyRowOffsetTop + 1, "px") : "-".concat(_consts3.stickyRowOffsetTop, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'none' : (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "0.5px solid ".concat(_consts3.tableBorderColor) : "1px solid ".concat(_consts3.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "1px solid ".concat(_consts3.tableBorderColor) : (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : "1px solid ".concat(_consts3.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom: 1px solid ".concat(_consts3.tableBorderColor, ";") : "", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top: 1px solid ".concat(_consts3.tableBorderColor, ";") : "", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) || (0, _browser.getBrowserInfo)().gecko && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? "border-top: 1px solid ".concat(_consts3.tableBorderColor, ";") : "border-top: none;", (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') ? ".ak-editor-selected-node .".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"]:not(.").concat(_types.TableCssClassName.TABLE_SELECTED, ") .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type {\n\t\t\t&::before {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ").concat(_consts3.tableBorderSelectedColor, ";\n\t\t\t\tbackground: ").concat(_consts3.tableCellSelectedColor, ";\n\t\t\t}\n\t}") : '', _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_SELECTED, _consts3.tableBorderSelectedColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(_consts3.tableBorderSelectedColor) : '', (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? "border-top-color: ".concat(_consts3.tableBorderSelectedColor, ";") : "", _consts3.tableHeaderCellSelectedColor, (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\toutline: none;\n\t\t\tborder-left: unset;\n\t\t\tborder-top: unset;\n\t\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t}\n\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.TABLE_SELECTED, ".").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th:first-of-type::before, .").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ").concat(_consts3.tableBorderDeleteColor, ";\n\t\tborder-top-color: ").concat(_consts3.tableBorderDeleteColor, ";\n\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t}") : "\t.".concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"] .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.HOVERED_CELL_IN_DANGER, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t\t}\n\t\t\t.").concat(_types.TableCssClassName.TABLE_CONTAINER, "[data-number-column=\"true\"].").concat(_types.TableCssClassName.HOVERED_DELETE_BUTTON, " .").concat(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, " tr:first-of-type th.").concat(_types.TableCssClassName.SELECTED_CELL, ":not(.").concat(_types.TableCssClassName.COLUMN_SELECTED, "):first-of-type::before {\n\t\t\t\toutline: none;\n\t\t\t\tborder-left-color: ").concat(_consts3.tableBorderDeleteColor, ";\n\t\t\t\tbackground: ").concat(_consts3.tableCellDeleteColor, ";\n\t\t}"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? ".".concat(_types.TableCssClassName.TABLE_CONTAINER, ".").concat(_types.TableCssClassName.WITH_CONTROLS, ":has(tr.sticky) .").concat(_types.TableCssClassName.NUMBERED_COLUMN, " .").concat(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tbox-shadow: 0 -5px 0 1px ").concat(_consts3.tableBorderColor, ";\n\t\t}") : "", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
|
|
76
76
|
};
|
|
77
77
|
|
|
78
78
|
// TODO: EDITOR-7593 - No usage found accross AFM, deprecate when EditorContentContainer in editor-core has finished compiled css migration under experiment 'platform_editor_core_static_css'
|
|
@@ -37,11 +37,6 @@ const getCellDomAttrsForTableMenuUpdates = node => {
|
|
|
37
37
|
export default class TableCell extends TableNodeView {
|
|
38
38
|
constructor(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
|
|
39
39
|
super(node, view, getPos, eventDispatcher);
|
|
40
|
-
/** Cached edge state to avoid redundant DOM writes. */
|
|
41
|
-
_defineProperty(this, "prevReachesTop", false);
|
|
42
|
-
_defineProperty(this, "prevReachesBottom", false);
|
|
43
|
-
_defineProperty(this, "prevReachesLeft", false);
|
|
44
|
-
_defineProperty(this, "prevReachesRight", false);
|
|
45
40
|
_defineProperty(this, "destroy", () => {
|
|
46
41
|
if (this.delayHandle && typeof window !== 'undefined') {
|
|
47
42
|
var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
|
|
@@ -117,28 +112,10 @@ export default class TableCell extends TableNodeView {
|
|
|
117
112
|
const tableMap = TableMap.get(tableNode);
|
|
118
113
|
const cellStartInTable = pos - resolvedPos.start(tableDepth);
|
|
119
114
|
const cellRect = tableMap.findCell(cellStartInTable);
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
// Only touch DOM attributes that actually changed
|
|
126
|
-
if (reachesTop !== this.prevReachesTop) {
|
|
127
|
-
this.prevReachesTop = reachesTop;
|
|
128
|
-
this.setDataAttr('data-reaches-top', reachesTop);
|
|
129
|
-
}
|
|
130
|
-
if (reachesBottom !== this.prevReachesBottom) {
|
|
131
|
-
this.prevReachesBottom = reachesBottom;
|
|
132
|
-
this.setDataAttr('data-reaches-bottom', reachesBottom);
|
|
133
|
-
}
|
|
134
|
-
if (reachesLeft !== this.prevReachesLeft) {
|
|
135
|
-
this.prevReachesLeft = reachesLeft;
|
|
136
|
-
this.setDataAttr('data-reaches-left', reachesLeft);
|
|
137
|
-
}
|
|
138
|
-
if (reachesRight !== this.prevReachesRight) {
|
|
139
|
-
this.prevReachesRight = reachesRight;
|
|
140
|
-
this.setDataAttr('data-reaches-right', reachesRight);
|
|
141
|
-
}
|
|
115
|
+
this.setDataAttr('data-reaches-top', cellRect.top === 0);
|
|
116
|
+
this.setDataAttr('data-reaches-bottom', cellRect.bottom >= tableMap.height);
|
|
117
|
+
this.setDataAttr('data-reaches-left', cellRect.left === 0);
|
|
118
|
+
this.setDataAttr('data-reaches-right', cellRect.right >= tableMap.width);
|
|
142
119
|
} catch {
|
|
143
120
|
// Position may be stale during document mutations; silently ignore.
|
|
144
121
|
}
|
|
@@ -22,7 +22,7 @@ import { pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-header
|
|
|
22
22
|
import { findStickyHeaderForTable } from '../pm-plugins/sticky-headers/util';
|
|
23
23
|
import { hasTableBeenResized, insertColgroupFromNode } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
24
24
|
import { COLUMN_MIN_WIDTH, TABLE_EDITOR_MARGIN, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
|
|
25
|
-
import {
|
|
25
|
+
import { syncStickyCornerMasks, updateControls } from '../pm-plugins/table-resizing/utils/dom';
|
|
26
26
|
import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
|
|
27
27
|
import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
28
28
|
import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
|
|
@@ -120,7 +120,7 @@ class TableComponent extends React.Component {
|
|
|
120
120
|
header.style.marginRight = '2px';
|
|
121
121
|
}
|
|
122
122
|
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
123
|
-
|
|
123
|
+
syncStickyCornerMasks(this.table);
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
126
|
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
2
|
+
const setDataAttr = (cell, attr, value) => {
|
|
3
|
+
const hasAttr = cell.hasAttribute(attr);
|
|
4
|
+
if (value && !hasAttr) {
|
|
5
|
+
cell.setAttribute(attr, 'true');
|
|
6
|
+
} else if (!value && hasAttr) {
|
|
7
|
+
cell.removeAttribute(attr);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Refreshes the `data-reaches-{top,bottom,left,right}` attributes used by CSS to round
|
|
13
|
+
* the table's corner cells (including merged cells that span to an edge).
|
|
14
|
+
*
|
|
15
|
+
* Edge membership is derived directly from the table map's border rows/columns: a cell
|
|
16
|
+
* reaches an edge iff its offset appears in the corresponding border slice (this naturally
|
|
17
|
+
* accounts for rowspan/colspan cells, whose offset is repeated across every grid slot they
|
|
18
|
+
* cover). This is O(cells) overall, versus O(cells^2) when calling findCell per cell.
|
|
19
|
+
*/
|
|
20
|
+
const refreshRoundedTableEdgeAttrs = (table, tableNode) => {
|
|
21
|
+
try {
|
|
22
|
+
const tableMap = TableMap.get(tableNode);
|
|
23
|
+
const {
|
|
24
|
+
width,
|
|
25
|
+
height,
|
|
26
|
+
map
|
|
27
|
+
} = tableMap;
|
|
28
|
+
const cells = Array.from(table.rows).flatMap(row => Array.from(row.cells));
|
|
29
|
+
const cellOffsets = Array.from(new Set(map));
|
|
30
|
+
const topOffsets = new Set();
|
|
31
|
+
const bottomOffsets = new Set();
|
|
32
|
+
const leftOffsets = new Set();
|
|
33
|
+
const rightOffsets = new Set();
|
|
34
|
+
for (let col = 0; col < width; col++) {
|
|
35
|
+
topOffsets.add(map[col]);
|
|
36
|
+
bottomOffsets.add(map[(height - 1) * width + col]);
|
|
37
|
+
}
|
|
38
|
+
for (let row = 0; row < height; row++) {
|
|
39
|
+
leftOffsets.add(map[row * width]);
|
|
40
|
+
rightOffsets.add(map[row * width + width - 1]);
|
|
41
|
+
}
|
|
42
|
+
cellOffsets.forEach((cellOffset, cellIndex) => {
|
|
43
|
+
const cell = cells[cellIndex];
|
|
44
|
+
if (!cell) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
setDataAttr(cell, 'data-reaches-top', topOffsets.has(cellOffset));
|
|
48
|
+
setDataAttr(cell, 'data-reaches-bottom', bottomOffsets.has(cellOffset));
|
|
49
|
+
setDataAttr(cell, 'data-reaches-left', leftOffsets.has(cellOffset));
|
|
50
|
+
setDataAttr(cell, 'data-reaches-right', rightOffsets.has(cellOffset));
|
|
51
|
+
});
|
|
52
|
+
} catch {
|
|
53
|
+
// Table structure can be transient while ProseMirror normalises transactions.
|
|
54
|
+
// Keep existing edge attrs if the current shape cannot be mapped safely.
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Builds a lightweight signature of the cells sitting on the table's four borders, using
|
|
60
|
+
* their (immutable) ProseMirror node references. The signature changes whenever a border
|
|
61
|
+
* cell is added, removed, merged, or moved (row/column reorder via drag-and-drop) but stays
|
|
62
|
+
* stable across pure text edits in non-edge cells. This lets the controller decide cheaply
|
|
63
|
+
* (O(rows + cols)) whether the rounded-edge attrs need a full refresh, instead of only
|
|
64
|
+
* reacting to width/height changes.
|
|
65
|
+
*/
|
|
66
|
+
const getTableEdgeSignature = tableNode => {
|
|
67
|
+
const edgeCells = [];
|
|
68
|
+
const lastRowIndex = tableNode.childCount - 1;
|
|
69
|
+
tableNode.forEach((row, _rowOffset, rowIndex) => {
|
|
70
|
+
const isEdgeRow = rowIndex === 0 || rowIndex === lastRowIndex;
|
|
71
|
+
const lastCellIndex = row.childCount - 1;
|
|
72
|
+
row.forEach((cell, _cellOffset, cellIndex) => {
|
|
73
|
+
if (isEdgeRow || cellIndex === 0 || cellIndex === lastCellIndex) {
|
|
74
|
+
edgeCells.push(cell);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
return edgeCells;
|
|
79
|
+
};
|
|
80
|
+
const tableEdgeSignaturesDiffer = (prev, next) => {
|
|
81
|
+
if (!prev || prev.length !== next.length) {
|
|
82
|
+
return true;
|
|
83
|
+
}
|
|
84
|
+
for (let i = 0; i < prev.length; i++) {
|
|
85
|
+
if (prev[i] !== next[i]) {
|
|
86
|
+
return true;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return false;
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Keeps a table's rounded-corner edge attributes in sync as its shape changes.
|
|
94
|
+
*
|
|
95
|
+
* Each TableCell node view refreshes its own edge attrs when its cell attrs change. However,
|
|
96
|
+
* when the table's shape changes (e.g. a new row is inserted below the last row) or cells are
|
|
97
|
+
* reordered (e.g. dragging a row/column to a new position), ProseMirror may reuse the existing
|
|
98
|
+
* neighbouring cells as-is, so those cells never get a chance to update their edge attrs on
|
|
99
|
+
* their own. This controller covers those cases from the table node view.
|
|
100
|
+
*
|
|
101
|
+
* Callers are responsible for feature-gating each call site.
|
|
102
|
+
*/
|
|
103
|
+
export class RoundedTableEdges {
|
|
104
|
+
// References to the previous render's border cells (O(rows + cols), perimeter-sized, not all cells).
|
|
105
|
+
|
|
106
|
+
constructor(getTableElement, node) {
|
|
107
|
+
this.getTableElement = getTableElement;
|
|
108
|
+
|
|
109
|
+
// Baseline the edge signature so the first content edit doesn't trigger a spurious
|
|
110
|
+
// refresh — the cells set their own edge attrs on construction.
|
|
111
|
+
this.prevSignature = getTableEdgeSignature(node);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Call from the node view's `update()` after `super.update()`. When the border signature
|
|
116
|
+
* changes it schedules a refresh of the edge attrs on the next animation frame.
|
|
117
|
+
*/
|
|
118
|
+
handleUpdate(node) {
|
|
119
|
+
const nextSignature = getTableEdgeSignature(node);
|
|
120
|
+
const edgesChanged = tableEdgeSignaturesDiffer(this.prevSignature, nextSignature);
|
|
121
|
+
this.prevSignature = nextSignature;
|
|
122
|
+
if (edgesChanged) {
|
|
123
|
+
this.scheduleRefresh(node);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/** Call from the node view's `destroy()` to cancel any pending refresh. */
|
|
128
|
+
destroy() {
|
|
129
|
+
if (this.refreshHandle !== undefined) {
|
|
130
|
+
cancelAnimationFrame(this.refreshHandle);
|
|
131
|
+
this.refreshHandle = undefined;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// The refresh runs on the next animation frame because ReactNodeView.update() schedules the
|
|
136
|
+
// table's React render via the portal provider. If we read `table.rows` synchronously, we'd
|
|
137
|
+
// still see the previous DOM.
|
|
138
|
+
scheduleRefresh(node) {
|
|
139
|
+
if (this.refreshHandle !== undefined) {
|
|
140
|
+
cancelAnimationFrame(this.refreshHandle);
|
|
141
|
+
}
|
|
142
|
+
this.refreshHandle = requestAnimationFrame(() => {
|
|
143
|
+
this.refreshHandle = undefined;
|
|
144
|
+
const table = this.getTableElement();
|
|
145
|
+
if (table instanceof HTMLTableElement) {
|
|
146
|
+
refreshRoundedTableEdgeAttrs(table, node);
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
}
|
|
@@ -15,6 +15,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
|
15
15
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
16
16
|
import { isTableNested, tablesHaveDifferentColumnWidths } from '../pm-plugins/utils/nodes';
|
|
17
17
|
import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
|
|
18
|
+
import { RoundedTableEdges } from './rounded-table-edges';
|
|
18
19
|
import { TableComponentWithSharedState } from './TableComponentWithSharedState';
|
|
19
20
|
import { tableNodeSpecWithFixedToDOM } from './toDOM';
|
|
20
21
|
const tableAttributes = node => {
|
|
@@ -48,35 +49,6 @@ const handleInlineTableWidth = (table, width) => {
|
|
|
48
49
|
}
|
|
49
50
|
table.style.setProperty('width', `${width}px`);
|
|
50
51
|
};
|
|
51
|
-
const setDataAttr = (cell, attr, value) => {
|
|
52
|
-
const hasAttr = cell.hasAttribute(attr);
|
|
53
|
-
if (value && !hasAttr) {
|
|
54
|
-
cell.setAttribute(attr, 'true');
|
|
55
|
-
} else if (!value && hasAttr) {
|
|
56
|
-
cell.removeAttribute(attr);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
const refreshRoundedTableEdgeAttrs = (table, tableNode) => {
|
|
60
|
-
try {
|
|
61
|
-
const tableMap = TableMap.get(tableNode);
|
|
62
|
-
const cells = Array.from(table.rows).flatMap(row => Array.from(row.cells));
|
|
63
|
-
const cellOffsets = Array.from(new Set(tableMap.map));
|
|
64
|
-
cellOffsets.forEach((cellOffset, cellIndex) => {
|
|
65
|
-
const cell = cells[cellIndex];
|
|
66
|
-
if (!cell) {
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
const cellRect = tableMap.findCell(cellOffset);
|
|
70
|
-
setDataAttr(cell, 'data-reaches-top', cellRect.top === 0);
|
|
71
|
-
setDataAttr(cell, 'data-reaches-bottom', cellRect.bottom >= tableMap.height);
|
|
72
|
-
setDataAttr(cell, 'data-reaches-left', cellRect.left === 0);
|
|
73
|
-
setDataAttr(cell, 'data-reaches-right', cellRect.right >= tableMap.width);
|
|
74
|
-
});
|
|
75
|
-
} catch {
|
|
76
|
-
// Table structure can be transient while ProseMirror normalises transactions.
|
|
77
|
-
// Keep existing edge attrs if the current shape cannot be mapped safely.
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
52
|
export default class TableView extends ReactNodeView {
|
|
81
53
|
constructor(props) {
|
|
82
54
|
super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined,
|
|
@@ -90,6 +62,9 @@ export default class TableView extends ReactNodeView {
|
|
|
90
62
|
this.eventDispatcher = props.eventDispatcher;
|
|
91
63
|
this.options = props.options;
|
|
92
64
|
this.getEditorFeatureFlags = props.getEditorFeatureFlags;
|
|
65
|
+
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
66
|
+
this.roundedTableEdges = new RoundedTableEdges(() => this.table, props.node);
|
|
67
|
+
}
|
|
93
68
|
this.handleRef = node => this._handleTableRef(node);
|
|
94
69
|
}
|
|
95
70
|
getContentDOM() {
|
|
@@ -244,37 +219,15 @@ export default class TableView extends ReactNodeView {
|
|
|
244
219
|
}
|
|
245
220
|
}
|
|
246
221
|
}
|
|
247
|
-
// Each TableCell node view refreshes its own edge attrs when its cell attrs change.
|
|
248
|
-
// However, when the table's shape changes (e.g. a new row is inserted below the
|
|
249
|
-
// last row), ProseMirror may reuse the existing neighbouring cells as-is, so those
|
|
250
|
-
// cells never get a chance to update their edge attrs on their own.
|
|
251
|
-
//
|
|
252
|
-
// To cover those cases, we refresh edge attrs from the table node view here.
|
|
253
|
-
//
|
|
254
|
-
// The refresh runs on the next animation frame because ReactNodeView.update()
|
|
255
|
-
// schedules the table's React render via the portal provider. If we read
|
|
256
|
-
// `this.table.rows` synchronously, we'd still see the previous DOM.
|
|
257
|
-
scheduleRoundedTableEdgeRefresh(node) {
|
|
258
|
-
if (this.roundedTableEdgeRefreshHandle !== undefined) {
|
|
259
|
-
cancelAnimationFrame(this.roundedTableEdgeRefreshHandle);
|
|
260
|
-
}
|
|
261
|
-
this.roundedTableEdgeRefreshHandle = requestAnimationFrame(() => {
|
|
262
|
-
this.roundedTableEdgeRefreshHandle = undefined;
|
|
263
|
-
if (this.table instanceof HTMLTableElement) {
|
|
264
|
-
refreshRoundedTableEdgeAttrs(this.table, node);
|
|
265
|
-
}
|
|
266
|
-
});
|
|
267
|
-
}
|
|
268
222
|
update(node, decorations, innerDecorations, validUpdate) {
|
|
269
|
-
if (!expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
270
|
-
return super.update(node, decorations, innerDecorations, validUpdate);
|
|
271
|
-
}
|
|
272
|
-
const currentTableMap = TableMap.get(this.node);
|
|
273
|
-
const nextTableMap = TableMap.get(node);
|
|
274
|
-
const tableGeometryChanged = currentTableMap.width !== nextTableMap.width || currentTableMap.height !== nextTableMap.height;
|
|
275
223
|
const didUpdate = super.update(node, decorations, innerDecorations, validUpdate);
|
|
276
|
-
|
|
277
|
-
|
|
224
|
+
|
|
225
|
+
// Keep the rounded-corner edge attrs in sync with structural changes (rows/columns
|
|
226
|
+
// added, removed, merged, or reordered via drag-and-drop) that the cells themselves
|
|
227
|
+
// can miss.
|
|
228
|
+
if (didUpdate && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
229
|
+
var _this$roundedTableEdg;
|
|
230
|
+
(_this$roundedTableEdg = this.roundedTableEdges) === null || _this$roundedTableEdg === void 0 ? void 0 : _this$roundedTableEdg.handleUpdate(node);
|
|
278
231
|
}
|
|
279
232
|
return didUpdate;
|
|
280
233
|
}
|
|
@@ -309,7 +262,7 @@ export default class TableView extends ReactNodeView {
|
|
|
309
262
|
if (typeof node.attrs !== typeof nextNode.attrs) {
|
|
310
263
|
return true;
|
|
311
264
|
}
|
|
312
|
-
if (tablesHaveDifferentColumnWidths(node, nextNode)
|
|
265
|
+
if (tablesHaveDifferentColumnWidths(node, nextNode)) {
|
|
313
266
|
return true;
|
|
314
267
|
}
|
|
315
268
|
const attrKeys = Object.keys(node.attrs);
|
|
@@ -351,9 +304,9 @@ export default class TableView extends ReactNodeView {
|
|
|
351
304
|
}
|
|
352
305
|
destroy() {
|
|
353
306
|
var _this$eventDispatcher;
|
|
354
|
-
if (
|
|
355
|
-
|
|
356
|
-
this.
|
|
307
|
+
if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
|
|
308
|
+
var _this$roundedTableEdg2;
|
|
309
|
+
(_this$roundedTableEdg2 = this.roundedTableEdges) === null || _this$roundedTableEdg2 === void 0 ? void 0 : _this$roundedTableEdg2.destroy();
|
|
357
310
|
}
|
|
358
311
|
if (this.resizeObserver) {
|
|
359
312
|
this.resizeObserver.disconnect();
|
|
@@ -102,6 +102,21 @@ const applyTableWidthToStickyRow = (tableRef, headerRow) => {
|
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
};
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Repositions only the sticky-header corner masks to match the current scroll position.
|
|
108
|
+
*/
|
|
109
|
+
export const syncStickyCornerMasks = tableRef => {
|
|
110
|
+
if (!tableRef) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
const headerRow = tableRef.querySelector('tr[data-header-row]');
|
|
114
|
+
const wrapper = tableRef.parentElement;
|
|
115
|
+
if (!headerRow || !wrapper) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
syncCornerMasksToStickyRow(tableRef, headerRow, wrapper);
|
|
119
|
+
};
|
|
105
120
|
export const clearStickyCornerMaskPositions = tableRef => {
|
|
106
121
|
const wrapper = tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement;
|
|
107
122
|
if (!wrapper) {
|