@firecms/ui 3.0.0-beta.13 → 3.0.0-beta.14

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 (16) hide show
  1. package/dist/components/Autocomplete.d.ts +4 -2
  2. package/dist/components/Select.d.ts +1 -0
  3. package/dist/index.css +1 -0
  4. package/dist/index.es.js +186 -165
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.umd.js +186 -165
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +3 -3
  9. package/src/components/Autocomplete.tsx +10 -5
  10. package/src/components/Button.tsx +1 -1
  11. package/src/components/LoadingButton.tsx +1 -1
  12. package/src/components/MultiSelect.tsx +2 -3
  13. package/src/components/Select.tsx +44 -39
  14. package/src/icons/Icon.tsx +1 -1
  15. package/src/index.css +1 -0
  16. package/src/material-icons.woff2 +0 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@firecms/ui",
3
3
  "type": "module",
4
- "version": "3.0.0-beta.13",
4
+ "version": "3.0.0-beta.14",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -44,7 +44,7 @@
44
44
  },
45
45
  "scripts": {
46
46
  "watch": "vite build --watch",
47
- "build": "vite build && tsc --emitDeclarationOnly",
47
+ "build": "rm -rf ./dist && vite build && tsc --emitDeclarationOnly",
48
48
  "prepublishOnly": "run-s build",
49
49
  "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
50
50
  "test:lint": "eslint \"src/**\" --quiet",
@@ -116,7 +116,7 @@
116
116
  "index.css",
117
117
  "tailwind.config.js"
118
118
  ],
119
- "gitHead": "26d5e1f33a7ac00c78e45cd3cb3c397f4ba00821",
119
+ "gitHead": "22973ce94cd4ee8ccb4d586ba7f15383dc2cf30b",
120
120
  "publishConfig": {
121
121
  "access": "public"
122
122
  }
package/src/components/Autocomplete.tsx CHANGED
@@ -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={50}
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 py-2"
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 pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800"
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>
package/src/components/Button.tsx CHANGED
@@ -50,7 +50,7 @@ const ButtonInner = React.forwardRef<
50
50
  "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
51
51
  "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
52
52
  "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
53
- "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "text" && color === "neutral" && !disabled,
53
+ "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "text" && color === "neutral" && !disabled,
54
54
 
55
55
  // Outlined Variants
56
56
  "border border-primary text-primary hover:text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
package/src/components/LoadingButton.tsx CHANGED
@@ -23,7 +23,7 @@ export function LoadingButton<P extends React.ElementType = "button">({
23
23
  {...props}
24
24
  >
25
25
  {loading && (
26
- <CircularProgress size={"small"}/>
26
+ <CircularProgress size={props.size === "small" ? "smallest" : "small"}/>
27
27
  )}
28
28
  {!loading && startIcon}
29
29
  {children}
package/src/components/MultiSelect.tsx CHANGED
@@ -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",
package/src/components/Select.tsx CHANGED
@@ -38,33 +38,35 @@ export type SelectProps<T extends SelectValue = string> = {
38
38
  padding?: boolean,
39
39
  invisible?: boolean,
40
40
  children?: React.ReactNode;
41
+ dataType?: "string" | "number" | "boolean";
41
42
  };
42
43
 
43
44
  export const Select = forwardRef<HTMLDivElement, SelectProps>(({
44
- inputRef,
45
- open,
46
- name,
47
- fullWidth = false,
48
- id,
49
- onOpenChange,
50
- value,
51
- onChange,
52
- onValueChange,
53
- className,
54
- inputClassName,
55
- placeholder,
56
- renderValue,
57
- label,
58
- size = "large",
59
- error,
60
- disabled,
61
- padding = true,
62
- position = "item-aligned",
63
- endAdornment,
64
- invisible,
65
- children,
66
- ...props
67
- }, ref) => {
45
+ inputRef,
46
+ open,
47
+ name,
48
+ fullWidth = false,
49
+ id,
50
+ onOpenChange,
51
+ value,
52
+ onChange,
53
+ onValueChange,
54
+ className,
55
+ inputClassName,
56
+ placeholder,
57
+ renderValue,
58
+ label,
59
+ size = "large",
60
+ error,
61
+ disabled,
62
+ padding = true,
63
+ position = "item-aligned",
64
+ endAdornment,
65
+ invisible,
66
+ children,
67
+ dataType = "string",
68
+ ...props
69
+ }, ref) => {
68
70
 
69
71
  const [openInternal, setOpenInternal] = useState(open ?? false);
70
72
 
@@ -73,11 +75,14 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
73
75
  }, [open]);
74
76
 
75
77
  const onValueChangeInternal = useCallback((newValue: string) => {
76
- // Convert string value to appropriate type
78
+
77
79
  let typedValue: SelectValue = newValue;
78
- if (newValue === "true") typedValue = true;
79
- else if (newValue === "false") typedValue = false;
80
- else if (!isNaN(Number(newValue)) && newValue.trim() !== '') typedValue = Number(newValue);
80
+ if (dataType === "boolean") {
81
+ if (newValue === "true") typedValue = true;
82
+ else if (newValue === "false") typedValue = false;
83
+ } else if (dataType === "number") {
84
+ if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
85
+ }
81
86
 
82
87
  onValueChange?.(typedValue as any);
83
88
  if (onChange) {
@@ -187,18 +192,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
187
192
  </SelectPrimitive.Value>
188
193
  </div>
189
194
 
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
195
  <SelectPrimitive.Icon asChild>
201
- <KeyboardArrowDownIcon size={"medium"}
196
+ <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
202
197
  className={cls("transition", open ? "rotate-180" : "", {
203
198
  "px-2": size === "large",
204
199
  "px-1": size === "medium" || size === "small",
@@ -207,6 +202,16 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
207
202
  </div>
208
203
  </SelectPrimitive.Trigger>
209
204
 
205
+ {endAdornment && (
206
+ <div
207
+ className={cls("h-full flex items-center absolute right-0 pr-12",)}
208
+ onClick={(e) => {
209
+ e.preventDefault();
210
+ e.stopPropagation();
211
+ }}>
212
+ {endAdornment}
213
+ </div>
214
+ )}
210
215
  </div>
211
216
  <SelectPrimitive.Portal>
212
217
  <SelectPrimitive.Content position={position}
package/src/icons/Icon.tsx CHANGED
@@ -54,11 +54,11 @@ export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: str
54
54
  ref={ref} // Attach the ref to the span
55
55
  style={{
56
56
  fontSize: `${sizeInPx}px`,
57
+ verticalAlign: "middle",
57
58
  ...style
58
59
  }}
59
60
  className={
60
61
  cls("material-icons",
61
- "block",
62
62
  color ? colorClassesMapping[color] : "",
63
63
  "select-none",
64
64
  className)}
package/src/index.css CHANGED
@@ -71,3 +71,4 @@
71
71
  a {
72
72
  @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
73
73
  }
74
+
package/src/material-icons.woff2 ADDED
Binary file