@itwin/tree-widget-react 0.2.0 → 0.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"IModelContentTree.js","sourceRoot":"","sources":["../../../../src/components/trees/IModelContentTree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAuC;AAEvC,4EAA+E;AAC/E,8DAA4G;AAC5G,wFAAoE;AACpE,kDAA+C;AAC/C,4DAAoC;AAG7B,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,uDAA6B,CAAC;QACnD,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,4BAAiC;QAC1C,UAAU,EAAE,EAAE;QACd,mCAAmC,EAAE,IAAI;KAC1C,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,uCAAoB,CAAC,eAAO,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,+BAAY,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAEvD,OAAO,CACL,8BAAC,qBAAS,QACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,0CAAS,QAAQ,EAAE,SAAS,EAAE,oBAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC;QACxE,8BAAC,iCAAc,IACb,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,gCAAa,CAAC,IAAI,EACjC,aAAa,EAAE,YAAY,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,IAAI,GAClB,CACE,CACP,CACS,CACb,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,iBAAiB,qBA8B5B","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/cjs/components/trees/ModelsTree.d.ts

@@ -1,10 +1,5 @@
-import type { IModelConnection, Viewport } from "@itwin/core-frontend";
+/// <reference types="react" />
 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

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/ModelsTree.scss

@@ -3,7 +3,7 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 
-@import "~@itwin/core-react/lib/esm/core-react/index";
+@import "~@itwin/core-react/lib/cjs/core-react/index";
 
 .tree-widget-models-tree-container {
   flex: 1;

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,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/IconButton.scss

@@ -2,8 +2,8 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/esm/core-react/index";
-@import "~@itwin/appui-layout-react/lib/esm/appui-layout-react/footer/_variables";
+@import "~@itwin/core-react/lib/cjs/core-react/index";
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/_variables";
 
 .tree-widget-icon-button {
   display: inline-block;

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/TreeWidgetComponent.scss

@@ -2,7 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/esm/core-react/index";
+@import "~@itwin/core-react/lib/cjs/core-react/index";
 
 .tree-widget-visibility-widget {
   padding: $uicore-s;

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 }),
             });
         }