@itwin/tree-widget-react 1.2.2 → 2.0.0

package/lib/cjs/components/trees/common/Utils.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.
+ *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerRenderers = exports.addTreeNodeItemCheckbox = exports.addCustomTreeNodeItemLabelRenderer = exports.combineTreeNodeItemCustomizations = void 0;
 const components_react_1 = require("@itwin/components-react");
@@ -32,10 +32,12 @@ function addTreeNodeItemCheckbox(item) {
 exports.addTreeNodeItemCheckbox = addTreeNodeItemCheckbox;
 /** @internal */
 function registerRenderers() {
-    const renderers = [{
+    const renderers = [
+        {
             name: TreeNodeRenderer_1.TREE_NODE_LABEL_RENDERER,
             renderer: new TreeNodeRenderer_1.TreeNodeLabelRenderer(),
-        }];
+        },
+    ];
     for (const { name, renderer } of renderers) {
         components_react_1.PropertyValueRendererManager.defaultManager.registerRenderer(name, renderer);
     }

package/lib/cjs/components/trees/common/Utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/Utils.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,8DAAuE;AACvE,kDAAkD;AAClD,yDAAqF;AAKrF,gBAAgB;AAChB,SAAgB,iCAAiC,CAAC,cAA4F;IAC5I,OAAO,CAAC,IAAsC,EAAE,IAAmB,EAAE,EAAE;QACrE,cAAc,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC;AACJ,CAAC;AAJD,8EAIC;AAED,gBAAgB;AAChB,SAAgB,kCAAkC,CAAC,IAAsC;IACvF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACf,OAAO;KACR;IAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,2CAAwB,EAAE,CAAC;AACpE,CAAC;AAND,gFAMC;AAED,gBAAgB;AAChB,SAAgB,uBAAuB,CAAC,IAAsC;IAC5E,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,aAAa,GAAG,0BAAa,CAAC,GAAG,CAAC;AACzC,CAAC;AAJD,0DAIC;AAED,gBAAgB;AAChB,SAAgB,iBAAiB;IAC/B,MAAM,SAAS,GAA8D,CAAC;YAC5E,IAAI,EAAE,2CAAwB;YAC9B,QAAQ,EAAG,IAAI,wCAAqB,EAAE;SACvC,CAAC,CAAC;IAEH,KAAK,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,SAAS,EAAE;QAC1C,+CAA4B,CAAC,cAAc,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KAC9E;IAED,OAAO,GAAG,EAAE;QACV,KAAK,MAAM,EAAE,IAAI,EAAE,IAAI,SAAS,EAAE;YAChC,+CAA4B,CAAC,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;SACtE;IACH,CAAC,CAAC;AACJ,CAAC;AAfD,8CAeC","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 { PropertyValueRendererManager } from \"@itwin/components-react\";\nimport { CheckBoxState } from \"@itwin/core-react\";\nimport { TREE_NODE_LABEL_RENDERER, TreeNodeLabelRenderer } from \"./TreeNodeRenderer\";\n\nimport type { DelayLoadedTreeNodeItem, IPropertyValueRenderer } from \"@itwin/components-react\";\nimport type { Node } from \"@itwin/presentation-common\";\n\n/** @internal */\nexport function combineTreeNodeItemCustomizations(customizations: Array<(item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => void>) {\n  return (item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => {\n    customizations.forEach((customize) => customize(item, node));\n  };\n}\n\n/** @internal */\nexport function addCustomTreeNodeItemLabelRenderer(item: Partial<DelayLoadedTreeNodeItem>) {\n  if (!item.label) {\n    return;\n  }\n\n  item.label.property.renderer = { name: TREE_NODE_LABEL_RENDERER };\n}\n\n/** @internal */\nexport function addTreeNodeItemCheckbox(item: Partial<DelayLoadedTreeNodeItem>) {\n  item.isCheckboxVisible = true;\n  item.isCheckboxDisabled = true;\n  item.checkBoxState = CheckBoxState.Off;\n}\n\n/** @internal */\nexport function registerRenderers() {\n  const renderers: Array<{ name: string, renderer: IPropertyValueRenderer }> = [{\n    name: TREE_NODE_LABEL_RENDERER,\n    renderer:  new TreeNodeLabelRenderer(),\n  }];\n\n  for (const { name, renderer } of renderers) {\n    PropertyValueRendererManager.defaultManager.registerRenderer(name, renderer);\n  }\n\n  return () => {\n    for (const { name } of renderers) {\n      PropertyValueRendererManager.defaultManager.unregisterRenderer(name);\n    }\n  };\n}\n"]}
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/Utils.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;AAEhG,8DAAuE;AACvE,kDAAkD;AAClD,yDAAqF;AAKrF,gBAAgB;AAChB,SAAgB,iCAAiC,CAAC,cAA4F;IAC5I,OAAO,CAAC,IAAsC,EAAE,IAAmB,EAAE,EAAE;QACrE,cAAc,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC;AACJ,CAAC;AAJD,8EAIC;AAED,gBAAgB;AAChB,SAAgB,kCAAkC,CAAC,IAAsC;IACvF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACf,OAAO;KACR;IAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,2CAAwB,EAAE,CAAC;AACpE,CAAC;AAND,gFAMC;AAED,gBAAgB;AAChB,SAAgB,uBAAuB,CAAC,IAAsC;IAC5E,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,aAAa,GAAG,0BAAa,CAAC,GAAG,CAAC;AACzC,CAAC;AAJD,0DAIC;AAED,gBAAgB;AAChB,SAAgB,iBAAiB;IAC/B,MAAM,SAAS,GAA8D;QAC3E;YACE,IAAI,EAAE,2CAAwB;YAC9B,QAAQ,EAAE,IAAI,wCAAqB,EAAE;SACtC;KACF,CAAC;IAEF,KAAK,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,SAAS,EAAE;QAC1C,+CAA4B,CAAC,cAAc,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KAC9E;IAED,OAAO,GAAG,EAAE;QACV,KAAK,MAAM,EAAE,IAAI,EAAE,IAAI,SAAS,EAAE;YAChC,+CAA4B,CAAC,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;SACtE;IACH,CAAC,CAAC;AACJ,CAAC;AAjBD,8CAiBC","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 { PropertyValueRendererManager } from \"@itwin/components-react\";\nimport { CheckBoxState } from \"@itwin/core-react\";\nimport { TREE_NODE_LABEL_RENDERER, TreeNodeLabelRenderer } from \"./TreeNodeRenderer\";\n\nimport type { DelayLoadedTreeNodeItem, IPropertyValueRenderer } from \"@itwin/components-react\";\nimport type { Node } from \"@itwin/presentation-common\";\n\n/** @internal */\nexport function combineTreeNodeItemCustomizations(customizations: Array<(item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => void>) {\n  return (item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => {\n    customizations.forEach((customize) => customize(item, node));\n  };\n}\n\n/** @internal */\nexport function addCustomTreeNodeItemLabelRenderer(item: Partial<DelayLoadedTreeNodeItem>) {\n  if (!item.label) {\n    return;\n  }\n\n  item.label.property.renderer = { name: TREE_NODE_LABEL_RENDERER };\n}\n\n/** @internal */\nexport function addTreeNodeItemCheckbox(item: Partial<DelayLoadedTreeNodeItem>) {\n  item.isCheckboxVisible = true;\n  item.isCheckboxDisabled = true;\n  item.checkBoxState = CheckBoxState.Off;\n}\n\n/** @internal */\nexport function registerRenderers() {\n  const renderers: Array<{ name: string; renderer: IPropertyValueRenderer }> = [\n    {\n      name: TREE_NODE_LABEL_RENDERER,\n      renderer: new TreeNodeLabelRenderer(),\n    },\n  ];\n\n  for (const { name, renderer } of renderers) {\n    PropertyValueRendererManager.defaultManager.registerRenderer(name, renderer);\n  }\n\n  return () => {\n    for (const { name } of renderers) {\n      PropertyValueRendererManager.defaultManager.unregisterRenderer(name);\n    }\n  };\n}\n"]}

package/lib/cjs/components/trees/external-sources-tree/ExternalSources.json

@@ -16,9 +16,7 @@
           "classes": [
             {
               "schemaName": "BisCore",
-              "classNames": [
-                "ExternalSource"
-              ],
+              "classNames": ["ExternalSource"],
               "arePolymorphic": false
             }
           ],

package/lib/cjs/components/trees/external-sources-tree/ExternalSourcesTree.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "../VisibilityTreeBase.scss";
 import type { Ruleset } from "@itwin/presentation-common";
-import type { BaseTreeProps } from "../common/Types";
+import type { BaseTreeProps, HierarchyLevelConfig } from "../common/Types";
 /**
  * Presentation rules used by ControlledCategoriesTree
  * @internal
@@ -11,10 +11,16 @@ export declare const RULESET_EXTERNAL_SOURCES: Ruleset;
  * Props for the [[ExternalSourcesTree]] component
  * @alpha
  */
-export type ExternalSourcesTreeProps = BaseTreeProps;
+export interface ExternalSourcesTreeProps extends BaseTreeProps {
+    /**
+     * Props for configuring hierarchy level.
+     * @beta
+     */
+    hierarchyLevelConfig?: HierarchyLevelConfig;
+}
 /**
  * Tree which displays a hierarchy of ExternalSources and their elements.
  * @alpha
  */
-export declare function ExternalSourcesTree(props: ExternalSourcesTreeProps): JSX.Element;
+export declare function ExternalSourcesTree(props: ExternalSourcesTreeProps): JSX.Element | null;
 //# sourceMappingURL=ExternalSourcesTree.d.ts.map

package/lib/cjs/components/trees/external-sources-tree/ExternalSourcesTree.js

@@ -26,9 +26,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExternalSourcesTree = exports.RULESET_EXTERNAL_SOURCES = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 require("../VisibilityTreeBase.scss");
 const components_react_1 = require("@itwin/components-react");
 const presentation_components_1 = require("@itwin/presentation-components");
@@ -46,17 +46,29 @@ const PAGING_SIZE = 20;
  * @alpha
  */
 function ExternalSourcesTree(props) {
-    const { nodeLoader } = (0, presentation_components_1.usePresentationTreeNodeLoader)({
+    const { hierarchyLevelConfig, contextMenuItems, nodeLabelRenderer, density } = props;
+    const state = (0, presentation_components_1.usePresentationTreeState)({
         imodel: props.iModel,
         ruleset: exports.RULESET_EXTERNAL_SOURCES,
         pagingSize: PAGING_SIZE,
+        eventHandlerFactory: unifiedSelectionTreeEventHandlerFactory,
         customizeTreeNodeItem,
+        hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
     });
-    const eventsHandler = (0, presentation_components_1.useUnifiedSelectionTreeEventHandler)({ nodeLoader });
-    const treeModel = (0, components_react_1.useTreeModel)(nodeLoader.modelSource);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-tree-container", children: (0, jsx_runtime_1.jsx)(components_react_1.ControlledTree, { nodeLoader: nodeLoader, model: treeModel, selectionMode: props.selectionMode ?? components_react_1.SelectionMode.Extended, eventsHandler: eventsHandler, width: props.width, height: props.height, iconsEnabled: true, treeRenderer: (treeProps) => (0, jsx_runtime_1.jsx)(TreeRenderer_1.TreeRenderer, { ...treeProps, contextMenuItems: props.contextMenuItems, nodeLabelRenderer: props.nodeLabelRenderer, density: props.density }) }) }));
+    const treeRendererProps = {
+        contextMenuItems,
+        nodeLabelRenderer,
+        density,
+    };
+    if (!state) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-tree-container", children: (0, jsx_runtime_1.jsx)(presentation_components_1.PresentationTree, { width: props.width, height: props.height, state: state, selectionMode: props.selectionMode ?? components_react_1.SelectionMode.Extended, iconsEnabled: true, treeRenderer: (treeProps) => hierarchyLevelConfig?.isFilteringEnabled ? ((0, jsx_runtime_1.jsx)(TreeRenderer_1.FilterableTreeRenderer, { ...treeProps, ...treeRendererProps, nodeLoader: state.nodeLoader, nodeRenderer: (nodeRendererProps) => (0, jsx_runtime_1.jsx)(presentation_components_1.PresentationTreeNodeRenderer, { ...nodeRendererProps }) })) : ((0, jsx_runtime_1.jsx)(TreeRenderer_1.TreeRenderer, { ...treeProps, ...treeRendererProps })) }) }));
 }
 exports.ExternalSourcesTree = ExternalSourcesTree;
+function unifiedSelectionTreeEventHandlerFactory(props) {
+    return new presentation_components_1.UnifiedSelectionTreeEventHandler({ nodeLoader: props.nodeLoader });
+}
 const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([
     Utils_1.addCustomTreeNodeItemLabelRenderer,
     (item, node) => {

package/lib/cjs/components/trees/external-sources-tree/ExternalSourcesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSourcesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAE/F,sCAAoC;AACpC,8DAAsF;AACtF,4EAAoH;AACpH,yDAAsD;AACtD,2CAAwG;AACxG,wFAA0E;AAI1E;;;GAGG;AACU,QAAA,wBAAwB,GAAG,+BAA0C,CAAC;AAEnF,MAAM,WAAW,GAAG,EAAE,CAAC;AAQvB;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uDAA6B,EAAC;QACnD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,gCAAwB;QACjC,UAAU,EAAE,WAAW;QACvB,qBAAqB;KACtB,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,IAAA,6DAAmC,EAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC1E,MAAM,SAAS,GAAG,IAAA,+BAAY,EAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CACL,gCAAK,SAAS,EAAC,4BAA4B,YACzC,uBAAC,iCAAc,IACb,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,gCAAa,CAAC,QAAQ,EAC5D,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAC1B,uBAAC,2BAAY,OACP,SAAS,EACb,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,GAEJ,GACE,CACP,CAAC;AACJ,CAAC;AA9BD,kDA8BC;AAED,MAAM,qBAAqB,GAAG,IAAA,yCAAiC,EAAC;IAC9D,0CAAkC;IAClC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;IACzC,CAAC;CACF,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*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { usePresentationTreeNodeLoader, useUnifiedSelectionTreeEventHandler } from \"@itwin/presentation-components\";\nimport { TreeRenderer } from \"../common/TreeRenderer\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport * as RULESET_EXTERNAL_SOURCES_IMPORT from \"./ExternalSources.json\";\n\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseTreeProps } from \"../common/Types\";\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_EXTERNAL_SOURCES = RULESET_EXTERNAL_SOURCES_IMPORT as Ruleset;\n\nconst PAGING_SIZE = 20;\n\n/**\n * Props for the [[ExternalSourcesTree]] component\n * @alpha\n */\nexport type ExternalSourcesTreeProps = BaseTreeProps;\n\n/**\n * Tree which displays a hierarchy of ExternalSources and their elements.\n * @alpha\n */\nexport function ExternalSourcesTree(props: ExternalSourcesTreeProps) {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: RULESET_EXTERNAL_SOURCES,\n    pagingSize: PAGING_SIZE,\n    customizeTreeNodeItem,\n  });\n  const eventsHandler = useUnifiedSelectionTreeEventHandler({ nodeLoader });\n  const treeModel = useTreeModel(nodeLoader.modelSource);\n  return (\n    <div className=\"tree-widget-tree-container\">\n      <ControlledTree\n        nodeLoader={nodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode ?? SelectionMode.Extended}\n        eventsHandler={eventsHandler}\n        width={props.width}\n        height={props.height}\n        iconsEnabled={true}\n        treeRenderer={(treeProps) =>\n          <TreeRenderer\n            {...treeProps}\n            contextMenuItems={props.contextMenuItems}\n            nodeLabelRenderer={props.nodeLabelRenderer}\n            density={props.density}\n          />\n        }\n      />\n    </div>\n  );\n}\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([\n  addCustomTreeNodeItemLabelRenderer,\n  (item, node) => {\n    item.icon = node.extendedData?.imageId;\n  },\n]);\n"]}
+{"version":3,"file":"ExternalSourcesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAEhG,sCAAoC;AACpC,8DAAwD;AACxD,4EAA4J;AAC5J,yDAA8E;AAC9E,2CAAwG;AACxG,wFAA0E;AAK1E;;;GAGG;AACU,QAAA,wBAAwB,GAAG,+BAA0C,CAAC;AAEnF,MAAM,WAAW,GAAG,EAAE,CAAC;AAcvB;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAErF,MAAM,KAAK,GAAG,IAAA,kDAAwB,EAAC;QACrC,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,gCAAwB;QACjC,UAAU,EAAE,WAAW;QACvB,mBAAmB,EAAE,uCAAuC;QAC5D,qBAAqB;QACrB,uBAAuB,EAAE,oBAAoB,EAAE,SAAS;KACzD,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG;QACxB,gBAAgB;QAChB,iBAAiB;QACjB,OAAO;KACR,CAAC;IAEF,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCAAK,SAAS,EAAC,4BAA4B,YACzC,uBAAC,0CAAgB,IACf,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,gCAAa,CAAC,QAAQ,EAC5D,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAC1B,oBAAoB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CACzC,uBAAC,qCAAsB,OACjB,SAAS,KACT,iBAAiB,EACrB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,YAAY,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC,uBAAC,sDAA4B,OAAK,iBAAiB,GAAI,GAC5F,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,2BAAY,OAAK,SAAS,KAAM,iBAAiB,GAAI,CACvD,GAEH,GACE,CACP,CAAC;AACJ,CAAC;AA7CD,kDA6CC;AAED,SAAS,uCAAuC,CAAC,KAAwC;IACvF,OAAO,IAAI,0DAAgC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;AAChF,CAAC;AAED,MAAM,qBAAqB,GAAG,IAAA,yCAAiC,EAAC;IAC9D,0CAAkC;IAClC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;IACzC,CAAC;CACF,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 *--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { SelectionMode } from \"@itwin/components-react\";\nimport { PresentationTree, PresentationTreeNodeRenderer, UnifiedSelectionTreeEventHandler, usePresentationTreeState } from \"@itwin/presentation-components\";\nimport { FilterableTreeRenderer, TreeRenderer } from \"../common/TreeRenderer\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport * as RULESET_EXTERNAL_SOURCES_IMPORT from \"./ExternalSources.json\";\n\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { PresentationTreeEventHandlerProps } from \"@itwin/presentation-components\";\nimport type { BaseTreeProps, HierarchyLevelConfig } from \"../common/Types\";\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_EXTERNAL_SOURCES = RULESET_EXTERNAL_SOURCES_IMPORT as Ruleset;\n\nconst PAGING_SIZE = 20;\n\n/**\n * Props for the [[ExternalSourcesTree]] component\n * @alpha\n */\nexport interface ExternalSourcesTreeProps extends BaseTreeProps {\n  /**\n   * Props for configuring hierarchy level.\n   * @beta\n   */\n  hierarchyLevelConfig?: HierarchyLevelConfig;\n}\n\n/**\n * Tree which displays a hierarchy of ExternalSources and their elements.\n * @alpha\n */\nexport function ExternalSourcesTree(props: ExternalSourcesTreeProps) {\n  const { hierarchyLevelConfig, contextMenuItems, nodeLabelRenderer, density } = props;\n\n  const state = usePresentationTreeState({\n    imodel: props.iModel,\n    ruleset: RULESET_EXTERNAL_SOURCES,\n    pagingSize: PAGING_SIZE,\n    eventHandlerFactory: unifiedSelectionTreeEventHandlerFactory,\n    customizeTreeNodeItem,\n    hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,\n  });\n\n  const treeRendererProps = {\n    contextMenuItems,\n    nodeLabelRenderer,\n    density,\n  };\n\n  if (!state) {\n    return null;\n  }\n\n  return (\n    <div className=\"tree-widget-tree-container\">\n      <PresentationTree\n        width={props.width}\n        height={props.height}\n        state={state}\n        selectionMode={props.selectionMode ?? SelectionMode.Extended}\n        iconsEnabled={true}\n        treeRenderer={(treeProps) =>\n          hierarchyLevelConfig?.isFilteringEnabled ? (\n            <FilterableTreeRenderer\n              {...treeProps}\n              {...treeRendererProps}\n              nodeLoader={state.nodeLoader}\n              nodeRenderer={(nodeRendererProps) => <PresentationTreeNodeRenderer {...nodeRendererProps} />}\n            />\n          ) : (\n            <TreeRenderer {...treeProps} {...treeRendererProps} />\n          )\n        }\n      />\n    </div>\n  );\n}\n\nfunction unifiedSelectionTreeEventHandlerFactory(props: PresentationTreeEventHandlerProps) {\n  return new UnifiedSelectionTreeEventHandler({ nodeLoader: props.nodeLoader });\n}\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([\n  addCustomTreeNodeItemLabelRenderer,\n  (item, node) => {\n    item.icon = node.extendedData?.imageId;\n  },\n]);\n"]}

package/lib/cjs/components/trees/external-sources-tree/ExternalSourcesTreeComponent.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExternalSourcesTreeComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 require("../VisibilityTreeBase.scss");
 const appui_react_1 = require("@itwin/appui-react");
 const TreeWidget_1 = require("../../../TreeWidget");
@@ -20,7 +20,7 @@ const ExternalSourcesTreeComponent = (props) => {
     if (!iModel) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(ExternalSourcesTree_1.ExternalSourcesTree, { ...props, iModel: iModel, width: width, height: height })) }));
+    return (0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => (0, jsx_runtime_1.jsx)(ExternalSourcesTree_1.ExternalSourcesTree, { ...props, iModel: iModel, width: width, height: height }) });
 };
 exports.ExternalSourcesTreeComponent = ExternalSourcesTreeComponent;
 /**

package/lib/cjs/components/trees/external-sources-tree/ExternalSourcesTreeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSourcesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTreeComponent.tsx"],"names":[],"mappings":";;;;AAAA;;;+FAG+F;AAE/F,sCAAoC;AACpC,oDAA+D;AAC/D,oDAAiD;AACjD,qDAAkD;AAClD,+DAA4D;AAU5D;;;GAGG;AACI,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAE,EAAE;IACvF,MAAM,MAAM,GAAG,IAAA,uCAAyB,GAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,uBAAC,qBAAS,cACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,uBAAC,yCAAmB,OACd,KAAK,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACH,GACS,CACb,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,4BAA4B,gCAkBvC;AAEF;;;GAGG;AACH,oCAA4B,CAAC,EAAE,GAAG,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,oCAA4B,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,uBAAU,CAAC,SAAS,CAAC,iBAAiB,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*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { ExternalSourcesTree } from \"./ExternalSourcesTree\";\n\nimport type { ExternalSourcesTreeProps } from \"./ExternalSourcesTree\";\n\n/**\n * Props for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nexport type ExternalSourcesTreeComponentProps = Omit<ExternalSourcesTreeProps, \"iModel\" | \"width\" | \"height\">;\n\n/**\n * A component that displays an External Sources tree and any necessary \"chrome\".\n * @alpha\n */\nexport const ExternalSourcesTreeComponent = (props: ExternalSourcesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  if (!iModel) {\n    return null;\n  }\n\n  return (\n    <AutoSizer>\n      {({ width, height }) => (\n        <ExternalSourcesTree\n          {...props}\n          iModel={iModel}\n          width={width}\n          height={height}\n        />\n      )}\n    </AutoSizer>\n  );\n};\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.id = \"external-sources-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.getLabel = () => TreeWidget.translate(\"externalSources\");\n"]}
+{"version":3,"file":"ExternalSourcesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTreeComponent.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,sCAAoC;AACpC,oDAA+D;AAC/D,oDAAiD;AACjD,qDAAkD;AAClD,+DAA4D;AAU5D;;;GAGG;AACI,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAE,EAAE;IACvF,MAAM,MAAM,GAAG,IAAA,uCAAyB,GAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,uBAAC,qBAAS,cAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,uBAAC,yCAAmB,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,GAAa,CAAC;AAC1I,CAAC,CAAC;AAPW,QAAA,4BAA4B,gCAOvC;AAEF;;;GAGG;AACH,oCAA4B,CAAC,EAAE,GAAG,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,oCAA4B,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,uBAAU,CAAC,SAAS,CAAC,iBAAiB,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 *--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { ExternalSourcesTree } from \"./ExternalSourcesTree\";\n\nimport type { ExternalSourcesTreeProps } from \"./ExternalSourcesTree\";\n\n/**\n * Props for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nexport type ExternalSourcesTreeComponentProps = Omit<ExternalSourcesTreeProps, \"iModel\" | \"width\" | \"height\">;\n\n/**\n * A component that displays an External Sources tree and any necessary \"chrome\".\n * @alpha\n */\nexport const ExternalSourcesTreeComponent = (props: ExternalSourcesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  if (!iModel) {\n    return null;\n  }\n\n  return <AutoSizer>{({ width, height }) => <ExternalSourcesTree {...props} iModel={iModel} width={width} height={height} />}</AutoSizer>;\n};\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.id = \"external-sources-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.getLabel = () => TreeWidget.translate(\"externalSources\");\n"]}

package/lib/cjs/components/trees/imodel-content-tree/IModelContentTree.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Ruleset } from "@itwin/presentation-common";
-import type { BaseTreeProps } from "../common/Types";
+import type { BaseTreeProps, HierarchyLevelConfig } from "../common/Types";
 /**
  * Presentation rules used by IModelContentTree
  * @internal
@@ -10,11 +10,17 @@ export declare const RULESET_IMODEL_CONTENT: Ruleset;
  * Props for [[IModelContentTree]].
  * @public
  */
-export type IModelContentTreeProps = BaseTreeProps;
+export interface IModelContentTreeProps extends BaseTreeProps {
+    /**
+     * Props for configuring hierarchy level.
+     * @beta
+     */
+    hierarchyLevelConfig?: HierarchyLevelConfig;
+}
 /**
  * A tree that shows all iModel content starting from the root Subject, then the hierarchy of child
  * Subjects, their Models and Elements contained in those Models.
  * @public
  */
-export declare const IModelContentTree: (props: IModelContentTreeProps) => JSX.Element;
+export declare const IModelContentTree: (props: IModelContentTreeProps) => JSX.Element | null;
 //# sourceMappingURL=IModelContentTree.d.ts.map

package/lib/cjs/components/trees/imodel-content-tree/IModelContentTree.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IModelContentTree = exports.RULESET_IMODEL_CONTENT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-const react_1 = require("react");
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 const components_react_1 = require("@itwin/components-react");
 const presentation_components_1 = require("@itwin/presentation-components");
 const TreeRenderer_1 = require("../common/TreeRenderer");
@@ -22,20 +21,25 @@ exports.RULESET_IMODEL_CONTENT = require("./IModelContent.json"); // eslint-disa
  * @public
  */
 const IModelContentTree = (props) => {
-    const { iModel, width, height, selectionMode, contextMenuItems } = props;
-    const { nodeLoader } = (0, presentation_components_1.usePresentationTreeNodeLoader)({
+    const { iModel, width, height, selectionMode, hierarchyLevelConfig } = props;
+    const state = (0, presentation_components_1.usePresentationTreeState)({
         imodel: iModel,
         ruleset: exports.RULESET_IMODEL_CONTENT,
         pagingSize: 20,
         appendChildrenCountForGroupingNodes: true,
         customizeTreeNodeItem,
+        hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
     });
-    const eventHandler = (0, components_react_1.useTreeEventsHandler)((0, react_1.useMemo)(() => ({ nodeLoader, modelSource: nodeLoader.modelSource }), [nodeLoader]));
-    const treeModel = (0, components_react_1.useTreeModel)(nodeLoader.modelSource);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-tree-container", children: (0, jsx_runtime_1.jsx)(components_react_1.ControlledTree, { width: width, height: height, nodeLoader: nodeLoader, selectionMode: selectionMode ?? components_react_1.SelectionMode.None, eventsHandler: eventHandler, model: treeModel, treeRenderer: (treeProps) => (0, jsx_runtime_1.jsx)(TreeRenderer_1.TreeRenderer, { ...treeProps, contextMenuItems: contextMenuItems, nodeLabelRenderer: props.nodeLabelRenderer, density: props.density }) }) }));
+    const treeRendererProps = {
+        contextMenuItems: props.contextMenuItems,
+        nodeLabelRenderer: props.nodeLabelRenderer,
+        density: props.density,
+    };
+    if (!state) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-tree-container", children: (0, jsx_runtime_1.jsx)(presentation_components_1.PresentationTree, { width: width, height: height, state: state, selectionMode: selectionMode ?? components_react_1.SelectionMode.None, treeRenderer: (treeProps) => hierarchyLevelConfig?.isFilteringEnabled ? ((0, jsx_runtime_1.jsx)(TreeRenderer_1.FilterableTreeRenderer, { ...treeProps, ...treeRendererProps, nodeLoader: state.nodeLoader, nodeRenderer: (nodeRendererProps) => (0, jsx_runtime_1.jsx)(presentation_components_1.PresentationTreeNodeRenderer, { ...nodeRendererProps }) })) : ((0, jsx_runtime_1.jsx)(TreeRenderer_1.TreeRenderer, { ...treeProps, ...treeRendererProps })) }) }));
 };
 exports.IModelContentTree = IModelContentTree;
-const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([
-    Utils_1.addCustomTreeNodeItemLabelRenderer,
-]);
+const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([Utils_1.addCustomTreeNodeItemLabelRenderer]);
 //# sourceMappingURL=IModelContentTree.js.map

package/lib/cjs/components/trees/imodel-content-tree/IModelContentTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"IModelContentTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/imodel-content-tree/IModelContentTree.tsx"],"names":[],"mappings":";;;;AAAA;;;+FAG+F;AAE/F,iCAAgC;AAChC,8DAA4G;AAC5G,4EAA+E;AAC/E,yDAAsD;AACtD,2CAAwG;AAKxG;;;GAGG;AACU,QAAA,sBAAsB,GAAY,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,yDAAyD;AAQzI;;;;GAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uDAA6B,EAAC;QACnD,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,8BAAsB;QAC/B,UAAU,EAAE,EAAE;QACd,mCAAmC,EAAE,IAAI;QACzC,qBAAqB;KACtB,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,IAAA,uCAAoB,EAAC,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAE9H,MAAM,SAAS,GAAG,IAAA,+BAAY,EAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAEvD,OAAO,CACL,gCAAK,SAAS,EAAC,4BAA4B,YACzC,uBAAC,iCAAc,IACb,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,IAAI,gCAAa,CAAC,IAAI,EAClD,aAAa,EAAE,YAAY,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAC1B,uBAAC,2BAAY,OACP,SAAS,EACb,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,GAEJ,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,iBAAiB,qBAkC5B;AAEF,MAAM,qBAAqB,GAAG,IAAA,yCAAiC,EAAC;IAC9D,0CAAkC;CACnC,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*--------------------------------------------------------------------------------------------*/\n\nimport { useMemo } from \"react\";\nimport { ControlledTree, SelectionMode, useTreeEventsHandler, useTreeModel } from \"@itwin/components-react\";\nimport { usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { TreeRenderer } from \"../common/TreeRenderer\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\n\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseTreeProps } from \"../common/Types\";\n\n/**\n * Presentation rules used by IModelContentTree\n * @internal\n */\nexport const RULESET_IMODEL_CONTENT: Ruleset = require(\"./IModelContent.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\n/**\n * Props for [[IModelContentTree]].\n * @public\n */\nexport type IModelContentTreeProps = BaseTreeProps;\n\n/**\n * A tree that shows all iModel content starting from the root Subject, then the hierarchy of child\n * Subjects, their Models and Elements contained in those Models.\n * @public\n */\nexport const IModelContentTree = (props: IModelContentTreeProps) => {\n  const { iModel, width, height, selectionMode, contextMenuItems } = props;\n\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: iModel,\n    ruleset: RULESET_IMODEL_CONTENT,\n    pagingSize: 20,\n    appendChildrenCountForGroupingNodes: true,\n    customizeTreeNodeItem,\n  });\n  const eventHandler = useTreeEventsHandler(useMemo(() => ({ nodeLoader, modelSource: nodeLoader.modelSource }), [nodeLoader]));\n\n  const treeModel = useTreeModel(nodeLoader.modelSource);\n\n  return (\n    <div className=\"tree-widget-tree-container\">\n      <ControlledTree\n        width={width}\n        height={height}\n        nodeLoader={nodeLoader}\n        selectionMode={selectionMode ?? SelectionMode.None}\n        eventsHandler={eventHandler}\n        model={treeModel}\n        treeRenderer={(treeProps) =>\n          <TreeRenderer\n            {...treeProps}\n            contextMenuItems={contextMenuItems}\n            nodeLabelRenderer={props.nodeLabelRenderer}\n            density={props.density}\n          />\n        }\n      />\n    </div>\n  );\n};\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([\n  addCustomTreeNodeItemLabelRenderer,\n]);\n"]}
+{"version":3,"file":"IModelContentTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/imodel-content-tree/IModelContentTree.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,8DAAwD;AACxD,4EAA0H;AAC1H,yDAA8E;AAC9E,2CAAwG;AAIxG;;;GAGG;AACU,QAAA,sBAAsB,GAAY,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,yDAAyD;AAczI;;;;GAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAE7E,MAAM,KAAK,GAAG,IAAA,kDAAwB,EAAC;QACrC,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,8BAAsB;QAC/B,UAAU,EAAE,EAAE;QACd,mCAAmC,EAAE,IAAI;QACzC,qBAAqB;QACrB,uBAAuB,EAAE,oBAAoB,EAAE,SAAS;KACzD,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG;QACxB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB;QAC1C,OAAO,EAAE,KAAK,CAAC,OAAO;KACvB,CAAC;IAEF,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCAAK,SAAS,EAAC,4BAA4B,YACzC,uBAAC,0CAAgB,IACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,IAAI,gCAAa,CAAC,IAAI,EAClD,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAC1B,oBAAoB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CACzC,uBAAC,qCAAsB,OACjB,SAAS,KACT,iBAAiB,EACrB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,YAAY,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC,uBAAC,sDAA4B,OAAK,iBAAiB,GAAI,GAC5F,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,2BAAY,OAAK,SAAS,KAAM,iBAAiB,GAAI,CACvD,GAEH,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,iBAAiB,qBA4C5B;AAEF,MAAM,qBAAqB,GAAG,IAAA,yCAAiC,EAAC,CAAC,0CAAkC,CAAC,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 *--------------------------------------------------------------------------------------------*/\n\nimport { SelectionMode } from \"@itwin/components-react\";\nimport { PresentationTree, PresentationTreeNodeRenderer, usePresentationTreeState } from \"@itwin/presentation-components\";\nimport { FilterableTreeRenderer, TreeRenderer } from \"../common/TreeRenderer\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\n\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseTreeProps, HierarchyLevelConfig } from \"../common/Types\";\n/**\n * Presentation rules used by IModelContentTree\n * @internal\n */\nexport const RULESET_IMODEL_CONTENT: Ruleset = require(\"./IModelContent.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\n/**\n * Props for [[IModelContentTree]].\n * @public\n */\nexport interface IModelContentTreeProps extends BaseTreeProps {\n  /**\n   * Props for configuring hierarchy level.\n   * @beta\n   */\n  hierarchyLevelConfig?: HierarchyLevelConfig;\n}\n\n/**\n * A tree that shows all iModel content starting from the root Subject, then the hierarchy of child\n * Subjects, their Models and Elements contained in those Models.\n * @public\n */\nexport const IModelContentTree = (props: IModelContentTreeProps) => {\n  const { iModel, width, height, selectionMode, hierarchyLevelConfig } = props;\n\n  const state = usePresentationTreeState({\n    imodel: iModel,\n    ruleset: RULESET_IMODEL_CONTENT,\n    pagingSize: 20,\n    appendChildrenCountForGroupingNodes: true,\n    customizeTreeNodeItem,\n    hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,\n  });\n\n  const treeRendererProps = {\n    contextMenuItems: props.contextMenuItems,\n    nodeLabelRenderer: props.nodeLabelRenderer,\n    density: props.density,\n  };\n\n  if (!state) {\n    return null;\n  }\n\n  return (\n    <div className=\"tree-widget-tree-container\">\n      <PresentationTree\n        width={width}\n        height={height}\n        state={state}\n        selectionMode={selectionMode ?? SelectionMode.None}\n        treeRenderer={(treeProps) =>\n          hierarchyLevelConfig?.isFilteringEnabled ? (\n            <FilterableTreeRenderer\n              {...treeProps}\n              {...treeRendererProps}\n              nodeLoader={state.nodeLoader}\n              nodeRenderer={(nodeRendererProps) => <PresentationTreeNodeRenderer {...nodeRendererProps} />}\n            />\n          ) : (\n            <TreeRenderer {...treeProps} {...treeRendererProps} />\n          )\n        }\n      />\n    </div>\n  );\n};\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([addCustomTreeNodeItemLabelRenderer]);\n"]}

package/lib/cjs/components/trees/imodel-content-tree/IModelContentTreeComponent.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IModelContentTreeComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 require("../VisibilityTreeBase.scss");
 const appui_react_1 = require("@itwin/appui-react");
 const TreeWidget_1 = require("../../../TreeWidget");
@@ -17,9 +17,10 @@ const IModelContentTree_1 = require("./IModelContentTree");
  */
 const IModelContentTreeComponent = (props) => {
     const iModel = (0, appui_react_1.useActiveIModelConnection)();
-    if (!iModel)
+    if (!iModel) {
         return null;
-    return ((0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(IModelContentTree_1.IModelContentTree, { ...props, iModel: iModel, width: width, height: height })) }));
+    }
+    return (0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => (0, jsx_runtime_1.jsx)(IModelContentTree_1.IModelContentTree, { ...props, iModel: iModel, width: width, height: height }) });
 };
 exports.IModelContentTreeComponent = IModelContentTreeComponent;
 /**

package/lib/cjs/components/trees/imodel-content-tree/IModelContentTreeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"IModelContentTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/imodel-content-tree/IModelContentTreeComponent.tsx"],"names":[],"mappings":";;;;AAAA;;;+FAG+F;AAE/F,sCAAoC;AACpC,oDAA+D;AAC/D,oDAAiD;AACjD,qDAAkD;AAClD,2DAAwD;AAUxD;;;GAGG;AACI,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAE,EAAE;IACnF,MAAM,MAAM,GAAG,IAAA,uCAAyB,GAAE,CAAC;IAE3C,IAAI,CAAC,MAAM;QACT,OAAO,IAAI,CAAC;IAEd,OAAO,CACL,uBAAC,qBAAS,cACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,uBAAC,qCAAiB,OACZ,KAAK,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACH,GACS,CACb,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,0BAA0B,8BAkBrC;AAEF;;;GAGG;AACH,kCAA0B,CAAC,EAAE,GAAG,qBAAqB,CAAC;AAEtD;;;GAGG;AACH,kCAA0B,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,uBAAU,CAAC,SAAS,CAAC,eAAe,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*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { IModelContentTree } from \"./IModelContentTree\";\n\nimport type { IModelContentTreeProps } from \"./IModelContentTree\";\n\n/**\n * Props for [[IModelContentTreeComponent]].\n * @public\n */\nexport type IModelContentTreeComponentProps = Omit<IModelContentTreeProps, \"iModel\" | \"width\" | \"height\">;\n\n/**\n * A component that renders [[IModelContentTree]]\n * @public\n */\nexport const IModelContentTreeComponent = (props: IModelContentTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n\n  if (!iModel)\n    return null;\n\n  return (\n    <AutoSizer>\n      {({ width, height }) => (\n        <IModelContentTree\n          {...props}\n          iModel={iModel}\n          width={width}\n          height={height}\n        />\n      )}\n    </AutoSizer>\n  );\n};\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nIModelContentTreeComponent.id = \"imodel-content-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nIModelContentTreeComponent.getLabel = () => TreeWidget.translate(\"imodelContent\");\n"]}
+{"version":3,"file":"IModelContentTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/imodel-content-tree/IModelContentTreeComponent.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,sCAAoC;AACpC,oDAA+D;AAC/D,oDAAiD;AACjD,qDAAkD;AAClD,2DAAwD;AAUxD;;;GAGG;AACI,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAE,EAAE;IACnF,MAAM,MAAM,GAAG,IAAA,uCAAyB,GAAE,CAAC;IAE3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,uBAAC,qBAAS,cAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,uBAAC,qCAAiB,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,GAAa,CAAC;AACxI,CAAC,CAAC;AARW,QAAA,0BAA0B,8BAQrC;AAEF;;;GAGG;AACH,kCAA0B,CAAC,EAAE,GAAG,qBAAqB,CAAC;AAEtD;;;GAGG;AACH,kCAA0B,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,uBAAU,CAAC,SAAS,CAAC,eAAe,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 *--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { IModelContentTree } from \"./IModelContentTree\";\n\nimport type { IModelContentTreeProps } from \"./IModelContentTree\";\n\n/**\n * Props for [[IModelContentTreeComponent]].\n * @public\n */\nexport type IModelContentTreeComponentProps = Omit<IModelContentTreeProps, \"iModel\" | \"width\" | \"height\">;\n\n/**\n * A component that renders [[IModelContentTree]]\n * @public\n */\nexport const IModelContentTreeComponent = (props: IModelContentTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n\n  if (!iModel) {\n    return null;\n  }\n\n  return <AutoSizer>{({ width, height }) => <IModelContentTree {...props} iModel={iModel} width={width} height={height} />}</AutoSizer>;\n};\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nIModelContentTreeComponent.id = \"imodel-content-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nIModelContentTreeComponent.getLabel = () => TreeWidget.translate(\"imodelContent\");\n"]}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/trees/index.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;;;;;;;;;;;AAE/F,iDAA+B;AAC/B,uDAAqC;AACrC,wDAAsC;AACtC,4DAA0C;AAC1C,+DAA6C;AAC7C,2DAAyC;AAEzC,0EAAwD;AACxD,mFAAiE;AAEjE,iEAA+C;AAC/C,0EAAwD;AACxD,4EAA0D;AAE1D,8EAA4D;AAC5D,uFAAqE;AAErE,2DAAyC;AACzC,oEAAkD;AAClD,wEAAsD","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 \"./common/Types\";\nexport * from \"./common/ContextMenu\";\nexport * from \"./common/TreeRenderer\";\nexport * from \"./common/TreeNodeRenderer\";\nexport * from \"./VisibilityTreeEventHandler\";\nexport * from \"./VisibilityTreeRenderer\";\n\nexport * from \"./imodel-content-tree/IModelContentTree\";\nexport * from \"./imodel-content-tree/IModelContentTreeComponent\";\n\nexport * from \"./category-tree/CategoriesTree\";\nexport * from \"./category-tree/CategoriesTreeComponent\";\nexport * from \"./category-tree/CategoryVisibilityHandler\";\n\nexport * from \"./external-sources-tree/ExternalSourcesTree\";\nexport * from \"./external-sources-tree/ExternalSourcesTreeComponent\";\n\nexport * from \"./models-tree/ModelsTree\";\nexport * from \"./models-tree/ModelsTreeComponent\";\nexport * from \"./models-tree/ModelsVisibilityHandler\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/trees/index.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;;;;;;;;;;;;;;AAEhG,iDAA+B;AAC/B,uDAAqC;AACrC,wDAAsC;AACtC,4DAA0C;AAC1C,+DAA6C;AAC7C,2DAAyC;AAEzC,0EAAwD;AACxD,mFAAiE;AAEjE,iEAA+C;AAC/C,0EAAwD;AACxD,4EAA0D;AAE1D,8EAA4D;AAC5D,uFAAqE;AAErE,2DAAyC;AACzC,oEAAkD;AAClD,wEAAsD","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 \"./common/Types\";\nexport * from \"./common/ContextMenu\";\nexport * from \"./common/TreeRenderer\";\nexport * from \"./common/TreeNodeRenderer\";\nexport * from \"./VisibilityTreeEventHandler\";\nexport * from \"./VisibilityTreeRenderer\";\n\nexport * from \"./imodel-content-tree/IModelContentTree\";\nexport * from \"./imodel-content-tree/IModelContentTreeComponent\";\n\nexport * from \"./category-tree/CategoriesTree\";\nexport * from \"./category-tree/CategoriesTreeComponent\";\nexport * from \"./category-tree/CategoryVisibilityHandler\";\n\nexport * from \"./external-sources-tree/ExternalSourcesTree\";\nexport * from \"./external-sources-tree/ExternalSourcesTreeComponent\";\n\nexport * from \"./models-tree/ModelsTree\";\nexport * from \"./models-tree/ModelsTreeComponent\";\nexport * from \"./models-tree/ModelsVisibilityHandler\";\n"]}

package/lib/cjs/components/trees/models-tree/ModelsTree.d.ts

@@ -4,7 +4,7 @@ import { ClassGroupingOption } from "../common/Types";
 import { ModelsVisibilityHandler } from "./ModelsVisibilityHandler";
 import type { SingleSchemaClassSpecification } from "@itwin/presentation-common";
 import type { Viewport } from "@itwin/core-frontend";
-import type { BaseFilterableTreeProps } from "../common/Types";
+import type { BaseFilterableTreeProps, HierarchyLevelConfig } from "../common/Types";
 import type { ModelsTreeSelectionPredicate, ModelsVisibilityHandlerProps } from "./ModelsVisibilityHandler";
 /**
  * Props for configuring the hierarchy in [[ModelsTree]].
@@ -47,6 +47,11 @@ export interface ModelsTreeProps extends BaseFilterableTreeProps {
      * Custom visibility handler.
      */
     modelsVisibilityHandler?: ModelsVisibilityHandler | ((props: ModelsVisibilityHandlerProps) => ModelsVisibilityHandler);
+    /**
+     * Props for configuring hierarchy level.
+     * @beta
+     */
+    hierarchyLevelConfig?: HierarchyLevelConfig;
 }
 /**
  * A tree component that shows a subject - model - category - element
@@ -54,5 +59,5 @@ export interface ModelsTreeProps extends BaseFilterableTreeProps {
  * the display of those instances.
  * @public
  */
-export declare function ModelsTree(props: ModelsTreeProps): JSX.Element;
+export declare function ModelsTree(props: ModelsTreeProps): JSX.Element | null;
 //# sourceMappingURL=ModelsTree.d.ts.map

package/lib/cjs/components/trees/models-tree/ModelsTree.js

@@ -6,20 +6,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModelsTree = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 require("../VisibilityTreeBase.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const components_react_1 = require("@itwin/components-react");
-const core_react_1 = require("@itwin/core-react");
 const presentation_components_1 = require("@itwin/presentation-components");
 const TreeWidget_1 = require("../../../TreeWidget");
+const TreeRenderer_1 = require("../common/TreeRenderer");
 const Types_1 = require("../common/Types");
+const UseVisibilityTreeState_1 = require("../common/UseVisibilityTreeState");
 const Utils_1 = require("../common/Utils");
-const VisibilityTreeEventHandler_1 = require("../VisibilityTreeEventHandler");
 const VisibilityTreeRenderer_1 = require("../VisibilityTreeRenderer");
+const ModelsTreeEventHandler_1 = require("./ModelsTreeEventHandler");
 const ModelsVisibilityHandler_1 = require("./ModelsVisibilityHandler");
 const Utils_2 = require("./Utils");
 const PAGING_SIZE = 20;
@@ -30,18 +31,9 @@ const PAGING_SIZE = 20;
  * @public
  */
 function ModelsTree(props) {
-    const { nodeLoader, onItemsRendered } = useModelsTreeNodeLoader(props);
-    const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = (0, VisibilityTreeRenderer_1.useVisibilityTreeFiltering)(nodeLoader, props.filterInfo, props.onFilterApplied);
-    const filterApplied = filteredNodeLoader !== nodeLoader;
-    const { activeView, modelsVisibilityHandler, selectionPredicate } = props;
-    const visibilityHandler = useVisibilityHandler(nodeLoader.dataProvider.rulesetId, props.iModel, activeView, modelsVisibilityHandler, getFilteredDataProvider(filteredNodeLoader.dataProvider), props.enableHierarchyAutoUpdate);
-    const eventHandler = (0, core_react_1.useDisposable)((0, react_1.useCallback)(() => new VisibilityTreeEventHandler_1.VisibilityTreeEventHandler({
-        nodeLoader: filteredNodeLoader,
-        visibilityHandler,
-        selectionPredicate: (node) => !selectionPredicate || !(0, presentation_components_1.isPresentationTreeNodeItem)(node) ? true : selectionPredicate(node.key, ModelsVisibilityHandler_1.ModelsVisibilityHandler.getNodeType(node)),
-    }), [filteredNodeLoader, visibilityHandler, selectionPredicate]));
-    const treeModel = (0, components_react_1.useTreeModel)(filteredNodeLoader.modelSource);
-    const treeRenderer = (0, VisibilityTreeRenderer_1.createVisibilityTreeRenderer)({
+    const { hierarchyLevelConfig, density, height, width, selectionMode } = props;
+    const state = useModelsTreeState(props);
+    const baseRendererProps = {
         contextMenuItems: props.contextMenuItems,
         nodeLabelRenderer: props.nodeLabelRenderer,
         density: props.density,
@@ -51,21 +43,25 @@ function ModelsTree(props) {
             levelOffset: 10,
             disableRootNodeCollapse: true,
         },
-    });
-    const overlay = isFiltering ? (0, jsx_runtime_1.jsx)("div", { className: "filteredTreeOverlay" }) : undefined;
+    };
     // istanbul ignore next
     const noFilteredDataRenderer = (0, react_1.useCallback)(() => {
-        return (0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.VisibilityTreeNoFilteredData, { title: TreeWidget_1.TreeWidget.translate("modelTree.noModelFound"), message: TreeWidget_1.TreeWidget.translate("modelTree.noMatchingModelNames") });
+        return ((0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.VisibilityTreeNoFilteredData, { title: TreeWidget_1.TreeWidget.translate("modelTree.noModelFound"), message: TreeWidget_1.TreeWidget.translate("modelTree.noMatchingModelNames") }));
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tree-widget-visibility-tree-base", "tree-widget-tree-container"), children: [(0, jsx_runtime_1.jsx)(components_react_1.ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode || components_react_1.SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, onItemsRendered: onItemsRendered, width: props.width, height: props.height }), overlay] }));
+    if (!state) {
+        return null;
+    }
+    const isFilterApplied = state.filteringResult?.filteredProvider !== undefined;
+    const overlay = state.filteringResult?.isFiltering ? (0, jsx_runtime_1.jsx)("div", { className: "filteredTreeOverlay" }) : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tree-widget-visibility-tree-base", "tree-widget-tree-container"), children: [(0, jsx_runtime_1.jsx)(presentation_components_1.PresentationTree, { state: state, selectionMode: selectionMode || components_react_1.SelectionMode.None, treeRenderer: hierarchyLevelConfig?.isFilteringEnabled
+                    ? (rendererProps) => ((0, jsx_runtime_1.jsx)(TreeRenderer_1.FilterableTreeRenderer, { ...rendererProps, ...baseRendererProps, nodeLoader: state.nodeLoader, nodeRenderer: (nodeProps) => (0, jsx_runtime_1.jsx)(ModelsTreeNodeRenderer, { ...nodeProps, density: density }) }))
+                    : (0, VisibilityTreeRenderer_1.createVisibilityTreeRenderer)(baseRendererProps), noDataRenderer: isFilterApplied ? noFilteredDataRenderer : undefined, width: width, height: height }), overlay] }));
 }
 exports.ModelsTree = ModelsTree;
-const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([
-    Utils_1.addCustomTreeNodeItemLabelRenderer,
-    Utils_1.addTreeNodeItemCheckbox,
-    Utils_2.addModelsTreeNodeItemIcons,
-]);
-function useModelsTreeNodeLoader(props) {
+function ModelsTreeNodeRenderer(props) {
+    return ((0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.FilterableVisibilityTreeNodeRenderer, { ...props, iconsEnabled: true, descriptionEnabled: false, levelOffset: 10, disableRootNodeCollapse: true, isEnlarged: props.density === "enlarged" }));
+}
+function useModelsTreeState({ filterInfo, onFilterApplied, ...props }) {
     const rulesets = {
         general: (0, react_1.useMemo)(() => (0, Utils_2.createRuleset)({
             enableElementsClassGrouping: !!props.hierarchyConfig?.enableElementsClassGrouping,
@@ -77,54 +73,72 @@ function useModelsTreeNodeLoader(props) {
             showEmptyModels: props.hierarchyConfig?.showEmptyModels,
         }), [props.hierarchyConfig?.elementClassSpecification, props.hierarchyConfig?.showEmptyModels]),
     };
-    const { nodeLoader, onItemsRendered } = (0, presentation_components_1.usePresentationTreeNodeLoader)({
-        imodel: props.iModel,
+    const treeState = useTreeState({
+        ...props,
         ruleset: rulesets.general,
-        appendChildrenCountForGroupingNodes: (props.hierarchyConfig?.enableElementsClassGrouping === Types_1.ClassGroupingOption.YesWithCounts),
-        pagingSize: PAGING_SIZE,
-        enableHierarchyAutoUpdate: props.enableHierarchyAutoUpdate,
-        customizeTreeNodeItem,
     });
-    const { nodeLoader: searchNodeLoader, onItemsRendered: onSearchItemsRendered } = (0, presentation_components_1.usePresentationTreeNodeLoader)({
-        imodel: props.iModel,
+    const filteredTreeState = useTreeState({
+        ...props,
         ruleset: rulesets.search,
+        filterInfo,
+        onFilterApplied,
+    });
+    return filterInfo?.filter ? filteredTreeState : treeState;
+}
+function useTreeState({ modelsVisibilityHandler, activeView, selectionPredicate, hierarchyConfig, iModel, ruleset, enableHierarchyAutoUpdate, filterInfo, onFilterApplied, hierarchyLevelConfig, }) {
+    const visibilityHandler = useVisibilityHandler(ruleset.id, iModel, activeView, modelsVisibilityHandler);
+    const selectionPredicateRef = (0, react_1.useRef)(selectionPredicate);
+    (0, react_1.useEffect)(() => {
+        selectionPredicateRef.current = selectionPredicate;
+    }, [selectionPredicate]);
+    const onFilterChange = (0, react_1.useCallback)((dataProvider, matchesCount) => {
+        if (onFilterApplied && dataProvider && matchesCount !== undefined) {
+            onFilterApplied(dataProvider, matchesCount);
+        }
+        if (visibilityHandler) {
+            visibilityHandler.setFilteredDataProvider(dataProvider);
+        }
+    }, [onFilterApplied, visibilityHandler]);
+    return (0, UseVisibilityTreeState_1.useVisibilityTreeState)({
+        imodel: iModel,
+        ruleset,
         pagingSize: PAGING_SIZE,
-        enableHierarchyAutoUpdate: props.enableHierarchyAutoUpdate,
+        appendChildrenCountForGroupingNodes: hierarchyConfig?.enableElementsClassGrouping === Types_1.ClassGroupingOption.YesWithCounts,
+        enableHierarchyAutoUpdate,
         customizeTreeNodeItem,
+        visibilityHandler,
+        filterInfo,
+        onFilterChange,
+        selectionPredicate: (0, react_1.useCallback)((node) => !selectionPredicateRef.current || !(0, presentation_components_1.isPresentationTreeNodeItem)(node)
+            ? true
+            : selectionPredicateRef.current(node.key, ModelsVisibilityHandler_1.ModelsVisibilityHandler.getNodeType(node)), []),
+        eventHandler: eventHandlerFactory,
+        hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
     });
-    const activeNodeLoader = props.filterInfo?.filter ? searchNodeLoader : nodeLoader;
-    const activeItemsRenderedCallback = props.filterInfo?.filter ? onSearchItemsRendered : onItemsRendered;
-    return {
-        nodeLoader: activeNodeLoader,
-        onItemsRendered: activeItemsRenderedCallback,
-    };
 }
-function useVisibilityHandler(rulesetId, iModel, activeView, visibilityHandler, filteredDataProvider, hierarchyAutoUpdateEnabled) {
+function eventHandlerFactory(props) {
+    return new ModelsTreeEventHandler_1.ModelsTreeEventHandler(props);
+}
+function useVisibilityHandler(rulesetId, iModel, activeView, visibilityHandler, hierarchyAutoUpdateEnabled) {
     const subjectModelIdsCache = (0, react_1.useMemo)(() => new ModelsVisibilityHandler_1.SubjectModelIdsCache(iModel), [iModel]);
-    const disposableVisibilityHandler = (0, core_react_1.useDisposable)((0, react_1.useCallback)(() => {
+    const [state, setState] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (visibilityHandler && typeof visibilityHandler !== "function") {
+            return;
+        }
         const visibilityHandlerProps = {
             rulesetId,
             viewport: activeView,
             hierarchyAutoUpdateEnabled,
             subjectModelIdsCache,
         };
-        return typeof visibilityHandler === "function"
-            ? visibilityHandler(visibilityHandlerProps)
-            : new ModelsVisibilityHandler_1.ModelsVisibilityHandler(visibilityHandlerProps);
-    }, [visibilityHandler, rulesetId, activeView, hierarchyAutoUpdateEnabled, subjectModelIdsCache]));
-    const handler = typeof visibilityHandler === "function" || visibilityHandler === undefined
-        ? disposableVisibilityHandler
-        : visibilityHandler;
-    (0, react_1.useEffect)(() => {
-        handler && handler.setFilteredDataProvider(filteredDataProvider);
-    }, [handler, filteredDataProvider]);
-    return handler;
+        const handler = visibilityHandler ? visibilityHandler(visibilityHandlerProps) : new ModelsVisibilityHandler_1.ModelsVisibilityHandler(visibilityHandlerProps);
+        setState(handler);
+        return () => {
+            handler.dispose();
+        };
+    }, [rulesetId, activeView, hierarchyAutoUpdateEnabled, subjectModelIdsCache, visibilityHandler]);
+    return visibilityHandler && typeof visibilityHandler !== "function" ? visibilityHandler : state;
 }
-const isFilteredDataProvider = (dataProvider) => {
-    const filteredProvider = dataProvider;
-    return filteredProvider.nodeMatchesFilter !== undefined && filteredProvider.getActiveMatch !== undefined && filteredProvider.countFilteringResults !== undefined;
-};
-const getFilteredDataProvider = (dataProvider) => {
-    return isFilteredDataProvider(dataProvider) ? dataProvider : undefined;
-};
+const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([Utils_1.addCustomTreeNodeItemLabelRenderer, Utils_1.addTreeNodeItemCheckbox, Utils_2.addModelsTreeNodeItemIcons]);
 //# sourceMappingURL=ModelsTree.js.map