neo.mjs 8.24.0 → 8.26.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.24.0'
+         * @member {String} version='8.26.0'
          */
-        version: '8.24.0'
+        version: '8.26.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-24",
+      "datePublished": "2025-02-26",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.24.0'
+                html  : 'v8.26.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.24.0'
+         * @member {String} version='8.26.0'
          */
-        version: '8.24.0'
+        version: '8.26.0'
     }
 
     /**

package/examples/grid/bigData/ControlsContainer.mjs

@@ -28,8 +28,9 @@ class ControlsContainer extends Container {
             handler: 'up.onControlsToggleButtonClick',
             iconCls: 'fas fa-bars'
         }, {
-            module: TabContainer,
-            cls   : ['neo-examples-bigdata-controls-container-content'],
+            module  : TabContainer,
+            cls     : ['neo-examples-bigdata-controls-container-content'],
+            sortable: true,
 
             items: [{
                 module: Container,

package/examples/grid/bigData/GridContainer.mjs

@@ -1,8 +1,6 @@
 import BaseGridContainer from '../../../src/grid/Container.mjs';
 import MainStore         from './MainStore.mjs';
 
-import * as selection from '../../../src/selection/grid/_export.mjs';
-
 /**
  * @class Neo.examples.grid.bigData.GridContainer
  * @extends Neo.grid.Container
@@ -35,7 +33,6 @@ class GridContainer extends BaseGridContainer {
          * @member {Object} viewConfig
          */
         viewConfig: {
-            selectionModel: selection.CellModel, // todo: remove after #6491 is resolved
             bufferColumnRange: 3,
             bufferRowRange   : 5
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.24.0",
+    "version": "8.26.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -62,7 +62,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.85.0",
+        "sass": "^1.85.1",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.98.0",

package/resources/scss/src/button/Base.scss

@@ -106,9 +106,9 @@
     }
 
     &:active {
-        background-color: var(--button-background-color-active) !important;
-        background-image: none !important;
-        border          : var(--button-border-active) !important;
+        background-color: var(--button-background-color-active);
+        background-image: none;
+        border          : var(--button-border-active);
 
         .neo-button-glyph {
             color: var(--button-glyph-color-active);

package/resources/scss/src/grid/VerticalScrollbar.scss

@@ -0,0 +1,21 @@
+.neo-grid-vertical-scrollbar {
+    bottom    : 1px;
+    opacity   : 0;
+    overflow-y: scroll;
+    position  : absolute;
+    right     : 0;
+    top       : 31px; // header-toolbar height
+    transition: opacity 1s ease-out;
+    width     : 16px;
+    z-index   : 2;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
+    .neo-grid-vertical-scrollbar {
+        opacity: 1;
+    }
+}

package/resources/scss/src/tab/Container.scss

@@ -31,9 +31,4 @@
         border  : var(--tab-container-content-border);
         overflow: hidden;
     }
-
-    .neo-tab-header-toolbar {
-        background-color: transparent;
-        padding         : 0;
-    }
 }

package/src/DefaultConfig.mjs

@@ -263,12 +263,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.24.0'
+     * @default '8.26.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.24.0'
+    version: '8.26.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -2401,7 +2401,7 @@ class Component extends Base {
     /**
      * Change multiple configs at once, ensuring that all afterSet methods get all new assigned values
      * @param {Object} values={}
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      * @returns {Promise<*>}
      */
     set(values={}, silent=false) {

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -18,6 +18,10 @@ class SortZone extends BaseSortZone {
          * @protected
          */
         ntype: 'grid-header-toolbar-sortzone',
+        /**
+         * @member {Boolean} adjustItemRectsToParent=false
+         */
+        adjustItemRectsToParent: false,
         /**
          * @member {String|null} itemMargin='1px'
          * @protected
@@ -96,7 +100,7 @@ class SortZone extends BaseSortZone {
             mounted() {
                 Neo.main.DomAccess.scrollTo({
                     id      : viewWrapperId,
-                    value   : view.scrollPosition.y,
+                    value   : view.scrollTop,
                     windowId: this.windowId
                 })
             }

package/src/draggable/toolbar/SortZone.mjs

@@ -17,6 +17,13 @@ class SortZone extends DragZone {
          * @protected
          */
         ntype: 'toolbar-sortzone',
+        /**
+         * Depending on the parent structure using position absolute and relative, it can be needed to subtract
+         * the x & y parent rect values from the item rects.
+         * For tab.header.Toolbar it is needed, for grid.header.Toolbar it is not
+         * @member {Boolean} adjustItemRectsToParent=true
+         */
+        adjustItemRectsToParent: true,
         /**
          * @member {Boolean} alwaysFireDragMove=true
          */
@@ -161,22 +168,25 @@ class SortZone extends DragZone {
             return
         }
 
-        let me          = this,
-            index       = me.currentIndex,
-            {itemRects} = me,
-            maxItems    = itemRects.length - 1,
-            reversed    = me.reversedLayoutDirection,
+        let me                 = this,
+            {clientX, clientY} = data,
+            index              = me.currentIndex,
+            {itemRects}        = me,
+            maxItems           = itemRects.length - 1,
+            ownerX             = me.adjustItemRectsToParent ? me.ownerRect.x : 0,
+            ownerY             = me.adjustItemRectsToParent ? me.ownerRect.y : 0,
+            reversed           = me.reversedLayoutDirection,
             delta, isOverDragging, isOverDraggingEnd, isOverDraggingStart, itemHeightOrWidth, moveFactor;
 
         if (me.sortDirection === 'horizontal') {
-            delta               = data.clientX + me.scrollLeft - me.offsetX - itemRects[index].left;
-            isOverDraggingEnd   = data.clientX > me.boundaryContainerRect.right;
-            isOverDraggingStart = data.clientX < me.boundaryContainerRect.left;
+            delta               = clientX - ownerX + me.scrollLeft - me.offsetX - itemRects[index].left;
+            isOverDraggingEnd   = clientX > me.boundaryContainerRect.right;
+            isOverDraggingStart = clientX < me.boundaryContainerRect.left;
             itemHeightOrWidth   = 'width'
         } else {
-            delta               = data.clientY + me.scrollTop - me.offsetY - itemRects[index].top;
-            isOverDraggingEnd   = data.clientY > me.boundaryContainerRect.bottom;
-            isOverDraggingStart = data.clientY < me.boundaryContainerRect.top;
+            delta               = clientY - ownerY + me.scrollTop - me.offsetY - itemRects[index].top;
+            isOverDraggingEnd   = clientY > me.boundaryContainerRect.bottom;
+            isOverDraggingStart = clientY < me.boundaryContainerRect.top;
             itemHeightOrWidth   = 'height'
         }
 
@@ -243,11 +253,11 @@ class SortZone extends DragZone {
             Object.assign(me, {
                 currentIndex           : index,
                 dragElement            : VDomUtil.find(owner.vdom, button.id).vdom,
-                dragProxyConfig        : {...me.dragProxyConfig, cls : [...owner.cls]},
+                dragProxyConfig        : {...me.dragProxyConfig, cls: [...owner.cls]},
                 indexMap               : indexMap,
-                ownerStyle             : {height: ownerStyle.height, width : ownerStyle.width},
+                ownerStyle             : {height: ownerStyle.height, width: ownerStyle.width},
                 reversedLayoutDirection: layout.direction === 'column-reverse' || layout.direction === 'row-reverse',
-                sortDirection          : owner.layout.ntype === 'layout-vbox' ? 'vertical' : 'horizontal',
+                sortDirection          : layout.direction.includes('row') ? 'horizontal' : 'vertical',
                 startIndex             : index
             });
 
@@ -273,6 +283,12 @@ class SortZone extends DragZone {
                 owner.style = ownerStyle;
 
                 itemRects.shift();
+
+                me.adjustItemRectsToParent && itemRects.forEach(rect => {
+                    rect.x -= me.ownerRect.x;
+                    rect.y -= me.ownerRect.y
+                });
+
                 me.itemRects = itemRects;
 
                 owner.items.forEach((item, index) => {

package/src/grid/Container.mjs

@@ -1,9 +1,10 @@
-import BaseContainer   from '../container/Base.mjs';
-import ClassSystemUtil from '../util/ClassSystem.mjs';
-import GridScrollbar   from './Scrollbar.mjs';
-import GridView        from './View.mjs';
-import Store           from '../data/Store.mjs';
-import * as header     from './header/_export.mjs';
+import BaseContainer     from '../container/Base.mjs';
+import ClassSystemUtil   from '../util/ClassSystem.mjs';
+import GridView          from './View.mjs';
+import ScrollManager     from './ScrollManager.mjs';
+import Store             from '../data/Store.mjs';
+import VerticalScrollbar from './VerticalScrollbar.mjs';
+import * as header       from './header/_export.mjs';
 
 /**
  * @class Neo.grid.Container
@@ -119,17 +120,10 @@ class GridContainer extends BaseContainer {
      */
     initialResizeEvent = true
     /**
-     * Flag for identifying the ownership of a touchmove operation
-     * @member {Boolean} isTouchMoveOwner=false
+     * @member {Neo.grid.ScrollManager|null} scrollManager=null
      * @protected
      */
-    isTouchMoveOwner = false
-    /**
-     * Storing touchmove position for mobile envs
-     * @member {Number} lastTouchY=0
-     * @protected
-     */
-    lastTouchY = 0
+    scrollManager = null
 
     /**
      * Convenience method to access the Neo.grid.header.Toolbar
@@ -176,7 +170,7 @@ class GridContainer extends BaseContainer {
         }];
 
         me.scrollbar = Neo.create({
-            module  : GridScrollbar,
+            module  : VerticalScrollbar,
             appName,
             parentId: me.id,
             rowHeight,
@@ -192,7 +186,6 @@ class GridContainer extends BaseContainer {
 
         me.addDomListeners({
             resize: me.onResize,
-            scroll: me.onScroll,
             scope : me
         })
     }
@@ -475,6 +468,8 @@ class GridContainer extends BaseContainer {
     destroy(...args) {
         let me = this;
 
+        me.scrollManager.destroy();
+
         me.mounted && Neo.main.addon.ResizeObserver.unregister({
             id      : me.id,
             windowId: me.windowId
@@ -513,6 +508,21 @@ class GridContainer extends BaseContainer {
         return `${this.id}__wrapper`
     }
 
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        me.scrollManager = Neo.create({
+            module       : ScrollManager,
+            gridContainer: me,
+            gridView     : me.view
+        })
+    }
+
     /**
      * @param {Object} data
      */
@@ -530,44 +540,6 @@ class GridContainer extends BaseContainer {
         }
     }
 
-    /**
-     * @param {Object} data
-     * @param {Number} data.scrollLeft
-     * @param {Object} data.target
-     * @param {Object} data.touches
-     */
-    onScroll({scrollLeft, target, touches}) {
-        let me     = this,
-            {view} = me,
-            deltaY, lastTouchY;
-
-        // We must ignore events for grid-scrollbar
-        if (target.id.includes('grid-container')) {
-            me.headerToolbar.scrollLeft = scrollLeft;
-            view.scrollPosition = {x: scrollLeft, y: view.scrollPosition.y};
-
-            if (touches) {
-                if (!view.isTouchMoveOwner) {
-                    me.isTouchMoveOwner = true
-                }
-
-                if (me.isTouchMoveOwner) {
-                    lastTouchY = touches.lastTouch.clientY - touches.firstTouch.clientY;
-                    deltaY     = me.lastTouchY - lastTouchY;
-
-                    deltaY !== 0 && Neo.main.DomAccess.scrollTo({
-                        direction: 'top',
-                        id       : view.vdom.id,
-                        value    : view.scrollPosition.y + deltaY
-                    })
-
-                    me.lastTouchY = lastTouchY
-                }
-            }
-
-        }
-    }
-
     /**
      * @param {Object} opts
      * @param {String} opts.direction
@@ -670,7 +642,7 @@ class GridContainer extends BaseContainer {
             {columnPositions, containerWidth, mountedColumns, visibleColumns} = view,
             countColumns = columnPositions.getCount(),
             newIndex     = index + step,
-            column, mounted, scrollPosition, visible;
+            column, mounted, scrollLeft, visible;
 
         if (newIndex >= countColumns) {
             newIndex %= countColumns;
@@ -697,15 +669,15 @@ class GridContainer extends BaseContainer {
             column = columnPositions.getAt(newIndex);
 
             if (step < 0) {
-                scrollPosition = column.x
+                scrollLeft = column.x
             } else {
-                scrollPosition = column.x - containerWidth + column.width
+                scrollLeft = column.x - containerWidth + column.width
             }
 
             Neo.main.DomAccess.scrollTo({
                 direction: 'left',
                 id       : me.id,
-                value    : scrollPosition,
+                value    : scrollLeft,
                 windowId : me.windowId
             })
         }

package/src/grid/ScrollManager.mjs

@@ -0,0 +1,179 @@
+import Base from '../core/Base.mjs';
+
+/**
+ * @class Neo.grid.ScrollManager
+ * @extends Neo.core.Base
+ */
+class ScrollManager extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.ScrollManager'
+         * @protected
+         */
+        className: 'Neo.grid.ScrollManager',
+        /**
+         * @member {Number} scrollLeft_=0
+         * @protected
+         */
+        scrollLeft_: 0,
+        /**
+         * @member {Number} scrollTop_=0
+         * @protected
+         */
+        scrollTop_: 0
+    }
+
+    /**
+     * @member {Neo.grid.Container|null} gridContainer=null
+     * @protected
+     */
+    gridContainer = null
+    /**
+     * @member {Neo.grid.View|null} gridView=null
+     * @protected
+     */
+    gridView = null
+    /**
+     * Storing touchmove position for mobile envs
+     * @member {Number} lastTouchX=0
+     * @protected
+     */
+    lastTouchX = 0
+    /**
+     * Storing touchmove position for mobile envs
+     * @member {Number} lastTouchY=0
+     * @protected
+     */
+    lastTouchY = 0
+    /**
+     * @member {Number|null}} scrollTimeoutId=null
+     * @protected
+     */
+    scrollTimeoutId = null
+    /**
+     * Flag for identifying the ownership of a touchmove operation
+     * @member {'container'|'view'|null} touchMoveOwner=null
+     * @protected
+     */
+    touchMoveOwner = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.gridContainer.addDomListeners({
+            scroll: me.onContainerScroll,
+            scope : me
+        });
+
+        me.gridView.addDomListeners({
+            scroll     : me.onViewScroll,
+            touchcancel: me.onTouchCancel,
+            touchend   : me.onTouchEnd,
+            scope      : me
+        })
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} data.scrollLeft
+     * @param {Object} data.target
+     * @param {Object} data.touches
+     */
+    onContainerScroll({scrollLeft, target, touches}) {
+        let me    = this,
+            view = me.gridView,
+            deltaY, lastTouchY;
+
+        // We must ignore events for grid-scrollbar
+        if (target.id.includes('grid-container')) {
+            me  .scrollLeft = scrollLeft;
+            view.scrollLeft = scrollLeft;
+
+            me.gridContainer.headerToolbar.scrollLeft = scrollLeft;
+
+            if (touches) {
+                if (me.touchMoveOwner !== 'view') {
+                    me.touchMoveOwner = 'container'
+                }
+
+                if (me.touchMoveOwner === 'container') {
+                    lastTouchY = touches.lastTouch.clientY - touches.firstTouch.clientY;
+                    deltaY     = me.lastTouchY - lastTouchY;
+
+                    deltaY !== 0 && Neo.main.DomAccess.scrollTo({
+                        direction: 'top',
+                        id       : view.vdom.id,
+                        value    : me.scrollTop + deltaY
+                    })
+
+                    me.lastTouchY = lastTouchY
+                }
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onTouchCancel(data) {
+        this.onTouchEnd(data)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onTouchEnd(data) {
+        let me = this;
+
+        me.touchMoveOwner = null;
+        me.lastTouchX     = 0;
+        me.lastTouchY     = 0
+    }
+
+    /**
+     * Only triggers for vertical scrolling
+     * @param {Object} data
+     * @protected
+     */
+    onViewScroll({scrollTop, touches}) {
+        let me   = this,
+            view = me.gridView,
+            deltaX, lastTouchX;
+
+        me.scrollTop = scrollTop;
+
+        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
+
+        me.scrollTimeoutId = setTimeout(() => {
+            view.isScrolling = false
+        }, 30);
+
+        view.set({isScrolling: true, scrollTop});
+
+        if (touches) {
+            if (me.touchMoveOwner !== 'container') {
+                me.touchMoveOwner = 'view'
+            }
+
+            if (me.touchMoveOwner === 'view') {
+                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
+                deltaX     = me.lastTouchX - lastTouchX;
+
+                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
+                    direction: 'left',
+                    id       : me.gridContainer.id,
+                    value    : me.scrollLeft + deltaX
+                })
+
+                me.lastTouchX = lastTouchX
+            }
+        }
+    }
+}
+
+export default Neo.setupClass(ScrollManager);

package/src/grid/{Scrollbar.mjs → VerticalScrollbar.mjs}

@@ -1,26 +1,28 @@
 import Component from '../component/Base.mjs';
 
 /**
- * @class Neo.grid.Scrollbar
+ * We do not want to use the default scrollbar for vertical scrolling, since it would show up at the right edge
+ * of the last column. Instead, we want to show it at the right edge of the container (always visible when scrolling).
+ * @class Neo.grid.VerticalScrollbar
  * @extends Neo.component.Base
  */
-class GridScrollbar extends Component {
+class VerticalScrollbar extends Component {
     static config = {
         /**
-         * @member {String} className='Neo.grid.Scrollbar'
+         * @member {String} className='Neo.grid.VerticalScrollbar'
          * @protected
          */
-        className: 'Neo.grid.Scrollbar',
+        className: 'Neo.grid.VerticalScrollbar',
         /**
-         * @member {String} ntype='grid-scrollbar'
+         * @member {String} ntype='grid-vertical-scrollbar'
          * @protected
          */
-        ntype: 'grid-scrollbar',
+        ntype: 'grid-vertical-scrollbar',
         /**
-         * @member {String[]} baseCls=['neo-grid-scrollbar']
+         * @member {String[]} baseCls=['neo-grid-vertical-scrollbar']
          * @protected
          */
-        baseCls: ['neo-grid-scrollbar'],
+        baseCls: ['neo-grid-vertical-scrollbar'],
         /**
          * Number in px
          * @member {Number} rowHeight_=0
@@ -116,4 +118,4 @@ class GridScrollbar extends Component {
     }
 }
 
-export default Neo.setupClass(GridScrollbar);
+export default Neo.setupClass(VerticalScrollbar);

package/src/grid/View.mjs

@@ -103,9 +103,15 @@ class GridView extends Component {
          */
         rowHeight_: 0,
         /**
-         * @member {Object} scrollPosition_={x:0,y:0}
+         * @member {Number} scrollLeft_=0
+         * @protected
+         */
+        scrollLeft_: 0,
+        /**
+         * @member {Number} scrollTop_=0
+         * @protected
          */
-        scrollPosition_: {x: 0, y: 0},
+        scrollTop_: 0,
         /**
          * @member {Neo.selection.Model} selectionModel_=null
          */
@@ -142,28 +148,11 @@ class GridView extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-            {tabIndex: '-1', cn: [
-                    {cn: []}
-                ]}
+        {tabIndex: '-1', cn: [
+            {cn: []}
+        ]}
     }
 
-    /**
-     * Flag for identifying the ownership of a touchmove operation
-     * @member {Boolean} isTouchMoveOwner=false
-     * @protected
-     */
-    isTouchMoveOwner = false
-    /**
-     * Storing touchmove position for mobile envs
-     * @member {Number} lastTouchX=0
-     * @protected
-     */
-    lastTouchX = 0
-    /**
-     * @member {Number|null}} scrollTimeoutId=null
-     */
-    scrollTimeoutId = null
-
     /**
      * @member {String[]} selectedRows
      */
@@ -199,11 +188,6 @@ class GridView extends Component {
         let me = this;
 
         me.addDomListeners([{
-            scroll     : me.onScroll,
-            touchcancel: me.onTouchCancel,
-            touchend   : me.onTouchEnd,
-            scope      : me
-        }, {
             click   : me.onCellClick,
             dblclick: me.onCellDoubleClick,
             delegate: '.neo-grid-cell',
@@ -328,29 +312,31 @@ class GridView extends Component {
     }
 
     /**
-     * Triggered after the scrollPosition config got changed
-     * @param {Object} value
-     * @param {Object} oldValue
+     * Triggered after the scrollLeft config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetScrollLeft(value, oldValue) {
+        this.updateMountedAndVisibleColumns()
+    }
+
+    /**
+     * Triggered after the scrollTop config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
      * @protected
      */
-    afterSetScrollPosition(value, oldValue) {
+    afterSetScrollTop(value, oldValue) {
         let me               = this,
             {bufferRowRange} = me,
-            newStartIndex;
+            newStartIndex    = Math.floor(value / me.rowHeight);
 
-        if (value.x !== oldValue?.x) {
-            me.updateMountedAndVisibleColumns()
-        }
-
-        if (value.y !== oldValue?.y) {
-            newStartIndex = Math.floor(value.y / me.rowHeight);
-
-            if (Math.abs(me.startIndex - newStartIndex) >= bufferRowRange) {
-                me.startIndex = newStartIndex
-            } else {
-                me.visibleRows[0] = newStartIndex;
-                me.visibleRows[1] = newStartIndex + me.availableRows
-            }
+        if (Math.abs(me.startIndex - newStartIndex) >= bufferRowRange) {
+            me.startIndex = newStartIndex
+        } else {
+            me.visibleRows[0] = newStartIndex;
+            me.visibleRows[1] = newStartIndex + me.availableRows
         }
     }
 
@@ -861,46 +847,6 @@ class GridView extends Component {
         this.fireRowEvent(data, 'rowDoubleClick')
     }
 
-    /**
-     * Only triggers for vertical scrolling
-     * @param {Object} data
-     * @protected
-     */
-    onScroll({scrollTop, touches}) {
-        let me = this,
-            deltaX, lastTouchX;
-
-        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
-
-        me.scrollTimeoutId = setTimeout(() => {
-            me.isScrolling = false
-        }, 30);
-
-        me.set({
-            isScrolling   : true,
-            scrollPosition: {x: me.scrollPosition.x, y: scrollTop}
-        });
-
-        if (touches) {
-            if (!me.parent.isTouchMoveOwner) {
-                me.isTouchMoveOwner = true
-            }
-
-            if (me.isTouchMoveOwner) {
-                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
-                deltaX     = me.lastTouchX - lastTouchX;
-
-                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
-                    direction: 'left',
-                    id       : me.parent.id,
-                    value    : me.scrollPosition.x + deltaX
-                })
-
-                me.lastTouchX = lastTouchX
-            }
-        }
-    }
-
     /**
      * Gets triggered after changing the value of a record field.
      * E.g. myRecord.foo = 'bar';
@@ -954,34 +900,6 @@ class GridView extends Component {
         needsUpdate && me.update()
     }
 
-    /**
-     * @param {Object} data
-     */
-    onTouchCancel(data) {
-        let me       = this,
-            {parent} = me;
-
-        me.isTouchMoveOwner = false;
-        me.lastTouchX       = 0;
-
-        parent.isTouchMoveOwner = false;
-        parent.lastTouchY       = 0
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onTouchEnd(data) {
-        let me       = this,
-            {parent} = me;
-
-        me.isTouchMoveOwner = false;
-        me.lastTouchX       = 0;
-
-        parent.isTouchMoveOwner = false;
-        parent.lastTouchY       = 0
-    }
-
     /**
      * Used for keyboard navigation (selection models)
      * @param {Number} index
@@ -992,7 +910,7 @@ class GridView extends Component {
             {mountedRows, visibleRows} = me,
             countRecords               = me.store.getCount(),
             newIndex                   = index + step,
-            lastRowGap, mounted, scrollPosition, visible;
+            lastRowGap, mounted, scrollTop, visible;
 
         if (newIndex >= countRecords) {
             newIndex %= countRecords;
@@ -1017,15 +935,15 @@ class GridView extends Component {
             }
 
             if (step < 0) {
-                scrollPosition = newIndex * me.rowHeight
+                scrollTop = newIndex * me.rowHeight
             } else {
-                lastRowGap     = me.rowHeight - (me.availableHeight % me.rowHeight);
-                scrollPosition = (newIndex - me.availableRows) * me.rowHeight + lastRowGap
+                lastRowGap = me.rowHeight - (me.availableHeight % me.rowHeight);
+                scrollTop  = (newIndex - me.availableRows) * me.rowHeight + lastRowGap
             }
 
             Neo.main.DomAccess.scrollTo({
                 id      : me.vdom.id,
-                value   : scrollPosition,
+                value   : scrollTop,
                 windowId: me.windowId
             })
         }
@@ -1037,10 +955,10 @@ class GridView extends Component {
     updateMountedAndVisibleColumns() {
         let me       = this,
             {bufferColumnRange, columnPositions, mountedColumns, visibleColumns} = me,
-            {x}          = me.scrollPosition,
             i            = 0,
             countColumns = columnPositions.getCount(),
             endIndex     = countColumns - 1,
+            x            = me.scrollLeft,
             column, startIndex;
 
         if (countColumns < 1) {

package/src/layout/Base.mjs

@@ -154,6 +154,37 @@ class Layout extends Base {
             container.wrapperCls = wrapperCls
         }
     }
+
+    /**
+     * Change multiple configs at once, ensuring that all afterSet methods get all new assigned values
+     * @param {Object} values={}
+     * @param {Boolean} silent=false
+     * @returns {Promise<*>}
+     */
+    set(values={}, silent=false) {
+        let me          = this,
+            {container} = me;
+
+        container.silentVdomUpdate = true;
+
+        super.set(values);
+
+        container.silentVdomUpdate = false;
+
+        if (silent || !container.needsVdomUpdate) {
+            return Promise.resolve()
+        } else {
+            return container.promiseUpdate()
+        }
+    }
+
+    /**
+     * Convenience shortcut calling set() with the silent flag
+     * @param {Object} values={}
+     */
+    setSilent(values={}) {
+        return this.set(values, true)
+    }
 }
 
 export default Neo.setupClass(Layout);

package/src/layout/Flexbox.mjs

@@ -248,18 +248,10 @@ class Flexbox extends Base {
 
         NeoArray.remove(wrapperCls, prefix + 'container');
 
-        if (me.align) {
-            NeoArray.remove(wrapperCls, prefix + 'align-' + me.align)
-        }
-        if (me.direction) {
-            NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction)
-        }
-        if (me.pack) {
-            NeoArray.remove(wrapperCls, prefix + 'pack-' + me.pack)
-        }
-        if (me.wrap) {
-            NeoArray.remove(wrapperCls, prefix + 'wrap-' + me.wrap)
-        }
+        me.align     && NeoArray.remove(wrapperCls, prefix + 'align-'     + me.align);
+        me.direction && NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
+        me.pack      && NeoArray.remove(wrapperCls, prefix + 'pack-'      + me.pack);
+        me.wrap      && NeoArray.remove(wrapperCls, prefix + 'wrap-'      + me.wrap);
 
         container.wrapperCls = wrapperCls
     }

package/src/tab/Container.mjs

@@ -188,12 +188,14 @@ class Container extends BaseContainer {
 
         NeoArray.remove(cls, 'neo-' + oldValue);
         NeoArray.add(cls, 'neo-' + value);
-        me.cls = cls;
+        me.setSilent({cls});
 
         if (me.rendered) {
-            me.layout = me.getLayoutConfig();
-            me.getTabBar().dock = value;
-            me.getTabStrip().cls = ['neo-tab-strip',  'neo-dock-' + value];
+            me.layout.setSilent(me.getLayoutConfig());
+            me.getTabBar().setSilent({dock: value});
+            me.getTabStrip().setSilent({cls: ['neo-tab-strip',  'neo-dock-' + value]});
+
+            me.updateDepth = 2;
 
             me.fire('tabBarPositionChange', {
                 component: me,
@@ -201,6 +203,8 @@ class Container extends BaseContainer {
                 value
             })
         }
+
+        me.update()
     }
 
     /**
@@ -322,32 +326,30 @@ class Container extends BaseContainer {
      * @protected
      */
     getLayoutConfig() {
-        const layoutMap = {
-            'bottom': {
-                ntype: 'vbox',
-                align: 'stretch',
+        let layoutMap = {
+            bottom: {
+                align    : 'stretch',
                 direction: 'column-reverse',
-                pack: 'start'
+                pack     : 'start'
             },
-            'left': {
-                ntype: 'hbox',
-                align: 'stretch',
+            left: {
+                align    : 'stretch',
                 direction: 'row',
-                pack: 'start'
+                pack     : 'start'
             },
-            'right': {
-                ntype: 'hbox',
-                align: 'stretch',
+            right: {
+                align    : 'stretch',
                 direction: 'row-reverse',
-                pack: 'start'
+                pack     : 'start'
             },
-            'top': {
-                ntype: 'vbox',
-                align: 'stretch'
+            top: {
+                align    : 'stretch',
+                direction: 'column',
+                pack     : 'start'
             }
         };
 
-        return layoutMap[this.tabBarPosition] || null;
+        return layoutMap[this.tabBarPosition] || null
     }
 
     /**
@@ -505,7 +507,7 @@ class Container extends BaseContainer {
      *
      */
     onConstructed() {
-        this.layout = this.getLayoutConfig(); // silent update
+        this.layout = {ntype: 'flexbox', ...this.getLayoutConfig()};
         super.onConstructed()
     }
 

package/src/tab/header/Toolbar.mjs

@@ -96,14 +96,13 @@ class Toolbar extends BaseToolbar {
             case 'bottom':
             case 'top':
                 layoutConfig = {
-                    ntype: 'hbox',
-                    align: 'center',
-                    pack : 'start'
+                    align    : 'center',
+                    direction: 'row',
+                    pack     : 'start'
                 };
                 break
             case 'left':
                 layoutConfig = {
-                    ntype    : 'vbox',
                     align    : 'center',
                     direction: 'column-reverse',
                     pack     : 'end'
@@ -111,7 +110,6 @@ class Toolbar extends BaseToolbar {
                 break
             case 'right':
                 layoutConfig = {
-                    ntype    : 'vbox',
                     align    : 'center',
                     direction: 'column',
                     pack     : 'start'

package/src/toolbar/Base.mjs

@@ -42,12 +42,13 @@ class Toolbar extends Container {
             ntype: 'button'
         },
         /**
-         * @member {Object} layout={ntype: 'hbox', align: 'center', pack : 'start'}
+         * @member {Object} layout={ntype:'flexbox',align:'center',direction: 'row', pack:'start'}
          */
         layout: {
-            ntype: 'hbox',
-            align: 'center',
-            pack : 'start'
+            ntype    : 'flexbox',
+            align    : 'center',
+            direction: 'row',
+            pack     : 'start'
         },
         /**
          * @member {Boolean} sortable_=false
@@ -84,16 +85,26 @@ class Toolbar extends Container {
      * @protected
      */
     afterSetDock(value, oldValue) {
+        if (!value && !oldValue) {
+            return
+        }
+
         let me            = this,
             {cls}         = me,
-            dockPositions = me.getStaticConfig('dockPositions');
+            dockPositions = me.getStaticConfig('dockPositions'),
+            layoutConfig  = me.getLayoutConfig();
 
         dockPositions.forEach(key => {
-            key !== null && NeoArray[key === value ? 'add' : 'remove'](cls, 'neo-dock-' + key)
+            key !== null && NeoArray.toggle(cls, 'neo-dock-' + key, key === value)
         });
 
-        me.cls    = cls;
-        me.layout = me.getLayoutConfig()
+        if (!me.layout) {
+            layoutConfig.ntype = 'flexbox';
+            me.set({cls, layout: layoutConfig})
+        } else {
+            me.layout.set(layoutConfig);
+            me.cls = cls;
+        }
     }
 
     /**
@@ -170,14 +181,13 @@ class Toolbar extends Container {
                 case 'bottom':
                 case 'top':
                     layoutConfig = {
-                        ntype: 'hbox',
-                        align: 'center',
-                        pack : 'start'
+                        align    : 'center',
+                        direction: 'row',
+                        pack     : 'start'
                     };
                     break
                 case 'left':
                     layoutConfig = {
-                        ntype    : 'vbox',
                         align    : 'center',
                         direction: 'column-reverse',
                         pack     : 'start'
@@ -185,7 +195,6 @@ class Toolbar extends Container {
                     break
                 case 'right':
                     layoutConfig = {
-                        ntype    : 'vbox',
                         align    : 'center',
                         direction: 'column',
                         pack     : 'start'

package/src/vdom/Helper.mjs

@@ -281,7 +281,10 @@ class Helper extends Base {
             }
 
             // Same node, continue recursively
-            if (childNode && childNode.id === oldChildNode?.id) {
+            if (childNode && oldChildNode && (
+                childNode.id === oldChildNode.id ||
+                (childNode.componentId && childNode.componentId === oldChildNode.componentId))
+            ) {
                 me.createDeltas({deltas, oldVnode: oldChildNode, oldVnodeMap, vnode: childNode, vnodeMap});
                 continue
             }

package/resources/scss/src/grid/Scrollbar.scss

@@ -1,21 +0,0 @@
-.neo-grid-scrollbar {
-    bottom          : 1px;
-    opacity         : 0;
-    overflow-y      : scroll;
-    position        : absolute;
-    right           : 0;
-    top             : 31px; // header-toolbar height
-    transition      : opacity 1s ease-out;
-    width           : 16px;
-    z-index         : 2;
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
-    .neo-grid-scrollbar {
-        opacity: 1;
-    }
-}