@farmzone/fz-react-ui 1.0.12 → 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;