@atlaskit/renderer 108.7.1 → 108.7.3

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

@@ -3,7 +3,6 @@ import { themed } from '@atlaskit/theme/components';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -12,6 +11,7 @@ import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
+import { isTableResizingEnabled } from '../../react/nodes/table';
 export const FullPagePadding = 32;
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
 export const headingSizes = {
@@ -34,7 +34,9 @@ export const headingSizes = {
     lineHeight: getLineHeight('h100')
   }
 };
-const headingAnchorStyle = headingTag => css`
+const headingAnchorStyle = headingTag =>
+// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
+css`
     /**
      * The copy link button doesn't reserve space in the DOM so that
      * the text alignment isn't impacted by the button/icon's space.
@@ -43,7 +45,7 @@ const headingAnchorStyle = headingTag => css`
       position: absolute;
       height: ${headingSizes[headingTag].lineHeight}em;
 
-      margin-left: 6px;
+      margin-left: ${"var(--ds-space-075, 6px)"};
 
       button {
         padding-left: 0;
@@ -83,6 +85,7 @@ const alignedHeadingAnchorStyle = ({
   if (!allowNestedHeaderLinks) {
     return '';
   }
+  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
   return css`
     .fabric-editor-block-mark[data-align] > {
       h1,
@@ -134,7 +137,7 @@ const alignedHeadingAnchorStyle = ({
         }
       }
       .${HeadingAnchorWrapperClassName} {
-        margin: 0 6px 0 0;
+        margin: 0 ${"var(--ds-space-075, 6px)"} 0 0;
       }
 
       @media (hover: hover) and (pointer: fine) {
@@ -272,7 +275,7 @@ const fullWidthStyles = ({
       width: 100% !important;
     }
 
-    ${getBooleanFF('platform.editor.custom-table-width') ? '' : `
+    ${isTableResizingEnabled(appearance) ? '' : `
       .pm-table-container {
         width: 100% !important;
       }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.7.1",
+	"version": "108.7.3",
 	"sideEffects": false
 }

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { isTableResizingEnabled } from '../table';
+
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -50,12 +51,13 @@ export var Colgroup = function Colgroup(props) {
     layout = props.layout,
     isNumberColumnEnabled = props.isNumberColumnEnabled,
     renderWidth = props.renderWidth,
-    tableNode = props.tableNode;
+    tableNode = props.tableNode,
+    rendererAppearance = props.rendererAppearance;
   if (!columnWidths) {
     return null;
   }
   var tableResized = isTableResized(columnWidths);
-  if (getBooleanFF('platform.editor.custom-table-width') && !tableResized) {
+  if (isTableResizingEnabled(rendererAppearance) && !tableResized) {
     return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
       style: {
         width: akEditorTableNumberColumnWidth
@@ -72,7 +74,7 @@ export var Colgroup = function Colgroup(props) {
     return null;
   }
   var tableContainerWidth;
-  if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+  if (isTableResizingEnabled(rendererAppearance) && tableNode) {
     tableContainerWidth = getTableContainerWidth(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);

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

@@ -9,31 +9,32 @@ import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
+import { isTableResizingEnabled } from '../table';
 export var tableStickyPadding = 8;
 var modeSpecficStyles = {
   none: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))),
   stick: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n  "]))),
   'pin-bottom': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n  "])))
 };
-var stickyHeaderZIndex;
-if (getBooleanFF('platform.editor.custom-table-width')) {
-  stickyHeaderZIndex = 13;
-} else {
-  stickyHeaderZIndex = akEditorStickyHeaderZIndex;
-}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
-var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, rendererAppearance) {
+  var stickyHeaderZIndex;
+  if (isTableResizingEnabled(rendererAppearance)) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = akEditorStickyHeaderZIndex;
+  }
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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  "])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 export var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
     wrapperWidth = props.wrapperWidth,
-    mode = props.mode;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+    mode = props.mode,
+    rendererAppearance = props.rendererAppearance;
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, rendererAppearance), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
   var attrs = {
     mode: mode
   };
@@ -56,10 +57,11 @@ export var StickyTable = function StickyTable(_ref) {
     columnWidths = _ref.columnWidths,
     renderWidth = _ref.renderWidth,
     rowHeight = _ref.rowHeight,
-    tableNode = _ref.tableNode;
+    tableNode = _ref.tableNode,
+    rendererAppearance = _ref.rendererAppearance;
   var styles;
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-  if (getBooleanFF('platform.editor.custom-table-width')) {
+  if (isTableResizingEnabled(rendererAppearance)) {
     styles = css({
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
@@ -77,7 +79,8 @@ export var StickyTable = function StickyTable(_ref) {
   }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
-    wrapperWidth: wrapperWidth
+    wrapperWidth: wrapperWidth,
+    rendererAppearance: rendererAppearance
   }, jsx("div", {
     className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
@@ -95,7 +98,8 @@ export var StickyTable = function StickyTable(_ref) {
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
-    tableNode: tableNode
+    tableNode: tableNode,
+    rendererAppearance: rendererAppearance
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

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

@@ -7,7 +7,8 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     layout = _ref.layout,
     renderWidth = _ref.renderWidth,
     children = _ref.children,
-    tableNode = _ref.tableNode;
+    tableNode = _ref.tableNode,
+    rendererAppearance = _ref.rendererAppearance;
   return /*#__PURE__*/React.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
@@ -16,6 +17,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
-    tableNode: tableNode
+    tableNode: tableNode,
+    rendererAppearance: rendererAppearance
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

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

@@ -22,6 +22,10 @@ import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
+import { isFullWidthOrFullPageAppearance } from '../utils/appearance';
+export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
+  return getBooleanFF('platform.editor.custom-table-width') && isFullWidthOrFullPageAppearance(appearance);
+};
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
@@ -255,7 +259,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance) {
         return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : Math.min(getTableContainerWidth(tableNode), renderWidth);
       };
-      if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+      if (isTableResizingEnabled(rendererAppearance) && tableNode) {
         tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
       } else {
         tableWidth = calcTableWidth(layout, renderWidth, false);
@@ -278,7 +282,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         innerRef: this.stickyWrapperRef,
         wrapperWidth: wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight
+        rowHeight: this.headerRowHeight,
+        rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": layout,
@@ -300,7 +305,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         wrapperWidth: wrapperWidth,
         columnWidths: columnWidths,
         rowHeight: this.headerRowHeight,
-        tableNode: tableNode
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
@@ -311,7 +317,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: renderWidth,
-        tableNode: tableNode
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance
       }, this.grabFirstRowRef(children)))));
     }
   }]);

package/dist/esm/react/utils/appearance.js

@@ -0,0 +1,9 @@
+export var isFullWidthAppearance = function isFullWidthAppearance(appearance) {
+  return appearance === 'full-width';
+};
+export var isFullPageAppearance = function isFullPageAppearance(appearance) {
+  return appearance === 'full-page';
+};
+export var isFullWidthOrFullPageAppearance = function isFullWidthOrFullPageAppearance(appearance) {
+  return isFullPageAppearance(appearance) || isFullWidthAppearance(appearance);
+};

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.7.1";
+var packageVersion = "108.7.3";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -5,7 +5,6 @@ import { themed } from '@atlaskit/theme/components';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -14,6 +13,7 @@ import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
+import { isTableResizingEnabled } from '../../react/nodes/table';
 export var FullPagePadding = 32;
 var getLineHeight = function getLineHeight(fontCode) {
   return headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -39,14 +39,17 @@ export var headingSizes = {
   }
 };
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: 6px;\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName);
+  return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: ", ";\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
+  );
 };
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
   var allowNestedHeaderLinks = _ref.allowNestedHeaderLinks;
   if (!allowNestedHeaderLinks) {
     return '';
   }
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName);
+  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName);
 };
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var allowColumnSorting = _ref2.allowColumnSorting,
@@ -73,7 +76,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   if (appearance !== 'full-width') {
     return '';
   }
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), akEditorFullWidthLayoutWidth, getBooleanFF('platform.editor.custom-table-width') ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
   if (useFragmentMarkBreakoutWidthStylingFix) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.7.1",
+	"version": "108.7.3",
 	"sideEffects": false
 }

package/dist/types/react/nodes/table/sticky.d.ts

@@ -4,12 +4,14 @@ import { jsx } from '@emotion/react';
 import { Node as PMNode } from 'prosemirror-model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { TableLayout } from '@atlaskit/adf-schema';
+import { RendererAppearance } from '../../../ui/Renderer/types';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
 export declare const tableStickyPadding = 8;
 interface FixedProps {
     top?: number;
     wrapperWidth: number;
     mode: StickyMode;
+    rendererAppearance: RendererAppearance;
 }
 export declare const FixedTableDiv: React.FC<FixedProps>;
 export type StickyTableProps = {
@@ -26,8 +28,9 @@ export type StickyTableProps = {
     columnWidths?: number[];
     renderWidth: number;
     tableNode?: PMNode;
+    rendererAppearance: RendererAppearance;
 } & OverflowShadowProps;
-export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, tableNode, }: StickyTableProps) => jsx.JSX.Element;
+export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, tableNode, rendererAppearance, }: StickyTableProps) => jsx.JSX.Element;
 export declare class OverflowParent {
     private ref;
     private constructor();

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

@@ -4,4 +4,4 @@ export type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, }: TableProps) => JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, }: TableProps) => JSX.Element>;

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

@@ -1,9 +1,11 @@
 import { Node as PMNode } from 'prosemirror-model';
 import { TableLayout } from '@atlaskit/adf-schema';
+import { RendererAppearance } from '../../../ui/Renderer/types';
 export type SharedTableProps = {
     columnWidths?: Array<number>;
     layout: TableLayout;
     isNumberColumnEnabled: boolean;
     renderWidth: number;
     tableNode?: PMNode;
+    rendererAppearance: RendererAppearance;
 };

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

@@ -6,6 +6,7 @@ import { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types'
 import { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import { StickyMode, OverflowParent } from './table/sticky';
 import { SharedTableProps } from './table/types';
+export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
 export type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
     tableNode?: PMNode;

package/dist/types/react/utils/appearance.d.ts

@@ -0,0 +1,4 @@
+import { RendererAppearance } from '../../ui/Renderer/types';
+export declare const isFullWidthAppearance: (appearance: RendererAppearance) => boolean;
+export declare const isFullPageAppearance: (appearance: RendererAppearance) => boolean;
+export declare const isFullWidthOrFullPageAppearance: (appearance: RendererAppearance) => boolean;

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

@@ -4,12 +4,14 @@ import { jsx } from '@emotion/react';
 import { Node as PMNode } from 'prosemirror-model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { TableLayout } from '@atlaskit/adf-schema';
+import { RendererAppearance } from '../../../ui/Renderer/types';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
 export declare const tableStickyPadding = 8;
 interface FixedProps {
     top?: number;
     wrapperWidth: number;
     mode: StickyMode;
+    rendererAppearance: RendererAppearance;
 }
 export declare const FixedTableDiv: React.FC<FixedProps>;
 export type StickyTableProps = {
@@ -26,8 +28,9 @@ export type StickyTableProps = {
     columnWidths?: number[];
     renderWidth: number;
     tableNode?: PMNode;
+    rendererAppearance: RendererAppearance;
 } & OverflowShadowProps;
-export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, tableNode, }: StickyTableProps) => jsx.JSX.Element;
+export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef, wrapperWidth, tableWidth, isNumberColumnEnabled, layout, children, columnWidths, renderWidth, rowHeight, tableNode, rendererAppearance, }: StickyTableProps) => jsx.JSX.Element;
 export declare class OverflowParent {
     private ref;
     private constructor();

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

@@ -4,4 +4,4 @@ export type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, }: TableProps) => JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, }: TableProps) => JSX.Element>;

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

@@ -1,9 +1,11 @@
 import { Node as PMNode } from 'prosemirror-model';
 import { TableLayout } from '@atlaskit/adf-schema';
+import { RendererAppearance } from '../../../ui/Renderer/types';
 export type SharedTableProps = {
     columnWidths?: Array<number>;
     layout: TableLayout;
     isNumberColumnEnabled: boolean;
     renderWidth: number;
     tableNode?: PMNode;
+    rendererAppearance: RendererAppearance;
 };

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

@@ -6,6 +6,7 @@ import { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types'
 import { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
 import { StickyMode, OverflowParent } from './table/sticky';
 import { SharedTableProps } from './table/types';
+export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
 export type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
     tableNode?: PMNode;

package/dist/types-ts4.5/react/utils/appearance.d.ts

@@ -0,0 +1,4 @@
+import { RendererAppearance } from '../../ui/Renderer/types';
+export declare const isFullWidthAppearance: (appearance: RendererAppearance) => boolean;
+export declare const isFullPageAppearance: (appearance: RendererAppearance) => boolean;
+export declare const isFullWidthOrFullPageAppearance: (appearance: RendererAppearance) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.7.1",
+  "version": "108.7.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,6 +36,7 @@
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-shared-styles": "^2.4.0",
     "@atlaskit/emoji": "^67.4.0",
+    "@atlaskit/enforce-peer-dependencies": "^1.0.1",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/link-datasource": "^0.28.0",
     "@atlaskit/media-card": "^76.1.0",
@@ -49,7 +50,7 @@
     "@atlaskit/status": "^1.3.0",
     "@atlaskit/task-decision": "^17.7.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.12.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -72,7 +73,7 @@
     "@af/visual-regression": "*",
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/css-reset": "^6.5.0",
-    "@atlaskit/editor-core": "^186.0.0",
+    "@atlaskit/editor-core": "^187.2.0",
     "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.1.0",
@@ -122,5 +123,8 @@
     "platform.editor.custom-table-width": {
       "type": "boolean"
     }
+  },
+  "scripts": {
+    "postinstall": "npx enforce-peer-dependencies --internal-packages"
   }
 }