seems to compile and run fine. need to review changes

packages/apps/desktop-viewer-test/.env

@@ -13,7 +13,7 @@ GENERATE_SOURCEMAP=false
 DISABLE_NEW_JSX_TRANSFORM=true
 
 # Advanced iModel.js CRA Config: https://github.com/imodeljs/create-react-app/blob/imodeljs/packages/react-scripts/README-imodeljs.md
-USE_FAST_SASS=true
+USE_FAST_SASS=false
 USE_FULL_SOURCEMAP=true
 TRANSPILE_DEPS=false
 DISABLE_TERSER=true

packages/apps/desktop-viewer-test/package.json

@@ -63,7 +63,7 @@
     "@itwin/itwinui-illustrations-react": "^2.0.1",
     "@itwin/itwinui-layouts-css": "^0.2.0",
     "@itwin/itwinui-layouts-react": "^0.2.0",
-    "@itwin/itwinui-react": "^2.12.0",
+    "@itwin/itwinui-react": "^3.16.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@itwin/measure-tools-react": "^0.23.2",
     "@itwin/presentation-backend": "^4.7.3",

packages/apps/web-viewer-test/.env

@@ -27,7 +27,7 @@ IMJS_AUTH_CLIENT_SCOPES ="imodelaccess:read imodels:read realitydata:read"
 IMJS_ITWIN_STACK_ITWIN_ID="678a34a5-3ed1-412c-a9ba-086dee14d6c2"
 IMJS_ITWIN_STACK_IMODEL_ID="4dcff98f-8570-497e-b7ce-8df981b5b8c7"
 
-USE_FAST_SASS=true
+USE_FAST_SASS=false
 USE_FULL_SOURCEMAPS=true
 TRANSPILE_DEPS=false
 DISABLE_TERSER=true

packages/apps/web-viewer-test/package.json

@@ -5,10 +5,10 @@
   "dependencies": {
     "@bentley/icons-generic": "^1.0.34",
     "@itwin/appui-abstract": "^4.7.3",
-    "@itwin/appui-react": "^4.3.0",
+    "@itwin/appui-react": "^5.0.0",
     "@itwin/unified-selection": "^1.1.1",
     "@itwin/browser-authorization": "^1.0.1",
-    "@itwin/components-react": "^4.3.0",
+    "@itwin/components-react": "^5.0.0",
     "@itwin/core-bentley": "^4.7.3",
     "@itwin/core-common": "^4.7.3",
     "@itwin/core-frontend": "^4.7.3",
@@ -17,14 +17,14 @@
     "@itwin/core-markup": "^4.7.3",
     "@itwin/core-orbitgt": "^4.7.3",
     "@itwin/core-quantity": "^4.7.3",
-    "@itwin/core-react": "^4.3.0",
+    "@itwin/core-react": "^5.0.0",
     "@itwin/core-telemetry": "^4.7.3",
     "@itwin/ecschema-metadata": "^4.7.3",
     "@itwin/ecschema-rpcinterface-common": "^4.7.3",
     "@itwin/frontend-devtools": "^4.7.3",
-    "@itwin/imodel-components-react": "^4.3.0",
+    "@itwin/imodel-components-react": "^5.0.0",
     "@itwin/imodels-access-frontend": "^5.2.1",
-    "@itwin/itwinui-react": "^2.12.0",
+    "@itwin/itwinui-react": "^3.16.0",
     "@itwin/measure-tools-react": "^0.23.2",
     "@itwin/presentation-common": "^4.7.3",
     "@itwin/presentation-components": "^5.0.0",

packages/apps/web-viewer-test/src/components/home/ViewerHome.tsx

@@ -126,16 +126,6 @@ const ViewerHome: React.FC = () => {
     },
   ];
 
-  const backstageItems2: ViewerBackstageItem[] = [
-    {
-      id: "BS4",
-      execute: () => console.log("BS1"),
-      groupPriority: 20,
-      itemPriority: 100,
-      label: "BackstageItems 1",
-    },
-  ];
-
   return (
     <div style={{ height: "100vh" }}>
       <Viewer
@@ -241,7 +231,6 @@ const ViewerHome: React.FC = () => {
         //     manifestUrl: "http://localhost:3001/package.json",
         //   }),
         // ]}
-        backstageItems={backstageItems2}
         defaultUiConfig={{ cornerButton: <Itwin /> }}
         // renderSys={{doIdleWork: true}}
         selectionStorage={unifiedSelectionStorage}

packages/apps/web-viewer-test/src/index.tsx

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import "./index.scss";
+import "@itwin/itwinui-react/styles.css";
 
-import { UiFramework } from "@itwin/appui-react";
+import { ThemeProvider } from "@itwin/itwinui-react";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
@@ -16,11 +17,11 @@ globalThis.IMJS_URL_PREFIX = process.env.IMJS_URL_PREFIX || "";
 
 const container = document.getElementById("root");
 const root = createRoot(container!); // createRoot(container!) if you use TypeScript
-UiFramework.childWindows.useCreateRoot(createRoot);
-
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );
 

packages/modules/desktop-viewer-react/package.json

@@ -81,8 +81,8 @@
     "@itwin/ecschema-metadata": "^4.0.0",
     "@itwin/electron-authorization": "^0.13.0 || ^0.14.0 || ^0.15.0",
     "electron": "^24.0.0",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5"
   },

packages/modules/desktop-viewer-react/src/types.ts

@@ -17,23 +17,28 @@ export type DesktopInitializerParams = ViewerCommonProps & {
   clientId?: string;
 };
 
-type ClientIdProps = {
-  clientId: string;
-  iTwinId: string;
-} | {
-  clientId?: string;
-  iTwinId?: never;
-};
+type ClientIdProps =
+  | {
+      clientId: string;
+      iTwinId: string;
+    }
+  | {
+      clientId?: string;
+      iTwinId?: never;
+    };
 
-type ConnectedViewerDesktopProps = ConnectedViewerProps & Required<Pick<DesktopInitializerParams, "clientId">>
+type ConnectedViewerDesktopProps = ConnectedViewerProps &
+  Required<Pick<DesktopInitializerParams, "clientId">>;
 type BlankViewerDesktopProps = BlankViewerProps & ClientIdProps;
-type FileViewerDesktopProps = FileViewerProps & Pick<DesktopInitializerParams, "clientId">;
+type FileViewerDesktopProps = FileViewerProps &
+  Pick<DesktopInitializerParams, "clientId">;
 
 /** Desktop Viewer can open local (snapshot/briefcase), connected or blank connection models */
-export type DesktopViewerProps = DesktopInitializerParams & XOR<
-  XOR<FileViewerDesktopProps, BlankViewerDesktopProps>,
-  ConnectedViewerDesktopProps
->;
+export type DesktopViewerProps = DesktopInitializerParams &
+  XOR<
+    XOR<FileViewerDesktopProps, BlankViewerDesktopProps>,
+    ConnectedViewerDesktopProps
+  >;
 
 // todo: rm enum in favor of as const
 export enum ModelStatus {

packages/modules/viewer-react/package.json

@@ -35,7 +35,7 @@
     "@itwin/presentation-core-interop": "^1.0.0",
     "@itwin/presentation-shared": "^1.0.0",
     "@itwin/itwinui-illustrations-react": "^2.0.1",
-    "@itwin/itwinui-react": "^2.6.0",
+    "@itwin/itwinui-react": "^3.16.0",
     "@itwin/reality-data-client": "^1.0.0",
     "@itwin/unified-selection": "^1.0.0",
     "lodash.isequal": "^4.5.0"
@@ -100,8 +100,8 @@
     "@itwin/presentation-common": "^4.0.0",
     "@itwin/presentation-components": "^4.0.0 || ^5.0.0",
     "@itwin/presentation-frontend": "^4.0.0",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5"
   },
@@ -145,6 +145,9 @@
       "project": [
         "./tsconfig.json"
       ]
-    }
+    },
+    "ignorePatterns": [
+      "tests/"
+    ]
   }
 }

packages/modules/viewer-react/src/components/BaseViewer.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IModelApp } from "@itwin/core-frontend";
-import { FillCentered } from "@itwin/core-react";
+import { Flex } from "@itwin/itwinui-react";
 import React from "react";
 
 import { useAccessToken } from "../hooks/useAccessToken";
@@ -39,18 +39,18 @@ export const BaseViewer = ({
         viewerInitialized ? (
           <IModelLoader {...loaderProps} />
         ) : (
-          <FillCentered>
+          <Flex>
             {IModelApp.localization.getLocalizedString(
               "iTwinViewer:baseViewerInitializer.baseViewerInitializing"
             )}
-          </FillCentered>
+          </Flex>
         )
       ) : (
-        <FillCentered>
+        <Flex>
           {IModelApp.localization.getLocalizedString(
             "iTwinViewer:baseViewerInitializer.validTokenNeeded"
           )}
-        </FillCentered>
+        </Flex>
       )}
     </ErrorBoundary>
   );

packages/modules/viewer-react/src/components/app-ui/providers/BackstageItemsProvider.ts

@@ -13,38 +13,42 @@ import { IModelApp } from "@itwin/core-frontend";
 
 import type { ViewerBackstageItem } from "../../../types";
 
+// todo remove icon in favor of iconNode
 export class BackstageItemsProvider implements UiItemsProvider {
-  constructor(private _backstageItems: ViewerBackstageItem[], public readonly id = "iTwinViewer.BackstageItemsProvider") { }
+  constructor(
+    private _backstageItems: ViewerBackstageItem[],
+    public readonly id = "iTwinViewer.BackstageItemsProvider"
+  ) {}
 
-  public provideBackstageItems() {
+  public getBackstageItems() {
     const allBackstageItems: ViewerBackstageItem[] = [];
     this._backstageItems.forEach((backstageItem) => {
       // check for label i18n key and translate if needed
       if (backstageItem.labeli18nKey) {
         let newItem;
         if ((backstageItem as BackstageStageLauncher).stageId) {
-          newItem = BackstageItemUtilities.createStageLauncher(
-            (backstageItem as BackstageStageLauncher).stageId,
-            backstageItem.groupPriority,
-            backstageItem.itemPriority,
-            IModelApp.localization.getLocalizedString(
+          newItem = BackstageItemUtilities.createStageLauncher({
+            stageId: (backstageItem as BackstageStageLauncher).stageId,
+            groupPriority: backstageItem.groupPriority,
+            itemPriority: backstageItem.itemPriority,
+            label: IModelApp.localization.getLocalizedString(
               backstageItem.labeli18nKey
             ),
-            backstageItem.subtitle?.toString(),
-            backstageItem.icon?.toString()
-          );
+            subtitle: backstageItem.subtitle?.toString(),
+            icon: backstageItem.icon?.toString(), // eslint-disable-line deprecation/deprecation
+          });
         } else {
-          newItem = BackstageItemUtilities.createActionItem(
-            backstageItem.id,
-            backstageItem.groupPriority,
-            backstageItem.itemPriority,
-            (backstageItem as BackstageActionItem).execute,
-            IModelApp.localization.getLocalizedString(
+          newItem = BackstageItemUtilities.createActionItem({
+            id: backstageItem.id,
+            groupPriority: backstageItem.groupPriority,
+            itemPriority: backstageItem.itemPriority,
+            execute: (backstageItem as BackstageActionItem).execute,
+            label: IModelApp.localization.getLocalizedString(
               backstageItem.labeli18nKey
             ),
-            backstageItem.subtitle?.toString(),
-            backstageItem.icon?.toString()
-          );
+            subtitle: backstageItem.subtitle?.toString(),
+            icon: backstageItem.icon?.toString(), // eslint-disable-line deprecation/deprecation
+          });
         }
         allBackstageItems.push(newItem);
       } else {