@atlaskit/renderer 108.7.1 → 108.7.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [`3fb20c4aeba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fb20c4aeba) - Add postinstall check to enforce internal peer dependencies
+
 ## 108.7.1
 
 ### 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.1";
+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.1",
+	"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.1";
+const packageVersion = "108.7.3";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);