native-document 1.0.285 → 1.0.286

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.285",
+  "version": "1.0.286",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/ui/components/menu/MenuItemRender.js

@@ -1,7 +1,7 @@
 import {Div, ListItem, Span } from '../../../core/elements';
 import ShortcutManager from '../../../core/utils/shortcut-manager';
 import { $ } from '../../../core/data/Observable';
-import {buildSubmenu, setupInteraction} from './helpers';
+import {applyIsActive, buildSubmenu, setupInteraction} from './helpers';
 
 export default function MenuItemRender($desc, instance) {
     if($desc.render) {
@@ -18,6 +18,8 @@ export default function MenuItemRender($desc, instance) {
         props.class.add('is-selected', $desc.selected);
     }
 
+    applyIsActive(instance, $desc, props);
+
     const orientation  = instance.$parent?.$description?.orientation || 'horizontal';
     const interaction  = $desc.interaction || instance.$parent?.$description?.interaction || 'hover';
     const hasSubmenu   = $desc.items?.length;

package/src/ui/components/menu/MenuLinkRender.js

@@ -2,7 +2,7 @@ import {Link, ListItem, Span} from '../../../core/elements';
 import { Link as RouterLink } from '../../../../router';
 import ShortcutManager from '../../../core/utils/shortcut-manager';
 import { $ } from '../../../core/data/Observable';
-import {buildSubmenu, setupInteraction} from './helpers';
+import {applyIsActive, buildSubmenu, setupInteraction} from './helpers';
 
 export default function MenuLinkRender($desc, instance) {
     if($desc.render) {
@@ -14,6 +14,9 @@ export default function MenuLinkRender($desc, instance) {
     props.class.add('menu-item');
     props.class.add({ 'is-disabled': $desc.disabled, 'is-selected': $desc.selected });
 
+
+    applyIsActive(instance, $desc, props);
+
     const orientation  = instance.$parent?.$description?.orientation || 'horizontal';
     const interaction  = $desc.interaction || instance.$parent?.$description?.interaction || 'hover';
     const hasSubmenu   = $desc.items?.length;
@@ -56,7 +59,7 @@ export default function MenuLinkRender($desc, instance) {
         return ListItem(instance.resolveProps(), el);
     }
 
-    const $isOpen   = $(false);
+    const $isOpen = $(false);
     const submenuEl = buildSubmenu($desc, orientation, $isOpen, instance);
     const listItem  = ListItem(instance.resolveProps(), [el, submenuEl]);
 

package/src/ui/components/menu/MenuRender.js

@@ -23,5 +23,4 @@ export default function MenuRender($desc, instance) {
     }
 
     return nav;
-
 }

package/src/ui/components/menu/helpers.js

@@ -119,4 +119,13 @@ export const setupInteraction = (listItem, el, submenuEl, orientation, interacti
         $activeItem?.set(null);
     });
 
-};
+};
+
+
+export function applyIsActive(instance, $description, props) {
+    const root = instance.getRoot();
+    if(root && root.$description.active) {
+        const isActive = root.active($description);
+        props.class.add({ 'is-active': isActive });
+    }
+}