@griddo/ax 11.14.2-rc.1 → 11.14.2

package/package.json

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

package/src/__tests__/components/ImageDragAndDrop/ImageDragAndDrop.test.tsx

@@ -1,6 +1,7 @@
 import { Provider } from "react-redux";
 
 import ImageDragAndDrop from "@ax/components/ImageDragAndDrop";
+import { VALID_IMAGE_FORMATS } from "@ax/constants";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
@@ -37,7 +38,7 @@ const renderImageDragAndDrop = (props = {}, storeData = initialStore) => {
 	return render(
 		<Provider store={store}>
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageDragAndDrop siteID="global" validFormats={["jpg", "jpeg", "png"]} handleUpload={jest.fn()} {...props} />
+				<ImageDragAndDrop siteID="global" handleUpload={jest.fn()} {...props} />
 			</ThemeProvider>
 		</Provider>,
 	);
@@ -61,7 +62,9 @@ describe("ImageDragAndDrop rendering", () => {
 
 	it("should render valid formats text", () => {
 		renderImageDragAndDrop();
-		const validFormatsTexts = screen.getAllByText(/jpg, jpeg, png/);
+		const validFormatsTexts = screen.getAllByText((_, element) => {
+			return VALID_IMAGE_FORMATS.every((format) => element?.textContent?.includes(format));
+		});
 		expect(validFormatsTexts.length).toBeGreaterThan(0);
 	});
 
@@ -75,7 +78,8 @@ describe("ImageDragAndDrop rendering", () => {
 		renderImageDragAndDrop();
 		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
 		expect(fileInput).toBeTruthy();
-		expect(fileInput.accept).toBe(".jpg,.jpeg,.png");
+		const expectedAccept = VALID_IMAGE_FORMATS.map((format) => `.${format}`).join(",");
+		expect(fileInput.accept).toBe(expectedAccept);
 	});
 
 	it("should render placeholder when isAllowedToUpload is false", () => {

package/src/components/ConfigPanel/index.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useRef, useState } from "react";
 
-import { isEmptyObj } from "@ax/helpers";
 import { Loading } from "@ax/components";
+import { isEmptyObj } from "@ax/helpers";
+import { useFirefoxScrollLock } from "@ax/hooks";
 import type { IBreadcrumbItem, IUserEditing } from "@ax/types";
 
 import Form from "./Form";
-import NavigationForm from "./NavigationForm";
 import GlobalPageForm from "./GlobalPageForm";
-import PreviewForm from "./PreviewForm";
 import Header from "./Header";
+import NavigationForm from "./NavigationForm";
+import PreviewForm from "./PreviewForm";
 
 import * as S from "./style";
 
@@ -53,6 +54,8 @@ const ConfigPanel = (props: IStateProps) => {
 		}
 	}, [lastElementAddedId]);
 
+	useFirefoxScrollLock(wrapperRef);
+
 	if (isLoading || isEmptyObj(schema)) {
 		return <Loading />;
 	}

package/src/components/Fields/FileField/index.tsx

@@ -21,7 +21,6 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 
 	const addFile = (newFile: any) => {
 		onChange(newFile);
-		toggleModal();
 	};
 
 	const handleOnClickUrl = () => {

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/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 };