@itwin/tree-widget-react 0.3.0 → 0.4.0

package/lib/cjs/components/trees/index.d.ts

@@ -1,7 +1,5 @@
 export * from "./ModelsTree";
 export * from "./CategoriesTree";
 export * from "./SpatialTree";
-export * from "./ClassificationsTree";
-export * from "./TreeWithRuleset";
 export * from "./IModelContentTree";
 //# sourceMappingURL=index.d.ts.map

package/lib/cjs/components/trees/index.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -17,7 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ModelsTree"), exports);
 __exportStar(require("./CategoriesTree"), exports);
 __exportStar(require("./SpatialTree"), exports);
-__exportStar(require("./ClassificationsTree"), exports);
-__exportStar(require("./TreeWithRuleset"), exports);
 __exportStar(require("./IModelContentTree"), exports);
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/trees/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/trees/index.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;;;;;;;AAE/F,+CAA6B;AAC7B,mDAAiC;AACjC,gDAA8B;AAC9B,wDAAsC;AACtC,oDAAkC;AAClC,sDAAoC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nexport * from \"./ModelsTree\";\nexport * from \"./CategoriesTree\";\nexport * from \"./SpatialTree\";\nexport * from \"./ClassificationsTree\";\nexport * from \"./TreeWithRuleset\";\nexport * from \"./IModelContentTree\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/trees/index.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;;;;;;;;;;AAEhG,+CAA6B;AAC7B,mDAAiC;AACjC,gDAA8B;AAC9B,sDAAoC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nexport * from \"./ModelsTree\";\nexport * from \"./CategoriesTree\";\nexport * from \"./SpatialTree\";\nexport * from \"./IModelContentTree\";\n"]}

package/lib/cjs/components/utils/AutoSizer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface AutoSizerProps {
+    children: (size: Size) => React.ReactElement | null;
+}
+export declare const AutoSizer: (props: AutoSizerProps) => JSX.Element;
+//# sourceMappingURL=AutoSizer.d.ts.map

package/lib/cjs/components/utils/AutoSizer.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoSizer = void 0;
+const react_1 = __importStar(require("react"));
+const core_react_1 = require("@itwin/core-react");
+const AutoSizer = (props) => {
+    const [height, setHeight] = react_1.useState(0);
+    const [width, setWidth] = react_1.useState(0);
+    const handleResize = react_1.useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = core_react_1.useResizeObserver(handleResize);
+    return (react_1.default.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (props.children({ width, height }))));
+};
+exports.AutoSizer = AutoSizer;
+//# sourceMappingURL=AutoSizer.js.map

package/lib/cjs/components/utils/AutoSizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSizer.js","sourceRoot":"","sources":["../../../../src/components/utils/AutoSizer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,kDAAsD;AAW/C,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,mBAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,8BAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IACpD,KAAK,IAAI,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CACnD,CACP,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,SAAS,aAcpB","sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface Size {\n  width: number;\n  height: number;\n}\n\nexport interface AutoSizerProps {\n  children: (size: Size) => React.ReactElement | null;\n}\n\nexport const AutoSizer = (props: AutoSizerProps) => {\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  return (\n    <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n      {width && height && (props.children({ width, height }))}\n    </div>\n  );\n};\n"]}

package/lib/cjs/tree-widget-react.d.ts

@@ -1,5 +1,5 @@
+export * from "./types";
 export * from "./TreeWidget";
-export * from "./components/TreeWidgetControl";
 export * from "./components/TreeWidgetComponent";
 export * from "./components/header/TreeHeader";
 export * from "./components/trees";

package/lib/cjs/tree-widget-react.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -14,8 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
 __exportStar(require("./TreeWidget"), exports);
-__exportStar(require("./components/TreeWidgetControl"), exports);
 __exportStar(require("./components/TreeWidgetComponent"), exports);
 __exportStar(require("./components/header/TreeHeader"), exports);
 __exportStar(require("./components/trees"), exports);

package/lib/cjs/tree-widget-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-widget-react.js","sourceRoot":"","sources":["../../src/tree-widget-react.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;;;;;;;AAE/F,+CAA6B;AAC7B,iEAA+C;AAC/C,mEAAiD;AACjD,iEAA+C;AAC/C,qDAAmC;AACnC,yEAAuD","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nexport * from \"./TreeWidget\";\nexport * from \"./components/TreeWidgetControl\";\nexport * from \"./components/TreeWidgetComponent\";\nexport * from \"./components/header/TreeHeader\";\nexport * from \"./components/trees\";\nexport * from \"./components/TreeWidgetUiItemsProvider\";\n"]}
+{"version":3,"file":"tree-widget-react.js","sourceRoot":"","sources":["../../src/tree-widget-react.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;;;;;;;;;;AAEhG,0CAAwB;AACxB,+CAA6B;AAC7B,mEAAiD;AACjD,iEAA+C;AAC/C,qDAAmC;AACnC,yEAAuD","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nexport * from \"./types\";\nexport * from \"./TreeWidget\";\nexport * from \"./components/TreeWidgetComponent\";\nexport * from \"./components/header/TreeHeader\";\nexport * from \"./components/trees\";\nexport * from \"./components/TreeWidgetUiItemsProvider\";\n"]}

package/lib/cjs/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { CategoryTreeProps, ModelsTreeProps, SpatialContainmentTreeProps } from "@itwin/appui-react";
+import type { SelectableContentDefinition } from "@itwin/components-react";
+import type { IModelConnection } from "@itwin/core-frontend";
+export interface IModelContentTreeProps extends Omit<React.AllHTMLAttributes<HTMLDivElement>, "children"> {
+    iModel: IModelConnection;
+}
+export declare type ModelTreeProps = Omit<ModelsTreeProps, "iModel" | "activeView" | "width" | "height" | "filterInfo" | "onFilterApplied">;
+export declare type CategoriesTreeProps = Omit<CategoryTreeProps, "iModel" | "activeView" | "width" | "height" | "filterInfo" | "onFilterApplied">;
+export declare type SpatialTreeProps = Omit<SpatialContainmentTreeProps, "iModel" | "width" | "height">;
+export interface TreeWidgetOptions {
+    enableElementsClassGrouping?: boolean;
+    additionalTrees?: SelectableContentDefinition[];
+    modelsTreeProps?: ModelTreeProps;
+    categoriesTreeProps?: CategoriesTreeProps;
+    spatialTreeProps?: SpatialTreeProps;
+    hideTrees?: {
+        modelsTree?: boolean;
+        categoriesTree?: boolean;
+        spatialTree?: boolean;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/cjs/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type {\n  CategoryTreeProps,\n  ModelsTreeProps,\n  SpatialContainmentTreeProps,\n} from \"@itwin/appui-react\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\n\nexport interface IModelContentTreeProps\n  extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"children\"> {\n  iModel: IModelConnection;\n}\n\nexport type ModelTreeProps = Omit<\nModelsTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n>;\n\nexport type CategoriesTreeProps = Omit<\nCategoryTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n>;\n\nexport type SpatialTreeProps = Omit<\nSpatialContainmentTreeProps,\n\"iModel\" | \"width\" | \"height\"\n>;\n\nexport interface TreeWidgetOptions {\n  enableElementsClassGrouping?: boolean;\n  additionalTrees?: SelectableContentDefinition[];\n  modelsTreeProps?: ModelTreeProps;\n  categoriesTreeProps?: CategoriesTreeProps;\n  spatialTreeProps?: SpatialTreeProps;\n  hideTrees?: {\n    modelsTree?: boolean;\n    categoriesTree?: boolean;\n    spatialTree?: boolean;\n  };\n}\n"]}

package/lib/esm/components/TreeWidgetUiItemsProvider.d.ts

@@ -1,20 +1,11 @@
 import type { AbstractWidgetProps, StagePanelSection, UiItemsProvider } from "@itwin/appui-abstract";
-import { StagePanelLocation } from "@itwin/appui-abstract";
-import type { TreeWidgetControlOptions } from "./TreeWidgetControl";
+import { AbstractZoneLocation, StagePanelLocation } from "@itwin/appui-abstract";
+import type { TreeWidgetOptions } from "../types";
+export declare const TreeWidgetId = "tree-widget-react:trees";
 export declare class TreeWidgetUiItemsProvider implements UiItemsProvider {
-    readonly id = "TreeWidgetUiitemsProvider";
-    private _imodel?;
-    private _activeView?;
-    private _enableElementsClassGrouping?;
-    private _allViewports?;
-    private _additionalTrees?;
-    private _modelsTreeProps?;
-    private _categoriesTreeProps?;
-    private _spatialTreeProps?;
-    private _modelsTreeReplacement?;
-    private _categoriesTreeReplacement?;
-    private _spatialTreeReplacement?;
-    constructor(props?: Partial<TreeWidgetControlOptions>);
-    provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, _section: StagePanelSection | undefined): ReadonlyArray<AbstractWidgetProps>;
+    private _treeWidgetOptions?;
+    readonly id = "TreeWidgetUiItemsProvider";
+    constructor(_treeWidgetOptions?: TreeWidgetOptions | undefined);
+    provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection, zoneLocation?: AbstractZoneLocation): ReadonlyArray<AbstractWidgetProps>;
 }
 //# sourceMappingURL=TreeWidgetUiItemsProvider.d.ts.map

package/lib/esm/components/TreeWidgetUiItemsProvider.js

@@ -1,4 +1,4 @@
-import { StagePanelLocation, StageUsage, } from "@itwin/appui-abstract";
+import { AbstractZoneLocation, StagePanelLocation, StageUsage, } from "@itwin/appui-abstract";
 import { ClassGroupingOption, UiFramework } from "@itwin/appui-react";
 import React from "react";
 import { TreeWidgetComponent } from "./TreeWidgetComponent";
@@ -6,64 +6,62 @@ import { CategoriesTreeComponent } from "./trees/CategoriesTree";
 import { ModelsTreeComponent } from "./trees/ModelsTree";
 import { SpatialTreeComponent } from "./trees/SpatialTree";
 import { TreeWidget } from "../TreeWidget";
+export const TreeWidgetId = "tree-widget-react:trees";
 export class TreeWidgetUiItemsProvider {
-    constructor(props) {
-        var _a, _b, _c, _d, _e, _f;
-        this.id = "TreeWidgetUiitemsProvider";
-        this._imodel = props === null || props === void 0 ? void 0 : props.iModelConnection;
-        this._activeView = props === null || props === void 0 ? void 0 : props.activeView;
-        this._enableElementsClassGrouping = props === null || props === void 0 ? void 0 : props.enableElementsClassGrouping;
-        this._allViewports = props === null || props === void 0 ? void 0 : props.allViewports;
-        this._additionalTrees = props === null || props === void 0 ? void 0 : props.additionalTrees;
-        this._modelsTreeProps = (_a = props === null || props === void 0 ? void 0 : props.additionalProps) === null || _a === void 0 ? void 0 : _a.modelsTree;
-        this._categoriesTreeProps = (_b = props === null || props === void 0 ? void 0 : props.additionalProps) === null || _b === void 0 ? void 0 : _b.categoriesTree;
-        this._spatialTreeProps = (_c = props === null || props === void 0 ? void 0 : props.additionalProps) === null || _c === void 0 ? void 0 : _c.spatialTree;
-        this._modelsTreeReplacement = (_d = props === null || props === void 0 ? void 0 : props.treeReplacements) === null || _d === void 0 ? void 0 : _d.modelsTree;
-        this._categoriesTreeReplacement = (_e = props === null || props === void 0 ? void 0 : props.treeReplacements) === null || _e === void 0 ? void 0 : _e.categoriesTree;
-        this._spatialTreeReplacement = (_f = props === null || props === void 0 ? void 0 : props.treeReplacements) === null || _f === void 0 ? void 0 : _f.spatialTree;
+    constructor(_treeWidgetOptions) {
+        this._treeWidgetOptions = _treeWidgetOptions;
+        this.id = "TreeWidgetUiItemsProvider";
     }
-    provideWidgets(_stageId, stageUsage, location, _section) {
-        var _a, _b, _c;
+    provideWidgets(_stageId, stageUsage, location, section, 
+    // eslint-disable-next-line deprecation/deprecation
+    zoneLocation) {
+        var _a, _b, _c, _d, _e, _f, _g;
         const widgets = [];
-        const imodel = UiFramework.getIModelConnection();
-        if (stageUsage === StageUsage.General &&
-            location === StagePanelLocation.Right &&
-            imodel !== undefined) {
-            const modelsTreeComponent = (React.createElement(ModelsTreeComponent, { iModel: (_a = this._imodel) !== null && _a !== void 0 ? _a : imodel, allViewports: this._allViewports, activeView: this._activeView, enableElementsClassGrouping: this._enableElementsClassGrouping, ...this._modelsTreeProps }));
-            const categoriesTreeComponent = (React.createElement(CategoriesTreeComponent, { iModel: (_b = this._imodel) !== null && _b !== void 0 ? _b : imodel, allViewports: this._allViewports, activeView: this._activeView, ...this._categoriesTreeProps }));
-            const spatialContainmentComponent = (React.createElement(SpatialTreeComponent, { iModel: (_c = this._imodel) !== null && _c !== void 0 ? _c : imodel, enableElementsClassGrouping: this._enableElementsClassGrouping
-                    ? ClassGroupingOption.Yes
-                    : ClassGroupingOption.No, ...this._spatialTreeProps }));
-            const trees = [
-                {
+        if (
+        // eslint-disable-next-line deprecation/deprecation
+        (!section && stageUsage === StageUsage.General && zoneLocation === AbstractZoneLocation.CenterRight) ||
+            (stageUsage === StageUsage.General && location === StagePanelLocation.Right && UiFramework.uiVersion !== "1")) {
+            const trees = [];
+            if (!((_b = (_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.hideTrees) === null || _b === void 0 ? void 0 : _b.modelsTree)) {
+                trees.push({
                     label: TreeWidget.translate("modeltree"),
                     id: "model-tree",
-                    render: this._modelsTreeReplacement
-                        ? this._modelsTreeReplacement
-                        : () => modelsTreeComponent,
-                },
-                {
+                    render: () => {
+                        var _a, _b;
+                        return (React.createElement(ModelsTreeComponent, { enableElementsClassGrouping: ((_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.enableElementsClassGrouping)
+                                ? ClassGroupingOption.YesWithCounts
+                                : ClassGroupingOption.No, ...(_b = this._treeWidgetOptions) === null || _b === void 0 ? void 0 : _b.modelsTreeProps }));
+                    },
+                });
+            }
+            if (!((_d = (_c = this._treeWidgetOptions) === null || _c === void 0 ? void 0 : _c.hideTrees) === null || _d === void 0 ? void 0 : _d.categoriesTree)) {
+                trees.push({
                     label: TreeWidget.translate("categories"),
                     id: "categories-tree",
-                    render: this._categoriesTreeReplacement
-                        ? this._categoriesTreeReplacement
-                        : () => categoriesTreeComponent,
-                },
-                {
+                    render: () => {
+                        var _a;
+                        return (React.createElement(CategoriesTreeComponent, { ...(_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.categoriesTreeProps }));
+                    },
+                });
+            }
+            if (!((_f = (_e = this._treeWidgetOptions) === null || _e === void 0 ? void 0 : _e.hideTrees) === null || _f === void 0 ? void 0 : _f.spatialTree)) {
+                trees.push({
                     label: TreeWidget.translate("containment"),
                     id: "spatial-containment-tree",
-                    render: this._spatialTreeReplacement
-                        ? this._spatialTreeReplacement
-                        : () => spatialContainmentComponent,
-                },
-            ];
-            if (this._additionalTrees) {
-                trees.push(...this._additionalTrees);
+                    render: () => {
+                        var _a, _b;
+                        return (React.createElement(SpatialTreeComponent, { enableElementsClassGrouping: ((_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.enableElementsClassGrouping)
+                                ? ClassGroupingOption.YesWithCounts
+                                : ClassGroupingOption.No, ...(_b = this._treeWidgetOptions) === null || _b === void 0 ? void 0 : _b.spatialTreeProps }));
+                    },
+                });
+            }
+            if ((_g = this._treeWidgetOptions) === null || _g === void 0 ? void 0 : _g.additionalTrees) {
+                trees.push(...this._treeWidgetOptions.additionalTrees);
             }
             widgets.push({
-                id: "tree",
+                id: TreeWidgetId,
                 label: TreeWidget.translate("treeview"),
-                // eslint-disable-next-line react/display-name
                 getWidgetContent: () => React.createElement(TreeWidgetComponent, { trees: trees }),
             });
         }

package/lib/esm/components/TreeWidgetUiItemsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type {\n  AbstractWidgetProps,\n  StagePanelSection,\n  UiItemsProvider,\n} from \"@itwin/appui-abstract\";\nimport {\n  StagePanelLocation,\n  StageUsage,\n} from \"@itwin/appui-abstract\";\nimport { ClassGroupingOption, UiFramework } from \"@itwin/appui-react\";\nimport React from \"react\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport { CategoriesTreeComponent } from \"./trees/CategoriesTree\";\nimport { ModelsTreeComponent } from \"./trees/ModelsTree\";\nimport { SpatialTreeComponent } from \"./trees/SpatialTree\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport type { TreeWidgetControlOptions } from \"./TreeWidgetControl\";\n\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiitemsProvider\";\n\n  private _imodel?: IModelConnection;\n  private _activeView?: Viewport;\n  private _enableElementsClassGrouping?: boolean;\n  private _allViewports?: boolean;\n  private _additionalTrees?: SelectableContentDefinition[];\n  private _modelsTreeProps?: {};\n  private _categoriesTreeProps?: {};\n  private _spatialTreeProps?: {};\n  private _modelsTreeReplacement?: () => React.ReactNode;\n  private _categoriesTreeReplacement?: () => React.ReactNode;\n  private _spatialTreeReplacement?: () => React.ReactNode;\n\n  constructor(props?: Partial<TreeWidgetControlOptions>) {\n    this._imodel = props?.iModelConnection;\n    this._activeView = props?.activeView;\n    this._enableElementsClassGrouping = props?.enableElementsClassGrouping;\n    this._allViewports = props?.allViewports;\n    this._additionalTrees = props?.additionalTrees;\n    this._modelsTreeProps = props?.additionalProps?.modelsTree;\n    this._categoriesTreeProps = props?.additionalProps?.categoriesTree;\n    this._spatialTreeProps = props?.additionalProps?.spatialTree;\n    this._modelsTreeReplacement = props?.treeReplacements?.modelsTree;\n    this._categoriesTreeReplacement = props?.treeReplacements?.categoriesTree;\n    this._spatialTreeReplacement = props?.treeReplacements?.spatialTree;\n  }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    _section: StagePanelSection | undefined\n  ): ReadonlyArray<AbstractWidgetProps> {\n    const widgets: AbstractWidgetProps[] = [];\n    const imodel = UiFramework.getIModelConnection();\n    if (\n      stageUsage === StageUsage.General &&\n      location === StagePanelLocation.Right &&\n      imodel !== undefined\n    ) {\n      const modelsTreeComponent = (\n        <ModelsTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          enableElementsClassGrouping={this._enableElementsClassGrouping}\n          {...this._modelsTreeProps}\n        />\n      );\n\n      const categoriesTreeComponent = (\n        <CategoriesTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          {...this._categoriesTreeProps}\n        />\n      );\n\n      const spatialContainmentComponent = (\n        <SpatialTreeComponent\n          iModel={this._imodel ?? imodel}\n          enableElementsClassGrouping={\n            this._enableElementsClassGrouping\n              ? ClassGroupingOption.Yes\n              : ClassGroupingOption.No\n          }\n          {...this._spatialTreeProps}\n        />\n      );\n\n      const trees: SelectableContentDefinition[] = [\n        {\n          label: TreeWidget.translate(\"modeltree\"),\n          id: \"model-tree\",\n          render: this._modelsTreeReplacement\n            ? this._modelsTreeReplacement\n            : () => modelsTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"categories\"),\n          id: \"categories-tree\",\n          render: this._categoriesTreeReplacement\n            ? this._categoriesTreeReplacement\n            : () => categoriesTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"containment\"),\n          id: \"spatial-containment-tree\",\n          render: this._spatialTreeReplacement\n            ? this._spatialTreeReplacement\n            : () => spatialContainmentComponent,\n        },\n      ];\n\n      if (this._additionalTrees) {\n        trees.push(...this._additionalTrees);\n      }\n\n      widgets.push({\n        id: \"tree\",\n        label: TreeWidget.translate(\"treeview\"),\n        // eslint-disable-next-line react/display-name\n        getWidgetContent: () => <TreeWidgetComponent trees={trees} />,\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/* eslint-disable react/display-name */\nimport type {\n  AbstractWidgetProps,\n  StagePanelSection,\n  UiItemsProvider,\n} from \"@itwin/appui-abstract\";\nimport {\n  AbstractZoneLocation,\n  StagePanelLocation,\n  StageUsage,\n} from \"@itwin/appui-abstract\";\nimport { ClassGroupingOption, UiFramework } from \"@itwin/appui-react\";\nimport React from \"react\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport { CategoriesTreeComponent } from \"./trees/CategoriesTree\";\nimport { ModelsTreeComponent } from \"./trees/ModelsTree\";\nimport { SpatialTreeComponent } from \"./trees/SpatialTree\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport type { TreeWidgetOptions } from \"../types\";\n\nexport const TreeWidgetId = \"tree-widget-react:trees\";\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) { }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    section?: StagePanelSection,\n    // eslint-disable-next-line deprecation/deprecation\n    zoneLocation?: AbstractZoneLocation,\n  ): ReadonlyArray<AbstractWidgetProps> {\n    const widgets: AbstractWidgetProps[] = [];\n    if (\n      // eslint-disable-next-line deprecation/deprecation\n      (!section && stageUsage === StageUsage.General && zoneLocation === AbstractZoneLocation.CenterRight) ||\n      (stageUsage === StageUsage.General && location === StagePanelLocation.Right && UiFramework.uiVersion !== \"1\")\n    ) {\n      const trees: SelectableContentDefinition[] = [];\n\n      if (!this._treeWidgetOptions?.hideTrees?.modelsTree) {\n        trees.push({\n          label: TreeWidget.translate(\"modeltree\"),\n          id: \"model-tree\",\n          render: () => (\n            <ModelsTreeComponent\n              enableElementsClassGrouping={\n                this._treeWidgetOptions?.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              {...this._treeWidgetOptions?.modelsTreeProps}\n            />\n          ),\n        });\n      }\n\n      if (!this._treeWidgetOptions?.hideTrees?.categoriesTree) {\n        trees.push({\n          label: TreeWidget.translate(\"categories\"),\n          id: \"categories-tree\",\n          render: () => (\n            <CategoriesTreeComponent {...this._treeWidgetOptions?.categoriesTreeProps} />\n          ),\n        });\n      }\n\n      if (!this._treeWidgetOptions?.hideTrees?.spatialTree) {\n        trees.push({\n          label: TreeWidget.translate(\"containment\"),\n          id: \"spatial-containment-tree\",\n          render: () => (\n            <SpatialTreeComponent\n              enableElementsClassGrouping={\n                this._treeWidgetOptions?.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              {...this._treeWidgetOptions?.spatialTreeProps}\n            />\n          ),\n        });\n      }\n\n      if (this._treeWidgetOptions?.additionalTrees) {\n        trees.push(...this._treeWidgetOptions.additionalTrees);\n      }\n\n      widgets.push({\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        getWidgetContent: () => <TreeWidgetComponent trees={trees} />,\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}

package/lib/esm/components/trees/CategoriesTree.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
-import type { IModelConnection, Viewport } from "@itwin/core-frontend";
 import "./CategoriesTree.scss";
-export interface CategoriesTreeComponentProps {
-    iModel: IModelConnection;
-    allViewports?: boolean;
-    activeView?: Viewport;
-}
-export declare function CategoriesTreeComponent(props: CategoriesTreeComponentProps): JSX.Element;
+import type { CategoriesTreeProps } from "../../types";
+export declare function CategoriesTreeComponent(props: CategoriesTreeProps): JSX.Element;
 //# sourceMappingURL=CategoriesTree.d.ts.map

package/lib/esm/components/trees/CategoriesTree.js

@@ -2,39 +2,36 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import { IModelApp } from "@itwin/core-frontend";
-import { CategoryTree, getCategories, toggleAllCategories } from "@itwin/appui-react";
+import { CategoryTree, getCategories, toggleAllCategories, useActiveIModelConnection, useActiveViewport } from "@itwin/appui-react";
 import { useTreeFilteringState } from "../TreeFilteringState";
 import "./CategoriesTree.scss";
 import { TreeHeaderComponent } from "../header/TreeHeader";
 import { CategoryVisibilityHandler } from "@itwin/appui-react";
-import { useResizeObserver } from "@itwin/core-react";
+import { AutoSizer } from "../utils/AutoSizer";
 export function CategoriesTreeComponent(props) {
+    const iModel = useActiveIModelConnection();
+    const viewport = useActiveViewport();
     const { searchOptions, filterString, activeMatchIndex, onFilterApplied, filteredProvider, } = useTreeFilteringState();
-    const [height, setHeight] = useState(0);
-    const [width, setWidth] = useState(0);
-    const handleResize = useCallback((w, h) => {
-        setHeight(h);
-        setWidth(w);
-    }, []);
-    const ref = useResizeObserver(handleResize);
     const showAll = useCallback(async () => {
-        return toggleAllCategories(IModelApp.viewManager, props.iModel, true, undefined, true, filteredProvider);
-    }, [props.iModel, filteredProvider]);
+        if (!iModel)
+            return;
+        return toggleAllCategories(IModelApp.viewManager, iModel, true, undefined, true, filteredProvider);
+    }, [iModel, filteredProvider]);
     const hideAll = useCallback(async () => {
-        return toggleAllCategories(IModelApp.viewManager, props.iModel, false, undefined, true, filteredProvider);
-    }, [props.iModel, filteredProvider]);
+        if (!iModel)
+            return;
+        return toggleAllCategories(IModelApp.viewManager, iModel, false, undefined, true, filteredProvider);
+    }, [iModel, filteredProvider]);
     const invert = useCallback(async () => {
-        const activeView = IModelApp.viewManager.getFirstOpenView();
-        if (!activeView) {
+        if (!iModel || !viewport)
             return;
-        }
-        const ids = await getCategories(props.iModel, activeView, filteredProvider);
+        const ids = await getCategories(iModel, viewport, filteredProvider);
         const enabled = [];
         const disabled = [];
         for (const id of ids) {
-            if (activeView.view.viewsCategory(id)) {
+            if (viewport.view.viewsCategory(id)) {
                 enabled.push(id);
             }
             else {
@@ -42,12 +39,13 @@ export function CategoriesTreeComponent(props) {
             }
         }
         // Disable enabled
-        CategoryVisibilityHandler.enableCategory(IModelApp.viewManager, props.iModel, enabled, false, true);
+        CategoryVisibilityHandler.enableCategory(IModelApp.viewManager, iModel, enabled, false, true);
         // Enable disabled
-        CategoryVisibilityHandler.enableCategory(IModelApp.viewManager, props.iModel, disabled, true, true);
-    }, [props.iModel, filteredProvider]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert }),
-        React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (React.createElement(CategoryTree, { ...props, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied, width: width, height: height })))));
+        CategoryVisibilityHandler.enableCategory(IModelApp.viewManager, iModel, disabled, true, true);
+    }, [iModel, viewport, filteredProvider]);
+    return (React.createElement(React.Fragment, null, iModel && viewport &&
+        React.createElement(React.Fragment, null,
+            React.createElement(TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert }),
+            React.createElement(AutoSizer, null, ({ width, height }) => (React.createElement(CategoryTree, { ...props, iModel: iModel, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied }))))));
 }
 //# sourceMappingURL=CategoriesTree.js.map

package/lib/esm/components/trees/CategoriesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../src/components/trees/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useCallback, useState } from \"react\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { CategoryTree, getCategories, toggleAllCategories } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./CategoriesTree.scss\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { CategoryVisibilityHandler } from \"@itwin/appui-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface CategoriesTreeComponentProps {\n  iModel: IModelConnection;\n  allViewports?: boolean;\n  activeView?: Viewport;\n}\n\nexport function CategoriesTreeComponent(props: CategoriesTreeComponentProps) {\n  const {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  } = useTreeFilteringState();\n\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  const showAll = useCallback(async () => {\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      props.iModel,\n      true,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [props.iModel, filteredProvider]);\n\n  const hideAll = useCallback(async () => {\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      props.iModel,\n      false,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [props.iModel, filteredProvider]);\n\n  const invert = useCallback(async () => {\n    const activeView = IModelApp.viewManager.getFirstOpenView();\n    if (!activeView) {\n      return;\n    }\n\n    const ids = await getCategories(props.iModel, activeView, filteredProvider);\n    const enabled: string[] = [];\n    const disabled: string[] = [];\n    for (const id of ids) {\n      if (activeView.view.viewsCategory(id)) {\n        enabled.push(id);\n      } else {\n        disabled.push(id);\n      }\n    }\n    // Disable enabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      props.iModel,\n      enabled,\n      false,\n      true\n    );\n    // Enable disabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      props.iModel,\n      disabled,\n      true,\n      true\n    );\n  }, [props.iModel, filteredProvider]);\n\n  return (\n    <>\n      <TreeHeaderComponent\n        searchOptions={searchOptions}\n        showAll={showAll}\n        hideAll={hideAll}\n        invert={invert}\n      />\n      <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n        {width && height && (\n          <CategoryTree\n            {...props}\n            filterInfo={{ filter: filterString, activeMatchIndex }}\n            onFilterApplied={onFilterApplied}\n            width={width}\n            height={height}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../src/components/trees/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useCallback } from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { CategoryTree, getCategories, toggleAllCategories, useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./CategoriesTree.scss\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { CategoryVisibilityHandler } from \"@itwin/appui-react\";\nimport type { CategoriesTreeProps } from \"../../types\";\nimport { AutoSizer } from \"../utils/AutoSizer\";\n\nexport function CategoriesTreeComponent(props: CategoriesTreeProps) {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  const {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  } = useTreeFilteringState();\n\n  const showAll = useCallback(async () => {\n    if (!iModel) return;\n\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      iModel,\n      true,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [iModel, filteredProvider]);\n\n  const hideAll = useCallback(async () => {\n    if (!iModel) return;\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      iModel,\n      false,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [iModel, filteredProvider]);\n\n  const invert = useCallback(async () => {\n    if (!iModel || !viewport) return;\n\n    const ids = await getCategories(iModel, viewport, filteredProvider);\n    const enabled: string[] = [];\n    const disabled: string[] = [];\n    for (const id of ids) {\n      if (viewport.view.viewsCategory(id)) {\n        enabled.push(id);\n      } else {\n        disabled.push(id);\n      }\n    }\n    // Disable enabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      iModel,\n      enabled,\n      false,\n      true\n    );\n    // Enable disabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      iModel,\n      disabled,\n      true,\n      true\n    );\n  }, [iModel, viewport, filteredProvider]);\n\n  return (\n    <>\n      {iModel && viewport &&\n        <>\n          <TreeHeaderComponent\n            searchOptions={searchOptions}\n            showAll={showAll}\n            hideAll={hideAll}\n            invert={invert}\n          />\n          <AutoSizer>\n            {({ width, height }) => (\n              <CategoryTree\n                {...props}\n                iModel={iModel}\n                width={width}\n                height={height}\n                filterInfo={{ filter: filterString, activeMatchIndex }}\n                onFilterApplied={onFilterApplied}\n              />\n            )}\n          </AutoSizer>\n        </>\n      }\n    </>\n  );\n}\n"]}

package/lib/esm/components/trees/IModelContentTree.d.ts

@@ -1,7 +1,4 @@
-import React from "react";
-import type { IModelConnection } from "@itwin/core-frontend";
-export interface IModelContentTreeProps extends Omit<React.AllHTMLAttributes<HTMLDivElement>, "children"> {
-    iModel: IModelConnection;
-}
+/// <reference types="react" />
+import type { IModelContentTreeProps } from "../../types";
 export declare const IModelContentTree: (props: IModelContentTreeProps) => JSX.Element;
 //# sourceMappingURL=IModelContentTree.d.ts.map

package/lib/esm/components/trees/IModelContentTree.js

@@ -2,21 +2,14 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import classNames from "classnames";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { usePresentationTreeNodeLoader } from "@itwin/presentation-components";
 import { ControlledTree, SelectionMode, useTreeEventsHandler, useTreeModel } from "@itwin/components-react";
 import IMODEL_CONTENT_RULESET from "../rulesets/IModelContent.json";
-import { useResizeObserver } from "@itwin/core-react";
+import { AutoSizer } from "../utils/AutoSizer";
+import classNames from "classnames";
 export const IModelContentTree = (props) => {
     const { iModel, className, ...divProps } = props;
-    const [height, setHeight] = useState(0);
-    const [width, setWidth] = useState(0);
-    const handleResize = useCallback((w, h) => {
-        setHeight(h);
-        setWidth(w);
-    }, []);
-    const ref = useResizeObserver(handleResize);
     const { nodeLoader } = usePresentationTreeNodeLoader({
         imodel: iModel,
         ruleset: IMODEL_CONTENT_RULESET,
@@ -24,7 +17,8 @@ export const IModelContentTree = (props) => {
         appendChildrenCountForGroupingNodes: true,
     });
     const eventHandler = useTreeEventsHandler(useMemo(() => ({ nodeLoader, modelSource: nodeLoader.modelSource, collapsedChildrenDisposalEnabled: true }), [nodeLoader]));
-    return (React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" }, ...divProps, className: classNames("imodel-content-tree", className) },
-        React.createElement(ControlledTree, { width: width, height: height, nodeLoader: nodeLoader, selectionMode: SelectionMode.None, eventsHandler: eventHandler, model: useTreeModel(nodeLoader.modelSource), iconsEnabled: true })));
+    const treeModel = useTreeModel(nodeLoader.modelSource);
+    return (React.createElement(AutoSizer, null, ({ width, height }) => (React.createElement("div", { ...divProps, className: classNames("imodel-content-tree", className) },
+        React.createElement(ControlledTree, { width: width, height: height, nodeLoader: nodeLoader, selectionMode: SelectionMode.None, eventsHandler: eventHandler, model: treeModel, iconsEnabled: true })))));
 };
 //# sourceMappingURL=IModelContentTree.js.map

package/lib/esm/components/trees/IModelContentTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"IModelContentTree.js","sourceRoot":"","sources":["../../../../src/components/trees/IModelContentTree.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5G,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAMtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,iBAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,MAAM,EAAE,UAAU,EAAE,GAAG,6BAA6B,CAAC;QACnD,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,sBAAiC;QAC1C,UAAU,EAAE,EAAE;QACd,mCAAmC,EAAE,IAAI;KAC1C,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,gCAAgC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAEtK,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAM,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC;QAC5H,oBAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,CAAC,IAAI,EACjC,aAAa,EAAE,YAAY,EAC3B,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,EAC3C,YAAY,EAAE,IAAI,GAClB,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport classNames from \"classnames\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport { usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { ControlledTree, SelectionMode, useTreeEventsHandler, useTreeModel } from \"@itwin/components-react\";\nimport IMODEL_CONTENT_RULESET from \"../rulesets/IModelContent.json\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface IModelContentTreeProps extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"children\"> {\n  iModel: IModelConnection;\n}\n\nexport const IModelContentTree = (props: IModelContentTreeProps) => {\n  const { iModel, className, ...divProps } = props;\n\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: iModel,\n    ruleset: IMODEL_CONTENT_RULESET as Ruleset,\n    pagingSize: 20,\n    appendChildrenCountForGroupingNodes: true,\n  });\n  const eventHandler = useTreeEventsHandler(useMemo(() => ({ nodeLoader, modelSource: nodeLoader.modelSource, collapsedChildrenDisposalEnabled: true }), [nodeLoader]));\n\n  return (\n    <div ref={ref} style={{ width: \"100%\", height: \"100%\" }} {...divProps} className={classNames(\"imodel-content-tree\", className)}>\n      <ControlledTree\n        width={width}\n        height={height}\n        nodeLoader={nodeLoader}\n        selectionMode={SelectionMode.None}\n        eventsHandler={eventHandler}\n        model={useTreeModel(nodeLoader.modelSource)}\n        iconsEnabled={true}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"IModelContentTree.js","sourceRoot":"","sources":["../../../../src/components/trees/IModelContentTree.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5G,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,GAAG,6BAA6B,CAAC;QACnD,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,sBAAiC;QAC1C,UAAU,EAAE,EAAE;QACd,mCAAmC,EAAE,IAAI;KAC1C,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,gCAAgC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAEtK,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAEvD,OAAO,CACL,oBAAC,SAAS,QACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,gCAAS,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC;QACxE,oBAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,CAAC,IAAI,EACjC,aAAa,EAAE,YAAY,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,IAAI,GAClB,CACE,CACP,CACS,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useMemo } from \"react\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport { usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { ControlledTree, SelectionMode, useTreeEventsHandler, useTreeModel } from \"@itwin/components-react\";\nimport IMODEL_CONTENT_RULESET from \"../rulesets/IModelContent.json\";\nimport { AutoSizer } from \"../utils/AutoSizer\";\nimport classNames from \"classnames\";\nimport type { IModelContentTreeProps } from \"../../types\";\n\nexport const IModelContentTree = (props: IModelContentTreeProps) => {\n  const { iModel, className, ...divProps } = props;\n\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: iModel,\n    ruleset: IMODEL_CONTENT_RULESET as Ruleset,\n    pagingSize: 20,\n    appendChildrenCountForGroupingNodes: true,\n  });\n  const eventHandler = useTreeEventsHandler(useMemo(() => ({ nodeLoader, modelSource: nodeLoader.modelSource, collapsedChildrenDisposalEnabled: true }), [nodeLoader]));\n\n  const treeModel = useTreeModel(nodeLoader.modelSource);\n\n  return (\n    <AutoSizer>\n      {({ width, height }) => (\n        <div {...divProps} className={classNames(\"imodel-content-tree\", className)}>\n          <ControlledTree\n            width={width}\n            height={height}\n            nodeLoader={nodeLoader}\n            selectionMode={SelectionMode.None}\n            eventsHandler={eventHandler}\n            model={treeModel}\n            iconsEnabled={true}\n          />\n        </div>\n      )}\n    </AutoSizer>\n  );\n};\n"]}

package/lib/esm/components/trees/ModelsTree.d.ts

@@ -1,11 +1,5 @@
 /// <reference types="react" />
-import type { IModelConnection, Viewport } from "@itwin/core-frontend";
 import "./ModelsTree.scss";
-export interface ModelTreeProps {
-    iModel: IModelConnection;
-    allViewports?: boolean;
-    activeView?: Viewport;
-    enableElementsClassGrouping?: boolean;
-}
-export declare const ModelsTreeComponent: (props: ModelTreeProps) => JSX.Element | null;
+import type { ModelTreeProps } from "../../types";
+export declare const ModelsTreeComponent: (props: ModelTreeProps) => JSX.Element;
 //# sourceMappingURL=ModelsTree.d.ts.map