@itwin/tree-widget-react 2.0.2 → 2.2.0

package/lib/esm/components/trees/common/TreeRenderer.d.ts

@@ -4,6 +4,7 @@ import type { IPresentationTreeDataProvider, PresentationTreeNodeRendererProps }
 import type { AbstractTreeNodeLoaderWithProvider, TreeRendererProps as ComponentsTreeRendererProps } from "@itwin/components-react";
 import type { TreeNodeRendererProps } from "./TreeNodeRenderer";
 import type { TreeContextMenuProps } from "./ContextMenu";
+import type { UsageTrackedFeatures } from "./UseFeatureReporting";
 /**
  * Base props for [[TreeRenderer]] component.
  * @public
@@ -24,17 +25,31 @@ export type TreeRendererProps = ComponentsTreeRendererProps & TreeRendererBasePr
  * @public
  */
 export declare function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }: TreeRendererProps): JSX.Element;
+/**
+ * Props for [[FilterableTreeRenderer]] node renderer.
+ * @beta
+ */
+export interface FilterableTreeNodeRendererProps extends PresentationTreeNodeRendererProps {
+    reportUsage?: (props: {
+        featureId?: UsageTrackedFeatures;
+        reportInteraction: boolean;
+    }) => void;
+}
 /**
  * Props for [[FilterableTreeRenderer]] component.
  * @beta
  */
 export interface FilterableTreeRendererProps extends Omit<TreeRendererProps, "nodeLoader" | "nodeRenderer"> {
     nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>;
-    nodeRenderer: (props: PresentationTreeNodeRendererProps) => React.ReactNode;
+    nodeRenderer: (props: FilterableTreeNodeRendererProps) => React.ReactNode;
+    reportUsage?: (props: {
+        featureId?: UsageTrackedFeatures;
+        reportInteraction: boolean;
+    }) => void;
 }
 /**
  * Base tree renderer for trees with enabled hierarchy level filtering.
  * @beta
  */
-export declare function FilterableTreeRenderer({ nodeRenderer, nodeLoader, ...restProps }: FilterableTreeRendererProps): JSX.Element;
+export declare function FilterableTreeRenderer({ nodeRenderer, nodeLoader, reportUsage, ...restProps }: FilterableTreeRendererProps): JSX.Element;
 //# sourceMappingURL=TreeRenderer.d.ts.map

package/lib/esm/components/trees/common/TreeRenderer.js

@@ -26,10 +26,26 @@ export function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer
  * Base tree renderer for trees with enabled hierarchy level filtering.
  * @beta
  */
-export function FilterableTreeRenderer({ nodeRenderer, nodeLoader, ...restProps }) {
-    const { onClearFilterClick, onFilterClick, filterDialog } = useFilterablePresentationTree({ nodeLoader });
+export function FilterableTreeRenderer({ nodeRenderer, nodeLoader, reportUsage, ...restProps }) {
+    const { onClearFilterClick, onFilterClick, filterDialog } = useFilterablePresentationTree({
+        nodeLoader,
+        onFilterApplied: () => {
+            reportUsage?.({ featureId: "hierarchy-level-filtering", reportInteraction: true });
+        },
+    });
     return (_jsxs("div", { children: [_jsx(TreeRenderer, { ...restProps, nodeLoader: nodeLoader, nodeRenderer: (props) => {
-                    return nodeRenderer({ ...props, onClearFilterClick, onFilterClick });
+                    return nodeRenderer({
+                        ...props,
+                        reportUsage,
+                        onFilterClick: (nodeId) => {
+                            reportUsage?.({ reportInteraction: true });
+                            onFilterClick(nodeId);
+                        },
+                        onClearFilterClick: (nodeId) => {
+                            reportUsage?.({ reportInteraction: true });
+                            onClearFilterClick(nodeId);
+                        },
+                    });
                 } }), filterDialog] }));
 }
 function getNodeHeight(density, defaultHeight) {

package/lib/esm/components/trees/common/TreeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/TreeRenderer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,IAAI,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,+BAA+B,EAAE,MAAM,oBAAoB,CAAC;AAuBrE;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,SAAS,EAAqB;IAC1H,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,cAAc,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAElF,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,IAAI,SAAS,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,UAAU,CAAC,6BAA6B,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,CAAC,CAAC;IAErG,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,KAAC,sBAAsB,OACjB,SAAS,EACb,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE;oBAC1B,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;oBACxF,OAAO,CACL,KAAC,+BAA+B,IAAC,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,iBAAiB,YACxF,YAAY,CAAC,CAAC,CAAC,CACd,YAAY,CAAC,EAAE,GAAG,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,OAAK,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,GAAI,CAC5F,GAC+B,CACnC,CAAC;gBACJ,CAAC,EACD,UAAU,EAAE,UAAU,GACtB,EACD,iBAAiB,EAAE,IAChB,CACP,CAAC;AACJ,CAAC;AAUD;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,SAAS,EAA+B;IAC5G,MAAM,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,6BAA6B,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAE1G,OAAO,CACL,0BACE,KAAC,YAAY,OACP,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;oBACtB,OAAO,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAC,CAAC;gBACvE,CAAC,GACD,EACD,YAAY,IACT,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,OAA+B,EAAE,aAAwD;IAC9G,QAAQ,OAAO,EAAE;QACf,KAAK,SAAS;YACZ,OAAO,aAAa,CAAC;QACvB,KAAK,UAAU;YACb,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC;KACnB;AACH,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 \"./TreeRenderer.scss\";\nimport classNames from \"classnames\";\nimport { TreeRenderer as ComponentsTreeRenderer, TreeNodeRenderer } from \"@itwin/components-react\";\nimport { useFilterablePresentationTree } from \"@itwin/presentation-components\";\nimport { useContextMenu } from \"./ContextMenu\";\nimport { TreeNodeRendererContextProvider } from \"./TreeNodeRenderer\";\n\nimport type { IPresentationTreeDataProvider, PresentationTreeNodeRendererProps } from \"@itwin/presentation-components\";\nimport type { AbstractTreeNodeLoaderWithProvider, TreeRendererProps as ComponentsTreeRendererProps } from \"@itwin/components-react\";\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer\";\nimport type { TreeContextMenuProps } from \"./ContextMenu\";\n/**\n * Base props for [[TreeRenderer]] component.\n * @public\n */\nexport interface TreeRendererBaseProps extends TreeContextMenuProps, TreeNodeRendererProps {\n  /**\n   * Modifies the density of tree nodes. `enlarged` tree nodes have bigger height and bigger button hit boxes.\n   */\n  density?: \"default\" | \"enlarged\";\n}\n\n/**\n * Props for [[TreeRenderer]] component.\n * @public\n */\nexport type TreeRendererProps = ComponentsTreeRendererProps & TreeRendererBaseProps;\n\n/**\n * Base tree renderer for visibility trees.\n * @public\n */\nexport function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }: TreeRendererProps) {\n  const { onContextMenu, renderContextMenu } = useContextMenu({ contextMenuItems });\n\n  const nodeHeight = getNodeHeight(density ?? \"default\", restProps.nodeHeight);\n  const className = classNames(\"tree-widget-tree-nodes-list\", { [\"enlarge\"]: density === \"enlarged\" });\n\n  return (\n    <div className={className}>\n      <ComponentsTreeRenderer\n        {...restProps}\n        nodeRenderer={(nodeProps) => {\n          const nodeClassName = nodeProps.node.numChildren === 0 ? \"without-expander\" : undefined;\n          return (\n            <TreeNodeRendererContextProvider node={nodeProps.node} nodeLabelRenderer={nodeLabelRenderer}>\n              {nodeRenderer ? (\n                nodeRenderer({ ...nodeProps, onContextMenu, className: nodeClassName })\n              ) : (\n                <TreeNodeRenderer {...nodeProps} onContextMenu={onContextMenu} className={nodeClassName} />\n              )}\n            </TreeNodeRendererContextProvider>\n          );\n        }}\n        nodeHeight={nodeHeight}\n      />\n      {renderContextMenu()}\n    </div>\n  );\n}\n\n/**\n * Props for [[FilterableTreeRenderer]] component.\n * @beta\n */\nexport interface FilterableTreeRendererProps extends Omit<TreeRendererProps, \"nodeLoader\" | \"nodeRenderer\"> {\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>;\n  nodeRenderer: (props: PresentationTreeNodeRendererProps) => React.ReactNode;\n}\n/**\n * Base tree renderer for trees with enabled hierarchy level filtering.\n * @beta\n */\nexport function FilterableTreeRenderer({ nodeRenderer, nodeLoader, ...restProps }: FilterableTreeRendererProps) {\n  const { onClearFilterClick, onFilterClick, filterDialog } = useFilterablePresentationTree({ nodeLoader });\n\n  return (\n    <div>\n      <TreeRenderer\n        {...restProps}\n        nodeLoader={nodeLoader}\n        nodeRenderer={(props) => {\n          return nodeRenderer({ ...props, onClearFilterClick, onFilterClick });\n        }}\n      />\n      {filterDialog}\n    </div>\n  );\n}\n\nfunction getNodeHeight(density: \"default\" | \"enlarged\", defaultHeight: ComponentsTreeRendererProps[\"nodeHeight\"]) {\n  switch (density) {\n    case \"default\":\n      return defaultHeight;\n    case \"enlarged\":\n      return () => 43;\n  }\n}\n"]}
+{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/TreeRenderer.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 \"./TreeRenderer.scss\";\nimport classNames from \"classnames\";\nimport { TreeRenderer as ComponentsTreeRenderer, TreeNodeRenderer } from \"@itwin/components-react\";\nimport { useFilterablePresentationTree } from \"@itwin/presentation-components\";\nimport { useContextMenu } from \"./ContextMenu\";\nimport { TreeNodeRendererContextProvider } from \"./TreeNodeRenderer\";\n\nimport type { IPresentationTreeDataProvider, PresentationTreeNodeRendererProps } from \"@itwin/presentation-components\";\nimport type { AbstractTreeNodeLoaderWithProvider, TreeRendererProps as ComponentsTreeRendererProps } from \"@itwin/components-react\";\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer\";\nimport type { TreeContextMenuProps } from \"./ContextMenu\";\nimport type { UsageTrackedFeatures } from \"./UseFeatureReporting\";\n/**\n * Base props for [[TreeRenderer]] component.\n * @public\n */\nexport interface TreeRendererBaseProps extends TreeContextMenuProps, TreeNodeRendererProps {\n  /**\n   * Modifies the density of tree nodes. `enlarged` tree nodes have bigger height and bigger button hit boxes.\n   */\n  density?: \"default\" | \"enlarged\";\n}\n\n/**\n * Props for [[TreeRenderer]] component.\n * @public\n */\nexport type TreeRendererProps = ComponentsTreeRendererProps & TreeRendererBaseProps;\n\n/**\n * Base tree renderer for visibility trees.\n * @public\n */\nexport function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }: TreeRendererProps) {\n  const { onContextMenu, renderContextMenu } = useContextMenu({ contextMenuItems });\n\n  const nodeHeight = getNodeHeight(density ?? \"default\", restProps.nodeHeight);\n  const className = classNames(\"tree-widget-tree-nodes-list\", { [\"enlarge\"]: density === \"enlarged\" });\n\n  return (\n    <div className={className}>\n      <ComponentsTreeRenderer\n        {...restProps}\n        nodeRenderer={(nodeProps) => {\n          const nodeClassName = nodeProps.node.numChildren === 0 ? \"without-expander\" : undefined;\n          return (\n            <TreeNodeRendererContextProvider node={nodeProps.node} nodeLabelRenderer={nodeLabelRenderer}>\n              {nodeRenderer ? (\n                nodeRenderer({ ...nodeProps, onContextMenu, className: nodeClassName })\n              ) : (\n                <TreeNodeRenderer {...nodeProps} onContextMenu={onContextMenu} className={nodeClassName} />\n              )}\n            </TreeNodeRendererContextProvider>\n          );\n        }}\n        nodeHeight={nodeHeight}\n      />\n      {renderContextMenu()}\n    </div>\n  );\n}\n\n/**\n * Props for [[FilterableTreeRenderer]] node renderer.\n * @beta\n */\nexport interface FilterableTreeNodeRendererProps extends PresentationTreeNodeRendererProps {\n  reportUsage?: (props: { featureId?: UsageTrackedFeatures; reportInteraction: boolean }) => void;\n}\n\n/**\n * Props for [[FilterableTreeRenderer]] component.\n * @beta\n */\nexport interface FilterableTreeRendererProps extends Omit<TreeRendererProps, \"nodeLoader\" | \"nodeRenderer\"> {\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>;\n  nodeRenderer: (props: FilterableTreeNodeRendererProps) => React.ReactNode;\n  reportUsage?: (props: { featureId?: UsageTrackedFeatures; reportInteraction: boolean }) => void;\n}\n/**\n * Base tree renderer for trees with enabled hierarchy level filtering.\n * @beta\n */\nexport function FilterableTreeRenderer({ nodeRenderer, nodeLoader, reportUsage, ...restProps }: FilterableTreeRendererProps) {\n  const { onClearFilterClick, onFilterClick, filterDialog } = useFilterablePresentationTree({\n    nodeLoader,\n    onFilterApplied: () => {\n      reportUsage?.({ featureId: \"hierarchy-level-filtering\", reportInteraction: true });\n    },\n  });\n\n  return (\n    <div>\n      <TreeRenderer\n        {...restProps}\n        nodeLoader={nodeLoader}\n        nodeRenderer={(props) => {\n          return nodeRenderer({\n            ...props,\n            reportUsage,\n            onFilterClick: (nodeId: string) => {\n              reportUsage?.({ reportInteraction: true });\n              onFilterClick(nodeId);\n            },\n            onClearFilterClick: (nodeId: string) => {\n              reportUsage?.({ reportInteraction: true });\n              onClearFilterClick(nodeId);\n            },\n          });\n        }}\n      />\n      {filterDialog}\n    </div>\n  );\n}\n\nfunction getNodeHeight(density: \"default\" | \"enlarged\", defaultHeight: ComponentsTreeRendererProps[\"nodeHeight\"]) {\n  switch (density) {\n    case \"default\":\n      return defaultHeight;\n    case \"enlarged\":\n      return () => 43;\n  }\n}\n"]}

package/lib/esm/components/trees/common/TreeRenderer.scss

@@ -58,7 +58,7 @@
 
     .core-tree-node {
       &.without-expander {
-        margin-left:  var(--enlarged-node-without-expander-margin);
+        margin-left: var(--enlarged-node-without-expander-margin);
       }
 
       > .presentation-components-node-action-buttons {

package/lib/esm/components/trees/common/UseFeatureReporting.d.ts

@@ -0,0 +1,23 @@
+/** @internal */
+export interface UseFeatureReportingProps {
+    treeIdentifier: string;
+    onFeatureUsed?: (featureId: string) => void;
+}
+/** @internal */
+export interface UseFeatureReportingResult {
+    reportUsage: (props: {
+        featureId?: UsageTrackedFeatures;
+        reportInteraction: boolean;
+    }) => void;
+}
+/**
+ * Features that are tracked for usage.
+ * @internal
+ */
+export type UsageTrackedFeatures = "visibility-change" | "hierarchy-level-filtering" | "filtering" | "hierarchy-level-size-limit-hit" | "zoom-to-node";
+/**
+ * Enables feature reporting for a tree component.
+ * @internal
+ */
+export declare function useFeatureReporting(props: UseFeatureReportingProps): UseFeatureReportingResult;
+//# sourceMappingURL=UseFeatureReporting.d.ts.map

package/lib/esm/components/trees/common/UseFeatureReporting.js

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * Enables feature reporting for a tree component.
+ * @internal
+ */
+export function useFeatureReporting(props) {
+    const { treeIdentifier, onFeatureUsed } = props;
+    const onFeatureUsedRef = useRef(onFeatureUsed);
+    useEffect(() => {
+        onFeatureUsedRef.current = onFeatureUsed;
+    }, [onFeatureUsed]);
+    const reportUsage = useCallback(({ featureId, reportInteraction }) => {
+        if (reportInteraction !== false) {
+            onFeatureUsedRef.current?.(`use-${treeIdentifier}`);
+        }
+        if (featureId) {
+            onFeatureUsedRef.current?.(`${treeIdentifier}-${featureId}`);
+        }
+    }, [treeIdentifier]);
+    return { reportUsage };
+}
+//# sourceMappingURL=UseFeatureReporting.js.map

package/lib/esm/components/trees/common/UseFeatureReporting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseFeatureReporting.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/UseFeatureReporting.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAmBvD;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,OAAO,GAAG,aAAa,CAAC;IAC3C,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAoE,EAAE,EAAE;QACrG,IAAI,iBAAiB,KAAK,KAAK,EAAE;YAC/B,gBAAgB,CAAC,OAAO,EAAE,CAAC,OAAO,cAAc,EAAE,CAAC,CAAC;SACrD;QACD,IAAI,SAAS,EAAE;YACb,gBAAgB,CAAC,OAAO,EAAE,CAAC,GAAG,cAAc,IAAI,SAAS,EAAE,CAAC,CAAC;SAC9D;IACH,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACzB,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 { useCallback, useEffect, useRef } from \"react\";\n\n/** @internal */\nexport interface UseFeatureReportingProps {\n  treeIdentifier: string;\n  onFeatureUsed?: (featureId: string) => void;\n}\n\n/** @internal */\nexport interface UseFeatureReportingResult {\n  reportUsage: (props: { featureId?: UsageTrackedFeatures; reportInteraction: boolean }) => void;\n}\n\n/**\n * Features that are tracked for usage.\n * @internal\n */\nexport type UsageTrackedFeatures = \"visibility-change\" | \"hierarchy-level-filtering\" | \"filtering\" | \"hierarchy-level-size-limit-hit\" | \"zoom-to-node\";\n\n/**\n * Enables feature reporting for a tree component.\n * @internal\n */\nexport function useFeatureReporting(props: UseFeatureReportingProps): UseFeatureReportingResult {\n  const { treeIdentifier, onFeatureUsed } = props;\n  const onFeatureUsedRef = useRef(onFeatureUsed);\n\n  useEffect(() => {\n    onFeatureUsedRef.current = onFeatureUsed;\n  }, [onFeatureUsed]);\n\n  const reportUsage = useCallback(\n    ({ featureId, reportInteraction }: { featureId?: UsageTrackedFeatures; reportInteraction: boolean }) => {\n      if (reportInteraction !== false) {\n        onFeatureUsedRef.current?.(`use-${treeIdentifier}`);\n      }\n      if (featureId) {\n        onFeatureUsedRef.current?.(`${treeIdentifier}-${featureId}`);\n      }\n    },\n    [treeIdentifier],\n  );\n\n  return { reportUsage };\n}\n"]}

package/lib/esm/components/trees/common/UsePerformanceReporting.d.ts

@@ -0,0 +1,18 @@
+/** @internal */
+export interface UsePerformanceReportingProps {
+    treeIdentifier: string;
+    onPerformanceMeasured?: (featureId: string, duration: number) => void;
+}
+/** @internal */
+export interface UsePerformanceReportingResult {
+    onNodeLoaded?: (props: {
+        node: string;
+        duration: number;
+    }) => void;
+}
+/**
+ * Enables performance reporting for a tree component.
+ * @internal
+ */
+export declare function usePerformanceReporting(props: UsePerformanceReportingProps): UsePerformanceReportingResult;
+//# sourceMappingURL=UsePerformanceReporting.d.ts.map

package/lib/esm/components/trees/common/UsePerformanceReporting.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/**
+ * Enables performance reporting for a tree component.
+ * @internal
+ */
+export function usePerformanceReporting(props) {
+    const { treeIdentifier, onPerformanceMeasured } = props;
+    if (!onPerformanceMeasured) {
+        return { onNodeLoaded: undefined };
+    }
+    return {
+        onNodeLoaded: ({ node, duration }) => {
+            const feature = `${treeIdentifier}-${node === "root" ? "initial-load" : "hierarchy-level-load"}`;
+            onPerformanceMeasured(feature, duration);
+        },
+    };
+}
+//# sourceMappingURL=UsePerformanceReporting.js.map

package/lib/esm/components/trees/common/UsePerformanceReporting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsePerformanceReporting.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/UsePerformanceReporting.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAahG;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EAAE,cAAc,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC;IAExD,IAAI,CAAC,qBAAqB,EAAE;QAC1B,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;KACpC;IAED,OAAO;QACL,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAsC,EAAE,EAAE;YACvE,MAAM,OAAO,GAAG,GAAG,cAAc,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC;YACjG,qBAAqB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC3C,CAAC;KACF,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 *--------------------------------------------------------------------------------------------*/\n\n/** @internal */\nexport interface UsePerformanceReportingProps {\n  treeIdentifier: string;\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n}\n\n/** @internal */\nexport interface UsePerformanceReportingResult {\n  onNodeLoaded?: (props: { node: string; duration: number }) => void;\n}\n\n/**\n * Enables performance reporting for a tree component.\n * @internal\n */\nexport function usePerformanceReporting(props: UsePerformanceReportingProps): UsePerformanceReportingResult {\n  const { treeIdentifier, onPerformanceMeasured } = props;\n\n  if (!onPerformanceMeasured) {\n    return { onNodeLoaded: undefined };\n  }\n\n  return {\n    onNodeLoaded: ({ node, duration }: { node: string; duration: number }) => {\n      const feature = `${treeIdentifier}-${node === \"root\" ? \"initial-load\" : \"hierarchy-level-load\"}`;\n      onPerformanceMeasured(feature, duration);\n    },\n  };\n}\n"]}

package/lib/esm/components/trees/common/UseVisibilityTreeState.d.ts

@@ -1,9 +1,11 @@
 import { VisibilityTreeEventHandler } from "../VisibilityTreeEventHandler";
+import { ReportingTreeEventHandler } from "./ReportingTreeEventHandler";
 import type { IModelConnection } from "@itwin/core-frontend";
 import type { Ruleset } from "@itwin/presentation-common";
 import type { IFilteredPresentationTreeDataProvider, UsePresentationTreeStateProps } from "@itwin/presentation-components";
 import type { IVisibilityHandler, VisibilityTreeEventHandlerParams, VisibilityTreeSelectionPredicate } from "../VisibilityTreeEventHandler";
 import type { VisibilityTreeFilterInfo } from "./Types";
+import type { UsageTrackedFeatures } from "./UseFeatureReporting";
 /**
  * Props for [[useVisibilityTreeState]] hook.
  * @beta
@@ -25,6 +27,11 @@ export interface UseVisibilityTreeStateProps extends Omit<UsePresentationTreeSta
     eventHandler?: (props: VisibilityTreeEventHandlerParams) => VisibilityTreeEventHandler;
     /** The limit for how many items should be loaded for a single hierarchy level. */
     hierarchyLevelSizeLimit?: number;
+    /** Callback called when a feature is used. */
+    reportUsage?: (props: {
+        featureId?: UsageTrackedFeatures;
+        reportInteraction: boolean;
+    }) => void;
 }
 /**
  * Custom hook for creating visibility tree component state.
@@ -32,5 +39,5 @@ export interface UseVisibilityTreeStateProps extends Omit<UsePresentationTreeSta
  * @returns `undefined` on first render cycle. On all other render cycles state is initialized and valid object is returned.
  * @beta
  */
-export declare function useVisibilityTreeState({ imodel, ruleset, filterInfo, onFilterChange, visibilityHandler, selectionPredicate, eventHandler, ...props }: UseVisibilityTreeStateProps): import("@itwin/presentation-components").UsePresentationTreeStateResult<VisibilityTreeEventHandler> | undefined;
+export declare function useVisibilityTreeState({ imodel, ruleset, filterInfo, onFilterChange, visibilityHandler, selectionPredicate, eventHandler, reportUsage, ...props }: UseVisibilityTreeStateProps): import("@itwin/presentation-components").UsePresentationTreeStateResult<VisibilityTreeEventHandler | ReportingTreeEventHandler> | undefined;
 //# sourceMappingURL=UseVisibilityTreeState.d.ts.map

package/lib/esm/components/trees/common/UseVisibilityTreeState.js

@@ -5,13 +5,14 @@
 import { useCallback, useEffect } from "react";
 import { usePresentationTreeState } from "@itwin/presentation-components";
 import { VisibilityTreeEventHandler } from "../VisibilityTreeEventHandler";
+import { ReportingTreeEventHandler } from "./ReportingTreeEventHandler";
 /**
  * Custom hook for creating visibility tree component state.
  *
  * @returns `undefined` on first render cycle. On all other render cycles state is initialized and valid object is returned.
  * @beta
  */
-export function useVisibilityTreeState({ imodel, ruleset, filterInfo, onFilterChange, visibilityHandler, selectionPredicate, eventHandler, ...props }) {
+export function useVisibilityTreeState({ imodel, ruleset, filterInfo, onFilterChange, visibilityHandler, selectionPredicate, eventHandler, reportUsage, ...props }) {
     const eventHandlerFactory = useCallback((params) => {
         if (!visibilityHandler) {
             return undefined;
@@ -21,8 +22,9 @@ export function useVisibilityTreeState({ imodel, ruleset, filterInfo, onFilterCh
             visibilityHandler,
             selectionPredicate,
         };
-        return eventHandler ? eventHandler(eventHandlerProps) : new VisibilityTreeEventHandler(eventHandlerProps);
-    }, [visibilityHandler, selectionPredicate, eventHandler]);
+        const handler = eventHandler ? eventHandler(eventHandlerProps) : new VisibilityTreeEventHandler(eventHandlerProps);
+        return reportUsage ? new ReportingTreeEventHandler({ eventHandler: handler, reportUsage, nodeLoader: eventHandlerProps.nodeLoader }) : handler;
+    }, [visibilityHandler, selectionPredicate, eventHandler, reportUsage]);
     const treeState = usePresentationTreeState({
         ...props,
         imodel,

package/lib/esm/components/trees/common/UseVisibilityTreeState.js.map

@@ -1 +1 @@
-{"version":3,"file":"UseVisibilityTreeState.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/UseVisibilityTreeState.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AA+B3E;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,EACZ,GAAG,KAAK,EACoB;IAC5B,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,MAAyC,EAAE,EAAE;QAC5C,IAAI,CAAC,iBAAiB,EAAE;YACtB,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,iBAAiB,GAAqC;YAC1D,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,iBAAiB;YACjB,kBAAkB;SACnB,CAAC;QAEF,OAAO,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,0BAA0B,CAAC,iBAAiB,CAAC,CAAC;IAC5G,CAAC,EACD,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,YAAY,CAAC,CACtD,CAAC;IAEF,MAAM,SAAS,GAAG,wBAAwB,CAAC;QACzC,GAAG,KAAK;QACR,MAAM;QACN,OAAO;QACP,mBAAmB;QACnB,eAAe,EAAE,UAAU,EAAE,MAAM;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,UAAU,CAAC,MAAM;gBACzB,gBAAgB,EAAE,UAAU,EAAE,gBAAgB;aAC/C;YACH,CAAC,CAAC,SAAS;KACd,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,IAAI,cAAc,CAAC,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC;IAC3H,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7G,OAAO,SAAS,CAAC;AACnB,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 { useCallback, useEffect } from \"react\";\nimport { usePresentationTreeState } from \"@itwin/presentation-components\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { IFilteredPresentationTreeDataProvider, PresentationTreeEventHandlerProps, UsePresentationTreeStateProps } from \"@itwin/presentation-components\";\nimport type { IVisibilityHandler, VisibilityTreeEventHandlerParams, VisibilityTreeSelectionPredicate } from \"../VisibilityTreeEventHandler\";\nimport type { VisibilityTreeFilterInfo } from \"./Types\";\n\n/**\n * Props for [[useVisibilityTreeState]] hook.\n * @beta\n */\nexport interface UseVisibilityTreeStateProps extends Omit<UsePresentationTreeStateProps<VisibilityTreeEventHandler>, \"rulesetOrId\"> {\n  /** iModel to pull data from. */\n  imodel: IModelConnection;\n  /** Presentation rules to use when pulling data from iModel. */\n  ruleset: Ruleset;\n  /** Visibility handler that will be used to determine tree node visibility or change it. */\n  visibilityHandler?: IVisibilityHandler;\n  /** Info about filter that should be applied on tree. */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /** Callback that is invoked when filter is applied, changed or removed. */\n  onFilterChange?: (filteredDataProvider?: IFilteredPresentationTreeDataProvider, matchesCount?: number) => void;\n  /** Callback that is used to determine if node can be selected. If not provided all nodes are selectable. */\n  selectionPredicate?: VisibilityTreeSelectionPredicate;\n  /** Factory for custom `VisibilityTreeEventHandler`. Defaults to `VisibilityTreeEventHandler`. */\n  eventHandler?: (props: VisibilityTreeEventHandlerParams) => VisibilityTreeEventHandler;\n  /** The limit for how many items should be loaded for a single hierarchy level. */\n  hierarchyLevelSizeLimit?: number;\n}\n\n/**\n * Custom hook for creating visibility tree component state.\n *\n * @returns `undefined` on first render cycle. On all other render cycles state is initialized and valid object is returned.\n * @beta\n */\nexport function useVisibilityTreeState({\n  imodel,\n  ruleset,\n  filterInfo,\n  onFilterChange,\n  visibilityHandler,\n  selectionPredicate,\n  eventHandler,\n  ...props\n}: UseVisibilityTreeStateProps) {\n  const eventHandlerFactory = useCallback(\n    (params: PresentationTreeEventHandlerProps) => {\n      if (!visibilityHandler) {\n        return undefined;\n      }\n\n      const eventHandlerProps: VisibilityTreeEventHandlerParams = {\n        nodeLoader: params.nodeLoader,\n        visibilityHandler,\n        selectionPredicate,\n      };\n\n      return eventHandler ? eventHandler(eventHandlerProps) : new VisibilityTreeEventHandler(eventHandlerProps);\n    },\n    [visibilityHandler, selectionPredicate, eventHandler],\n  );\n\n  const treeState = usePresentationTreeState({\n    ...props,\n    imodel,\n    ruleset,\n    eventHandlerFactory,\n    filteringParams: filterInfo?.filter\n      ? {\n          filter: filterInfo.filter,\n          activeMatchIndex: filterInfo?.activeMatchIndex,\n        }\n      : undefined,\n  });\n\n  useEffect(() => {\n    onFilterChange && onFilterChange(treeState?.filteringResult?.filteredProvider, treeState?.filteringResult?.matchesCount);\n  }, [treeState?.filteringResult?.matchesCount, treeState?.filteringResult?.filteredProvider, onFilterChange]);\n\n  return treeState;\n}\n"]}
+{"version":3,"file":"UseVisibilityTreeState.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/UseVisibilityTreeState.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAiCxE;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACoB;IAC5B,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,MAAyC,EAAE,EAAE;QAC5C,IAAI,CAAC,iBAAiB,EAAE;YACtB,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,iBAAiB,GAAqC;YAC1D,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,iBAAiB;YACjB,kBAAkB;SACnB,CAAC;QAEF,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,0BAA0B,CAAC,iBAAiB,CAAC,CAAC;QACnH,OAAO,WAAW,CAAC,CAAC,CAAC,IAAI,yBAAyB,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,iBAAiB,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACjJ,CAAC,EACD,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,YAAY,EAAE,WAAW,CAAC,CACnE,CAAC;IAEF,MAAM,SAAS,GAAG,wBAAwB,CAAC;QACzC,GAAG,KAAK;QACR,MAAM;QACN,OAAO;QACP,mBAAmB;QACnB,eAAe,EAAE,UAAU,EAAE,MAAM;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,UAAU,CAAC,MAAM;gBACzB,gBAAgB,EAAE,UAAU,EAAE,gBAAgB;aAC/C;YACH,CAAC,CAAC,SAAS;KACd,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,IAAI,cAAc,CAAC,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC;IAC3H,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7G,OAAO,SAAS,CAAC;AACnB,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 { useCallback, useEffect } from \"react\";\nimport { usePresentationTreeState } from \"@itwin/presentation-components\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { ReportingTreeEventHandler } from \"./ReportingTreeEventHandler\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { IFilteredPresentationTreeDataProvider, PresentationTreeEventHandlerProps, UsePresentationTreeStateProps } from \"@itwin/presentation-components\";\nimport type { IVisibilityHandler, VisibilityTreeEventHandlerParams, VisibilityTreeSelectionPredicate } from \"../VisibilityTreeEventHandler\";\nimport type { VisibilityTreeFilterInfo } from \"./Types\";\nimport type { UsageTrackedFeatures } from \"./UseFeatureReporting\";\n/**\n * Props for [[useVisibilityTreeState]] hook.\n * @beta\n */\nexport interface UseVisibilityTreeStateProps extends Omit<UsePresentationTreeStateProps<VisibilityTreeEventHandler>, \"rulesetOrId\"> {\n  /** iModel to pull data from. */\n  imodel: IModelConnection;\n  /** Presentation rules to use when pulling data from iModel. */\n  ruleset: Ruleset;\n  /** Visibility handler that will be used to determine tree node visibility or change it. */\n  visibilityHandler?: IVisibilityHandler;\n  /** Info about filter that should be applied on tree. */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /** Callback that is invoked when filter is applied, changed or removed. */\n  onFilterChange?: (filteredDataProvider?: IFilteredPresentationTreeDataProvider, matchesCount?: number) => void;\n  /** Callback that is used to determine if node can be selected. If not provided all nodes are selectable. */\n  selectionPredicate?: VisibilityTreeSelectionPredicate;\n  /** Factory for custom `VisibilityTreeEventHandler`. Defaults to `VisibilityTreeEventHandler`. */\n  eventHandler?: (props: VisibilityTreeEventHandlerParams) => VisibilityTreeEventHandler;\n  /** The limit for how many items should be loaded for a single hierarchy level. */\n  hierarchyLevelSizeLimit?: number;\n  /** Callback called when a feature is used. */\n  reportUsage?: (props: { featureId?: UsageTrackedFeatures; reportInteraction: boolean }) => void;\n}\n\n/**\n * Custom hook for creating visibility tree component state.\n *\n * @returns `undefined` on first render cycle. On all other render cycles state is initialized and valid object is returned.\n * @beta\n */\nexport function useVisibilityTreeState({\n  imodel,\n  ruleset,\n  filterInfo,\n  onFilterChange,\n  visibilityHandler,\n  selectionPredicate,\n  eventHandler,\n  reportUsage,\n  ...props\n}: UseVisibilityTreeStateProps) {\n  const eventHandlerFactory = useCallback(\n    (params: PresentationTreeEventHandlerProps) => {\n      if (!visibilityHandler) {\n        return undefined;\n      }\n\n      const eventHandlerProps: VisibilityTreeEventHandlerParams = {\n        nodeLoader: params.nodeLoader,\n        visibilityHandler,\n        selectionPredicate,\n      };\n\n      const handler = eventHandler ? eventHandler(eventHandlerProps) : new VisibilityTreeEventHandler(eventHandlerProps);\n      return reportUsage ? new ReportingTreeEventHandler({ eventHandler: handler, reportUsage, nodeLoader: eventHandlerProps.nodeLoader }) : handler;\n    },\n    [visibilityHandler, selectionPredicate, eventHandler, reportUsage],\n  );\n\n  const treeState = usePresentationTreeState({\n    ...props,\n    imodel,\n    ruleset,\n    eventHandlerFactory,\n    filteringParams: filterInfo?.filter\n      ? {\n          filter: filterInfo.filter,\n          activeMatchIndex: filterInfo?.activeMatchIndex,\n        }\n      : undefined,\n  });\n\n  useEffect(() => {\n    onFilterChange && onFilterChange(treeState?.filteringResult?.filteredProvider, treeState?.filteringResult?.matchesCount);\n  }, [treeState?.filteringResult?.matchesCount, treeState?.filteringResult?.filteredProvider, onFilterChange]);\n\n  return treeState;\n}\n"]}

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

@@ -17,6 +17,19 @@ export interface ExternalSourcesTreeProps extends BaseTreeProps {
      * @beta
      */
     hierarchyLevelConfig?: HierarchyLevelConfig;
+    /**
+     * Reports performance of a feature.
+     * @param featureId ID of the feature.
+     * @param elapsedTime Elapsed time of the feature.
+     * @beta
+     */
+    onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;
+    /**
+     * Callback that is invoked when a tracked feature is used.
+     * @param featureId ID of the feature.
+     * @beta
+     */
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * Tree which displays a hierarchy of ExternalSources and their elements.

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

@@ -4,11 +4,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import "../VisibilityTreeBase.scss";
+import { useCallback } from "react";
 import { SelectionMode } from "@itwin/components-react";
-import { PresentationTree, PresentationTreeNodeRenderer, UnifiedSelectionTreeEventHandler, usePresentationTreeState, } from "@itwin/presentation-components";
+import { PresentationTree, PresentationTreeNodeRenderer, UnifiedSelectionTreeEventHandler, usePresentationTreeState } from "@itwin/presentation-components";
+import { ReportingTreeEventHandler } from "../common/ReportingTreeEventHandler";
 import { FilterableTreeRenderer, TreeRenderer } from "../common/TreeRenderer";
+import { useFeatureReporting } from "../common/UseFeatureReporting";
+import { usePerformanceReporting } from "../common/UsePerformanceReporting";
 import { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from "../common/Utils";
 import * as RULESET_EXTERNAL_SOURCES_IMPORT from "./ExternalSources.json";
+import { ExternalSourcesTreeComponent } from "./ExternalSourcesTreeComponent";
 /**
  * Presentation rules used by ControlledCategoriesTree
  * @internal
@@ -20,15 +25,29 @@ const PAGING_SIZE = 20;
  * @alpha
  */
 export function ExternalSourcesTree(props) {
-    const { hierarchyLevelConfig, contextMenuItems, nodeLabelRenderer, density } = props;
+    const { hierarchyLevelConfig, contextMenuItems, nodeLabelRenderer, density, onFeatureUsed } = props;
+    const { reportUsage } = useFeatureReporting({ treeIdentifier: ExternalSourcesTreeComponent.id, onFeatureUsed });
+    const { onNodeLoaded } = usePerformanceReporting({
+        treeIdentifier: ExternalSourcesTreeComponent.id,
+        onPerformanceMeasured: props.onPerformanceMeasured,
+    });
+    const eventHandlerFactory = useCallback((handlerProps) => {
+        const eventHandler = new UnifiedSelectionTreeEventHandler({ nodeLoader: handlerProps.nodeLoader });
+        return new ReportingTreeEventHandler({
+            nodeLoader: handlerProps.nodeLoader,
+            eventHandler,
+            reportUsage,
+        });
+    }, [reportUsage]);
     const state = usePresentationTreeState({
         imodel: props.iModel,
         ruleset: RULESET_EXTERNAL_SOURCES,
         pagingSize: PAGING_SIZE,
-        eventHandlerFactory: unifiedSelectionTreeEventHandlerFactory,
+        eventHandlerFactory,
         customizeTreeNodeItem,
         hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
         enableHierarchyAutoUpdate: true,
+        onNodeLoaded,
     });
     const treeRendererProps = {
         contextMenuItems,
@@ -40,9 +59,6 @@ export function ExternalSourcesTree(props) {
     }
     return (_jsx("div", { className: "tree-widget-tree-container", children: _jsx(PresentationTree, { width: props.width, height: props.height, state: state, selectionMode: props.selectionMode ?? SelectionMode.Extended, iconsEnabled: true, treeRenderer: (treeProps) => hierarchyLevelConfig?.isFilteringEnabled ? (_jsx(FilterableTreeRenderer, { ...treeProps, ...treeRendererProps, nodeLoader: state.nodeLoader, nodeRenderer: (nodeRendererProps) => _jsx(PresentationTreeNodeRenderer, { ...nodeRendererProps }) })) : (_jsx(TreeRenderer, { ...treeProps, ...treeRendererProps })) }) }));
 }
-function unifiedSelectionTreeEventHandlerFactory(props) {
-    return new UnifiedSelectionTreeEventHandler({ nodeLoader: props.nodeLoader });
-}
 const customizeTreeNodeItem = combineTreeNodeItemCustomizations([
     addCustomTreeNodeItemLabelRenderer,
     (item, node) => {

package/lib/esm/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;;;gGAGgG;AAEhG,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EACL,gBAAgB,EAAE,4BAA4B,EAAE,gCAAgC,EAAE,wBAAwB,GAC3G,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAE,kCAAkC,EAAE,iCAAiC,EAAE,MAAM,iBAAiB,CAAC;AACxG,OAAO,KAAK,+BAA+B,MAAM,wBAAwB,CAAC;AAK1E;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,+BAA0C,CAAC;AAEnF,MAAM,WAAW,GAAG,EAAE,CAAC;AAcvB;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAErF,MAAM,KAAK,GAAG,wBAAwB,CAAC;QACrC,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,wBAAwB;QACjC,UAAU,EAAE,WAAW;QACvB,mBAAmB,EAAE,uCAAuC;QAC5D,qBAAqB;QACrB,uBAAuB,EAAE,oBAAoB,EAAE,SAAS;QACxD,yBAAyB,EAAE,IAAI;KAChC,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,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,aAAa,CAAC,QAAQ,EAC5D,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAC1B,oBAAoB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CACzC,KAAC,sBAAsB,OACjB,SAAS,KACT,iBAAiB,EACrB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,YAAY,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,iBAAiB,GAAI,GAC5F,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OAAK,SAAS,KAAM,iBAAiB,GAAI,CACvD,GAEH,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,uCAAuC,CAAC,KAAwC;IACvF,OAAO,IAAI,gCAAgC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;AAChF,CAAC;AAED,MAAM,qBAAqB,GAAG,iCAAiC,CAAC;IAC9D,kCAAkC;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 {\n  PresentationTree, PresentationTreeNodeRenderer, UnifiedSelectionTreeEventHandler, usePresentationTreeState,\n} 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    enableHierarchyAutoUpdate: true,\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"]}
+{"version":3,"file":"ExternalSourcesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTree.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 \"../VisibilityTreeBase.scss\";\nimport { useCallback } from \"react\";\nimport { SelectionMode } from \"@itwin/components-react\";\nimport { PresentationTree, PresentationTreeNodeRenderer, UnifiedSelectionTreeEventHandler, usePresentationTreeState } from \"@itwin/presentation-components\";\nimport { ReportingTreeEventHandler } from \"../common/ReportingTreeEventHandler\";\nimport { FilterableTreeRenderer, TreeRenderer } from \"../common/TreeRenderer\";\nimport { useFeatureReporting } from \"../common/UseFeatureReporting\";\nimport { usePerformanceReporting } from \"../common/UsePerformanceReporting\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport * as RULESET_EXTERNAL_SOURCES_IMPORT from \"./ExternalSources.json\";\nimport { ExternalSourcesTreeComponent } from \"./ExternalSourcesTreeComponent\";\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   * Reports performance of a feature.\n   * @param featureId ID of the feature.\n   * @param elapsedTime Elapsed time of the feature.\n   * @beta\n   */\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  /**\n   * Callback that is invoked when a tracked feature is used.\n   * @param featureId ID of the feature.\n   * @beta\n   */\n  onFeatureUsed?: (feature: string) => void;\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, onFeatureUsed } = props;\n\n  const { reportUsage } = useFeatureReporting({ treeIdentifier: ExternalSourcesTreeComponent.id, onFeatureUsed });\n  const { onNodeLoaded } = usePerformanceReporting({\n    treeIdentifier: ExternalSourcesTreeComponent.id,\n    onPerformanceMeasured: props.onPerformanceMeasured,\n  });\n\n  const eventHandlerFactory = useCallback(\n    (handlerProps: PresentationTreeEventHandlerProps) => {\n      const eventHandler = new UnifiedSelectionTreeEventHandler({ nodeLoader: handlerProps.nodeLoader });\n      return new ReportingTreeEventHandler({\n        nodeLoader: handlerProps.nodeLoader,\n        eventHandler,\n        reportUsage,\n      });\n    },\n    [reportUsage],\n  );\n\n  const state = usePresentationTreeState({\n    imodel: props.iModel,\n    ruleset: RULESET_EXTERNAL_SOURCES,\n    pagingSize: PAGING_SIZE,\n    eventHandlerFactory,\n    customizeTreeNodeItem,\n    hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,\n    enableHierarchyAutoUpdate: true,\n    onNodeLoaded,\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\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([\n  addCustomTreeNodeItemLabelRenderer,\n  (item, node) => {\n    item.icon = node.extendedData?.imageId;\n  },\n]);\n"]}

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

@@ -16,6 +16,19 @@ export interface IModelContentTreeProps extends BaseTreeProps {
      * @beta
      */
     hierarchyLevelConfig?: HierarchyLevelConfig;
+    /**
+     * Reports performance of a feature.
+     * @param featureId ID of the feature.
+     * @param elapsedTime Elapsed time of the feature.
+     * @beta
+     */
+    onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;
+    /**
+     * Callback that is invoked when a tracked feature is used.
+     * @param featureId ID of the feature.
+     * @beta
+     */
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * A tree that shows all iModel content starting from the root Subject, then the hierarchy of child

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

@@ -3,10 +3,15 @@ import { jsx as _jsx } from "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.
  *--------------------------------------------------------------------------------------------*/
-import { SelectionMode } from "@itwin/components-react";
+import { useCallback } from "react";
+import { SelectionMode, TreeEventHandler } from "@itwin/components-react";
 import { PresentationTree, PresentationTreeNodeRenderer, usePresentationTreeState } from "@itwin/presentation-components";
+import { ReportingTreeEventHandler } from "../common/ReportingTreeEventHandler";
 import { FilterableTreeRenderer, TreeRenderer } from "../common/TreeRenderer";
+import { useFeatureReporting } from "../common/UseFeatureReporting";
+import { usePerformanceReporting } from "../common/UsePerformanceReporting";
 import { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from "../common/Utils";
+import { IModelContentTreeComponent } from "./IModelContentTreeComponent";
 /**
  * Presentation rules used by IModelContentTree
  * @internal
@@ -18,7 +23,21 @@ export const RULESET_IMODEL_CONTENT = require("./IModelContent.json"); // eslint
  * @public
  */
 export const IModelContentTree = (props) => {
-    const { iModel, width, height, selectionMode, hierarchyLevelConfig } = props;
+    const { iModel, width, height, selectionMode, hierarchyLevelConfig, onFeatureUsed } = props;
+    const { reportUsage } = useFeatureReporting({ treeIdentifier: IModelContentTreeComponent.id, onFeatureUsed });
+    const { onNodeLoaded } = usePerformanceReporting({
+        treeIdentifier: IModelContentTreeComponent.id,
+        onPerformanceMeasured: props.onPerformanceMeasured,
+    });
+    const eventHandlerFactory = useCallback((handlerProps) => {
+        const nodeLoader = handlerProps.nodeLoader;
+        const eventHandler = new TreeEventHandler({ modelSource: nodeLoader.modelSource, nodeLoader });
+        return new ReportingTreeEventHandler({
+            nodeLoader,
+            eventHandler,
+            reportUsage,
+        });
+    }, [reportUsage]);
     const state = usePresentationTreeState({
         imodel: iModel,
         ruleset: RULESET_IMODEL_CONTENT,
@@ -27,6 +46,8 @@ export const IModelContentTree = (props) => {
         customizeTreeNodeItem,
         hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
         enableHierarchyAutoUpdate: true,
+        onNodeLoaded,
+        eventHandlerFactory,
     });
     const treeRendererProps = {
         contextMenuItems: props.contextMenuItems,

package/lib/esm/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;;;gGAGgG;AAEhG,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1H,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAE,kCAAkC,EAAE,iCAAiC,EAAE,MAAM,iBAAiB,CAAC;AAIxG;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAY,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,yDAAyD;AAczI;;;;GAIG;AACH,MAAM,CAAC,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,wBAAwB,CAAC;QACrC,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,sBAAsB;QAC/B,UAAU,EAAE,EAAE;QACd,mCAAmC,EAAE,IAAI;QACzC,qBAAqB;QACrB,uBAAuB,EAAE,oBAAoB,EAAE,SAAS;QACxD,yBAAyB,EAAE,IAAI;KAChC,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,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,IAAI,aAAa,CAAC,IAAI,EAClD,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAC1B,oBAAoB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CACzC,KAAC,sBAAsB,OACjB,SAAS,KACT,iBAAiB,EACrB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,YAAY,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,iBAAiB,GAAI,GAC5F,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OAAK,SAAS,KAAM,iBAAiB,GAAI,CACvD,GAEH,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,iCAAiC,CAAC,CAAC,kCAAkC,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    enableHierarchyAutoUpdate: true,\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"]}
+{"version":3,"file":"IModelContentTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/imodel-content-tree/IModelContentTree.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 { useCallback } from \"react\";\nimport { SelectionMode, TreeEventHandler } from \"@itwin/components-react\";\nimport { PresentationTree, PresentationTreeNodeRenderer, usePresentationTreeState } from \"@itwin/presentation-components\";\nimport { ReportingTreeEventHandler } from \"../common/ReportingTreeEventHandler\";\nimport { FilterableTreeRenderer, TreeRenderer } from \"../common/TreeRenderer\";\nimport { useFeatureReporting } from \"../common/UseFeatureReporting\";\nimport { usePerformanceReporting } from \"../common/UsePerformanceReporting\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport { IModelContentTreeComponent } from \"./IModelContentTreeComponent\";\n\nimport type { PresentationTreeEventHandlerProps } from \"@itwin/presentation-components\";\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   * Reports performance of a feature.\n   * @param featureId ID of the feature.\n   * @param elapsedTime Elapsed time of the feature.\n   * @beta\n   */\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  /**\n   * Callback that is invoked when a tracked feature is used.\n   * @param featureId ID of the feature.\n   * @beta\n   */\n  onFeatureUsed?: (feature: string) => void;\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, onFeatureUsed } = props;\n\n  const { reportUsage } = useFeatureReporting({ treeIdentifier: IModelContentTreeComponent.id, onFeatureUsed });\n  const { onNodeLoaded } = usePerformanceReporting({\n    treeIdentifier: IModelContentTreeComponent.id,\n    onPerformanceMeasured: props.onPerformanceMeasured,\n  });\n\n  const eventHandlerFactory = useCallback(\n    (handlerProps: PresentationTreeEventHandlerProps) => {\n      const nodeLoader = handlerProps.nodeLoader;\n      const eventHandler = new TreeEventHandler({ modelSource: nodeLoader.modelSource, nodeLoader });\n      return new ReportingTreeEventHandler({\n        nodeLoader,\n        eventHandler,\n        reportUsage,\n      });\n    },\n    [reportUsage],\n  );\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    enableHierarchyAutoUpdate: true,\n    onNodeLoaded,\n    eventHandlerFactory,\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/esm/components/trees/models-tree/ModelsTree.d.ts

@@ -53,6 +53,19 @@ export interface ModelsTreeProps extends BaseFilterableTreeProps {
      * @beta
      */
     hierarchyLevelConfig?: HierarchyLevelConfig;
+    /**
+     * Reports performance of a feature.
+     * @param featureId ID of the feature.
+     * @param elapsedTime Elapsed time of the feature.
+     * @beta
+     */
+    onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;
+    /**
+     * Callback that is invoked when a tracked feature is used.
+     * @param featureId ID of the feature.
+     * @beta
+     */
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * A tree component that shows a subject - model - category - element