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

package/dist/components/TextField.d.ts

@@ -20,4 +20,23 @@ export type TextFieldProps<T extends string | number> = {
     inputStyle?: React.CSSProperties;
     inputRef?: React.ForwardedRef<any>;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
-export declare function TextField<T extends string | number>({ value, onChange, label, type, multiline, invisible, rows, disabled, error, endAdornment, autoFocus, placeholder, size, className, style, inputClassName, inputStyle, inputRef: inputRefProp, ...inputProps }: TextFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const TextField: React.ForwardRefExoticComponent<{
+    type?: InputType;
+    value?: string | number | undefined;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    label?: React.ReactNode;
+    multiline?: boolean;
+    rows?: number;
+    disabled?: boolean;
+    invisible?: boolean;
+    error?: boolean;
+    endAdornment?: React.ReactNode;
+    autoFocus?: boolean;
+    placeholder?: string;
+    size?: "small" | "medium" | "large";
+    className?: string;
+    style?: React.CSSProperties;
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+    inputRef?: React.ForwardedRef<any>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLDivElement>>;

package/dist/index.es.js

@@ -31260,7 +31260,7 @@ function setRef(ref, value) {
     ref.current = value;
   }
 }
-function TextField({
+const TextField = forwardRef(({
   value,
   onChange,
   label,
@@ -31280,7 +31280,7 @@ function TextField({
   inputStyle,
   inputRef: inputRefProp,
   ...inputProps
-}) {
+}, ref) => {
   const inputRef = inputRefProp ?? useRef(null);
   const [focused, setFocused] = React__default.useState(document.activeElement === inputRef.current);
   const hasValue = value !== void 0 && value !== null && value !== "";
@@ -31290,16 +31290,13 @@ function TextField({
       if (event.target instanceof HTMLElement) event.target.blur();
     };
     const element = "current" in inputRef ? inputRef.current : inputRef;
-    element.addEventListener("wheel", handleWheel);
+    element?.addEventListener("wheel", handleWheel);
     return () => {
-      element.removeEventListener("wheel", handleWheel);
+      element?.removeEventListener("wheel", handleWheel);
     };
   }, [inputRef, type]);
-  const numberInputOnWheelPreventChange = useCallback((e) => {
-    e.preventDefault();
-  }, []);
-  const input = multiline ? /* @__PURE__ */ jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500") }) : /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, onWheel: type === "number" ? numberInputOnWheelPreventChange : void 0, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: Number.isNaN(value) ? "" : value ?? "", onChange });
-  return /* @__PURE__ */ jsxs("div", { className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
+  const input = multiline ? /* @__PURE__ */ jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
+  return /* @__PURE__ */ jsxs("div", { ref, className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
     "min-h-[32px]": !invisible && size === "small",
     "min-h-[48px]": !invisible && size === "medium",
     "min-h-[64px]": !invisible && size === "large"
@@ -31312,7 +31309,8 @@ function TextField({
       "mr-2": size === "small"
     }), children: endAdornment })
   ] });
-}
+});
+TextField.displayName = "TextField";
 const Tooltip = (t0) => {
   const $ = c(28);
   const {