import * as React from 'react'
import { CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons'
import {
Root as CMRoot,
TriggerItem as CMTriggerItem,
Separator as CMSeparator,
Item as CMItem,
Arrow as CMArrow,
Content as CMContent,
ItemIndicator as CMItemIndicator,
CheckboxItem as CMCheckboxItem,
} from '@radix-ui/react-context-menu'
import { breakpoints } from './breakpoints'
import { rowButton } from './row-button'
import { iconButton } from './icon-button'
import { iconWrapper } from './icon-wrapper'
import { menuContent } from './menu'
import css from '~styles'
/* -------------------------------------------------- */
/* Context Menu */
/* -------------------------------------------------- */
export interface ContextMenuRootProps {
onOpenChange?: (isOpen: boolean) => void
children: React.ReactNode
}
export function ContextMenuRoot({ onOpenChange, children }: ContextMenuRootProps): JSX.Element {
return (
{children}
)
}
export interface ContextMenuSubMenuProps {
label: string
children: React.ReactNode
}
export function ContextMenuSubMenu({ children, label }: ContextMenuSubMenuProps): JSX.Element {
return (
{label}
{children}
)
}
const contextMenuDivider = css({
backgroundColor: '$hover',
height: 1,
margin: '$2 -$2',
})
export const ContextMenuDivider = React.forwardRef<
React.ElementRef,
React.ComponentProps
>((props, forwardedRef) => (
))
const contextMenuArrow = css({
fill: '$panel',
})
export const ContextMenuArrow = React.forwardRef<
React.ElementRef,
React.ComponentProps
>((props, forwardedRef) => (
))
export interface ContextMenuButtonProps {
onSelect?: () => void
disabled?: boolean
children: React.ReactNode
}
export function ContextMenuButton({
onSelect,
children,
disabled = false,
}: ContextMenuButtonProps): JSX.Element {
return (
{children}
)
}
interface ContextMenuIconButtonProps {
onSelect: () => void
disabled?: boolean
children: React.ReactNode
}
export function ContextMenuIconButton({
onSelect,
children,
disabled = false,
}: ContextMenuIconButtonProps): JSX.Element {
return (
{children}
)
}
interface ContextMenuCheckboxItemProps {
checked: boolean
disabled?: boolean
onCheckedChange: (isChecked: boolean) => void
children: React.ReactNode
}
export function ContextMenuCheckboxItem({
checked,
disabled = false,
onCheckedChange,
children,
}: ContextMenuCheckboxItemProps): JSX.Element {
return (
{children}
)
}