Skip to content

Commit 658b4f5

Browse files
segunadebayosegunadebayo
committed
docs: add floating panel
1 parent a836baa commit 658b4f5

19 files changed

+679
-7
lines changed

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

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { FloatingPanel } from '@ark-ui/react/floating-panel'
2+
import { Portal } from '@ark-ui/react/portal'
3+
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
4+
5+
export const AnchorPosition = () => (
6+
<FloatingPanel.Root
7+
getAnchorPosition={({ triggerRect }) => {
8+
if (!triggerRect) return { x: 0, y: 0 }
9+
return {
10+
x: triggerRect.x + triggerRect.width / 2,
11+
y: triggerRect.y + triggerRect.height / 2,
12+
}
13+
}}
14+
>
15+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
16+
<Portal>
17+
<FloatingPanel.Positioner>
18+
<FloatingPanel.Content>
19+
<FloatingPanel.DragTrigger>
20+
<FloatingPanel.Header>
21+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
22+
<FloatingPanel.Control>
23+
<FloatingPanel.StageTrigger stage="minimized">
24+
<Minus />
25+
</FloatingPanel.StageTrigger>
26+
<FloatingPanel.StageTrigger stage="maximized">
27+
<Maximize2 />
28+
</FloatingPanel.StageTrigger>
29+
<FloatingPanel.StageTrigger stage="default">
30+
<ArrowDownLeft />
31+
</FloatingPanel.StageTrigger>
32+
<FloatingPanel.CloseTrigger>
33+
<XIcon />
34+
</FloatingPanel.CloseTrigger>
35+
</FloatingPanel.Control>
36+
</FloatingPanel.Header>
37+
</FloatingPanel.DragTrigger>
38+
<FloatingPanel.Body>
39+
<p>Some content</p>
40+
</FloatingPanel.Body>
41+
42+
<FloatingPanel.ResizeTrigger axis="n" />
43+
<FloatingPanel.ResizeTrigger axis="e" />
44+
<FloatingPanel.ResizeTrigger axis="w" />
45+
<FloatingPanel.ResizeTrigger axis="s" />
46+
<FloatingPanel.ResizeTrigger axis="ne" />
47+
<FloatingPanel.ResizeTrigger axis="se" />
48+
<FloatingPanel.ResizeTrigger axis="sw" />
49+
<FloatingPanel.ResizeTrigger axis="nw" />
50+
</FloatingPanel.Content>
51+
</FloatingPanel.Positioner>
52+
</Portal>
53+
</FloatingPanel.Root>
54+
)

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { Portal } from '@ark-ui/react/portal'
33
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
44
import { useState } from 'react'
55

6-
export const Controlled = () => {
7-
const [isOpen, setIsOpen] = useState(false)
6+
export const ControlledOpen = () => {
7+
const [open, setOpen] = useState(false)
88

99
return (
10-
<FloatingPanel.Root open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
10+
<FloatingPanel.Root open={open} onOpenChange={(e) => setOpen(e.open)}>
1111
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
1212
<Portal>
1313
<FloatingPanel.Positioner>

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FloatingPanel } from '@ark-ui/react/floating-panel'
2+
import { Portal } from '@ark-ui/react/portal'
3+
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
4+
import { useState } from 'react'
5+
6+
export const ControlledPosition = () => {
7+
const [position, setPosition] = useState({ x: 200, y: 200 })
8+
9+
return (
10+
<FloatingPanel.Root position={position} onPositionChange={(e) => setPosition(e.position)}>
11+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
12+
<Portal>
13+
<FloatingPanel.Positioner>
14+
<FloatingPanel.Content>
15+
<FloatingPanel.DragTrigger>
16+
<FloatingPanel.Header>
17+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
18+
<FloatingPanel.Control>
19+
<FloatingPanel.StageTrigger stage="minimized">
20+
<Minus />
21+
</FloatingPanel.StageTrigger>
22+
<FloatingPanel.StageTrigger stage="maximized">
23+
<Maximize2 />
24+
</FloatingPanel.StageTrigger>
25+
<FloatingPanel.StageTrigger stage="default">
26+
<ArrowDownLeft />
27+
</FloatingPanel.StageTrigger>
28+
<FloatingPanel.CloseTrigger>
29+
<XIcon />
30+
</FloatingPanel.CloseTrigger>
31+
</FloatingPanel.Control>
32+
</FloatingPanel.Header>
33+
</FloatingPanel.DragTrigger>
34+
<FloatingPanel.Body>
35+
<p>Some content</p>
36+
</FloatingPanel.Body>
37+
38+
<FloatingPanel.ResizeTrigger axis="n" />
39+
<FloatingPanel.ResizeTrigger axis="e" />
40+
<FloatingPanel.ResizeTrigger axis="w" />
41+
<FloatingPanel.ResizeTrigger axis="s" />
42+
<FloatingPanel.ResizeTrigger axis="ne" />
43+
<FloatingPanel.ResizeTrigger axis="se" />
44+
<FloatingPanel.ResizeTrigger axis="sw" />
45+
<FloatingPanel.ResizeTrigger axis="nw" />
46+
</FloatingPanel.Content>
47+
</FloatingPanel.Positioner>
48+
</Portal>
49+
</FloatingPanel.Root>
50+
)
51+
}

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FloatingPanel } from '@ark-ui/react/floating-panel'
2+
import { Portal } from '@ark-ui/react/portal'
3+
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
4+
import { useState } from 'react'
5+
6+
export const ControlledSize = () => {
7+
const [size, setSize] = useState({ width: 400, height: 300 })
8+
9+
return (
10+
<FloatingPanel.Root size={size} onSizeChange={(e) => setSize(e.size)}>
11+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
12+
<Portal>
13+
<FloatingPanel.Positioner>
14+
<FloatingPanel.Content>
15+
<FloatingPanel.DragTrigger>
16+
<FloatingPanel.Header>
17+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
18+
<FloatingPanel.Control>
19+
<FloatingPanel.StageTrigger stage="minimized">
20+
<Minus />
21+
</FloatingPanel.StageTrigger>
22+
<FloatingPanel.StageTrigger stage="maximized">
23+
<Maximize2 />
24+
</FloatingPanel.StageTrigger>
25+
<FloatingPanel.StageTrigger stage="default">
26+
<ArrowDownLeft />
27+
</FloatingPanel.StageTrigger>
28+
<FloatingPanel.CloseTrigger>
29+
<XIcon />
30+
</FloatingPanel.CloseTrigger>
31+
</FloatingPanel.Control>
32+
</FloatingPanel.Header>
33+
</FloatingPanel.DragTrigger>
34+
<FloatingPanel.Body>
35+
<p>Some content</p>
36+
</FloatingPanel.Body>
37+
38+
<FloatingPanel.ResizeTrigger axis="n" />
39+
<FloatingPanel.ResizeTrigger axis="e" />
40+
<FloatingPanel.ResizeTrigger axis="w" />
41+
<FloatingPanel.ResizeTrigger axis="s" />
42+
<FloatingPanel.ResizeTrigger axis="ne" />
43+
<FloatingPanel.ResizeTrigger axis="se" />
44+
<FloatingPanel.ResizeTrigger axis="sw" />
45+
<FloatingPanel.ResizeTrigger axis="nw" />
46+
</FloatingPanel.Content>
47+
</FloatingPanel.Positioner>
48+
</Portal>
49+
</FloatingPanel.Root>
50+
)
51+
}

‎packages/react/src/components/floating-panel/floating-panel.stories.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ const meta: Meta = {
66

77
export default meta
88

9+
export { AnchorPosition } from './examples/anchor-position'
910
export { Basic } from './examples/basic'
10-
export { Controlled } from './examples/controlled'
11+
export { ControlledOpen } from './examples/controlled-open'
12+
export { ControlledPosition } from './examples/controlled-position'
13+
export { ControlledSize } from './examples/controlled-size'
1114
export { LazyMount } from './examples/lazy-mount'
1215
export { RenderFn } from './examples/render-fn'

‎packages/solid/src/components/floating-panel/examples/anchor-position.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { FloatingPanel } from '@ark-ui/solid/floating-panel'
2+
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-solid'
3+
import { Portal } from 'solid-js/web'
4+
5+
export const AnchorPosition = () => (
6+
<FloatingPanel.Root
7+
getAnchorPosition={({ triggerRect }) => {
8+
if (!triggerRect) return { x: 0, y: 0 }
9+
return {
10+
x: triggerRect.x + triggerRect.width / 2,
11+
y: triggerRect.y + triggerRect.height / 2,
12+
}
13+
}}
14+
>
15+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
16+
<Portal>
17+
<FloatingPanel.Positioner>
18+
<FloatingPanel.Content>
19+
<FloatingPanel.DragTrigger>
20+
<FloatingPanel.Header>
21+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
22+
<FloatingPanel.Control>
23+
<FloatingPanel.StageTrigger stage="minimized">
24+
<Minus />
25+
</FloatingPanel.StageTrigger>
26+
<FloatingPanel.StageTrigger stage="maximized">
27+
<Maximize2 />
28+
</FloatingPanel.StageTrigger>
29+
<FloatingPanel.StageTrigger stage="default">
30+
<ArrowDownLeft />
31+
</FloatingPanel.StageTrigger>
32+
<FloatingPanel.CloseTrigger>
33+
<XIcon />
34+
</FloatingPanel.CloseTrigger>
35+
</FloatingPanel.Control>
36+
</FloatingPanel.Header>
37+
</FloatingPanel.DragTrigger>
38+
<FloatingPanel.Body>
39+
<p>Some content</p>
40+
</FloatingPanel.Body>
41+
42+
<FloatingPanel.ResizeTrigger axis="n" />
43+
<FloatingPanel.ResizeTrigger axis="e" />
44+
<FloatingPanel.ResizeTrigger axis="w" />
45+
<FloatingPanel.ResizeTrigger axis="s" />
46+
<FloatingPanel.ResizeTrigger axis="ne" />
47+
<FloatingPanel.ResizeTrigger axis="se" />
48+
<FloatingPanel.ResizeTrigger axis="sw" />
49+
<FloatingPanel.ResizeTrigger axis="nw" />
50+
</FloatingPanel.Content>
51+
</FloatingPanel.Positioner>
52+
</Portal>
53+
</FloatingPanel.Root>
54+
)

‎packages/solid/src/components/floating-panel/examples/controlled.tsx renamed to ‎packages/solid/src/components/floating-panel/examples/controlled-open.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-solid'
33
import { createSignal } from 'solid-js'
44
import { Portal } from 'solid-js/web'
55

6-
export const Controlled = () => {
6+
export const ControlledOpen = () => {
77
const [open, setOpen] = createSignal(false)
88

99
return (

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FloatingPanel } from '@ark-ui/solid/floating-panel'
2+
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-solid'
3+
import { createSignal } from 'solid-js'
4+
import { Portal } from 'solid-js/web'
5+
6+
export const ControlledPosition = () => {
7+
const [position, setPosition] = createSignal({ x: 200, y: 200 })
8+
9+
return (
10+
<FloatingPanel.Root position={position()} onPositionChange={(e) => setPosition(e.position)}>
11+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
12+
<Portal>
13+
<FloatingPanel.Positioner>
14+
<FloatingPanel.Content>
15+
<FloatingPanel.DragTrigger>
16+
<FloatingPanel.Header>
17+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
18+
<FloatingPanel.Control>
19+
<FloatingPanel.StageTrigger stage="minimized">
20+
<Minus />
21+
</FloatingPanel.StageTrigger>
22+
<FloatingPanel.StageTrigger stage="maximized">
23+
<Maximize2 />
24+
</FloatingPanel.StageTrigger>
25+
<FloatingPanel.StageTrigger stage="default">
26+
<ArrowDownLeft />
27+
</FloatingPanel.StageTrigger>
28+
<FloatingPanel.CloseTrigger>
29+
<XIcon />
30+
</FloatingPanel.CloseTrigger>
31+
</FloatingPanel.Control>
32+
</FloatingPanel.Header>
33+
</FloatingPanel.DragTrigger>
34+
<FloatingPanel.Body>
35+
<p>Some content</p>
36+
</FloatingPanel.Body>
37+
38+
<FloatingPanel.ResizeTrigger axis="n" />
39+
<FloatingPanel.ResizeTrigger axis="e" />
40+
<FloatingPanel.ResizeTrigger axis="w" />
41+
<FloatingPanel.ResizeTrigger axis="s" />
42+
<FloatingPanel.ResizeTrigger axis="ne" />
43+
<FloatingPanel.ResizeTrigger axis="se" />
44+
<FloatingPanel.ResizeTrigger axis="sw" />
45+
<FloatingPanel.ResizeTrigger axis="nw" />
46+
</FloatingPanel.Content>
47+
</FloatingPanel.Positioner>
48+
</Portal>
49+
</FloatingPanel.Root>
50+
)
51+
}

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FloatingPanel } from '@ark-ui/solid/floating-panel'
2+
import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-solid'
3+
import { createSignal } from 'solid-js'
4+
import { Portal } from 'solid-js/web'
5+
6+
export const ControlledSize = () => {
7+
const [size, setSize] = createSignal({ width: 400, height: 300 })
8+
9+
return (
10+
<FloatingPanel.Root size={size()} onSizeChange={(e) => setSize(e.size)}>
11+
<FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
12+
<Portal>
13+
<FloatingPanel.Positioner>
14+
<FloatingPanel.Content>
15+
<FloatingPanel.DragTrigger>
16+
<FloatingPanel.Header>
17+
<FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
18+
<FloatingPanel.Control>
19+
<FloatingPanel.StageTrigger stage="minimized">
20+
<Minus />
21+
</FloatingPanel.StageTrigger>
22+
<FloatingPanel.StageTrigger stage="maximized">
23+
<Maximize2 />
24+
</FloatingPanel.StageTrigger>
25+
<FloatingPanel.StageTrigger stage="default">
26+
<ArrowDownLeft />
27+
</FloatingPanel.StageTrigger>
28+
<FloatingPanel.CloseTrigger>
29+
<XIcon />
30+
</FloatingPanel.CloseTrigger>
31+
</FloatingPanel.Control>
32+
</FloatingPanel.Header>
33+
</FloatingPanel.DragTrigger>
34+
<FloatingPanel.Body>
35+
<p>Some content</p>
36+
</FloatingPanel.Body>
37+
38+
<FloatingPanel.ResizeTrigger axis="n" />
39+
<FloatingPanel.ResizeTrigger axis="e" />
40+
<FloatingPanel.ResizeTrigger axis="w" />
41+
<FloatingPanel.ResizeTrigger axis="s" />
42+
<FloatingPanel.ResizeTrigger axis="ne" />
43+
<FloatingPanel.ResizeTrigger axis="se" />
44+
<FloatingPanel.ResizeTrigger axis="sw" />
45+
<FloatingPanel.ResizeTrigger axis="nw" />
46+
</FloatingPanel.Content>
47+
</FloatingPanel.Positioner>
48+
</Portal>
49+
</FloatingPanel.Root>
50+
)
51+
}

‎packages/solid/src/components/floating-panel/floating-panel.stories.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ const meta: Meta = {
66

77
export default meta
88

9+
export { AnchorPosition } from './examples/anchor-position'
910
export { Basic } from './examples/basic'
10-
export { Controlled } from './examples/controlled'
11+
export { ControlledOpen } from './examples/controlled-open'
12+
export { ControlledPosition } from './examples/controlled-position'
13+
export { ControlledSize } from './examples/controlled-size'
1114
export { LazyMount } from './examples/lazy-mount'
1215
export { RenderFn } from './examples/render-fn'

0 commit comments

Comments
 (0)