neo.mjs 8.23.0 → 8.24.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

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

@@ -22,10 +22,10 @@ class FeatureSection extends Container {
          */
         className: 'Portal.view.home.FeatureSection',
         /**
-         * @member {String[]} baseCls=['portal-home-feature-section','neo-container']
+         * @member {String[]} baseCls=['portal-home-feature-section','portal-home-content-view','neo-container']
          * @protected
          */
-        baseCls: ['portal-home-feature-section', 'neo-container'],
+        baseCls: ['portal-home-feature-section', 'portal-home-content-view', 'neo-container'],
         /**
          * If you want to use the LivePreview, use the config livePreviewCode.
          * For custom content, use this config instead.
@@ -91,7 +91,7 @@ class FeatureSection extends Container {
             }]
         }, {
             module   : Container,
-            cls      : 'portal-content-wrapper',
+            cls      : ['portal-content-wrapper'],
             layout   : 'fit',
             reference: 'portal-content-wrapper'
         }]
@@ -125,7 +125,7 @@ class FeatureSection extends Container {
             cls      : ['page-live-preview'],
             reference: 'live-preview',
             value    : this.livePreviewCode
-        }]
+        }];
 
         this.getItem('portal-content-wrapper').items = value
     }

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

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

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

@@ -6,8 +6,6 @@ import Helix     from './parts/Helix.mjs';
 import How       from './parts/How.mjs';
 import MainNeo   from './parts/MainNeo.mjs';
 
-// import References from './parts/References.mjs';
-
 /**
  * @class Portal.view.home.MainContainer
  * @extends Neo.container.Base
@@ -28,9 +26,12 @@ class MainContainer extends Container {
          */
         domListeners: [{
             intersect(data) {
-                let id = data.path[1].id;
+                let id = data.path[0].id;
                 this.activePartsId = id;
-                Neo.getComponent(id)?.activate?.()
+
+                this.items.forEach(item => {
+                    item[item.id === id ? 'activate' : 'deactivate']?.()
+                })
             },
             scroll(event) {
                 if (event.target.cls.includes('portal-home-maincontainer')) {
@@ -54,7 +55,6 @@ class MainContainer extends Container {
             Helix,
             Colors,
             How,
-            // References,
             AfterMath
         ],
         /**
@@ -85,9 +85,9 @@ class MainContainer extends Container {
             Neo.main.addon.IntersectionObserver.register({
                 callback : 'isVisible',
                 id,
-                observe  : ['.portal-content-wrapper'],
+                observe  : ['.portal-home-content-view'],
                 root     : `#${id}`,
-                threshold: 1.0,
+                threshold: .6,
                 windowId
             })
         })

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -1,5 +1,6 @@
 import BaseContainer from './BaseContainer.mjs';
 import Button        from '../../../../../src/button/Base.mjs';
+import MagicMoveText from '../../../../../src/component/MagicMoveText.mjs';
 
 /**
  * @class Portal.view.home.parts.MainNeo
@@ -33,10 +34,26 @@ class MainNeo extends BaseContainer {
                 tag : 'h1'
             }]
         }, {
-            cls : ['neo-h2'],
-            flex: 'none',
-            html: 'Modern Enterprise-Ready JavaScript Framework',
-            tag : 'h2'
+            module   : MagicMoveText,
+            autoCycle: false,
+            cls      : ['neo-h2'],
+            colorMove: '#3E63DD',
+            flex     : 'none',
+            reference: 'magic-move',
+
+            cycleTexts: [
+                'Modern Enterprise JavaScript Framework',
+                'An Application Worker being the Orchestrator',
+                'Scalability',
+                'Extensibility',
+                'Performance',
+                'Declarative & Reactive Component Trees',
+                'Separated from Business Logic',
+                'View Controllers',
+                'State Providers',
+                'Clean Architectures',
+                'Multi Window Apps'
+            ]
         }, {
             cls : ['neo-h3'],
             flex: 'none',
@@ -66,6 +83,20 @@ class MainNeo extends BaseContainer {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    activate() {
+        this.getItem('magic-move').autoCycle = true
+    }
+
+    /**
+     *
+     */
+    deactivate() {
+        this.getItem('magic-move').autoCycle = false
+    }
 }
 
 export default Neo.setupClass(MainNeo);

package/examples/ServiceWorker.mjs

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

package/examples/component/magicmovetext/MainContainer.mjs

@@ -74,6 +74,8 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return {
             module: MagicMoveText,
+            height: 100,
+            width : 450,
 
             cycleTexts: [
                 'Magic Move',

package/examples/grid/bigData/GridContainer.mjs

@@ -1,6 +1,8 @@
 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
@@ -33,6 +35,7 @@ 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.23.0",
+    "version": "8.24.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -27,6 +27,24 @@
         min-width       : 240px;
     }
 
+    .neo-magic-move-text {
+        background-color: transparent;
+        color           : #000;
+        font-size       : 2.5rem;
+        height          : 2em;
+        letter-spacing  : -0.02em;
+        line-height     : 1.2em;
+        width           : 90%;
+
+        .neo-content {
+            font-size: 2.5rem;
+        }
+
+        .neo-measure-element-wrapper {
+            letter-spacing: -0.02em;
+        }
+    }
+
     .neo-github {
         background-color: #fff;
     }
@@ -79,6 +97,10 @@
             margin: 1rem 2rem;
         }
 
+        .neo-magic-move-text {
+            height: 3.5em;
+        }
+
         .vector {
             height: 17vw;
         }
@@ -106,6 +128,14 @@
             font-size: 1.15rem;
         }
 
+        .neo-magic-move-text {
+            height: 3.5em;
+
+            .neo-content {
+                font-size: 2rem;
+            }
+        }
+
         .vector {
             height: 70px;
             width : 70px;

package/resources/scss/src/component/MagicMoveText.scss

@@ -1,42 +1,36 @@
 .neo-magic-move-text {
-    --neo-height         : 100px;
     --neo-transition-time: 500ms;
-    --neo-width          : 450px;
 
-    align-items     : center;
     background-color: #000;
     color           : #fff;
-    display         : flex;
     font-size       : 30px;
     font-weight     : bold;
-    height          : var(--neo-height);
-    justify-content : center;
-    width           : var(--neo-width);
 
     .neo-content {
-        height  : 100%;
-        position: relative;
-        width   : 100%;
+        align-items    : center;
+        display        : flex;
+        height         : 100%;
+        justify-content: center;
+        position       : relative;
+        width          : 100%;
 
-        > * {
+        .neo-char {
             position  : absolute;
             transition:
                     color   0.2s ease-out,
                     left    var(--neo-transition-time) ease-out,
-                    opacity var(--neo-transition-time) ease-out;
+                    opacity var(--neo-transition-time) ease-out,
+                    top     var(--neo-transition-time) ease-out;
         }
     }
 
     .neo-measure-element-wrapper {
         align-items    : center;
-        background-color: #000;
         display        : flex;
-        height         : var(--neo-height);
         justify-content: center;
         left           : -5000px;
         position       : absolute;
         top            : -5000px;
-        width          : var(--neo-width);
     }
 
     .neo-measure-element {

package/src/DefaultConfig.mjs

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

package/src/component/MagicMoveText.mjs

@@ -74,25 +74,98 @@ class MagicMoveText extends Component {
 
     /**
      * @member {Object[]} chars=[]
+     * @protected
      */
     chars = []
+    /**
+     * @member {Object[]} charsVdom=[]
+     * @protected
+     */
+    charsVdom = []
+    /**
+     * @member {Number} contentHeight=0
+     * @protected
+     */
+    contentHeight = 0
+    /**
+     * @member {Number} contentWidth=0
+     * @protected
+     */
+    contentWidth = 0
     /**
      * @member {Number} currentIndex=0
+     * @protected
      */
     currentIndex = 0
+    /**
+     * We do not need the first event to trigger logic, since afterSetMounted() handles this
+     * @member {Boolean} initialResizeEvent=true
+     * @protected
+     */
+    initialResizeEvent = true
     /**
      * @member {Number|null} intervalId=null
+     * @protected
      */
     intervalId = null
+    /**
+     * Internal flag which gets set to true while the animated char transitions are running
+     * @member {Boolean} isTransitioning=false
+     * @protected
+     */
+    isTransitioning = false
+    /**
+     * @member {Object} measureCache={}
+     * @protected
+     */
+    measureCache = {}
     /**
      * @member {Object[]} previousChars=[]
+     * @protected
      */
     previousChars = []
     /**
      * @member {Object} measureElement
+     * @protected
      */
     get measureElement() {
-        return this.vdom.cn[1].cn[0]
+        return this.measureWrapper.cn[0]
+    }
+    /**
+     * @member {Object} measureElement
+     * @protected
+     */
+    get measureWrapper() {
+        return this.vdom.cn[1]
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            resize: me.onResize,
+            scope : me
+        })
+    }
+
+    /**
+     * @param {Boolean} mounted
+     * @protected
+     */
+    async addResizeObserver(mounted) {
+        let {id, windowId} = this,
+            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId);
+
+        ResizeObserver[mounted ? 'register' : 'unregister']({id, windowId});
+
+        if (mounted) {
+            this.initialResizeEvent = true
+        }
     }
 
     /**
@@ -127,8 +200,12 @@ class MagicMoveText extends Component {
      * @protected
      */
     afterSetFontFamily(value, oldValue) {
-        this.vdom.style.fontFamily = value;
-        this.update()
+        let me = this;
+
+        me.measureCache = {};
+
+        me.vdom.style.fontFamily = value;
+        me.update()
     }
 
     /**
@@ -139,7 +216,17 @@ class MagicMoveText extends Component {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-        this.autoCycle && this.startAutoCycle(value)
+
+        let me = this;
+
+        value && me.getDomRect().then(rect => {
+            me.contentHeight = rect.height;
+            me.contentWidth  = rect.width;
+
+            me.autoCycle && me.startAutoCycle(value)
+        });
+
+        oldValue !== undefined && me.addResizeObserver(value)
     }
 
     /**
@@ -165,7 +252,7 @@ class MagicMoveText extends Component {
                 me.chars.push({name: char});
 
                 if (char === ' ') {
-                    char = ' '
+                    char = ' '
                 }
 
                 measureElement.cn.push({tag: 'span', html: char})
@@ -190,44 +277,132 @@ class MagicMoveText extends Component {
         this.update()
     }
 
+    /**
+     * @param {String[]} letters
+     * @returns {Object[]}
+     * @protected
+     */
+    createCharsVdom(letters) {
+        let me             = this,
+            {chars}        = me,
+            charsContainer = [],
+            char;
+
+        letters.forEach((letter, index) => {
+            if (letter !== null) {
+                char = chars[index];
+
+                charsContainer.push({
+                    cls  : ['neo-char'],
+                    html : char.name,
+                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top}
+                })
+            }
+        });
+
+        return charsContainer
+    }
+
+    /**
+     * @protected
+     */
+    cycleText() {
+        let me = this;
+
+        me.text         = me.cycleTexts[me.currentIndex];
+        me.currentIndex = (me.currentIndex + 1) % me.cycleTexts.length
+    }
+
     /**
      * @returns {Promise<void>}
+     * @protected
      */
     async measureChars() {
         let me = this,
-            {measureElement} = me,
+            {measureCache, measureElement, measureWrapper, text} = me,
             parentRect, rects;
 
-        delete me.vdom.cn[1].removeDom;
+        if (measureCache[text]) {
+            rects      = [...measureCache[text]];
+            parentRect = rects.shift()
+        } else {
+            measureWrapper.style = {
+                height: me.contentHeight + 'px',
+                width : me.contentWidth  + 'px'
+            };
+
+            delete measureWrapper.removeDom;
 
-        await me.promiseUpdate();
-        await me.timeout(20);
+            await me.promiseUpdate();
+            await me.timeout(20);
 
-        rects      = await me.getDomRect([me.vdom.cn[1].id, ...measureElement.cn.map(node => node.id)]);
-        parentRect = rects.shift();
+            rects      = await me.getDomRect([measureWrapper.id, ...measureElement.cn.map(node => node.id)]);
+            parentRect = rects.shift();
+
+            measureCache[text] = [parentRect, ...rects]
+        }
 
         rects.forEach((rect, index) => {
             me.chars[index].left = `${rect.left - parentRect.left}px`;
             me.chars[index].top  = `${rect.top  - parentRect.top }px`;
         });
 
-        me.vdom.cn[1].removeDom = true;
+        measureWrapper.removeDom = true;
         await me.promiseUpdate()
     }
 
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     * @protected
+     */
+    async onResize({rect}) {
+        let me = this;
+
+        me.contentHeight = rect.height;
+        me.contentWidth  = rect.width;
+
+        me.measureCache = {};
+
+
+        if (!me.initialResizeEvent) {
+            if (!me.isTransitioning) {
+                await me.measureChars();
+
+                me.charsVdom = me.createCharsVdom(me.chars.map(char => char.name))
+            }
+        } else {
+            me.initialResizeEvent = false
+        }
+    }
+
+    /**
+     * @param {Object} a
+     * @param {Object} b
+     * @returns {Number}
+     * @protected
+     */
+    sortCharacters(a, b) {
+        let deltaTop = parseFloat(a.style.top) - parseFloat(b.style.top);
+
+        if (deltaTop !== 0) {
+            return deltaTop
+        }
+
+        return parseFloat(a.style.left) - parseFloat(b.style.left)
+    }
+
     /**
      * @param {Boolean} start=true
+     * @protected
      */
     startAutoCycle(start=true) {
         let me = this;
 
         if (start) {
-            me.intervalId = setInterval(() => {
-                me.text         = me.cycleTexts[me.currentIndex];
-                me.currentIndex = (me.currentIndex + 1) % me.cycleTexts.length
-            }, me.autoCycleInterval)
+            me.intervalId = setInterval(me.cycleText.bind(me), me.autoCycleInterval);
 
-            me.text && me.measureChars()
+            me.timeout(20).then(() => {me.cycleText()});
         } else {
             clearInterval(me.intervalId)
         }
@@ -235,71 +410,84 @@ class MagicMoveText extends Component {
 
     /**
      * @returns {Promise<void>}
+     * @protected
      */
     async updateChars() {
         let me                     = this,
             {chars, previousChars} = me,
-            charsContainer         = me.vdom.cn[0].cn,
+            charsContainer         = me.vdom.cn[0],
             letters                = chars.map(char => char.name),
-            char, charNode, index;
+            charNode, index;
+
+        me.isTransitioning = true;
+
+        if (me.charsVdom.length > 1) {
+            charsContainer.cn = me.charsVdom;
+            await me.promiseUpdate()
+        }
 
         previousChars.forEach((previousChar, previousIndex) => {
             index = letters.indexOf(previousChar.name);
 
             if (index > -1) {
-                charNode = charsContainer[previousIndex];
+                charNode = charsContainer.cn[previousIndex];
+
+                Object.assign(charNode.style, {
+                    color: me.colorMove,
+                    left : chars[index].left,
+                    top  : chars[index].top
+                });
 
-                charNode.style.color = me.colorMove;
-                charNode.style.left  = chars[index].left;
                 letters[index] = null
             } else {
-                charNode = charsContainer[previousIndex];
+                charNode = charsContainer.cn[previousIndex];
 
                 charNode.flag = 'remove'
             }
         });
 
-        letters.forEach((letter, index) => {
-            if (letter !== null) {
-                char = chars[index];
-
-                charsContainer.push({
-                    html : char.name,
-                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top}
-                })
-            }
-        });
+        charsContainer.cn.push(...me.createCharsVdom(letters));
 
         await me.promiseUpdate();
 
-        charsContainer.forEach(charNode => {
+        charsContainer.cn.forEach(charNode => {
             if (charNode.flag === 'remove') {
                 charNode.style.color   = me.colorFadeOut;
                 charNode.style.opacity = 0
             } else {
-                charNode.style.opacity = 1
+                delete charNode.style.opacity
             }
         });
 
         await me.promiseUpdate();
         await me.timeout(me.transitionTime);
 
-        charsContainer.sort((a, b) => parseFloat(a.style.left) - parseFloat(b.style.left));
+        charsContainer.cn.sort(me.sortCharacters);
 
-        index = charsContainer.length - 1;
+        index = charsContainer.cn.length - 1;
 
         for (; index >= 0; index--) {
-            charNode = charsContainer[index];
+            charNode = charsContainer.cn[index];
 
             delete charNode.flag;
             delete charNode.style.color;
 
             if (charNode.style.opacity === 0) {
-                charsContainer.splice(index, 1)
+                charsContainer.cn.splice(index, 1)
             }
         }
 
-        await me.promiseUpdate()
+        await me.promiseUpdate();
+        await me.timeout(200);
+
+        me.charsVdom = [...charsContainer.cn];
+
+        charsContainer.cn.length = 0;
+
+        charsContainer.cn.push({html: me.text});
+        await me.promiseUpdate();
+
+        me.isTransitioning = false
     }
 }
 

package/src/grid/Container.mjs

@@ -197,6 +197,25 @@ class GridContainer extends BaseContainer {
         })
     }
 
+    /**
+     * @param {Boolean} mounted
+     * @protected
+     */
+    async addResizeObserver(mounted) {
+        let me             = this,
+            {windowId}     = me,
+            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId),
+            resizeParams   = {id: me.id, windowId};
+
+        if (mounted) {
+            ResizeObserver.register(resizeParams);
+            await me.passSizeToView()
+        } else {
+            me.initialResizeEvent = true;
+            ResizeObserver.unregister(resizeParams)
+        }
+    }
+
     /**
      * Triggered after the cellEditing config got changed
      * @param {Boolean} value
@@ -245,25 +264,6 @@ class GridContainer extends BaseContainer {
         }
     }
 
-    /**
-     * @param {Boolean} mounted
-     * @protected
-     */
-    async addResizeObserver(mounted) {
-        let me             = this,
-            {windowId}     = me,
-            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId),
-            resizeParams   = {id: me.id, windowId};
-
-        if (mounted) {
-            ResizeObserver.register(resizeParams);
-            await me.passSizeToView()
-        } else {
-            me.initialResizeEvent = true;
-            ResizeObserver.unregister(resizeParams)
-        }
-    }
-
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -537,16 +537,17 @@ class GridContainer extends BaseContainer {
      * @param {Object} data.touches
      */
     onScroll({scrollLeft, target, touches}) {
-        let me = this,
+        let me     = this,
+            {view} = me,
             deltaY, lastTouchY;
 
         // We must ignore events for grid-scrollbar
         if (target.id.includes('grid-container')) {
             me.headerToolbar.scrollLeft = scrollLeft;
-            me.view.scrollPosition = {x: scrollLeft, y: me.view.scrollPosition.y};
+            view.scrollPosition = {x: scrollLeft, y: view.scrollPosition.y};
 
             if (touches) {
-                if (!me.view.isTouchMoveOwner) {
+                if (!view.isTouchMoveOwner) {
                     me.isTouchMoveOwner = true
                 }
 
@@ -556,8 +557,8 @@ class GridContainer extends BaseContainer {
 
                     deltaY !== 0 && Neo.main.DomAccess.scrollTo({
                         direction: 'top',
-                        id       : me.view.vdom.id,
-                        value    : me.view.scrollPosition.y + deltaY
+                        id       : view.vdom.id,
+                        value    : view.scrollPosition.y + deltaY
                     })
 
                     me.lastTouchY = lastTouchY
@@ -657,6 +658,58 @@ class GridContainer extends BaseContainer {
             }
         })
     }
+
+    /**
+     * Used for keyboard navigation (selection models)
+     * @param {Number} index
+     * @param {Number} step
+     */
+    scrollByColumns(index, step) {
+        let me           = this,
+            {view}       = me,
+            {columnPositions, containerWidth, mountedColumns, visibleColumns} = view,
+            countColumns = columnPositions.getCount(),
+            newIndex     = index + step,
+            column, mounted, scrollPosition, visible;
+
+        if (newIndex >= countColumns) {
+            newIndex %= countColumns;
+            step     = newIndex - index
+        }
+
+        while (newIndex < 0) {
+            newIndex += countColumns;
+            step     += countColumns
+        }
+
+        mounted = newIndex >= mountedColumns[0] && newIndex <= mountedColumns[1];
+
+        // Not using >= or <=, since the first / last column might not be fully visible
+        visible = newIndex > visibleColumns[0] && newIndex < visibleColumns[1];
+
+        if (!visible) {
+            // Leaving the mounted area will re-calculate the visibleColumns for us
+            if (mounted) {
+                visibleColumns[0] += step;
+                visibleColumns[1] += step
+            }
+
+            column = columnPositions.getAt(newIndex);
+
+            if (step < 0) {
+                scrollPosition = column.x
+            } else {
+                scrollPosition = column.x - containerWidth + column.width
+            }
+
+            Neo.main.DomAccess.scrollTo({
+                direction: 'left',
+                id       : me.id,
+                value    : scrollPosition,
+                windowId : me.windowId
+            })
+        }
+    }
 }
 
 export default Neo.setupClass(GridContainer);

package/src/grid/View.mjs

@@ -142,9 +142,9 @@ class GridView extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {tabIndex: '-1', cn: [
-            {cn: []}
-        ]}
+            {tabIndex: '-1', cn: [
+                    {cn: []}
+                ]}
     }
 
     /**
@@ -314,7 +314,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetMountedColumns(value, oldValue) {
-        oldValue !== undefined && this.createViewData()
+        oldValue && this.createViewData()
     }
 
     /**
@@ -1036,18 +1036,18 @@ class GridView extends Component {
      */
     updateMountedAndVisibleColumns() {
         let me       = this,
-            {bufferColumnRange, columnPositions, visibleColumns} = me,
-            {x}      = me.scrollPosition,
-            i        = 0,
-            len      = columnPositions.getCount(),
-            endIndex = len - 1,
+            {bufferColumnRange, columnPositions, mountedColumns, visibleColumns} = me,
+            {x}          = me.scrollPosition,
+            i            = 0,
+            countColumns = columnPositions.getCount(),
+            endIndex     = countColumns - 1,
             column, startIndex;
 
-        if (len < 1) {
+        if (countColumns < 1) {
             return
         }
 
-        for (; i < len; i++) {
+        for (; i < countColumns; i++) {
             column = columnPositions.getAt(i);
 
             if (x >= column.x && x <= column.x + column.width) {
@@ -1060,15 +1060,12 @@ class GridView extends Component {
             }
         }
 
-        if (
-            Math.abs(startIndex - me.visibleColumns[0]) >= me.bufferColumnRange ||
-            me.visibleColumns[1] < 1 // initial call
-        ) {
-            visibleColumns[0] = startIndex;
-            visibleColumns[1] = endIndex;
+        visibleColumns[0] = startIndex; // update the array inline
+        visibleColumns[1] = endIndex;
 
-            endIndex   = Math.min(len - 1, visibleColumns[1] + bufferColumnRange);
+        if (visibleColumns[0] <= mountedColumns[0] || visibleColumns[1] >= mountedColumns[1]) {
             startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
+            endIndex   = Math.min(countColumns - 1, visibleColumns[1] + bufferColumnRange);
 
             me.mountedColumns = [startIndex, endIndex]
         }

package/src/grid/header/Toolbar.mjs

@@ -235,10 +235,9 @@ class Toolbar extends BaseToolbar {
 
     /**
      * @param {Number}  index
-     * @param {DOMRect} itemRect
      * @returns {Promise<void>}
      */
-    async scrollToIndex(index, itemRect) {
+    async scrollToIndex(index) {
         await Neo.main.DomAccess.scrollIntoView({
             delay   : 125,
             id      : this.items[index].id,

package/src/selection/grid/CellModel.mjs

@@ -85,7 +85,7 @@ class CellModel extends BaseModel {
         let me                 = this,
             {dataFields, view} = me,
             {store}            = view,
-            currentColumn, newIndex, record;
+            currentColumn, currentIndex, newIndex, record;
 
         if (me.hasSelection()) {
             currentColumn = view.getDataField(me.items[0]);
@@ -95,13 +95,16 @@ class CellModel extends BaseModel {
             record        = store.getAt(0)
         }
 
-        newIndex = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+        currentIndex = dataFields.indexOf(currentColumn);
+        newIndex     = (currentIndex + step) % dataFields.length;
 
         while (newIndex < 0) {
             newIndex += dataFields.length
         }
 
-        me.select(view.getCellId(record, dataFields[newIndex]))
+        me.select(view.getCellId(record, dataFields[newIndex]));
+
+        view.parent.scrollByColumns(currentIndex, step)
     }
 
     /**
@@ -112,10 +115,10 @@ class CellModel extends BaseModel {
             {view}       = me,
             {store}      = view,
             currentIndex = 0,
-            dataField, newIndex, record;
+            dataField, newIndex;
 
         if (me.hasSelection()) {
-            currentIndex = store.indexOf(view.getRecordByCellId(me.items[0]));
+            currentIndex = store.indexOf(view.getRecord(me.items[0]));
             dataField    = view.getDataField(me.items[0])
         } else {
             dataField = me.dataFields[0]
@@ -127,10 +130,7 @@ class CellModel extends BaseModel {
             newIndex += store.getCount()
         }
 
-        record = store.getAt(newIndex);
-
-        me.select(view.getCellId(record, dataField));
-
+        me.select(view.getCellId(store.getAt(newIndex), dataField));
         view.scrollByRows(currentIndex, step)
     }