Skip to content

Commit 61a2a69

Browse files
stuarthendrenstuarthendren
authored
Merge pull request #288 from commitd/sh/radix-1-update
Updates to Radix v1
2 parents a7933a1 + 26b13ee commit 61a2a69

25 files changed

+1749
-1243
lines changed

‎package-lock.json

Lines changed: 1115 additions & 1039 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,11 @@
5050
"size-limit": [
5151
{
5252
"path": "dist/index.cjs.js",
53-
"limit": "85 KB"
53+
"limit": "90 KB"
5454
},
5555
{
5656
"path": "dist/index.esm.js",
57-
"limit": "85 KB"
57+
"limit": "90 KB"
5858
}
5959
],
6060
"lint-staged": {
@@ -145,33 +145,33 @@
145145
"typescript": "^4.6.3"
146146
},
147147
"dependencies": {
148-
"@committed/hooks": "^0.5.0",
148+
"@committed/hooks": "^0.8.0",
149149
"@mdi/js": "^6.6.96",
150150
"@radix-ui/colors": "^0.1.8",
151-
"@radix-ui/react-accordion": "0.1.6",
152-
"@radix-ui/react-alert-dialog": "0.1.7",
153-
"@radix-ui/react-avatar": "0.1.4",
154-
"@radix-ui/react-checkbox": "0.1.5",
155-
"@radix-ui/react-context-menu": "0.1.6",
156-
"@radix-ui/react-dialog": "0.1.7",
157-
"@radix-ui/react-dropdown-menu": "0.1.6",
158-
"@radix-ui/react-label": "0.1.5",
159-
"@radix-ui/react-navigation-menu": "0.1.2",
160-
"@radix-ui/react-polymorphic": "0.0.14",
161-
"@radix-ui/react-popover": "0.1.6",
162-
"@radix-ui/react-progress": "0.1.4",
163-
"@radix-ui/react-radio-group": "0.1.5",
164-
"@radix-ui/react-select": "0.1.1",
165-
"@radix-ui/react-separator": "0.1.4",
166-
"@radix-ui/react-slider": "0.1.4",
167-
"@radix-ui/react-slot": "^0.1.2",
168-
"@radix-ui/react-switch": "0.1.5",
169-
"@radix-ui/react-tabs": "0.1.5",
170-
"@radix-ui/react-toast": "0.1.1",
171-
"@radix-ui/react-toggle": "0.1.4",
172-
"@radix-ui/react-toggle-group": "0.1.5",
173-
"@radix-ui/react-tooltip": "0.1.7",
174-
"@radix-ui/react-visually-hidden": "^0.1.4",
151+
"@radix-ui/react-accordion": "^1.0.0",
152+
"@radix-ui/react-alert-dialog": "^1.0.0",
153+
"@radix-ui/react-avatar": "^1.0.0",
154+
"@radix-ui/react-checkbox": "^1.0.0",
155+
"@radix-ui/react-context-menu": "^1.0.0",
156+
"@radix-ui/react-dialog": "^1.0.0",
157+
"@radix-ui/react-dropdown-menu": "^1.0.0",
158+
"@radix-ui/react-hover-card": "^1.0.0",
159+
"@radix-ui/react-label": "^1.0.0",
160+
"@radix-ui/react-navigation-menu": "^1.0.0",
161+
"@radix-ui/react-popover": "^1.0.0",
162+
"@radix-ui/react-progress": "^1.0.0",
163+
"@radix-ui/react-radio-group": "^1.0.0",
164+
"@radix-ui/react-select": "^1.0.0",
165+
"@radix-ui/react-separator": "^1.0.0",
166+
"@radix-ui/react-slider": "^1.0.0",
167+
"@radix-ui/react-slot": "^1.0.0",
168+
"@radix-ui/react-switch": "^1.0.0",
169+
"@radix-ui/react-tabs": "^1.0.0",
170+
"@radix-ui/react-toast": "^1.0.0",
171+
"@radix-ui/react-toggle": "^1.0.0",
172+
"@radix-ui/react-toggle-group": "^1.0.0",
173+
"@radix-ui/react-tooltip": "^1.0.0",
174+
"@radix-ui/react-visually-hidden": "^1.0.0",
175175
"@stitches/react": "^1.2.7"
176176
}
177177
}

‎src/components/ComponentsProvider/ComponentsProvider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const ComponentsProvider: FC<
9090
)}
9191
>
9292
<>
93-
<Isolate css={css as any} isolated={isolated}>
93+
<Isolate css={css} isolated={isolated}>
9494
{children}
9595
</Isolate>
9696
{viewport && <ToastViewport {...viewport} />}

‎src/components/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,15 @@ import { overlayAnimationStyles, overlayStyles } from '../Overlay'
1919
import { paperStyles } from '../Paper'
2020
import { Text } from '../Text'
2121

22-
export const StyledOverlay = styled(
23-
Overlay,
24-
overlayStyles,
25-
overlayAnimationStyles,
26-
{
27-
position: 'fixed',
28-
right: 0,
29-
bottom: 0,
30-
top: 0,
31-
left: 0,
32-
}
33-
)
22+
const StyledOverlay = styled(Overlay, overlayStyles, overlayAnimationStyles, {
23+
position: 'fixed',
24+
right: 0,
25+
bottom: 0,
26+
top: 0,
27+
left: 0,
28+
})
3429

35-
export const StyledContent = styled(
30+
const StyledContent = styled(
3631
Content,
3732
paperStyles,
3833
{

‎src/components/ContextMenu/ContextMenu.stories.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useBoolean } from '@committed/hooks'
2+
import { ContextMenuSub } from '@radix-ui/react-context-menu'
23
import { action } from '@storybook/addon-actions'
34
import { Meta, Story } from '@storybook/react'
45
import React from 'react'
@@ -13,10 +14,12 @@ import {
1314
ContextMenuRadioGroup,
1415
ContextMenuRadioItem,
1516
ContextMenuSeparator,
17+
ContextMenuSubContent,
18+
ContextMenuSubTrigger,
1619
ContextMenuTrigger,
17-
ContextMenuTriggerItem,
1820
} from '.'
1921
import { Flex } from '../Flex'
22+
import {} from './ContextMenu'
2023

2124
export default {
2225
title: 'Components/ContextMenu',
@@ -33,7 +36,9 @@ export default {
3336
ContextMenuCheckboxItem,
3437
ContextMenuRadioItem,
3538
ContextMenuRadioGroup,
36-
ContextMenuTriggerItem,
39+
ContextMenuSub,
40+
ContextMenuSubTrigger,
41+
ContextMenuSubContent,
3742
},
3843
} as Meta
3944

@@ -195,22 +200,22 @@ export const Nested: Story = () => {
195200
<ContextMenuItem>
196201
New Window <ContextMenuItemShortcut>⌘+N</ContextMenuItemShortcut>
197202
</ContextMenuItem>
198-
<ContextMenu>
199-
<ContextMenuTriggerItem>Developer</ContextMenuTriggerItem>
200-
<ContextMenuContent sideOffset={8}>
203+
<ContextMenuSub>
204+
<ContextMenuSubTrigger>Developer</ContextMenuSubTrigger>
205+
<ContextMenuSubContent>
201206
<ContextMenuItem>Test</ContextMenuItem>
202207
<ContextMenuItem>Build</ContextMenuItem>
203208
<ContextMenuItem>Start</ContextMenuItem>
204-
<ContextMenu>
205-
<ContextMenuTriggerItem>More</ContextMenuTriggerItem>
206-
<ContextMenuContent sideOffset={8}>
209+
<ContextMenuSub>
210+
<ContextMenuSubTrigger>More</ContextMenuSubTrigger>
211+
<ContextMenuSubContent>
207212
<ContextMenuItem>Test</ContextMenuItem>
208213
<ContextMenuItem>Build</ContextMenuItem>
209214
<ContextMenuItem>Start</ContextMenuItem>
210-
</ContextMenuContent>
211-
</ContextMenu>
212-
</ContextMenuContent>
213-
</ContextMenu>
215+
</ContextMenuSubContent>
216+
</ContextMenuSub>
217+
</ContextMenuSubContent>
218+
</ContextMenuSub>
214219
</ContextMenuContent>
215220
</ContextMenu>
216221
)

‎src/components/ContextMenu/ContextMenu.test.tsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { composeStories } from '@storybook/testing-react'
22
import React from 'react'
33
import {
44
act,
5+
cleanup,
56
fireEvent,
67
renderDark,
78
renderLight,
@@ -22,45 +23,58 @@ it('renders dark without error', () => {
2223
expect(asFragment()).toBeDefined()
2324
})
2425

25-
it('renders dark when opened without error', () => {
26+
it('renders dark when opened without error', async () => {
2627
renderDark(<Default />)
2728
act(() => {
2829
fireEvent.contextMenu(screen.getByText('Right click anywhere'))
2930
})
31+
await act(async () => {
32+
/* @floating-ui fix */
33+
})
3034
expect(screen.getByText('Cut')).toBeInTheDocument()
35+
cleanup()
3136
})
3237

33-
it('renders items with role menuitem', () => {
38+
it('renders items with role menuitem', async () => {
3439
renderDark(<Default />)
3540
act(() => {
3641
fireEvent.contextMenu(screen.getByText('Right click anywhere'))
3742
})
43+
await act(async () => {
44+
/* @floating-ui fix */
45+
})
3846
expect(screen.getByRole('menuitem', { name: /copy/i })).toBeInTheDocument()
3947
})
4048

41-
it('can render nested menus', () => {
49+
it('can render nested menus', async () => {
4250
renderDark(<Nested />)
4351
expect(
4452
screen.queryByRole('menuitem', { name: /test/i })
4553
).not.toBeInTheDocument()
4654
act(() => {
4755
fireEvent.contextMenu(screen.getByText('Right click anywhere'))
4856
})
57+
await act(async () => {
58+
/* @floating-ui fix */
59+
})
4960
expect(
5061
screen.queryByRole('menuitem', { name: /test/i })
5162
).not.toBeInTheDocument()
5263
userEvent.click(screen.getByRole('menuitem', { name: /developer/i }))
5364
expect(screen.getByRole('menuitem', { name: /test/i })).toBeInTheDocument()
5465
})
5566

56-
it('can render destructive menus', () => {
67+
it('can render destructive menus', async () => {
5768
renderDark(<Destructive />)
5869
expect(
5970
screen.queryByRole('menuitem', { name: /delete/i })
6071
).not.toBeInTheDocument()
6172
act(() => {
6273
fireEvent.contextMenu(screen.getByText('Right click anywhere'))
6374
})
75+
await act(async () => {
76+
/* @floating-ui fix */
77+
})
6478
expect(
6579
screen.queryByRole('menuitem', { name: /delete/i })
6680
).toBeInTheDocument()

‎src/components/ContextMenu/ContextMenu.tsx

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@ import {
55
Item,
66
ItemIndicator,
77
Label,
8+
Portal,
89
RadioGroup,
910
RadioItem,
1011
Root,
1112
Separator,
13+
Sub,
14+
SubContent,
15+
SubTrigger,
1216
Trigger,
13-
TriggerItem,
1417
} from '@radix-ui/react-context-menu'
1518
import React, { ComponentProps, ElementRef, forwardRef } from 'react'
1619
import type { CSSProps, VariantProps } from '../../stitches.config'
1720
import { styled } from '../../stitches.config'
21+
import { ConditionalWrapper } from '../../utils'
1822
import {
1923
checkboxItemStyles,
2024
contentStyles,
@@ -25,7 +29,7 @@ import {
2529
labelStyles,
2630
separatorStyles,
2731
StyledCheckIndicator,
28-
StyledTriggerItemIndicator,
32+
StyledSubTriggerIndicator,
2933
triggerItemStyles,
3034
} from '../../utils/menuStyles'
3135
import { paperStyles } from '../Paper'
@@ -48,35 +52,78 @@ export const ContextMenuLabel = styled(Label, labelStyles)
4852
export const ContextMenuItemGroup = styled(Group, groupStyles(ContextMenuItem))
4953
export const ContextMenuRadioGroup = RadioGroup
5054

51-
export const ContextMenuContent = styled(Content, paperStyles, contentStyles)
55+
const StyledContent = styled(Content, paperStyles, contentStyles)
56+
57+
type ContextMenuContentProps = ComponentProps<typeof StyledContent> &
58+
CSSProps & {
59+
/** By default, portals your content parts into the body, set false to add at dom location. */
60+
portalled?: boolean
61+
/** Specify a container element to portal the content into. */
62+
container?: ComponentProps<typeof Portal>['container']
63+
}
64+
65+
export const ContextMenuContent = forwardRef<
66+
ElementRef<typeof StyledContent>,
67+
ContextMenuContentProps
68+
>(({ container, portalled = true, children, ...props }, forwardedRef) => (
69+
<ConditionalWrapper
70+
condition={portalled}
71+
wrapper={(child) => <Portal container={container}>{child}</Portal>}
72+
>
73+
<StyledContent {...props} ref={forwardedRef}>
74+
{children}
75+
</StyledContent>
76+
</ConditionalWrapper>
77+
))
78+
ContextMenuContent.toString = () => `.${StyledContent.className}`
5279

5380
const StyledItemIndicator = styled(ItemIndicator, itemIndicatorStyles)
5481
const StyledCheckboxItem = styled(CheckboxItem, itemStyles, checkboxItemStyles)
5582
const StyledRadioItem = styled(RadioItem, itemStyles, checkboxItemStyles)
5683

57-
const StyledContextMenuTriggerItem = styled(
58-
TriggerItem,
59-
itemStyles,
60-
triggerItemStyles
61-
)
84+
// Submenu
85+
export const ContextMenuSub = Sub
86+
const StyledSubContent = styled(SubContent, paperStyles, contentStyles)
87+
88+
type ContextMenuSubContentProps = ComponentProps<typeof StyledSubContent> &
89+
CSSProps & {
90+
/** By default, portals your content parts into the body, set false to add at dom location. */
91+
portalled?: boolean
92+
/** Specify a container element to portal the content into. */
93+
container?: ComponentProps<typeof Portal>['container']
94+
}
95+
96+
export const ContextMenuSubContent = forwardRef<
97+
ElementRef<typeof StyledSubContent>,
98+
ContextMenuSubContentProps
99+
>(({ container, portalled = true, children, ...props }, forwardedRef) => (
100+
<ConditionalWrapper
101+
condition={portalled}
102+
wrapper={(child) => <Portal container={container}>{child}</Portal>}
103+
>
104+
<StyledSubContent {...props} ref={forwardedRef}>
105+
{children}
106+
</StyledSubContent>
107+
</ConditionalWrapper>
108+
))
109+
ContextMenuSubContent.toString = () => `.${StyledSubContent.className}`
110+
111+
const StyledSubTrigger = styled(SubTrigger, itemStyles, triggerItemStyles)
62112

63-
type ContextMenuTriggerItemProps = ComponentProps<
64-
typeof StyledContextMenuTriggerItem
65-
>
113+
type ContextMenuSubTriggerProps = ComponentProps<typeof StyledSubTrigger>
66114

67-
export const ContextMenuTriggerItem = forwardRef<
68-
ElementRef<typeof StyledContextMenuTriggerItem>,
69-
ContextMenuTriggerItemProps
115+
export const ContextMenuSubTrigger = forwardRef<
116+
ElementRef<typeof StyledSubTrigger>,
117+
ContextMenuSubTriggerProps
70118
>(({ children, ...props }, forwardedRef) => {
71119
return (
72-
<StyledContextMenuTriggerItem {...props} ref={forwardedRef}>
120+
<StyledSubTrigger {...props} ref={forwardedRef}>
73121
{children}
74-
<StyledTriggerItemIndicator />
75-
</StyledContextMenuTriggerItem>
122+
<StyledSubTriggerIndicator />
123+
</StyledSubTrigger>
76124
)
77125
})
78-
ContextMenuTriggerItem.toString = () =>
79-
`.${StyledContextMenuTriggerItem.className}`
126+
ContextMenuSubTrigger.toString = () => `.${StyledSubTrigger.className}`
80127

81128
type ContextMenuCheckboxItemProps = ComponentProps<typeof CheckboxItem> &
82129
CSSProps

0 commit comments

Comments
 (0)