neo.mjs 6.10.9 → 6.10.11

package/src/util/Array.mjs

@@ -29,6 +29,7 @@ class NeoArray extends Base {
                 arr.push(item);
             }
         });
+        return arr;
     }
 
     /**
@@ -97,6 +98,7 @@ class NeoArray extends Base {
 
             index > -1 && arr.splice(index, 1);
         });
+        return arr;
     }
 
     /**
@@ -108,7 +110,7 @@ class NeoArray extends Base {
      */
     static removeAdd(arr, removeItems, addItems) {
         this.remove(arr, removeItems);
-        this.add(arr, addItems);
+        return this.add(arr, addItems);
     }
 
     /**
@@ -118,7 +120,7 @@ class NeoArray extends Base {
      * @param {Boolean} [add]
      */
     static toggle(arr, item, add = !this.hasItem(arr, item)) {
-        this[add ? 'add' : 'remove'](arr, item);
+        return this[add ? 'add' : 'remove'](arr, item);
     }
 
     /**
@@ -149,6 +151,7 @@ class NeoArray extends Base {
                 arr.unshift(item);
             }
         });
+        return arr;
     }
 }
 

package/src/util/Function.mjs

@@ -121,3 +121,34 @@ export function throttle(callback, scope, delay=300) {
         }
     }
 }
+
+/**
+ * @param {Function} callback
+ * @param {Neo.core.Base} scope
+ * @param {Number} delay=300
+ * @returns {Function}
+ */
+export function buffer(callback, scope, delay=300) {
+    let timeoutId;
+
+    const wrapper = function(...args) {
+        // callback invocation comes "delay" ms after the last call to wrapper
+        // so cancel any pending invocation.
+        clearTimeout(timeoutId);
+
+        wrapper.isPending = true;
+
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            wrapper.isPending = false;
+            callback.apply(scope, args);
+        }, delay);
+    };
+
+    wrapper.cancel = () => {
+        wrapper.isPending = false;
+        clearTimeout(timeoutId);
+    };
+
+    return wrapper;
+}

package/src/util/String.mjs

@@ -81,6 +81,15 @@ class StringUtil extends Base {
 
         return value.replace(me.entityPattern, me.getCharFromEntity.bind(me));
     }
+
+    /**
+     * Returns the passed string with the first letter uncapitalized.
+     * @param {Strinhg} value 
+     * @returns 
+     */
+    static uncapitalize(value) {
+        return value && value[0].toLowerCase() + value.substring(1)
+    }
 }
 
 Neo.applyClassConfig(StringUtil);

package/src/vdom/Helper.mjs

@@ -580,8 +580,7 @@ class Helper extends Base {
                     string += ` ${key}`;
                 }
             } else if (key !== 'removeDom') {
-
-                string += ` ${key}="${value.replaceAll('"', '"')}"`;
+                string += ` ${key}="${value?.replaceAll?.('"', '"') ?? value}"`;
             }
         });
 

package/test/components/app.mjs

@@ -1,8 +1,9 @@
 // Important: You need to import all classes which you want to use inside tests here
 // (excluding base classes (prototypes) of already imported classes)
 
-import Button       from '../../src/button/Base.mjs';
-import DateSelector from '../../src/component/DateSelector.mjs';
-import SelectField  from '../../src/form/field/Select.mjs';
+import '../../src/button/Base.mjs';
+import '../../src/component/DateSelector.mjs';
+import '../../src/form/field/Select.mjs';
+import '../../src/list/Chip.mjs'
 
 export const onStart = () => Neo.app({name: 'AppEmpty'})

package/test/components/files/component/ChipList.mjs

@@ -0,0 +1,125 @@
+StartTest(t => {
+    let testId;
+
+    async function setup(config = {}) {
+        testId = await Neo.worker.App.createNeoInstance(Neo.merge({
+            ntype        : 'chip-list',
+            displayField : 'firstname',
+            width        : 300,
+            role         : 'listbox',
+            itemRole     : 'option',
+            navigator    : {
+                wrap : true
+            },
+            store : {
+                keyProperty: 'githubId',
+                model: {
+                    fields: [{
+                        name: 'country',
+                        type: 'String'
+                    }, {
+                        name: 'firstname',
+                        type: 'String'
+                    }, {
+                        name: 'githubId',
+                        type: 'String'
+                    }, {
+                        name: 'lastname',
+                        type: 'String'
+                    }]
+                },
+
+                data: [{
+                    country  : 'Germany',
+                    firstname: 'Tobias',
+                    githubId : 'tobiu',
+                    lastname : 'Uhlig'
+                }, {
+                    country  : 'USA',
+                    firstname: 'Rich',
+                    githubId : 'rwaters',
+                    lastname : 'Waters'
+                }, {
+                    country  : 'Germany',
+                    firstname: 'Nils',
+                    githubId : 'mrsunshine',
+                    lastname : 'Dehl'
+                }, {
+                    country  : 'USA',
+                    firstname: 'Gerard',
+                    githubId : 'camtnbikerrwc',
+                    lastname : 'Horan'
+                }, {
+                    country  : 'Slovakia',
+                    firstname: 'Jozef',
+                    githubId : 'jsakalos',
+                    lastname : 'Sakalos'
+                }, {
+                    country  : 'Germany',
+                    firstname: 'Bastian',
+                    githubId : 'bhaustein',
+                    lastname : 'Haustein'
+                }]
+            }
+        }, config));
+        
+
+        return testId;
+    }
+
+    // Clear the eway for each test
+    t.beforeEach(async t => {
+        if (testId) {
+            await Neo.worker.App.destroyNeoInstance(testId);
+            testId = null;
+        }
+    });
+
+    t.it('Sanity', async t => {
+        await setup({ });
+
+        // Click on the *item*, *not* the focusable chip.
+        // We are testing that the Navigator directs focus to the focusable heart of the
+        // item - the Chip - which will then recieve focus and cause item activation.
+        await t.click('.neo-list-item', null, null, null, ['100%-1', 1]);
+
+        // That should select and activate the clicked item.
+        // And focus the chip inside it.
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item.neo-selected:nth-child(1) .neo-chip:focus');
+        t.selectorCountIs('.neo-list-item.neo-navigator-active-item', 1);
+
+        await t.type(null, '[END]');
+
+        // That should select and activate the last item.
+        // And focus the chip inside it.
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:not(.neo-selected):nth-child(6) .neo-chip:focus');
+
+        // Item 1 is still the only one selected, and it's not focused
+        t.selectorExists('.neo-list-item.neo-selected:nth-child(1) .neo-chip:not(:focus)');
+        t.selectorCountIs('.neo-list-item.neo-selected', 1);
+        t.selectorCountIs('.neo-list-item.neo-navigator-active-item', 1);
+
+        await t.type(null, '[ENTER]');
+
+        // Item 6 is now the only one selected
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item.neo-selected:nth-child(6) .neo-chip:focus');
+        t.selectorCountIs('.neo-list-item.neo-selected', 1);
+        t.selectorCountIs('.neo-list-item.neo-navigator-active-item', 1);
+
+        await t.type(null, '[DOWN]');
+
+        // That should select and activate the first item.
+        // And focus the chip inside it.
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:not(.neo-selected):nth-child(1) .neo-chip:focus');
+        t.selectorCountIs('.neo-list-item.neo-selected', 1);
+        t.selectorCountIs('.neo-list-item.neo-navigator-active-item', 1);
+
+        await t.type(null, '[UP]');
+
+        // Item 6 is now the only one selected
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item.neo-selected:nth-child(6) .neo-chip:focus');
+        t.selectorCountIs('.neo-list-item.neo-selected', 1);
+        t.selectorCountIs('.neo-list-item.neo-navigator-active-item', 1);
+    });
+
+});

package/test/components/files/form/field/Select.mjs

@@ -1,6 +1,8 @@
 StartTest(t => {
-    t.it('Sanity', async t => {
-        Neo.worker.App.createNeoInstance({
+    let testId, inputField;
+
+    async function setup(config = {}) {
+        testId = await Neo.worker.App.createNeoInstance(Neo.merge({
             ntype        : 'selectfield',
             labelPosition: 'inline',
             labelText    : 'US States',
@@ -22,6 +24,179 @@ StartTest(t => {
                     }]
                 }
             }
+        }, config))
+
+        // Wait for input element to be present
+        await t.waitForSelector(`#${testId} input.neo-textfield-input:not(.neo-typeahead-input)`);
+
+        // Grab input element
+        inputField = t.query(`#${testId} input.neo-textfield-input:not(.neo-typeahead-input)`)[0]
+
+        return testId;
+    }
+
+    // Clear the eway for each test
+    t.beforeEach(async t => {
+        if (testId) {
+            await Neo.worker.App.destroyNeoInstance(testId);
+            testId = null;
+        }
+    });
+
+    t.it('Editable', async t => {
+        await setup({
+            editable : false
         });
+        const blurEl = document.createElement('input');
+        document.body.appendChild(blurEl);
+
+        await t.waitFor(() => inputField.getAttribute('readonly'));
+
+        let blurCount = 0;
+        inputField.addEventListener('blur', () => blurCount++);
+
+        t.hasAttributeValue(inputField, 'role', 'combobox');
+        t.hasAttributeValue(inputField, 'aria-haspopup', 'listbox');
+        t.hasAttributeValue(inputField, 'aria-expanded', 'false');
+
+        await t.click(inputField);
+
+        await t.waitForSelector('.neo-picker-container');
+
+        t.hasAttributeValue(inputField, 'aria-expanded', 'true');
+
+        // Roles correct
+        t.hasAttributeValue('.neo-picker-container .neo-list', 'role', 'listbox');
+        t.selectorCountIs('.neo-picker-container .neo-list .neo-list-item[role="option"]', 59);
+
+        // Nothing selected
+        t.hasAttributeValue(inputField, 'aria-activedescendant', '');
+
+        // Should activate the first list item. editable : false means we can still be focused
+        // and select values, just that the filter input is read-only.
+        await t.type(null, '[DOWN]');
+
+        await t.waitForSelector('input.neo-textfield-input:not(:disabled)[aria-activedescendant="neo-list-1__AL"]');
+
+        t.hasAttributeValue(inputField, 'aria-activedescendant', 'neo-list-1__AL');
+
+        // Select that first item.
+        await t.type(null, '[ENTER]');
+
+        await t.waitForSelectorNotFound('.neo-picker-container:visible');
+
+        t.is(inputField.value, 'Alabama');
+
+        // Focus nebver leaves the input field
+        t.is(blurCount, 0);
+
+        await t.type(null, '[TAB]');
+
+        // Value still correct after blur
+        t.is(inputField.value, 'Alabama');
+        blurEl.remove();
+
+        // Now focus has left
+        t.is(blurCount, 1);
+    });
+
+    t.iit('Keyboard navigation', async t => {
+        await setup();
+        const blurEl = document.createElement('input');
+        document.body.appendChild(blurEl);
+
+        await t.click(inputField);
+        await t.type(null, '[DOWN]');
+
+        // Picker Must show with Alabama activated
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Alabama")');
+
+        await t.type(null, '[END]');
+
+        // Picker should go to end
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wyoming")');
+
+        await t.type(null, '[UP]');
+
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wisconsin")');
+
+        await t.type(null, '[DOWN]');
+
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wyoming")');
+
+        await t.type(null, '[ENTER]');
+
+        await t.waitForSelectorNotFound('.neo-picker-container:visible');
+
+        t.is(inputField.value, 'Wyoming');
+
+        await t.type(null, '[DOWN]');
+
+        // Picker Must show with Wyoming activated
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wyoming")');
+
+        await t.type(null, '[UP]');
+
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wisconsin")');
+
+        await t.type(null, '[ENTER]');
+
+        await t.waitForSelectorNotFound('.neo-picker-container:visible');
+
+        t.is(inputField.value, 'Wisconsin');
+
+        await t.type(null, '[DOWN]');
+
+        // Picker Must show with Wisconsin activated
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wisconsin")');
+
+        // We're single select, so only one list item must be selected
+        t.selectorCountIs('[aria-selected="true"]', 1);
+
+        await t.type(null, '[TAB]');
+
+        // Value still correct after blur
+        t.is(inputField.value, 'Wisconsin');
+        blurEl.remove();
+    });
+
+    t.it('Type to filter', async t => {
+        await setup();
+        const blurEl = document.createElement('input');
+        document.body.appendChild(blurEl);
+
+        await t.click(inputField);
+
+        await t.type(null, 'Mar');
+
+        // Picker Must show with Marshall Islands activated
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Marshall Islands")');
+
+        // Matches three states
+        t.selectorCountIs('.neo-picker-container .neo-list-item', 3);
+
+        // Only one is selected
+        t.selectorCountIs('.neo-list-item.neo-navigator-active-item', 1);
+
+        await t.type(null, '[DOWN]');
+
+        // Picker Must show with Maryland activated
+        await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Maryland")');
+
+        // Matches three states
+        t.selectorCountIs('.neo-picker-container .neo-list-item', 3);
+
+        // Only one is selected
+        t.selectorCountIs('.neo-list-item.neo-navigator-active-item', 1);
+
+        // Blur without selecting a value
+        await t.type(null, '[TAB]');
+
+        await t.waitFor(100)
+
+        // Inputs must have been cleared. Both typeahead and filter.
+        t.isDeeply(t.query(`#${testId} input`).map(i => i.value), ['', '']);
+
+        blurEl.remove();
     });
 });

package/test/components/siesta.js

@@ -31,6 +31,38 @@ project.configure({
                 this.SUPER(...arguments);
                 this.SUPER(t => t.waitFor(50));
             }
+        },
+
+        methods : {
+            async waitForSelectorCount(selector, root, count) {
+                if (typeof root === 'number') {
+                    count = root;
+                    root = undefined;
+                }
+                return this.waitFor(() => this.query(selector, root).length === count);
+            },
+
+            async waitForDomMutation(root = this.global.document.body) {
+                root = this.normalizeElement(root);
+
+                if (root) {
+                    return new Promise(resolve => {
+                        const m = new MutationObserver(() => {
+                            m.disconnect();
+                            resolve();
+                        });
+                        m.observe(root, {
+                            subtree       : true,
+                            childList     : true,
+                            attributes    : true,
+                            characterData : true
+                        });
+                        setTimeout(() => {
+                            m.disconnect();
+                        }, this.timeout)
+                    });
+                }
+            }
         }
     })
 });
@@ -45,7 +77,8 @@ project.plan(
     {
         group: 'component',
         items: [
-            'files/component/DateSelector.mjs'
+            'files/component/DateSelector.mjs',
+            'files/component/ChipList.mjs'
         ]
     },
     {