One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 📅
calendar.xyehr.cn
ui: update ui library
authored by
Evan Huang
and committed by
GitHub
39726760
b094c7d0
+63
-53
1 changed file
components
+63
-53
components/ui/dropdown-menu.tsx
+63
-53
components/ui/dropdown-menu.tsx
···
1
1
-
"use client";
1
1
+
"use client"
2
2
3
3
-
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
4
4
-
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
5
5
-
import * as React from "react";
3
3
+
import * as React from "react"
4
4
+
import { CheckIcon, ChevronRightIcon } from "lucide-react"
5
5
+
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
6
6
7
7
-
import { cn } from "@/lib/utils";
7
7
+
import { cn } from "@/lib/utils"
8
8
9
9
function DropdownMenu({
10
10
...props
11
11
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
12
12
-
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
12
12
+
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
13
13
}
14
14
15
15
function DropdownMenuPortal({
···
17
17
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
18
18
return (
19
19
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
20
20
-
);
20
20
+
)
21
21
}
22
22
23
23
function DropdownMenuTrigger({
···
28
28
data-slot="dropdown-menu-trigger"
29
29
{...props}
30
30
/>
31
31
-
);
31
31
+
)
32
32
}
33
33
34
34
function DropdownMenuContent({
35
35
className,
36
36
+
align = "start",
36
37
sideOffset = 4,
37
38
...props
38
39
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
···
41
42
<DropdownMenuPrimitive.Content
42
43
data-slot="dropdown-menu-content"
43
44
sideOffset={sideOffset}
44
44
-
className={cn(
45
45
-
"bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
46
46
-
className,
47
47
-
)}
45
45
+
align={align}
46
46
+
className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
48
47
{...props}
49
48
/>
50
49
</DropdownMenuPrimitive.Portal>
51
51
-
);
50
50
+
)
52
51
}
53
52
54
53
function DropdownMenuGroup({
···
56
55
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
57
56
return (
58
57
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
59
59
-
);
58
58
+
)
60
59
}
61
60
62
61
function DropdownMenuItem({
···
65
64
variant = "default",
66
65
...props
67
66
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
68
68
-
inset?: boolean;
69
69
-
variant?: "default" | "destructive";
67
67
+
inset?: boolean
68
68
+
variant?: "default" | "destructive"
70
69
}) {
71
70
return (
72
71
<DropdownMenuPrimitive.Item
···
74
73
data-inset={inset}
75
74
data-variant={variant}
76
75
className={cn(
77
77
-
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
78
78
-
className,
76
76
+
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
77
77
+
className
79
78
)}
80
79
{...props}
81
80
/>
82
82
-
);
81
81
+
)
83
82
}
84
83
85
84
function DropdownMenuCheckboxItem({
86
85
className,
87
86
children,
88
87
checked,
88
88
+
inset,
89
89
...props
90
90
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
90
90
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
91
91
+
inset?: boolean
92
92
+
}) {
91
93
return (
92
94
<DropdownMenuPrimitive.CheckboxItem
93
95
data-slot="dropdown-menu-checkbox-item"
96
96
+
data-inset={inset}
94
97
className={cn(
95
95
-
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
96
96
-
className,
98
98
+
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
99
99
+
className
97
100
)}
98
101
checked={checked}
99
102
{...props}
100
103
>
101
101
-
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
104
104
+
<span
105
105
+
className="pointer-events-none absolute right-2 flex items-center justify-center"
106
106
+
data-slot="dropdown-menu-checkbox-item-indicator"
107
107
+
>
102
108
<DropdownMenuPrimitive.ItemIndicator>
103
103
-
<CheckIcon className="size-4" />
109
109
+
<CheckIcon />
104
110
</DropdownMenuPrimitive.ItemIndicator>
105
111
</span>
106
112
{children}
107
113
</DropdownMenuPrimitive.CheckboxItem>
108
108
-
);
114
114
+
)
109
115
}
110
116
111
117
function DropdownMenuRadioGroup({
···
116
122
data-slot="dropdown-menu-radio-group"
117
123
{...props}
118
124
/>
119
119
-
);
125
125
+
)
120
126
}
121
127
122
128
function DropdownMenuRadioItem({
123
129
className,
124
130
children,
131
131
+
inset,
125
132
...props
126
126
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
133
133
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
134
134
+
inset?: boolean
135
135
+
}) {
127
136
return (
128
137
<DropdownMenuPrimitive.RadioItem
129
138
data-slot="dropdown-menu-radio-item"
139
139
+
data-inset={inset}
130
140
className={cn(
131
131
-
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
132
132
-
className,
141
141
+
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
142
142
+
className
133
143
)}
134
144
{...props}
135
145
>
136
136
-
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
146
146
+
<span
147
147
+
className="pointer-events-none absolute right-2 flex items-center justify-center"
148
148
+
data-slot="dropdown-menu-radio-item-indicator"
149
149
+
>
137
150
<DropdownMenuPrimitive.ItemIndicator>
138
138
-
<CircleIcon className="size-2 fill-current" />
151
151
+
<CheckIcon />
139
152
</DropdownMenuPrimitive.ItemIndicator>
140
153
</span>
141
154
{children}
142
155
</DropdownMenuPrimitive.RadioItem>
143
143
-
);
156
156
+
)
144
157
}
145
158
146
159
function DropdownMenuLabel({
···
148
161
inset,
149
162
...props
150
163
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
151
151
-
inset?: boolean;
164
164
+
inset?: boolean
152
165
}) {
153
166
return (
154
167
<DropdownMenuPrimitive.Label
155
168
data-slot="dropdown-menu-label"
156
169
data-inset={inset}
157
170
className={cn(
158
158
-
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
159
159
-
className,
171
171
+
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
172
172
+
className
160
173
)}
161
174
{...props}
162
175
/>
163
163
-
);
176
176
+
)
164
177
}
165
178
166
179
function DropdownMenuSeparator({
···
170
183
return (
171
184
<DropdownMenuPrimitive.Separator
172
185
data-slot="dropdown-menu-separator"
173
173
-
className={cn("bg-border -mx-1 my-1 h-px", className)}
186
186
+
className={cn("-mx-1 my-1 h-px bg-border", className)}
174
187
{...props}
175
188
/>
176
176
-
);
189
189
+
)
177
190
}
178
191
179
192
function DropdownMenuShortcut({
···
184
197
<span
185
198
data-slot="dropdown-menu-shortcut"
186
199
className={cn(
187
187
-
"text-muted-foreground ml-auto text-xs tracking-widest",
188
188
-
className,
200
200
+
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
201
201
+
className
189
202
)}
190
203
{...props}
191
204
/>
192
192
-
);
205
205
+
)
193
206
}
194
207
195
208
function DropdownMenuSub({
196
209
...props
197
210
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
198
198
-
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
211
211
+
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
199
212
}
200
213
201
214
function DropdownMenuSubTrigger({
···
204
217
children,
205
218
...props
206
219
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
207
207
-
inset?: boolean;
220
220
+
inset?: boolean
208
221
}) {
209
222
return (
210
223
<DropdownMenuPrimitive.SubTrigger
211
224
data-slot="dropdown-menu-sub-trigger"
212
225
data-inset={inset}
213
226
className={cn(
214
214
-
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
215
215
-
className,
227
227
+
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
228
228
+
className
216
229
)}
217
230
{...props}
218
231
>
219
232
{children}
220
220
-
<ChevronRightIcon className="ml-auto size-4" />
233
233
+
<ChevronRightIcon className="cn-rtl-flip ml-auto" />
221
234
</DropdownMenuPrimitive.SubTrigger>
222
222
-
);
235
235
+
)
223
236
}
224
237
225
238
function DropdownMenuSubContent({
···
229
242
return (
230
243
<DropdownMenuPrimitive.SubContent
231
244
data-slot="dropdown-menu-sub-content"
232
232
-
className={cn(
233
233
-
"bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
234
234
-
className,
235
235
-
)}
245
245
+
className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
236
246
{...props}
237
247
/>
238
238
-
);
248
248
+
)
239
249
}
240
250
241
251
export {
···
254
264
DropdownMenuSub,
255
265
DropdownMenuSubTrigger,
256
266
DropdownMenuSubContent,
257
257
-
};
267
267
+
}