@atlaskit/renderer 112.6.14 → 112.6.15

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/Renderer/index.js +1 -1
  3. package/dist/cjs/ui/Renderer/style.js +1 -1
  4. package/dist/es2019/ui/Renderer/index.js +1 -1
  5. package/dist/es2019/ui/Renderer/style.js +53 -22
  6. package/dist/esm/ui/Renderer/index.js +1 -1
  7. package/dist/esm/ui/Renderer/style.js +2 -3
  8. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 112.6.15
4
+
5
+ ### Patch Changes
6
+
7
+ - [#174774](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174774)
8
+ [`8e4f117f6abde`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e4f117f6abde) -
9
+ [ux] ED-25744 Resolve styling issues with column sort and background color for nested tables
10
+ - Updated dependencies
11
+
3
12
  ## 112.6.14
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -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.6.14";
68
+ var packageVersion = "112.6.15";
69
69
  var setAsQueryContainerStyles = (0, _react2.css)({
70
70
  containerName: 'ak-renderer-wrapper',
71
71
  containerType: 'inline-size',
package/dist/cjs/ui/Renderer/style.js CHANGED
@@ -85,7 +85,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
85
85
  if (allowNestedHeaderLinks) {
86
86
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
87
87
  }
88
- return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, (0, _experiments.editorExperiment)('table-nested-dnd', true) ? "".concat(_styles.tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(_styles.tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME);
88
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, (0, _experiments.editorExperiment)('table-nested-dnd', true) ? "".concat(_styles.tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(_styles.tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? "\n\t\t\t\t\t// New styles\n\t\t\t\t\t> .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t.").concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t.").concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN, ":hover))\n\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t\t.").concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t") : "\n\t\t\t\t\t// old styles\n\t\t\t\t\t.".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t.").concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t.").concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t\t.").concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t"));
89
89
  };
90
90
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
91
91
  var appearance = _ref3.appearance;
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -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.6.14";
48
+ const packageVersion = "112.6.15";
49
49
  const setAsQueryContainerStyles = css({
50
50
  containerName: 'ak-renderer-wrapper',
51
51
  containerType: 'inline-size',
package/dist/es2019/ui/Renderer/style.js CHANGED
@@ -6,7 +6,7 @@ import { css } from '@emotion/react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { fontFamily, fontSize } from '@atlaskit/theme/constants';
8
8
  import * as colors from '@atlaskit/theme/colors';
9
- import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
9
+ import { N60A, Y300, Y75, N40A } 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';
@@ -14,7 +14,6 @@ import { tableSharedStyle, columnLayoutSharedStyle, columnLayoutResponsiveShared
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';
17
- import { N40A } from '@atlaskit/theme/colors';
18
17
  import { RendererCssClassName } from '../../consts';
19
18
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
20
19
  import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
@@ -255,30 +254,62 @@ const tableSortableColumnStyle = ({
255
254
  ${headingsCss}
256
255
  }
257
256
 
258
- .${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} {
259
- margin: 0;
260
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
261
- opacity: 1;
262
- transition: opacity 0.2s ease-in-out;
263
- }
264
- }
257
+ ${fg('platform_editor_nested_tables_renderer_styles') ? `
258
+ // New styles
259
+ > .${RendererCssClassName.SORTABLE_COLUMN}
260
+ > .${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} {
261
+ margin: 0;
262
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
263
+ opacity: 1;
264
+ transition: opacity 0.2s ease-in-out;
265
+ }
266
+ }
265
267
 
266
- .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
267
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
268
- opacity: 0;
269
- &:focus {
270
- opacity: 1;
268
+ > .${RendererCssClassName.SORTABLE_COLUMN}
269
+ > .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
270
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
271
+ opacity: 0;
272
+ &:focus {
273
+ opacity: 1;
274
+ }
275
+ }
271
276
  }
272
- }
273
- }
274
277
 
275
- &:hover {
276
- .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
277
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
278
- opacity: 1;
278
+ &:hover:not(:has(.${RendererCssClassName.SORTABLE_COLUMN_WRAPPER} .${RendererCssClassName.SORTABLE_COLUMN}:hover))
279
+ > .${RendererCssClassName.SORTABLE_COLUMN}
280
+ > .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
281
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
282
+ opacity: 1;
283
+ }
284
+ }
279
285
  }
280
- }
281
- }
286
+ ` : `
287
+ // old styles
288
+ .${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} {
289
+ margin: 0;
290
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
291
+ opacity: 1;
292
+ transition: opacity 0.2s ease-in-out;
293
+ }
294
+ }
295
+
296
+ .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
297
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
298
+ opacity: 0;
299
+ &:focus {
300
+ opacity: 1;
301
+ }
302
+ }
303
+ }
304
+
305
+ &:hover {
306
+ .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
307
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
308
+ opacity: 1;
309
+ }
310
+ }
311
+ }
312
+ `}
282
313
  }
283
314
  `;
284
315
  };
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -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.6.14";
58
+ var packageVersion = "112.6.15";
59
59
  var setAsQueryContainerStyles = css({
60
60
  containerName: 'ak-renderer-wrapper',
61
61
  containerType: 'inline-size',
package/dist/esm/ui/Renderer/style.js CHANGED
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { fontFamily, fontSize } from '@atlaskit/theme/constants';
10
10
  import * as colors from '@atlaskit/theme/colors';
11
- import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
11
+ import { N60A, Y300, Y75, N40A } 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';
@@ -16,7 +16,6 @@ import { tableSharedStyle, columnLayoutSharedStyle, columnLayoutResponsiveShared
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';
19
- import { N40A } from '@atlaskit/theme/colors';
20
19
  import { RendererCssClassName } from '../../consts';
21
20
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
22
21
  import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
@@ -76,7 +75,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
76
75
  if (allowNestedHeaderLinks) {
77
76
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
78
77
  }
79
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, editorExperiment('table-nested-dnd', true) ? "".concat(tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME);
78
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, editorExperiment('table-nested-dnd', true) ? "".concat(tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? "\n\t\t\t\t\t// New styles\n\t\t\t\t\t> .".concat(RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t.").concat(SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t.").concat(SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.").concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER, " .").concat(RendererCssClassName.SORTABLE_COLUMN, ":hover))\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t\t.").concat(SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t") : "\n\t\t\t\t\t// old styles\n\t\t\t\t\t.".concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t.").concat(SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t.").concat(SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n\t\t\t\t\t\t\t.").concat(SORTABLE_COLUMN_ICON_CLASSNAME, " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t"));
80
79
  };
81
80
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
82
81
  var appearance = _ref3.appearance;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "112.6.14",
3
+ "version": "112.6.15",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,14 +29,14 @@
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": "^96.2.0",
32
+ "@atlaskit/editor-common": "^96.3.0",
33
33
  "@atlaskit/editor-json-transformer": "^8.21.0",
34
34
  "@atlaskit/editor-palette": "1.6.3",
35
35
  "@atlaskit/editor-prosemirror": "6.2.1",
36
36
  "@atlaskit/editor-shared-styles": "^3.2.0",
37
37
  "@atlaskit/emoji": "^67.11.0",
38
38
  "@atlaskit/feature-gate-js-client": "^4.23.0",
39
- "@atlaskit/icon": "^23.0.0",
39
+ "@atlaskit/icon": "^23.1.0",
40
40
  "@atlaskit/link-datasource": "^3.13.0",
41
41
  "@atlaskit/media-card": "^78.15.0",
42
42
  "@atlaskit/media-client": "^28.5.0",
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/media-ui": "^27.0.0",
47
47
  "@atlaskit/media-viewer": "^49.4.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.3.0",
49
- "@atlaskit/smart-card": "^32.5.0",
49
+ "@atlaskit/smart-card": "^32.6.0",
50
50
  "@atlaskit/status": "^1.8.0",
51
51
  "@atlaskit/task-decision": "^17.11.0",
52
52
  "@atlaskit/theme": "^14.0.0",
@@ -158,6 +158,9 @@
158
158
  },
159
159
  "platform_editor_react18_renderer": {
160
160
  "type": "boolean"
161
+ },
162
+ "platform_editor_nested_tables_renderer_styles": {
163
+ "type": "boolean"
161
164
  }
162
165
  },
163
166
  "af:exports": {