@atlaskit/renderer 134.0.3 → 134.0.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 134.0.4
+
+### Patch Changes
+
+- [`620801a55eefe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/620801a55eefe) -
+  Prevent extensions inside fit-to-content tables from collapsing their intrinsic width in the
+  editor and renderer
+- Updated dependencies
+
 ## 134.0.3
 
 ### Patch Changes

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

@@ -38,6 +38,9 @@ var BodiedExtension = function BodiedExtension(props) {
   .map(function (child) {
     return /*#__PURE__*/_react.default.isValidElement(child) ? child.props.nodeType === 'table' : false;
   }).every(Boolean);
+  var isInsideOfTable = path.some(function (node) {
+    return node.type.name === 'table';
+  });
   var validationContextValue = (0, _react.useMemo)(function () {
     return {
       allowNestedTables: true
@@ -67,6 +70,7 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return (0, _extension.renderExtension)(result, layout, {
           isTopLevel: path.length < 1,
+          isInsideOfTable: isInsideOfTable,
           rendererAppearance: props.rendererAppearance,
           fireAnalyticsEvent: fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
@@ -79,6 +83,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
       isTopLevel: path.length < 1,
+      isInsideOfTable: isInsideOfTable,
       rendererAppearance: props.rendererAppearance,
       fireAnalyticsEvent: fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);

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

@@ -14,6 +14,7 @@ var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRende
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("../../consts");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _breakout = require("../utils/breakout");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -85,10 +86,13 @@ var renderExtension = exports.renderExtension = function renderExtension(content
 
   // by default, we assume the extension is at top level, (direct child of doc node)
   var _ref2 = options || {},
+    _ref2$isInsideOfTable = _ref2.isInsideOfTable,
+    isInsideOfTable = _ref2$isInsideOfTable === void 0 ? false : _ref2$isInsideOfTable,
     _ref2$isTopLevel = _ref2.isTopLevel,
     isTopLevel = _ref2$isTopLevel === void 0 ? true : _ref2$isTopLevel,
     rendererAppearance = _ref2.rendererAppearance,
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
+
   // we should only use custom layout for full-page appearance
   var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
@@ -130,7 +134,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
-      css: [!isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
+      css: [!(isInsideOfTable && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -160,7 +164,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
-      css: [!isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
+      css: [!(isInsideOfTable && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
     return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -181,6 +185,9 @@ var Extension = function Extension(props) {
     nodeHeight = props.nodeHeight,
     localId = props.localId,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+  var isInsideOfTable = path.some(function (node) {
+    return node.type.name === 'table';
+  });
   return (0, _react.jsx)(_ExtensionRenderer.default
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -195,6 +202,7 @@ var Extension = function Extension(props) {
       if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
+          isInsideOfTable: isInsideOfTable,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
           tabIndex: props.tabIndex,
@@ -213,6 +221,7 @@ var Extension = function Extension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
+      isInsideOfTable: isInsideOfTable,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
       tabIndex: props.tabIndex,

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

@@ -73,7 +73,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "134.0.2";
+var packageVersion = "134.0.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -28,6 +28,7 @@ const BodiedExtension = props => {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   .map(child => /*#__PURE__*/React.isValidElement(child) ? child.props.nodeType === 'table' : false).every(Boolean);
+  const isInsideOfTable = path.some(node => node.type.name === 'table');
   const validationContextValue = useMemo(() => ({
     allowNestedTables: true
   }), []);
@@ -56,6 +57,7 @@ const BodiedExtension = props => {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
+          isInsideOfTable,
           rendererAppearance: props.rendererAppearance,
           fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
@@ -68,6 +70,7 @@ const BodiedExtension = props => {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1,
+      isInsideOfTable,
       rendererAppearance: props.rendererAppearance,
       fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);

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

@@ -12,6 +12,7 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calcBreakoutWidthCss } from '../utils/breakout';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -65,10 +66,12 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
 
   // by default, we assume the extension is at top level, (direct child of doc node)
   const {
+    isInsideOfTable = false,
     isTopLevel = true,
     rendererAppearance,
     fireAnalyticsEvent
   } = options || {};
+
   // we should only use custom layout for full-page appearance
   const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
   const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
@@ -110,7 +113,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
-      css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
+      css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -141,7 +144,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
-      css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
+      css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -162,6 +165,7 @@ const Extension = props => {
     localId,
     isInsideOfInlineExtension
   } = props;
+  const isInsideOfTable = path.some(node => node.type.name === 'table');
   return jsx(ExtensionRenderer
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -177,6 +181,7 @@ const Extension = props => {
       if (result && /*#__PURE__*/React.isValidElement(result)) {
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
+          isInsideOfTable,
           handleRef,
           shadowClassNames,
           tabIndex: props.tabIndex,
@@ -195,6 +200,7 @@ const Extension = props => {
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
+      isInsideOfTable,
       handleRef,
       shadowClassNames,
       tabIndex: props.tabIndex,

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

@@ -59,7 +59,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "134.0.2";
+const packageVersion = "134.0.3";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -29,6 +29,9 @@ var BodiedExtension = function BodiedExtension(props) {
   .map(function (child) {
     return /*#__PURE__*/React.isValidElement(child) ? child.props.nodeType === 'table' : false;
   }).every(Boolean);
+  var isInsideOfTable = path.some(function (node) {
+    return node.type.name === 'table';
+  });
   var validationContextValue = useMemo(function () {
     return {
       allowNestedTables: true
@@ -58,6 +61,7 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
+          isInsideOfTable: isInsideOfTable,
           rendererAppearance: props.rendererAppearance,
           fireAnalyticsEvent: fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
@@ -70,6 +74,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1,
+      isInsideOfTable: isInsideOfTable,
       rendererAppearance: props.rendererAppearance,
       fireAnalyticsEvent: fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);

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

@@ -12,6 +12,7 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calcBreakoutWidthCss } from '../utils/breakout';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -75,10 +76,13 @@ export var renderExtension = function renderExtension(content, layout) {
 
   // by default, we assume the extension is at top level, (direct child of doc node)
   var _ref2 = options || {},
+    _ref2$isInsideOfTable = _ref2.isInsideOfTable,
+    isInsideOfTable = _ref2$isInsideOfTable === void 0 ? false : _ref2$isInsideOfTable,
     _ref2$isTopLevel = _ref2.isTopLevel,
     isTopLevel = _ref2$isTopLevel === void 0 ? true : _ref2$isTopLevel,
     rendererAppearance = _ref2.rendererAppearance,
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
+
   // we should only use custom layout for full-page appearance
   var canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
@@ -120,7 +124,7 @@ export var renderExtension = function renderExtension(content, layout) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
-      css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
+      css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -150,7 +154,7 @@ export var renderExtension = function renderExtension(content, layout) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
-      css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
+      css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -171,6 +175,9 @@ var Extension = function Extension(props) {
     nodeHeight = props.nodeHeight,
     localId = props.localId,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+  var isInsideOfTable = path.some(function (node) {
+    return node.type.name === 'table';
+  });
   return jsx(ExtensionRenderer
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -185,6 +192,7 @@ var Extension = function Extension(props) {
       if (result && /*#__PURE__*/React.isValidElement(result)) {
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
+          isInsideOfTable: isInsideOfTable,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
           tabIndex: props.tabIndex,
@@ -203,6 +211,7 @@ var Extension = function Extension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
+      isInsideOfTable: isInsideOfTable,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
       tabIndex: props.tabIndex,

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

@@ -64,7 +64,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "134.0.2";
+var packageVersion = "134.0.3";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/nodes/extension.d.ts

@@ -41,6 +41,7 @@ type AllOrNone<T> = T | {
 };
 type RenderExtensionOptions = {
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    isInsideOfTable?: boolean;
     isTopLevel?: boolean;
     rendererAppearance?: RendererAppearance;
 } & AllOrNone<OverflowShadowProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "134.0.3",
+	"version": "134.0.4",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
 		"@atlaskit/editor-smart-link-draggable": "^1.2.0",
 		"@atlaskit/emoji": "^71.15.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
-		"@atlaskit/icon": "^37.2.0",
+		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/link-datasource": "^6.4.0",
 		"@atlaskit/link-extractors": "^3.2.0",
@@ -84,7 +84,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^117.0.0",
+		"@atlaskit/editor-common": "^117.2.0",
 		"@atlaskit/link-provider": "^5.3.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",
@@ -104,8 +104,8 @@
 		"@atlaskit/media-test-helpers": "^42.2.0",
 		"@atlaskit/mention": "^27.12.0",
 		"@atlaskit/modal-dialog": "^16.2.0",
-		"@atlaskit/navigation-system": "^10.10.0",
-		"@atlaskit/profilecard": "^26.14.0",
+		"@atlaskit/navigation-system": "^10.11.0",
+		"@atlaskit/profilecard": "^26.15.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/a11y-jest-testing": "^0.14.0",