peter
5838cf1c56
Deep-review follow-up on R13 S3. - Add a roving-keyboard-nav test proving a disabled ActionMenu item is skipped by arrow keys, and assert the stats "left" row renders the formatEta value (formatEta had no coverage anywhere). - Remove the disabledIndices plumbing from AnchoredPopover + ActionMenu: it was redundant. useListNavigation already skips items via their DOM disabled/aria-disabled attribute, and PopoverItem renders a native disabled button — verified against @floating-ui/react 0.27 isListIndexDisabled and by a mutation test. Behaviour is unchanged and now guarded by the new test.
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import { useState, type ReactNode } from "react";
|
|
import { MoreHorizontal } from "lucide-react";
|
|
import { PopoverItem, PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
|
|
|
|
// A reusable "⋯ more actions" overflow menu: a compact trigger that opens a list of one-shot actions.
|
|
// Built on the R8 AnchoredPopover platform (arrows/typeahead/Escape/anchor-flip), same as ViewSwitcher
|
|
// and LanguageSwitcher. Use it to keep occasional actions out of a crowded toolbar. The items are
|
|
// fire-and-close (`onSelect`); a `disabled` item (e.g. a mutation already in flight) is inert.
|
|
|
|
export interface ActionMenuItem {
|
|
id: string;
|
|
label: string;
|
|
icon?: ReactNode; // an element (so a caller can swap in a spinning icon while pending)
|
|
onSelect: () => void;
|
|
disabled?: boolean;
|
|
title?: string; // optional native tooltip (carries a longer hint the label alone can't)
|
|
}
|
|
|
|
export default function ActionMenu({
|
|
items,
|
|
ariaLabel,
|
|
className,
|
|
trigger,
|
|
}: {
|
|
items: readonly ActionMenuItem[];
|
|
/** Accessible name for the trigger (e.g. "Catalog actions"). */
|
|
ariaLabel: string;
|
|
/** Trigger className override; omit for the default glass ⋯ icon button. */
|
|
className?: string;
|
|
/** Custom trigger content; omit for the default ⋯ icon. */
|
|
trigger?: ReactNode;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
// A disabled item (a mutation already in flight) is skipped by roving keyboard nav automatically:
|
|
// PopoverItem renders it as a native `disabled` button, which useListNavigation reads and never
|
|
// focuses. No explicit disabledIndices needed. See ActionMenu.dom.test.tsx for the guard.
|
|
const pop = useAnchoredPopover({ open, onOpenChange: setOpen, placement: "bottom-end" });
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
ref={pop.refs.setReference}
|
|
{...pop.getReferenceProps()}
|
|
aria-label={ariaLabel}
|
|
title={ariaLabel}
|
|
className={
|
|
className ??
|
|
"glass-card glass-hover flex items-center justify-center rounded-xl p-2 text-sm transition"
|
|
}
|
|
>
|
|
{trigger ?? <MoreHorizontal className="h-5 w-5" aria-hidden="true" />}
|
|
</button>
|
|
<PopoverSurface
|
|
popover={pop}
|
|
ariaLabel={ariaLabel}
|
|
className="glass-menu min-w-52 rounded-xl p-1.5 animate-[popIn_0.16s_ease]"
|
|
>
|
|
{items.map((it) => (
|
|
<PopoverItem
|
|
key={it.id}
|
|
role="menuitem"
|
|
disabled={it.disabled}
|
|
label={it.label}
|
|
title={it.title}
|
|
onSelect={() => {
|
|
it.onSelect();
|
|
setOpen(false);
|
|
}}
|
|
className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm outline-hidden transition disabled:opacity-50"
|
|
>
|
|
{it.icon && <span className="shrink-0 text-muted">{it.icon}</span>}
|
|
<span className="flex-1 truncate">{it.label}</span>
|
|
</PopoverItem>
|
|
))}
|
|
</PopoverSurface>
|
|
</>
|
|
);
|
|
}
|