@griddo/ax 11.10.14 → 11.10.16-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.14",
+	"version": "11.10.16-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ae45e364544d784f76299b04463a19c1ac701ff8"
+	"gitHead": "f43d569318efc17ca8e2f7a8f44eaa188854d549"
 }

package/src/components/Gallery/index.tsx

@@ -60,7 +60,7 @@ const Gallery = (props: IProps): JSX.Element => {
 	const isLocalTab = selectedTab === "local";
 	const galleryScope = isLocalTab && site ? site.id : "global";
 	const hasFolders = !!folders?.length;
-	const isRoot = !breadcrumb.length;
+	const isRoot = !breadcrumb?.length;
 	const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
 
 	const galleryRef = useRef<HTMLDivElement>(null);

package/src/components/Tooltip/index.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+
 import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
-const Tooltip = (props: ITooltipProps): JSX.Element => {
+const Tooltip = (props: ITooltipProps) => {
 	const { content, children, hideOnClick = true, bottom, left, expanded, top } = props;
 
 	const initialState: IState = {
@@ -15,26 +17,31 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 	const [state, setState] = useState(initialState);
 	const { active, childrenWidth, clicked, fixOutOfBounds } = state;
 
-	const changeState = (value: any) => {
+	const changeState = useCallback((value: Partial<IState>) => {
 		setState((state) => ({ ...state, ...value }));
-	};
+	}, []);
 
 	const childrenRef = useRef<HTMLDivElement>(null);
 	const tipRef = useRef<HTMLDivElement>(null);
-
-	let timeout: any;
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
 	const showTip = () => {
 		if (!clicked) {
-			timeout = setTimeout(() => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+			timeoutRef.current = setTimeout(() => {
 				changeState({ active: true });
 			}, 1000);
 		}
 	};
 
 	const hideTip = () => {
-		clearInterval(timeout);
-		changeState({ active: false });
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		changeState({ active: false, fixOutOfBounds: 0 });
 	};
 
 	const handleClick = () => {
@@ -44,8 +51,8 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 		}
 	};
 
-	const handleClickOutside = (e: any) => {
-		if (childrenRef.current && childrenRef.current.contains(e.target)) {
+	const handleClickOutside = (e: MouseEvent | TouchEvent) => {
+		if (childrenRef.current?.contains(e.target as Node)) {
 			return;
 		}
 		changeState({ clicked: false });
@@ -53,16 +60,22 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 
 	useHandleClickOutside(clicked, handleClickOutside);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		if (childrenRef.current && childrenRef.current.children[0]) {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+		};
+	}, []);
+
+	useEffect(() => {
+		if (childrenRef.current?.children[0]) {
 			const childrenWidth = childrenRef.current.children[0].clientWidth;
 			changeState({ childrenWidth });
 		}
-	}, [childrenRef]);
+	}, [changeState]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (active && tipRef.current) {
 			const clientRect = tipRef.current.getBoundingClientRect();
 
@@ -72,11 +85,13 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 				changeState({ fixOutOfBounds: left });
 			} else if (right > windowSize) {
 				changeState({ fixOutOfBounds: right - windowSize });
+			} else {
+				changeState({ fixOutOfBounds: 0 });
 			}
 		}
-	}, [tipRef, active]);
+	}, [active, changeState]);
 
-	if (!content) return children;
+	if (!content) return <>{children}</>;
 
 	return (
 		<S.Tooltip

package/src/modules/MediaGallery/index.tsx

@@ -126,7 +126,7 @@ const MediaGallery = (props: IProps) => {
 	const isTabGlobal = selectedTab === "global";
 	const siteID: number | "global" = !isSiteView || isTabGlobal ? "global" : currentSiteInfo.id;
 	const hasFolders = !!folders?.length;
-	const isRoot = !breadcrumb.length;
+	const isRoot = !breadcrumb?.length;
 	const isGrid = displayMode === "grid";
 	const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];