@atlaskit/renderer 112.6.0 → 112.6.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/renderer
 
+## 112.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 112.6.1
+
+### Patch Changes
+
+- [#168591](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168591)
+  [`b75a552ecb1c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b75a552ecb1c6) -
+  [ED-25816] Fix: non full-width resized layout becomes full width in full-width renderer
+- Updated dependencies
+
 ## 112.6.0
 
 ### Minor Changes

package/dist/cjs/react/marks/breakout.js

@@ -1,13 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Breakout;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
@@ -25,9 +28,12 @@ var wrapperStyles = (0, _react.css)({
 function Breakout(props) {
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return (0, _react.jsx)("div", {
+    return (0, _react.jsx)("div", (0, _extends2.default)({
       css: wrapperStyles,
-      "data-mode": props.mode,
+      "data-mode": props.mode
+    }, (0, _experiments.editorExperiment)('advanced_layouts', true) && {
+      'data-has-width': !!props.width
+    }, {
       style: {
         width: (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -38,6 +44,6 @@ function Breakout(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-    }, props.children);
+    }), props.children);
   });
 }

package/dist/cjs/react/nodes/multiBodiedExtension.js

@@ -24,7 +24,6 @@ var _templateObject, _templateObject2;
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// eslint-disable-next-line @typescript-eslint/no-duplicate-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {

package/dist/cjs/ui/Renderer/index.js

@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.6.0";
+var packageVersion = "112.6.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/cjs/ui/Renderer/style.js

@@ -100,7 +100,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   if (appearance !== 'full-width') {
     return '';
   }
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t.fabric-editor-breakout-mark,\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
   return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);

package/dist/cjs/ui/annotations/element/mark.js

@@ -26,7 +26,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", "\n\t\t", "\n\n\t\t&:focus,\n\t\t\t&[data-has-focus='true'] {\n\t\t\t", "\n\t\t}\n\t\t&[data-is-hovered='true']:not([data-has-focus='true']),\n  \t\t&:hover:not(:focus) {\n    \t", "\n  \t\t}\n\t}\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? (0, _styles.AnnotationSharedCSSByState)().common : '', (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus, (0, _styles.AnnotationSharedCSSByState)().hover);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", "\n\t\t", "\n\n\t\t&:focus,\n\t\t\t&[data-has-focus='true'] {\n\t\t\t", "\n\t\t}\n\t\t&[data-is-hovered='true']:not([data-has-focus='true']),\n\t\t&:hover:not(:focus) {\n\t\t\t", "\n\t\t}\n\t}\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? (0, _styles.AnnotationSharedCSSByState)().common : '', (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus, (0, _styles.AnnotationSharedCSSByState)().hover);
 };
 var isMobile = function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

package/dist/es2019/react/marks/breakout.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,6 +8,7 @@ import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fg } from '@atlaskit/platform-feature-flags';
 const wrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -18,9 +20,12 @@ const wrapperStyles = css({
 export default function Breakout(props) {
   return jsx(WidthConsumer, null, ({
     width
-  }) => jsx("div", {
+  }) => jsx("div", _extends({
     css: wrapperStyles,
-    "data-mode": props.mode,
+    "data-mode": props.mode
+  }, editorExperiment('advanced_layouts', true) && {
+    'data-has-width': !!props.width
+  }, {
     style: {
       width: fg('platform_editor_advanced_layouts_breakout_resizing') ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -31,5 +36,5 @@ export default function Breakout(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-  }, props.children));
+  }), props.children));
 }

package/dist/es2019/react/nodes/multiBodiedExtension.js

@@ -6,9 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-// eslint-disable-next-line @typescript-eslint/no-duplicate-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';

package/dist/es2019/ui/Renderer/index.js

@@ -45,7 +45,7 @@ import { countNodes } from './count-nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "112.6.0";
+const packageVersion = "112.6.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/es2019/ui/Renderer/style.js

@@ -306,7 +306,8 @@ const fullWidthStyles = ({
 		max-width: ${akEditorFullWidthLayoutWidth}px;
 		margin: 0 auto;
 
-		.fabric-editor-breakout-mark,
+		/* don't override if the breakout mark has width attribute defined */
+		.fabric-editor-breakout-mark:not([data-has-width='true']),
 		.ak-renderer-extension {
 			width: 100% !important;
 		}

package/dist/es2019/ui/annotations/element/mark.js

@@ -28,9 +28,9 @@ const markStyles = () => css`
 			${AnnotationSharedCSSByState().focus}
 		}
 		&[data-is-hovered='true']:not([data-has-focus='true']),
-  		&:hover:not(:focus) {
-    	${AnnotationSharedCSSByState().hover}
-  		}
+		&:hover:not(:focus) {
+			${AnnotationSharedCSSByState().hover}
+		}
 	}
 `;
 const isMobile = () => {

package/dist/esm/react/marks/breakout.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,6 +8,7 @@ import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fg } from '@atlaskit/platform-feature-flags';
 var wrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -18,9 +20,12 @@ var wrapperStyles = css({
 export default function Breakout(props) {
   return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return jsx("div", {
+    return jsx("div", _extends({
       css: wrapperStyles,
-      "data-mode": props.mode,
+      "data-mode": props.mode
+    }, editorExperiment('advanced_layouts', true) && {
+      'data-has-width': !!props.width
+    }, {
       style: {
         width: fg('platform_editor_advanced_layouts_breakout_resizing') ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -31,6 +36,6 @@ export default function Breakout(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-    }, props.children);
+    }), props.children);
   });
 }

package/dist/esm/react/nodes/multiBodiedExtension.js

@@ -9,9 +9,7 @@ var _templateObject, _templateObject2;
  */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-// eslint-disable-next-line @typescript-eslint/no-duplicate-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';

package/dist/esm/ui/Renderer/index.js

@@ -55,7 +55,7 @@ import { countNodes } from './count-nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.6.0";
+var packageVersion = "112.6.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/esm/ui/Renderer/style.js

@@ -91,7 +91,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   if (appearance !== 'full-width') {
     return '';
   }
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t.fabric-editor-breakout-mark,\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);

package/dist/esm/ui/annotations/element/mark.js

@@ -21,7 +21,7 @@ import { inlineCommentMessages } from '../../../messages';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", "\n\t\t", "\n\n\t\t&:focus,\n\t\t\t&[data-has-focus='true'] {\n\t\t\t", "\n\t\t}\n\t\t&[data-is-hovered='true']:not([data-has-focus='true']),\n  \t\t&:hover:not(:focus) {\n    \t", "\n  \t\t}\n\t}\n"])), AnnotationMarkStates.ACTIVE, fg('editor_inline_comments_on_inline_nodes') ? AnnotationSharedCSSByState().common : '', AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus, AnnotationSharedCSSByState().hover);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", "\n\t\t", "\n\n\t\t&:focus,\n\t\t\t&[data-has-focus='true'] {\n\t\t\t", "\n\t\t}\n\t\t&[data-is-hovered='true']:not([data-has-focus='true']),\n\t\t&:hover:not(:focus) {\n\t\t\t", "\n\t\t}\n\t}\n"])), AnnotationMarkStates.ACTIVE, fg('editor_inline_comments_on_inline_nodes') ? AnnotationSharedCSSByState().common : '', AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus, AnnotationSharedCSSByState().hover);
 };
 var isMobile = function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "112.6.0",
+	"version": "112.6.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,20 +24,20 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
 		"@atlaskit/adf-utils": "^19.13.0",
-		"@atlaskit/analytics-listeners": "^8.11.0",
+		"@atlaskit/analytics-listeners": "^8.13.0",
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^95.4.0",
+		"@atlaskit/editor-common": "^95.6.0",
 		"@atlaskit/editor-json-transformer": "^8.21.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/emoji": "^67.11.0",
 		"@atlaskit/feature-gate-js-client": "^4.23.0",
-		"@atlaskit/icon": "^22.25.0",
-		"@atlaskit/link-datasource": "^3.12.0",
+		"@atlaskit/icon": "^22.26.0",
+		"@atlaskit/link-datasource": "^3.13.0",
 		"@atlaskit/media-card": "^78.14.0",
 		"@atlaskit/media-client": "^28.3.0",
 		"@atlaskit/media-client-react": "^2.3.0",
@@ -46,11 +46,11 @@
 		"@atlaskit/media-ui": "^26.2.0",
 		"@atlaskit/media-viewer": "^49.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/smart-card": "^30.3.0",
-		"@atlaskit/status": "^1.7.0",
+		"@atlaskit/smart-card": "^31.0.0",
+		"@atlaskit/status": "^1.8.0",
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.19.0",
+		"@atlaskit/tmp-editor-statsig": "^2.21.0",
 		"@atlaskit/tokens": "^2.3.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",