@atlaskit/renderer 108.11.4 → 108.11.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/renderer
 
+## 108.11.5
+
+### Patch Changes
+
+- [`41e6188b408`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41e6188b408) - [ux] add scale down to undefined table in custom table width
+- Updated dependencies
+
 ## 108.11.4
 
 ### Patch Changes

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

@@ -43,7 +43,7 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
     return Math.max(Math.floor((1 - scaleDownPercent) * columnWidth), _styles.tableCellMinWidth);
   }
   return Math.max(
-  // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
+  // We need to take tableCellBorderWidth, to avoid unnecessary overflow.
   columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
 };
 var calcScalePercent = function calcScalePercent(_ref) {
@@ -54,48 +54,49 @@ var calcScalePercent = function calcScalePercent(_ref) {
   return diffPercent < maxScale ? diffPercent : maxScale;
 };
 exports.calcScalePercent = calcScalePercent;
-var Colgroup = function Colgroup(props) {
+var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var columnWidths = props.columnWidths,
     layout = props.layout,
     isNumberColumnEnabled = props.isNumberColumnEnabled,
     renderWidth = props.renderWidth,
     tableNode = props.tableNode,
     rendererAppearance = props.rendererAppearance;
+  var tableContainerWidth;
   if (!columnWidths) {
-    return null;
+    return [];
   }
+  var columnAmount = columnWidths.length;
   var tableResized = isTableResized(columnWidths);
+  var targetWidths;
   if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !tableResized) {
-    return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
-      style: {
-        width: _editorSharedStyles.akEditorTableNumberColumnWidth
-      }
-    }), columnWidths.map(function (_, idx) {
-      return /*#__PURE__*/_react.default.createElement("col", {
-        key: idx,
-        style: {
-          minWidth: "".concat(_styles.tableCellMinWidth, "px")
-        }
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column')) {
+      // Code path executed when feature flag is on
+      var tableDefaultWidth = isNumberColumnEnabled ? _editorSharedStyles.akEditorDefaultLayoutWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : _editorSharedStyles.akEditorDefaultLayoutWidth;
+      // take off 1 px for border incase column width wider than table width
+      var defaultColumnWidth = Math.floor((tableDefaultWidth - 1) / columnAmount);
+      targetWidths = new Array(columnAmount).fill(defaultColumnWidth);
+    } else {
+      return new Array(columnAmount).fill({
+        minWidth: "".concat(_styles.tableCellMinWidth, "px")
       });
-    }));
+    }
   } else if (!tableResized) {
     return null;
   }
-  var tableContainerWidth;
+  targetWidths = targetWidths || columnWidths;
   if ((0, _table.isTableResizingEnabled)(rendererAppearance) && tableNode) {
     tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
+
   // @see ED-6056
   var maxTableWidth = renderWidth < tableContainerWidth ? renderWidth : tableContainerWidth;
-  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.disable-default-width-table-scaling-renderer') && layout === 'default') {
-    renderWidth = Math.min(renderWidth, tableContainerWidth);
-  }
+  var targetWidth = !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.disable-default-width-table-scaling-renderer') && layout === 'default' ? Math.min(renderWidth, tableContainerWidth) : renderWidth;
   var tableWidth = isNumberColumnEnabled ? _editorSharedStyles.akEditorTableNumberColumnWidth : 0;
   var minTableWidth = tableWidth;
   var zeroWidthColumnsCount = 0;
-  columnWidths.forEach(function (width) {
+  targetWidths.forEach(function (width) {
     if (width) {
       tableWidth += Math.ceil(width);
     } else {
@@ -113,22 +114,37 @@ var Colgroup = function Colgroup(props) {
     }
   }
   // scaling down
-  else if (renderWidth < tableWidth) {
+  else if (targetWidth < tableWidth) {
     scaleDownPercent = calcScalePercent({
-      renderWidth: renderWidth,
+      renderWidth: targetWidth,
       tableWidth: tableWidth,
       maxScale: MAX_SCALING_PERCENT
     });
   }
-  return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
-    style: {
-      width: _editorSharedStyles.akEditorTableNumberColumnWidth
-    }
-  }), columnWidths.map(function (colWidth, idx) {
+  return targetWidths.map(function (colWidth) {
     var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount, scaleDownPercent) || cellMinWidth;
     var style = width ? {
       width: "".concat(width, "px")
     } : {};
+    return style;
+  });
+};
+var Colgroup = function Colgroup(props) {
+  var columnWidths = props.columnWidths,
+    isNumberColumnEnabled = props.isNumberColumnEnabled;
+  if (!columnWidths) {
+    return null;
+  }
+  var colStyles = renderScaleDownColgroup(props);
+  if (!colStyles) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
+    style: {
+      width: _editorSharedStyles.akEditorTableNumberColumnWidth
+    },
+    "data-test-id": 'num'
+  }), colStyles.map(function (style, idx) {
     return /*#__PURE__*/_react.default.createElement("col", {
       key: idx,
       style: style

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

@@ -440,7 +440,7 @@ var TableWithWidth = function TableWithWidth(props) {
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;
     }, 0)) || 0;
-    if (colWidthsSum) {
+    if (colWidthsSum || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column') && isTableResizingEnabled(props.rendererAppearance)) {
       return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
         renderWidth: renderWidth
       }, props));

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.11.4";
+var packageVersion = "108.11.5";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -35,7 +35,7 @@ const fixColumnWidth = (columnWidth, _tableWidth, _layoutWidth, zeroWidthColumns
     return Math.max(Math.floor((1 - scaleDownPercent) * columnWidth), tableCellMinWidth);
   }
   return Math.max(
-  // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
+  // We need to take tableCellBorderWidth, to avoid unnecessary overflow.
   columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
 export const calcScalePercent = ({
@@ -46,7 +46,7 @@ export const calcScalePercent = ({
   const diffPercent = 1 - renderWidth / tableWidth;
   return diffPercent < maxScale ? diffPercent : maxScale;
 };
-export const Colgroup = props => {
+const renderScaleDownColgroup = props => {
   let {
     columnWidths,
     layout,
@@ -55,39 +55,42 @@ export const Colgroup = props => {
     tableNode,
     rendererAppearance
   } = props;
+  let tableContainerWidth;
   if (!columnWidths) {
-    return null;
+    return [];
   }
+  const columnAmount = columnWidths.length;
   const tableResized = isTableResized(columnWidths);
+  let targetWidths;
   if (isTableResizingEnabled(rendererAppearance) && !tableResized) {
-    return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
-      style: {
-        width: akEditorTableNumberColumnWidth
-      }
-    }), columnWidths.map((_, idx) => /*#__PURE__*/React.createElement("col", {
-      key: idx,
-      style: {
+    if (getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column')) {
+      // Code path executed when feature flag is on
+      const tableDefaultWidth = isNumberColumnEnabled ? akEditorDefaultLayoutWidth - akEditorTableNumberColumnWidth : akEditorDefaultLayoutWidth;
+      // take off 1 px for border incase column width wider than table width
+      const defaultColumnWidth = Math.floor((tableDefaultWidth - 1) / columnAmount);
+      targetWidths = new Array(columnAmount).fill(defaultColumnWidth);
+    } else {
+      return new Array(columnAmount).fill({
         minWidth: `${tableCellMinWidth}px`
-      }
-    })));
+      });
+    }
   } else if (!tableResized) {
     return null;
   }
-  let tableContainerWidth;
+  targetWidths = targetWidths || columnWidths;
   if (isTableResizingEnabled(rendererAppearance) && tableNode) {
     tableContainerWidth = getTableContainerWidth(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
+
   // @see ED-6056
   const maxTableWidth = renderWidth < tableContainerWidth ? renderWidth : tableContainerWidth;
-  if (!getBooleanFF('platform.editor.disable-default-width-table-scaling-renderer') && layout === 'default') {
-    renderWidth = Math.min(renderWidth, tableContainerWidth);
-  }
+  const targetWidth = !getBooleanFF('platform.editor.disable-default-width-table-scaling-renderer') && layout === 'default' ? Math.min(renderWidth, tableContainerWidth) : renderWidth;
   let tableWidth = isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0;
   let minTableWidth = tableWidth;
   let zeroWidthColumnsCount = 0;
-  columnWidths.forEach(width => {
+  targetWidths.forEach(width => {
     if (width) {
       tableWidth += Math.ceil(width);
     } else {
@@ -105,25 +108,40 @@ export const Colgroup = props => {
     }
   }
   // scaling down
-  else if (renderWidth < tableWidth) {
+  else if (targetWidth < tableWidth) {
     scaleDownPercent = calcScalePercent({
-      renderWidth,
+      renderWidth: targetWidth,
       tableWidth,
       maxScale: MAX_SCALING_PERCENT
     });
   }
-  return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
-    style: {
-      width: akEditorTableNumberColumnWidth
-    }
-  }), columnWidths.map((colWidth, idx) => {
+  return targetWidths.map(colWidth => {
     const width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount, scaleDownPercent) || cellMinWidth;
     const style = width ? {
       width: `${width}px`
     } : {};
-    return /*#__PURE__*/React.createElement("col", {
-      key: idx,
-      style: style
-    });
-  }));
+    return style;
+  });
+};
+export const Colgroup = props => {
+  let {
+    columnWidths,
+    isNumberColumnEnabled
+  } = props;
+  if (!columnWidths) {
+    return null;
+  }
+  const colStyles = renderScaleDownColgroup(props);
+  if (!colStyles) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
+    style: {
+      width: akEditorTableNumberColumnWidth
+    },
+    "data-test-id": 'num'
+  }), colStyles.map((style, idx) => /*#__PURE__*/React.createElement("col", {
+    key: idx,
+    style: style
+  })));
 };

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

@@ -376,7 +376,7 @@ const TableWithWidth = props => /*#__PURE__*/React.createElement(WidthConsumer,
   var _props$columnWidths;
   const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
   const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
-  if (colWidthsSum) {
+  if (colWidthsSum || getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column') && isTableResizingEnabled(props.rendererAppearance)) {
     return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
       renderWidth: renderWidth
     }, props));

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.11.4";
+const packageVersion = "108.11.5";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -37,7 +37,7 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
     return Math.max(Math.floor((1 - scaleDownPercent) * columnWidth), tableCellMinWidth);
   }
   return Math.max(
-  // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
+  // We need to take tableCellBorderWidth, to avoid unnecessary overflow.
   columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
 export var calcScalePercent = function calcScalePercent(_ref) {
@@ -47,48 +47,49 @@ export var calcScalePercent = function calcScalePercent(_ref) {
   var diffPercent = 1 - renderWidth / tableWidth;
   return diffPercent < maxScale ? diffPercent : maxScale;
 };
-export var Colgroup = function Colgroup(props) {
+var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var columnWidths = props.columnWidths,
     layout = props.layout,
     isNumberColumnEnabled = props.isNumberColumnEnabled,
     renderWidth = props.renderWidth,
     tableNode = props.tableNode,
     rendererAppearance = props.rendererAppearance;
+  var tableContainerWidth;
   if (!columnWidths) {
-    return null;
+    return [];
   }
+  var columnAmount = columnWidths.length;
   var tableResized = isTableResized(columnWidths);
+  var targetWidths;
   if (isTableResizingEnabled(rendererAppearance) && !tableResized) {
-    return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
-      style: {
-        width: akEditorTableNumberColumnWidth
-      }
-    }), columnWidths.map(function (_, idx) {
-      return /*#__PURE__*/React.createElement("col", {
-        key: idx,
-        style: {
-          minWidth: "".concat(tableCellMinWidth, "px")
-        }
+    if (getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column')) {
+      // Code path executed when feature flag is on
+      var tableDefaultWidth = isNumberColumnEnabled ? akEditorDefaultLayoutWidth - akEditorTableNumberColumnWidth : akEditorDefaultLayoutWidth;
+      // take off 1 px for border incase column width wider than table width
+      var defaultColumnWidth = Math.floor((tableDefaultWidth - 1) / columnAmount);
+      targetWidths = new Array(columnAmount).fill(defaultColumnWidth);
+    } else {
+      return new Array(columnAmount).fill({
+        minWidth: "".concat(tableCellMinWidth, "px")
       });
-    }));
+    }
   } else if (!tableResized) {
     return null;
   }
-  var tableContainerWidth;
+  targetWidths = targetWidths || columnWidths;
   if (isTableResizingEnabled(rendererAppearance) && tableNode) {
     tableContainerWidth = getTableContainerWidth(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
+
   // @see ED-6056
   var maxTableWidth = renderWidth < tableContainerWidth ? renderWidth : tableContainerWidth;
-  if (!getBooleanFF('platform.editor.disable-default-width-table-scaling-renderer') && layout === 'default') {
-    renderWidth = Math.min(renderWidth, tableContainerWidth);
-  }
+  var targetWidth = !getBooleanFF('platform.editor.disable-default-width-table-scaling-renderer') && layout === 'default' ? Math.min(renderWidth, tableContainerWidth) : renderWidth;
   var tableWidth = isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0;
   var minTableWidth = tableWidth;
   var zeroWidthColumnsCount = 0;
-  columnWidths.forEach(function (width) {
+  targetWidths.forEach(function (width) {
     if (width) {
       tableWidth += Math.ceil(width);
     } else {
@@ -106,22 +107,37 @@ export var Colgroup = function Colgroup(props) {
     }
   }
   // scaling down
-  else if (renderWidth < tableWidth) {
+  else if (targetWidth < tableWidth) {
     scaleDownPercent = calcScalePercent({
-      renderWidth: renderWidth,
+      renderWidth: targetWidth,
       tableWidth: tableWidth,
       maxScale: MAX_SCALING_PERCENT
     });
   }
-  return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
-    style: {
-      width: akEditorTableNumberColumnWidth
-    }
-  }), columnWidths.map(function (colWidth, idx) {
+  return targetWidths.map(function (colWidth) {
     var width = fixColumnWidth(colWidth, minTableWidth, maxTableWidth, zeroWidthColumnsCount, scaleDownPercent) || cellMinWidth;
     var style = width ? {
       width: "".concat(width, "px")
     } : {};
+    return style;
+  });
+};
+export var Colgroup = function Colgroup(props) {
+  var columnWidths = props.columnWidths,
+    isNumberColumnEnabled = props.isNumberColumnEnabled;
+  if (!columnWidths) {
+    return null;
+  }
+  var colStyles = renderScaleDownColgroup(props);
+  if (!colStyles) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
+    style: {
+      width: akEditorTableNumberColumnWidth
+    },
+    "data-test-id": 'num'
+  }), colStyles.map(function (style, idx) {
     return /*#__PURE__*/React.createElement("col", {
       key: idx,
       style: style

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

@@ -431,7 +431,7 @@ var TableWithWidth = function TableWithWidth(props) {
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;
     }, 0)) || 0;
-    if (colWidthsSum) {
+    if (colWidthsSum || getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column') && isTableResizingEnabled(props.rendererAppearance)) {
       return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
         renderWidth: renderWidth
       }, props));

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.11.4";
+var packageVersion = "108.11.5";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SharedTableProps } from './types';
+import type { SharedTableProps } from './types';
 export interface ScaleOptions {
     renderWidth: number;
     tableWidth: number;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SharedTableProps } from './types';
+import type { SharedTableProps } from './types';
 export interface ScaleOptions {
     renderWidth: number;
     tableWidth: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.11.4",
+  "version": "108.11.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.9.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.45.0",
+    "@atlaskit/editor-common": "^74.47.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -118,6 +118,9 @@
     },
     "platform.editor.disable-default-width-table-scaling-renderer": {
       "type": "boolean"
+    },
+    "platform.editor.custom-table-width-scale-down-undefined-column": {
+      "type": "boolean"
     }
   }
-}
+}

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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