fix(menu): fix menu & submenu trigger 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.44.0",
+    "ng-primitives": "^0.46.0",
     "ngx-highlightjs": "^14.0.0",
     "postcss": "^8.5.3",
     "rxjs": "~7.8.0",
@@ -58,4 +58,4 @@
     "tw-animate-css": "^1.3.0",
     "typescript": "~5.7.2"
   }
-}
+}

package.json

@@ -1,15 +1,14 @@
 import { computed, Directive, effect, input, TemplateRef } from '@angular/core';
-import { NgpMenu, NgpMenuItem, NgpMenuTrigger } from "ng-primitives/menu";
-import { injectPopoverTriggerState } from 'ng-primitives/popover';
+import { NgpMenu, NgpMenuItem, NgpMenuTrigger, NgpSubmenuTrigger } from "ng-primitives/menu";
 import { tv } from 'tailwind-variants';
 
 const menuVariants = tv({
     slots: {
-        base: 'absolute bg-popover text-popover-foreground data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 data-[exit]:zoom-out-95 data-[enter]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--ngp-popover-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border p-1 shadow-md',
-        itemVariant: "w-full data-[focus-visible]:bg-accent data-[focus-visible]:text-accent-foreground data-[hover]:bg-accent data-[hover]:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        base: 'absolute bg-popover text-popover-foreground data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 data-[exit]:zoom-out-95 data-[enter]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--ngp-menu-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border p-1 shadow-md',
+        itemVariant: "w-full data-[focus-visible]:bg-accent data-[focus-visible]:text-accent-foreground data-[hover]:bg-accent data-[hover]:text-accent-foreground data-[open]:bg-accent data-[open]:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         shortcutVariant: 'text-muted-foreground ml-auto text-xs tracking-widest',
         separatorVariant: 'bg-border -mx-1 my-1 h-px',
-        labelVariant: 'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        labelVariant: 'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8'
     }
 });
 
@@ -31,16 +30,12 @@ export class UiMenu {
 @Directive({
     selector: '[uiMenuTrigger]',
     exportAs: 'uiMenuTrigger',
-    hostDirectives: [NgpMenuTrigger],
+    hostDirectives: [{
+        directive: NgpMenuTrigger,
+        inputs: ['ngpMenuTrigger: uiMenuTrigger']
+    }],
 })
 export class UiMenuTrigger {
-    private readonly state = injectPopoverTriggerState();
-    readonly trigger = input.required<TemplateRef<any>>({
-        alias: 'uiMenuTrigger',
-    });
-    constructor() {
-        effect(() => this.state().popover.set(this.trigger()));
-    }
 }
 
 @Directive({
@@ -90,4 +85,17 @@ export class UiMenuLabel {
 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']
+    }],
+})
+export class UiSubmenuTrigger {
+    inputClass = input<string>('', { alias: 'class' });
+    computedClass = computed(() => itemVariant({ class: this.inputClass() }));
 }

projects/core/src/lib/menu.ts

@@ -26,7 +26,6 @@ <h1 class="text-2xl font-semibold">Dropdown Menu</h1>
                 <button uiMenuItem disabled>API</button>
                 <div uiMenuSeparator></div>
                 <button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
-
             </div>
         </ng-template>
     </docs-example>
@@ -39,4 +38,37 @@ <h2 class="text-xl font-semibold my-5 border-b border-border pb-3  mt-10" id="in
 <h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="usage">Usage</h2>
 
 <docs-code-view [code]="importCode"></docs-code-view>
-<docs-code-view class="mt-5 block" [code]="usageCode" language="html"></docs-code-view>
+<docs-code-view class="mt-5 block" [code]="usageCode" language="html"></docs-code-view>
+
+<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="examples">Examples</h2>
+
+<div class="mt-5">
+    <h3 class="text-lg font-semibold mb-3" id="default">Default</h3>
+    <docs-example [code]="AVATAR_CODES.DEFAULT">
+        <button uiButton variant="outline" [uiMenuTrigger]="menu1">Open</button>
+        <ng-template #menu1>
+            <div uiMenu class="w-56">
+                <div uiMenuLabel>My Account</div>
+                <div uiMenuSeparator></div>
+                <button uiMenuItem>Profile <div uiMenuShortcut>⇧⌘P</div></button>
+                <button uiMenuItem>Billing <div uiMenuShortcut>⌘B</div></button>
+                <button uiMenuItem>Settings <div uiMenuShortcut>⌘S</div></button>
+                <button uiMenuItem>Keyboard shortcuts <div uiMenuShortcut>⌘K</div></button>
+                <div uiMenuSeparator></div>
+                <button uiMenuItem>Github</button>
+                <button uiMenuItem>Support</button>
+                <button uiMenuItem [uiSubmenuTrigger]="submenu">API <div uiMenuShortcut><ng-icon
+                            name="bootstrapChevronRight" /></div></button>
+                <div uiMenuSeparator></div>
+                <button uiMenuItem>Logout <div uiMenuShortcut>⇧⌘Q</div></button>
+            </div>
+        </ng-template>
+        <ng-template #submenu>
+            <div uiMenu>
+                <button uiMenuItem>Item 1</button>
+                <button uiMenuItem>Item 2</button>
+                <button uiMenuItem>Item 3</button>
+            </div>
+        </ng-template>
+    </docs-example>
+</div>

projects/docs/src/app/pages/docs/components/dropdown-menu/dropdown-menu.component.html

@@ -1,14 +1,17 @@
 import { Component } from '@angular/core';
 import { AvatarCodeConstants } from './dropdown-menu.constants';
-import { UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiButton } from '@angularui/core';
+import { UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiButton, UiSubmenuTrigger } from '@angularui/core';
 import { InstallationGuideComponent } from '../../../../components/installation-guide/installation-guide.component';
 import { CodeViewComponent } from '../../../../components/code-view/code-view.component';
 import { ExampleComponent } from '../../../../components/example/example.component';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { bootstrapChevronRight } from '@ng-icons/bootstrap-icons';
 
 @Component({
   selector: 'docs-dropdown-menu',
-  imports: [ExampleComponent, CodeViewComponent, InstallationGuideComponent, UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiButton],
-  templateUrl: './dropdown-menu.component.html'
+  imports: [ExampleComponent, CodeViewComponent, InstallationGuideComponent, UiMenu, UiMenuTrigger, UiMenuItem, UiMenuLabel, UiMenuSeparator, UiMenuShortcut, UiSubmenuTrigger, UiButton, NgIcon],
+  templateUrl: './dropdown-menu.component.html',
+  viewProviders: [provideIcons({ bootstrapChevronRight })],
 })
 export class DropdownMenuComponent {
   importCode = `import { AvatarDirective, AvatarFallbackDirective, AvatarImageDirective } from '@angularui/core';`