neo.mjs 6.15.3 → 6.15.5

package/src/main/addon/Navigator.mjs

@@ -37,81 +37,42 @@ class Navigator extends Base {
     }
 
     /**
-     * Sets up keyboard based navigation within the passed element id.
-     *
-     * When navigation occurs from one navigable element to another, the `navigate` event
-     * will be fired.
-     *
-     * Note that if focus is expected to enter the subject, the navigable elements
-     * designated by the `selector` must be focusable in some way. So if not using natively
-     * focusable elements, they must have `tabIndex="-1"`.
-     *
-     * Upon navigation, the `aria-activedescendant` property is automatically updated
-     * on the `eventSource` element (which defaults to the subject element, but may be external)
-     *
-     * Pressing `Enter` when an item is active clicks that item.
-     *
-     * if `autoClick` is set to `true` in the data, simply navigating to an element will click it.
-     * @param {*} data
-     * @param {String} data.id The element id to navigate in.
-     * @param {String} [data.eventSource] Optional - the element id to read keystrokes from.
-     * defaults to the main element id. Select field uses this. Focus remains in the field's
-     * `<input>` element while navigating its dropdown.
-     * @param {String} data.selector A CSS selector which identifies the navigable elements.
-     * @param {String} data.activeCls A CSS class to add to the currently active navigable element.
-     * @param {Boolean} data.wrap Pass as `true` to have navigation wrap from first to last and vice versa.
-     * @param {Boolean} [data.autoClick=false] Pass as `true` to have navigation click the target navigated to.
-     * TabPanels will use this on their tab toolbar.
+     * @param {HTMLElement} el
      */
-    subscribe(data) {
-        const
-            me          = this,
-            subject     = data.subject = DomAccess.getElement(data.id),
-            eventSource = data.eventSource = data.eventSource ? DomAccess.getElement(data.eventSource) : subject;
-
-        subject.$navigator = data;
-
-        if (!data.activeCls) {
-            data.activeCls = 'neo-navigator-active-item'
+    clickItem(el) {
+        // The element knows how to click itself.
+        if (typeof el.click === 'function') {
+            el.click();
         }
+        // It operates through a listener, so needs an event firing into it.
+        else {
+            const
+                rect    = el.getBoundingClientRect(),
+                clientX = rect.x + (rect.width / 2),
+                clientY = rect.y + (rect.height / 2);
 
-        // Ensure that only *one* of the child focusables is actually tabbable.
-        // We use arrow keys for internal navigation. TAB must move out.
-        me.fixItemFocusability(data);
-
-        // Finds a focusable item starting from a descendant el within one of our selector items
-        data.findFocusable = el => DomUtils.closest(el, el =>
-            // We're looking for an element that is focusable
-            DomUtils.isFocusable(el) &&
-            // And within our subject element
-            (subject.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
-            // And within an element that matches our selector
-            el.closest(data.selector)
-        );
-
-        // TreeWalker so that we can easily move between navigable elements within the target.
-        data.treeWalker = document.createTreeWalker(subject, NodeFilter.SHOW_ELEMENT, node => me.navigateNodeFilter(node, data));
-
-        // We have to know when the DOM mutates in case the active item is removed.
-        (data.targetMutationMonitor = new MutationObserver(e => me.navigateTargetChildListChange(e, data))).observe(subject, {
-            childList : true,
-            subtree   : true
-        });
-
-        eventSource.addEventListener('keydown', data.l1 = e => me.navigateKeyDownHandler(e, data));
-        subject.addEventListener('mousedown',   data.l2 = e => me.navigateMouseDownHandler(e, data));
-        subject.addEventListener('click',       data.l3 = e => me.navigateClickHandler(e, data));
-        subject.addEventListener('focusin',     data.l4 = e => me.navigateFocusInHandler(e, data));
-        subject.addEventListener('focusout',    data.l5 = e => me.navigateFocusOutHandler(e, data));
+            el.dispatchEvent(new MouseEvent('click', {
+                bubbles  : true,
+                altKey   : Neo.altKeyDown,
+                ctrlKey  : Neo.controlKeyDown,
+                metaKey  : Neo.metaKeyDown,
+                shiftKey : Neo.shiftKeyDown,
+                clientX,
+                clientY
+            }))
+        }
     }
 
-    // The navigables we are dealing with, if they are focusable must *not* be tabbable.
-    // Only *one* must be tabbable, so that tabbing into the subject element goes to the
-    // one active element.
-    //
-    // Tabbing *from* that must exit the subject element.
-    //
-    // So we must ensure that all the focusable elements except the first are not tabbable.
+    /**
+     * The navigables we are dealing with, if they are focusable must *not* be tabbable.
+     * Only *one* must be tabbable, so that tabbing into the subject element goes to the
+     * one active element.
+     *
+     * Tabbing *from* that must exit the subject element.
+     *
+     * So we must ensure that all the focusable elements except the first are not tabbable.
+     * @param {Object} data
+     */
     fixItemFocusability(data) {
         // If the key events are being read from an external element, then that will always contain
         // focus, so we have nothing to do here. The navigable items wil be inert and not
@@ -141,35 +102,25 @@ class Navigator extends Base {
         }
     }
 
-    unsubscribe(data) {
-        const target = DomAccess.getElement(data.id);
-
-        data = target?.$navigator;
-        if (data) {
-            delete target.$navigator;
-            data.targetMutationMonitor.disconnect(target);
-            data.eventSource.removeEventListener('keydown', data.l1);
-            target.removeEventListener('mousedown',    data.l2);
-            target.removeEventListener('click',        data.l3);
-            target.removeEventListener('focusin',      data.l4);
-            target.removeEventListener('focusout',     data.l5);
-        }
-    }
-
-    // This is called if mutations take place within the subject element.
-    // We have to keep things in order if the list items change.
-    navigateTargetChildListChange(mutations, data) {
-        this.fixItemFocusability(data);
-
-        // Active item gone.
-        // Try to activate the item at the same index;
-        if (data.activeItem && !data.subject.contains(data.activeItem)) {
-            const allItems = data.subject.querySelectorAll(data.selector);
+    /**
+     * @param {MouseEvent} e
+     * @param {Object} data
+     */
+    navigateClickHandler(e, data) {
+        const target = e.target.closest(data.selector);
 
-            allItems.length && this.navigateTo(allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)], data);
+        // If there was a focusable under the mouse, mousedown will have focused it and and we
+        // will have respond to that in navigateFocusInHandler.
+        // If not, we navigate programmatically.
+        if (target && !data.findFocusable(target)) {
+            this.navigateTo(target, data);
         }
     }
 
+    /**
+     * @param {FocusEvent} e
+     * @param {Object} data
+     */
     navigateFocusInHandler(e, data) {
         const
             target            = e.target.closest(data.selector),
@@ -189,6 +140,10 @@ class Navigator extends Base {
         }
     }
 
+    /**
+     * @param {FocusEvent} e
+     * @param {Object} data
+     */
     navigateFocusOutHandler(e, data) {
         const { target } = e;
 
@@ -201,28 +156,35 @@ class Navigator extends Base {
         }
     }
 
-    navigateClickHandler(e, data) {
-        const target = e.target.closest(data.selector);
+    /**
+     * @param {Number} direction
+     * @param {Object} data
+     */
+    navigateGetAdjacent(direction=1, data) {
+        const { treeWalker } = data;
 
-        // If there was a focusable under the mouse, mousedown will have focused it and and we
-        // will have respond to that in navigateFocusInHandler.
-        // If not, we navigate programmatically.
-        if (target && !data.findFocusable(target)) {
-            this.navigateTo(target, data);
-        }
-    }
+        // Walk forwards or backwards to the next or previous node which matches our selector
+        treeWalker.currentNode = this.navigatorGetActiveItem(data) || data.subject;
+        treeWalker[direction < 0 ? 'previousNode' : 'nextNode']();
 
-    navigateMouseDownHandler(e, data) {
-        const target = e.target.closest(data.selector);
+        // Found a target in the requested direction
+        if (treeWalker.currentNode) {
+            if (treeWalker.currentNode !== data.activeItem) {
+                return treeWalker.currentNode;
+            }
+        }
+        // Could not find target in requested direction, then wrap if configured to do so
+        else if (data.wrap !== false) {
+            const allItems = data.subject.querySelector(data.selector);
 
-        // If there is a focusable under the mouse, it will take focus, and we respond to that in navigateFocusInHandler.
-        // If not, we have to programmatically activate on click, but we must not draw focus away from
-        // where it is, so preventDefault
-        if (target && !data.findFocusable(target)) {
-            e.preventDefault();
+            return allItems[direction === 1 ? 0 : allItems.length - 1];
         }
     }
 
+    /**
+     * @param {KeyboardEvent} keyEvent
+     * @param {Object} data
+     */
     navigateKeyDownHandler(keyEvent, data) {
         const
             me        = this,
@@ -290,27 +252,46 @@ class Navigator extends Base {
         }
     }
 
-    clickItem(el) {
-        // The element knows how to click itself.
-        if (typeof el.click === 'function') {
-            el.click();
+    /**
+     * @param {MouseEvent} e
+     * @param {Object} data
+     */
+    navigateMouseDownHandler(e, data) {
+        const target = e.target.closest(data.selector);
+
+        // If there is a focusable under the mouse, it will take focus, and we respond to that in navigateFocusInHandler.
+        // If not, we have to programmatically activate on click, but we must not draw focus away from
+        // where it is, so preventDefault
+        if (target && !data.findFocusable(target)) {
+            e.preventDefault();
         }
-        // It operates through a listener, so needs an event firing into it.
-        else {
-            const
-                rect    = el.getBoundingClientRect(),
-                clientX = rect.x + (rect.width / 2),
-                clientY = rect.y + (rect.height / 2);
+    }
 
-            el.dispatchEvent(new MouseEvent('click', {
-                bubbles  : true,
-                altKey   : Neo.altKeyDown,
-                ctrlKey  : Neo.controlKeyDown,
-                metaKey  : Neo.metaKeyDown,
-                shiftKey : Neo.shiftKeyDown,
-                clientX,
-                clientY
-            }));
+    /**
+     * @param {HTMLElement} node
+     * @param {Object} data
+     */
+    navigateNodeFilter(node, data) {
+        return node.offsetParent && node.matches?.(data.selector) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+
+    /**
+     * This is called if mutations take place within the subject element.
+     * We have to keep things in order if the list items change.
+     * @param {MutationRecord[]} mutations
+     * @param {Object} data
+     */
+    navigateTargetChildListChange(mutations, data) {
+        this.fixItemFocusability(data);
+
+        if (data.keepFocusIndex) {
+            // Active item gone.
+            // Try to activate the item at the same index;
+            if (data.activeItem && !data.subject.contains(data.activeItem)) {
+                const allItems = data.subject.querySelectorAll(data.selector);
+
+                allItems.length && this.navigateTo(allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)], data);
+            }
         }
     }
 
@@ -362,6 +343,25 @@ class Navigator extends Base {
         }
     }
 
+    /**
+     * @param {Object} data
+     * @returns {HTMLElement|null}
+     */
+    navigatorGetActiveItem(data) {
+        let activeItem = data.activeItem && DomAccess.getElement(data.activeItem.id) || null;
+
+        if (!activeItem && ('activeIndex' in data)) {
+            const allItems = data.subject.querySelectorAll(data.selector);
+
+            activeItem = allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)];
+        }
+        return activeItem;
+    }
+
+    /**
+     * @param {HTMLElement} newActiveElement
+     * @param {Object} data
+     */
     setActiveItem(newActiveElement, data) {
         const allItems = Array.from(data.subject.querySelectorAll(data.selector));
 
@@ -411,40 +411,92 @@ class Navigator extends Base {
         }
     }
 
-    navigateGetAdjacent(direction = 1, data) {
-        const { treeWalker } = data;
+    /**
+     * Sets up keyboard based navigation within the passed element id.
+     *
+     * When navigation occurs from one navigable element to another, the `navigate` event
+     * will be fired.
+     *
+     * Note that if focus is expected to enter the subject, the navigable elements
+     * designated by the `selector` must be focusable in some way. So if not using natively
+     * focusable elements, they must have `tabIndex="-1"`.
+     *
+     * Upon navigation, the `aria-activedescendant` property is automatically updated
+     * on the `eventSource` element (which defaults to the subject element, but may be external)
+     *
+     * Pressing `Enter` when an item is active clicks that item.
+     *
+     * if `autoClick` is set to `true` in the data, simply navigating to an element will click it.
+     * @param {*} data
+     * @param {String} data.id The element id to navigate in.
+     * @param {String} [data.eventSource] Optional - the element id to read keystrokes from.
+     * defaults to the main element id. Select field uses this. Focus remains in the field's
+     * `<input>` element while navigating its dropdown.
+     * @param {String} data.selector A CSS selector which identifies the navigable elements.
+     * @param {String} data.activeCls A CSS class to add to the currently active navigable element.
+     * @param {Boolean} data.wrap Pass as `true` to have navigation wrap from first to last and vice versa.
+     * @param {Boolean} [data.autoClick=false] Pass as `true` to have navigation click the target navigated to.
+     * TabPanels will use this on their tab toolbar.
+     */
+    subscribe(data) {
+        const
+            me          = this,
+            subject     = data.subject = DomAccess.getElement(data.id),
+            eventSource = data.eventSource = data.eventSource ? DomAccess.getElement(data.eventSource) : subject;
 
-        // Walk forwards or backwards to the next or previous node which matches our selector
-        treeWalker.currentNode = this.navigatorGetActiveItem(data) || data.subject;
-        treeWalker[direction < 0 ? 'previousNode' : 'nextNode']();
+        subject.$navigator = data;
 
-        // Found a target in the requested direction
-        if (treeWalker.currentNode) {
-            if (treeWalker.currentNode !== data.activeItem) {
-                return treeWalker.currentNode;
-            }
+        if (!data.activeCls) {
+            data.activeCls = 'neo-navigator-active-item'
         }
-        // Could not find target in requested direction, then wrap if configured to do so
-        else if (data.wrap !== false) {
-            const allItems = data.subject.querySelector(data.selector);
 
-            return allItems[direction === 1 ? 0 : allItems.length - 1];
-        }
-    }
+        // Ensure that only *one* of the child focusables is actually tabbable.
+        // We use arrow keys for internal navigation. TAB must move out.
+        me.fixItemFocusability(data);
 
-    navigatorGetActiveItem(data) {
-        let activeItem = data.activeItem && DomAccess.getElement(data.activeItem.id);
+        // Finds a focusable item starting from a descendant el within one of our selector items
+        data.findFocusable = el => DomUtils.closest(el, el =>
+            // We're looking for an element that is focusable
+            DomUtils.isFocusable(el) &&
+            // And within our subject element
+            (subject.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
+            // And within an element that matches our selector
+            el.closest(data.selector)
+        );
 
-        if (!activeItem && ('activeIndex' in data)) {
-            const allItems = data.subject.querySelectorAll(data.selector);
+        // TreeWalker so that we can easily move between navigable elements within the target.
+        data.treeWalker = document.createTreeWalker(subject, NodeFilter.SHOW_ELEMENT, node => me.navigateNodeFilter(node, data));
 
-            activeItem = allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)];
-        }
-        return activeItem;
+        // We have to know when the DOM mutates in case the active item is removed.
+        (data.targetMutationMonitor = new MutationObserver(e => me.navigateTargetChildListChange(e, data))).observe(subject, {
+            childList : true,
+            subtree   : true
+        });
+
+        eventSource.addEventListener('keydown', data.l1 = e => me.navigateKeyDownHandler(e, data));
+        subject.addEventListener('mousedown',   data.l2 = e => me.navigateMouseDownHandler(e, data));
+        subject.addEventListener('click',       data.l3 = e => me.navigateClickHandler(e, data));
+        subject.addEventListener('focusin',     data.l4 = e => me.navigateFocusInHandler(e, data));
+        subject.addEventListener('focusout',    data.l5 = e => me.navigateFocusOutHandler(e, data));
     }
 
-    navigateNodeFilter(node, data) {
-        return node.offsetParent && node.matches?.(data.selector) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    /**
+     * @param {Object} data
+     */
+    unsubscribe(data) {
+        const target = DomAccess.getElement(data.id);
+
+        data = target?.$navigator;
+
+        if (data) {
+            delete target.$navigator;
+            data.targetMutationMonitor.disconnect();
+            data.eventSource.removeEventListener('keydown', data.l1);
+            target.removeEventListener('mousedown',    data.l2);
+            target.removeEventListener('click',        data.l3);
+            target.removeEventListener('focusin',      data.l4);
+            target.removeEventListener('focusout',     data.l5);
+        }
     }
 }
 

package/test/components/app.mjs

@@ -5,5 +5,6 @@ import '../../src/button/Base.mjs';
 import '../../src/component/DateSelector.mjs';
 import '../../src/form/field/ComboBox.mjs';
 import '../../src/list/Chip.mjs';
+import '../../src/toolbar/Base.mjs';
 
 export const onStart = () => Neo.app({name: 'AppEmpty'})

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

@@ -0,0 +1,88 @@
+StartTest(t => {
+    t.it('Checking colliding style updates', async t => {
+        const containerId = await Neo.worker.App.createNeoInstance({
+            ntype : 'container',
+            height: 250,
+            style : {backgroundColor: 'red'},
+            width : 300
+        });
+
+        t.is(containerId, 'neo-container-1');
+
+        await t.waitForSelector('.neo-container');
+        t.diag('Container got rendered.');
+
+        const componentId = await Neo.worker.App.createNeoInstance({
+            ntype   : 'component',
+            height  : 150,
+            parentId: containerId,
+            style   : {backgroundColor: 'blue'},
+            width   : 150
+        });
+
+        t.is(componentId, 'neo-component-1');
+        t.diag('Component got rendered.');
+
+        t.diag('Child update before parent update');
+        Neo.worker.App.setConfigs({id: componentId, style: {backgroundColor: 'green'}});
+        Neo.worker.App.setConfigs({id: containerId, style: {backgroundColor: 'orange'}});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(componentId).style.backgroundColor, 'green');
+        t.is(document.getElementById(containerId).style.backgroundColor, 'orange');
+
+        t.diag('Parent update before child update');
+        Neo.worker.App.setConfigs({id: containerId, style: {backgroundColor: 'pink'}});
+        Neo.worker.App.setConfigs({id: componentId, style: {backgroundColor: 'purple'}});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(containerId).style.backgroundColor, 'pink');
+        t.is(document.getElementById(componentId).style.backgroundColor, 'purple');
+
+        await Neo.worker.App.destroyNeoInstance(containerId)
+    });
+
+    t.it('Checking colliding vdom updates', async t => {
+        const toolbarId = await Neo.worker.App.createNeoInstance({
+            ntype : 'toolbar',
+            height: 200,
+            width : 300
+        });
+
+        t.is(toolbarId, 'neo-toolbar-1');
+
+        await t.waitForSelector('.neo-toolbar');
+        t.diag('Toolbar got rendered.');
+
+        const buttonId = await Neo.worker.App.createNeoInstance({
+            ntype   : 'button',
+            parentId: toolbarId,
+            text    : 'hello'
+        });
+
+        t.is(buttonId, 'neo-button-1');
+
+        await t.waitForSelector('.neo-button');
+        t.diag('Button got rendered.');
+
+        t.diag('Child update before parent update');
+        Neo.worker.App.setConfigs({id: buttonId,  text  : 'world'});
+        Neo.worker.App.setConfigs({id: toolbarId, height: 300});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(toolbarId).style.height, '300px');
+        t.is(document.getElementById(buttonId).firstChild.innerHTML, 'world');
+
+        t.diag('Parent update before child update');
+        Neo.worker.App.setConfigs({id: toolbarId, height: 200});
+        Neo.worker.App.setConfigs({id: buttonId,  text  : 'hello'});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(toolbarId).style.height, '200px');
+        t.is(document.getElementById(buttonId).firstChild.innerHTML, 'hello');
+    });
+});

package/test/components/siesta.js

@@ -75,6 +75,7 @@ project.plan({
 }, {
     group: 'component',
     items: [
+        'files/component/Base.mjs',
         'files/component/DateSelector.mjs'
     ]
 }, {

package/apps/portal/view/learn/PageSectionsPanel.mjs

@@ -1,59 +0,0 @@
-import PageSectionsList from './PageSectionsList.mjs';
-import Panel            from '../../../../src/container/Panel.mjs';
-
-/**
- * @class Portal.view.learn.PageSectionsPanel
- * @extends Neo.container.Panel
- */
-class PageSectionsPanel extends Panel {
-    static config = {
-        /**
-         * @member {String} className='Portal.view.learn.PageSectionsPanel'
-         * @protected
-         */
-        className: 'Portal.view.learn.PageSectionsPanel',
-        /**
-         * @member {String[]} cls=['portal-page-sections-panel']
-         */
-        cls: ['portal-page-sections-panel'],
-        /**
-         * @member {Object[]} headers
-         */
-        // headers: [{
-        //     dock : 'top',
-        //     items: [{
-        //         ntype: 'label',
-        //         text : 'On this page'
-        //     }, '->', {
-        //         iconCls: 'fas fa-chevron-right',
-        //         ui     : 'secondary',
-        //         tooltip: 'Collapse Sections'
-        //     }]
-        // }],
-        /**
-         * @member {Object[]} items
-         */
-        items: [{
-            vdom:
-                { cn: [                        
-                    { tag: 'h3', html: 'On this page' },
-                ]}
-            
-        },{
-            module   : PageSectionsList,
-            reference: 'list'
-        }]
-    }
-
-    /**
-     * Convenience shortcut
-     * @member {Portal.view.learn.PageSectionsList} list
-     */
-    get list() {
-        return this.getReference('list')
-    }
-}
-
-Neo.setupClass(PageSectionsPanel);
-
-export default PageSectionsPanel;

package/resources/scss/src/apps/portal/learn/PageSectionsPanel.scss

@@ -1,40 +0,0 @@
-.portal-page-sections-panel.neo-panel {
-    border: none; // reset the default 1px
-
-
-    background-color: transparent;
-    display: block;
-    width: 250px;
-    flex-shrink: 0;
-    z-index: 1;
-    position: fixed;
-    top: 80px;
-    right: 0px;
-    bottom: 0px;
-
-    @media only screen and (max-width: 1100px) {
-        display: none;
-    }
-
-    h3 {
-        margin-left: 16px;
-    }
-
-    .neo-panel-header-toolbar {
-        border       : none; // reset the default 1px
-        border-bottom: 1px solid #f2f2f2;
-
-        .neo-button {
-            // todo: we need styling for toolbar buttons within neo-theme-neo-light
-            border-radius: 4px;
-            height       : inherit;
-            min-width    : inherit;
-            padding      : 5px 12px;
-
-            .neo-button-glyph {
-                color: var(--panel-header-text-color);
-            }
-        }
-    }
-
-}