From 6ebf12897cb452d598fabc307dce895e7c964481 Mon Sep 17 00:00:00 2001
From: Aejkatappaja <joverjlj@gmail.com>
Date: Wed, 16 Oct 2024 20:33:28 +0200
Subject: [PATCH 1/2] feat(use-text-overflow): create a custom hook to handle
 tooltip display

---
 src/components/Column/Column.tsx   | 12 ++++++--
 src/utils/hooks/useTextOverflow.ts | 47 ++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/hooks/useTextOverflow.ts

diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index adcbbe1d1d..ed3fa36f18 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -13,6 +13,7 @@ import {Droppable} from "components/DragAndDrop/Droppable";
 import {useStripeOffset} from "utils/hooks/useStripeOffset";
 import {EmojiSuggestions} from "components/EmojiSuggestions";
 import {useEmojiAutocomplete} from "utils/hooks/useEmojiAutocomplete";
+import {useTextOverflow} from "utils/hooks/useTextOverflow";
 import {Note} from "../Note";
 import {ColumnSettings} from "./ColumnSettings";
 import {createColumn, deleteColumnOptimistically, editColumn, editColumnOptimistically} from "../../store/features";
@@ -31,6 +32,8 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
   const {t} = useTranslation();
   const dispatch = useAppDispatch();
 
+  const {isTextTruncated, textRef} = useTextOverflow<HTMLHeadingElement>(name);
+
   const notes = useAppSelector(
     (state) =>
       state.notes
@@ -126,6 +129,7 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
       <div className={classNames("column__header-text-wrapper", {"column__header-text-wrapper--hidden": !visible})}>
         {!visible && <Hidden className="column__header-hidden-icon" title={t("Column.hiddenColumn")} onClick={toggleVisibilityHandler} />}
         <h2
+          ref={textRef}
           id={`column-${id}`}
           onDoubleClick={() => {
             if (isModerator) {
@@ -136,9 +140,11 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
         >
           {name}
         </h2>
-        <Tooltip className="column__tooltip" anchorSelect={`#column-${id}`}>
-          {name}
-        </Tooltip>
+        {isTextTruncated && (
+          <Tooltip className="column__tooltip" anchorSelect={`#column-${id}`}>
+            {name}
+          </Tooltip>
+        )}
       </div>
     ) : (
       <>
diff --git a/src/utils/hooks/useTextOverflow.ts b/src/utils/hooks/useTextOverflow.ts
new file mode 100644
index 0000000000..5bb6fa1d82
--- /dev/null
+++ b/src/utils/hooks/useTextOverflow.ts
@@ -0,0 +1,47 @@
+import {useState, useEffect, useRef} from "react";
+
+/**
+ * Custom hook to detect whether the text within a referenced container is truncated (ellipsis).
+ * It can be used to determine if a tooltip should be displayed based on text visibility.
+ *
+ * @template T
+ * @param {string} label - The text to monitor for overflow.
+ * @returns {Object} An object containing:
+ * @returns {boolean} isTextTruncated - A boolean indicating if the text is truncated.
+ * @returns {React.RefObject<RefElement>} textRef - A ref to be attached to the text element to measure its dimensions.
+ *
+ * @example
+ * const MyComponent = () => {
+ *   const { isTextTruncated, textRef } = useTextOverflow<string>('Some text that might be truncated');
+ *
+ *   return (
+ *     <div>
+ *       <h2 ref={textRef}>Some text that might be truncated</h2>
+ *       {isTextTruncated && <div className="tooltip">Some text that might be truncated</div>}
+ *     </div>
+ *   );
+ * };
+ */
+export const useTextOverflow = <RefElement extends HTMLElement>(label: string) => {
+  const [isTextTruncated, setIsTextTruncated] = useState<boolean>(false);
+  const textRef = useRef<RefElement | null>(null);
+
+  const detectTextOverflow = () => {
+    if (textRef.current) {
+      const isTextEllipsis = textRef.current.scrollWidth > textRef.current.clientWidth;
+      setIsTextTruncated(isTextEllipsis);
+    }
+  };
+
+  useEffect(() => {
+    detectTextOverflow();
+
+    // Add event listener to detect text overflow changes on window resize
+    window.addEventListener("resize", detectTextOverflow);
+
+    // Cleanup function to remove the event listener when the component unmounts
+    return () => window.removeEventListener("resize", detectTextOverflow);
+  }, [label]);
+
+  return {isTextTruncated, textRef};
+};

From 5e47cc8641c9ff0d6cf1b50142445ad03088dfc9 Mon Sep 17 00:00:00 2001
From: Aejkatappaja <joverjlj@gmail.com>
Date: Mon, 21 Oct 2024 14:12:04 +0200
Subject: [PATCH 2/2] refactor: add return type and correct tsdoc return

---
 src/utils/hooks/useTextOverflow.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/utils/hooks/useTextOverflow.ts b/src/utils/hooks/useTextOverflow.ts
index 5bb6fa1d82..5b95b1c4cb 100644
--- a/src/utils/hooks/useTextOverflow.ts
+++ b/src/utils/hooks/useTextOverflow.ts
@@ -1,14 +1,14 @@
-import {useState, useEffect, useRef} from "react";
+import {useState, useEffect, useRef, RefObject} from "react";
 
 /**
  * Custom hook to detect whether the text within a referenced container is truncated (ellipsis).
  * It can be used to determine if a tooltip should be displayed based on text visibility.
  *
- * @template T
+ * @template RefElement
  * @param {string} label - The text to monitor for overflow.
- * @returns {Object} An object containing:
- * @returns {boolean} isTextTruncated - A boolean indicating if the text is truncated.
- * @returns {React.RefObject<RefElement>} textRef - A ref to be attached to the text element to measure its dimensions.
+ * @returns {{ isTextTruncated: boolean, textRef: React.RefObject<RefElement> }} An object containing:
+ * - `isTextTruncated`: A boolean indicating if the text is truncated.
+ * - `textRef`: A ref to be attached to the text element to measure its dimensions.
  *
  * @example
  * const MyComponent = () => {
@@ -22,7 +22,7 @@ import {useState, useEffect, useRef} from "react";
  *   );
  * };
  */
-export const useTextOverflow = <RefElement extends HTMLElement>(label: string) => {
+export const useTextOverflow = <RefElement extends HTMLElement>(label: string): {isTextTruncated: boolean; textRef: RefObject<RefElement>} => {
   const [isTextTruncated, setIsTextTruncated] = useState<boolean>(false);
   const textRef = useRef<RefElement | null>(null);