neo.mjs 6.10.10 → 6.10.11

package/src/form/field/trigger/Base.mjs

@@ -37,7 +37,7 @@ class Base extends Component {
         /**
          * @member {Neo.form.field.Base|null} field=null
          */
-        field: null,
+        field_: null,
         /**
          * @member {String|null} iconCls_=null
          */
@@ -62,11 +62,6 @@ class Base extends Component {
          * @protected
          */
         type: 'base',
-        /**
-         * @member {Object} _vdom={tabIndex: -1}
-         */
-        _vdom:
-        {tabIndex: -1},
         /**
          * @member {Number} weight_=10
          */
@@ -110,6 +105,10 @@ class Base extends Component {
         this.cls = cls;
     }
 
+    afterSetField(field) {
+        (this.vdom.data || (this.vdom.data = {})).focus = field && field.getInputElId();
+    }
+
     /**
      * Triggered after the hidden config got changed
      * @param {Boolean} value

package/src/layout/Flexbox.mjs

@@ -85,7 +85,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetAlign(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'align');
+        oldValue && this.updateInputValue(value, oldValue, 'align')
     }
 
     /**
@@ -95,7 +95,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetDirection(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'direction');
+        oldValue && this.updateInputValue(value, oldValue, 'direction')
     }
 
     /**
@@ -111,7 +111,7 @@ class Flexbox extends Base {
             style = item.wrapperStyle;
 
         style.gap = value;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -121,7 +121,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetPack(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'pack');
+        oldValue && this.updateInputValue(value, oldValue, 'pack')
     }
 
     /**
@@ -131,7 +131,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetWrap(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'wrap');
+        oldValue && this.updateInputValue(value, oldValue, 'wrap')
     }
 
     /**
@@ -143,11 +143,11 @@ class Flexbox extends Base {
             flex  = style.flex || item.flex || (this.align === 'stretch' ? 1 : '0 1 auto');
 
         if (flex === 1) {
-            flex = '1 1 auto';
+            flex = '1 1 auto'
         }
 
         style.flex = flex;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -160,7 +160,7 @@ class Flexbox extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Flexbox: applyRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Flexbox: applyRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.add(wrapperCls, prefix + 'container');
@@ -170,7 +170,7 @@ class Flexbox extends Base {
         me.pack      && NeoArray.add(wrapperCls, prefix + 'pack-'      + me.pack);
         me.wrap      && NeoArray.add(wrapperCls, prefix + 'wrap-'      + me.wrap);
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
     }
 
     /**
@@ -181,7 +181,7 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     beforeSetAlign(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'alignValues', 'align');
+        return this.testInputValue(value, oldValue, 'alignValues', 'align')
     }
 
     /**
@@ -203,7 +203,7 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     beforeSetPack(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'packValues', 'pack');
+        return this.testInputValue(value, oldValue, 'packValues', 'pack')
     }
 
     /**
@@ -214,7 +214,7 @@ class Flexbox extends Base {
      * @returns {String} value
      */
     beforeSetWrap(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'wrapValues', 'wrap');
+        return this.testInputValue(value, oldValue, 'wrapValues', 'wrap')
     }
 
     /**
@@ -227,7 +227,7 @@ class Flexbox extends Base {
         let style = item.wrapperStyle || {};
 
         style.flex = item.flex || null;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -242,25 +242,17 @@ class Flexbox extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Flexbox: removeRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Flexbox: removeRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.remove(wrapperCls, prefix + 'container');
 
-        if (me.align) {
-            NeoArray.remove(wrapperCls, prefix + 'align-' + me.align);
-        }
-        if (me.direction) {
-            NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
-        }
-        if (me.pack) {
-            NeoArray.remove(wrapperCls, prefix + 'pack-' + me.pack);
-        }
-        if (me.wrap) {
-            NeoArray.remove(wrapperCls, prefix + 'wrap-' + me.wrap);
-        }
+        me.align     && NeoArray.remove(wrapperCls, prefix + 'align-'     + me.align);
+        me.direction && NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
+        me.pack      && NeoArray.remove(wrapperCls, prefix + 'pack-'      + me.pack);
+        me.wrap      && NeoArray.remove(wrapperCls, prefix + 'wrap-'      + me.wrap);
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
     }
 
     /**
@@ -277,10 +269,10 @@ class Flexbox extends Base {
 
         if (!NeoArray.hasItem(validValues, value)) {
             Neo.logError(this.containerId, '-> layout: supported values for "' + propertyName + '" are' , validValues);
-            return oldValue;
+            return oldValue
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -300,10 +292,10 @@ class Flexbox extends Base {
             NeoArray.remove(wrapperCls, prefix + propertyName + '-' + oldValue);
 
             if (value !== null) {
-                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value);
+                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value)
             }
 
-            container.wrapperCls = wrapperCls;
+            container.wrapperCls = wrapperCls
         }
     }
 }

package/src/layout/HBox.mjs

@@ -29,7 +29,7 @@ class HBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed width
-        !item.width && super.applyChildAttributes(item);
+        !item.width && super.applyChildAttributes(item)
     }
 }
 

package/src/layout/VBox.mjs

@@ -29,7 +29,7 @@ class VBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed height
-        !item.height && super.applyChildAttributes(item);
+        !item.height && super.applyChildAttributes(item)
     }
 }
 

package/src/list/Base.mjs

@@ -135,7 +135,13 @@ class Base extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'ul', cn: []}
+        {tag: 'ul', cn: []},
+
+        /**
+         * An object to help configure the navigation. Used to pass to {@link Neo.main.addon.Navigator#subscribe}.
+         * @member {Object} navigator={}
+         */
+        navigator : {}
     }
 
     /**
@@ -172,16 +178,15 @@ class Base extends Component {
      * @param {Number|null} oldValue
      * @protected
      */
-    afterSetActiveIndex(value, oldValue) {
-        let me             = this,
-            selectionModel = me.selectionModel;
+    afterSetActiveIndex(value) {
+        let me = this;
 
         if (Neo.isNumber(value)) {
-            selectionModel?.selectAt(value);
             me.headerlessActiveIndex = me.getHeaderlessIndex(value)
-        } else if (Neo.isNumber(oldValue)) {
-            selectionModel.deselectAll();
-            me.headerlessActiveIndex = null
+            Neo.main.addon.Navigator.navigateTo([value, this.navigator])
+        }
+        else if (value) {
+            Neo.main.addon.Navigator.navigateTo([me.getItemId(value[me.getKeyProperty()]), this.navigator])
         }
     }
 
@@ -257,6 +262,33 @@ class Base extends Component {
         }
     }
 
+    afterSetMounted(value) {
+        const me = this;
+
+        // Tear down navigation before we lose the element
+        if (!value && me.hasNavigator) {
+            Neo.main.addon.Navigator.unsubscribe(me.navigator);
+            me.hasNavigator = false;
+            me.activeIndex = null
+        }
+
+        super.afterSetMounted(...arguments);
+
+        if (value) {
+            // Set up item navigation in the list
+            if (!me.hasNavigator) {
+                me.navigator = {
+                    appName  : me.appName,
+                    id       : me.id,
+                    selector : `.${me.itemCls}:not(.neo-disabled,.neo-list-header)`,
+                    ...me.navigator
+                }
+                me.hasNavigator = true;
+            }
+            Neo.main.addon.Navigator.subscribe(me.navigator)
+        }
+    }
+
     /**
      * Triggered after the selectionModel config got changed
      * @param {Neo.selection.Model} value
@@ -392,12 +424,16 @@ class Base extends Component {
         }
 
         item = {
-            tag     : isHeader ? 'dt' : me.itemTagName,
-            cls,
-            id      : itemId,
-            tabIndex: -1
+            id  : itemId,
+            tag : isHeader ? 'dt' : me.itemTagName,
+            'aria-selected' : false,
+            cls
         };
 
+        if (me.itemsFocusable) {
+            item.tabIndex = -1;
+        }
+
         if (record.hidden) {
             item.removeDom = true
         }
@@ -513,15 +549,7 @@ class Base extends Component {
      * @param {String} [id]
      */
     focus(id) {
-        super.focus(id);
-
-        let me = this;
-
-        id && me.scrollIntoViewOnFocus && Neo.main.DomAccess.scrollIntoView({
-            appName : me.appName,
-            behavior: 'auto',
-            id      : id || me.id
-        })
+        Neo.main.addon.Navigator.navigateTo(id, this.navigator)
     }
 
     /**
@@ -569,11 +597,11 @@ class Base extends Component {
     }
 
     /**
-     * @param {Number|String} recordId
+     * @param {Number|String|object} recordOrId
      * @returns {String}
      */
-    getItemId(recordId) {
-        return `${this.id}__${recordId}`
+    getItemId(recordOrId) {
+        return `${this.id}__${recordOrId.isRecord ? recordOrId[this.getKeyProperty()] : recordOrId}`
     }
 
     /**
@@ -655,10 +683,6 @@ class Base extends Component {
         // pass the record to class extensions
         data.record = record;
 
-        if (!me.disableSelection && (!me.useHeaders || !record.isHeader)) {
-            me.selectionModel?.select(node.id)
-        }
-
         /**
          * The itemClick event fires when a click occurs on a list item
          * @event itemClick
@@ -723,10 +747,19 @@ class Base extends Component {
 
     /**
      * Convenience shortcut
-     * @param {Number} index
+     * @param {Number|String} item
      */
-    selectItem(index) {
-        !this.disableSelection && this.selectionModel?.selectAt(index)
+    selectItem(item) {
+        if (!this.disableSelection) {
+            // Selecting index
+            if (Neo.isNumber(item)) {
+                this.selectionModel?.selectAt(item)
+            }
+            // Selecting record
+            else if (item) {
+                this.selectionModel?.selectAt(this.store.indexOf(item));
+            }
+        }
     }
 }
 

package/src/main/DomAccess.mjs

@@ -2,23 +2,14 @@ import Base         from '../core/Base.mjs';
 import DeltaUpdates from './mixin/DeltaUpdates.mjs';
 import Observable   from '../core/Observable.mjs';
 import Rectangle    from '../util/Rectangle.mjs';
+import String       from '../util/String.mjs';
+import DomUtils     from './DomUtils.mjs';
 
 const
     doPreventDefault = e => e.preventDefault(),
-    filterTabbable   = e => !e.classList.contains('neo-focus-trap') && isTabbable(e) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
+    filterTabbable   = e => !e.classList.contains('neo-focus-trap') && DomUtils.isTabbable(e) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
     lengthRE         = /^\d+\w+$/,
 
-    focusableTags = {
-        BODY     : 1,
-        BUTTON   : 1,
-        EMBED    : 1,
-        IFRAME   : 1,
-        INPUT    : 1,
-        OBJECT   : 1,
-        SELECT   : 1,
-        TEXTAREA : 1
-    },
-
     fontSizeProps = [
         'font-family',
         'font-kerning',
@@ -34,21 +25,15 @@ const
         'word-break'
     ],
 
-    isTabbable = e => {
-        const
-            { nodeName } = e,
-            style        = getComputedStyle(e),
-            tabIndex     = e.getAttribute('tabIndex');
-
-        // Hidden elements not tabbable
-        if (style.getPropertyValue('display') === 'none' || style.getPropertyValue('visibility') === 'hidden') {
-            return false
-        }
-
-        return focusableTags[nodeName] ||
-            ((nodeName === 'A' || nodeName === 'LINK') && !!e.href) ||
-            (tabIndex != null && Number(tabIndex) >= 0) ||
-            e.contentEditable === 'true'
+    capturePassive = {
+        capture : true,
+        passive : true
+    },
+    modifierKeys = {
+        Shift   : 1,
+        Alt     : 1,
+        Meta    : 1,
+        Control : 1
     };
 
 /**
@@ -103,6 +88,8 @@ class DomAccess extends Base {
                 'getScrollingDimensions',
                 'measure',
                 'monitorAutoGrow',
+                'navigate',
+                'navigateTo',
                 'scrollBy',
                 'scrollIntoView',
                 'scrollTo',
@@ -168,11 +155,51 @@ class DomAccess extends Base {
             }, 250)
         }
 
+        me.initGlobalListeners();
+
         // Set up our aligning callback which is called when things change which may
         // mean that alignments need to be updated.
         me.syncAligns = me.syncAligns.bind(me)
     }
 
+    initGlobalListeners() {
+        const me = this;
+
+        document.addEventListener('mousedown', me.onDocumentMouseDown.bind(me), { capture : true });
+        document.addEventListener('keydown', me.onDocumentKeyDown.bind(me), capturePassive);
+        document.addEventListener('keyup', me.onDocumentKeyUp.bind(me), capturePassive);
+        document.addEventListener('blur', me.onDocumentBlur.bind(me), capturePassive);
+    }
+
+    onDocumentMouseDown(e) {
+        const focusController = e.target?.closest('[data-focus]');
+
+        // data-focus on an element means reject mousedown gestures, and move focus
+        // to the referenced element.
+        if (focusController) {
+            e.preventDefault();
+            document.getElementById(focusController.dataset.focus)?.focus();
+        }
+    }
+
+    onDocumentKeyDown(keyEvent) {
+        if (modifierKeys[keyEvent.key]) {
+            // eg Neo.isShiftKeyDown = true or Neo.isControlKeyDown = true.
+            // Selection can consult this value
+            Neo[`${String.uncapitalize(keyEvent.key)}KeyDown`] = true;
+        }
+    }
+
+    onDocumentKeyUp(keyEvent) {
+        if (modifierKeys[keyEvent.key]) {
+            Neo[`${String.uncapitalize(keyEvent.key)}KeyDown`] = false;
+        }
+    }
+
+    onDocumentBlur() {
+        Neo.altKeyDown = Neo.controlKeyDown = Neo.metaKeyDown = Neo.shiftKeyDown = false;
+    }
+
     /**
      * @param {Object} alignSpec
      */
@@ -433,7 +460,7 @@ class DomAccess extends Base {
             { defaultView } = node.ownerDocument,
             rect            = this.getBoundingClientRect(node);
 
-        for (let parentElement = node.offsetParent; rect && parentElement !== document.documentElement; parentElement = parentElement.parentElement) {
+        for (let parentElement = node.offsetParent; parentElement && rect && parentElement !== document.documentElement; parentElement = parentElement.parentElement) {
             if (defaultView.getComputedStyle(parentElement).getPropertyValue('overflow') !== 'visible') {
                 rect = rect.intersects(this.getBoundingClientRect(parentElement))
             }

package/src/main/DomEvents.mjs

@@ -267,7 +267,8 @@ class DomEvents extends Base {
             path     : path.map(e => this.getTargetData(e)),
             target   : this.getTargetData(event.target),
             timeStamp: event.timeStamp,
-            type     : event.type
+            type     : event.type,
+            data     : {...event.target.dataset}
         };
 
         if (event.relatedTarget) {

package/src/main/DomUtils.mjs

@@ -0,0 +1,66 @@
+import Base from '../core/Base.mjs';
+
+const focusableTags = {
+    BODY     : 1,
+    BUTTON   : 1,
+    EMBED    : 1,
+    IFRAME   : 1,
+    INPUT    : 1,
+    OBJECT   : 1,
+    SELECT   : 1,
+    TEXTAREA : 1
+};
+
+/**
+ * @class Neo.main.DomUtils 
+ * @extends Neo.core.Base
+ * @singleton
+ */
+export default class DomUtils extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.DomUtils'
+         * @protected
+         */
+        className: 'Neo.main.DomUtils'
+    }
+
+    /**
+     * Analogous to the `HTMLElement` `closest` method. Searches starting at the passed element for
+     * an element for which the passed `filterFn` returns `true`
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when the desired element is reached.
+     * @param {HTMLElement} [limit] The element to stop at. This is *not* considered for matching.
+     * @returns 
+     */
+    static closest(el, filterFn, limit = document.body) {
+        while (el?.nodeType === Node.ELEMENT_NODE && el !== limit) {
+            if (filterFn(el)) {
+                return el;
+            }
+            el = el.parentNode;
+        }
+    }
+
+    static isFocusable(e) {
+        // May be used as a scopeless callback, so use "DomUtils", not "this"
+        return DomUtils.isTabbable(e) || e.getAttribute('tabIndex') == -1;
+    }
+
+    static isTabbable(e) {
+        const
+            { nodeName } = e,
+            style        = getComputedStyle(e),
+            tabIndex     = e.getAttribute('tabIndex');
+
+        // Hidden elements not tabbable
+        if (!e.offsetParent || style.getPropertyValue('visibility') === 'hidden') {
+            return false
+        }
+
+        return focusableTags[nodeName] ||
+            ((nodeName === 'A' || nodeName === 'LINK') && !!e.href) ||
+            (tabIndex != null && Number(tabIndex) >= 0) ||
+            e.contentEditable === 'true'
+    }
+}