fix(menu): submenu flickering issue

Author: immohammadjaved

package-lock.json

@@ -30,7 +30,7 @@
     "@ng-icons/lucide": "^31.4.0",
     "@tailwindcss/postcss": "^4.0.15",
     "express": "^4.18.2",
-    "ng-primitives": "^0.46.0",
+    "ng-primitives": "^0.47.0",
     "ngx-highlightjs": "^14.0.0",
     "postcss": "^8.5.3",
     "rxjs": "~7.8.0",

package.json

@@ -1,4 +1,4 @@
-import { computed, Directive, effect, input, TemplateRef } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { NgpMenu, NgpMenuItem, NgpMenuTrigger, NgpSubmenuTrigger } from "ng-primitives/menu";
 import { NgpSeparator } from 'ng-primitives/separator';
 import { tv } from 'tailwind-variants';
@@ -33,12 +33,36 @@ export class UiMenu {
     exportAs: 'uiMenuTrigger',
     hostDirectives: [{
         directive: NgpMenuTrigger,
-        inputs: ['ngpMenuTrigger: uiMenuTrigger']
+        inputs: [
+            'ngpMenuTrigger: uiMenuTrigger',
+            'ngpMenuTriggerDisabled: uiMenuTriggerDisabled',
+            'ngpMenuTriggerPlacement: uiMenuTriggerPlacement',
+            'ngpMenuTriggerOffset: uiMenuTriggerOffset',
+            'ngpMenuTriggerFlip: uiMenuTriggerFlip',
+            'ngpMenuTriggerContainer: uiMenuTriggerContainer',
+            'ngpMenuTriggerScrollBehavior: uiMenuTriggerScrollBehavior',
+            'ngpMenuTriggerContext: uiMenuTriggerContext'
+        ]
     }],
 })
 export class UiMenuTrigger {
 }
 
+@Directive({
+    selector: '[uiMenuItem]',
+    exportAs: 'uiMenuItem',
+    hostDirectives: [{
+        directive: NgpMenuItem
+    }],
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UiMenuItem {
+    inputClass = input<string>('', { alias: 'class' });
+    computedClass = computed(() => itemVariant({ class: this.inputClass() }));
+}
+
 @Directive({
     selector: '[uiMenuShortcut]',
     exportAs: 'uiMenuShortcut',
@@ -76,25 +100,18 @@ export class UiMenuLabel {
     computedClass = computed(() => labelVariant({ class: this.inputClass() }));
 }
 
-@Directive({
-    selector: '[uiMenuItem]',
-    exportAs: 'uiMenuItem',
-    hostDirectives: [NgpMenuItem],
-    host: {
-        '[class]': 'computedClass()'
-    }
-})
-export class UiMenuItem {
-    inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => itemVariant({ class: this.inputClass() }));
-}
-
 @Directive({
     selector: '[uiSubmenuTrigger]',
     exportAs: 'uiSubmenuTrigger',
     hostDirectives: [{
         directive: NgpSubmenuTrigger,
-        inputs: ['ngpSubmenuTrigger: uiSubmenuTrigger']
+        inputs: [
+            'ngpSubmenuTrigger: uiSubmenuTrigger',
+            'ngpSubmenuTriggerDisabled: uiSubmenuTriggerDisabled',
+            'ngpSubmenuTriggerPlacement: uiSubmenuTriggerPlacement',
+            'ngpSubmenuTriggerOffset: uiSubmenuTriggerOffset',
+            'ngpSubmenuTriggerFlip: uiSubmenuTriggerFlip'
+        ]
     }],
 })
 export class UiSubmenuTrigger {

projects/core/src/lib/menu.ts

@@ -23,7 +23,7 @@ <h1 class="text-2xl font-semibold">Dropdown Menu</h1>
                 <div uiMenuSeparator></div>
                 <button uiMenuItem>Github</button>
                 <button uiMenuItem>Support</button>
-                <button uiMenuItem disabled>API</button>
+                <button uiMenuItem>API</button>
                 <div uiMenuSeparator></div>
                 <button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
             </div>