@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/llms/components/navigation/ContextMenu.md

@@ -0,0 +1,596 @@
+# ContextMenu
+
+Story: @alexgorbatchev/shadcn/components/navigation/ContextMenu
+Source: src/components/stories/navigation/ContextMenu.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/ContextMenu.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, DirectionProvider, Toggle, NativeSelect, NativeSelectOption, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps, ReactElement } from "react";
+import { useState } from "react";
+import { FileIcon, SaveIcon, TrashIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+ContextMenu
+```
+
+## 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.
+
+### Default
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        const [checked, setChecked] = useState(false);
+        const [sort, setSort] = useState("name");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <Button onClick={() => setAction("Link copied")}>Copy project link</Button>
+        <Button disabled>Delete project</Button>
+        <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
+          Show details
+        </Toggle>
+        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
+          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
+          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
+        </NativeSelect>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Project actions">
+            <ContextMenuGroup>
+              <ContextMenuLabel>Project</ContextMenuLabel>
+              <ContextMenuItem className={itemClassName} onClick={() => setAction("Opened")}>
+                Open<ContextMenuShortcut>Enter</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem disabled>Delete</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Show details
+            </ContextMenuCheckboxItem>
+            <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+              <ContextMenuRadioItem value="name">Sort by name</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="date">Sort by date</ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuGroup>
+                  <ContextMenuItem onClick={() => setAction("Link copied")}>Copy link</ContextMenuItem>
+                </ContextMenuGroup>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Project action">{action}</output>
+        <output aria-label="Details enabled">{String(checked)}</output>
+        <output aria-label="Sort order">{sort}</output>
+      </div>);
+    }
+}
+```
+
+### Compact
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        const [checked, setChecked] = useState(false);
+        const [sort, setSort] = useState("name");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <Button onClick={() => setAction("Link copied")}>Copy project link</Button>
+        <Button disabled>Delete project</Button>
+        <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
+          Show details
+        </Toggle>
+        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
+          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
+          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
+        </NativeSelect>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Project actions">
+            <ContextMenuGroup>
+              <ContextMenuLabel>Project</ContextMenuLabel>
+              <ContextMenuItem className={itemClassName} onClick={() => setAction("Opened")}>
+                Open<ContextMenuShortcut>Enter</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem disabled>Delete</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Show details
+            </ContextMenuCheckboxItem>
+            <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+              <ContextMenuRadioItem value="name">Sort by name</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="date">Sort by date</ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuGroup>
+                  <ContextMenuItem onClick={() => setAction("Link copied")}>Copy link</ContextMenuItem>
+                </ContextMenuGroup>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Project action">{action}</output>
+        <output aria-label="Details enabled">{String(checked)}</output>
+        <output aria-label="Sort order">{sort}</output>
+      </div>);
+    },
+    globals: { density: "compact" }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        const [checked, setChecked] = useState(false);
+        const [sort, setSort] = useState("name");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <Button onClick={() => setAction("Link copied")}>Copy project link</Button>
+        <Button disabled>Delete project</Button>
+        <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
+          Show details
+        </Toggle>
+        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
+          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
+          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
+        </NativeSelect>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Project actions">
+            <ContextMenuGroup>
+              <ContextMenuLabel>Project</ContextMenuLabel>
+              <ContextMenuItem className={itemClassName} onClick={() => setAction("Opened")}>
+                Open<ContextMenuShortcut>Enter</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem disabled>Delete</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Show details
+            </ContextMenuCheckboxItem>
+            <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+              <ContextMenuRadioItem value="name">Sort by name</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="date">Sort by date</ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuGroup>
+                  <ContextMenuItem onClick={() => setAction("Link copied")}>Copy link</ContextMenuItem>
+                </ContextMenuGroup>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Project action">{action}</output>
+        <output aria-label="Details enabled">{String(checked)}</output>
+        <output aria-label="Sort order">{sort}</output>
+      </div>);
+    },
+    args: { disabled: true }
+}
+```
+
+### NativePartCallbacks
+
+```tsx
+{
+    args: {
+        triggerClassName: fn(() => "p-panel"),
+        contentClassName: fn(() => "min-w-64"),
+        labelClassName: fn(() => "py-2"),
+        itemClassName: fn(() => "py-2"),
+        checkboxClassName: fn(() => "py-2"),
+        radioClassName: fn(() => "py-2"),
+        subTriggerClassName: fn(() => "py-2"),
+        separatorClassName: fn(() => "my-2"),
+    },
+    render: (args) => {
+        const [checked, setChecked] = useState(false);
+        const [sort, setSort] = useState("name");
+        const [action, setAction] = useState("No action");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <Button onClick={() => setAction("Link copied")}>Copy project link</Button>
+        <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
+          Show details
+        </Toggle>
+        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
+          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
+          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
+        </NativeSelect>
+        <ContextMenu>
+          <ContextMenuTrigger className={args.triggerClassName}>Right click for callbacks</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Callback actions" className={args.contentClassName}>
+            <ContextMenuGroup>
+              <ContextMenuLabel className={args.labelClassName}>Project</ContextMenuLabel>
+              <ContextMenuItem className={args.itemClassName} onClick={() => setAction("Opened")}>
+                Open
+              </ContextMenuItem>
+              <ContextMenuCheckboxItem checked={checked} onCheckedChange={setChecked} className={args.checkboxClassName}>
+                Show details
+              </ContextMenuCheckboxItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator className={args.separatorClassName}/>
+            <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+              <ContextMenuRadioItem value="name" className={args.radioClassName}>
+                Sort by name
+              </ContextMenuRadioItem>
+              <ContextMenuRadioItem value="date" className={args.radioClassName}>
+                Sort by date
+              </ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger className={args.subTriggerClassName}>Share</ContextMenuSubTrigger>
+              <ContextMenuSubContent aria-label="Sharing actions" className={args.contentClassName}>
+                <ContextMenuGroup>
+                  <ContextMenuItem onClick={() => setAction("Link copied")}>Copy link</ContextMenuItem>
+                </ContextMenuGroup>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Project action">{action}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        const [checked, setChecked] = useState(false);
+        const [sort, setSort] = useState("name");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <Button onClick={() => setAction("Link copied")}>Copy project link</Button>
+        <Button disabled>Delete project</Button>
+        <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
+          Show details
+        </Toggle>
+        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
+          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
+          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
+        </NativeSelect>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Project actions">
+            <ContextMenuGroup>
+              <ContextMenuLabel>Project</ContextMenuLabel>
+              <ContextMenuItem className={itemClassName} onClick={() => setAction("Opened")}>
+                Open<ContextMenuShortcut>Enter</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem disabled>Delete</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Show details
+            </ContextMenuCheckboxItem>
+            <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+              <ContextMenuRadioItem value="name">Sort by name</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="date">Sort by date</ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuGroup>
+                  <ContextMenuItem onClick={() => setAction("Link copied")}>Copy link</ContextMenuItem>
+                </ContextMenuGroup>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Project action">{action}</output>
+        <output aria-label="Details enabled">{String(checked)}</output>
+        <output aria-label="Sort order">{sort}</output>
+      </div>);
+    },
+    globals: { density: "compact" },
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### MotionPreference
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        const [checked, setChecked] = useState(false);
+        const [sort, setSort] = useState("name");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <Button onClick={() => setAction("Link copied")}>Copy project link</Button>
+        <Button disabled>Delete project</Button>
+        <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
+          Show details
+        </Toggle>
+        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
+          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
+          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
+        </NativeSelect>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Project actions">
+            <ContextMenuGroup>
+              <ContextMenuLabel>Project</ContextMenuLabel>
+              <ContextMenuItem className={itemClassName} onClick={() => setAction("Opened")}>
+                Open<ContextMenuShortcut>Enter</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem disabled>Delete</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Show details
+            </ContextMenuCheckboxItem>
+            <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+              <ContextMenuRadioItem value="name">Sort by name</ContextMenuRadioItem>
+              <ContextMenuRadioItem value="date">Sort by date</ContextMenuRadioItem>
+            </ContextMenuRadioGroup>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuGroup>
+                  <ContextMenuItem onClick={() => setAction("Link copied")}>Copy link</ContextMenuItem>
+                </ContextMenuGroup>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Project action">{action}</output>
+        <output aria-label="Details enabled">{String(checked)}</output>
+        <output aria-label="Sort order">{sort}</output>
+      </div>);
+    }
+}
+```
+
+### BottomAligned
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        return (<div className="flex flex-col items-center gap-4 p-12">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="w-64 border p-panel">Right click for bottom menu</ContextMenuTrigger>
+          <ContextMenuContent side="bottom" align="start" alignOffset={0} aria-label="Bottom actions">
+            <ContextMenuGroup>
+              <ContextMenuItem onClick={() => setAction("Opened")}>Open</ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Bottom action">{action}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftBottomAligned
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        return (<div className="flex flex-col items-center gap-4 p-12">
+        <Button onClick={() => setAction("Opened")}>Open project</Button>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="w-64 border p-panel">Right click for bottom menu</ContextMenuTrigger>
+          <ContextMenuContent side="bottom" align="start" alignOffset={0} aria-label="Bottom actions">
+            <ContextMenuGroup>
+              <ContextMenuItem onClick={() => setAction("Opened")}>Open</ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Bottom action">{action}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Icons
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Created")}>New project file</Button>
+        <Button onClick={() => setAction("Saved")}>Save project</Button>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="w-64 border p-panel">Right click for file actions</ContextMenuTrigger>
+          <ContextMenuContent aria-label="File actions">
+            <ContextMenuGroup>
+              <ContextMenuLabel>File</ContextMenuLabel>
+              <ContextMenuItem onClick={() => setAction("Created")}>
+                <FileIcon aria-hidden="true"/>
+                New file<ContextMenuShortcut>Ctrl+N</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem onClick={() => setAction("Saved")}>
+                <SaveIcon aria-hidden="true"/>
+                Save<ContextMenuShortcut>Ctrl+S</ContextMenuShortcut>
+              </ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="File action">{action}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftIcons
+
+```tsx
+{
+    render: function Render(args) {
+        const [action, setAction] = useState("No action");
+        return (<div className="flex flex-col gap-4">
+        <Button onClick={() => setAction("Created")}>New project file</Button>
+        <Button onClick={() => setAction("Saved")}>Save project</Button>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="w-64 border p-panel">Right click for file actions</ContextMenuTrigger>
+          <ContextMenuContent aria-label="File actions">
+            <ContextMenuGroup>
+              <ContextMenuLabel>File</ContextMenuLabel>
+              <ContextMenuItem onClick={() => setAction("Created")}>
+                <FileIcon aria-hidden="true"/>
+                New file<ContextMenuShortcut>Ctrl+N</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem onClick={() => setAction("Saved")}>
+                <SaveIcon aria-hidden="true"/>
+                Save<ContextMenuShortcut>Ctrl+S</ContextMenuShortcut>
+              </ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="File action">{action}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Destructive
+
+```tsx
+{
+    render: function Render(args) {
+        const [isPresent, setIsPresent] = useState(true);
+        return (<div className="flex flex-col gap-4">
+        <Button variant="destructive" disabled={!isPresent} onClick={() => setIsPresent(false)}>
+          Discard project draft
+        </Button>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="w-64 border p-panel">Right click the draft</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Draft actions">
+            <ContextMenuGroup>
+              <ContextMenuItem variant="destructive" disabled={!isPresent} onClick={() => setIsPresent(false)}>
+                <TrashIcon aria-hidden="true"/>
+                Discard draft
+              </ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Draft status">{isPresent ? "Draft available" : "Draft discarded"}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftDestructive
+
+```tsx
+{
+    render: function Render(args) {
+        const [isPresent, setIsPresent] = useState(true);
+        return (<div className="flex flex-col gap-4">
+        <Button variant="destructive" disabled={!isPresent} onClick={() => setIsPresent(false)}>
+          Discard project draft
+        </Button>
+        <ContextMenu {...args}>
+          <ContextMenuTrigger className="w-64 border p-panel">Right click the draft</ContextMenuTrigger>
+          <ContextMenuContent aria-label="Draft actions">
+            <ContextMenuGroup>
+              <ContextMenuItem variant="destructive" disabled={!isPresent} onClick={() => setIsPresent(false)}>
+                <TrashIcon aria-hidden="true"/>
+                Discard draft
+              </ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+        <output aria-label="Draft status">{isPresent ? "Draft available" : "Draft discarded"}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### Top
+
+```tsx
+{
+    render: () => <SideMenu side="top"/>
+}
+```
+
+### Left
+
+```tsx
+{
+    render: () => <SideMenu side="left"/>
+}
+```
+
+### Right
+
+```tsx
+{
+    render: () => <SideMenu side="right"/>
+}
+```
+
+### RightToLeftTop
+
+```tsx
+{
+    render: () => <SideMenu side="top"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftLeft
+
+```tsx
+{
+    render: () => <SideMenu side="left"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftRight
+
+```tsx
+{
+    render: () => <SideMenu side="right"/>,
+    decorators: RightToLeft.decorators
+}
+```