@griddo/ax 11.14.2-rc.0 → 11.14.2

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

@@ -1,18 +1,17 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import { version } from "./../../../../../package.json";
-
-import { IRouter, multisite, site } from "@ax/routes";
+import { type RouteComponentProps, withRouter } from "react-router-dom";
 
-import { ILanguage, IRootState, ISite, IStructuredData } from "@ax/types";
-import { IGlobalSettings } from "@ax/containers/App/reducer";
-import { appActions } from "@ax/containers/App";
 import { Icon, Tag } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import type { IGlobalSettings } from "@ax/containers/App/reducer";
 import { Restricted } from "@ax/guards";
+import { type IRouter, multisite, site } from "@ax/routes";
+import type { ILanguage, IRootState, ISite, IStructuredData, IUser } from "@ax/types";
 
-import NavItem from "./NavItem";
+import { version } from "./../../../../../package.json";
 import { NavProvider } from "./context";
+import NavItem from "./NavItem";
 
 import * as S from "./style";
 
@@ -20,13 +19,14 @@ const NavMenu = (props: IProps) => {
 	const {
 		location,
 		setHistoryPush,
-		logout,
+		logoutAndNavigate,
 		currentSiteInfo,
 		siteLanguages,
 		lang,
 		categories,
 		globalSettings,
 		structuredData,
+		currentUser,
 	} = props;
 
 	const { useForms } = globalSettings;
@@ -48,9 +48,8 @@ const NavMenu = (props: IProps) => {
 		setIsOpened(!isOpened);
 	};
 
-	const siteLogo = currentSiteInfo && currentSiteInfo.bigAvatar ? currentSiteInfo.bigAvatar : logoPlaceholder;
-	const siteLogoMini =
-		currentSiteInfo && currentSiteInfo.smallAvatar ? currentSiteInfo.smallAvatar : logoMiniPlaceholder;
+	const siteLogo = currentSiteInfo?.bigAvatar ? currentSiteInfo.bigAvatar : logoPlaceholder;
+	const siteLogoMini = currentSiteInfo?.smallAvatar ? currentSiteInfo.smallAvatar : logoMiniPlaceholder;
 
 	const sitesPath = "/sites/";
 	const isSite =
@@ -59,7 +58,7 @@ const NavMenu = (props: IProps) => {
 
 	const goToPublishedSite = () => {
 		const language = siteLanguages.find((l) => l.id === lang.id);
-		if (language && language.home) {
+		if (language?.home) {
 			const urlHome = `${language.home}${language.home.endsWith("/") ? "" : "/"}`;
 			window.open(urlHome, "_blank");
 		}
@@ -74,10 +73,10 @@ const NavMenu = (props: IProps) => {
 		setHistoryPush(profileRoute);
 	};
 
-	const filteredSiteRoutes = site.filter((route: IRouter) => useForms || (!useForms && !route.path.includes("/forms")));
-	const filteredMultisiteRoutes = multisite.filter(
-		(route: IRouter) => useForms || (!useForms && !route.path.includes("/forms")),
-	);
+	const filterRoutes = (routes: IRouter[]) => routes.filter((route) => useForms || !route.path.includes("/forms"));
+
+	const filteredSiteRoutes = filterRoutes(site);
+	const filteredMultisiteRoutes = filterRoutes(multisite);
 
 	const config: IConfig = isSite
 		? {
@@ -114,7 +113,7 @@ const NavMenu = (props: IProps) => {
 		name: "Logout",
 		icon: "Power",
 		path: "",
-		onClick: logout,
+		onClick: logoutAndNavigate,
 	};
 
 	const profileRoute = {
@@ -123,6 +122,7 @@ const NavMenu = (props: IProps) => {
 		icon: "User",
 		path: isSite ? "/site/profile" : "/profile",
 		onClick: goToProfile,
+		avatar: currentUser ? { image: currentUser.image?.url, name: currentUser.name } : undefined,
 	};
 
 	const toggleIcon = isOpened ? "Collapsed" : "Extend";
@@ -140,15 +140,21 @@ const NavMenu = (props: IProps) => {
 
 	if (isSite) {
 		const isSiteCategoriesAvailable = !!categories.site.length;
-		const siteCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/sites/categories");
-		config.routes[siteCategoriesRouteIdx].showInNav = isSiteCategoriesAvailable;
+		config.routes = config.routes.map((route) =>
+			route.path === "/sites/categories" ? { ...route, showInNav: isSiteCategoriesAvailable } : route,
+		);
 	} else {
 		const isGlobalCategoriesAvailable = !!categories.global.length;
 		const isGlobalDataAvailable = !!structuredData.global.length;
-		const globalCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/categories");
-		const globalDataRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/data");
-		config.routes[globalCategoriesRouteIdx].showInNav = isGlobalCategoriesAvailable;
-		config.routes[globalDataRouteIdx].showInNav = isGlobalDataAvailable;
+		config.routes = config.routes.map((route) => {
+			if (route.path === "/categories") {
+				return { ...route, showInNav: isGlobalCategoriesAvailable };
+			}
+			if (route.path === "/data") {
+				return { ...route, showInNav: isGlobalDataAvailable };
+			}
+			return route;
+		});
 	}
 
 	return (
@@ -165,37 +171,34 @@ const NavMenu = (props: IProps) => {
 				</S.Home>
 				<S.Lists>
 					<S.List>
-						{config.routes &&
-							config.routes
-								.filter((route: IRouter) => route.showInNav)
-								.map((route: IRouter): JSX.Element => {
-									const navItem = (
-										<NavItem
-											setHistoryPush={setHistoryPush}
-											key={route.name}
-											route={route}
-											location={location}
-											type={config.type}
-											isOpened={isOpened}
-										/>
-									);
-
-									return route.permission ? (
-										<Restricted key={route.name} to={route.permission}>
-											{navItem}
-										</Restricted>
-									) : (
-										navItem
-									);
-								})}
+						{config.routes
+							?.filter((route: IRouter) => route.showInNav)
+							.map((route: IRouter): JSX.Element => {
+								const navItem = (
+									<NavItem
+										setHistoryPush={setHistoryPush}
+										key={route.name}
+										route={route}
+										location={location}
+										type={config.type}
+										isOpened={isOpened}
+									/>
+								);
+
+								return route.permission ? (
+									<Restricted key={route.name} to={route.permission}>
+										{navItem}
+									</Restricted>
+								) : (
+									navItem
+								);
+							})}
 					</S.List>
 					<S.List>
 						{isSitePublished && (
-							<>
-								<NavItem setHistoryPush={setHistoryPush} route={siteRoute} type={config.type} isOpened={isOpened} />
-								<S.Separator />
-							</>
+							<NavItem setHistoryPush={setHistoryPush} route={siteRoute} type={config.type} isOpened={isOpened} />
 						)}
+						<S.Separator />
 						<NavItem
 							setHistoryPush={setHistoryPush}
 							route={profileRoute}
@@ -214,7 +217,7 @@ const NavMenu = (props: IProps) => {
 };
 
 interface IDispatchProps {
-	logout(): void;
+	logoutAndNavigate(): void;
 	setHistoryPush(path: string): void;
 }
 
@@ -237,6 +240,7 @@ interface INavMenuProps {
 	siteLanguages: ILanguage[];
 	lang: { locale: string; id: number };
 	globalSettings: IGlobalSettings;
+	currentUser: IUser | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -246,12 +250,13 @@ const mapStateToProps = (state: IRootState) => ({
 	siteLanguages: state.sites.currentSiteLanguages,
 	lang: state.app.lang,
 	globalSettings: state.app.globalSettings,
+	currentUser: state.users.currentUser,
 });
 
 type IProps = INavMenuProps & IDispatchProps & RouteComponentProps;
 
 const mapDispatchToProps = {
-	logout: appActions.logout,
+	logoutAndNavigate: appActions.logoutAndNavigate,
 	setHistoryPush: appActions.setHistoryPush,
 };
 

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}