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

package/dist/index.umd.js

@@ -31270,7 +31270,7 @@
       ref.current = value;
     }
   }
-  function TextField({
+  const TextField = React.forwardRef(({
     value,
     onChange,
     label,
@@ -31290,7 +31290,7 @@
     inputStyle,
     inputRef: inputRefProp,
     ...inputProps
-  }) {
+  }, ref) => {
     const inputRef = inputRefProp ?? React.useRef(null);
     const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -31300,16 +31300,13 @@
         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 = React.useCallback((e) => {
-      e.preventDefault();
-    }, []);
-    const input = multiline ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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"
@@ -31322,7 +31319,8 @@
         "mr-2": size === "small"
       }), children: endAdornment })
     ] });
-  }
+  });
+  TextField.displayName = "TextField";
   const Tooltip = (t0) => {
     const $ = reactCompilerRuntime.c(28);
     const {