@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/utils.test.ts

@@ -0,0 +1,55 @@
+import { getCompanyFromEmail, getMostFrequentRole } from "@ax/modules/Sites/SitesList/WelcomeModal/utils";
+
+describe("getCompanyFromEmail", () => {
+	it("should extract company name from professional email", () => {
+		expect(getCompanyFromEmail("user@secuoyas.com")).toBe("Secuoyas");
+	});
+
+	it("should capitalize the first letter of the company name", () => {
+		expect(getCompanyFromEmail("user@acme.io")).toBe("Acme");
+	});
+
+	it("should return empty string for generic email providers", () => {
+		expect(getCompanyFromEmail("user@gmail.com")).toBe("");
+		expect(getCompanyFromEmail("user@hotmail.com")).toBe("");
+		expect(getCompanyFromEmail("user@outlook.com")).toBe("");
+		expect(getCompanyFromEmail("user@yahoo.com")).toBe("");
+		expect(getCompanyFromEmail("user@icloud.com")).toBe("");
+	});
+
+	it("should return empty string when email has no domain", () => {
+		expect(getCompanyFromEmail("usernodomain")).toBe("");
+	});
+
+	it("should return the full subdomain string before the TLD", () => {
+		expect(getCompanyFromEmail("user@mail.company.com")).toBe("Mail.company");
+	});
+});
+
+describe("getMostFrequentRole", () => {
+	it("should return null for empty userRoles", () => {
+		expect(getMostFrequentRole([])).toBeNull();
+	});
+
+	it("should return the ID of the most frequent role", () => {
+		const userRoles = [
+			{ siteId: 1, roles: [1, 2] },
+			{ siteId: 2, roles: [1] },
+		];
+		expect(getMostFrequentRole(userRoles)).toBe(1);
+	});
+
+	it("should handle single role occurrence", () => {
+		const userRoles = [{ siteId: 1, roles: [5] }];
+		expect(getMostFrequentRole(userRoles)).toBe(5);
+	});
+
+	it("should return correct role when multiple roles have different frequencies", () => {
+		const userRoles = [
+			{ siteId: 1, roles: [1, 2, 3] },
+			{ siteId: 2, roles: [1, 2] },
+			{ siteId: 3, roles: [1] },
+		];
+		expect(getMostFrequentRole(userRoles)).toBe(1);
+	});
+});

package/src/api/sites.tsx

@@ -1,7 +1,7 @@
-import { AxiosResponse } from "axios";
-import { IGetGlobalPagesParams, IGetSitePagesParams, IGetSitesParams } from "@ax/types";
+import type { AxiosResponse } from "axios";
+import type { IGetGlobalPagesParams, IGetSitePagesParams, IGetSitesParams } from "@ax/types";
 import { template } from "./config";
-import { sendRequest, IServiceConfig, sendInitialRequest } from "./utils";
+import { sendRequest, type IServiceConfig, sendInitialRequest } from "./utils";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
 	GET_ALL_SITES: {
@@ -123,7 +123,7 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 
 const getAllSites = async (params: IGetSitesParams = { recentSitesNumber: 7 }) => {
 	const { host, endpoint } = SERVICES.GET_ALL_SITES;
-	const { token, language, recentSitesNumber, searchQuery, filterQuery, page, itemsPerPage, pagination } = params;
+	const { token, language, recentSitesNumber = 7, searchQuery, filterQuery, page, itemsPerPage, pagination } = params;
 
 	const queryParams =
 		language && recentSitesNumber

package/src/components/Avatar/index.tsx

@@ -1,14 +1,32 @@
-import React from "react";
 import { getInitials } from "@ax/helpers";
 
 import * as S from "./style";
 
-const Avatar = (props: IAvatarProps): JSX.Element => {
-	const { image, name, size } = props;
+const AVATAR_COLORS = ["#7C9CDE", "#E07C7C", "#7CC8A0", "#C97CCC", "#D4A76A", "#6AB8C8", "#C8A86A", "#8E7CC8"];
+
+const getAvatarColor = (name?: string): string => {
+	if (!name) return AVATAR_COLORS[0];
+	let hash = 0;
+	const normalized = name.toLowerCase();
+	for (let i = 0; i < normalized.length; i++) {
+		hash = ((hash << 5) - hash) + normalized.charCodeAt(i);
+		hash = hash & hash; // Convert to 32bit integer
+	}
+	return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+};
 
+const Avatar = (props: IAvatarProps): JSX.Element => {
+	const { image, name, size, fontSize, bold, background } = props;
 	return (
 		<S.AvatarWrapper data-testid="avatar-wrapper" size={size}>
-			<S.Avatar image={image} initials={getInitials(name)} data-testid="avatar" size={size} />
+			<S.Avatar
+				image={image}
+				initials={getInitials(name)}
+				color={background ? getAvatarColor(name) : undefined}
+				fontSize={fontSize}
+				bold={bold}
+				data-testid="avatar"
+			/>
 		</S.AvatarWrapper>
 	);
 };
@@ -16,7 +34,10 @@ const Avatar = (props: IAvatarProps): JSX.Element => {
 export interface IAvatarProps {
 	image?: string | null;
 	name?: string;
-	size?: string;
+	size?: number;
+	fontSize?: number;
+	background?: boolean;
+	bold?: boolean;
 }
 
 export default Avatar;

package/src/components/Avatar/style.tsx

@@ -1,15 +1,14 @@
 import styled from "styled-components";
 
-const AvatarWrapper = styled.div<{ size?: string }>`
-  width: ${(p) => (p.size === "s" ? " 24px" : "32px")};
-  height: ${(p) => (p.size === "s" ? " 24px" : "32px")};
-`;
-
-const Avatar = styled.span<{ image?: string | null; initials: string; size?: string }>`
+const Avatar = styled.span<{
+	image?: string | null;
+	initials: string;
+	color?: string;
+	fontSize?: number;
+	bold?: boolean;
+}>`
   border-radius: 50%;
-  width: ${(p) => (p.size === "s" ? " 24px" : "32px")};
-  height: ${(p) => (p.size === "s" ? " 24px" : "32px")};
-  background: ${(p) => `url(${p.image})`}, ${(p) => p.theme.colors.uiBackground03};
+  background: ${(p) => `url(${p.image})`}, ${(p) => (p.color ? p.color : p.theme.colors.uiBackground03)};
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
@@ -19,8 +18,19 @@ const Avatar = styled.span<{ image?: string | null; initials: string; size?: str
 
   &:after {
     content: ${(p) => !p.image && JSON.stringify(p.initials)};
-    color: ${(p) => p.theme.colors.textMediumEmphasis};
+    color: ${(p) => (p.bold ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
     ${(p) => p.theme.textStyle.uiXS};
+    font-size: ${(p) => (p.fontSize ? `${p.fontSize}px` : "12px")};
+  }
+`;
+
+const AvatarWrapper = styled.div<{ size?: number }>`
+  width: ${(p) => (p.size ? `${p.size}px` : "32px")};
+  height: ${(p) => (p.size ? `${p.size}px` : "32px")};
+
+  ${Avatar} {
+    width: ${(p) => (p.size ? `${p.size}px` : "32px")};
+    height: ${(p) => (p.size ? `${p.size}px` : "32px")};
   }
 `;
 

package/src/components/Browser/index.tsx

@@ -88,10 +88,16 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		const el = frameWrapperRef.current;
 		if (!el) return;
 
+		const getScrollbarWidth = () => {
+			return window.innerWidth - document.documentElement.clientWidth || 15;
+		};
+
 		let lastWidth = 0;
+		const scrollbarThreshold = getScrollbarWidth();
+
 		const observer = new ResizeObserver(([entry]) => {
 			const containerWidth = entry.contentRect.width;
-			if (containerWidth > 0 && Math.abs(containerWidth - lastWidth) > 20) {
+			if (containerWidth > 0 && Math.abs(containerWidth - lastWidth) > scrollbarThreshold) {
 				lastWidth = containerWidth;
 				const resolution = calcDefaultResolution(containerWidth, resolutionOptions);
 				const newZoom = calcAutoZoom(containerWidth, resolution);

package/src/components/ConfigPanel/index.tsx

@@ -1,19 +1,21 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-import { isEmptyObj } from "@ax/helpers";
 import { Loading } from "@ax/components";
-import { IBreadcrumbItem, IUserEditing } from "@ax/types";
+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";
+
 const navigationModulesTypes = ["header", "footer"];
 
-const ConfigPanel = (props: IStateProps): JSX.Element => {
+const ConfigPanel = (props: IStateProps) => {
 	const {
 		isLoading,
 		schema,
@@ -48,10 +50,12 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
 	useEffect(() => {
 		if (lastElementAddedId && wrapperRef.current) {
 			const element = document.querySelector(`.editorId-${lastElementAddedId}`);
-			element && element.scrollIntoView();
+			element?.scrollIntoView();
 		}
 	}, [lastElementAddedId]);
 
+	useFirefoxScrollLock(wrapperRef);
+
 	if (isLoading || isEmptyObj(schema)) {
 		return <Loading />;
 	}

package/src/components/ElementsTooltip/index.tsx

@@ -1,8 +1,51 @@
-import React from "react";
+import type React from "react";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
 import { trimText } from "@ax/helpers";
 
 import * as S from "./style";
 
+const PortalTooltip = (props: {
+	elementsRows: string[][];
+	defaultColor?: string;
+	colors?: any;
+	prefix: string;
+	rounded: boolean;
+	size: "S" | "M";
+	tooltipRef: React.RefObject<HTMLDivElement>;
+	isVisible: boolean;
+	elementRect: DOMRect | null;
+}) => {
+	const { elementsRows, defaultColor, colors, prefix, rounded, size, tooltipRef, isVisible, elementRect } = props;
+
+	if (!isVisible || !elementRect) return null;
+
+	const top = elementRect.top - 8;
+	const left = elementRect.left + elementRect.width / 2;
+
+	return createPortal(
+		<S.PortalTooltip data-testid="portal-tooltip" style={{ top, left }} ref={tooltipRef}>
+			{elementsRows.map((row, idx) => {
+				return (
+					<S.Row data-testid="row-element" key={idx}>
+						{row.map((element, idx) => {
+							const color = defaultColor || colors?.[element];
+							return (
+								<S.Element data-testid="div-element" key={idx} color={color} rounded={rounded} size={size}>
+									{prefix}
+									{element}
+								</S.Element>
+							);
+						})}
+					</S.Row>
+				);
+			})}
+		</S.PortalTooltip>,
+		document.body,
+	);
+};
+
 const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
 	const {
 		elements,
@@ -16,6 +59,11 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
 		size = "S",
 	} = props;
 
+	const tooltipRef = useRef<HTMLDivElement>(null);
+	const elementRef = useRef<HTMLDivElement>(null);
+	const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+	const [elementRect, setElementRect] = useState<DOMRect | null>(null);
+
 	if (!elements) return <></>;
 
 	const visibleElements = elements.slice(0, defaultElements);
@@ -28,42 +76,56 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
 		elementsRows[row] = isNewRow ? [element] : [...elementsRows[row], element];
 	});
 
+	const handleMouseEnter = () => {
+		if (elementRef.current) {
+			setElementRect(elementRef.current.getBoundingClientRect());
+		}
+		setIsTooltipVisible(true);
+	};
+
+	const handleMouseLeave = () => {
+		setIsTooltipVisible(false);
+	};
+
 	return (
-		<S.Wrapper data-testid="elements-wrapper">
-			{visibleElements.map((fullElement, idx) => {
-				const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
-				const color = defaultColor ? defaultColor : colors && colors[element] ? colors[element] : undefined;
+		<>
+			<S.Wrapper data-testid="elements-wrapper">
+				{visibleElements.map((fullElement, idx) => {
+					const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
+					const color = defaultColor || colors?.[element];
 
-				return (
-					<S.Element data-testid="element" key={idx} color={color} rounded={rounded} size={size}>
-						{prefix}
-						{element}
+					return (
+						<S.Element data-testid="element" key={idx} color={color} rounded={rounded} size={size}>
+							{prefix}
+							{element}
+						</S.Element>
+					);
+				})}
+				{remainingElements > 0 && (
+					<S.Element
+						data-testid="remaining-element"
+						rounded={rounded}
+						size={size}
+						ref={elementRef}
+						onMouseEnter={handleMouseEnter}
+						onMouseLeave={handleMouseLeave}
+					>
+						+{remainingElements}
 					</S.Element>
-				);
-			})}
-			{remainingElements > 0 && (
-				<S.Element data-testid="remaining-element" rounded={rounded} size={size}>
-					+{remainingElements}
-					<S.Tooltip>
-						{elementsRows.map((row, idx) => {
-							return (
-								<S.Row data-testid="row-element" key={idx}>
-									{row.map((element, idx) => {
-										const color = defaultColor ? defaultColor : colors && colors[element] ? colors[element] : undefined;
-										return (
-											<S.Element data-testid="div-element" key={idx} color={color} rounded={rounded} size={size}>
-												{prefix}
-												{element}
-											</S.Element>
-										);
-									})}
-								</S.Row>
-							);
-						})}
-					</S.Tooltip>
-				</S.Element>
-			)}
-		</S.Wrapper>
+				)}
+			</S.Wrapper>
+			<PortalTooltip
+				elementsRows={elementsRows}
+				defaultColor={defaultColor}
+				colors={colors}
+				prefix={prefix}
+				rounded={rounded}
+				size={size}
+				tooltipRef={tooltipRef}
+				isVisible={isTooltipVisible}
+				elementRect={elementRect}
+			/>
+		</>
 	);
 };
 

package/src/components/ElementsTooltip/style.tsx

@@ -26,6 +26,7 @@ const Element = styled.div<{ color?: string; rounded: boolean; size: "S" | "M" }
   background-color: ${(p) => (p.color ? p.color : p.theme.colors.uiBackground01)};
   border-radius: ${(p) => (p.rounded ? "34px" : p.theme.radii.xs)};
   white-space: nowrap;
+  cursor: pointer;
 
   &:hover > ${Tooltip} {
     display: block;
@@ -36,4 +37,14 @@ const Row = styled.div`
   display: flex;
 `;
 
-export { Wrapper, Element, Tooltip, Row };
+const PortalTooltip = styled.div`
+  position: fixed;
+  z-index: 9999;
+  padding: ${(p) => p.theme.spacing.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowL};
+  background-color: ${(p) => p.theme.colors.uiBarBackground};
+  border-radius: ${(p) => p.theme.radii.s};
+  transform: translate(-50%, -100%);
+`;
+
+export { Wrapper, Element, Tooltip, Row, PortalTooltip };

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

@@ -1,9 +1,8 @@
-import React from "react";
-
-import { useModal } from "@ax/hooks";
-import { ISite } from "@ax/types";
+import { FileGallery, Icon, Modal, TextField } from "@ax/components";
+import { VALID_DOCUMENT_FORMATS } from "@ax/constants";
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
-import { Icon, Modal, TextField, FileGallery } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import type { ISite } from "@ax/types";
 
 import * as S from "./style";
 
@@ -12,11 +11,8 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 
 	const { isOpen, toggleModal } = useModal(false);
 
-	const validFormats =
-		allowedFormats && allowedFormats.length
-			? allowedFormats
-			: ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt", "mov", "mp4", "wmv", "avi", "webm", "mkv"];
-	const videoFormats = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
+	const hasCustomFormats = !!allowedFormats?.length;
+
 	const handleClick = () => {
 		if (!disabled) {
 			toggleModal();
@@ -25,11 +21,10 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 
 	const addFile = (newFile: any) => {
 		onChange(newFile);
-		toggleModal();
 	};
 
 	const handleOnClickUrl = () => {
-		if (value && value.url) {
+		if (value?.url) {
 			const win = window.open(value.url, "_blank");
 			if (win) {
 				win.focus();
@@ -60,9 +55,9 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 		},
 	];
 
-	const fileName = value && value.url ? value.url.split("/").pop() : "File title";
-	const fileDate = value && value.uploadDate ? getFormattedDateWithTimezone(value.uploadDate, "d MMM Y") : "--";
-	const fileSize = value && value.sizeBytes ? formatBytes(value.sizeBytes) : "-- KB";
+	const fileName = value?.url ? value.url.split("/").pop() : "File title";
+	const fileDate = value?.uploadDate ? getFormattedDateWithTimezone(value.uploadDate, "d MMM Y") : "--";
+	const fileSize = value?.sizeBytes ? formatBytes(value.sizeBytes) : "-- KB";
 
 	return (
 		<>
@@ -73,7 +68,7 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 					<div>{fileSize}</div>
 				</S.FileData>
 			</S.FileDataWrapper>
-			{value && value.url && (
+			{value?.url && (
 				<S.TextFieldWrapper data-testid="text-field-wrapper">
 					<TextField
 						name="url"
@@ -93,7 +88,8 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 						</S.IconWrapper>
 					</S.Field>
 					<S.HelpText>
-						Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos. Max.
+						Valid formats:{" "}
+						{hasCustomFormats ? allowedFormats.join(", ") : `${VALID_DOCUMENT_FORMATS.join(", ")} and videos`}. Max.
 						size: 50MB
 					</S.HelpText>
 				</>
@@ -108,7 +104,9 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 				</S.Component>
 			)}
 			<Modal isOpen={isOpen} hide={toggleModal} size="XL" title="Select file">
-				{isOpen && <FileGallery validFormats={validFormats} addFile={addFile} toggleModal={toggleModal} site={site} />}
+				{isOpen && (
+					<FileGallery customFormats={allowedFormats} addFile={addFile} toggleModal={toggleModal} site={site} />
+				)}
 			</Modal>
 		</>
 	);

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

@@ -28,7 +28,7 @@ const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
 	return (
 		<>
 			{toolbar ? (
-				<Wysiwyg title={title} site={site} inline={true} value={contentValue} onChange={handleChange} />
+				<Wysiwyg site={site} inline={true} value={contentValue} onChange={handleChange} />
 			) : (
 				<TextField value={contentValue} onChange={handleChange} />
 			)}

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

@@ -1,10 +1,9 @@
-import React, { memo, useEffect, useRef, useState } from "react";
-import { Icon, IconAction, Gallery, Modal, Image, FieldsBehavior } from "@ax/components";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 
+import { FieldsBehavior, Gallery, Icon, IconAction, Image, ImageDragAndDrop, Modal } from "@ax/components";
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
-import { IImage, ISite } from "@ax/types";
 import { useModal } from "@ax/hooks";
-import ImageDragAndDrop from "@ax/modules/MediaGallery/ImageDragAndDrop";
+import type { IImage, ISite } from "@ax/types";
 
 import * as S from "./style";
 
@@ -30,42 +29,17 @@ const ImageField = (props: IImageFieldProps) => {
 	const { isOpen, toggleModal } = useModal(isModalOpen);
 	const { isOpen: isOpenDD, toggleModal: toggleModalDD } = useModal(isModalOpen);
 	const [previewSrc, setPreviewSrc] = useState<string>();
-	const [previewHeight, setPreviewHeight] = useState<{ height: string | number }>({ height: "auto" });
 	const previewRef = useRef<HTMLDivElement>(null);
-	const [imageLoaded, setImageLoaded] = useState(false);
-
-	const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
 
 	const imageUrl = value ? (typeof value === "string" ? value : value.url) : "";
 	const imagePosition = value && typeof value === "object" ? value.position : "center";
 
 	useEffect(() => {
 		setPreviewSrc(imageUrl);
-		setImageLoaded(false);
 	}, [imageUrl]);
 
-	const calculateImageHeight = () => {
-		if (previewRef.current) {
-			const height = previewRef.current.getBoundingClientRect().height;
-
-			if (!cropPreview && height < 180) {
-				setPreviewHeight({ height: "180px" });
-			} else {
-				setPreviewHeight({ height: "auto" });
-			}
-		}
-	};
-
-	const handleImageLoad = () => {
-		if (!imageLoaded) {
-			calculateImageHeight();
-			setImageLoaded(true);
-		}
-	};
-
 	const handleDelete = () => {
 		if (!disabled) {
-			setPreviewHeight({ height: "auto" });
 			setPreviewSrc("");
 			onChange({});
 		}
@@ -76,7 +50,7 @@ const ImageField = (props: IImageFieldProps) => {
 			const url = typeof img === "string" ? img : img.url;
 			setPreviewSrc(url);
 			onChange(img);
-			setIsGalleryOpened && setIsGalleryOpened();
+			setIsGalleryOpened?.();
 			error && handleValidation && handleValidation(url, validators);
 			isOpenDD && toggleModalDD();
 		}
@@ -84,14 +58,14 @@ const ImageField = (props: IImageFieldProps) => {
 
 	const handleClick = () => {
 		if (!disabled) {
-			setIsGalleryOpened && setIsGalleryOpened();
+			setIsGalleryOpened?.();
 			noGallery ? toggleModalDD() : toggleModal();
 		}
 	};
 
 	const handleChange = () => {
 		if (!disabled) {
-			setIsGalleryOpened && setIsGalleryOpened();
+			setIsGalleryOpened?.();
 			noGallery ? toggleModalDD() : toggleModal();
 		}
 	};
@@ -113,6 +87,8 @@ const ImageField = (props: IImageFieldProps) => {
 
 	const handleUpload = (file: IImage[]) => getImageSelected(file[0]);
 
+	const imageElement = useMemo(() => <Image url={previewSrc} width="320" />, [previewSrc]);
+
 	return (
 		<>
 			<S.FieldWrapper
@@ -139,11 +115,7 @@ const ImageField = (props: IImageFieldProps) => {
 				</S.ImageDataWrapper>
 			)}
 			<S.Preview preview={!!previewSrc} data-testid="previewDiv" ref={previewRef}>
-				{previewSrc && (
-					<S.ImageContainer style={{ height: previewHeight.height }}>
-						<Image url={previewSrc} width={320} onLoad={handleImageLoad} />
-					</S.ImageContainer>
-				)}
+				{previewSrc && <S.ImageContainer cropPreview={cropPreview}>{imageElement}</S.ImageContainer>}
 				<S.PositionWrapper>
 					<S.PositionTitle>
 						<Icon name="grid" size="16" />
@@ -184,7 +156,6 @@ const ImageField = (props: IImageFieldProps) => {
 				<ImageDragAndDrop
 					siteID={site ? site.id : "global"}
 					isAllowedToUpload={true}
-					validFormats={validFormats}
 					handleUpload={handleUpload}
 					visible={false}
 				/>

package/src/components/Fields/ImageField/style.tsx

@@ -143,10 +143,21 @@ const ImageDataWrapper = styled.div`
   max-width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
 `;
 
-const ImageContainer = styled.div`
+const ImageContainer = styled.div<{ cropPreview?: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
+  ${(p) => (p.cropPreview ? "height: 180px;" : "min-height: 180px;")}
+  width: 100%;
+  overflow: hidden;
+
+  img {
+    object-fit: ${(p) => (p.cropPreview ? "cover" : "contain")};
+    object-position: center;
+    max-width: 100%;
+    height: 100%;
+    width: 100%;
+  }
 `;
 
 const FileName = styled.div`

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 
 import * as S from "./style";