@atlaskit/renderer 131.1.8 → 131.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 131.2.0
+
+### Minor Changes
+
+- [`1c86d46da6101`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c86d46da6101) -
+  Address layout column alignment follow-up review feedback
+
+### Patch Changes
+
+- Updated dependencies
+
+## 131.1.9
+
+### Patch Changes
+
+- [`304fee6127fd5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/304fee6127fd5) -
+  Add valign to table cell menu, support renderer.
+- Updated dependencies
+
 ## 131.1.8
 
 ### Patch Changes

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

@@ -18,6 +18,7 @@ var _consts = require("../../consts");
 var _reactIntl = require("react-intl");
 var _messages = require("../../messages");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -45,7 +46,7 @@ var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-var getDataAttributes = function getDataAttributes(colwidth, background, cellEdgeProps) {
+var getDataAttributes = function getDataAttributes(colwidth, background, cellEdgeProps, valign) {
   var attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
@@ -82,6 +83,9 @@ var getDataAttributes = function getDataAttributes(colwidth, background, cellEdg
   if (background) {
     attrs['data-cell-background'] = background;
   }
+  if (valign && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    attrs['data-valign'] = valign;
+  }
   return attrs;
 };
 
@@ -92,7 +96,8 @@ var getStyle = function getStyle(_ref) {
   var background = _ref.background,
     colGroupWidth = _ref.colGroupWidth,
     offsetTop = _ref.offsetTop,
-    colorMode = _ref.colorMode;
+    colorMode = _ref.colorMode,
+    valign = _ref.valign;
   var style = {};
   if (background &&
   // ignore setting inline styles if ds neutral token is detected
@@ -143,6 +148,9 @@ var getStyle = function getStyle(_ref) {
   if (offsetTop !== undefined) {
     style.top = offsetTop;
   }
+  if (valign && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    style.verticalAlign = valign;
+  }
   return style;
 };
 var getWithCellProps = function getWithCellProps(WrapperComponent) {
@@ -162,7 +170,8 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
       reachesTop = props.reachesTop,
       reachesBottom = props.reachesBottom,
       reachesLeft = props.reachesLeft,
-      reachesRight = props.reachesRight;
+      reachesRight = props.reachesRight,
+      valign = props.valign;
 
     // This is used to set the background color of the cell
     // to a dark mode color in mobile dark mode
@@ -180,7 +189,8 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
         background: background,
         colGroupWidth: colGroupWidth,
         offsetTop: offsetTop,
-        colorMode: colorMode
+        colorMode: colorMode,
+        valign: valign
       }),
       colorname: colorName,
       onClick: onClick
@@ -194,7 +204,7 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
       reachesBottom: reachesBottom,
       reachesLeft: reachesLeft,
       reachesRight: reachesRight
-    }), {
+    }, valign), {
       "aria-sort": ariaSort
     }), children);
   };

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

@@ -25,6 +25,7 @@ var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
 var _getBaseFontSize = require("./get-base-font-size");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _css9, _$concat3, _$concat6;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
@@ -1698,6 +1699,17 @@ var rendererTableSortableColumnStyles = (0, _react.css)((0, _defineProperty2.def
 })), "&:hover:not(\n\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, "\n\t\t\t\t\t\t\t\t\t\t.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN, ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER), (0, _defineProperty2.default)({}, ".".concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME), {
   opacity: 1
 }))))));
+
+// Sortable header cells render content inside an extra div, so mirror the th alignment there.
+var rendererTableSortableColumnValignStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "th[data-valign='middle'].".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, " > .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN), {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+}), "th[data-valign='bottom'].".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, " > .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN), {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-end'
+}))));
 var rendererTableColumnStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
   'table[data-number-column="true"]': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.NUMBER_COLUMN), {
     backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
@@ -2220,7 +2232,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // this should be placed after baseOtherStyles
     (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

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

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

@@ -11,6 +11,7 @@ import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl';
 import { tableCellMessages } from '../../messages';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 const IgnoreSorting = ['LABEL', 'INPUT'];
 const nextStatusOrder = currentSortOrder => {
   switch (currentSortOrder) {
@@ -40,7 +41,7 @@ const getSortOrderLabel = (intl, currentSortOrder) => {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-const getDataAttributes = (colwidth, background, cellEdgeProps) => {
+const getDataAttributes = (colwidth, background, cellEdgeProps, valign) => {
   const attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
@@ -77,6 +78,9 @@ const getDataAttributes = (colwidth, background, cellEdgeProps) => {
   if (background) {
     attrs['data-cell-background'] = background;
   }
+  if (valign && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    attrs['data-valign'] = valign;
+  }
   return attrs;
 };
 
@@ -87,7 +91,8 @@ const getStyle = ({
   background,
   colGroupWidth,
   offsetTop,
-  colorMode
+  colorMode,
+  valign
 }) => {
   const style = {};
   if (background &&
@@ -139,6 +144,9 @@ const getStyle = ({
   if (offsetTop !== undefined) {
     style.top = offsetTop;
   }
+  if (valign && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    style.verticalAlign = valign;
+  }
   return style;
 };
 const getWithCellProps = WrapperComponent => {
@@ -160,7 +168,8 @@ const getWithCellProps = WrapperComponent => {
       reachesTop,
       reachesBottom,
       reachesLeft,
-      reachesRight
+      reachesRight,
+      valign
     } = props;
 
     // This is used to set the background color of the cell
@@ -179,7 +188,8 @@ const getWithCellProps = WrapperComponent => {
         background,
         colGroupWidth,
         offsetTop,
-        colorMode
+        colorMode,
+        valign
       }),
       colorname: colorName,
       onClick: onClick
@@ -193,7 +203,7 @@ const getWithCellProps = WrapperComponent => {
       reachesBottom,
       reachesLeft,
       reachesRight
-    }), {
+    }, valign), {
       "aria-sort": ariaSort
     }), children);
   };

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

@@ -26,6 +26,7 @@ import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
 import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, defaultInlineEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 const wrappedMediaBreakoutPoint = 410;
 const TELEPOINTER_ID = 'ai-streaming-telepointer';
@@ -2167,6 +2168,24 @@ const rendererTableSortableColumnStyles = css({
     }
   }
 });
+
+// Sortable header cells render content inside an extra div, so mirror the th alignment there.
+const rendererTableSortableColumnValignStyles = css({
+  [`.${RendererCssClassName.DOCUMENT} .${TableSharedCssClassName.TABLE_CONTAINER}`]: {
+    [`.${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table, .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
+      [`th[data-valign='middle'].${RendererCssClassName.SORTABLE_COLUMN_WRAPPER} > .${RendererCssClassName.SORTABLE_COLUMN}`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+      },
+      [`th[data-valign='bottom'].${RendererCssClassName.SORTABLE_COLUMN_WRAPPER} > .${RendererCssClassName.SORTABLE_COLUMN}`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-end'
+      }
+    }
+  }
+});
 const rendererTableColumnStyles = css({
   [`.${RendererCssClassName.DOCUMENT} .${TableSharedCssClassName.TABLE_CONTAINER}`]: {
     'table[data-number-column="true"]': {
@@ -2819,7 +2838,7 @@ export const RendererStyleContainer = props => {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

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

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

@@ -11,6 +11,7 @@ import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl';
 import { tableCellMessages } from '../../messages';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -38,7 +39,7 @@ var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-var getDataAttributes = function getDataAttributes(colwidth, background, cellEdgeProps) {
+var getDataAttributes = function getDataAttributes(colwidth, background, cellEdgeProps, valign) {
   var attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
@@ -75,6 +76,9 @@ var getDataAttributes = function getDataAttributes(colwidth, background, cellEdg
   if (background) {
     attrs['data-cell-background'] = background;
   }
+  if (valign && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    attrs['data-valign'] = valign;
+  }
   return attrs;
 };
 
@@ -85,7 +89,8 @@ var getStyle = function getStyle(_ref) {
   var background = _ref.background,
     colGroupWidth = _ref.colGroupWidth,
     offsetTop = _ref.offsetTop,
-    colorMode = _ref.colorMode;
+    colorMode = _ref.colorMode,
+    valign = _ref.valign;
   var style = {};
   if (background &&
   // ignore setting inline styles if ds neutral token is detected
@@ -136,6 +141,9 @@ var getStyle = function getStyle(_ref) {
   if (offsetTop !== undefined) {
     style.top = offsetTop;
   }
+  if (valign && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    style.verticalAlign = valign;
+  }
   return style;
 };
 var getWithCellProps = function getWithCellProps(WrapperComponent) {
@@ -155,7 +163,8 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
       reachesTop = props.reachesTop,
       reachesBottom = props.reachesBottom,
       reachesLeft = props.reachesLeft,
-      reachesRight = props.reachesRight;
+      reachesRight = props.reachesRight,
+      valign = props.valign;
 
     // This is used to set the background color of the cell
     // to a dark mode color in mobile dark mode
@@ -173,7 +182,8 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
         background: background,
         colGroupWidth: colGroupWidth,
         offsetTop: offsetTop,
-        colorMode: colorMode
+        colorMode: colorMode,
+        valign: valign
       }),
       colorname: colorName,
       onClick: onClick
@@ -187,7 +197,7 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
       reachesBottom: reachesBottom,
       reachesLeft: reachesLeft,
       reachesRight: reachesRight
-    }), {
+    }, valign), {
       "aria-sort": ariaSort
     }), children);
   };

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

@@ -30,6 +30,7 @@ import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
 import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, defaultInlineEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 var wrappedMediaBreakoutPoint = 410;
 var TELEPOINTER_ID = 'ai-streaming-telepointer';
@@ -1691,6 +1692,17 @@ var rendererTableSortableColumnStyles = css(_defineProperty({}, ".".concat(Rende
 })), "&:hover:not(\n\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER, "\n\t\t\t\t\t\t\t\t\t\t.").concat(RendererCssClassName.SORTABLE_COLUMN, ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER), _defineProperty({}, ".".concat(SORTABLE_COLUMN_ICON_CLASSNAME), {
   opacity: 1
 }))))));
+
+// Sortable header cells render content inside an extra div, so mirror the th alignment there.
+var rendererTableSortableColumnValignStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), _defineProperty(_defineProperty({}, "th[data-valign='middle'].".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER, " > .").concat(RendererCssClassName.SORTABLE_COLUMN), {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+}), "th[data-valign='bottom'].".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER, " > .").concat(RendererCssClassName.SORTABLE_COLUMN), {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-end'
+}))));
 var rendererTableColumnStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), {
   'table[data-number-column="true"]': _defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.NUMBER_COLUMN), {
     backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
@@ -2213,7 +2225,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

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

package/dist/types/react/nodes/layoutColumn-compiled.d.ts

@@ -9,7 +9,7 @@
  * Cleanup: delete this file once the experiment has shipped.
  */
 import React from 'react';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 export declare const LayoutSectionCompiled: (props: React.PropsWithChildren<{
     valign?: Valign;
     width?: number;

package/dist/types/react/nodes/layoutColumn-emotion.d.ts

@@ -9,7 +9,7 @@
  * Cleanup: delete this file once the experiment has shipped.
  */
 import React from 'react';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 export declare const LayoutSectionEmotion: (props: React.PropsWithChildren<{
     valign?: Valign;
     width?: number;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 /**
  * Render a layout column in renderer.
  */

package/dist/types-ts4.5/react/nodes/layoutColumn-compiled.d.ts

@@ -9,7 +9,7 @@
  * Cleanup: delete this file once the experiment has shipped.
  */
 import React from 'react';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 export declare const LayoutSectionCompiled: (props: React.PropsWithChildren<{
     valign?: Valign;
     width?: number;

package/dist/types-ts4.5/react/nodes/layoutColumn-emotion.d.ts

@@ -9,7 +9,7 @@
  * Cleanup: delete this file once the experiment has shipped.
  */
 import React from 'react';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 export declare const LayoutSectionEmotion: (props: React.PropsWithChildren<{
     valign?: Valign;
     width?: number;

package/dist/types-ts4.5/react/nodes/layoutColumn.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Valign } from '@atlaskit/adf-schema/layout-column';
 /**
  * Render a layout column in renderer.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "131.1.8",
+	"version": "131.2.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.14.0",
+		"@atlaskit/adf-schema": "^52.15.0",
 		"@atlaskit/adf-utils": "^19.31.0",
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.10.0",
 		"@atlaskit/analytics-listeners": "^10.1.0",
@@ -80,7 +80,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.47.0",
+		"@atlaskit/editor-common": "^114.48.0",
 		"@atlaskit/link-provider": "^4.4.0",
 		"@atlaskit/media-core": "^37.1.0",
 		"react": "^18.2.0",