@griddo/ax 1.62.6 → 1.63.0

package/src/components/MainWrapper/AppBar/style.tsx

@@ -2,17 +2,32 @@ import styled from "styled-components";
 
 const ActionMenu = styled.ul``;
 
-const Wrapper = styled.div`
+const WrapperTabs = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-right: auto;
+`;
+
+const WrapperEnd = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: auto;
+`;
+
+const WrapperTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 600px;
+  margin-right: ${(p) => p.theme.spacing.xl};
 `;
 
 const Title = styled.h1`
   margin: 0;
   ${(p) => p.theme.textStyle.headingM};
   padding-left: ${(p) => p.theme.spacing.m};
-  margin-right: calc(${(p) => p.theme.spacing.m} * 3);
 `;
 
 const Subtitle = styled.span`
@@ -97,7 +112,6 @@ const Header = styled.section<{ inversed?: boolean }>`
   min-height: ${(p) => p.theme.spacing.xl};
   background: ${(p) => (p.inversed ? p.theme.color.uiMainMenuBackground : p.theme.color.uiBackground02)};
   display: flex;
-  justify-content: space-between;
   padding-right: ${(p) => p.theme.spacing.s};
 
   button:first-child {
@@ -160,7 +174,7 @@ const SearchWrapper = styled.div`
 export {
   ActionMenu,
   Header,
-  Wrapper,
+  WrapperTabs,
   Title,
   Subtitle,
   ActionText,
@@ -175,4 +189,6 @@ export {
   IconWrapper,
   ErrorWrapper,
   SearchWrapper,
+  WrapperEnd,
+  WrapperTitle,
 };

package/src/components/MainWrapper/index.tsx

@@ -26,7 +26,7 @@ interface IWrapperProps {
   fixedAppBar?: boolean;
   additionalClass?: string;
   downArrowMenu?: { displayed: boolean; options: any; button: any };
-  tabs?: { tabSet: any; selectedTab: string; action: (e: any) => void };
+  tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
   pageStatus?: string;
   language?: { locale: string; id: number | null } | null;
   availableLanguages?: any[] | null;

package/src/components/SideModal/index.tsx

@@ -140,7 +140,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         <S.Wrapper ref={node} optionsType={optionsType}>
           <S.Header>
             <S.Title>{optionsType}</S.Title>
-            {showSearch && (
+            {showSearch && optionsType !== "components" && (
               <S.SearchWrapper>
                 <SearchField onChange={setSearchQuery} closeOnInactive />
               </S.SearchWrapper>

package/src/components/TableFilters/DateFilter/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+
+import * as S from "./style";
+
+const DateFilter = (props: IStatusFilterProps): JSX.Element => {
+  const { sortItems, sortedState } = props;
+  const { isAscending, sortedByDate } = sortedState;
+  const sortByModifiedDate = (isAscending: boolean) => sortItems("date", isAscending);
+
+  const sortOldestModifiedDate = () => sortByModifiedDate(true);
+  const sortMostRecentModifiedDate = () => sortByModifiedDate(false);
+
+  const SortedStateArrow = () =>
+    isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
+
+  const Header = () => (
+    <S.Date isActive={sortedByDate}>
+      Date
+      <S.IconsWrapper>
+        {sortedByDate && <SortedStateArrow />}
+        <S.InteractiveArrow>
+          <Icon name="DownArrow" size="16" />
+        </S.InteractiveArrow>
+      </S.IconsWrapper>
+    </S.Date>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center">
+      <ListTitle>Sort by creation date</ListTitle>
+      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortMostRecentModifiedDate}>
+        Most recent
+      </ListItem>
+      <ListItem isSelected={sortedByDate && isAscending} onClick={sortOldestModifiedDate}>
+        Oldest
+      </ListItem>
+    </FloatingMenu>
+  );
+};
+
+interface IStatusFilterProps {
+  sortedState: any;
+  sortItems(orderPointer: string, isAscendent: boolean): any;
+}
+
+export default DateFilter;

package/src/components/TableFilters/DateFilter/style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const Date = styled(Header) <{ isActive: boolean }>`
+  width: 100px;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+export { Date, IconsWrapper, InteractiveArrow };

package/src/components/TableFilters/index.tsx

@@ -6,6 +6,7 @@ import SiteFilter from "./SiteFilter";
 import StatusFilter from "./StatusFilter";
 import TranslationsFilter from "./TranslationsFilter";
 import TypeFilter from "./TypeFilter";
+import DateFilter from "./DateFilter";
 
 export {
   CategoryFilter,
@@ -16,4 +17,5 @@ export {
   StatusFilter,
   TranslationsFilter,
   TypeFilter,
+  DateFilter,
 };

package/src/components/Tabs/index.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from "react";
-import { Icon } from "@ax/components";
+import { Icon, Tooltip } from "@ax/components";
 
 import * as S from "./style";
 
-const Tabs = ({ tabs, icons, active, setSelectedTab, isInAppBar, noMargins }: ITabsProps): JSX.Element => {
+const Tabs = (props: ITabsProps): JSX.Element => {
+  const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed } = props;
+
   useEffect(() => {
     tabs && tabs.length === 1 && setSelectedTab(tabs[0]);
   }, [tabs, setSelectedTab]);
@@ -26,12 +28,14 @@ const Tabs = ({ tabs, icons, active, setSelectedTab, isInAppBar, noMargins }: IT
   if (icons) {
     return (
       <S.TabsRow icons={true} isInAppBar={isInAppBar}>
-        {icons.map((tab: any) => {
-          const handleClick = () => setSelectedTab(tab);
+        {icons.map((tab: ITabIcon) => {
+          const handleClick = () => setSelectedTab(tab.name);
           return (
-            <S.TabItem key={tab} active={tab === active} onClick={handleClick}>
+            <S.TabItem key={tab.name} active={tab.name === active} onClick={handleClick} inversed={inversed}>
               <S.TabIcon>
-                <Icon name={tab} />
+                <Tooltip content={tab.text} bottom>
+                  <Icon name={tab.name} />
+                </Tooltip>
               </S.TabIcon>
             </S.TabItem>
           );
@@ -45,11 +49,17 @@ const Tabs = ({ tabs, icons, active, setSelectedTab, isInAppBar, noMargins }: IT
 
 interface ITabsProps {
   tabs?: any[];
-  icons?: string[];
+  icons?: ITabIcon[];
   isInAppBar?: boolean;
   active: string;
   setSelectedTab: any;
   noMargins?: boolean;
+  inversed?: boolean;
+}
+
+interface ITabIcon {
+  name: string;
+  text: string;
 }
 
 export default Tabs;

package/src/components/Tabs/style.tsx

@@ -1,28 +1,30 @@
 import styled from "styled-components";
 
-export const TabsRow = styled.div<{ icons?: boolean, isInAppBar?: boolean, noMargins?: boolean }>`
+const TabsRow = styled.div<{ icons?: boolean; isInAppBar?: boolean; noMargins?: boolean }>`
   display: flex;
-  border-bottom: ${p => (p.icons || p.isInAppBar || p.noMargins ? "none" : `1px solid ${p.theme.color.uiLine}`)};
-  margin-bottom: ${p => (p.isInAppBar || p.noMargins ? 0 : p.theme.spacing.m) };
+  border-bottom: ${(p) => (p.icons || p.isInAppBar || p.noMargins ? "none" : `1px solid ${p.theme.color.uiLine}`)};
+  margin-bottom: ${(p) => (p.isInAppBar || p.noMargins ? 0 : p.theme.spacing.m)};
   align-self: flex-end;
-  height: ${p => p.noMargins ? "auto" : "100%"};
+  height: ${(p) => (p.noMargins || p.isInAppBar ? "auto" : "100%")};
 `;
 
-export const TabItem = styled.button<{ active: boolean, isInAppBar?: boolean }>`
+const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?: boolean }>`
   flex-grow: 1;
   border: none;
-  border-bottom: 4px solid ${p => (p.active ? p.theme.color.interactive01 : "transparent")};
-  ${p => p.theme.textStyle.headingXS};
-  color: ${p => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
-  cursor: ${p => (p.active ? "initial" : "pointer")};
+  border-bottom: 4px solid
+    ${(p) =>
+      !p.active ? "transparent" : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01};
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+  cursor: ${(p) => (p.active ? "initial" : "pointer")};
   background: transparent;
-  height: ${p => (p.isInAppBar ? "100%" : "48px")};
+  height: ${(p) => (p.isInAppBar ? "100%" : "48px")};
 
   &:hover {
-    color: ${p => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.interactive01)};
+    color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.interactive01)};
     svg {
       path {
-        fill: ${p => p.theme.color.interactive01};
+        fill: ${(p) => (p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
       }
     }
   }
@@ -33,12 +35,23 @@ export const TabItem = styled.button<{ active: boolean, isInAppBar?: boolean }>`
   }
 
   svg {
-    width: ${p => p.theme.spacing.m};
-    height: ${p => p.theme.spacing.m};
+    width: ${(p) => p.theme.spacing.m};
+    height: ${(p) => p.theme.spacing.m};
     path {
-      fill: ${p => (p.active ? p.theme.color.interactive01 : p.theme.color.iconNonActive)};
+      fill: ${(p) =>
+        !p.active
+          ? p.theme.color.interactiveDisabled
+          : p.inversed
+          ? p.theme.color.iconHighEmphasisInverse
+          : p.theme.color.interactive01};
     }
   }
 `;
 
-export const TabIcon = styled.div``;
+const TabIcon = styled.div`
+  text-transform: none;
+  padding-left: ${(p) => p.theme.spacing.xxs};
+  padding-right: ${(p) => p.theme.spacing.xxs};
+`;
+
+export { TabsRow, TabItem, TabIcon };

package/src/components/Tooltip/index.tsx

@@ -4,7 +4,7 @@ import { useHandleClickOutside } from "@ax/hooks";
 import * as S from "./style";
 
 const Tooltip = (props: IProps): JSX.Element => {
-  const { content, children, hideOnClick, bottom, left } = props;
+  const { content, children, hideOnClick = true, bottom, left } = props;
 
   const initialState: IState = {
     active: false,

package/src/components/Tooltip/style.tsx

@@ -26,6 +26,8 @@ const Tip = styled.div<{
   white-space: nowrap;
   display: ${(p) => (p.active ? "block" : "none")};
   animation: fadeIn 0.3s;
+  font-weight: normal;
+  text-transform: none;
 
   @keyframes fadeIn {
     from {

package/src/components/index.tsx

@@ -39,6 +39,7 @@ import {
   StatusFilter,
   TranslationsFilter,
   TypeFilter,
+  DateFilter,
 } from "./TableFilters";
 
 import ActionMenu from "./ActionMenu";
@@ -121,6 +122,7 @@ export {
   ListTitle,
   ListItem,
   //Filters
+  DateFilter,
   CategoryFilter,
   CustomizeFilters,
   LiveFilter,

package/src/containers/App/reducer.tsx

@@ -37,7 +37,8 @@ export interface IUser {
 }
 
 export interface IGlobalSettings {
-  cloudinaryName: string;
+  cloudinaryName: string | null;
+  damDomain: string | null;
   globalLogoBig: string;
   globalLogoMini: string;
   siteLogoBig: string;
@@ -66,6 +67,7 @@ export const initialState = {
   globalLangs: [],
   globalSettings: {
     cloudinaryName: "",
+    damDomain: "",
     globalLogoBig: "",
     globalLogoMini: "",
     siteLogoBig: "",

package/src/containers/Navigation/Defaults/actions.tsx

@@ -230,7 +230,8 @@ function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<bool
       const cleanValues = removeEditorIds(navigationValues);
 
       const successAction = async (response: any) => {
-        generateContent(response, dispatch, getState);
+        const updatedContent = { ...editorContent, ...response };
+        generateContent(updatedContent, dispatch, getState);
         dispatch(setIsNewTranslation(false));
       };
 

package/src/containers/PageEditor/actions.tsx

@@ -77,7 +77,7 @@ import {
 } from "./interfaces";
 
 const { setIsLoading, setIsSaving } = appActions;
-const { getSiteDefaults } = navigationActions;
+const { getSiteDefaults, getDefaults } = navigationActions;
 
 // AUDIT: THIS FILE IS WAY TOO LONG - LOOK FOR A REFACTOR SOLUTION
 // FIXME: CHECK EDITOR CONTENT STRUCTURE (editorContent.editorContent)
@@ -154,6 +154,40 @@ function setUserEditing(userEditing: IUserEditing | null): ISetUserEditing {
   return { type: SET_USER_EDITING, payload: { userEditing } };
 }
 
+function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        app: { lang },
+        pageEditor: {
+          selectedEditorID,
+          editorContent: {
+            editorContent: { parent, site, entity, language },
+          },
+        },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: (data: any) => {
+          const { items } = data;
+          const translatedParent = items.filter(
+            (item: any) => (item.languageId === lang.id && language !== lang.id && item.pageId) || null
+          );
+          const translatedParentId = translatedParent && translatedParent[0] ? translatedParent[0].pageId : null;
+          updateEditorContent(selectedEditorID, "parent", translatedParentId)(dispatch, getState);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => pages.getPageLanguages(parent, site, entity);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e); // TODO: capturar error bien
+    }
+  };
+}
+
 function createNewTranslation(isNewTranslation: boolean): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
@@ -258,10 +292,11 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
         const pageLiveStatus = page.draftFromPage
           ? pageStatus.MODIFIED
           : isNewTranslation
-          ? pageStatus.OFFLINE
-          : page.liveStatus.status;
+            ? pageStatus.OFFLINE
+            : page.liveStatus.status;
 
         if (isReqOk(response.status)) {
+          addTemplate(page.templateId)(dispatch);
           setRootEditorID(dispatch, getState);
           generatePageContent(page, dispatch, getState);
           dispatch(setCurrentPageName(page.title));
@@ -269,7 +304,6 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
           dispatch(setTemplateConfig(page.templateConfig));
           dispatch(setUserEditing(page.editing));
           dispatch(setCurrentPageStatus(pageLiveStatus));
-          addTemplate(page.templateId)(dispatch);
         }
       } else {
         if (!isNewTranslation) {
@@ -285,6 +319,24 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
   };
 }
 
+function getTemplatePage(template: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+  return async (dispatch, getState) => {
+    try {
+      dispatch(setIsLoading(true));
+
+      const baseSchema = "Page";
+
+      await addTemplate(template)(dispatch);
+      await getTemplateConfig(template)(dispatch, getState);
+      await getDefaults()(dispatch, getState);
+      generateNewPage(dispatch, getState, baseSchema);
+    } catch (e) {
+      dispatch(setIsLoading(false));
+      console.log(e); // TODO: capturar error bien
+    }
+  };
+}
+
 function savePage(
   createDraft: boolean,
   publishPage?: any,
@@ -682,15 +734,17 @@ function overwriteHeaderConfig(params: IFieldProps): (dispatch: Dispatch, getSta
   };
 }
 
-function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState: any) {
+function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState: any): void {
   const {
-    pageEditor: { selectedEditorID },
+    pageEditor: { selectedEditorID, isNewTranslation, template },
     navigation: { currentDefaultsContent },
+    dataPacks: { configFormData },
   } = getState();
   const { header, footer, isGlobal } = editorContent;
+  const { defaultHeader, defaultFooter } = configFormData.templates && configFormData.templates[template] || {};
   const { header: pageHeader, footer: pageFooter } = getPageNavigation(
-    header,
-    footer,
+    header || defaultHeader,
+    footer || defaultFooter,
     currentDefaultsContent,
     isGlobal
   );
@@ -701,12 +755,12 @@ function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState:
   const schema = getSchema(component);
 
   dispatch(setSchema(schema));
-
   dispatch(setEditorContent(pageContent));
   dispatch(updateBreadcrumb(selectedEditorID));
   dispatch(setSelectedPageContent(selectedContent));
   dispatch(setSelectedParent(selectedParent));
   dispatch(setIsLoading(false));
+  if (isNewTranslation) setTranslatedParent()(dispatch, getState);
 }
 
 function updateEditorContent(
@@ -783,7 +837,7 @@ function updateBreadcrumb(editorID: number): any {
     const { header, footer } = editorContent;
     const navigationIds = [header?.editorID, footer?.editorID];
     if (navigationIds.includes(editorID)) {
-      const rootBreadcrumb = { editorID: 0, displayName: 'Page', component: 'Page' };
+      const rootBreadcrumb = { editorID: 0, displayName: "Page", component: "Page" };
       newBreadcrumb.unshift(rootBreadcrumb);
     }
 
@@ -1019,4 +1073,5 @@ export {
   setSitePageID,
   sendPagePing,
   discardDraft,
+  getTemplatePage,
 };

package/src/containers/Settings/DataPacks/actions.tsx

@@ -132,7 +132,7 @@ function getSiteDataPack(packID: string): (dispatch: Dispatch, getState: any) =>
         handleError: () => console.log("Error en getDataPack"),
       };
 
-      const callback = async () => dataPack.getSiteDataPack(currentSiteID, packID);
+      const callback = async () => await dataPack.getSiteDataPack(currentSiteID, packID);
 
       await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
     } catch (e) {
@@ -226,6 +226,9 @@ function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: any)
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
+      delete configFormData.defaultHeader;
+      delete configFormData.defaultFooter;
+
       const callback = async () => dataPack.updateDataPack(currentSiteID, dataPackID, configFormData);
 
       await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);

package/src/containers/Sites/actions.tsx

@@ -141,6 +141,7 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
     try {
       const {
         structuredData: { structuredData: currentStructuredData },
+        structuredData: { categories: currentCategories },
       } = getState();
 
       dispatch(setIsLoading(true));
@@ -192,8 +193,9 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
         const data = structuredDataResponse.data.items;
 
         const categories = structuredDataActions.filterStructuredData(data, true, currentSiteInfo.id);
+
         const structuredDataValues = structuredDataActions.filterStructuredData(data, false, currentSiteInfo.id);
-        dispatch(structuredDataActions.setCategories(categories));
+        dispatch(structuredDataActions.setCategories({ global: currentCategories.global, site: categories.site }));
 
         dispatch(
           structuredDataActions.setStructuredData({ ...currentStructuredData, site: structuredDataValues.site })

package/src/helpers/dates.tsx

@@ -60,14 +60,13 @@ const getStringifyDateRange = (start: Date, end: Date, formatDate?: string): str
 const getHumanLastModifiedDate = (modified: Date): string => {
   const now = new Date();
   const date = new Date(modified);
-  const dateWithTimezone = addMinutes(date, date.getTimezoneOffset());
 
   const oneDay = 60 * 60 * 24 * 1000;
-  const isMoreThan24Hours = now.getTime() - dateWithTimezone.getTime() > oneDay;
+  const isMoreThan24Hours = now.getTime() - date.getTime() > oneDay;
 
   return isMoreThan24Hours
-    ? format(dateWithTimezone, "d MMM HH:mm")
-    : formatDistanceToNowStrict(dateWithTimezone, { addSuffix: true });
+    ? format(date, "d MMM HH:mm")
+    : formatDistanceToNowStrict(date, { addSuffix: true });
 };
 
 const getFormattedDateWithTimezone = (date: Date, formatString: string): string => {

package/src/helpers/index.tsx

@@ -19,6 +19,7 @@ import {
   getFileExtension,
   splitAndJoin,
   splitAndTrim,
+  copyTextToClipboard,
 } from "./strings";
 
 import {
@@ -164,4 +165,5 @@ export {
   getDataPackSchema,
   splitAndJoin,
   splitAndTrim,
+  copyTextToClipboard,
 };

package/src/helpers/strings.tsx

@@ -82,15 +82,45 @@ const getFileExtension = (fileName: string): string | null => {
 };
 
 const splitAndJoin = (str = "", splitterIn = ",", splitterOut = ", "): string => {
-  return str?.split(splitterIn)
-    .map((str: string) => str.trim())
-    .filter((str: string) => str.length)
-    .join(splitterOut) || "";
-}
+  return (
+    str
+      ?.split(splitterIn)
+      .map((str: string) => str.trim())
+      .filter((str: string) => str.length)
+      .join(splitterOut) || ""
+  );
+};
 
 const splitAndTrim = (str?: string, splitter = ","): (string | never)[] => {
-  return str?.split(splitter).map((str: string) => str.trim()).filter((str: string) => str.length) || [];
-}
+  return (
+    str
+      ?.split(splitter)
+      .map((str: string) => str.trim())
+      .filter((str: string) => str.length) || []
+  );
+};
+
+const copyTextToClipboard = (text: string): Promise<void> => {
+  if (navigator.clipboard && window.isSecureContext) {
+    return navigator.clipboard.writeText(text);
+  } else {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+
+    textArea.style.top = "-999999px";
+    textArea.style.left = "-999999px";
+    textArea.style.position = "fixed";
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    return new Promise<void>((res, rej) => {
+      document.execCommand("copy") ? res() : rej();
+      textArea.remove();
+    });
+  }
+};
 
 export {
   filterImageText,
@@ -106,4 +136,5 @@ export {
   getFileExtension,
   splitAndJoin,
   splitAndTrim,
+  copyTextToClipboard,
 };

package/src/hooks/forms.tsx

@@ -89,7 +89,6 @@ const useIsDirty = (
   const [isResetting, setIsResetting] = useState(false);
 
   const prevContent = usePrevious(updatedValues, isSaved);
-  const isTranslatedVersion: boolean = prevContent?.language !== updatedValues?.language;
 
   const hasChanged = () => {
     if (prevContent && updatedValues) {
@@ -98,7 +97,7 @@ const useIsDirty = (
 
       const { cleanUpdatedValues, cleanOriginalValues } = cleanPageValues(updatedValuesCloned, originalValuesCloned);
 
-      const hasChanged = !isTranslatedVersion && !isEqual(cleanUpdatedValues, cleanOriginalValues);
+      const hasChanged = !isEqual(cleanUpdatedValues, cleanOriginalValues);
 
       return hasChanged;
     }

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import history from "./routes/history";
@@ -14,7 +14,7 @@ export class Main {
     const configStore = globalStore.configureStore(history);
 
     const container = document.getElementById("root");
-    if (!container) throw new Error('Failed to find the root element');
+    if (!container) throw new Error("Failed to find the root element");
     // @ts-ignore
     const root = ReactDOM.createRoot(container);