Updates to Radix v1

package.json

@@ -50,11 +50,11 @@
   "size-limit": [
     {
       "path": "dist/index.cjs.js",
-      "limit": "85 KB"
+      "limit": "90 KB"
     },
     {
       "path": "dist/index.esm.js",
-      "limit": "85 KB"
+      "limit": "90 KB"
     }
   ],
   "lint-staged": {
@@ -145,33 +145,33 @@
     "typescript": "^4.6.3"
   },
   "dependencies": {
-    "@committed/hooks": "^0.5.0",
+    "@committed/hooks": "^0.8.0",
     "@mdi/js": "^6.6.96",
     "@radix-ui/colors": "^0.1.8",
-    "@radix-ui/react-accordion": "0.1.6",
-    "@radix-ui/react-alert-dialog": "0.1.7",
-    "@radix-ui/react-avatar": "0.1.4",
-    "@radix-ui/react-checkbox": "0.1.5",
-    "@radix-ui/react-context-menu": "0.1.6",
-    "@radix-ui/react-dialog": "0.1.7",
-    "@radix-ui/react-dropdown-menu": "0.1.6",
-    "@radix-ui/react-label": "0.1.5",
-    "@radix-ui/react-navigation-menu": "0.1.2",
-    "@radix-ui/react-polymorphic": "0.0.14",
-    "@radix-ui/react-popover": "0.1.6",
-    "@radix-ui/react-progress": "0.1.4",
-    "@radix-ui/react-radio-group": "0.1.5",
-    "@radix-ui/react-select": "0.1.1",
-    "@radix-ui/react-separator": "0.1.4",
-    "@radix-ui/react-slider": "0.1.4",
-    "@radix-ui/react-slot": "^0.1.2",
-    "@radix-ui/react-switch": "0.1.5",
-    "@radix-ui/react-tabs": "0.1.5",
-    "@radix-ui/react-toast": "0.1.1",
-    "@radix-ui/react-toggle": "0.1.4",
-    "@radix-ui/react-toggle-group": "0.1.5",
-    "@radix-ui/react-tooltip": "0.1.7",
-    "@radix-ui/react-visually-hidden": "^0.1.4",
+    "@radix-ui/react-accordion": "^1.0.0",
+    "@radix-ui/react-alert-dialog": "^1.0.0",
+    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-checkbox": "^1.0.0",
+    "@radix-ui/react-context-menu": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-hover-card": "^1.0.0",
+    "@radix-ui/react-label": "^1.0.0",
+    "@radix-ui/react-navigation-menu": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-progress": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-select": "^1.0.0",
+    "@radix-ui/react-separator": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-tabs": "^1.0.0",
+    "@radix-ui/react-toast": "^1.0.0",
+    "@radix-ui/react-toggle": "^1.0.0",
+    "@radix-ui/react-toggle-group": "^1.0.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
+    "@radix-ui/react-visually-hidden": "^1.0.0",
     "@stitches/react": "^1.2.7"
   }
 }

src/components/ComponentsProvider/ComponentsProvider.tsx

@@ -90,7 +90,7 @@ export const ComponentsProvider: FC<
         )}
       >
         <>
-          <Isolate css={css as any} isolated={isolated}>
+          <Isolate css={css} isolated={isolated}>
             {children}
           </Isolate>
           {viewport && <ToastViewport {...viewport} />}

src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -19,20 +19,15 @@ import { overlayAnimationStyles, overlayStyles } from '../Overlay'
 import { paperStyles } from '../Paper'
 import { Text } from '../Text'
 
-export const StyledOverlay = styled(
-  Overlay,
-  overlayStyles,
-  overlayAnimationStyles,
-  {
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-  }
-)
+const StyledOverlay = styled(Overlay, overlayStyles, overlayAnimationStyles, {
+  position: 'fixed',
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0,
+})
 
-export const StyledContent = styled(
+const StyledContent = styled(
   Content,
   paperStyles,
   {

src/components/ContextMenu/ContextMenu.stories.tsx

@@ -1,4 +1,5 @@
 import { useBoolean } from '@committed/hooks'
+import { ContextMenuSub } from '@radix-ui/react-context-menu'
 import { action } from '@storybook/addon-actions'
 import { Meta, Story } from '@storybook/react'
 import React from 'react'
@@ -13,10 +14,12 @@ import {
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
   ContextMenuTrigger,
-  ContextMenuTriggerItem,
 } from '.'
 import { Flex } from '../Flex'
+import {} from './ContextMenu'
 
 export default {
   title: 'Components/ContextMenu',
@@ -33,7 +36,9 @@ export default {
     ContextMenuCheckboxItem,
     ContextMenuRadioItem,
     ContextMenuRadioGroup,
-    ContextMenuTriggerItem,
+    ContextMenuSub,
+    ContextMenuSubTrigger,
+    ContextMenuSubContent,
   },
 } as Meta
 
@@ -195,22 +200,22 @@ export const Nested: Story = () => {
         <ContextMenuItem>
           New Window <ContextMenuItemShortcut>⌘+N</ContextMenuItemShortcut>
         </ContextMenuItem>
-        <ContextMenu>
-          <ContextMenuTriggerItem>Developer</ContextMenuTriggerItem>
-          <ContextMenuContent sideOffset={8}>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>Developer</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
             <ContextMenuItem>Test</ContextMenuItem>
             <ContextMenuItem>Build</ContextMenuItem>
             <ContextMenuItem>Start</ContextMenuItem>
-            <ContextMenu>
-              <ContextMenuTriggerItem>More</ContextMenuTriggerItem>
-              <ContextMenuContent sideOffset={8}>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
                 <ContextMenuItem>Test</ContextMenuItem>
                 <ContextMenuItem>Build</ContextMenuItem>
                 <ContextMenuItem>Start</ContextMenuItem>
-              </ContextMenuContent>
-            </ContextMenu>
-          </ContextMenuContent>
-        </ContextMenu>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
       </ContextMenuContent>
     </ContextMenu>
   )

src/components/ContextMenu/ContextMenu.test.tsx

@@ -2,6 +2,7 @@ import { composeStories } from '@storybook/testing-react'
 import React from 'react'
 import {
   act,
+  cleanup,
   fireEvent,
   renderDark,
   renderLight,
@@ -22,45 +23,58 @@ it('renders dark without error', () => {
   expect(asFragment()).toBeDefined()
 })
 
-it('renders dark when opened without error', () => {
+it('renders dark when opened without error', async () => {
   renderDark(<Default />)
   act(() => {
     fireEvent.contextMenu(screen.getByText('Right click anywhere'))
   })
+  await act(async () => {
+    /* @floating-ui fix */
+  })
   expect(screen.getByText('Cut')).toBeInTheDocument()
+  cleanup()
 })
 
-it('renders items with role menuitem', () => {
+it('renders items with role menuitem', async () => {
   renderDark(<Default />)
   act(() => {
     fireEvent.contextMenu(screen.getByText('Right click anywhere'))
   })
+  await act(async () => {
+    /* @floating-ui fix */
+  })
   expect(screen.getByRole('menuitem', { name: /copy/i })).toBeInTheDocument()
 })
 
-it('can render nested menus', () => {
+it('can render nested menus', async () => {
   renderDark(<Nested />)
   expect(
     screen.queryByRole('menuitem', { name: /test/i })
   ).not.toBeInTheDocument()
   act(() => {
     fireEvent.contextMenu(screen.getByText('Right click anywhere'))
   })
+  await act(async () => {
+    /* @floating-ui fix */
+  })
   expect(
     screen.queryByRole('menuitem', { name: /test/i })
   ).not.toBeInTheDocument()
   userEvent.click(screen.getByRole('menuitem', { name: /developer/i }))
   expect(screen.getByRole('menuitem', { name: /test/i })).toBeInTheDocument()
 })
 
-it('can render destructive menus', () => {
+it('can render destructive menus', async () => {
   renderDark(<Destructive />)
   expect(
     screen.queryByRole('menuitem', { name: /delete/i })
   ).not.toBeInTheDocument()
   act(() => {
     fireEvent.contextMenu(screen.getByText('Right click anywhere'))
   })
+  await act(async () => {
+    /* @floating-ui fix */
+  })
   expect(
     screen.queryByRole('menuitem', { name: /delete/i })
   ).toBeInTheDocument()

src/components/ContextMenu/ContextMenu.tsx

@@ -5,16 +5,20 @@ import {
   Item,
   ItemIndicator,
   Label,
+  Portal,
   RadioGroup,
   RadioItem,
   Root,
   Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
   Trigger,
-  TriggerItem,
 } from '@radix-ui/react-context-menu'
 import React, { ComponentProps, ElementRef, forwardRef } from 'react'
 import type { CSSProps, VariantProps } 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 { paperStyles } from '../Paper'
@@ -48,35 +52,78 @@ export const ContextMenuLabel = styled(Label, labelStyles)
 export const ContextMenuItemGroup = styled(Group, groupStyles(ContextMenuItem))
 export const ContextMenuRadioGroup = RadioGroup
 
-export const ContextMenuContent = styled(Content, paperStyles, contentStyles)
+const StyledContent = styled(Content, paperStyles, contentStyles)
+
+type ContextMenuContentProps = ComponentProps<typeof StyledContent> &
+  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 ContextMenuContent = forwardRef<
+  ElementRef<typeof StyledContent>,
+  ContextMenuContentProps
+>(({ container, portalled = true, children, ...props }, forwardedRef) => (
+  <ConditionalWrapper
+    condition={portalled}
+    wrapper={(child) => <Portal container={container}>{child}</Portal>}
+  >
+    <StyledContent {...props} ref={forwardedRef}>
+      {children}
+    </StyledContent>
+  </ConditionalWrapper>
+))
+ContextMenuContent.toString = () => `.${StyledContent.className}`
 
 const StyledItemIndicator = styled(ItemIndicator, itemIndicatorStyles)
 const StyledCheckboxItem = styled(CheckboxItem, itemStyles, checkboxItemStyles)
 const StyledRadioItem = styled(RadioItem, itemStyles, checkboxItemStyles)
 
-const StyledContextMenuTriggerItem = styled(
-  TriggerItem,
-  itemStyles,
-  triggerItemStyles
-)
+// Submenu
+export const ContextMenuSub = Sub
+const StyledSubContent = styled(SubContent, paperStyles, contentStyles)
+
+type ContextMenuSubContentProps = 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 ContextMenuSubContent = forwardRef<
+  ElementRef<typeof StyledSubContent>,
+  ContextMenuSubContentProps
+>(({ container, portalled = true, children, ...props }, forwardedRef) => (
+  <ConditionalWrapper
+    condition={portalled}
+    wrapper={(child) => <Portal container={container}>{child}</Portal>}
+  >
+    <StyledSubContent {...props} ref={forwardedRef}>
+      {children}
+    </StyledSubContent>
+  </ConditionalWrapper>
+))
+ContextMenuSubContent.toString = () => `.${StyledSubContent.className}`
+
+const StyledSubTrigger = styled(SubTrigger, itemStyles, triggerItemStyles)
 
-type ContextMenuTriggerItemProps = ComponentProps<
-  typeof StyledContextMenuTriggerItem
->
+type ContextMenuSubTriggerProps = ComponentProps<typeof StyledSubTrigger>
 
-export const ContextMenuTriggerItem = forwardRef<
-  ElementRef<typeof StyledContextMenuTriggerItem>,
-  ContextMenuTriggerItemProps
+export const ContextMenuSubTrigger = forwardRef<
+  ElementRef<typeof StyledSubTrigger>,
+  ContextMenuSubTriggerProps
 >(({ children, ...props }, forwardedRef) => {
   return (
-    <StyledContextMenuTriggerItem {...props} ref={forwardedRef}>
+    <StyledSubTrigger {...props} ref={forwardedRef}>
       {children}
-      <StyledTriggerItemIndicator />
-    </StyledContextMenuTriggerItem>
+      <StyledSubTriggerIndicator />
+    </StyledSubTrigger>
   )
 })
-ContextMenuTriggerItem.toString = () =>
-  `.${StyledContextMenuTriggerItem.className}`
+ContextMenuSubTrigger.toString = () => `.${StyledSubTrigger.className}`
 
 type ContextMenuCheckboxItemProps = ComponentProps<typeof CheckboxItem> &
   CSSProps