(null);
function clearLongPress() {
if (longPressRef.current !== null) {
window.clearTimeout(longPressRef.current);
longPressRef.current = null;
}
}
function openAt(x: number, y: number) {
setPoint({ x, y });
setOpen(true);
}
return (
{
onContextMenu?.(event);
if (event.defaultPrevented) return;
event.preventDefault();
openAt(event.clientX, event.clientY);
}}
onTouchStart={(event) => {
onTouchStart?.(event);
if (event.defaultPrevented) return;
const touch = event.touches[0];
if (!touch) return;
clearLongPress();
longPressRef.current = window.setTimeout(() => {
openAt(touch.clientX, touch.clientY);
}, 500);
}}
onTouchEnd={(event) => {
onTouchEnd?.(event);
clearLongPress();
}}
onTouchMove={(event) => {
onTouchMove?.(event);
clearLongPress();
}}
onTouchCancel={(event) => {
onTouchCancel?.(event);
clearLongPress();
}}
{...props}
>
{children}
);
}
type ContextMenuContentProps = HTMLAttributes & {
children: ReactNode;
};
export function ContextMenuContent({
className,
children,
style,
...props
}: ContextMenuContentProps) {
const { open, point } = useContextMenu();
const entered = useOverlayEntered(open);
const contentRef = useRef(null);
const [pos, setPos] = useState(point);
useLayoutEffect(() => {
if (!open) {
setPos(point);
return;
}
const node = contentRef.current;
let x = point.x;
let y = point.y;
if (node) {
const { width, height } = node.getBoundingClientRect();
const pad = 8;
if (x + width > window.innerWidth - pad) {
x = Math.max(pad, window.innerWidth - width - pad);
}
if (y + height > window.innerHeight - pad) {
y = Math.max(pad, window.innerHeight - height - pad);
}
}
setPos((prev) => (prev.x === x && prev.y === y ? prev : { x, y }));
}, [open, point]);
return (
{children}
);
}
const itemClass =
"relative flex w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-[13px] font-normal tracking-wide outline-none select-none transition-colors duration-200 ease-out hover:bg-surface-hover hover:text-foreground disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground";
type ContextMenuItemProps = ButtonHTMLAttributes & {
children: ReactNode;
inset?: boolean;
variant?: "default" | "destructive";
};
export function ContextMenuItem({
className,
children,
inset,
variant = "default",
disabled,
onClick,
...props
}: ContextMenuItemProps) {
const { setOpen } = useContextMenu();
return (
);
}
type ContextMenuCheckboxItemProps = ButtonHTMLAttributes & {
children: ReactNode;
checked?: boolean;
onCheckedChange?: (checked: boolean) => void;
};
export function ContextMenuCheckboxItem({
className,
children,
checked = false,
disabled,
onCheckedChange,
onClick,
...props
}: ContextMenuCheckboxItemProps) {
return (
);
}
type ContextMenuRadioGroupContextValue = {
value: string;
onValueChange?: (value: string) => void;
};
const ContextMenuRadioGroupContext =
createContext(null);
type ContextMenuRadioGroupProps = HTMLAttributes & {
value?: string;
onValueChange?: (value: string) => void;
children: ReactNode;
};
export function ContextMenuRadioGroup({
className,
value = "",
onValueChange,
children,
...props
}: ContextMenuRadioGroupProps) {
const context = useMemo(
() => ({ value, onValueChange }),
[value, onValueChange],
);
return (
{children}
);
}
type ContextMenuRadioItemProps = ButtonHTMLAttributes & {
children: ReactNode;
value: string;
};
export function ContextMenuRadioItem({
className,
children,
value,
disabled,
onClick,
...props
}: ContextMenuRadioItemProps) {
const group = useContext(ContextMenuRadioGroupContext);
const checked = group?.value === value;
return (
);
}
type ContextMenuLabelProps = HTMLAttributes & {
children: ReactNode;
inset?: boolean;
};
export function ContextMenuLabel({
className,
children,
inset,
...props
}: ContextMenuLabelProps) {
return (
{children}
);
}
type ContextMenuSeparatorProps = HTMLAttributes;
export function ContextMenuSeparator({
className,
...props
}: ContextMenuSeparatorProps) {
return (
);
}
type ContextMenuShortcutProps = HTMLAttributes & {
children: ReactNode;
};
export function ContextMenuShortcut({
className,
children,
...props
}: ContextMenuShortcutProps) {
return (
{children}
);
}
type ContextMenuGroupProps = HTMLAttributes & {
children: ReactNode;
};
export function ContextMenuGroup({
className,
children,
...props
}: ContextMenuGroupProps) {
return (
{children}
);
}
type ContextMenuSubContextValue = {
open: boolean;
setOpen: (open: boolean) => void;
};
const ContextMenuSubContext = createContext(
null,
);
type ContextMenuSubProps = {
children: ReactNode;
};
export function ContextMenuSub({ children }: ContextMenuSubProps) {
const [open, setOpen] = useState(false);
const value = useMemo(() => ({ open, setOpen }), [open]);
return (
setOpen(false)}
>
{children}
);
}
function useContextMenuSub() {
const context = useContext(ContextMenuSubContext);
if (!context) {
throw new Error("ContextMenuSub parts must be used within ");
}
return context;
}
type ContextMenuSubTriggerProps = ButtonHTMLAttributes & {
children: ReactNode;
inset?: boolean;
};
export function ContextMenuSubTrigger({
className,
children,
inset,
...props
}: ContextMenuSubTriggerProps) {
const { setOpen } = useContextMenuSub();
return (
);
}
type ContextMenuSubContentProps = HTMLAttributes & {
children: ReactNode;
};
export function ContextMenuSubContent({
className,
children,
style,
...props
}: ContextMenuSubContentProps) {
const { open } = useContextMenuSub();
const entered = useOverlayEntered(open);
const contentRef = useRef(null);
const placement = useSubmenuPosition(open, contentRef);
return (
{children}
);
}
function CheckIcon({ className }: { className?: string }) {
return (
);
}
function CircleIcon({ className }: { className?: string }) {
return (
);
}
function ChevronRightIcon({ className }: { className?: string }) {
return (
);
}
```