{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "row-actions", "type": "registry:ui", "title": "Row Actions", "description": "Quick actions slide in over the row's meta, the rest wait in a menu.", "categories": [ "menus" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/tooltip.json" ], "files": [ { "path": "components/ui/row-actions.tsx", "content": "\"use client\";\nimport { Menu } from \"@base-ui/react/menu\";\nimport { Fragment, useSyncExternalStore } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { MoreH } from \"@/lib/icons\";\nimport { Tooltip, TooltipProvider, TooltipShortcut } from \"@/components/ui/tooltip\";\n\nexport type RowAction = {\n id: string;\n label: string;\n icon?: React.ReactNode;\n onSelect: () => void;\n /** Shown inline on hover and focus. Everything else lives in the menu; on touch, everything does. */\n inline?: boolean;\n /** A single key (e.g. \"e\") that runs the action while the row has focus, shown in tooltips and the menu. */\n shortcut?: string;\n tone?: \"default\" | \"danger\";\n disabled?: boolean;\n /** Draw a separator above this item in the menu. */\n separated?: boolean;\n};\n\n// Touch screens have no hover to reveal inline actions, so they move into the menu. The inline\n// buttons hide with CSS (no hydration risk); the menu, which only renders once opened, asks JS.\nconst coarse = \"(hover: none), (pointer: coarse)\";\nconst subscribe = (cb: () => void) => {\n const mq = window.matchMedia(coarse);\n mq.addEventListener(\"change\", cb);\n return () => mq.removeEventListener(\"change\", cb);\n};\nfunction useTouch() {\n return useSyncExternalStore(subscribe, () => window.matchMedia(coarse).matches, () => false);\n}\n\nexport type RowActionsProps = Omit, \"children\"> & {\n /** The row's name, used to label its actions for screen readers: \"Actions for Launch review\". */\n label: string;\n actions: RowAction[];\n /** The row's content. Make its primary link or button cover the row with after:absolute after:inset-0. */\n children: React.ReactNode;\n /** Trailing meta (a time, a count) that gives way to the actions on hover instead of being pushed aside. */\n trailing?: React.ReactNode;\n /** Label of the overflow button. */\n menuLabel?: string;\n};\n\n/**\n * A list row whose actions slide in from the right when it's hovered or focused, over the\n * trailing meta rather than beside it, so nothing in the row reflows. A menu holds the rest.\n */\nexport function RowActions({ label, actions, children, trailing, menuLabel = \"More actions\", className, onKeyDown, ...rest }: RowActionsProps) {\n const touch = useTouch();\n const inline = actions.filter((a) => a.inline);\n const menu = touch ? actions : actions.filter((a) => !a.inline);\n\n return (\n {\n onKeyDown?.(e);\n if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || e.key.length !== 1) return;\n if ((e.target as HTMLElement).closest(\"input,textarea,[contenteditable=true],[role=menu]\")) return;\n const hit = actions.find((a) => a.shortcut?.toLowerCase() === e.key.toLowerCase() && !a.disabled);\n if (hit) {\n e.preventDefault();\n hit.onSelect();\n }\n }}\n {...rest}\n >\n
{children}
\n\n {/* One grid cell holds both the meta and the actions, so the row keeps its width either way. */}\n
\n {trailing != null && (\n \n {trailing}\n
\n )}\n\n