@atlaskit/renderer 112.6.14 → 112.6.16

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 (14) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/react/marks/breakout.js +2 -1
  3. package/dist/cjs/ui/Renderer/breakout-ssr.js +4 -1
  4. package/dist/cjs/ui/Renderer/index.js +1 -1
  5. package/dist/cjs/ui/Renderer/style.js +1 -1
  6. package/dist/es2019/react/marks/breakout.js +2 -1
  7. package/dist/es2019/ui/Renderer/breakout-ssr.js +4 -0
  8. package/dist/es2019/ui/Renderer/index.js +1 -1
  9. package/dist/es2019/ui/Renderer/style.js +53 -22
  10. package/dist/esm/react/marks/breakout.js +2 -1
  11. package/dist/esm/ui/Renderer/breakout-ssr.js +4 -1
  12. package/dist/esm/ui/Renderer/index.js +1 -1
  13. package/dist/esm/ui/Renderer/style.js +2 -3
  14. package/package.json +12 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 112.6.16
4
+
5
+ ### Patch Changes
6
+
7
+ - [#176983](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176983)
8
+ [`b62801c154a5b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b62801c154a5b) -
9
+ Migrated smart-card proxied exports (linking-common, link-provider, json-ld-types) to import from
10
+ modules directly
11
+
12
+ ## 112.6.15
13
+
14
+ ### Patch Changes
15
+
16
+ - [#174774](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174774)
17
+ [`8e4f117f6abde`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e4f117f6abde) -
18
+ [ux] ED-25744 Resolve styling issues with column sort and background color for nested tables
19
+ - Updated dependencies
20
+
3
21
  ## 112.6.14
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/react/marks/breakout.js CHANGED
@@ -31,7 +31,8 @@ function Breakout(props) {
31
31
  css: wrapperStyles,
32
32
  "data-mode": props.mode
33
33
  }, (0, _experiments.editorExperiment)('advanced_layouts', true) && {
34
- 'data-has-width': !!props.width
34
+ 'data-has-width': !!props.width,
35
+ 'data-width': props.width
35
36
  }, {
36
37
  style: {
37
38
  width: (0, _experiments.editorExperiment)('advanced_layouts', true) ?
package/dist/cjs/ui/Renderer/breakout-ssr.js CHANGED
@@ -40,7 +40,7 @@ function BreakoutSSRInlineScript() {
40
40
  function createBreakoutInlineScript(id) {
41
41
  return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing')), ");\n })(window);\n");
42
42
  }
43
- var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
43
+ var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcBreakoutWithCustomWidth = ").concat(_utils.breakoutConsts.calcBreakoutWithCustomWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
44
44
  function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
45
45
  var MEDIA_NODE_TYPE = 'mediaSingle';
46
46
  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
@@ -76,6 +76,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
76
76
  var width;
77
77
  var node = maybeNode;
78
78
  var mode = node.dataset.mode || node.dataset.layout || '';
79
+ var resizedBreakout = node.dataset.hasWidth === 'true';
79
80
  if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
80
81
  return;
81
82
  }
@@ -86,6 +87,8 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
86
87
  var rendererWidth = renderer.offsetWidth;
87
88
  var effectiveWidth = rendererWidth - breakoutConsts.padding;
88
89
  width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
90
+ } else if (resizedBreakout) {
91
+ width = breakoutConsts.calcBreakoutWithCustomWidth(mode, node.dataset.width || null, renderer.offsetWidth);
89
92
  } else {
90
93
  width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
91
94
  }
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.16";
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/react/marks/breakout.js CHANGED
@@ -23,7 +23,8 @@ export default function Breakout(props) {
23
23
  css: wrapperStyles,
24
24
  "data-mode": props.mode
25
25
  }, editorExperiment('advanced_layouts', true) && {
26
- 'data-has-width': !!props.width
26
+ 'data-has-width': !!props.width,
27
+ 'data-width': props.width
27
28
  }, {
28
29
  style: {
29
30
  width: editorExperiment('advanced_layouts', true) ?
package/dist/es2019/ui/Renderer/breakout-ssr.js CHANGED
@@ -42,6 +42,7 @@ export const breakoutInlineScriptContext = `
42
42
  breakoutConsts.mapBreakpointToLayoutMaxWidth = ${breakoutConsts.mapBreakpointToLayoutMaxWidth.toString()};
43
43
  breakoutConsts.getBreakpoint = ${breakoutConsts.getBreakpoint.toString()};
44
44
  breakoutConsts.calcBreakoutWidth = ${breakoutConsts.calcBreakoutWidth.toString()};
45
+ breakoutConsts.calcBreakoutWithCustomWidth = ${breakoutConsts.calcBreakoutWithCustomWidth.toString()};
45
46
  breakoutConsts.calcLineLength = ${breakoutConsts.calcLineLength.toString()};
46
47
  breakoutConsts.calcWideWidth = ${breakoutConsts.calcWideWidth.toString()};
47
48
  breakoutConsts.FullPagePadding = ${FullPagePadding.toString()};
@@ -81,6 +82,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
81
82
  let width;
82
83
  const node = maybeNode;
83
84
  const mode = node.dataset.mode || node.dataset.layout || '';
85
+ const resizedBreakout = node.dataset.hasWidth === 'true';
84
86
  if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
85
87
  return;
86
88
  }
@@ -91,6 +93,8 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
91
93
  const rendererWidth = renderer.offsetWidth;
92
94
  const effectiveWidth = rendererWidth - breakoutConsts.padding;
93
95
  width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
96
+ } else if (resizedBreakout) {
97
+ width = breakoutConsts.calcBreakoutWithCustomWidth(mode, node.dataset.width || null, renderer.offsetWidth);
94
98
  } else {
95
99
  width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
96
100
  }
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.16";
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/react/marks/breakout.js CHANGED
@@ -23,7 +23,8 @@ export default function Breakout(props) {
23
23
  css: wrapperStyles,
24
24
  "data-mode": props.mode
25
25
  }, editorExperiment('advanced_layouts', true) && {
26
- 'data-has-width': !!props.width
26
+ 'data-has-width': !!props.width,
27
+ 'data-width': props.width
27
28
  }, {
28
29
  style: {
29
30
  width: editorExperiment('advanced_layouts', true) ?
package/dist/esm/ui/Renderer/breakout-ssr.js CHANGED
@@ -32,7 +32,7 @@ export function BreakoutSSRInlineScript() {
32
32
  export function createBreakoutInlineScript(id) {
33
33
  return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(Boolean(fg('platform-fix-table-ssr-resizing')), ");\n })(window);\n");
34
34
  }
35
- export var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
35
+ export var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcBreakoutWithCustomWidth = ").concat(breakoutConsts.calcBreakoutWithCustomWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
36
36
  function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
37
37
  var MEDIA_NODE_TYPE = 'mediaSingle';
38
38
  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
@@ -68,6 +68,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
68
68
  var width;
69
69
  var node = maybeNode;
70
70
  var mode = node.dataset.mode || node.dataset.layout || '';
71
+ var resizedBreakout = node.dataset.hasWidth === 'true';
71
72
  if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
72
73
  return;
73
74
  }
@@ -78,6 +79,8 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
78
79
  var rendererWidth = renderer.offsetWidth;
79
80
  var effectiveWidth = rendererWidth - breakoutConsts.padding;
80
81
  width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
82
+ } else if (resizedBreakout) {
83
+ width = breakoutConsts.calcBreakoutWithCustomWidth(mode, node.dataset.width || null, renderer.offsetWidth);
81
84
  } else {
82
85
  width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
83
86
  }
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.16";
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.16",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,18 +26,18 @@
26
26
  "@atlaskit/adf-utils": "^19.14.0",
27
27
  "@atlaskit/analytics-listeners": "^8.13.0",
28
28
  "@atlaskit/analytics-namespaced-context": "^6.12.0",
29
- "@atlaskit/analytics-next": "^10.1.0",
29
+ "@atlaskit/analytics-next": "^10.2.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",
40
- "@atlaskit/link-datasource": "^3.13.0",
39
+ "@atlaskit/icon": "^23.1.0",
40
+ "@atlaskit/link-datasource": "^3.14.0",
41
41
  "@atlaskit/media-card": "^78.15.0",
42
42
  "@atlaskit/media-client": "^28.5.0",
43
43
  "@atlaskit/media-client-react": "^2.4.0",
@@ -46,11 +46,11 @@
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.7.0",
50
50
  "@atlaskit/status": "^1.8.0",
51
51
  "@atlaskit/task-decision": "^17.11.0",
52
52
  "@atlaskit/theme": "^14.0.0",
53
- "@atlaskit/tmp-editor-statsig": "^2.23.0",
53
+ "@atlaskit/tmp-editor-statsig": "^2.24.0",
54
54
  "@atlaskit/tokens": "^2.4.0",
55
55
  "@atlaskit/tooltip": "^18.9.0",
56
56
  "@babel/runtime": "^7.0.0",
@@ -62,7 +62,7 @@
62
62
  "uuid": "^3.1.0"
63
63
  },
64
64
  "peerDependencies": {
65
- "@atlaskit/link-provider": "^1.17.0",
65
+ "@atlaskit/link-provider": "^1.18.0",
66
66
  "@atlaskit/media-core": "^34.3.0",
67
67
  "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
68
68
  "react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0"
@@ -72,7 +72,7 @@
72
72
  "@af/visual-regression": "*",
73
73
  "@atlaskit/analytics-gas-types": "^5.1.0",
74
74
  "@atlaskit/css-reset": "^6.11.0",
75
- "@atlaskit/link-provider": "^1.17.0",
75
+ "@atlaskit/link-provider": "^1.18.0",
76
76
  "@atlaskit/link-test-helpers": "^7.5.0",
77
77
  "@atlaskit/linking-common": "^6.0.0",
78
78
  "@atlaskit/media-core": "^34.3.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": {