neo.mjs 8.22.0 → 8.23.0

package/README.md

@@ -21,6 +21,11 @@ without compilations. This makes debugging easier and reduces development costs.
 In case you care about scalability, extensibility or solid architectures, congratulations,
 you have found the right spot.
 
+<p align="center">
+  <a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo33s.png"></a>
+  <a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo-movie.png"></a>
+</p>
+
 ## Content
 1. <a href="#introduction">Introduction</a>
 2. <a href="#use-cases">Potential Use Cases</a>

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-18",
+      "datePublished": "2025-02-21",
       "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.22.0'
+                html  : 'v8.23.0'
             }]
         }],
         /**

package/examples/ConfigurationViewport.mjs

@@ -20,19 +20,19 @@ const themes = [
 class ConfigurationViewport extends Viewport {
     static config = {
         /**
-         * @member {String} className='Neo.examples.ConfigurationContainer'
+         * @member {String} className='Neo.examples.ConfigurationViewport'
          * @protected
          */
-        className: 'Neo.examples.ConfigurationContainer',
+        className: 'Neo.examples.ConfigurationViewport',
         /**
          * @member {String} ntype='configuration-viewport'
          * @protected
          */
         ntype: 'configuration-viewport',
         /**
-         * @member {Object} layout={ntype:'hbox', align:'stretch'}
+         * @member {String[]} baseCls=['neo-examples-configuration-viewport','neo-viewport']
          */
-        layout: {ntype: 'hbox', align: 'stretch'},
+        baseCls: ['neo-examples-configuration-viewport', 'neo-viewport'],
         /**
          * @member {Number} configItemLabelWidth=150
          */
@@ -45,6 +45,10 @@ class ConfigurationViewport extends Viewport {
          * @member {Number} configPanelFlex=1
          */
         configPanelFlex: 1,
+        /**
+         * @member {Number} configPanelMaxWidth=null
+         */
+        configPanelMaxWidth: null,
         /**
          * @member {Number} configPanelMinWidth=350
          */
@@ -56,7 +60,11 @@ class ConfigurationViewport extends Viewport {
         /**
          * @member {Number} exampleComponentFlex=1
          */
-        exampleComponentFlex: 2
+        exampleComponentFlex: 2,
+        /**
+         * @member {Object} layout={ntype:'hbox', align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'}
     }
 
     /**
@@ -114,6 +122,7 @@ class ConfigurationViewport extends Viewport {
 
         me.items = [{
             module: Container,
+            cls   : ['neo-example-container'],
             items : [me.exampleComponent],
             flex  : me.exampleComponentFlex,
             layout: 'base',
@@ -123,11 +132,16 @@ class ConfigurationViewport extends Viewport {
             module: Panel,
             cls   : ['neo-panel', 'neo-container', 'neo-configuration-panel'],
             flex  : me.configPanelFlex,
-            style : {margin: '20px', minWidth: me.configPanelMinWidth},
+
+            style: {
+                maxWidth: me.configPanelMaxWidth + 'px',
+                margin  : '20px',
+                minWidth: me.configPanelMinWidth + 'px'
+            },
 
             headers: [{
+                cls  : ['neo-configuration-header-toolbar'],
                 dock : 'top',
-                style: {borderLeft:0, borderRight:0, borderTop:0},
                 items: [{
                     ntype: 'label',
                     text : 'Configuration'
@@ -145,7 +159,6 @@ class ConfigurationViewport extends Viewport {
             items: [{
                 module: Container,
                 layout: {ntype: 'vbox', align: null},
-                style : {overflowY: 'auto', padding: '10px'},
                 cls   : ['neo-configuration-panel-body'],
                 itemDefaults: {
                     clearToOriginalValue: true,

package/examples/ServiceWorker.mjs

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

package/examples/component/magicmovetext/MainContainer.mjs

@@ -0,0 +1,90 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import MagicMoveText         from '../../../src/component/MagicMoveText.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.component.magicmovetext.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.component.magicmovetext.MainContainer',
+        configItemLabelWidth: 150,
+        configItemWidth     : 250,
+        configPanelMaxWidth : 300,
+        configPanelMinWidth : 300,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me                 = this,
+            {exampleComponent} = me;
+
+        return [{
+            module   : CheckBox,
+            checked  : exampleComponent.autoCycle,
+            labelText: 'autoCycle',
+            listeners: {change: me.onConfigChange.bind(me, 'autoCycle')}
+        }, {
+            module   : NumberField,
+            clearable: false,
+            labelText: 'autoCycleInterval',
+            listeners: {change: me.onConfigChange.bind(me, 'autoCycleInterval')},
+            maxValue : 10000,
+            minValue : 0,
+            stepSize : 1000,
+            style    : {marginTop: '10px'},
+            value    : exampleComponent.autoCycleInterval
+        }, {
+            module   : TextField,
+            labelText: 'colorFadeIn',
+            listeners: {change: me.onConfigChange.bind(me, 'colorFadeIn')},
+            value    : exampleComponent.colorFadeIn
+        }, {
+            module   : TextField,
+            labelText: 'colorFadeOut',
+            listeners: {change: me.onConfigChange.bind(me, 'colorFadeOut')},
+            value    : exampleComponent.colorFadeOut
+        }, {
+            module   : TextField,
+            labelText: 'colorMove',
+            listeners: {change: me.onConfigChange.bind(me, 'colorMove')},
+            value    : exampleComponent.colorMove
+        }, {
+            module   : TextField,
+            clearable: false,
+            labelText: 'fontFamily',
+            listeners: {change: me.onConfigChange.bind(me, 'fontFamily')},
+            value    : exampleComponent.fontFamily,
+            width    : 280
+        }, {
+            module   : NumberField,
+            clearable: false,
+            labelText: 'transitionTime',
+            listeners: {change: me.onConfigChange.bind(me, 'transitionTime')},
+            maxValue : 900,
+            minValue : 50,
+            stepSize : 50,
+            value    : exampleComponent.transitionTime
+        }]
+    }
+
+    createExampleComponent() {
+        return {
+            module: MagicMoveText,
+
+            cycleTexts: [
+                'Magic Move',
+                'Move characters like magic',
+                'Animate between strings',
+                'Just like that',
+                'Simple to use',
+                'Would you use it?'
+            ]
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/component/magicmovetext/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.component.magicmovetext'
+});

package/examples/component/magicmovetext/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Magic Move - Text</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/magicmovetext/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/component/magicmovetext/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.22.0",
+    "version": "8.23.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -61,7 +61,7 @@
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.5.2",
+        "postcss": "^8.5.3",
         "sass": "^1.85.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

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

@@ -0,0 +1,45 @@
+.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%;
+
+        > * {
+            position  : absolute;
+            transition:
+                    color   0.2s ease-out,
+                    left    var(--neo-transition-time) ease-out,
+                    opacity 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 {
+        position: relative;
+    }
+}

package/resources/scss/src/examples/ConfigurationViewport.scss

@@ -0,0 +1,27 @@
+.neo-examples-configuration-viewport {
+    transition: width .5s ease-in-out;
+
+    @media (max-width: 450px) {
+        overflow-y: auto;
+
+        .neo-example-container {
+            flex: none !important;
+        }
+
+        &.neo-flex-container {
+            &.neo-flex-direction-row {
+                flex-direction: column;
+            }
+        }
+    }
+
+    .neo-configuration-header-toolbar {
+        border       : 0;
+        border-bottom: 1px solid var(--panel-border-color);
+    }
+
+    .neo-configuration-panel-body {
+        overflow-y: auto;
+        padding   : 10px;
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/component/MagicMoveText.mjs

@@ -0,0 +1,306 @@
+import Component from '../component/Base.mjs';
+
+/**
+ * Deeply inspired by https://github.com/yangshun 's video on LinkedIn
+ * as well as Apple's Keynote Magic Move effect
+ * @class Neo.component.MagicMoveText
+ * @extends Neo.component.Base
+ */
+class MagicMoveText extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.component.MagicMoveText'
+         * @protected
+         */
+        className: 'Neo.component.MagicMoveText',
+        /**
+         * @member {String} ntype='magic-move-text'
+         * @protected
+         */
+        ntype: 'magic-move-text',
+        /**
+         * @member {Boolean} autoCycle_=true
+         */
+        autoCycle_: true,
+        /**
+         * @member {Number} autoCycleInterval_=2000
+         */
+        autoCycleInterval_: 2000,
+        /**
+         * @member {String[]} baseCls=['neo-magic-move-text']
+         * @protected
+         */
+        baseCls: ['neo-magic-move-text'],
+        /**
+         * @member {String|null} colorMove=null
+         */
+        colorMove: null,
+        /**
+         * @member {String|null} colorFadeIn=null
+         */
+        colorFadeIn: null,
+        /**
+         * @member {String|null} colorFadeOut=null
+         */
+        colorFadeOut: null,
+        /**
+         * @member {String[]|null} cycleTexts=null
+         */
+        cycleTexts: null,
+        /**
+         * @member {String} fontFamily_='Helvetica Neue'
+         */
+        fontFamily_: 'Helvetica Neue',
+        /**
+         * @member {String} text_=null
+         */
+        text_: null,
+        /**
+         * Time in ms for the fadeIn, fadeOut and move character OPs
+         * @member {Number} transitionTime_=500
+         */
+        transitionTime_: 500,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {style: {}, cn: [
+            {cls: ['neo-content'], cn: []},
+            {cls: ['neo-measure-element-wrapper'], removeDom: true, cn: [
+                {cls: ['neo-measure-element'], cn:[]}
+            ]}
+        ]}
+    }
+
+    /**
+     * @member {Object[]} chars=[]
+     */
+    chars = []
+    /**
+     * @member {Number} currentIndex=0
+     */
+    currentIndex = 0
+    /**
+     * @member {Number|null} intervalId=null
+     */
+    intervalId = null
+    /**
+     * @member {Object[]} previousChars=[]
+     */
+    previousChars = []
+    /**
+     * @member {Object} measureElement
+     */
+    get measureElement() {
+        return this.vdom.cn[1].cn[0]
+    }
+
+    /**
+     * Triggered after the autoCycle config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetAutoCycle(value, oldValue) {
+        this.mounted && this.startAutoCycle(value)
+    }
+
+    /**
+     * Triggered after the autoCycleInterval config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAutoCycleInterval(value, oldValue) {
+        let me = this;
+
+        if (oldValue && me.mounted) {
+            me.startAutoCycle(false);
+            me.startAutoCycle()
+        }
+    }
+
+    /**
+     * Triggered after the fontFamily config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetFontFamily(value, oldValue) {
+        this.vdom.style.fontFamily = value;
+        this.update()
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        this.autoCycle && this.startAutoCycle(value)
+    }
+
+    /**
+     * Triggered after the text config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {Promise<void>}
+     * @protected
+     */
+    async afterSetText(value, oldValue) {
+        let me               = this,
+            {measureElement} = me;
+
+        if (oldValue) {
+            me.previousChars = me.chars
+        }
+
+        if (value) {
+            me.chars = [];
+            measureElement.cn = [];
+
+            value?.split('').forEach(char => {
+                me.chars.push({name: char});
+
+                if (char === ' ') {
+                    char = '&nbsp;'
+                }
+
+                measureElement.cn.push({tag: 'span', html: char})
+            });
+
+            if (me.mounted) {
+                await me.measureChars()
+            }
+
+            await me.updateChars()
+        }
+    }
+
+    /**
+     * Triggered after the transitionTime config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetTransitionTime(value, oldValue) {
+        this.vdom.style['--neo-transition-time'] = value + 'ms';
+        this.update()
+    }
+
+    /**
+     * @returns {Promise<void>}
+     */
+    async measureChars() {
+        let me = this,
+            {measureElement} = me,
+            parentRect, rects;
+
+        delete me.vdom.cn[1].removeDom;
+
+        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.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;
+        await me.promiseUpdate()
+    }
+
+    /**
+     * @param {Boolean} start=true
+     */
+    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.text && me.measureChars()
+        } else {
+            clearInterval(me.intervalId)
+        }
+    }
+
+    /**
+     * @returns {Promise<void>}
+     */
+    async updateChars() {
+        let me                     = this,
+            {chars, previousChars} = me,
+            charsContainer         = me.vdom.cn[0].cn,
+            letters                = chars.map(char => char.name),
+            char, charNode, index;
+
+        previousChars.forEach((previousChar, previousIndex) => {
+            index = letters.indexOf(previousChar.name);
+
+            if (index > -1) {
+                charNode = charsContainer[previousIndex];
+
+                charNode.style.color = me.colorMove;
+                charNode.style.left  = chars[index].left;
+                letters[index] = null
+            } else {
+                charNode = charsContainer[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}
+                })
+            }
+        });
+
+        await me.promiseUpdate();
+
+        charsContainer.forEach(charNode => {
+            if (charNode.flag === 'remove') {
+                charNode.style.color   = me.colorFadeOut;
+                charNode.style.opacity = 0
+            } else {
+                charNode.style.opacity = 1
+            }
+        });
+
+        await me.promiseUpdate();
+        await me.timeout(me.transitionTime);
+
+        charsContainer.sort((a, b) => parseFloat(a.style.left) - parseFloat(b.style.left));
+
+        index = charsContainer.length - 1;
+
+        for (; index >= 0; index--) {
+            charNode = charsContainer[index];
+
+            delete charNode.flag;
+            delete charNode.style.color;
+
+            if (charNode.style.opacity === 0) {
+                charsContainer.splice(index, 1)
+            }
+        }
+
+        await me.promiseUpdate()
+    }
+}
+
+export default Neo.setupClass(MagicMoveText);

package/src/data/Store.mjs

@@ -330,6 +330,18 @@ class Store extends Base {
         return this.keyProperty || this.model.keyProperty
     }
 
+    /**
+     * Convenience shortcut to check for int based keyProperties
+     * @returns {String|null} lowercase value of the model field type
+     */
+    getKeyType() {
+        let me       = this,
+            {model}  = me,
+            keyField = model?.getField(me.getKeyProperty());
+
+        return keyField?.type?.toLowerCase() || null
+    }
+
     /**
      * @param {Object} opts={}
      * @param {Object} opts.data

package/src/grid/Container.mjs

@@ -522,7 +522,7 @@ class GridContainer extends BaseContainer {
         if (!me.initialResizeEvent) {
             await me.passSizeToView(true);
 
-            me.view.updateVisibleColumns();
+            me.view.updateMountedAndVisibleColumns();
 
             await me.headerToolbar.passSizeToView()
         } else {

package/src/grid/View.mjs

@@ -81,6 +81,12 @@ class GridView extends Component {
          * @member {Object} keys
          */
         keys: {},
+        /**
+         * Stores the indexes of the first & last mounted columns, including bufferColumnRange
+         * @member {Number[]} mountedColumns_=[0,0]
+         * @protected
+         */
+        mountedColumns_: [0, 0],
         /**
          * Stores the indexes of the first & last mounted rows, including bufferRowRange
          * @member {Number[]} mountedRows=[0,0]
@@ -118,10 +124,10 @@ class GridView extends Component {
         store_: null,
         /**
          * Stores the indexes of the first & last painted columns
-         * @member {Number[]} visibleColumns_=[0,0]
+         * @member {Number[]} visibleColumns=[0,0]
          * @protected
          */
-        visibleColumns_: [0, 0],
+        visibleColumns: [0, 0],
         /**
          * Stores the indexes of the first & last visible rows, excluding bufferRowRange
          * @member {Number[]} visibleRows=[0,0]
@@ -229,9 +235,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetAvailableRows(value, oldValue) {
-        if (value > 0) {
-            this.createViewData()
-        }
+        value > 0 && this.createViewData()
     }
 
     /**
@@ -277,9 +281,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetContainerWidth(value, oldValue) {
-        if (value > 0) {
-            this.updateVisibleColumns()
-        }
+        value > 0 && this.updateMountedAndVisibleColumns()
     }
 
     /**
@@ -305,6 +307,16 @@ class GridView extends Component {
         this.toggleCls('neo-is-scrolling', value)
     }
 
+    /**
+     * Triggered after the mountedColumns config got changed
+     * @param {Number[]} value
+     * @param {Number[]} oldValue
+     * @protected
+     */
+    afterSetMountedColumns(value, oldValue) {
+        oldValue !== undefined && this.createViewData()
+    }
+
     /**
      * Triggered after the rowHeight config got changed
      * @param {Number} value
@@ -327,7 +339,7 @@ class GridView extends Component {
             newStartIndex;
 
         if (value.x !== oldValue?.x) {
-            me.updateVisibleColumns()
+            me.updateMountedAndVisibleColumns()
         }
 
         if (value.y !== oldValue?.y) {
@@ -362,18 +374,6 @@ class GridView extends Component {
         oldValue !== undefined && this.createViewData()
     }
 
-    /**
-     * Triggered after the visibleColumns config got changed
-     * @param {Number[]} value
-     * @param {Number[]} oldValue
-     * @protected
-     */
-    afterSetVisibleColumns(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.createViewData()
-        }
-    }
-
     /**
      * @param {Object} data
      * @param {String} [data.cellId]
@@ -516,12 +516,12 @@ class GridView extends Component {
         }
 
         let me            = this,
-            {bufferColumnRange, selectedRows, visibleColumns} = me,
+            {mountedColumns, selectedRows} = me,
             gridContainer = me.parent,
             columns       = gridContainer.headerToolbar.items,
             id            = me.getRowId(record, rowIndex),
             rowCls        = me.getRowClass(record, rowIndex),
-            config, column, columnPosition, endIndex, gridRow, i, startIndex;
+            config, column, columnPosition,  gridRow, i;
 
         if (rowIndex % 2 !== 0) {
             rowCls.push('neo-even')
@@ -549,10 +549,7 @@ class GridView extends Component {
             }
         };
 
-        endIndex   = Math.min(columns.length - 1, visibleColumns[1] + bufferColumnRange);
-        startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
-
-        for (i=startIndex; i <= endIndex; i++) {
+        for (i=mountedColumns[0]; i <= mountedColumns[1]; i++) {
             column = columns[i];
             config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex});
 
@@ -593,7 +590,7 @@ class GridView extends Component {
             me.availableRows              < 1 ||
             me._containerWidth            < 1 || // we are not checking me.containerWidth, since we want to ignore the config symbol
             me.columnPositions.getCount() < 1 ||
-            me.visibleColumns[1]          < 1
+            me.mountedColumns[1]          < 1
         ) {
             return
         }
@@ -729,6 +726,7 @@ class GridView extends Component {
 
     /**
      * Get the matching record by passing a row id, a cell id or an id inside a grid cell.
+     * Limited to mounted rows (must be inside the vdom).
      * @param {String} nodeId
      * @returns {Object|null}
      */
@@ -743,7 +741,7 @@ class GridView extends Component {
 
         parentNodes = VDomUtil.getParentNodes(me.vdom, nodeId);
 
-        for (node of parentNodes) {
+        for (node of parentNodes || []) {
             record = me.getRecordByRowId(node.id);
 
             if (record) {
@@ -754,6 +752,22 @@ class GridView extends Component {
         return null
     }
 
+    /**
+     * @param {String} cellId
+     * @returns {Record}
+     */
+    getRecordByCellId(cellId) {
+        let recordId = cellId.split('__')[1],
+            {store}  = this,
+            keyType  = store.getKeyType();
+
+        if (keyType === 'int' || keyType === 'integer') {
+            recordId = parseInt(recordId)
+        }
+
+        return store.get(recordId)
+    }
+
     /**
      * @param {String} rowId
      * @returns {Record}
@@ -761,9 +775,7 @@ class GridView extends Component {
     getRecordByRowId(rowId) {
         let recordId = rowId.split('__')[2],
             {store}  = this,
-            {model}  = store,
-            keyField = model?.getField(store.getKeyProperty()),
-            keyType  = keyField?.type?.toLowerCase();
+            keyType  = store.getKeyType();
 
         if (keyType === 'int' || keyType === 'integer') {
             recordId = parseInt(recordId)
@@ -1020,16 +1032,45 @@ class GridView extends Component {
     }
 
     /**
-     * @param {Boolean} silent=false
+     *
      */
-    updateScrollHeight(silent=false) {
-        let me           = this,
-            countRecords = me.store.getCount(),
-            {rowHeight}  = me;
+    updateMountedAndVisibleColumns() {
+        let me       = this,
+            {bufferColumnRange, columnPositions, visibleColumns} = me,
+            {x}      = me.scrollPosition,
+            i        = 0,
+            len      = columnPositions.getCount(),
+            endIndex = len - 1,
+            column, startIndex;
 
-        if (countRecords > 0 && rowHeight > 0) {
-            me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
-            !silent && me.update()
+        if (len < 1) {
+            return
+        }
+
+        for (; i < len; i++) {
+            column = columnPositions.getAt(i);
+
+            if (x >= column.x && x <= column.x + column.width) {
+                startIndex = i
+            }
+
+            if (me.containerWidth + x < column.x) {
+                endIndex = i - 1;
+                break
+            }
+        }
+
+        if (
+            Math.abs(startIndex - me.visibleColumns[0]) >= me.bufferColumnRange ||
+            me.visibleColumns[1] < 1 // initial call
+        ) {
+            visibleColumns[0] = startIndex;
+            visibleColumns[1] = endIndex;
+
+            endIndex   = Math.min(len - 1, visibleColumns[1] + bufferColumnRange);
+            startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
+
+            me.mountedColumns = [startIndex, endIndex]
         }
     }
 
@@ -1053,39 +1094,16 @@ class GridView extends Component {
     }
 
     /**
-     *
+     * @param {Boolean} silent=false
      */
-    updateVisibleColumns() {
-        let me                = this,
-            {columnPositions} = me,
-            {x}               = me.scrollPosition,
-            i                 = 0,
-            len               = columnPositions.getCount(),
-            endIndex          = len - 1,
-            column, startIndex;
-
-        if (len < 1) {
-            return
-        }
-
-        for (; i < len; i++) {
-            column = columnPositions.getAt(i);
-
-            if (x >= column.x && x <= column.x + column.width) {
-                startIndex = i
-            }
-
-            if (me.containerWidth + x < column.x) {
-                endIndex = i - 1;
-                break
-            }
-        }
+    updateScrollHeight(silent=false) {
+        let me           = this,
+            countRecords = me.store.getCount(),
+            {rowHeight}  = me;
 
-        if (
-            Math.abs(startIndex - me.visibleColumns[0]) >= me.bufferColumnRange ||
-            me.visibleColumns[1] < 1 // initial call
-        ) {
-            me.visibleColumns = [startIndex, endIndex]
+        if (countRecords > 0 && rowHeight > 0) {
+            me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
+            !silent && me.update()
         }
     }
 }

package/src/grid/header/Toolbar.mjs

@@ -229,7 +229,7 @@ class Toolbar extends BaseToolbar {
                 availableWidth: lastItem.x + lastItem.width - rects[0].x
             });
 
-            !silent && view.updateVisibleColumns()
+            !silent && view.updateMountedAndVisibleColumns()
         }
     }
 

package/src/selection/grid/CellModel.mjs

@@ -112,10 +112,10 @@ class CellModel extends BaseModel {
             {view}       = me,
             {store}      = view,
             currentIndex = 0,
-            dataField, newIndex;
+            dataField, newIndex, record;
 
         if (me.hasSelection()) {
-            currentIndex = store.indexOf(view.getRecord(me.items[0]));
+            currentIndex = store.indexOf(view.getRecordByCellId(me.items[0]));
             dataField    = view.getDataField(me.items[0])
         } else {
             dataField = me.dataFields[0]
@@ -127,7 +127,11 @@ class CellModel extends BaseModel {
             newIndex += store.getCount()
         }
 
-        me.select(view.getCellId(store.getAt(newIndex), dataField))
+        record = store.getAt(newIndex);
+
+        me.select(view.getCellId(record, dataField));
+
+        view.scrollByRows(currentIndex, step)
     }
 
     /**

package/src/selection/grid/RowModel.mjs

@@ -94,9 +94,9 @@ class RowModel extends BaseModel {
             rowId = view.getRowId(record);
 
             if (rowId) {
-                view.scrollByRows(currentIndex, step);
-
                 me.select(rowId);
+
+                view.scrollByRows(currentIndex, step);
                 view.fire('select', {record})
             }
         }

package/resources/scss/src/examples/ConfigurationPanel.scss

@@ -1,25 +0,0 @@
-.neo-configuration-panel {
-    transition: width .5s ease-in-out;
-
-    .neo-details-label {
-        background-color: #323232;
-        color           : #ddd;
-        font-size       : 13px;
-        margin          : 10px;
-        padding         : 10px;
-        white-space     : normal;
-    }
-
-    .neo-toolbar {
-        border       : 0;
-        border-bottom: 1px solid var(--panel-border-color);
-    }
-}
-
-.neo-configuration-panel-body {
-    overflow-y: scroll;
-}
-
-.neo-examples-tab-component {
-    background-color: var(--examples-tab-component-background-color);
-}