@griddo/ax 11.0.27-rc.0 → 11.0.28

package/config/griddo-config/cx-polyfills/componentsBundle.js

@@ -1,4 +1,4 @@
-export { default as config } from "__componentsConfig";
+export * from "__componentsConfig";
 export * from "__componentsIndex";
 export { default as builderSSR } from "__ssrConfig";
 export * as ssrHelpers from "__ssrHelpers";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.0.27-rc.0",
+  "version": "11.0.28",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "15beb457f7fddc15b542afc42274a740b267da67"
+  "gitHead": "b1fd110a0e9185bf5708cf2cee9e733b61dd15b6"
 }

package/scripts/griddo-sync-schemas.js

@@ -7,32 +7,36 @@ const dotenv = require("dotenv");
 const path = require("path");
 const fs = require("fs");
 const compiler = require("../config/webpackSchemas.config");
+
 const { resolveComponentsPath, resolveComponentsGriddoConfig } = require("../config/griddo-config");
 
 dotenv.config({ path: findUp.sync(".env") });
 
-const { API_URL, REACT_APP_API_ENDPOINT, GRIDDO_API_URL, developerKey } = process.env;
-const apiURL = API_URL || REACT_APP_API_ENDPOINT || GRIDDO_API_URL;
-const tempFile = "__griddo_config_parsed__.js";
+const API_URL = process.env.API_URL || process.env.REACT_APP_API_ENDPOINT;
+// TODO: Cambiar por /schemas al pasar a producción
+const API_ENDPOINT = `${API_URL}/schemas`;
+const API_METHOD = "PUT";
+const API_DEV_KEY = process.env.developerKey;
 
-(async () => {
+async function main() {
   console.clear();
+  const tempFile = "__griddo_config_parsed__.js";
+  const componentsGriddoConfig = resolveComponentsGriddoConfig();
 
-  const instanceGriddoConfigFile = resolveComponentsGriddoConfig();
-  const inputFile = instanceGriddoConfigFile;
+  const inputFile = componentsGriddoConfig;
   const outputFile = `${__dirname}/${tempFile}`;
 
-  try {
-    if (fs.existsSync(outputFile)) {
-      fs.unlinkSync(outputFile);
-    }
+  if (fs.existsSync(outputFile)) {
+    fs.unlinkSync(outputFile);
+  }
 
+  try {
     if (!fs.existsSync(inputFile)) {
-      throw new Error(`Griddo config file not found: ${inputFile}`);
+      throw new Error(`Source schemas config not found: ${inputFile}`);
     }
 
     await compiler({
-      input: instanceGriddoConfigFile,
+      input: componentsGriddoConfig,
       output: { filename: tempFile, path: __dirname },
     });
 
@@ -45,30 +49,10 @@ const tempFile = "__griddo_config_parsed__.js";
   }
 
   const _griddoConfig = require(path.resolve(__dirname, `./${tempFile}`));
-  const griddoConfig = _griddoConfig.default;
-
-  const gcs = griddoConfig.schemas;
-
-  const _schemas = {
-    all: {
-      ...gcs.ui.modules,
-      ...gcs.ui.components,
-    },
-    modules: gcs.ui.modules,
-    templates: gcs.ui.templates,
-    structuredData: gcs.contentTypes.structuredData,
-    dataPacks: gcs.contentTypes.dataPacks,
-    dataPacksCategories: gcs.contentTypes.dataPacksCategories,
-    languages: gcs.config.languages,
-    menus: gcs.config.menus,
-    menuItems: gcs.config.menuItems,
-    richTextConfig: gcs.config.richTextConfig,
-    forms: gcs.forms,
-  };
+  const griddoConfig = _griddoConfig.default || _griddoConfig;
 
-  // La propiedad computed en los schemas de datos estructurados se perderá si
-  // no la stringificamos primero.
-  parseComputedPropInStructuredDataSchemas(_schemas.structuredData);
+  // La propiedad computed en los schemas de datos estructurados se perderá si no la stringificamos primero
+  checkComputedSchemas(griddoConfig.schemas);
 
   const { version } = require(resolveComponentsPath("package.json"));
 
@@ -80,31 +64,29 @@ const tempFile = "__griddo_config_parsed__.js";
     dataPacksCategories: {},
     languages: [],
   };
-  const data = { version, ...emptySchemas, ..._schemas };
-  console.log("En sync schemas mandamos este data: \n");
-  console.log(data);
-  console.log("----------");
+
   try {
     await axios({
-      url: `${apiURL}/schemas`,
-      headers: { authorization: developerKey },
-      method: "PUT",
-      data,
+      url: API_ENDPOINT,
+      headers: {
+        authorization: API_DEV_KEY,
+      },
+      method: API_METHOD,
+      data: { version, ...emptySchemas, ...griddoConfig.schemas },
     });
-    console.log(`${chalk.green(" ✔")} Schemas`);
+    console.log("📦 Schemas ✓");
   } catch (e) {
     console.log(chalk.red("ERROR:"), e.response?.data?.message || e.response || e.message);
     process.exit(1);
   }
-})();
+}
+
+const checkComputedSchemas = (schemas) => {
+  const structuredDataSchemas = schemas.structuredData;
 
-/**
- * Parse the computed property of structured data schemas to string.
- * @mutates
- */
-function parseComputedPropInStructuredDataSchemas(schemas) {
-  for (const schema in schemas) {
-    const fields = schemas[schema].schema?.fields;
+  for (const structuredData in structuredDataSchemas) {
+    const value = structuredDataSchemas[structuredData];
+    const fields = value.schema?.fields;
 
     if (!fields) continue;
 
@@ -114,4 +96,6 @@ function parseComputedPropInStructuredDataSchemas(schemas) {
       if (computed) field.computed = computed.toString();
     }
   }
-}
+};
+
+main();

package/src/GlobalStore.tsx

@@ -21,7 +21,6 @@ import { redirectsReducer, redirectsInitialState } from "./containers/Redirects/
 import { analyticsReducer, analyticsInitialState } from "./containers/Analytics/reducer";
 import { integrationsReducer, integrationsInitialState } from "./containers/Integrations/reducer";
 import { fileDriveReducer, fileDriveInitialState } from "./containers/FileDrive/reducer";
-import { formsReducer, formsInitialState } from "./containers/Forms/reducer";
 import { LOGOUT } from "./containers/App/constants";
 
 import { IRootState } from "@ax/types";
@@ -57,7 +56,6 @@ export class GlobalStore {
       analytics: analyticsReducer as Reducer<any, Action<any>>,
       integrations: integrationsReducer as Reducer<any, Action<any>>,
       fileDrive: fileDriveReducer as Reducer<any, Action<any>>,
-      forms: formsReducer as Reducer<any, Action<any>>,
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
@@ -80,7 +78,6 @@ export class GlobalStore {
           analytics: analyticsInitialState,
           integrations: integrationsInitialState,
           fileDrive: fileDriveInitialState,
-          forms: formsInitialState,
         };
       }
 

package/src/__tests__/components/TableFilters/LiveFilter/LiveFilter.test.tsx

@@ -17,7 +17,6 @@ const defaultProps = mock<ILiveFilterProps>();
 
 describe("LiveFilter component rendering", () => {
   it("should render live filter", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -53,7 +52,6 @@ describe("LiveFilter component rendering", () => {
   });
 
   it("should render the component with no options", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -91,7 +89,6 @@ describe("LiveFilter component rendering", () => {
 
 describe("LiveFilter events", () => {
   it("should render check group on click", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -132,7 +129,6 @@ describe("LiveFilter events", () => {
   });
 
   it("should check option on click", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -176,7 +172,6 @@ describe("LiveFilter events", () => {
   });
 
   it("should uncheck selected option on click and select 'All' option", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -225,7 +220,6 @@ describe("LiveFilter events", () => {
   });
 
   it("should call filterItems action on change", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 

package/src/api/index.tsx

@@ -18,7 +18,6 @@ import redirects from "./redirects";
 import analytics from "./analytics";
 import roles from "./roles";
 import integrations from "./integrations";
-import forms from "./forms";
 
 export {
   sites,
@@ -41,5 +40,4 @@ export {
   analytics,
   roles,
   integrations,
-  forms,
 };

package/src/components/Browser/index.tsx

@@ -28,13 +28,11 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     showIframe,
     browserRef,
     actions,
-    editorType = "page",
   } = props;
 
   const { id, entity } = content;
   const domain = window.location.origin;
-  const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}`;
-  const isPageEditor = editorType === "page";
+  const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}`;
 
   const [resolution, setResolution] = useState("desktop");
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -108,45 +106,43 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
   return (
     <S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef}>
-      {isPageEditor && (
-        <S.NavBar>
-          <S.NavUrl>{url}</S.NavUrl>
-          {isPreview && (
-            <S.NavActions data-testid="nav-actions-wrapper">
-              <S.IconWrapper data-testid="icon-wrapper-browser" onClick={copyUrl}>
-                <Tooltip content="Copy url to share draft" bottom>
-                  <Icon name="share" size="24" />
-                </Tooltip>
-              </S.IconWrapper>
-              <S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
-                <Tooltip content="Desktop" bottom>
-                  <Icon name="desktop" size="24" />
-                </Tooltip>
-              </S.IconWrapper>
-              <S.IconWrapper
-                data-testid="icon-res-tablet"
-                active={resolution === "tablet"}
-                onClick={() => setResolution("tablet")}
-              >
-                <Tooltip content="Tablet" bottom>
-                  <Icon name="tablet" size="24" />
-                </Tooltip>
-              </S.IconWrapper>
-              <S.IconWrapper
-                data-testid="icon-res-phone"
-                active={resolution === "phone"}
-                onClick={() => setResolution("phone")}
-              >
-                <Tooltip content="Mobile" bottom>
-                  <Icon name="phone" size="24" />
-                </Tooltip>
-              </S.IconWrapper>
-            </S.NavActions>
-          )}
-        </S.NavBar>
-      )}
+      <S.NavBar>
+        <S.NavUrl>{url}</S.NavUrl>
+        {isPreview && (
+          <S.NavActions data-testid="nav-actions-wrapper">
+            <S.IconWrapper data-testid="icon-wrapper-browser" onClick={copyUrl}>
+              <Tooltip content="Copy url to share draft" bottom>
+                <Icon name="share" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
+              <Tooltip content="Desktop" bottom>
+                <Icon name="desktop" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper
+              data-testid="icon-res-tablet"
+              active={resolution === "tablet"}
+              onClick={() => setResolution("tablet")}
+            >
+              <Tooltip content="Tablet" bottom>
+                <Icon name="tablet" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper
+              data-testid="icon-res-phone"
+              active={resolution === "phone"}
+              onClick={() => setResolution("phone")}
+            >
+              <Tooltip content="Mobile" bottom>
+                <Icon name="phone" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+          </S.NavActions>
+        )}
+      </S.NavBar>
       {showIframe ? (
-        <S.FrameWrapper hasBorder={isPageEditor} data-testid="navbar-iframe-wrapper">
+        <S.FrameWrapper data-testid="navbar-iframe-wrapper">
           <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} loading="lazy" />
         </S.FrameWrapper>
       ) : (
@@ -193,7 +189,6 @@ export interface IBrowserProps {
   isPreview?: boolean;
   showIframe?: boolean;
   browserRef?: React.RefObject<HTMLDivElement>;
-  editorType?: "form" | "page";
   actions?: {
     setSelectedContentAction: any;
     deleteModuleAction(editorID: number[]): void;

package/src/components/Browser/style.tsx

@@ -46,10 +46,10 @@ const IconWrapper = styled.div<{ active?: boolean }>`
   }
 `;
 
-const FrameWrapper = styled.div<{ hasBorder: boolean }>`
-  border-left: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
+const FrameWrapper = styled.div`
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
-  border-bottom: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   display: flex;
   justify-content: center;
   height: 100%;

package/src/components/BrowserContent/index.tsx

@@ -76,7 +76,7 @@ interface IProps {
   footer?: any;
   languageID: number;
   pageLanguages: Core.Page["pageLanguages"];
-  renderer: "editor" | "preview" | "forms";
+  renderer: "editor" | "preview";
   selectEditorID?(
     selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
     parentComponent: string | undefined | null,

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

@@ -35,7 +35,7 @@ export const Form = (props: IFormProps): JSX.Element => {
     (!isGlobal && isAllowedToEditConfigPages) || (isGlobal && isAllowedToEditGlobalData);
   const isAllowedToEditPageSEO = (!isGlobal && isAllowedToEditSiteSeo) || (isGlobal && isAllowedToEditGlobalSeo);
 
-  const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title.toLowerCase() === selectedTab);
+  const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
 
   const generateFields = (field: ISchemaField) => {
@@ -76,15 +76,14 @@ export const Form = (props: IFormProps): JSX.Element => {
         .filter((value: string | boolean) => !!value);
     } else {
       mappedTabs = schema.configTabs.reduce((acc: string[], curr: ISchemaTab) => {
-        const currTitle = curr.title.toLowerCase();
         if (
           !isPageSchema ||
           (isPageSchema &&
-            ((currTitle === "content" && isAllowedToEditPageContent) ||
-              (currTitle === "config" && isAllowedToEditPageConfig) ||
-              (currTitle === "seo & analytics" && isAllowedToEditPageSEO)))
+            ((curr.title === "content" && isAllowedToEditPageContent) ||
+              (curr.title === "config" && isAllowedToEditPageConfig) ||
+              (curr.title === "SEO & Analytics" && isAllowedToEditPageSEO)))
         ) {
-          return [...acc, currTitle];
+          return [...acc, curr.title];
         }
         return acc;
       }, []);

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { config } from "components";
+import { themes } from "components";
 
 import { Icon, NoteField, Tabs } from "@ax/components";
 import { INotification, ISchema } from "@ax/types";
@@ -9,8 +9,6 @@ import ConnectedField from "../Form/ConnectedField";
 
 import * as S from "./style";
 
-const themes = config.schemas.config.themes;
-
 const noteText = "This is Global content and you cannot edit it here. To do so, you must go to the Global page";
 const noteTitle = "Global content";
 const errorText = "You don't have the permissions to edit the original content.";

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

@@ -66,7 +66,6 @@ const Header = (props: IHeaderProps) => {
         setBreadcrumbOld(breadcrumb);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [headerRef, breadcrumb, setHeaderHeight]);
 
   const removeItem = () => {

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

@@ -2,10 +2,11 @@ import React, { memo } from "react";
 import { IconAction, SideModal, Tooltip } from "@ax/components";
 
 const AddItemButton = (props: IProps) => {
-  const { handleClick, whiteList, categories, theme, isOpen, contentType, toggleModal } = props;
+  const { handleClick, whiteList, isModuleArr, categories, theme, isOpen, toggleModal } = props;
+  const optionsType = isModuleArr ? "modules" : "components";
   const addAction = whiteList.length <= 1 ? () => handleClick(whiteList[0]) : toggleModal;
 
-  const tooltip = contentType === "fields" ? "Add field" : contentType === "module" ? "Add module" : "Add component";
+  const tooltip = isModuleArr ? "Add module" : "Add component";
 
   return (
     <>
@@ -13,7 +14,7 @@ const AddItemButton = (props: IProps) => {
         <IconAction icon="add" onClick={addAction} />
       </Tooltip>
       <SideModal
-        optionsType={contentType}
+        optionsType={optionsType}
         whiteList={whiteList}
         categories={categories}
         toggleModal={toggleModal}
@@ -29,11 +30,11 @@ const AddItemButton = (props: IProps) => {
 interface IProps {
   handleClick: any;
   whiteList: any[];
+  isModuleArr: boolean;
   categories?: any;
   theme: string;
   toggleModal: () => void;
   isOpen: boolean;
-  contentType: string;
 }
 
 export default memo(AddItemButton);

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

@@ -84,7 +84,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   };
 
   const isComponentModule = contentType === "components";
-  const isModuleArr = contentType === "modules" || contentType === "fields";
+  const isModuleArr = contentType === "modules";
 
   const handleAddModule = (moduleType: string) =>
     addModuleAction && addModuleAction(moduleType, objKey, editorID, isComponentModule);
@@ -97,7 +97,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     const { modules } = selectedContent;
     if (isModuleArr && deleteModuleAction && modules?.length > 0) {
       const currentModule: IModule = modules[0];
-      deleteModuleAction([currentModule.editorID], objKey);
+      deleteModuleAction([currentModule.editorID], contentType);
       handleAddModule(moduleType);
     } else {
       replaceElementsInCollectionAction && replaceElementsInCollectionAction(moduleType);
@@ -278,8 +278,8 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               whiteList={whiteList}
               categories={categories}
               handleClick={handleAdd}
+              isModuleArr={isModuleArr}
               theme={theme}
-              contentType={contentType}
             />
           )}
         </S.ActionsWrapper>
@@ -333,7 +333,7 @@ export interface IMixableComponentArrayProps {
     setNotificationAction: (notification: INotification) => void;
     replaceModuleAction: (module: any, parent: any, objKey: string) => void;
   };
-  categories?: any[];
+  categories?: any;
   disabled?: boolean;
   activatedModules: string[];
   objKey: string;

package/src/components/Fields/ComponentArray/helpers.tsx

@@ -19,7 +19,7 @@ const getComponentProps = (element: IModule, activatedModules: string[], isModul
   const schemaType = getSchemaType(component);
   const displayName = getDisplayName(component);
   const title = getComponentTitle(component, element.title);
-  const isModule = schemaType === "module" || schemaType === "formComponent";
+  const isModule = schemaType === "module";
   const moduleTitle = isModule && displayName !== title && title;
   const componentTitle = !isModule && displayName !== title && title;
   const isModuleDeactivated = isModuleArr && activatedModules && !activatedModules.includes(component);

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -158,6 +158,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
         preferenceLanguage: state.preferenceLanguage,
         lang: state.lang,
         site: state.site,
+        fields: state.fields,
       };
 
       onChange(newValue);
@@ -353,7 +354,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
                     <S.ConfigWrapper>
                       <S.SubConfigContent hasMargin={true}>
                         <S.OptionDescription isOpen={configState.isCustomLangOpen}>
-                          By default, content is shown in the page's language. Activate this option to{" "}
+                          By default, content is shown in the page&apos;s language. Activate this option to{" "}
                           <strong>specifically set a different language</strong> for the content shown in this
                           distributor.
                         </S.OptionDescription>

package/src/components/Fields/ReferenceField/Context/index.tsx

@@ -96,6 +96,7 @@ export interface IReferenceState {
   preferenceLanguage: boolean;
   lang?: number;
   site?: number;
+  fields?: string[];
 }
 
 export interface IRefField {
@@ -109,6 +110,7 @@ export interface IRefField {
   preferenceLanguage?: boolean;
   lang?: number;
   site?: number;
+  fields?: string[];
 }
 
 export interface IFilter {

package/src/components/Fields/ReferenceField/ItemList/index.tsx

@@ -14,7 +14,7 @@ const ItemList = (props: IProps) => {
   const { items, currentSite, handleListDelete, handleListMove, site } = props;
 
   const { state, setState, setReorderElements } = useReference();
-  const { fixed, selectedItems, sourceTitles, fullRelations } = state;
+  const { fixed, selectedItems, sourceTitles, fullRelations, fields } = state;
 
   const getParams = useCallback(() => {
     const params = {
@@ -22,6 +22,7 @@ const ItemList = (props: IProps) => {
       fixed: items,
       fullRelations,
       site,
+      fields,
     };
 
     return params;

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -94,8 +94,8 @@ const ManualPanel = (props: IProps) => {
     setState((state: IReferenceState) => ({ ...state, showSelected: !state.showSelected }));
 
   const handleAdd = () => {
-    const { mode, fixed, fullRelations, site, lang } = state;
-    const newValue = { mode, fixed, fullRelations, site, lang };
+    const { mode, fixed, fullRelations, site, lang, fields } = state;
+    const newValue = { mode, fixed, fullRelations, site, lang, fields };
     onChange(newValue);
     handleValidation && handleValidation(state.fixed, validators);
   };

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

@@ -45,7 +45,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const isAuto = mode === "auto";
   const hasMaxItems = !!(value && value.fixed && maxItems && !isAuto && value.fixed.length >= maxItems);
   const sourcesIDs = sources.map((source: ISource) => source.structuredData);
-  const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false } = state;
+  const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false, fields } = state;
 
   const handleMode = (mode: string) => {
     const manualSources: string[] = state.selectedItems.reduce(
@@ -69,12 +69,14 @@ const ReferenceField = (props: IReferenceFieldProps) => {
             fullRelations,
             allLanguages,
             preferenceLanguage,
+            fields,
           }
         : {
             mode,
             sources,
             fixed,
             fullRelations,
+            fields,
           };
     onChange(newValue);
     setModeAndSource(mode, mappedSources);
@@ -134,6 +136,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       mode,
       fixed,
       fullRelations,
+      fields,
     };
     onChange(newValue);
     resetValidation && resetValidation();
@@ -144,6 +147,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       mode,
       fixed,
       fullRelations,
+      fields,
     };
     onChange(newValue);
   };

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

@@ -29,7 +29,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
   } = props;
 
   const [width, setWidth] = useState(0);
-  const [state, setState] = useState<string>(value || "");
+  const [state, setState] = useState<string>(value);
   const prefixRef = useRef<HTMLDivElement>(null);
   const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -50,7 +50,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
   }, [state]);
 
   useEffect(() => {
-    !autoComplete && setState(value || "");
+    !autoComplete && setState(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorID, value]);
 
@@ -118,7 +118,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
 };
 
 interface ITextFieldProps {
-  value?: string;
+  value: string;
   onChange: (value: string) => void;
   autoComplete?: string;
   inputType?: string;