@atlaskit/renderer 108.7.2 → 108.7.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 108.7.3
+
+### Patch Changes
+
+- [`e7ed90bad7c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ed90bad7c) - Use renderer appearance to use custom width
+
 ## 108.7.2
 
 ### Patch Changes

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

@@ -8,8 +8,8 @@ exports.calcScalePercent = exports.Colgroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _table = require("../table");
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -58,12 +58,13 @@ 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 ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && !tableResized) {
+  if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !tableResized) {
     return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
       style: {
         width: _editorSharedStyles.akEditorTableNumberColumnWidth
@@ -80,7 +81,7 @@ var Colgroup = function Colgroup(props) {
     return null;
   }
   var tableContainerWidth;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && tableNode) {
+  if ((0, _table.isTableResizingEnabled)(rendererAppearance) && tableNode) {
     tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);

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

@@ -14,9 +14,9 @@ var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
+var _table2 = require("../table");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 var tableStickyPadding = 8;
@@ -26,22 +26,23 @@ var modeSpecficStyles = {
   stick: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: fixed;\n  "]))),
   'pin-bottom': (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n  "])))
 };
-var stickyHeaderZIndex;
-if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
-  stickyHeaderZIndex = 13;
-} else {
-  stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
-}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
-var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n    tr {\n      background: ", ";\n    }\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".is-sticky.right-shadow::after,\n    &\n    .", ".is-sticky.left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, rendererAppearance) {
+  var stickyHeaderZIndex;
+  if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
+  }
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    width: ", "px;\n    z-index: ", ";\n    &\n      .", ",\n      &\n      .", "\n      > table {\n      margin-top: 0;\n      margin-bottom: 0;\n      tr {\n        background: ", ";\n      }\n    }\n\n    border-top: ", "px solid\n      ", ";\n    background: ", ";\n    box-shadow: 0 6px 4px -4px ", ";\n\n    div[data-expanded='false'] & {\n      display: none;\n    }\n\n    &\n      .", ".is-sticky.right-shadow::after,\n      &\n      .", ".is-sticky.left-shadow::before {\n      top: 0px;\n      height: 100%;\n    }\n  "])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 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
   };
@@ -65,10 +66,11 @@ 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 ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+  if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
     styles = (0, _react2.css)({
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
@@ -86,7 +88,8 @@ var StickyTable = function StickyTable(_ref) {
   }, (0, _react2.jsx)(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
-    wrapperWidth: wrapperWidth
+    wrapperWidth: wrapperWidth,
+    rendererAppearance: rendererAppearance
   }, (0, _react2.jsx)("div", {
     className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
@@ -104,7 +107,8 @@ 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/cjs/react/nodes/table/table.js

@@ -14,7 +14,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     layout = _ref.layout,
     renderWidth = _ref.renderWidth,
     children = _ref.children,
-    tableNode = _ref.tableNode;
+    tableNode = _ref.tableNode,
+    rendererAppearance = _ref.rendererAppearance;
   return /*#__PURE__*/_react.default.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
@@ -23,7 +24,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
-    tableNode: tableNode
+    tableNode: tableNode,
+    rendererAppearance: rendererAppearance
   }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
 });
 exports.Table = Table;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TableProcessor = exports.TableContainer = void 0;
+exports.isTableResizingEnabled = exports.default = exports.TableProcessor = exports.TableContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -26,8 +26,13 @@ var _tableCell = require("./tableCell");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
+var _appearance = require("../utils/appearance");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && (0, _appearance.isFullWidthOrFullPageAppearance)(appearance);
+};
+exports.isTableResizingEnabled = isTableResizingEnabled;
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
     return children;
@@ -261,7 +266,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance) {
         return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : Math.min((0, _nodeWidth.getTableContainerWidth)(tableNode), renderWidth);
       };
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && tableNode) {
+      if (isTableResizingEnabled(rendererAppearance) && tableNode) {
         tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
       } else {
         tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
@@ -284,7 +289,8 @@ 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.default.createElement("div", {
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": layout,
@@ -306,7 +312,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         wrapperWidth: wrapperWidth,
         columnWidths: columnWidths,
         rowHeight: this.headerRowHeight,
-        tableNode: tableNode
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
@@ -317,7 +324,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: renderWidth,
-        tableNode: tableNode
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance
       }, this.grabFirstRowRef(children)))));
     }
   }]);

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFullWidthOrFullPageAppearance = exports.isFullWidthAppearance = exports.isFullPageAppearance = void 0;
+var isFullWidthAppearance = function isFullWidthAppearance(appearance) {
+  return appearance === 'full-width';
+};
+exports.isFullWidthAppearance = isFullWidthAppearance;
+var isFullPageAppearance = function isFullPageAppearance(appearance) {
+  return appearance === 'full-page';
+};
+exports.isFullPageAppearance = isFullPageAppearance;
+var isFullWidthOrFullPageAppearance = function isFullWidthOrFullPageAppearance(appearance) {
+  return isFullPageAppearance(appearance) || isFullWidthAppearance(appearance);
+};
+exports.isFullWidthOrFullPageAppearance = isFullWidthOrFullPageAppearance;

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.7.2";
+var packageVersion = "108.7.3";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -12,7 +12,6 @@ var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _typography = require("@atlaskit/theme/typography");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -20,6 +19,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _consts = require("../../consts");
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
+var _table = require("../../react/nodes/table");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,14 +50,17 @@ var headingSizes = {
 };
 exports.headingSizes = headingSizes;
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
+  return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
+    (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName)
+  );
 };
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
   var allowNestedHeaderLinks = _ref.allowNestedHeaderLinks;
   if (!allowNestedHeaderLinks) {
     return '';
   }
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
+  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName);
 };
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var allowColumnSorting = _ref2.allowColumnSorting,
@@ -84,7 +87,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   if (appearance !== 'full-width') {
     return '';
   }
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
   if (useFragmentMarkBreakoutWidthStylingFix) {

package/dist/cjs/version.json

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

package/dist/es2019/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,13 +51,14 @@ export const Colgroup = props => {
     layout,
     isNumberColumnEnabled,
     renderWidth,
-    tableNode
+    tableNode,
+    rendererAppearance
   } = props;
   if (!columnWidths) {
     return null;
   }
   const 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
@@ -71,7 +73,7 @@ export const Colgroup = props => {
     return null;
   }
   let tableContainerWidth;
-  if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+  if (isTableResizingEnabled(rendererAppearance) && tableNode) {
     tableContainerWidth = getTableContainerWidth(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);

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

@@ -5,9 +5,9 @@ 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 const tableStickyPadding = 8;
 const modeSpecficStyles = {
   none: css`
@@ -20,54 +20,57 @@ const modeSpecficStyles = {
     position: absolute;
   `
 };
-let stickyHeaderZIndex;
-if (getBooleanFF('platform.editor.custom-table-width')) {
-  stickyHeaderZIndex = 13;
-} else {
-  stickyHeaderZIndex = akEditorStickyHeaderZIndex;
-}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
-const fixedTableDivStaticStyles = (top, width) => css`
-  ${typeof top === 'number' && `top: ${top}px;`}
-  width: ${width}px;
-  z-index: ${stickyHeaderZIndex};
-  &
-    .${TableSharedCssClassName.TABLE_CONTAINER},
+const fixedTableDivStaticStyles = (top, width, rendererAppearance) => {
+  let stickyHeaderZIndex;
+  if (isTableResizingEnabled(rendererAppearance)) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = akEditorStickyHeaderZIndex;
+  }
+  return css`
+    ${typeof top === 'number' && `top: ${top}px;`}
+    width: ${width}px;
+    z-index: ${stickyHeaderZIndex};
     &
-    .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
-    > table {
-    margin-top: 0;
-    margin-bottom: 0;
-    tr {
-      background: ${"var(--ds-surface, white)"};
+      .${TableSharedCssClassName.TABLE_CONTAINER},
+      &
+      .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
+      > table {
+      margin-top: 0;
+      margin-bottom: 0;
+      tr {
+        background: ${"var(--ds-surface, white)"};
+      }
     }
-  }
 
-  border-top: ${tableStickyPadding}px solid
-    ${"var(--ds-surface, white)"};
-  background: ${"var(--ds-surface-overlay, white)"};
-  box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
+    border-top: ${tableStickyPadding}px solid
+      ${"var(--ds-surface, white)"};
+    background: ${"var(--ds-surface-overlay, white)"};
+    box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
 
-  div[data-expanded='false'] & {
-    display: none;
-  }
+    div[data-expanded='false'] & {
+      display: none;
+    }
 
-  &
-    .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after,
     &
-    .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before {
-    top: 0px;
-    height: 100%;
-  }
-`;
+      .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after,
+      &
+      .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before {
+      top: 0px;
+      height: 100%;
+    }
+  `;
+};
 export const FixedTableDiv = props => {
   const {
     top,
     wrapperWidth,
-    mode
+    mode,
+    rendererAppearance
   } = props;
-  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, rendererAppearance), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
   const attrs = {
     mode
   };
@@ -90,11 +93,12 @@ export const StickyTable = ({
   columnWidths,
   renderWidth,
   rowHeight,
-  tableNode
+  tableNode,
+  rendererAppearance
 }) => {
   let 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'
@@ -112,7 +116,8 @@ export const StickyTable = ({
   }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
-    wrapperWidth: wrapperWidth
+    wrapperWidth: wrapperWidth,
+    rendererAppearance: rendererAppearance
   }, jsx("div", {
     className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,
     "data-layout": layout,
@@ -130,7 +135,8 @@ export const StickyTable = ({
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
-    tableNode: tableNode
+    tableNode: tableNode,
+    rendererAppearance: rendererAppearance
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

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

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

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

@@ -14,6 +14,8 @@ 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 const isTableResizingEnabled = appearance => getBooleanFF('platform.editor.custom-table-width') && isFullWidthOrFullPageAppearance(appearance);
 const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
@@ -221,7 +223,7 @@ export class TableContainer extends React.Component {
     const 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);
@@ -244,7 +246,8 @@ export class TableContainer extends 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: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
       "data-layout": layout,
@@ -266,7 +269,8 @@ export class TableContainer extends 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,
@@ -277,7 +281,8 @@ export class TableContainer extends React.Component {
       layout: layout,
       isNumberColumnEnabled: isNumberColumnEnabled,
       renderWidth: renderWidth,
-      tableNode: tableNode
+      tableNode: tableNode,
+      rendererAppearance: rendererAppearance
     }, this.grabFirstRowRef(children)))));
   }
 }

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

@@ -0,0 +1,3 @@
+export const isFullWidthAppearance = appearance => appearance === 'full-width';
+export const isFullPageAppearance = appearance => appearance === 'full-page';
+export const isFullWidthOrFullPageAppearance = appearance => isFullPageAppearance(appearance) || isFullWidthAppearance(appearance);

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

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

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.2",
+	"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.2";
+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.2",
+	"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.2",
+  "version": "108.7.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -50,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",
@@ -73,7 +73,7 @@
     "@af/visual-regression": "*",
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/css-reset": "^6.5.0",
-    "@atlaskit/editor-core": "^187.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",