@eclipse-scout/core 22.0.1 → 22.0.2

package/src/form/fields/tabbox/TabAreaLayout.js

@@ -1,5 +1,5 @@
 /*
- * 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
@@ -30,32 +30,37 @@ export default class TabAreaLayout extends AbstractLayout {
   }
 
   layout($container) {
-    let ellipsis = this.tabArea.ellipsis,
-      htmlContainer = HtmlComponent.get($container),
+    let htmlContainer = HtmlComponent.get($container),
       containerSize = htmlContainer.availableSize().subtract(htmlContainer.insets());
 
     // compute visible and overflown tabs
     this.preferredLayoutSize($container, {
       widthHint: containerSize.width
     });
+    this._layoutSelectionMarker();
+  }
 
-    if (this.overflowTabs.length > 0) {
-      ellipsis.setHidden(false);
-    }
-
-    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 = 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 = scout.create('Menu', {
@@ -73,73 +78,54 @@ export default class TabAreaLayout extends AbstractLayout {
       });
       return menu;
     }, this));
-
-    this._layoutSelectionMarker();
-  }
-
-  _layoutSelectionMarker() {
-    let $selectionMarker = this.tabArea.$selectionMarker,
-      selectedTab = this.tabArea.selectedTab,
-      selectedItemBounds;
-
-    if (selectedTab) {
-      $selectionMarker.setVisible(true);
-      selectedItemBounds = graphics.bounds(selectedTab.$container);
-      $selectionMarker.cssLeft(selectedItemBounds.x);
-      $selectionMarker.cssWidth(selectedItemBounds.width);
-    } else {
-      $selectionMarker.setVisible(false);
-    }
   }
 
   preferredLayoutSize($container, options) {
     let htmlComp = HtmlComponent.get($container),
       prefSize = new Dimension(0, 0),
-      prefWidth = Number.MAX_VALUE,
-      visibleTabItems = this.tabArea.visibleTabs(),
-      overflowableIndexes = visibleTabItems.map((tabItem, index) => {
-        if (tabItem.selected) {
-          return -1;
-        }
-        return index;
-      }).filter(index => index >= 0);
+      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
+    // 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();
     }
 
     // shortcut for minimum size.
     if (prefWidth <= 0) {
-      return this._minSize(visibleTabItems).add(htmlComp.insets());
+      return this._minSize(this.visibleTabs).add(htmlComp.insets());
     }
 
-    let overflowIndex = -1;
-    this._setFirstLastMarker(visibleTabItems);
-    prefSize = this._prefSize(visibleTabItems);
+    this._setFirstLastMarker(this.visibleTabs);
+    this._updateEllipsis();
+    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);
-      this._setFirstLastMarker(visibleTabItems);
-      prefSize = this._prefSize(visibleTabItems);
+      let overflowIndex = overflowableIndexes.splice(-1)[0];
+      this.overflowTabs.splice(0, 0, this.visibleTabs[overflowIndex]);
+      this.visibleTabs.splice(overflowIndex, 1);
+      this._setFirstLastMarker(this.visibleTabs);
+      this._updateEllipsis(); // update ellipsis here already so that the prefSize on the next line is correct
+      prefSize = this._prefSize(this.visibleTabs);
     }
 
-    this.visibleTabs = visibleTabItems;
-
     // Use the total available space if spreading tabs evenly.
     if (this.tabArea.displayStyle === TabArea.DisplayStyle.SPREAD_EVEN) {
       return graphics.prefSize($container, options);
     }
-
     return graphics.exactPrefSize(prefSize.add(htmlComp.insets()), options);
   }
 
   _minSize(tabItems) {
-    let visibleTabItems = [],
-      prefSize;
+    let visibleTabItems = [];
     this.overflowTabs = tabItems.filter(tabItem => {
       if (tabItem.selected) {
         visibleTabItems.push(tabItem);
@@ -150,23 +136,21 @@ export default class TabAreaLayout extends AbstractLayout {
 
     this.visibleTabs = visibleTabItems;
     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 Dimension(0, 0)),
-      ellipsisSize = new Dimension(0, 0);
+      }, new Dimension(0, 0));
 
     considerEllipsis = 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;
     }
@@ -193,8 +177,8 @@ export default class TabAreaLayout extends 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.
@@ -208,6 +192,19 @@ export default class TabAreaLayout extends AbstractLayout {
     prefSize = htmlComp.prefSize({
       exact: true
     }).add(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);
 

package/src/form/fields/tabbox/TabBox.js

@@ -32,7 +32,6 @@ export default class TabBox extends CompositeField {
     this._addPreserveOnPropertyChangeProperties(['selectedTab']);
 
     this._tabBoxHeaderPropertyChangeHander = this._onTabBoxHeaderPropertyChange.bind(this);
-    this._selectedTabScrollTopChangeHandler = this._updateScrollShadow.bind(this);
   }
 
   /**
@@ -173,16 +172,17 @@ export default class TabBox extends 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();
       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();
     }
   }
@@ -195,14 +195,11 @@ export default class TabBox extends CompositeField {
     let oldHasScrollShadowTop = this.$container.hasClass('has-scroll-shadow-top');
     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)
     fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && this.labelVisible);
-
-    // Prevent flickering of status icon
-    this.validateLayout();
   }
 
   setTabAreaStyle(tabAreaStyle) {

package/src/form/fields/tabbox/TabBox.less

@@ -74,7 +74,7 @@
   & > .menubar {
     position: absolute;
     #scout.menubar-background-color-inherit();
-    border-bottom-color: transparent;
+    border-bottom: none;
   }
 
   & > .status {
@@ -163,6 +163,7 @@
     display: inline-block;
     vertical-align: middle;
     padding: @tab-item-title-padding-top 0 @tab-item-title-padding-bottom;
+    margin-top: @text-margin-top;
 
     .tab-area.has-sub-label > & {
       padding-bottom: @group-box-title-with-sub-label-padding-bottom;

package/src/form/fields/tabbox/TabBoxHeaderLayout.js

@@ -1,5 +1,5 @@
 /*
- * 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
@@ -34,14 +34,14 @@ export default class TabBoxHeaderLayout extends AbstractLayout {
     this.tabBoxHeader.invalidateLayoutTree();
   }
 
-  layout($container) { //
+  layout($container) {
     let htmlContainer = 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 Dimension(),
       insets = htmlContainer.insets(),
@@ -49,7 +49,7 @@ export default class TabBoxHeaderLayout extends AbstractLayout {
         exact: true
       }).subtract(htmlContainer.insets());
 
-    menuBarMinumumSize = menuBar.htmlComp.prefSize({
+    menuBarMinimumSize = menuBar.htmlComp.prefSize({
       widthHint: 0
     });
 
@@ -59,7 +59,7 @@ export default class TabBoxHeaderLayout extends AbstractLayout {
     }
 
     tabAreaPrefSize = tabArea.htmlComp.prefSize({
-      widthHint: containerSize.width - menuBarMinumumSize.width - menuBarMargins.horizontal() - statusSizeLarge.width,
+      widthHint: containerSize.width - menuBarMinimumSize.width - menuBarMargins.horizontal() - statusSizeLarge.width,
       exact: false
     });
 

package/src/glasspane/GlassPane.js

@@ -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
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {scout, Widget} from '../index';
+import {Widget} from '../index';
 import $ from 'jquery';
 
 export default class GlassPane extends Widget {
@@ -24,7 +24,7 @@ export default class GlassPane extends Widget {
 
     this.$parent.addClass('glasspane-parent');
     let cssPosition = this.$parent.css('position');
-    if (!scout.isOneOf(cssPosition, 'relative', 'absolute')) {
+    if (cssPosition === 'static') {
       this.$parent.css('position', 'relative');
     }
 

package/src/group/Group.less

@@ -44,7 +44,7 @@
   #scout.overflow-ellipsis-nowrap();
 
   .group-header:focus > & {
-    color: @active-color;
+    color: @focus-color;
     text-decoration: underline;
   }
 }

package/src/index.less

@@ -144,5 +144,6 @@
 @import "tile/fields/tablefield/TileTableField";
 @import "widget/FilterSupport";
 @import "login/LoginBox";
+@import "form/fields/breadcrumbbarfield/BreadcrumbBarField";
 @import "breadcrumbbar/BreadcrumbBar";
 @import "breadcrumbbar/BreadcrumbItem";

package/src/jquery/jquery-scout.js

@@ -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
@@ -1049,16 +1049,17 @@ $.fn.oneAnimationEnd = function(handler) {
   if (!handler) {
     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);
+    this.off('animationend webkitAnimationEnd', oneHandler);
     // Notify actual event handler
     handler(event);
-  });
+  };
+  return this.on('animationend webkitAnimationEnd', oneHandler);
 };
 
 $.fn.hasAnimationClass = function() {

package/src/menu/ContextMenuPopup.less

@@ -53,14 +53,21 @@
     &.selected {
       background-color: @item-selection-background-color;
 
+      &.has-popup {
+        color: @context-menu-item-color;
+
+        &.disabled {
+          color: @menu-item-disabled-color;
+          background-color: @item-selection-background-color;
+        }
+      }
+
       & > .submenu-icon {
         transform: none;
       }
     }
 
     &.expanded {
-      color: @active-color;
-
       & > .submenu-icon {
         #scout.submenu-icon-open();
       }

package/src/menu/Menu.less

@@ -86,6 +86,7 @@
 
   & > .text {
     #scout.overflow-ellipsis-nowrap();
+    margin-top: @text-margin-top;
   }
 
   & > .font-icon {

package/src/modeselector/Mode.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
@@ -9,10 +9,14 @@
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .mode {
-  border: @mode-border-width solid @control-border-color;
+  --padding-x: @mode-padding-x;
+  --padding-y: @mode-padding-y;
+  --border-width: @mode-border-width;
+
+  border: var(--border-width) solid @control-border-color;
   border-radius: 0;
   flex: 1 1 0;
-  padding: @mode-padding-y @mode-padding-x;
+  padding: var(--padding-y) var(--padding-x);
   #scout.overflow-ellipsis();
 
   &.first {
@@ -29,12 +33,12 @@
 
   &:not(.last):not(.selected) {
     border-right: none;
-    padding-right: @mode-padding-x + @mode-border-width; /* account for the missing border, so that text does not jump */
+    padding-right: calc(var(--padding-x) + var(--border-width)); /* account for the missing border, so that text does not jump */
   }
 
   &.after-selected {
     border-left: none;
-    padding-left: @mode-padding-x + @mode-border-width; /* account for the missing border, so that text does not jump */
+    padding-left: calc(var(--padding-x) + var(--border-width)); /* account for the missing border, so that text does not jump */
   }
 
   // override button (the selected mode cannot be clicked. therefore do not show hover and active colors)
@@ -68,28 +72,20 @@
 }
 
 .mode-selector.alternative {
-  border: @mode-alternative-border-width solid transparent;
 
   & > .mode {
+    --border-width: 0px;
+
     color: @mode-color;
-    border: none;
     background-color: transparent;
     border-radius: @button-border-radius;
 
-    &:not(.last):not(.selected) {
-      padding-right: @mode-padding-x;
-    }
-
-    &.after-selected {
-      padding-left: @mode-padding-x;
-    }
-
     &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: @mode-alternative-hover-background-color;
     }
 
     &:active {
-      background-color: rgba(0, 0, 0, 0.1);
+      background-color: @mode-alternative-active-background-color;
     }
 
     &.selected {
@@ -120,26 +116,8 @@
 }
 
 .dense .mode-selector {
-
   & > .mode {
-    padding: @mode-padding-dense;
-
-    &:not(.last):not(.selected) {
-      padding-right: @mode-padding-dense-x + @mode-border-width; /* account for the missing border, so that text does not jump */
-    }
-
-    &.after-selected {
-      padding-left: @mode-padding-dense-x + @mode-border-width; /* account for the missing border, so that text does not jump */
-    }
-  }
-
-  &.alternative > .mode {
-    &:not(.last):not(.selected) {
-      padding-right: @mode-padding-dense-x;
-    }
-
-    &.after-selected {
-      padding-left: @mode-padding-dense-x;
-    }
+    --padding-x: @mode-padding-dense-x;
+    --padding-y: @mode-padding-dense-y;
   }
 }

package/src/modeselector/ModeSelector.js

@@ -133,7 +133,7 @@ export default class ModeSelector extends Widget {
     let selectedModePosX = 0, selectedModeWidth = 0;
     if (this.selectedMode && this.selectedMode.$container) {
       selectedModePosX = graphics.position(this.selectedMode.$container).x;
-      selectedModeWidth = graphics.size(this.selectedMode.$container).width;
+      selectedModeWidth = graphics.size(this.selectedMode.$container, {exact: true}).width;
     }
     this.$slider.cssLeft(selectedModePosX);
     this.$slider.cssWidth(selectedModeWidth);

package/src/modeselector/ModeSelector.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
@@ -22,6 +22,7 @@
   &.alternative {
     background-color: @mode-alternative-background-color;
     border-radius: @button-border-radius;
+    border: @mode-selector-alternative-border-width solid transparent;
 
     &:not(.disabled) > .mode-slider {
       display: block;

package/src/planner/PlannerHeader.less

@@ -97,7 +97,8 @@
 }
 
 .planner-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
   text-align: center;
   border-top: 1px solid @control-border-color;
   border-bottom: 1px solid @control-border-color;

package/src/popup/Popup.js

@@ -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
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {CloseKeyStroke, DialogLayout, Dimension, Event, FocusRule, GlassPaneRenderer, graphics, HtmlComponent, Insets, KeyStrokeContext, Point, PopupLayout, Rectangle, scout, scrollbars, strings, Widget} from '../index';
+import {CloseKeyStroke, DialogLayout, Dimension, Event, FocusRule, GlassPaneRenderer, graphics, HtmlComponent, Insets, KeyStrokeContext, Point, PopupLayout, Rectangle, scout, scrollbars, strings, Widget, widgets} from '../index';
 import $ from 'jquery';
 
 export default class Popup extends Widget {
@@ -185,18 +185,17 @@ export default class Popup extends 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;
@@ -206,6 +205,14 @@ export default class Popup extends Widget {
     });
   }
 
+  /**
+   * Only called if parent.rendered or parent.rendering
+   * @return {$}
+   */
+  _getDefaultOpen$Parent() {
+    return this.parent.entryPoint();
+  }
+
   open($parent) {
     if (!$parent) {
       this._openWithoutParent();
@@ -442,6 +449,15 @@ export default class Popup extends 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 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.
@@ -1037,7 +1053,7 @@ export default class Popup extends 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
+    // 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();
     }

package/src/popup/PopupLayout.js

@@ -1,5 +1,5 @@
 /*
- * 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
@@ -135,9 +135,6 @@ export default class PopupLayout extends AbstractLayout {
    * @returns {Dimension}
    */
   _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,
       windowPaddingX = this.popup.windowPaddingX,
@@ -159,7 +156,7 @@ export default class PopupLayout extends AbstractLayout {
       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
+    // 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
@@ -219,9 +216,6 @@ export default class PopupLayout extends AbstractLayout {
    * @returns {Insets}
    */
   _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, maxHeightUp,
       htmlComp = this.popup.htmlComp,
       windowPaddingX = this.popup.windowPaddingX,