add support for appui@5

Author: grigasp

change/@itwin-tree-widget-react-61cc506d-0f3e-4ab7-b357-f2f4751e1d80.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add support for AppUI 5.x",
+  "packageName": "@itwin/tree-widget-react",
+  "email": "35135765+grigasp@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

node-hooks/ignore-styles/hook.cjs

@@ -4,10 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 
 const STYLE_FILE_EXTENSIONS = [".css", ".scss", ".less", ".sass"];
+const ICONS_FILE_EXTENSIONS = [".svg"];
 
 exports.load = (url, context, next) => {
   if (STYLE_FILE_EXTENSIONS.some((ext) => url.endsWith(ext))) {
-    return { format: "module", shortCircuit: true, source: "" };
+    return { format: "module", shortCircuit: true, source: "export default null;" };
+  }
+  if (ICONS_FILE_EXTENSIONS.some((ext) => url.endsWith(ext))) {
+    return { format: "module", shortCircuit: true, source: "export default null;" };
   }
   return next(url, context);
 };

packages/itwin/tree-widget/package.json

@@ -56,10 +56,9 @@
   },
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/appui-react": "^4.10.0",
-    "@itwin/components-react": "^4.10.0",
+    "@itwin/appui-react": "^4.10.0 || ^5.0.0",
+    "@itwin/components-react": "^4.10.0 || ^5.0.0",
     "@itwin/core-frontend": "^4.0.0",
-    "@itwin/core-react": "^4.10.0",
     "@itwin/ecschema-metadata": "^4.0.0",
     "@itwin/itwinui-react": "^3.11.0",
     "@itwin/presentation-components": "^5.0.0",
@@ -80,9 +79,9 @@
   },
   "devDependencies": {
     "@itwin/appui-abstract": "^4.10.2",
-    "@itwin/appui-react": "^4.17.6",
+    "@itwin/appui-react": "^5.0.5",
     "@itwin/build-tools": "^4.10.2",
-    "@itwin/components-react": "^4.17.6",
+    "@itwin/components-react": "^5.0.5",
     "@itwin/core-backend": "^4.10.2",
     "@itwin/core-bentley": "^4.10.2",
     "@itwin/core-common": "^4.10.2",
@@ -92,13 +91,14 @@
     "@itwin/core-markup": "^4.10.2",
     "@itwin/core-orbitgt": "^4.10.2",
     "@itwin/core-quantity": "^4.10.2",
-    "@itwin/core-react": "^4.17.6",
+    "@itwin/core-react": "^5.0.5",
     "@itwin/core-telemetry": "^4.10.2",
     "@itwin/ecschema-metadata": "^4.10.2",
     "@itwin/ecschema-rpcinterface-common": "^4.10.2",
     "@itwin/ecschema-rpcinterface-impl": "^4.10.2",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@itwin/imodel-components-react": "^4.17.6",
+    "@itwin/imodel-components-react": "^5.0.5",
+    "@itwin/itwinui-react": "^3.16.5",
     "@itwin/oidc-signin-tool": "^4.4.0",
     "@itwin/presentation-backend": "^4.10.2",
     "@itwin/presentation-common": "^4.10.2",

packages/itwin/tree-widget/pnpm-lock.yaml

@@ -6,25 +6,21 @@
 import { expect } from "chai";
 import sinon from "sinon";
 import * as td from "testdouble";
-import { UiFramework } from "@itwin/appui-react";
 import { BeEvent } from "@itwin/core-bentley";
+import { EmptyLocalization } from "@itwin/core-common";
 import { IModelApp } from "@itwin/core-frontend";
 import * as selectableTreeModule from "../components/SelectableTree.js";
-import * as treeWidgetModule from "../TreeWidget.js";
-import { render, TestUtils, waitFor } from "./TestUtils.js";
+import { render, waitFor } from "./TestUtils.js";
 
 import type { IModelConnection } from "@itwin/core-frontend";
 
 describe("createTreeWidget", () => {
   beforeEach(async () => {
     sinon.stub(IModelApp, "viewManager").get(() => ({ onSelectedViewportChanged: new BeEvent() }));
     sinon.stub(IModelApp, "toolAdmin").get(() => ({ activeToolChanged: new BeEvent() }));
-    await td.replaceEsm("../TreeWidget.js", { ...treeWidgetModule });
-    await TestUtils.initialize();
   });
 
   afterEach(() => {
-    TestUtils.terminate();
     sinon.restore();
     td.reset();
   });
@@ -35,23 +31,24 @@ describe("createTreeWidget", () => {
       ...selectableTreeModule,
       SelectableTree: stubSelectableTree,
     });
+    const { createTreeWidget } = await initialize();
+
     const trees: selectableTreeModule.SelectableTreeDefinition[] = [
       {
         id: "tree",
         getLabel: () => "Tree Label",
         render: () => <div>Tree Content</div>,
       },
     ];
-    const createTreeWidget = (await import("../components/TreeWidgetUiItemsProvider.js")).createTreeWidget;
     const widget = createTreeWidget({ trees });
     render(<>{widget.content}</>);
-
     expect(stubSelectableTree).to.be.called;
     const [props] = stubSelectableTree.args[0];
     expect(props.trees).to.be.eq(trees);
   });
 
   it("renders error message if tree component throws", async () => {
+    const { UiFramework, TreeWidget, createTreeWidget } = await initialize();
     UiFramework.setIModelConnection({
       isBlankConnection: () => true,
       selectionSet: {
@@ -71,10 +68,20 @@ describe("createTreeWidget", () => {
         render: () => <TestTree />,
       },
     ];
-    const createTreeWidget = (await import("../components/TreeWidgetUiItemsProvider.js")).createTreeWidget;
     const widget = createTreeWidget({ trees });
     const { queryByText } = render(<>{widget.content}</>);
-
-    await waitFor(() => expect(queryByText(treeWidgetModule.TreeWidget.translate("errorState.title"))).to.not.be.null);
+    await waitFor(() => expect(queryByText(TreeWidget.translate("errorState.title"))).to.not.be.null);
   });
+
+  async function initialize() {
+    const UiFramework = (await import("@itwin/appui-react")).UiFramework;
+    await UiFramework.initialize();
+
+    const TreeWidget = (await import("../TreeWidget.js")).TreeWidget;
+    await TreeWidget.initialize(new EmptyLocalization());
+
+    const createTreeWidget = (await import("../components/TreeWidgetUiItemsProvider.js")).createTreeWidget;
+
+    return { UiFramework, TreeWidget, createTreeWidget };
+  }
 });

packages/itwin/tree-widget/src/test/TreeWidgetUiItemsProvider.test.tsx

@@ -53,38 +53,6 @@ describe("<TreeHeader />", () => {
     });
   });
 
-  it("handles buttons overflow when only dropdown button can be seen", async () => {
-    sinon.stub(HTMLElement.prototype, "scrollWidth").get(() => 200);
-    sinon.stub(HTMLElement.prototype, "offsetWidth").get(() => 32);
-
-    const { queryByRole } = render(
-      <TreeHeader {...defaultProps}>
-        <Button>Button1</Button>
-        <Button>Button2</Button>
-      </TreeHeader>,
-    );
-
-    expect(queryByRole("button", { name: "Button1" })).to.be.null;
-    expect(queryByRole("button", { name: "Button2" })).to.be.null;
-  });
-
-  it("handles buttons overflow when provided buttons and dropdown button can be seen", async () => {
-    sinon.stub(HTMLElement.prototype, "scrollWidth").get(() => 200);
-    sinon.stub(HTMLElement.prototype, "offsetWidth").get(() => 200);
-
-    const { queryByRole } = render(
-      <TreeHeader {...defaultProps}>
-        <Button>Button1</Button>
-        <Button>Button2</Button>
-        <Button>Button3</Button>
-      </TreeHeader>,
-    );
-
-    expect(queryByRole("button", { name: "Button1" })).to.not.be.null;
-    expect(queryByRole("button", { name: "Button2" })).to.be.null;
-    expect(queryByRole("button", { name: "Button3" })).to.be.null;
-  });
-
   describe("search box", () => {
     it("renders search box", async () => {
       const { getByRole, user } = render(<TreeHeader {...defaultProps} filteringProps={{ ...filteringProps, selectedIndex: 5, resultCount: 10 }} />);

packages/itwin/tree-widget/src/test/tree-header/TreeHeader.test.tsx

@@ -7,15 +7,13 @@ import { expect } from "chai";
 import { Children } from "react";
 import sinon from "sinon";
 import * as td from "testdouble";
-import { UiFramework } from "@itwin/appui-react";
 import { BeEvent } from "@itwin/core-bentley";
-import { IModelApp, NoRenderApp } from "@itwin/core-frontend";
 import { Presentation } from "@itwin/presentation-frontend";
 import * as treeHeaderModule from "../../../components/tree-header/TreeHeader.js";
 import * as categoriesTreeModule from "../../../components/trees/categories-tree/CategoriesTree.js";
 import * as categoriesVisibilityUtilsModule from "../../../components/trees/common/CategoriesVisibilityUtils.js";
 import * as treeWidgetModule from "../../../TreeWidget.js";
-import { mockPresentationManager, render, TestUtils, waitFor } from "../../TestUtils.js";
+import { mockPresentationManager, render, waitFor } from "../../TestUtils.js";
 
 import type * as categoriesTreeComponentModule from "../../../components/trees/categories-tree/CategoriesTreeComponent.js";
 import type { ComponentPropsWithoutRef } from "react";
@@ -26,15 +24,15 @@ import type { IModelConnection, Viewport } from "@itwin/core-frontend";
 type TreeHeaderProps = ComponentPropsWithoutRef<typeof treeHeaderModule.TreeHeader>;
 
 describe("<CategoriesTreeComponent />", () => {
-  before(async () => {
+  async function initialize() {
+    const { IModelApp, NoRenderApp } = await import("@itwin/core-frontend");
     await NoRenderApp.startup();
-    await TestUtils.initialize();
-  });
 
-  after(async () => {
-    TestUtils.terminate();
-    await IModelApp.shutdown();
-  });
+    const { UiFramework } = await import("@itwin/appui-react");
+    await UiFramework.initialize();
+
+    return { IModelApp, UiFramework };
+  }
 
   const defaultCategoriesTreeComponentProps: ComponentPropsWithoutRef<typeof categoriesTreeComponentModule.CategoriesTreeComponent> = {
     getSchemaContext: () => ({}) as any,
@@ -121,20 +119,23 @@ describe("<CategoriesTreeComponent />", () => {
   } as unknown as Viewport;
 
   it("returns null if iModel is undefined", async () => {
+    const { IModelApp } = await initialize();
     sinon.stub(IModelApp.viewManager, "selectedView").get(() => ({}) as Viewport);
     const result = render(<CategoriesTreeComponent {...defaultCategoriesTreeComponentProps} />);
     expect(result.container.children).to.be.empty;
     expect(stubCategoriesTree).to.not.be.called;
   });
 
   it("returns null if viewport is undefined", async () => {
+    const { UiFramework } = await initialize();
     sinon.stub(UiFramework, "getIModelConnection").returns({} as IModelConnection);
     const result = render(<CategoriesTreeComponent {...defaultCategoriesTreeComponentProps} />);
     expect(result.container.children).to.be.empty;
     expect(stubCategoriesTree).to.not.be.called;
   });
 
   it("renders `CategoryTree` when iModel and viewport are defined", async () => {
+    const { IModelApp, UiFramework } = await initialize();
     sinon.stub(IModelApp.viewManager, "selectedView").get(() => viewport);
     sinon.stub(UiFramework, "getIModelConnection").returns(iModel);
     const result = render(<CategoriesTreeComponent {...defaultCategoriesTreeComponentProps} density="enlarged" />);
@@ -151,6 +152,7 @@ describe("<CategoriesTreeComponent />", () => {
 
   describe("header buttons", () => {
     it("renders default tree header buttons", async () => {
+      const { IModelApp, UiFramework } = await initialize();
       sinon.stub(IModelApp.viewManager, "selectedView").get(() => viewport);
       sinon.stub(UiFramework, "getIModelConnection").returns(iModel);
       render(<CategoriesTreeComponent {...defaultCategoriesTreeComponentProps} />);
@@ -160,6 +162,7 @@ describe("<CategoriesTreeComponent />", () => {
     });
 
     it("renders user provided tree header buttons", async () => {
+      const { IModelApp, UiFramework } = await initialize();
       const spy = sinon.stub().returns(<></>);
       sinon.stub(IModelApp.viewManager, "selectedView").get(() => viewport);
       sinon.stub(UiFramework, "getIModelConnection").returns(iModel);

packages/itwin/tree-widget/src/test/trees/categories-tree/CategoriesTreeComponent.test.tsx

@@ -8,14 +8,12 @@ import { Children } from "react";
 import sinon from "sinon";
 import * as td from "testdouble";
 import * as moq from "typemoq";
-import { UiFramework } from "@itwin/appui-react";
 import { BeEvent } from "@itwin/core-bentley";
-import { IModelApp, NoRenderApp } from "@itwin/core-frontend";
 import * as treeHeaderModule from "../../../components/tree-header/TreeHeader.js";
 import * as modelsVisibilityHandlerModule from "../../../components/trees/models-tree/internal/ModelsTreeVisibilityHandler.js";
 import * as modelsTreeModule from "../../../components/trees/models-tree/ModelsTree.js";
 import * as treeWidgetModule from "../../../TreeWidget.js";
-import { mockViewport, render, TestUtils, waitFor } from "../../TestUtils.js";
+import { mockViewport, render, waitFor } from "../../TestUtils.js";
 
 import type { ComponentPropsWithoutRef } from "react";
 import type { IModelConnection, Viewport } from "@itwin/core-frontend";
@@ -25,15 +23,15 @@ import type * as modelsTreeComponentModule from "../../../components/trees/model
 type TreeHeaderProps = ComponentPropsWithoutRef<typeof treeHeaderModule.TreeHeader>;
 
 describe("<ModelsTreeComponent />", () => {
-  before(async () => {
+  async function initialize() {
+    const { IModelApp, NoRenderApp } = await import("@itwin/core-frontend");
     await NoRenderApp.startup();
-    await TestUtils.initialize();
-  });
 
-  after(async () => {
-    TestUtils.terminate();
-    await IModelApp.shutdown();
-  });
+    const { UiFramework } = await import("@itwin/appui-react");
+    await UiFramework.initialize();
+
+    return { IModelApp, UiFramework };
+  }
 
   const defaultModelsTreeComponentProps: ComponentPropsWithoutRef<typeof modelsTreeComponentModule.ModelsTreeComponent> = {
     getSchemaContext: () => ({}) as any,
@@ -106,6 +104,7 @@ describe("<ModelsTreeComponent />", () => {
   });
 
   it("returns null if iModel is undefined", async () => {
+    const { IModelApp } = await initialize();
     sinon.stub(IModelApp.viewManager, "selectedView").get(() => ({}) as Viewport);
     const result = render(<ModelsTreeComponent {...defaultModelsTreeComponentProps} />);
     await waitFor(() => {
@@ -115,6 +114,7 @@ describe("<ModelsTreeComponent />", () => {
   });
 
   it("returns null if viewport is undefined", async () => {
+    const { UiFramework } = await initialize();
     sinon.stub(UiFramework, "getIModelConnection").returns({} as IModelConnection);
     const result = render(<ModelsTreeComponent {...defaultModelsTreeComponentProps} />);
     await waitFor(() => {
@@ -124,6 +124,7 @@ describe("<ModelsTreeComponent />", () => {
   });
 
   it("renders `ModelsTree` when iModel and viewport are defined", async () => {
+    const { IModelApp, UiFramework } = await initialize();
     sinon.stub(IModelApp.viewManager, "selectedView").get(() => viewport);
     sinon.stub(UiFramework, "getIModelConnection").returns({} as IModelConnection);
     const result = render(<ModelsTreeComponent {...defaultModelsTreeComponentProps} />);
@@ -140,6 +141,7 @@ describe("<ModelsTreeComponent />", () => {
 
   describe("available models", () => {
     it("renders button with available models", async () => {
+      const { IModelApp, UiFramework } = await initialize();
       const iModel = {
         models: {
           queryProps: async () => [
@@ -165,6 +167,7 @@ describe("<ModelsTreeComponent />", () => {
     });
 
     it("renders button with empty available models list if error if thrown while querying available models", async () => {
+      const { IModelApp, UiFramework } = await initialize();
       const spy = sinon.stub().returns(<></>);
       sinon.stub(IModelApp.viewManager, "selectedView").get(() => viewport);
       sinon.stub(UiFramework, "getIModelConnection").returns({
@@ -181,6 +184,7 @@ describe("<ModelsTreeComponent />", () => {
 
   describe("header buttons", () => {
     it("renders default tree header buttons", async () => {
+      const { IModelApp, UiFramework } = await initialize();
       sinon.stub(IModelApp.viewManager, "selectedView").get(() => viewport);
       sinon.stub(UiFramework, "getIModelConnection").returns({} as IModelConnection);
       render(<ModelsTreeComponent {...defaultModelsTreeComponentProps} />);
@@ -190,6 +194,7 @@ describe("<ModelsTreeComponent />", () => {
     });
 
     it("renders user provided tree header buttons", async () => {
+      const { IModelApp, UiFramework } = await initialize();
       const spy = sinon.stub().returns(<></>);
       sinon.stub(IModelApp.viewManager, "selectedView").get(() => viewport);
       sinon.stub(UiFramework, "getIModelConnection").returns({} as IModelConnection);