@griddo/ax 11.10.36 → 11.10.37

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.36",
+	"version": "11.10.37",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "add7dbd9c6603c224517fa238d8540ce94edafff"
+	"gitHead": "44575bb6e91aca2e9213a7bbf8de78a05481557c"
 }

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/PasteModuleButton.test.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import PasteModuleButton, {
-	IPasteModuleProps,
-} from "@ax/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton";
+import PasteModuleButton, { IPasteModuleProps } from "@ax/components/Fields/ComponentArray/PasteModuleButton";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import "@testing-library/jest-dom";

package/src/components/Browser/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { findByEditorID } from "@ax/forms";
 import { copyTextToClipboard } from "@ax/helpers";
@@ -38,7 +38,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	const isFormEditor = editorType === "form";
 
 	const [resolution, setResolution] = useState("desktop");
-	const { isVisible, toggleToast, setIsVisible } = useToast();
+	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 
 	useOnMessageReceivedFromIframe(actions);
 
@@ -78,33 +78,34 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	const copyUrl = () => {
 		const sharedUrl = `${domain}/page-preview/${id}/${entity}`;
 		copyTextToClipboard(sharedUrl).then(
-			function () {
-				toggleToast();
+			() => {
+				toggleToast("URL Copied");
 			},
-			function (err) {
+			(err) => {
 				console.error("Could not copy text: ", err);
 			},
 		);
 	};
 
-	const toastProps = {
-		setIsVisible,
-		message: "URL Copied",
-	};
-
 	const deleteModuleSelected = (editorID: number) => {
 		actions?.setSelectedContentAction(0);
-		actions?.deleteModuleAction([editorID]);
+		actions?.deleteModuleAction?.([editorID]);
 	};
 
 	const duplicateModuleSelected = (editorID: number) => {
-		const duplicatedEditorID = actions?.duplicateModuleAction([editorID]);
-		actions?.setSelectedContentAction(duplicatedEditorID);
+		const duplicatedEditorID = actions?.duplicateModuleAction?.([editorID]);
+		duplicatedEditorID && actions?.setSelectedContentAction(duplicatedEditorID);
+	};
+
+	const copyModuleSelected = (editorID: number) => {
+		const isCopied = actions?.copyModuleAction?.([editorID]);
+		isCopied && toggleToast("1 module copied to clipboard");
 	};
 
 	const moduleActions = {
 		deleteModuleAction: deleteModuleSelected,
 		duplicateModuleAction: duplicateModuleSelected,
+		copyModuleAction: copyModuleSelected,
 	};
 
 	return (
@@ -181,7 +182,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 					/>
 				</S.Wrapper>
 			)}
-			{isVisible && <Toast {...toastProps} />}
+			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 		</S.BrowserWrapper>
 	);
 };
@@ -203,10 +204,11 @@ export interface IBrowserProps {
 	browserRef?: React.RefObject<HTMLDivElement>;
 	editorType?: "form" | "page";
 	actions?: {
-		setSelectedContentAction: any;
-		deleteModuleAction(editorID: number[]): void;
-		duplicateModuleAction(editorID: number[]): number;
-		setScrollEditorIDAction(editorID: number | null): void;
+		setSelectedContentAction(editorID: number): void;
+		deleteModuleAction?(editorID: number[]): void;
+		duplicateModuleAction?(editorID: number[]): number;
+		copyModuleAction?(editorID: number[]): number | boolean;
+		setScrollEditorIDAction?(editorID: number | null): void;
 	};
 }
 

package/src/components/BrowserContent/index.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import * as components from "components";
 import { builderSSR, ssrHelpers, SiteProvider } from "components";
-import { Core, Preview } from "@griddo/core";
-import { ILanguage, ISocialState } from "@ax/types";
+import { type Core, Preview } from "@griddo/core";
+import type { ILanguage, ISocialState } from "@ax/types";
 
 const BrowserContent = (props: IProps) => {
 	const {
@@ -28,11 +28,12 @@ const BrowserContent = (props: IProps) => {
 	const INSTANCE = process.env.REACT_APP_INSTANCE || process.env.GRIDDO_REACT_APP_INSTANCE;
 
 	const useInstanceExternalAssets = useCallback(() => {
-		if (builderSSR && builderSSR.onRenderBody) {
+		if (builderSSR?.onRenderBody) {
 			builderSSR.onRenderBody(ssrHelpers);
 		}
 	}, []);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: fix
 	useEffect(useInstanceExternalAssets, [useInstanceExternalAssets]);
 
 	return (
@@ -84,8 +85,9 @@ interface IProps {
 	): void;
 	selectHoverEditorID?(editorID: number, parentEditorID: number): void;
 	moduleActions?: {
-		deleteModuleAction(editorID: number): void;
-		duplicateModuleAction(editorID: number): void;
+		deleteModuleAction?(editorID: number): void;
+		duplicateModuleAction?(editorID: number): void;
+		copyModuleAction?(editorID: number): void;
 	};
 }
 

package/src/components/Fields/ComponentArray/BulkHeader/index.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import { CheckField, Icon, IconAction } from "@ax/components";
-import { IBulkAction } from "@ax/types";
+import type { IBulkAction } from "@ax/types";
 
 import * as S from "./style";
 

package/src/components/Fields/ComponentArray/MixableComponentArray/AddItemButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import { memo } from "react";
 import { IconAction, SideModal, Tooltip } from "@ax/components";
 
 const AddItemButton = (props: IProps) => {

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -1,22 +1,15 @@
-import React, { useEffect, useState } from "react";
-import {
-	closestCenter,
-	DndContext,
-	DragEndEvent,
-	DragStartEvent,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from "@dnd-kit/core";
+import { useEffect, useState, memo } from "react";
+import { closestCenter, DndContext, useSensor, useSensors, PointerSensor } from "@dnd-kit/core";
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
-import { IModule, INotification, ISchemaField } from "@ax/types";
+import type { IComponent, IModule, INotification, ISchemaField, ITemplate, ModuleCategoryInfo } from "@ax/types";
 import { ComponentContainer, SideModal, Toast } from "@ax/components";
 import { useBulkSelection, useModal, useToast } from "@ax/hooks";
 
 import { getComponentProps, containerToComponentArray, getTypefromKey, getModulesToPaste } from "../helpers";
 import AddItemButton from "./AddItemButton";
-import PasteModuleButton from "./PasteModuleButton";
+import PasteModuleButton from "../PasteModuleButton";
 import BulkHeader from "../BulkHeader";
 
 import * as S from "./style";
@@ -72,11 +65,19 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 		field,
 	);
 
-	const selectedID = parseInt(localStorage.getItem("selectedID") || "0");
+	const selectedID = parseInt(localStorage.getItem("selectedID") || "0", 10);
 	const isComponentModule = contentType === "components";
 	const isModuleArr = contentType === "modules" || contentType === "fields";
 	const isFormArr = contentType === "fields";
 
+	const isAbletoAdd = (!maxItems || fixedValue.length < maxItems) && !disabled && whiteList.length > 0;
+	const showAddItemButton = isAbletoAdd && (!isFormArr || (isFormArr && !!setSelectedFormFieldAction));
+	const showPasteModuleButton = isAbletoAdd && modulesToPaste.length > 0;
+
+	const canReplace = maxItems === 1 && whiteList.length > 1;
+	const displayReplaceSideModal = fixedValue.length > 0 && canReplace;
+	const optionsType = isModuleArr ? "modules" : "components";
+
 	const { isOpen, toggleModal } = useModal(false, false);
 	const [isBulkOpen, setIsBulkOpen] = useState(false);
 	const [draggingId, setDraggingId] = useState<number | null>(null);
@@ -103,21 +104,21 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 		return fixedValue.length > 1 ? `#${index + 1} ${name}` : name;
 	};
 
-	const handleAddModule = (moduleType: string) =>
-		addModuleAction && addModuleAction(moduleType, objKey, editorID, isComponentModule);
+	const handleAddModule = (moduleType: string) => addModuleAction?.(moduleType, objKey, editorID, isComponentModule);
 
-	const handleAddComponent = (componentType: string) => addComponentAction && addComponentAction(componentType, objKey);
+	const handleAddComponent = (componentType: string) => addComponentAction?.(componentType, objKey);
 
 	const handleAdd = isModuleArr ? handleAddModule : handleAddComponent;
 
-	const handleModuleReplace = (moduleType: string) => {
+	const handleModuleReplace = (moduleType: string | IComponent) => {
 		const { modules } = selectedContent;
+		if (typeof moduleType !== "string") return;
 		if (isModuleArr && deleteModuleAction && modules?.length > 0) {
 			const currentModule: IModule = modules[0];
 			deleteModuleAction([currentModule.editorID], objKey);
 			handleAddModule(moduleType);
 		} else {
-			replaceElementsInCollectionAction && replaceElementsInCollectionAction(moduleType);
+			replaceElementsInCollectionAction?.(moduleType);
 		}
 	};
 
@@ -126,29 +127,15 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 	const handleToggleModal = () =>
 		isFormArr && setSelectedFormFieldAction ? setSelectedFormFieldAction(field) : toggleModal();
 
-	const isAbletoAdd = (!maxItems || fixedValue.length < maxItems) && !disabled && whiteList.length > 0;
-
-	const showAddItemButton = isAbletoAdd && (!isFormArr || (isFormArr && !!setSelectedFormFieldAction));
-
-	const showPasteModuleButton =
-		isAbletoAdd &&
-		(isModuleArr || objKey === "componentModules") &&
-		(modulesToPaste.length > 0 || unavailableModules.length > 0);
-
-	const canReplace = maxItems === 1 && whiteList.length > 1;
-	const displayReplaceSideModal = fixedValue.length > 0 && canReplace;
-	const optionsType = isModuleArr ? "modules" : "components";
-
 	const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
-	const ComponentList = React.memo(function ComponentList({ components }: { components: IModule[] }): JSX.Element {
+	const ComponentList = memo(function ComponentList({ components }: { components: IModule[] }): JSX.Element {
 		return (
 			<>
 				{components.map((element: IModule, i: number) => {
 					const { editorID, fixed } = element;
 					const componentProps = getComponentProps(element, activatedModules, isModuleArr);
-					const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule, isModuleDisabled } =
-						componentProps;
+					const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModuleDisabled } = componentProps;
 					const text = getText(componentTitle || displayName, i);
 					const isItemSelected = isSelected(editorID);
 					const isDraggingSelected = selectedItems.all.includes(draggingId);
@@ -177,7 +164,6 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 							parentKey={objKey}
 							theme={theme}
 							arrayLength={components.length}
-							isModule={isModule}
 							isSelected={isItemSelected}
 							onChange={addToBulkSelection}
 							hasMenu={selectedItems.all.length > 0}
@@ -216,7 +202,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 	};
 
 	const handleCopy = () => {
-		const modulesCopied = copyModuleAction && copyModuleAction(selectedItems.all);
+		const modulesCopied = copyModuleAction?.(selectedItems.all);
 		modulesCopied &&
 			toggleToast(`${modulesCopied} module${selectedItems.all.length > 1 ? "s" : ""} copied to clipboard`);
 	};
@@ -227,9 +213,9 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 				type: "error",
 				text: "Unable to duplicate modules: The destination area has a limit on the number of modules allowed. Please adjust the selection accordingly.",
 			};
-			setNotificationAction && setNotificationAction(notification);
+			setNotificationAction?.(notification);
 		} else {
-			duplicateModuleAction && duplicateModuleAction(selectedItems.all, objKey);
+			duplicateModuleAction?.(selectedItems.all, objKey);
 			resetBulkSelection();
 		}
 	};
@@ -238,7 +224,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 		const modulesToDelete = fixedValue
 			.filter((element) => selectedItems.all.includes(element.editorID) && (!isFormArr || !element.fixed))
 			.map((element) => element.editorID);
-		deleteModuleAction && deleteModuleAction(modulesToDelete, objKey);
+		deleteModuleAction?.(modulesToDelete, objKey);
 		resetBulkSelection();
 	};
 
@@ -346,7 +332,7 @@ export interface IMixableComponentArrayProps {
 	editorID: number;
 	goTo: (editorID: number) => void;
 	actions?: {
-		addComponentAction: (componentType: any, key?: string) => void;
+		addComponentAction: (componentType: IComponent | string, key?: string) => void;
 		addModuleAction: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
 		deleteModuleAction: (editorID: number[], key?: string) => void;
 		duplicateModuleAction: (editorID: number[], key?: string) => number;
@@ -355,10 +341,10 @@ export interface IMixableComponentArrayProps {
 		moveModuleAction: (moduleID: number[], selectedContent: any, newIndex: number, key: string) => void;
 		pasteModuleAction: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
 		setNotificationAction: (notification: INotification) => void;
-		replaceModuleAction: (module: any, parent: any, objKey: string) => void;
+		replaceModuleAction: (module: IComponent, parent: any, objKey: string) => void;
 		setSelectedFormFieldAction: (field: ISchemaField | null) => void;
 	};
-	categories?: any[];
+	categories?: ModuleCategoryInfo[];
 	disabled?: boolean;
 	activatedModules: string[];
 	objKey: string;
@@ -367,7 +353,7 @@ export interface IMixableComponentArrayProps {
 	theme: string;
 	moduleCopy: { date: Date; elements: IModule[] } | null;
 	availableDataPacks: Record<string, any>[];
-	template: any;
+	template: ITemplate;
 	setHistoryPush?: (path: string, isEditor: boolean) => void;
 	scrollEditorID: number | null;
 }

package/src/components/Fields/ComponentArray/{MixableComponentArray/PasteModuleButton → PasteModuleButton}/index.tsx

@@ -1,8 +1,8 @@
-import React, { memo } from "react";
+import { memo } from "react";
 
 import { useToast } from "@ax/hooks";
 import { Tooltip, IconAction, Toast } from "@ax/components";
-import { IModule, INotification } from "@ax/types";
+import type { IModule, INotification } from "@ax/types";
 
 const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
 	const {
@@ -24,9 +24,9 @@ const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
 				type: "error",
 				text: "You are trying to paste a module that is part of a disabled content type package. To copy it, you must first activate it.",
 				btnText: "Activate package",
-				onClick: () => setHistoryPush && setHistoryPush("/sites/settings/content-types", false),
+				onClick: () => setHistoryPush?.("/sites/settings/content-types", false),
 			};
-			setNotification && setNotification(notification);
+			setNotification?.(notification);
 		}
 
 		if (slots && modulesToPaste.length > slots) {
@@ -34,12 +34,12 @@ const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
 				type: "error",
 				text: "Unable to paste modules: The destination area has a limit on the number of modules allowed. Please adjust the selection accordingly.",
 			};
-			setNotification && setNotification(notification);
+			setNotification?.(notification);
 		} else {
 			const pasteResult = await pasteModule(editorID, arrayKey, modulesToPaste);
 			if (pasteResult?.error) {
 				const { type, text } = pasteResult.error;
-				setNotification && setNotification({ type, text });
+				setNotification?.({ type, text });
 			} else {
 				toggleToast(`${modulesToPaste.length} module${modulesToPaste.length > 1 ? "s" : ""} pasted from clipboard`);
 			}

package/src/components/Fields/ComponentArray/SameComponentArray/AddItemButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import { memo } from "react";
 import { IconAction, Tooltip } from "@ax/components";
 
 const AddItemButton = (props: IProps) => {

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -1,22 +1,16 @@
-import React, { useEffect, useState } from "react";
-import {
-	closestCenter,
-	DndContext,
-	DragEndEvent,
-	DragStartEvent,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from "@dnd-kit/core";
+import { useEffect, useState, memo } from "react";
+import { closestCenter, DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
-import { IModule, INotification, ISchemaField } from "@ax/types";
-import { ComponentContainer } from "@ax/components";
-import { useBulkSelection } from "@ax/hooks";
+import type { IComponent, IModule, INotification, ISchemaField, ITemplate, ModuleCategoryInfo } from "@ax/types";
+import { ComponentContainer, Toast } from "@ax/components";
+import { useBulkSelection, useToast } from "@ax/hooks";
 
 import AddItemButton from "./AddItemButton";
-import { getComponentProps, getTypefromKey } from "../helpers";
+import { getComponentProps, getModulesToPaste, getTypefromKey } from "../helpers";
 import BulkHeader from "../BulkHeader";
+import PasteModuleButton from "../PasteModuleButton";
 
 import * as S from "./style";
 
@@ -37,19 +31,32 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 		field,
 		mandatory,
 		theme,
+		moduleCopy,
+		availableDataPacks,
+		template,
+		setHistoryPush,
 	} = props;
 
 	const type = getTypefromKey(objKey);
 	const { contentType = type } = field;
-	const componentIDs: number[] = value && value.length ? value.map((element) => element.editorID) : [];
+	const componentIDs: number[] = value?.length ? value.map((element) => element.editorID) : [];
 
-	const { addModuleAction, addComponentAction, setNotificationAction, duplicateModuleAction, deleteModuleAction } =
-		actions || {};
+	const {
+		addModuleAction,
+		addComponentAction,
+		setNotificationAction,
+		duplicateModuleAction,
+		deleteModuleAction,
+		pasteModuleAction,
+		copyModuleAction,
+	} = actions || {};
 
 	const [isBulkOpen, setIsBulkOpen] = useState(false);
 	const [draggingId, setDraggingId] = useState<number | null>(null);
 	const { resetBulkSelection, selectedItems, isSelected, checkState, addToBulkSelection, selectAllItems } =
 		useBulkSelection(componentIDs);
+	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
+
 
 	const sensors = useSensors(
 		useSensor(PointerSensor, {
@@ -65,23 +72,31 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 		}
 	}, [selectedItems.all]);
 
+	const { modulesToPaste, unavailableModules } = getModulesToPaste(
+		moduleCopy,
+		whiteList,
+		availableDataPacks,
+		template,
+		field,
+	);
+
 	const getText = (name: string, index: number) => {
 		return value && value.length > 1 ? `#${index + 1} ${name}` : name;
 	};
 
-	const componentType = field.reference ? selectedContent[field.reference] : selectedContent["kind"];
+	const componentType = field.reference ? selectedContent[field.reference] : selectedContent.kind;
 
 	const isModuleArr = contentType === "modules";
 	const isComponentModule = contentType === "components";
+	const showAddItemButton = !maxItems || (value && value.length < maxItems);
+	const showPasteModuleButton = showAddItemButton && modulesToPaste.length > 0;
 
 	const handleAddModule = (moduleType: string) => addModuleAction(moduleType, objKey, editorID, isComponentModule);
 
-	const handleAddComponent = () => addComponentAction && addComponentAction(componentType, objKey);
+	const handleAddComponent = () => addComponentAction?.(componentType, objKey);
 
 	const handleAdd = isModuleArr ? handleAddModule : handleAddComponent;
 
-	const showAddItemButton = !maxItems || (value && value.length < maxItems);
-
 	const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
 	const handleDragStart = (event: DragStartEvent) => {
@@ -106,15 +121,14 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 		setDraggingId(null);
 	};
 
-	const ComponentList = React.memo(function ComponentList({ components }: { components: IModule[] }): JSX.Element {
+	const ComponentList = memo(function ComponentList({ components }: { components: IModule[] }): JSX.Element {
 		return (
 			<>
 				{components.map((element, i: number) => {
 					const { editorID } = element;
 					const componentProps = getComponentProps(element, activatedModules, isModuleArr);
-					if (!componentProps) return <></>;
-					const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule, isModuleDisabled } =
-						componentProps;
+					if (!componentProps) return null;
+					const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModuleDisabled } = componentProps;
 					const text = getText(componentTitle || displayName, i);
 					const isItemSelected = isSelected(editorID);
 					const isDraggingSelected = selectedItems.all.includes(draggingId);
@@ -122,33 +136,31 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 					const isMultiDragging = selectedItems.all.length > 1 && draggingId === editorID;
 
 					return (
-						<>
-							<ComponentContainer
-								isArray={true}
-								key={editorID}
-								editorID={editorID}
-								goTo={goTo}
-								text={text}
-								moduleTitle={moduleTitle}
-								whiteList={whiteList}
-								categories={categories}
-								actions={actions}
-								selectedContent={selectedContent}
-								disabled={disabled || isModuleDisabled}
-								canDuplicate={showAddItemButton && !isModuleDeactivated}
-								canDelete={true}
-								parentKey={objKey}
-								theme={theme}
-								arrayLength={components.length}
-								isModule={isModule}
-								isSelected={isItemSelected}
-								onChange={addToBulkSelection}
-								hasMenu={selectedItems.all.length > 0}
-								isMultiDragging={isMultiDragging}
-								draggingCount={selectedItems.all.length}
-								className={`${isGhosting ? "ghosting" : ""} ${isMultiDragging ? "dragging" : ""}`}
-							/>
-						</>
+						<ComponentContainer
+							isArray={true}
+							key={editorID}
+							editorID={editorID}
+							goTo={goTo}
+							text={text}
+							moduleTitle={moduleTitle}
+							whiteList={whiteList}
+							categories={categories}
+							actions={actions}
+							selectedContent={selectedContent}
+							disabled={disabled || isModuleDisabled}
+							canDuplicate={showAddItemButton && !isModuleDeactivated}
+							canDelete={true}
+							parentKey={objKey}
+							theme={theme}
+							arrayLength={components.length}
+							isSelected={isItemSelected}
+							onChange={addToBulkSelection}
+							hasMenu={selectedItems.all.length > 0}
+							isMultiDragging={isMultiDragging}
+							draggingCount={selectedItems.all.length}
+							className={`${isGhosting ? "ghosting" : ""} ${isMultiDragging ? "dragging" : ""}`}
+							toggleToast={toggleToast}
+						/>
 					);
 				})}
 			</>
@@ -161,19 +173,30 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 				type: "error",
 				text: "Unable to duplicate modules: The destination area has a limit on the number of modules allowed. Please adjust the selection accordingly.",
 			};
-			setNotificationAction && setNotificationAction(notification);
+			setNotificationAction?.(notification);
 		} else {
-			duplicateModuleAction && duplicateModuleAction(selectedItems.all, objKey);
+			duplicateModuleAction?.(selectedItems.all, objKey);
 			resetBulkSelection();
 		}
 	};
 
 	const handleDelete = () => {
-		deleteModuleAction && deleteModuleAction(selectedItems.all, objKey);
+		deleteModuleAction?.(selectedItems.all, objKey);
 		resetBulkSelection();
 	};
 
+	const handleCopy = () => {
+		const modulesCopied = copyModuleAction?.(selectedItems.all);
+		modulesCopied &&
+			toggleToast(`${modulesCopied} module${selectedItems.all.length > 1 ? "s" : ""} copied to clipboard`);
+	};
+
 	const bulkActions = [
+		{
+			icon: "copy",
+			text: "copy",
+			action: handleCopy,
+		},
 		{
 			icon: "duplicate",
 			text: "duplicate",
@@ -210,9 +233,23 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 				) : (
 					<S.Subtitle>{value?.length || 0} items</S.Subtitle>
 				)}
-				{showAddItemButton && !disabled && (
-					<AddItemButton handleClick={handleAdd} tooltipText={isModuleArr ? "Add module" : "Add component"} />
-				)}
+				<S.ActionsWrapper data-testid="mixableComponentWrapper">
+					{showPasteModuleButton && pasteModuleAction && (
+						<PasteModuleButton
+							editorID={editorID}
+							isModuleCopyUnavailable={unavailableModules.length > 0}
+							pasteModule={pasteModuleAction}
+							setNotification={setNotificationAction}
+							setHistoryPush={setHistoryPush}
+							arrayKey={objKey}
+							modulesToPaste={modulesToPaste}
+							slots={maxItems ? maxItems - value.length : null}
+						/>
+					)}
+					{showAddItemButton && !disabled && (
+						<AddItemButton handleClick={handleAdd} tooltipText={isModuleArr ? "Add module" : "Add component"} />
+					)}
+				</S.ActionsWrapper>
 			</S.ItemRow>
 			{value && Array.isArray(value) && (
 				<DndContext
@@ -226,6 +263,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 					</SortableContext>
 				</DndContext>
 			)}
+			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 		</S.Wrapper>
 	);
 };
@@ -240,7 +278,7 @@ export interface ISameComponentArrayProps {
 	editorID: number;
 	goTo: (editorID: number) => void;
 	actions: {
-		addComponentAction: (componentType: any, key?: string) => void;
+		addComponentAction: (componentType: IComponent | string, key?: string) => void;
 		addModuleAction: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
 		deleteModuleAction: (editorID: number[], key?: string) => void;
 		duplicateModuleAction: (editorID: number[], key?: string) => number;
@@ -249,15 +287,19 @@ export interface ISameComponentArrayProps {
 		moveModuleAction: (moduleID: number[], selectedContent: any, newIndex: number, key: string) => void;
 		pasteModuleAction: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
 		setNotificationAction: (notification: INotification) => void;
-		replaceModuleAction: (module: any, parent: any, objKey: string) => void;
+		replaceModuleAction: (module: IComponent, parent: any, objKey: string) => void;
 	};
-	categories?: any;
+	categories?: ModuleCategoryInfo[];
 	disabled?: boolean;
 	activatedModules: string[];
 	objKey: string;
 	field: ISchemaField;
 	mandatory?: boolean;
 	theme: string;
+	moduleCopy: { date: Date; elements: IModule[] } | null;
+	availableDataPacks: Record<string, any>[];
+	template: ITemplate;
+	setHistoryPush?: (path: string, isEditor: boolean) => void;
 }
 
 export default SameComponentArray;