@rxdrag/website-lib-core 0.0.106 → 0.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,8 +24,8 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/slate-preview": "1.2.63",
     "@rxdrag/tsconfig": "0.2.0",
+    "@rxdrag/slate-preview": "1.2.63",
     "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
@@ -34,8 +34,8 @@
     "gsap": "^3.12.7",
     "hls.js": "^1.6.13",
     "lodash-es": "^4.17.21",
-    "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/entify-lib": "0.0.23"
+    "@rxdrag/entify-lib": "0.0.23",
+    "@rxdrag/rxcms-models": "0.3.96"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0",

package/src/react/components/ContactForm/FileUpload2.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
-import { forwardRef, useRef, useState, useEffect } from "react";
+import { forwardRef, useRef, useState } from "react";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
 
 /**
  * Simple encryption function for generating anti-bot encrypted fields
@@ -68,17 +69,9 @@ export const FileUpload2 = forwardRef<HTMLInputElement, FileUploadProps>(
     const [isUploading, setIsUploading] = useState(false);
     const [uploadError, setUploadError] = useState<string>("");
     const fileInputRef = useRef<HTMLInputElement>(null);
-    const labelRef = useRef<HTMLLabelElement>(null);
-    const [paddingLeft, setPaddingLeft] = useState("3.5rem");
+    const { labelRef, paddingLeft } = useInlineLabelPadding(16);
     const abortControllerRef = useRef<AbortController | null>(null);
 
-    useEffect(() => {
-      if (labelRef.current) {
-        const width = labelRef.current.getBoundingClientRect().width;
-        setPaddingLeft(`${width + 16}px`);
-      }
-    }, [label]);
-
     // Upload single file
     const uploadFile = async (
       file: File,

package/src/react/components/ContactForm/Input2.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
-import { forwardRef, useRef, useEffect, useState } from "react";
+import { forwardRef } from "react";
 import { InputProps } from "./Input";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
 
 export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const {
@@ -20,15 +21,7 @@ export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     ...rest
   } = props;
 
-  const labelRef = useRef<HTMLLabelElement>(null);
-  const [paddingLeft, setPaddingLeft] = useState("3.5rem"); // default fallback
-
-  useEffect(() => {
-    if (labelRef.current) {
-      const width = labelRef.current.getBoundingClientRect().width;
-      setPaddingLeft(`${width + 16}px`); // extra 16px spacing
-    }
-  }, [label]);
+  const { labelRef, paddingLeft } = useInlineLabelPadding(16);
 
   return (
     <div className={clsx("relative w-full", className)} {...rest}>

package/src/react/components/ContactForm/Textarea2.tsx

@@ -22,10 +22,33 @@ export const Textarea2 = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const labelRef = useRef<HTMLLabelElement>(null);
 
     useEffect(() => {
-      if (labelRef.current) {
-        const height = labelRef.current.getBoundingClientRect().height;
-        setPaddingTop(`${height + 12}px`); // 留白 label 高度 + 12px 间距
+      const labelEl = labelRef.current;
+      if (!labelEl) return;
+
+      let rafId = 0;
+      const measure = () => {
+        const height = labelEl.getBoundingClientRect().height;
+        setPaddingTop(`${height + 12}px`);
+      };
+
+      measure();
+      rafId = requestAnimationFrame(measure);
+
+      if (typeof ResizeObserver === "undefined") {
+        return () => {
+          cancelAnimationFrame(rafId);
+        };
       }
+
+      const ro = new ResizeObserver(() => {
+        measure();
+      });
+      ro.observe(labelEl);
+
+      return () => {
+        cancelAnimationFrame(rafId);
+        ro.disconnect();
+      };
     }, [label]);
 
     return (

package/src/react/components/ContactForm/hooks/useInlineLabelPadding.ts

@@ -10,10 +10,33 @@ export function useInlineLabelPadding(extraSpace: number = 16) {
   const [paddingLeft, setPaddingLeft] = useState<string>("3.5rem");
 
   useEffect(() => {
-    if (labelRef.current) {
-      const width = labelRef.current.getBoundingClientRect().width;
+    const labelEl = labelRef.current;
+    if (!labelEl) return;
+
+    let rafId = 0;
+    const measure = () => {
+      const width = labelEl.getBoundingClientRect().width;
       setPaddingLeft(`${width + extraSpace}px`);
+    };
+
+    measure();
+    rafId = requestAnimationFrame(measure);
+
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
     }
+
+    const ro = new ResizeObserver(() => {
+      measure();
+    });
+    ro.observe(labelEl);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      ro.disconnect();
+    };
   }, [extraSpace]);
 
   return { labelRef, paddingLeft } as const;