@firecms/ui 3.0.0-canary.87 → 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.
Files changed (9) hide show
  1. package/dist/components/Menubar.d.ts +19 -9
  2. package/dist/components/Tooltip.d.ts +2 -1
  3. package/dist/index.es.js +20 -1
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +20 -1
  6. package/dist/index.umd.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/components/Menubar.tsx +37 -2
  9. package/src/components/Tooltip.tsx +3 -1
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.87",
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": "c94eecac10211d63540f88519b2d19a0941b7387",
105
+ "gitHead": "399d47454cf1fc5a83969baddac68bfc68ec815e",
106
106
  "publishConfig": {
107
107
  "access": "public"
108
108
  }
package/src/components/Menubar.tsx CHANGED
@@ -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
- }: { children: React.ReactNode, className?: string }) {
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
- }: { children: React.ReactNode, className?: string }) {
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}
package/src/components/Tooltip.tsx CHANGED
@@ -6,6 +6,7 @@ import { useInjectStyles } from "../hooks";
6
6
 
7
7
  export type TooltipProps = {
8
8
  open?: boolean,
9
+ defaultOpen?: boolean,
9
10
  onOpenChange?: (open: boolean) => void,
10
11
  side?: "top" | "bottom" | "left" | "right",
11
12
  align?: "start" | "center" | "end",
@@ -21,6 +22,7 @@ export type TooltipProps = {
21
22
 
22
23
  export const Tooltip = ({
23
24
  open,
25
+ defaultOpen,
24
26
  side = "bottom",
25
27
  delayDuration = 200,
26
28
  sideOffset,
@@ -41,7 +43,7 @@ export const Tooltip = ({
41
43
 
42
44
  return (
43
45
  <TooltipPrimitive.Provider delayDuration={delayDuration}>
44
- <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
46
+ <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
45
47
  <TooltipPrimitive.Trigger asChild>
46
48
  <div className={className} style={style}>
47
49
  {children}