@atlaskit/renderer 112.2.3 → 112.3.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 +24 -0
- package/dist/cjs/react/nodes/embedCard.js +0 -1
- package/dist/cjs/react/nodes/layoutSection.js +13 -1
- package/dist/cjs/react/nodes/table/sticky.js +8 -3
- package/dist/cjs/react/nodes/table.js +12 -3
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/Renderer/style.js +4 -1
- package/dist/es2019/react/nodes/embedCard.js +0 -1
- package/dist/es2019/react/nodes/layoutSection.js +13 -1
- package/dist/es2019/react/nodes/table/sticky.js +8 -3
- package/dist/es2019/react/nodes/table.js +12 -3
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/Renderer/style.js +3 -2
- package/dist/esm/react/nodes/embedCard.js +0 -1
- package/dist/esm/react/nodes/layoutSection.js +13 -1
- package/dist/esm/react/nodes/table/sticky.js +8 -3
- package/dist/esm/react/nodes/table.js +12 -3
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/Renderer/style.js +5 -2
- package/dist/types/react/nodes/layoutSection.d.ts +4 -1
- package/dist/types/react/nodes/table/sticky.d.ts +1 -1
- package/dist/types/ui/Renderer/types.d.ts +21 -1
- package/dist/types-ts4.5/react/nodes/layoutSection.d.ts +4 -1
- package/dist/types-ts4.5/react/nodes/table/sticky.d.ts +1 -1
- package/dist/types-ts4.5/ui/Renderer/types.d.ts +21 -1
- package/package.json +9 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 112.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#159704](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159704)
|
|
8
|
+
[`03e6dc49c3d4f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/03e6dc49c3d4f) -
|
|
9
|
+
Add temporary sticky header configuration options to allow consumer to set the default overflow
|
|
10
|
+
parent
|
|
11
|
+
|
|
12
|
+
## 112.3.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [#159791](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159791)
|
|
17
|
+
[`ce28bda7a3e2a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ce28bda7a3e2a) -
|
|
18
|
+
Removing deprecated `data` and `importer` prop from @atlaskit/smart-card
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- [#159546](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159546)
|
|
23
|
+
[`e2dc2f10636c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e2dc2f10636c6) -
|
|
24
|
+
[ux] Layout responsiveness in renderer
|
|
25
|
+
- Updated dependencies
|
|
26
|
+
|
|
3
27
|
## 112.2.3
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -6,8 +6,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = LayoutSection;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
10
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
9
11
|
function LayoutSection(props) {
|
|
10
|
-
|
|
12
|
+
var _props$content;
|
|
13
|
+
var isAdvancedLayoutsPreRelease2 = (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
|
|
14
|
+
return isAdvancedLayoutsPreRelease2 ?
|
|
15
|
+
/*#__PURE__*/
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
17
|
+
_react.default.createElement("div", {
|
|
18
|
+
className: "layout-section-container"
|
|
19
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
20
|
+
"data-layout-section": true,
|
|
21
|
+
"data-layout-columns": props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
|
|
22
|
+
}, props.children)) : /*#__PURE__*/_react.default.createElement("div", {
|
|
11
23
|
"data-layout-section": true
|
|
12
24
|
}, props.children);
|
|
13
25
|
}
|
|
@@ -173,7 +173,7 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
|
|
|
173
173
|
/**
|
|
174
174
|
* Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
|
|
175
175
|
*/
|
|
176
|
-
function findHorizontalOverflowScrollParent(table) {
|
|
176
|
+
function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
|
|
177
177
|
var parent = table;
|
|
178
178
|
if (!parent) {
|
|
179
179
|
return null;
|
|
@@ -184,6 +184,11 @@ function findHorizontalOverflowScrollParent(table) {
|
|
|
184
184
|
if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
|
|
185
185
|
return parent;
|
|
186
186
|
}
|
|
187
|
+
if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
|
|
188
|
+
// If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
|
|
189
|
+
// use the defaultScrollRootEl.
|
|
190
|
+
return parent;
|
|
191
|
+
}
|
|
187
192
|
}
|
|
188
193
|
return null;
|
|
189
194
|
}
|
|
@@ -226,8 +231,8 @@ var OverflowParent = exports.OverflowParent = /*#__PURE__*/function () {
|
|
|
226
231
|
}
|
|
227
232
|
}], [{
|
|
228
233
|
key: "fromElement",
|
|
229
|
-
value: function fromElement(el) {
|
|
230
|
-
return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
|
|
234
|
+
value: function fromElement(el, defaultScrollRootEl) {
|
|
235
|
+
return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
|
|
231
236
|
}
|
|
232
237
|
}]);
|
|
233
238
|
return OverflowParent;
|
|
@@ -253,7 +253,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
253
253
|
this.resizeObserver.observe(this.stickyHeaderRef.current);
|
|
254
254
|
}
|
|
255
255
|
if (this.props.stickyHeaders) {
|
|
256
|
-
|
|
256
|
+
var _this$props$stickyHea;
|
|
257
|
+
this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
|
|
257
258
|
this.overflowParent.addEventListener('scroll', this.onScroll);
|
|
258
259
|
}
|
|
259
260
|
if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
|
|
@@ -265,7 +266,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
265
266
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
266
267
|
// toggling sticky headers visiblity
|
|
267
268
|
if (this.props.stickyHeaders && !this.overflowParent) {
|
|
268
|
-
|
|
269
|
+
var _this$props$stickyHea2;
|
|
270
|
+
this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
|
|
269
271
|
} else if (!this.props.stickyHeaders && this.overflowParent) {
|
|
270
272
|
this.overflowParent.removeEventListener('scroll', this.onScroll);
|
|
271
273
|
this.overflowParent = null;
|
|
@@ -296,7 +298,14 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
296
298
|
case 'pin-bottom':
|
|
297
299
|
return this.pinTop;
|
|
298
300
|
case 'stick':
|
|
299
|
-
|
|
301
|
+
var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
|
|
302
|
+
if (typeof offsetTop === 'number') {
|
|
303
|
+
var _this$props$stickyHea3, _this$props$stickyHea4;
|
|
304
|
+
var defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
|
|
305
|
+
return offsetTop + defaultScrollRootOffsetTop;
|
|
306
|
+
} else {
|
|
307
|
+
return offsetTop;
|
|
308
|
+
}
|
|
300
309
|
default:
|
|
301
310
|
return undefined;
|
|
302
311
|
}
|
|
@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
65
65
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
66
66
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
67
67
|
var packageName = "@atlaskit/renderer";
|
|
68
|
-
var packageVersion = "112.
|
|
68
|
+
var packageVersion = "112.3.1";
|
|
69
69
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
70
70
|
containerName: 'ak-renderer-wrapper',
|
|
71
71
|
containerType: 'inline-size',
|
|
@@ -147,6 +147,9 @@ function getAnnotationStyles(_ref6) {
|
|
|
147
147
|
}
|
|
148
148
|
var tableRowHeight = 44;
|
|
149
149
|
var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t width: 100%;\n\t display: block;\n\t visibility: hidden;\n\t overflow-x: auto;\n\t position: sticky;\n\t bottom: ", "var(--ds-space-0, 0px)", ";\n\t z-index: 1;\n\t}\n\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t position: absolute;\n\t width: 100%;\n\t height: 1px;\n\t margin-top: -1px;\n\t // need this to avoid sentinel being focused via keyboard\n\t // this still allows it to be detected by intersection observer\n\t visibility: hidden;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t bottom: ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n ");
|
|
150
|
+
var isAdvancedLayoutsPreRelease2 = function isAdvancedLayoutsPreRelease2() {
|
|
151
|
+
return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
|
|
152
|
+
};
|
|
150
153
|
var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
|
|
151
154
|
return function (theme) {
|
|
152
155
|
var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
|
|
@@ -160,7 +163,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
|
|
|
160
163
|
appearance = wrapperProps.appearance;
|
|
161
164
|
|
|
162
165
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
|
|
163
|
-
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n .", ",\n &\n .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(typography), (0, _styles.ruleSharedStyles)(), (0, _styles.paragraphSharedStyles)(typography), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
166
|
+
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n .", ",\n &\n .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(typography), (0, _styles.ruleSharedStyles)(), (0, _styles.paragraphSharedStyles)(typography), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), (0, _table.isStickyScrollbarEnabled)(appearance) ? stickyScrollbarStyles : '', _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), isAdvancedLayoutsPreRelease2() ? _styles.columnLayoutResponsiveSharedStyle : _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
164
167
|
};
|
|
165
168
|
};
|
|
166
169
|
var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
2
4
|
export default function LayoutSection(props) {
|
|
3
|
-
|
|
5
|
+
var _props$content;
|
|
6
|
+
const isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
|
|
7
|
+
return isAdvancedLayoutsPreRelease2 ?
|
|
8
|
+
/*#__PURE__*/
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
10
|
+
React.createElement("div", {
|
|
11
|
+
className: "layout-section-container"
|
|
12
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
13
|
+
"data-layout-section": true,
|
|
14
|
+
"data-layout-columns": props === null || props === void 0 ? void 0 : (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
|
|
15
|
+
}, props.children)) : /*#__PURE__*/React.createElement("div", {
|
|
4
16
|
"data-layout-section": true
|
|
5
17
|
}, props.children);
|
|
6
18
|
}
|
|
@@ -174,7 +174,7 @@ export const StickyTable = ({
|
|
|
174
174
|
/**
|
|
175
175
|
* Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
|
|
176
176
|
*/
|
|
177
|
-
function findHorizontalOverflowScrollParent(table) {
|
|
177
|
+
function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
|
|
178
178
|
let parent = table;
|
|
179
179
|
if (!parent) {
|
|
180
180
|
return null;
|
|
@@ -185,6 +185,11 @@ function findHorizontalOverflowScrollParent(table) {
|
|
|
185
185
|
if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
|
|
186
186
|
return parent;
|
|
187
187
|
}
|
|
188
|
+
if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
|
|
189
|
+
// If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
|
|
190
|
+
// use the defaultScrollRootEl.
|
|
191
|
+
return parent;
|
|
192
|
+
}
|
|
188
193
|
}
|
|
189
194
|
return null;
|
|
190
195
|
}
|
|
@@ -193,8 +198,8 @@ export class OverflowParent {
|
|
|
193
198
|
this.ref = ref;
|
|
194
199
|
this.ref = ref;
|
|
195
200
|
}
|
|
196
|
-
static fromElement(el) {
|
|
197
|
-
return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
|
|
201
|
+
static fromElement(el, defaultScrollRootEl) {
|
|
202
|
+
return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
|
|
198
203
|
}
|
|
199
204
|
get isElement() {
|
|
200
205
|
return this.ref instanceof HTMLElement;
|
|
@@ -204,7 +204,8 @@ export class TableContainer extends React.Component {
|
|
|
204
204
|
this.resizeObserver.observe(this.stickyHeaderRef.current);
|
|
205
205
|
}
|
|
206
206
|
if (this.props.stickyHeaders) {
|
|
207
|
-
|
|
207
|
+
var _this$props$stickyHea;
|
|
208
|
+
this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
|
|
208
209
|
this.overflowParent.addEventListener('scroll', this.onScroll);
|
|
209
210
|
}
|
|
210
211
|
if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
|
|
@@ -214,7 +215,8 @@ export class TableContainer extends React.Component {
|
|
|
214
215
|
componentDidUpdate(prevProps, prevState) {
|
|
215
216
|
// toggling sticky headers visiblity
|
|
216
217
|
if (this.props.stickyHeaders && !this.overflowParent) {
|
|
217
|
-
|
|
218
|
+
var _this$props$stickyHea2;
|
|
219
|
+
this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
|
|
218
220
|
} else if (!this.props.stickyHeaders && this.overflowParent) {
|
|
219
221
|
this.overflowParent.removeEventListener('scroll', this.onScroll);
|
|
220
222
|
this.overflowParent = null;
|
|
@@ -241,7 +243,14 @@ export class TableContainer extends React.Component {
|
|
|
241
243
|
case 'pin-bottom':
|
|
242
244
|
return this.pinTop;
|
|
243
245
|
case 'stick':
|
|
244
|
-
|
|
246
|
+
const offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
|
|
247
|
+
if (typeof offsetTop === 'number') {
|
|
248
|
+
var _this$props$stickyHea3, _this$props$stickyHea4;
|
|
249
|
+
const defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
|
|
250
|
+
return offsetTop + defaultScrollRootOffsetTop;
|
|
251
|
+
} else {
|
|
252
|
+
return offsetTop;
|
|
253
|
+
}
|
|
245
254
|
default:
|
|
246
255
|
return undefined;
|
|
247
256
|
}
|
|
@@ -45,7 +45,7 @@ import { countNodes } from './count-nodes';
|
|
|
45
45
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
46
46
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
47
47
|
const packageName = "@atlaskit/renderer";
|
|
48
|
-
const packageVersion = "112.
|
|
48
|
+
const packageVersion = "112.3.1";
|
|
49
49
|
const setAsQueryContainerStyles = css({
|
|
50
50
|
containerName: 'ak-renderer-wrapper',
|
|
51
51
|
containerType: 'inline-size',
|
|
@@ -10,7 +10,7 @@ import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
|
|
|
10
10
|
import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
|
|
11
11
|
import { getGlobalTheme } from '@atlaskit/tokens';
|
|
12
12
|
import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
|
|
13
|
-
import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, backgroundColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
13
|
+
import { tableSharedStyle, columnLayoutSharedStyle, columnLayoutResponsiveSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, backgroundColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
14
14
|
import { shadowClassNames, shadowObserverClassNames } from '@atlaskit/editor-common/ui';
|
|
15
15
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
16
16
|
import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableBorder, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
@@ -435,6 +435,7 @@ const stickyScrollbarStyles = `
|
|
|
435
435
|
bottom: ${"var(--ds-space-250, 20px)"}; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
|
|
436
436
|
}
|
|
437
437
|
`;
|
|
438
|
+
const isAdvancedLayoutsPreRelease2 = () => editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
|
|
438
439
|
export const rendererStyles = wrapperProps => theme => {
|
|
439
440
|
const {
|
|
440
441
|
colorMode,
|
|
@@ -772,7 +773,7 @@ export const rendererStyles = wrapperProps => theme => {
|
|
|
772
773
|
|
|
773
774
|
${getLightWeightCodeBlockStylesForRootRendererStyleSheet()}
|
|
774
775
|
|
|
775
|
-
${columnLayoutSharedStyle};
|
|
776
|
+
${isAdvancedLayoutsPreRelease2() ? columnLayoutResponsiveSharedStyle : columnLayoutSharedStyle};
|
|
776
777
|
& [data-layout-section] {
|
|
777
778
|
margin-top: ${"var(--ds-space-250, 20px)"};
|
|
778
779
|
& > div + div {
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
2
4
|
export default function LayoutSection(props) {
|
|
3
|
-
|
|
5
|
+
var _props$content;
|
|
6
|
+
var isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
|
|
7
|
+
return isAdvancedLayoutsPreRelease2 ?
|
|
8
|
+
/*#__PURE__*/
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
10
|
+
React.createElement("div", {
|
|
11
|
+
className: "layout-section-container"
|
|
12
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
13
|
+
"data-layout-section": true,
|
|
14
|
+
"data-layout-columns": props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
|
|
15
|
+
}, props.children)) : /*#__PURE__*/React.createElement("div", {
|
|
4
16
|
"data-layout-section": true
|
|
5
17
|
}, props.children);
|
|
6
18
|
}
|
|
@@ -164,7 +164,7 @@ export var StickyTable = function StickyTable(_ref) {
|
|
|
164
164
|
/**
|
|
165
165
|
* Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
|
|
166
166
|
*/
|
|
167
|
-
function findHorizontalOverflowScrollParent(table) {
|
|
167
|
+
function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
|
|
168
168
|
var parent = table;
|
|
169
169
|
if (!parent) {
|
|
170
170
|
return null;
|
|
@@ -175,6 +175,11 @@ function findHorizontalOverflowScrollParent(table) {
|
|
|
175
175
|
if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
|
|
176
176
|
return parent;
|
|
177
177
|
}
|
|
178
|
+
if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
|
|
179
|
+
// If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
|
|
180
|
+
// use the defaultScrollRootEl.
|
|
181
|
+
return parent;
|
|
182
|
+
}
|
|
178
183
|
}
|
|
179
184
|
return null;
|
|
180
185
|
}
|
|
@@ -217,8 +222,8 @@ export var OverflowParent = /*#__PURE__*/function () {
|
|
|
217
222
|
}
|
|
218
223
|
}], [{
|
|
219
224
|
key: "fromElement",
|
|
220
|
-
value: function fromElement(el) {
|
|
221
|
-
return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
|
|
225
|
+
value: function fromElement(el, defaultScrollRootEl) {
|
|
226
|
+
return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
|
|
222
227
|
}
|
|
223
228
|
}]);
|
|
224
229
|
return OverflowParent;
|
|
@@ -246,7 +246,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
246
246
|
this.resizeObserver.observe(this.stickyHeaderRef.current);
|
|
247
247
|
}
|
|
248
248
|
if (this.props.stickyHeaders) {
|
|
249
|
-
|
|
249
|
+
var _this$props$stickyHea;
|
|
250
|
+
this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
|
|
250
251
|
this.overflowParent.addEventListener('scroll', this.onScroll);
|
|
251
252
|
}
|
|
252
253
|
if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
|
|
@@ -258,7 +259,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
258
259
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
259
260
|
// toggling sticky headers visiblity
|
|
260
261
|
if (this.props.stickyHeaders && !this.overflowParent) {
|
|
261
|
-
|
|
262
|
+
var _this$props$stickyHea2;
|
|
263
|
+
this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
|
|
262
264
|
} else if (!this.props.stickyHeaders && this.overflowParent) {
|
|
263
265
|
this.overflowParent.removeEventListener('scroll', this.onScroll);
|
|
264
266
|
this.overflowParent = null;
|
|
@@ -289,7 +291,14 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
289
291
|
case 'pin-bottom':
|
|
290
292
|
return this.pinTop;
|
|
291
293
|
case 'stick':
|
|
292
|
-
|
|
294
|
+
var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
|
|
295
|
+
if (typeof offsetTop === 'number') {
|
|
296
|
+
var _this$props$stickyHea3, _this$props$stickyHea4;
|
|
297
|
+
var defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
|
|
298
|
+
return offsetTop + defaultScrollRootOffsetTop;
|
|
299
|
+
} else {
|
|
300
|
+
return offsetTop;
|
|
301
|
+
}
|
|
293
302
|
default:
|
|
294
303
|
return undefined;
|
|
295
304
|
}
|
|
@@ -55,7 +55,7 @@ import { countNodes } from './count-nodes';
|
|
|
55
55
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
56
56
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
57
57
|
var packageName = "@atlaskit/renderer";
|
|
58
|
-
var packageVersion = "112.
|
|
58
|
+
var packageVersion = "112.3.1";
|
|
59
59
|
var setAsQueryContainerStyles = css({
|
|
60
60
|
containerName: 'ak-renderer-wrapper',
|
|
61
61
|
containerType: 'inline-size',
|
|
@@ -12,7 +12,7 @@ import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
|
|
|
12
12
|
import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
|
|
13
13
|
import { getGlobalTheme } from '@atlaskit/tokens';
|
|
14
14
|
import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
|
|
15
|
-
import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, backgroundColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
15
|
+
import { tableSharedStyle, columnLayoutSharedStyle, columnLayoutResponsiveSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, backgroundColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
16
16
|
import { shadowClassNames, shadowObserverClassNames } from '@atlaskit/editor-common/ui';
|
|
17
17
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
18
18
|
import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableBorder, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
@@ -138,6 +138,9 @@ function getAnnotationStyles(_ref6) {
|
|
|
138
138
|
}
|
|
139
139
|
var tableRowHeight = 44;
|
|
140
140
|
var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t width: 100%;\n\t display: block;\n\t visibility: hidden;\n\t overflow-x: auto;\n\t position: sticky;\n\t bottom: ", "var(--ds-space-0, 0px)", ";\n\t z-index: 1;\n\t}\n\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t position: absolute;\n\t width: 100%;\n\t height: 1px;\n\t margin-top: -1px;\n\t // need this to avoid sentinel being focused via keyboard\n\t // this still allows it to be detected by intersection observer\n\t visibility: hidden;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t bottom: ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n ");
|
|
141
|
+
var isAdvancedLayoutsPreRelease2 = function isAdvancedLayoutsPreRelease2() {
|
|
142
|
+
return editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
|
|
143
|
+
};
|
|
141
144
|
export var rendererStyles = function rendererStyles(wrapperProps) {
|
|
142
145
|
return function (theme) {
|
|
143
146
|
var _getGlobalTheme = getGlobalTheme(),
|
|
@@ -151,7 +154,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
151
154
|
appearance = wrapperProps.appearance;
|
|
152
155
|
|
|
153
156
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
|
|
154
|
-
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n .", ",\n &\n .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(typography), ruleSharedStyles(), paragraphSharedStyles(typography), listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, smartCardSharedStyles, getAnnotationStyles(wrapperProps), fontFamily(), relativeFontSizeToBase16(fontSize()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : '', shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
|
|
157
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t", "\n\n\t\t\t&\n .", ",\n &\n .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(typography), ruleSharedStyles(), paragraphSharedStyles(typography), listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(), tasksAndDecisionsStyles, smartCardSharedStyles, getAnnotationStyles(wrapperProps), fontFamily(), relativeFontSizeToBase16(fontSize()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), isStickyScrollbarEnabled(appearance) ? stickyScrollbarStyles : '', shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), isAdvancedLayoutsPreRelease2() ? columnLayoutResponsiveSharedStyle : columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
|
|
155
158
|
};
|
|
156
159
|
};
|
|
157
160
|
var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
export default function LayoutSection(props: React.PropsWithChildren<{
|
|
4
|
+
content?: PMNode[];
|
|
5
|
+
}>): JSX.Element;
|
|
@@ -31,7 +31,7 @@ export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef
|
|
|
31
31
|
export declare class OverflowParent {
|
|
32
32
|
private ref;
|
|
33
33
|
private constructor();
|
|
34
|
-
static fromElement(el: HTMLElement | null): OverflowParent;
|
|
34
|
+
static fromElement(el: HTMLElement | null, defaultScrollRootEl?: HTMLElement): OverflowParent;
|
|
35
35
|
get isElement(): boolean;
|
|
36
36
|
get top(): number;
|
|
37
37
|
addEventListener(type: string, cb: EventListenerOrEventListenerObject, ...args: any[]): void;
|
|
@@ -1,8 +1,27 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export type RendererAppearance = 'comment' | 'full-page' | 'full-width' | undefined;
|
|
3
|
+
/**
|
|
4
|
+
* DO NOT USE THESE OPTIONS
|
|
5
|
+
* These StickyHeaderConfig_DO_NOT_USE options are being TEMPORARILY added so Confluence can use Sticky Table Headers
|
|
6
|
+
* in Nav4.
|
|
7
|
+
*
|
|
8
|
+
* They will be cleaned up ASAP after Confluence refactors its page layout to add an explicit scroll container (DISCO-3121)
|
|
9
|
+
*
|
|
10
|
+
* `defaultScrollRoot_DO_NOT_USE` - defaults to undefined - can be used to specify the default OverflowParent if the table
|
|
11
|
+
* doesn't have a parent that explicitly specifies `overflow: scroll` or `overflow-y: scroll`. When undefined, the
|
|
12
|
+
* default OverflowParent will be the window
|
|
13
|
+
* `defaultScrollRootTop_DO_NOT_USE` - defaults to 0 - can be used to specify any offset that should be applied to the
|
|
14
|
+
* sticky table header offset but does not need to be included when determining if the header should be sticky.
|
|
15
|
+
* This is required bcause the llogic that determines if the header should be sticky takes the OverflowParent.offsetTop
|
|
16
|
+
* into account. But the calculation to get the actual header offset does not.
|
|
17
|
+
*/
|
|
18
|
+
type StickyHeaderConfig_DO_NOT_USE = {
|
|
19
|
+
defaultScrollRoot_DO_NOT_USE?: HTMLElement;
|
|
20
|
+
defaultScrollRootTop_DO_NOT_USE?: number;
|
|
21
|
+
};
|
|
3
22
|
export type StickyHeaderConfig = {
|
|
4
23
|
offsetTop?: number;
|
|
5
|
-
};
|
|
24
|
+
} & StickyHeaderConfig_DO_NOT_USE;
|
|
6
25
|
export type StickyHeaderProps = boolean | ({
|
|
7
26
|
show?: boolean;
|
|
8
27
|
} & StickyHeaderConfig);
|
|
@@ -14,3 +33,4 @@ export type NodeComponentsProps = {
|
|
|
14
33
|
[key: string]: React.ComponentType<React.PropsWithChildren<any>>;
|
|
15
34
|
};
|
|
16
35
|
export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
|
|
36
|
+
export {};
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
export default function LayoutSection(props: React.PropsWithChildren<{
|
|
4
|
+
content?: PMNode[];
|
|
5
|
+
}>): JSX.Element;
|
|
@@ -31,7 +31,7 @@ export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef
|
|
|
31
31
|
export declare class OverflowParent {
|
|
32
32
|
private ref;
|
|
33
33
|
private constructor();
|
|
34
|
-
static fromElement(el: HTMLElement | null): OverflowParent;
|
|
34
|
+
static fromElement(el: HTMLElement | null, defaultScrollRootEl?: HTMLElement): OverflowParent;
|
|
35
35
|
get isElement(): boolean;
|
|
36
36
|
get top(): number;
|
|
37
37
|
addEventListener(type: string, cb: EventListenerOrEventListenerObject, ...args: any[]): void;
|
|
@@ -1,8 +1,27 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export type RendererAppearance = 'comment' | 'full-page' | 'full-width' | undefined;
|
|
3
|
+
/**
|
|
4
|
+
* DO NOT USE THESE OPTIONS
|
|
5
|
+
* These StickyHeaderConfig_DO_NOT_USE options are being TEMPORARILY added so Confluence can use Sticky Table Headers
|
|
6
|
+
* in Nav4.
|
|
7
|
+
*
|
|
8
|
+
* They will be cleaned up ASAP after Confluence refactors its page layout to add an explicit scroll container (DISCO-3121)
|
|
9
|
+
*
|
|
10
|
+
* `defaultScrollRoot_DO_NOT_USE` - defaults to undefined - can be used to specify the default OverflowParent if the table
|
|
11
|
+
* doesn't have a parent that explicitly specifies `overflow: scroll` or `overflow-y: scroll`. When undefined, the
|
|
12
|
+
* default OverflowParent will be the window
|
|
13
|
+
* `defaultScrollRootTop_DO_NOT_USE` - defaults to 0 - can be used to specify any offset that should be applied to the
|
|
14
|
+
* sticky table header offset but does not need to be included when determining if the header should be sticky.
|
|
15
|
+
* This is required bcause the llogic that determines if the header should be sticky takes the OverflowParent.offsetTop
|
|
16
|
+
* into account. But the calculation to get the actual header offset does not.
|
|
17
|
+
*/
|
|
18
|
+
type StickyHeaderConfig_DO_NOT_USE = {
|
|
19
|
+
defaultScrollRoot_DO_NOT_USE?: HTMLElement;
|
|
20
|
+
defaultScrollRootTop_DO_NOT_USE?: number;
|
|
21
|
+
};
|
|
3
22
|
export type StickyHeaderConfig = {
|
|
4
23
|
offsetTop?: number;
|
|
5
|
-
};
|
|
24
|
+
} & StickyHeaderConfig_DO_NOT_USE;
|
|
6
25
|
export type StickyHeaderProps = boolean | ({
|
|
7
26
|
show?: boolean;
|
|
8
27
|
} & StickyHeaderConfig);
|
|
@@ -14,3 +33,4 @@ export type NodeComponentsProps = {
|
|
|
14
33
|
[key: string]: React.ComponentType<React.PropsWithChildren<any>>;
|
|
15
34
|
};
|
|
16
35
|
export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
|
|
36
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "112.
|
|
3
|
+
"version": "112.3.1",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
30
30
|
"@atlaskit/button": "^20.3.0",
|
|
31
31
|
"@atlaskit/code": "^15.6.0",
|
|
32
|
-
"@atlaskit/editor-common": "^94.
|
|
32
|
+
"@atlaskit/editor-common": "^94.11.0",
|
|
33
33
|
"@atlaskit/editor-json-transformer": "^8.20.0",
|
|
34
34
|
"@atlaskit/editor-palette": "1.6.3",
|
|
35
35
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
36
|
-
"@atlaskit/editor-shared-styles": "^3.
|
|
36
|
+
"@atlaskit/editor-shared-styles": "^3.2.0",
|
|
37
37
|
"@atlaskit/emoji": "^67.9.0",
|
|
38
38
|
"@atlaskit/feature-gate-js-client": "^4.22.0",
|
|
39
39
|
"@atlaskit/icon": "^22.24.0",
|
|
40
|
-
"@atlaskit/link-datasource": "^3.
|
|
40
|
+
"@atlaskit/link-datasource": "^3.8.0",
|
|
41
41
|
"@atlaskit/media-card": "^78.10.0",
|
|
42
42
|
"@atlaskit/media-client": "^28.0.0",
|
|
43
43
|
"@atlaskit/media-client-react": "^2.3.0",
|
|
@@ -46,12 +46,12 @@
|
|
|
46
46
|
"@atlaskit/media-ui": "^26.0.0",
|
|
47
47
|
"@atlaskit/media-viewer": "^49.2.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
49
|
-
"@atlaskit/smart-card": "^30.
|
|
49
|
+
"@atlaskit/smart-card": "^30.2.0",
|
|
50
50
|
"@atlaskit/status": "^1.5.0",
|
|
51
51
|
"@atlaskit/task-decision": "^17.11.0",
|
|
52
52
|
"@atlaskit/theme": "^14.0.0",
|
|
53
53
|
"@atlaskit/tmp-editor-statsig": "^2.11.0",
|
|
54
|
-
"@atlaskit/tokens": "^2.
|
|
54
|
+
"@atlaskit/tokens": "^2.1.0",
|
|
55
55
|
"@atlaskit/tooltip": "^18.8.0",
|
|
56
56
|
"@babel/runtime": "^7.0.0",
|
|
57
57
|
"@emotion/react": "^11.7.1",
|
|
@@ -140,6 +140,9 @@
|
|
|
140
140
|
},
|
|
141
141
|
"platform_editor_external_media_comment_bugfix": {
|
|
142
142
|
"type": "boolean"
|
|
143
|
+
},
|
|
144
|
+
"platform_editor_advanced_layouts_pre_release_2": {
|
|
145
|
+
"type": "boolean"
|
|
143
146
|
}
|
|
144
147
|
},
|
|
145
148
|
"af:exports": {
|