@eclipse-scout/core 22.0.1 → 22.0.2

package/dist/eclipse-scout-core.js

@@ -3429,7 +3429,7 @@ __webpack_require__.r(__webpack_exports__);
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
- * Copyright (c) 2010-2020 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
@@ -4212,7 +4212,8 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
       this.$topGrid.find('.calendar-day-name').data('new-width', 0);
       this.$grids.find('.calendar-day').data('new-width', 0);
       let newWidthWorkWeek = Math.round(contentW / this.workDayIndices.length);
-      jquery__WEBPACK_IMPORTED_MODULE_1___default()('.calendar-day-name:nth-child(-n+6), ' + '.calendar-day:nth-child(-n+6)', this.$topGrid).data('new-width', newWidthWorkWeek);
+      this.$topGrid.find('.calendar-day-name').slice(0, 5).data('new-width', newWidthWorkWeek);
+      this.$topGrid.find('.calendar-day').slice(0, 5).data('new-width', newWidthWorkWeek);
       jquery__WEBPACK_IMPORTED_MODULE_1___default()('.calendar-day:nth-child(-n+6)', this.$grid).data('new-width', newWidthWorkWeek);
       this.widthPerDivision = newWidthWorkWeek;
     } else if (this._isMonth() || this._isWeek()) {
@@ -4229,23 +4230,33 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
             $day = $comp.closest('.calendar-day');
         $comp.toggleClass('compact', $day.data('new-width') < _index__WEBPACK_IMPORTED_MODULE_0__.CalendarComponent.MONTH_COMPACT_THRESHOLD);
       });
-    }
+    } // animate old to new sizes
 
-    let afterLayoutCallback = this._afterLayout.bind(this); // animate old to new sizes
 
-
-    jquery__WEBPACK_IMPORTED_MODULE_1___default()('div', this.$container).each(function () {
-      let $e = jquery__WEBPACK_IMPORTED_MODULE_1___default()(this),
-          w = $e.data('new-width'),
-          h = $e.data('new-height');
+    jquery__WEBPACK_IMPORTED_MODULE_1___default()('div', this.$container).each((i, elem) => {
+      let $e = jquery__WEBPACK_IMPORTED_MODULE_1___default()(elem);
+      let w = $e.data('new-width');
+      let h = $e.data('new-height');
       $e.stop(false, true);
 
       if (w !== undefined && w !== $e.outerWidth()) {
         if (animate) {
-          $e.animateAVCSD('width', w, afterLayoutCallback.bind(this, $e, animate));
+          let opts = {
+            complete: () => this._afterLayout($e, animate)
+          };
+
+          if ($e[0] === this.$grids[0]) {
+            // Grid contains scroll shadows that should be updated during animation (don't due it always for performance reasons)
+            opts.progress = () => this._afterLayout($e, animate);
+          }
+
+          $e.animate({
+            width: w
+          }, opts);
         } else {
           $e.css('width', w);
-          afterLayoutCallback($e, animate);
+
+          this._afterLayout($e, animate);
         }
       }
 
@@ -4260,7 +4271,7 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
               $e.addClass('hidden');
             }
 
-            afterLayoutCallback($e, animate);
+            this._afterLayout($e, animate);
           });
         } else {
           $e.css('height', h);
@@ -4269,7 +4280,7 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
             $e.addClass('hidden');
           }
 
-          afterLayoutCallback($e, animate);
+          this._afterLayout($e, animate);
         }
       }
     });
@@ -4309,13 +4320,18 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
 
   _updateScrollbars($parent, animate) {
     let $scrollables = jquery__WEBPACK_IMPORTED_MODULE_1___default()('.calendar-scrollable-components', $parent);
-    $scrollables.each(function () {
-      let $scrollable = jquery__WEBPACK_IMPORTED_MODULE_1___default()(this);
-      _index__WEBPACK_IMPORTED_MODULE_0__.scrollbars.update($scrollable, true);
+    $scrollables.each((i, elem) => {
+      _index__WEBPACK_IMPORTED_MODULE_0__.scrollbars.update(jquery__WEBPACK_IMPORTED_MODULE_1___default()(elem), true);
     });
     this.updateScrollPosition(animate);
   }
 
+  _uninstallComponentScrollbars($parent) {
+    $parent.find('.calendar-scrollable-components').each((i, elem) => {
+      _index__WEBPACK_IMPORTED_MODULE_0__.scrollbars.uninstall(jquery__WEBPACK_IMPORTED_MODULE_1___default()(elem), this.session);
+    });
+  }
+
   _updateTopGrid() {
     jquery__WEBPACK_IMPORTED_MODULE_1___default()('.calendar-component', this.$topGrid).each((index, part) => {
       let component = jquery__WEBPACK_IMPORTED_MODULE_1___default()(part).data('component');
@@ -4494,17 +4510,9 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
   }
 
   _remove() {
-    let $days = jquery__WEBPACK_IMPORTED_MODULE_1___default()('.calendar-day', this.$grid); // Ensure that scrollbars are unregistered
+    this._uninstallComponentScrollbars(this.$grid);
 
-    for (let k = 0; k < $days.length; k++) {
-      let $day = $days.eq(k);
-      let $scrollableContainer = $day.children('.calendar-scrollable-components');
-
-      if ($scrollableContainer.length > 0) {
-        _index__WEBPACK_IMPORTED_MODULE_0__.scrollbars.uninstall($scrollableContainer, this.session);
-        $scrollableContainer.remove();
-      }
-    }
+    this._uninstallComponentScrollbars(this.$topGrid);
 
     this.$window.off('mousemove touchmove', this._mouseMoveHandler).off('mouseup touchend touchcancel', this._mouseUpHandler);
     this._moveData = null;
@@ -4639,6 +4647,8 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
     if (this._isMonth()) {
       this._uninstallScrollbars();
 
+      this._uninstallComponentScrollbars(this.$topGrid);
+
       this.$grid.removeClass('calendar-scrollable-components');
     } else {
       this.$grid.addClass('calendar-scrollable-components'); // If we're in the non-month views, the time can scroll. Add scrollbars
@@ -4649,16 +4659,21 @@ class Calendar extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
         axis: 'y'
       });
 
-      let $topDays = jquery__WEBPACK_IMPORTED_MODULE_1___default()('.calendar-scrollable-components', this.$topGrid);
+      this.$topGrid.find('.calendar-scrollable-components').each((i, elem) => {
+        let $topDay = jquery__WEBPACK_IMPORTED_MODULE_1___default()(elem);
+
+        if ($topDay.data('scrollable')) {
+          _index__WEBPACK_IMPORTED_MODULE_0__.scrollbars.update($topDay);
+          return;
+        }
 
-      for (k = 0; k < $topDays.length; k++) {
-        let $topDay = $topDays.eq(k);
         _index__WEBPACK_IMPORTED_MODULE_0__.scrollbars.install($topDay, {
           parent: this,
           session: this.session,
-          axis: 'y'
+          axis: 'y',
+          scrollShadow: 'none'
         });
-      }
+      });
     }
   }
 
@@ -5677,6 +5692,7 @@ class CalendarLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout
     this.calendar = calendar;
     this.stacked = false;
     this.compacted = false;
+    this.compactWidth = 550;
   }
 
   layout($container) {
@@ -5694,7 +5710,8 @@ class CalendarLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout
       this.stack();
     }
 
-    if ($header[0].scrollWidth > $container.width()) {
+    if ($container.width() < this.compactWidth || $header[0].scrollWidth > $container.width()) {
+      // Title may take a lot of space, make it always compact for small devices so it won't toggle when changing display mode or view range
       this.compact();
     }
 
@@ -14376,18 +14393,19 @@ class DesktopNotification extends _index__WEBPACK_IMPORTED_MODULE_0__.Notificati
     }
 
     if (this.nativeNotificationVisibility === DesktopNotification.NativeNotificationVisibility.NONE) {
+      this._hideLaterIfNativeOnly();
+
       return;
     }
 
     if (this.nativeNotificationVisibility === DesktopNotification.NativeNotificationVisibility.BACKGROUND && !this._isDocumentHidden()) {
+      this._hideLaterIfNativeOnly();
+
       return;
     }
 
     if (window.Notification && Notification.permission === 'denied') {
-      if (this.nativeOnly) {
-        // If native notifications are not allowed, there is no need to keep the (invisible) desktop notification open
-        this.hide();
-      }
+      this._hideLaterIfNativeOnly();
 
       return;
     }
@@ -14399,6 +14417,15 @@ class DesktopNotification extends _index__WEBPACK_IMPORTED_MODULE_0__.Notificati
       Notification.requestPermission(this._showNativeNotification.bind(this));
     }
   }
+
+  _hideLaterIfNativeOnly() {
+    if (!this.nativeOnly) {
+      return;
+    } // If native notifications are not shown, there is no need to keep the (invisible) desktop notification open (prevent dom-leak)
+
+
+    setTimeout(() => this.hide()); // async because this method is called in render and removing the notification within render throws exception
+  }
   /**
    * Checks if browser supports the promise-based version of the method requestPermission. Safari only supports the older callback version.
    */
@@ -28887,7 +28914,7 @@ __webpack_require__.r(__webpack_exports__);
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
- * Copyright (c) 2014-2017 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
@@ -28905,6 +28932,7 @@ class LookupBox extends _index__WEBPACK_IMPORTED_MODULE_0__.ValueField {
     this.gridDataHints.weightY = 1.0;
     this.gridDataHints.h = 2;
     this.value = [];
+    this.clearable = _index__WEBPACK_IMPORTED_MODULE_0__.ValueField.Clearable.NEVER;
     this.lookupCall = null;
     this._pendingLookup = null;
     this._currentLookupCall = null;
@@ -36404,13 +36432,13 @@ class GroupBox extends _index__WEBPACK_IMPORTED_MODULE_0__.CompositeField {
       render: () => true,
       offset: 0,
       hAlign: _index__WEBPACK_IMPORTED_MODULE_0__.HAlign.RIGHT,
-      $drawingArea: function ($drawingArea, event) {
-        if (this.labelVisible) {
+      $drawingArea: ($drawingArea, event) => {
+        if (this.$header && this.$header.isVisible()) {
           return this.$header;
         }
 
         return this.$body;
-      }.bind(this)
+      }
     };
     keyStrokes.forEach(keyStroke => {
       keyStroke.actionKeyStroke.renderingHints = jquery__WEBPACK_IMPORTED_MODULE_1___default().extend({}, keyStroke.actionKeyStroke.renderingHints, groupBoxRenderingHints);
@@ -36627,13 +36655,11 @@ class GroupBox extends _index__WEBPACK_IMPORTED_MODULE_0__.CompositeField {
     this.$container.toggleClass('has-scroll-shadow-bottom', hasScrollShadowBottom);
 
     if ((headerVisible || hasMenubarTop) && oldHasScrollShadowTop !== hasScrollShadowTop || hasMenubarBottom && oldHasScrollShadowBottom !== hasScrollShadowBottom) {
-      this.invalidateLayout();
+      this.invalidateLayoutTree(false);
     } // Enlarge header line if there is a shadow, but don't do it if there is a menubar on top
 
 
-    _index__WEBPACK_IMPORTED_MODULE_0__.fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && headerVisible && !hasMenubarTop); // Prevent flickering of status icon
-
-    this.validateLayout();
+    _index__WEBPACK_IMPORTED_MODULE_0__.fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && headerVisible && !hasMenubarTop);
   }
 
   setMainBox(mainBox) {
@@ -37075,10 +37101,18 @@ class GroupBox extends _index__WEBPACK_IMPORTED_MODULE_0__.CompositeField {
   }
 
   _onControlClick(event) {
-    if (this.expandable) {
-      this.setExpanded(!this.expanded);
+    if (!this.expandable) {
+      return;
+    }
+
+    const target = _index__WEBPACK_IMPORTED_MODULE_0__.scout.widget(event.target);
+
+    if (this.menuBarPosition === GroupBox.MenuBarPosition.TITLE && this.menuBar.has(target)) {
+      // If the position of the menubar is set to title and a menu has been clicked, then the event must not be handled
+      return;
     }
 
+    this.setExpanded(!this.expanded);
     jquery__WEBPACK_IMPORTED_MODULE_1___default().suppressEvent(event); // otherwise, the event would be triggered twice sometimes (by group-box-control and group-box-title)
   }
 
@@ -38503,7 +38537,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../index */ "./src/index.js");
 /*
- * Copyright (c) 2014-2017 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
@@ -38518,7 +38552,6 @@ class ListBox extends _index__WEBPACK_IMPORTED_MODULE_0__.LookupBox {
     super();
     this.table = null;
     this.lookupStatus = null;
-    this.clearable = _index__WEBPACK_IMPORTED_MODULE_0__.ValueField.Clearable.NEVER;
 
     this._addWidgetProperties(['table', 'filterBox']);
   }
@@ -38533,6 +38566,13 @@ class ListBox extends _index__WEBPACK_IMPORTED_MODULE_0__.LookupBox {
   _initStructure(value) {
     if (!this.table) {
       this.table = this._createDefaultListBoxTable();
+    } // align checkableColumn in table with checkboxes of tree fields
+
+
+    if (this.table.checkableColumn) {
+      // may be null if a non-default list-box-table with checkable=false is used
+      this.table.checkableColumn.minWidth = 28;
+      this.table.checkableColumn.width = this.table.checkableColumn.minWidth; // do not use setWidth here
     }
   }
 
@@ -48225,7 +48265,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! jquery */ "jquery");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_1__);
 /*
- * Copyright (c) 2014-2018 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
@@ -48253,30 +48293,37 @@ class TabAreaLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
   }
 
   layout($container) {
-    let ellipsis = this.tabArea.ellipsis,
-        htmlContainer = _index__WEBPACK_IMPORTED_MODULE_0__.HtmlComponent.get($container),
+    let htmlContainer = _index__WEBPACK_IMPORTED_MODULE_0__.HtmlComponent.get($container),
         containerSize = htmlContainer.availableSize().subtract(htmlContainer.insets()); // compute visible and overflown tabs
 
     this.preferredLayoutSize($container, {
       widthHint: containerSize.width
     });
 
-    if (this.overflowTabs.length > 0) {
-      ellipsis.setHidden(false);
-    }
+    this._layoutSelectionMarker();
+  }
 
-    this.visibleTabs.forEach(tabItem => {
-      tabItem.setOverflown(false);
-    });
-    this.overflowTabs.forEach(tabItem => {
-      tabItem.setOverflown(true);
-    });
+  _layoutSelectionMarker() {
+    let $selectionMarker = this.tabArea.$selectionMarker,
+        selectedTab = this.tabArea.selectedTab,
+        selectedItemBounds;
 
-    if (this.overflowTabs.length === 0) {
-      ellipsis.setHidden(true);
+    if (selectedTab) {
+      $selectionMarker.setVisible(true);
+      selectedItemBounds = _index__WEBPACK_IMPORTED_MODULE_0__.graphics.bounds(selectedTab.$container);
+      $selectionMarker.cssLeft(selectedItemBounds.x);
+      $selectionMarker.cssWidth(selectedItemBounds.width);
+    } else {
+      $selectionMarker.setVisible(false);
     }
+  }
 
+  _updateEllipsis() {
+    let ellipsis = this.tabArea.ellipsis;
+    ellipsis.setHidden(this.overflowTabs.length < 1);
     ellipsis.setText(this.overflowTabs.length + '');
+    this.visibleTabs.forEach(tabItem => tabItem.setOverflown(false));
+    this.overflowTabs.forEach(tabItem => tabItem.setOverflown(true));
     ellipsis.setChildActions(this.overflowTabs.map(tab => {
       let menu = _index__WEBPACK_IMPORTED_MODULE_0__.scout.create('Menu', {
         parent: ellipsis,
@@ -48293,38 +48340,21 @@ class TabAreaLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
       });
       return menu;
     }, this));
-
-    this._layoutSelectionMarker();
-  }
-
-  _layoutSelectionMarker() {
-    let $selectionMarker = this.tabArea.$selectionMarker,
-        selectedTab = this.tabArea.selectedTab,
-        selectedItemBounds;
-
-    if (selectedTab) {
-      $selectionMarker.setVisible(true);
-      selectedItemBounds = _index__WEBPACK_IMPORTED_MODULE_0__.graphics.bounds(selectedTab.$container);
-      $selectionMarker.cssLeft(selectedItemBounds.x);
-      $selectionMarker.cssWidth(selectedItemBounds.width);
-    } else {
-      $selectionMarker.setVisible(false);
-    }
   }
 
   preferredLayoutSize($container, options) {
     let htmlComp = _index__WEBPACK_IMPORTED_MODULE_0__.HtmlComponent.get($container),
         prefSize = new _index__WEBPACK_IMPORTED_MODULE_0__.Dimension(0, 0),
-        prefWidth = Number.MAX_VALUE,
-        visibleTabItems = this.tabArea.visibleTabs(),
-        overflowableIndexes = visibleTabItems.map((tabItem, index) => {
+        prefWidth = Number.MAX_VALUE;
+    this.visibleTabs = this.tabArea.visibleTabs();
+    let overflowableIndexes = this.visibleTabs.map((tabItem, index) => {
       if (tabItem.selected) {
         return -1;
       }
 
       return index;
     }).filter(index => index >= 0);
-    this.overflowTabs = []; // consider avoid falsy 0 in tabboxes a 0 withHint will be used to calculate the minimum width
+    this.overflowTabs = []; // consider avoid falsy 0 in tab-boxes a 0 withHint will be used to calculate the minimum width
 
     if (options.widthHint === 0 || options.widthHint) {
       prefWidth = options.widthHint - htmlComp.insets().horizontal();
@@ -48332,26 +48362,28 @@ class TabAreaLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
 
 
     if (prefWidth <= 0) {
-      return this._minSize(visibleTabItems).add(htmlComp.insets());
+      return this._minSize(this.visibleTabs).add(htmlComp.insets());
     }
 
-    let overflowIndex = -1;
+    this._setFirstLastMarker(this.visibleTabs);
 
-    this._setFirstLastMarker(visibleTabItems);
+    this._updateEllipsis();
 
-    prefSize = this._prefSize(visibleTabItems);
+    prefSize = this._prefSize(this.visibleTabs);
 
     while (prefSize.width > prefWidth && overflowableIndexes.length > 0) {
-      overflowIndex = overflowableIndexes.splice(-1)[0];
-      this.overflowTabs.splice(0, 0, visibleTabItems[overflowIndex]);
-      visibleTabItems.splice(overflowIndex, 1);
+      let overflowIndex = overflowableIndexes.splice(-1)[0];
+      this.overflowTabs.splice(0, 0, this.visibleTabs[overflowIndex]);
+      this.visibleTabs.splice(overflowIndex, 1);
 
-      this._setFirstLastMarker(visibleTabItems);
+      this._setFirstLastMarker(this.visibleTabs);
+
+      this._updateEllipsis(); // update ellipsis here already so that the prefSize on the next line is correct
 
-      prefSize = this._prefSize(visibleTabItems);
-    }
 
-    this.visibleTabs = visibleTabItems; // Use the total available space if spreading tabs evenly.
+      prefSize = this._prefSize(this.visibleTabs);
+    } // Use the total available space if spreading tabs evenly.
+
 
     if (this.tabArea.displayStyle === _index__WEBPACK_IMPORTED_MODULE_0__.TabArea.DisplayStyle.SPREAD_EVEN) {
       return _index__WEBPACK_IMPORTED_MODULE_0__.graphics.prefSize($container, options);
@@ -48361,8 +48393,7 @@ class TabAreaLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
   }
 
   _minSize(tabItems) {
-    let visibleTabItems = [],
-        prefSize;
+    let visibleTabItems = [];
     this.overflowTabs = tabItems.filter(tabItem => {
       if (tabItem.selected) {
         visibleTabItems.push(tabItem);
@@ -48375,21 +48406,20 @@ class TabAreaLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
 
     this._setFirstLastMarker(visibleTabItems);
 
-    prefSize = this._prefSize(visibleTabItems);
-    return prefSize;
+    return this._prefSize(visibleTabItems);
   }
 
   _prefSize(tabItems, considerEllipsis) {
-    let prefSize = tabItems.map(tabItem => this._tabItemSize(tabItem.htmlComp)).reduce((prefSize, itemSize) => {
+    let prefSize = tabItems.map(tabItem => this._tabItemSize(tabItem)).reduce((prefSize, itemSize) => {
       prefSize.height = Math.max(prefSize.height, itemSize.height);
       prefSize.width += itemSize.width;
       return prefSize;
-    }, new _index__WEBPACK_IMPORTED_MODULE_0__.Dimension(0, 0)),
-        ellipsisSize = new _index__WEBPACK_IMPORTED_MODULE_0__.Dimension(0, 0);
+    }, new _index__WEBPACK_IMPORTED_MODULE_0__.Dimension(0, 0));
     considerEllipsis = _index__WEBPACK_IMPORTED_MODULE_0__.scout.nvl(considerEllipsis, this.overflowTabs.length > 0);
 
     if (considerEllipsis) {
-      ellipsisSize = this._tabItemSize(this.tabArea.ellipsis.htmlComp);
+      let ellipsisSize = this._tabItemSize(this.tabArea.ellipsis);
+
       prefSize.height = Math.max(prefSize.height, ellipsisSize.height);
       prefSize.width += ellipsisSize.width;
     }
@@ -48416,8 +48446,9 @@ class TabAreaLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
     }
   }
 
-  _tabItemSize(htmlComp) {
-    let prefSize,
+  _tabItemSize(item) {
+    let htmlComp = item.htmlComp,
+        prefSize,
         classList = htmlComp.$comp.attr('class'); // temporarily revert display style to default. otherwise the pref size of the tab item will be the size of the container.
 
     if (this.tabArea.displayStyle === _index__WEBPACK_IMPORTED_MODULE_0__.TabArea.DisplayStyle.SPREAD_EVEN) {
@@ -48429,6 +48460,27 @@ class TabAreaLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
     prefSize = htmlComp.prefSize({
       exact: true
     }).add(_index__WEBPACK_IMPORTED_MODULE_0__.graphics.margins(htmlComp.$comp));
+
+    if (item.fieldStatus && item.fieldStatus.htmlComp) {
+      let statusOverflownAndHidden = item.overflown && !item.fieldStatus.visible;
+
+      if (statusOverflownAndHidden) {
+        // overflown tabs have no fieldStatus: explicitly set to visible so that the real consumed space can be computed
+        item.fieldStatus.setVisible(true);
+      }
+
+      let statusWidth = item.fieldStatus.htmlComp.prefSize({
+        includeMargin: true
+      }).width;
+
+      if (statusOverflownAndHidden) {
+        // restore
+        item.fieldStatus.setVisible(false);
+      }
+
+      prefSize.width += statusWidth;
+    }
+
     htmlComp.$comp.attrOrRemove('class', classList);
 
     if (this.tabArea.displayStyle === _index__WEBPACK_IMPORTED_MODULE_0__.TabArea.DisplayStyle.SPREAD_EVEN) {
@@ -48576,7 +48628,6 @@ class TabBox extends _index__WEBPACK_IMPORTED_MODULE_0__.CompositeField {
     this._addPreserveOnPropertyChangeProperties(['selectedTab']);
 
     this._tabBoxHeaderPropertyChangeHander = this._onTabBoxHeaderPropertyChange.bind(this);
-    this._selectedTabScrollTopChangeHandler = this._updateScrollShadow.bind(this);
   }
   /**
    * @override FormField.js
@@ -48730,17 +48781,19 @@ class TabBox extends _index__WEBPACK_IMPORTED_MODULE_0__.CompositeField {
   _renderSelectedTab() {
     if (this.selectedTab) {
       this.selectedTab.render(this._$tabContent);
-      this.selectedTab.on('propertyChange:scrollTop', this._selectedTabScrollTopChangeHandler);
+      this.selectedTab.get$Scrollable().data('scroll-shadow-customizer', this._updateScrollShadow.bind(this));
     }
 
     if (this.rendered) {
+      this._updateScrollShadow();
+
       _index__WEBPACK_IMPORTED_MODULE_0__.HtmlComponent.get(this._$tabContent).invalidateLayoutTree();
     }
   }
 
   _removeSelectedTab() {
     if (this.selectedTab) {
-      this.selectedTab.off('propertyChange:scrollTop', this._selectedTabScrollTopChangeHandler);
+      this.selectedTab.get$Scrollable().removeData('scroll-shadow-customizer');
       this.selectedTab.remove();
     }
   }
@@ -48755,13 +48808,11 @@ class TabBox extends _index__WEBPACK_IMPORTED_MODULE_0__.CompositeField {
     this.$container.toggleClass('has-scroll-shadow-top', hasScrollShadowTop);
 
     if (oldHasScrollShadowTop !== hasScrollShadowTop) {
-      this.invalidateLayout();
+      this.invalidateLayoutTree(false);
     } // Enlarge header line if there is a shadow, but only if there is a header (controlled by labelVisible)
 
 
-    _index__WEBPACK_IMPORTED_MODULE_0__.fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && this.labelVisible); // Prevent flickering of status icon
-
-    this.validateLayout();
+    _index__WEBPACK_IMPORTED_MODULE_0__.fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && this.labelVisible);
   }
 
   setTabAreaStyle(tabAreaStyle) {
@@ -49047,7 +49098,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../index */ "./src/index.js");
 /*
- * Copyright (c) 2014-2017 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
@@ -49082,21 +49133,20 @@ class TabBoxHeaderLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLay
   }
 
   layout($container) {
-    //
     let htmlContainer = _index__WEBPACK_IMPORTED_MODULE_0__.HtmlComponent.get($container),
         tabArea = this.tabBoxHeader.tabArea,
         tabAreaMargins = tabArea.htmlComp.margins(),
         tabAreaPrefSize,
         menuBar = this.tabBoxHeader.menuBar,
         menuBarMargins = menuBar.htmlComp.margins(),
-        menuBarMinumumSize,
+        menuBarMinimumSize,
         $status = this.tabBoxHeader.tabBox.$status,
         statusSizeLarge = new _index__WEBPACK_IMPORTED_MODULE_0__.Dimension(),
         insets = htmlContainer.insets(),
         containerSize = htmlContainer.availableSize({
       exact: true
     }).subtract(htmlContainer.insets());
-    menuBarMinumumSize = menuBar.htmlComp.prefSize({
+    menuBarMinimumSize = menuBar.htmlComp.prefSize({
       widthHint: 0
     });
 
@@ -49106,7 +49156,7 @@ class TabBoxHeaderLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLay
     }
 
     tabAreaPrefSize = tabArea.htmlComp.prefSize({
-      widthHint: containerSize.width - menuBarMinumumSize.width - menuBarMargins.horizontal() - statusSizeLarge.width,
+      widthHint: containerSize.width - menuBarMinimumSize.width - menuBarMargins.horizontal() - statusSizeLarge.width,
       exact: false
     }); // layout tabArea
 
@@ -52370,7 +52420,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! jquery */ "jquery");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_1__);
 /*
- * 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
@@ -52391,7 +52441,7 @@ class GlassPane extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
     this.$parent.addClass('glasspane-parent');
     let cssPosition = this.$parent.css('position');
 
-    if (!_index__WEBPACK_IMPORTED_MODULE_0__.scout.isOneOf(cssPosition, 'relative', 'absolute')) {
+    if (cssPosition === 'static') {
       this.$parent.css('position', 'relative');
     } // Register 'glassPaneTarget' in focus manager.
 
@@ -56205,7 +56255,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../index */ "./src/index.js");
 /*
- * 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
@@ -57358,17 +57408,19 @@ const __origCleanData = (jquery__WEBPACK_IMPORTED_MODULE_0___default().cleanData
     return this;
   }
 
-  return this.on('animationend webkitAnimationEnd', event => {
+  let oneHandler = event => {
     if (event.target !== this[0]) {
       // Ignore events that bubble up from child elements
       return;
     } // Unregister listener to implement "one" semantics
 
 
-    this.off(event); // Notify actual event handler
+    this.off('animationend webkitAnimationEnd', oneHandler); // Notify actual event handler
 
     handler(event);
-  });
+  };
+
+  return this.on('animationend webkitAnimationEnd', oneHandler);
 };
 
 (jquery__WEBPACK_IMPORTED_MODULE_0___default().fn.hasAnimationClass) = function () {
@@ -73811,7 +73863,9 @@ class ModeSelector extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
 
     if (this.selectedMode && this.selectedMode.$container) {
       selectedModePosX = _index__WEBPACK_IMPORTED_MODULE_0__.graphics.position(this.selectedMode.$container).x;
-      selectedModeWidth = _index__WEBPACK_IMPORTED_MODULE_0__.graphics.size(this.selectedMode.$container).width;
+      selectedModeWidth = _index__WEBPACK_IMPORTED_MODULE_0__.graphics.size(this.selectedMode.$container, {
+        exact: true
+      }).width;
     }
 
     this.$slider.cssLeft(selectedModePosX);
@@ -76748,7 +76802,7 @@ __webpack_require__.r(__webpack_exports__);
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
- * 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
@@ -76880,20 +76934,18 @@ class Popup extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
 
   _openWithoutParent() {
     // resolve parent for entry-point (don't change the actual property)
-    let parent = this.parent;
-
-    if (parent.destroyed) {
+    if (this.parent.destroyed) {
       return;
     }
 
-    if (parent.rendered || parent.rendering) {
-      this.open(parent.entryPoint());
+    if (this.parent.rendered || this.parent.rendering) {
+      this.open(this._getDefaultOpen$Parent());
       return;
     } // This is important for popups rendered in another (native) browser window. The DOM in the popup window
     // is rendered later, so we must wait until that window is rendered and layouted. See popup-window.html.
 
 
-    parent.one('render', () => {
+    this.parent.one('render', () => {
       this.session.layoutValidator.schedulePostValidateFunction(() => {
         if (this.destroyed || this.rendered) {
           return;
@@ -76903,6 +76955,15 @@ class Popup extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
       });
     });
   }
+  /**
+   * Only called if parent.rendered or parent.rendering
+   * @return {$}
+   */
+
+
+  _getDefaultOpen$Parent() {
+    return this.parent.entryPoint();
+  }
 
   open($parent) {
     if (!$parent) {
@@ -77180,6 +77241,16 @@ class Popup extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
     return cssClass;
   }
 
+  _animateRemovalWhileRemovingParent() {
+    if (!this.$anchor) {
+      // Allow remove animations for popups without an anchor
+      return true;
+    } // If parent is the anchor, prevent remove animation to ensure popup will be removed together with the anchor
+
+
+    return _index__WEBPACK_IMPORTED_MODULE_0__.widgets.get(this.$anchor) !== this.parent;
+  }
+
   _isRemovalPrevented() {
     // If removal of a parent is pending due to an animation then don't return true to make sure popups are closed before the parent animation starts.
     // However, if the popup itself is removed by an animation, removal should be prevented to ensure remove() won't run multiple times.
@@ -77829,7 +77900,7 @@ class Popup extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
   }
 
   _handleGlassPanes() {
-    let parentCoveredByGlassPane = this.session.focusManager.isElementCovertByGlassPane(this.parent.$container); // if a popup is covered by a glass pane the glass pane's need to be rerendered to ensure a glass pane is also painted over the popup
+    let parentCoveredByGlassPane = this.session.focusManager.isElementCovertByGlassPane(this.parent.$container); // if a popup is covered by a glass pane the glass pane's need to be re-rendered to ensure a glass pane is also painted over the popup
 
     if (parentCoveredByGlassPane) {
       this.session.focusManager.rerenderGlassPanes();
@@ -77970,7 +78041,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index */ "./src/index.js");
 /*
- * Copyright (c) 2014-2020 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
@@ -78110,9 +78181,6 @@ class PopupLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
 
 
   _calcMaxSize() {
-    // Position the popup at the desired location before doing any calculations to consider the preferred bounds
-    this._position(false);
-
     let maxWidth,
         maxHeight,
         htmlComp = this.popup.htmlComp,
@@ -78131,7 +78199,7 @@ class PopupLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
         windowSize = this._calcMaxSize(),
         Alignment = _index__WEBPACK_IMPORTED_MODULE_0__.Popup.Alignment,
         horizontalAlignment = this.popup.horizontalAlignment,
-        verticalAlignment = this.popup.verticalAlignment; // Decide whether the prefSize can be used or the popup needs to be shrinked so that it fits into the viewport
+        verticalAlignment = this.popup.verticalAlignment; // Decide whether the prefSize can be used or the popup needs to be shrunken so that it fits into the viewport
     // The decision is based on the preferred opening direction
     // Example: The popup would like to be opened leftedge and bottom
     // If there is enough space on the right and on the bottom -> pref size is used
@@ -78198,9 +78266,6 @@ class PopupLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractLayout {
 
 
   _calcMaxSizeAroundAnchor() {
-    // Position the popup at the desired location before doing any calculations because positioning adds CSS classes which might change margins
-    this._position(false);
-
     let maxWidthLeft,
         maxWidthRight,
         maxHeightDown,
@@ -80784,7 +80849,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! jquery */ "jquery");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_1__);
 /*
- * 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
@@ -80954,7 +81019,19 @@ function installScrollShadow($container, session, options) {
 
   _installIntersectionObserver();
 
-  intersectionObserver.observe($container[0]);
+  intersectionObserver.observe($container[0]); // this is required in addition to the intersection observer because the observer events are handled asynchronously later after all the setTimeout calls.
+  // Then the shadow might stay visible too long which has an impact on layout updates.
+
+  let containerElement = $container[0];
+
+  let visibleListener = e => {
+    if (e.target === containerElement) {
+      _onScrollableVisibleChange(containerElement, e.type === 'show');
+    }
+  };
+
+  $container.data('scroll-shadow-visible-listener', visibleListener);
+  $container.on('hide show', visibleListener);
 }
 function uninstallScrollShadow($container, session) {
   let $shadow = $container.data('scroll-shadow');
@@ -80977,6 +81054,12 @@ function uninstallScrollShadow($container, session) {
     intersectionObserver.unobserve($container[0]);
   }
 
+  let visibleListener = $container.data('scroll-shadow-visible-listener');
+
+  if (visibleListener) {
+    $container.off('hide show', visibleListener);
+  }
+
   let $scrollables = _$scrollables[session];
 
   if (!$scrollables || !$scrollables.some($scrollable => $scrollable.data('scroll-shadow'))) {
@@ -81052,7 +81135,7 @@ function updateScrollShadow($container) {
   $shadow.toggleClass('right', !atRight && style.indexOf('right') > -1);
   _index__WEBPACK_IMPORTED_MODULE_0__.graphics.setBounds($shadow, _index__WEBPACK_IMPORTED_MODULE_0__.graphics.bounds($container, {
     exact: true
-  }));
+  }).subtract(insets($shadow)));
   _index__WEBPACK_IMPORTED_MODULE_0__.graphics.setMargins($shadow, _index__WEBPACK_IMPORTED_MODULE_0__.graphics.margins($container));
   $shadow.css('border-radius', $container.css('border-radius'));
   let customizer = $container.data('scroll-shadow-customizer');
@@ -81068,6 +81151,10 @@ function updateScrollShadow($container) {
   function atEnd(scrollPos, scrollSize, offsetSize) {
     return scrollPos + 1 >= scrollSize - offsetSize;
   }
+
+  function insets($shadow) {
+    return new _index__WEBPACK_IMPORTED_MODULE_0__.Insets($shadow.cssPxValue('--scroll-shadow-inset-top'), $shadow.cssPxValue('--scroll-shadow-inset-right'), $shadow.cssPxValue('--scroll-shadow-inset-bottom'), $shadow.cssPxValue('--scroll-shadow-inset-left'));
+  }
 }
 /**
  * Installs a dom mutation observer that tracks all scrollables in order to move the scroll shadow along with the scrollable.
@@ -81559,7 +81646,7 @@ function scrollToBottom($scrollable, options) {
 /**
  * @param location object with x and y properties
  * @param $scrollables one or more scrollables to check against
- * @eturns {boolean} true if the location is visible in the current viewport of all the $scrollables, or if $scrollables is null
+ * @returns {boolean} true if the location is visible in the current viewport of all the $scrollables, or if $scrollables is null
  */
 
 function isLocationInView(location, $scrollables) {
@@ -87700,6 +87787,7 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
     this.contextColumn = null;
     this.checkable = false;
     this.checkableStyle = Table.CheckableStyle.CHECKBOX;
+    this.cellEditorPopup = null;
     this.compact = false;
     this.compactHandler = _index__WEBPACK_IMPORTED_MODULE_0__.scout.create('TableCompactHandler', {
       table: this
@@ -87781,6 +87869,7 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.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']);
@@ -88111,8 +88200,6 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
   }
 
   _removeData() {
-    this._destroyCellEditorPopup();
-
     this._removeAggregateRows();
 
     this._uninstallImageListeners();
@@ -88297,13 +88384,13 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
       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 {
@@ -89869,8 +89956,26 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.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.
    */
 
 
@@ -89884,10 +89989,10 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
     return promise.then(this.prepareCellEditInternal.bind(this, column, row, openFieldPopupOnCellEdit));
   }
   /**
-   * @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.
    */
 
 
@@ -90974,12 +91079,23 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
   }
 
   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,
       row: row,
@@ -90999,12 +91115,6 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
 
 
   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();
@@ -92783,7 +92893,11 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
     this.$container.toggleClass('table-row-check', this.checkableStyle === Table.CheckableStyle.TABLE_ROW);
 
     if (this._isDataRendered()) {
+      this._updateRowWidth();
+
       this._redraw();
+
+      this.invalidateLayoutTree();
     }
   }
   /**
@@ -93520,20 +93634,6 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.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);
 
@@ -93564,6 +93664,10 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
     this._rerenderViewportAfterAttach();
 
     this._renderViewportAfterAttach();
+
+    let actions = this._postAttachActions;
+    this._postAttachActions = [];
+    actions.forEach(action => action());
   }
 
   _rerenderViewportAfterAttach() {
@@ -93594,12 +93698,6 @@ class Table extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
 
     super._detach();
   }
-
-  _onDetach() {
-    super._onDetach();
-
-    this._destroyCellEditorPopup();
-  }
   /**
    * @param {function} [callback] function to be called right after the popup is destroyed
    */
@@ -96396,7 +96494,8 @@ class TableHeader extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
 
     if (column.sortActive || column.grouped || filtered) {
       if (column.minWidth < _index__WEBPACK_IMPORTED_MODULE_0__.Column.DEFAULT_MIN_WIDTH) {
-        column.prefMinWidth = column.minWidth;
+        column.__minWidthWithoutState = column.minWidth;
+        column.__widthWithoutState = column.width;
         column.minWidth = _index__WEBPACK_IMPORTED_MODULE_0__.Column.DEFAULT_MIN_WIDTH;
       }
 
@@ -96404,14 +96503,16 @@ class TableHeader extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
         this.table.resizeColumn(column, column.minWidth);
       }
     } else {
-      // Reset to preferred min width if no state is visible
-      if (column.prefMinWidth !== null) {
-        column.minWidth = column.prefMinWidth;
-        column.prefMinWidth = null; // Resize to old min width, assuming user has not manually changed the size because column is still as width as default_min_width
+      // Reset to previous min width if no state is visible
+      if (!_index__WEBPACK_IMPORTED_MODULE_0__.objects.isNullOrUndefined(column.__minWidthWithoutState)) {
+        column.minWidth = column.__minWidthWithoutState; // Resize to previous min width, assuming user has not manually changed the size because column is still as width as default_min_width
 
         if (column.width === _index__WEBPACK_IMPORTED_MODULE_0__.Column.DEFAULT_MIN_WIDTH) {
-          this.table.resizeColumn(column, column.minWidth);
+          this.table.resizeColumn(column, column.__widthWithoutState);
         }
+
+        column.__minWidthWithoutState = null;
+        column.__widthWithoutState = null;
       }
     }
   }
@@ -96995,7 +97096,10 @@ class TableHeaderMenu extends _index__WEBPACK_IMPORTED_MODULE_0__.Popup {
       this.filterTable.off('rowsChecked', this._filterTableRowsCheckedHandler);
     }
 
-    this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    if (this.tableHeader.rendered) {
+      this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    }
+
     this.$headerItem.select(false);
     this.table.off('columnMoved', this._onColumnMovedHandler);
     this.table.off('filterAdded', this._tableFilterHandler);
@@ -101340,7 +101444,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../index */ "./src/index.js");
 /*
- * Copyright (c) 2010-2020 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
@@ -101361,7 +101465,7 @@ class BooleanColumn extends _index__WEBPACK_IMPORTED_MODULE_0__.Column {
     this.comparator = _index__WEBPACK_IMPORTED_MODULE_0__.comparators.NUMERIC;
     this.filterType = 'ColumnUserFilter';
     this.horizontalAlignment = 0;
-    this.minWidth = _index__WEBPACK_IMPORTED_MODULE_0__.Column.NARROW_MIN_WIDTH;
+    this.minWidth = _index__WEBPACK_IMPORTED_MODULE_0__.Column.SMALL_MIN_WIDTH;
     this.triStateEnabled = false;
     this.textBased = false;
   }
@@ -101544,7 +101648,7 @@ __webpack_require__.r(__webpack_exports__);
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
- * 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
@@ -101588,7 +101692,6 @@ class Column {
     this.width = 60;
     this.initialWidth = undefined; // the width the column initially has
 
-    this.prefMinWidth = null;
     this.minWidth = Column.DEFAULT_MIN_WIDTH; // the minimal width the column can have
 
     this.showSeparator = true;
@@ -101615,7 +101718,6 @@ class Column {
     this.$separator = null;
   }
 
-  // for columns without text (icon, check box)
   init(model) {
     this.session = model.session; // Copy all properties from model to this
 
@@ -102684,6 +102786,8 @@ class Column {
 
 _defineProperty(Column, "DEFAULT_MIN_WIDTH", 60);
 
+_defineProperty(Column, "SMALL_MIN_WIDTH", 38);
+
 _defineProperty(Column, "NARROW_MIN_WIDTH", 32);
 
 /***/ }),
@@ -105582,7 +105686,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! jquery */ "jquery");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_1__);
 /*
- * Copyright (c) 2014-2018 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
@@ -105644,6 +105748,14 @@ class CellEditorPopup extends _index__WEBPACK_IMPORTED_MODULE_0__.Popup {
     this.position();
     this.pack();
   }
+  /**
+   * @override
+   */
+
+
+  _getDefaultOpen$Parent() {
+    return this.table.$data;
+  }
 
   _render() {
     super._render(); // determine CSS class for first and last column, required for additional margins/padding in cell-editor
@@ -111895,7 +112007,7 @@ class TileGrid extends _index__WEBPACK_IMPORTED_MODULE_0__.Widget {
   }
 
   _onAnimatedTileRemove(tile) {
-    if (!tile.rendered || !tile.animateRemoval) {
+    if (!tile.removalPending) {
       return;
     }
 
@@ -113343,7 +113455,7 @@ __webpack_require__.r(__webpack_exports__);
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
- * 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
@@ -113508,7 +113620,7 @@ class TileGridLayout extends _index__WEBPACK_IMPORTED_MODULE_0__.LogicalGridLayo
 
   _layoutCellBounds(containerSize, containerInsets) {
     // Since the tiles are positioned absolutely it is necessary to add the height of the filler to the top insets
-    if (this.widget.virtual) {
+    if (this.widget.virtual && this.widget.$fillBefore) {
       containerInsets.top += this.widget.$fillBefore.outerHeight(true);
     }
 
@@ -114635,7 +114747,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../index */ "./src/index.js");
 /*
- * 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
@@ -115018,7 +115130,24 @@ class TileAccordion extends _index__WEBPACK_IMPORTED_MODULE_0__.Accordion {
 
   _filter() {
     this.groups.forEach(group => {
-      group.body.filter();
+      group.body.filter(); // If the layout has not been invalidated as part of the filtering above, it even though must be validated here.
+      // This is because groups above might have fewer visible Tiles now which makes room for this group.
+      // The revalidateLayout() with scrolling=true here ensures TileGrid._renderViewPort() is called to ensure these Tiles become visible as there is space available now.
+      // It is executed as postValidateFunction because the groups above must have completed their layouting so that
+      // TileGrid._renderViewPort() knows that there is more space available now.
+
+      if (group.body.htmlComp && group.body.htmlComp.valid && !group.body._accordionLayoutHandler
+      /* skip if already registered */
+      ) {
+        group.body._accordionLayoutHandler = () => {
+          group.body.scrolling = true;
+          group.body.revalidateLayout();
+          group.body.scrolling = false;
+          group.body._accordionLayoutHandler = null;
+        };
+
+        this.session.layoutValidator.schedulePostValidateFunction(group.body._accordionLayoutHandler);
+      }
     });
   }
   /**
@@ -126123,6 +126252,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "$remove": () => (/* binding */ $remove),
 /* harmony export */   "randomElement": () => (/* binding */ randomElement),
 /* harmony export */   "toMap": () => (/* binding */ toMap),
+/* harmony export */   "nullIfEmpty": () => (/* binding */ nullIfEmpty),
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index */ "./src/index.js");
@@ -126348,6 +126478,12 @@ function containsAll(haystack, needles) {
     return haystack.indexOf(element) >= 0;
   });
 }
+/**
+ * @template T
+ * @param {T[]} arr
+ * @return {T}
+ */
+
 function first(arr) {
   if (Array.isArray(arr)) {
     return arr[0];
@@ -126355,6 +126491,12 @@ function first(arr) {
 
   return arr;
 }
+/**
+ * @template T
+ * @param {T[]} arr
+ * @return {T}
+ */
+
 function last(arr) {
   if (Array.isArray(arr)) {
     return arr[arr.length - 1];
@@ -126427,9 +126569,9 @@ function union(array1, array2) {
     }
   });
   return result;
-} // noinspection DuplicatedCode
-
+}
 function equalsIgnoreOrder(arr, arr2) {
+  // noinspection DuplicatedCode
   if (arr === arr2) {
     return true;
   }
@@ -126447,9 +126589,9 @@ function equalsIgnoreOrder(arr, arr2) {
   }
 
   return containsAll(arr, arr2);
-} // noinspection DuplicatedCode
-
+}
 function equals(arr, arr2) {
+  // noinspection DuplicatedCode
   if (arr === arr2) {
     return true;
   }
@@ -126777,6 +126919,17 @@ function toMap(array) {
     return map;
   }, {}));
 }
+/**
+ * If the argument is an empty array, null is returned. Otherwise, the argument is returned unchanged.
+ *
+ * @template T
+ * @param {T[]} array
+ * @return {T[]|null}
+ */
+
+function nullIfEmpty(array) {
+  return empty(array) ? null : array;
+}
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   $indexOf,
   $remove,
@@ -126815,6 +126968,7 @@ function toMap(array) {
   max,
   min,
   move,
+  nullIfEmpty,
   pushAll,
   pushIfDefined,
   pushSet,
@@ -131161,12 +131315,16 @@ function resolveConstProperty(object, config) {
 /**
  * @param {object} obj
  * @returns {Boolean|undefined}
- *  - true if the obj is empty
+ *  - true if the obj is empty, null or undefined
  *  - false if the obj is not empty
  *  - nothing if the obj is not an object
  */
 
 function isEmpty(obj) {
+  if (isNullOrUndefined(obj)) {
+    return true;
+  }
+
   if (!isPlainObject(obj)) {
     return;
   }
@@ -134044,7 +134202,9 @@ class Widget {
 
 
   _removeAnimated() {
-    if (!_index__WEBPACK_IMPORTED_MODULE_0__.Device.get().supportsCssAnimation() || !this.$container || this.$container.isDisplayNone()) {
+    let animateRemovalWhileRemovingParent = this._animateRemovalWhileRemovingParent();
+
+    if (this.parent.removing && !animateRemovalWhileRemovingParent || !_index__WEBPACK_IMPORTED_MODULE_0__.Device.get().supportsCssAnimation() || !this.$container || this.$container.isDisplayNone()) {
       // Cannot remove animated, remove regularly
       this._removeInternal();
 
@@ -134066,7 +134226,7 @@ class Widget {
         throw new Error('Missing animate removal class. Cannot remove animated.');
       }
 
-      if (!this.$container.isVisible() || !this.$container.isEveryParentVisible()) {
+      if (!this.$container.isVisible() || !this.$container.isEveryParentVisible() || !this.$container.isAttached()) {
         // If element is not visible, animationEnd would never fire -> remove it immediately
         this._removeInternal();
 
@@ -134080,7 +134240,14 @@ class Widget {
     }); // If the parent is being removed while the animation is running, the animationEnd event will never fire
     // -> Make sure remove is called nevertheless. Important: remove it before the parent is removed to maintain the regular remove order
 
-    this.parent.one('removing', this._parentRemovingWhileAnimatingHandler);
+    if (!animateRemovalWhileRemovingParent) {
+      this.parent.one('removing', this._parentRemovingWhileAnimatingHandler);
+    }
+  }
+
+  _animateRemovalWhileRemovingParent() {
+    // By default, remove animation is prevented when parent is being removed
+    return false;
   }
 
   _onParentRemovingWhileAnimating() {