revert: use stable react (#3228)

packages/component/src/components/app-sidebar/index.tsx

@@ -9,6 +9,7 @@ import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
 import {
   floatingMaxWidth,
   navBodyStyle,
+  navHeaderStyle,
   navStyle,
   navWidthVar,
   navWrapperStyle,
@@ -28,7 +29,6 @@ import { SidebarHeader } from './sidebar-header';
 export type AppSidebarProps = PropsWithChildren<
   SidebarHeaderProps & {
     hasBackground?: boolean;
-    isFallback?: boolean;
   }
 >;
 
@@ -53,7 +53,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
   const [appSidebarFloating, setAppSidebarFloating] = useAtom(
     appSidebarFloatingAtom
   );
-  const initialRender = open === undefined && !props.isFallback;
+  const initialRender = open === undefined;
 
   const isResizing = useAtomValue(appSidebarResizingAtom);
   const navRef = useRef<HTMLDivElement>(null);
@@ -128,15 +128,29 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
 }
 
 export const AppSidebarFallback = (): ReactElement | null => {
+  const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
   return (
-    <AppSidebar isFallback>
-      <div className={fallbackStyle}>
-        <div className={fallbackHeaderStyle}>
-          <Skeleton variant="circular" width={40} height={40} />
-          <Skeleton variant="rectangular" width={150} height={40} />
+    <div
+      style={assignInlineVars({
+        [navWidthVar]: `${appSidebarWidth}px`,
+      })}
+      className={clsx(navWrapperStyle, {
+        'has-border': true,
+      })}
+      data-open="true"
+    >
+      <nav className={navStyle}>
+        <div className={navHeaderStyle} data-open="true" />
+        <div className={navBodyStyle}>
+          <div className={fallbackStyle}>
+            <div className={fallbackHeaderStyle}>
+              <Skeleton variant="circular" width={40} height={40} />
+              <Skeleton variant="rectangular" width={150} height={40} />
+            </div>
+          </div>
         </div>
-      </div>
-    </AppSidebar>
+      </nav>
+    </div>
   );
 };
 

packages/component/src/components/block-suite-editor/index.tsx

@@ -4,17 +4,10 @@ import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import { Skeleton } from '@mui/material';
+import { use } from 'foxact/use';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import {
-  lazy,
-  memo,
-  Suspense,
-  use,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { lazy, memo, Suspense, useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';

packages/component/src/components/image-preview-modal/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="react/experimental" />
 import '@blocksuite/blocks';
 
 import { Button, Tooltip } from '@affine/component';

packages/component/src/components/workspace/index.tsx

@@ -1,5 +1,10 @@
 import { clsx } from 'clsx';
-import type { FC, PropsWithChildren, ReactElement } from 'react';
+import type {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
 
 import { AppSidebarFallback } from '../app-sidebar';
 import { appStyle, mainContainerStyle, toolStyle } from './index.css';
@@ -35,7 +40,7 @@ export type MainContainerProps = PropsWithChildren<{
   className?: string;
   padding?: boolean;
 }> &
-  React.HTMLAttributes<HTMLDivElement>;
+  HTMLAttributes<HTMLDivElement>;
 
 export const MainContainer = ({
   className,
@@ -47,7 +52,7 @@ export const MainContainer = ({
     <div
       {...props}
       className={clsx(mainContainerStyle, 'main-container', className)}
-      data-is-macos={environment.isBrowser && environment.isMacOs}
+      data-is-macos={environment.isDesktop && environment.isMacOs}
       data-show-padding={padding}
     >
       {children}