@griddo/ax 11.14.1 → 11.14.2-rc.1

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

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const NavLink = styled.a`
+const NavLink = styled.a`
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -9,12 +9,12 @@ export const NavLink = styled.a`
   width: 100%;
 `;
 
-export const GoBack = styled.div`
+const GoBack = styled.div`
   display: none;
   width: auto;
 `;
 
-export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolean; siteSelector: boolean }>`
+const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolean; siteSelector: boolean }>`
   padding: ${(p) => `${p.theme.spacing.xs} 12px`};
   background-color: ${(p) =>
 		p.type === "multisite" ? p.theme.color.uiMainMenuBackground : p.theme.color.uiBarBackground};
@@ -41,7 +41,7 @@ export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolea
   }
 `;
 
-export const Logo = styled.img`
+const Logo = styled.img`
   max-height: 40px;
   height: 100%;
   width: auto;
@@ -52,7 +52,7 @@ export const Logo = styled.img`
   left: 0;
 `;
 
-export const LogoSite = styled.img`
+const LogoSite = styled.img`
   display: block;
   max-height: 40px;
   height: 100%;
@@ -64,7 +64,7 @@ export const LogoSite = styled.img`
   left: 0;
 `;
 
-export const LogoSiteMini = styled.img`
+const LogoSiteMini = styled.img`
   margin: 0 auto;
   max-height: 40px;
   height: 100%;
@@ -74,7 +74,7 @@ export const LogoSiteMini = styled.img`
   opacity: 1;
 `;
 
-export const Title = styled.span`
+const Title = styled.span`
   bottom: -3px;
   position: relative;
   display: flex;
@@ -83,7 +83,7 @@ export const Title = styled.span`
   color: ${(p) => p.theme.color.textHighEmphasisInverse};
 `;
 
-export const NavWrapper = styled.nav<{ type: string; isOpened: boolean }>`
+const NavWrapper = styled.nav<{ type: string; isOpened: boolean }>`
   ${(p) => p.theme.textStyle.uiL};
   position: relative;
   width: ${(p) => (p.isOpened ? `calc(${p.theme.spacing.l} * 5)` : `calc(${p.theme.spacing.m} * 3)`)};
@@ -107,7 +107,7 @@ export const NavWrapper = styled.nav<{ type: string; isOpened: boolean }>`
   }
 `;
 
-export const Lists = styled.div`
+const Lists = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -115,9 +115,11 @@ export const Lists = styled.div`
   padding-top: ${(p) => p.theme.spacing.s};
 `;
 
-export const List = styled.ul``;
+const List = styled.ul``;
 
-export const Separator = styled.li`
+const Separator = styled.li`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLineInverse};
   margin: ${(p) => `${p.theme.spacing.s} 0`};
 `;
+
+export { NavLink, GoBack, Home, Logo, LogoSite, LogoSiteMini, Title, NavWrapper, Lists, List, Separator };

package/src/modules/CreatePass/index.tsx

@@ -37,7 +37,7 @@ const CreatePass = (props: IProps) => {
 
 		const passCreated = await createPassword(parseInt(id), params);
 		if (passCreated) {
-			setHistoryPush("/profile?init=true");
+			setHistoryPush("/sites");
 		}
 	};
 

package/src/modules/FileDrive/FileDragAndDrop/index.tsx

@@ -1,15 +1,17 @@
-import React, { memo, useRef, useState } from "react";
+import type React from "react";
+import { memo, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { Icon, DragAndDrop, ProgressBar } from "@ax/components";
-import { IFile, IRootState } from "@ax/types";
+import { DragAndDrop, Icon, ProgressBar } from "@ax/components";
+import { VALID_DOCUMENT_FORMATS, VALID_FILE_FORMATS } from "@ax/constants";
 import { fileDriveActions } from "@ax/containers/FileDrive";
+import type { IFile, IRootState } from "@ax/types";
 
 import * as S from "./style";
 
 const FileDragAndDrop = (props: IProps) => {
 	const {
-		validFormats,
+		customFormats,
 		isUploading,
 		isSuccess,
 		isError,
@@ -27,8 +29,9 @@ const FileDragAndDrop = (props: IProps) => {
 		resetError,
 	} = props;
 
+	const validFormats = customFormats ? customFormats : VALID_FILE_FORMATS;
 	const validExtensions = validFormats.map((format) => `.${format}`).join(",");
-	const videoFormats = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
+	const validFormatsText = customFormats ? customFormats.join(", ") : `${VALID_DOCUMENT_FORMATS.join(", ")} and videos`;
 	const filesInputRef = useRef<any>(null);
 	const filesButtonRef = useRef<any>(null);
 	const [inDropZone, setInDropZone] = useState(false);
@@ -169,7 +172,7 @@ const FileDragAndDrop = (props: IProps) => {
 						Select files
 					</S.FilesButton>
 					<S.DragSubtitle>
-						Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
+						Valid formats: {validFormatsText}.
 						<br />
 						Max. size: 50MB
 					</S.DragSubtitle>
@@ -180,7 +183,7 @@ const FileDragAndDrop = (props: IProps) => {
 					</S.DropIcon>
 					<S.DragTitle>Drop your file</S.DragTitle>
 					<S.DragSubtitle>
-						Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
+						Valid formats: {validFormatsText}.
 						<br />
 						Max. size: 50MB
 					</S.DragSubtitle>
@@ -249,7 +252,7 @@ const FileDragAndDrop = (props: IProps) => {
 };
 
 interface IProps {
-	validFormats: string[];
+	customFormats?: string[];
 	isUploading: boolean;
 	isSuccess: boolean;
 	isError: boolean;

package/src/modules/FileDrive/FileModal/index.tsx

@@ -1,12 +1,14 @@
-import React, { useState } from "react";
-import { IFile } from "@ax/types";
+import { useState } from "react";
+
 import { Button, FloatingMenu, IconAction, Toast, Tooltip } from "@ax/components";
-import { useModal, useToast } from "@ax/hooks";
 import { getFileIcon } from "@ax/helpers";
-import FileDragAndDrop from "../FileDragAndDrop";
+import { useModal, useToast } from "@ax/hooks";
+import type { IFile } from "@ax/types";
+
+import type { IFileFormState } from "..";
 import { NotSavedModal } from "../atoms";
+import FileDragAndDrop from "../FileDragAndDrop";
 import DetailPanel from "./DetailPanel";
-import { IFileFormState } from "..";
 
 import * as S from "./style";
 
@@ -38,8 +40,6 @@ const FileModal = (props: IProps) => {
 	const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
 	const index = items.indexOf(file.id);
 
-	const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "mov", "mp4", "wmv", "avi", "webm", "mkv"];
-
 	const handleArrowClick = (isPrev: boolean) => () => {
 		if (isDirty) {
 			setIsArrowPrev(isPrev);
@@ -117,10 +117,9 @@ const FileModal = (props: IProps) => {
 								{isDNDVisible && (
 									<S.DragAndDropWrapper>
 										<FileDragAndDrop
-											validFormats={validFormats}
 											handleUpload={handleUpload}
 											inverse={true}
-											replaceData={{ fileID: id, keepURL: replaceType === "full" ? false : true }}
+											replaceData={{ fileID: id, keepURL: replaceType !== "full" }}
 											siteID={site || "global"}
 										/>
 									</S.DragAndDropWrapper>

package/src/modules/FileDrive/index.tsx

@@ -19,9 +19,9 @@ import {
 	Toast,
 	Tooltip,
 } from "@ax/components";
+import { VALID_FILE_FORMATS } from "@ax/constants";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
-import { LOCALE, pluralize } from "@ax/locales";
 import type {
 	IBulkAction,
 	IFile,
@@ -126,22 +126,6 @@ const FileDrive = (props: IProps) => {
 	const hasFolders = !!folders.length;
 	const isRoot = !breadcrumb.length;
 	const isGrid = displayMode === "grid";
-	const validFormats = [
-		"pdf",
-		"doc",
-		"docx",
-		"xls",
-		"xlsx",
-		"zip",
-		"csv",
-		"txt",
-		"mov",
-		"mp4",
-		"wmv",
-		"avi",
-		"webm",
-		"mkv",
-	];
 
 	const allowedToAccessGlobalFromSite = usePermission("mediaGallery.accessToGlobalFileDriveFromSite");
 
@@ -752,7 +736,6 @@ const FileDrive = (props: IProps) => {
 			<Modal isOpen={isUploadOpen} hide={toggleUploadModal} size="XL" title="Upload file">
 				{isUploadOpen && (
 					<FileDragAndDrop
-						validFormats={validFormats}
 						folderID={currentFolderID}
 						handleUpload={handleUpload}
 						handleMultipleUpload={handleMultipleUpload}

package/src/modules/Forms/FormEditor/index.tsx

@@ -83,7 +83,7 @@ const FormEditor = (props: IProps) => {
 	const { isOpen: isUseOpen, toggleModal: toggleUseModal } = useModal();
 	const { isOpen: isUpdateOpen, toggleModal: toggleUpdateModal } = useModal();
 
-	const { isDirty, setIsDirty } = useShouldBeSaved(formContent || {});
+	const { isDirty, setIsDirty } = useShouldBeSaved(formContent);
 	const browserRef = useRef<HTMLDivElement>(null);
 
 	const deleteFormPermission = isSiteView ? "forms.deleteForms" : "global.forms.deleteForms";

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

@@ -25,7 +25,9 @@ const isEffectivelyVisible = (el: HTMLElement): boolean => {
 
 const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 	const [boxes, setBoxes] = useState<HeadingBox[]>([]);
+	const [, setTick] = useState(0);
 	const rafRef = useRef<number>(0);
+	const frameRef = useRef<number>(0);
 
 	useEffect(() => {
 		const update = () => {
@@ -33,8 +35,6 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 			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];
@@ -44,9 +44,6 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 					boxes.push({
 						id: el.dataset.griddoid || `heading-${i}`,
 						tag: el.tagName.toLowerCase(),
-						rect,
-						scrollX,
-						scrollY,
 					});
 				}
 				setBoxes(boxes);
@@ -73,9 +70,26 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 		};
 	}, [headingFilter]);
 
+	useEffect(() => {
+		const updateFrame = () => {
+			frameRef.current = requestAnimationFrame(() => {
+				setTick((t) => t + 1);
+				updateFrame();
+			});
+		};
+
+		updateFrame();
+
+		return () => cancelAnimationFrame(frameRef.current);
+	}, []);
+
 	return createPortal(
 		<div data-testid="headings-overlay">
-			{boxes.map(({ id, tag, rect, scrollX, scrollY }) => {
+			{boxes.map(({ id, tag }) => {
+					const el = document.querySelector<HTMLElement>(`[data-griddoid="${id}"]`) ||
+						document.querySelector(tag);
+					if (!el) return null;
+					const rect = el.getBoundingClientRect();
 				const color = headColors[tag];
 				if (!color) return null;
 				const labelAbove = rect.left < 30;
@@ -84,8 +98,8 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 						key={id}
 						$color={color}
 						style={{
-							top: rect.top + scrollY,
-							left: rect.left + scrollX,
+							top: rect.top,
+							left: rect.left,
 							width: rect.width,
 							height: rect.height,
 						}}
@@ -104,9 +118,6 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 interface HeadingBox {
 	id: string;
 	tag: string;
-	rect: DOMRect;
-	scrollX: number;
-	scrollY: number;
 }
 
 export interface IHeadingsOverlayProps {

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

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 const Box = styled.div<{ $color: string }>`
-	position: absolute;
+	position: fixed;
 	outline: 2px solid ${(p) => p.$color};
 	z-index: 1001;
 	pointer-events: none;

package/src/modules/MediaGallery/ImageModal/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Button, ErrorToast, IconAction, Loader, Toast, Tooltip } from "@ax/components";
+import { Button, ErrorToast, IconAction, ImageDragAndDrop, Loader, Toast, Tooltip } from "@ax/components";
 import { useModal, useToast } from "@ax/hooks";
 import type { IGetFolderParams, IImage } from "@ax/types";
 
@@ -8,7 +8,6 @@ import { type Fields, GriddoImageExp } from "@griddo/core";
 
 import type { IImageFormState } from "..";
 import { NotSavedModal } from "../atoms";
-import ImageDragAndDrop from "../ImageDragAndDrop";
 import DetailPanel from "./DetailPanel";
 
 import * as S from "./style";
@@ -39,8 +38,6 @@ const ImageModal = (props: IProps) => {
 
 	const index = items.indexOf(image.id);
 
-	const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
-
 	const handleArrowClick = (isPrev: boolean) => () => {
 		if (isDirty) {
 			setIsArrowPrev(isPrev);
@@ -101,7 +98,6 @@ const ImageModal = (props: IProps) => {
 							{isDNDVisible && (
 								<S.DragAndDropWrapper>
 									<ImageDragAndDrop
-										validFormats={validFormats}
 										handleUpload={handleUpload}
 										inverse={true}
 										replaceData={{ fileID: id }}

package/src/modules/MediaGallery/index.tsx

@@ -9,6 +9,7 @@ import {
 	FilterTagsBar,
 	Icon,
 	IconAction,
+	ImageDragAndDrop,
 	Loading,
 	MainWrapper,
 	Modal,
@@ -41,7 +42,6 @@ import FolderItem from "./FolderItem";
 import FolderTree from "./FolderTree";
 import GridItem from "./GridItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
-import ImageDragAndDrop from "./ImageDragAndDrop";
 import Orientation from "./ImageFilters/Orientation";
 import SortBy from "./ImageFilters/SortBy";
 import Type from "./ImageFilters/Type";
@@ -129,7 +129,6 @@ const MediaGallery = (props: IProps) => {
 	const hasFolders = !!folders?.length;
 	const isRoot = !breadcrumb?.length;
 	const isGrid = displayMode === "grid";
-	const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
 
 	const allowedToAccessGlobalFromSite = usePermission("mediaGallery.accessToGlobalGalleryFromSite");
 
@@ -813,7 +812,6 @@ const MediaGallery = (props: IProps) => {
 			<Modal isOpen={isUploadOpen} hide={toggleUploadModal} size="XL" title="Upload media">
 				{isUploadOpen && (
 					<ImageDragAndDrop
-						validFormats={validFormats}
 						folderID={currentFolderID}
 						handleUpload={handleUpload}
 						handleMultipleUpload={handleMultipleUpload}