@griddo/ax 11.11.7 → 11.11.8-rc.0

package/src/forms/fields.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { FieldContainer, FieldsBehavior } from "@ax/components";
-import { IErrorItem, IPage, ISite } from "@ax/types";
+import { FieldContainer, FieldGroup, FieldsBehavior } from "@ax/components";
+import type { IErrorItem, IPage, ISite } from "@ax/types";
 
 const getInnerFields = (
 	innerFields: any[],
@@ -16,48 +15,54 @@ const getInnerFields = (
 ) => {
 	let fieldArr: any[] = [];
 
-	return (
-		innerFields &&
-		innerFields.map((singleFieldProps: any) => {
-			const { key } = singleFieldProps;
-			const error = errors && errors.find((err: any) => err.editorID === selectedContent.editorID && err.key === key);
+	return innerFields?.map((singleFieldProps: any) => {
+		const { key } = singleFieldProps;
+		const error = errors?.find((err: any) => err.editorID === selectedContent.editorID && err.key === key);
 
-			if (singleFieldProps.type === "ConditionalField" || singleFieldProps.type === "ArrayFieldGroup") {
-				fieldArr = getInnerFields(
-					singleFieldProps.fields,
-					innerActions,
-					selectedContent,
-					isTemplateActivated,
-					theme,
-					moduleCopy,
-					parentDisabled,
-					site,
-					errors,
-					deleteError,
-				);
-			}
+		const isGroup = singleFieldProps.type === "FieldGroup";
+		const isCollapsed = isGroup && singleFieldProps.collapsed;
+		const isConditional = singleFieldProps.type === "ConditionalField";
+		const isArrayGroup = singleFieldProps.type === "ArrayFieldGroup";
 
-			return (
-				<FieldContainer
-					key={key}
-					objKey={key}
-					innerFields={fieldArr}
-					field={singleFieldProps}
-					actions={innerActions}
-					selectedContent={selectedContent}
-					updateValue={innerActions.updateValue}
-					goTo={innerActions.goTo}
-					site={site}
-					{...singleFieldProps}
-					disabled={!isTemplateActivated || singleFieldProps.disabled || parentDisabled}
-					error={error}
-					deleteError={deleteError}
-					theme={theme}
-					moduleCopy={moduleCopy}
-				/>
+		if (isGroup || isConditional || isArrayGroup) {
+			fieldArr = getInnerFields(
+				singleFieldProps.fields,
+				innerActions,
+				selectedContent,
+				isTemplateActivated,
+				theme,
+				moduleCopy,
+				parentDisabled,
+				site,
+				errors,
+				deleteError,
 			);
-		})
-	);
+		}
+
+		return isGroup ? (
+			<FieldGroup key={key} title={singleFieldProps.title} collapsed={isCollapsed} solid={singleFieldProps.solid}>
+				{fieldArr}
+			</FieldGroup>
+		) : (
+			<FieldContainer
+				key={key}
+				objKey={key}
+				innerFields={fieldArr}
+				field={singleFieldProps}
+				actions={innerActions}
+				selectedContent={selectedContent}
+				updateValue={innerActions.updateValue}
+				goTo={innerActions.goTo}
+				site={site}
+				{...singleFieldProps}
+				disabled={!isTemplateActivated || singleFieldProps.disabled || parentDisabled}
+				error={error}
+				deleteError={deleteError}
+				theme={theme}
+				moduleCopy={moduleCopy}
+			/>
+		);
+	});
 };
 
 const getStructuredDataInnerFields = (
@@ -69,38 +74,35 @@ const getStructuredDataInnerFields = (
 ) => {
 	let fieldArr: any[] = [];
 
-	return (
-		innerFields &&
-		innerFields.map((singleFieldProps: any) => {
-			const { key, type, fields } = singleFieldProps;
+	return innerFields?.map((singleFieldProps: any) => {
+		const { key, type, fields } = singleFieldProps;
 
-			const handleChange = (newValue: any) => {
-				updateValue({ [key]: newValue });
-			};
+		const handleChange = (newValue: any) => {
+			updateValue({ [key]: newValue });
+		};
 
-			const value = content && content[key];
+		const value = content?.[key];
 
-			if (type === "ConditionalField" || type === "ArrayFieldGroup") {
-				fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme, errors);
-			}
+		if (type === "ConditionalField" || type === "ArrayFieldGroup") {
+			fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme, errors);
+		}
 
-			const error = errors.find((err: any) => err.key === key);
+		const error = errors.find((err: any) => err.key === key);
 
-			const fieldProps = {
-				value,
-				objKey: key,
-				fieldType: type,
-				innerFields: fieldArr,
-				field: singleFieldProps,
-				onChange: handleChange,
-				...singleFieldProps,
-				theme,
-				error,
-			};
+		const fieldProps = {
+			value,
+			objKey: key,
+			fieldType: type,
+			innerFields: fieldArr,
+			field: singleFieldProps,
+			onChange: handleChange,
+			...singleFieldProps,
+			theme,
+			error,
+		};
 
-			return <FieldsBehavior key={key} {...fieldProps} />;
-		})
-	);
+		return <FieldsBehavior key={key} {...fieldProps} />;
+	});
 };
 
 export { getInnerFields, getStructuredDataInnerFields };

package/src/hooks/forms.tsx

@@ -26,6 +26,27 @@ const useDebounce = (value: any) => {
 	return debouncedValue;
 };
 
+const useDebouncedCallback = <T extends unknown[]>(callback: (...args: T) => void, delay: number) => {
+	const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+	const callbackRef = useRef(callback);
+
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+
+	return useCallback(
+		(...args: T) => {
+			if (delay === 0) {
+				callbackRef.current(...args);
+				return;
+			}
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = setTimeout(() => callbackRef.current(...args), delay);
+		},
+		[delay],
+	);
+};
+
 const useEqualStructured = (component: any) => {
 	return memo(component, (prevProps: any, newProps: any) => {
 		const { fieldKey } = prevProps;
@@ -234,4 +255,4 @@ const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent, d
 	return { isDirty, setIsDirty };
 };
 
-export { useDebounce, useEqualStructured, useIsDirty, usePrevious, useShouldBeSaved };
+export { useDebounce, useDebouncedCallback, useEqualStructured, usePrevious, useIsDirty, useShouldBeSaved };

package/src/hooks/index.tsx

@@ -1,12 +1,19 @@
 import { type IBulkSelectedItems, useBulkSelection } from "./bulk";
 import { useAdaptiveText, useCategoryColors, useEmptyState } from "./content";
-import { useDebounce, useEqualStructured, useIsDirty, usePrevious, useShouldBeSaved } from "./forms";
+import {
+	useDebounce,
+	useDebouncedCallback,
+	useEqualStructured,
+	useIsDirty,
+	usePrevious,
+	useShouldBeSaved,
+} from "./forms";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { useURLSearchParam } from "./location";
-import { useHandleClickOutside, useModal, useToast } from "./modals";
+import { useHandleClickOutside, useModal, useModals, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
-import { useGlobalPermission, usePermission } from "./users";
+import { useGlobalPermission, usePermission, usePermissions } from "./users";
 import { useWindowSize } from "./window";
 
 export {
@@ -14,16 +21,19 @@ export {
 	useBulkSelection,
 	useCategoryColors,
 	useDebounce,
+	useDebouncedCallback,
 	useEmptyState,
 	useEqualStructured,
 	useGlobalPermission,
 	useHandleClickOutside,
 	useIsDirty,
 	useModal,
+	useModals,
 	useNetworkStatus,
 	useOnMessageReceivedFromIframe,
 	useOnMessageReceivedFromOutside,
 	usePermission,
+	usePermissions,
 	usePrevious,
 	useResizable,
 	useShouldBeSaved,

package/src/hooks/modals.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 
 const useModal = (initialState?: boolean, bodyBlock = true) => {
 	const [isOpen, setIsOpen] = useState(initialState || false);
@@ -6,11 +6,26 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
 		setIsOpen(!isOpen);
 	};
 
-	if (isOpen && bodyBlock) {
-		document.body.classList.add("modal-open");
-	} else {
-		document.body.classList.remove("modal-open");
-	}
+	useEffect(() => {
+		if (isOpen && bodyBlock) {
+			if (!document.body.classList.contains("modal-open")) {
+				document.body.classList.add("modal-open");
+			}
+			return () => {
+				// Solo eliminar si no hay otros modales abiertos
+				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+				if (modals.length <= 1) {
+					document.body.classList.remove("modal-open");
+				}
+			};
+		} else if (!bodyBlock || !isOpen) {
+			// Solo eliminar si no hay modales abiertos
+			const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+			if (modals.length === 0) {
+				document.body.classList.remove("modal-open");
+			}
+		}
+	}, [isOpen, bodyBlock]);
 
 	return {
 		isOpen,
@@ -18,6 +33,66 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
 	};
 };
 
+const useModals = <T extends string>(modalKeys: readonly T[], bodyBlock = true) => {
+	const [openModals, setOpenModals] = useState<Record<T, boolean>>(() =>
+		modalKeys.reduce(
+			(acc, key) => {
+				acc[key] = false;
+				return acc;
+			},
+			{} as Record<T, boolean>,
+		),
+	);
+
+	const toggleModal = useCallback((modalKey: T) => {
+		setOpenModals((prev) => ({ ...prev, [modalKey]: !prev[modalKey] }));
+	}, []);
+
+	const openModal = useCallback((modalKey: T) => {
+		setOpenModals((prev) => ({ ...prev, [modalKey]: true }));
+	}, []);
+
+	const closeModal = useCallback((modalKey: T) => {
+		setOpenModals((prev) => ({ ...prev, [modalKey]: false }));
+	}, []);
+
+	const isOpen = useCallback(
+		(modalKey: T) => {
+			return openModals[modalKey] || false;
+		},
+		[openModals],
+	);
+
+	useEffect(() => {
+		const hasOpenModals = Object.values(openModals).some(Boolean);
+
+		if (hasOpenModals && bodyBlock) {
+			if (!document.body.classList.contains("modal-open")) {
+				document.body.classList.add("modal-open");
+			}
+			return () => {
+				// Solo eliminar si no hay otros modales abiertos
+				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+				if (modals.length <= 1) {
+					document.body.classList.remove("modal-open");
+				}
+			};
+		}
+		// Solo eliminar si no hay modales abiertos
+		const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+		if (modals.length === 0) {
+			document.body.classList.remove("modal-open");
+		}
+	}, [openModals, bodyBlock]);
+
+	return {
+		toggleModal,
+		openModal,
+		closeModal,
+		isOpen,
+	};
+};
+
 const useHandleClickOutside = (isOpen: boolean, handleClickOutside: (e: MouseEvent) => void) => {
 	useEffect(() => {
 		if (isOpen) {
@@ -35,19 +110,32 @@ const useHandleClickOutside = (isOpen: boolean, handleClickOutside: (e: MouseEve
 const useToast = () => {
 	const [isVisible, setIsVisible] = useState(false);
 	const [state, setState] = useState<any>(null);
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-	let temp: any;
-	const setTemp = () => (temp = setTimeout(() => setIsVisible(false), 6000));
-	const stopTemp = () => clearTimeout(temp);
+	const toggleToast = useCallback((newState?: any) => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+		}
 
-	const toggleToast = (state?: unknown) => {
+		if (newState) {
+			setState(newState);
+		}
 		setIsVisible(true);
-		setTemp();
-		stopTemp();
-		state && setState(state);
-	};
+
+		timeoutRef.current = setTimeout(() => {
+			setIsVisible(false);
+		}, 6000);
+	}, []);
+
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+		};
+	}, []);
 
 	return { isVisible, setIsVisible, toggleToast, state };
 };
 
-export { useModal, useHandleClickOutside, useToast };
+export { useModal, useModals, useHandleClickOutside, useToast };

package/src/hooks/users.tsx

@@ -1,11 +1,11 @@
+import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { IRootState } from "@ax/types";
+
+import type { IRootState } from "@ax/types";
 
 const usePermission = (permission: string | string[] | undefined): boolean => {
 	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
-	const isSuperAdmin = useSelector(
-		(state: IRootState) => state.users.currentUser && state.users.currentUser.isSuperAdmin,
-	);
+	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
@@ -19,11 +19,28 @@ const usePermission = (permission: string | string[] | undefined): boolean => {
 	return isAllowedTo(arrayPermission);
 };
 
+const usePermissions = <T extends Record<string, string | string[]>>(permissions: T): Record<keyof T, boolean> => {
+	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
+	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+
+	return useMemo(() => {
+		const isAllowedTo = (permission: string | string[]) => {
+			if (isSuperAdmin) return true;
+			const arrayPermission = Array.isArray(permission) ? permission : [permission];
+			return userPermissions && arrayPermission.some((perm: string) => userPermissions.includes(perm));
+		};
+
+		const result: Record<string, boolean> = {};
+		for (const key of Object.keys(permissions)) {
+			result[key] = isAllowedTo(permissions[key]);
+		}
+		return result as Record<keyof T, boolean>;
+	}, [permissions, userPermissions, isSuperAdmin]);
+};
+
 const useGlobalPermission = (permission: string | string[] | undefined): boolean => {
 	const userPermissions = useSelector((state: IRootState) => state.users.globalPermissions);
-	const isSuperAdmin = useSelector(
-		(state: IRootState) => state.users.currentUser && state.users.currentUser.isSuperAdmin,
-	);
+	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
@@ -37,4 +54,4 @@ const useGlobalPermission = (permission: string | string[] | undefined): boolean
 	return isAllowedTo(arrayPermission);
 };
 
-export { usePermission, useGlobalPermission };
+export { usePermission, usePermissions, useGlobalPermission };

package/src/modules/Forms/atoms.tsx

@@ -1,6 +1,6 @@
-import React, { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 
-import { IModal } from "@ax/types";
+import type { IModal } from "@ax/types";
 import { Modal, FieldsBehavior, AsyncSelect } from "@ax/components";
 
 import * as S from "./style";

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

@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import * as S from "./style";
+
+const headColors: Record<string, string> = {
+	h1: "#FFF06D",
+	h2: "#FFB8F8",
+	h3: "#73F8C8",
+	h4: "#9BEDFF",
+	h5: "#C6C1FF",
+	h6: "#FFCE95",
+};
+
+const isEffectivelyVisible = (el: HTMLElement): boolean => {
+	let node: HTMLElement | null = el;
+	while (node && node !== document.body) {
+		const style = window.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return false;
+		if (parseFloat(style.opacity) === 0) return false;
+		node = node.parentElement;
+	}
+	return true;
+};
+
+const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
+	const [boxes, setBoxes] = useState<HeadingBox[]>([]);
+	const rafRef = useRef<number>(0);
+
+	useEffect(() => {
+		const update = () => {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = requestAnimationFrame(() => {
+				const selector = headingFilter || "h1, h2, h3, h4, h5, h6";
+				const headings = Array.from(document.querySelectorAll<HTMLElement>(selector));
+				const scrollX = window.scrollX;
+				const scrollY = window.scrollY;
+				const boxes: HeadingBox[] = [];
+				for (let i = 0; i < headings.length; i++) {
+					const el = headings[i];
+					const rect = el.getBoundingClientRect();
+					if (rect.width === 0 && rect.height === 0) continue;
+					if (!isEffectivelyVisible(el)) continue;
+					boxes.push({
+						id: el.dataset.griddoid || `heading-${i}`,
+						tag: el.tagName.toLowerCase(),
+						rect,
+						scrollX,
+						scrollY,
+					});
+				}
+				setBoxes(boxes);
+			});
+		};
+
+		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 });
+
+		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();
+		};
+	}, [headingFilter]);
+
+	return createPortal(
+		<div data-testid="headings-overlay">
+			{boxes.map(({ id, tag, rect, scrollX, scrollY }) => {
+				const color = headColors[tag];
+				if (!color) return null;
+				return (
+					<S.Box
+						key={id}
+						$color={color}
+						style={{
+							top: rect.top + scrollY,
+							left: rect.left + scrollX,
+							width: rect.width,
+							height: rect.height,
+						}}
+					>
+						<S.Label $color={color}>{tag.toUpperCase()}</S.Label>
+					</S.Box>
+				);
+			})}
+		</div>,
+		document.body,
+	);
+};
+
+interface HeadingBox {
+	id: string;
+	tag: string;
+	rect: DOMRect;
+	scrollX: number;
+	scrollY: number;
+}
+
+export interface IHeadingsOverlayProps {
+	headingFilter: string | null;
+}
+
+export default HeadingsOverlay;

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+const Box = styled.div<{ $color: string }>`
+	position: absolute;
+	outline: 2px solid ${(p) => p.$color};
+	z-index: 1001;
+	pointer-events: none;
+`;
+
+const Label = styled.span<{ $color: string }>`
+	position: absolute;
+	background-color: ${(p) => p.$color};
+	color: ${(p) => p.theme.colors.textHighEmphasis};
+	${(p) => p.theme.textStyle.uiS};
+	padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
+	transform: rotate(-90deg);
+	top: 1px;
+	left: -23px;
+	font-family: Source Sans Pro;
+	font-style: normal;
+	text-decoration: none;
+`;
+
+export { Box, Label };