neo.mjs 6.12.0 → 6.12.1

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.12.0",
+    "version": "6.12.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -62,7 +62,7 @@
         "url": "^0.11.3",
         "webpack": "^5.90.1",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "4.15.1",
+        "webpack-dev-server": "5.0.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/src/DefaultConfig.mjs

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

package/src/form/field/Select.mjs

@@ -32,6 +32,10 @@ class Select extends Picker {
          * @protected
          */
         ntype: 'selectfield',
+        /**
+         * @member {String|Number|null} activeRecordId=null
+         */
+        activeRecordId: null,
         /**
          * @member {String[]} baseCls=['neo-selectfield','neo-pickerfield','neo-textfield']
          */
@@ -40,6 +44,12 @@ class Select extends Picker {
          * @member {String} displayField='name'
          */
         displayField: 'name',
+        /**
+         * The millisecond time to delay between input field mutation and applying the input field's
+         * new value to the filter
+         * @member {Number} filterDelay=300
+         */
+        filterDelay : 300,
         /**
          * @member {String} filterOperator_='like'
          */
@@ -50,10 +60,6 @@ class Select extends Picker {
          * @member {Boolean} forceSelection=false
          */
         forceSelection: false,
-        /**
-         * @member {String|Number|null} activeRecordId=null
-         */
-        activeRecordId: null,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -116,13 +122,7 @@ class Select extends Picker {
          * which you want to submit instead
          * @member {Number|String} valueField='id'
          */
-        valueField: 'id',
-        /**
-         * The millisecond time to delay between input field mutation and applying the input field's
-         * new value to the filter
-         * @member {Number} filterDelay=300
-         */
-        filterDelay : 300
+        valueField: 'id'
     }
 
     /**
@@ -143,7 +143,7 @@ class Select extends Picker {
      * @param {Object} oldValue
      * @protected
      */
-    afterSetRecord(value) {
+    afterSetRecord(value, oldValue) {
         if (this._picker?.isVisible) {
             let me             = this,
                 selectionModel = me.list?.selectionModel;
@@ -252,7 +252,7 @@ class Select extends Picker {
             }
         }
 
-        return ClassSystemUtil.beforeSetInstance(value, Store);
+        return ClassSystemUtil.beforeSetInstance(value, Store)
     }
 
     /**
@@ -305,16 +305,15 @@ class Select extends Picker {
             module          : List,
             appName         : me.appName,
             displayField    : me.displayField,
-            role            : 'listbox',
             itemRole        : 'option',
+            navigator       : {eventSource : me.getInputElId()},
             parentId        : me.id,
-            navigator       : {
-                eventSource : me.getInputElId()
-            },
+            role            : 'listbox',
             selectionModel  : {stayInList: false},
             store           : me.store,
             ...me.listConfig
         });
+
         me.getInputEl()['aria-controls'] = me.list.id;
 
         me.list.addDomListeners({
@@ -323,15 +322,76 @@ class Select extends Picker {
                 scope : me
             }
         });
+
         me.list.selectionModel.on({
-            selectionChange : me.onListItemSelectionChange,
             noChange        : me.onListItemSelectionNoChange,
+            selectionChange : me.onListItemSelectionChange,
             scope           : me
         })
 
         return me.list;
     }
 
+    /**
+     * All routes which expect to open the picker route through here. This updates the
+     * filter and ensures that the picker is visible and reflecting the state of the filter.
+     *
+     * Input event processing passes the current input field value in as the filter value.
+     *
+     * Invocation of the expand trigger passes `null` so as to clear filtering.
+     * @private
+     * @param {String|null} value The value to filter the picker by
+     */
+    doFilter(value) {
+        let me     = this,
+            filter = me.store.getFilter(me.displayField),
+            {
+                record,
+                picker
+            }      = me;
+
+        if (filter) {
+            filter.value = value;
+        }
+
+        // Filter resulting in something to show
+        if (me.store.getCount()) {
+            me.getPicker().hidden = false;
+
+            // List might not exist until the picker is created
+            const
+                { list }           = me,
+                { selectionModel } = list;
+
+            // On show, set the active item to be the current selected record or the first
+            if (record) {
+                // We do not want to hear back about our own selection
+                selectionModel.suspendEvents = true;
+                selectionModel.select(record);
+                selectionModel.suspendEvents = false;
+            }
+            setTimeout(() => {
+                list.activeIndex = me.record || 0;
+            }, 100)
+        }
+        // Filtered down to nothing - hide picker if it has been created.
+        else if (picker) {
+            picker._hidden = true;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    filterOnInput(data) {
+        if (data.value) {
+            this.doFilter(data.value);
+        }
+        else if (this.picker) {
+            this.picker?.hide();
+        }
+    }
+
     /**
      * Overrides form.field.Base
      * @param {*} value
@@ -383,7 +443,7 @@ class Select extends Picker {
 
     /**
      * Returns the first selected record or null
-     * returns {Object}
+     * @returns {Object}
      */
     getRecord() {
         let list      = this.list,
@@ -401,13 +461,17 @@ class Select extends Picker {
         return me.record?.[me.valueField] || me.value
     }
 
+    /**
+     *
+     */
     onConstructed() {
         const inputEl = this.getInputEl();
 
-        inputEl['aria-expanded'] = false
-        inputEl['aria-haspopup'] = 'listbox'
-        inputEl['aria-activedescendant'] = ''
-        super.onConstructed(...arguments);
+        inputEl['aria-activedescendant'] = '';
+        inputEl['aria-expanded']         = false;
+        inputEl['aria-haspopup']         = 'listbox';
+
+        super.onConstructed(...arguments)
     }
 
     /**
@@ -439,15 +503,6 @@ class Select extends Picker {
         super.onFocusLeave(data)
     }
 
-    filterOnInput(data) {
-        if (data.value) {
-            this.doFilter(data.value);
-        }
-        else if (this.picker) {
-            this.picker?.hide();
-        }
-    }
-
     /**
      * @param {Object} data
      * @protected
@@ -469,17 +524,6 @@ class Select extends Picker {
         }
     }
 
-    onPickerHiddenChange({ value }) {
-        const inputEl = this.getInputEl();
-
-        super.onPickerHiddenChange(...arguments);
-        if (value) {
-            inputEl['aria-activedescendant'] = '';
-        }
-        inputEl['aria-expanded'] = !value;
-        this.update();
-    }
-
     // TODO:
     // When we are using a `Collection` as our `valueCollection`, and that `Collection` is the
     // `items` of the List's `selectionModel`, then this will be `onValueCollectionChange`,
@@ -541,6 +585,34 @@ class Select extends Picker {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onPickerHiddenChange({ value }) {
+        const inputEl = this.getInputEl();
+
+        super.onPickerHiddenChange(...arguments);
+        if (value) {
+            inputEl['aria-activedescendant'] = '';
+        }
+        inputEl['aria-expanded'] = !value;
+        this.update();
+    }
+
+    /**
+     *
+     */
+    onPickerTriggerClick() {
+        let me = this;
+
+        if (me.picker?.isVisible) {
+            me.picker.hidden = true;
+        }
+        else if (!me.readOnly && !me.disabled) {
+            me.doFilter(null)
+        }
+    }
+
     /**
      * Selecting a record, if required
      * @param {Object[]} items
@@ -587,65 +659,6 @@ class Select extends Picker {
         me.list.selectItem(index);
     }
 
-    onPickerTriggerClick() {
-        let me = this;
-
-        if (me.picker?.isVisible) {
-            me.picker.hidden = true;
-        }
-        else if (!me.readOnly && !me.disabled) {
-            me.doFilter(null)
-        }
-    }
-
-    /**
-     * All routes which expect to open the picker route through here. This updates the
-     * filter and ensures that the picker is visible and reflecting the state of the filter.
-     *
-     * Input event processing passes the current input field value in as the filter value.
-     *
-     * Invocation of the expand trigger passes `null` so as to clear filtering.
-     * @private
-     * @param {String}null} value The value to filter the picker by
-     */
-    doFilter(value) {
-        let me     = this,
-            filter = me.store.getFilter(me.displayField),
-            {
-                record,
-                picker
-            }      = me;
-
-        if (filter) {
-            filter.value = value;
-        }
-
-        // Filter resulting in something to show
-        if (me.store.getCount()) {
-            me.getPicker().hidden = false;
-
-            // List might not exist until the picker is created
-            const
-                { list }           = me,
-                { selectionModel } = list;
-
-            // On show, set the active item to be the current selected record or the first
-            if (record) {
-                // We do not want to hear back about our own selection
-                selectionModel.suspendEvents = true;
-                selectionModel.select(record);
-                selectionModel.suspendEvents = false;
-            }
-            setTimeout(() => {
-                list.activeIndex = me.record || 0;
-            }, 100)
-        }
-        // Filtered down to nothing - hide picker if it has been created.
-        else if (picker) {
-            picker._hidden = true;
-        }
-    }
-
     /**
      * @param {Boolean} [silent=false]
      * @protected

package/src/list/Base.mjs

@@ -21,6 +21,7 @@ class Base extends Component {
          */
         ntype: 'list',
         /**
+         * Keeps track of the selected item index and allows bindings and programmatic changes
          * @member {Number|null} activeIndex_=null
          */
         activeIndex_: null,
@@ -63,6 +64,12 @@ class Base extends Component {
          * @member {Object} dragZoneConfig=null
          */
         dragZoneConfig: null,
+        /**
+         * Keeps track of the focussed item index and allows bindings and programmatic changes.
+         * You can either pass the index or the related record
+         * @member {Number|Object|null} focusIndex_=null
+         */
+        focusIndex_: null,
         /**
          * In case we are using list item headers and want to bind list item indexes to e.g. a card layout
          * for e.g. a sidenav, this config comes in handy.
@@ -178,15 +185,16 @@ class Base extends Component {
      * @param {Number|null} oldValue
      * @protected
      */
-    afterSetActiveIndex(value) {
-        let me = this;
+    afterSetActiveIndex(value, oldValue) {
+        let me             = this,
+            selectionModel = me.selectionModel;
 
         if (Neo.isNumber(value)) {
+            selectionModel?.selectAt(value);
             me.headerlessActiveIndex = me.getHeaderlessIndex(value)
-            Neo.main.addon.Navigator.navigateTo([value, this.navigator])
-        }
-        else if (value) {
-            Neo.main.addon.Navigator.navigateTo([me.getItemId(value[me.getKeyProperty()]), this.navigator])
+        } else if (Neo.isNumber(oldValue)) {
+            selectionModel.deselectAll();
+            me.headerlessActiveIndex = null
         }
     }
 
@@ -243,6 +251,22 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Triggered after the focusIndex config got changed
+     * @param {Number|Object|null} value
+     * @param {Number|Object|null} oldValue
+     * @protected
+     */
+    afterSetFocusIndex(value, oldValue) {
+        let me = this;
+
+        if (Neo.isNumber(value)) {
+            Neo.main.addon.Navigator.navigateTo([me.getHeaderlessIndex(value), me.navigator])
+        } else if (value) {
+            Neo.main.addon.Navigator.navigateTo([me.getItemId(value[me.getKeyProperty()]), me.navigator])
+        }
+    }
+
     /**
      * Triggered after the headerlessActiveIndex config got changed
      * @param {Number} value
@@ -253,7 +277,7 @@ class Base extends Component {
         let me = this;
 
         if (Neo.isNumber(value)) {
-            me.activeIndex = me.store.getCount() ? value: null
+            me.activeIndex = me.store.getCount() ? me.getActiveIndex(value) : null
         } else if (Neo.isNumber(oldValue)) {
             me.activeIndex = null
         }
@@ -755,14 +779,16 @@ class Base extends Component {
      * @param {Number|String} item
      */
     selectItem(item) {
-        if (!this.disableSelection) {
+        let me = this;
+
+        if (!me.disableSelection) {
             // Selecting index
             if (Neo.isNumber(item)) {
-                this.selectionModel?.selectAt(item)
+                me.selectionModel?.selectAt(item)
             }
             // Selecting record
             else if (item) {
-                this.selectionModel?.selectAt(this.store.indexOf(item));
+                me.selectionModel?.selectAt(me.store.indexOf(item))
             }
         }
     }

package/src/selection/ListModel.mjs

@@ -77,8 +77,10 @@ class ListModel extends Model {
             { view }  = this,
             { store } = view;
 
-        data.record = store.getAt(Math.min(data.activeIndex, store.getCount()));
-        view.fire('itemNavigate', data);
+        data.record      = store.getAt(Math.min(data.activeIndex, store.getCount()));
+        view._focusIndex = store.indexOf(data.record); // silent update, no need to refocus
+
+        view.fire('itemNavigate', data)
     }
 
     /**