@itwin/tree-widget-react 0.2.1 → 0.4.1

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

@@ -29,9 +29,8 @@ const appui_react_1 = require("@itwin/appui-react");
 const TreeFilteringState_1 = require("../TreeFilteringState");
 require("./ModelsTree.scss");
 const TreeHeader_1 = require("../header/TreeHeader");
-const core_react_1 = require("@itwin/core-react");
+const AutoSizer_1 = require("../utils/AutoSizer");
 const ModelsTreeComponent = (props) => {
-    const { iModel } = props;
     const [is2dToggleActive, setIs2dToggleActive] = react_1.useState(false);
     const [is3dToggleActive, setIs3dToggleActive] = react_1.useState(false);
     const [icon2dToggle, setIcon2dToggle] = react_1.useState("icon-visibility");
@@ -39,23 +38,18 @@ const ModelsTreeComponent = (props) => {
     const [available2dModels, setAvailable2dModels] = react_1.useState([]);
     const [available3dModels, setAvailable3dModels] = react_1.useState([]);
     const [availableModels, setAvailableModels] = react_1.useState([]);
+    const iModel = appui_react_1.useActiveIModelConnection();
     const viewport = appui_react_1.useActiveViewport();
     const { searchOptions, filterString, activeMatchIndex, onFilterApplied } = TreeFilteringState_1.useTreeFilteringState();
-    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);
     const queryModels = react_1.useCallback(async (vp) => {
+        var _a;
         if (vp === undefined)
             return [];
         const queryParams = {
             from: "BisCore.GeometricModel3d",
             wantPrivate: false,
         };
-        const modelProps = await iModel.models.queryProps(queryParams);
+        const modelProps = (_a = await (iModel === null || iModel === void 0 ? void 0 : iModel.models.queryProps(queryParams))) !== null && _a !== void 0 ? _a : [];
         return modelProps
             .map(({ id, isPlanProjection }) => ({ id, isPlanProjection }))
             .filter(({ id }) => id);
@@ -124,12 +118,10 @@ const ModelsTreeComponent = (props) => {
         }
         viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
     }, [is3dToggleActive, viewport, available3dModels]);
-    return (!(iModel && viewport) ? null : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TreeHeader_1.TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert, toggle2D: viewToggle2D, toggle2DIcon: icon2dToggle, toggle3D: viewToggle3D, toggle3DIcon: icon3dToggle }),
-        react_1.default.createElement("div", { className: "tree-widget-models-tree-container" },
-            react_1.default.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (react_1.default.createElement(appui_react_1.ModelsTree, { ...props, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied, activeView: viewport, enableElementsClassGrouping: props.enableElementsClassGrouping
-                    ? appui_react_1.ClassGroupingOption.YesWithCounts
-                    : appui_react_1.ClassGroupingOption.No, width: width, height: height })))))));
+    return (react_1.default.createElement(react_1.default.Fragment, null, iModel && viewport &&
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TreeHeader_1.TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert, toggle2D: viewToggle2D, toggle2DIcon: icon2dToggle, toggle3D: viewToggle3D, toggle3DIcon: icon3dToggle }),
+            react_1.default.createElement(AutoSizer_1.AutoSizer, null, ({ width, height }) => (react_1.default.createElement(appui_react_1.ModelsTree, { ...props, iModel: iModel, activeView: viewport, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied }))))));
 };
 exports.ModelsTreeComponent = ModelsTreeComponent;
 //# sourceMappingURL=ModelsTree.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModelsTree.js","sourceRoot":"","sources":["../../../../src/components/trees/ModelsTree.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\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { ClassGroupingOption, ModelsTree, useActiveViewport } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./ModelsTree.scss\";\nimport type {\n  GeometricModel3dProps,\n  ModelQueryParams,\n} from \"@itwin/core-common\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface ModelTreeProps {\n  iModel: IModelConnection;\n  allViewports?: boolean;\n  activeView?: Viewport;\n  enableElementsClassGrouping?: boolean;\n}\n\ninterface TreeViewModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\nexport const ModelsTreeComponent = (props: ModelTreeProps) => {\n  const { iModel } = props;\n\n  const [is2dToggleActive, setIs2dToggleActive] = useState<boolean>(false);\n  const [is3dToggleActive, setIs3dToggleActive] = useState<boolean>(false);\n  const [icon2dToggle, setIcon2dToggle] = useState<string>(\"icon-visibility\");\n  const [icon3dToggle, setIcon3dToggle] = useState<string>(\"icon-visibility\");\n\n  const [available2dModels, setAvailable2dModels] = useState<string[]>([]);\n  const [available3dModels, setAvailable3dModels] = useState<string[]>([]);\n  const [availableModels, setAvailableModels] = useState<string[]>([]);\n\n  const viewport = useActiveViewport();\n\n  const { searchOptions, filterString, activeMatchIndex, onFilterApplied } =\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 queryModels = useCallback(async (\n    vp: Viewport | undefined\n  ): Promise<TreeViewModelInfo[]> => {\n    if (vp === undefined) return [];\n\n    const queryParams: ModelQueryParams = {\n      from: \"BisCore.GeometricModel3d\",\n      wantPrivate: false,\n    };\n    const modelProps = await iModel.models.queryProps(queryParams);\n    return modelProps\n      .map(({ id, isPlanProjection }: GeometricModel3dProps) => ({ id, isPlanProjection }))\n      .filter(({ id }) => id) as TreeViewModelInfo[];\n  }, [iModel]);\n\n  useEffect(() => {\n    queryModels(viewport)\n      .then((modelInfos: TreeViewModelInfo[]) => {\n        setAvailableModels(modelInfos.map(({ id }) => id));\n\n        const { models2d, models3d } = modelInfos.reduce((acc, { id, isPlanProjection }) => {\n          isPlanProjection ? acc.models2d.push(id) : acc.models3d.push(id);\n          return acc;\n        }, { models2d: [] as string[], models3d: [] as string[] });\n\n        setAvailable2dModels(models2d);\n        setAvailable3dModels(models3d);\n      })\n      .catch((_e) => {\n        setAvailableModels([]);\n      });\n  }, [queryModels, viewport]);\n\n  const invert = useCallback(async () => {\n    if (availableModels.length === 0) return;\n    const notViewedModels: string[] = [];\n    const models: string[] = [];\n    availableModels.forEach((id: string) => {\n      if (viewport?.viewsModel(id)) models.push(id);\n      else notViewedModels.push(id);\n    });\n    await viewport?.addViewedModels(notViewedModels);\n    viewport?.changeModelDisplay(models, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const hideAll = useCallback(() => {\n    viewport?.changeModelDisplay(availableModels, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const showAll = useCallback(async () => {\n    await viewport?.addViewedModels(availableModels);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const viewToggle2D = useCallback(async () => {\n    if (is2dToggleActive) {\n      viewport?.changeModelDisplay(available2dModels, false);\n      setIs2dToggleActive(false);\n      setIcon2dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available2dModels);\n      setIs2dToggleActive(true);\n      setIcon2dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is2dToggleActive, viewport, available2dModels]);\n\n  const viewToggle3D = useCallback(async () => {\n    if (is3dToggleActive) {\n      viewport?.changeModelDisplay(available3dModels, false);\n      setIs3dToggleActive(false);\n      setIcon3dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available3dModels);\n      setIs3dToggleActive(true);\n      setIcon3dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is3dToggleActive, viewport, available3dModels]);\n\n  return (!(iModel && viewport) ? null : (\n    <>\n      <TreeHeaderComponent\n        searchOptions={searchOptions}\n        showAll={showAll}\n        hideAll={hideAll}\n        invert={invert}\n        toggle2D={viewToggle2D}\n        toggle2DIcon={icon2dToggle}\n        toggle3D={viewToggle3D}\n        toggle3DIcon={icon3dToggle}\n      />\n      <div className=\"tree-widget-models-tree-container\">\n        <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n          {width && height && (\n            <ModelsTree\n              {...props}\n              filterInfo={{ filter: filterString, activeMatchIndex }}\n              onFilterApplied={onFilterApplied}\n              activeView={viewport}\n              enableElementsClassGrouping={\n                props.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              width={width}\n              height={height}\n            />\n          )}\n        </div>\n      </div>\n    </>\n  ));\n};\n"]}
+{"version":3,"file":"ModelsTree.js","sourceRoot":"","sources":["../../../../src/components/trees/ModelsTree.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\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport { ModelsTree, useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./ModelsTree.scss\";\nimport type {\n  GeometricModel3dProps,\n  ModelQueryParams,\n} from \"@itwin/core-common\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport type { ModelTreeProps } from \"../../types\";\nimport { AutoSizer } from \"../utils/AutoSizer\";\n\ninterface TreeViewModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\nexport const ModelsTreeComponent = (props: ModelTreeProps) => {\n  const [is2dToggleActive, setIs2dToggleActive] = useState<boolean>(false);\n  const [is3dToggleActive, setIs3dToggleActive] = useState<boolean>(false);\n  const [icon2dToggle, setIcon2dToggle] = useState<string>(\"icon-visibility\");\n  const [icon3dToggle, setIcon3dToggle] = useState<string>(\"icon-visibility\");\n\n  const [available2dModels, setAvailable2dModels] = useState<string[]>([]);\n  const [available3dModels, setAvailable3dModels] = useState<string[]>([]);\n  const [availableModels, setAvailableModels] = useState<string[]>([]);\n\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  const { searchOptions, filterString, activeMatchIndex, onFilterApplied } =\n    useTreeFilteringState();\n\n  const queryModels = useCallback(async (\n    vp: Viewport | undefined\n  ): Promise<TreeViewModelInfo[]> => {\n    if (vp === undefined) return [];\n\n    const queryParams: ModelQueryParams = {\n      from: \"BisCore.GeometricModel3d\",\n      wantPrivate: false,\n    };\n    const modelProps = await iModel?.models.queryProps(queryParams) ?? [];\n    return modelProps\n      .map(({ id, isPlanProjection }: GeometricModel3dProps) => ({ id, isPlanProjection }))\n      .filter(({ id }) => id) as TreeViewModelInfo[];\n  }, [iModel]);\n\n  useEffect(() => {\n    queryModels(viewport)\n      .then((modelInfos: TreeViewModelInfo[]) => {\n        setAvailableModels(modelInfos.map(({ id }) => id));\n\n        const { models2d, models3d } = modelInfos.reduce((acc, { id, isPlanProjection }) => {\n          isPlanProjection ? acc.models2d.push(id) : acc.models3d.push(id);\n          return acc;\n        }, { models2d: [] as string[], models3d: [] as string[] });\n\n        setAvailable2dModels(models2d);\n        setAvailable3dModels(models3d);\n      })\n      .catch((_e) => {\n        setAvailableModels([]);\n      });\n  }, [queryModels, viewport]);\n\n  const invert = useCallback(async () => {\n    if (availableModels.length === 0) return;\n    const notViewedModels: string[] = [];\n    const models: string[] = [];\n    availableModels.forEach((id: string) => {\n      if (viewport?.viewsModel(id)) models.push(id);\n      else notViewedModels.push(id);\n    });\n    await viewport?.addViewedModels(notViewedModels);\n    viewport?.changeModelDisplay(models, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const hideAll = useCallback(() => {\n    viewport?.changeModelDisplay(availableModels, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const showAll = useCallback(async () => {\n    await viewport?.addViewedModels(availableModels);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const viewToggle2D = useCallback(async () => {\n    if (is2dToggleActive) {\n      viewport?.changeModelDisplay(available2dModels, false);\n      setIs2dToggleActive(false);\n      setIcon2dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available2dModels);\n      setIs2dToggleActive(true);\n      setIcon2dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is2dToggleActive, viewport, available2dModels]);\n\n  const viewToggle3D = useCallback(async () => {\n    if (is3dToggleActive) {\n      viewport?.changeModelDisplay(available3dModels, false);\n      setIs3dToggleActive(false);\n      setIcon3dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available3dModels);\n      setIs3dToggleActive(true);\n      setIcon3dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is3dToggleActive, viewport, available3dModels]);\n\n  return (\n    <>\n      {iModel && viewport &&\n        <>\n          <TreeHeaderComponent\n            searchOptions={searchOptions}\n            showAll={showAll}\n            hideAll={hideAll}\n            invert={invert}\n            toggle2D={viewToggle2D}\n            toggle2DIcon={icon2dToggle}\n            toggle3D={viewToggle3D}\n            toggle3DIcon={icon3dToggle}\n          />\n          <AutoSizer>\n            {({ width, height }) => (\n              <ModelsTree\n                {...props}\n                iModel={iModel}\n                activeView={viewport}\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/cjs/components/trees/SpatialTree.d.ts

@@ -1,3 +1,4 @@
-import type { SpatialContainmentTreeProps } from "@itwin/appui-react";
-export declare const SpatialTreeComponent: (props: Omit<SpatialContainmentTreeProps, "width" | "height">) => JSX.Element;
+/// <reference types="react" />
+import type { SpatialTreeProps } from "../../types";
+export declare const SpatialTreeComponent: (props: SpatialTreeProps) => JSX.Element;
 //# sourceMappingURL=SpatialTree.d.ts.map

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

@@ -1,37 +1,20 @@
 "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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpatialTreeComponent = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
 const appui_react_1 = require("@itwin/appui-react");
-const core_react_1 = require("@itwin/core-react");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
+const AutoSizer_1 = require("../utils/AutoSizer");
 const SpatialTreeComponent = (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 && (react_1.default.createElement(appui_react_1.SpatialContainmentTree, { ...props, width: width, height: height }))));
+    const iModel = appui_react_1.useActiveIModelConnection();
+    return (react_1.default.createElement(react_1.default.Fragment, null, iModel &&
+        react_1.default.createElement(AutoSizer_1.AutoSizer, null, ({ width, height }) => react_1.default.createElement(appui_react_1.SpatialContainmentTree, { ...props, width: width, height: height, iModel: iModel }))));
 };
 exports.SpatialTreeComponent = SpatialTreeComponent;
 //# sourceMappingURL=SpatialTree.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SpatialTree.js","sourceRoot":"","sources":["../../../../src/components/trees/SpatialTree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,oDAA4D;AAC5D,kDAAsD;AACtD,+CAAqD;AAE9C,MAAM,oBAAoB,GAAG,CAClC,KAA4D,EAC5D,EAAE;IACF,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,CAClB,8BAAC,oCAAsB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CACpE,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,oBAAoB,wBAkB/B","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 { SpatialContainmentTreeProps } from \"@itwin/appui-react\";\nimport { SpatialContainmentTree } from \"@itwin/appui-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport React, { useCallback, useState } from \"react\";\n\nexport const SpatialTreeComponent = (\n  props: Omit<SpatialContainmentTreeProps, \"width\" | \"height\">\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  return (\n    <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n      {width && height && (\n        <SpatialContainmentTree {...props} width={width} height={height} />\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"SpatialTree.js","sourceRoot":"","sources":["../../../../src/components/trees/SpatialTree.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,oDAAuF;AACvF,kDAA0B;AAE1B,kDAA+C;AAExC,MAAM,oBAAoB,GAAG,CAClC,KAAuB,EAAE,EAAE;IAC3B,MAAM,MAAM,GAAG,uCAAyB,EAAE,CAAC;IAE3C,OAAO,CACL,8DACG,MAAM;QACL,8BAAC,qBAAS,QACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,8BAAC,oCAAsB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CACjG,CAEb,CACJ,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,oBAAoB,wBAa/B","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 { SpatialContainmentTree, useActiveIModelConnection } from \"@itwin/appui-react\";\nimport React from \"react\";\nimport type { SpatialTreeProps } from \"../../types\";\nimport { AutoSizer } from \"../utils/AutoSizer\";\n\nexport const SpatialTreeComponent = (\n  props: SpatialTreeProps) => {\n  const iModel = useActiveIModelConnection();\n\n  return (\n    <>\n      {iModel &&\n        <AutoSizer>\n          {({ width, height }) => <SpatialContainmentTree {...props} width={width} height={height} iModel={iModel} />}\n        </AutoSizer>\n      }\n    </>\n  );\n};\n"]}

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

@@ -1,6 +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,4 +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.
+ *--------------------------------------------------------------------------------------------*/
 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]; } });
@@ -10,13 +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 });
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
 __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;AAC/F,+CAA6B;AAC7B,mDAAiC;AACjC,gDAA8B;AAC9B,wDAAsC;AACtC,oDAAkC","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*--------------------------------------------------------------------------------------------*/\nexport * from \"./ModelsTree\";\nexport * from \"./CategoriesTree\";\nexport * from \"./SpatialTree\";\nexport * from \"./ClassificationsTree\";\nexport * from \"./TreeWithRuleset\";\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,26 @@
+/// <reference types="react" />
+import type { StagePanelLocation, StagePanelSection } from "@itwin/appui-abstract";
+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 {
+    defaultPanelLocation?: StagePanelLocation;
+    defaultPanelSection?: StagePanelSection;
+    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 { StagePanelLocation, StagePanelSection } from \"@itwin/appui-abstract\";\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  defaultPanelLocation?: StagePanelLocation;\n  defaultPanelSection?: StagePanelSection;\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/TreeWidgetComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./TreeWidgetComponent.scss";
 import type { SelectableContentDefinition } from "@itwin/components-react";
 interface TreeWidgetComponentProps {

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

@@ -1,20 +1,12 @@
-import type { AbstractWidgetProps, StagePanelSection, UiItemsProvider } from "@itwin/appui-abstract";
-import { StagePanelLocation } from "@itwin/appui-abstract";
-import type { TreeWidgetControlOptions } from "./TreeWidgetControl";
+import type { AbstractWidgetProps, UiItemsProvider } from "@itwin/appui-abstract";
+import { StagePanelSection } from "@itwin/appui-abstract";
+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,5 @@
-import { StagePanelLocation, StageUsage, } from "@itwin/appui-abstract";
+import { StagePanelSection, } 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,65 +7,67 @@ 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, _h, _j, _k, _l;
         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 = [
-                {
+        const preferredLocation = (_b = (_a = this._treeWidgetOptions) === null || _a === void 0 ? void 0 : _a.defaultPanelLocation) !== null && _b !== void 0 ? _b : StagePanelLocation.Right;
+        const preferredPanelSection = (_d = (_c = this._treeWidgetOptions) === null || _c === void 0 ? void 0 : _c.defaultPanelSection) !== null && _d !== void 0 ? _d : StagePanelSection.Start;
+        if (
+        // eslint-disable-next-line deprecation/deprecation
+        (!section && stageUsage === StageUsage.General && zoneLocation === AbstractZoneLocation.CenterRight) ||
+            (stageUsage === StageUsage.General && location === preferredLocation && section === preferredPanelSection
+                && UiFramework.uiVersion !== "1")) {
+            const trees = [];
+            if (!((_f = (_e = this._treeWidgetOptions) === null || _e === void 0 ? void 0 : _e.hideTrees) === null || _f === void 0 ? void 0 : _f.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 (!((_h = (_g = this._treeWidgetOptions) === null || _g === void 0 ? void 0 : _g.hideTrees) === null || _h === void 0 ? void 0 : _h.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 (!((_k = (_j = this._treeWidgetOptions) === null || _j === void 0 ? void 0 : _j.hideTrees) === null || _k === void 0 ? void 0 : _k.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 ((_l = this._treeWidgetOptions) === null || _l === void 0 ? void 0 : _l.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 }),
+                icon: "icon-hierarchy-tree",
             });
         }
         return widgets;

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  UiItemsProvider,\n} from \"@itwin/appui-abstract\";\nimport {\n  StagePanelSection,\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    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n    if (\n      // eslint-disable-next-line deprecation/deprecation\n      (!section && stageUsage === StageUsage.General && zoneLocation === AbstractZoneLocation.CenterRight) ||\n      (stageUsage === StageUsage.General && location === preferredLocation && section === preferredPanelSection\n         && 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        icon: \"icon-hierarchy-tree\",\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}

package/lib/esm/components/header/TreeHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SearchOptions } from "../TreeFilteringState";
 import "./TreeHeader.scss";
 export interface TreeHeaderComponentProps {