feat: dropdown menu dialog item

apps/www/components/examples/dropdown-menu/dialog-items.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@/components/ui/button"
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuDialogItem,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function DropdownMenuDialogItemsDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Dialog items</DropdownMenuLabel>
+          <DropdownMenuDialogItem trigger="Open Dialog">
+            <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                <DialogTitle>Dialog 1</DialogTitle>
+                <DialogDescription>Hello from Dialog 1</DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <Button type="submit">Save changes</Button>
+              </DialogFooter>
+            </DialogContent>
+          </DropdownMenuDialogItem>
+          <DropdownMenuDialogItem trigger="Open Dialog 2">
+            <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                <DialogTitle>Dialog 2</DialogTitle>
+                <DialogDescription>Hello from Dialog 2</DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <Button type="submit">Save changes</Button>
+              </DialogFooter>
+            </DialogContent>
+          </DropdownMenuDialogItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/www/components/ui/dropdown-menu.tsx

@@ -5,6 +5,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { Dialog, DialogTrigger } from "./dialog"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -184,6 +185,36 @@ const DropdownMenuShortcut = ({
 }
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
+const DropdownMenuDialogItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    trigger: React.ReactNode
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    onSelect?: () => void
+  }
+>(({ trigger, children, open, onOpenChange, onSelect, ...props }, ref) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem
+          ref={ref}
+          onSelect={(event) => {
+            event.preventDefault()
+            onSelect && onSelect()
+          }}
+          {...props}
+        >
+          {trigger}
+        </DropdownMenuItem>
+      </DialogTrigger>
+      {children}
+    </Dialog>
+  )
+})
+DropdownMenuDialogItem.displayName = "DropdownMenuDialogItem"
+
 export {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -200,4 +231,5 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
+  DropdownMenuDialogItem,
 }

apps/www/content/docs/primitives/dropdown-menu.mdx

@@ -69,3 +69,9 @@ import {
 <ComponentExample src="/components/examples/dropdown-menu/radio-group.tsx">
   <DropdownMenuRadioGroupDemo />
 </ComponentExample>
+
+### Dialog
+
+<ComponentExample src="/components/examples/dropdown-menu/dialog-items.tsx">
+  <DropdownMenuDialogItemsDemo />
+</ComponentExample>