neo.mjs 7.0.6 → 7.2.0

package/resources/data/deck/learnneo/tree.json

@@ -1,50 +1,47 @@
 {"data": [
-    {"name":  "Welcome!",                                   "parentId": null,                "isLeaf":  true, "id": "Welcome" },
-    {"name": "Benefits",                                    "parentId": null,                "isLeaf": false, "id": "WhyNeo"},
-        {"name": "Introduction ",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Intro"},
-        {"name": "Off the Main Thread",                     "parentId": "WhyNeo",            "isLeaf": true,  "id": "benefits.Multi-Threading"},
-        {"name": "Extreme Speed",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Speed"},
-        {"name": "Multi-Window Applications",               "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Window"},
-        {"name": "Quick Application Development",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Quick"},
-        {"name": "Complexity and Effort",                   "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Effort"},
-        {"name": "Forms Engine",                            "parentId": "WhyNeo",            "isLeaf": true,  "id": "benefits.FormsEngine"},
-        {"name": "Features and Benefits Summary",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Features"},
-    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed":  true},
-        {"name": "Setup",                                   "parentId": "GettingStarted",    "isLeaf": true,  "id": "Setup"},
-        {"name": "Workspaces and Applications",             "parentId": "GettingStarted",    "isLeaf": true,  "id": "2023-10-14T19-25-08-153Z"},
-        {"name": "Describing a View",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "DescribingTheUI"},
-        {"name": "Events",                                  "parentId": "GettingStarted",    "isLeaf": true,  "id": "Events"},
-        {"name": "Component References",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "References"},
-        {"name": "Extending Classes",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "Extending"},
-        {"name": "Config",                                  "parentId": "GettingStarted",    "isLeaf": true,  "id": "Config"},
-        {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "ComponentModels"},
-    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials",  "collapsed":  true},
-        {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "RSP", "hidden":  true},
-        {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes", "collapsed":  true},
-        {"name": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
-    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth",  "collapsed":  true},
-        {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
-        {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle", "hidden":  true},
-        {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms",  "hidden":  true},
-        {"name": "Component and Container Basics",          "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
-        {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts", "hidden":  true},
-        {"name": "View Models",                             "parentId": "InDepth",           "isLeaf": true,  "id": "GuideViewModels"},
-        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": true,  "id": "CustomComponents", "hidden":  true},
-        {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},
-        {"name": "Tables (Stores)",                         "parentId": "InDepth",           "isLeaf": false, "id": "Tables", "hidden":  true},
-        {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",           "isLeaf": false, "id": "InDepthComponentModels", "hidden":  true},
-        {"name": "Multi-Window Applications",               "parentId": "InDepth",           "isLeaf": false, "id": "MultiWindow", "hidden":  true},
-        {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden":  true},
-            {"name": "Introduction",                        "parentId": "MainThreadAddons",  "isLeaf": true,  "id": "MainThreadAddonIntro"},
-            {"name": "Example",                             "parentId": "MainThreadAddons",  "isLeaf": true,  "id": "MainThreadAddonExample"},
-        {"name": "Mixins",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Mixins", "hidden":  true},
-    {"name": "JavaScript Classes",                          "parentId": null,                "isLeaf": false, "id": "JavaScriptClasses", "hidden":  true},
-        {"name": "Classes, Properties, and Methods",        "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-07T19-18-28-517Z"},
-        {"name": "Overriding Methods",                      "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-07-934Z"},
-        {"name": "Other JavaScript Class Features",         "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-37-336Z"},
-        {"name": "Super",                                   "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T21-58-25-809Z"},
-        {"name": "New Node",                                "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-31T13-59-37-550Z"},
-    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix",  "hidden":  true, "collapsed":  true},
-        {"name": "Stylesheet",                              "parentId": "appendix",          "isLeaf": true,  "id": "stylesheet"},
-        {"name": "Test",                                    "parentId": "appendix",          "isLeaf": true,  "id": "TestLivePreview"}
+    {"name": "Welcome!",                                    "parentId": null,                                 "id": "Welcome" },
+    {"name": "Benefits",                                    "parentId": null,                "isLeaf": false, "id": "Benefits"},
+        {"name": "Introduction ",                           "parentId": "Benefits",                           "id": "benefits.Introduction"},
+        {"name": "Off the Main Thread",                     "parentId": "Benefits",                           "id": "benefits.Multi-Threading"},
+        {"name": "Extreme Speed",                           "parentId": "Benefits",                           "id": "benefits.Speed"},
+        {"name": "Multi-Window Applications",               "parentId": "Benefits",                           "id": "benefits.Multi-Window"},
+        {"name": "Quick Application Development",           "parentId": "Benefits",                           "id": "benefits.Quick"},
+        {"name": "Complexity and Effort",                   "parentId": "Benefits",                           "id": "benefits.Effort"},
+        {"name": "Forms Engine",                            "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
+        {"name": "Features and Benefits Summary",           "parentId": "Benefits",                           "id": "benefits.Features"},
+    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
+        {"name": "Setup",                                   "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
+        {"name": "Workspaces and Applications",             "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
+        {"name": "Describing a View",                       "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
+        {"name": "Events",                                  "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
+        {"name": "Component References",                    "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
+        {"name": "Extending Classes",                       "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
+        {"name": "Config",                                  "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
+        {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
+    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
+        {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
+        {"name": "Earthquakes",                             "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
+        {"name": "Todo List",                               "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
+    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
+        {"name": "Instance Lifecycle",                      "parentId": "InDepth",                            "id": "guides.InstanceLifecycle", "hidden": true},
+        {"name": "User Input (Forms)",                      "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
+        {"name": "Component and Container Basics",          "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
+        {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
+        {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",                            "id": "guides.ViewModels"},
+        {"name": "Custom Components",                       "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
+        {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
+            {"name": "Custom Events",                       "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
+            {"name": "DOM Events",                          "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
+        {"name": "Tables (Stores)",                         "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
+        {"name": "Multi-Window Applications",               "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
+        {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},
+            {"name": "Introduction",                        "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonIntro"},
+            {"name": "Example",                             "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonExample"},
+        {"name": "Mixins",                                  "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
+    {"name": "JavaScript Classes",                          "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
+        {"name": "Classes, Properties, and Methods",        "parentId": "JavaScript",                         "id": "javascript.Classes"},
+        {"name": "Overriding Methods",                      "parentId": "JavaScript",                         "id": "javascript.Overrides"},
+        {"name": "Other JavaScript Class Features",         "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
+        {"name": "Super",                                   "parentId": "JavaScript",                         "id": "javascript.Super"},
+        {"name": "New Node",                                "parentId": "JavaScript",                         "id": "javascript.NewNode"}
 ]}

package/resources/scss/src/apps/portal/about/MemberContainer.scss

@@ -1,8 +1,9 @@
 .portal-about-member-container {
-    border   : 1px solid var(--sem-color-border-default);
-    min-width: 600px;
-    padding  : 1em 1em 4em;
-    position : relative;
+    border    : 1px solid var(--sem-color-border-default);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+    min-width : 600px;
+    padding   : 1em 1em 4em;
+    position  : relative;
 
     &:not(:nth-child(2)) {
         margin-top: 1em;

package/resources/scss/src/apps/portal/blog/Container.scss

@@ -14,5 +14,7 @@
 
     .portal-blog-toolbar {
         background-color: var(--portal-blog-toolbar-background-color);
+        box-shadow      : 0 5px 10px rgba(0, 0, 0, 0.3);
+        z-index         : 2;
     }
 }

package/resources/scss/src/apps/portal/examples/List.scss

@@ -0,0 +1,157 @@
+.portal-examples-list.neo-list {
+    transition: padding var(--portal-transition-duration) ease-out;
+
+    .neo-list-item {
+        cursor      : default;
+        display     : flex;
+        max-width   : 800px;
+        overflow    : hidden;
+        padding     : 0;
+        transition  : height var(--portal-transition-duration) ease-out, margin-bottom var(--portal-transition-duration) ease-out;
+        white-space : normal;
+        width       : 100%;
+
+        .content {
+            flex: 1;
+        }
+
+        .neo-absolute {
+            position: absolute;
+        }
+
+        .neo-full-size {
+            height: 100%;
+            width : 100%;
+        }
+
+        .neo-github-image {
+            color                     : #ddd;
+            text-decoration           : none;
+            transition-duration       : var(--portal-transition-duration);
+            transition-property       : font-size, height, width;
+            transition-timing-function: ease-out;
+        }
+
+        .neo-inner-content {
+            color      : #fff;
+            display    : inline-block;
+            margin-left: 10px;
+            text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition : font-size var(--portal-transition-duration) ease-out;
+        }
+
+        .neo-inner-details {
+            transition: line-height var(--portal-transition-duration) ease-out;
+        }
+
+        .neo-item-bottom-position {
+            bottom    : 0;
+            left      : 0;
+            transition: margin var(--portal-transition-duration) ease-out;
+        }
+
+        .neo-relative {
+            position: relative;
+        }
+
+        .neo-title {
+            color          : #fff;
+            font-weight    : 600;
+            line-height    : 1;
+            text-decoration: none;
+            text-shadow    : 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition     : color 250ms ease-out;
+
+            &:hover {
+                color: #5d83a7
+            }
+        }
+
+        .neo-top-20 {
+            align-items: center;
+            display    : flex;
+            transition : margin var(--portal-transition-duration) ease-out;
+        }
+
+        .preview-image {
+            background-blend-mode: overlay;
+            background-size      : cover;
+            height               : 100%;
+        }
+    }
+
+    @media (max-height: 400px), (max-width: 600px) {
+        padding: 5px 5px 0 5px;
+
+        .neo-github-image {
+            font-size: 30px;
+            height   : 30px;
+            width    : 30px;
+        }
+
+        .neo-inner-content {
+            font-size: 12px;
+        }
+
+        .neo-inner-details {
+            line-height: 16px;
+        }
+
+        .neo-item-bottom-position {
+            margin: 9px 12px;
+            right : 15%;
+        }
+
+        .neo-list-item {
+            border-radius: 10px;
+            height       : 200px;
+            margin-bottom: 5px;
+        }
+
+        .neo-title {
+            font-size: 20px;
+        }
+
+        .neo-top-20 {
+            margin-top: 10px;
+        }
+    }
+
+    @media (min-height: 401px) and (min-width: 601px) {
+        padding: 10px 10px 0 10px;
+
+        .neo-github-image {
+            font-size: 44px;
+            height   : 44px;
+            width    : 44px;
+        }
+
+        .neo-inner-content {
+            font-size: 16px;
+        }
+
+        .neo-inner-details {
+            font-size  : 16px;
+            line-height: 22px;
+        }
+
+        .neo-item-bottom-position {
+            margin: 30px 40px;
+            right : 30%;
+        }
+
+        .neo-list-item {
+            border-radius: 20px;
+            height       : 400px;
+            margin-bottom: 10px;
+        }
+
+        .neo-title {
+            font-size: 34px;
+        }
+
+        .neo-top-20 {
+            margin-top: 20px;
+        }
+    }
+}

package/resources/scss/src/apps/portal/examples/TabContainer.scss

@@ -0,0 +1,36 @@
+.portal-examples-tab-container.neo-tab-container {
+    margin   : 0 auto;
+    max-width: 830px;
+}
+
+.portal-examples-tab-header-toolbar.neo-tab-header-toolbar {
+    background-color: #8BA6FF;
+
+    .neo-tab-header-button.neo-button {
+        .neo-button-glyph {
+            color: #fff;
+        }
+
+        .neo-button-ripple {
+            background-color: #3E63DD;
+        }
+
+        &.neo-button.pressed .neo-tab-button-indicator {
+            background-color: #3E63DD;
+        }
+
+        .neo-button-text {
+            color: #fff;
+        }
+
+        &.pressed {
+            .neo-button-glyph {
+                color: #3E63DD;
+            }
+        }
+    }
+
+    .neo-tab-strip .neo-active-tab-indicator {
+        background-color: #3E63DD;
+    }
+}

package/resources/scss/src/button/Base.scss

@@ -73,16 +73,20 @@
     .neo-button-ripple {
         background-color: var(--button-ripple-background-color);
         border-radius   : 50%;
+        padding         : var(--button-padding);
         opacity         : 0;
         position        : absolute;
         transform       : scale(4);
     }
 
     .neo-button-ripple-wrapper {
+        border-radius : var(--button-border-radius);
         height        : 100%;
+        left          : 0;
         overflow      : hidden;
         pointer-events: none;
         position      : absolute;
+        top           : 0;
         width         : 100%;
     }
 

package/resources/scss/src/calendar/view/calendars/ColorsList.scss

@@ -16,5 +16,9 @@
         &.neo-selected {
             box-shadow: 0 0 0 0.25em currentColor;
         }
+
+        &[aria-selected="true"] {
+            outline: none !important;
+        }
     }
 }

package/resources/scss/src/calendar/view/calendars/List.scss

@@ -1,4 +1,4 @@
-.neo-calendars-list.neo-list {
+.neo-calendars-list {
     .neo-checkboxfield {
         align-items: center;
         display    : flex;
@@ -64,6 +64,7 @@
 
         .neo-edit-icon {
             color       : var(--calendars-list-edit-icon-color);
+            cursor      : pointer;
             font-size   : 16px;
             font-weight : 600;
             height      : 1em;

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

@@ -107,6 +107,6 @@
 
 // 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);
+    clip    : rect(0, 0, 0, 0);
+    position: absolute;
 }

package/resources/scss/src/list/Base.scss

@@ -69,9 +69,9 @@
         }
 
         &[aria-selected="true"] {
-            background-color: var(--list-item-background-color-selected) !important;
-            color           : var(--list-item-color-selected) !important;
-            cursor          : default !important;
+            background-color: var(--list-item-background-color-selected);
+            color           : var(--list-item-color-selected);
+            cursor          : default;
         }
 
         .neo-highlight-search {

package/resources/scss/theme-neo-light/button/Base.scss

@@ -45,7 +45,7 @@
     --button-background-gradient-start          : #434749;
     --button-opacity-disabled                   : inherit;
     --button-outline-active                     : none;
-    --button-ripple-background-color            : transparent;
+    --button-ripple-background-color            : #8BA6FF;
     --button-use-gradients                      : false;
 
     // {module: Button; ui: --secondary}  ––––––––––––––––––––––––––––––––––––––––––––––––––
@@ -78,7 +78,7 @@
     --button-secondary-badge-background-color   : transparent;
     --button-secondary-badge-color              : transparent;
     --button-secondary-opacity-disabled         : none;
-    --button-secondary-ripple-background-color  : inherit;
+    --button-secondary-ripple-background-color  : #8BA6FF;
 
 
     // {module: Button; ui: --ghost}  –––––––––––––––––––––––––––––––––––––––––––––––––––––--
@@ -111,7 +111,7 @@
     --button-ghost-badge-background-color       : transparent;
     --button-ghost-badge-color                  : transparent;
     --button-ghost-opacity-disabled             : inherit;
-    --button-ghost-ripple-background-color      : inherit;
+    --button-ghost-ripple-background-color      : #8BA6FF;
 
 
     // {module: Button; ui: --tertiary}  –––––––––––––––––––––––––––––––––––––––––––––––––––

package/src/DefaultConfig.mjs

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

package/src/calendar/view/MainContainer.mjs

@@ -323,11 +323,12 @@ class MainContainer extends Container {
             let me = this;
 
             me._editCalendarContainer = value = Neo.create({
-                module : EditCalendarContainer,
-                appName: me.appName,
-                model  : {parent: me.getModel()},
-                owner  : me,
-                width  : 250,
+                module  : EditCalendarContainer,
+                appName : me.appName,
+                model   : {parent: me.getModel()},
+                owner   : me,
+                width   : 250,
+                windowId: me.windowId,
                 ...me.editCalendarContainerConfig
             })
         }
@@ -499,6 +500,7 @@ class MainContainer extends Container {
             me.items[1].add({
                 module             : module.default,
                 collapsed,
+                minWidth           : me.settingsContainerWidth,
                 removeInactiveCards: me.removeInactiveCards,
                 style              : {marginRight: !collapsed ? '0' : `-${me.settingsContainerWidth}px`},
                 width              : me.settingsContainerWidth,

package/src/calendar/view/calendars/EditContainer.mjs

@@ -64,7 +64,9 @@ class EditContainer extends FormContainer {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        value && this.getField('name').focus();
+        value && this.getField('name').then(field => {
+            field.focus()
+        })
     }
 
     /**
@@ -116,7 +118,6 @@ class EditContainer extends FormContainer {
         if (record) {
             me.colorsList = Neo.create({
                 module      : ColorsList,
-                appName     : me.appName,
                 listeners   : {change: me.onColorChange, scope: me},
                 parentId    : me.parentId,
                 value       : record.color,

package/src/calendar/view/calendars/List.mjs

@@ -66,6 +66,7 @@ class List extends ComponentList {
                 appName  : me.appName,
                 listeners: {change: me.onCheckboxChange, scope: me},
                 parentId : me.id,
+                windowId : me.windowId,
                 ...me.itemDefaults,
                 ...config
             })

package/src/calendar/view/week/Component.mjs

@@ -359,19 +359,21 @@ class Component extends BaseComponent {
                 import('./plugin/DragDrop.mjs'),
                 import('./plugin/EventResizable.mjs')
             ]).then(modules => {
-                let me        = this,
-                    {appName} = me,
-                    plugins   = me.plugins || [];
+                let me                  = this,
+                    {appName, windowId} = me,
+                    plugins             = me.plugins || [];
 
                 plugins.push({
                     module : modules[0].default,
                     appName,
+                    windowId,
                     ...me.pluginDragDropConfig
                 }, {
                     module       : modules[1].default,
                     appName,
                     delegationCls: 'neo-event',
                     directions   : ['b', 't'],
+                    windowId,
                     ...me.pluginEventResizableConfig
                 });
 

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -74,9 +74,9 @@ class DragDrop extends Base {
      * @returns {Neo.calendar.view.week.EventDragZone}
      */
     getEventDragZone(opts) {
-        let me                        = this,
-            {appName, owner}          = me,
-            {eventDragZone, timeAxis} = owner,
+        let me                         = this,
+            {appName, owner, windowId} = me,
+            {eventDragZone, timeAxis}  = owner,
 
             config = {
                 axisEndTime                     : timeAxis.getTime(owner.endTime),
@@ -93,6 +93,7 @@ class DragDrop extends Base {
                 appName,
                 owner,
                 scrollContainerId: owner.getScrollContainer().id,
+                windowId,
                 ...config,
 
                 dragProxyConfig: {

package/src/code/LivePreview.mjs

@@ -4,6 +4,7 @@ import TabContainer from '../tab/Container.mjs';
 
 const
     classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g,
+    classNameRegex        = /className\s*:\s*['"]([^'"]+)['"]/g,
     exportRegex           = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g,
     importRegex           = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
 
@@ -294,6 +295,18 @@ class LivePreview extends Container {
 
         container.removeAll();
 
+        // We must ensure that classes inside the editor won't get cached, since this disables run-time changes
+        // See: https://github.com/neomjs/neo/issues/5863
+        me.findClassNames(codeString).forEach(item => {
+            let nsArray   = item.split('.'),
+                className = nsArray.pop(),
+                ns        = Neo.ns(nsArray);
+
+            if (ns) {
+                delete ns[className]
+            }
+        });
+
         try {
             new Function('container', codeString)(container);
         } catch (error) {
@@ -304,6 +317,21 @@ class LivePreview extends Container {
         }
     }
 
+    /**
+     * @param {String} sourceCode
+     * @returns {String[]}
+     */
+    findClassNames(sourceCode) {
+        let classNames = [],
+            match;
+
+        while ((match = classNameRegex.exec(sourceCode)) !== null) {
+            classNames.push(match[1])
+        }
+
+        return classNames
+    }
+
     /**
      * @param {String} sourceCode
      * @returns {String|null}
@@ -312,7 +340,6 @@ class LivePreview extends Container {
         let lastClassName = null,
             match;
 
-        // Iterate through all matches of the regular expression
         while ((match = classDeclarationRegex.exec(sourceCode)) !== null) {
             // Update the last class name found
             lastClassName = match[1]

package/src/collection/Base.mjs

@@ -76,6 +76,7 @@ class Base extends CoreBase {
         /**
          * A map containing the key & reference of each collection item for faster access
          * @member {Map} map_=null
+         * @protected
          */
         map_: null,
         /**