@griddo/ax 11.12.1-rc.6 → 11.12.1-rc.8

package/package.json

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

package/src/__tests__/components/Fields/IntegrationsField/IntegrationsField.test.tsx

@@ -312,7 +312,7 @@ describe("Events", () => {
 		fireEvent.click(actionMenu[1]);
 
 		const buttonsDefault = screen.getAllByTestId("button-default");
-		fireEvent.click(buttonsDefault[4]);
+		fireEvent.click(buttonsDefault[buttonsDefault.length - 1]);
 
 		const integrationsWithDeletion = initialStore.integrations.integrations.slice(0, 3);
 

package/src/__tests__/components/Fields/UrlField/UrlField.test.tsx

@@ -290,6 +290,12 @@ describe("UrlField component rendering", () => {
 			render(Component, { store });
 		});
 
+		// Open FloatingPanel first
+		const pageField = screen.getByTestId("page-field");
+		await act(async () => {
+			fireEvent.click(pageField);
+		});
+
 		const selectComponents = screen.getAllByTestId("select-component");
 
 		await act(async () => {
@@ -384,6 +390,12 @@ describe("onClick events", () => {
 			render(Component, { store });
 		});
 
+		// Open FloatingPanel first
+		const pageField = screen.getByTestId("page-field");
+		await act(async () => {
+			fireEvent.click(pageField);
+		});
+
 		await act(async () => {
 			const selectionListItem = screen.getAllByTestId("selection-list-item");
 			selectionListItem[0].click();
@@ -430,10 +442,16 @@ describe("onClick events", () => {
 			render(Component, { store });
 		});
 
-		const selectionListItem = screen.getAllByTestId("selection-list-item");
 		const checkFieldInputs = screen.getAllByTestId("check-field-input");
 		const pageField = screen.getByTestId("page-field");
 
+		// Open FloatingPanel first
+		await act(async () => {
+			fireEvent.click(pageField);
+		});
+
+		const selectionListItem = screen.getAllByTestId("selection-list-item");
+
 		await act(async () => {
 			selectionListItem[0].click();
 			fireEvent.click(checkFieldInputs[0]);

package/src/__tests__/hooks/modals.test.tsx

@@ -0,0 +1,303 @@
+import { act, renderHook } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { useModal, useModals } from "@ax/hooks";
+
+describe("useModal hook", () => {
+	beforeEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	afterEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	it("should initialize with false when no initialState provided", () => {
+		const { result } = renderHook(() => useModal());
+		expect(result.current.isOpen).toBe(false);
+	});
+
+	it("should initialize with provided initialState", () => {
+		const { result } = renderHook(() => useModal(true));
+		expect(result.current.isOpen).toBe(true);
+	});
+
+	it("should toggle modal state when toggleModal is called", () => {
+		const { result } = renderHook(() => useModal(false));
+		expect(result.current.isOpen).toBe(false);
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(result.current.isOpen).toBe(true);
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(result.current.isOpen).toBe(false);
+	});
+
+	it("should add modal-open class to body when modal opens and bodyBlock is true", () => {
+		const { result } = renderHook(() => useModal(false, true));
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+	});
+
+	it("should not add modal-open class to body when bodyBlock is false", () => {
+		const { result } = renderHook(() => useModal(false, false));
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+
+	it("should check if modal-open class already exists before adding", () => {
+		document.body.classList.add("modal-open");
+
+		const { result } = renderHook(() => useModal(false, true));
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		// Class should still be present
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		// Count of modal-open should be 1
+		const classList = [...document.body.classList];
+		const count = classList.filter((c) => c === "modal-open").length;
+		expect(count).toBe(1);
+	});
+});
+
+describe("useModals hook", () => {
+	beforeEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	afterEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	it("should initialize all modals as closed", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2", "modal3"]));
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+		expect(result.current.isOpen("modal2")).toBe(false);
+		expect(result.current.isOpen("modal3")).toBe(false);
+	});
+
+	it("should open a modal with openModal", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(false);
+	});
+
+	it("should close a modal with closeModal", () => {
+		const { result } = renderHook(() => useModals(["modal1"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+	});
+
+	it("should toggle a modal with toggleModal", () => {
+		const { result } = renderHook(() => useModals(["modal1"]));
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+
+		act(() => {
+			result.current.toggleModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+
+		act(() => {
+			result.current.toggleModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+	});
+
+	it("should handle multiple modals independently", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2", "modal3"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(false);
+		expect(result.current.isOpen("modal3")).toBe(false);
+
+		act(() => {
+			result.current.openModal("modal2");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(true);
+		expect(result.current.isOpen("modal3")).toBe(false);
+	});
+
+	it("should add modal-open class when a modal is opened", () => {
+		const { result } = renderHook(() => useModals(["modal1"], true));
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+	});
+
+	it("should remove modal-open class when all modals are closed", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2"], true));
+
+		act(() => {
+			result.current.openModal("modal1");
+			result.current.openModal("modal2");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal1");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal2");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+
+	it("should close multiple modals individually", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2", "modal3"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+			result.current.openModal("modal2");
+			result.current.openModal("modal3");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(true);
+		expect(result.current.isOpen("modal3")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal1");
+			result.current.closeModal("modal2");
+			result.current.closeModal("modal3");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+		expect(result.current.isOpen("modal2")).toBe(false);
+		expect(result.current.isOpen("modal3")).toBe(false);
+	});
+
+	it("should not add modal-open class if bodyBlock is false", () => {
+		const { result } = renderHook(() => useModals(["modal1"], false));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+
+	it("should not duplicate modal-open class when multiple modals are open", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2"], true));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		const classList1 = [...document.body.classList];
+		const count1 = classList1.filter((c) => c === "modal-open").length;
+
+		act(() => {
+			result.current.openModal("modal2");
+		});
+
+		const classList2 = [...document.body.classList];
+		const count2 = classList2.filter((c) => c === "modal-open").length;
+
+		expect(count1).toBe(1);
+		expect(count2).toBe(1);
+	});
+
+	it("should handle isOpen callback correctly", () => {
+		const { result } = renderHook(() => useModals(["modal1"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		const isOpenResult = result.current.isOpen("modal1");
+		expect(isOpenResult).toBe(true);
+	});
+});
+
+describe("useModal and useModals working together", () => {
+	beforeEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	afterEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	it("should verify both hooks add modal-open class independently", () => {
+		const { result: modalResult } = renderHook(() => useModal(false, true));
+		const { result: modalsResult } = renderHook(() => useModals(["modal1"], true));
+
+		// useModal should add class
+		act(() => {
+			modalResult.current.toggleModal();
+		});
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		// useModals should keep class
+		act(() => {
+			modalsResult.current.openModal("modal1");
+		});
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		// Closing useModal should keep class (useModals still open)
+		act(() => {
+			modalResult.current.toggleModal();
+		});
+		// Note: This depends on DOM check in useModal
+
+		// Closing useModals should remove class
+		act(() => {
+			modalsResult.current.closeModal("modal1");
+		});
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+});

package/src/components/FloatingPanel/index.tsx

@@ -1,8 +1,8 @@
 import { memo, useRef } from "react";
 import { createPortal } from "react-dom";
 
-import { useHandleClickOutside } from "@ax/hooks";
 import { IconAction } from "@ax/components";
+import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
@@ -40,9 +40,10 @@ const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
 		}
 	};
 
-	return isOpen ? createPortal(
+	return createPortal(
 		<S.Wrapper
 			data-testid="floating-panel"
+			data-is-open={isOpen}
 			ref={node}
 			isOpen={isOpen}
 			isOpenedSecond={isOpenedSecond}
@@ -60,7 +61,7 @@ const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
 			<S.Content>{children}</S.Content>
 		</S.Wrapper>,
 		document.body,
-	) : null;
+	);
 };
 
 export interface IFloatingPanelProps {

package/src/components/HeadingsPreviewModal/index.tsx

@@ -35,6 +35,7 @@ const HeadingsPreviewModal = (props: IHeadingsPreviewProps) => {
 			setHeadings(headings);
 		} else {
 			setHeadingsFilter("all");
+			window.scrollTo(0, 0);
 		}
 	}, [isOpen, getSEOHeadings, setHeadingsFilter]);
 

package/src/components/Modal/index.tsx

@@ -81,6 +81,7 @@ const Modal = (props: IModalProps): JSX.Element | null => {
 					<S.ModalOverlay isChild={isChild} />
 					<S.ModalWrapper
 						data-testid="modal-wrapper"
+						data-is-open={isOpen}
 						isChild={isChild}
 						role="dialog"
 						aria-modal="true"

package/src/hooks/modals.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const useModal = (initialState?: boolean, bodyBlock = true) => {
 	const [isOpen, setIsOpen] = useState(initialState || false);
@@ -12,10 +12,9 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
 				document.body.classList.add("modal-open");
 			}
 		} else if (!isOpen && bodyBlock) {
-			// Solo remover si no hay otros modales abiertos
-			const hasFloatingPanels = document.querySelectorAll('[data-testid="floating-panel"]').length > 0;
-			const hasModals = document.querySelectorAll('[data-testid="modal-wrapper"]').length > 0;
-			if (!hasFloatingPanels && !hasModals) {
+			// Solo remover si no hay otros modales o FloatingPanels abiertos
+			const hasOpenModals = document.querySelectorAll('[data-is-open="true"]').length > 0;
+			if (!hasOpenModals) {
 				document.body.classList.remove("modal-open");
 			}
 		}
@@ -65,7 +64,11 @@ const useModals = <T extends string>(modalKeys: readonly T[], bodyBlock = true)
 				document.body.classList.add("modal-open");
 			}
 		} else if (!hasOpenModals) {
-			document.body.classList.remove("modal-open");
+			// Solo remover si no hay otros modales o FloatingPanels abiertos
+			const hasAnyOpenModals = document.querySelectorAll('[data-is-open="true"]').length > 0;
+			if (!hasAnyOpenModals) {
+				document.body.classList.remove("modal-open");
+			}
 		}
 	}, [openModals, bodyBlock]);
 

package/src/modules/FramePreview/HeadingsOverlay/index.tsx

@@ -55,18 +55,18 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 
 		update();
 
+		document.fonts.ready.then(update);
+
 		window.addEventListener("resize", update);
-		window.addEventListener("scroll", update, true);
 		document.addEventListener("animationend", update, true);
 		document.addEventListener("transitionend", update, true);
 
 		const observer = new MutationObserver(update);
-		observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+		observer.observe(document.body, { childList: true, subtree: true });
 
 		return () => {
 			cancelAnimationFrame(rafRef.current);
 			window.removeEventListener("resize", update);
-			window.removeEventListener("scroll", update, true);
 			document.removeEventListener("animationend", update, true);
 			document.removeEventListener("transitionend", update, true);
 			observer.disconnect();

package/src/modules/FramePreview/utils.tsx

@@ -6,7 +6,10 @@ const addIdsToHeadings = (container: HTMLElement, headingFilter: string | null):
 		const text = heading.textContent?.trim();
 		if (!text) return;
 
-		heading.dataset.griddoid = `heading-${index + 1}`;
+		const id = `heading-${index + 1}`;
+		if (heading.dataset.griddoid !== id) {
+			heading.dataset.griddoid = id;
+		}
 	});
 };