Skip to content

Commit 1a3a602

Browse files
mertsincanmertsincan
committed
Merge branch 'v11' of https://github.com/primefaces/primereact into v11
2 parents b1af1d6 + b867683 commit 1a3a602

83 files changed

Lines changed: 1471 additions & 1249 deletions

File tree

Some content is hidden

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

‎apps/showcase/demo/styled/fileupload/advanced-demo.tsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
import { Plus } from '@primeicons/react/plus';
33
import { Times } from '@primeicons/react/times';
44
import { Upload } from '@primeicons/react/upload';
5-
import { toast } from '@primereact/headless/toast';
5+
import { toast } from '@primereact/headless/toaster';
66
import { FileUploadRootInstance } from '@primereact/types/shared/fileupload';
7-
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
7+
import { ToasterRegionInstance, ToastType } from '@primereact/types/shared/toaster';
88
import { Button } from '@primereact/ui/button';
99
import { FileUpload } from '@primereact/ui/fileupload';
1010
import { Message } from '@primereact/ui/message';
1111
import { ProgressBar } from '@primereact/ui/progressbar';
1212
import { Toast } from '@primereact/ui/toast';
13+
import { Toaster } from '@primereact/ui/toaster';
1314

1415
export default function AdvancedDemo() {
1516
const onUpload = () => {
@@ -83,16 +84,18 @@ export default function AdvancedDemo() {
8384
}}
8485
</FileUpload.Root>
8586

86-
<Toast.Root position="top-right" group="advanced-demo">
87-
<Toast.Portal>
88-
<Toast.Region>
89-
{({ toast }: ToastRegionInstance) =>
90-
toast?.toasts.map((toast: ToastType) => (
91-
<Toast.Item key={toast.id} data={toast}>
92-
<div className="flex items-start gap-2">
93-
<div className="flex-1">
94-
<Toast.Title className="mb-1 -mt-0.5" />
95-
<Toast.Description />
87+
<Toaster.Root position="top-right" group="advanced-demo">
88+
<Toaster.Portal>
89+
<Toaster.Region>
90+
{({ toaster }: ToasterRegionInstance) =>
91+
toaster?.toasts.map((toast: ToastType) => (
92+
<Toast.Root key={toast.id} toast={toast}>
93+
<div className="grid grid-cols-[auto_1fr] items-start gap-3">
94+
<Toast.Icon className="[&>svg]:size-3.5 mt-1 " />
95+
<div>
96+
<Toast.Title />
97+
<Toast.Description className="mt-1" />
98+
<Toast.Action as={Button} size="small" className="mt-3" />
9699
</div>
97100
</div>
98101
<Toast.Close
@@ -103,14 +106,14 @@ export default function AdvancedDemo() {
103106
size="small"
104107
className={'absolute top-2 right-2'}
105108
>
106-
<Times></Times>
109+
<Times />
107110
</Toast.Close>
108-
</Toast.Item>
111+
</Toast.Root>
109112
))
110113
}
111-
</Toast.Region>
112-
</Toast.Portal>
113-
</Toast.Root>
114+
</Toaster.Region>
115+
</Toaster.Portal>
116+
</Toaster.Root>
114117
</div>
115118
);
116119
}

‎apps/showcase/demo/styled/fileupload/auto-demo.tsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
'use client';
22
import { Plus } from '@primeicons/react/plus';
33
import { Times } from '@primeicons/react/times';
4-
import { toast } from '@primereact/headless/toast';
4+
import { toast } from '@primereact/headless/toaster';
55
import { FileUploadRootInstance } from '@primereact/types/shared/fileupload';
6-
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
6+
import { ToasterRegionInstance, ToastType } from '@primereact/types/shared/toaster';
77
import { Button } from '@primereact/ui/button';
88
import { FileUpload } from '@primereact/ui/fileupload';
99
import { Message } from '@primereact/ui/message';
1010
import { Toast } from '@primereact/ui/toast';
11+
import { Toaster } from '@primereact/ui/toaster';
1112

1213
export default function AutoDemo() {
1314
const onUpload = () => {
@@ -45,16 +46,18 @@ export default function AutoDemo() {
4546
}}
4647
</FileUpload.Root>
4748

48-
<Toast.Root position="top-right" group="auto-demo">
49-
<Toast.Portal>
50-
<Toast.Region>
51-
{({ toast }: ToastRegionInstance) =>
52-
toast?.toasts.map((toast: ToastType) => (
53-
<Toast.Item key={toast.id} data={toast}>
54-
<div className="flex items-start gap-2">
55-
<div className="flex-1">
56-
<Toast.Title className="mb-1 -mt-0.5" />
57-
<Toast.Description />
49+
<Toaster.Root position="top-right" group="auto-demo">
50+
<Toaster.Portal>
51+
<Toaster.Region>
52+
{({ toaster }: ToasterRegionInstance) =>
53+
toaster?.toasts.map((toast: ToastType) => (
54+
<Toast.Root key={toast.id} toast={toast}>
55+
<div className="grid grid-cols-[auto_1fr] items-start gap-3">
56+
<Toast.Icon className="[&>svg]:size-3.5 mt-1 " />
57+
<div>
58+
<Toast.Title />
59+
<Toast.Description className="mt-1" />
60+
<Toast.Action as={Button} size="small" className="mt-3" />
5861
</div>
5962
</div>
6063
<Toast.Close
@@ -65,14 +68,14 @@ export default function AutoDemo() {
6568
size="small"
6669
className={'absolute top-2 right-2'}
6770
>
68-
<Times></Times>
71+
<Times />
6972
</Toast.Close>
70-
</Toast.Item>
73+
</Toast.Root>
7174
))
7275
}
73-
</Toast.Region>
74-
</Toast.Portal>
75-
</Toast.Root>
76+
</Toaster.Region>
77+
</Toaster.Portal>
78+
</Toaster.Root>
7679
</div>
7780
);
7881
}

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
'use client';
22
import { Plus } from '@primeicons/react/plus';
33
import { Times } from '@primeicons/react/times';
4-
import { toast } from '@primereact/headless/toast';
4+
import { toast } from '@primereact/headless/toaster';
55
import { FileUploadRootInstance } from '@primereact/types/shared/fileupload';
6-
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
6+
import { ToasterRegionInstance, ToastType } from '@primereact/types/shared/toaster';
77
import { Button } from '@primereact/ui/button';
88
import { FileUpload } from '@primereact/ui/fileupload';
99
import { Message } from '@primereact/ui/message';
1010
import { Toast } from '@primereact/ui/toast';
11+
import { Toaster } from '@primereact/ui/toaster';
1112

1213
const onUpload = () => {
1314
toast({
@@ -51,15 +52,17 @@ export default function BasicDemo() {
5152
}}
5253
</FileUpload.Root>
5354

54-
<Toast.Root position="top-right" group="basic-demo">
55-
<Toast.Region>
56-
{({ toast }: ToastRegionInstance) =>
57-
toast?.toasts.map((toast: ToastType) => (
58-
<Toast.Item key={toast.id} data={toast}>
59-
<div className="flex items-start gap-2">
60-
<div className="flex-1">
61-
<Toast.Title className="mb-1 -mt-0.5" />
62-
<Toast.Description />
55+
<Toaster.Root position="top-right" group="basic-demo">
56+
<Toaster.Region>
57+
{({ toaster }: ToasterRegionInstance) =>
58+
toaster?.toasts.map((toast: ToastType) => (
59+
<Toast.Root key={toast.id} toast={toast}>
60+
<div className="grid grid-cols-[auto_1fr] items-start gap-3">
61+
<Toast.Icon className="[&>svg]:size-3.5 mt-1 " />
62+
<div>
63+
<Toast.Title />
64+
<Toast.Description className="mt-1" />
65+
<Toast.Action as={Button} size="small" className="mt-3" />
6366
</div>
6467
</div>
6568
<Toast.Close
@@ -72,11 +75,11 @@ export default function BasicDemo() {
7275
>
7376
<Times></Times>
7477
</Toast.Close>
75-
</Toast.Item>
78+
</Toast.Root>
7679
))
7780
}
78-
</Toast.Region>
79-
</Toast.Root>
81+
</Toaster.Region>
82+
</Toaster.Root>
8083
</div>
8184
);
8285
}

‎apps/showcase/demo/styled/toast/action-demo.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,58 @@
11
'use client';
2+
import { Camera } from '@primeicons/react/camera';
3+
import { Check } from '@primeicons/react/check';
4+
import { ExclamationTriangle } from '@primeicons/react/exclamation-triangle';
5+
import { InfoCircle } from '@primeicons/react/info-circle';
6+
import { Spinner } from '@primeicons/react/spinner';
27
import { Times } from '@primeicons/react/times';
3-
import { toast } from '@primereact/headless/toast';
4-
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
8+
import { toast } from '@primereact/headless/toaster';
9+
import { ToasterRegionInstance, ToastType } from '@primereact/types/shared/toaster';
510
import { Button } from '@primereact/ui/button';
611
import { Toast } from '@primereact/ui/toast';
12+
import { Toaster } from '@primereact/ui/toaster';
713

814
function ActionToast() {
915
return (
10-
<Toast.Root group="action">
11-
<Toast.Portal>
12-
<Toast.Region>
13-
{({ toast }: ToastRegionInstance) =>
14-
toast?.toasts.map((toast: ToastType) => (
15-
<Toast.Item key={toast.id} toast={toast}>
16-
<div className="flex items-start gap-2">
17-
<Toast.Icon />
18-
<div className="flex-1">
19-
<Toast.Title className="mb-1 -mt-0.5" />
20-
<Toast.Description />
21-
<Toast.Action as={Button} size="small" className="mt-4" />
16+
<Toaster.Root
17+
group="action"
18+
icons={{ success: <Check />, danger: <Times />, warn: <ExclamationTriangle />, info: <InfoCircle />, loading: <Spinner /> }}
19+
>
20+
<Toaster.Portal>
21+
<Toaster.Region>
22+
{({ toaster }: ToasterRegionInstance) =>
23+
toaster?.toasts.map((toast: ToastType) => (
24+
<Toast.Root key={toast.id} toast={toast}>
25+
<div className="grid grid-cols-[auto_1fr] items-start gap-3">
26+
<Toast.Icon className="[&>svg]:size-3.5 mt-1" />
27+
<div>
28+
<Toast.Title />
29+
<Toast.Description className="mt-1" />
30+
<Toast.Action as={Button} size="small" className="mt-3" />
2231
</div>
2332
</div>
24-
<Toast.Close
25-
as={Button}
26-
iconOnly
27-
severity={'secondary'}
28-
variant="text"
29-
size="small"
30-
className={'absolute top-2 right-2'}
31-
>
32-
<Times></Times>
33-
</Toast.Close>
34-
</Toast.Item>
33+
</Toast.Root>
3534
))
3635
}
37-
</Toast.Region>
38-
</Toast.Portal>
39-
</Toast.Root>
36+
</Toaster.Region>
37+
</Toaster.Portal>
38+
</Toaster.Root>
4039
);
4140
}
4241

4342
function ActionDemo() {
4443
const handleCreateToast = () => {
4544
const id = toast({
46-
title: 'Changes saved',
47-
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
45+
title: 'Allow camera access',
46+
description: 'We need access to your camera to scan QR codes.',
47+
icon: <Camera />,
4848
group: 'action',
4949
action: {
50-
children: 'Undo',
50+
children: 'Enable camera',
5151
onClick: () => {
5252
toast.dismiss(id);
53-
toast({
54-
title: 'Changes saved',
55-
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
53+
toast.success({
54+
title: 'Camera access granted',
55+
description: 'You can now scan QR codes.',
5656
group: 'action'
5757
});
5858
}

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

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
'use client';
2+
import { Check } from '@primeicons/react/check';
3+
import { ExclamationTriangle } from '@primeicons/react/exclamation-triangle';
4+
import { InfoCircle } from '@primeicons/react/info-circle';
5+
import { Spinner } from '@primeicons/react/spinner';
26
import { Times } from '@primeicons/react/times';
3-
import { toast } from '@primereact/headless/toast';
4-
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
7+
import { ToasterRegionInstance, ToastType } from '@primereact/types/shared/toaster';
58
import { Button } from '@primereact/ui/button';
69
import { Toast } from '@primereact/ui/toast';
10+
import { toast, Toaster } from '@primereact/ui/toaster';
711

812
function BasicToast() {
913
return (
10-
<Toast.Root group="basic">
11-
<Toast.Portal>
12-
<Toast.Region>
13-
{({ toast }: ToastRegionInstance) =>
14-
toast?.toasts.map((toast: ToastType) => (
15-
<Toast.Item key={toast.id} toast={toast}>
16-
<div className="flex items-start gap-2">
17-
<Toast.Icon />
18-
<div className="flex-1">
19-
<Toast.Title className="mb-1 -mt-0.5" />
20-
<Toast.Description />
21-
<Toast.Action as={Button} size="small" className="mt-4" />
14+
<Toaster.Root
15+
group="basic"
16+
icons={{ success: <Check />, danger: <Times />, warn: <ExclamationTriangle />, info: <InfoCircle />, loading: <Spinner /> }}
17+
>
18+
<Toaster.Portal>
19+
<Toaster.Region>
20+
{({ toaster }: ToasterRegionInstance) =>
21+
toaster?.toasts.map((toast: ToastType) => (
22+
<Toast.Root key={toast.id} toast={toast}>
23+
<div className="grid grid-cols-[auto_1fr] items-start gap-3">
24+
<Toast.Icon className="[&>svg]:size-3.5 mt-1 " />
25+
<div>
26+
<Toast.Title />
27+
<Toast.Description className="mt-1" />
28+
<Toast.Action as={Button} size="small" className="mt-3" />
2229
</div>
2330
</div>
2431
<Toast.Close
@@ -29,14 +36,14 @@ function BasicToast() {
2936
size="small"
3037
className={'absolute top-2 right-2'}
3138
>
32-
<Times></Times>
39+
<Times />
3340
</Toast.Close>
34-
</Toast.Item>
41+
</Toast.Root>
3542
))
3643
}
37-
</Toast.Region>
38-
</Toast.Portal>
39-
</Toast.Root>
44+
</Toaster.Region>
45+
</Toaster.Portal>
46+
</Toaster.Root>
4047
);
4148
}
4249

@@ -46,8 +53,8 @@ function BasicDemo() {
4653
<Button
4754
onClick={() => {
4855
toast({
49-
title: 'Changes saved',
50-
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
56+
title: 'Successfully completed',
57+
description: 'The task was completed successfully. You can now view the details.',
5158
group: 'basic'
5259
});
5360
}}

0 commit comments

Comments
 (0)