@firecms/ui 3.0.0-canary.177 → 3.0.0-canary.179

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 (8) hide show
  1. package/dist/components/TextField.d.ts +20 -1
  2. package/dist/index.es.js +8 -10
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.umd.js +8 -10
  5. package/dist/index.umd.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/components/TextField.tsx +178 -153
  8. package/src/components/Tooltip.tsx +0 -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.177",
4
+ "version": "3.0.0-canary.179",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -115,7 +115,7 @@
115
115
  "index.css",
116
116
  "tailwind.config.js"
117
117
  ],
118
- "gitHead": "e265baef6fad623e57376b3338475bc0d5b49372",
118
+ "gitHead": "39125fe4c1a15167d203baee64f2bbd5376eb766",
119
119
  "publishConfig": {
120
120
  "access": "public"
121
121
  }
package/src/components/TextField.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React, { useCallback, useEffect, useRef } from "react";
2
+ import React, { useCallback, useEffect, useRef, forwardRef, ForwardedRef } from "react";
3
3
 
4
4
  import { TextareaAutosize } from "./TextareaAutosize";
5
5
  import {
@@ -13,7 +13,7 @@ import { InputLabel } from "./InputLabel";
13
13
  import { cls } from "../util";
14
14
 
15
15
  export type InputType =
16
- "text"
16
+ | "text"
17
17
  | "number"
18
18
  | "phone"
19
19
  | "email"
@@ -28,156 +28,181 @@ export type InputType =
28
28
  | "color";
29
29
 
30
30
  export type TextFieldProps<T extends string | number> = {
31
- type?: InputType,
32
- value?: T,
33
- onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void,
34
- label?: React.ReactNode,
35
- multiline?: boolean,
36
- rows?: number,
37
- disabled?: boolean,
38
- invisible?: boolean,
39
- error?: boolean,
40
- endAdornment?: React.ReactNode,
41
- autoFocus?: boolean,
42
- placeholder?: string,
43
- size?: "small" | "medium" | "large",
44
- className?: string,
45
- style?: React.CSSProperties,
46
- inputClassName?: string,
47
- inputStyle?: React.CSSProperties,
48
- inputRef?: React.ForwardedRef<any>
31
+ type?: InputType;
32
+ value?: T;
33
+ onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
34
+ label?: React.ReactNode;
35
+ multiline?: boolean;
36
+ rows?: number;
37
+ disabled?: boolean;
38
+ invisible?: boolean;
39
+ error?: boolean;
40
+ endAdornment?: React.ReactNode;
41
+ autoFocus?: boolean;
42
+ placeholder?: string;
43
+ size?: "small" | "medium" | "large";
44
+ className?: string;
45
+ style?: React.CSSProperties;
46
+ inputClassName?: string;
47
+ inputStyle?: React.CSSProperties;
48
+ inputRef?: React.ForwardedRef<any>;
49
49
  } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
50
50
 
51
- export function TextField<T extends string | number>({
52
- value,
53
- onChange,
54
- label,
55
- type = "text",
56
- multiline = false,
57
- invisible,
58
- rows,
59
- disabled,
60
- error,
61
- endAdornment,
62
- autoFocus,
63
- placeholder,
64
- size = "large",
65
- className,
66
- style,
67
- inputClassName,
68
- inputStyle,
69
- inputRef: inputRefProp,
70
- ...inputProps
71
- }: TextFieldProps<T>) {
72
-
73
- const inputRef = inputRefProp ?? useRef(null);
74
-
75
- // @ts-ignore
76
- const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
77
- const hasValue = value !== undefined && value !== null && value !== "";
78
-
79
- useEffect(() => {
80
- if (type !== "number") return;
81
- const handleWheel = (event: any) => {
82
- if (event.target instanceof HTMLElement) event.target.blur()
83
- };
84
-
85
- // Current input element
86
- const element = "current" in inputRef ? inputRef.current : inputRef;
87
-
88
- // Add the event listener
89
- element.addEventListener("wheel", handleWheel);
90
-
91
- // Remove event listener on cleanup
92
- return () => {
93
- element.removeEventListener("wheel", handleWheel);
94
- };
95
- }, [inputRef, type]);
96
-
97
- const numberInputOnWheelPreventChange = useCallback((e: any) => {
98
- e.preventDefault()
99
- }, []);
100
-
101
- const input = multiline
102
- ? <TextareaAutosize
103
- {...inputProps as any}
104
- ref={inputRef}
105
- placeholder={focused || hasValue || !label ? placeholder : undefined}
106
- autoFocus={autoFocus}
107
- rows={rows}
108
- value={value ?? ""}
109
- onChange={onChange}
110
- style={inputStyle}
111
- className={cls(
112
- invisible ? focusedInvisibleMixin : "",
113
- "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
114
- disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
115
- )}
116
- />
117
- : <input
118
- {...inputProps}
119
- ref={inputRef}
120
- onWheel={type === "number" ? numberInputOnWheelPreventChange : undefined}
121
- disabled={disabled}
122
- style={inputStyle}
123
- className={cls(
124
- "w-full outline-none bg-transparent leading-normal px-3",
125
- "rounded-md",
126
- "focused:text-text-primary focused:dark:text-text-primary-dark",
127
- invisible ? focusedInvisibleMixin : "",
128
- disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
129
- size === "small" ? "min-h-[32px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
130
- label ? (size === "large" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2",
131
- endAdornment ? "pr-10" : "pr-3",
132
- disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
133
- inputClassName
134
- )}
135
- placeholder={focused || hasValue || !label ? placeholder : undefined}
136
- autoFocus={autoFocus}
137
- onFocus={() => setFocused(true)}
138
- onBlur={() => setFocused(false)}
139
- type={type}
140
- value={Number.isNaN(value) ? "" : (value ?? "")}
141
- onChange={onChange}
142
- />;
143
-
144
- return (
145
- <div
146
- className={cls(
147
- "rounded-md relative max-w-full",
148
- invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
149
- disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
150
- error ? "border border-red-500 dark:border-red-600" : "",
151
- {
152
- "min-h-[32px]": !invisible && size === "small",
153
- "min-h-[48px]": !invisible && size === "medium",
154
- "min-h-[64px]": !invisible && size === "large"
155
- },
156
- className)}
157
- style={style}>
158
-
159
- {label && (
160
- <InputLabel
161
- className={cls(
162
- "pointer-events-none absolute",
163
- size === "large" ? "top-1" : "top-[-1px]",
164
- !error ? (focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
165
- disabled ? "opacity-50" : "")}
166
- shrink={hasValue || focused}
167
- >
168
- {label}
169
- </InputLabel>
170
- )}
171
-
172
- {input}
173
-
174
- {endAdornment && <div
175
- className={cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
176
- "mr-4": size === "large",
177
- "mr-3": size === "medium",
178
- "mr-2": size === "small"
179
- })}>{endAdornment}</div>}
180
-
181
- </div>
182
- );
183
- }
51
+ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | number>>(
52
+ <T extends string | number>(
53
+ {
54
+ value,
55
+ onChange,
56
+ label,
57
+ type = "text",
58
+ multiline = false,
59
+ invisible,
60
+ rows,
61
+ disabled,
62
+ error,
63
+ endAdornment,
64
+ autoFocus,
65
+ placeholder,
66
+ size = "large",
67
+ className,
68
+ style,
69
+ inputClassName,
70
+ inputStyle,
71
+ inputRef: inputRefProp,
72
+ ...inputProps
73
+ }: TextFieldProps<T>,
74
+ ref: ForwardedRef<HTMLDivElement>
75
+ ) => {
76
+
77
+ const inputRef = inputRefProp ?? useRef(null);
78
+
79
+ // @ts-ignore
80
+ const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
81
+ const hasValue = value !== undefined && value !== null && value !== "";
82
+
83
+ useEffect(() => {
84
+ if (type !== "number") return;
85
+ const handleWheel = (event: any) => {
86
+ if (event.target instanceof HTMLElement) event.target.blur();
87
+ };
88
+
89
+ const element = "current" in inputRef ? inputRef.current : inputRef;
90
+
91
+ element?.addEventListener("wheel", handleWheel);
92
+
93
+ return () => {
94
+ element?.removeEventListener("wheel", handleWheel);
95
+ };
96
+ }, [inputRef, type]);
97
+
98
+ const input = multiline ? (
99
+ <TextareaAutosize
100
+ {...(inputProps as any)}
101
+ ref={inputRef}
102
+ placeholder={focused || hasValue || !label ? placeholder : undefined}
103
+ autoFocus={autoFocus}
104
+ rows={rows}
105
+ value={value ?? ""}
106
+ onChange={onChange}
107
+ style={inputStyle}
108
+ className={cls(
109
+ invisible ? focusedInvisibleMixin : "",
110
+ "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
111
+ disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
112
+ inputClassName
113
+ )}
114
+ />
115
+ ) : (
116
+ <input
117
+ {...inputProps}
118
+ ref={inputRef}
119
+ disabled={disabled}
120
+ style={inputStyle}
121
+ className={cls(
122
+ "w-full outline-none bg-transparent leading-normal px-3",
123
+ "rounded-md",
124
+ "focused:text-text-primary focused:dark:text-text-primary-dark",
125
+ invisible ? focusedInvisibleMixin : "",
126
+ disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
127
+ size === "small"
128
+ ? "min-h-[32px]"
129
+ : size === "medium"
130
+ ? "min-h-[48px]"
131
+ : "min-h-[64px]",
132
+ label
133
+ ? size === "large"
134
+ ? "pt-8 pb-2"
135
+ : "pt-4 pb-2"
136
+ : "py-2",
137
+ endAdornment ? "pr-10" : "pr-3",
138
+ disabled &&
139
+ "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
140
+ inputClassName
141
+ )}
142
+ placeholder={focused || hasValue || !label ? placeholder : undefined}
143
+ autoFocus={autoFocus}
144
+ onFocus={() => setFocused(true)}
145
+ onBlur={() => setFocused(false)}
146
+ type={type}
147
+ value={type === "number" && Number.isNaN(value) ? "" : value ?? ""}
148
+ onChange={onChange}
149
+ />
150
+ );
151
+
152
+ return (
153
+ <div
154
+ ref={ref}
155
+ className={cls(
156
+ "rounded-md relative max-w-full",
157
+ invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
158
+ disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
159
+ error ? "border border-red-500 dark:border-red-600" : "",
160
+ {
161
+ "min-h-[32px]": !invisible && size === "small",
162
+ "min-h-[48px]": !invisible && size === "medium",
163
+ "min-h-[64px]": !invisible && size === "large",
164
+ },
165
+ className
166
+ )}
167
+ style={style}
168
+ >
169
+ {label && (
170
+ <InputLabel
171
+ className={cls(
172
+ "pointer-events-none absolute",
173
+ size === "large" ? "top-1" : "top-[-1px]",
174
+ !error
175
+ ? focused
176
+ ? "text-primary dark:text-primary"
177
+ : "text-text-secondary dark:text-text-secondary-dark"
178
+ : "text-red-500 dark:text-red-600",
179
+ disabled ? "opacity-50" : ""
180
+ )}
181
+ shrink={hasValue || focused}
182
+ >
183
+ {label}
184
+ </InputLabel>
185
+ )}
186
+
187
+ {input}
188
+
189
+ {endAdornment && (
190
+ <div
191
+ className={cls(
192
+ "flex flex-row justify-center items-center absolute h-full right-0 top-0",
193
+ {
194
+ "mr-4": size === "large",
195
+ "mr-3": size === "medium",
196
+ "mr-2": size === "small",
197
+ }
198
+ )}
199
+ >
200
+ {endAdornment}
201
+ </div>
202
+ )}
203
+ </div>
204
+ );
205
+ }
206
+ );
207
+
208
+ TextField.displayName = "TextField";
package/src/components/Tooltip.tsx CHANGED
@@ -71,7 +71,6 @@ export const Tooltip = ({
71
71
  align={align}
72
72
  side={side}>
73
73
  {title}
74
- {/*<TooltipPrimitive.Arrow className="fill-surface-accent-600"/>*/}
75
74
  </TooltipPrimitive.Content>
76
75
  </TooltipPrimitive.Portal>
77
76
  </TooltipPrimitive.Root>