import React from "react" ; import { styled , keyframes } from "@stitches/react" ; import { violet , mauve , blackA } from "@radix-ui/colors" ; import { DotFilledIcon , CheckIcon , ChevronRightIcon , } from "@radix-ui/react-icons" ; import * as ContextMenuPrimitive from "@radix-ui/react-context-menu" ; const StyledContent = styled ( ContextMenuPrimitive . Content , { minWidth : 220 , backgroundColor : "white" , borderRadius : 6 , overflow : "hidden" , padding : 5 , boxShadow : "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)" , } ) ; const itemStyles = { all : "unset" , fontSize : 13 , lineHeight : 1 , color : violet . violet11 , borderRadius : 3 , display : "flex" , alignItems : "center" , height : 25 , padding : "0 5px" , position : "relative" , paddingLeft : 25 , userSelect : "none" , "&[data-disabled]" : { color : mauve . mauve8 , pointerEvents : "none" , } , "&:focus" : { backgroundColor : violet . violet9 , color : violet . violet1 , } , } ; const StyledItem = styled ( ContextMenuPrimitive . Item , { ... itemStyles } ) ; const StyledCheckboxItem = styled ( ContextMenuPrimitive . CheckboxItem , { ... itemStyles , } ) ; const StyledRadioItem = styled ( ContextMenuPrimitive . RadioItem , { ... itemStyles , } ) ; const StyledTriggerItem = styled ( ContextMenuPrimitive . TriggerItem , { '&[data-state="open"]' : { backgroundColor : violet . violet4 , color : violet . violet11 , } , ... itemStyles , } ) ; const StyledLabel = styled ( ContextMenuPrimitive . Label , { paddingLeft : 25 , fontSize : 12 , lineHeight : "25px" , color : mauve . mauve11 , } ) ; const StyledSeparator = styled ( ContextMenuPrimitive . Separator , { height : 1 , backgroundColor : violet . violet6 , margin : 5 , } ) ; const StyledItemIndicator = styled ( ContextMenuPrimitive . ItemIndicator , { position : "absolute" , left : 0 , width : 25 , display : "inline-flex" , alignItems : "center" , justifyContent : "center" , } ) ; export const ContextMenu = ContextMenuPrimitive . Root ; export const ContextMenuTrigger = ContextMenuPrimitive . Trigger ; export const ContextMenuContent = StyledContent ; export const ContextMenuItem = StyledItem ; export const ContextMenuCheckboxItem = StyledCheckboxItem ; export const ContextMenuRadioGroup = ContextMenuPrimitive . RadioGroup ; export const ContextMenuRadioItem = StyledRadioItem ; export const ContextMenuItemIndicator = StyledItemIndicator ; export const ContextMenuTriggerItem = StyledTriggerItem ; export const ContextMenuLabel = StyledLabel ; export const ContextMenuSeparator = StyledSeparator ; const Box = styled ( "div" , { } ) ; const RightSlot = styled ( "div" , { marginLeft : "auto" , paddingLeft : 20 , color : mauve . mauve11 , ":focus > &" : { color : "white" } , "[data-disabled] &" : { color : mauve . mauve8 } , } ) ; export const ContextMenuDemo = ( { children } ) => { const [ bookmarksChecked , setBookmarksChecked ] = React . useState ( true ) ; const [ urlsChecked , setUrlsChecked ] = React . useState ( false ) ; const [ person , setPerson ] = React . useState ( "pedro" ) ; return ( < Box > < ContextMenu > < ContextMenuTrigger > { children } < /ContextMenuTrigger> < ContextMenuContent sideOffset = { 5 } > < ContextMenuItem > Back < RightSlot > ⌘ + [ < /RightSlot> < /ContextMenuItem> < ContextMenuItem disabled > Foward < RightSlot > ⌘ + ] < /RightSlot> < /ContextMenuItem> < ContextMenuItem > Reload < RightSlot > ⌘ + R < /RightSlot> < /ContextMenuItem> < ContextMenu > < ContextMenuTriggerItem > More Tools < RightSlot > < ChevronRightIcon /> < /RightSlot> < /ContextMenuTriggerItem> < ContextMenuContent sideOffset = { 2 } alignOffset = { - 5 } > < ContextMenuItem > Save Page As … < RightSlot > ⌘ + S < /RightSlot> < /ContextMenuItem> < ContextMenuItem > Create Shortcut … < /ContextMenuItem> < ContextMenuItem > Name Window … < /ContextMenuItem> < ContextMenuSeparator / > < ContextMenuItem > Developer Tools < /ContextMenuItem> < /ContextMenuContent> < /ContextMenu> < ContextMenuSeparator / > < ContextMenuCheckboxItem checked = { bookmarksChecked } onCheckedChange = { setBookmarksChecked } > < ContextMenuItemIndicator > < CheckIcon /> < /ContextMenuItemIndicator> Show Bookmarks < RightSlot > ⌘ + B < /RightSlot> < /ContextMenuCheckboxItem> < ContextMenuCheckboxItem checked = { urlsChecked } onCheckedChange = { setUrlsChecked } > < ContextMenuItemIndicator > < CheckIcon /> < /ContextMenuItemIndicator> Show Full URLs < /ContextMenuCheckboxItem> < ContextMenuSeparator / > < ContextMenuLabel > People < /ContextMenuLabel> < ContextMenuRadioGroup value = { person } onValueChange = { setPerson } > < ContextMenuRadioItem value = "pedro" > < ContextMenuItemIndicator > < DotFilledIcon /> < /ContextMenuItemIndicator> Pedro Duarte < /ContextMenuRadioItem> < ContextMenuRadioItem value = "colm" > < ContextMenuItemIndicator > < DotFilledIcon /> < /ContextMenuItemIndicator> Colm Tuite < /ContextMenuRadioItem> < /ContextMenuRadioGroup> < /ContextMenuContent> < /ContextMenu> < /Box>); } ; export default ContextMenuDemo ;