@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/helpers/index.tsx

@@ -28,7 +28,7 @@ import { getFieldByPath } from "./fields";
 import { getFileIcon, getNewBreadcrumb, updatePropertyById } from "./files";
 import { protectFormKeys } from "./forms";
 import { compressImage, imageResizeCropAndCompress } from "./imageResize";
-import { formatBytes, getImageFromHtml, getImageFromIFrame, imageToBase64 } from "./images";
+import { formatBytes, getCroppedImg, getImageFromHtml, getImageFromIFrame, imageToBase64 } from "./images";
 import {
 	areEquals,
 	deepClone,
@@ -136,6 +136,7 @@ export {
 	formatBytes,
 	formatDate,
 	getActivatedDataPacksIds,
+	getCroppedImg,
 	getCurrentPageStructuredData,
 	getDataPackSchema,
 	getDateRange,

package/src/hooks/forms.tsx

@@ -2,7 +2,6 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 
 import { cleanPageValues } from "@ax/forms";
 import { deepClone, isEmptyObj } from "@ax/helpers";
-import type { FormContent, IUser } from "@ax/types";
 
 import isEqual from "lodash.isequal";
 
@@ -197,60 +196,58 @@ const useIsDirty = (
 	return { isDirty, setIsDirty, resetDirty };
 };
 
-const cleanModified = (updatedValues: any, originalValues: any) => {
-	delete updatedValues.modified;
+const useShouldBeSaved = (form: Record<string, any> | null | undefined, debug = DEBUG_DIRTY) => {
+	const [isDirty, setIsDirtyState] = useState(false);
+	const originalRef = useRef<Record<string, any>>();
 
-	delete originalValues.modified;
-
-	return {
-		cleanUpdatedValues: updatedValues,
-		cleanOriginalValues: originalValues,
-	};
-};
-
-const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent, debug = DEBUG_DIRTY) => {
-	const [isDirty, setIsDirty] = useState(false);
-	const formRef = useRef();
-
-	const stringValue = form && JSON.stringify(form);
+	// Intercept setIsDirty to update baseline when saved
+	const setIsDirty = useCallback(
+		(value: boolean) => {
+			setIsDirtyState(value);
+			if (value === false && form) {
+				originalRef.current = deepClone(form);
+			}
+		},
+		[form],
+	);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix this
 	useEffect(() => {
-		if (!formRef.current) {
-			formRef.current = stringValue && JSON.parse(stringValue);
+		if (!form) {
+			if (debug) console.log("[useShouldBeSaved] form=null → isDirty=false");
+			setIsDirtyState(false);
+			return;
 		}
-		if (form !== null) {
-			const { cleanUpdatedValues, cleanOriginalValues } = cleanModified(formRef.current, form);
-			const isFormDirty =
-				cleanOriginalValues.id && !cleanUpdatedValues.id ? false : !isEqual(cleanUpdatedValues, cleanOriginalValues);
 
-			if (debug) {
-				console.groupCollapsed(
-					`[useShouldBeSaved] isDirty: %c${isFormDirty}`,
-					isFormDirty ? "color: red; font-weight: bold" : "color: green",
-				);
-				console.log("Stored ref (cleaned):", cleanUpdatedValues);
-				console.log("Current    (cleaned):", cleanOriginalValues);
-				if (cleanOriginalValues.id && !cleanUpdatedValues.id) {
-					console.log("Suppressed: original has id, ref does not.");
-				}
-				const diffs = getChangedKeys(
-					cleanUpdatedValues as Record<string, unknown>,
-					cleanOriginalValues as Record<string, unknown>,
-				);
-				if (diffs.length > 0) {
-					console.table(diffs);
-				}
-				console.groupEnd();
-			}
+		// Initialize baseline on first render
+		if (!originalRef.current) {
+			originalRef.current = deepClone(form);
+			return;
+		}
 
-			setIsDirty(isFormDirty);
-			formRef.current = stringValue && JSON.parse(stringValue);
-		} else {
-			if (debug) console.log("[useShouldBeSaved] form=null → isDirty=false");
-			setIsDirty(false);
+		// Compare against the baseline (original)
+		const original = { ...originalRef.current } as Record<string, unknown>;
+		const current = { ...form } as Record<string, unknown>;
+		delete original.modified;
+		delete current.modified;
+
+		const hasChanges = !isEqual(original, current);
+
+		if (debug) {
+			console.groupCollapsed(
+				`[useShouldBeSaved] isDirty: %c${hasChanges}`,
+				hasChanges ? "color: red; font-weight: bold" : "color: green",
+			);
+			console.log("Original (cleaned):", original);
+			console.log("Current  (cleaned):", current);
+			const diffs = getChangedKeys(original as Record<string, unknown>, current as Record<string, unknown>);
+			if (diffs.length > 0) {
+				console.table(diffs);
+			}
+			console.groupEnd();
 		}
-	}, [form]);
+
+		setIsDirtyState(hasChanges);
+	}, [form, debug]);
 
 	return { isDirty, setIsDirty };
 };

package/src/hooks/index.tsx

@@ -14,7 +14,7 @@ import { useHandleClickOutside, useModal, useModals, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
 import { useGlobalPermission, usePermission, usePermissions } from "./users";
-import { useWindowSize } from "./window";
+import { useFirefoxScrollLock, useWindowSize } from "./window";
 
 export {
 	useAdaptiveText,
@@ -24,6 +24,7 @@ export {
 	useDebouncedCallback,
 	useEmptyState,
 	useEqualStructured,
+	useFirefoxScrollLock,
 	useGlobalPermission,
 	useHandleClickOutside,
 	useIsDirty,

package/src/hooks/modals.tsx

@@ -2,9 +2,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 const useModal = (initialState?: boolean, bodyBlock = true) => {
 	const [isOpen, setIsOpen] = useState(initialState || false);
-	const toggleModal = () => {
-		setIsOpen(!isOpen);
-	};
+
+	const toggleModal = useCallback(() => {
+		setIsOpen((prev) => !prev);
+	}, []);
 
 	useEffect(() => {
 		if (isOpen && bodyBlock) {

package/src/hooks/window.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 
 const useWindowSize = (): number[] => {
 	const [size, setSize] = useState([0, 0]);
@@ -13,4 +13,52 @@ const useWindowSize = (): number[] => {
 	return size;
 };
 
-export { useWindowSize };
+/**
+ * Firefox auto-scrolls the window when typing in form fields if a scrollable
+ * element (e.g. Froala .fr-wrapper with overflow:auto) is present in the page.
+ * This hook blocks any window scroll not initiated by the user (wheel/touch)
+ * while a field inside the given container has focus.
+ *
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1422524
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1660932
+ */
+const useFirefoxScrollLock = (containerRef: React.RefObject<HTMLElement | null>) => {
+	useEffect(() => {
+		if (!navigator.userAgent.includes("Firefox")) {
+			return;
+		}
+
+		let savedScrollY = window.scrollY;
+		let userScrolling = false;
+		let scrollTimer: ReturnType<typeof setTimeout>;
+
+		const markUserScroll = () => {
+			userScrolling = true;
+			clearTimeout(scrollTimer);
+			scrollTimer = setTimeout(() => {
+				userScrolling = false;
+			}, 150);
+		};
+
+		const onScroll = () => {
+			if (!userScrolling && containerRef.current?.contains(document.activeElement)) {
+				window.scrollTo(0, savedScrollY);
+			} else {
+				savedScrollY = window.scrollY;
+			}
+		};
+
+		window.addEventListener("wheel", markUserScroll, { passive: true });
+		window.addEventListener("touchmove", markUserScroll, { passive: true });
+		window.addEventListener("scroll", onScroll);
+
+		return () => {
+			window.removeEventListener("wheel", markUserScroll);
+			window.removeEventListener("touchmove", markUserScroll);
+			window.removeEventListener("scroll", onScroll);
+			clearTimeout(scrollTimer);
+		};
+	}, [containerRef]);
+};
+
+export { useFirefoxScrollLock, useWindowSize };

package/src/modules/ActivityLog/ItemLogUser/UserItem/index.tsx

@@ -19,7 +19,7 @@ const UserItem = (props: IUserItemProps) => {
 		<S.Item>
 			<S.User>
 				<S.AvatarWrapper>
-					<Avatar image={image} name={name || ""} size="s" />
+					<Avatar image={image} name={name || ""} size={24} />
 				</S.AvatarWrapper>
 				<S.Name>{name}</S.Name>
 				{!isOpen && <S.CounterWrapper>{logActivity.length} events created</S.CounterWrapper>}

package/src/modules/App/Routing/Logout/index.tsx

@@ -1,17 +1,15 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { connect } from "react-redux";
 
-import { ILogoutAction } from "@ax/containers/App/interfaces";
 import { appActions } from "@ax/containers/App";
+import type { ILogoutAction } from "@ax/containers/App/interfaces";
 
 const Logout = (props: IProps) => {
 	const { logout, setHistoryPush } = props;
 
 	useEffect(() => {
+		logout();
 		setHistoryPush("/login");
-		return () => {
-			logout();
-		};
 	}, [logout, setHistoryPush]);
 
 	return <></>;

package/src/modules/App/Routing/NavMenu/NavItem/index.tsx

@@ -1,17 +1,17 @@
 import React, { useContext } from "react";
 
-import { IRouter } from "@ax/routes";
+import { Avatar, Icon } from "@ax/components";
 import { Restricted } from "@ax/guards";
-import { Icon } from "@ax/components";
+import type { IRouter } from "@ax/routes";
 
-import NavSubItem from "./NavSubItem";
 import { NavContext } from "./../context";
+import NavSubItem from "./NavSubItem";
 
 import * as S from "./style";
 
 const NavItem = (props: IProps) => {
 	const {
-		route: { component, path, name, icon, routesGroups, onClick, url, target = "_blank" },
+		route: { component, path, name, icon, routesGroups, onClick, url, target = "_blank", avatar },
 		location,
 		type,
 		isOpened,
@@ -20,89 +20,110 @@ const NavItem = (props: IProps) => {
 
 	const { state, toggleSubmenu } = useContext(NavContext)!;
 
-	const isSelected = location && (location.pathname === path || location.pathname.includes(path));
+	const isSelected = location ? location.pathname === path || location.pathname.includes(path) : false;
 	const isSelectedClass = isSelected ? "selected" : "";
+	const hasImage = avatar ? "withImage" : "";
 
 	const hasSubmenu = routesGroups && routesGroups.length > 0;
+	const isSubmenuOpen = !!state[name];
 
 	const handleClick = () => {
 		if (onClick) {
 			onClick();
 		} else if (url) {
 			window.open(url, target);
-		} else if (component && location.pathname !== path) {
+		} else if (component && location && location.pathname !== path) {
 			setHistoryPush(path);
 		} else if (isOpened && hasSubmenu) {
 			toggleSubmenu(name);
 		}
 	};
 
-	const subMenuIcon = state[name] ? "UpArrow" : "DownArrow";
+	const subMenuIcon = isSubmenuOpen ? "UpArrow" : "DownArrow";
 
 	const DropdownClass = isOpened ? "inline" : "floating";
 
 	return (
-		<S.Item key={name} type={type} isOpened={isOpened} isSubmenuOpen={state[name]} active={isSelected}>
-			<S.NavLink onClick={handleClick} className={isSelectedClass}>
-				<S.Icon>{icon && <Icon name={icon} size="24px" />}</S.Icon>
-				<S.LinkName active={isSelected || state[name]}>{name}</S.LinkName>
+		<S.Item key={name} type={type} isOpened={isOpened} isSubmenuOpen={isSubmenuOpen} active={isSelected}>
+			<S.NavLink onClick={handleClick} className={`${isSelectedClass} ${hasImage}`}>
+				{avatar ? (
+					<S.AvatarWithBorder>
+						<Avatar image={avatar.image} name={avatar.name} size={32} background bold />
+					</S.AvatarWithBorder>
+				) : (
+					<S.Icon>{icon && <Icon name={icon} size="24px" />}</S.Icon>
+				)}
+				<S.LinkName active={isSelected || isSubmenuOpen}>{name}</S.LinkName>
 				{hasSubmenu && isOpened && (
 					<S.Arrow>
 						<Icon name={subMenuIcon} />
 					</S.Arrow>
 				)}
 			</S.NavLink>
-			<S.Dropdown isSubmenu={hasSubmenu} isSubmenuOpen={state[name]} className={DropdownClass} type={type}>
+			<S.Dropdown isSubmenu={hasSubmenu} isSubmenuOpen={isSubmenuOpen} className={DropdownClass} type={type}>
 				<S.Heading onClick={handleClick}>
 					<div>{name}</div>
 				</S.Heading>
-				{routesGroups &&
-					routesGroups.map((subGroup: any, groupI: any) => (
-						<React.Fragment key={groupI}>
-							{subGroup.routes && (
-								<>
-									{subGroup.routes.map((subLink: any, subI: any) => {
-										const goToSubLink = () => {
-											if (location.pathname !== subLink.path) {
-												const isEditor = subLink.isEditor ? true : false;
-												setHistoryPush(subLink.path, isEditor);
-											}
-											if (subLink.setDataAction) {
-												const setCurrentData = (id: string) => subLink.setDataAction(id);
-												setCurrentData(subLink.item.id);
-											}
-										};
-
-										const isSelectedSubItem = location.pathname === subLink.path ? true : false;
-
-										const navSubItem = (
-											<NavSubItem key={subI} active={isSelectedSubItem} type={type}>
-												<S.NavLink onClick={goToSubLink}>
-													<S.LinkName active={isSelected}>{subLink.name}</S.LinkName>
-												</S.NavLink>
-											</NavSubItem>
-										);
-
-										return subLink.permission ? (
-											<Restricted to={subLink.permission} key={subI}>
-												{navSubItem}
-											</Restricted>
-										) : (
-											navSubItem
-										);
-									})}
-								</>
-							)}
-						</React.Fragment>
-					))}
+				{routesGroups?.map((subGroup: IRouteGroup, groupI: number) => (
+					<React.Fragment key={`${subGroup.name}-${groupI}`}>
+						{subGroup.routes && (
+							<>
+								{subGroup.routes.map((subLink: ISubRoute, subI: number) => {
+									const goToSubLink = () => {
+										if (location && location.pathname !== subLink.path) {
+											const isEditor = !!subLink.isEditor;
+											setHistoryPush(subLink.path, isEditor);
+										}
+										if (subLink.setDataAction && subLink.item) {
+											subLink.setDataAction(subLink.item.id);
+										}
+									};
+
+									const isSelectedSubItem = location ? location.pathname === subLink.path : false;
+
+									const navSubItem = (
+										<NavSubItem key={`${subLink.path}-${subI}`} active={isSelectedSubItem} type={type}>
+											<S.NavLink onClick={goToSubLink}>
+												<S.LinkName active={isSelected}>{subLink.name}</S.LinkName>
+											</S.NavLink>
+										</NavSubItem>
+									);
+
+									return subLink.permission ? (
+										<Restricted to={subLink.permission} key={`${subLink.path}-${subI}`}>
+											{navSubItem}
+										</Restricted>
+									) : (
+										navSubItem
+									);
+								})}
+							</>
+						)}
+					</React.Fragment>
+				))}
 			</S.Dropdown>
 		</S.Item>
 	);
 };
 
+interface ISubRoute {
+	path: string;
+	component?: any;
+	name: string;
+	permission?: string;
+	isEditor?: boolean;
+	setDataAction?: (id: string) => void;
+	item?: { id: string };
+}
+
+interface IRouteGroup {
+	name: string;
+	routes: ISubRoute[];
+}
+
 interface IProps {
 	route: IRouter;
-	location?: any;
+	location?: Location;
 	type: string;
 	isOpened: boolean;
 	setHistoryPush(path: string, isEditor?: boolean): void;

package/src/modules/App/Routing/NavMenu/NavItem/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Heading = styled.li`
+const Heading = styled.li`
   ${(p) => p.theme.textStyle.headingXXS};
   width: 100%;
   height: 100%;
@@ -8,7 +8,7 @@ export const Heading = styled.li`
   align-items: center;
 `;
 
-export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean; type: string }>`
+const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean; type: string }>`
   background-color: ${(p) =>
 		p.type === "multisite" ? p.theme.color.uiMainMenuBackgroundDark : p.theme.color.uiSiteMenuDark};
   color: ${(p) => p.theme.color.textHighEmphasisInverse};
@@ -54,7 +54,7 @@ export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean;
   }
 `;
 
-export const Arrow = styled.div`
+const Arrow = styled.div`
   margin-left: auto;
   height: ${(p) => p.theme.spacing.m};
   width: ${(p) => p.theme.spacing.m};
@@ -64,13 +64,13 @@ export const Arrow = styled.div`
   }
 `;
 
-export const LinkName = styled.span<{ active: boolean }>`
+const LinkName = styled.span<{ active: boolean }>`
   white-space: nowrap;
   overflow: hidden;
   color: ${(p) => (p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse)};
 `;
 
-export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen: boolean; active: boolean }>`
+const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen: boolean; active: boolean }>`
   position: relative;
   margin-left: ${(p) => (p.isSubmenuOpen ? "0" : p.theme.spacing.s)};
   margin-right: ${(p) => (p.isOpened && !p.isSubmenuOpen ? p.theme.spacing.s : "0")};
@@ -155,11 +155,16 @@ export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen:
   }
 `;
 
-export const NavLink = styled.a`
+const NavLink = styled.a`
   display: flex;
+
+  &.withImage {
+    padding: 2px;
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
 `;
 
-export const Icon = styled.div`
+const Icon = styled.div`
   display: flex;
   margin-right: ${(p) => p.theme.spacing.s};
   height: ${(p) => p.theme.spacing.m};
@@ -169,3 +174,12 @@ export const Icon = styled.div`
     fill: ${(p) => p.theme.color.textMediumEmphasisInverse};
   }
 `;
+
+const AvatarWithBorder = styled.div`
+  display: flex;
+  border: 2px solid;
+  border-color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  border-radius: 50%;
+`;
+
+export { Heading, Dropdown, Arrow, LinkName, Item, NavLink, Icon, AvatarWithBorder };