@griddo/ax 11.2.12-rc.1 → 11.2.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.2.12-rc.1",
+  "version": "11.2.12",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -110,7 +110,6 @@
     "jsdom-global": "^3.0.2",
     "lodash.isequal": "4.5.0",
     "markdown-draft-js": "^2.2.1",
-    "masonic": "^4.0.1",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "pkg-dir": "^5.0.0",
@@ -226,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "74ebc755f184cd7dc5895a7efbc2a4bc0a314ab4"
+  "gitHead": "91ccea61b7695a0661c947f6f2570ca3c9ee52b3"
 }

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

@@ -13,7 +13,7 @@ afterEach(cleanup);
 const defaultProps = mock<ISideModalProps>();
 
 describe("SideModal component rendering", () => {
-  it("should render the component visible if isOpen is true", () => {
+  it("should render the component", () => {
     const handleClickMock = jest.fn();
     const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
     defaultProps.categories = [
@@ -23,7 +23,7 @@ describe("SideModal component rendering", () => {
     defaultProps.isOpen = true;
     defaultProps.theme = "default-theme";
     defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
-    defaultProps.onClick = handleClickMock;
+    defaultProps.handleClick = handleClickMock;
     defaultProps.toggleModal = toggleModalMock;
     defaultProps.optionsType = "modules";
 
@@ -35,11 +35,9 @@ describe("SideModal component rendering", () => {
 
     const sideModal = screen.getByTestId("side-modal");
     expect(sideModal).toBeTruthy();
-    const styles = getComputedStyle(sideModal);
-    expect(styles.left).toEqual("0px");
   });
 
-  it("should render the component hidden if isOpen is false", () => {
+  it("should not render the component if isOpen is false", () => {
     const handleClickMock = jest.fn();
     const toggleModalMock = jest.fn() as CalledWithMock<void, []> & (() => void);
     defaultProps.categories = [
@@ -49,7 +47,7 @@ describe("SideModal component rendering", () => {
     defaultProps.isOpen = false;
     defaultProps.theme = "default-theme";
     defaultProps.whiteList = ["EventsDistributor", "ArticlesDistributor"];
-    defaultProps.onClick = handleClickMock;
+    defaultProps.handleClick = handleClickMock;
     defaultProps.toggleModal = toggleModalMock;
     defaultProps.optionsType = "modules";
 
@@ -59,10 +57,8 @@ describe("SideModal component rendering", () => {
       </ThemeProvider>
     );
 
-    const sideModal = screen.getByTestId("side-modal");
-    expect(sideModal).toBeTruthy();
-    const styles = getComputedStyle(sideModal);
-    expect(styles.left).toEqual("-999px");
+    const sideModal = screen.queryByTestId("side-modal");
+    expect(sideModal).not.toBeTruthy();
   });
 
   it("should render optiontype as title", () => {
@@ -124,7 +120,7 @@ describe("SideModal component rendering", () => {
     defaultProps.isOpen = true;
     defaultProps.theme = "default-theme";
     defaultProps.whiteList = ["BasicContent", "CardCollection"];
-    defaultProps.onClick = handleClickMock;
+    defaultProps.handleClick = handleClickMock;
     defaultProps.toggleModal = toggleModalMock;
     defaultProps.optionsType = "modules";
 
@@ -159,7 +155,7 @@ describe("SideModal component rendering", () => {
     defaultProps.isOpen = true;
     defaultProps.theme = "default-theme";
     defaultProps.whiteList = ["LinkableImage", "Video"];
-    defaultProps.onClick = handleClickMock;
+    defaultProps.handleClick = handleClickMock;
     defaultProps.toggleModal = toggleModalMock;
     defaultProps.optionsType = "components";
 
@@ -186,7 +182,7 @@ describe("SideModal component events", () => {
     defaultProps.isOpen = true;
     defaultProps.theme = "default-theme";
     defaultProps.whiteList = ["Accordion", "AddressCollection"];
-    defaultProps.onClick = handleClickMock;
+    defaultProps.handleClick = handleClickMock;
     defaultProps.toggleModal = toggleModalMock;
     defaultProps.optionsType = "modules";
 
@@ -216,7 +212,7 @@ describe("SideModal component events", () => {
     defaultProps.isOpen = true;
     defaultProps.theme = "default-theme";
     defaultProps.whiteList = ["BasicContent", "CardCollection"];
-    defaultProps.onClick = handleClickMock;
+    defaultProps.handleClick = handleClickMock;
     defaultProps.toggleModal = toggleModalMock;
     defaultProps.optionsType = "modules";
 
@@ -255,7 +251,7 @@ describe("SideModal component events", () => {
     defaultProps.isOpen = true;
     defaultProps.theme = "default-theme";
     defaultProps.whiteList = ["BasicContent", "CardCollection"];
-    defaultProps.onClick = handleClickMock;
+    defaultProps.handleClick = handleClickMock;
     defaultProps.toggleModal = toggleModalMock;
     defaultProps.optionsType = "modules";
 

package/src/api/images.tsx

@@ -22,14 +22,9 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/image/",
     method: "DELETE",
   },
-  CREATE_THUMBNAIL: {
-    ...template,
-    endpoint: ["/thumbnail/contentId/", "/contentType/"],
-    method: "POST",
-  },
 };
 
-const createImage = async (data: FormData, setProgress?: (progress: number) => void) => {
+const createImage = async (data: any, setProgress?: (progress: number) => void) => {
   return sendUploadRequest(SERVICES.CREATE_IMAGE, data, setProgress);
 };
 
@@ -54,14 +49,4 @@ const deleteImage = async (imageID: number) => {
   return sendRequest(SERVICES.DELETE_IMAGE);
 };
 
-const createThumbnail = async (contentID: number, contentType: "form" | "navigation", data: FormData) => {
-  const {
-    host,
-    endpoint: [prefix, suffix],
-  } = SERVICES.CREATE_THUMBNAIL;
-  SERVICES.CREATE_THUMBNAIL.dynamicUrl = `${host}${prefix}${contentID}${suffix}${contentType}`;
-
-  return sendRequest(SERVICES.CREATE_THUMBNAIL, data);
-};
-
-export default { createImage, getImageInfo, updateImage, deleteImage, createThumbnail };
+export default { createImage, getImageInfo, updateImage, deleteImage };

package/src/api/pages.tsx

@@ -1,16 +1,9 @@
-import { AxiosResponse } from "axios";
 import { template } from "./config";
 import { IServiceConfig, sendRequest } from "./utils";
-import { IGetPagesParams } from "@ax/types";
 
 const PUBLIC_BASE_PATH = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
 
 const SERVICES: { [key: string]: IServiceConfig } = {
-  GET_PAGES: {
-    ...template,
-    endpoint: "/pages",
-    method: "GET",
-  },
   GET_PAGE_INFO: {
     ...template,
     endpoint: "/page/",
@@ -99,45 +92,6 @@ const SERVICES: { [key: string]: IServiceConfig } = {
   },
 };
 
-const getPages = async (params: IGetPagesParams, filterQuery = ""): Promise<AxiosResponse> => {
-  const { host, endpoint } = SERVICES.GET_PAGES;
-
-  const {
-    deleted,
-    page,
-    itemsPerPage,
-    query,
-    filterStructuredData,
-    lang,
-    format,
-    filterPages,
-    ignoreLang,
-    filterSites,
-    type,
-  } = params;
-
-  SERVICES.GET_PAGES.dynamicUrl = `${host}${endpoint}?deleted=${deleted}${filterQuery}`;
-
-  if (page && itemsPerPage)
-    SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&page=${page}&itemsPerPage=${itemsPerPage}`;
-  if (query && query.trim() !== "") SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&query=${query}`;
-  if (filterStructuredData)
-    SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&filterStructuredData=${filterStructuredData}`;
-  if (format) SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&format=${format}`;
-  if (type) SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&type=${type}`;
-  if (filterPages)
-    SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&filterPages=${filterPages.join(",")}`;
-  if (filterSites)
-    SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&filterSites=${filterSites.join(",")}`;
-  if (ignoreLang) SERVICES.GET_PAGES.dynamicUrl = SERVICES.GET_PAGES.dynamicUrl + `&ignoreLang=${ignoreLang}`;
-
-  const dataHeader = {
-    ...(lang && { lang }),
-  };
-
-  return sendRequest(SERVICES.GET_PAGES, null, dataHeader);
-};
-
 const getPageInfo = async (pageID: number) => {
   const { host, endpoint } = SERVICES.GET_PAGE_INFO;
   SERVICES.GET_PAGE_INFO.dynamicUrl = `${host}${endpoint}${pageID}`;
@@ -230,7 +184,7 @@ const duplicatePage = async (pageID: number, data?: any, siteID?: number) => {
 
 const bulkDelete = async (ids: any) => sendRequest(SERVICES.DELETE_BULK, { ids });
 
-const getTemplateConfig = async (siteID: number | null, template: string) => {
+const getTemplateConfig = async (siteID: number, template: string) => {
   const {
     host,
     endpoint: [prefix, middle, suffix],
@@ -278,7 +232,6 @@ const getPageTranslation = async (data: any, langID: number) => {
 };
 
 export default {
-  getPages,
   getPageInfo,
   updatePage,
   createPage,
@@ -295,5 +248,5 @@ export default {
   getPublicPage,
   pageCheck,
   getPageSummary,
-  getPageTranslation,
+  getPageTranslation
 };

package/src/api/selects.tsx

@@ -37,20 +37,18 @@ const getSelectSiteItems = async (siteId: number, entity: string, params: any, p
   return sendRequest(SERVICES.GET_SITE_ITEMS);
 };
 
-const getSelectItems = async (entity: string, entityId?: number | string, lang?: number) => {
+const getSelectItems = async (entity: string, entityId?: number | string) => {
   const { host, endpoint } = SERVICES.GET_ITEMS;
-  const filter = lang ? `?filterByLanguage=${lang}` : "";
   SERVICES.GET_ITEMS.dynamicUrl = entityId
-    ? `${host}${endpoint}/${entity}/${entityId}${filter}`
-    : `${host}${endpoint}/${entity}${filter}`;
+    ? `${host}${endpoint}/${entity}/${entityId}`
+    : `${host}${endpoint}/${entity}/`;
 
   return sendRequest(SERVICES.GET_ITEMS);
 };
 
-const getSelectSites = async (lang?: number) => {
+const getSelectSites = async () => {
   const { host, endpoint } = SERVICES.GET_SITES;
-  const filter = lang ? `?filterByLanguage=${lang}` : "";
-  SERVICES.GET_ITEMS.dynamicUrl = `${host}${endpoint}${filter}`;
+  SERVICES.GET_ITEMS.dynamicUrl = `${host}${endpoint}`;
 
   return sendRequest(SERVICES.GET_SITES);
 };

package/src/components/Browser/index.tsx

@@ -147,14 +147,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
       )}
       {showIframe ? (
         <S.FrameWrapper hasBorder={isPageEditor} data-testid="navbar-iframe-wrapper">
-          <iframe
-            title="Preview"
-            width={getWidth(resolution)}
-            height="100%"
-            src={urlPreview}
-            loading="lazy"
-            className="frame-content"
-          />
+          <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} loading="lazy" />
         </S.FrameWrapper>
       ) : (
         <S.Wrapper

package/src/components/Button/style.tsx

@@ -25,17 +25,13 @@ const Button = styled.button<{ iconFill: boolean }>`
     transition: opacity 0.1s;
   }
   :focus {
-    outline: none;
-  }
-  :focus-visible {
-    outline: ${(p) => `1px solid ${p.theme.color.interactive02}`};
+    outline: 1px solid ${(p) => p.theme.color.interactive02};
   }
   :hover:before {
     background-color: ${(p) => p.theme.color.overlayHoverDark};
     opacity: 1;
   }
-  :focus:before,
-  :focus-visible:before {
+  :focus:before {
     background-color: ${(p) => p.theme.color.overlayFocusDark};
     opacity: 1;
   }
@@ -48,7 +44,6 @@ const Button = styled.button<{ iconFill: boolean }>`
     background-color: ${(p) => p.theme.color.interactiveDisabled};
     :hover:before,
     :focus:before,
-    :focus-visible:before,
     :active:before {
       background-color: transparent;
     }

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import { connect } from "react-redux";
 
 import { FieldContainer } from "@ax/components";
@@ -7,7 +7,7 @@ import { getInnerFields } from "@ax/forms";
 import { IRootState } from "@ax/types";
 import { areEqual, filterThemeModules } from "@ax/helpers";
 
-const NavConnectedField = (props: any): JSX.Element => {
+const NavConnectedField = (props: any) => {
   const {
     whiteList,
     objKey,
@@ -109,7 +109,4 @@ const mapDispatchToProps = {
   updateEditorContent: navigationActions.updateEditorContent,
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(memo(NavConnectedField, areEqual) as typeof NavConnectedField);
+export default connect(mapStateToProps, mapDispatchToProps)(React.memo(NavConnectedField, areEqual));

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -31,7 +31,6 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     lang,
     themeElements,
     scrollEditorID,
-    isForm,
   } = props;
 
   const isConfig = selectedTab === "config";
@@ -47,7 +46,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     const mappedField = !isArr ? { ...field, key: fieldObjKey } : field;
     const handleUpdate = (fieldKey: string, value: any) =>
       updateValue(fieldKey, value, templateContent.editorID, slugTo);
-    const error = errors.find((err) => err.editorID === templateContent.editorID && err.key === key);
+    const error = errors.find((err: any) => err.editorID === templateContent.editorID && err.key === key);
     const isComputedField = Object.prototype.hasOwnProperty.call(field, "computed");
 
     const addedModules: string[] = modulesDataPacks.reduce((acc: string[], current: any) => {
@@ -82,13 +81,10 @@ export const TemplateManager = (props: IProps): JSX.Element => {
 
   return (
     <>
-      {isConfig && templateFields && !isForm && <S.Title>Template Options</S.Title>}
+      {isConfig && templateFields && <S.Title>Template Options</S.Title>}
       {templateFields &&
         templateFields
-          .filter((templateField: ISchemaField) => {
-            const isHidden = templateField.hidden || (isForm && !templateField.overwrite);
-            return !isHidden;
-          })
+          .filter((templateField: ISchemaField) => !templateField.hidden)
           .map((templateField: ISchemaField, index: number) => {
             const {
               whiteList,
@@ -160,7 +156,6 @@ interface IProps {
   lang: number;
   themeElements: IThemeElements | null;
   scrollEditorID: number | null;
-  isForm: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -8,7 +8,6 @@ import {
   areEqual,
   filterThemeModules,
   isTemplateExcludedFromTheme,
-  getFormTemplate,
 } from "@ax/helpers";
 import { IRootState } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
@@ -16,7 +15,7 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import TemplateManager from "./TemplateManager";
 import Field from "./Field";
 
-const PageConnectedField = (props: any): JSX.Element => {
+const PageConnectedField = (props: any) => {
   const {
     whiteList,
     objKey,
@@ -52,18 +51,15 @@ const PageConnectedField = (props: any): JSX.Element => {
   } = props;
 
   const isTemplate = field.type === "template";
-  const isFormTemplate = field.type === "formTemplate";
-
   const overrideableFields = ["header", "footer"];
   const isOverride = selectedContent.type && overrideableFields.includes(selectedContent.type);
   const isPageHome = componentType === "page" && selectedContent.isHome;
   const allowModifySlug = !selectedContent.id && !selectedContent.isHome;
   const isNewPage = componentType === "page" && !selectedContent.id;
   const error = errors.find((err: any) => err.editorID === selectedEditorID && err.key === objKey);
-  const isFormPage = selectedContent.component === "FormPage";
 
   let isTemplateActivated = true;
-  if (selectedContent.template && !isGlobal && !isFormTemplate) {
+  if (selectedContent.template && !isGlobal) {
     isTemplateActivated =
       activatedTemplates.find((temp: any) => temp.id === selectedContent.template.templateType) &&
       !isTemplateExcludedFromTheme(themeElements, selectedContent.template.templateType)
@@ -147,7 +143,7 @@ const PageConnectedField = (props: any): JSX.Element => {
   };
 
   if (isOverride) {
-    if (!field.modifiable) return <></>;
+    if (!field.modifiable) return null;
 
     updateValue = (key: string, value: any) => {
       updateEditorContent(selectedEditorID, key, value);
@@ -157,10 +153,8 @@ const PageConnectedField = (props: any): JSX.Element => {
     };
   }
 
-  if (isTemplate || isFormTemplate) {
-    const template = isFormTemplate
-      ? getFormTemplate(selectedContent[field.key].templateType)
-      : getTemplate(selectedContent[field.key].templateType);
+  if (isTemplate) {
+    const template = getTemplate(selectedContent[field.key].templateType);
 
     return (
       <TemplateManager
@@ -182,15 +176,10 @@ const PageConnectedField = (props: any): JSX.Element => {
         setHistoryPush={setHistoryPush}
         lang={lang.id}
         activatedModules={filteredActivatedModules}
-        isForm={isFormTemplate}
       />
     );
   }
 
-  if (isFormPage) {
-    return <></>;
-  }
-
   return (
     <Field
       whiteList={filteredWhiteList}
@@ -247,7 +236,4 @@ const mapDispatchToProps = {
   deleteError: pageEditorActions.deleteError,
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(memo(PageConnectedField, areEqual) as typeof PageConnectedField);
+export default connect(mapStateToProps, mapDispatchToProps)(memo(PageConnectedField, areEqual));

package/src/components/ConfigPanel/NavigationForm/Field/index.tsx

@@ -126,7 +126,7 @@ const Field = (props: IProps) => {
         <SideModal
           optionsType={optionsType}
           whiteList={orderedOptions}
-          onClick={handleReplace}
+          handleClick={handleReplace}
           toggleModal={toggleModal}
           isOpen={isOpen}
           theme={theme}

package/src/components/ErrorCenter/index.tsx

@@ -6,7 +6,6 @@ import * as S from "./style";
 
 const ErrorCenter = (props: IErrorCenterProps): JSX.Element => {
   const { errors, actions } = props;
-  const { goToError, goToPackage } = actions || {};
 
   const goToElement = (key: string) => {
     const element = document.getElementById(`gdd_${key}`);
@@ -26,10 +25,10 @@ const ErrorCenter = (props: IErrorCenterProps): JSX.Element => {
 
   const getErrorItem = (item: IErrorItem): JSX.Element => {
     const handleClick = () => {
-      if (item.hasDeactivatedPackage && goToPackage) {
-        goToPackage();
+      if (item.hasDeactivatedPackage) {
+        actions?.goToPackage();
       } else {
-        item.editorID !== null && goToError && goToError(item.editorID, item.tab, item.template, item.parentEditorID);
+        item.editorID !== null && actions?.goToError(item.editorID, item.tab, item.template);
         goToElement(item.key);
       }
     };
@@ -68,8 +67,8 @@ const ErrorCenter = (props: IErrorCenterProps): JSX.Element => {
 export interface IErrorCenterProps {
   errors: IErrorItem[];
   actions?: {
-    goToError(editorID: number | null, tab: string, template: boolean, parentEditorID?: number): void;
-    goToPackage?(): void;
+    goToError(editorID: number | null, tab: string, template: boolean): void;
+    goToPackage(): void;
   };
 }
 

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

@@ -26,7 +26,6 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     source,
     type,
     maxWidth,
-    filterLang,
   } = props;
 
   const initialState: IState = {
@@ -51,7 +50,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
                 ? await selects.getSelectSiteItems(site.id, entity, options, selectedContent.id)
                 : await selects.getSelectSiteItems(site.id, entity, options);
           } else {
-            result = await selects.getSelectItems(entity, entityId, filterLang);
+            result = await selects.getSelectItems(entity, entityId);
           }
 
           if (result && isReqOk(result.status)) {
@@ -185,7 +184,6 @@ export interface IAsyncSelectProps {
   source?: string;
   type?: string;
   maxWidth?: number;
-  filterLang?: number;
 }
 
 export default AsyncSelect;

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

@@ -18,7 +18,7 @@ const AddItemButton = (props: IProps) => {
         categories={categories}
         toggleModal={toggleModal}
         isOpen={isOpen}
-        onClick={handleClick}
+        handleClick={handleClick}
         theme={theme}
         showSearch
       />

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

@@ -49,7 +49,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   // fix for old not array values
   const fixedValue = Array.isArray(value) ? value : containerToComponentArray(value);
-  const componentIDs: number[] = fixedValue.map((element) => element.editorID);
+  const componentIDs: number[] = fixedValue.map((element: any) => element.editorID);
 
   const type = getTypefromKey(objKey);
   const { contentType = type } = field;
@@ -63,11 +63,8 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   );
 
   const selectedID = parseInt(localStorage.getItem("selectedID") || "0");
-  const isComponentModule = contentType === "components";
-  const isModuleArr = contentType === "modules" || contentType === "fields";
-  const isFormArr = contentType === "fields";
 
-  const { isOpen, toggleModal } = useModal(isFormArr, false);
+  const { isOpen, toggleModal } = useModal();
   const [isBulkOpen, setIsBulkOpen] = useState(false);
   const [draggingId, setDraggingId] = useState<number | null>(null);
   const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
@@ -86,6 +83,9 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     return fixedValue.length > 1 ? `#${index + 1} ${name}` : name;
   };
 
+  const isComponentModule = contentType === "components";
+  const isModuleArr = contentType === "modules" || contentType === "fields";
+
   const handleAddModule = (moduleType: string) =>
     addModuleAction && addModuleAction(moduleType, objKey, editorID, isComponentModule);
 
@@ -121,17 +121,18 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const ComponentList = React.memo(function ComponentList({ components }: any) {
     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 { editorID } = element;
+      const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
+        element,
+        activatedModules,
+        isModuleArr
+      );
       const text = getText(componentTitle || displayName, i);
       const isItemSelected = isSelected(editorID);
       const isDraggingSelected = selectedItems.all.includes(draggingId);
       const isGhosting = isItemSelected && !!draggingId && draggingId !== editorID && isDraggingSelected;
       const isMultiDragging = selectedItems.all.length > 1 && draggingId === editorID;
       const isActive = scrollEditorID === editorID;
-      const canDelete = !isFormArr || !fixed;
 
       return (
         <Draggable draggableId={`${editorID}`} index={i} key={editorID}>
@@ -149,9 +150,8 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               categories={categories}
               actions={actions}
               selectedContent={selectedContent}
-              disabled={disabled || isModuleDisabled}
+              disabled={disabled}
               canDuplicate={showAddItemButton && !isModuleDeactivated}
-              canDelete={canDelete}
               parentKey={objKey}
               theme={theme}
               arrayLength={components.length}
@@ -214,10 +214,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   };
 
   const handleDelete = () => {
-    const modulesToDelete = fixedValue
-      .filter((element) => selectedItems.all.includes(element.editorID) && (!isFormArr || !element.fixed))
-      .map((element) => element.editorID);
-    deleteModuleAction && deleteModuleAction(modulesToDelete, objKey);
+    deleteModuleAction && deleteModuleAction(selectedItems.all, objKey);
     resetBulkSelection();
   };
 
@@ -306,7 +303,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
           categories={categories}
           toggleModal={toggleModal}
           isOpen={isOpen}
-          onClick={handleModuleReplace}
+          handleClick={handleModuleReplace}
           theme={theme}
           showSearch
         />
@@ -323,7 +320,7 @@ export interface IMixableComponentArrayProps {
   value?: IModule[];
   selectedContent: any;
   editorID: number;
-  goTo: (editorID: number) => void;
+  goTo: (editorID: string) => void;
   actions?: {
     addComponentAction: (componentType: any, key?: string) => void;
     addModuleAction: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;

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

@@ -90,10 +90,11 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
   const ComponentList = React.memo(function ComponentList({ components }: any) {
     return components.map((element: any, i: number) => {
       const { editorID } = element;
-      const componentProps = getComponentProps(element, activatedModules, isModuleArr);
-      if (!componentProps) return <></>;
-      const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule, isModuleDisabled } =
-        componentProps;
+      const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
+        element,
+        activatedModules,
+        isModuleArr
+      );
       const text = getText(componentTitle || displayName, i);
       const isItemSelected = isSelected(editorID);
       const isDraggingSelected = selectedItems.all.includes(draggingId);
@@ -114,7 +115,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
               categories={categories}
               actions={actions}
               selectedContent={selectedContent}
-              disabled={disabled || isModuleDisabled}
+              disabled={disabled}
               canDuplicate={showAddItemButton && !isModuleDeactivated}
               parentKey={objKey}
               theme={theme}
@@ -218,7 +219,7 @@ export interface ISameComponentArrayProps {
   elementUniqueSelection: boolean;
   selectedContent: any;
   editorID: number;
-  goTo: (editorID: number) => void;
+  goTo: (editorID: string) => void;
   actions: {
     addComponentAction: (componentType: any, key?: string) => void;
     addModuleAction: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;