neo.mjs 6.7.8 → 6.8.1

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

package/buildScripts/webpack/buildMyApps.mjs

@@ -1,128 +0,0 @@
-import chalk         from 'chalk';
-import { spawnSync } from 'child_process';
-import { Command }   from 'commander/esm.mjs';
-import envinfo       from 'envinfo';
-import fs            from 'fs-extra';
-import inquirer      from 'inquirer';
-import os            from 'os';
-import path          from 'path';
-
-const __dirname   = path.resolve(),
-      cwd         = process.cwd(),
-      cpOpts      = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
-      requireJson = path => JSON.parse(fs.readFileSync((path))),
-      packageJson = requireJson(path.resolve(cwd, 'package.json')),
-      program     = new Command(),
-      configPath  = path.resolve(cwd, 'buildScripts/myApps.json'),
-      neoPath     = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      webpackPath = path.resolve(neoPath, 'buildScripts/webpack'),
-      programName = `${packageJson.name} buildMyApps`,
-      questions   = [];
-
-let webpack = './node_modules/.bin/webpack',
-    config;
-
-if (fs.existsSync(configPath)) {
-    config = requireJson(configPath);
-} else {
-    const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
-
-    if (fs.existsSync(myAppsPath)) {
-        config = requireJson(myAppsPath);
-    } else {
-        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
-    }
-}
-
-let index = config.apps.indexOf('Docs');
-
-index > -1 && config.apps.splice(index, 1);
-
-program
-    .name(programName)
-    .version(packageJson.version)
-    .option('-i, --info',         'print environment debug info')
-    .option('-a, --apps <value>', ['all'].concat(config.apps).map(e => `"${e}"`).join(', '))
-    .option('-e, --env <value>',  '"all", "dev", "prod"')
-    .option('-f, --framework')
-    .option('-n, --noquestions')
-    .allowUnknownOption()
-    .on('--help', () => {
-        console.log('\nIn case you have any issues, please create a ticket here:');
-        console.log(chalk.cyan(packageJson.bugs.url));
-    })
-    .parse(process.argv);
-
-const programOpts = program.opts();
-
-if (programOpts.info) {
-    console.log(chalk.bold('\nEnvironment Info:'));
-    console.log(`\n  current version of ${packageJson.name}: ${packageJson.version}`);
-    console.log(`  running from ${__dirname}`);
-
-    envinfo
-        .run({
-            System     : ['OS', 'CPU'],
-            Binaries   : ['Node', 'npm', 'Yarn'],
-            Browsers   : ['Chrome', 'Edge', 'Firefox', 'Safari'],
-            npmPackages: ['neo.mjs']
-        }, {
-            duplicates  : true,
-            showNotFound: true
-        })
-        .then(console.log);
-} else {
-    console.log(chalk.green(programName));
-
-    if (!programOpts.noquestions) {
-        if (!programOpts.env) {
-            questions.push({
-                type   : 'list',
-                name   : 'env',
-                message: 'Please choose the environment:',
-                choices: ['all', 'dev', 'prod'],
-                default: 'all'
-            });
-        }
-
-        if (!programOpts.apps && config.apps.length > 1) {
-            questions.push({
-                type   : 'checkbox',
-                name   : 'apps',
-                message: 'Please choose which apps you want to build:',
-                choices: config.apps
-            });
-        }
-    }
-
-    inquirer.prompt(questions).then(answers => {
-        const apps      = (answers.apps.length > 0 ? answers.apps : null) || programOpts.apps || ['all'],
-              env       = answers.env || programOpts.env || ['all'],
-              insideNeo = !!programOpts.framework || false,
-              startDate = new Date();
-        let   childProcess;
-
-        if (os.platform().startsWith('win')) {
-            webpack = path.resolve(webpack).replace(/\\/g,'/');
-        }
-
-        // dist/development
-        if (env === 'all' || env === 'dev') {
-            console.log(chalk.blue(`${programName} starting dist/development`));
-            childProcess = spawnSync(webpack, ['--config', `${webpackPath}/development/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
-            childProcess.status && process.exit(childProcess.status);
-        }
-
-        // dist/production
-        if (env === 'all' || env === 'prod') {
-            console.log(chalk.blue(`${programName} starting dist/production`));
-            childProcess = spawnSync(webpack, ['--config', `${webpackPath}/production/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
-            childProcess.status && process.exit(childProcess.status);
-        }
-
-        const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
-        console.log(`\nTotal time for ${programName}: ${processTime}s`);
-
-        process.exit();
-    });
-}

package/buildScripts/webpack/development/webpack.config.myapps.mjs

@@ -1,127 +0,0 @@
-import fs      from 'fs-extra';
-import path    from 'path';
-import webpack from 'webpack';
-
-const cwd                   = process.cwd(),
-      configPath            = path.resolve(cwd, 'buildScripts/myApps.json'),
-      requireJson           = path => JSON.parse(fs.readFileSync((path))),
-      packageJson           = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
-      filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
-      plugins               = [],
-      regexIndexNodeModules = /node_modules/g,
-      regexTopLevel         = /\.\.\//g;
-
-let config;
-
-if (fs.existsSync(configPath)) {
-    config = requireJson(configPath);
-} else {
-    const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
-
-    if (fs.existsSync(myAppsPath)) {
-        config = requireJson(myAppsPath);
-    } else {
-        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
-    }
-}
-
-let index = config.apps.indexOf('Docs');
-
-index > -1 && config.apps.splice(index, 1);
-
-if (!buildTarget.folder) {
-    buildTarget.folder = 'dist/development';
-}
-
-export default env => {
-    let apps      = env.apps.split(','),
-        insideNeo = env.insideNeo == 'true',
-        buildAll  = apps.includes('all'),
-        choices   = [],
-        basePath, content, i, inputPath, outputPath, lAppName, treeLevel, workerBasePath;
-
-    // MicroLoader.mjs
-    inputPath  = path.resolve(cwd, 'src/MicroLoader.mjs');
-    outputPath = path.resolve(cwd, buildTarget.folder, 'src/MicroLoader.mjs');
-
-    content = fs.readFileSync(inputPath).toString().replace(/\s/gm, '');
-    fs.mkdirpSync(path.resolve(cwd, buildTarget.folder, 'src/'));
-    fs.writeFileSync(outputPath, content);
-
-    if (config.apps) {
-        config.apps.forEach(key => {
-            choices.push(key);
-        });
-
-        config.apps.forEach(key => {
-            if (buildAll || choices.length < 2 || apps.includes(key)) {
-                basePath       = '';
-                workerBasePath = '';
-                treeLevel      = key.replace('.', '/').split('/').length + 3;
-
-                for (i=0; i < treeLevel; i++)  {
-                    basePath += '../';
-
-                    if (i > 1) {
-                        workerBasePath += '../';
-                    }
-                }
-
-                lAppName = key.toLowerCase();
-
-                // neo-config.json
-                inputPath  = path.resolve(cwd, 'apps', lAppName, 'neo-config.json');
-                outputPath = path.resolve(cwd, buildTarget.folder, 'apps', lAppName, 'neo-config.json');
-
-                content = requireJson(inputPath);
-
-                content.appPath = content.appPath.replace(regexTopLevel, '');
-
-                Object.assign(content, {
-                    basePath,
-                    environment: 'dist/development',
-                    mainPath   : '../main.js',
-                    workerBasePath
-                });
-
-                fs.writeFileSync(outputPath, JSON.stringify(content, null, 4));
-
-                // index.html
-                inputPath  = path.resolve(cwd, 'apps', lAppName, 'index.html');
-                outputPath = path.resolve(cwd, buildTarget.folder, 'apps', lAppName, 'index.html');
-
-                content = fs.readFileSync(inputPath).toString().replace(regexIndexNodeModules, '../../node_modules');
-
-                fs.writeFileSync(outputPath, content);
-            }
-        });
-    }
-
-    return {
-        mode: 'development',
-
-        // see: https://webpack.js.org/configuration/devtool/
-        devtool: 'inline-source-map',
-        //devtool: 'cheap-module-eval-source-map',
-
-        entry : {app: path.resolve(neoPath, './src/worker/App.mjs')},
-        target: 'webworker',
-
-        plugins: [
-            new webpack.ContextReplacementPlugin(/.*/, context => {
-                if (!insideNeo && context.context.includes('/src/worker')) {
-                    context.request = '../../' + context.request;
-                }
-            }),
-            ...plugins
-        ],
-
-        output: {
-            chunkFilename: 'chunks/app/[id].js',
-            filename     : filenameConfig.workers.app.output,
-            path         : path.resolve(cwd, buildTarget.folder)
-        }
-    }
-};