Skip to content

Commit 6685d92

Browse files
mpsalungggmpsalunggg
committed
chore: update dialog shadcn latest
1 parent b7ac775 commit 6685d92

File tree

4 files changed

+98
-77
lines changed

4 files changed

+98
-77
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"@hookform/resolvers": "^5.0.1",
2828
"@radix-ui/react-alert-dialog": "^1.1.1",
2929
"@radix-ui/react-avatar": "^1.1.1",
30-
"@radix-ui/react-dialog": "^1.1.14",
30+
"@radix-ui/react-dialog": "^1.1.15",
3131
"@radix-ui/react-dropdown-menu": "^2.1.15",
3232
"@radix-ui/react-label": "^2.1.7",
3333
"@radix-ui/react-popover": "^1.1.15",

‎pnpm-lock.yaml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ui/Dialog/index.tsx‎

Lines changed: 96 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,96 +2,122 @@
22

33
import * as React from "react";
44
import * as DialogPrimitive from "@radix-ui/react-dialog";
5-
import { X } from "lucide-react";
5+
import { XIcon } from "lucide-react";
66

77
import { cn } from "@/lib/utils";
88

9-
const Dialog = DialogPrimitive.Root;
9+
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
10+
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
11+
}
1012

11-
const DialogTrigger = DialogPrimitive.Trigger;
13+
function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
14+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
15+
}
1216

13-
const DialogPortal = DialogPrimitive.Portal;
17+
function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
18+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
19+
}
1420

15-
const DialogClose = DialogPrimitive.Close;
21+
function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
22+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
23+
}
1624

17-
const DialogOverlay = React.forwardRef<
18-
React.ElementRef<typeof DialogPrimitive.Overlay>,
19-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
20-
>(({ className, ...props }, ref) => (
21-
<DialogPrimitive.Overlay
22-
ref={ref}
23-
className={cn(
24-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
25-
className
26-
)}
27-
{...props}
28-
/>
29-
));
30-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31-
32-
const DialogContent = React.forwardRef<
33-
React.ElementRef<typeof DialogPrimitive.Content>,
34-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35-
>(({ className, children, ...props }, ref) => (
36-
<DialogPortal>
37-
<DialogOverlay />
38-
<DialogPrimitive.Content
39-
ref={ref}
25+
function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
26+
return (
27+
<DialogPrimitive.Overlay
28+
data-slot="dialog-overlay"
4029
className={cn(
41-
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
30+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
4231
className
4332
)}
4433
{...props}
45-
>
46-
{children}
47-
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
48-
<X className="h-4 w-4" />
49-
<span className="sr-only">Close</span>
50-
</DialogPrimitive.Close>
51-
</DialogPrimitive.Content>
52-
</DialogPortal>
53-
));
54-
DialogContent.displayName = DialogPrimitive.Content.displayName;
34+
/>
35+
);
36+
}
37+
38+
function DialogContent({
39+
className,
40+
children,
41+
showCloseButton = true,
42+
...props
43+
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
44+
showCloseButton?: boolean;
45+
}) {
46+
return (
47+
<DialogPortal data-slot="dialog-portal">
48+
<DialogOverlay />
49+
<DialogPrimitive.Content
50+
data-slot="dialog-content"
51+
className={cn(
52+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
53+
className
54+
)}
55+
{...props}
56+
>
57+
{children}
58+
{showCloseButton && (
59+
<DialogPrimitive.Close
60+
data-slot="dialog-close"
61+
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
62+
>
63+
<XIcon />
64+
<span className="sr-only">Close</span>
65+
</DialogPrimitive.Close>
66+
)}
67+
</DialogPrimitive.Content>
68+
</DialogPortal>
69+
);
70+
}
5571

56-
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
57-
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
58-
);
59-
DialogHeader.displayName = "DialogHeader";
72+
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
73+
return (
74+
<div
75+
data-slot="dialog-header"
76+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
77+
{...props}
78+
/>
79+
);
80+
}
6081

61-
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
62-
<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
63-
);
64-
DialogFooter.displayName = "DialogFooter";
82+
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
83+
return (
84+
<div
85+
data-slot="dialog-footer"
86+
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
87+
{...props}
88+
/>
89+
);
90+
}
6591

66-
const DialogTitle = React.forwardRef<
67-
React.ElementRef<typeof DialogPrimitive.Title>,
68-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
69-
>(({ className, ...props }, ref) => (
70-
<DialogPrimitive.Title
71-
ref={ref}
72-
className={cn("text-lg leading-none font-semibold tracking-tight", className)}
73-
{...props}
74-
/>
75-
));
76-
DialogTitle.displayName = DialogPrimitive.Title.displayName;
92+
function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
93+
return (
94+
<DialogPrimitive.Title
95+
data-slot="dialog-title"
96+
className={cn("text-lg leading-none font-semibold", className)}
97+
{...props}
98+
/>
99+
);
100+
}
77101

78-
const DialogDescription = React.forwardRef<
79-
React.ElementRef<typeof DialogPrimitive.Description>,
80-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
81-
>(({ className, ...props }, ref) => (
82-
<DialogPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
83-
));
84-
DialogDescription.displayName = DialogPrimitive.Description.displayName;
102+
function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
103+
return (
104+
<DialogPrimitive.Description
105+
data-slot="dialog-description"
106+
className={cn("text-muted-foreground text-sm", className)}
107+
{...props}
108+
/>
109+
);
110+
}
85111

86112
export {
87113
Dialog,
88-
DialogPortal,
89-
DialogOverlay,
90114
DialogClose,
91-
DialogTrigger,
92115
DialogContent,
93-
DialogHeader,
116+
DialogDescription,
94117
DialogFooter,
118+
DialogHeader,
119+
DialogOverlay,
120+
DialogPortal,
95121
DialogTitle,
96-
DialogDescription,
122+
DialogTrigger,
97123
};

‎src/features/events/components/ColumnsUserEventList.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,6 @@ export const columnsUserEventList: ColumnDef<UserEventResponse>[] = [
2828
header: "Type",
2929
cell: ({ row }) => <p className="capitalize">{row.original.event_detail.type}</p>,
3030
},
31-
{
32-
accessorKey: "payment_date",
33-
header: "Payment Date",
34-
cell: ({ row }) => <p>{row.original.payment_date ? formatDateEvent(row.original.payment_date) : "-"}</p>,
35-
},
3631
{
3732
accessorKey: "status",
3833
header: "Status",

0 commit comments

Comments
 (0)