App Ui 5 And Other Package Updates

.changeset/smooth-chefs-vanish.md

@@ -0,0 +1,9 @@
+---
+"@itwin/changed-elements-react": minor
+---
+
+Updated Dependencies:
+
+- appUi updated to 5.x.x
+- itwinUi updated to 3.x.x
+  Important Notice: These updates may cause breaking changes if consumers of this package have not yet updated to the latest versions of these dependencies. Please ensure that you have updated your dependencies to avoid any potential issues.

packages/changed-elements-react/package.json

@@ -42,18 +42,18 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@itwin/appui-abstract": "^4.0.6",
-    "@itwin/components-react": "^4.16.5",
-    "@itwin/core-bentley": "^4.0.6",
-    "@itwin/core-common": "^4.0.6",
-    "@itwin/core-frontend": "^4.0.6",
-    "@itwin/core-geometry": "^4.0.6",
-    "@itwin/core-react": "^4.16.5",
-    "@itwin/presentation-common": "^4.0.6",
-    "@itwin/presentation-components": "^4.0.1",
-    "@itwin/presentation-frontend": "^4.0.6",
-    "@testing-library/react": "^12.1.5",
-    "@types/react": "^17.0.0",
+    "@itwin/appui-abstract": "^4.10.6",
+    "@itwin/components-react": "^5.0.5",
+    "@itwin/core-bentley": "^4.10.6",
+    "@itwin/core-common": "^4.10.6",
+    "@itwin/core-frontend": "^4.10.6",
+    "@itwin/core-geometry": "^4.10.6",
+    "@itwin/core-react": "^5.0.5",
+    "@itwin/presentation-common": "^4.10.6",
+    "@itwin/presentation-components": "^5.10.0",
+    "@itwin/presentation-frontend": "^4.10.6",
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^18.0.0",
     "@types/react-redux": "^7.1.25",
     "@types/react-table": "^7.7.14",
     "@types/react-window": "^1.8.5",
@@ -63,36 +63,35 @@
     "cpx2": "^5.0.0",
     "happy-dom": "^15.11.7",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.2",
     "react-redux": "^7.2.2",
     "redux": "^4.1.0",
     "typescript": "~5.5.4",
     "vite": "^5.4.11",
     "vitest": "^2.1.1"
   },
   "peerDependencies": {
-    "@itwin/appui-abstract": "^4.0.6",
-    "@itwin/components-react": "^4.3.0",
-    "@itwin/core-bentley": "^4.0.6",
-    "@itwin/core-common": "^4.0.6",
-    "@itwin/core-frontend": "^4.0.6",
-    "@itwin/core-geometry": "^4.0.6",
-    "@itwin/core-react": "^4.3.0",
-    "@itwin/presentation-common": "^4.0.6",
-    "@itwin/presentation-components": "^4.0.1",
-    "@itwin/presentation-frontend": "^4.0.6",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@itwin/appui-abstract": "^4.10.6",
+    "@itwin/components-react": "^5.0.5",
+    "@itwin/core-bentley": "^4.10.6",
+    "@itwin/core-common": "^4.10.6",
+    "@itwin/core-frontend": "^4.10.6",
+    "@itwin/core-geometry": "^4.10.6",
+    "@itwin/core-react": "^5.0.5",
+    "@itwin/presentation-common": "^4.10.6",
+    "@itwin/presentation-components": "^5.10.0",
+    "@itwin/presentation-frontend": "^4.10.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-color-react": "^2.1.0",
-    "@itwin/itwinui-icons-react": "^2.2.0",
-    "@itwin/itwinui-react": "^2.11.11",
-    "@itwin/itwinui-react-3": "npm:@itwin/itwinui-react@^3.0.0",
+    "@itwin/itwinui-icons-react": "^2.9.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "clsx": "^2.1.1",
     "react-table": "^7.8.0",
-    "react-window": "^1.8.8",
-    "react-window-infinite-loader": "^1.0.8"
+    "react-window": "^1.8.10",
+    "react-window-infinite-loader": "^1.0.9"
   }
 }

packages/changed-elements-react/src/AutoSizer.tsx

@@ -8,7 +8,7 @@ import {
 
 import { mergeRefs } from "./common.js";
 
-export interface AutoSizerProps extends HTMLAttributes<HTMLDivElement> {
+export interface AutoSizerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
   children: (size: Size) => ReactNode;
 }
 

packages/changed-elements-react/src/NamedVersionSelector/IconEx.tsx

@@ -2,7 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { Icon } from "@itwin/itwinui-react-3";
+import { Icon } from "@itwin/itwinui-react";
 import clsx from "clsx";
 import type { ComponentProps, ReactElement } from "react";
 

packages/changed-elements-react/src/NamedVersionSelector/NamedVersionSelector.tsx

@@ -8,7 +8,7 @@ import {
 } from "@itwin/itwinui-icons-react";
 import {
   Button, Divider, Flex, List, ListItem, ProgressRadial, Text, ThemeProvider
-} from "@itwin/itwinui-react-3";
+} from "@itwin/itwinui-react";
 import {
   forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactElement,
   type ReactNode

packages/changed-elements-react/src/NamedVersionSelector/TextEx.tsx

@@ -3,7 +3,7 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import { type ComponentProps, type CSSProperties } from "react";
-import { Text } from "@itwin/itwinui-react-3";
+import { Text } from "@itwin/itwinui-react";
 import clsx from "clsx";
 
 import "./TextEx.css";

packages/changed-elements-react/src/contentviews/PropertyComparisonTable.tsx

@@ -5,7 +5,7 @@
 import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
 import { Logger } from "@itwin/core-bentley";
 import { IModelApp, type IModelConnection } from "@itwin/core-frontend";
-import { IconButton, Slider, Table, Text, ToggleSwitch, type TableProps } from "@itwin/itwinui-react";
+import { IconButton, Slider, Table, Text, ToggleSwitch } from "@itwin/itwinui-react";
 import type { KeySet } from "@itwin/presentation-common";
 import { PresentationPropertyDataProvider } from "@itwin/presentation-components";
 import { memo, useEffect, useMemo, useRef, useState, type ReactElement } from "react";
@@ -18,9 +18,12 @@ import type { ChangedElementsManager } from "../api/ChangedElementsManager.js";
 import { getTypeOfChangeTooltip } from "../api/ChangesTooltipProvider.js";
 import type { VersionCompareManager } from "../api/VersionCompareManager.js";
 import { updateVersionComparisonTransparencies } from "../api/VersionCompareTiles.js";
-
+import { Row } from "@itwin/itwinui-react/react-table";
 import "./PropertyComparisonTable.scss";
 
+
+type TableProps<T extends Record<string, unknown>> = React.ComponentProps<typeof Table<T>>;
+
 export interface PropertyComparisonTableProps {
   manager: VersionCompareManager;
 
@@ -93,7 +96,7 @@ export function PropertyComparisonTable(props: PropertyComparisonTableProps): Re
         }
         <div className="settings">
           {
-            (displaySideBySideToggle ?? props.onSideBySideToggle) &&
+            displaySideBySideToggle &&
             <SideBySideToggle
               manager={manager}
               selection={selection}
@@ -621,18 +624,21 @@ function SideBySideToggle(props: SideBySideToggleProps): ReactElement {
   );
 }
 
-const getRowProps: TableProps<ComparisonDataRow>["rowProps"] = (row) => {
-  const { current, target } = (row.values as ComparisonDataRow);
+const getRowProps: (row: Row<ComparisonDataRow>) => React.ComponentPropsWithRef<"div"> & {
+  status?: "positive" | "warning" | "negative";
+  isLoading?: boolean;
+} = (row) => {
+  const { current, target } = row.values;
   if (current === "" && target !== "") {
-    return { className: "row-deleted" };
+    return { className: "row-deleted", status: "negative" };
   }
 
   if (current !== "" && target === "") {
-    return { className: "row-added" };
+    return { className: "row-added", status: "positive" };
   }
 
   if (current !== target) {
-    return { className: "row-modified" };
+    return { className: "row-modified", status: "warning" };
   }
 
   return {};

packages/changed-elements-react/src/dialogs/SavedFiltersDialog.tsx

@@ -183,7 +183,6 @@ export function EditableFilterName(props: EditableFilterNameProps): ReactElement
     ? <Input
       className="saved-filters-edit-dialog-input"
       type="string"
-      setFocus={true}
       disabled={disableRenameInput}
       value={newName}
       onChange={onRenameInputChanged}

packages/changed-elements-react/src/dialogs/SavedFiltersSelector.tsx

@@ -261,7 +261,6 @@ export function SavedFiltersSelector(props: SavedFiltersSelectorProps): ReactEle
           <Input
             className="filter-name-input"
             type="string"
-            setFocus={true}
             value={filterName}
             onChange={onNameInputChanged}
             onBlur={onNameInputBlur}

packages/changed-elements-react/src/widgets/comparisonJobWidget/common/versionCompareToasts.ts

@@ -5,7 +5,7 @@
 import {
   IModelApp, NotifyMessageDetails, OutputMessagePriority, OutputMessageType, type IModelConnection
 } from "@itwin/core-frontend";
-import { toaster } from "@itwin/itwinui-react";
+import { useToaster } from "@itwin/itwinui-react";
 import {
   ComparisonJobCompleted, IComparisonJobClient
 } from "../../../clients/IComparisonJobClient.js";
@@ -14,6 +14,8 @@ import type { ComparisonJobUpdateType } from "../components/VersionCompareDialog
 import type { JobAndNamedVersions } from "../models/ComparisonJobModels.js";
 import { runManagerStartComparisonV2 } from "./versionCompareV2WidgetUtils.js";
 
+export type Toaster = ReturnType<typeof useToaster>;
+
 /** Toast Comparison Job Processing.
  * Outputs toast message following the pattern:
  * Version Compare
@@ -59,6 +61,7 @@ export type ToastComparisonJobCompleteArgs = {
   getToastsEnabled?: () => boolean;
   runOnJobUpdate?: (comparisonEventType: ComparisonJobUpdateType, jobAndNamedVersions?: JobAndNamedVersions) => Promise<void>;
   iModelsClient: IModelsClient;
+  toaster: Toaster;
 };
 
 /** Toast Comparison Job Complete.
@@ -70,17 +73,17 @@ export type ToastComparisonJobCompleteArgs = {
 */
 export const toastComparisonJobComplete = (args: ToastComparisonJobCompleteArgs) => {
   const title = IModelApp.localization.getLocalizedString("VersionCompare:versionCompare.viewTheReport");
-  toaster.closeAll();
-  toaster.setSettings({
+  args.toaster.closeAll();
+  args.toaster.setSettings({
     placement: "bottom",
   });
-  toaster.positive(
+  args.toaster.positive(
     `${IModelApp.localization.getLocalizedString("VersionCompare:versionCompare.iModelVersions")}<${args.currentVersion?.displayName}> ${IModelApp.localization.getLocalizedString("VersionCompare:versionCompare.and")} <${args.targetVersion.displayName}> ${IModelApp.localization.getLocalizedString("VersionCompare:versionCompare.jobComplete")}`, {
     hasCloseButton: true,
     link: {
       title: title,
       onClick: () => {
-        toaster.closeAll();
+        args.toaster.closeAll();
         void runManagerStartComparisonV2({
           comparisonJob: args.comparisonJob,
           comparisonJobClient: args.comparisonJobClient,

packages/changed-elements-react/src/widgets/comparisonJobWidget/components/VersionCompareSelectModal.tsx

@@ -3,7 +3,7 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import { IModelApp, IModelConnection } from "@itwin/core-frontend";
-import { Button, Modal, ModalButtonBar, ModalContent } from "@itwin/itwinui-react";
+import { Button, Modal, ModalButtonBar, ModalContent, useToaster } from "@itwin/itwinui-react";
 import React, { useEffect, useState, type ReactNode } from "react";
 
 import { VersionCompareUtils, VersionCompareVerboseMessages } from "../../../api/VerboseMessages.js";
@@ -15,7 +15,8 @@ import type { IModelsClient, NamedVersion } from "../../../clients/iModelsClient
 import { arrayToMap, tryXTimes } from "../../../utils/utils.js";
 import { useVersionCompare } from "../../../VersionCompareContext.js";
 import {
-  toastComparisonJobComplete, toastComparisonJobError, toastComparisonJobProcessing
+  toastComparisonJobComplete, toastComparisonJobError, toastComparisonJobProcessing,
+  Toaster
 } from "../common/versionCompareToasts.js";
 import {
   createJobId, getJobStatusAndJobProgress, runManagerStartComparisonV2
@@ -71,6 +72,7 @@ export function VersionCompareSelectDialogV2(props: VersionCompareSelectDialogV2
   const [currentVersion, setCurrentVersion] = useState<NamedVersion | undefined>(undefined);
   const [result, setResult] = useState<NamedVersionLoaderState>();
   const { isLoading } = useNamedVersionLoader(props.iModelConnection, iModelsClient, comparisonJobClient, setResult, getPendingJobs);
+  const toaster = useToaster();
   useEffect(() => {
     let isDisposed = false;
     const getIsDisposed = () => {
@@ -92,6 +94,7 @@ export function VersionCompareSelectDialogV2(props: VersionCompareSelectDialogV2
         getToastsEnabled,
         runOnJobUpdate,
         iModelsClient,
+        toaster,
       });
     }
     return () => {
@@ -151,6 +154,7 @@ export function VersionCompareSelectDialogV2(props: VersionCompareSelectDialogV2
           getToastsEnabled,
           runOnJobUpdate,
           iModelsClient,
+          toaster,
         });
       }
     }
@@ -323,6 +327,7 @@ type PollForInProgressJobsArgs = {
   getToastsEnabled: () => boolean;
   runOnJobUpdate: (comparisonJobUpdateType: ComparisonJobUpdateType, jobAndNamedVersions?: JobAndNamedVersions) => Promise<void>;
   iModelsClient: IModelsClient;
+  toaster: Toaster;
 };
 
 export const pollForInProgressJobs: (args: PollForInProgressJobsArgs) => Promise<void> = async (args: PollForInProgressJobsArgs) => {
@@ -360,6 +365,7 @@ const pollUntilCurrentRunningJobsCompleteAndToast = async (args: PollForInProgre
           getToastsEnabled: args.getToastsEnabled,
           runOnJobUpdate: args.runOnJobUpdate,
           iModelsClient: args.iModelsClient,
+          toaster: args.toaster,
         });
       } catch (error) {
         args.removeRunningJob(runningJob?.comparisonJob?.comparisonJob.jobId as string);
@@ -390,6 +396,7 @@ type ConditionallyToastCompletionArgs = {
   getToastsEnabled: () => boolean;
   runOnJobUpdate: (comparisonJobUpdateType: ComparisonJobUpdateType, jobAndNamedVersions?: JobAndNamedVersions) => Promise<void>;
   iModelsClient: IModelsClient;
+  toaster: Toaster;
 };
 const notifyComparisonCompletion = (args: ConditionallyToastCompletionArgs) => {
   if (args.currentJobRsp.comparisonJob.status === "Completed") {
@@ -405,6 +412,7 @@ const notifyComparisonCompletion = (args: ConditionallyToastCompletionArgs) => {
           getToastsEnabled: args.getToastsEnabled,
           runOnJobUpdate: args.runOnJobUpdate,
           iModelsClient: args.iModelsClient,
+          toaster: args.toaster,
         });
       }
       const jobAndNamedVersion: JobAndNamedVersions = {

packages/changed-elements-react/vitest.config.ts

@@ -9,17 +9,14 @@ import react from "@vitejs/plugin-react-swc";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  resolve: {
-    // Workaround for https://github.com/iTwin/iTwinUI-react/issues/727
-    alias: {
-      "@itwin/itwinui-react": "@itwin/itwinui-react/esm",
-      "@itwin/appui-layout-react": "@itwin/appui-layout-react/lib/esm/appui-layout-react.js",
-      "@itwin/components-react": "@itwin/components-react/lib/esm/components-react.js",
-      "@itwin/core-react": "@itwin/core-react/lib/esm/core-react.js",
-      "@itwin/presentation-components": "@itwin/presentation-components/lib/esm/presentation-components.js",
-    },
-  },
   test: {
     environment: "happy-dom",
+    server: {
+      deps: {
+        // we must inline deps that have css or scss in them.
+        // https://github.com/vitest-dev/vitest/issues/5283#issuecomment-1962265873
+        inline: ["@itwin/presentation-components", "@itwin/components-react", "@itwin/core-react"],
+      },
+    },
   },
 });

packages/test-app-backend/package.json

@@ -12,14 +12,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@itwin/core-backend": "^4.0.6",
-    "@itwin/core-bentley": "^4.0.6",
-    "@itwin/core-common": "^4.0.6",
-    "@itwin/express-server": "^4.0.6",
-    "@itwin/imodels-access-backend": "^5.2.2",
-    "@itwin/imodels-client-authoring": "^5.8.2",
-    "@itwin/presentation-backend": "^4.0.6",
-    "@itwin/presentation-common": "^4.0.6",
+    "@itwin/core-backend": "^4.10.6",
+    "@itwin/core-bentley": "^4.10.6",
+    "@itwin/core-common": "^4.10.6",
+    "@itwin/express-server": "^4.10.6",
+    "@itwin/imodels-access-backend": "^5.2.3",
+    "@itwin/imodels-client-authoring": "^5.9.0",
+    "@itwin/presentation-backend": "^4.10.6",
+    "@itwin/presentation-common": "^4.10.6",
     "@types/dotenv-flow": "^3.2.0",
     "@types/node": "^18.0.0",
     "dotenv-flow": "^3.2.0",