@firecms/ui 3.0.0-canary.88 → 3.0.0-canary.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Menubar.d.ts +19 -9
- package/dist/index.es.js +18 -0
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +18 -0
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Menubar.tsx +37 -2
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@firecms/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.0.0-canary.
|
|
4
|
+
"version": "3.0.0-canary.89",
|
|
5
5
|
"description": "Awesome Firebase/Firestore-based headless open-source CMS",
|
|
6
6
|
"funding": {
|
|
7
7
|
"url": "https://github.com/sponsors/firecmsco"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
"src",
|
|
103
103
|
"tailwind.config.js"
|
|
104
104
|
],
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "399d47454cf1fc5a83969baddac68bfc68ec815e",
|
|
106
106
|
"publishConfig": {
|
|
107
107
|
"access": "public"
|
|
108
108
|
}
|
|
@@ -1,13 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
1
3
|
import * as MenubarPrimitive from "@radix-ui/react-menubar";
|
|
2
4
|
import { cls } from "../util";
|
|
3
5
|
import { CheckIcon, ChevronRightIcon } from "../icons";
|
|
4
6
|
|
|
5
7
|
export function Menubar({
|
|
6
8
|
children,
|
|
9
|
+
onSelect,
|
|
7
10
|
className
|
|
8
|
-
}: {
|
|
11
|
+
}: {
|
|
12
|
+
children: React.ReactNode,
|
|
13
|
+
onSelect: (event: React.SyntheticEvent) => void,
|
|
14
|
+
className?: string
|
|
15
|
+
}) {
|
|
9
16
|
return (
|
|
10
17
|
<MenubarPrimitive.Root
|
|
18
|
+
onSelect={onSelect}
|
|
11
19
|
className={cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
|
|
12
20
|
{children}
|
|
13
21
|
</MenubarPrimitive.Root>
|
|
@@ -26,10 +34,16 @@ export function MenubarMenu({
|
|
|
26
34
|
|
|
27
35
|
export function MenubarTrigger({
|
|
28
36
|
children,
|
|
37
|
+
onSelect,
|
|
29
38
|
className
|
|
30
|
-
}: {
|
|
39
|
+
}: {
|
|
40
|
+
children: React.ReactNode,
|
|
41
|
+
onSelect: (event: React.SyntheticEvent) => void,
|
|
42
|
+
className?: string
|
|
43
|
+
}) {
|
|
31
44
|
return (
|
|
32
45
|
<MenubarPrimitive.Trigger
|
|
46
|
+
onSelect={onSelect}
|
|
33
47
|
className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50",
|
|
34
48
|
className)}>
|
|
35
49
|
{children}
|
|
@@ -53,16 +67,19 @@ export function MenubarContent({
|
|
|
53
67
|
align,
|
|
54
68
|
sideOffset,
|
|
55
69
|
alignOffset,
|
|
70
|
+
onSelect,
|
|
56
71
|
...rest
|
|
57
72
|
}: {
|
|
58
73
|
children: React.ReactNode,
|
|
59
74
|
className?: string,
|
|
75
|
+
onSelect: (event: React.SyntheticEvent) => void,
|
|
60
76
|
align?: "start" | "center" | "end",
|
|
61
77
|
sideOffset?: number,
|
|
62
78
|
alignOffset?: number
|
|
63
79
|
}) {
|
|
64
80
|
return (
|
|
65
81
|
<MenubarPrimitive.Content
|
|
82
|
+
onSelect={onSelect}
|
|
66
83
|
className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
|
|
67
84
|
align={align ?? "start"}
|
|
68
85
|
sideOffset={sideOffset ?? 5}
|
|
@@ -79,15 +96,18 @@ export function MenubarItem({
|
|
|
79
96
|
leftPadding,
|
|
80
97
|
className,
|
|
81
98
|
disabled,
|
|
99
|
+
onSelect,
|
|
82
100
|
...rest
|
|
83
101
|
}: {
|
|
84
102
|
children: React.ReactNode,
|
|
103
|
+
onSelect: (event: Event) => void;
|
|
85
104
|
leftPadding?: boolean,
|
|
86
105
|
className?: string,
|
|
87
106
|
disabled?: boolean
|
|
88
107
|
}) {
|
|
89
108
|
return (
|
|
90
109
|
<MenubarPrimitive.Item
|
|
110
|
+
onSelect={onSelect}
|
|
91
111
|
className={cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
|
|
92
112
|
leftPadding ? "pl-5" : "",
|
|
93
113
|
disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
|
|
@@ -136,13 +156,16 @@ export function MenubarSub({
|
|
|
136
156
|
export function MenubarSubTrigger({
|
|
137
157
|
children,
|
|
138
158
|
className,
|
|
159
|
+
onSelect,
|
|
139
160
|
...rest
|
|
140
161
|
}: {
|
|
141
162
|
children?: React.ReactNode,
|
|
163
|
+
onSelect: (event: React.SyntheticEvent) => void,
|
|
142
164
|
className?: string,
|
|
143
165
|
}) {
|
|
144
166
|
return (
|
|
145
167
|
<MenubarPrimitive.SubTrigger
|
|
168
|
+
onSelect={onSelect}
|
|
146
169
|
className={cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
|
|
147
170
|
className)}
|
|
148
171
|
{...rest}
|
|
@@ -156,14 +179,17 @@ export function MenubarSubContent({
|
|
|
156
179
|
children,
|
|
157
180
|
alignOffset,
|
|
158
181
|
className,
|
|
182
|
+
onSelect,
|
|
159
183
|
...rest
|
|
160
184
|
}: {
|
|
161
185
|
children?: React.ReactNode,
|
|
186
|
+
onSelect: (event: React.SyntheticEvent) => void,
|
|
162
187
|
alignOffset?: number,
|
|
163
188
|
className?: string,
|
|
164
189
|
}) {
|
|
165
190
|
return (
|
|
166
191
|
<MenubarPrimitive.SubContent
|
|
192
|
+
onSelect={onSelect}
|
|
167
193
|
alignOffset={alignOffset ?? -5}
|
|
168
194
|
className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
|
|
169
195
|
className)}
|
|
@@ -179,15 +205,18 @@ export function MenubarCheckboxItem({
|
|
|
179
205
|
checked,
|
|
180
206
|
onCheckedChange,
|
|
181
207
|
className,
|
|
208
|
+
onSelect,
|
|
182
209
|
...rest
|
|
183
210
|
}: {
|
|
184
211
|
children?: React.ReactNode,
|
|
212
|
+
onSelect: (event: Event) => void;
|
|
185
213
|
checked?: boolean,
|
|
186
214
|
onCheckedChange?: () => void,
|
|
187
215
|
className?: string,
|
|
188
216
|
}) {
|
|
189
217
|
return (
|
|
190
218
|
<MenubarPrimitive.CheckboxItem
|
|
219
|
+
onSelect={onSelect}
|
|
191
220
|
className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
|
|
192
221
|
className)}
|
|
193
222
|
checked={checked}
|
|
@@ -221,9 +250,11 @@ export function MenubarRadioGroup({
|
|
|
221
250
|
className,
|
|
222
251
|
value,
|
|
223
252
|
onValueChange,
|
|
253
|
+
onSelect,
|
|
224
254
|
...rest
|
|
225
255
|
}: {
|
|
226
256
|
children?: React.ReactNode,
|
|
257
|
+
onSelect: (event: React.SyntheticEvent) => void,
|
|
227
258
|
value?: string,
|
|
228
259
|
onValueChange?: (value: string) => void,
|
|
229
260
|
className?: string,
|
|
@@ -233,6 +264,7 @@ export function MenubarRadioGroup({
|
|
|
233
264
|
className={cls(className)}
|
|
234
265
|
value={value}
|
|
235
266
|
onValueChange={onValueChange}
|
|
267
|
+
onSelect={onSelect}
|
|
236
268
|
{...rest}>
|
|
237
269
|
{children ?? <CheckIcon size={"small"}/>}
|
|
238
270
|
</MenubarPrimitive.RadioGroup>
|
|
@@ -243,14 +275,17 @@ export function MenubarRadioItem({
|
|
|
243
275
|
children,
|
|
244
276
|
className,
|
|
245
277
|
value,
|
|
278
|
+
onSelect,
|
|
246
279
|
...rest
|
|
247
280
|
}: {
|
|
248
281
|
children?: React.ReactNode,
|
|
282
|
+
onSelect: (event: Event) => void;
|
|
249
283
|
value: string,
|
|
250
284
|
className?: string,
|
|
251
285
|
}) {
|
|
252
286
|
return (
|
|
253
287
|
<MenubarPrimitive.RadioItem
|
|
288
|
+
onSelect={onSelect}
|
|
254
289
|
className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
|
|
255
290
|
className)}
|
|
256
291
|
value={value}
|