@atlaskit/editor-plugin-table 2.8.5 → 2.9.0

package/dist/cjs/plugins/table/ui/ui-styles.js

@@ -9,11 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _types = require("../types");
 var _consts = require("./consts");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 var InsertLine = function InsertLine(props, cssString) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, cssString);
 };
@@ -62,7 +63,7 @@ var DeleteButton = function DeleteButton(props) {
 };
 exports.DeleteButton = DeleteButton;
 var OverflowShadow = function OverflowShadow(props) {
-  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% + 2px);\n  }\n\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
+  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat(_consts.tableOverflowShadowWidth, "px)") : 'calc(100% + 2px)', _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
 };
 exports.OverflowShadow = OverflowShadow;
 var columnHeaderButton = function columnHeaderButton(props, cssString) {
@@ -71,21 +72,29 @@ var columnHeaderButton = function columnHeaderButton(props, cssString) {
 var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
   return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), (0, _consts.tableToolbarSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsSelectedZIndex);
 };
+var getFloatingDotOverrides = function getFloatingDotOverrides(props) {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n        tr\n          th:last-child\n          .", "::before,\n          tr\n          td:last-child\n          .", "::before {\n          content: '';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: ", ";\n          right: 0px;\n        }\n      "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)") : '';
+};
 var columnControlsDecoration = function columnControlsDecoration(props) {
-  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n    &::before {\n      content: ' ';\n      background-color: ", ";\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      border-radius: 50%;\n      pointer-events: none;\n      top: 2px;\n      right: -1px;\n    }\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  div.", ">.", "::after {\n    content: ' ';\n    background-color: ", ";\n    position: absolute;\n    height: ", "px;\n    width: ", "px;\n    border-radius: 50%;\n    pointer-events: none;\n    top: -", "px;\n    right: -1px;\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-of-type\n    td.", ",\n    table\n    tr:first-of-type\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-of-type\n    td.", ",\n    .", "\n    table\n    tr:first-of-type\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+  return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n    // floating dot for adding column button\n    &::before {\n      content: ' ';\n      background-color: ", ";\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      border-radius: 50%;\n      pointer-events: none;\n      top: 2px;\n      right: -1px;\n    }\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  // floating dot for adding column button - overriding style on last column to avoid scroll\n  ", "\n\n  div.", ">.", "::after {\n    content: ' ';\n    background-color: ", ";\n    position: absolute;\n    height: ", "px;\n    width: ", "px;\n    border-radius: 50%;\n    pointer-events: none;\n    top: -", "px;\n    right: -1px;\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-of-type\n    td.", ",\n    table\n    tr:first-of-type\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-of-type\n    td.", ",\n    .", "\n    table\n    tr:first-of-type\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
 };
 exports.columnControlsDecoration = columnControlsDecoration;
 var hoveredDeleteButton = function hoveredDeleteButton(props) {
-  return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
+  return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
 };
 exports.hoveredDeleteButton = hoveredDeleteButton;
 var hoveredCell = function hoveredCell(props) {
-  return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
+  return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
 };
 exports.hoveredCell = hoveredCell;
-var hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
+var hoveredWarningCell = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
+
+// move the resize handle zone completely inside the table cell to avoid overflow
 exports.hoveredWarningCell = hoveredWarningCell;
+var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerZIndex) : '';
+};
 var resizeHandle = function resizeHandle(props) {
-  return (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -2px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -2px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+  return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -2px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -2px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 exports.resizeHandle = resizeHandle;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.5",
+	"version": "2.9.0",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
@@ -28,7 +29,7 @@ export class OverflowShadowsObserver {
         }, {
           threshold: [0, 1],
           root: this.wrapper,
-          rootMargin: `0px ${tableInsertColumnButtonSize / 2}px 0px 0px`
+          rootMargin: getBooleanFF('platform.editor.custom-table-width') ? '0px' : `0px ${tableInsertColumnButtonSize / 2}px 0px 0px`
         });
         return;
       }

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -8,6 +8,7 @@ import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -15,6 +16,7 @@ import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scal
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
+import { tableOverflowShadowWidth } from '../ui/consts';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
@@ -126,8 +128,7 @@ class TableComponent extends React.Component {
         if (shouldScaleTable) {
           this.scaleTable({
             parentWidth,
-            layoutChanged,
-            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            layoutChanged
           });
         }
 
@@ -135,9 +136,8 @@ class TableComponent extends React.Component {
         if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
           if (!hasTableBeenResized(prevNode)) {
             this.scaleTable({
-              parentWidth,
-              layoutChanged,
-              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+              parentWidth: node.attrs.width,
+              layoutChanged
             });
           }
         }
@@ -501,7 +501,7 @@ class TableComponent extends React.Component {
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
-        right: '-2px'
+        right: getBooleanFF('platform.editor.custom-table-width') ? `${tableOverflowShadowWidth}px` : '-2px'
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,

package/dist/es2019/plugins/table/nodeviews/TableContainer.js

@@ -126,7 +126,7 @@ export const TableContainer = ({
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: classNames(className, {
-      'less-padding': editorWidth < akEditorMobileBreakoutPoint
+      'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
       width: tableWidth,

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -36,7 +36,9 @@ const getResizerHandleHeight = tableRef => {
 const getResizerMinWidth = node => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
-  return minColumnWidth;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };
 export const TableResizer = ({
   children,

package/dist/es2019/plugins/table/pm-plugins/keymap.js

@@ -1,10 +1,10 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, nextCell, previousCell, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
 import { addRowAroundSelection, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
-import { addColumnAfter, addColumnBefore } from '../commands/insert';
+import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
 const createTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI({
   action: ACTION.INSERTED,
@@ -17,17 +17,17 @@ const createTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI({
 })(editorAnalyticsAPI)(createTable());
 export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI) {
   const list = {};
-  keymaps.bindKeymapWithCommand(keymaps.nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
-  keymaps.bindKeymapWithCommand(keymaps.previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
-  keymaps.bindKeymapWithCommand(keymaps.toggleTable.common, createTableWithAnalytics(editorAnalyticsAPI), list);
-  keymaps.bindKeymapWithCommand(keymaps.backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
-  keymaps.bindKeymapWithCommand(keymaps.backspace.common, moveCursorBackward, list);
+  bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
+  bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
+  bindKeymapWithCommand(toggleTable.common, createTableWithAnalytics(editorAnalyticsAPI), list);
+  bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
+  bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 
   // Add row/column shortcuts
-  keymaps.bindKeymapWithCommand(keymaps.addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
-  keymaps.bindKeymapWithCommand(keymaps.addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  keymaps.bindKeymapWithCommand(keymaps.addColumnBefore.common, triggerUnlessTableHeader(addColumnBefore(getEditorContainerWidth)), list);
-  keymaps.bindKeymapWithCommand(keymaps.addColumnAfter.common, addColumnAfter(getEditorContainerWidth), list);
+  bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
+  bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
+  bindKeymapWithCommand(addColumnBefore.common, triggerUnlessTableHeader(addColumnBeforeCommand(getEditorContainerWidth)), list);
+  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(getEditorContainerWidth), list);
   return keymap(list);
 }
 export default keymapPlugin;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -4,6 +4,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
 import { evenColumns, setDragging, stopResizing } from './commands';
@@ -31,7 +32,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   }
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
-  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+  let maxSize = getBooleanFF('platform.editor.custom-table-width') ? parentWidth ||
+  // its safe to reference table width from node as this will not have changed
+  originalTable.attrs.width || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;
   }

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/colgroup.js

@@ -3,9 +3,17 @@ import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+/**
+ * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
+ * than the table and table wrapper elements. This is necessary as there is no longer
+ * padding on the .pm-table-wrapper, so all elements need to be the same width to avoid
+ * overflow.
+ */
+export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
 export const generateColgroup = table => {
   const cols = [];
   if (getBooleanFF('platform.editor.custom-table-width')) {
+    const map = TableMap.get(table);
     table.content.firstChild.content.forEach(cell => {
       const colspan = cell.attrs.colspan || 1;
       if (Array.isArray(cell.attrs.colwidth)) {
@@ -13,7 +21,7 @@ export const generateColgroup = table => {
         // Than the we actually span. We'll patch the document at a later point.
         cell.attrs.colwidth.slice(0, colspan).forEach(width => {
           cols.push(['col', {
-            style: `width: ${width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth}px;`
+            style: `width: ${getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width)}px;`
           }]);
         });
       } else {

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -66,12 +66,7 @@ export const getTableMaxWidth = ({
 }) => {
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  let maxWidth;
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    maxWidth = parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {});
-  } else {
-    maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
-  }
+  let maxWidth = getBooleanFF('platform.editor.custom-table-width') ? parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {}) : parentWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -1,7 +1,8 @@
 import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getSelectedTableInfo } from '../../../utils';
-import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
+import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
 import { getTableMaxWidth } from './misc';
@@ -52,12 +53,22 @@ export const getResizeState = ({
 // updates Colgroup DOM node with new widths
 export const updateColgroup = (state, tableRef) => {
   const cols = tableRef.querySelectorAll('col');
-  state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
-  .forEach((column, i) => {
-    if (cols[i]) {
-      cols[i].style.width = `${column.width}px`;
-    }
-  });
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    const columnsCount = cols.length;
+    state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+    .forEach((column, i) => {
+      if (cols[i]) {
+        cols[i].style.width = `${getColWidthFix(column.width, columnsCount)}px`;
+      }
+    });
+  } else {
+    state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+    .forEach((column, i) => {
+      if (cols[i]) {
+        cols[i].style.width = `${column.width}px`;
+      }
+    });
+  }
 
   // colgroup has updated, reflect new widths in sticky header
   syncStickyRowToTable(tableRef);

package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addRowAfter, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -53,9 +53,9 @@ const InsertButton = ({
   hasStickyHeaders
 }) => {
   const content = /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement(keymaps.ToolTipContent, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
       description: formatMessage(tooltipMessageByType(type)),
-      keymap: type === 'row' ? keymaps.addRowAfter : keymaps.addColumnAfter
+      keymap: type === 'row' ? addRowAfter : addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
@@ -88,6 +89,31 @@ const breakoutWidthStyling = () => {
     }
   `;
 };
+const tableWrapperStyles = () => {
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    return css`
+      .${ClassName.TABLE_NODE_WRAPPER} {
+        padding-bottom: 0px;
+        /* fixes gap cursor height */
+        overflow: auto;
+        overflow-y: hidden;
+        position: relative;
+      }
+    `;
+  } else {
+    return css`
+      .${ClassName.TABLE_NODE_WRAPPER} {
+        padding-right: ${insertColumnButtonOffset}px;
+        margin-right: -${insertColumnButtonOffset}px;
+        padding-bottom: 0px;
+        /* fixes gap cursor height */
+        overflow: auto;
+        overflow-y: hidden;
+        position: relative;
+      }
+    `;
+  }
+};
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = props => {
@@ -658,15 +684,7 @@ export const tableStyles = props => {
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       left: -${tableToolbarSize}px;
     }
-    .${ClassName.TABLE_NODE_WRAPPER} {
-      padding-right: ${insertColumnButtonOffset}px;
-      margin-right: -${insertColumnButtonOffset}px;
-      padding-bottom: 0px;
-      /* fixes gap cursor height */
-      overflow: auto;
-      overflow-y: hidden;
-      position: relative;
-    }
+    ${tableWrapperStyles()}
   }
 
   .ProseMirror.${ClassName.IS_RESIZING} {

package/dist/es2019/plugins/table/ui/consts.js

@@ -97,6 +97,7 @@ export const contextualMenuDropdownWidth = 180;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
+export const tableOverflowShadowWidth = 8;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor(props)};
@@ -186,7 +187,7 @@ export const OverflowShadow = props => css`
     pointer-events: none;
     top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
-    width: 8px;
+    width: ${tableOverflowShadowWidth}px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
     background: linear-gradient(
@@ -215,9 +216,8 @@ export const OverflowShadow = props => css`
         ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
         transparent 1px
       );
-    left: calc(100% + 2px);
+    left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${tableOverflowShadowWidth}px)` : 'calc(100% + 2px)'};
   }
-
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
       height: calc(100% - ${tableMarginTopWithControl}px);
@@ -247,6 +247,26 @@ const columnHeaderButtonSelected = props => css`
   border-color: ${tableBorderSelectedColor(props)};
   z-index: ${columnControlsSelectedZIndex};
 `;
+const getFloatingDotOverrides = props => {
+  return getBooleanFF('platform.editor.custom-table-width') ? css`
+        tr
+          th:last-child
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
+          tr
+          td:last-child
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
+          content: '';
+          background-color: ${tableBorderColor(props)};
+          position: absolute;
+          height: ${lineMarkerSize}px;
+          width: ${lineMarkerSize}px;
+          border-radius: 50%;
+          pointer-events: none;
+          top: ${"var(--ds-space-025, 2px)"};
+          right: 0px;
+        }
+      ` : '';
+};
 export const columnControlsDecoration = props => css`
   .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
     display: none;
@@ -256,6 +276,7 @@ export const columnControlsDecoration = props => css`
     left: -1px;
     top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
     height: ${columnControlsDecorationHeight}px;
+    // floating dot for adding column button
     &::before {
       content: ' ';
       background-color: ${tableBorderColor(props)};
@@ -284,6 +305,9 @@ export const columnControlsDecoration = props => css`
     }
   }
 
+  // floating dot for adding column button - overriding style on last column to avoid scroll
+  ${getFloatingDotOverrides(props)}
+
   div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
     content: ' ';
     background-color: ${tableBorderColor(props)};
@@ -366,6 +390,27 @@ export const hoveredWarningCell = css`
     }
   }
 `;
+
+// move the resize handle zone completely inside the table cell to avoid overflow
+const getLastColumnResizerOverrides = () => {
+  return getBooleanFF('platform.editor.custom-table-width') ? css`
+        tr
+          th:last-child
+          .${ClassName.RESIZE_HANDLE_DECORATION},
+          tr
+          td:last-child
+          .${ClassName.RESIZE_HANDLE_DECORATION} {
+          background-color: transparent;
+          position: absolute;
+          width: ${resizeHandlerAreaWidth}px;
+          height: 100%;
+          top: 0;
+          right: 0;
+          cursor: col-resize;
+          z-index: ${resizeHandlerZIndex};
+        }
+      ` : '';
+};
 export const resizeHandle = props => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
@@ -379,6 +424,8 @@ export const resizeHandle = props => css`
       z-index: ${resizeHandlerZIndex};
     }
 
+    ${getLastColumnResizerOverrides()}
+
     td.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
       position: absolute;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.5",
+	"version": "2.9.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
@@ -34,7 +35,7 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
         }, {
           threshold: [0, 1],
           root: _this.wrapper,
-          rootMargin: "0px ".concat(tableInsertColumnButtonSize / 2, "px 0px 0px")
+          rootMargin: getBooleanFF('platform.editor.custom-table-width') ? '0px' : "0px ".concat(tableInsertColumnButtonSize / 2, "px 0px 0px")
         });
         return;
       }

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -18,6 +18,7 @@ import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -25,6 +26,7 @@ import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scal
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
+import { tableOverflowShadowWidth } from '../ui/consts';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
@@ -134,8 +136,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (shouldScaleTable) {
           _this.scaleTable({
             parentWidth: parentWidth,
-            layoutChanged: layoutChanged,
-            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            layoutChanged: layoutChanged
           });
         }
 
@@ -143,9 +144,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
           if (!hasTableBeenResized(prevNode)) {
             _this.scaleTable({
-              parentWidth: parentWidth,
-              layoutChanged: layoutChanged,
-              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+              parentWidth: node.attrs.width,
+              layoutChanged: layoutChanged
             });
           }
         }
@@ -496,7 +496,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         style: {
           position: 'absolute',
-          right: '-2px'
+          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(tableOverflowShadowWidth, "px") : '-2px'
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -122,7 +122,7 @@ export var TableContainer = function TableContainer(_ref3) {
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: classNames(className, {
-      'less-padding': editorWidth < akEditorMobileBreakoutPoint
+      'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
       width: tableWidth,