@eclipse-scout/core 22.0.0 → 22.0.10

package/src/style/colors-dark.less

@@ -19,13 +19,13 @@
 @palette-gray-3: #BFC2C3;
 @palette-gray-4: #A7ACAD;
 @palette-gray-5: #7E8588;
-@palette-gray-5-1: #445155;
-@palette-gray-6: #344146;
-@palette-gray-6-1: #283438;
-@palette-gray-7: #252e31;
-@palette-gray-8: #1F272B;
-@palette-gray-9: #181C1F;
-@palette-gray-10: #0C1013;
+@palette-gray-5-1: #4B595E;
+@palette-gray-6: #3B494F;
+@palette-gray-6-1: #2E3C41;
+@palette-gray-7: #2C363A;
+@palette-gray-8: #252F34;
+@palette-gray-9: #1F2428;
+@palette-gray-10: #0E1316;
 
 @fade-white-0: fade(@palette-white, 25%);
 @fade-white-1: fade(@palette-white, 18%);
@@ -75,8 +75,14 @@
 @warning-color: @palette-orange-2;
 @ok-color: @palette-green-2;
 @error-background-color: @background-color;
+@error-default-button-background-hover-color: lighten(@error-color, 6%);
+@error-default-button-background-active-color: lighten(@error-color, 10%);
 @error-focus-box-shadow-color: mix(@error-color, @palette-black, 50%);
+@warning-default-button-background-hover-color: lighten(@warning-color, 8%);
+@warning-default-button-background-active-color: lighten(@warning-color, 12%);
 @warning-focus-box-shadow-color: mix(@warning-color, @palette-black, 50%);
+@ok-default-button-background-hover-color: lighten(@ok-color, 8%);
+@ok-default-button-background-active-color: lighten(@ok-color, 14%);
 @ok-focus-box-shadow-color: mix(@ok-color, @palette-black, 50%);
 @focus-border-color: @focus-color;
 @focus-box-shadow-color: darken(@focus-color, 30%);
@@ -102,7 +108,8 @@
 @popup-2-background-color: @palette-gray-6;
 @popup-2-backdrop-background-color: fade(@popup-2-background-color, 80%);
 @popup-2-backdrop-filter: blur(15px);
-@selected-hover-background-color: darken(@selected-background-color, 10%);
+@selected-hover-background-color: lighten(@selected-background-color, 8%);
+@selected-active-background-color: lighten(@selected-background-color, 12%);
 @selected-disabled-background-color: @palette-gray-5;
 @text-color: @palette-gray-2;
 @text-color-1: @palette-gray-3;
@@ -129,9 +136,11 @@
 @carousel-current-item-color: @palette-gray-1;
 @check-box-border-color: @palette-gray-5;
 @mode-color: @text-color;
-@mode-alternative-background-color: @palette-gray-10;
+@mode-alternative-background-color: fade(@palette-black, 60%);
 @mode-alternative-selected-background-color: @palette-gray-7;
 @mode-alternative-selected-background-disabled-color: @palette-gray-8;
+@mode-alternative-hover-background-color: @palette-gray-9;
+@mode-alternative-active-background-color: @palette-gray-6;
 @closer-action-color: @text-color;
 @closer-color: @palette-gray-3;
 @closer-hover-color: @text-color;
@@ -150,13 +159,15 @@
 @date-picker-separator-color: @palette-gray-4;
 @date-picker-day-preselected-background-color: fade(@palette-white, 8%);
 @dashboard-tile-border-color: @border-color;
-@dashboard-tile-alternative-selected-border-color: @dashboard-tile-selected-border-color;
-@dashboard-tile-default-selected-border-color: @dashboard-tile-selected-border-color;
+@dashboard-tile-default-inverted-selected-border-color: @item-selection-border-color;
+@dashboard-tile-alternative-selected-border-color: @dashboard-tile-default-selected-border-color;
+@dashboard-tile-alternative-inverted-selected-border-color: @item-selection-border-color;
 @desktop-bench-drop-shadow-color: fade(@palette-black, 35%);
 @desktop-header-background-color: @palette-gray-10;
 @desktop-header-border-color: @palette-gray-8;
 @desktop-header-color: @title-color;
 @desktop-logo-background-color: transparent;
+@desktop-tab-border-color: @border-color;
 @desktop-tab-closer-hover-background-color: @hover-background-color;
 @desktop-tab-closer-active-background-color: @active-background-color;
 @desktop-tab-status-color: @save-needer-color;
@@ -179,6 +190,7 @@
 @planner-large-scale-item-line-color: fade(@palette-white, 20%);
 @planner-resource-title-color: @text-color;
 @planner-small-scale-item-line-color: fade(@palette-white, 7%);
+@scroll-shadow-alpha: 0;
 @scrollbar-thumb-main-color: @palette-white;
 @scrollbar-thumb-color: fade(@scrollbar-thumb-main-color, 20%);
 @scrollbar-thumb-hover-color: fade(@scrollbar-thumb-main-color, 30%);
@@ -235,6 +247,8 @@
 @tile-default-inverted-link-hover-color: @link-hover-color;
 @tile-default-inverted-status-hover-background-color: @hover-background-color;
 @tile-default-inverted-status-active-background-color: @active-background-color;
+@tile-default-inverted-error-status-color: @status-error-color;
+@tile-default-inverted-error-status-hover-color: @status-error-hover-color;
 @tile-default-label-color: @text-color-1;
 @tile-default-link-active-color: @link-active-color;
 @tile-table-default-inverted-selection-background-color: @item-selection-background-color;

package/src/style/colors.less

@@ -101,8 +101,14 @@
 @ok-color: @palette-green-5;
 @error-background-color: @palette-red-0;
 @error-border-color: @error-color;
+@error-default-button-background-hover-color: darken(@error-color, 6%);
+@error-default-button-background-active-color: darken(@error-color, 13%);
 @error-focus-box-shadow-color: fade(@error-color, 40%);
+@warning-default-button-background-hover-color: darken(@warning-color, 6%);
+@warning-default-button-background-active-color: darken(@warning-color, 13%);
 @warning-focus-box-shadow-color: fade(@warning-color, 40%);
+@ok-default-button-background-hover-color: darken(@ok-color, 6%);
+@ok-default-button-background-active-color: darken(@ok-color, 13%);
 @ok-focus-box-shadow-color: fade(@ok-color, 40%);
 @focus-border-color: @accent-color-3;
 @focus-box-shadow-color: darken(@accent-color-1, 10%);
@@ -221,9 +227,12 @@
 @context-menu-item-color: @text-color;
 @context-menu-item-icon-color: @link-color;
 @dashboard-tile-border-color: darken(@palette-gray-3, 5%);
-@dashboard-tile-selected-border-color: @item-selection-border-color;
+@dashboard-tile-default-inverted-background-color: mix(@tile-default-inverted-background-color, @tile-default-inverted-selection-background-color, 65%);
+@dashboard-tile-alternative-inverted-background-color: mix(@tile-alternative-inverted-background-color, @tile-alternative-inverted-selection-background-color, 65%);
+@dashboard-tile-default-selected-border-color: @item-selection-border-color;
+@dashboard-tile-default-inverted-selected-border-color: @dashboard-tile-default-inverted-background-color;
 @dashboard-tile-alternative-selected-border-color: @tile-alternative-inverted-background-color;
-@dashboard-tile-default-selected-border-color: @tile-default-inverted-background-color;
+@dashboard-tile-alternative-inverted-selected-border-color: @dashboard-tile-alternative-inverted-background-color;
 @date-picker-day-hover-background-color: @hover-background-color;
 @date-picker-day-selected-color: @selected-color;
 @date-picker-day-selected-background-color: @selected-background-color;
@@ -260,6 +269,7 @@
 @desktop-header-background-color: @accent-color-3;
 @desktop-header-border-color: @border-color;
 @desktop-tab-background-color: fade(@palette-black, 10%);
+@desktop-tab-border-color: transparent;
 @desktop-tab-flash-background-color: fade(@palette-black, 40%);
 @desktop-tab-closer-hover-background-color: fade(@palette-black, 14%);
 @desktop-tab-closer-active-background-color: fade(@palette-black, 20%);
@@ -292,6 +302,8 @@
 @mode-alternative-selected-background-color: @palette-white;
 @mode-alternative-selected-background-disabled-color: @palette-gray-4;
 @mode-alternative-background-color: rgba(0, 0, 0, 0.08);
+@mode-alternative-hover-background-color: rgba(0, 0, 0, 0.05);
+@mode-alternative-active-background-color: rgba(0, 0, 0, 0.1);
 @navigate-up-button-border-color: @button-border-color;
 @navigate-up-button-color: @button-color;
 @desktop-navigation-background-color: @desktop-header-background-color;
@@ -474,6 +486,8 @@
 @tile-default-inverted-link-active-color: fade(@tile-default-inverted-color, 75%);
 @tile-default-inverted-status-hover-background-color: fade(@palette-black, 15%);
 @tile-default-inverted-status-active-background-color: fade(@palette-black, 20%);
+@tile-default-inverted-error-status-color: @palette-red-3;
+@tile-default-inverted-error-status-hover-color: @tile-default-inverted-error-status-color;
 @tile-placeholder-background-color: @palette-gray-3;
 @tile-scrollbar-thumb-inverted-main-color: @palette-gray-4;
 @tile-scrollbar-thumb-inverted-color: fade(@tile-scrollbar-thumb-inverted-main-color, 30%);
@@ -509,7 +523,7 @@
 @top-label-disabled-color: @label-disabled-color;
 @tree-node-active-background-color: @item-active-background-color;
 @tree-node-control-color: inherit;
-@view-tab-selected-color: @active-color;
+@view-tab-selected-color: @outline-title-color;
 @view-tab-selected-background-color: @desktop-navigation-body-background-color;
 @view-tab-in-background-selected-background-color: @desktop-navigation-body-in-background-background-color;
 @view-tab-hover-background-color: fade(@palette-black, 20%);

package/src/style/fonts.less

@@ -33,13 +33,22 @@ Try these to switch between fonts:
 @font-size-large: 16px;
 @font-size-extra-large: 32px;
 
+@font-size-icon-small: 14px;
 @font-size-icon: 16px;
 @font-size-icon-large: 24px;
 
 @letter-spacing: 0.2px;
 
-@icon-font-weight-light: 300;
+// Arial font is hard to vertically align, especially with icons
+// This variable can be used to fix the alignment for specific widgets that can have an icon
+// or are often placed to the side of widgets with icons
+@text-margin-top: 1px;
+
+// Icons aligned with line-height may use this variable.
+// It should have the same size as regular text (not the font-size, the actual size)
+@font-icon-line-height: 15px;
 
+@icon-font-weight-light: 300;
 @tooltip-font-weight: @font-weight-normal;
 
 @font-face {

package/src/style/mixins.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -70,26 +70,30 @@
     padding-bottom: 0;
   }
 
-  .inverted-bottom-round-edge(@border-radius: 12px, @width: 24px, @color: #ffffff) {
+  .inverted-bottom-round-edge(@border-radius: 12px, @color: #ffffff) {
+    @border-width: 5px;
+
     --color: @color; // Allows to change color only
     position: absolute;
     pointer-events: none;
     background-color: transparent;
-    bottom: 0;
-    height: 2 * @width;
-    width: @width;
-    box-shadow: 0 @width 0 0 var(--color);
-    // Cut the leftover on the bottom to only get the edge. Use 110%/-10% because with 100%/0% there are drawing issues, at least with Chrome (a very thin line won't be colored)
-    clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
+    bottom: -@border-width;
+    height: @border-radius;
+    width: @border-radius;
+    box-sizing: content-box;
+    border: @border-width solid var(--color);
+    border-top: none;
 
     &.left {
-      left: -@width;
-      border-bottom-right-radius: @border-radius;
+      left: -@border-radius;
+      border-bottom-right-radius: @border-radius+@border-width;
+      border-left: none;
     }
 
     &.right {
-      right: -@width;
-      border-bottom-left-radius: @border-radius;
+      right: -@border-radius;
+      border-bottom-left-radius: @border-radius+@border-width;
+      border-right: none;
     }
   }
 
@@ -213,8 +217,7 @@
     }
   }
 
-  .tooltip-status,
-  .info-status {
+  .tooltip-status {
     visibility: visible;
     cursor: pointer;
 
@@ -236,6 +239,10 @@
     }
   }
 
+  .info-status {
+    #scout.tooltip-status();
+  }
+
   .ok-status {
     visibility: visible;
     cursor: pointer;

package/src/style/sizes-dark.less

@@ -8,5 +8,8 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
+@desktop-tab-border-width: 1px;
 @popup-border-width: 1px;
-@tooltip-border-width: 1px;
+@tooltip-border-width: 1px;
+@scroll-shadow-size-large: 14px;
+@scroll-shadow-size: @scroll-shadow-size-large;

package/src/style/sizes.less

@@ -3,7 +3,7 @@
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -17,6 +17,8 @@
 @border-radius-medium: 8px;
 @border-radius-large: 12px;
 @borderless-field-padding-y: @text-field-padding-y + 1px;
+@breadcrumb-bar-field-padding-bottom: 0;
+@breadcrumb-bar-field-padding-bottom-dense: 4px;
 @collapse-handle-border-radius: @border-radius-medium;
 @control-border-radius: @border-radius;
 @control-alternative-border-radius: @control-border-radius;
@@ -55,7 +57,7 @@
 @focus-box-shadow-size: 3px;
 @text-field-padding-x: 10px;
 @text-field-padding-y: 7px;
-@text-field-padding-top-compensation: 1px;
+@text-field-padding-top-compensation: 1px + @text-margin-top;
 @text-field-alternative-padding-left: 0;
 @text-field-alternative-padding-right: 0;
 @text-field-icon-size: 24px;
@@ -162,6 +164,7 @@
 @desktop-navigation-width: 290px;
 @desktop-notification-no-icon-padding-y: 16px;
 @desktop-tab-border-radius: @view-tab-border-radius;
+@desktop-tab-border-width: 0;
 @desktop-tab-key-box-bottom: @view-tab-key-box-bottom;
 @desktop-tab-margin-top: @view-tab-margin-top;
 @desktop-tab-margin-right: 3px;
@@ -172,7 +175,7 @@
 @desktop-tab-border-radius: @view-tab-selected-border-radius;
 @desktop-tab-margin-top: @view-tab-selected-margin-top;
 @desktop-tool-box-item-border-radius: @view-tab-border-radius;
-@desktop-tool-box-item-font-size: 14px;
+@desktop-tool-box-item-font-size: @font-size-icon-small;
 @desktop-tool-box-item-margin: 3px;
 @desktop-tool-box-item-margin-top: @view-tab-margin-top;
 @detail-table-border-radius: 4px;
@@ -223,21 +226,19 @@
 @mobile-popup-title-margin-top: 10px;
 @mode-padding-x: 12px;
 @mode-padding-y: 6px;
-@mode-padding-dense: @mode-padding-dense-y @mode-padding-dense-x;
 @mode-padding-dense-x: 5px;
 @mode-padding-dense-y: 3px;
 @mode-border-width: 1px;
-@mode-alternative-border-width: 3px;
+@mode-selector-alternative-border-width: 3px;
 @notification-no-icon-padding-y: 13px;
 @outline-breadcrumb-node-padding-x: @outline-title-padding-left;
 @outline-breadcrumb-node-padding-y: 12px;
 @outline-data-padding-top: 16px;
 @outline-font-size: @font-size-normal;
-@outline-node-control-size: 18px;
 @outline-node-control-padding-left: @outline-title-padding-left;
 @outline-node-control-padding-y: @outline-node-padding-y;
 @outline-node-control-line-height: @tree-node-control-line-height;
-@outline-node-font-icon-line-height: 14px;
+@outline-node-font-icon-line-height: @tree-node-font-icon-line-height;
 @outline-node-font-icon-size: 16px;
 @outline-node-padding-left: 37px;
 @outline-node-padding-right: 8px;
@@ -292,9 +293,15 @@
 @tab-item-title-padding-bottom: @group-box-title-padding-bottom;
 @tab-item-title-padding-top: @group-box-title-padding-top;
 @tab-item-title-margin-top: @group-box-header-margin-top;
+@table-aggregate-cell-font-icon-line-height: 14px;
+@table-aggregate-sum-avg-font-icon-size: 13px;
+@table-aggregate-min-max-font-icon-size: 15px;
+@table-aggregate-row-font-size: @font-size-smaller;
 @table-cell-padding-left: 10px;
 @table-cell-padding-right: @table-cell-padding-left;
 @table-cell-padding-right-last: @scrollbar-size;
+@table-cell-font-icon-size: @tree-node-font-icon-size;
+@table-cell-font-icon-line-height: @tree-node-font-icon-line-height;
 @table-control-content-padding: 10px;
 @table-control-container-height: 364px;
 @table-control-container-height-dense: 320px;
@@ -350,9 +357,10 @@
 @tree-node-checkbox-margin-top: -2px;
 @tree-node-control-checkbox-size: 20px + @tree-node-control-size;
 @tree-node-control-size: 16px;
-@tree-node-control-line-height: 14px;
+@tree-node-control-line-height: @font-icon-line-height;
 @tree-node-control-padding-left: 13px;
-@tree-node-font-icon-line-height: 15px;
+@tree-node-font-icon-line-height: @font-icon-line-height;
+@tree-node-font-icon-size: @font-size-icon-small;
 @tree-node-padding-left: 28px;
 @tree-node-padding-right: 7px;
 @tree-node-padding-y: 7px;

package/src/table/Table.js

@@ -23,6 +23,7 @@ export default class Table extends Widget {
     this.contextColumn = null;
     this.checkable = false;
     this.checkableStyle = Table.CheckableStyle.CHECKBOX;
+    this.cellEditorPopup = null;
     this.compact = false;
     this.compactHandler = scout.create('TableCompactHandler', {table: this});
     this.compactColumn = null;
@@ -100,6 +101,7 @@ export default class Table extends Widget {
     this._popupOpenHandler = this._onDesktopPopupOpen.bind(this);
     this._rerenderViewPortAfterAttach = false;
     this._renderViewPortAfterAttach = false;
+    this._postAttachActions = [];
     this._desktopPropertyChangeHandler = this._onDesktopPropertyChange.bind(this);
     this._addWidgetProperties(['tableControls', 'menus', 'keyStrokes', 'staticMenus', 'tileTableHeader', 'tableTileGridMediator']);
 
@@ -475,7 +477,6 @@ export default class Table extends Widget {
   }
 
   _removeData() {
-    this._destroyCellEditorPopup();
     this._removeAggregateRows();
     this._uninstallImageListeners();
     this._uninstallCellTooltipSupport();
@@ -554,7 +555,7 @@ export default class Table extends Widget {
       return; // row was removed while loading the image
     }
     let oldRowHeight = row.height;
-    row.height = $row.outerHeight(true);
+    row.height = this._measureRowHeight($row);
     if (oldRowHeight !== row.height) {
       this.invalidateLayoutTree();
     }
@@ -633,11 +634,11 @@ export default class Table extends Widget {
       // Don't start cell editor or trigger click if row control was clicked (expansion itself is handled by the mouse down handler)
       return;
     }
+    let row = $row.data('row'); // read row before the $row potentially could be replaced by the column specific logic on mouse up
     if (mouseButton === 1) {
       column.onMouseUp(event, $row);
       $appLink = this._find$AppLink(event);
     }
-    let row = $row.data('row');
     if ($appLink) {
       this._triggerAppLinkAction(column, row, $appLink.data('ref'), $appLink);
     } else {
@@ -848,7 +849,7 @@ export default class Table extends Widget {
   _isAggregatedTooltip($cell) {
     let $row = $cell.parent();
     return $row.data('aggregateRow') /* row in the table */
-      || $row.hasClass('table-aggregate') /* aggregate table control */;
+      || $row.hasClass('table-aggregate'); /* aggregate table control */
   }
 
   reload(reloadReason) {
@@ -1527,12 +1528,12 @@ export default class Table extends Widget {
 
   _updateRowHeight() {
     let $emptyRow = this.$data.appendDiv('table-row');
-    let $emptyAggrRow = this.$data.appendDiv('table-aggregate-row');
+    let $emptyAggrRow = this._build$AggregateRow().appendTo(this.$data);
 
     $emptyRow.appendDiv('table-cell').html(' ');
-    $emptyAggrRow.appendDiv('table-cell').html(' ');
-    this.rowHeight = $emptyRow.outerHeight(true);
-    this.aggregateRowHeight = $emptyAggrRow.outerHeight(true);
+    $emptyAggrRow.appendDiv('table-cell table-aggregate-cell').appendSpan('text').html(' ');
+    this.rowHeight = this._measureRowHeight($emptyRow);
+    this.aggregateRowHeight = this._measureRowHeight($emptyAggrRow);
     $emptyRow.remove();
     $emptyAggrRow.remove();
   }
@@ -1545,14 +1546,14 @@ export default class Table extends Widget {
       if (!row.$row) {
         row.height = null;
       } else {
-        row.height = row.$row.outerHeight(true);
+        row.height = this._measureRowHeight(row.$row);
       }
     });
     this._aggregateRows.forEach(aggregateRow => {
       if (!aggregateRow.$row) {
         aggregateRow.height = null;
       } else {
-        aggregateRow.height = aggregateRow.$row.outerHeight(true);
+        aggregateRow.height = this._measureRowHeight(aggregateRow.$row);
       }
     });
   }
@@ -1866,7 +1867,7 @@ export default class Table extends Widget {
     }
 
     this._destroyTooltipsForRow(row);
-    this._removeCellEditorForRow(row);
+    this._destroyCellEditorForRow(row);
 
     // Do not remove rows which are removed using an animation
     if (!$row.hasClass('hiding')) {
@@ -1936,7 +1937,7 @@ export default class Table extends Widget {
    * is expected to be linked with the corresponding '$row' (row.$row and $row.data('row')).
    */
   _installRow(row) {
-    row.height = row.$row.outerHeight(true);
+    row.height = this._measureRowHeight(row.$row);
 
     if (row.hasError) {
       this._showCellErrorForRow(row);
@@ -2068,8 +2069,24 @@ export default class Table extends Widget {
   }
 
   /**
-   * This functions starts the cell editor for the given row and column. Prepare must wait until
-   * a pending completeCellEdit operation is resolved.
+   * Starts cell editing for the cell at the given column and row, but only if editing is allowed.
+   * @see prepareCellEdit
+   */
+  focusCell(column, row) {
+    let cell = this.cell(column, row);
+    if (this.enabledComputed && row.enabled && cell.editable) {
+      this.prepareCellEdit(column, row);
+    }
+  }
+
+  /**
+   * Creates a cell editor for the cell at the given column and row, ensures the row is selected and passes the editor
+   * to {@link #startCellEdit} which starts the editing by rendering the editor in a {@link CellEditorPopup}.<br>
+   * If the completion of a previous cell edit is still in progress, the preparation is delayed until the completion is finished.
+   *
+   * @param {boolean} [openFieldPopupOnCellEdit] true to instruct the editor to open its control popup when the editor is rendered.
+   *    This only has an effect if the editor has a popup (e.g. SmartField or DateField).
+   * @returns Promise the promise will be resolved when the preparation has been finished.
    */
   prepareCellEdit(column, row, openFieldPopupOnCellEdit) {
     let promise = $.resolvedPromise();
@@ -2080,10 +2097,10 @@ export default class Table extends Widget {
   }
 
   /**
-   * @param openFieldPopupOnCellEdit when this parameter is set to true, the CellEditorPopup sets an
+   * @param {boolean} [openFieldPopupOnCellEdit] when this parameter is set to true, the CellEditorPopup sets an
    *    additional property 'cellEditor' on the editor-field. The field instance may use this property
    *    to decide whether or not it should open a popup immediately after it is rendered. This is used
-   *    for Smart- and DateFields.
+   *    for Smart- and DateFields. Default is false.
    */
   prepareCellEditInternal(column, row, openFieldPopupOnCellEdit) {
     let event = new Event({
@@ -2380,14 +2397,14 @@ export default class Table extends Widget {
         return;
       }
 
-      let $aggregateRow = this._buildAggregateRowDiv(aggregateRow);
+      let $aggregateRow = this._build$AggregateRow(aggregateRow);
       $aggregateRow[insertFunc](refRow.$row).width(this.rowWidth);
 
       this.visibleColumns()
         .map(column => $(column.buildCellForAggregateRow(aggregateRow)).appendTo($aggregateRow))
         .forEach($c => this._resizeAggregateCell($c));
 
-      aggregateRow.height = $aggregateRow.outerHeight(true);
+      aggregateRow.height = this._measureRowHeight($aggregateRow);
       aggregateRow.$row = $aggregateRow;
       if (animate) {
         this._showRow(aggregateRow);
@@ -2395,7 +2412,7 @@ export default class Table extends Widget {
     }, this);
   }
 
-  _buildAggregateRowDiv(aggregateRow) {
+  _build$AggregateRow(aggregateRow) {
     let onTop = this.groupingStyle === Table.GroupingStyle.TOP;
     let $aggregateRow = this.$container
       .makeDiv('table-aggregate-row')
@@ -2966,7 +2983,7 @@ export default class Table extends Widget {
       oldRow.$row.replaceWith($updatedRow);
       Table.linkRowToDiv(row, $updatedRow);
       this._destroyTooltipsForRow(row);
-      this._removeCellEditorForRow(row);
+      this._destroyCellEditorForRow(row);
       this._installRow(row);
       if (oldRow.$row.hasClass('showing') && oldRow.$row.outerHeight() < row.$row.outerHeight() / 3) {
         // If the row was being shown by an animation, start the animation again for the new row, otherwise row would immediately appear without animation.
@@ -3036,17 +3053,25 @@ export default class Table extends Widget {
     }
   }
 
-  _removeCellEditorForRow(row) {
+  _destroyCellEditorForRow(row) {
     if (this.cellEditorPopup && this.cellEditorPopup.rendered && this.cellEditorPopup.row.id === row.id) {
-      this.cellEditorPopup.remove();
+      this.cellEditorPopup.destroy();
     }
   }
 
   startCellEdit(column, row, field) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
+    if (field.destroyed) {
+      // May happen if the action was postponed and the field destroyed in the meantime using endCellEdit.
+      return;
+    }
+    if (!this._isDataRendered()) {
       this._postRenderActions.push(this.startCellEdit.bind(this, column, row, field));
       return;
     }
+    if (!this.$container.isAttached()) {
+      this._postAttachActions.push(this.startCellEdit.bind(this, column, row, field));
+      return;
+    }
 
     this.trigger('startCellEdit', {
       column: column,
@@ -3066,11 +3091,6 @@ export default class Table extends Widget {
    *    value is updated by an updateRow event instead.
    */
   endCellEdit(field, saveEditorValue) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.endCellEdit.bind(this, field, saveEditorValue));
-      return;
-    }
-
     if (!this.cellEditorPopup) {
       // the cellEditorPopup could already be removed by scrolling (out of view range) or be removed by update rows
       field.destroy();
@@ -4656,7 +4676,9 @@ export default class Table extends Widget {
     this.$container.toggleClass('checkable', scout.isOneOf(this.checkableStyle, Table.CheckableStyle.TABLE_ROW, Table.CheckableStyle.CHECKBOX_TABLE_ROW));
     this.$container.toggleClass('table-row-check', this.checkableStyle === Table.CheckableStyle.TABLE_ROW);
     if (this._isDataRendered()) {
+      this._updateRowWidth();
       this._redraw();
+      this.invalidateLayoutTree();
     }
   }
 
@@ -4831,7 +4853,7 @@ export default class Table extends Widget {
       this.$data.setEnabled(enabled);
     }
 
-    this.$container.setTabbable(enabled);
+    this.$container.setTabbableOrFocusable(enabled);
   }
 
   /**
@@ -4974,8 +4996,11 @@ export default class Table extends Widget {
   }
 
   _heightForRow(row) {
-    let height = 0,
+    let height = 0;
+    let aggregateRow = row.aggregateRowBefore;
+    if (this.groupingStyle === Table.GroupingStyle.BOTTOM) {
       aggregateRow = row.aggregateRowAfter;
+    }
 
     if (row.height) {
       height = row.height;
@@ -4995,6 +5020,10 @@ export default class Table extends Widget {
     return height;
   }
 
+  _measureRowHeight($row) {
+    return graphics.size($row, {includeMargin: true, exact: true}).height;
+  }
+
   /**
    * Returns a range of size this.viewRangeSize. Start of range is rowIndex - viewRangeSize / 4.
    * -> 1/4 of the rows are before the viewport 2/4 in the viewport 1/4 after the viewport,
@@ -5302,18 +5331,6 @@ export default class Table extends Widget {
     }
   }
 
-  focusCell(column, row) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.focusCell.bind(this, column, row));
-      return;
-    }
-
-    let cell = this.cell(column, row);
-    if (this.enabledComputed && row.enabled && cell.editable) {
-      this.prepareCellEdit(column, row, false);
-    }
-  }
-
   _attach() {
     this.$parent.append(this.$container);
     super._attach();
@@ -5337,6 +5354,9 @@ export default class Table extends Widget {
     super._renderOnAttach();
     this._rerenderViewportAfterAttach();
     this._renderViewportAfterAttach();
+    let actions = this._postAttachActions;
+    this._postAttachActions = [];
+    actions.forEach(action => action());
   }
 
   _rerenderViewportAfterAttach() {
@@ -5365,11 +5385,6 @@ export default class Table extends Widget {
     super._detach();
   }
 
-  _onDetach() {
-    super._onDetach();
-    this._destroyCellEditorPopup();
-  }
-
   /**
    * @param {function} [callback] function to be called right after the popup is destroyed
    */
@@ -5396,7 +5411,6 @@ export default class Table extends Widget {
     if (promise.state() === 'resolved') {
       // Do it immediately if promise has already been resolved.
       // This makes sure updateRow does not immediately reopen the editor after closing.
-      // At least for Scout JS, for Scout Classic it prevents flickering (endCellEdit comes after updateRows, but updateRows does not know whether the editor is closing so it will reopen it)
       destroyEditor();
     } else {
       promise.then(destroyEditor);
@@ -5435,7 +5449,7 @@ export default class Table extends Widget {
   // same as on Tree.prototype._onDesktopPopupOpen
   _onDesktopPopupOpen(event) {
     let popup = event.popup;
-    if (!this.enabledComputed) {
+    if (!this.isFocusable(false)) {
       return;
     }
     // Set table style to focused if a context menu or a menu bar popup opens, so that it looks as it still has the focus