@atlaskit/renderer 109.1.6 → 109.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 109.2.0
+
+### Minor Changes
+
+- [#64836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64836) [`f3e1604287a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3e1604287a9) - ED-20879 add ssr support for mediaInline
+
+### Patch Changes
+
+- [#64281](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64281) [`b523d60b380c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b523d60b380c) - Remove legacy theming logic from @atlaskit/editor-core and @atlaskit/renderer. Theming is still available via @atlaskit/tokens.
+- [#64694](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64694) [`8d601c3ee546`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d601c3ee546) - ED-21174 Cleaned up FF from ED-19147 and updated testcases
+- [#63266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63266) [`630f6c9fc80c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/630f6c9fc80c) - ED-21576: Added new Example for MBE - Interactive Fake Tabs
+- Updated dependencies
+
 ## 109.1.6
 
 ### Patch Changes

package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -9,24 +9,15 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _styles = require("@atlaskit/editor-common/styles");
 var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
 var _templateObject;
 /** @jsx jsx */
-var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    background-color: ", ";\n\n    &:hover {\n      button {\n        opacity: 1;\n      }\n    }\n\n    button {\n      opacity: 0;\n      transition: opacity 0.2s ease 0s;\n    }\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n    }\n  "])), (0, _components.themed)({
-    light: "var(--ds-surface-raised, ".concat(_colors.N20, ")"),
-    dark: "var(--ds-surface-raised, ".concat(_colors.DN50, ")")
-  })(props), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
-    background: (0, _components.themed)({
-      light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-      dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
-    })(props),
-    leftCoverWidth: "var(--ds-space-300, 24px)"
-  }));
-};
+var codeBlockStyleOverrides = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  background-color: ", ";\n\n  &:hover {\n    button {\n      opacity: 1;\n    }\n  }\n\n  button {\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, local, local, local, scroll, scroll, scroll,\n      scroll;\n    background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n  }\n"])), "var(--ds-surface-raised, ".concat(_colors.N20, ")"), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+  background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+  leftCoverWidth: "var(--ds-space-300, 24px)"
+}));
 var CodeBlockContainer = function CodeBlockContainer(_ref) {
   var allowCopyToClipboard = _ref.allowCopyToClipboard,
     allowWrapCodeBlock = _ref.allowWrapCodeBlock,

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

@@ -25,85 +25,62 @@ 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; }
 var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_ref) {
   var rendererAppearance = _ref.rendererAppearance,
-    intl = _ref.intl,
     clipboardAttrs = _ref.clipboardAttrs,
-    mediaInlineProviders = _ref.mediaInlineProviders,
     collectionName = _ref.collection,
     eventHandlers = _ref.eventHandlers,
-    identifier = _ref.identifier,
-    alt = _ref.alt,
-    width = _ref.width,
-    height = _ref.height,
-    type = _ref.type,
-    borderSize = _ref.borderSize,
-    borderColor = _ref.borderColor;
+    identifier = _ref.identifier;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    contextIdentifierProvider = _useState2[0],
-    setContextIdentifierProvider = _useState2[1];
+    contextIdentifier = _useState2[0],
+    setContextIdentifier = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     fileState = _useState4[0],
     setFileState = _useState4[1];
-  var mediaClient = _react.default.useContext(_mediaClientReact.MediaClientContext);
-  var updateContext = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(contextIdentifierProvider) {
-      var resolvedContextID;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!contextIdentifierProvider) {
-              _context.next = 5;
-              break;
-            }
-            _context.next = 3;
-            return contextIdentifierProvider;
-          case 3:
-            resolvedContextID = _context.sent;
-            setContextIdentifierProvider(resolvedContextID);
-          case 5:
-          case "end":
-            return _context.stop();
+  var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
+  var contextIdentifierProvider = (0, _providerFactory.useProvider)('contextIdentifierProvider');
+  (0, _react.useEffect)(function () {
+    if (contextIdentifierProvider) {
+      contextIdentifierProvider.then(function (resolvedContextID) {
+        if (contextIdentifier !== resolvedContextID) {
+          setContextIdentifier(resolvedContextID);
         }
-      }, _callee);
-    }));
-    return function updateContext(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+      });
+    }
+  }, [contextIdentifier, contextIdentifierProvider]);
   var updateFileState = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id) {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id) {
       var options, _fileState;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
             options = {
               collectionName: collectionName
             };
-            _context2.prev = 1;
+            _context.prev = 1;
             if (!mediaClient) {
-              _context2.next = 7;
+              _context.next = 7;
               break;
             }
-            _context2.next = 5;
+            _context.next = 5;
             return mediaClient.file.getCurrentState(id, options);
           case 5:
-            _fileState = _context2.sent;
+            _fileState = _context.sent;
             setFileState(_fileState);
           case 7:
-            _context2.next = 11;
+            _context.next = 11;
             break;
           case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](1);
+            _context.prev = 9;
+            _context.t0 = _context["catch"](1);
           case 11:
           case "end":
-            return _context2.stop();
+            return _context.stop();
         }
-      }, _callee2, null, [[1, 9]]);
+      }, _callee, null, [[1, 9]]);
     }));
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
+    return function (_x) {
+      return _ref2.apply(this, arguments);
     };
   }(), [collectionName, mediaClient]);
   (0, _react.useEffect)(function () {
@@ -119,14 +96,12 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     };
   }, [identifier, collectionName]);
   (0, _react.useEffect)(function () {
-    var contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
     var id = clipboardAttrs.id;
-    updateContext(contextIdentifierProvider);
     id && updateFileState(id);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
+  }, [contextIdentifier, clipboardAttrs, updateFileState]);
 
   /*
-   * Only show the loading view if the media provider is not ready
+   * Only show the loading view if the media client is not ready
    * prevents calling the media API before the provider is ready
    */
   if (!mediaClient) {
@@ -135,19 +110,6 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
       isSelected: false
     });
   }
-  if (type && (0, _mediaInline.shouldShowInlineImage)(type)) {
-    return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
-      mediaClient: mediaClient,
-      identifier: identifier,
-      alt: alt,
-      width: width,
-      height: height,
-      border: {
-        borderSize: borderSize,
-        borderColor: borderColor
-      }
-    });
-  }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
     var _eventHandlers$media;
     if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
@@ -157,34 +119,31 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
   };
   var shouldOpenMediaViewer = rendererAppearance !== 'mobile';
   var shouldDisplayToolTip = rendererAppearance !== 'mobile';
-  var mediaProvider = mediaInlineProviders.mediaProvider;
   var id = clipboardAttrs.id,
     collection = clipboardAttrs.collection;
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
-    id: id,
-    collection: collection,
-    contextIdentifierProvider: contextIdentifierProvider,
-    fileState: fileState
-  }), {
-    "data-node-type": "mediaInline"
-  }), mediaProvider || mediaClient ? /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
-    identifier: identifier,
-    onClick: handleMediaInlineClick,
-    shouldOpenMediaViewer: shouldOpenMediaViewer,
-    shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: mediaClient.mediaClientConfig,
-    mediaViewerItems: Array.from(_MediaCard.mediaIdentifierMap.values())
-  }) : /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-    message: (intl || (0, _reactIntlNext.createIntl)({
-      locale: 'en'
-    })).formatMessage(_mediaUi.messages.couldnt_load_file)
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    _react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
+      id: id,
+      collection: collection,
+      contextIdentifierProvider: contextIdentifier,
+      fileState: fileState
+    }), {
+      "data-node-type": "mediaInline"
+    }), /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+      identifier: identifier,
+      onClick: handleMediaInlineClick,
+      shouldOpenMediaViewer: shouldOpenMediaViewer,
+      shouldDisplayToolTip: shouldDisplayToolTip,
+      mediaClientConfig: mediaClient.mediaClientConfig,
+      mediaViewerItems: Array.from(_MediaCard.mediaIdentifierMap.values())
+    }))
+  );
 };
 var MediaInline = function MediaInline(props) {
-  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
-    providerFactory = props.providers,
     intl = props.intl,
     rendererAppearance = props.rendererAppearance,
     featureFlags = props.featureFlags,
@@ -192,7 +151,8 @@ var MediaInline = function MediaInline(props) {
     alt = props.alt,
     width = props.width,
     height = props.height,
-    marks = props.marks;
+    marks = props.marks,
+    ssr = props.ssr;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -202,32 +162,35 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
-  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
-    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
-  });
-  var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
-  var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
-  return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
-    providers: ['mediaProvider', 'contextIdentifierProvider'],
-    providerFactory: providerFactory,
-    renderNode: function renderNode(mediaInlineProviders) {
-      return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
-        identifier: identifier,
-        clipboardAttrs: clipboardAttrs,
-        eventHandlers: props.eventHandlers,
-        rendererAppearance: rendererAppearance,
-        intl: intl,
-        mediaInlineProviders: mediaInlineProviders,
-        collection: collection,
-        featureFlags: featureFlags,
-        type: fileType,
-        alt: alt,
-        width: width,
-        height: height,
+  var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
+  if (fileType === 'image') {
+    var _borderMark$attrs$col, _borderMark$attrs$siz;
+    var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+      return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+    });
+    var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+    var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
+    return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
+      mediaClient: mediaClient,
+      identifier: identifier,
+      alt: alt,
+      width: width,
+      height: height,
+      ssr: ssr,
+      border: {
         borderSize: borderSize,
         borderColor: borderColor
-      });
-    }
+      }
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
+    identifier: identifier,
+    clipboardAttrs: clipboardAttrs,
+    eventHandlers: props.eventHandlers,
+    rendererAppearance: rendererAppearance,
+    intl: intl,
+    collection: collection,
+    featureFlags: featureFlags
   });
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(MediaInline);

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

@@ -18,8 +18,10 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
+// eslint-disable-next-line @typescript-eslint/no-duplicate-imports
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
@@ -76,13 +78,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
-  return (0, _react.jsx)("section", {
-    className: "multiBodiedExtension--container",
-    css: containerCSS,
-    "data-testid": "multiBodiedExtension--container",
-    "data-active-child-index": activeChildIndex
-  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
-    var width = _ref2.width;
+  function renderMbeContent(width) {
     return (0, _react.jsx)("div", {
       className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
       style: {
@@ -96,8 +92,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }, (0, _react.jsx)(_ExtensionRenderer.default, (0, _extends2.default)({}, props, {
       actions: actions,
       type: "multiBodiedExtension"
-    }), function (_ref3) {
-      var result = _ref3.result;
+    }), function (_ref2) {
+      var result = _ref2.result;
       try {
         if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
           // Return the content directly if it's a valid JSX.Element
@@ -118,6 +114,15 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       className: "multiBodiedExtension--frames",
       "data-testid": "multiBodiedExtension--frames"
     }, children));
+  }
+  return (0, _react.jsx)("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width;
+    return renderMbeContent(width);
   }));
 };
 var _default = exports.default = MultiBodiedExtension;

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

@@ -16,31 +16,17 @@ var _panel = require("@atlaskit/editor-common/panel");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _emoji = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/emoji"));
 var _emoji2 = _interopRequireDefault(require("./emoji"));
-var _theme = require("@atlaskit/theme");
 var _icons = require("@atlaskit/editor-common/icons");
 var _templateObject, _templateObject2;
 var _excluded = ["backgroundColor", "hasIcon"];
 /** @jsx jsx */
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 var PanelStyled = function PanelStyled(_ref) {
   var backgroundColor = _ref.backgroundColor,
     hasIcon = _ref.hasIcon,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var styles = function styles(theme) {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
-  };
+  var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
   if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor) {
-    styles = function styles(theme) {
-      var tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor);
-      var customStyle = (0, _theme.themed)({
-        dark: _panel.getPanelBackgroundDarkModeColors,
-        light: "background-color: ".concat(tokenColor || backgroundColor, ";")
-      })({
-        theme: theme
-      });
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
-    };
+    styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      &.", " {\n        ", "\n      }\n\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", "\n      }\n    "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;');
   }
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles

package/dist/cjs/react/nodes/table/colgroup.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _table = require("../table");
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
@@ -74,17 +73,11 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
   if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !isInsideOfBlockNode && !tableResized) {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx')) {
-      // for tables with no column widths defined, assume that the real table width
-      // is defined by node.attrs.width
-      var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
-      var defaultColumnWidth = _tableWidth2 / noOfColumns;
-      targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
-    } else {
-      return new Array(noOfColumns).fill({
-        minWidth: "".concat(_styles.tableCellMinWidth, "px")
-      });
-    }
+    // for tables with no column widths defined, assume that the real table width
+    // is defined by node.attrs.width
+    var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
+    var defaultColumnWidth = _tableWidth2 / noOfColumns;
+    targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
   } else if (!tableResized) {
     return null;
   }

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

@@ -468,7 +468,7 @@ var TableWithWidth = function TableWithWidth(props) {
       var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
         return total + val;
       }, 0)) || 0;
-      if (colWidthsSum || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
+      if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
         return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
           renderWidth: renderWidth
         }, props));

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

@@ -54,7 +54,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.1.6";
+var packageVersion = "109.2.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);