@atlaskit/renderer 114.3.0 → 114.3.2

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

@@ -17,6 +17,7 @@ var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
 var _actions = require("./multiBodiedExtension/actions");
 var _context = require("./multiBodiedExtension/context");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject, _templateObject2, _templateObject3;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
@@ -28,10 +29,88 @@ var _templateObject, _templateObject2, _templateObject3;
 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; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-var navigationStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
+var navigationStylesOld = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
 
+// localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
+var navigationStylesNew = (0, _react.css)({
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  userSelect: 'none',
+  WebkitUserModify: 'read-only',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  borderBottom: 'none !important',
+  background: "var(--ds-surface, white)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-margins': {
+    margin: "var(--ds-space-negative-100, -8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-border': {
+    border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginLeft: '0 !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginRight: '0 !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.mbe-add-tab-button, .mbe-remove-tab': {
+    display: 'none'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+var containerStylesOld = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"));
+
+// localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var containerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"));
+var containerStylesNew = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  background: 'transparent !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  'padding:': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    left: "var(--ds-space-100, 8px)".concat(" !important"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    right: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  paddingBottom: "var(--ds-space-100, 8px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-padding': {
+    paddingBottom: 0
+  },
+  position: 'relative',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.multiBodiedExtension-handler-result': {
+    marginLeft: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
+    display: 'none',
+    background: "var(--ds-surface, white)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
+      marginTop: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-renderer-extension': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    marginTop: '0 !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout="full-width"], [data-layout="wide"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.multiBodiedExtension-navigation': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      borderRight: "3px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), " !important")
+    }
+  }
+});
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("article", {
@@ -46,7 +125,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
   return (0, _react.jsx)("nav", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension-navigation",
-    css: navigationStyles,
+    css: (0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
@@ -150,7 +229,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   return (0, _react.jsx)("section", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--container",
-    css: [containerStyles, containerActiveFrameStyles],
+    css: [(0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout

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

@@ -18,14 +18,157 @@ var _emoji = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/emoji")
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _emoji2 = _interopRequireDefault(require("./emoji"));
 var _icons = require("@atlaskit/editor-common/icons");
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _templateObject, _templateObject2;
-var _excluded = ["backgroundColor", "hasIcon"];
+var _excluded = ["backgroundColor", "hasIcon"],
+  _excluded2 = ["backgroundColor", "hasIcon"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var PanelStyled = function PanelStyled(_ref) {
+// New custom icons are a little smaller than predefined icons.
+// To fix alignment issues with custom icons, vertical alignment is updated.
+var panelEmojiSpriteVerticalAlignment = -(8 * 3 - _consts.akEditorCustomIconSize) / 2;
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+var blockNodesVerticalMargin = '0.75rem';
+var akEditorTableCellMinWidth = 48;
+var panelBaseStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel': {
+    borderRadius: "var(--ds-border-radius, 3px)",
+    margin: "".concat(blockNodesVerticalMargin, " 0 0"),
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingRight: "var(--ds-space-200, 16px)",
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-100, 8px)",
+    minWidth: "".concat(akEditorTableCellMinWidth, "px"),
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'normal',
+    wordBreak: 'break-word',
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #DEEBFF)",
+    color: 'inherit',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel__icon': {
+      flexShrink: 0,
+      height: "var(--ds-space-300, 24px)",
+      width: "var(--ds-space-300, 24px)",
+      boxSizing: 'content-box',
+      paddingRight: "var(--ds-space-100, 8px)",
+      textAlign: 'center',
+      userSelect: 'none',
+      MozUserSelect: 'none',
+      WebkitUserSelect: 'none',
+      MsUserSelect: 'none',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '0.1em',
+      color: "var(--ds-icon-information, #1D7AFC)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> span': {
+        verticalAlign: 'middle',
+        display: 'inline-flex'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.emoji-common-emoji-sprite': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        verticalAlign: "".concat(panelEmojiSpriteVerticalAlignment, "px")
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.emoji-common-emoji-image': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        verticalAlign: "".concat(panelEmojiImageVerticalAlignment, "px"),
+        // Vertical align only works for inline-block elements in Firefox
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+        '@-moz-document url-prefix()': {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+          img: {
+            display: 'inline-block'
+          }
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel__content': {
+      margin: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)"),
+      flex: '1 0 0',
+      /*
+      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
+      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
+      */
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="note"]': {
+      backgroundColor: "var(--ds-background-accent-purple-subtlest, #EAE6FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-discovery, #8270DB)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    '&[data-panel-type="tip"]': {
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #22A06B)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    '&[data-panel-type="warning"]': {
+      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-warning, #E56910)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    '&[data-panel-type="error"]': {
+      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFEBE6)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-danger, #C9372C)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    '&[data-panel-type="success"]': {
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #22A06B)"
+      }
+    }
+  }
+});
+var panelHasNoIconStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  '&.ak-editor-panel': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="custom"]': {
+      paddingLeft: "var(--ds-space-150, 12px)",
+      paddingRight: "var(--ds-space-150, 12px)"
+    }
+  }
+});
+var panelNestedIconStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.ak-editor-panel__no-icon': {
+    paddingLeft: "var(--ds-space-150, 12px)",
+    paddingRight: "var(--ds-space-150, 12px)"
+  }
+});
+var panelCustomBackground = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  '&.ak-editor-panel': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="custom"]': {
+      backgroundColor: 'var(--ak-renderer-panel-custom-bg-color)'
+    }
+  }
+});
+var PanelStyledOld = function PanelStyledOld(_ref) {
   var backgroundColor = _ref.backgroundColor,
     hasIcon = _ref.hasIcon,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -44,6 +187,23 @@ var PanelStyled = function PanelStyled(_ref) {
     }, props), props.children)
   );
 };
+var PanelStyledNew = function PanelStyledNew(_ref2) {
+  var backgroundColor = _ref2.backgroundColor,
+    hasIcon = _ref2.hasIcon,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var customBackgroundColor = backgroundColor ? (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) : backgroundColor;
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    style:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    {
+      '--ak-renderer-panel-custom-bg-color': customBackgroundColor
+    },
+    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor && panelCustomBackground, (0, _experiments.editorExperiment)('nested-dnd', true) && panelNestedIconStyles]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+var PanelStyled = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', PanelStyledNew, PanelStyledOld);
 PanelStyled.displayName = 'PanelStyled';
 var panelIcons = {
   info: _icons.PanelInfoIcon,

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

@@ -16,6 +16,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -38,6 +39,27 @@ var modeSpecficStyles = {
   })
 };
 
+// refactored based on fixedTableDivStaticStyles
+// TODO: DSP-4123 - Quality ticket
+var fixedTableDivStaticStylesNew = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  zIndex: 'var(--ak-renderer-sticky-header-zindex)'
+}, "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ", & .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  marginTop: 0,
+  marginBottom: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  tr: {
+    background: "var(--ds-surface, white)"
+  }
+}), "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, white)")), "background", "var(--ds-surface-overlay, white)"), "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"))), "div[data-expanded='false'] &", {
+  display: 'none'
+}), "& .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
+  top: '0px',
+  height: '100%'
+}), "&.fixed-table-div-custom-table-resizing[mode='stick']", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: 'var(--ak-renderer-sticky-header-zindex)'
+}));
+
 // TODO: DSP-4123 - Quality ticket
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, allowTableResizing) {
   var stickyHeaderZIndex;
@@ -70,7 +92,7 @@ var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, a
     zIndex: stickyHeaderZIndex
   }));
 };
-var FixedTableDiv = function FixedTableDiv(props) {
+var FixedTableDivOld = function FixedTableDivOld(props) {
   var top = props.top,
     wrapperWidth = props.wrapperWidth,
     mode = props.mode,
@@ -89,6 +111,34 @@ var FixedTableDiv = function FixedTableDiv(props) {
     css: fixedTableCss
   }), props.children);
 };
+var FixedTableDivNew = function FixedTableDivNew(props) {
+  var top = props.top,
+    wrapperWidth = props.wrapperWidth,
+    mode = props.mode,
+    allowTableResizing = props.allowTableResizing;
+  var stickyHeaderZIndex;
+  if (allowTableResizing) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
+  }
+  var attrs = {
+    mode: mode
+  };
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, attrs, {
+    "data-testid": "sticky-table-fixed"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
+    css: [fixedTableDivStaticStylesNew, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    style: {
+      '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
+      width: "".concat(wrapperWidth, "px"),
+      top: top ? "".concat(top, "px") : undefined
+    }
+  }), props.children);
+};
+var FixedTableDiv = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', FixedTableDivNew, FixedTableDivOld);
 var StickyTable = exports.StickyTable = function StickyTable(_ref) {
   var top = _ref.top,
     left = _ref.left,

package/dist/cjs/ui/Expand.js

@@ -22,7 +22,9 @@ var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _reactIntlNext = require("react-intl-next");
 var _events = require("../analytics/events");
 var _activeHeaderIdProvider = require("./active-header-id-provider");
-var _excluded = ["expanded"];
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _excluded = ["expanded"],
+  _excluded2 = ["expanded"];
 var _templateObject, _templateObject2, _templateObject3;
 /**
  * @jsxRuntime classic
@@ -35,8 +37,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var titleStyles = (0, _react.css)({
   outline: 'none',
   border: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: "".concat(14 / 16, "rem"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
   lineHeight: _editorSharedStyles.akEditorLineHeight,
   fontWeight: "var(--ds-font-weight-regular, 400)",
@@ -46,7 +48,92 @@ var titleStyles = (0, _react.css)({
   padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
   textAlign: 'left'
 });
-var Container = function Container(props) {
+var containerStyles = (0, _react.css)({
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  minHeight: '25px',
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition: "background 0.3s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  padding: "var(--ds-space-0, 0px)",
+  paddingBottom: "var(--ds-space-0, 0px)",
+  marginTop: "var(--ds-space-050, 0.25rem)",
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  'td > :not(style):first-child, td > style:first-child + *': {
+    marginTop: 0
+  }
+});
+var containerStylesExpanded = (0, _react.css)({
+  background: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  borderColor: "var(--ds-border, #091E4224)"
+});
+var containerStylesFocused = (0, _react.css)({
+  borderColor: "var(--ds-border-focused, #388BFF)"
+});
+var containerStylesDataNodeTypeExpand = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  marginLeft: "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  marginRight: "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px")
+});
+var titleContainerStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'flex-start',
+  background: 'none',
+  border: 'none',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: "".concat(14 / 16, "rem"),
+  width: '100%',
+  color: "var(--ds-text-subtle, #44546F)",
+  overflow: 'hidden',
+  cursor: 'pointer',
+  padding: "var(--ds-space-100, 8px)",
+  '&:focus': {
+    outline: 0
+  }
+});
+var titleContainerStylesExpanded = (0, _react.css)({
+  paddingBottom: "var(--ds-space-0, 0px)"
+});
+var contentContainerStyles = (0, _react.css)({
+  paddingTop: "var(--ds-space-0, 0px)",
+  marginLeft: "var(--ds-space-050, 4px)",
+  paddingRight: "var(--ds-space-200, 16px)",
+  paddingLeft: "var(--ds-space-400, 32px)",
+  display: 'flow-root',
+  visibility: 'hidden',
+  // The follow rules inside @supports block are added as a part of ED-8893
+  // The fix is targeting mobile bridge on iOS 12 or below,
+  // We should consider remove this fix when we no longer support iOS 12
+  '@supports not (display: flow-root)': {
+    width: '100%',
+    boxSizing: 'border-box'
+  }
+});
+var contentContainerStylesExpanded = (0, _react.css)({
+  paddingTop: "var(--ds-space-100, 8px)",
+  visibility: 'visible'
+});
+var contentContainerStylesNotExpanded = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.expand-content-wrapper, .nestedExpand-content-wrapper': {
+    /* We visually hide the content here to preserve the content during copy+paste */
+    /* Do not add text nowrap here because inline comment navigation depends on the location of the text */
+    width: '100%',
+    display: 'block',
+    height: 0,
+    overflow: 'hidden',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    userSelect: 'none'
+  }
+});
+var ContainerOld = function ContainerOld(props) {
   var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
 
@@ -62,7 +149,15 @@ var Container = function Container(props) {
     }, props), props.children)
   );
 };
-var TitleContainer = function TitleContainer(props) {
+var ContainerNew = function ContainerNew(props) {
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+var Container = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', ContainerNew, ContainerOld);
+var TitleContainerOld = function TitleContainerOld(props) {
   var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
 
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
@@ -73,15 +168,29 @@ var TitleContainer = function TitleContainer(props) {
     buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (
     // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
+    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-html-button
     (0, _react.jsx)("button", (0, _extends2.default)({
       type: "button",
       css: styles
     }, buttonProps), props.children)
   );
 };
+var TitleContainerNew = function TitleContainerNew(props) {
+  var expanded = props.expanded,
+    buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/no-html-button
+    (0, _react.jsx)("button", (0, _extends2.default)({
+      type: "button",
+      css: [titleContainerStyles, expanded && titleContainerStylesExpanded]
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, buttonProps), props.children)
+  );
+};
+var TitleContainer = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', TitleContainerNew, TitleContainerOld);
 TitleContainer.displayName = 'TitleContainerButton';
-var ContentContainer = function ContentContainer(props) {
+var ContentContainerOld = function ContentContainerOld(props) {
   var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
 
@@ -90,7 +199,6 @@ var ContentContainer = function ContentContainer(props) {
     return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", ";\n\t\tpadding-right: ", ";\n\t\tpadding-left: ", ";\n\t\tvisibility: ", ";\n\t"])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
   };
   return (
-    // eslint-disable-next-line
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
     (0, _react.jsx)("div", (0, _extends2.default)({
@@ -98,6 +206,14 @@ var ContentContainer = function ContentContainer(props) {
     }, props), props.children)
   );
 };
+var ContentContainerNew = function ContentContainerNew(props) {
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: [contentContainerStyles, props.expanded && contentContainerStylesExpanded, !props.expanded && contentContainerStylesNotExpanded]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+var ContentContainer = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', ContentContainerNew, ContentContainerOld);
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
     return;

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

@@ -67,7 +67,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 = "114.3.0";
+var packageVersion = "114.3.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/cjs/ui/annotations/draft/component.js

@@ -17,6 +17,7 @@ var _dom = require("./dom");
 var _styles = require("@atlaskit/editor-common/styles");
 var _segmentText = require("../../../react/utils/segment-text");
 var _renderTextSegments = require("../../../react/utils/render-text-segments");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 /**
@@ -38,18 +39,37 @@ var markStyles = function markStyles() {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   (0, _styles.AnnotationSharedCSSByState)().focus);
 };
+
+// Localized AnnotationSharedCSSByState().common and AnnotationSharedCSSByState().focus
+var markStylesNew = (0, _react2.css)({
+  color: 'inherit',
+  backgroundColor: 'unset',
+  WebkitTapHighlightColor: 'transparent',
+  borderBottom: '2px solid transparent',
+  cursor: 'pointer',
+  padding: '1px 0 2px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:has(.card), &:has([data-inline-card])': {
+    padding: '5px 0 3px 0'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:has(.date-lozenger-container)': {
+    paddingTop: "var(--ds-space-025, 2px)"
+  },
+  background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
+  borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
+});
 var AnnotationDraft = exports.AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
     children = _ref.children;
-  return (
+  return (0, _react2.jsx)("mark", (0, _extends2.default)({
+    "data-renderer-mark": true
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    (0, _react2.jsx)("mark", (0, _extends2.default)({
-      "data-renderer-mark": true
-    }, (0, _dom.dataAttributes)(draftPosition), {
-      css: markStyles
-    }), children)
-  );
+  }, (0, _dom.dataAttributes)(draftPosition), {
+    css: (0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? markStylesNew : markStyles
+  }), children);
 };
 var getAnnotationIndex = exports.getAnnotationIndex = function getAnnotationIndex(annotationPosition, fragmentCount) {
   if (annotationPosition === _types.InsertDraftPosition.START) {