[ Fix ]: Partial Deprecation Changes

common/scripts/eslint.autofix.config.js

@@ -4,7 +4,8 @@ module.exports = {
   ...baseConfig,
   rules: {
     ...(baseConfig.rules),
-    "simple-import-sort/sort": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
     "@typescript-eslint/no-inferrable-types": "error",
     curly: "error",
     "react-hooks/exhaustive-deps": "off",

packages/apps/desktop-viewer-test/src/frontend/components/routes/ViewerRoute.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 
 import {
   Viewer,

packages/apps/desktop-viewer-test/src/frontend/extensions/IModelMergeStatusBarItem.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 
 import "./IModelMergeStatusBarItem.scss";
 
@@ -45,7 +45,7 @@ const ConnectionStatusBarItem = () => {
         {ITwinViewerApp.translate("briefcaseStatusTitle.connection")}
       </span>
       {accessToken &&
-      connectivityStatus === InternetConnectivityStatus.Online ? (
+        connectivityStatus === InternetConnectivityStatus.Online ? (
         <SvgCloud className="connection-status-icon" />
       ) : (
         <SvgOffline
@@ -150,20 +150,20 @@ export class IModelMergeItemsProvider implements UiItemsProvider {
     const statusBarItems: StatusBarItem[] = [];
     if (stageUsage === StageUsage.General) {
       statusBarItems.push(
-        StatusBarItemUtilities.createCustomItem(  // eslint-disable-line @typescript-eslint/no-deprecated
-          "IModelMergeItemsProvider:ConnectionStatusBarItem",
-          StatusBarSection.Center,
-          1,
-          <ConnectionStatusBarItem />
-        )
+        StatusBarItemUtilities.createCustomItem({
+          id: "IModelMergeItemsProvider:ConnectionStatusBarItem",
+          section: StatusBarSection.Center,
+          itemPriority: 1,
+          content: <ConnectionStatusBarItem />
+        })
       );
       statusBarItems.push(
-        StatusBarItemUtilities.createCustomItem(  // eslint-disable-line @typescript-eslint/no-deprecated  
-          "IModelMergeItemsProvider:IModelMergeStatusBarItem",
-          StatusBarSection.Center,
-          3,
-          <MergeStatusBarItem />
-        )
+        StatusBarItemUtilities.createCustomItem({
+          id: "IModelMergeItemsProvider:IModelMergeStatusBarItem",
+          section: StatusBarSection.Center,
+          itemPriority: 3,
+          content: <MergeStatusBarItem />
+        })
       );
     }
     return statusBarItems;

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 
 import { AppNotificationManager, ColorTheme } from "@itwin/appui-react";
 import { BrowserAuthorizationClient } from "@itwin/browser-authorization";

packages/modules/viewer-react/src/components/app-ui/providers/DefaultContentGroupProvider.tsx

@@ -1,12 +1,12 @@
 /*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 
-import { StandardContentLayouts } from "@itwin/appui-abstract";
 import {
   ContentGroup,
   ContentGroupProvider,
+  StandardContentLayouts,
   UiFramework,
 } from "@itwin/appui-react";
 import { ViewportComponent } from "@itwin/imodel-components-react";
@@ -56,7 +56,7 @@ export class DefaultContentGroupProvider extends ContentGroupProvider {
 
     return new ContentGroup({
       id: "iTwinViewer.default-content-group",
-      layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+      layout: StandardContentLayouts.singleView,
       contents: [
         {
           id: "iTwinViewer.UnifiedSelectionViewport",

packages/modules/viewer-react/src/tests/components/app-ui/providers/DefaultContentGroupProvider.test.tsx

@@ -1,12 +1,11 @@
 /*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 
-import { StandardContentLayouts } from "@itwin/appui-abstract";
 import {
   ContentGroup,
-  IModelViewportControl,
+  StandardContentLayouts,
   UiFramework,
 } from "@itwin/appui-react";
 import type { IModelConnection } from "@itwin/core-frontend";
@@ -119,9 +118,9 @@ describe("DefaultContentGroupProvider", () => {
     const contentGroupProvider = new DefaultContentGroupProvider();
     await contentGroupProvider.contentGroup({
       contentGroup: new ContentGroup({
-        contents: [{ id: "viewport", classId: IModelViewportControl }], // eslint-disable-line @typescript-eslint/no-deprecated
+        contents: [{ id: "viewport", classId: "" }],
         id: "contentGroup",
-        layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+        layout: StandardContentLayouts.singleView,
       }),
       id: "DefaultContentGroup",
       version: 1,
@@ -137,9 +136,9 @@ describe("DefaultContentGroupProvider", () => {
     const contentGroupProvider = new DefaultContentGroupProvider();
     await contentGroupProvider.contentGroup({
       contentGroup: new ContentGroup({
-        contents: [{ id: "viewport", classId: IModelViewportControl }], // eslint-disable-line @typescript-eslint/no-deprecated
+        contents: [{ id: "viewport", classId: "" }],
         id: "contentGroup",
-        layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+        layout: StandardContentLayouts.singleView,
       }),
       id: "DefaultContentGroup",
       version: 1,
@@ -165,9 +164,9 @@ describe("DefaultContentGroupProvider", () => {
     );
     await contentGroupProvider.contentGroup({
       contentGroup: new ContentGroup({
-        contents: [{ id: "viewport", classId: IModelViewportControl }], // eslint-disable-line @typescript-eslint/no-deprecated
+        contents: [{ id: "viewport", classId: "" }],
         id: "contentGroup",
-        layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+        layout: StandardContentLayouts.singleView,
       }),
       id: "DefaultContentGroup",
       version: 1,
@@ -195,9 +194,9 @@ describe("DefaultContentGroupProvider", () => {
     );
     await contentGroupProvider.contentGroup({
       contentGroup: new ContentGroup({
-        contents: [{ id: "viewport", classId: IModelViewportControl }], // eslint-disable-line @typescript-eslint/no-deprecated
+        contents: [{ id: "viewport", classId: "" }],
         id: "contentGroup",
-        layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+        layout: StandardContentLayouts.singleView,
       }),
       id: "DefaultContentGroup",
       version: 1,
@@ -218,9 +217,9 @@ describe("DefaultContentGroupProvider", () => {
     );
     await contentGroupProvider.contentGroup({
       contentGroup: new ContentGroup({
-        contents: [{ id: "viewport", classId: IModelViewportControl }], // eslint-disable-line @typescript-eslint/no-deprecated
+        contents: [{ id: "viewport", classId: "" }],
         id: "contentGroup",
-        layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+        layout: StandardContentLayouts.singleView,
       }),
       id: "DefaultContentGroup",
       version: 1,
@@ -241,9 +240,9 @@ describe("DefaultContentGroupProvider", () => {
     );
     await contentGroupProvider.contentGroup({
       contentGroup: new ContentGroup({
-        contents: [{ id: "viewport", classId: IModelViewportControl }], // eslint-disable-line @typescript-eslint/no-deprecated
+        contents: [{ id: "viewport", classId: "" }],
         id: "contentGroup",
-        layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+        layout: StandardContentLayouts.singleView,
       }),
       id: "DefaultContentGroup",
       version: 1,
@@ -270,9 +269,9 @@ describe("DefaultContentGroupProvider", () => {
     );
     await contentGroupProvider.contentGroup({
       contentGroup: new ContentGroup({
-        contents: [{ id: "viewport", classId: IModelViewportControl }], // eslint-disable-line @typescript-eslint/no-deprecated
+        contents: [{ id: "viewport", classId: "" }],
         id: "contentGroup",
-        layout: StandardContentLayouts.singleView, // eslint-disable-line @typescript-eslint/no-deprecated
+        layout: StandardContentLayouts.singleView,
       }),
       id: "DefaultContentGroup",
       version: 1,

packages/modules/viewer-react/src/tests/mocks/MockUiProviders.tsx

@@ -1,11 +1,10 @@
 /*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 
 import {
   ConditionalBooleanValue,
-  ConditionalStringValue,
 } from "@itwin/appui-abstract";
 import type {
   StagePanelSection,
@@ -24,7 +23,7 @@ import {
   ToolbarOrientation,
   ToolbarUsage,
 } from "@itwin/appui-react";
-import { FillCentered } from "@itwin/core-react";
+import { Flex } from "@itwin/itwinui-react";
 import React from "react";
 
 export class TestUiProvider implements UiItemsProvider {
@@ -48,33 +47,44 @@ export class TestUiProvider implements UiItemsProvider {
         [this.syncEventId]
       );
 
-      const iconCondition = new ConditionalStringValue(
-        () => (this._visible ? "icon-visibility-hide-2" : "icon-visibility"),
-        [this.syncEventId]
-      );
+      function visibilityIcon({ syncEventId, isVisible }: { syncEventId: string, isVisible: boolean }) {
+        const [update, setUpdate] = React.useState(false);
+
+        React.useEffect(() => {
+          const onSync = () => {
+            setUpdate((prev) => !prev);
+          }
+          SyncUiEventDispatcher.onSyncUiEvent.addListener(onSync, syncEventId);
+          return () => {
+            SyncUiEventDispatcher.onSyncUiEvent.removeListener(onSync, syncEventId);
+          }
+        }, [syncEventId]);
+
+        return (<i className={isVisible ? "icon-visibility-hide-2" : "icon-visibility"} />);
+      }
 
-      const visibilityActionSpec = ToolbarItemUtilities.createActionItem( // eslint-disable-line @typescript-eslint/no-deprecated
-        "visibility-action-tool",
-        200,
-        iconCondition,
-        "Set visibility",
-        (): void => {
+      const visibilityActionSpec = ToolbarItemUtilities.createActionItem({
+        id: "visibility-action-tool",
+        label: "Set visibility",
+        itemPriority: 200,
+        execute: () => {
           this._visible = !this._visible;
           SyncUiEventDispatcher.dispatchImmediateSyncUiEvent(this.syncEventId);
           console.log(this._visible);
-        }
-      );
+        },
+        icon: visibilityIcon({ syncEventId: this.syncEventId, isVisible: this._visible }),
+      });
 
-      const alertActionSpec = ToolbarItemUtilities.createActionItem( // eslint-disable-line @typescript-eslint/no-deprecated
-        "alert-action-tool",
-        210,
-        "icon-developer",
-        "Display an alert",
-        (): void => {
+      const alertActionSpec = ToolbarItemUtilities.createActionItem({
+        id: "alert-action-tool",
+        label: "Display an alert",
+        itemPriority: 210,
+        icon: <i className="icon-developer" />,
+        execute: () => {
           alert("Toolbar Button Item Clicked!");
         },
-        { isHidden: isHiddenCondition }
-      );
+        isHidden: isHiddenCondition,
+      });
 
       return [visibilityActionSpec, alertActionSpec];
     }
@@ -89,16 +99,16 @@ export class TestUiProvider implements UiItemsProvider {
 
     if (stageUsage === StageUsage.General) {
       statusBarItems.push(
-        StatusBarItemUtilities.createActionItem( // eslint-disable-line @typescript-eslint/no-deprecated
-          "alert-statusbar-item",
-          StatusBarSection.Center,
-          100,
-          "icon-developer",
-          "Status bar item test",
-          () => {
+        StatusBarItemUtilities.createActionItem({
+          id: "alert-statusbar-item",
+          itemPriority: 100,
+          icon: <i className="icon-developer" />,
+          label: "Status bar item test",
+          execute: () => {
             alert("Status Bar Item Clicked!");
-          }
-        )
+          },
+          section: StatusBarSection.Center,
+        })
       );
     }
 
@@ -122,7 +132,9 @@ export class TestUiProvider2 implements UiItemsProvider {
     ) {
       widgets.push({
         id: "addonWidget",
-        content: <FillCentered>Addon Widget in panel</FillCentered>, // eslint-disable-line @typescript-eslint/no-deprecated
+        content: <Flex style={{ height: "100%", width: "100%" }}
+          justifyContent="center"
+          alignItems="center">Addon Widget in panel</Flex>,
       });
     }
     return widgets;

packages/templates/cra-template-desktop-viewer/template/src/frontend/components/routes/ViewerRoute.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 
 import {
   Viewer,
@@ -13,7 +13,7 @@ import { MeasureToolsUiItemsProvider } from "@itwin/measure-tools-react";
 import {
   AncestorsNavigationControls,
   CopyPropertyTextContextMenuItem,
-  PropertyGridUiItemsProvider,
+  createPropertyGrid,
   ShowHideNullValuesSettingsMenuItem,
 } from "@itwin/property-grid-react";
 import {
@@ -93,22 +93,25 @@ export const ViewerRoute = () => {
             }),
           ],
         },
-        new PropertyGridUiItemsProvider({
-          propertyGridProps: {
-            autoExpandChildCategories: true,
-            ancestorsNavigationControls: (props) => (
-              <AncestorsNavigationControls {...props} />
-            ),
-            contextMenuItems: [
-              (props) => <CopyPropertyTextContextMenuItem {...props} />,
-            ],
-            settingsMenuItems: [
-              (props) => (
-                <ShowHideNullValuesSettingsMenuItem {...props} persist={true} />
+        {
+          id: "PropertyGridUIProvider",
+          getWidgets: () => [
+            createPropertyGrid({
+              autoExpandChildCategories: true,
+              ancestorsNavigationControls: (props) => (
+                <AncestorsNavigationControls {...props} />
               ),
-            ],
-          },
-        }),
+              contextMenuItems: [
+                (props) => <CopyPropertyTextContextMenuItem {...props} />,
+              ],
+              settingsMenuItems: [
+                (props) => (
+                  <ShowHideNullValuesSettingsMenuItem {...props} persist={true} />
+                ),
+              ],
+            })
+          ],
+        },
         new MeasureToolsUiItemsProvider(),
         new IModelMergeItemsProvider(),
       ]}