diff --git a/apps/v4/content/docs/components/dropdown-menu.mdx b/apps/v4/content/docs/components/dropdown-menu.mdx index 162f7d7a51..39af9d2b3f 100644 --- a/apps/v4/content/docs/components/dropdown-menu.mdx +++ b/apps/v4/content/docs/components/dropdown-menu.mdx @@ -93,3 +93,19 @@ import { name="dropdown-menu-radio-group" description="A dropdown menu with radio items." /> + +### Dialog + +This example shows how to open a dialog from a dropdown menu. + +Use `modal={false}` on the `DropdownMenu` component. + +```tsx showLineNumbers + + + + + +``` + + diff --git a/apps/v4/public/r/styles/new-york-v4/dropdown-menu-dialog.json b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-dialog.json new file mode 100644 index 0000000000..061e6f697c --- /dev/null +++ b/apps/v4/public/r/styles/new-york-v4/dropdown-menu-dialog.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "dropdown-menu-dialog", + "type": "registry:example", + "registryDependencies": [ + "dropdown-menu", + "dialog", + "button", + "input", + "label" + ], + "files": [ + { + "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx", + "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n \n \n \n \n \n File Actions\n \n setShowNewDialog(true)}>\n New File...\n \n setShowShareDialog(true)}>\n Share...\n \n Download\n \n \n \n \n \n \n Create New File\n \n Provide a name for your new file. Click create when you're\n done.\n \n \n \n \n File Name\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Share File\n \n Anyone with the link will be able to view this file.\n \n \n \n \n \n \n \n \n Message (Optional)\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ] +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/new-york-v4/registry.json b/apps/v4/public/r/styles/new-york-v4/registry.json index 50a41f14fd..04d5cd42ac 100644 --- a/apps/v4/public/r/styles/new-york-v4/registry.json +++ b/apps/v4/public/r/styles/new-york-v4/registry.json @@ -4710,6 +4710,23 @@ } ] }, + { + "name": "dropdown-menu-dialog", + "type": "registry:example", + "registryDependencies": [ + "dropdown-menu", + "dialog", + "button", + "input", + "label" + ], + "files": [ + { + "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx", + "type": "registry:example" + } + ] + }, { "name": "hover-card-demo", "type": "registry:example", diff --git a/apps/v4/registry.json b/apps/v4/registry.json index 50a41f14fd..04d5cd42ac 100644 --- a/apps/v4/registry.json +++ b/apps/v4/registry.json @@ -4710,6 +4710,23 @@ } ] }, + { + "name": "dropdown-menu-dialog", + "type": "registry:example", + "registryDependencies": [ + "dropdown-menu", + "dialog", + "button", + "input", + "label" + ], + "files": [ + { + "path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx", + "type": "registry:example" + } + ] + }, { "name": "hover-card-demo", "type": "registry:example", diff --git a/apps/v4/registry/__index__.tsx b/apps/v4/registry/__index__.tsx index 146297a4c0..3fadf601d8 100644 --- a/apps/v4/registry/__index__.tsx +++ b/apps/v4/registry/__index__.tsx @@ -5804,6 +5804,24 @@ export const Index: Record = { categories: undefined, meta: undefined, }, + "dropdown-menu-dialog": { + name: "dropdown-menu-dialog", + description: "", + type: "registry:example", + registryDependencies: ["dropdown-menu","dialog","button","input","label"], + files: [{ + path: "registry/new-york-v4/examples/dropdown-menu-dialog.tsx", + type: "registry:example", + target: "" + }], + component: React.lazy(async () => { + const mod = await import("@/registry/new-york-v4/examples/dropdown-menu-dialog.tsx") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name + return { default: mod.default || mod[exportName] } + }), + categories: undefined, + meta: undefined, + }, "hover-card-demo": { name: "hover-card-demo", description: "", diff --git a/apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx b/apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx new file mode 100644 index 0000000000..568efb60fa --- /dev/null +++ b/apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx @@ -0,0 +1,115 @@ +"use client" + +import { useState } from "react" +import { MoreHorizontalIcon } from "lucide-react" + +import { Button } from "@/registry/new-york-v4/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/registry/new-york-v4/ui/dialog" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuTrigger, +} from "@/registry/new-york-v4/ui/dropdown-menu" +import { Field, FieldGroup, FieldLabel } from "@/registry/new-york-v4/ui/field" +import { Input } from "@/registry/new-york-v4/ui/input" +import { Label } from "@/registry/new-york-v4/ui/label" +import { Textarea } from "@/registry/new-york-v4/ui/textarea" + +export default function DropdownMenuDialog() { + const [showNewDialog, setShowNewDialog] = useState(false) + const [showShareDialog, setShowShareDialog] = useState(false) + + return ( + <> + + + + + + File Actions + + setShowNewDialog(true)}> + New File... + + setShowShareDialog(true)}> + Share... + + Download + + + + + + + Create New File + + Provide a name for your new file. Click create when you're + done. + + + + + File Name + + + + + + + + + + + + + + + Share File + + Anyone with the link will be able to view this file. + + + + + + + + + Message (Optional) +