diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index f76e3962..c3eb409f 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -29,7 +29,7 @@ import { labelStyles, separatorStyles, StyledCheckIndicator, - StyledTriggerItemIndicator, + StyledSubTriggerIndicator, triggerItemStyles, } from '../../utils/menuStyles' import { paperStyles } from '../Paper' @@ -119,7 +119,7 @@ export const ContextMenuSubTrigger = forwardRef< return ( {children} - + ) }) diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 5158a30f..fa148168 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -14,8 +14,10 @@ import { MenuRadioGroup, MenuRadioItem, MenuSeparator, + MenuSub, + MenuSubContent, + MenuSubTrigger, MenuTrigger, - MenuTriggerItem, } from '.' import { Avatar } from '../Avatar' import { Chip } from '../Chip' @@ -36,8 +38,10 @@ export default { MenuLabel, MenuItemGroup, MenuRadioGroup, - MenuTriggerItem, MenuButton, + MenuSub, + MenuSubContent, + MenuSubTrigger, }, } as Meta @@ -219,22 +223,22 @@ export const Nested: Story = () => { New Window ⌘+N - - Developer - + + Developer + Test Build Start - - More - + + More + Test Build Start - - - - + + + + ) diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 0e67a462..b2c9297e 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -5,16 +5,20 @@ import { Item, ItemIndicator, Label, + Portal, RadioGroup, RadioItem, Root, Separator, + Sub, + SubContent, + SubTrigger, Trigger, - TriggerItem, } from '@radix-ui/react-dropdown-menu' import React, { ComponentProps, ElementRef, forwardRef } from 'react' import type { CSSProps } from '../../stitches.config' import { styled } from '../../stitches.config' +import { ConditionalWrapper } from '../../utils' import { checkboxItemStyles, contentStyles, @@ -25,7 +29,7 @@ import { labelStyles, separatorStyles, StyledCheckIndicator, - StyledTriggerItemIndicator, + StyledSubTriggerIndicator, triggerItemStyles, } from '../../utils/menuStyles' import { Button } from '../Button' @@ -55,32 +59,27 @@ const StyledContent = styled(Content, paperStyles, contentStyles) const StyledItemIndicator = styled(ItemIndicator, itemIndicatorStyles) const StyledCheckboxItem = styled(CheckboxItem, itemStyles, checkboxItemStyles) const StyledRadioItem = styled(RadioItem, itemStyles, checkboxItemStyles) -const StyledTriggerItem = styled(TriggerItem, itemStyles, triggerItemStyles) -type MenuTriggerItemProps = ComponentProps & CSSProps - -export const MenuTriggerItem = forwardRef< - ElementRef, - MenuTriggerItemProps ->(({ children, ...props }, forwardedRef) => { - return ( - - {children} - - - ) -}) -MenuTriggerItem.toString = () => `.${StyledTriggerItem.className}` - -type MenuContentProps = ComponentProps & CSSProps +type MenuContentProps = ComponentProps & + CSSProps & { + /** By default, portals your content parts into the body, set false to add at dom location. */ + portalled?: boolean + /** Specify a container element to portal the content into. */ + container?: ComponentProps['container'] + } export const MenuContent = forwardRef< ElementRef, MenuContentProps ->(({ children, ...props }, forwardedRef) => ( - - {children} - +>(({ portalled = true, container, children, ...props }, forwardedRef) => ( + {child}} + > + + {children} + + )) MenuContent.toString = () => `.${StyledContent.className}` @@ -164,3 +163,47 @@ export const MenuRadioItem = forwardRef< )) MenuRadioItem.toString = () => `.${StyledRadioItem.className}` + +// Sub menu + +export const MenuSub = Sub +const StyledSubTrigger = styled(SubTrigger, itemStyles, triggerItemStyles) +const StyledSubContent = styled(SubContent, paperStyles, contentStyles) + +type MenuSubTriggerProps = ComponentProps & CSSProps + +export const MenuSubTrigger = forwardRef< + ElementRef, + MenuSubTriggerProps +>(({ children, ...props }, forwardedRef) => { + return ( + + {children} + + + ) +}) +MenuSubTrigger.toString = () => `.${StyledSubTrigger.className}` + +type MenuSubContentProps = ComponentProps & + CSSProps & { + /** By default, portals your content parts into the body, set false to add at dom location. */ + portalled?: boolean + /** Specify a container element to portal the content into. */ + container?: ComponentProps['container'] + } + +export const MenuSubContent = forwardRef< + ElementRef, + MenuSubContentProps +>(({ container, portalled = true, children, ...props }, forwardedRef) => ( + {child}} + > + + {children} + + +)) +MenuSubContent.toString = () => `.${StyledSubContent.className}` diff --git a/src/utils/menuStyles.tsx b/src/utils/menuStyles.tsx index bf0ae0e5..3fbace80 100644 --- a/src/utils/menuStyles.tsx +++ b/src/utils/menuStyles.tsx @@ -121,5 +121,5 @@ export const triggerItemStyles = css({ const indicatorStyles = css({ size: '$4' }) -export const StyledTriggerItemIndicator = styled(ChevronRight, indicatorStyles) +export const StyledSubTriggerIndicator = styled(ChevronRight, indicatorStyles) export const StyledCheckIndicator = styled(Check, indicatorStyles)