Reapply "Merge pull request #9572 from weseek/support/upgrade-react"

This reverts commit 3c03ef64b13cb2c14125fa44c9a4cbddbce589a4.

apps/app/package.json

@@ -177,12 +177,12 @@
     "prop-types": "^15.8.1",
     "qs": "^6.11.1",
     "rate-limiter-flexible": "^2.3.7",
-    "react": "^18.2.0",
+    "react": "^18.3.0",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-card-flip": "^1.0.10",
     "react-datepicker": "^4.7.0",
     "react-disable": "^0.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.0",
     "react-error-boundary": "^3.1.4",
     "react-i18next": "^15.1.1",
     "react-image-crop": "^8.3.0",
@@ -264,8 +264,8 @@
     "@types/ldapjs": "^2.2.5",
     "@types/mdast": "^4.0.4",
     "@types/node-cron": "^3.0.11",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-input-autosize": "^2.2.4",
     "@types/react-scroll": "^1.8.4",
     "@types/react-stickynode": "^4.0.3",

apps/app/src/client/components/Admin/AdminHome/EnvVarsTable.tsx

@@ -5,7 +5,7 @@ type EnvVarsTableProps = {
 }
 
 export const EnvVarsTable: React.FC<EnvVarsTableProps> = (props: EnvVarsTableProps) => {
-  const envVarRows: JSX.Element[] = [];
+  const envVarRows: React.ReactElement[] = [];
 
   for (const [key, value] of Object.entries(props.envVars)) {
     if (value != null) {

apps/app/src/client/components/Admin/App/AppSetting.jsx

@@ -40,7 +40,7 @@ const AppSetting = (props) => {
           <input
             className="form-control"
             type="text"
-            defaletValue={adminAppContainer.state.title || ''}
+            defaultValue={adminAppContainer.state.title || ''}
             onChange={(e) => {
               adminAppContainer.changeTitle(e.target.value);
             }}

apps/app/src/client/components/Admin/App/AwsSetting.tsx

@@ -15,7 +15,7 @@ export type AwsSettingMoleculeProps = {
   onChangeS3SecretAccessKey: (val: string) => void
 };
 
-export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element => {
+export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): React.ReactElement => {
   const { t } = useTranslation();
 
   return (

apps/app/src/client/components/Admin/App/AzureSetting.tsx

@@ -23,7 +23,7 @@ export type AzureSettingMoleculeProps = {
   onChangeAzureStorageContainerName: (val: string) => void
 };
 
-export const AzureSettingMolecule = (props: AzureSettingMoleculeProps): JSX.Element => {
+export const AzureSettingMolecule = (props: AzureSettingMoleculeProps): React.ReactElement => {
   const { t } = useTranslation();
 
   const {

apps/app/src/client/components/Admin/App/FileUploadSetting.tsx

@@ -26,7 +26,7 @@ type FileUploadSettingMoleculeProps = {
   onChangeFileUploadType: (e: ChangeEvent, type: string) => void
 } & AwsSettingMoleculeProps & GcsSettingMoleculeProps & AzureSettingMoleculeProps;
 
-export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMoleculeProps): JSX.Element => {
+export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMoleculeProps): React.ReactElement => {
   const { t } = useTranslation(['admin', 'commons']);
 
   return (
@@ -136,7 +136,7 @@ type FileUploadSettingProps = {
   adminAppContainer: AdminAppContainer
 }
 
-const FileUploadSetting = (props: FileUploadSettingProps): JSX.Element => {
+const FileUploadSetting = (props: FileUploadSettingProps): React.ReactElement => {
   const { t } = useTranslation(['admin', 'commons']);
   const { adminAppContainer } = props;
 

apps/app/src/client/components/Admin/App/GcsSetting.tsx

@@ -15,7 +15,7 @@ export type GcsSettingMoleculeProps = {
   onChangeGcsUploadNamespace: (val: string) => void
 };
 
-export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): JSX.Element => {
+export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): React.ReactElement => {
   const { t } = useTranslation();
 
   const {

apps/app/src/client/components/Admin/App/MaskedInput.tsx

@@ -10,7 +10,7 @@ type Props = {
   tabIndex?: number | undefined
 };
 
-export default function MaskedInput(props: Props): JSX.Element {
+export default function MaskedInput(props: Props): React.ReactElement {
   const [passwordShown, setPasswordShown] = useState(false);
   const togglePassword = () => {
     setPasswordShown(!passwordShown);

apps/app/src/client/components/Admin/App/QuestionnaireSettings.tsx

@@ -11,7 +11,7 @@ import { useSWRxAppSettings } from '~/stores/admin/app-settings';
 
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-const QuestionnaireSettings = (): JSX.Element => {
+const QuestionnaireSettings = (): React.ReactElement => {
   const { t } = useTranslation(['admin', 'commons']);
 
   const { data, error, mutate } = useSWRxAppSettings();

apps/app/src/client/components/Admin/Common/AdminInstallButtonRow.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 }
 
-export const AdminInstallButtonRow = (props: Props): JSX.Element => {
+export const AdminInstallButtonRow = (props: Props): React.ReactElement => {
   return (
     <div className="row my-3">
       <div className="mx-auto">

apps/app/src/client/components/Admin/Common/AdminUpdateButtonRow.tsx

@@ -7,7 +7,7 @@ type Props = {
   disabled?: boolean,
 }
 
-const AdminUpdateButtonRow = (props: Props): JSX.Element => {
+const AdminUpdateButtonRow = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   return (

apps/app/src/client/components/Admin/Common/LabeledProgressBar.tsx

@@ -9,7 +9,7 @@ type Props = {
   isInProgress?: boolean,
 }
 
-const LabeledProgressBar = (props: Props): JSX.Element => {
+const LabeledProgressBar = (props: Props): React.ReactElement => {
   const {
     header, currentCount, totalCount, isInProgress,
   } = props;

apps/app/src/client/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -13,7 +13,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeCssSetting = (props: Props): JSX.Element => {
+const CustomizeCssSetting = (props: Props): React.ReactElement => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

apps/app/src/client/components/Admin/Customize/CustomizeFunctionOption.tsx

@@ -8,7 +8,7 @@ type Props = {
   children: React.ReactNode,
 }
 
-const CustomizeFunctionOption = (props: Props): JSX.Element => {
+const CustomizeFunctionOption = (props: Props): React.ReactElement => {
 
   const {
     optionId, label, isChecked, onChecked, children,

apps/app/src/client/components/Admin/Customize/CustomizeFunctionSetting.tsx

@@ -16,7 +16,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeFunctionSetting = (props: Props): JSX.Element => {
+const CustomizeFunctionSetting = (props: Props): React.ReactElement => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

apps/app/src/client/components/Admin/Customize/CustomizeLayoutSetting.tsx

@@ -24,7 +24,7 @@ const useIsContainerFluid = () => {
   };
 };
 
-const CustomizeLayoutSetting = (): JSX.Element => {
+const CustomizeLayoutSetting = (): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const { resolvedTheme } = useNextThemes();

apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -15,7 +15,7 @@ import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 const DEFAULT_LOGO = '/images/logo.svg';
 const CUSTOMIZED_LOGO = '/attachment/brand-logo';
 
-const CustomizeLogoSetting = (): JSX.Element => {
+const CustomizeLogoSetting = (): React.ReactElement => {
 
   const { t } = useTranslation();
   const { data: isDefaultLogo } = useIsDefaultLogo();

apps/app/src/client/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -15,7 +15,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
+const CustomizeNoscriptSetting = (props: Props): React.ReactElement => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

apps/app/src/client/components/Admin/Customize/CustomizePresentationSetting.tsx

@@ -14,7 +14,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizePresentationSetting = (props: Props): JSX.Element => {
+const CustomizePresentationSetting = (props: Props): React.ReactElement => {
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();
 

apps/app/src/client/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -15,7 +15,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeScriptSetting = (props: Props): JSX.Element => {
+const CustomizeScriptSetting = (props: Props): React.ReactElement => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

apps/app/src/client/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -8,7 +8,7 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
 import { useSWRxSidebarConfig } from '~/stores/admin/sidebar-config';
 
-const CustomizeSidebarsetting = (): JSX.Element => {
+const CustomizeSidebarsetting = (): React.ReactElement => {
   const { t } = useTranslation(['admin', 'commons']);
 
   const {

apps/app/src/client/components/Admin/Customize/CustomizeThemeOptions.tsx

@@ -12,7 +12,7 @@ type Props = {
   onSelected?: (themeName: string) => void,
 };
 
-const CustomizeThemeOptions = (props: Props): JSX.Element => {
+const CustomizeThemeOptions = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const { availableThemes, selectedTheme, onSelected } = props;

apps/app/src/client/components/Admin/Customize/CustomizeThemeSetting.tsx

@@ -16,7 +16,7 @@ type Props = {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const CustomizeThemeSetting = (props: Props): JSX.Element => {
+const CustomizeThemeSetting = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   const { data, error, update } = useSWRxGrowiThemeSetting();

apps/app/src/client/components/Admin/Customize/ThemeColorBox.tsx

@@ -13,7 +13,7 @@ type Props = {
   onSelected?: () => void,
 };
 
-export const ThemeColorBox = (props: Props): JSX.Element => {
+export const ThemeColorBox = (props: Props): React.ReactElement => {
 
   const {
     isSelected, metadata, onSelected,

apps/app/src/client/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.tsx

@@ -8,7 +8,7 @@ type Props = {
   isNormalized?: boolean,
 }
 
-const NormalizeIndicesControls = (props: Props): JSX.Element => {
+const NormalizeIndicesControls = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
   const { isNormalized, isRebuildingProcessing } = props;
 

apps/app/src/client/components/Admin/ElasticsearchManagement/ReconnectControls.tsx

@@ -10,7 +10,7 @@ type Props = {
   onReconnectingRequested: () => void,
 }
 
-const ReconnectControls = (props: Props): JSX.Element => {
+const ReconnectControls = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const { isEnabled, isProcessing } = props;

apps/app/src/client/components/Admin/ExportArchiveData/ArchiveFilesTable.tsx

@@ -10,7 +10,7 @@ type ArchiveFilesTableProps = {
   onZipFileStatRemove: (fileName: string) => void,
 }
 
-const ArchiveFilesTable = (props: ArchiveFilesTableProps): JSX.Element => {
+const ArchiveFilesTable = (props: ArchiveFilesTableProps): React.ReactElement => {
   const { t } = useTranslation();
 
   return (

apps/app/src/client/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.tsx

@@ -9,7 +9,7 @@ type ArchiveFilesTableMenuProps = {
   onZipFileStatRemove: (fileName: string) => void,
 }
 
-const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps):JSX.Element => {
+const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps): React.ReactElement => {
   const { t } = useTranslation();
 
   return (

apps/app/src/client/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx

@@ -32,7 +32,7 @@ type Props = {
   isAllChecked?: boolean,
 };
 
-const SelectCollectionsModal = (props: Props): JSX.Element => {
+const SelectCollectionsModal = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   const {

apps/app/src/client/components/Admin/ExportArchiveDataPage.tsx

@@ -17,7 +17,7 @@ const IGNORED_COLLECTION_NAMES = [
   'sessions', 'rlflx', 'yjs-writings', 'transferkeys',
 ];
 
-const ExportArchiveDataPage = (): JSX.Element => {
+const ExportArchiveDataPage = (): React.ReactElement => {
   const { data: socket } = useAdminSocket();
   const { t } = useTranslation('admin');
 

apps/app/src/client/components/Admin/ForbiddenPage.tsx

@@ -4,7 +4,7 @@ import DefaultErrorPage from 'next/error';
 import { useTranslation } from 'react-i18next';
 
 
-export const ForbiddenPage = (): JSX.Element => {
+export const ForbiddenPage = (): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const errorMessage = t('forbidden_page.do_not_have_admin_permission');

apps/app/src/client/components/Admin/FullTextSearchManagement.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next';
 
 import ElasticsearchManagement from './ElasticsearchManagement/ElasticsearchManagement';
 
-export const FullTextSearchManagement = (): JSX.Element => {
+export const FullTextSearchManagement = (): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   return (

apps/app/src/client/components/Admin/G2GDataTransfer.tsx

@@ -21,7 +21,7 @@ const IGNORED_COLLECTION_NAMES = [
   'sessions', 'rlflx', 'activities', 'attachmentFiles.files', 'attachmentFiles.chunks',
 ];
 
-const G2GDataTransfer = (): JSX.Element => {
+const G2GDataTransfer = (): React.ReactElement => {
   const { data: socket } = useAdminSocket();
   const { t } = useTranslation(['admin', 'commons']);
 

apps/app/src/client/components/Admin/G2GDataTransferExportForm.tsx

@@ -35,7 +35,7 @@ type Props = {
   updateOptionsMap: (newOptionsMap: any) => void,
 };
 
-const G2GDataTransferExportForm = (props: Props): JSX.Element => {
+const G2GDataTransferExportForm = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const {
@@ -66,7 +66,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
     });
   }, [optionsMap, updateOptionsMap]);
 
-  const ImportItems = ({ collectionNames }): JSX.Element => {
+  const ImportItems = ({ collectionNames }): React.ReactElement => {
     const toggleCheckbox = (collectionName, bool) => {
       const collections = new Set(selectedCollections);
       if (bool) {
@@ -122,7 +122,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
     );
   };
 
-  const WarnForGroups = ({ errors }: { errors: Error[] }): JSX.Element => {
+  const WarnForGroups = ({ errors }: { errors: Error[] }): React.ReactElement => {
     if (errors.length === 0) {
       return <></>;
     }
@@ -138,7 +138,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
     );
   };
 
-  const GroupImportItems = ({ groupList, groupName, errors }): JSX.Element => {
+  const GroupImportItems = ({ groupList, groupName, errors }): React.ReactElement => {
     const collectionNames = groupList.filter((groupCollectionName) => {
       return allCollectionNames.includes(groupCollectionName);
     });
@@ -156,7 +156,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
     );
   };
 
-  const OtherImportItems = (): JSX.Element => {
+  const OtherImportItems = (): React.ReactElement => {
     const collectionNames = allCollectionNames.filter((collectionName) => {
       return !ALL_GROUPED_COLLECTIONS.includes(collectionName);
     });

apps/app/src/client/components/Admin/G2GDataTransferStatusIcon.tsx

@@ -15,7 +15,7 @@ interface Props extends ComponentPropsWithoutRef<'span'>{
 /**
  * Icon for G2G transfer status
  */
-const G2GDataTransferStatusIcon = ({ status, className, ...props }: Props): JSX.Element => {
+const G2GDataTransferStatusIcon = ({ status, className, ...props }: Props): React.ReactElement => {
   if (status === G2G_PROGRESS_STATUS.IN_PROGRESS) {
     return (
       <LoadingSpinner className={`${className}`} aria-label="in progress" {...props} />

apps/app/src/client/components/Admin/ImportData/GrowiArchive/ErrorViewer.tsx

@@ -8,7 +8,7 @@ type ErrorViewerProps = {
   onClose: () => void,
 }
 
-const ErrorViewer = (props: ErrorViewerProps): JSX.Element => {
+const ErrorViewer = (props: ErrorViewerProps): React.ReactElement => {
   const { errors } = props;
 
   let value = '(no errors)';

apps/app/src/client/components/Admin/ManageExternalAccount.tsx

@@ -15,7 +15,7 @@ type ManageExternalAccountProps = {
   adminExternalAccountsContainer: AdminExternalAccountsContainer,
 }
 
-const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element => {
+const ManageExternalAccount = (props: ManageExternalAccountProps): React.ReactElement => {
 
   const { t } = useTranslation();
   const { adminExternalAccountsContainer } = props;

apps/app/src/client/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -20,7 +20,7 @@ type Props ={
   adminMarkDownContainer: AdminMarkDownContainer
 }
 
-const MarkDownSettingContents = React.memo((props: Props): JSX.Element => {
+const MarkDownSettingContents = React.memo((props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
   const { adminMarkDownContainer } = props;
 

apps/app/src/client/components/Admin/MarkdownSetting/WhitelistInput.tsx

@@ -9,7 +9,7 @@ type Props ={
   adminMarkDownContainer: AdminMarkDownContainer
 }
 
-export const WhitelistInput = (props: Props): JSX.Element => {
+export const WhitelistInput = (props: Props): React.ReactElement => {
 
   const { t } = useTranslation('admin');
   const { adminMarkDownContainer } = props;

apps/app/src/client/components/Admin/NotFoundPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-export const AdminNotFoundPage = (): JSX.Element => {
+export const AdminNotFoundPage = (): React.ReactElement => {
   const { t } = useTranslation('commons');
 
   return (

apps/app/src/client/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -26,7 +26,7 @@ type Props = {
   globalNotificationId?: string,
 }
 
-const ManageGlobalNotification = (props: Props): JSX.Element => {
+const ManageGlobalNotification = (props: Props): React.ReactElement => {
 
   const [triggerPath, setTriggerPath] = useState('');
   const [notifyType, setNotifyType] = useState<NotifyType>(NotifyType.Email);

apps/app/src/client/components/Admin/Notification/NotificationTypeIcon.tsx

@@ -12,7 +12,7 @@ type NotificationTypeIconProps = {
   notification: INotificationType
 }
 
-export const NotificationTypeIcon = (props: NotificationTypeIconProps): JSX.Element => {
+export const NotificationTypeIcon = (props: NotificationTypeIconProps): React.ReactElement => {
   const { __t, _id, provider } = props.notification;
 
   const type = __t != null && __t === 'mail' ? 'mail' : 'slack';

apps/app/src/client/components/Admin/Security/LdapAuthTest.tsx

@@ -16,7 +16,7 @@ type LdapAuthTestProps = {
   onChangePassword: (password: string) => void,
 }
 
-export const LdapAuthTest = (props: LdapAuthTestProps): JSX.Element => {
+export const LdapAuthTest = (props: LdapAuthTestProps): React.ReactElement => {
   const {
     username, password, onChangeUsername, onChangePassword,
   } = props;

apps/app/src/client/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -486,11 +486,10 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                               aria-expanded="true"
                               aria-controls="ablchelp"
                             >
-                              <span
-                                className="material-symbols-outlined me-1"
-                                small
-                              >{this.state.isHelpOpened ? 'expand_more' : 'chevron_right'}
-                              </span> Show more...
+                              <span className="material-symbols-outlined me-1">
+                                {this.state.isHelpOpened ? 'expand_more' : 'chevron_right'}
+                              </span>
+                              Show more...
                             </button>
                           </h2>
                           <Collapse isOpen={this.state.isHelpOpened}>

apps/app/src/client/components/Admin/SlackIntegration/BotTypeCard.tsx

@@ -36,7 +36,7 @@ type BotTypeCardProps = {
   onBotTypeSelectHandler: (botType: SlackbotType) => void,
 };
 
-export const BotTypeCard = (props: BotTypeCardProps): JSX.Element => {
+export const BotTypeCard = (props: BotTypeCardProps): React.ReactElement => {
   const { t } = useTranslation();
 
   const { isActive, botType, onBotTypeSelectHandler } = props;

apps/app/src/client/components/Admin/SlackIntegration/Bridge.tsx

@@ -18,7 +18,7 @@ type BridgeCoreProps = {
   hrClass: string,
   withProxy?: boolean,
 }
-const BridgeCore = (props: BridgeCoreProps): JSX.Element => {
+const BridgeCore = (props: BridgeCoreProps): React.ReactElement => {
   const {
     description, iconClass, iconName, hrClass, withProxy,
   } = props;
@@ -55,7 +55,7 @@ type BridgeProps = {
   totalCount: number,
   withProxy?: boolean,
 }
-export const Bridge = (props: BridgeProps): JSX.Element => {
+export const Bridge = (props: BridgeProps): React.ReactElement => {
   const { t } = useTranslation();
   const { errorCount, totalCount, withProxy } = props;
 

apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithProxyConnectionStatus.tsx

@@ -11,7 +11,7 @@ type CustomBotWithProxyConnectionStatusProps = {
   connectionStatuses: any,
 }
 
-export const CustomBotWithProxyConnectionStatus = (props: CustomBotWithProxyConnectionStatusProps): JSX.Element => {
+export const CustomBotWithProxyConnectionStatus = (props: CustomBotWithProxyConnectionStatusProps): React.ReactElement => {
   const { siteName, connectionStatuses } = props;
 
   const connectionStatusValues: ConnectionStatus[] = Object.values(connectionStatuses);

apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithoutProxyConnectionStatus.tsx

@@ -10,7 +10,7 @@ type CustomBotWithoutProxyConnectionStatusProps = {
   connectionStatuses: any,
 }
 
-export const CustomBotWithoutProxyConnectionStatus = (props: CustomBotWithoutProxyConnectionStatusProps): JSX.Element => {
+export const CustomBotWithoutProxyConnectionStatus = (props: CustomBotWithoutProxyConnectionStatusProps): React.ReactElement => {
   const { siteName, connectionStatuses } = props;
 
   const connectionStatusValues: ConnectionStatus[] = Object.values(connectionStatuses);

apps/app/src/client/components/Admin/SlackIntegration/SlackAppIntegrationControl.tsx

@@ -10,7 +10,7 @@ type Props = {
   onDeleteButtonClicked?: (slackAppIntegration: unknown) => void,
 }
 
-export const SlackAppIntegrationControl = (props: Props): JSX.Element => {
+export const SlackAppIntegrationControl = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   const { slackAppIntegration, onIsPrimaryChanged, onDeleteButtonClicked } = props;

apps/app/src/client/components/Admin/SlackIntegration/SlackIntegration.tsx

@@ -20,7 +20,7 @@ import OfficialBotSettings from './OfficialBotSettings';
 
 const botTypes = Object.values(SlackbotType);
 
-export const SlackIntegration = (): JSX.Element => {
+export const SlackIntegration = (): React.ReactElement => {
 
   const { t } = useTranslation();
   const [currentBotType, setCurrentBotType] = useState<SlackbotType | undefined>();

apps/app/src/client/components/Admin/UserGroup/UserGroupTable.tsx

@@ -64,7 +64,7 @@ type UserGroupEditLinkProps = {
   isExternalGroup:boolean,
 }
 
-const UserGroupEditLink = (props: UserGroupEditLinkProps): JSX.Element => {
+const UserGroupEditLink = (props: UserGroupEditLinkProps): React.ReactElement => {
   return (
     <Link
       href={`/admin/user-group-detail/${props.group._id}?isExternalGroup=${props.isExternalGroup}`}

apps/app/src/client/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -50,7 +50,7 @@ type Props = {
   isExternalGroup: boolean,
 }
 
-const UserGroupDetailPage = (props: Props): JSX.Element => {
+const UserGroupDetailPage = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
   const router = useRouter();
   const { userGroupId: currentUserGroupId, isExternalGroup } = props;

apps/app/src/client/components/Admin/UserGroupDetail/UserGroupPageList.tsx

@@ -16,7 +16,7 @@ type Props = {
   relatedPages?: IPageHasId[],
 }
 
-const UserGroupPageList = (props: Props): JSX.Element => {
+const UserGroupPageList = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
   const { userGroupId, relatedPages } = props;
 

apps/app/src/client/components/Admin/UserGroupDetail/UserGroupUserModal.tsx

@@ -27,7 +27,7 @@ type Props = {
   onToggleIsAlsoNameSearched: () => void,
 }
 
-const UserGroupUserModal = (props: Props): JSX.Element => {
+const UserGroupUserModal = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
   const {
     isOpen,

apps/app/src/client/components/Admin/UserGroupDetail/UserGroupUserTable.tsx

@@ -13,7 +13,7 @@ type Props = {
   isExternalGroup?: boolean
 }
 
-export const UserGroupUserTable = (props: Props): JSX.Element => {
+export const UserGroupUserTable = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   return (

apps/app/src/client/components/Admin/Users/ExternalAccountTable.tsx

@@ -15,7 +15,7 @@ type ExternalAccountTableProps = {
   adminExternalAccountsContainer: AdminExternalAccountsContainer,
 }
 
-const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element => {
+const ExternalAccountTable = (props: ExternalAccountTableProps): React.ReactElement => {
 
   const { t } = useTranslation('admin');
 

apps/app/src/client/components/Admin/Users/GrantAdminButton.tsx

@@ -13,7 +13,7 @@ type GrantAdminButtonProps = {
   user: IUserHasId,
 }
 
-const GrantAdminButton = (props: GrantAdminButtonProps): JSX.Element => {
+const GrantAdminButton = (props: GrantAdminButtonProps): React.ReactElement => {
 
   const { t } = useTranslation('admin');
   const { adminUsersContainer, user } = props;

apps/app/src/client/components/Admin/Users/GrantReadOnlyButton.tsx

@@ -11,7 +11,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 const GrantReadOnlyButton: React.FC<{
   adminUsersContainer: AdminUsersContainer,
   user: IUserHasId,
-}> = ({ adminUsersContainer, user }): JSX.Element => {
+}> = ({ adminUsersContainer, user }): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const onClickGrantReadOnlyBtnHandler = useCallback(async() => {

apps/app/src/client/components/Admin/Users/RevokeAdminButton.tsx

@@ -14,7 +14,7 @@ type RevokeAdminButtonProps = {
   user: IUserHasId,
 }
 
-const RevokeAdminButton = (props: RevokeAdminButtonProps): JSX.Element => {
+const RevokeAdminButton = (props: RevokeAdminButtonProps): React.ReactElement => {
 
   const { t } = useTranslation('admin');
   const { data: currentUser } = useCurrentUser();

apps/app/src/client/components/Admin/Users/RevokeAdminMenuItem.tsx

@@ -10,7 +10,7 @@ import { useCurrentUser } from '~/stores-universal/context';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 
-const RevokeAdminAlert = React.memo((): JSX.Element => {
+const RevokeAdminAlert = React.memo((): React.ReactElement => {
   const { t } = useTranslation();
 
   return (
@@ -28,7 +28,7 @@ type Props = {
   user: IUserHasId,
 }
 
-const RevokeAdminMenuItem = (props: Props): JSX.Element => {
+const RevokeAdminMenuItem = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const { adminUsersContainer, user } = props;

apps/app/src/client/components/Admin/Users/RevokeReadOnlyMenuItem.tsx

@@ -11,7 +11,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 const RevokeReadOnlyMenuItem: React.FC<{
   adminUsersContainer: AdminUsersContainer,
   user: IUserHasId,
-}> = ({ adminUsersContainer, user }): JSX.Element => {
+}> = ({ adminUsersContainer, user }): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const clickRevokeReadOnlyBtnHandler = useCallback(async() => {

apps/app/src/client/components/Admin/Users/SortIcons.tsx

@@ -6,7 +6,7 @@ type SortIconsProps = {
   isAsc: boolean,
 }
 
-export const SortIcons = (props: SortIconsProps): JSX.Element => {
+export const SortIcons = (props: SortIconsProps): React.ReactElement => {
 
   const { onClick, isSelected, isAsc } = props;
 

apps/app/src/client/components/Admin/Users/StatusSuspendMenuItem.tsx

@@ -9,7 +9,7 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useCurrentUser } from '~/stores-universal/context';
 
 
-const SuspendAlert = React.memo((): JSX.Element => {
+const SuspendAlert = React.memo((): React.ReactElement => {
   const { t } = useTranslation();
 
   return (
@@ -27,7 +27,7 @@ type Props = {
   user: IUserHasId,
 }
 
-const StatusSuspendMenuItem = (props: Props): JSX.Element => {
+const StatusSuspendMenuItem = (props: Props): React.ReactElement => {
   const { t } = useTranslation('admin');
 
   const { adminUsersContainer, user } = props;

apps/app/src/client/components/AlertSiteUrlUndefined.tsx

@@ -13,7 +13,7 @@ const isValidUrl = (str: string): boolean => {
   }
 };
 
-export const AlertSiteUrlUndefined = (): JSX.Element => {
+export const AlertSiteUrlUndefined = (): React.ReactElement => {
   const { t } = useTranslation('commons');
   const { data: siteUrl, error: errorSiteUrl } = useSiteUrl();
   const isLoadingSiteUrl = siteUrl === undefined && errorSiteUrl === undefined;

apps/app/src/client/components/AuthorInfo/AuthorInfo.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
-import type { IUserHasId } from '@growi/core';
-import { isPopulated, type IUser, type Ref } from '@growi/core';
+import {
+  isPopulated,
+  type IUser, type Ref, type IUserHasId,
+} from '@growi/core';
 import { pagePathUtils } from '@growi/core/dist/utils';
 import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns/format';
@@ -11,7 +13,7 @@ import Link from 'next/link';
 
 import styles from './AuthorInfo.module.scss';
 
-const UserLabel = ({ user }: { user: IUserHasId | Ref<IUser> }): JSX.Element => {
+const UserLabel = ({ user }: { user: IUserHasId | Ref<IUser> }): React.ReactElement => {
   if (isPopulated(user)) {
     return (
       <Link href={pagePathUtils.userHomepagePath(user)} prefetch={false}>
@@ -31,7 +33,7 @@ type AuthorInfoProps = {
   locate: 'subnav' | 'footer',
 }
 
-export const AuthorInfo = (props: AuthorInfoProps): JSX.Element => {
+export const AuthorInfo = (props: AuthorInfoProps): React.ReactElement => {
   const { t } = useTranslation();
   const {
     date, user, mode = 'create', locate = 'subnav',

apps/app/src/client/components/Bookmarks/BookmarkFolderItemControl.tsx

@@ -15,7 +15,7 @@ export const BookmarkFolderItemControl: React.FC<{
   onClickMoveToRoot,
   onClickRename,
   onClickDelete,
-}): JSX.Element => {
+}): React.ReactElement => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
 

apps/app/src/client/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -23,7 +23,7 @@ type BookmarkFolderMenuProps = {
   children?: React.ReactNode,
 }
 
-export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element => {
+export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): React.ReactElement => {
   const {
     isOpen, pageId, isBookmarked, onToggle, onUnbookmark, children,
   } = props;

apps/app/src/client/components/Bookmarks/BookmarkFolderNameInput.tsx

@@ -15,7 +15,7 @@ import type { SubmittableInputProps } from '../Common/SubmittableInput/types';
 
 type Props = Pick<SubmittableInputProps<AutosizeInputProps>, 'value' | 'onSubmit' | 'onCancel'>;
 
-export const BookmarkFolderNameInput = (props: Props): JSX.Element => {
+export const BookmarkFolderNameInput = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   const { value, onSubmit, onCancel } = props;

apps/app/src/client/components/Bookmarks/BookmarkItem.tsx

@@ -36,7 +36,7 @@ type Props = {
   bookmarkFolderTreeMutation: () => void,
 }
 
-export const BookmarkItem = (props: Props): JSX.Element => {
+export const BookmarkItem = (props: Props): React.ReactElement => {
   const BASE_FOLDER_PADDING = 15;
   const BASE_BOOKMARK_PADDING = 16;
 

apps/app/src/client/components/Bookmarks/BookmarkItemRenameInput.tsx

@@ -15,7 +15,7 @@ import type { SubmittableInputProps } from '../Common/SubmittableInput/types';
 
 type Props = Pick<SubmittableInputProps<AutosizeInputProps>, 'value' | 'onSubmit' | 'onCancel'>;
 
-export const BookmarkItemRenameInput = (props: Props): JSX.Element => {
+export const BookmarkItemRenameInput = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   const { value, onSubmit, onCancel } = props;

apps/app/src/client/components/Bookmarks/DragAndDropWrapper.tsx

@@ -14,7 +14,7 @@ type DragAndDropWrapperProps = {
   isDropable?:(item: Partial<DragItemDataType>, type: string | null | symbol) => boolean
 }
 
-export const DragAndDropWrapper = (props: DragAndDropWrapperProps): JSX.Element => {
+export const DragAndDropWrapper = (props: DragAndDropWrapperProps): React.ReactElement => {
   const {
     item, children, useDragMode, useDropMode, type, onDropItem, isDropable,
   } = props;

apps/app/src/client/components/Comments.tsx

@@ -24,7 +24,7 @@ type CommentsProps = {
   onLoaded?: () => void,
 }
 
-export const Comments = (props: CommentsProps): JSX.Element => {
+export const Comments = (props: CommentsProps): React.ReactElement => {
 
   const {
     pageId, pagePath, revision, onLoaded,

apps/app/src/client/components/Common/DrawerToggler/DrawerToggler.tsx

@@ -13,7 +13,7 @@ type Props = {
   children?: ReactNode,
 }
 
-export const DrawerToggler = (props: Props): JSX.Element => {
+export const DrawerToggler = (props: Props): React.ReactElement => {
 
   const { className, children } = props;
 

apps/app/src/client/components/Common/Dropdown/PageItemControl.tsx

@@ -61,7 +61,7 @@ type DropdownMenuProps = CommonProps & {
   operationProcessData?: IPageOperationProcessData,
 }
 
-const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.Element => {
+const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): React.ReactElement => {
   const { t } = useTranslation('');
 
   const {
@@ -271,7 +271,7 @@ type PageItemControlSubstanceProps = CommonProps & {
   operationProcessData?: IPageOperationProcessData,
 }
 
-export const PageItemControlSubstance = (props: PageItemControlSubstanceProps): JSX.Element => {
+export const PageItemControlSubstance = (props: PageItemControlSubstanceProps): React.ReactElement => {
 
   const {
     pageId, pageInfo: presetPageInfo, children, onClickBookmarkMenuItem, onClickRenameMenuItem,
@@ -370,7 +370,7 @@ export type PageItemControlProps = CommonProps & {
   operationProcessData?: IPageOperationProcessData,
 }
 
-export const PageItemControl = (props: PageItemControlProps): JSX.Element => {
+export const PageItemControl = (props: PageItemControlProps): React.ReactElement => {
   const { pageId } = props;
 
   if (pageId == null) {

apps/app/src/client/components/Common/LazyRenderer.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react';
 
 type Props = {
   shouldRender: boolean | (() => boolean),
-  children: JSX.Element,
+  children: React.ReactElement,
 }
 
-export const LazyRenderer = (props: Props): JSX.Element => {
+export const LazyRenderer = (props: Props): React.ReactElement => {
   const { shouldRender: _shouldRender, children } = props;
 
   const [isActivated, setActivated] = useState(false);

apps/app/src/client/components/ContentLinkButtons.tsx

@@ -43,7 +43,7 @@ export type ContentLinkButtonsProps = {
   author?: IUserHasId,
 }
 
-export const ContentLinkButtons = (props: ContentLinkButtonsProps): JSX.Element => {
+export const ContentLinkButtons = (props: ContentLinkButtonsProps): React.ReactElement => {
   const { author } = props;
 
   if (author == null || author.status === USER_STATUS.DELETED) {

apps/app/src/client/components/CustomNavigation/CustomNav.tsx

@@ -35,7 +35,7 @@ type CustomNavDropdownProps = {
   onNavSelected?: (selectedTabKey: string) => void,
 };
 
-export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element => {
+export const CustomNavDropdown = (props: CustomNavDropdownProps): React.ReactElement => {
   const {
     activeTab, navTabMapping, onNavSelected,
   } = props;
@@ -109,10 +109,10 @@ type CustomNavTabProps = {
   onNavSelected?: (selectedTabKey: string) => void,
   hideBorderBottom?: boolean,
   breakpointToHideInactiveTabsDown?: Breakpoint,
-  navRightElement?: JSX.Element,
+  navRightElement?: React.ReactElement,
 };
 
-export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
+export const CustomNavTab = (props: CustomNavTabProps): React.ReactElement => {
   const [sliderWidth, setSliderWidth] = useState(0);
   const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
 
@@ -224,7 +224,7 @@ type CustomNavProps = {
   breakpointToSwitchDropdownDown?: Breakpoint,
 };
 
-const CustomNav = (props: CustomNavProps): JSX.Element => {
+const CustomNav = (props: CustomNavProps): React.ReactElement => {
 
   const tabClassnames = ['d-none'];
   const dropdownClassnames = ['d-block'];

apps/app/src/client/components/CustomNavigation/CustomNavAndContents.tsx

@@ -13,7 +13,7 @@ type CustomNavAndContentsProps = {
 }
 
 
-const CustomNavAndContents = (props: CustomNavAndContentsProps): JSX.Element => {
+const CustomNavAndContents = (props: CustomNavAndContentsProps): React.ReactElement => {
   const {
     navTabMapping, defaultTabIndex, navigationMode = 'tab', tabContentClasses = ['p-4'], breakpointToHideInactiveTabsDown, navRightElement,
   } = props;

apps/app/src/client/components/CustomNavigation/CustomTabContent.tsx

@@ -15,7 +15,7 @@ type Props = {
   additionalClassNames?: string[],
 }
 
-const CustomTabContent = (props: Props): JSX.Element => {
+const CustomTabContent = (props: Props): React.ReactElement => {
 
   const { activeTab, navTabMapping, additionalClassNames } = props;
 

apps/app/src/client/components/DataTransferForm.tsx

@@ -7,7 +7,7 @@ import { useGrowiDocumentationUrl } from '~/stores-universal/context';
 
 import CustomCopyToClipBoard from './Common/CustomCopyToClipBoard';
 
-const DataTransferForm = (): JSX.Element => {
+const DataTransferForm = (): React.ReactElement => {
   const { t } = useTranslation('commons');
   const { transferKey, generateTransferKey } = useGenerateTransferKey();
   const { data: documentationUrl } = useGrowiDocumentationUrl();

apps/app/src/client/components/DescendantsPageList.tsx

@@ -34,7 +34,7 @@ const convertToIDataWithMeta = (page: IPageHasId): IDataWithMeta<IPageHasId> =>
   return { data: page };
 };
 
-const DescendantsPageListSubstance = (props: SubstanceProps): JSX.Element => {
+const DescendantsPageListSubstance = (props: SubstanceProps): React.ReactElement => {
 
   const { t } = useTranslation();
 
@@ -128,7 +128,7 @@ export type DescendantsPageListProps = {
   forceHideMenuItems?: ForceHideMenuItems,
 }
 
-export const DescendantsPageList = (props: DescendantsPageListProps): JSX.Element => {
+export const DescendantsPageList = (props: DescendantsPageListProps): React.ReactElement => {
   const { path, limit, forceHideMenuItems } = props;
 
   const [activePage, setActivePage] = useState(1);

apps/app/src/client/components/DescendantsPageListModal.tsx

@@ -23,7 +23,7 @@ const DescendantsPageList = dynamic<DescendantsPageListProps>(() => import('./De
 
 const PageTimeline = dynamic(() => import('./PageTimeline').then(mod => mod.PageTimeline), { ssr: false });
 
-export const DescendantsPageListModal = (): JSX.Element => {
+export const DescendantsPageListModal = (): React.ReactElement => {
   const { t } = useTranslation();
 
   const [activeTab, setActiveTab] = useState('pagelist');

apps/app/src/client/components/EmptyTrashButton.tsx

@@ -8,7 +8,7 @@ type EmptyTrashButtonProps = {
 };
 
 
-const EmptyTrashButton = (props: EmptyTrashButtonProps): JSX.Element => {
+const EmptyTrashButton = (props: EmptyTrashButtonProps): React.ReactElement => {
   const { onEmptyTrashButtonClick, disableEmptyButton } = props;
   const { t } = useTranslation();
 

apps/app/src/client/components/ForbiddenPage.tsx

@@ -6,7 +6,7 @@ type Props = {
   isLinkSharingDisabled?: boolean,
 }
 
-const ForbiddenPage = React.memo((props: Props): JSX.Element => {
+const ForbiddenPage = React.memo((props: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   return (

apps/app/src/client/components/GrantedGroupsInheritanceSelectModal.tsx

@@ -7,7 +7,7 @@ import {
 
 import { useGrantedGroupsInheritanceSelectModal } from '~/stores/modal';
 
-const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
+const GrantedGroupsInheritanceSelectModal = (): React.ReactElement => {
   const { t } = useTranslation();
   const { data: modalData, close: closeModal } = useGrantedGroupsInheritanceSelectModal();
   const [onlyInheritUserRelatedGrantedGroups, setOnlyInheritUserRelatedGrantedGroups] = useState(false);

apps/app/src/client/components/Hotkeys/Subscribers/ShowShortcutsModal.tsx

@@ -5,7 +5,7 @@ import { useShortcutsModal } from '~/stores/modal';
 type Props = {
   onDeleteRender: () => void,
 }
-const ShowShortcutsModal = (props: Props): JSX.Element => {
+const ShowShortcutsModal = (props: Props): React.ReactElement => {
 
   const { data: status, open } = useShortcutsModal();
 

apps/app/src/client/components/Icons/FolderIcon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 type Props = {
   isOpen: boolean
 }
-export const FolderIcon = (props: Props): JSX.Element => {
+export const FolderIcon = (props: Props): React.ReactElement => {
   const { isOpen } = props;
 
   return (

apps/app/src/client/components/Icons/RecentlyCreatedIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const RecentlyCreatedIcon = (): JSX.Element => (
+export const RecentlyCreatedIcon = (): React.ReactElement => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="20"

apps/app/src/client/components/IdenticalPathPage.tsx

@@ -48,7 +48,7 @@ const IdenticalPathAlert : FC<IdenticalPathAlertProps> = (props: IdenticalPathAl
 };
 
 
-export const IdenticalPathPage = (): JSX.Element => {
+export const IdenticalPathPage = (): React.ReactElement => {
 
   const { data: currentPath } = useCurrentPathname();
 

apps/app/src/client/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -11,7 +11,7 @@ import { useDefaultSocket } from '~/stores/socket-io';
 
 import InAppNotificationList from './InAppNotificationList';
 
-export const InAppNotificationDropdown = (): JSX.Element => {
+export const InAppNotificationDropdown = (): React.ReactElement => {
   const { t } = useTranslation('commons');
 
   const [isOpen, setIsOpen] = useState(false);

apps/app/src/client/components/InAppNotification/InAppNotificationElm.tsx

@@ -41,7 +41,7 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
     publishOpen();
   };
 
-  const renderActionUserPictures = (): JSX.Element => {
+  const renderActionUserPictures = (): React.ReactElement => {
     const actionUsers = notification.actionUsers;
 
     if (actionUsers.length < 1) {

apps/app/src/client/components/InstallerForm.tsx

@@ -23,7 +23,7 @@ type Props = {
   minPasswordLength: number,
 }
 
-const InstallerForm = memo((props: Props): JSX.Element => {
+const InstallerForm = memo((props: Props): React.ReactElement => {
   const { t, i18n } = useTranslation();
 
   const { minPasswordLength } = props;

apps/app/src/client/components/InvitedForm.tsx

@@ -13,7 +13,7 @@ type InvitedFormProps = {
   invitedFormName: string,
 }
 
-export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
+export const InvitedForm = (props: InvitedFormProps): React.ReactElement => {
 
   const { t } = useTranslation();
   const router = useRouter();

apps/app/src/client/components/ItemsTree/ItemsTree.tsx

@@ -102,7 +102,7 @@ type ItemsTreeProps = {
 /*
  * ItemsTree
  */
-export const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
+export const ItemsTree = (props: ItemsTreeProps): React.ReactElement => {
   const {
     targetPath, targetPathOrId, targetAndAncestorsData, isEnableActions, isReadOnlyUser, isWipPageShown, CustomTreeItem, onClickTreeItem,
   } = props;

apps/app/src/client/components/ItemsTree/ItemsTreeContentSkeleton.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '~/client/components/Skeleton';
 
 import styles from './ItemsTreeContentSkeleton.module.scss';
 
-const ItemsTreeContentSkeleton = (): JSX.Element => {
+const ItemsTreeContentSkeleton = (): React.ReactElement => {
 
   return (
     <ul className="list-group py-3">

apps/app/src/client/components/LoginForm/ExternalAuthButton.tsx

@@ -20,7 +20,7 @@ const authLabel = {
 };
 
 
-export const ExternalAuthButton = ({ authType }: {authType: IExternalAuthProviderType}): JSX.Element => {
+export const ExternalAuthButton = ({ authType }: {authType: IExternalAuthProviderType}): React.ReactElement => {
   const { t } = useTranslation();
 
   const key = `btn-auth-${authType.toString()}`;

apps/app/src/client/components/LoginForm/LoginForm.tsx

@@ -42,7 +42,7 @@ type LoginFormProps = {
   externalAccountLoginError?: IExternalAccountLoginError,
   minPasswordLength: number,
 }
-export const LoginForm = (props: LoginFormProps): JSX.Element => {
+export const LoginForm = (props: LoginFormProps): React.ReactElement => {
   const { t } = useTranslation();
 
   const router = useRouter();
@@ -136,7 +136,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   }, []);
 
   // wrap error elements which use dangerouslySetInnerHtml
-  const generateDangerouslySetErrors = useCallback((errors: IErrorV3[]): JSX.Element => {
+  const generateDangerouslySetErrors = useCallback((errors: IErrorV3[]): React.ReactElement => {
     if (errors == null || errors.length === 0) return <></>;
     return (
       <div className="alert alert-danger">
@@ -149,7 +149,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   }, [tWithOpt]);
 
   // wrap error elements which do not use dangerouslySetInnerHtml
-  const generateSafelySetErrors = useCallback((errors: (IErrorV3 | IExternalAccountLoginError)[]): JSX.Element => {
+  const generateSafelySetErrors = useCallback((errors: (IErrorV3 | IExternalAccountLoginError)[]): React.ReactElement => {
     if (errors == null || errors.length === 0) return <></>;
     return (
       <ul className="alert alert-danger">

apps/app/src/client/components/Maintenance/Maintenance.tsx

@@ -10,7 +10,7 @@ type Props = {
   currentUser: IUserHasId,
 };
 
-export const Maintenance = (props: Props): JSX.Element => {
+export const Maintenance = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   useCurrentUser(props.currentUser ?? null);

apps/app/src/client/components/Me/ApiSettings.tsx

@@ -7,7 +7,7 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useSWRxPersonalSettings, usePersonalSettings } from '~/stores/personal-settings';
 
 
-const ApiSettings = React.memo((): JSX.Element => {
+const ApiSettings = React.memo((): React.ReactElement => {
 
   const { t } = useTranslation();
   const { mutate: mutateDatabaseData } = useSWRxPersonalSettings();

apps/app/src/client/components/Me/AssociateModal.tsx

@@ -22,7 +22,7 @@ type Props = {
   onClose: () => void,
 }
 
-const AssociateModal = (props: Props): JSX.Element => {
+const AssociateModal = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
   const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
   const { associateLdapAccount } = usePersonalSettings();