fix(Menu): updates Menu for radix v1

This updates all radix libraries to v1.0.0 but only updates the API for Menu, others to be done later. BREAKING CHANGE: Menu: Sub menus should now use MenuSub, MenuSubTrigger and MenuSubContent - removes MenuTriggerItem see #286
commitd · Aug 4, 2022 · 00b700a · 00b700a
1 parent d8f0732
commit 00b700a
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 38 deletions.
diff --git 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 (
     <StyledSubTrigger {...props} ref={forwardedRef}>
       {children}
-      <StyledTriggerItemIndicator />
+      <StyledSubTriggerIndicator />
     </StyledSubTrigger>
   )
 })

diff --git 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 = () => {
         <MenuItem>
           New Window <MenuItemShortcut>⌘+N</MenuItemShortcut>
         </MenuItem>
-        <Menu>
-          <MenuTriggerItem>Developer</MenuTriggerItem>
-          <MenuContent sideOffset={8}>
+        <MenuSub>
+          <MenuSubTrigger>Developer</MenuSubTrigger>
+          <MenuSubContent>
             <MenuItem>Test</MenuItem>
             <MenuItem>Build</MenuItem>
             <MenuItem>Start</MenuItem>
-            <Menu>
-              <MenuTriggerItem>More</MenuTriggerItem>
-              <MenuContent sideOffset={8}>
+            <MenuSub>
+              <MenuSubTrigger>More</MenuSubTrigger>
+              <MenuSubContent>
                 <MenuItem>Test</MenuItem>
                 <MenuItem>Build</MenuItem>
                 <MenuItem>Start</MenuItem>
-              </MenuContent>
-            </Menu>
-          </MenuContent>
-        </Menu>
+              </MenuSubContent>
+            </MenuSub>
+          </MenuSubContent>
+        </MenuSub>
       </MenuContent>
     </Menu>
   )

diff --git 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<typeof TriggerItem> & CSSProps
-
-export const MenuTriggerItem = forwardRef<
-  ElementRef<typeof StyledTriggerItem>,
-  MenuTriggerItemProps
->(({ children, ...props }, forwardedRef) => {
-  return (
-    <StyledTriggerItem {...props} ref={forwardedRef}>
-      {children}
-      <StyledTriggerItemIndicator />
-    </StyledTriggerItem>
-  )
-})
-MenuTriggerItem.toString = () => `.${StyledTriggerItem.className}`
-
-type MenuContentProps = ComponentProps<typeof Content> & CSSProps
+type MenuContentProps = ComponentProps<typeof Content> &
+  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<typeof Portal>['container']
+  }
 
 export const MenuContent = forwardRef<
   ElementRef<typeof StyledContent>,
   MenuContentProps
->(({ children, ...props }, forwardedRef) => (
-  <StyledContent alignOffset={8} {...props} ref={forwardedRef}>
-    {children}
-  </StyledContent>
+>(({ portalled = true, container, children, ...props }, forwardedRef) => (
+  <ConditionalWrapper
+    condition={portalled}
+    wrapper={(child) => <Portal container={container}>{child}</Portal>}
+  >
+    <StyledContent alignOffset={8} {...props} ref={forwardedRef}>
+      {children}
+    </StyledContent>
+  </ConditionalWrapper>
 ))
 MenuContent.toString = () => `.${StyledContent.className}`
 
@@ -164,3 +163,47 @@ export const MenuRadioItem = forwardRef<
   </StyledRadioItem>
 ))
 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<typeof StyledSubTrigger> & CSSProps
+
+export const MenuSubTrigger = forwardRef<
+  ElementRef<typeof StyledSubTrigger>,
+  MenuSubTriggerProps
+>(({ children, ...props }, forwardedRef) => {
+  return (
+    <StyledSubTrigger {...props} ref={forwardedRef}>
+      {children}
+      <StyledSubTriggerIndicator />
+    </StyledSubTrigger>
+  )
+})
+MenuSubTrigger.toString = () => `.${StyledSubTrigger.className}`
+
+type MenuSubContentProps = ComponentProps<typeof StyledSubContent> &
+  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<typeof Portal>['container']
+  }
+
+export const MenuSubContent = forwardRef<
+  ElementRef<typeof StyledSubContent>,
+  MenuSubContentProps
+>(({ container, portalled = true, children, ...props }, forwardedRef) => (
+  <ConditionalWrapper
+    condition={portalled}
+    wrapper={(child) => <Portal container={container}>{child}</Portal>}
+  >
+    <StyledSubContent {...props} ref={forwardedRef}>
+      {children}
+    </StyledSubContent>
+  </ConditionalWrapper>
+))
+MenuSubContent.toString = () => `.${StyledSubContent.className}`
diff --git 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)