@atlaskit/renderer 118.6.13 → 118.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 (11) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/react/marks/breakout.js +3 -4
  3. package/dist/cjs/ui/Renderer/RendererStyleContainer.js +2 -2
  4. package/dist/cjs/ui/Renderer/index.js +1 -1
  5. package/dist/es2019/react/marks/breakout.js +4 -5
  6. package/dist/es2019/ui/Renderer/RendererStyleContainer.js +3 -3
  7. package/dist/es2019/ui/Renderer/index.js +1 -1
  8. package/dist/esm/react/marks/breakout.js +4 -5
  9. package/dist/esm/ui/Renderer/RendererStyleContainer.js +3 -3
  10. package/dist/esm/ui/Renderer/index.js +1 -1
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 118.6.15
4
+
5
+ ### Patch Changes
6
+
7
+ - [#171405](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171405)
8
+ [`cf426feee2ec4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf426feee2ec4) -
9
+ Use css variables for breakout width calculation
10
+ [commit](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/924963a1871eb4c6dd79b8461da35946cca7a484).
11
+
12
+ ## 118.6.14
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 118.6.13
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/react/marks/breakout.js CHANGED
@@ -25,16 +25,15 @@ var wrapperStyles = (0, _react.css)({
25
25
  marginLeft: '50%',
26
26
  transform: 'translateX(-50%)'
27
27
  });
28
- var CONTAINER_WITHOUT_GUTTER = "calc(100cqw - ".concat(_editorSharedStyles.akEditorGutterPadding, "px * 2)");
29
28
  var getWidth = function getWidth(width, mode) {
30
29
  if ((0, _experiments.editorExperiment)('advanced_layouts', true) && width) {
31
- return "min(".concat(width, "px, ").concat(CONTAINER_WITHOUT_GUTTER, ")");
30
+ return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
32
31
  } else {
33
32
  if (mode === 'full-width') {
34
- return "max(".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px, min(").concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(CONTAINER_WITHOUT_GUTTER, "))");
33
+ return "max(".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px, min(").concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))))");
35
34
  }
36
35
  if (mode === 'wide') {
37
- return "min(var(--ak-editor--breakout-wide-layout-width), ".concat(CONTAINER_WITHOUT_GUTTER, ")");
36
+ return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width)))";
38
37
  }
39
38
  }
40
39
  };
package/dist/cjs/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -140,9 +140,9 @@ var baseStyles = (0, _react.css)((_css = {
140
140
  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
141
141
  })));
142
142
  var akEditorBreakpointForSmallDevice = '1266px';
143
-
144
- // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
145
143
  var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
144
+ '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - ".concat(_editorSharedStyles.akEditorGutterPadding, "px * 2)"),
145
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
146
146
  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
147
147
  }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
148
148
  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -62,7 +62,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
62
62
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
63
63
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
64
64
  var packageName = "@atlaskit/renderer";
65
- var packageVersion = "118.6.13";
65
+ var packageVersion = "118.6.15";
66
66
  var setAsQueryContainerStyles = (0, _react2.css)({
67
67
  containerName: 'ak-renderer-wrapper',
68
68
  containerType: 'inline-size'
package/dist/es2019/react/marks/breakout.js CHANGED
@@ -7,7 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import { WidthConsumer } from '@atlaskit/editor-common/ui';
9
9
  import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
10
- import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
10
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
11
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
12
  import { fg } from '@atlaskit/platform-feature-flags';
13
13
  const wrapperStyles = css({
@@ -17,16 +17,15 @@ const wrapperStyles = css({
17
17
  marginLeft: '50%',
18
18
  transform: 'translateX(-50%)'
19
19
  });
20
- const CONTAINER_WITHOUT_GUTTER = `calc(100cqw - ${akEditorGutterPadding}px * 2)`;
21
20
  const getWidth = (width, mode) => {
22
21
  if (editorExperiment('advanced_layouts', true) && width) {
23
- return `min(${width}px, ${CONTAINER_WITHOUT_GUTTER})`;
22
+ return `min(${width}px, var(--ak-editor--breakout-container-without-gutter-width))`;
24
23
  } else {
25
24
  if (mode === 'full-width') {
26
- return `max(${akEditorDefaultLayoutWidth}px, min(${akEditorFullWidthLayoutWidth}px, ${CONTAINER_WITHOUT_GUTTER}))`;
25
+ return `max(${akEditorDefaultLayoutWidth}px, min(${akEditorFullWidthLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width))))`;
27
26
  }
28
27
  if (mode === 'wide') {
29
- return `min(var(--ak-editor--breakout-wide-layout-width), ${CONTAINER_WITHOUT_GUTTER})`;
28
+ return `min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width)))`;
30
29
  }
31
30
  }
32
31
  };
package/dist/es2019/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -11,7 +11,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
11
11
  import { FullPagePadding } from './style';
12
12
  import { fg } from '@atlaskit/platform-feature-flags';
13
13
  import { RendererCssClassName } from '../../consts';
14
- import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
14
+ import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
15
15
  import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
16
16
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
17
17
  import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -199,9 +199,9 @@ const baseStyles = css({
199
199
  }
200
200
  });
201
201
  const akEditorBreakpointForSmallDevice = '1266px';
202
-
203
- // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
204
202
  const responsiveBreakoutWidth = css({
203
+ '--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - ${akEditorGutterPadding}px * 2)`,
204
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
205
205
  '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
206
206
  [`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
207
207
  '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
48
48
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
49
49
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
50
50
  const packageName = "@atlaskit/renderer";
51
- const packageVersion = "118.6.13";
51
+ const packageVersion = "118.6.15";
52
52
  const setAsQueryContainerStyles = css({
53
53
  containerName: 'ak-renderer-wrapper',
54
54
  containerType: 'inline-size'
package/dist/esm/react/marks/breakout.js CHANGED
@@ -7,7 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import { WidthConsumer } from '@atlaskit/editor-common/ui';
9
9
  import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
10
- import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
10
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
11
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
12
  import { fg } from '@atlaskit/platform-feature-flags';
13
13
  var wrapperStyles = css({
@@ -17,16 +17,15 @@ var wrapperStyles = css({
17
17
  marginLeft: '50%',
18
18
  transform: 'translateX(-50%)'
19
19
  });
20
- var CONTAINER_WITHOUT_GUTTER = "calc(100cqw - ".concat(akEditorGutterPadding, "px * 2)");
21
20
  var getWidth = function getWidth(width, mode) {
22
21
  if (editorExperiment('advanced_layouts', true) && width) {
23
- return "min(".concat(width, "px, ").concat(CONTAINER_WITHOUT_GUTTER, ")");
22
+ return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
24
23
  } else {
25
24
  if (mode === 'full-width') {
26
- return "max(".concat(akEditorDefaultLayoutWidth, "px, min(").concat(akEditorFullWidthLayoutWidth, "px, ").concat(CONTAINER_WITHOUT_GUTTER, "))");
25
+ return "max(".concat(akEditorDefaultLayoutWidth, "px, min(").concat(akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))))");
27
26
  }
28
27
  if (mode === 'wide') {
29
- return "min(var(--ak-editor--breakout-wide-layout-width), ".concat(CONTAINER_WITHOUT_GUTTER, ")");
28
+ return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width)))";
30
29
  }
31
30
  }
32
31
  };
package/dist/esm/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -13,7 +13,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
13
13
  import { FullPagePadding } from './style';
14
14
  import { fg } from '@atlaskit/platform-feature-flags';
15
15
  import { RendererCssClassName } from '../../consts';
16
- import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
16
+ import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
17
17
  import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
18
18
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
19
19
  import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -133,9 +133,9 @@ var baseStyles = css((_css = {
133
133
  color: "var(--ds-text-subtlest, ".concat(N200, ")")
134
134
  })));
135
135
  var akEditorBreakpointForSmallDevice = '1266px';
136
-
137
- // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
138
136
  var responsiveBreakoutWidth = css(_defineProperty({
137
+ '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - ".concat(akEditorGutterPadding, "px * 2)"),
138
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
139
139
  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px")
140
140
  }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
141
141
  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
53
53
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
54
54
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
55
55
  var packageName = "@atlaskit/renderer";
56
- var packageVersion = "118.6.13";
56
+ var packageVersion = "118.6.15";
57
57
  var setAsQueryContainerStyles = css({
58
58
  containerName: 'ak-renderer-wrapper',
59
59
  containerType: 'inline-size'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "118.6.13",
3
+ "version": "118.6.15",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
43
43
  "@atlaskit/link": "^3.2.0",
44
44
  "@atlaskit/link-datasource": "^4.11.0",
45
45
  "@atlaskit/media-card": "^79.3.0",
46
- "@atlaskit/media-client": "^33.3.0",
46
+ "@atlaskit/media-client": "^33.4.0",
47
47
  "@atlaskit/media-client-react": "^4.1.0",
48
48
  "@atlaskit/media-common": "^12.1.0",
49
49
  "@atlaskit/media-filmstrip": "^50.1.0",
@@ -56,7 +56,7 @@
56
56
  "@atlaskit/status": "^3.0.0",
57
57
  "@atlaskit/task-decision": "^19.2.0",
58
58
  "@atlaskit/theme": "^18.0.0",
59
- "@atlaskit/tmp-editor-statsig": "^6.2.0",
59
+ "@atlaskit/tmp-editor-statsig": "^7.0.0",
60
60
  "@atlaskit/tokens": "^5.1.0",
61
61
  "@atlaskit/tooltip": "^20.3.0",
62
62
  "@atlaskit/visually-hidden": "^3.0.0",