Skip to content

Commit 5c02ee3

Browse files
mverissimomverissimo
committed
feat(react): add missing exports
1 parent e6da2ac commit 5c02ee3

File tree

8 files changed

+167
-219
lines changed

8 files changed

+167
-219
lines changed

‎packages/react/src/components/floating-panel/examples/basic.tsx

+38-52
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,45 @@
1-
import {
2-
FloatingPanel,
3-
FloatingPanelBody,
4-
FloatingPanelCloseTrigger,
5-
FloatingPanelContent,
6-
FloatingPanelDragTrigger,
7-
FloatingPanelHeader,
8-
FloatingPanelMaximizeTrigger,
9-
FloatingPanelMinimizeTrigger,
10-
FloatingPanelPositioner,
11-
FloatingPanelResizeTrigger,
12-
FloatingPanelRestoreTrigger,
13-
FloatingPanelTitle,
14-
FloatingPanelTrigger,
15-
Portal,
16-
} from '../..'
17-
181
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
2+
import { FloatingPanel, Portal } from '../..'
193

204
export const Basic = () => (
215
<FloatingPanel.Root>
22-
<FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
23-
<FloatingPanelPositioner>
24-
<FloatingPanelContent>
25-
<FloatingPanelDragTrigger>
26-
<FloatingPanelHeader>
27-
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
28-
<div data-scope="floating-panel" data-part="trigger-group">
29-
<FloatingPanelMinimizeTrigger>
30-
<Minus />
31-
</FloatingPanelMinimizeTrigger>
32-
<FloatingPanelMaximizeTrigger>
33-
<Maximize2 />
34-
</FloatingPanelMaximizeTrigger>
35-
<FloatingPanelRestoreTrigger>
36-
<ArrowDownLeft />
37-
</FloatingPanelRestoreTrigger>
38-
<FloatingPanelCloseTrigger>
39-
<XIcon />
40-
</FloatingPanelCloseTrigger>
41-
</div>
42-
</FloatingPanelHeader>
43-
</FloatingPanelDragTrigger>
44-
<FloatingPanelBody>
45-
<p>Some content</p>
46-
</FloatingPanelBody>
6+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
7+
<Portal>
8+
<FloatingPanel.Positioner>
9+
<FloatingPanel.Content>
10+
<FloatingPanel.DragTrigger>
11+
<FloatingPanel.Header>
12+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
13+
<div data-scope="floating-panel" data-part="trigger-group">
14+
<FloatingPanel.MinimizeTrigger>
15+
<Minus />
16+
</FloatingPanel.MinimizeTrigger>
17+
<FloatingPanel.MaximizeTrigger>
18+
<Maximize2 />
19+
</FloatingPanel.MaximizeTrigger>
20+
<FloatingPanel.RestoreTrigger>
21+
<ArrowDownLeft />
22+
</FloatingPanel.RestoreTrigger>
23+
<FloatingPanel.CloseTrigger>
24+
<XIcon />
25+
</FloatingPanel.CloseTrigger>
26+
</div>
27+
</FloatingPanel.Header>
28+
</FloatingPanel.DragTrigger>
29+
<FloatingPanel.Body>
30+
<p>Some content</p>
31+
</FloatingPanel.Body>
4732

48-
<FloatingPanelResizeTrigger axis="n" />
49-
<FloatingPanelResizeTrigger axis="e" />
50-
<FloatingPanelResizeTrigger axis="w" />
51-
<FloatingPanelResizeTrigger axis="s" />
52-
<FloatingPanelResizeTrigger axis="ne" />
53-
<FloatingPanelResizeTrigger axis="se" />
54-
<FloatingPanelResizeTrigger axis="sw" />
55-
<FloatingPanelResizeTrigger axis="nw" />
56-
</FloatingPanelContent>
57-
</FloatingPanelPositioner>
33+
<FloatingPanel.ResizeTrigger axis="n" />
34+
<FloatingPanel.ResizeTrigger axis="e" />
35+
<FloatingPanel.ResizeTrigger axis="w" />
36+
<FloatingPanel.ResizeTrigger axis="s" />
37+
<FloatingPanel.ResizeTrigger axis="ne" />
38+
<FloatingPanel.ResizeTrigger axis="se" />
39+
<FloatingPanel.ResizeTrigger axis="sw" />
40+
<FloatingPanel.ResizeTrigger axis="nw" />
41+
</FloatingPanel.Content>
42+
</FloatingPanel.Positioner>
43+
</Portal>
5844
</FloatingPanel.Root>
5945
)

‎packages/react/src/components/floating-panel/examples/controlled.tsx

+30-46
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,49 @@
1-
import { useState } from 'react'
2-
import {
3-
FloatingPanel,
4-
FloatingPanelBody,
5-
FloatingPanelCloseTrigger,
6-
FloatingPanelContent,
7-
FloatingPanelDragTrigger,
8-
FloatingPanelHeader,
9-
FloatingPanelMaximizeTrigger,
10-
FloatingPanelMinimizeTrigger,
11-
FloatingPanelPositioner,
12-
FloatingPanelResizeTrigger,
13-
FloatingPanelRestoreTrigger,
14-
FloatingPanelTitle,
15-
FloatingPanelTrigger,
16-
Portal,
17-
} from '../..'
18-
191
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
2+
import { useState } from 'react'
3+
import { FloatingPanel, Portal } from '../..'
204

215
export const Controlled = () => {
226
const [isOpen, setIsOpen] = useState(false)
237

248
return (
259
<FloatingPanel.Root open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
26-
<FloatingPanelTrigger onClick={() => setIsOpen(true)}>Toggle Panel</FloatingPanelTrigger>
10+
<FloatingPanel.Trigger onClick={() => setIsOpen(true)}>Toggle Panel</FloatingPanel.Trigger>
2711
<Portal>
28-
<FloatingPanelPositioner>
29-
<FloatingPanelContent>
30-
<FloatingPanelDragTrigger>
31-
<FloatingPanelHeader>
32-
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
12+
<FloatingPanel.Positioner>
13+
<FloatingPanel.Content>
14+
<FloatingPanel.DragTrigger>
15+
<FloatingPanel.Header>
16+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
3317
<div data-scope="floating-panel" data-part="trigger-group">
34-
<FloatingPanelMinimizeTrigger>
18+
<FloatingPanel.MinimizeTrigger>
3519
<Minus />
36-
</FloatingPanelMinimizeTrigger>
37-
<FloatingPanelMaximizeTrigger>
20+
</FloatingPanel.MinimizeTrigger>
21+
<FloatingPanel.MaximizeTrigger>
3822
<Maximize2 />
39-
</FloatingPanelMaximizeTrigger>
40-
<FloatingPanelRestoreTrigger>
23+
</FloatingPanel.MaximizeTrigger>
24+
<FloatingPanel.RestoreTrigger>
4125
<ArrowDownLeft />
42-
</FloatingPanelRestoreTrigger>
43-
<FloatingPanelCloseTrigger>
26+
</FloatingPanel.RestoreTrigger>
27+
<FloatingPanel.CloseTrigger>
4428
<XIcon />
45-
</FloatingPanelCloseTrigger>
29+
</FloatingPanel.CloseTrigger>
4630
</div>
47-
</FloatingPanelHeader>
48-
</FloatingPanelDragTrigger>
49-
<FloatingPanelBody>
31+
</FloatingPanel.Header>
32+
</FloatingPanel.DragTrigger>
33+
<FloatingPanel.Body>
5034
<p>Some content</p>
51-
</FloatingPanelBody>
35+
</FloatingPanel.Body>
5236

53-
<FloatingPanelResizeTrigger axis="n" />
54-
<FloatingPanelResizeTrigger axis="e" />
55-
<FloatingPanelResizeTrigger axis="w" />
56-
<FloatingPanelResizeTrigger axis="s" />
57-
<FloatingPanelResizeTrigger axis="ne" />
58-
<FloatingPanelResizeTrigger axis="se" />
59-
<FloatingPanelResizeTrigger axis="sw" />
60-
<FloatingPanelResizeTrigger axis="nw" />
61-
</FloatingPanelContent>
62-
</FloatingPanelPositioner>
37+
<FloatingPanel.ResizeTrigger axis="n" />
38+
<FloatingPanel.ResizeTrigger axis="e" />
39+
<FloatingPanel.ResizeTrigger axis="w" />
40+
<FloatingPanel.ResizeTrigger axis="s" />
41+
<FloatingPanel.ResizeTrigger axis="ne" />
42+
<FloatingPanel.ResizeTrigger axis="se" />
43+
<FloatingPanel.ResizeTrigger axis="sw" />
44+
<FloatingPanel.ResizeTrigger axis="nw" />
45+
</FloatingPanel.Content>
46+
</FloatingPanel.Positioner>
6347
</Portal>
6448
</FloatingPanel.Root>
6549
)

‎packages/react/src/components/floating-panel/examples/lazy-mount.tsx

+29-44
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,46 @@
1-
import {
2-
FloatingPanel,
3-
FloatingPanelBody,
4-
FloatingPanelCloseTrigger,
5-
FloatingPanelContent,
6-
FloatingPanelDragTrigger,
7-
FloatingPanelHeader,
8-
FloatingPanelMaximizeTrigger,
9-
FloatingPanelMinimizeTrigger,
10-
FloatingPanelPositioner,
11-
FloatingPanelResizeTrigger,
12-
FloatingPanelRestoreTrigger,
13-
FloatingPanelTitle,
14-
FloatingPanelTrigger,
15-
Portal,
16-
} from '../..'
1+
import { FloatingPanel, Portal } from '../..'
172

183
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
194

205
export const LazyMount = () => (
216
<FloatingPanel.Root lazyMount onExitComplete={() => console.log('onExitComplete invoked')}>
22-
<FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
7+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
238
<Portal>
24-
<FloatingPanelPositioner>
25-
<FloatingPanelContent>
26-
<FloatingPanelDragTrigger>
27-
<FloatingPanelHeader>
28-
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
9+
<FloatingPanel.Positioner>
10+
<FloatingPanel.Content>
11+
<FloatingPanel.DragTrigger>
12+
<FloatingPanel.Header>
13+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
2914
<div data-scope="floating-panel" data-part="trigger-group">
30-
<FloatingPanelMinimizeTrigger>
15+
<FloatingPanel.MinimizeTrigger>
3116
<Minus />
32-
</FloatingPanelMinimizeTrigger>
33-
<FloatingPanelMaximizeTrigger>
17+
</FloatingPanel.MinimizeTrigger>
18+
<FloatingPanel.MaximizeTrigger>
3419
<Maximize2 />
35-
</FloatingPanelMaximizeTrigger>
36-
<FloatingPanelRestoreTrigger>
20+
</FloatingPanel.MaximizeTrigger>
21+
<FloatingPanel.RestoreTrigger>
3722
<ArrowDownLeft />
38-
</FloatingPanelRestoreTrigger>
39-
<FloatingPanelCloseTrigger>
23+
</FloatingPanel.RestoreTrigger>
24+
<FloatingPanel.CloseTrigger>
4025
<XIcon />
41-
</FloatingPanelCloseTrigger>
26+
</FloatingPanel.CloseTrigger>
4227
</div>
43-
</FloatingPanelHeader>
44-
</FloatingPanelDragTrigger>
45-
<FloatingPanelBody>
28+
</FloatingPanel.Header>
29+
</FloatingPanel.DragTrigger>
30+
<FloatingPanel.Body>
4631
<p>Some content</p>
47-
</FloatingPanelBody>
32+
</FloatingPanel.Body>
4833

49-
<FloatingPanelResizeTrigger axis="n" />
50-
<FloatingPanelResizeTrigger axis="e" />
51-
<FloatingPanelResizeTrigger axis="w" />
52-
<FloatingPanelResizeTrigger axis="s" />
53-
<FloatingPanelResizeTrigger axis="ne" />
54-
<FloatingPanelResizeTrigger axis="se" />
55-
<FloatingPanelResizeTrigger axis="sw" />
56-
<FloatingPanelResizeTrigger axis="nw" />
57-
</FloatingPanelContent>
58-
</FloatingPanelPositioner>
34+
<FloatingPanel.ResizeTrigger axis="n" />
35+
<FloatingPanel.ResizeTrigger axis="e" />
36+
<FloatingPanel.ResizeTrigger axis="w" />
37+
<FloatingPanel.ResizeTrigger axis="s" />
38+
<FloatingPanel.ResizeTrigger axis="ne" />
39+
<FloatingPanel.ResizeTrigger axis="se" />
40+
<FloatingPanel.ResizeTrigger axis="sw" />
41+
<FloatingPanel.ResizeTrigger axis="nw" />
42+
</FloatingPanel.Content>
43+
</FloatingPanel.Positioner>
5944
</Portal>
6045
</FloatingPanel.Root>
6146
)

‎packages/react/src/components/floating-panel/examples/render-fn.tsx

+32-49
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,48 @@
1-
import {
2-
FloatingPanel,
3-
FloatingPanelBody,
4-
FloatingPanelCloseTrigger,
5-
FloatingPanelContent,
6-
FloatingPanelContext,
7-
FloatingPanelDragTrigger,
8-
FloatingPanelHeader,
9-
FloatingPanelMaximizeTrigger,
10-
FloatingPanelMinimizeTrigger,
11-
FloatingPanelPositioner,
12-
FloatingPanelResizeTrigger,
13-
FloatingPanelRestoreTrigger,
14-
FloatingPanelTitle,
15-
FloatingPanelTrigger,
16-
Portal,
17-
} from '../..'
18-
191
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
2+
import { FloatingPanel, Portal } from '../..'
203

214
export const RenderFn = () => (
225
<FloatingPanel.Root>
23-
<FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
6+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
247
<Portal>
25-
<FloatingPanelPositioner>
26-
<FloatingPanelContent>
27-
<FloatingPanelDragTrigger>
28-
<FloatingPanelHeader>
29-
<FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
8+
<FloatingPanel.Positioner>
9+
<FloatingPanel.Content>
10+
<FloatingPanel.DragTrigger>
11+
<FloatingPanel.Header>
12+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
3013
<div data-scope="floating-panel" data-part="trigger-group">
31-
<FloatingPanelMinimizeTrigger>
14+
<FloatingPanel.MinimizeTrigger>
3215
<Minus />
33-
</FloatingPanelMinimizeTrigger>
34-
<FloatingPanelMaximizeTrigger>
16+
</FloatingPanel.MinimizeTrigger>
17+
<FloatingPanel.MaximizeTrigger>
3518
<Maximize2 />
36-
</FloatingPanelMaximizeTrigger>
37-
<FloatingPanelRestoreTrigger>
19+
</FloatingPanel.MaximizeTrigger>
20+
<FloatingPanel.RestoreTrigger>
3821
<ArrowDownLeft />
39-
</FloatingPanelRestoreTrigger>
40-
<FloatingPanelCloseTrigger>
22+
</FloatingPanel.RestoreTrigger>
23+
<FloatingPanel.CloseTrigger>
4124
<XIcon />
42-
</FloatingPanelCloseTrigger>
25+
</FloatingPanel.CloseTrigger>
4326
</div>
44-
</FloatingPanelHeader>
45-
</FloatingPanelDragTrigger>
46-
<FloatingPanelBody>
27+
</FloatingPanel.Header>
28+
</FloatingPanel.DragTrigger>
29+
<FloatingPanel.Body>
4730
<p>Some content</p>
48-
</FloatingPanelBody>
31+
</FloatingPanel.Body>
4932

50-
<FloatingPanelResizeTrigger axis="n" />
51-
<FloatingPanelResizeTrigger axis="e" />
52-
<FloatingPanelResizeTrigger axis="w" />
53-
<FloatingPanelResizeTrigger axis="s" />
54-
<FloatingPanelResizeTrigger axis="ne" />
55-
<FloatingPanelResizeTrigger axis="se" />
56-
<FloatingPanelResizeTrigger axis="sw" />
57-
<FloatingPanelResizeTrigger axis="nw" />
58-
</FloatingPanelContent>
59-
</FloatingPanelPositioner>
33+
<FloatingPanel.ResizeTrigger axis="n" />
34+
<FloatingPanel.ResizeTrigger axis="e" />
35+
<FloatingPanel.ResizeTrigger axis="w" />
36+
<FloatingPanel.ResizeTrigger axis="s" />
37+
<FloatingPanel.ResizeTrigger axis="ne" />
38+
<FloatingPanel.ResizeTrigger axis="se" />
39+
<FloatingPanel.ResizeTrigger axis="sw" />
40+
<FloatingPanel.ResizeTrigger axis="nw" />
41+
</FloatingPanel.Content>
42+
</FloatingPanel.Positioner>
6043
</Portal>
61-
<FloatingPanelContext>
62-
{(floatingPanel) => <p>floatingPanel is {floatingPanel.open ? 'open' : 'closed'}</p>}
63-
</FloatingPanelContext>
44+
<FloatingPanel.Context>
45+
{(floatingPanel) => <p>floatingPanel. is {floatingPanel.open ? 'open' : 'closed'}</p>}
46+
</FloatingPanel.Context>
6447
</FloatingPanel.Root>
6548
)

0 commit comments

Comments
 (0)