@firecms/ui 3.0.0-canary.241 → 3.0.0-canary.242
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/Autocomplete.d.ts +4 -2
- package/dist/index.es.js +160 -145
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +160 -145
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Autocomplete.tsx +10 -5
- package/src/components/MultiSelect.tsx +2 -3
- package/src/components/Select.tsx +11 -11
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.242",
|
|
5
5
|
"description": "Awesome Firebase/Firestore-based headless open-source CMS",
|
|
6
6
|
"funding": {
|
|
7
7
|
"url": "https://github.com/sponsors/firecmsco"
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"index.css",
|
|
117
117
|
"tailwind.config.js"
|
|
118
118
|
],
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "61c5737585c7126aadfb189c4f0c113943d001b0",
|
|
120
120
|
"publishConfig": {
|
|
121
121
|
"access": "public"
|
|
122
122
|
}
|
|
@@ -10,6 +10,7 @@ export type AutocompleteProps = {
|
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
open: boolean;
|
|
12
12
|
setOpen: (open: boolean) => void;
|
|
13
|
+
className?: string;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
export const useAutoComplete = ({ ref }: {
|
|
@@ -42,7 +43,8 @@ export const useAutoComplete = ({ ref }: {
|
|
|
42
43
|
export function Autocomplete({
|
|
43
44
|
children,
|
|
44
45
|
open,
|
|
45
|
-
setOpen
|
|
46
|
+
setOpen,
|
|
47
|
+
className
|
|
46
48
|
}: AutocompleteProps) {
|
|
47
49
|
|
|
48
50
|
const autocompleteRef = React.useRef<HTMLDivElement>(null);
|
|
@@ -50,7 +52,7 @@ export function Autocomplete({
|
|
|
50
52
|
|
|
51
53
|
return <Collapse
|
|
52
54
|
in={open}
|
|
53
|
-
duration={
|
|
55
|
+
duration={30}
|
|
54
56
|
className={cls(
|
|
55
57
|
"absolute top-full left-0 right-0 overflow-visible",
|
|
56
58
|
open ? "shadow" : "",
|
|
@@ -60,7 +62,8 @@ export function Autocomplete({
|
|
|
60
62
|
<div ref={autocompleteRef}
|
|
61
63
|
className={cls(
|
|
62
64
|
open ? paperMixin : "",
|
|
63
|
-
"bg-surface-50 dark:bg-surface-900
|
|
65
|
+
"bg-surface-50 dark:bg-surface-900",
|
|
66
|
+
className,
|
|
64
67
|
)}>
|
|
65
68
|
{children}
|
|
66
69
|
</div>
|
|
@@ -71,16 +74,18 @@ export function Autocomplete({
|
|
|
71
74
|
export type AutocompleteItemProps = {
|
|
72
75
|
children: React.ReactNode,
|
|
73
76
|
onClick?: () => void,
|
|
77
|
+
className?: string
|
|
74
78
|
};
|
|
75
79
|
|
|
76
80
|
export function AutocompleteItem({
|
|
77
81
|
children,
|
|
78
|
-
onClick
|
|
82
|
+
onClick,
|
|
83
|
+
className
|
|
79
84
|
}: AutocompleteItemProps) {
|
|
80
85
|
|
|
81
86
|
return (
|
|
82
87
|
<div
|
|
83
|
-
className="flex w-full items-center
|
|
88
|
+
className={cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className)}
|
|
84
89
|
onClick={onClick}>
|
|
85
90
|
{children}
|
|
86
91
|
</div>
|
|
@@ -259,7 +259,7 @@ export const MultiSelect = React.forwardRef<
|
|
|
259
259
|
}}
|
|
260
260
|
/>}
|
|
261
261
|
<div className={cls("px-2 h-full flex items-center")}>
|
|
262
|
-
<KeyboardArrowDownIcon size={"small"}
|
|
262
|
+
<KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
|
|
263
263
|
className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
|
|
264
264
|
</div>
|
|
265
265
|
</div>
|
|
@@ -270,7 +270,7 @@ export const MultiSelect = React.forwardRef<
|
|
|
270
270
|
{placeholder}
|
|
271
271
|
</span>
|
|
272
272
|
<div className={cls("px-2 h-full flex items-center")}>
|
|
273
|
-
<KeyboardArrowDownIcon size={"small"}
|
|
273
|
+
<KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
|
|
274
274
|
className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
|
|
275
275
|
</div>
|
|
276
276
|
</div>
|
|
@@ -380,7 +380,6 @@ export function MultiSelectItem<T extends MultiSelectValue = string>({
|
|
|
380
380
|
</CommandPrimitive.Item>;
|
|
381
381
|
}
|
|
382
382
|
|
|
383
|
-
|
|
384
383
|
function InnerCheckBox({ checked }: { checked: boolean }) {
|
|
385
384
|
return <div className={cls(
|
|
386
385
|
"p-2",
|
|
@@ -187,18 +187,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
|
|
|
187
187
|
</SelectPrimitive.Value>
|
|
188
188
|
</div>
|
|
189
189
|
|
|
190
|
-
{endAdornment && (
|
|
191
|
-
<div
|
|
192
|
-
className={cls("h-full flex items-center")}
|
|
193
|
-
onClick={(e) => {
|
|
194
|
-
e.preventDefault();
|
|
195
|
-
e.stopPropagation();
|
|
196
|
-
}}>
|
|
197
|
-
{endAdornment}
|
|
198
|
-
</div>
|
|
199
|
-
)}
|
|
200
190
|
<SelectPrimitive.Icon asChild>
|
|
201
|
-
<KeyboardArrowDownIcon size={"medium"}
|
|
191
|
+
<KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
|
|
202
192
|
className={cls("transition", open ? "rotate-180" : "", {
|
|
203
193
|
"px-2": size === "large",
|
|
204
194
|
"px-1": size === "medium" || size === "small",
|
|
@@ -207,6 +197,16 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
|
|
|
207
197
|
</div>
|
|
208
198
|
</SelectPrimitive.Trigger>
|
|
209
199
|
|
|
200
|
+
{endAdornment && (
|
|
201
|
+
<div
|
|
202
|
+
className={cls("h-full flex items-center absolute right-0 pr-12",)}
|
|
203
|
+
onClick={(e) => {
|
|
204
|
+
e.preventDefault();
|
|
205
|
+
e.stopPropagation();
|
|
206
|
+
}}>
|
|
207
|
+
{endAdornment}
|
|
208
|
+
</div>
|
|
209
|
+
)}
|
|
210
210
|
</div>
|
|
211
211
|
<SelectPrimitive.Portal>
|
|
212
212
|
<SelectPrimitive.Content position={position}
|