@itwin/tree-widget-react 0.2.0 → 0.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../src/components/trees/CategoriesTree.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAQtD,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EACJ,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,iBAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACrC,OAAO,mBAAmB,CACxB,SAAS,CAAC,WAAW,EACrB,KAAK,CAAC,MAAM,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,gBAAgB,CACjB,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErC,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACrC,OAAO,mBAAmB,CACxB,SAAS,CAAC,WAAW,EACrB,KAAK,CAAC,MAAM,EACZ,KAAK,EACL,SAAS,EACT,IAAI,EACJ,gBAAgB,CACjB,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErC,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACpC,MAAM,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC;QAC5D,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,MAAM,GAAG,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC;QAC5E,MAAM,OAAO,GAAa,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAa,EAAE,CAAC;QAC9B,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE;YACpB,IAAI,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE;gBACrC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aAClB;iBAAM;gBACL,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aACnB;SACF;QACD,kBAAkB;QAClB,yBAAyB,CAAC,cAAc,CACtC,SAAS,CAAC,WAAW,EACrB,KAAK,CAAC,MAAM,EACZ,OAAO,EACP,KAAK,EACL,IAAI,CACL,CAAC;QACF,kBAAkB;QAClB,yBAAyB,CAAC,cAAc,CACtC,SAAS,CAAC,WAAW,EACrB,KAAK,CAAC,MAAM,EACZ,QAAQ,EACR,IAAI,EACJ,IAAI,CACL,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErC,OAAO,CACL;QACE,oBAAC,mBAAmB,IAClB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,GACd;QACF,6BAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IACpD,KAAK,IAAI,MAAM,IAAI,CAClB,oBAAC,YAAY,OACP,KAAK,EACT,UAAU,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,EACtD,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACH,CACG,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useCallback, useState } from \"react\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { CategoryTree, getCategories, toggleAllCategories } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./CategoriesTree.scss\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { CategoryVisibilityHandler } from \"@itwin/appui-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface CategoriesTreeComponentProps {\n  iModel: IModelConnection;\n  allViewports?: boolean;\n  activeView?: Viewport;\n}\n\nexport function CategoriesTreeComponent(props: CategoriesTreeComponentProps) {\n  const {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  } = useTreeFilteringState();\n\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  const showAll = useCallback(async () => {\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      props.iModel,\n      true,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [props.iModel, filteredProvider]);\n\n  const hideAll = useCallback(async () => {\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      props.iModel,\n      false,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [props.iModel, filteredProvider]);\n\n  const invert = useCallback(async () => {\n    const activeView = IModelApp.viewManager.getFirstOpenView();\n    if (!activeView) {\n      return;\n    }\n\n    const ids = await getCategories(props.iModel, activeView, filteredProvider);\n    const enabled: string[] = [];\n    const disabled: string[] = [];\n    for (const id of ids) {\n      if (activeView.view.viewsCategory(id)) {\n        enabled.push(id);\n      } else {\n        disabled.push(id);\n      }\n    }\n    // Disable enabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      props.iModel,\n      enabled,\n      false,\n      true\n    );\n    // Enable disabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      props.iModel,\n      disabled,\n      true,\n      true\n    );\n  }, [props.iModel, filteredProvider]);\n\n  return (\n    <>\n      <TreeHeaderComponent\n        searchOptions={searchOptions}\n        showAll={showAll}\n        hideAll={hideAll}\n        invert={invert}\n      />\n      <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n        {width && height && (\n          <CategoryTree\n            {...props}\n            filterInfo={{ filter: filterString, activeMatchIndex }}\n            onFilterApplied={onFilterApplied}\n            width={width}\n            height={height}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../src/components/trees/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useCallback } from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { CategoryTree, getCategories, toggleAllCategories, useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./CategoriesTree.scss\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { CategoryVisibilityHandler } from \"@itwin/appui-react\";\nimport type { CategoriesTreeProps } from \"../../types\";\nimport { AutoSizer } from \"../utils/AutoSizer\";\n\nexport function CategoriesTreeComponent(props: CategoriesTreeProps) {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  const {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  } = useTreeFilteringState();\n\n  const showAll = useCallback(async () => {\n    if (!iModel) return;\n\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      iModel,\n      true,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [iModel, filteredProvider]);\n\n  const hideAll = useCallback(async () => {\n    if (!iModel) return;\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      iModel,\n      false,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [iModel, filteredProvider]);\n\n  const invert = useCallback(async () => {\n    if (!iModel || !viewport) return;\n\n    const ids = await getCategories(iModel, viewport, filteredProvider);\n    const enabled: string[] = [];\n    const disabled: string[] = [];\n    for (const id of ids) {\n      if (viewport.view.viewsCategory(id)) {\n        enabled.push(id);\n      } else {\n        disabled.push(id);\n      }\n    }\n    // Disable enabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      iModel,\n      enabled,\n      false,\n      true\n    );\n    // Enable disabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      iModel,\n      disabled,\n      true,\n      true\n    );\n  }, [iModel, viewport, filteredProvider]);\n\n  return (\n    <>\n      {iModel && viewport &&\n        <>\n          <TreeHeaderComponent\n            searchOptions={searchOptions}\n            showAll={showAll}\n            hideAll={hideAll}\n            invert={invert}\n          />\n          <AutoSizer>\n            {({ width, height }) => (\n              <CategoryTree\n                {...props}\n                iModel={iModel}\n                width={width}\n                height={height}\n                filterInfo={{ filter: filterString, activeMatchIndex }}\n                onFilterApplied={onFilterApplied}\n              />\n            )}\n          </AutoSizer>\n        </>\n      }\n    </>\n  );\n}\n"]}

package/lib/esm/components/trees/CategoriesTree.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-category-tree-search-bar {
   margin-bottom: $uicore-s;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { IModelContentTreeProps } from "../../types";
+export declare const IModelContentTree: (props: IModelContentTreeProps) => JSX.Element;
+//# sourceMappingURL=IModelContentTree.d.ts.map

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

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

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

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

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

@@ -1,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/esm/components/trees/ModelsTree.js

@@ -3,13 +3,12 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import React, { useCallback, useEffect, useState } from "react";
-import { ClassGroupingOption, ModelsTree, useActiveViewport } from "@itwin/appui-react";
+import { ModelsTree, useActiveIModelConnection, useActiveViewport } from "@itwin/appui-react";
 import { useTreeFilteringState } from "../TreeFilteringState";
 import "./ModelsTree.scss";
 import { TreeHeaderComponent } from "../header/TreeHeader";
-import { useResizeObserver } from "@itwin/core-react";
+import { AutoSizer } from "../utils/AutoSizer";
 export const ModelsTreeComponent = (props) => {
-    const { iModel } = props;
     const [is2dToggleActive, setIs2dToggleActive] = useState(false);
     const [is3dToggleActive, setIs3dToggleActive] = useState(false);
     const [icon2dToggle, setIcon2dToggle] = useState("icon-visibility");
@@ -17,23 +16,18 @@ export const ModelsTreeComponent = (props) => {
     const [available2dModels, setAvailable2dModels] = useState([]);
     const [available3dModels, setAvailable3dModels] = useState([]);
     const [availableModels, setAvailableModels] = useState([]);
+    const iModel = useActiveIModelConnection();
     const viewport = useActiveViewport();
     const { searchOptions, filterString, activeMatchIndex, onFilterApplied } = useTreeFilteringState();
-    const [height, setHeight] = useState(0);
-    const [width, setWidth] = useState(0);
-    const handleResize = useCallback((w, h) => {
-        setHeight(h);
-        setWidth(w);
-    }, []);
-    const ref = useResizeObserver(handleResize);
     const queryModels = 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);
@@ -102,11 +96,9 @@ export const ModelsTreeComponent = (props) => {
         }
         viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
     }, [is3dToggleActive, viewport, available3dModels]);
-    return (!(iModel && viewport) ? null : (React.createElement(React.Fragment, null,
-        React.createElement(TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert, toggle2D: viewToggle2D, toggle2DIcon: icon2dToggle, toggle3D: viewToggle3D, toggle3DIcon: icon3dToggle }),
-        React.createElement("div", { className: "tree-widget-models-tree-container" },
-            React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (React.createElement(ModelsTree, { ...props, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied, activeView: viewport, enableElementsClassGrouping: props.enableElementsClassGrouping
-                    ? ClassGroupingOption.YesWithCounts
-                    : ClassGroupingOption.No, width: width, height: height })))))));
+    return (React.createElement(React.Fragment, null, iModel && viewport &&
+        React.createElement(React.Fragment, null,
+            React.createElement(TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert, toggle2D: viewToggle2D, toggle2DIcon: icon2dToggle, toggle3D: viewToggle3D, toggle3DIcon: icon3dToggle }),
+            React.createElement(AutoSizer, null, ({ width, height }) => (React.createElement(ModelsTree, { ...props, iModel: iModel, activeView: viewport, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied }))))));
 };
 //# sourceMappingURL=ModelsTree.js.map

package/lib/esm/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/esm/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/esm/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/esm/components/trees/SpatialTree.js

@@ -1,14 +1,13 @@
-import { SpatialContainmentTree } from "@itwin/appui-react";
-import { useResizeObserver } from "@itwin/core-react";
-import React, { useCallback, useState } from "react";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { SpatialContainmentTree, useActiveIModelConnection } from "@itwin/appui-react";
+import React from "react";
+import { AutoSizer } from "../utils/AutoSizer";
 export const SpatialTreeComponent = (props) => {
-    const [height, setHeight] = useState(0);
-    const [width, setWidth] = useState(0);
-    const handleResize = useCallback((w, h) => {
-        setHeight(h);
-        setWidth(w);
-    }, []);
-    const ref = useResizeObserver(handleResize);
-    return (React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (React.createElement(SpatialContainmentTree, { ...props, width: width, height: height }))));
+    const iModel = useActiveIModelConnection();
+    return (React.createElement(React.Fragment, null, iModel &&
+        React.createElement(AutoSizer, null, ({ width, height }) => React.createElement(SpatialContainmentTree, { ...props, width: width, height: height, iModel: iModel }))));
 };
 //# sourceMappingURL=SpatialTree.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SpatialTree.js","sourceRoot":"","sources":["../../../../src/components/trees/SpatialTree.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAA4D,EAC5D,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,iBAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IACpD,KAAK,IAAI,MAAM,IAAI,CAClB,oBAAC,sBAAsB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CACpE,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport 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,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAAuB,EAAE,EAAE;IAC3B,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAE3C,OAAO,CACL,0CACG,MAAM;QACL,oBAAC,SAAS,QACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,oBAAC,sBAAsB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CACjG,CAEb,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport { 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/esm/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/esm/components/trees/index.js

@@ -1,10 +1,9 @@
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 export * from "./ModelsTree";
 export * from "./CategoriesTree";
 export * from "./SpatialTree";
-export * from "./ClassificationsTree";
-export * from "./TreeWithRuleset";
+export * from "./IModelContentTree";
 //# sourceMappingURL=index.js.map

package/lib/esm/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,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\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,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nexport * from \"./ModelsTree\";\nexport * from \"./CategoriesTree\";\nexport * from \"./SpatialTree\";\nexport * from \"./IModelContentTree\";\n"]}

package/lib/esm/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/esm/components/utils/AutoSizer.js

@@ -0,0 +1,13 @@
+import React, { useCallback, useState } from "react";
+import { useResizeObserver } from "@itwin/core-react";
+export const AutoSizer = (props) => {
+    const [height, setHeight] = useState(0);
+    const [width, setWidth] = useState(0);
+    const handleResize = useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = useResizeObserver(handleResize);
+    return (React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (props.children({ width, height }))));
+};
+//# sourceMappingURL=AutoSizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSizer.js","sourceRoot":"","sources":["../../../../src/components/utils/AutoSizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAWtD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,iBAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,OAAO,CACL,6BAAK,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","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/esm/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/esm/tree-widget-react.js

@@ -1,9 +1,9 @@
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
+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/esm/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,cAAc,cAAc,CAAC;AAC7B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wCAAwC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\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,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wCAAwC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\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/esm/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/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/tree-widget-react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Tree Widget React",
   "keywords": [
     "Bentley",
@@ -62,7 +62,6 @@
     "@itwin/core-frontend": "^3.0.0",
     "@itwin/core-react": "^3.0.0",
     "@itwin/presentation-components": "^3.0.0",
-    "@itwin/presentation-frontend": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/lib/cjs/components/TreeWidgetControl.d.ts

@@ -1,26 +0,0 @@
-import type { ConfigurableCreateInfo } from "@itwin/appui-react";
-import { WidgetControl } from "@itwin/appui-react";
-import React from "react";
-import type { IModelConnection, Viewport } from "@itwin/core-frontend";
-import type { SelectableContentDefinition } from "@itwin/components-react";
-export interface TreeWidgetControlOptions {
-    iModelConnection: IModelConnection;
-    activeView?: Viewport;
-    enableElementsClassGrouping?: boolean;
-    allViewports?: boolean;
-    additionalTrees?: SelectableContentDefinition[];
-    additionalProps?: {
-        modelsTree?: {};
-        categoriesTree?: {};
-        spatialTree?: {};
-    };
-    treeReplacements?: {
-        modelsTree?: () => React.ReactNode;
-        categoriesTree?: () => React.ReactNode;
-        spatialTree?: () => React.ReactNode;
-    };
-}
-export declare class TreeWidgetControl extends WidgetControl {
-    constructor(info: ConfigurableCreateInfo, options: TreeWidgetControlOptions);
-}
-//# sourceMappingURL=TreeWidgetControl.d.ts.map

package/lib/cjs/components/TreeWidgetControl.js

@@ -1,66 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeWidgetControl = void 0;
-const appui_react_1 = require("@itwin/appui-react");
-const react_1 = __importDefault(require("react"));
-const CategoriesTree_1 = require("./trees/CategoriesTree");
-const ModelsTree_1 = require("./trees/ModelsTree");
-const SpatialTree_1 = require("./trees/SpatialTree");
-const TreeWidgetComponent_1 = require("./TreeWidgetComponent");
-const TreeWidget_1 = require("../TreeWidget");
-class TreeWidgetControl extends appui_react_1.WidgetControl {
-    constructor(info, options) {
-        var _a, _b, _c, _d, _e, _f;
-        super(info, options);
-        const { iModelConnection: imodel, activeView } = options;
-        const modelsTreeProps = (_a = options.additionalProps) === null || _a === void 0 ? void 0 : _a.modelsTree;
-        const categoriesTreeProps = (_b = options.additionalProps) === null || _b === void 0 ? void 0 : _b.categoriesTree;
-        const spatialTreeProps = (_c = options.additionalProps) === null || _c === void 0 ? void 0 : _c.spatialTree;
-        const enableElementsClassGrouping = options.enableElementsClassGrouping;
-        const allViewPorts = options.allViewports;
-        const additionalTrees = options.additionalTrees;
-        const modelsTreeReplacement = (_d = options.treeReplacements) === null || _d === void 0 ? void 0 : _d.modelsTree;
-        const categoriesTreeReplacement = (_e = options.treeReplacements) === null || _e === void 0 ? void 0 : _e.categoriesTree;
-        const spatialTreeReplacement = (_f = options.treeReplacements) === null || _f === void 0 ? void 0 : _f.spatialTree;
-        const modelsTreeComponent = (react_1.default.createElement(ModelsTree_1.ModelsTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, enableElementsClassGrouping: enableElementsClassGrouping, ...modelsTreeProps }));
-        const categoriesTreeComponent = (react_1.default.createElement(CategoriesTree_1.CategoriesTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, ...categoriesTreeProps }));
-        const spatialContainmentComponent = (react_1.default.createElement(SpatialTree_1.SpatialTreeComponent, { iModel: imodel, enableElementsClassGrouping: enableElementsClassGrouping
-                ? appui_react_1.ClassGroupingOption.Yes
-                : appui_react_1.ClassGroupingOption.No, ...spatialTreeProps }));
-        const trees = [
-            {
-                label: TreeWidget_1.TreeWidget.translate("modeltree"),
-                id: "model-tree",
-                render: modelsTreeReplacement
-                    ? modelsTreeReplacement
-                    : () => modelsTreeComponent,
-            },
-            {
-                label: TreeWidget_1.TreeWidget.translate("categories"),
-                id: "categories-tree",
-                render: categoriesTreeReplacement
-                    ? categoriesTreeReplacement
-                    : () => categoriesTreeComponent,
-            },
-            {
-                label: TreeWidget_1.TreeWidget.translate("containment"),
-                id: "spatial-containment-tree",
-                render: spatialTreeReplacement
-                    ? spatialTreeReplacement
-                    : () => spatialContainmentComponent,
-            },
-        ];
-        if (additionalTrees)
-            trees.push(...additionalTrees);
-        this.reactNode = react_1.default.createElement(TreeWidgetComponent_1.TreeWidgetComponent, { trees: trees });
-    }
-}
-exports.TreeWidgetControl = TreeWidgetControl;
-//# sourceMappingURL=TreeWidgetControl.js.map

package/lib/cjs/components/TreeWidgetControl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TreeWidgetControl.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetControl.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;AAG/F,oDAG4B;AAC5B,kDAA0B;AAC1B,2DAAiE;AACjE,mDAAyD;AACzD,qDAA2D;AAE3D,+DAA4D;AAE5D,8CAA2C;AAoB3C,MAAa,iBAAkB,SAAQ,2BAAa;IAClD,YAAY,IAA4B,EAAE,OAAiC;;QACzE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAErB,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;QACzD,MAAM,eAAe,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,UAAU,CAAC;QAC5D,MAAM,mBAAmB,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,cAAc,CAAC;QACpE,MAAM,gBAAgB,GAAG,MAAA,OAAO,CAAC,eAAe,0CAAE,WAAW,CAAC;QAC9D,MAAM,2BAA2B,GAAG,OAAO,CAAC,2BAA2B,CAAC;QACxE,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QAC1C,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC;QAChD,MAAM,qBAAqB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,UAAU,CAAC;QACnE,MAAM,yBAAyB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,cAAc,CAAC;QAC3E,MAAM,sBAAsB,GAAG,MAAA,OAAO,CAAC,gBAAgB,0CAAE,WAAW,CAAC;QAErE,MAAM,mBAAmB,GAAG,CAC1B,8BAAC,gCAAmB,IAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,2BAA2B,EAAE,2BAA2B,KACpD,eAAe,GACnB,CACH,CAAC;QAEF,MAAM,uBAAuB,GAAG,CAC9B,8BAAC,wCAAuB,IACtB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,KAClB,mBAAmB,GACvB,CACH,CAAC;QAEF,MAAM,2BAA2B,GAAG,CAClC,8BAAC,kCAAoB,IACnB,MAAM,EAAE,MAAM,EACd,2BAA2B,EACzB,2BAA2B;gBACzB,CAAC,CAAC,iCAAmB,CAAC,GAAG;gBACzB,CAAC,CAAC,iCAAmB,CAAC,EAAE,KAExB,gBAAgB,GACpB,CACH,CAAC;QAEF,MAAM,KAAK,GAAkC;YAC3C;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,WAAW,CAAC;gBACxC,EAAE,EAAE,YAAY;gBAChB,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB;aAC9B;YACD;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,YAAY,CAAC;gBACzC,EAAE,EAAE,iBAAiB;gBACrB,MAAM,EAAE,yBAAyB;oBAC/B,CAAC,CAAC,yBAAyB;oBAC3B,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAuB;aAClC;YACD;gBACE,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,aAAa,CAAC;gBAC1C,EAAE,EAAE,0BAA0B;gBAC9B,MAAM,EAAE,sBAAsB;oBAC5B,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,GAAG,EAAE,CAAC,2BAA2B;aACtC;SACF,CAAC;QAEF,IAAI,eAAe;YAAE,KAAK,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,CAAC;QAEpD,IAAI,CAAC,SAAS,GAAG,8BAAC,yCAAmB,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IACzD,CAAC;CACF;AA1ED,8CA0EC","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 type { ConfigurableCreateInfo } from \"@itwin/appui-react\";\nimport {\n  ClassGroupingOption,\n  WidgetControl,\n} from \"@itwin/appui-react\";\nimport React from \"react\";\nimport { CategoriesTreeComponent } from \"./trees/CategoriesTree\";\nimport { ModelsTreeComponent } from \"./trees/ModelsTree\";\nimport { SpatialTreeComponent } from \"./trees/SpatialTree\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport type { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nexport interface TreeWidgetControlOptions {\n  iModelConnection: IModelConnection;\n  activeView?: Viewport;\n  enableElementsClassGrouping?: boolean;\n  allViewports?: boolean;\n  additionalTrees?: SelectableContentDefinition[];\n  additionalProps?: {\n    modelsTree?: {};\n    categoriesTree?: {};\n    spatialTree?: {};\n  };\n  treeReplacements?: {\n    modelsTree?: () => React.ReactNode;\n    categoriesTree?: () => React.ReactNode;\n    spatialTree?: () => React.ReactNode;\n  };\n}\n\nexport class TreeWidgetControl extends WidgetControl {\n  constructor(info: ConfigurableCreateInfo, options: TreeWidgetControlOptions) {\n    super(info, options);\n\n    const { iModelConnection: imodel, activeView } = options;\n    const modelsTreeProps = options.additionalProps?.modelsTree;\n    const categoriesTreeProps = options.additionalProps?.categoriesTree;\n    const spatialTreeProps = options.additionalProps?.spatialTree;\n    const enableElementsClassGrouping = options.enableElementsClassGrouping;\n    const allViewPorts = options.allViewports;\n    const additionalTrees = options.additionalTrees;\n    const modelsTreeReplacement = options.treeReplacements?.modelsTree;\n    const categoriesTreeReplacement = options.treeReplacements?.categoriesTree;\n    const spatialTreeReplacement = options.treeReplacements?.spatialTree;\n\n    const modelsTreeComponent = (\n      <ModelsTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        enableElementsClassGrouping={enableElementsClassGrouping}\n        {...modelsTreeProps}\n      />\n    );\n\n    const categoriesTreeComponent = (\n      <CategoriesTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        {...categoriesTreeProps}\n      />\n    );\n\n    const spatialContainmentComponent = (\n      <SpatialTreeComponent\n        iModel={imodel}\n        enableElementsClassGrouping={\n          enableElementsClassGrouping\n            ? ClassGroupingOption.Yes\n            : ClassGroupingOption.No\n        }\n        {...spatialTreeProps}\n      />\n    );\n\n    const trees: SelectableContentDefinition[] = [\n      {\n        label: TreeWidget.translate(\"modeltree\"),\n        id: \"model-tree\",\n        render: modelsTreeReplacement\n          ? modelsTreeReplacement\n          : () => modelsTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"categories\"),\n        id: \"categories-tree\",\n        render: categoriesTreeReplacement\n          ? categoriesTreeReplacement\n          : () => categoriesTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"containment\"),\n        id: \"spatial-containment-tree\",\n        render: spatialTreeReplacement\n          ? spatialTreeReplacement\n          : () => spatialContainmentComponent,\n      },\n    ];\n\n    if (additionalTrees) trees.push(...additionalTrees);\n\n    this.reactNode = <TreeWidgetComponent trees={trees} />;\n  }\n}\n"]}