@purpurds/table 7.6.1 → 7.8.0

package/src/use-truncated-hook.tsx

@@ -1,30 +1,50 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const useTruncatedTooltip = () => {
+  const [hasPopover, setHasPopover] = useState(false);
   const [showPopover, setShowPopover] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
 
-  const onMouseEnter = () => {
-    if (containerRef.current) {
-      const contentElement: HTMLLinkElement | HTMLParagraphElement | null =
-        containerRef.current.querySelector("a, p"); // Find "a" or "p" tag
-      if (contentElement) {
-        const containerWidth = containerRef.current.clientWidth;
-        const contentWidth =
-          contentElement.tagName.toLowerCase() === "a"
-            ? contentElement.offsetWidth
-            : contentElement.scrollWidth;
-
-        setShowPopover(contentWidth > containerWidth);
+  useEffect(() => {
+    const checkContentOverflow = () => {
+      if (containerRef.current) {
+        const contentElement: HTMLLinkElement | HTMLParagraphElement | null =
+          containerRef.current.querySelector("a, p");
+
+        if (contentElement) {
+          const containerWidth = containerRef.current.clientWidth;
+          const contentWidth =
+            contentElement.tagName.toLowerCase() === "a"
+              ? contentElement.offsetWidth
+              : contentElement.scrollWidth;
+
+          setHasPopover(contentWidth > containerWidth);
+        } else {
+          setHasPopover(false);
+        }
+      } else {
+        setHasPopover(false);
       }
-    }
+    };
+
+    checkContentOverflow();
+
+    window.addEventListener("resize", checkContentOverflow);
+
+    return () => {
+      window.removeEventListener("resize", checkContentOverflow);
+    };
+  }, []);
+
+  const onMouseEnter = () => {
+    setShowPopover(hasPopover);
   };
 
   const onMouseLeave = () => {
     setShowPopover(false);
   };
 
-  return { showPopover, containerRef, onMouseEnter, onMouseLeave };
+  return { hasPopover, showPopover, containerRef, onMouseEnter, onMouseLeave };
 };
 
 export default useTruncatedTooltip;

package/src/utils/custom-functions.ts

@@ -7,11 +7,16 @@ export const filterOnFilterKey = <TData>(
   filterValue: {
     filterKey: string;
     value: string;
+    partialMatch?: boolean;
   }
 ): boolean => {
-  const { filterKey, value } = filterValue;
+  const { filterKey, value, partialMatch } = filterValue;
   const cellValue = row.getValue<Record<string, unknown>>(columnId);
-  return value === "" || cellValue[filterKey] === value;
+  return Boolean(
+    value === "" ||
+      cellValue[filterKey] === value ||
+      (partialMatch && cellValue[filterKey]?.toString().toLowerCase().includes(value.toLowerCase()))
+  );
 };
 
 export const sortOnBadgeVariant = <TData>(