@farmzone/fz-react-ui 1.0.11 → 1.0.13

package/dist/index.js

@@ -48,7 +48,7 @@ var buttonVariants = cva(
         carousel: "bg-white border border-gray-300 hover:bg-gray-100 hover:text-black rounded-full",
         accent: "btn-grad text-white rounded-full",
         metal: "btn-metal text-white min-w-22",
-        ghost: "p-1 h-auto rounded-sm bg-transparent hover:bg-sub-lightgray text-sub-darkgray hover:bg-inherit",
+        ghost: "p-1 h-auto rounded-sm bg-transparent text-sub-darkgray transition-colors hover:bg-gray-100",
         link: "bg-transparent border-none text-main-blue underline-offset-4 hover:underline h-auto p-0"
       },
       size: {
@@ -4707,15 +4707,26 @@ function Table(props) {
     if (!isDynamicHeight) return;
     const el = scrollRef.current;
     if (!el) return;
+    const pageContainer = el.parentElement?.parentElement;
+    const isContainerConstrained = (container2) => {
+      if (!container2) return false;
+      const style = window.getComputedStyle(container2);
+      return style.overflow === "hidden" || style.overflowY === "hidden";
+    };
+    const getContainerBottom = () => {
+      if (isContainerConstrained(pageContainer)) {
+        return Math.min(pageContainer.getBoundingClientRect().bottom, window.innerHeight);
+      }
+      return window.innerHeight;
+    };
     const update = () => {
       const top = el.getBoundingClientRect().top;
       const footerH = footerRef.current?.getBoundingClientRect().height ?? 0;
-      setTableHeight(window.innerHeight - top - footerH - 24);
+      setTableHeight(getContainerBottom() - top - footerH - 24);
     };
     update();
     window.addEventListener("resize", update);
     const observer = new ResizeObserver(update);
-    const pageContainer = el.parentElement?.parentElement;
     if (pageContainer) observer.observe(pageContainer);
     const footer = footerRef.current;
     if (footer) observer.observe(footer);
@@ -4728,9 +4739,15 @@ function Table(props) {
     if (!isDynamicHeight) return;
     const el = scrollRef.current;
     if (!el) return;
+    const pageContainer = el.parentElement?.parentElement;
     const top = el.getBoundingClientRect().top;
     const footerH = footerRef.current?.getBoundingClientRect().height ?? 0;
-    setTableHeight(window.innerHeight - top - footerH - 24);
+    const isContainerConstrained = !!pageContainer && (() => {
+      const style = window.getComputedStyle(pageContainer);
+      return style.overflow === "hidden" || style.overflowY === "hidden";
+    })();
+    const containerBottom = isContainerConstrained ? Math.min(pageContainer.getBoundingClientRect().bottom, window.innerHeight) : window.innerHeight;
+    setTableHeight(containerBottom - top - footerH - 24);
   }, [showSkeleton, showEmpty]);
   const selectedKeysRef = useRef(selectedKeys);
   selectedKeysRef.current = selectedKeys;
@@ -7204,9 +7221,13 @@ function SelectWithInputField(props) {
   }, [defaultPrefix, formValue, options]);
   const [selectedPrefix, setSelectedPrefix] = useState(prefix);
   const [prevFormValue, setPrevFormValue] = useState(formValue);
+  const isUserInputChangeRef = useRef(false);
   if (prevFormValue !== formValue) {
     setPrevFormValue(formValue);
-    setSelectedPrefix(formValue ? prefix : defaultPrefix);
+    if (!isUserInputChangeRef.current) {
+      setSelectedPrefix(formValue ? prefix : defaultPrefix);
+    }
+    isUserInputChangeRef.current = false;
   }
   useLayoutEffect(() => {
     if (readOnly) return;
@@ -7215,9 +7236,7 @@ function SelectWithInputField(props) {
     }
   }, [formValue, normalizedFormValue, onChange, readOnly]);
   if (readOnly) {
-    const prefixLabel = options.find((o) => String(o.value) === prefix)?.label ?? prefix;
-    const displayText = inputPart ? `${prefixLabel} ${inputPart}` : prefix ? prefixLabel : "\u2014";
-    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: displayText || "\u2014" }) });
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: formValue }) });
   }
   const updateCombined = (nextPrefix, nextInput) => {
     onChange(combineSelectWithInputValue(nextPrefix, nextInput));
@@ -7231,6 +7250,7 @@ function SelectWithInputField(props) {
     if (normalized) {
       validationCtx?.markFieldHadValue(String(config.name));
     }
+    isUserInputChangeRef.current = true;
     updateCombined(selectedPrefix, normalized);
   };
   const selectClass = resolveSelectClassNameProp(selectWithInputClassNames?.selectClassName, {
@@ -7269,6 +7289,7 @@ function SelectWithInputField(props) {
         },
         onBlur: (e) => {
           const normalized = normalizeInput(e.target.value.normalize("NFKC"));
+          isUserInputChangeRef.current = true;
           updateCombined(selectedPrefix, normalized);
           onBlur();
         }