@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/llms/components/navigation/DropdownMenu.md

@@ -0,0 +1,602 @@
+# DropdownMenu
+
+Story: @alexgorbatchev/shadcn/components/navigation/DropdownMenu
+Source: src/components/stories/navigation/DropdownMenu.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/DropdownMenu.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, Button, DirectionProvider, Avatar, AvatarImage, AvatarFallback } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+import {
+  BellIcon,
+  MailIcon,
+  MessageSquareIcon,
+  CreditCardIcon,
+  WalletIcon,
+  Building2Icon,
+  FileIcon,
+  SaveIcon,
+  TrashIcon,
+  SettingsIcon,
+  LogOutIcon,
+} from "lucide-react";
+```
+
+## Default component
+
+```tsx
+DropdownMenu
+```
+
+## Default render
+
+```tsx
+(args) => (<DropdownMenu {...args}>
+      <DropdownMenuTrigger render={<Button variant="outline"/>}>Project menu</DropdownMenuTrigger>
+      <DropdownMenuContent className={contentClassName}>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className={labelClassName}>Project</DropdownMenuLabel>
+          <DropdownMenuItem className={itemClassName} onClick={onSelect}>
+            Open<DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem disabled>Archive</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger className={subTriggerClassName}>Share</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className={subContentClassName}>
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={onSelect}>Copy link</DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator className={separatorClassName}/>
+        <DropdownMenuGroup>
+          <DropdownMenuCheckboxItem className={checkboxClassName} defaultChecked>
+            Notifications
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup defaultValue="daily">
+          <DropdownMenuRadioItem value="daily">Daily</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem className={radioClassName} value="weekly">
+            Weekly
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem variant="destructive" onClick={onSelect}>
+            Delete project
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>)
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### AnchorWidth
+
+```tsx
+{
+    render: () => (<DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline"/>}>Choose a workspace action</DropdownMenuTrigger>
+      <DropdownMenuContent width="anchor">
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Open</DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>)
+}
+```
+
+### IconTriggerContentWidth
+
+```tsx
+{
+    render: () => (<DropdownMenu>
+      <DropdownMenuTrigger render={<Button size="icon-sm" aria-label="Track actions"/>}>
+        <FileIcon />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Remove from collection…</DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>)
+}
+```
+
+### Default
+
+```tsx
+{}
+```
+
+### Open
+
+```tsx
+{
+    args: { defaultOpen: true }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### RightToLeftSubmenu
+
+```tsx
+{
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftInset
+
+```tsx
+{
+    decorators: RightToLeft.decorators,
+    render: (args) => (<DropdownMenu {...args}>
+      <DropdownMenuTrigger render={<Button variant="outline"/>}>Inset menu</DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel inset>Document actions</DropdownMenuLabel>
+          <DropdownMenuItem inset>
+            New document<DropdownMenuShortcut>Ctrl+N</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger inset>Share document</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuGroup>
+                <DropdownMenuItem>Copy document link</DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>)
+}
+```
+
+### Payload
+
+```tsx
+{
+    render: () => (<DropdownMenu<string>>
+      {({ payload }) => (<>
+          <DropdownMenuTrigger<string> payload="Project alpha" render={<Button variant="outline"/>}>
+            Alpha actions
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>{payload?.toUpperCase()}</DropdownMenuLabel>
+              <DropdownMenuItem>Open project</DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </>)}
+    </DropdownMenu>)
+}
+```
+
+### Checkboxes
+
+```tsx
+{
+    render: () => <NotificationMenu />
+}
+```
+
+### CheckboxIcons
+
+```tsx
+{
+    render: () => <NotificationMenu hasIcons/>
+}
+```
+
+### RightToLeftCheckboxIcons
+
+```tsx
+{
+    render: () => <NotificationMenu hasIcons/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RadioGroup
+
+```tsx
+{
+    render: () => <PaymentMenu />
+}
+```
+
+### RadioIcons
+
+```tsx
+{
+    render: () => <PaymentMenu hasIcons/>
+}
+```
+
+### RightToLeftRadioIcons
+
+```tsx
+{
+    render: () => <PaymentMenu hasIcons/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### Icons
+
+```tsx
+{
+    render: function Render() {
+        const [action, setAction] = useState("No action");
+        return (<div className="flex flex-col items-start gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button variant="outline"/>}>File actions</DropdownMenuTrigger>
+          <DropdownMenuContent className="min-w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>File</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => setAction("Created")}>
+                <FileIcon aria-hidden="true"/>
+                New file<DropdownMenuShortcut>Ctrl+N</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setAction("Saved")}>
+                <SaveIcon aria-hidden="true"/>
+                Save<DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="File action">{action}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftIcons
+
+```tsx
+{
+    render: function Render() {
+        const [action, setAction] = useState("No action");
+        return (<div className="flex flex-col items-start gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button variant="outline"/>}>File actions</DropdownMenuTrigger>
+          <DropdownMenuContent className="min-w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>File</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => setAction("Created")}>
+                <FileIcon aria-hidden="true"/>
+                New file<DropdownMenuShortcut>Ctrl+N</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setAction("Saved")}>
+                <SaveIcon aria-hidden="true"/>
+                Save<DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="File action">{action}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Destructive
+
+```tsx
+{
+    render: function Render() {
+        const [isPresent, setIsPresent] = useState(true);
+        return (<div className="flex flex-col items-start gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button variant="outline"/>}>Draft actions</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Discard draft</DropdownMenuLabel>
+              <DropdownMenuItem variant="destructive" disabled={!isPresent} onClick={() => setIsPresent(false)}>
+                <TrashIcon aria-hidden="true"/>
+                Discard draft
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="Draft status">{isPresent ? "Draft available" : "Draft discarded"}</output>
+      </div>);
+    }
+}
+```
+
+### AvatarAccount
+
+```tsx
+{
+    render: function Render() {
+        const [action, setAction] = useState("Signed in");
+        return (<div className="flex flex-col items-start gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger aria-label="Account menu" render={<Button variant="ghost" size="icon"/>}>
+            <Avatar>
+              <AvatarImage src={fixture_avatarImage} alt="Alex"/>
+              <AvatarFallback>AG</AvatarFallback>
+            </Avatar>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Alex</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => setAction("Account settings opened")}>
+                <SettingsIcon aria-hidden="true"/>
+                Account settings
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem onClick={() => setAction("Signed out")}>
+                <LogOutIcon aria-hidden="true"/>
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="Account status">{action}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftAvatarAccount
+
+```tsx
+{
+    render: function Render() {
+        const [action, setAction] = useState("Signed in");
+        return (<div className="flex flex-col items-start gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger aria-label="Account menu" render={<Button variant="ghost" size="icon"/>}>
+            <Avatar>
+              <AvatarImage src={fixture_avatarImage} alt="Alex"/>
+              <AvatarFallback>AG</AvatarFallback>
+            </Avatar>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Alex</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => setAction("Account settings opened")}>
+                <SettingsIcon aria-hidden="true"/>
+                Account settings
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem onClick={() => setAction("Signed out")}>
+                <LogOutIcon aria-hidden="true"/>
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="Account status">{action}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Complex
+
+```tsx
+{
+    render: function Render() {
+        const [action, setAction] = useState("No action");
+        const [sidebar, setSidebar] = useState(true);
+        const [theme, setTheme] = useState("light");
+        const [push, setPush] = useState(false);
+        return (<div className="flex flex-col items-start gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button variant="outline"/>}>Workspace actions</DropdownMenuTrigger>
+          <DropdownMenuContent className="min-w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>File</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => setAction("Created")}>
+                <FileIcon aria-hidden="true"/>
+                New file<DropdownMenuShortcut>Ctrl+N</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Recent projects</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Recent</DropdownMenuLabel>
+                    <DropdownMenuItem onClick={() => setAction("Alpha opened")}>Alpha</DropdownMenuItem>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>More projects</DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuGroup>
+                          <DropdownMenuItem onClick={() => setAction("Gamma opened")}>Gamma</DropdownMenuItem>
+                        </DropdownMenuGroup>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>View</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem checked={sidebar} onCheckedChange={setSidebar}>
+                Show sidebar
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+                    <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                      <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Account</DropdownMenuLabel>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <SettingsIcon aria-hidden="true"/>
+                  Settings
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <BellIcon aria-hidden="true"/>
+                        Notifications
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuGroup>
+                          <DropdownMenuCheckboxItem checked={push} onCheckedChange={setPush}>
+                            <BellIcon aria-hidden="true"/>
+                            Push notifications
+                          </DropdownMenuCheckboxItem>
+                        </DropdownMenuGroup>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="Workspace preferences" dir="ltr">
+          {JSON.stringify({ action, sidebar, theme, push })}
+        </output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftComplex
+
+```tsx
+{
+    render: function Render() {
+        const [action, setAction] = useState("No action");
+        const [sidebar, setSidebar] = useState(true);
+        const [theme, setTheme] = useState("light");
+        const [push, setPush] = useState(false);
+        return (<div className="flex flex-col items-start gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button variant="outline"/>}>Workspace actions</DropdownMenuTrigger>
+          <DropdownMenuContent className="min-w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>File</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => setAction("Created")}>
+                <FileIcon aria-hidden="true"/>
+                New file<DropdownMenuShortcut>Ctrl+N</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Recent projects</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Recent</DropdownMenuLabel>
+                    <DropdownMenuItem onClick={() => setAction("Alpha opened")}>Alpha</DropdownMenuItem>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>More projects</DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuGroup>
+                          <DropdownMenuItem onClick={() => setAction("Gamma opened")}>Gamma</DropdownMenuItem>
+                        </DropdownMenuGroup>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>View</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem checked={sidebar} onCheckedChange={setSidebar}>
+                Show sidebar
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+                    <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                      <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Account</DropdownMenuLabel>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <SettingsIcon aria-hidden="true"/>
+                  Settings
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <BellIcon aria-hidden="true"/>
+                        Notifications
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuGroup>
+                          <DropdownMenuCheckboxItem checked={push} onCheckedChange={setPush}>
+                            <BellIcon aria-hidden="true"/>
+                            Push notifications
+                          </DropdownMenuCheckboxItem>
+                        </DropdownMenuGroup>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <output aria-label="Workspace preferences" dir="ltr">
+          {JSON.stringify({ action, sidebar, theme, push })}
+        </output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```