neo.mjs 6.15.2 → 6.15.4

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

@@ -6,39 +6,9 @@
     }
 }
 
-
-
-
-
-// Live preview Container
-.live-preview-container {
-
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
-    border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-
-    .neo-tab-header-toolbar {
-        background-color: var(--sem-color-surface-neutral-default);
-        padding: var(--cmp-tab-strip-height);
-        border: 1px solid #e6e6e6;
-        border-top-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-        border-top-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-    }
-
-    .neo-tab-strip {
-       margin-top: calc(var(--cmp-tab-strip-height) * (-1) - 1px);
-    }
-
-    .neo-tab-content-container {
-        background-color: transparent;
-        border: 1px solid #e6e6e6;
-        border-top: 0;
-        border-bottom-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-        border-bottom-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-    }
-}
-
+// todo: @mxmrtns this makes scrollbars globally(!) invisible
 // Scrollbar Behaviour
-::-webkit-scrollbar {
+/*::-webkit-scrollbar {
     width: 6px;
 }
 
@@ -62,4 +32,4 @@ background: transparent;
         background: #b2b2b2;
         border-radius: 100px;
     }
-}
+}*/

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

@@ -1,11 +1,10 @@
 .learn-content-container {
-    // align-items: center !important;
-    // padding: 0 3rem;
-    overflow: scroll;
+    overflow: auto;
 
     .content-bottom-toolbar {
         gap    : 8px;
         padding: 0 3rem;
+        margin-top: 100px;
 
         .neo-button {
             flex           : 1 !important;
@@ -33,3 +32,9 @@
         }
     }
 }
+
+.portal-size-large {
+    .content-bottom-toolbar {
+        margin-right: 250px;
+    }
+}

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

@@ -0,0 +1,14 @@
+.portal-page-sections-container.neo-container {
+    background-color: transparent;
+    border          : none; // reset the default 1px
+    display         : block;
+    flex-shrink     : 0;
+    position        : fixed;
+    right           : 0;
+    width           : 250px;
+    z-index         : 1;
+
+    h3 {
+        margin-left: 16px;
+    }
+}

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

@@ -4,9 +4,19 @@
     }
 
     .neo-list-item {
-        color      : #7d7d7d;
-        height     : 32px;
-        line-height: 1;
-        white-space: normal;
+        color        : var(--sem-color-text-neutral-subdued);
+        height       : unset;
+        margin-bottom: 0;
+        padding      : 5px 0 5px 5px !important;
+        white-space  : normal;
+
+        &[aria-selected=true] {
+            background-color: transparent !important;
+            color           : var(--list-item-color-selected) !important;
+            font-weight     : 600 !important;
+            cursor          : default !important;
+
+        }
     }
 }
+

package/resources/scss/src/component/wrapper/MonacoEditor.scss

@@ -0,0 +1,3 @@
+.neo-monaco-editor {
+    overflow: hidden;
+}

package/resources/scss/theme-neo-light/Global.scss

@@ -26,6 +26,15 @@ h2 {
     line-height     : var(--core-lineheight-headline);
 }
 
+h3 {
+    color           : var(--sem-color-fg-neutral-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h3);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
 p {
     color           : var(--sem-color-fg-neutral-contrast);
     font-family     : var(--core-fontfamily-sans);

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -370,7 +370,6 @@ class Base extends CoreBase {
      * @member {String[]} childUpdateCache=[]
      */
     childUpdateCache = []
-
     /**
      * @member {Function[]} resolveUpdateCache=[]
      */

package/src/component/wrapper/MonacoEditor.mjs

@@ -40,6 +40,11 @@ class MonacoEditor extends Base {
          * @protected
          */
         ntype: 'monaco-editor',
+        /**
+         * @member {String[]} baseCls=['neo-monaco-editor']
+         * @protected
+         */
+        baseCls: ['neo-monaco-editor'],
         /**
          * @member {Boolean} contextmenu_=false
          */

package/src/core/Base.mjs

@@ -1,5 +1,5 @@
-import {buffer, debounce, throttle} from '../util/Function.mjs';
-import IdGenerator                  from './IdGenerator.mjs'
+import {buffer, debounce, intercept, throttle} from '../util/Function.mjs';
+import IdGenerator                             from './IdGenerator.mjs'
 
 const configSymbol       = Symbol.for('configSymbol'),
       forceAssignConfigs = Symbol('forceAssignConfigs'),
@@ -150,6 +150,13 @@ class Base {
 
         me.applyDelayable();
 
+        /*
+         * We do not want to force devs to check for the `isDestroyed` flag in every possible class extension.
+         * So, we are intercepting the top-most `destroy()` call to check for the flag there.
+         * Rationale: `destroy()` must only get called once.
+         */
+        intercept(me, 'destroy', me.isDestroyedCheck, me);
+
         me.remote && setTimeout(me.initRemote.bind(me), 1)
     }
 
@@ -305,9 +312,14 @@ class Base {
 
         Object.keys(me).forEach(key => {
             if (Object.getOwnPropertyDescriptor(me, key).writable) {
-                delete me[key]
+                // We must not delete some custom destroy() interceptor
+                if (key !== 'destroy' && key !== '_id') {
+                    delete me[key]
+                }
             }
-        })
+        });
+
+        me.isDestroyed = true
     }
 
     /**
@@ -387,6 +399,14 @@ class Base {
         }
     }
 
+    /**
+     * Intercepts destroy() calls to ensure they will only get called once
+     * @returns {Boolean}
+     */
+    isDestroyedCheck() {
+        return !this.isDestroyed
+    }
+
     /**
      * Override this method to change the order configs are applied to this instance.
      * @param {Object} config

package/src/form/field/ComboBox.mjs

@@ -48,9 +48,9 @@ class ComboBox extends Picker {
         /**
          * The millisecond time to delay between input field mutation and applying the input field's
          * new value to the filter
-         * @member {Number} filterDelay=300
+         * @member {Number} filterDelay=50
          */
-        filterDelay : 300,
+        filterDelay : 50,
         /**
          * @member {String} filterOperator_='like'
          */
@@ -141,7 +141,7 @@ class ComboBox extends Picker {
         let me = this;
 
         // Create buffered function to respond to input field mutation
-        //me.filterOnInput = buffer(me.filterOnInput, me, me.filterDelay);
+        me.filterOnInput = buffer(me.filterOnInput, me, me.filterDelay);
 
         me.typeAhead && me.updateTypeAhead()
     }
@@ -206,10 +206,11 @@ class ComboBox extends Picker {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        super.afterSetValue(value, oldValue);
-
         let me = this;
 
+        // input value changes (super call) need a flag to prevent showing the picker
+        me.programmaticValueChange = true;
+        super.afterSetValue(value, oldValue);
         me.programmaticValueChange = false;
 
         if (me._picker?.isVisible) {
@@ -304,8 +305,6 @@ class ComboBox extends Picker {
             store        = me.store,
             record;
 
-        me.programmaticValueChange = true;
-
         // getting a record, nothing to do
         if (Neo.isObject(value)) {
             return value
@@ -343,6 +342,7 @@ class ComboBox extends Picker {
             displayField  : me.displayField,
             itemRole      : 'option',
             itemsFocusable: false,
+            keepFocusIndex: true,
             navigator     : {eventSource: me.getInputElId()},
             parentId      : me.id,
             role          : 'listbox',

package/src/list/Base.mjs

@@ -98,6 +98,12 @@ class Base extends Component {
          * @member {Boolean} itemsFocusable=true
          */
         itemsFocusable: true,
+        /**
+         * The config will get passed to the navigator main thread addon.
+         * E.g. for ComboBoxes, which shall preserve their focussed list item when filtering the store, use true.
+         * @member {Boolean} keepFocusIndex=false
+         */
+        keepFocusIndex: false,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -146,7 +152,7 @@ class Base extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'ul', cn: []}
+            {tag: 'ul', cn: []}
     }
 
     /**
@@ -288,10 +294,11 @@ class Base extends Component {
             // 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)`,
-                    windowId : me.windowId,
+                    appName       : me.appName,
+                    id            : me.id,
+                    keepFocusIndex: me.keepFocusIndex,
+                    selector      : `.${me.itemCls}:not(.neo-disabled,.neo-list-header)`,
+                    windowId      : me.windowId,
                     ...me.navigator
                 };
 

package/src/main/addon/IntersectionObserver.mjs

@@ -28,6 +28,12 @@ class NeoIntersectionObserver extends Base {
         }
     }
 
+    /**
+     * Storing data from observe() calls which arrived prior to register()
+     * @member {Object} map={}
+     * @protected
+     */
+    cache = {}
     /**
      * Storing component ids and their IntersectionObservers
      * @member {Object} map={}
@@ -77,17 +83,29 @@ class NeoIntersectionObserver extends Base {
      * @param {Boolean} data.disconnect=false true removes all currently observed targets
      * @param {String} data.id
      * @param {String} data.observe The querySelector to match elements
+     * @returns {Boolean} true in case the targets got observed, false in case they got cached prior to a register() call
      */
     observe(data) {
         let me       = this,
+            cache    = me.cache,
             targets  = document.querySelectorAll(data.observe),
             observer = me.map[data.id];
 
-        data.disconnect && observer.disconnect();
+        if (observer) {
+            data.disconnect && observer.disconnect();
 
-        targets.forEach(target => {
-            observer.observe(target)
-        })
+            targets.forEach(target => {
+                observer.observe(target)
+            })
+        } else {
+            if (!cache[data.id]) {
+                cache[data.id] = []
+            }
+
+            cache[data.id].push(data);
+        }
+
+        return !!observer
     }
 
     /**
@@ -101,6 +119,7 @@ class NeoIntersectionObserver extends Base {
      */
     register(data) {
         let me      = this,
+            cache   = me.cache,
             targets = data.observe && document.querySelectorAll(data.observe),
             observer;
 
@@ -114,7 +133,12 @@ class NeoIntersectionObserver extends Base {
 
         targets?.forEach(target => {
             observer.observe(target)
-        })
+        });
+
+        if (cache[data.id]) {
+            cache[data.id].forEach(item => me.observe(item));
+            delete cache[data.id]
+        }
     }
 
     /**