@griddo/ax 10.4.7 → 10.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.4.7",
+  "version": "10.4.9",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -231,5 +231,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0280c78de79a2b1f534c9aaaf16e6bb72bd5b652"
+  "gitHead": "798ce16f44f99f35c4eb372b04e54f8a1f433469"
 }

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

@@ -146,10 +146,10 @@ describe("Browser component rendering", () => {
     defaultProps.isPreview = false;
     defaultProps.showIframe = false;
     const deleteModuleActionMock = defaultProps.actions?.deleteModuleAction as jest.MockedFunction<
-      (editorID: number) => void
+      (editorID: number[]) => void
     >;
     const duplicateModuleActionMock = defaultProps.actions?.duplicateModuleAction as jest.MockedFunction<
-      (editorID: number) => Promise<number>
+      (editorID: number[]) => number
     >;
     const setSelectedContentActionMock = defaultProps.actions?.setSelectedContentAction as jest.MockedFunction<
       () => void
@@ -172,10 +172,10 @@ describe("Browser component rendering", () => {
     defaultProps.isPreview = true;
     defaultProps.showIframe = true;
     const deleteModuleActionMock = defaultProps.actions?.deleteModuleAction as jest.MockedFunction<
-      (editorID: number) => void
+      (editorID: number[]) => void
     >;
     const duplicateModuleActionMock = defaultProps.actions?.duplicateModuleAction as jest.MockedFunction<
-      (editorID: number) => Promise<number>
+      (editorID: number[]) => number
     >;
     const setSelectedContentActionMock = defaultProps.actions?.setSelectedContentAction as jest.MockedFunction<
       () => void

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

@@ -23,7 +23,7 @@ otherMixableModule.editorID = 2;
 otherMixableModule.component = "HeroCard";
 otherMixableModule.title = "Hero Section";
 otherMixableModule.modules = [];
-mixableProps.field = { type: "components" };
+mixableProps.field = { type: "components", title: "", key: "elements" };
 const testModule = {
   value: {
     editorID: 1,
@@ -59,7 +59,7 @@ describe("ComponentArraySelector component rendering", () => {
     otherMixableModule.title = "Hero Section";
     otherMixableModule.modules = [];
     mixableProps.value = [mixableModule, otherMixableModule];
-    mixableProps.field = { contentType: "modules" };
+    mixableProps.field = { contentType: "modules", title: "", key: "elements", type: "" };
     mixableProps.objKey = "elements";
     mixableProps.disabled = false;
     mixableProps.maxItems = 10;
@@ -68,6 +68,12 @@ describe("ComponentArraySelector component rendering", () => {
       addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
       replaceElementsInCollectionAction: jest.fn(),
+      duplicateModuleAction: jest.fn(),
+      copyModuleAction: jest.fn(),
+      moveModuleAction: jest.fn(),
+      pasteModuleAction: jest.fn(),
+      setNotificationAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
 
     render(
@@ -122,6 +128,7 @@ describe("ComponentArraySelector component rendering", () => {
     mixableProps.field = {
       contentType: "modules",
       key: "mainContent",
+      title: "", type: ""
     };
     mixableProps.objKey = "elements";
     mixableProps.disabled = false;
@@ -131,6 +138,12 @@ describe("ComponentArraySelector component rendering", () => {
       addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
       replaceElementsInCollectionAction: jest.fn(),
+      duplicateModuleAction: jest.fn(),
+      copyModuleAction: jest.fn(),
+      moveModuleAction: jest.fn(),
+      pasteModuleAction: jest.fn(),
+      setNotificationAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
     mixableProps.template = { component: "BasicTemplate" };
     mixableProps.availableDataPacks = [
@@ -197,8 +210,9 @@ describe("ComponentArraySelector component rendering", () => {
     ];
     const actualDate = new Date();
     mixableProps.moduleCopy = {
-      date: actualDate.toISOString(),
-      element: {
+      date: actualDate,
+      elements: [{
+        editorID: 1,
         component: "ArticlesDistributor",
         anchorID: null,
         verticalSpacing: "medium",
@@ -224,7 +238,7 @@ describe("ComponentArraySelector component rendering", () => {
           editorID: 40,
           parentEditorID: 39,
         },
-      },
+      }],
     };
     mixableProps.mandatory = true;
 
@@ -245,7 +259,7 @@ describe("ComponentArraySelector component events trigger", () => {
     otherMixableModule.title = "Hero Section";
     otherMixableModule.modules = [];
     mixableProps.value = [mixableModule, otherMixableModule];
-    mixableProps.field = { contentType: "modules" };
+    mixableProps.field = { contentType: "modules", title: "", key: "elements", type: "" };
     mixableProps.objKey = "elements";
     mixableProps.disabled = false;
     mixableProps.maxItems = 10;
@@ -254,6 +268,12 @@ describe("ComponentArraySelector component events trigger", () => {
       addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
       replaceElementsInCollectionAction: jest.fn(),
+      duplicateModuleAction: jest.fn(),
+      copyModuleAction: jest.fn(),
+      moveModuleAction: jest.fn(),
+      pasteModuleAction: jest.fn(),
+      setNotificationAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
 
     render(
@@ -276,11 +296,23 @@ describe("ComponentArraySelector component events trigger", () => {
     otherMixableModule.component = "HeroCard";
     otherMixableModule.title = "Hero Section";
     otherMixableModule.modules = [];
-    mixableProps.field = { type: "components" };
+    mixableProps.field = { type: "components", title: "", key: "elements" };
     mixableProps.value = [mixableModule];
     mixableProps.activatedModules = ["HeroSection"];
     mixableProps.whiteList = [];
     mixableProps.moduleCopy = null;
+    mixableProps.actions = {
+      addModuleAction: jest.fn(),
+      addComponentAction: jest.fn(),
+      deleteModuleAction: jest.fn(),
+      replaceElementsInCollectionAction: jest.fn(),
+      duplicateModuleAction: jest.fn(),
+      copyModuleAction: jest.fn(),
+      moveModuleAction: jest.fn(),
+      pasteModuleAction: jest.fn(),
+      setNotificationAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
+    };
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -6,7 +6,7 @@ import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
 import "@testing-library/jest-dom";
 import globalTheme from "@ax/themes/theme.json";
-import { INotification } from "@ax/types";
+import { IModule, INotification } from "@ax/types";
 import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
 
@@ -22,7 +22,7 @@ jest.mock("react-router-dom", () => ({
 const defaultProps = mock<IPasteModuleProps>();
 
 const mockedFunction = defaultProps.pasteModule as jest.MockedFunction<
-  (editorID: number, key: string) => Promise<{ error?: INotification }>
+  (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>
 >;
 const mockedNotification = defaultProps.setNotification as jest.MockedFunction<(notification: INotification) => void>;
 defaultProps.editorID = 1;
@@ -65,8 +65,8 @@ describe("ComponentArraySelector trigger events", () => {
     await act(async () => {
       fireEvent.click(iconButton);
     });
-    await expect(mockedFunction).toHaveBeenCalled();
-    await expect(mockedFunction(1, "")).resolves.toEqual({
+    expect(mockedFunction).toHaveBeenCalled();
+    await expect(mockedFunction(1, "", [{ editorID: 1, component: "BasicContent" }])).resolves.toEqual({
       error: {
         type: "warning",
         text: "This is a warning",
@@ -90,8 +90,8 @@ describe("ComponentArraySelector trigger events", () => {
     await act(async () => {
       fireEvent.click(iconButton);
     });
-    await expect(mockedFunction).toHaveBeenCalled();
-    await expect(mockedFunction(1, "")).resolves.toEqual({});
+    expect(mockedFunction).toHaveBeenCalled();
+    await expect(mockedFunction(1, "", [{ editorID: 1, component: "BasicContent" }])).resolves.toEqual({});
     expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
   });
 
@@ -109,8 +109,8 @@ describe("ComponentArraySelector trigger events", () => {
     await act(async () => {
       fireEvent.click(iconButton);
     });
-    await expect(mockedFunction).toHaveBeenCalled();
-    await expect(mockedFunction(1, "")).resolves.toEqual({ error: undefined });
+    expect(mockedFunction).toHaveBeenCalled();
+    await expect(mockedFunction(1, "", [{ editorID: 1, component: "BasicContent" }])).resolves.toEqual({ error: undefined });
     expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
   });
 });

package/src/__tests__/components/Fields/ComponentContainer/ComponentContainer.test.tsx

@@ -61,10 +61,11 @@ describe("ComponentContainer component rendering", () => {
     defaultProps.value = {};
     defaultProps.actionReplace = jest.fn();
     defaultProps.actions = {
+      addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
-      moveModuleAction: jest.fn(),
-      duplicateModuleAction: jest.fn,
+      duplicateModuleAction: jest.fn(),
       copyModuleAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
     defaultProps.canDuplicate = true;
     defaultProps.canReplace = true;
@@ -147,10 +148,11 @@ describe("ComponentContainer component rendering", () => {
     defaultProps.value = {};
     defaultProps.actionReplace = jest.fn();
     defaultProps.actions = {
+      addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
-      moveModuleAction: jest.fn(),
-      duplicateModuleAction: jest.fn,
+      duplicateModuleAction: jest.fn(),
       copyModuleAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
     defaultProps.canDuplicate = true;
     defaultProps.canReplace = true;
@@ -190,7 +192,11 @@ describe("ComponentContainer component rendering", () => {
       parentEditorID: 4,
     };
     defaultProps.actions = {
+      addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
+      duplicateModuleAction: jest.fn(),
+      copyModuleAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
     defaultProps.parentKey = "title";
     defaultProps.objKey = "content";
@@ -307,10 +313,11 @@ describe("ComponentContainer component rendering", () => {
     };
     defaultProps.actionReplace = jest.fn();
     defaultProps.actions = {
+      addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
-      moveModuleAction: jest.fn(),
-      duplicateModuleAction: jest.fn,
+      duplicateModuleAction: jest.fn(),
       copyModuleAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
     defaultProps.canDuplicate = true;
     defaultProps.canReplace = true;
@@ -345,10 +352,11 @@ describe("ComponentContainer component rendering", () => {
     };
     defaultProps.actionReplace = jest.fn();
     defaultProps.actions = {
+      addComponentAction: jest.fn(),
       deleteModuleAction: jest.fn(),
-      moveModuleAction: jest.fn(),
-      duplicateModuleAction: jest.fn,
+      duplicateModuleAction: jest.fn(),
       copyModuleAction: jest.fn(),
+      replaceModuleAction: jest.fn(),
     };
     defaultProps.canDuplicate = true;
     defaultProps.canReplace = true;
@@ -392,10 +400,11 @@ test("should render the FloatingMenu with options when click Component Container
   };
   defaultProps.actionReplace = jest.fn();
   defaultProps.actions = {
+    addComponentAction: jest.fn(),
     deleteModuleAction: jest.fn(),
-    moveModuleAction: jest.fn(),
-    duplicateModuleAction: jest.fn,
+    duplicateModuleAction: jest.fn(),
     copyModuleAction: jest.fn(),
+    replaceModuleAction: jest.fn(),
   };
   defaultProps.canDuplicate = true;
   defaultProps.canReplace = true;
@@ -440,10 +449,11 @@ test("should render the SideModal with options when click the replace action", a
   };
   defaultProps.actionReplace = jest.fn();
   defaultProps.actions = {
+    addComponentAction: jest.fn(),
     deleteModuleAction: jest.fn(),
-    moveModuleAction: jest.fn(),
-    duplicateModuleAction: jest.fn,
+    duplicateModuleAction: jest.fn(),
     copyModuleAction: jest.fn(),
+    replaceModuleAction: jest.fn(),
   };
   defaultProps.canDuplicate = true;
   defaultProps.canReplace = true;
@@ -496,10 +506,11 @@ test("should not render the drag handle if arrays length is lower than two", asy
   };
   defaultProps.actionReplace = jest.fn();
   defaultProps.actions = {
+    addComponentAction: jest.fn(),
     deleteModuleAction: jest.fn(),
-    moveModuleAction: jest.fn(),
-    duplicateModuleAction: jest.fn,
+    duplicateModuleAction: jest.fn(),
     copyModuleAction: jest.fn(),
+    replaceModuleAction: jest.fn(),
   };
   defaultProps.canDuplicate = true;
   defaultProps.canReplace = true;
@@ -537,10 +548,11 @@ test("should render the drag handle if arrays length is greater than two", async
   };
   defaultProps.actionReplace = jest.fn();
   defaultProps.actions = {
+    addComponentAction: jest.fn(),
     deleteModuleAction: jest.fn(),
-    moveModuleAction: jest.fn(),
-    duplicateModuleAction: jest.fn,
+    duplicateModuleAction: jest.fn(),
     copyModuleAction: jest.fn(),
+    replaceModuleAction: jest.fn(),
   };
   defaultProps.canDuplicate = true;
   defaultProps.canReplace = true;

package/src/components/Browser/index.tsx

@@ -91,11 +91,11 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
   const deleteModuleSelected = (editorID: number) => {
     actions?.setSelectedContentAction(0);
-    actions?.deleteModuleAction(editorID);
+    actions?.deleteModuleAction([editorID]);
   };
 
-  const duplicateModuleSelected = async (editorID: number) => {
-    const duplicatedEditorID = await actions?.duplicateModuleAction(editorID);
+  const duplicateModuleSelected = (editorID: number) => {
+    const duplicatedEditorID = actions?.duplicateModuleAction([editorID]);
     actions?.setSelectedContentAction(duplicatedEditorID);
   };
 
@@ -191,8 +191,8 @@ export interface IBrowserProps {
   browserRef?: React.RefObject<HTMLDivElement>;
   actions?: {
     setSelectedContentAction: any;
-    deleteModuleAction(editorID: number): void;
-    duplicateModuleAction(editorID: number): Promise<number>;
+    deleteModuleAction(editorID: number[]): void;
+    duplicateModuleAction(editorID: number[]): number;
   };
 }
 

package/src/components/BulkSelectionOptions/style.tsx

@@ -12,6 +12,7 @@ const BulkHeader = styled.div<{ isScrolling?: boolean }>`
 const BulkActionsWrapper = styled.div`
   display: flex;
   width: 100%;
+  align-items: center;
 `;
 
 const BulkActions = styled.div`

package/src/components/ConfigPanel/Header/index.tsx

@@ -20,16 +20,16 @@ const Header = (props: IHeaderProps) => {
 
   const removeItem = () => {
     setSelectedContent(parentID);
-    deleteModuleAction(editorID);
+    deleteModuleAction([editorID]);
   };
 
   const duplicateItem = () => {
-    duplicateModuleAction(editorID);
+    duplicateModuleAction([editorID]);
     setSelectedContent(parentID);
   };
 
   const copyItem = () => {
-    const isCopied = copyModuleAction(editorID);
+    const isCopied = copyModuleAction([editorID]);
     isCopied && toggleToast();
   };
 
@@ -71,7 +71,11 @@ const Header = (props: IHeaderProps) => {
 
 export interface IHeaderProps {
   schema: any;
-  actions: any;
+  actions: {
+    deleteModuleAction: (editorID: number[], key?: string) => void;
+    duplicateModuleAction: (editorID: number[], key?: string) => number;
+    copyModuleAction: (editorID: number[]) => boolean;
+  };
   breadcrumb: IBreadcrumbItem[];
   selectedParent: any;
   activatedModules: string[];

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

@@ -6,4 +6,7 @@ export const FieldGroup = styled.div<{ full?: boolean }>`
   max-height: ${(p) => (p.full ? "auto" : `calc(${p.theme.spacing.l} * 3)`)};
   overflow: auto;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
+  & > div {
+    margin-bottom: ${p => p.theme.spacing.xxs}
+  }
 `;

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

@@ -17,6 +17,7 @@ const CheckField = (props: ICheckFieldProps): JSX.Element => {
     icon,
     className,
     inversed = false,
+    light = false,
   } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -28,7 +29,7 @@ const CheckField = (props: ICheckFieldProps): JSX.Element => {
 
   return (
     <S.Wrapper className={className}>
-      <S.Label data-testid="check-field-label" disabled={disabled} inversed={inversed}>
+      <S.Label data-testid="check-field-label" disabled={disabled} inversed={inversed} hasText={!!title}>
         {icon ? (
           <S.IconLabelWrapper data-testid="check-field-icon-label">
             <S.IconWrapper>
@@ -55,6 +56,7 @@ const CheckField = (props: ICheckFieldProps): JSX.Element => {
           error={error}
           indeterminate={indeterminate}
           inversed={inversed}
+          className={light ? "light" : ""}
         />
       </S.Label>
     </S.Wrapper>
@@ -73,6 +75,7 @@ export interface ICheckFieldProps {
   icon?: string;
   inversed?: boolean;
   className?: string;
+  light?: boolean;
 }
 
 export default CheckField;

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

@@ -2,12 +2,11 @@ import styled from "styled-components";
 
 const Wrapper = styled.div``;
 
-const Label = styled.label<{ disabled: boolean | undefined; inversed: boolean }>`
+const Label = styled.label<{ disabled: boolean | undefined; inversed: boolean; hasText: boolean }>`
   ${(p) => p.theme.textStyle.fieldContent};
-  display: block;
   position: relative;
+  display: ${(p) => (p.hasText ? "block" : "inline")};
   padding-left: calc(${(p) => p.theme.spacing.s} + ${(p) => p.theme.spacing.xs});
-  margin-bottom: ${(p) => p.theme.spacing.xs};
   cursor: pointer;
   user-select: none;
   color: ${(p) =>
@@ -60,6 +59,23 @@ const CheckMark = styled.span<{
     border-width: ${(p) => (p.indeterminate ? "0 2px 0 0" : "0 2px 2px 0")};
     transform: ${(p) => (p.indeterminate ? "rotate(90deg)" : "rotate(45deg)")};
   }
+
+  &.light {
+    border-color: ${(p) =>
+      p.error
+        ? p.theme.color.error
+        : p.checked || p.indeterminate
+        ? p.theme.color.interactive01
+        : p.theme.color.textLowEmphasis};
+    &:hover {
+      border-color: ${(p) =>
+        p.error
+          ? p.theme.color.error
+          : p.checked || p.indeterminate
+          ? p.theme.color.interactive01
+          : p.theme.color.interactiveInactive};
+    }
+  }
 `;
 
 const Input = styled.input`

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

@@ -24,9 +24,10 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
 
     if (selectAllOption) {
       const valueArrayNoAll = valueArray.filter((item: string | number) => item !== selectAllOption);
-
+      const uniqueOption = options && options.length === 2;
       const isAllSelected =
-        newValue.value === selectAllOption || (options && valueArrayNoAll.length === options.length - 1);
+        newValue.value === selectAllOption ||
+        (options && valueArrayNoAll.length === options.length - 1 && !uniqueOption);
 
       valueArray = isAllSelected ? [selectAllOption] : valueArrayNoAll;
     }

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

@@ -4,4 +4,7 @@ export const FieldGroup = styled.div`
   width: 100%;
   max-width: calc(${p => p.theme.spacing.xl} * 5);
   overflow: auto;
+  & > div {
+    margin-bottom: ${p => p.theme.spacing.xxs}
+  }
 `;

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { CheckField, Icon, IconAction } from "@ax/components";
+import { IBulkAction } from "@ax/types";
+
+import * as S from "./style";
+
+const BulkHeader = (props: IProps): JSX.Element => {
+  const { checkState, selectItems, totalItems, actions, toggleBulk } = props;
+
+  const handleClick = () => toggleBulk();
+
+  return (
+    <S.Wrapper>
+      <S.CloseWrapper onClick={handleClick}>
+        <Icon name="close" size="16" />
+      </S.CloseWrapper>
+      <S.SelectAllCheckField>
+        <CheckField
+          key="selectAll"
+          name="selectAll"
+          value="selectAll"
+          onChange={selectItems}
+          checked={checkState.isAllSelected}
+          indeterminate={checkState.indeterminate}
+          disabled={false}
+          error={false}
+        />
+      </S.SelectAllCheckField>
+      <S.Counter>{totalItems} selected</S.Counter>
+      <S.BulkActions>
+        {actions.map((item: IBulkAction) => (
+          <IconAction key={item.text} icon={item.icon || ""} onClick={item.action} size="s" />
+        ))}
+      </S.BulkActions>
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  checkState: any;
+  selectItems: () => void;
+  totalItems: number;
+  toggleBulk: () => void;
+  actions: IBulkAction[];
+}
+
+export default BulkHeader;

package/src/components/Fields/ComponentArray/MixableComponentArray/BulkHeader/style.tsx

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  width: 236px;
+  height: 32px;
+  margin-top: ${(p) => p.theme.spacing.xxs};
+  border-radius: ${(p) => p.theme.radii.s};
+  align-items: center;
+  padding: ${(p) => `0 ${p.theme.spacing.xs}`};
+`;
+
+const SelectAllCheckField = styled.div`
+  margin-left: ${(p) => p.theme.spacing.xxs};
+  width: ${(p) => p.theme.spacing.s};
+`;
+
+const CloseWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  cursor: pointer;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.iconMediumEmphasis};
+    }
+  }
+`;
+
+const Counter = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const BulkActions = styled.div`
+  display: flex;
+  margin-left: auto;
+  button {
+    margin-left: ${(p) => p.theme.spacing.xxs};
+  }
+`;
+
+export { Wrapper, CloseWrapper, SelectAllCheckField, Counter, BulkActions };

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

@@ -2,23 +2,24 @@ import React, { memo } from "react";
 
 import { useToast } from "@ax/hooks";
 import { Tooltip, IconAction, Toast } from "@ax/components";
-import { INotification } from "@ax/types";
+import { IModule, INotification } from "@ax/types";
 
 const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
-  const { pasteModule, setNotification, setHistoryPush, editorID, isModuleCopyUnavailable, arrayKey } = props;
+  const {
+    pasteModule,
+    setNotification,
+    setHistoryPush,
+    editorID,
+    isModuleCopyUnavailable,
+    arrayKey,
+    modulesToPaste,
+    slots,
+  } = props;
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
   const handlePasteModule = async () => {
-    if (!isModuleCopyUnavailable) {
-      const pasteResult = await pasteModule(editorID, arrayKey);
-      if (pasteResult.error) {
-        const { type, text } = pasteResult.error;
-        setNotification && setNotification({ type, text });
-      } else {
-        toggleToast();
-      }
-    } else {
+    if (isModuleCopyUnavailable) {
       const notification: INotification = {
         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.",
@@ -27,6 +28,22 @@ const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
       };
       setNotification && setNotification(notification);
     }
+
+    if (slots && modulesToPaste.length > slots) {
+      const notification: INotification = {
+        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);
+    } else {
+      const pasteResult = await pasteModule(editorID, arrayKey, modulesToPaste);
+      if (pasteResult?.error) {
+        const { type, text } = pasteResult.error;
+        setNotification && setNotification({ type, text });
+      } else {
+        toggleToast();
+      }
+    }
   };
 
   return (
@@ -40,12 +57,14 @@ const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
 };
 
 export interface IPasteModuleProps {
-  pasteModule: (editorID: number, key: string) => Promise<{ error?: INotification }>;
+  pasteModule: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
   setNotification?: (notification: INotification) => void;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   editorID: number;
   isModuleCopyUnavailable: boolean;
   arrayKey: string;
+  modulesToPaste: IModule[];
+  slots: number | null;
 }
 
 export default memo(PasteModuleButton);