neo.mjs 6.8.0 → 6.8.1

package/apps/ServiceWorker.mjs

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

package/apps/form/view/pages/Page2.mjs

@@ -19,7 +19,7 @@ class Page2 extends FormPageContainer {
             module   : DateField,
             labelText: 'Birthday',
             name     : 'birthday',
-            style    : {marginBottom: '800px', marginTop: '800px'}
+            style    : {marginBottom: '2000px', marginTop: '800px'}
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/examples/dialog/DemoDialog.mjs

@@ -132,6 +132,7 @@ class DemoDialog extends Dialog {
             index                  : nextIndex,
             listeners              : {close: me.onWindowClose, scope: me},
             modal                  : me.app.mainView.down({valueLabelText: 'Modal'}).checked,
+            trapFocus              : true,
             optionalAnimateTargetId: button.id,
             style                  : {left: me.getOffset(), top: me.getOffset()},
             title                  : 'Dialog ' + nextIndex

package/examples/dialog/MainContainer.mjs

@@ -90,6 +90,7 @@ class MainContainer extends Viewport {
             boundaryContainerId    : me.boundaryContainerId,
             listeners              : {close: me.onWindowClose, scope: me},
             modal                  : me.down({valueLabelText: 'Modal'}).checked,
+            trapFocus              : true,
             optionalAnimateTargetId: data.component.id,
             title                  : 'Dialog 1'
         })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.8.0",
+    "version": "6.8.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/dialog/Base.scss

@@ -61,6 +61,12 @@
         }
     }
 
+    &.neo-centered {
+        left      : 50%;
+        top       : 50%;
+        transform : translate(-50%, -50%);
+    }
+
     &.neo-panel {
         .neo-footer-toolbar {
             border    : none;
@@ -103,3 +109,9 @@
         }
     }
 }
+
+// A focusable, but zero-sized element used to grab and redirect focus in focus-trapped modals
+.neo-focus-trap {
+    position : absolute;
+    clip     : rect(0, 0, 0, 0);
+}

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -610,13 +610,16 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetHidden(value, oldValue) {
-        let me = this;
+        let me    = this,
+            state = value ? 'hide' : 'show';
 
         if (value && oldValue === undefined && me.hideMode === 'removeDom') {
             me.vdom.removeDom = true
         } else if (value || oldValue !== undefined) {
-            me[value ? 'hide' : 'show']()
+            me[state]()
         }
+
+        me.fire(state, {id: me.id})
     }
 
     /**

package/src/dialog/Base.mjs

@@ -127,7 +127,20 @@ class Base extends Panel {
         /**
          * @member {String|null} title_=null
          */
-        title_: null
+        title_: null,
+        /**
+         * Set to `true` to have tabbing wrap within this Dialog.
+         *
+         * Should be used with `modal`.
+         * @member {Boolean} trapFocus_=false
+         */
+        trapFocus_: false,
+        /**
+         * Set to `true` to have this Dialog centered in the viewport.
+         *
+         * @member {Boolean} centered_=false
+         */
+        centered_: false
     }
 
     /**
@@ -141,7 +154,7 @@ class Base extends Panel {
 
         me.createHeader();
 
-        if (!me.animateTargetId) {
+        if (!me.animateTargetId && !me.centered) {
             Neo.assignDefaults(style, {
                 left     : '50%',
                 top      : '50%',
@@ -185,6 +198,17 @@ class Base extends Panel {
         super.afterSetAppName(value, oldValue)
     }
 
+    /**
+     * Triggered after the centered config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetCentered(value, oldValue) {
+        NeoArray.toggle(this.vdom.cls, 'neo-centered', value);
+        this.update();
+    }
+
     /**
      * Triggered after the draggable config got changed
      * @param {Boolean} value
@@ -252,6 +276,19 @@ class Base extends Panel {
         me.rendered && me.syncModalMask()
     }
 
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        // Ensure focus trapping is up-to-date, enabled or disabled.
+        this.syncTrapFocus()
+    }
+
     /**
      * Triggered after the resizable config got changed
      * @param {Boolean} value
@@ -289,6 +326,16 @@ class Base extends Panel {
         }
     }
 
+    /**
+     * Triggered after the trapFocus config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetTrapFocus(value, oldValue) {
+        this.syncTrapFocus()
+    }
+
     /**
      *
      */
@@ -676,6 +723,15 @@ class Base extends Panel {
         // This should sync the visibility and position of the modal mask element.
         Neo.main.DomAccess.syncModalMask({ id, modal: this.modal })
     }
+
+    /**
+     *
+     */
+    syncTrapFocus() {
+        if (this.mounted) {
+            Neo.main.DomAccess.trapFocus({ id: this.id, trap: this.trapFocus })
+        }
+    }
 }
 
 Neo.applyClassConfig(Base);

package/src/dialog/header/Toolbar.mjs

@@ -11,35 +11,34 @@ class Toolbar extends Base {
          * @protected
          */
         className: 'Neo.dialog.header.Toolbar',
+        /**
+         * @member {Object} actionMap
+         */
+        actionMap: {
+            close   : () => ({action: 'close',    iconCls: 'far fa-window-close'}),
+            maximize: () => ({action: 'maximize', iconCls: 'far fa-window-maximize'})
+        },
+        /**
+         * You can define the action order and directly add custom actions.
+         * @example
+         * {
+         *     actions: [
+         *         'close',
+         *         'maximize',
+         *         {action: 'help', iconCls: 'far fa-circle-question'}
+         *     ]
+         * }
+         *
+         * You can also extend the actionMap if needed.
+         * @member {Object[]|String[]|null} actions=['maximize','close']
+         */
+        actions: ['maximize', 'close'],
         /**
          * @member {String|null} title=null
          */
         title_: null
     }
 
-    /**
-     * @member {Object} actionMap
-     */
-    actionMap = {
-        close   : () => ({action: 'close',    iconCls: 'far fa-window-close'}),
-        maximize: () => ({action: 'maximize', iconCls: 'far fa-window-maximize'})
-    }
-    /**
-     * You can define the action order and directly add custom actions.
-     * @example
-     * {
-     *     actions: [
-     *         'close',
-     *         'maximize',
-     *         {action: 'help', iconCls: 'far fa-circle-question'}
-     *     ]
-     * }
-     *
-     * You can also extend the actionMap if needed.
-     * @member {Object[]|String[]|null} actions=['maximize','close']
-     */
-    actions = ['maximize', 'close']
-
     /**
      * Triggered after the title config got changed
      * @param {String} value
@@ -83,7 +82,7 @@ class Toolbar extends Base {
 
         me.items = items;
 
-        super.createItems();
+        super.createItems()
     }
 
     /**

package/src/form/field/Picker.mjs

@@ -45,7 +45,7 @@ class Picker extends Text {
             Escape: 'onKeyDownEscape'
         },
         /**
-         * @member {Object|null} picker=null
+         * @member {Neo.container.Base|null} picker=null
          * @protected
          */
         picker: null,
@@ -107,7 +107,7 @@ class Picker extends Text {
         me.addDomListeners({
             click: me.onInputClick,
             scope: me
-        });
+        })
     }
 
     /**
@@ -120,7 +120,7 @@ class Picker extends Text {
         let cls = this.cls;
 
         NeoArray.toggle(cls, 'neo-not-editable', !value);
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -131,10 +131,10 @@ class Picker extends Text {
      */
     afterSetMounted(value, oldValue) {
         if (value === false && oldValue && this.pickerIsMounted) {
-            this.picker.hide();
+            this.picker.hide()
         }
 
-        super.afterSetMounted(value, oldValue);
+        super.afterSetMounted(value, oldValue)
     }
 
     /**
@@ -160,18 +160,19 @@ class Picker extends Text {
             { pickerWidth } = me,
             pickerComponent = me.createPickerComponent();
 
-        return Neo.create(Container, {
+        me.picker =  Neo.create(Container, {
             parentId : 'document.body',
             floating : true,
             align    : {
                 edgeAlign : pickerWidth ? 't0-b0' : 't-b',
-                matchSize : pickerWidth ? false : true,
+                matchSize : !pickerWidth,
                 axisLock  : true,
                 target    : me.getInputWrapperId()
             },
             appName  : me.appName,
             cls      : ['neo-picker-container', 'neo-container'],
             height   : me.pickerHeight,
+            hidden   : true,
             id       : me.getPickerId(),
             items    : pickerComponent ? [pickerComponent] : [],
             maxHeight: me.pickerMaxHeight,
@@ -188,16 +189,18 @@ class Picker extends Text {
                 for (item of data.oldPath) {
                     if (item.id === me.id) {
                         insideField = true;
-                        break;
+                        break
                     }
                 }
 
                 if (!insideField) {
                     me.hidePicker();
-                    super.onFocusLeave(data);
+                    super.onFocusLeave(data)
                 }
             }
         });
+
+        return me.picker
     }
 
     /**
@@ -205,7 +208,7 @@ class Picker extends Text {
      * @returns {Neo.component.Base|null}
      */
     createPickerComponent() {
-        return null;
+        return null
     }
 
     /**
@@ -214,12 +217,12 @@ class Picker extends Text {
     destroy(...args) {
         let picker = this.picker;
 
-        if (this.pickerIsMounted) {
-            picker?.unmount();
+        if (picker?.hidden === false) {
+            picker.unmount()
         }
 
         picker?.destroy();
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -227,36 +230,22 @@ class Picker extends Text {
      * @returns {Neo.container.Base}
      */
     getPicker() {
-        let me = this;
-
-        if (!me.picker) {
-            me.picker = me.createPicker();
-        }
-
-        return me.picker;
+        return this.picker || this.createPicker()
     }
 
     /**
      * @returns {String}
      */
     getPickerId() {
-        return `${this.id}__picker`;
+        return `${this.id}__picker`
     }
 
     /**
      *
      */
     async hidePicker() {
-        let me     = this,
-            picker = me.getPicker();
-
-        // avoid breaking selection model cls updates
-        await me.timeout(30);
-
-        if (me.pickerIsMounted) {
-            picker.unmount();
-
-            me.pickerIsMounted = false;
+        if (this.picker) {
+            this.picker.hidden = true
         }
     }
 
@@ -269,7 +258,7 @@ class Picker extends Text {
 
         let me = this;
 
-        me.showPickerOnFocus && !me.pickerIsMounted && me.showPicker();
+        me.showPickerOnFocus && me.showPicker()
     }
 
     /**
@@ -284,13 +273,13 @@ class Picker extends Text {
         for (item of data.oldPath) {
             if (item.id === me.getPickerId()) {
                 insidePicker = true;
-                break;
+                break
             }
         }
 
         if (!insidePicker) {
             me.hidePicker();
-            super.onFocusLeave(data);
+            super.onFocusLeave(data)
         }
     }
 
@@ -308,7 +297,7 @@ class Picker extends Text {
      * @protected
      */
     onKeyDownEnter(data, callback, callbackScope) {
-        !this.pickerIsMounted && this.showPicker(callback, callbackScope);
+        !this.pickerIsMounted && this.showPicker(callback, callbackScope)
     }
 
     /**
@@ -316,7 +305,7 @@ class Picker extends Text {
      * @protected
      */
     onKeyDownEscape(data) {
-        this.pickerIsMounted && this.hidePicker();
+        this.pickerIsMounted && this.hidePicker()
     }
 
     /**
@@ -324,44 +313,23 @@ class Picker extends Text {
      * @protected
      */
     onPickerTriggerClick() {
-        this.editable && this.togglePicker();
+        this.editable && this.togglePicker()
     }
 
     /**
-     * @param {Function} [callback]
-     * @param {Object} [callbackScope]
+     *
      */
-    showPicker(callback, callbackScope) {
-        let me     = this,
-            picker = me.getPicker(),
-            listenerId;
-
-        if (!me.pickerIsMounting) {
-            me.pickerIsMounting = true;
-
-            listenerId = picker.on('mounted', () => {
-                picker.un('mounted', listenerId);
-
-                me.pickerIsMounting = false;
-                me.pickerIsMounted  = true;
-                callback?.apply(callbackScope || me);
-            });
-
-            picker.render(true);
-        }
+    showPicker() {
+        let picker = this.getPicker();
+        picker.hidden = false
     }
 
     /**
      *
      */
     togglePicker() {
-        let me = this;
-
-        if (me.pickerIsMounted) {
-            me.hidePicker();
-        } else {
-            me.showPicker();
-        }
+        let picker = this.getPicker();
+        picker.hidden = !picker.hidden
     }
 }
 

package/src/main/DomAccess.mjs

@@ -4,7 +4,21 @@ import Observable   from '../core/Observable.mjs';
 import Rectangle    from '../util/Rectangle.mjs';
 
 const
-    lengthRE      = /^\d+\w+$/,
+    doPreventDefault = e => e.preventDefault(),
+    filterTabbable   = e => !e.classList.contains('neo-focus-trap') && 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',
@@ -18,7 +32,22 @@ const
         'text-decoration',
         'text-transform',
         'word-break'
-    ];
+    ],
+
+    isTabbable = e => {
+        const
+            { nodeName } = e,
+            style        = getComputedStyle(e);
+
+        if (style.getPropertyValue('display') === 'none' || style.getPropertyValue('visibility') === 'hidden') {
+            return false;
+        }
+
+        return focusableTags[nodeName] ||
+            ((nodeName === 'A' || nodeName === 'LINK') && !!e.href) ||
+            e.getAttribute('tabIndex') != null ||
+            e.contentEditable === 'true';
+    };
 
 /**
  * @class Neo.main.DomAccess
@@ -78,6 +107,7 @@ class DomAccess extends Base {
                 'setBodyCls',
                 'setStyle',
                 'syncModalMask',
+                'trapFocus',
                 'windowScrollTo'
             ]
         },
@@ -106,6 +136,7 @@ class DomAccess extends Base {
         if (!me._modalMask) {
             me._modalMask = document.createElement('div');
             me._modalMask.className = 'neo-dialog-modal-mask';
+            me._modalMask.addEventListener('mousedown', doPreventDefault, { capture : true });
         }
 
         return me._modalMask;
@@ -638,6 +669,28 @@ class DomAccess extends Base {
         })
     }
 
+    /**
+     * @param data
+     * @param data.target
+     * @param data.relatedTarget
+     */
+    onTrappedFocusMovement({ target, relatedTarget }) {
+        const backwards = relatedTarget && (target.compareDocumentPosition(relatedTarget) & 4);
+
+        if (target.matches('.neo-focus-trap')) {
+            const
+                containingEement = target.parentElement,
+                treeWalker       = containingEement.$treeWalker,
+                topFocusTrap     = containingEement.$topFocusTrap,
+                bottomFocusTrap  = containingEement.$bottomFocusTrap;
+
+            treeWalker.currentNode = backwards ? bottomFocusTrap : topFocusTrap;
+            treeWalker[backwards ? 'previousNode' : 'nextNode']();
+
+            requestAnimationFrame(() => treeWalker.currentNode.focus());
+        }
+    }
+
     /**
      * @param {Object} data
      * @protected
@@ -871,6 +924,53 @@ class DomAccess extends Base {
         }
     }
 
+    /**
+     * Traps (or stops trapping) focus within a Component
+     * @param {Object} data
+     * @param {String} data.id The Component to trap focus within.
+     * @param {Boolean} [data.trap=true] Pass `false` to stop trapping focus inside the Component.
+     */
+    async trapFocus(data) {
+        const
+            me                     = this,
+            onTrappedFocusMovement = me.$boundOnTrappedFocusMovement || (me.$boundOnTrappedFocusMovement = me.onTrappedFocusMovement.bind(me)),
+            subject                = data.subject = me.getElement(data.id),
+            { trap = true }        = data;
+
+        // Called before DOM has been created.
+        if (!subject) {
+            return;
+        }
+
+        let topFocusTrap    = subject.$topFocusTrap,
+            bottomFocusTrap = subject.$bottomFocusTrap;
+
+        if (trap) {
+            if (!subject.$treeWalker) {
+                subject.$treeWalker = document.createTreeWalker(subject, NodeFilter.SHOW_ELEMENT, {
+                    acceptNode : filterTabbable
+                });
+                topFocusTrap = subject.$topFocusTrap = document.createElement('div');
+                bottomFocusTrap = subject.$bottomFocusTrap = document.createElement('div');
+
+                // The two focus traping elements must be invisble but tabbable.
+                topFocusTrap.className = bottomFocusTrap.className = 'neo-focus-trap';
+                topFocusTrap.setAttribute('tabIndex', 0);
+                bottomFocusTrap.setAttribute('tabIndex', 0);
+
+                // Listen for when they gain focus and wrap focus within the encapsulating element
+                subject.addEventListener('focusin', onTrappedFocusMovement);
+            }
+
+            // Ensure content is encapsulated by the focus trap elements
+            subject.insertBefore(topFocusTrap, subject.firstChild);
+            subject.appendChild(bottomFocusTrap);
+        }
+        else {
+            subject.removeEventListener('focusin', onTrappedFocusMovement);
+        }
+    }
+
     /**
      * @param {Object} data
      * @param {String} [data.behavior='smooth'] // auto or smooth