This example keeps Cubitt responsible only for file visuals and selection semantics. The app owns the `ContextMenu` components, action labels, permissions, file/folder branching, destructive states, and persistence. `useFilesContextMenu` and `useFilesContext` must be called inside `Files`. The context menu hook resolves the menu target from the current selection and returns prop getters for the menu root, the collection trigger, and each `Files.Item`. The public Files context lets consumer-owned menu actions reuse Cubitt interactions such as inline rename. The same action renderer can be used from a right-click menu and from a toolbar overflow menu. Applicability is handled by rendering different menu items for single files, single folders, multiple files, and mixed selections. ```tsx title="app/components/files-context-menu-example.tsx" import { useState } from "react"; import { Files, type FilesItem, type FilesViewMode, } from "@tilt-legal/cubitt-components/files"; import { toast } from "@tilt-legal/cubitt-components/toast"; import { ToggleGroup, ToggleGroupItem, } from "@tilt-legal/cubitt-components/toggle-group"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; import { Grid, Menu as MenuIcon } from "@tilt-legal/cubitt-icons/ui/outline"; import { FilesContextMenuSurface } from "@/components/files-context-menu-surface"; import { FilesSelectionActionsMenu } from "@/components/files-selection-actions-menu"; import { type ExampleFileSource, contextMenuItems } from "@/lib/files"; export function FilesContextMenuExample() { const [items, setItems] = useState(contextMenuItems); const [selectedIds, setSelectedIds] = useState([]); const [view, setView] = useState("grid"); return (
, name) => { setItems((currentItems) => currentItems.map((currentItem) => currentItem.id === item.id ? { ...currentItem, name } : currentItem ) ); toast.success(`Renamed ${name}`); }} onSelectedIdsChange={setSelectedIds} selectedIds={selectedIds} selectionMode="multiple" > Files {items.length} toast.success(message)} /> { if (nextValue === "grid" || nextValue === "list") { setView(nextValue); } }} value={view} > toast.success(message)} view={view} />
); } ``` ```tsx title="app/components/files-action-menu-items.tsx" import type { ReactNode } from "react"; import { type FilesItem, useFilesContext, } from "@tilt-legal/cubitt-components/files"; import { ContextMenuItem, ContextMenuSeparator, } from "@tilt-legal/cubitt-components/context-menu"; import { MenuItem, MenuSeparator, } from "@tilt-legal/cubitt-components/menu"; import { Archive, Download, FolderOpen, Pencil, } from "@tilt-legal/cubitt-icons/ui/outline"; import type { ExampleFileSource } from "@/lib/files"; type ActionMenuKind = "context" | "toolbar"; function getPluralTargetLabel( items: FilesItem[], noun: "file" | "folder" | "item" ): string { return `${items.length} ${noun}${items.length === 1 ? "" : "s"}`; } function ActionMenuItem({ children, disabled, kind, onClick, variant, }: { children: ReactNode; disabled?: boolean; kind: ActionMenuKind; onClick?: () => void; variant?: "destructive"; }) { if (kind === "context") { return ( {children} ); } return ( {children} ); } function ActionMenuSeparator({ kind }: { kind: ActionMenuKind }) { return kind === "context" ? : ; } export function FilesActionMenuItems({ kind, onAction, targetItems, }: { kind: ActionMenuKind; onAction: (message: string) => void; targetItems: FilesItem[]; }) { const filesContext = useFilesContext(); if (targetItems.length === 0) { return ( No file selected ); } const singleTarget = targetItems.length === 1 ? targetItems[0] : null; const fileTargets = targetItems.filter((item) => item.kind === "file"); const folderTargets = targetItems.filter((item) => item.kind === "folder"); const isAllFiles = fileTargets.length === targetItems.length; const isAllFolders = folderTargets.length === targetItems.length; if (singleTarget) { const isFolder = singleTarget.kind === "folder"; return ( <> onAction(`Opened ${singleTarget.name}`)} > {isFolder ? "Open folder" : "Open"} {isFolder ? null : ( onAction(`Downloaded ${singleTarget.name}`)} > Download )} filesContext.startRename(singleTarget)} > Rename onAction(`Archived ${singleTarget.name}`)} variant="destructive" > {isFolder ? "Archive folder" : "Archive file"} ); } if (isAllFiles) { const fileLabel = getPluralTargetLabel(targetItems, "file"); return ( <> onAction(`Downloaded ${fileLabel}`)} > Download {fileLabel} onAction(`Archived ${fileLabel}`)} variant="destructive" > Archive {fileLabel} ); } const targetLabel = getPluralTargetLabel( targetItems, isAllFolders ? "folder" : "item" ); return ( onAction(`Archived ${targetLabel}`)} variant="destructive" > Archive {targetLabel} ); } ``` ```tsx title="app/components/files-selection-actions-menu.tsx" import { type FilesItem, useFilesContext, } from "@tilt-legal/cubitt-components/files"; import { Button } from "@tilt-legal/cubitt-components/button"; import { Menu, MenuContent, MenuTrigger, } from "@tilt-legal/cubitt-components/menu"; import { Dots } from "@tilt-legal/cubitt-icons/ui/outline"; import { FilesActionMenuItems } from "@/components/files-action-menu-items"; import type { ExampleFileSource } from "@/lib/files"; function getSelectionItems( items: FilesItem[], selectedIds: string[] ): FilesItem[] { const itemsById = new Map(items.map((item) => [item.id, item])); return selectedIds .map((id) => itemsById.get(id)) .filter((item): item is FilesItem => Boolean(item)); } export function FilesSelectionActionsMenu({ items, onAction, }: { items: FilesItem[]; onAction: (message: string) => void; }) { const filesContext = useFilesContext(); const targetItems = getSelectionItems(items, filesContext.selectedIds); return ( ); } ``` ```tsx title="app/components/files-context-menu-surface.tsx" import { Files, type FilesItem, type FilesViewMode, useFilesContextMenu, } from "@tilt-legal/cubitt-components/files"; import { ContextMenu, ContextMenuContent, ContextMenuTrigger, } from "@tilt-legal/cubitt-components/context-menu"; import { FilesActionMenuItems } from "@/components/files-action-menu-items"; import type { ExampleFileSource } from "@/lib/files"; type Props = { items: FilesItem[]; onAction: (message: string) => void; view: FilesViewMode; }; export function FilesContextMenuSurface({ items, onAction, view }: Props) { const contextMenu = useFilesContextMenu(items); return ( view === "grid" ? ( {items.map((item) => ( ))} ) : ( {items.map((item) => ( ))} ) } /> ); } ``` ```typescript title="app/lib/files.ts" import type { FilesItem } from "@tilt-legal/cubitt-components/files"; export type ExampleFileSource = { owner: string; }; export const contextMenuItems: FilesItem[] = [ { id: "folder-discovery", kind: "folder", name: "Discovery", description: "24 items", source: { owner: "Sarah Chen" }, }, { id: "folder-depositions", kind: "folder", name: "Depositions", description: "8 items", source: { owner: "Ava Johnson" }, }, { id: "financial-report", kind: "file", name: "Q4 Financial Report.pdf", mediaType: "application/pdf", sizeLabel: "2.4 MB", description: "Sarah Chen", source: { owner: "Sarah Chen" }, }, { id: "board-minutes", kind: "file", name: "Board Minutes.docx", mediaType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", sizeLabel: "848 KB", description: "Ava Johnson", source: { owner: "Ava Johnson" }, }, ]; ``` Right-clicking an unselected item targets only that item and updates selection. Right-clicking an already selected item keeps the selected group as the target set. Use `targetItems` for mixed file/folder rules and `targetIds` when calling app-owned commands.