From edda9566b19597a06986ccff910cea4f52bb78a2 Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Wed, 11 Oct 2023 16:29:26 +0200
Subject: [PATCH] [ENG-1236] fix mac tooltips on truncated folder names is
 inconsistent (#1497)

* fix tooltip

* fix isTruncated
---
 .../Explorer/FilePath/RenameTextBox.tsx       |  2 +-
 .../Explorer/View/ListView/index.tsx          |  2 +-
 interface/hooks/useIsTextTruncated.ts         | 26 +++++++---
 packages/ui/src/Tooltip.tsx                   | 49 +++++++++----------
 4 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx b/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx
index 4b5e2d61c..f716029e5 100644
--- a/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx
+++ b/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx
@@ -26,7 +26,7 @@ export const RenameTextBox = forwardRef<HTMLDivElement, Props>(
 		useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(_ref, () => ref.current);
 
 		//this is to determine if file name is truncated
-		const isTruncated = useIsTextTruncated(ref, name);
+		const isTruncated = useIsTextTruncated(ref);
 
 		// Highlight file name up to extension or
 		// fully if it's a directory, hidden file or has no extension
diff --git a/interface/app/$libraryId/Explorer/View/ListView/index.tsx b/interface/app/$libraryId/Explorer/View/ListView/index.tsx
index 1e65c195c..ba5379e6d 100644
--- a/interface/app/$libraryId/Explorer/View/ListView/index.tsx
+++ b/interface/app/$libraryId/Explorer/View/ListView/index.tsx
@@ -71,7 +71,7 @@ const ListViewItem = memo((props: ListViewItemProps) => {
 const HeaderColumnName = ({ name }: { name: string }) => {
 	const textRef = useRef<HTMLParagraphElement>(null);
 
-	const isTruncated = useIsTextTruncated(textRef, name);
+	const isTruncated = useIsTextTruncated(textRef);
 
 	return (
 		<div ref={textRef} className="truncate">
diff --git a/interface/hooks/useIsTextTruncated.ts b/interface/hooks/useIsTextTruncated.ts
index efe9d0855..de7665fc1 100644
--- a/interface/hooks/useIsTextTruncated.ts
+++ b/interface/hooks/useIsTextTruncated.ts
@@ -1,11 +1,23 @@
-import { RefObject, useMemo } from 'react';
+import { RefObject, useState } from 'react';
+import { useMutationObserver } from 'rooks';
 import useResizeObserver from 'use-resize-observer';
 
-export const useIsTextTruncated = (element: RefObject<HTMLElement>, text: string | null) => {
-	const { width } = useResizeObserver({ ref: element });
+export const useIsTextTruncated = (element: RefObject<HTMLElement>) => {
+	const [truncated, setTruncated] = useState(false);
 
-	return useMemo(() => {
-		if (!element.current) return false;
-		return element.current.scrollWidth > element.current.clientWidth;
-	}, [element, width, text]);
+	const handleIsTruncated = () => {
+		if (!element.current) return;
+		setTruncated(element.current.scrollWidth > element.current.clientWidth);
+	};
+
+	useMutationObserver(element, handleIsTruncated, {
+		attributes: true
+	});
+
+	useResizeObserver({
+		ref: element,
+		onResize: handleIsTruncated
+	});
+
+	return truncated;
 };
diff --git a/packages/ui/src/Tooltip.tsx b/packages/ui/src/Tooltip.tsx
index c2329df7c..79a8b0da5 100644
--- a/packages/ui/src/Tooltip.tsx
+++ b/packages/ui/src/Tooltip.tsx
@@ -40,31 +40,30 @@ export const Tooltip = ({ position = 'bottom', ...props }: TooltipProps) => {
 				)}
 			</TooltipPrimitive.Trigger>
 			<TooltipPrimitive.Portal>
-				{props.label && (
-					<TooltipPrimitive.Content
-						side={position}
-						className={clsx(
-							'TooltipContent z-50 m-2 mt-1 flex max-w-[200px] select-text items-center gap-2 break-words rounded border border-app-line bg-app-box px-2 py-1 text-center text-xs text-ink',
-							props.tooltipClassName
-						)}
-					>
-						<p className={props.labelClassName}>{props.label}</p>
-						{props.keybinds && (
-							<div className="flex items-center justify-center gap-1">
-								{separateKeybinds(props.keybinds)?.map((k, _) => (
-									<kbd
-										key={k.toString()}
-										className={
-											'h-4.5 flex items-center justify-center rounded-md border border-app-selected bg-app-selected/50 px-1.5 py-0.5 text-[10px] text-ink'
-										}
-									>
-										<p>{k}</p>
-									</kbd>
-								))}
-							</div>
-						)}
-					</TooltipPrimitive.Content>
-				)}
+				<TooltipPrimitive.Content
+					side={position}
+					className={clsx(
+						'TooltipContent z-50 m-2 mt-1 flex max-w-[200px] select-text items-center gap-2 break-words rounded border border-app-line bg-app-box px-2 py-1 text-center text-xs text-ink',
+						props.tooltipClassName,
+						!props.label && 'hidden'
+					)}
+				>
+					<p className={props.labelClassName}>{props.label}</p>
+					{props.keybinds && (
+						<div className="flex items-center justify-center gap-1">
+							{separateKeybinds(props.keybinds)?.map((k, _) => (
+								<kbd
+									key={k.toString()}
+									className={
+										'h-4.5 flex items-center justify-center rounded-md border border-app-selected bg-app-selected/50 px-1.5 py-0.5 text-[10px] text-ink'
+									}
+								>
+									<p>{k}</p>
+								</kbd>
+							))}
+						</div>
+					)}
+				</TooltipPrimitive.Content>
 			</TooltipPrimitive.Portal>
 		</TooltipPrimitive.Root>
 	);