Skip to content

Commit 77f444a

Browse files
tanerengiiintanerengiiin
committed
refactor: extract Portal and Popup from DialogPortal
1 parent 0638b2d commit 77f444a

58 files changed

Lines changed: 1025 additions & 748 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/__store__/index.tsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,12 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
154154
'filePath': 'demo/headless/fieldset/basic-demo.tsx',
155155
},
156156
},
157+
'focustrap': {
158+
'basic-demo': {
159+
'component': React.lazy(() => import('demo/headless/focustrap/basic-demo')),
160+
'filePath': 'demo/headless/focustrap/basic-demo.tsx',
161+
},
162+
},
157163
'inplace': {
158164
'basic-demo': {
159165
'component': React.lazy(() => import('demo/headless/inplace/basic-demo')),
@@ -280,12 +286,6 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
280286
'filePath': 'demo/headless/toolbar/basic-demo.tsx',
281287
},
282288
},
283-
'tooltip': {
284-
'basic-demo': {
285-
'component': React.lazy(() => import('demo/headless/tooltip/basic-demo')),
286-
'filePath': 'demo/headless/tooltip/basic-demo.tsx',
287-
},
288-
},
289289
},
290290
'primitives': {
291291
'accordion': {
@@ -306,6 +306,12 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
306306
'filePath': 'demo/primitives/avatar/basic-demo.tsx',
307307
},
308308
},
309+
'backdrop': {
310+
'basic-demo': {
311+
'component': React.lazy(() => import('demo/primitives/backdrop/basic-demo')),
312+
'filePath': 'demo/primitives/backdrop/basic-demo.tsx',
313+
},
314+
},
309315
'badge': {
310316
'basic-demo': {
311317
'component': React.lazy(() => import('demo/primitives/badge/basic-demo')),
@@ -360,6 +366,12 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
360366
'filePath': 'demo/primitives/fieldset/basic-demo.tsx',
361367
},
362368
},
369+
'focustrap': {
370+
'basic-demo': {
371+
'component': React.lazy(() => import('demo/primitives/focustrap/basic-demo')),
372+
'filePath': 'demo/primitives/focustrap/basic-demo.tsx',
373+
},
374+
},
363375
'inplace': {
364376
'basic-demo': {
365377
'component': React.lazy(() => import('demo/primitives/inplace/basic-demo')),
@@ -480,10 +492,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
480492
'filePath': 'demo/primitives/toolbar/basic-demo.tsx',
481493
},
482494
},
483-
'tooltip': {
495+
'visuallyhidden': {
484496
'basic-demo': {
485-
'component': React.lazy(() => import('demo/primitives/tooltip/basic-demo')),
486-
'filePath': 'demo/primitives/tooltip/basic-demo.tsx',
497+
'component': React.lazy(() => import('demo/primitives/visuallyhidden/basic-demo')),
498+
'filePath': 'demo/primitives/visuallyhidden/basic-demo.tsx',
487499
},
488500
},
489501
},

‎apps/showcase/demo/styled/commandmenu/with-dialog-demo.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ export default function BasicDemo() {
2121
CTRL/⌘ + K
2222
</kbd>
2323
</Dialog.Trigger>
24-
<Dialog.Backdrop />
25-
<Dialog.Portal className="overflow-hidden max-w-md w-full">
26-
<CommandMenu.Root
24+
<Dialog.Portal>
25+
<Dialog.Backdrop />
26+
<Dialog.Popup className="overflow-hidden max-w-md w-full">
27+
<CommandMenu.Root
2728
className="rounded-none border-none"
2829
options={commands}
2930
optionLabel="label"
@@ -75,6 +76,7 @@ export default function BasicDemo() {
7576
</span>
7677
</CommandMenu.Footer>
7778
</CommandMenu.Root>
79+
</Dialog.Popup>
7880
</Dialog.Portal>
7981
</Dialog.Root>
8082
</div>

‎apps/showcase/demo/styled/confirmdialog/basic-demo.tsx‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,49 +10,53 @@ export default function BasicDemo() {
1010
<ConfirmDialog.Trigger as={Button} variant="outlined">
1111
Save
1212
</ConfirmDialog.Trigger>
13-
<ConfirmDialog.Backdrop />
1413
<ConfirmDialog.Portal>
15-
<ConfirmDialog.Header>
16-
<ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
17-
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
18-
<Times />
19-
</ConfirmDialog.Close>
20-
</ConfirmDialog.Header>
21-
<ConfirmDialog.Content>
22-
<ExclamationTriangle className="w-8 h-8" />
23-
<ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
24-
</ConfirmDialog.Content>
25-
<ConfirmDialog.Footer>
26-
<ConfirmDialog.Close as={Button} variant="outlined">
27-
Cancel
28-
</ConfirmDialog.Close>
29-
<ConfirmDialog.Close as={Button}>Save</ConfirmDialog.Close>
30-
</ConfirmDialog.Footer>
14+
<ConfirmDialog.Backdrop />
15+
<ConfirmDialog.Popup>
16+
<ConfirmDialog.Header>
17+
<ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
18+
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
19+
<Times />
20+
</ConfirmDialog.Close>
21+
</ConfirmDialog.Header>
22+
<ConfirmDialog.Content>
23+
<ExclamationTriangle className="w-8 h-8" />
24+
<ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
25+
</ConfirmDialog.Content>
26+
<ConfirmDialog.Footer>
27+
<ConfirmDialog.Close as={Button} variant="outlined">
28+
Cancel
29+
</ConfirmDialog.Close>
30+
<ConfirmDialog.Close as={Button}>Save</ConfirmDialog.Close>
31+
</ConfirmDialog.Footer>
32+
</ConfirmDialog.Popup>
3133
</ConfirmDialog.Portal>
3234
</ConfirmDialog.Root>
3335
<ConfirmDialog.Root>
3436
<ConfirmDialog.Trigger as={Button} severity="danger" variant="outlined">
3537
Delete
3638
</ConfirmDialog.Trigger>
37-
<ConfirmDialog.Backdrop />
3839
<ConfirmDialog.Portal>
39-
<ConfirmDialog.Header>
40-
<ConfirmDialog.Title>Danger Zone</ConfirmDialog.Title>
41-
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
42-
<Times />
43-
</ConfirmDialog.Close>
44-
</ConfirmDialog.Header>
45-
<ConfirmDialog.Content>
46-
<ConfirmDialog.Message>Do you want to delete this record?</ConfirmDialog.Message>
47-
</ConfirmDialog.Content>
48-
<ConfirmDialog.Footer>
49-
<ConfirmDialog.Close as={Button} variant="outlined">
50-
Cancel
51-
</ConfirmDialog.Close>
52-
<ConfirmDialog.Close as={Button} severity="danger">
53-
Delete
54-
</ConfirmDialog.Close>
55-
</ConfirmDialog.Footer>
40+
<ConfirmDialog.Backdrop />
41+
<ConfirmDialog.Popup>
42+
<ConfirmDialog.Header>
43+
<ConfirmDialog.Title>Danger Zone</ConfirmDialog.Title>
44+
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
45+
<Times />
46+
</ConfirmDialog.Close>
47+
</ConfirmDialog.Header>
48+
<ConfirmDialog.Content>
49+
<ConfirmDialog.Message>Do you want to delete this record?</ConfirmDialog.Message>
50+
</ConfirmDialog.Content>
51+
<ConfirmDialog.Footer>
52+
<ConfirmDialog.Close as={Button} variant="outlined">
53+
Cancel
54+
</ConfirmDialog.Close>
55+
<ConfirmDialog.Close as={Button} severity="danger">
56+
Delete
57+
</ConfirmDialog.Close>
58+
</ConfirmDialog.Footer>
59+
</ConfirmDialog.Popup>
5660
</ConfirmDialog.Portal>
5761
</ConfirmDialog.Root>
5862
</div>

‎apps/showcase/demo/styled/confirmdialog/delete-demo.tsx‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -14,55 +14,57 @@ export default function DeleteDemo() {
1414
<Trash />
1515
Delete Product
1616
</ConfirmDialog.Trigger>
17-
<ConfirmDialog.Backdrop />
18-
<ConfirmDialog.Portal style={{ width: '28rem' }}>
19-
<ConfirmDialog.Header>
20-
<ConfirmDialog.Title>Delete Product</ConfirmDialog.Title>
21-
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
22-
<Times />
23-
</ConfirmDialog.Close>
24-
</ConfirmDialog.Header>
25-
<ConfirmDialog.Content>
26-
<div className="flex flex-col gap-4 py-2">
27-
<div className="flex items-center gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-xl">
28-
<Image
29-
src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg"
30-
alt="Bamboo Watch"
31-
width={80}
32-
height={80}
33-
className="rounded-lg object-cover"
34-
/>
35-
<div className="flex-1">
36-
<div className="flex items-center gap-2 mb-1">
37-
<h4 className="font-semibold text-surface-700 dark:text-surface-200 m-0">Bamboo Watch</h4>
38-
<Tag severity="success" className="text-xs">
39-
In Stock
40-
</Tag>
17+
<ConfirmDialog.Portal>
18+
<ConfirmDialog.Backdrop />
19+
<ConfirmDialog.Popup style={{ width: '28rem' }}>
20+
<ConfirmDialog.Header>
21+
<ConfirmDialog.Title>Delete Product</ConfirmDialog.Title>
22+
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
23+
<Times />
24+
</ConfirmDialog.Close>
25+
</ConfirmDialog.Header>
26+
<ConfirmDialog.Content>
27+
<div className="flex flex-col gap-4 py-2">
28+
<div className="flex items-center gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-xl">
29+
<Image
30+
src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg"
31+
alt="Bamboo Watch"
32+
width={80}
33+
height={80}
34+
className="rounded-lg object-cover"
35+
/>
36+
<div className="flex-1">
37+
<div className="flex items-center gap-2 mb-1">
38+
<h4 className="font-semibold text-surface-700 dark:text-surface-200 m-0">Bamboo Watch</h4>
39+
<Tag severity="success" className="text-xs">
40+
In Stock
41+
</Tag>
42+
</div>
43+
<p className="text-surface-500 dark:text-surface-400 text-sm m-0">Product Code: f230fh0g3</p>
44+
<p className="text-primary font-semibold mt-2 mb-0">$65.00</p>
4145
</div>
42-
<p className="text-surface-500 dark:text-surface-400 text-sm m-0">Product Code: f230fh0g3</p>
43-
<p className="text-primary font-semibold mt-2 mb-0">$65.00</p>
4446
</div>
45-
</div>
46-
<div className="flex items-start gap-3 p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
47-
<ExclamationTriangle className="text-orange-500 mt-0.5" />
48-
<div>
49-
<p className="font-medium text-orange-700 dark:text-orange-300 text-sm m-0">Warning</p>
50-
<p className="text-orange-600 dark:text-orange-400 text-xs mt-1 mb-0">
51-
This will remove the product from your inventory and cannot be recovered.
52-
</p>
47+
<div className="flex items-start gap-3 p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
48+
<ExclamationTriangle className="text-orange-500 mt-0.5" />
49+
<div>
50+
<p className="font-medium text-orange-700 dark:text-orange-300 text-sm m-0">Warning</p>
51+
<p className="text-orange-600 dark:text-orange-400 text-xs mt-1 mb-0">
52+
This will remove the product from your inventory and cannot be recovered.
53+
</p>
54+
</div>
5355
</div>
5456
</div>
55-
</div>
56-
</ConfirmDialog.Content>
57-
<ConfirmDialog.Footer>
58-
<ConfirmDialog.Close as={Button} variant="outlined">
59-
Cancel
60-
</ConfirmDialog.Close>
61-
<ConfirmDialog.Close as={Button} severity="danger">
62-
<Trash />
63-
Delete Product
64-
</ConfirmDialog.Close>
65-
</ConfirmDialog.Footer>
57+
</ConfirmDialog.Content>
58+
<ConfirmDialog.Footer>
59+
<ConfirmDialog.Close as={Button} variant="outlined">
60+
Cancel
61+
</ConfirmDialog.Close>
62+
<ConfirmDialog.Close as={Button} severity="danger">
63+
<Trash />
64+
Delete Product
65+
</ConfirmDialog.Close>
66+
</ConfirmDialog.Footer>
67+
</ConfirmDialog.Popup>
6668
</ConfirmDialog.Portal>
6769
</ConfirmDialog.Root>
6870
</div>

0 commit comments

Comments
 (0)