Merge pull request #1319 from ONLYOFFICE/feature/react-18

Feature/react 18

package.json

@@ -36,8 +36,8 @@
   "devDependencies": {
     "auto-changelog": "file:./packages/auto-changelog-2.3.1.tgz",
     "he": "^1.2.0",
-    "shx": "^0.3.3",
-    "terser": "^5.8.0"
+    "shx": "^0.3.4",
+    "terser": "^5.16.6"
   },
   "packageManager": "yarn@3.2.4"
 }

packages/client/package.json

@@ -41,49 +41,49 @@
     "test:ui:mobile": "cross-env DEVICE_TYPE=mobile npx codecept-ui"
   },
   "dependencies": {
-    "copy-to-clipboard": "^3.3.1",
+    "copy-to-clipboard": "^3.3.3",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
-    "firebase": "^8.10.0",
+    "firebase": "^8.10.1",
     "hex-to-rgba": "^2.0.1",
     "react-avatar-editor": "^13.0.0",
-    "react-colorful": "^5.5.1",
-    "react-hotkeys-hook": "^3.4.4",
-    "react-markdown": "^7.0.1",
+    "react-colorful": "^5.6.1",
+    "react-hotkeys-hook": "^3.4.7",
+    "react-markdown": "^7.1.2",
     "react-smartbanner": "^5.1.4",
     "react-string-format": "^0.1.4",
     "windows-iana": "^5.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-export-default-from": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.18.10",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@svgr/webpack": "^5.5.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.3.0",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.2.0",
+    "copy-webpack-plugin": "^9.1.0",
+    "css-loader": "^6.7.3",
     "external-remotes-plugin": "^1.0.0",
     "file-loader": "^6.2.0",
     "html-loader": "^4.2.0",
-    "html-webpack-plugin": "5.3.2",
+    "html-webpack-plugin": "5.5.0",
     "json-loader": "^0.5.7",
-    "playwright": "^1.18.1",
-    "sass": "^1.39.2",
-    "sass-loader": "^12.1.0",
-    "serve": "14.1.1",
-    "shx": "^0.3.3",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "3.2.1",
-    "terser-webpack-plugin": "^5.2.4",
-    "typescript": "^4.7.4",
-    "webpack": "5.76.0",
+    "playwright": "^1.32.0",
+    "sass": "^1.59.3",
+    "sass-loader": "^12.6.0",
+    "serve": "14.2.0",
+    "shx": "^0.3.4",
+    "source-map-loader": "^3.0.2",
+    "style-loader": "3.3.2",
+    "terser-webpack-plugin": "^5.3.7",
+    "typescript": "^4.9.5",
+    "webpack": "5.76.3",
     "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.3.1"
+    "webpack-dev-server": "4.13.1"
   },
   "title": "ONLYOFFICE"
 }

packages/client/src/bootstrap.js

@@ -1,9 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 //import { registerSW } from "@docspace/common/sw/helper";
-const root = document.getElementById("root");
 
-if (root) ReactDOM.render(<App />, root);
+const container = document.getElementById("root");
+const root = createRoot(container);
+if (root) root.render(<App />);
 
 //registerSW();

packages/client/src/components/GlobalEvents/CreateRoomEvent.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import { CreateRoomDialog } from "../dialogs";
@@ -42,11 +42,15 @@ const CreateRoomEvent = ({
     }
   };
 
-  useEffect(async () => {
+  const fetchTagsAction = useCallback(async () => {
     let tags = await fetchTags();
     setFetchedTags(tags);
   }, []);
 
+  useEffect(() => {
+    fetchTagsAction;
+  }, []);
+
   useEffect(() => {
     setCreateRoomDialogVisible(true);
     return () => setCreateRoomDialogVisible(false);
@@ -84,10 +88,8 @@ export default inject(
   }) => {
     const { fetchTags } = tagsStore;
 
-    const {
-      deleteThirdParty,
-      fetchThirdPartyProviders,
-    } = settingsStore.thirdPartyStore;
+    const { deleteThirdParty, fetchThirdPartyProviders } =
+      settingsStore.thirdPartyStore;
     const { enableThirdParty } = settingsStore;
 
     const {

packages/client/src/components/GlobalEvents/EditRoomEvent.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import { EditRoomDialog } from "../dialogs";
@@ -176,28 +176,36 @@ const EditRoomEvent = ({
     }
   };
 
-  useEffect(async () => {
+  const fetchLogoAction = useCallback(async (logo) => {
+    const imgExst = logo.slice(".")[1];
+    const file = await fetch(logo)
+      .then((res) => res.arrayBuffer())
+      .then(
+        (buf) =>
+          new File([buf], "fetchedFile", {
+            type: `image/${imgExst}`,
+          })
+      );
+    setFetchedImage(file);
+  }, []);
+
+  useEffect(() => {
     const logo = item?.logo?.original ? item.logo.original : "";
 
     if (logo) {
-      const imgExst = logo.slice(".")[1];
-      const file = await fetch(logo)
-        .then((res) => res.arrayBuffer())
-        .then(
-          (buf) =>
-            new File([buf], "fetchedFile", {
-              type: `image/${imgExst}`,
-            })
-        );
-      setFetchedImage(file);
+      fetchLogoAction(logo);
     }
   }, []);
 
-  useEffect(async () => {
+  const fetchTagsAction = useCallback(async () => {
     const tags = await fetchTags();
     setFetchedTags(tags);
   }, []);
 
+  useEffect(() => {
+    fetchTagsAction();
+  }, [fetchTagsAction]);
+
   useEffect(() => {
     setCreateRoomDialogVisible(true);
     return () => setCreateRoomDialogVisible(false);

packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 
 import TagHandler from "./handlers/TagHandler";
 import SetRoomParams from "./sub-components/SetRoomParams";
@@ -44,7 +44,7 @@ const EditRoomDialog = ({
     onSave(roomParams);
   };
 
-  useEffect(async () => {
+  useEffect(() => {
     if (fetchedImage)
       setRoomParams({
         ...roomParams,

packages/client/src/pages/About/AboutContent.js

@@ -236,7 +236,7 @@ const AboutContent = (props) => {
             href={site}
             enableUserSelect
           >
-             {site.replace(/^https?\:\/\//i, "")}
+             {site?.replace(/^https?\:\/\//i, "")}
           </ColorTheme>
         </div>
       </StyledAboutBody>

packages/client/src/pages/Confirm/sub-components/tfaActivation.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { withRouter } from "react-router";
 import { Trans, withTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -251,7 +251,7 @@ const TfaActivationWrapper = (props) => {
   const [qrCode, setQrCode] = useState("");
   const [error, setError] = useState(null);
 
-  useEffect(async () => {
+  const getSecretKeyAndQRAction = useCallback(async () => {
     try {
       setIsLoading(true);
       const confirmKey = linkData.confirmHeader;
@@ -269,6 +269,10 @@ const TfaActivationWrapper = (props) => {
     setIsLoading(false);
   }, []);
 
+  useEffect(() => {
+    getSecretKeyAndQRAction();
+  }, []);
+
   return error ? (
     <ErrorContainer bodyText={error} />
   ) : (

packages/client/src/pages/Confirm/sub-components/tfaAuth.js

@@ -150,7 +150,7 @@ const TfaAuthForm = withLoader((props) => {
 const TfaAuthFormWrapper = (props) => {
   const { setIsLoaded, setIsLoading } = props;
 
-  useEffect(async () => {
+  useEffect(() => {
     setIsLoaded(true);
     setIsLoading(false);
   }, []);

packages/client/src/pages/Home/InfoPanel/Body/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { withRouter } from "react-router";
 import { inject, observer } from "mobx-react";
 
@@ -108,7 +108,8 @@ const InfoPanelBodyContent = ({
 
   // Updating selectionParentRoom after selectFolder change
   // if it is located in another room
-  useEffect(async () => {
+
+  const updateSelectionParentRoomAction = useCallback(async () => {
     if (!isRooms) return;
     if (selection?.isRoom && roomsView === "members") return;
 
@@ -127,6 +128,10 @@ const InfoPanelBodyContent = ({
     setSelectionParentRoom(normalizeSelection(newSelectionParentRoom));
   }, [selectedFolder]);
 
+  useEffect(() => {
+    updateSelectionParentRoomAction();
+  }, [selectedFolder, updateSelectionParentRoomAction]);
+
   //////////////////////////////////////////////////////////
 
   // Setting selection after selectedItems or selectedFolder update

packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useHistory } from "react-router-dom";
 import { inject } from "mobx-react";
 import { withTranslation } from "react-i18next";
@@ -37,7 +37,7 @@ const Details = ({
     culture,
   });
 
-  useEffect(async () => {
+  const createThumbnailAction = useCallback(async () => {
     setItemProperties(detailsHelper.getPropertyList());
 
     if (
@@ -52,6 +52,10 @@ const Details = ({
     }
   }, [selection]);
 
+  useEffect(() => {
+    createThumbnailAction();
+  }, [selection, createThumbnailAction]);
+
   const currentIcon =
     !selection.isArchive && selection?.logo?.large
       ? selection?.logo?.large

packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js

@@ -88,7 +88,7 @@ const History = ({
     return { ...fetchedHistory, feedsByDays: parsedFeeds };
   };
 
-  useEffect(async () => {
+  useEffect(() => {
     if (!isMount.current) return;
 
     if (selection.history) {

packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import toastr from "@docspace/components/toast/toastr";
@@ -78,7 +78,7 @@ const Members = ({
     };
   };
 
-  useEffect(async () => {
+  const updateSelectionParentRoomAction = useCallback(async () => {
     if (!selectionParentRoom) return;
 
     if (selectionParentRoom.members) {
@@ -93,7 +93,11 @@ const Members = ({
     });
   }, [selectionParentRoom]);
 
-  useEffect(async () => {
+  useEffect(() => {
+    updateSelectionParentRoomAction();
+  }, [selectionParentRoom, updateSelectionParentRoomAction]);
+
+  const updateSelectionParentRoomActionSelection = useCallback(async () => {
     if (!selection.isRoom) return;
 
     const fetchedMembers = await fetchMembers(selection.id);
@@ -105,7 +109,11 @@ const Members = ({
       setView("info_details");
   }, [selection]);
 
-  useEffect(async () => {
+  useEffect(() => {
+    updateSelectionParentRoomActionSelection();
+  }, [selection, updateSelectionParentRoomActionSelection]);
+
+  const updateMembersAction = useCallback(async () => {
     if (!updateRoomMembers) return;
 
     const fetchedMembers = await fetchMembers(selection.id);
@@ -117,6 +125,15 @@ const Members = ({
     setMembers(fetchedMembers);
   }, [selectionParentRoom, selection?.id, updateRoomMembers]);
 
+  useEffect(() => {
+    updateMembersAction();
+  }, [
+    selectionParentRoom,
+    selection?.id,
+    updateRoomMembers,
+    updateMembersAction,
+  ]);
+
   const onClickInviteUsers = () => {
     setIsMobileHidden(true);
     const parentRoomId = selectionParentRoom.id;
@@ -253,17 +270,12 @@ export default inject(
       isScrollLocked,
       setIsScrollLocked,
     } = auth.infoPanelStore;
-    const {
-      getRoomMembers,
-      updateRoomMemberRole,
-      resendEmailInvitations,
-    } = filesStore;
+    const { getRoomMembers, updateRoomMemberRole, resendEmailInvitations } =
+      filesStore;
     const { id: selfId } = auth.userStore.user;
     const { isGracePeriod } = auth.currentTariffStatusStore;
-    const {
-      setInvitePanelOptions,
-      setInviteUsersWarningDialogVisible,
-    } = dialogsStore;
+    const { setInvitePanelOptions, setInviteUsersWarningDialogVisible } =
+      dialogsStore;
 
     const { changeType: changeUserType } = peopleStore;
 

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -76,7 +76,9 @@ const FileTile = (props) => {
       icon={item.icon}
       fileExst={item.fileExst}
       isRoom={item.isRoom}
-      defaultRoomIcon={item.defaultRoomIcon}
+      defaultRoomIcon={
+        item.isRoom && item.icon ? item.icon : item.defaultRoomIcon
+      }
     />
   );
 
@@ -148,12 +150,8 @@ const FileTile = (props) => {
 export default inject(
   ({ settingsStore, filesStore, treeFoldersStore }, { item }) => {
     const { getIcon, thumbnails1280x720 } = settingsStore;
-    const {
-      setSelection,
-      withCtrlSelect,
-      withShiftSelect,
-      highlightFile,
-    } = filesStore;
+    const { setSelection, withCtrlSelect, withShiftSelect, highlightFile } =
+      filesStore;
 
     const isHighlight =
       highlightFile.id == item?.id && highlightFile.isExst === !item?.fileExst;

packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js

@@ -67,6 +67,8 @@ const FilesTileContainer = ({
 
       const { width } = node.getBoundingClientRect();
 
+      if (width === 0) return;
+
       const size = thumbnails1280x720 ? "1280x720" : getThumbSize(width);
 
       const widthWithoutPadding = width - 32;

packages/client/src/pages/Notifications/Section/Body/index.js

@@ -53,7 +53,7 @@ const SectionBodyContent = ({ t, ready, setSubscriptions }) => {
     }
   };
 
-  useEffect(async () => {
+  useEffect(() => {
     timerId = setTimeout(() => {
       setIsLoading(true);
     }, 400);

packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
@@ -57,14 +57,12 @@ const RestoreBackup = (props) => {
     confirmation: false,
   });
   const [isInitialLoading, setIsInitialLoading] = useState(true);
-  const [isVisibleBackupListDialog, setIsVisibleBackupListDialog] = useState(
-    false
-  );
-  const [isVisibleSelectFileDialog, setIsVisibleSelectFileDialog] = useState(
-    false
-  );
+  const [isVisibleBackupListDialog, setIsVisibleBackupListDialog] =
+    useState(false);
+  const [isVisibleSelectFileDialog, setIsVisibleSelectFileDialog] =
+    useState(false);
 
-  useEffect(async () => {
+  const startRestoreBackup = useCallback(async () => {
     try {
       getProgress(t);
 
@@ -82,7 +80,10 @@ const RestoreBackup = (props) => {
     } catch (error) {
       toastr.error(error);
     }
+  }, []);
 
+  useEffect(() => {
+    startRestoreBackup();
     return () => {
       clearProgressInterval();
       setRestoreResource(null);

packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js

@@ -74,7 +74,7 @@ const PriceCalculation = ({
   isFreeAfterPaidPeriod,
   managersCount,
 }) => {
-  useEffect(async () => {
+  useEffect(() => {
     initializeInfo();
 
     return () => {

packages/client/src/pages/PreparationPortal/index.js

@@ -23,13 +23,8 @@ let timerId = null,
   prevProgress;
 
 const PreparationPortal = (props) => {
-  const {
-    multiplicationFactor,
-    t,
-    withoutHeader,
-    style,
-    clearLocalStorage,
-  } = props;
+  const { multiplicationFactor, t, withoutHeader, style, clearLocalStorage } =
+    props;
 
   const [percent, setPercent] = useState(0);
   const [errorMessage, setErrorMessage] = useState("");
@@ -189,7 +184,7 @@ const PreparationPortal = (props) => {
       setErrorMessage(errorMessage(err));
     }
   };
-  useEffect(async () => {
+  useEffect(() => {
     setTimeout(() => {
       getRecoveryProgress();
     }, 4000);

packages/common/components/Article/sub-components/article-payment-alert.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { withRouter } from "react-router";
 import { useTranslation, Trans } from "react-i18next";
@@ -34,7 +34,7 @@ const ArticlePaymentAlert = ({
 }) => {
   const { t, ready } = useTranslation("Common");
 
-  useEffect(async () => {
+  const getQuota = useCallback(async () => {
     if (isFreeTariff)
       try {
         await setPortalPaymentQuotas();
@@ -43,6 +43,10 @@ const ArticlePaymentAlert = ({
       }
   }, []);
 
+  useEffect(() => {
+    getQuota();
+  }, []);
+
   const onClick = () => {
     const paymentPageUrl = combineUrl(
       PROXY_BASE_URL,
@@ -106,11 +110,8 @@ export default withRouter(
     const { paymentQuotasStore, currentQuotaStore, settingsStore } = auth;
     const { currentTariffPlanTitle } = currentQuotaStore;
     const { theme } = auth;
-    const {
-      setPortalPaymentQuotas,
-      planCost,
-      tariffPlanTitle,
-    } = paymentQuotasStore;
+    const { setPortalPaymentQuotas, planCost, tariffPlanTitle } =
+      paymentQuotasStore;
 
     return {
       setPortalPaymentQuotas,

packages/common/components/Section/sub-components/info-panel.js

@@ -143,10 +143,6 @@ const InfoPanel = ({
   canDisplay,
   viewAs,
 }) => {
-  if (!isVisible || !canDisplay) return null;
-  if ((isTablet() || isMobile || isMobileUtils()) && isMobileHidden)
-    return null;
-
   const closeInfoPanel = () => setIsVisible(false);
 
   useEffect(() => {
@@ -198,7 +194,13 @@ const InfoPanel = ({
     );
   };
 
-  return isMobileOnly ? renderPortalInfoPanel() : infoPanelComponent;
+  return !isVisible ||
+    !canDisplay ||
+    ((isTablet() || isMobile || isMobileUtils()) && isMobileHidden)
+    ? null
+    : isMobileOnly
+    ? renderPortalInfoPanel()
+    : infoPanelComponent;
 };
 
 InfoPanel.propTypes = {
@@ -215,12 +217,8 @@ StyledInfoPanel.defaultProps = { theme: Base };
 InfoPanel.defaultProps = { theme: Base };
 
 export default inject(({ auth }) => {
-  const {
-    isVisible,
-    isMobileHidden,
-    setIsVisible,
-    getCanDisplay,
-  } = auth.infoPanelStore;
+  const { isVisible, isMobileHidden, setIsVisible, getCanDisplay } =
+    auth.infoPanelStore;
 
   const canDisplay = getCanDisplay();
 

packages/common/package.json

@@ -10,40 +10,40 @@
     "start-prod": "echo 'skip it'"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
+    "@babel/runtime": "^7.21.0",
     "axios": "^0.22.0",
     "cross-fetch": "3.1.5",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "i18next": "^20.6.1",
-    "mobx": "^6.3.3",
-    "mobx-react": "^7.2.0",
-    "moment": "^2.29.1",
-    "prop-types": "^15.7.2",
-    "query-string": "7.1.1",
-    "re-resizable": "^6.9.0",
-    "react": "^17.0.2",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
+    "query-string": "7.1.3",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
     "react-autosize-textarea": "^7.1.0",
     "react-content-loader": "^5.1.4",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-hammerjs": "^1.0.1",
-    "react-i18next": "^11.12.0",
+    "react-i18next": "^11.18.6",
     "react-player": "^1.15.3",
-    "react-resize-detector": "^6.7.6",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
-    "react-tooltip": "^4.2.21",
+    "react-resize-detector": "^6.7.8",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
+    "react-tooltip": "^4.5.1",
     "react-viewer": "^3.2.2",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.6",
-    "react-window-infinite-loader": "^1.0.7",
-    "screenfull": "^5.1.0",
+    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-window": "^1.8.8",
+    "react-window-infinite-loader": "^1.0.8",
+    "screenfull": "^5.2.0",
     "sjcl": "^1.0.8",
-    "socket.io-client": "^4.4.0",
-    "styled-components": "^5.3.1",
-    "workbox-window": "^6.3.0"
+    "socket.io-client": "^4.6.1",
+    "styled-components": "^5.3.9",
+    "workbox-window": "^6.5.4"
   },
   "devDependencies": {
-    "@welldone-software/why-did-you-render": "^6.2.1"
+    "@welldone-software/why-did-you-render": "^6.2.3"
   }
 }

packages/components/package.json

@@ -16,46 +16,46 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@react-spring/web": "^9.6.1",
-    "@use-gesture/react": "^10.2.23",
+    "@react-spring/web": "^9.7.1",
+    "@use-gesture/react": "^10.2.24",
     "attr-accept": "^2.2.2",
     "csvjson-json_beautifier": "^5.0.4",
     "email-addresses": "^3.1.0",
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^4.1.17",
-    "html-to-react": "^1.4.5",
+    "html-to-react": "^1.5.0",
     "lodash": "4.17.21",
-    "moment": "^2.29.1",
-    "prop-types": "^15.7.2",
-    "punycode": "^2.1.1",
-    "rc-tree": "^5.6.1",
+    "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
+    "punycode": "^2.3.0",
+    "rc-tree": "^5.7.3",
     "react-autosize-textarea": "^7.1.0",
-    "react-countdown": "2.3.2",
+    "react-countdown": "2.3.5",
     "react-custom-scrollbars": "^4.2.1",
     "react-device-detect": "^1.17.0",
-    "react-dropzone": "^11.4.2",
+    "react-dropzone": "^11.7.1",
     "react-lifecycles-compat": "^3.0.4",
-    "react-onclickoutside": "^6.11.2",
+    "react-onclickoutside": "^6.13.0",
     "react-svg": "^12.1.0",
-    "react-text-mask": "^5.4.3",
-    "react-toastify": "^7.0.0",
-    "react-tooltip": "^4.2.21",
-    "react-transition-group": "^4.4.1",
+    "react-text-mask": "^5.5.0",
+    "react-toastify": "^7.0.4",
+    "react-tooltip": "^4.5.1",
+    "react-transition-group": "^4.4.5",
     "react-virtualized": "^9.22.3",
-    "react-window": "^1.8.6",
+    "react-window": "^1.8.8",
     "resize-image": "^0.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-export-default-from": "^7.14.5",
-    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.4",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.18.10",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
     "@emotion/babel-preset-css-prop": "^10.2.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/styled": "^10.3.0",
     "@storybook/addon-actions": "6.5.16",
     "@storybook/addon-contexts": "^5.3.21",
     "@storybook/addon-controls": "6.5.16",
@@ -73,34 +73,34 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.3.0",
     "babel-plugin-inline-react-svg": "^1.1.2",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "babel-preset-react-app": "^9.1.2",
-    "copy-webpack-plugin": "6.4.0",
+    "copy-webpack-plugin": "6.4.1",
     "cross-env": "^6.0.3",
     "css-loader": "^6.7.3",
     "enzyme": "^3.11.0",
-    "eslint": "^8.11.0",
-    "eslint-plugin-jest": "^26.1.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-storybook": "^0.6.7",
+    "eslint": "^8.36.0",
+    "eslint-plugin-jest": "^26.9.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-storybook": "^0.6.11",
     "jest": "^24.9.0",
     "jest-enzyme": "^7.1.2",
     "jest-junit": "^10.0.0",
-    "jest-styled-components": "^7.0.3",
-    "postcss": "^7.0.35",
-    "prettier": "2.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "jest-styled-components": "^7.1.1",
+    "postcss": "^7.0.39",
+    "prettier": "2.8.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-json-pretty": "^2.2.0",
     "react-values": "^0.3.3",
-    "sass-loader": "^13.2.0",
-    "serve": "^14.1.1",
-    "style-loader": "^3.3.1",
-    "styled-components": "^5.3.1",
+    "sass-loader": "^13.2.1",
+    "serve": "^14.2.0",
+    "style-loader": "^3.3.2",
+    "styled-components": "^5.3.9",
     "svg-inline-loader": "^0.8.2"
   }
 }

packages/components/scrollbar/custom-scrollbars-virtual-list.js

@@ -12,20 +12,14 @@ export class CustomScrollbars extends React.Component {
   };
 
   render() {
-    const {
-      onScroll,
-      forwardedRef,
-      style,
-      children,
-      className,
-      stype,
-    } = this.props;
+    const { onScroll, forwardedRef, style, children, className, stype } =
+      this.props;
     //console.log("CustomScrollbars", this.props);
     return (
       <Scrollbar
-        ref={(scrollbarsRef) =>
-          this.refSetter.bind(this, scrollbarsRef, forwardedRef)
-        }
+        ref={(scrollbarsRef) => {
+          this.refSetter.bind(this, scrollbarsRef, forwardedRef);
+        }}
         style={{ ...style, overflow: "hidden" }}
         onScroll={onScroll}
         stype={stype}

packages/components/textarea/index.js

@@ -53,7 +53,7 @@ const Textarea = ({
   const defaultPaddingLeft = 42;
   const numberOfDigits =
     String(numberOfLines).length - 2 > 0 ? String(numberOfLines).length : 0;
-  const paddingLeft = isJSONField
+  const paddingLeftProp = isJSONField
     ? fontSize < 13
       ? `${defaultPaddingLeft + numberOfDigits * 6}px`
       : `${((defaultPaddingLeft + numberOfDigits * 4) * fontSize) / 13}px`
@@ -120,7 +120,7 @@ const Textarea = ({
 
         <StyledTextarea
           id={id}
-          paddingLeft={paddingLeft}
+          paddingLeftProp={paddingLeftProp}
           isJSONField={isJSONField}
           placeholder={placeholder}
           onChange={(e) => onChange && onChange(e)}

packages/components/textarea/styled-textarea.js

@@ -42,14 +42,25 @@ StyledScrollbar.defaultProps = {
 
 // eslint-disable-next-line react/prop-types, no-unused-vars
 const ClearTextareaAutosize = React.forwardRef(
-  ({ isDisabled, heightScale, hasError, color, ...props }, ref) => (
-    <TextareaAutosize {...props} ref={ref} />
-  )
+  (
+    {
+      isDisabled,
+      heightScale,
+      hasError,
+      color,
+      paddingLeftProp,
+      isJSONField,
+      ...props
+    },
+    ref
+  ) => <TextareaAutosize {...props} ref={ref} />
 );
 
-const StyledTextarea = styled(ClearTextareaAutosize).attrs((props) => ({
-  autoFocus: props.autoFocus,
-}))`
+const StyledTextarea = styled(ClearTextareaAutosize).attrs(
+  ({ autoFocus, ...props }) => ({
+    autoFocus: props.autoFocus,
+  })
+)`
   ${commonInputStyle};
   white-space: ${(props) => (props.isJSONField ? "pre" : "normal")};
 
@@ -61,7 +72,7 @@ const StyledTextarea = styled(ClearTextareaAutosize).attrs((props) => ({
   resize: none;
   overflow: ${(props) => (props.isJSONField ? "visible !important" : "hidden")};
   padding: 5px 8px 2px;
-  padding-left: ${(props) => props.paddingLeft};
+  padding-left: ${(props) => props.paddingLeftProp};
   font-size: ${(props) => props.fontSize + "px"};
   font-family: ${(props) => props.theme.fontFamily};
   line-height: 1.5;

packages/editor/package.json

@@ -19,67 +19,67 @@
     "deploy": "shx --silent mkdir -p ../../build/deploy/editor && shx cp -r dist/* ../../build/deploy/editor"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-export-default-from": "^7.17.12",
-    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/register": "^7.18.6",
-    "@loadable/babel-plugin": "^5.13.2",
-    "@loadable/component": "^5.15.2",
-    "@loadable/server": "^5.15.2",
-    "@loadable/webpack-plugin": "^5.15.0",
-    "@svgr/webpack": "^6.2.1",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-styled-components": "^1.12.0",
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.18.10",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@babel/register": "^7.21.0",
+    "@loadable/babel-plugin": "^5.15.3",
+    "@loadable/component": "^5.15.3",
+    "@loadable/server": "^5.15.3",
+    "@loadable/webpack-plugin": "^5.15.2",
+    "@svgr/webpack": "^6.5.1",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-styled-components": "^1.13.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.7.3",
     "external-remotes-plugin": "^1.0.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "5.3.2",
+    "html-webpack-plugin": "5.5.0",
     "json-loader": "^0.5.7",
-    "nodemon": "^2.0.7",
+    "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
+    "sass": "^1.59.3",
+    "sass-loader": "^13.2.1",
     "shx": "^0.3.4",
-    "source-map-loader": "^4.0.0",
-    "style-loader": "^3.3.1",
-    "styled-components": "^5.3.5",
-    "terser-webpack-plugin": "^5.1.2",
-    "typescript": "^4.7.4",
-    "webpack": "5.76.0",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.2",
+    "styled-components": "^5.3.9",
+    "terser-webpack-plugin": "^5.3.7",
+    "typescript": "^4.9.5",
+    "webpack": "5.76.3",
     "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.3.1",
+    "webpack-dev-server": "4.13.1",
     "webpack-filter-warnings-plugin": "^1.2.1",
-    "webpack-hot-middleware": "^2.25.0",
+    "webpack-hot-middleware": "^2.25.3",
     "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^5.7.3",
-    "ws": "^8.8.0"
+    "webpack-merge": "^5.8.0",
+    "ws": "^8.13.0"
   },
   "id": "e67be73d-f9ae-4ce1-8fec-1880cb518cb4",
   "title": "ONLYOFFICE",
   "socketPath": "/doceditor/ws",
   "dependencies": {
-    "@aws-sdk/client-cloudwatch-logs": "^3.199.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.297.0",
     "@onlyoffice/document-editor-react": "1.3.0",
-    "aws-crt": "^1.14.7",
-    "bufferutil": "^4.0.6",
+    "aws-crt": "^1.15.13",
+    "bufferutil": "^4.0.7",
     "compression": "^1.7.4",
-    "date-and-time": "^2.4.1",
-    "express": "^4.18.1",
+    "date-and-time": "^2.4.3",
+    "express": "^4.18.2",
     "express-xss-sanitizer": "^1.1.6",
     "i18next-express-middleware": "^2.0.0",
-    "i18next-fs-backend": "^1.1.4",
+    "i18next-fs-backend": "^1.2.0",
     "morgan": "^1.10.0",
     "nconf": "^0.12.0",
-    "utf-8-validate": "^5.0.9",
+    "utf-8-validate": "^5.0.10",
     "winston": "^3.8.2",
     "winston-cloudwatch": "^6.1.1",
-    "winston-daily-rotate-file": "^4.5.5"
+    "winston-daily-rotate-file": "^4.7.1"
   }
 }

packages/editor/src/client/bootstrap.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { hydrate } from "react-dom";
+import { hydrateRoot } from "react-dom/client";
 // import { registerSW } from "@docspace/common/sw/helper";
 import App from "./App.js";
 import pkg from "../../package.json";
@@ -11,17 +11,19 @@ const initialLanguage = window.initialLanguage;
 
 initI18n(initialI18nStoreASC);
 
-hydrate(
-  <React.Suspense fallback={<div></div>}>
-    <App
-      initialLanguage={initialLanguage}
-      initialI18nStoreASC={initialI18nStoreASC}
-      {...propsObj}
-    />
-  </React.Suspense>,
-  document.getElementById("root")
-);
-
+const container = document.getElementById("root");
+if (container) {
+  hydrateRoot(
+    container,
+    <React.Suspense fallback={<div></div>}>
+      <App
+        initialLanguage={initialLanguage}
+        initialI18nStoreASC={initialI18nStoreASC}
+        {...propsObj}
+      />
+    </React.Suspense>
+  );
+}
 if (IS_DEVELOPMENT) {
   const port = PORT || 5013;
   const socketPath = pkg.socketPath;

packages/editor/src/server/lib/helpers/render-app.jsx

@@ -9,10 +9,12 @@ const renderApp = (i18n, initialState) => {
   const sheet = new ServerStyleSheet();
   const component = renderToString(
     sheet.collectStyles(
-      <I18nextProvider i18n={i18n}>
-        <GlobalStyle />
-        <Editor {...initialState} />
-      </I18nextProvider>
+      <React.Suspense fallback={<div></div>}>
+        <I18nextProvider i18n={i18n}>
+          <GlobalStyle />
+          <Editor {...initialState} />
+        </I18nextProvider>
+      </React.Suspense>
     )
   );
 

packages/login/package.json

@@ -54,51 +54,51 @@
     "test:parse-xml": "node tests/helpers/parserXML.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-export-default-from": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.18.10",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@svgr/webpack": "^5.5.0",
     "@types/accept-language-parser": "^1.5.3",
     "@types/compression": "^1.7.2",
     "@types/cookie-parser": "^1.4.3",
-    "@types/express": "^4.17.13",
+    "@types/express": "^4.17.17",
     "@types/i18next-fs-backend": "^1.1.2",
-    "@types/morgan": "^1.9.3",
-    "@types/node": "^18.6.1",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.25",
+    "@types/morgan": "^1.9.4",
+    "@types/node": "^18.15.5",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/styled-components": "^5.1.26",
     "@types/winston": "^2.4.4",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.3.0",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.2.0",
+    "copy-webpack-plugin": "^9.1.0",
+    "css-loader": "^6.7.3",
     "external-remotes-plugin": "^1.0.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "5.3.2",
+    "html-webpack-plugin": "5.5.0",
     "json-loader": "^0.5.7",
-    "mocha": "^9.1.3",
-    "mocha-junit-reporter": "^2.0.2",
-    "mocha-multi": "^1.1.5",
-    "mochawesome": "^7.0.1",
-    "nodemon": "^2.0.19",
+    "mocha": "^9.2.2",
+    "mocha-junit-reporter": "^2.2.0",
+    "mocha-multi": "^1.1.7",
+    "mochawesome": "^7.1.3",
+    "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.17.1",
-    "sass": "^1.39.2",
-    "sass-loader": "^12.1.0",
-    "serve": "14.1.1",
-    "shx": "^0.3.3",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "3.2.1",
-    "terser-webpack-plugin": "^5.2.4",
-    "typescript": "^4.7.4",
-    "webpack": "5.76.0",
+    "playwright": "^1.32.0",
+    "sass": "^1.59.3",
+    "sass-loader": "^12.6.0",
+    "serve": "14.2.0",
+    "shx": "^0.3.4",
+    "source-map-loader": "^3.0.2",
+    "style-loader": "3.3.2",
+    "terser-webpack-plugin": "^5.3.7",
+    "typescript": "^4.9.5",
+    "webpack": "5.76.3",
     "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.3.1",
+    "webpack-dev-server": "4.13.1",
     "webpack-filter-warnings-plugin": "^1.2.1",
     "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0"
@@ -106,23 +106,23 @@
   "title": "ONLYOFFICE",
   "socketPath": "/login/ws",
   "dependencies": {
-    "@aws-sdk/client-cloudwatch-logs": "^3.199.0",
-    "@types/ws": "^8.5.3",
-    "aws-crt": "^1.14.7",
-    "bufferutil": "^4.0.6",
+    "@aws-sdk/client-cloudwatch-logs": "^3.297.0",
+    "@types/ws": "^8.5.4",
+    "aws-crt": "^1.15.13",
+    "bufferutil": "^4.0.7",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
-    "date-and-time": "^2.4.1",
-    "express": "^4.18.1",
+    "date-and-time": "^2.4.3",
+    "express": "^4.18.2",
     "express-xss-sanitizer": "^1.1.6",
     "i18next-express-middleware": "^2.0.0",
-    "i18next-fs-backend": "^1.1.4",
+    "i18next-fs-backend": "^1.2.0",
     "iconv-lite": "^0.6.3",
     "morgan": "^1.10.0",
     "nconf": "^0.12.0",
-    "utf-8-validate": "^5.0.9",
+    "utf-8-validate": "^5.0.10",
     "winston": "^3.8.2",
     "winston-cloudwatch": "^6.1.1",
-    "winston-daily-rotate-file": "^4.5.5"
+    "winston-daily-rotate-file": "^4.7.1"
   }
 }

packages/login/src/client/bootstrap.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { hydrate } from "react-dom";
+import { hydrateRoot } from "react-dom/client";
 // import { registerSW } from "@docspace/common/sw/helper";
 import pkg from "../../package.json";
 import { initI18n } from "./helpers/utils";
@@ -14,15 +14,18 @@ if (isDesktopEditor) typeof window["AscDesktopEditor"];
 
 initI18n(initialI18nStoreASC);
 
-hydrate(
-  <ClientApp
-    initialLanguage={initialLanguage}
-    initialI18nStoreASC={initialI18nStoreASC}
-    isDesktopEditor={isDesktopEditor}
-    {...propsObj}
-  />,
-  document.getElementById("root")
-);
+const container = document.getElementById("root");
+if (container) {
+  hydrateRoot(
+    container,
+    <ClientApp
+      initialLanguage={initialLanguage}
+      initialI18nStoreASC={initialI18nStoreASC}
+      isDesktopEditor={isDesktopEditor}
+      {...propsObj}
+    />
+  );
+}
 
 if (IS_DEVELOPMENT) {
   const port = PORT || 5011;