@atlaskit/renderer 109.2.6 → 109.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 109.3.0
+
+### Minor Changes
+
+- [#68535](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68535) [`9d9c89e4ff0c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9d9c89e4ff0c) - Implement smart-card actionOptions prop within editor and expose prop to editor and renderer
+- [#69296](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69296) [`de8513419971`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/de8513419971) - EDF-26 Cleaned up platform.editor.use-lch-for-color-inversion_1qv8ol feature flag. Text and table cell background colors now use the LCH inversion method by default.
+
+### Patch Changes
+
+- [#69403](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69403) [`a0f886ed02f4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0f886ed02f4) - fix blurriness in images by reverting to using container width for media single
+- [#68264](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68264) [`daa71f6aa162`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/daa71f6aa162) - [ux] ED-21883: Updated MultiBodied Extension related CSS and selections
+- Updated dependencies
+
+## 109.2.7
+
+### Patch Changes
+
+- [#67831](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67831) [`6027f6646d15`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6027f6646d15) - Fix table scroll when pressing CMD+A to select all
+
 ## 109.2.6
 
 ### Patch Changes

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

@@ -12,40 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _tokens = require("@atlaskit/tokens");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
-/**
- * This function is duplicated in
- * - @atlaskit/adf-schema
- * - ../nodes/tableCell.tsx
- * it takes a color string, and if the color string is a hex or rgb value
- * it will invert the color and return the inverted color.
- */
-function invertCustomColor(customColor) {
-  var hex;
-  if ((0, _adfSchema.isHex)(customColor)) {
-    hex = customColor;
-  } else if ((0, _adfSchema.isRgb)(customColor)) {
-    hex = (0, _adfSchema.rgbToHex)(customColor);
-    if (hex === null) {
-      // in some cases the rgb color is invalid, in this case we just return the color
-      // See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
-      // to align with the rgbToHex function
-      return customColor;
-    }
-  } else {
-    return customColor;
-  }
-  var hexWithoutHash = hex.replace('#', '');
-
-  // This inverts the hex color by
-  // 1. converting the hex code to a number
-  // 2. XORing it with 0xffffff
-  // 3. Converting the result back to hex
-  // 4. Removing the leading 1 from the result
-  return "#".concat((Number("0x1".concat(hexWithoutHash)) ^ 0xffffff).toString(16).substring(1).toUpperCase());
-}
 function TextColor(props) {
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
@@ -77,12 +45,7 @@ function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      // and if the feature flag is enabled we need to use the LCH conversion method
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
-        paletteColorValue = (0, _adfSchema.getDarkModeLCHColor)(props.color);
-      } else {
-        paletteColorValue = invertCustomColor(props.color);
-      }
+      paletteColorValue = (0, _adfSchema.getDarkModeLCHColor)(props.color);
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

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

@@ -36,7 +36,8 @@ function BlockCard(props) {
     smartLinks = props.smartLinks,
     isNodeNested = props.isNodeNested;
   var _ref = smartLinks || {},
-    showServerActions = _ref.showServerActions;
+    showServerActions = _ref.showServerActions,
+    actionOptions = _ref.actionOptions;
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
   var platform = (0, _react.useMemo)(function () {
     return (0, _utils.getPlatform)(rendererAppearance);
@@ -46,7 +47,9 @@ function BlockCard(props) {
     data: data,
     onClick: onClick,
     container: portal,
-    isDatasource: !!props.datasource
+    isDatasource: !!props.datasource,
+    actionOptions: actionOptions,
+    showServerActions: showServerActions
   };
   var analyticsData = {
     attributes: {
@@ -123,9 +126,7 @@ function BlockCard(props) {
     unsupportedComponent: _ui.UnsupportedBlock
   }, cardProps), (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "block",
-    showActions: rendererAppearance !== 'mobile',
-    platform: platform,
-    showServerActions: showServerActions
+    platform: platform
   }, cardProps, {
     onError: onError
   })))));

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

@@ -37,6 +37,9 @@ function EmbedCard(props) {
     smartLinks = props.smartLinks;
   var embedIframeRef = (0, _react2.useRef)(null);
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
+  var _ref = smartLinks || {},
+    showServerActions = _ref.showServerActions,
+    actionOptions = _ref.actionOptions;
   var platform = (0, _react2.useMemo)(function () {
     return (0, _utils.getPlatform)(rendererAppearance);
   }, [rendererAppearance]);
@@ -46,8 +49,9 @@ function EmbedCard(props) {
     onClick: onClick,
     container: portal,
     platform: platform,
-    showActions: platform === 'web',
-    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined,
+    actionOptions: actionOptions,
+    showServerActions: showServerActions
   };
   var _useState = (0, _react2.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -87,8 +91,8 @@ function EmbedCard(props) {
     hasPreview = _useState6[0],
     setPreviewAvailableState = _useState6[1];
   var cardContext = (0, _react2.useContext)(_linkProvider.SmartCardContext);
-  var onResolve = function onResolve(_ref) {
-    var resolvedAspectRatio = _ref.aspectRatio;
+  var onResolve = function onResolve(_ref2) {
+    var resolvedAspectRatio = _ref2.aspectRatio;
     var hasPreviewOnResolve = !!(cardContext && url && cardContext.extractors.getPreview(url, platform));
     if (!hasPreviewOnResolve) {
       setPreviewAvailableState(false);
@@ -104,8 +108,8 @@ function EmbedCard(props) {
   };
   return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
-  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
-    var documentWidth = _ref2.width;
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref3) {
+    var documentWidth = _ref3.width;
     var isFullWidth = rendererAppearance === 'full-width';
     var containerWidth = documentWidth;
     if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && !containerWidth) {
@@ -123,8 +127,8 @@ function EmbedCard(props) {
     }
     var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
     var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
-    var onError = function onError(_ref3) {
-      var err = _ref3.err;
+    var onError = function onError(_ref4) {
+      var err = _ref4.err;
       if (err) {
         throw err;
       }

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

@@ -31,6 +31,7 @@ var InlineCard = function InlineCard(props) {
     showAuthTooltip = _ref.showAuthTooltip,
     hideHoverPreview = _ref.hideHoverPreview,
     showServerActions = _ref.showServerActions,
+    actionOptions = _ref.actionOptions,
     ssr = _ref.ssr;
   var analyticsData = {
     attributes: {
@@ -47,6 +48,7 @@ var InlineCard = function InlineCard(props) {
       url: url,
       showAuthTooltip: showAuthTooltip,
       showHoverPreview: !hideHoverPreview,
+      actionOptions: actionOptions,
       showServerActions: showServerActions,
       onClick: onClick
     }));
@@ -69,6 +71,7 @@ var InlineCard = function InlineCard(props) {
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     showAuthTooltip: showAuthTooltip,
+    actionOptions: actionOptions,
     showServerActions: showServerActions
   }, cardProps, {
     onResolve: function onResolve(data) {

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -126,10 +126,7 @@ var MediaSingle = function MediaSingle(props) {
   var isFullWidth = rendererAppearance === 'full-width';
   var calcDimensions = function calcDimensions(mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var isPixel = widthType === 'pixel';
-
-    // max width and height are already handled in mediaSingle
-    var maxWidth = isPixel && widthAttr ? widthAttr : containerWidth;
+    var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),

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

@@ -51,7 +51,7 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
   }, [updateActiveChild, children]);
   return actions;
 };
-var navigationCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  .mbe-add-tab-button,\n  .mbe-remove-tab {\n    display: none;\n  }\n"])), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-background-inverse-subtle, ".concat(_colors.N50, ")"));
+var navigationCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  border-bottom: none;\n  .mbe-add-tab-button,\n  .mbe-remove-tab {\n    display: none;\n  }\n"])), "var(--ds-border, ".concat(_colors.N40, ")"));
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var children = props.children,
     _props$layout = props.layout,
@@ -75,7 +75,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     updateActiveChild: updateActiveChild,
     children: children
   });
-  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 containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 0;\n    border-radius: ", ";\n    position: relative;\n    vertical-align: middle;\n    min-height: 100px;\n    .ak-renderer-extension {\n      margin-top: 0 !important;\n    }\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      padding: ", " !important;\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n      background: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n\n      .bodiedExtensionView-content-wrap {\n        margin-top: ", " !important;\n      }\n      .extensionView-content-wrap {\n        margin-top: ", " !important;\n      }\n    }\n  "])), "var(--ds-border-radius, 3px)", activeChildIndex + 1, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-surface, white)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   function renderMbeContent(width) {

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

@@ -34,7 +34,7 @@ var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, r
   } else {
     stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
   }
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    width: ", "px;\n    z-index: ", ";\n    &\n      .", ",\n      &\n      .", "\n      > table {\n      margin-top: 0;\n      margin-bottom: 0;\n      tr {\n        background: ", ";\n      }\n    }\n\n    border-top: ", "px solid\n      ", ";\n    background: ", ";\n    box-shadow: 0 6px 4px -4px ", ";\n\n    div[data-expanded='false'] & {\n      display: none;\n    }\n\n    &\n      .", ".is-sticky.right-shadow::after,\n      &\n      .", ".is-sticky.left-shadow::before {\n      top: 0px;\n      height: 100%;\n    }\n\n    &.fixedTableDiv[mode='stick'] {\n      z-index: ", ";\n    }\n  "])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER, stickyHeaderZIndex);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    width: ", "px;\n    z-index: ", ";\n    &\n      .", ",\n      &\n      .", "\n      > table {\n      margin-top: 0;\n      margin-bottom: 0;\n      tr {\n        background: ", ";\n      }\n    }\n\n    border-top: ", "px solid\n      ", ";\n    background: ", ";\n    box-shadow: 0 6px 4px -4px ", ";\n\n    div[data-expanded='false'] & {\n      display: none;\n    }\n\n    &\n      .", ".is-sticky.right-shadow::after,\n      &\n      .", ".is-sticky.left-shadow::before {\n      top: 0px;\n      height: 100%;\n    }\n\n    &.fixed-table-div-custom-table-resizing[mode='stick'] {\n      z-index: ", ";\n    }\n  "])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER, stickyHeaderZIndex);
 };
 var FixedTableDiv = exports.FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
@@ -47,7 +47,7 @@ var FixedTableDiv = exports.FixedTableDiv = function FixedTableDiv(props) {
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, attrs, {
     "data-testid": "sticky-table-fixed",
-    className: (0, _table2.isTableResizingEnabled)(rendererAppearance) ? 'fixedTableDiv' : '',
+    className: (0, _table2.isTableResizingEnabled)(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : '',
     css: fixedTableCss
   }), props.children);
 };

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

@@ -17,7 +17,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _consts = require("../../consts");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../messages");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -69,38 +68,6 @@ var getDataAttributes = function getDataAttributes(colwidth, background) {
   }
   return attrs;
 };
-
-/**
- * This function is duplicated in
- * - @atlaskit/adf-schema
- * - ../marks/textColor.tsx
- * it takes a color string, and if the color string is a hex or rgb value
- * it will invert the color and return the inverted color.
- */
-function invertCustomColor(customColor) {
-  var hex;
-  if ((0, _adfSchema.isHex)(customColor)) {
-    hex = customColor;
-  } else if ((0, _adfSchema.isRgb)(customColor)) {
-    hex = (0, _adfSchema.rgbToHex)(customColor);
-    if (hex === null) {
-      // in some cases the rgb color is invalid, in this case we just return the color
-      // See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
-      // to align with the rgbToHex function
-      return customColor;
-    }
-  } else {
-    return customColor;
-  }
-  var hexWithoutHash = hex.replace('#', '');
-
-  // This inverts the hex color by
-  // 1. converting the hex code to a number
-  // 2. XORing it with 0xffffff
-  // 3. Converting the result back to hex
-  // 4. Removing the leading 1 from the result
-  return "#".concat((Number("0x1".concat(hexWithoutHash)) ^ 0xffffff).toString(16).substring(1).toUpperCase());
-}
 var getStyle = function getStyle(_ref) {
   var background = _ref.background,
     colGroupWidth = _ref.colGroupWidth,
@@ -134,12 +101,7 @@ var getStyle = function getStyle(_ref) {
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        // and if the feature flag is enabled we need to use the LCH conversion method
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
-          style.backgroundColor = (0, _adfSchema.getDarkModeLCHColor)(background);
-        } else {
-          style.backgroundColor = invertCustomColor(background);
-        }
+        style.backgroundColor = (0, _adfSchema.getDarkModeLCHColor)(background);
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

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.2.6";
+var packageVersion = "109.3.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -1,41 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
-import { isHex, isRgb, rgbToHex, getDarkModeLCHColor } from '@atlaskit/adf-schema';
+import { getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { useThemeObserver } from '@atlaskit/tokens';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-
-/**
- * This function is duplicated in
- * - @atlaskit/adf-schema
- * - ../nodes/tableCell.tsx
- * it takes a color string, and if the color string is a hex or rgb value
- * it will invert the color and return the inverted color.
- */
-function invertCustomColor(customColor) {
-  let hex;
-  if (isHex(customColor)) {
-    hex = customColor;
-  } else if (isRgb(customColor)) {
-    hex = rgbToHex(customColor);
-    if (hex === null) {
-      // in some cases the rgb color is invalid, in this case we just return the color
-      // See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
-      // to align with the rgbToHex function
-      return customColor;
-    }
-  } else {
-    return customColor;
-  }
-  const hexWithoutHash = hex.replace('#', '');
-
-  // This inverts the hex color by
-  // 1. converting the hex code to a number
-  // 2. XORing it with 0xffffff
-  // 3. Converting the result back to hex
-  // 4. Removing the leading 1 from the result
-  return `#${(Number(`0x1${hexWithoutHash}`) ^ 0xffffff).toString(16).substring(1).toUpperCase()}`;
-}
 export default function TextColor(props) {
   const {
     colorMode
@@ -68,12 +35,7 @@ export default function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      // and if the feature flag is enabled we need to use the LCH conversion method
-      if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
-        paletteColorValue = getDarkModeLCHColor(props.color);
-      } else {
-        paletteColorValue = invertCustomColor(props.color);
-      }
+      paletteColorValue = getDarkModeLCHColor(props.color);
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

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

@@ -31,7 +31,8 @@ export default function BlockCard(props) {
     isNodeNested
   } = props;
   const {
-    showServerActions
+    showServerActions,
+    actionOptions
   } = smartLinks || {};
   const onClick = getCardClickHandler(eventHandlers, url);
   const platform = useMemo(() => getPlatform(rendererAppearance), [rendererAppearance]);
@@ -40,7 +41,9 @@ export default function BlockCard(props) {
     data,
     onClick,
     container: portal,
-    isDatasource: !!props.datasource
+    isDatasource: !!props.datasource,
+    actionOptions,
+    showServerActions
   };
   const analyticsData = {
     attributes: {
@@ -113,9 +116,7 @@ export default function BlockCard(props) {
     unsupportedComponent: UnsupportedBlock
   }, cardProps), jsx(Card, _extends({
     appearance: "block",
-    showActions: rendererAppearance !== 'mobile',
-    platform: platform,
-    showServerActions: showServerActions
+    platform: platform
   }, cardProps, {
     onError: onError
   })))));

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

@@ -45,6 +45,10 @@ export default function EmbedCard(props) {
   } = props;
   const embedIframeRef = useRef(null);
   const onClick = getCardClickHandler(eventHandlers, url);
+  const {
+    showServerActions,
+    actionOptions
+  } = smartLinks || {};
   const platform = useMemo(() => getPlatform(rendererAppearance), [rendererAppearance]);
   const cardProps = {
     url,
@@ -52,8 +56,9 @@ export default function EmbedCard(props) {
     onClick,
     container: portal,
     platform,
-    showActions: platform === 'web',
-    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined,
+    actionOptions,
+    showServerActions
   };
   const [liveHeight, setLiveHeight] = useState(null);
   const [aspectRatio, setAspectRatio] = useState();

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

@@ -26,6 +26,7 @@ const InlineCard = props => {
     showAuthTooltip,
     hideHoverPreview,
     showServerActions,
+    actionOptions,
     ssr
   } = smartLinks || {};
   const analyticsData = {
@@ -43,6 +44,7 @@ const InlineCard = props => {
       url: url,
       showAuthTooltip: showAuthTooltip,
       showHoverPreview: !hideHoverPreview,
+      actionOptions: actionOptions,
       showServerActions: showServerActions,
       onClick: onClick
     }));
@@ -66,6 +68,7 @@ const InlineCard = props => {
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     showAuthTooltip: showAuthTooltip,
+    actionOptions: actionOptions,
     showServerActions: showServerActions
   }, cardProps, {
     onResolve: data => {

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -111,10 +111,7 @@ const MediaSingle = props => {
   const isFullWidth = rendererAppearance === 'full-width';
   const calcDimensions = mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    const isPixel = widthType === 'pixel';
-
-    // max width and height are already handled in mediaSingle
-    const maxWidth = isPixel && widthAttr ? widthAttr : containerWidth;
+    const maxWidth = containerWidth;
     const maxHeight = height / width * maxWidth;
     const cardDimensions = {
       width: `${maxWidth}px`,

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

@@ -6,7 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 // eslint-disable-next-line @typescript-eslint/no-duplicate-imports
 import { css } from '@emotion/react';
-import { N40, N50 } from '@atlaskit/theme/colors';
+import { N30, N40 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
@@ -47,8 +47,7 @@ const navigationCSS = css`
   user-select: none;
   -webkit-user-modify: read-only;
   border: 1px solid ${`var(--ds-border, ${N40})`};
-  background-color: ${`var(--ds-background-inverse-subtle, ${N50})`};
-
+  border-bottom: none;
   .mbe-add-tab-button,
   .mbe-remove-tab {
     display: none;
@@ -75,7 +74,14 @@ const MultiBodiedExtension = props => {
     children
   });
   const containerCSS = css`
+    padding: 0;
+    border-radius: ${"var(--ds-border-radius, 3px)"};
+    position: relative;
+    vertical-align: middle;
     min-height: 100px;
+    .ak-renderer-extension {
+      margin-top: 0 !important;
+    }
 
     .multiBodiedExtension--frames > [data-extension-frame='true'] {
       display: none;
@@ -83,9 +89,20 @@ const MultiBodiedExtension = props => {
 
     .multiBodiedExtension--frames
       > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
-      border: 1px solid ${`var(--ds-border, ${N50})`};
+      padding: ${"var(--ds-space-100, 8px)"} !important;
+      border: 1px solid ${`var(--ds-border, ${N30})`};
       display: block;
       min-height: 100px;
+      background: ${"var(--ds-surface, white)"};
+      padding-left: ${"var(--ds-space-100, 8px)"};
+      padding-right: ${"var(--ds-space-100, 8px)"};
+
+      .bodiedExtensionView-content-wrap {
+        margin-top: ${"var(--ds-space-150, 12px)"} !important;
+      }
+      .extensionView-content-wrap {
+        margin-top: ${"var(--ds-space-150, 12px)"} !important;
+      }
     }
   `;
   const isTopLevel = path.length < 1;

package/dist/es2019/react/nodes/table/sticky.js

@@ -62,7 +62,7 @@ const fixedTableDivStaticStyles = (top, width, rendererAppearance) => {
       height: 100%;
     }
 
-    &.fixedTableDiv[mode='stick'] {
+    &.fixed-table-div-custom-table-resizing[mode='stick'] {
       z-index: ${stickyHeaderZIndex};
     }
   `;
@@ -80,7 +80,7 @@ export const FixedTableDiv = props => {
   };
   return jsx("div", _extends({}, attrs, {
     "data-testid": "sticky-table-fixed",
-    className: isTableResizingEnabled(rendererAppearance) ? 'fixedTableDiv' : '',
+    className: isTableResizingEnabled(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : '',
     css: fixedTableCss
   }), props.children);
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-schema';
+import { tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
@@ -10,7 +10,6 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl-next';
 import { tableCellMessages } from '../../messages';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const IgnoreSorting = ['LABEL', 'INPUT'];
 const nextStatusOrder = currentSortOrder => {
   switch (currentSortOrder) {
@@ -64,38 +63,6 @@ const getDataAttributes = (colwidth, background) => {
   }
   return attrs;
 };
-
-/**
- * This function is duplicated in
- * - @atlaskit/adf-schema
- * - ../marks/textColor.tsx
- * it takes a color string, and if the color string is a hex or rgb value
- * it will invert the color and return the inverted color.
- */
-function invertCustomColor(customColor) {
-  let hex;
-  if (isHex(customColor)) {
-    hex = customColor;
-  } else if (isRgb(customColor)) {
-    hex = rgbToHex(customColor);
-    if (hex === null) {
-      // in some cases the rgb color is invalid, in this case we just return the color
-      // See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
-      // to align with the rgbToHex function
-      return customColor;
-    }
-  } else {
-    return customColor;
-  }
-  const hexWithoutHash = hex.replace('#', '');
-
-  // This inverts the hex color by
-  // 1. converting the hex code to a number
-  // 2. XORing it with 0xffffff
-  // 3. Converting the result back to hex
-  // 4. Removing the leading 1 from the result
-  return `#${(Number(`0x1${hexWithoutHash}`) ^ 0xffffff).toString(16).substring(1).toUpperCase()}`;
-}
 const getStyle = ({
   background,
   colGroupWidth,
@@ -130,12 +97,7 @@ const getStyle = ({
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        // and if the feature flag is enabled we need to use the LCH conversion method
-        if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
-          style.backgroundColor = getDarkModeLCHColor(background);
-        } else {
-          style.backgroundColor = invertCustomColor(background);
-        }
+        style.backgroundColor = getDarkModeLCHColor(background);
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

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

@@ -35,7 +35,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.2.6";
+const packageVersion = "109.3.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);