@itwin/tree-widget-react 2.1.0 → 2.3.0

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

@@ -8,6 +8,7 @@ import type { IModelConnection } from "@itwin/core-frontend";
 export interface TreeRenderProps {
     density?: "enlarged" | "default";
     onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * Definition of a tree component displayed in [[SelectableTree]]
@@ -25,6 +26,8 @@ export interface TreeDefinition {
      * If callback is `undefined` tree is shown for all iModel connections.
      */
     shouldShow?: (imodel: IModelConnection) => Promise<boolean>;
+    /** Icon to render before tree label in tree selector */
+    startIcon?: React.ReactNode;
 }
 /**
  * Props for [[SelectableTree]]
@@ -34,6 +37,7 @@ export interface SelectableTreeProps {
     trees: TreeDefinition[];
     density?: "enlarged" | "default";
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.

package/lib/esm/components/SelectableTree.js

@@ -24,7 +24,7 @@ export function SelectableTree(props) {
 function SelectableTreeContent(props) {
     const { trees: treeDefinitions, imodel } = props;
     const trees = useActiveTrees(treeDefinitions, imodel);
-    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(TreeSelector, { ...getTreeSelectorProps(trees), density: props.density, onPerformanceMeasured: props.onPerformanceMeasured }) }));
+    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(TreeSelector, { ...getTreeSelectorProps(trees), density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = useState();
@@ -52,6 +52,7 @@ async function getActiveTrees(treeDefinitions, imodel) {
             id: treeDef.id,
             label: treeDef.getLabel(),
             render: treeDef.render,
+            startIcon: treeDef.startIcon,
         };
     };
     return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined);

package/lib/esm/components/SelectableTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../src/components/SelectableTree.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 \"./SelectableTree.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { TreeSelector } from \"./TreeSelector\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector\";\n/**\n * Props for rendering trees\n * @public\n */\nexport interface TreeRenderProps {\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n}\n\n/**\n * Definition of a tree component displayed in [[SelectableTree]]\n * @public\n */\nexport interface TreeDefinition {\n  /** Id of the tree */\n  id: string;\n  /** Callback that is used to get tree label */\n  getLabel: () => string;\n  /** Callback that is used to render tree component */\n  render: (props: TreeRenderProps) => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n}\n\n/**\n * Props for [[SelectableTree]]\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: TreeDefinition[];\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n}\n\n/**\n * A component that renders a tree (combo box) selector and the selected tree component.\n * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n  const imodel = useActiveIModelConnection();\n\n  if (!imodel) {\n    return null;\n  }\n\n  return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: SelectableTreeProps & { imodel: IModelConnection }) {\n  const { trees: treeDefinitions, imodel } = props;\n  const trees = useActiveTrees(treeDefinitions, imodel);\n\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <TreeSelector {...getTreeSelectorProps(trees)} density={props.density} onPerformanceMeasured={props.onPerformanceMeasured} />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n  const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n  useEffect(() => {\n    let disposed = false;\n    void (async () => {\n      const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n      // istanbul ignore else\n      if (!disposed) {\n        setTrees(visibleTrees);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n    };\n  }, [treeDefinitions, imodel]);\n\n  return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: TreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getTreeSelectorProps(trees?: TreeContentDefinition[]): TreeSelectorProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          render: () => (\n            <Delayed>\n              <ProgressLinear indeterminate={true} />\n            </Delayed>\n          ),\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\n          label: \"\",\n          render: () => <FillCentered>{TreeWidget.translate(\"noTrees\")}</FillCentered>,\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const id = setTimeout(() => {\n      setShow(true);\n    }, delay);\n    return () => {\n      clearTimeout(id);\n    };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}
+{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../src/components/SelectableTree.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 \"./SelectableTree.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { TreeSelector } from \"./TreeSelector\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector\";\n/**\n * Props for rendering trees\n * @public\n */\nexport interface TreeRenderProps {\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Definition of a tree component displayed in [[SelectableTree]]\n * @public\n */\nexport interface TreeDefinition {\n  /** Id of the tree */\n  id: string;\n  /** Callback that is used to get tree label */\n  getLabel: () => string;\n  /** Callback that is used to render tree component */\n  render: (props: TreeRenderProps) => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for [[SelectableTree]]\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: TreeDefinition[];\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders a tree (combo box) selector and the selected tree component.\n * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n  const imodel = useActiveIModelConnection();\n\n  if (!imodel) {\n    return null;\n  }\n\n  return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: SelectableTreeProps & { imodel: IModelConnection }) {\n  const { trees: treeDefinitions, imodel } = props;\n  const trees = useActiveTrees(treeDefinitions, imodel);\n\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <TreeSelector\n        {...getTreeSelectorProps(trees)}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n  const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n  useEffect(() => {\n    let disposed = false;\n    void (async () => {\n      const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n      // istanbul ignore else\n      if (!disposed) {\n        setTrees(visibleTrees);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n    };\n  }, [treeDefinitions, imodel]);\n\n  return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: TreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\n      startIcon: treeDef.startIcon,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getTreeSelectorProps(trees?: TreeContentDefinition[]): TreeSelectorProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          render: () => (\n            <Delayed>\n              <ProgressLinear indeterminate={true} />\n            </Delayed>\n          ),\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\n          label: \"\",\n          render: () => <FillCentered>{TreeWidget.translate(\"noTrees\")}</FillCentered>,\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const id = setTimeout(() => {\n      setShow(true);\n    }, delay);\n    return () => {\n      clearTimeout(id);\n    };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}

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

@@ -9,6 +9,7 @@ export interface TreeContentDefinition {
     id: string;
     label: string;
     render: (props: TreeRenderProps) => React.ReactNode;
+    startIcon?: React.ReactNode;
 }
 /**
  * Props for [[TreeSelector]]
@@ -19,6 +20,7 @@ export interface TreeSelectorProps {
     trees: TreeContentDefinition[];
     density?: "enlarged" | "default";
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * A component that accepts a list of trees and renders a select box at the top,

package/lib/esm/components/TreeSelector.js

@@ -16,8 +16,11 @@ export function TreeSelector(props) {
     const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];
     const isEnlarged = props.density === "enlarged";
     const options = useMemo(() => {
-        return props.trees.map((c) => ({ label: c.label, value: c.id }));
+        return props.trees.map((c) => ({ label: c.label, value: c.id, startIcon: c.startIcon }));
     }, [props.trees]);
-    return (_jsxs("div", { className: "presentation-components-tree-selector-content", children: [_jsx("div", { className: "presentation-components-tree-selector-content-header", children: options.length > 0 && (_jsx(Select, { onChange: setSelectedContentId, options: options, value: selectedContent.id, size: isEnlarged ? "large" : "small", itemRenderer: (option, itemProps) => (_jsx(MenuItem, { ...option, isSelected: itemProps.isSelected, size: isEnlarged ? "large" : "default", children: option.label })) })) }), _jsx("div", { className: "presentation-components-tree-selector-content-wrapper", children: selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured }) })] }));
+    return (_jsxs("div", { className: "presentation-components-tree-selector-content", children: [_jsx("div", { className: "presentation-components-tree-selector-content-header", children: options.length > 0 && (_jsx(Select, { options: options, value: selectedContent.id, size: isEnlarged ? "large" : "small", onChange: (treeId) => {
+                        props.onFeatureUsed?.(`choose-${treeId}`);
+                        setSelectedContentId(treeId);
+                    }, itemRenderer: (option, itemProps) => (_jsx(MenuItem, { ...option, isSelected: itemProps.isSelected, size: isEnlarged ? "large" : "default", children: option.label })) })) }), _jsx("div", { className: "presentation-components-tree-selector-content-wrapper", children: selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) })] }));
 }
 //# sourceMappingURL=TreeSelector.js.map

package/lib/esm/components/TreeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../src/components/TreeSelector.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA0BxD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC3F,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9F,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC;IAEhD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAA2B,CAAC;IAC7F,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,eAAK,SAAS,EAAC,+CAA+C,aAC5D,cAAK,SAAS,EAAC,sDAAsD,YAClE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,KAAC,MAAM,IACL,QAAQ,EAAE,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACpC,YAAY,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CACnC,KAAC,QAAQ,OAAK,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAC3F,MAAM,CAAC,KAAK,GACJ,CACZ,GACD,CACH,GACG,EACN,cAAK,SAAS,EAAC,uDAAuD,YACnE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,CAAC,GACpG,IACF,CACP,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\nimport \"./TreeSelector.scss\";\nimport { useMemo, useState } from \"react\";\nimport { MenuItem, Select } from \"@itwin/itwinui-react\";\n\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport type { TreeRenderProps } from \"./SelectableTree\";\n\n/**\n * A definition for trees displayed in [[TreeSelector]]\n * @internal\n */\nexport interface TreeContentDefinition {\n  id: string;\n  label: string;\n  render: (props: TreeRenderProps) => React.ReactNode;\n}\n\n/**\n * Props for [[TreeSelector]]\n * @internal\n */\nexport interface TreeSelectorProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n}\n\n/**\n * A component that accepts a list of trees and renders a select box at the top,\n * allowing to choose which of the provided tree components should be rendered at the bottom.\n * @internal\n */\nexport function TreeSelector(props: TreeSelectorProps) {\n  const [selectedContentId, setSelectedContentId] = useState(props.defaultSelectedContentId);\n  const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];\n  const isEnlarged = props.density === \"enlarged\";\n\n  const options = useMemo(() => {\n    return props.trees.map((c) => ({ label: c.label, value: c.id })) as SelectOption<string>[];\n  }, [props.trees]);\n\n  return (\n    <div className=\"presentation-components-tree-selector-content\">\n      <div className=\"presentation-components-tree-selector-content-header\">\n        {options.length > 0 && (\n          <Select\n            onChange={setSelectedContentId}\n            options={options}\n            value={selectedContent.id}\n            size={isEnlarged ? \"large\" : \"small\"}\n            itemRenderer={(option, itemProps) => (\n              <MenuItem {...option} isSelected={itemProps.isSelected} size={isEnlarged ? \"large\" : \"default\"}>\n                {option.label}\n              </MenuItem>\n            )}\n          />\n        )}\n      </div>\n      <div className=\"presentation-components-tree-selector-content-wrapper\">\n        {selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured })}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../src/components/TreeSelector.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA4BxD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC3F,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9F,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC;IAEhD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAA2B,CAAC;IACrH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,eAAK,SAAS,EAAC,+CAA+C,aAC5D,cAAK,SAAS,EAAC,sDAAsD,YAClE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACpC,QAAQ,EAAE,CAAC,MAAc,EAAE,EAAE;wBAC3B,KAAK,CAAC,aAAa,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;wBAC1C,oBAAoB,CAAC,MAAM,CAAC,CAAC;oBAC/B,CAAC,EACD,YAAY,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CACnC,KAAC,QAAQ,OAAK,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAC3F,MAAM,CAAC,KAAK,GACJ,CACZ,GACD,CACH,GACG,EACN,cAAK,SAAS,EAAC,uDAAuD,YACnE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,GACxI,IACF,CACP,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\nimport \"./TreeSelector.scss\";\nimport { useMemo, useState } from \"react\";\nimport { MenuItem, Select } from \"@itwin/itwinui-react\";\n\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport type { TreeRenderProps } from \"./SelectableTree\";\n\n/**\n * A definition for trees displayed in [[TreeSelector]]\n * @internal\n */\nexport interface TreeContentDefinition {\n  id: string;\n  label: string;\n  render: (props: TreeRenderProps) => React.ReactNode;\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for [[TreeSelector]]\n * @internal\n */\nexport interface TreeSelectorProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that accepts a list of trees and renders a select box at the top,\n * allowing to choose which of the provided tree components should be rendered at the bottom.\n * @internal\n */\nexport function TreeSelector(props: TreeSelectorProps) {\n  const [selectedContentId, setSelectedContentId] = useState(props.defaultSelectedContentId);\n  const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];\n  const isEnlarged = props.density === \"enlarged\";\n\n  const options = useMemo(() => {\n    return props.trees.map((c) => ({ label: c.label, value: c.id, startIcon: c.startIcon })) as SelectOption<string>[];\n  }, [props.trees]);\n\n  return (\n    <div className=\"presentation-components-tree-selector-content\">\n      <div className=\"presentation-components-tree-selector-content-header\">\n        {options.length > 0 && (\n          <Select\n            options={options}\n            value={selectedContent.id}\n            size={isEnlarged ? \"large\" : \"small\"}\n            onChange={(treeId: string) => {\n              props.onFeatureUsed?.(`choose-${treeId}`);\n              setSelectedContentId(treeId);\n            }}\n            itemRenderer={(option, itemProps) => (\n              <MenuItem {...option} isSelected={itemProps.isSelected} size={isEnlarged ? \"large\" : \"default\"}>\n                {option.label}\n              </MenuItem>\n            )}\n          />\n        )}\n      </div>\n      <div className=\"presentation-components-tree-selector-content-wrapper\">\n        {selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed })}\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -20,6 +20,8 @@ export interface TreeWidgetOptions {
     density?: "enlarged" | "default";
     /** Callback that is invoked when performance of tracked feature is measured. */
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
+    /** Callback that is invoked when a tracked feature is used. */
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].

package/lib/esm/components/TreeWidgetUiItemsProvider.js

@@ -50,7 +50,7 @@ export class TreeWidgetUiItemsProvider {
             {
                 id: TreeWidgetId,
                 label: TreeWidget.translate("treeview"),
-                content: (_jsx(TreeWidgetComponent, { trees: trees, density: this._treeWidgetOptions?.density, onPerformanceMeasured: this._treeWidgetOptions?.onPerformanceMeasured })),
+                content: (_jsx(TreeWidgetComponent, { trees: trees, density: this._treeWidgetOptions?.density, onPerformanceMeasured: this._treeWidgetOptions?.onPerformanceMeasured, onFeatureUsed: this._treeWidgetOptions?.onFeatureUsed })),
                 icon: _jsx(SvgHierarchyTree, {}),
                 priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,
             },

package/lib/esm/components/TreeWidgetUiItemsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeWidgetUiItemsProvider.scss\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, StageUsage } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { SelectableTree } from \"./SelectableTree\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { useTreeTransientState } from \"./utils/UseTreeTransientState\";\n\nimport type { UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeProps, TreeDefinition } from \"./SelectableTree\";\nimport type { FallbackProps } from \"react-error-boundary\";\n/**\n * Parameters for creating a [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport interface TreeWidgetOptions {\n  /** The stage panel to place the widget in. Defaults to `StagePanelLocation.Right`. */\n  defaultPanelLocation?: StagePanelLocation;\n  /** The stage panel section to place the widget in. Defaults to `StagePanelSection.Start`. */\n  defaultPanelSection?: StagePanelSection;\n  /** Widget priority in the stage panel. */\n  defaultTreeWidgetPriority?: number;\n  /** Trees to show in the widget. Defaults to [[ModelsTreeComponent]] and [[CategoriesTreeComponent]]. */\n  trees?: TreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n}\n\n/**\n * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport const TreeWidgetId = \"tree-widget-react:trees\";\n\n/**\n * A [[UiItemsProvider]] implementation that provides a [[SelectableTree]] into a stage panel.\n * @public\n */\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) {}\n\n  public provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): ReadonlyArray<Widget> {\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n\n    if (location !== preferredLocation || section !== preferredPanelSection || stageUsage !== StageUsage.General) {\n      return [];\n    }\n\n    const trees: TreeDefinition[] = this._treeWidgetOptions?.trees ?? [\n      {\n        id: ModelsTreeComponent.id,\n        getLabel: ModelsTreeComponent.getLabel,\n        render: (props) => <ModelsTreeComponent {...props} />,\n      },\n      {\n        id: CategoriesTreeComponent.id,\n        getLabel: CategoriesTreeComponent.getLabel,\n        render: (props) => <CategoriesTreeComponent {...props} />,\n      },\n    ];\n\n    return [\n      {\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        content: (\n          <TreeWidgetComponent\n            trees={trees}\n            density={this._treeWidgetOptions?.density}\n            onPerformanceMeasured={this._treeWidgetOptions?.onPerformanceMeasured}\n          />\n        ),\n        icon: <SvgHierarchyTree />,\n        priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n      },\n    ];\n  }\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeTransientState<HTMLDivElement>();\n\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"error\")}\n      description={TreeWidget.translate(\"generic-error-description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"retry\")}\n        </Button>\n      }\n    />\n  );\n}\n"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeWidgetUiItemsProvider.scss\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, StageUsage } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { SelectableTree } from \"./SelectableTree\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { useTreeTransientState } from \"./utils/UseTreeTransientState\";\n\nimport type { UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeProps, TreeDefinition } from \"./SelectableTree\";\nimport type { FallbackProps } from \"react-error-boundary\";\n/**\n * Parameters for creating a [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport interface TreeWidgetOptions {\n  /** The stage panel to place the widget in. Defaults to `StagePanelLocation.Right`. */\n  defaultPanelLocation?: StagePanelLocation;\n  /** The stage panel section to place the widget in. Defaults to `StagePanelSection.Start`. */\n  defaultPanelSection?: StagePanelSection;\n  /** Widget priority in the stage panel. */\n  defaultTreeWidgetPriority?: number;\n  /** Trees to show in the widget. Defaults to [[ModelsTreeComponent]] and [[CategoriesTreeComponent]]. */\n  trees?: TreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  /** Callback that is invoked when a tracked feature is used. */\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport const TreeWidgetId = \"tree-widget-react:trees\";\n\n/**\n * A [[UiItemsProvider]] implementation that provides a [[SelectableTree]] into a stage panel.\n * @public\n */\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) {}\n\n  public provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): ReadonlyArray<Widget> {\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n\n    if (location !== preferredLocation || section !== preferredPanelSection || stageUsage !== StageUsage.General) {\n      return [];\n    }\n\n    const trees: TreeDefinition[] = this._treeWidgetOptions?.trees ?? [\n      {\n        id: ModelsTreeComponent.id,\n        getLabel: ModelsTreeComponent.getLabel,\n        render: (props) => <ModelsTreeComponent {...props} />,\n      },\n      {\n        id: CategoriesTreeComponent.id,\n        getLabel: CategoriesTreeComponent.getLabel,\n        render: (props) => <CategoriesTreeComponent {...props} />,\n      },\n    ];\n\n    return [\n      {\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        content: (\n          <TreeWidgetComponent\n            trees={trees}\n            density={this._treeWidgetOptions?.density}\n            onPerformanceMeasured={this._treeWidgetOptions?.onPerformanceMeasured}\n            onFeatureUsed={this._treeWidgetOptions?.onFeatureUsed}\n          />\n        ),\n        icon: <SvgHierarchyTree />,\n        priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n      },\n    ];\n  }\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeTransientState<HTMLDivElement>();\n\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"error\")}\n      description={TreeWidget.translate(\"generic-error-description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"retry\")}\n        </Button>\n      }\n    />\n  );\n}\n"]}

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

@@ -6,6 +6,7 @@ import type { CommonProps } from "@itwin/core-react";
 export interface TreeHeaderButtonProps {
     viewport: Viewport;
     density?: "default" | "enlarged";
+    onFeatureUsed?: (feature: string) => void;
 }
 /** @internal */
 export interface TreeHeaderProps extends CommonProps {

package/lib/esm/components/tree-header/TreeHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.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 \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useEffect, useRef, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** @internal */\nexport interface TreeHeaderButtonProps {\n  viewport: Viewport;\n  density?: \"default\" | \"enlarged\";\n}\n\n/** @internal */\nexport interface TreeHeaderProps extends CommonProps {\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** listens for onClick event for Clear (x) icon */\n  onFilterClear: () => void;\n  /** Total number of results/entries */\n  resultCount?: number;\n  /** Current selected result index */\n  selectedIndex?: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n  /** Header buttons */\n  children?: React.ReactNode;\n  /** Modifies the density of tree header. `enlarged` header contains larger content */\n  density?: \"default\" | \"enlarged\";\n}\n\n/** @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n  const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  const isEnlarged = density === \"enlarged\";\n  return (\n    <div className={classnames(\"tree-widget-tree-header\", className, isEnlarged && \"enlarge\")}>\n      <HeaderButtons contracted={isSearchOpen} isEnlarged={isEnlarged}>\n        {children}\n      </HeaderButtons>\n      <DebouncedSearchBox\n        isOpened={isSearchOpen}\n        onOpen={() => setIsSearchOpen(true)}\n        onClose={() => setIsSearchOpen(false)}\n        onChange={(value) => (value ? onFilterStart(value) : onFilterClear())}\n        delay={500}\n        selectedResultIndex={selectedIndex}\n        resultCount={resultCount}\n        onSelectedResultChanged={onSelectedChanged}\n        size={isEnlarged ? \"large\" : \"small\"}\n      />\n    </div>\n  );\n}\n\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n  onChange: (value: string) => void;\n  delay: number;\n  selectedResultIndex?: number;\n  resultCount?: number;\n  onSelectedResultChanged: (index: number) => void;\n  size?: \"large\" | \"small\";\n}\n\nfunction DebouncedSearchBox({\n  isOpened,\n  selectedResultIndex,\n  resultCount,\n  onSelectedResultChanged,\n  onChange,\n  onOpen,\n  onClose,\n  delay,\n  size,\n}: DebouncedSearchBoxProps) {\n  const [inputValue, setInputValue] = useState<string>(\"\");\n  const onChangeRef = useRef(onChange);\n  // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    if (!inputValue) {\n      onChangeRef.current(\"\");\n      return;\n    }\n\n    const timeoutId = setTimeout(() => {\n      onChangeRef.current(inputValue);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [inputValue, delay]);\n\n  return (\n    <SearchBox expandable onExpand={onOpen} onCollapse={onClose} size={size} className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}>\n      <SearchBox.CollapsedState>\n        <SearchBox.ExpandButton\n          title={TreeWidget.translate(\"searchBox.searchForSomething\")}\n          aria-label={TreeWidget.translate(\"searchBox.open\")}\n          size={size}\n          styleType=\"borderless\"\n        />\n      </SearchBox.CollapsedState>\n      <SearchBox.ExpandedState>\n        <SearchBox.Input placeholder={TreeWidget.translate(\"searchBox.search\")} onChange={(e) => setInputValue(e.currentTarget.value)} />\n        <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} size={size} />\n        <SearchBox.CollapseButton\n          onClick={() => {\n            setInputValue(\"\");\n            onClose();\n          }}\n          size={size}\n          aria-label={TreeWidget.translate(\"searchBox.close\")}\n        />\n      </SearchBox.ExpandedState>\n    </SearchBox>\n  );\n}\n\ninterface HeaderButtonsProps {\n  contracted: boolean;\n  children?: React.ReactNode;\n  isEnlarged?: boolean;\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n  const className = classnames(\"button-container\", props.contracted && \"contracted\");\n  const dropdownClassName = classnames(\"dropdown-item\", props.isEnlarged && \"enlarge\");\n\n  return (\n    <ButtonGroup\n      className={className}\n      overflowButton={(overflowStart) => (\n        <DropdownMenu\n          menuItems={() =>\n            Children.toArray(props.children)\n              .slice(overflowStart)\n              .map((btn, index) => (\n                <li key={index} className={dropdownClassName} role=\"menuitem\">\n                  {btn}\n                </li>\n              ))\n          }\n          className=\"tree-header-button-dropdown-container\"\n        >\n          <IconButton title={TreeWidget.translate(\"dropdownMore\")} styleType=\"borderless\" size={props.isEnlarged ? undefined : \"small\"}>\n            <SvgMore />\n          </IconButton>\n        </DropdownMenu>\n      )}\n    >\n      {props.children}\n    </ButtonGroup>\n  );\n}\n\ninterface SearchResultStepperProps {\n  total?: number;\n  onStep: (newIndex: number) => void;\n  selectedIndex?: number;\n  size?: \"large\" | \"small\";\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n  const { selectedIndex = 1, total, onStep } = props;\n  if (!total) {\n    return null;\n  }\n\n  return (\n    <>\n      <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n      <Divider orientation=\"vertical\" />\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.previous\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex > 1) {\n            onStep(selectedIndex - 1);\n          }\n        }}\n      >\n        <SvgCaretUpSmall />\n      </SearchBox.Button>\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.next\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex < total) {\n            onStep(selectedIndex + 1);\n          }\n        }}\n      >\n        <SvgCaretDownSmall />\n      </SearchBox.Button>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.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 \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useEffect, useRef, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** @internal */\nexport interface TreeHeaderButtonProps {\n  viewport: Viewport;\n  density?: \"default\" | \"enlarged\";\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/** @internal */\nexport interface TreeHeaderProps extends CommonProps {\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** listens for onClick event for Clear (x) icon */\n  onFilterClear: () => void;\n  /** Total number of results/entries */\n  resultCount?: number;\n  /** Current selected result index */\n  selectedIndex?: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n  /** Header buttons */\n  children?: React.ReactNode;\n  /** Modifies the density of tree header. `enlarged` header contains larger content */\n  density?: \"default\" | \"enlarged\";\n}\n\n/** @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n  const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  const isEnlarged = density === \"enlarged\";\n  return (\n    <div className={classnames(\"tree-widget-tree-header\", className, isEnlarged && \"enlarge\")}>\n      <HeaderButtons contracted={isSearchOpen} isEnlarged={isEnlarged}>\n        {children}\n      </HeaderButtons>\n      <DebouncedSearchBox\n        isOpened={isSearchOpen}\n        onOpen={() => setIsSearchOpen(true)}\n        onClose={() => setIsSearchOpen(false)}\n        onChange={(value) => (value ? onFilterStart(value) : onFilterClear())}\n        delay={500}\n        selectedResultIndex={selectedIndex}\n        resultCount={resultCount}\n        onSelectedResultChanged={onSelectedChanged}\n        size={isEnlarged ? \"large\" : \"small\"}\n      />\n    </div>\n  );\n}\n\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n  onChange: (value: string) => void;\n  delay: number;\n  selectedResultIndex?: number;\n  resultCount?: number;\n  onSelectedResultChanged: (index: number) => void;\n  size?: \"large\" | \"small\";\n}\n\nfunction DebouncedSearchBox({\n  isOpened,\n  selectedResultIndex,\n  resultCount,\n  onSelectedResultChanged,\n  onChange,\n  onOpen,\n  onClose,\n  delay,\n  size,\n}: DebouncedSearchBoxProps) {\n  const [inputValue, setInputValue] = useState<string>(\"\");\n  const onChangeRef = useRef(onChange);\n  // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    if (!inputValue) {\n      onChangeRef.current(\"\");\n      return;\n    }\n\n    const timeoutId = setTimeout(() => {\n      onChangeRef.current(inputValue);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [inputValue, delay]);\n\n  return (\n    <SearchBox expandable onExpand={onOpen} onCollapse={onClose} size={size} className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}>\n      <SearchBox.CollapsedState>\n        <SearchBox.ExpandButton\n          title={TreeWidget.translate(\"searchBox.searchForSomething\")}\n          aria-label={TreeWidget.translate(\"searchBox.open\")}\n          size={size}\n          styleType=\"borderless\"\n        />\n      </SearchBox.CollapsedState>\n      <SearchBox.ExpandedState>\n        <SearchBox.Input placeholder={TreeWidget.translate(\"searchBox.search\")} onChange={(e) => setInputValue(e.currentTarget.value)} />\n        <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} size={size} />\n        <SearchBox.CollapseButton\n          onClick={() => {\n            setInputValue(\"\");\n            onClose();\n          }}\n          size={size}\n          aria-label={TreeWidget.translate(\"searchBox.close\")}\n        />\n      </SearchBox.ExpandedState>\n    </SearchBox>\n  );\n}\n\ninterface HeaderButtonsProps {\n  contracted: boolean;\n  children?: React.ReactNode;\n  isEnlarged?: boolean;\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n  const className = classnames(\"button-container\", props.contracted && \"contracted\");\n  const dropdownClassName = classnames(\"dropdown-item\", props.isEnlarged && \"enlarge\");\n\n  return (\n    <ButtonGroup\n      className={className}\n      overflowButton={(overflowStart) => (\n        <DropdownMenu\n          menuItems={() =>\n            Children.toArray(props.children)\n              .slice(overflowStart)\n              .map((btn, index) => (\n                <li key={index} className={dropdownClassName} role=\"menuitem\">\n                  {btn}\n                </li>\n              ))\n          }\n          className=\"tree-header-button-dropdown-container\"\n        >\n          <IconButton title={TreeWidget.translate(\"dropdownMore\")} styleType=\"borderless\" size={props.isEnlarged ? undefined : \"small\"}>\n            <SvgMore />\n          </IconButton>\n        </DropdownMenu>\n      )}\n    >\n      {props.children}\n    </ButtonGroup>\n  );\n}\n\ninterface SearchResultStepperProps {\n  total?: number;\n  onStep: (newIndex: number) => void;\n  selectedIndex?: number;\n  size?: \"large\" | \"small\";\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n  const { selectedIndex = 1, total, onStep } = props;\n  if (!total) {\n    return null;\n  }\n\n  return (\n    <>\n      <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n      <Divider orientation=\"vertical\" />\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.previous\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex > 1) {\n            onStep(selectedIndex - 1);\n          }\n        }}\n      >\n        <SvgCaretUpSmall />\n      </SearchBox.Button>\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.next\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex < total) {\n            onStep(selectedIndex + 1);\n          }\n        }}\n      >\n        <SvgCaretDownSmall />\n      </SearchBox.Button>\n    </>\n  );\n}\n"]}

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

@@ -40,6 +40,10 @@ export interface VisibilityTreeNodeRendererProps {
      * Is `false` by default
      */
     isEnlarged?: boolean;
+    /**
+     * Callback called when visibility is toggled using a checkbox.
+     */
+    onVisibilityToggled?: (enabled: boolean) => void;
 }
 /**
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
@@ -50,12 +54,15 @@ export declare function createVisibilityTreeRenderer({ nodeRendererProps, ...res
  * Creates node renderer which renders node with eye checkbox.
  * @public
  */
-export declare function createVisibilityTreeNodeRenderer({ levelOffset, disableRootNodeCollapse, descriptionEnabled, iconsEnabled, }: VisibilityTreeNodeRendererProps): (treeNodeProps: TreeNodeRendererProps) => JSX.Element;
+export declare function createVisibilityTreeNodeRenderer({ levelOffset, disableRootNodeCollapse, descriptionEnabled, iconsEnabled, onVisibilityToggled, }: VisibilityTreeNodeRendererProps): (treeNodeProps: TreeNodeRendererProps) => JSX.Element;
+interface VisibilityTreeNodeCheckboxProps extends NodeCheckboxRenderProps {
+    onVisibilityToggled?: (enabled: boolean) => void;
+}
 /**
  * Checkbox renderer that renders an eye.
  * @public
  */
-export declare function VisibilityTreeNodeCheckbox(props: NodeCheckboxRenderProps): JSX.Element;
+export declare function VisibilityTreeNodeCheckbox(props: VisibilityTreeNodeCheckboxProps): JSX.Element;
 /**
  * Props for [[FilterableVisibilityTreeNodeRenderer]].
  * @beta
@@ -65,7 +72,7 @@ export type FilterableVisibilityTreeNodeRendererProps = Omit<PresentationTreeNod
  * Creates node renderer which renders node with eye checkbox and hierarchy level filtering actions.
  * @beta
  */
-export declare function FilterableVisibilityTreeNodeRenderer({ levelOffset, disableRootNodeCollapse, descriptionEnabled, isEnlarged, ...restProps }: FilterableVisibilityTreeNodeRendererProps): JSX.Element;
+export declare function FilterableVisibilityTreeNodeRenderer({ levelOffset, disableRootNodeCollapse, descriptionEnabled, isEnlarged, onVisibilityToggled, ...restProps }: FilterableVisibilityTreeNodeRendererProps): JSX.Element;
 /**
  * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.
  * @public
@@ -89,4 +96,5 @@ export interface VisibilityTreeNoFilteredDataProps {
  * @public
  */
 export declare function VisibilityTreeNoFilteredData(props: VisibilityTreeNoFilteredDataProps): JSX.Element;
+export {};
 //# sourceMappingURL=VisibilityTreeRenderer.d.ts.map

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

@@ -31,10 +31,10 @@ export function createVisibilityTreeRenderer({ nodeRendererProps, ...restProps }
  * Creates node renderer which renders node with eye checkbox.
  * @public
  */
-export function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled, }) {
+export function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled, onVisibilityToggled, }) {
     return function VisibilityTreeNodeRenderer(treeNodeProps) {
         const nodeOffset = treeNodeProps.node.depth * levelOffset + (treeNodeProps.node.numChildren === 0 ? EXPANSION_TOGGLE_WIDTH : 0);
-        return (_jsx(TreeNodeRenderer, { ...treeNodeProps, node: { ...treeNodeProps.node, depth: 0, numChildren: 1 }, checkboxRenderer: (checkboxProps) => (_jsx("div", { className: "visibility-tree-checkbox-container", style: { marginRight: `${nodeOffset}px` }, children: _jsx(VisibilityTreeNodeCheckbox, { ...checkboxProps }) })), descriptionEnabled: descriptionEnabled, imageLoader: iconsEnabled ? imageLoader : undefined, className: classNames("with-checkbox", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && "disable-expander", treeNodeProps.className) }));
+        return (_jsx(TreeNodeRenderer, { ...treeNodeProps, node: { ...treeNodeProps.node, depth: 0, numChildren: 1 }, checkboxRenderer: (checkboxProps) => (_jsx("div", { className: "visibility-tree-checkbox-container", style: { marginRight: `${nodeOffset}px` }, children: _jsx(VisibilityTreeNodeCheckbox, { ...checkboxProps, onVisibilityToggled: onVisibilityToggled }) })), descriptionEnabled: descriptionEnabled, imageLoader: iconsEnabled ? imageLoader : undefined, className: classNames("with-checkbox", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && "disable-expander", treeNodeProps.className) }));
     };
 }
 /**
@@ -42,16 +42,19 @@ export function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRoot
  * @public
  */
 export function VisibilityTreeNodeCheckbox(props) {
-    return (_jsx(Checkbox, { className: "visibility-tree-checkbox", variant: "eyeball", checked: props.checked, onChange: (e) => props.onChange(e.currentTarget.checked), onClick: props.onClick, disabled: props.disabled, title: props.title }));
+    return (_jsx(Checkbox, { className: "visibility-tree-checkbox", variant: "eyeball", checked: props.checked, onChange: (e) => {
+            props.onVisibilityToggled?.(e.currentTarget.checked);
+            props.onChange(e.currentTarget.checked);
+        }, onMouseDown: (e) => e.stopPropagation(), onClick: props.onClick, disabled: props.disabled, title: props.title }));
 }
 /**
  * Creates node renderer which renders node with eye checkbox and hierarchy level filtering actions.
  * @beta
  */
-export function FilterableVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse, descriptionEnabled, isEnlarged, ...restProps }) {
+export function FilterableVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse, descriptionEnabled, isEnlarged, onVisibilityToggled, ...restProps }) {
     const expansionToggleWidth = isEnlarged ? EXPANDED_EXPANSION_TOGGLE_WIDTH : EXPANSION_TOGGLE_WIDTH;
     const nodeOffset = restProps.node.depth * levelOffset + (restProps.node.numChildren === 0 ? expansionToggleWidth : 0);
-    return (_jsx(PresentationTreeNodeRenderer, { ...restProps, checkboxRenderer: (checkboxProps) => (_jsx("div", { className: "visibility-tree-checkbox-container", style: { marginRight: `${nodeOffset}px` }, children: _jsx(VisibilityTreeNodeCheckbox, { ...checkboxProps }) })), descriptionEnabled: descriptionEnabled, imageLoader: imageLoader, className: classNames("with-checkbox", (restProps.node.numChildren === 0 || (disableRootNodeCollapse && restProps.node.parentId === undefined)) && "disable-expander") }));
+    return (_jsx(PresentationTreeNodeRenderer, { ...restProps, checkboxRenderer: (checkboxProps) => (_jsx("div", { className: "visibility-tree-checkbox-container", style: { marginRight: `${nodeOffset}px` }, children: _jsx(VisibilityTreeNodeCheckbox, { ...checkboxProps, onVisibilityToggled: onVisibilityToggled }) })), descriptionEnabled: descriptionEnabled, imageLoader: imageLoader, className: classNames("with-checkbox", (restProps.node.numChildren === 0 || (disableRootNodeCollapse && restProps.node.parentId === undefined)) && "disable-expander") }));
 }
 /**
  * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.

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

@@ -1 +1 @@
-{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeRenderer.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 classNames from \"classnames\";\nimport { useEffect } from \"react\";\nimport { TreeImageLoader, TreeNodeRenderer } from \"@itwin/components-react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { PresentationTreeNodeRenderer, useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport { TreeRenderer } from \"./common/TreeRenderer\";\n\nimport type { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport type { TreeRendererBaseProps, TreeRendererProps } from \"./common/TreeRenderer\";\nimport type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps } from \"@itwin/components-react\";\nimport type { IPresentationTreeDataProvider, PresentationTreeNodeRendererProps } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"./common/Types\";\n/**\n * These constants are taken from `@itwin/core-react`.\n * Defines the size in pixels of the expansion toggle.\n * It is used to keep same hierarchy nodes with children and nodes without children in the same line.\n * @note This value applies only to the leaf nodes.\n */\nconst EXPANSION_TOGGLE_WIDTH = 24;\nconst EXPANDED_EXPANSION_TOGGLE_WIDTH = 42;\n\nconst imageLoader = new TreeImageLoader();\n\n/**\n * Props for visibility tree renderer.\n * @public\n */\nexport interface VisibilityTreeRendererProps extends TreeRendererBaseProps {\n  /** Props for single node renderer. */\n  nodeRendererProps: VisibilityTreeNodeRendererProps;\n}\n\n/**\n * Props for visibility tree node renderer.\n * @public\n */\nexport interface VisibilityTreeNodeRendererProps {\n  /**\n   * Specifies whether the icon at the left of the node label should be rendered.\n   */\n  iconsEnabled: boolean;\n  /**\n   * Specifies whether node description should be enabled.\n   */\n  descriptionEnabled: boolean;\n  /**\n   * Defines the offset in pixels of how much each hierarchy level should be offset to the right from the checkbox.\n   * Defaults to `20`.\n   */\n  levelOffset?: number;\n  /**\n   * Specifies whether the root node be expanded at all times.\n   * Defaults to `false`.\n   */\n  disableRootNodeCollapse?: boolean;\n  /**\n   * Specifies whether the nodes should be enlarged (less dense and larger content).\n   * Is `false` by default\n   */\n  isEnlarged?: boolean;\n}\n\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeRenderer({ nodeRendererProps, ...restProps }: VisibilityTreeRendererProps) {\n  return function VisibilityTreeRenderer(treeProps: TreeRendererProps) {\n    return <TreeRenderer {...treeProps} {...restProps} nodeRenderer={createVisibilityTreeNodeRenderer(nodeRendererProps)} />;\n  };\n}\n\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeNodeRenderer({\n  levelOffset = 20,\n  disableRootNodeCollapse = false,\n  descriptionEnabled,\n  iconsEnabled,\n}: VisibilityTreeNodeRendererProps) {\n  return function VisibilityTreeNodeRenderer(treeNodeProps: TreeNodeRendererProps) {\n    const nodeOffset = treeNodeProps.node.depth * levelOffset + (treeNodeProps.node.numChildren === 0 ? EXPANSION_TOGGLE_WIDTH : 0);\n    return (\n      <TreeNodeRenderer\n        {...treeNodeProps}\n        node={{ ...treeNodeProps.node, depth: 0, numChildren: 1 }} // if we want to disable TreeNodeRenderer style calculations for tree nodes, we need to override these values.\n        checkboxRenderer={(checkboxProps: NodeCheckboxRenderProps) => (\n          <div className=\"visibility-tree-checkbox-container\" style={{ marginRight: `${nodeOffset}px` }}>\n            <VisibilityTreeNodeCheckbox {...checkboxProps} />\n          </div>\n        )}\n        descriptionEnabled={descriptionEnabled}\n        imageLoader={iconsEnabled ? imageLoader : undefined}\n        className={classNames(\n          \"with-checkbox\",\n          (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && \"disable-expander\",\n          treeNodeProps.className,\n        )}\n      />\n    );\n  };\n}\n\n/**\n * Checkbox renderer that renders an eye.\n * @public\n */\nexport function VisibilityTreeNodeCheckbox(props: NodeCheckboxRenderProps) {\n  return (\n    <Checkbox\n      className=\"visibility-tree-checkbox\"\n      variant=\"eyeball\"\n      checked={props.checked}\n      onChange={(e) => props.onChange(e.currentTarget.checked)}\n      onClick={props.onClick}\n      disabled={props.disabled}\n      title={props.title}\n    />\n  );\n}\n\n/**\n * Props for [[FilterableVisibilityTreeNodeRenderer]].\n * @beta\n */\nexport type FilterableVisibilityTreeNodeRendererProps = Omit<PresentationTreeNodeRendererProps, \"descriptionEnabled\"> & VisibilityTreeNodeRendererProps;\n\n/**\n * Creates node renderer which renders node with eye checkbox and hierarchy level filtering actions.\n * @beta\n */\nexport function FilterableVisibilityTreeNodeRenderer({\n  levelOffset = 20,\n  disableRootNodeCollapse,\n  descriptionEnabled,\n  isEnlarged,\n  ...restProps\n}: FilterableVisibilityTreeNodeRendererProps) {\n  const expansionToggleWidth = isEnlarged ? EXPANDED_EXPANSION_TOGGLE_WIDTH : EXPANSION_TOGGLE_WIDTH;\n  const nodeOffset = restProps.node.depth * levelOffset + (restProps.node.numChildren === 0 ? expansionToggleWidth : 0);\n\n  return (\n    <PresentationTreeNodeRenderer\n      {...restProps}\n      checkboxRenderer={(checkboxProps: NodeCheckboxRenderProps) => (\n        <div className=\"visibility-tree-checkbox-container\" style={{ marginRight: `${nodeOffset}px` }}>\n          <VisibilityTreeNodeCheckbox {...checkboxProps} />\n        </div>\n      )}\n      descriptionEnabled={descriptionEnabled}\n      imageLoader={imageLoader}\n      className={classNames(\n        \"with-checkbox\",\n        (restProps.node.numChildren === 0 || (disableRootNodeCollapse && restProps.node.parentId === undefined)) && \"disable-expander\",\n      )}\n    />\n  );\n}\n\n/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @public\n * @deprecated in 2.0.0. Use [[useVisibilityTree]] instead.\n */\n// istanbul ignore next\nexport function useVisibilityTreeFiltering(\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>,\n  filterInfo?: VisibilityTreeFilterInfo,\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void,\n) {\n  const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };\n  const { filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps } = useControlledPresentationTreeFiltering({\n    nodeLoader,\n    filter,\n    activeMatchIndex,\n  });\n\n  useEffect(() => {\n    if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader) {\n      onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    }\n  }, [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied]);\n\n  return { filteredNodeLoader, isFiltering, nodeHighlightingProps };\n}\n\n/**\n * Properties for [[VisibilityTreeNoFilteredData]] component.\n * @public\n */\nexport interface VisibilityTreeNoFilteredDataProps {\n  title: string;\n  message: string;\n}\n\n/**\n * Renders message that no nodes was found for filter.\n * @public\n */\nexport function VisibilityTreeNoFilteredData(props: VisibilityTreeNoFilteredDataProps) {\n  return (\n    <div className=\"components-tree-errormessage\">\n      <span className=\"errormessage-header\">{props.title}</span>\n      <span className=\"errormessage-body\">{props.message}</span>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeRenderer.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 classNames from \"classnames\";\nimport { useEffect } from \"react\";\nimport { TreeImageLoader, TreeNodeRenderer } from \"@itwin/components-react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { PresentationTreeNodeRenderer, useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport { TreeRenderer } from \"./common/TreeRenderer\";\n\nimport type { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport type { TreeRendererBaseProps, TreeRendererProps } from \"./common/TreeRenderer\";\nimport type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps } from \"@itwin/components-react\";\nimport type { IPresentationTreeDataProvider, PresentationTreeNodeRendererProps } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"./common/Types\";\n/**\n * These constants are taken from `@itwin/core-react`.\n * Defines the size in pixels of the expansion toggle.\n * It is used to keep same hierarchy nodes with children and nodes without children in the same line.\n * @note This value applies only to the leaf nodes.\n */\nconst EXPANSION_TOGGLE_WIDTH = 24;\nconst EXPANDED_EXPANSION_TOGGLE_WIDTH = 42;\n\nconst imageLoader = new TreeImageLoader();\n\n/**\n * Props for visibility tree renderer.\n * @public\n */\nexport interface VisibilityTreeRendererProps extends TreeRendererBaseProps {\n  /** Props for single node renderer. */\n  nodeRendererProps: VisibilityTreeNodeRendererProps;\n}\n\n/**\n * Props for visibility tree node renderer.\n * @public\n */\nexport interface VisibilityTreeNodeRendererProps {\n  /**\n   * Specifies whether the icon at the left of the node label should be rendered.\n   */\n  iconsEnabled: boolean;\n  /**\n   * Specifies whether node description should be enabled.\n   */\n  descriptionEnabled: boolean;\n  /**\n   * Defines the offset in pixels of how much each hierarchy level should be offset to the right from the checkbox.\n   * Defaults to `20`.\n   */\n  levelOffset?: number;\n  /**\n   * Specifies whether the root node be expanded at all times.\n   * Defaults to `false`.\n   */\n  disableRootNodeCollapse?: boolean;\n  /**\n   * Specifies whether the nodes should be enlarged (less dense and larger content).\n   * Is `false` by default\n   */\n  isEnlarged?: boolean;\n  /**\n   * Callback called when visibility is toggled using a checkbox.\n   */\n  onVisibilityToggled?: (enabled: boolean) => void;\n}\n\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeRenderer({ nodeRendererProps, ...restProps }: VisibilityTreeRendererProps) {\n  return function VisibilityTreeRenderer(treeProps: TreeRendererProps) {\n    return <TreeRenderer {...treeProps} {...restProps} nodeRenderer={createVisibilityTreeNodeRenderer(nodeRendererProps)} />;\n  };\n}\n\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeNodeRenderer({\n  levelOffset = 20,\n  disableRootNodeCollapse = false,\n  descriptionEnabled,\n  iconsEnabled,\n  onVisibilityToggled,\n}: VisibilityTreeNodeRendererProps) {\n  return function VisibilityTreeNodeRenderer(treeNodeProps: TreeNodeRendererProps) {\n    const nodeOffset = treeNodeProps.node.depth * levelOffset + (treeNodeProps.node.numChildren === 0 ? EXPANSION_TOGGLE_WIDTH : 0);\n    return (\n      <TreeNodeRenderer\n        {...treeNodeProps}\n        node={{ ...treeNodeProps.node, depth: 0, numChildren: 1 }} // if we want to disable TreeNodeRenderer style calculations for tree nodes, we need to override these values.\n        checkboxRenderer={(checkboxProps: NodeCheckboxRenderProps) => (\n          <div className=\"visibility-tree-checkbox-container\" style={{ marginRight: `${nodeOffset}px` }}>\n            <VisibilityTreeNodeCheckbox {...checkboxProps} onVisibilityToggled={onVisibilityToggled} />\n          </div>\n        )}\n        descriptionEnabled={descriptionEnabled}\n        imageLoader={iconsEnabled ? imageLoader : undefined}\n        className={classNames(\n          \"with-checkbox\",\n          (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && \"disable-expander\",\n          treeNodeProps.className,\n        )}\n      />\n    );\n  };\n}\n\ninterface VisibilityTreeNodeCheckboxProps extends NodeCheckboxRenderProps {\n  onVisibilityToggled?: (enabled: boolean) => void;\n}\n\n/**\n * Checkbox renderer that renders an eye.\n * @public\n */\nexport function VisibilityTreeNodeCheckbox(props: VisibilityTreeNodeCheckboxProps) {\n  return (\n    <Checkbox\n      className=\"visibility-tree-checkbox\"\n      variant=\"eyeball\"\n      checked={props.checked}\n      onChange={(e) => {\n        props.onVisibilityToggled?.(e.currentTarget.checked);\n        props.onChange(e.currentTarget.checked);\n      }}\n      onMouseDown={(e) => e.stopPropagation()}\n      onClick={props.onClick}\n      disabled={props.disabled}\n      title={props.title}\n    />\n  );\n}\n\n/**\n * Props for [[FilterableVisibilityTreeNodeRenderer]].\n * @beta\n */\nexport type FilterableVisibilityTreeNodeRendererProps = Omit<PresentationTreeNodeRendererProps, \"descriptionEnabled\"> & VisibilityTreeNodeRendererProps;\n\n/**\n * Creates node renderer which renders node with eye checkbox and hierarchy level filtering actions.\n * @beta\n */\nexport function FilterableVisibilityTreeNodeRenderer({\n  levelOffset = 20,\n  disableRootNodeCollapse,\n  descriptionEnabled,\n  isEnlarged,\n  onVisibilityToggled,\n  ...restProps\n}: FilterableVisibilityTreeNodeRendererProps) {\n  const expansionToggleWidth = isEnlarged ? EXPANDED_EXPANSION_TOGGLE_WIDTH : EXPANSION_TOGGLE_WIDTH;\n  const nodeOffset = restProps.node.depth * levelOffset + (restProps.node.numChildren === 0 ? expansionToggleWidth : 0);\n\n  return (\n    <PresentationTreeNodeRenderer\n      {...restProps}\n      checkboxRenderer={(checkboxProps: NodeCheckboxRenderProps) => (\n        <div className=\"visibility-tree-checkbox-container\" style={{ marginRight: `${nodeOffset}px` }}>\n          <VisibilityTreeNodeCheckbox {...checkboxProps} onVisibilityToggled={onVisibilityToggled} />\n        </div>\n      )}\n      descriptionEnabled={descriptionEnabled}\n      imageLoader={imageLoader}\n      className={classNames(\n        \"with-checkbox\",\n        (restProps.node.numChildren === 0 || (disableRootNodeCollapse && restProps.node.parentId === undefined)) && \"disable-expander\",\n      )}\n    />\n  );\n}\n\n/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @public\n * @deprecated in 2.0.0. Use [[useVisibilityTree]] instead.\n */\n// istanbul ignore next\nexport function useVisibilityTreeFiltering(\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>,\n  filterInfo?: VisibilityTreeFilterInfo,\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void,\n) {\n  const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };\n  const { filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps } = useControlledPresentationTreeFiltering({\n    nodeLoader,\n    filter,\n    activeMatchIndex,\n  });\n\n  useEffect(() => {\n    if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader) {\n      onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    }\n  }, [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied]);\n\n  return { filteredNodeLoader, isFiltering, nodeHighlightingProps };\n}\n\n/**\n * Properties for [[VisibilityTreeNoFilteredData]] component.\n * @public\n */\nexport interface VisibilityTreeNoFilteredDataProps {\n  title: string;\n  message: string;\n}\n\n/**\n * Renders message that no nodes was found for filter.\n * @public\n */\nexport function VisibilityTreeNoFilteredData(props: VisibilityTreeNoFilteredDataProps) {\n  return (\n    <div className=\"components-tree-errormessage\">\n      <span className=\"errormessage-header\">{props.title}</span>\n      <span className=\"errormessage-body\">{props.message}</span>\n    </div>\n  );\n}\n"]}

package/lib/esm/components/trees/category-tree/CategoriesTree.d.ts

@@ -45,6 +45,12 @@ export interface CategoryTreeProps extends BaseFilterableTreeProps {
      * @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 and manages display of categories contained in an iModel.

package/lib/esm/components/trees/category-tree/CategoriesTree.js

@@ -12,6 +12,7 @@ import { PresentationTree } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { TreeWidget } from "../../../TreeWidget";
 import { FilterableTreeRenderer } from "../common/TreeRenderer";
+import { useFeatureReporting } from "../common/UseFeatureReporting";
 import { usePerformanceReporting } from "../common/UsePerformanceReporting";
 import { useVisibilityTreeState } from "../common/UseVisibilityTreeState";
 import { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from "../common/Utils";
@@ -31,16 +32,17 @@ export const RULESET_CATEGORIES = require("./Categories.json"); // eslint-disabl
 export function CategoryTree(props) {
     // istanbul ignore next
     const viewManager = props.viewManager ?? IModelApp.viewManager;
-    const { activeView, allViewports, categoryVisibilityHandler, onFilterApplied, density, hierarchyLevelConfig } = props;
+    const { activeView, allViewports, categoryVisibilityHandler, onFilterApplied, density, hierarchyLevelConfig, onPerformanceMeasured, onFeatureUsed } = props;
     const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);
     const onFilterChange = useCallback((dataProvider, matchesCount) => {
         if (onFilterApplied && dataProvider && matchesCount !== undefined) {
             onFilterApplied(dataProvider, matchesCount);
         }
     }, [onFilterApplied]);
-    const reporting = usePerformanceReporting({
+    const { reportUsage } = useFeatureReporting({ treeIdentifier: CategoriesTreeComponent.id, onFeatureUsed });
+    const { onNodeLoaded } = usePerformanceReporting({
         treeIdentifier: CategoriesTreeComponent.id,
-        onPerformanceMeasured: props.onPerformanceMeasured,
+        onPerformanceMeasured,
     });
     const state = useVisibilityTreeState({
         imodel: props.iModel,
@@ -52,12 +54,14 @@ export function CategoryTree(props) {
         onFilterChange,
         hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
         enableHierarchyAutoUpdate: true,
-        onNodeLoaded: reporting.onNodeLoaded,
+        onNodeLoaded,
+        reportUsage,
     });
     useEffect(() => {
         setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises
     }, [activeView]);
     const baseRendererProps = {
+        reportUsage,
         contextMenuItems: props.contextMenuItems,
         nodeLabelRenderer: props.nodeLabelRenderer,
         density: props.density,
@@ -65,6 +69,7 @@ export function CategoryTree(props) {
             iconsEnabled: false,
             descriptionEnabled: true,
             levelOffset: 10,
+            onVisibilityToggled: () => reportUsage({ featureId: "visibility-change", reportInteraction: true }),
         },
     };
     const noFilteredDataRenderer = useCallback(() => {
@@ -80,7 +85,7 @@ export function CategoryTree(props) {
                     : createVisibilityTreeRenderer(baseRendererProps), descriptionsEnabled: true, noDataRenderer: isFilterApplied ? noFilteredDataRenderer : undefined }), overlay] }));
 }
 function CategoriesTreeNodeRenderer(props) {
-    return (_jsx(FilterableVisibilityTreeNodeRenderer, { ...props, iconsEnabled: false, descriptionEnabled: true, levelOffset: 10, isEnlarged: props.density === "enlarged" }));
+    return (_jsx(FilterableVisibilityTreeNodeRenderer, { ...props, iconsEnabled: false, descriptionEnabled: true, levelOffset: 10, isEnlarged: props.density === "enlarged", onVisibilityToggled: () => props.reportUsage?.({ featureId: "visibility-change", reportInteraction: true }) }));
 }
 function useCategoryVisibilityHandler(viewManager, imodel, categories, activeView, allViewports, visibilityHandler) {
     const [state, setState] = useState();

package/lib/esm/components/trees/category-tree/CategoriesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport classNames from \"classnames\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { SelectionMode } from \"@itwin/components-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { PresentationTree } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { FilterableTreeRenderer } from \"../common/TreeRenderer\";\nimport { usePerformanceReporting } from \"../common/UsePerformanceReporting\";\nimport { useVisibilityTreeState } from \"../common/UseVisibilityTreeState\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport { createVisibilityTreeRenderer, FilterableVisibilityTreeNodeRenderer, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { CategoriesTreeComponent } from \"./CategoriesTreeComponent\";\nimport { CategoryVisibilityHandler } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, SpatialViewState, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { IFilteredPresentationTreeDataProvider, PresentationTreeNodeRendererProps } from \"@itwin/presentation-components\";\nimport type { BaseFilterableTreeProps, HierarchyLevelConfig } from \"../common/Types\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\nconst PAGING_SIZE = 20;\n\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_CATEGORIES: Ruleset = require(\"./Categories.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\n/**\n * Properties for the [[CategoryTree]] component\n * @public\n */\nexport interface CategoryTreeProps extends BaseFilterableTreeProps {\n  /** Flag for accommodating all viewports */\n  allViewports?: boolean;\n  /** Active viewport */\n  activeView: Viewport;\n  /**\n   * Available iModel categories\n   */\n  categories: CategoryInfo[];\n  /**\n   * Custom category visibility handler to use for testing\n   * @internal\n   */\n  categoryVisibilityHandler?: CategoryVisibilityHandler;\n  /**\n   * Custom view manager to use for testing\n   * @internal\n   */\n  viewManager?: ViewManager;\n  /**\n   * Props for configuring hierarchy level.\n   * @beta\n   */\n  hierarchyLevelConfig?: HierarchyLevelConfig;\n  /**\n   * Callback that is invoked when performance of tracked feature is measured.\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\n/**\n * Tree which displays and manages display of categories contained in an iModel.\n * @public\n */\nexport function CategoryTree(props: CategoryTreeProps) {\n  // istanbul ignore next\n  const viewManager = props.viewManager ?? IModelApp.viewManager;\n  const { activeView, allViewports, categoryVisibilityHandler, onFilterApplied, density, hierarchyLevelConfig } = props;\n\n  const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);\n  const onFilterChange = useCallback(\n    (dataProvider?: IFilteredPresentationTreeDataProvider, matchesCount?: number) => {\n      if (onFilterApplied && dataProvider && matchesCount !== undefined) {\n        onFilterApplied(dataProvider, matchesCount);\n      }\n    },\n    [onFilterApplied],\n  );\n  const reporting = usePerformanceReporting({\n    treeIdentifier: CategoriesTreeComponent.id,\n    onPerformanceMeasured: props.onPerformanceMeasured,\n  });\n  const state = useVisibilityTreeState({\n    imodel: props.iModel,\n    ruleset: RULESET_CATEGORIES,\n    pagingSize: PAGING_SIZE,\n    visibilityHandler,\n    customizeTreeNodeItem,\n    filterInfo: props.filterInfo,\n    onFilterChange,\n    hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,\n    enableHierarchyAutoUpdate: true,\n    onNodeLoaded: reporting.onNodeLoaded,\n  });\n\n  useEffect(() => {\n    setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeView]);\n\n  const baseRendererProps = {\n    contextMenuItems: props.contextMenuItems,\n    nodeLabelRenderer: props.nodeLabelRenderer,\n    density: props.density,\n    nodeRendererProps: {\n      iconsEnabled: false,\n      descriptionEnabled: true,\n      levelOffset: 10,\n    },\n  };\n\n  const noFilteredDataRenderer = useCallback(() => {\n    return (\n      <VisibilityTreeNoFilteredData\n        title={TreeWidget.translate(\"categoriesTree.noCategoryFound\")}\n        message={TreeWidget.translate(\"categoriesTree.noMatchingCategoryNames\")}\n      />\n    );\n  }, []);\n\n  if (!state) {\n    return null;\n  }\n\n  const isFilterApplied = state.filteringResult?.filteredProvider !== undefined;\n  const overlay = state.filteringResult?.isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n  return (\n    <div className={classNames(\"tree-widget-visibility-tree-base\", \"tree-widget-tree-container\")}>\n      <PresentationTree\n        width={props.width}\n        height={props.height}\n        state={state}\n        selectionMode={props.selectionMode ?? SelectionMode.None}\n        treeRenderer={\n          hierarchyLevelConfig?.isFilteringEnabled\n            ? (rendererProps) => (\n                <FilterableTreeRenderer\n                  {...rendererProps}\n                  {...baseRendererProps}\n                  nodeLoader={state.nodeLoader}\n                  nodeRenderer={(nodeProps) => <CategoriesTreeNodeRenderer {...nodeProps} density={density} />}\n                />\n              )\n            : createVisibilityTreeRenderer(baseRendererProps)\n        }\n        descriptionsEnabled={true}\n        noDataRenderer={isFilterApplied ? noFilteredDataRenderer : undefined}\n      />\n      {overlay}\n    </div>\n  );\n}\n\nfunction CategoriesTreeNodeRenderer(props: PresentationTreeNodeRendererProps & { density?: \"default\" | \"enlarged\" }) {\n  return (\n    <FilterableVisibilityTreeNodeRenderer\n      {...props}\n      iconsEnabled={false}\n      descriptionEnabled={true}\n      levelOffset={10}\n      isEnlarged={props.density === \"enlarged\"}\n    />\n  );\n\n}\n\nfunction useCategoryVisibilityHandler(\n  viewManager: ViewManager,\n  imodel: IModelConnection,\n  categories: CategoryInfo[],\n  activeView: Viewport,\n  allViewports?: boolean,\n  visibilityHandler?: CategoryVisibilityHandler,\n) {\n  const [state, setState] = useState<CategoryVisibilityHandler>();\n\n  useEffect(() => {\n    if (visibilityHandler) {\n      return;\n    }\n\n    const defaultHandler = new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports });\n    setState(defaultHandler);\n    return () => {\n      defaultHandler.dispose();\n    };\n  }, [viewManager, imodel, categories, activeView, allViewports, visibilityHandler]);\n\n  return visibilityHandler ?? state;\n}\n\nasync function setViewType(activeView: Viewport) {\n  const view = activeView.view as SpatialViewState;\n  const viewType = view.is3d() ? \"3d\" : \"2d\";\n  await Presentation.presentation.vars(RULESET_CATEGORIES.id).setString(\"ViewType\", viewType);\n}\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([addCustomTreeNodeItemLabelRenderer]);\n"]}
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport classNames from \"classnames\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { SelectionMode } from \"@itwin/components-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { PresentationTree } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { FilterableTreeRenderer } from \"../common/TreeRenderer\";\nimport { useFeatureReporting } from \"../common/UseFeatureReporting\";\nimport { usePerformanceReporting } from \"../common/UsePerformanceReporting\";\nimport { useVisibilityTreeState } from \"../common/UseVisibilityTreeState\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport { createVisibilityTreeRenderer, FilterableVisibilityTreeNodeRenderer, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { CategoriesTreeComponent } from \"./CategoriesTreeComponent\";\nimport { CategoryVisibilityHandler } from \"./CategoryVisibilityHandler\";\n\nimport type { FilterableTreeNodeRendererProps } from \"../common/TreeRenderer\";\nimport type { IModelConnection, SpatialViewState, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { IFilteredPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { BaseFilterableTreeProps, HierarchyLevelConfig } from \"../common/Types\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\nconst PAGING_SIZE = 20;\n\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_CATEGORIES: Ruleset = require(\"./Categories.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\n/**\n * Properties for the [[CategoryTree]] component\n * @public\n */\nexport interface CategoryTreeProps extends BaseFilterableTreeProps {\n  /** Flag for accommodating all viewports */\n  allViewports?: boolean;\n  /** Active viewport */\n  activeView: Viewport;\n  /**\n   * Available iModel categories\n   */\n  categories: CategoryInfo[];\n  /**\n   * Custom category visibility handler to use for testing\n   * @internal\n   */\n  categoryVisibilityHandler?: CategoryVisibilityHandler;\n  /**\n   * Custom view manager to use for testing\n   * @internal\n   */\n  viewManager?: ViewManager;\n  /**\n   * Props for configuring hierarchy level.\n   * @beta\n   */\n  hierarchyLevelConfig?: HierarchyLevelConfig;\n  /**\n   * Callback that is invoked when performance of tracked feature is measured.\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 and manages display of categories contained in an iModel.\n * @public\n */\nexport function CategoryTree(props: CategoryTreeProps) {\n  // istanbul ignore next\n  const viewManager = props.viewManager ?? IModelApp.viewManager;\n  const { activeView, allViewports, categoryVisibilityHandler, onFilterApplied, density, hierarchyLevelConfig, onPerformanceMeasured, onFeatureUsed } = props;\n\n  const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);\n  const onFilterChange = useCallback(\n    (dataProvider?: IFilteredPresentationTreeDataProvider, matchesCount?: number) => {\n      if (onFilterApplied && dataProvider && matchesCount !== undefined) {\n        onFilterApplied(dataProvider, matchesCount);\n      }\n    },\n    [onFilterApplied],\n  );\n\n  const { reportUsage } = useFeatureReporting({ treeIdentifier: CategoriesTreeComponent.id, onFeatureUsed });\n  const { onNodeLoaded } = usePerformanceReporting({\n    treeIdentifier: CategoriesTreeComponent.id,\n    onPerformanceMeasured,\n  });\n\n  const state = useVisibilityTreeState({\n    imodel: props.iModel,\n    ruleset: RULESET_CATEGORIES,\n    pagingSize: PAGING_SIZE,\n    visibilityHandler,\n    customizeTreeNodeItem,\n    filterInfo: props.filterInfo,\n    onFilterChange,\n    hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,\n    enableHierarchyAutoUpdate: true,\n    onNodeLoaded,\n    reportUsage,\n  });\n\n  useEffect(() => {\n    setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeView]);\n\n  const baseRendererProps = {\n    reportUsage,\n    contextMenuItems: props.contextMenuItems,\n    nodeLabelRenderer: props.nodeLabelRenderer,\n    density: props.density,\n    nodeRendererProps: {\n      iconsEnabled: false,\n      descriptionEnabled: true,\n      levelOffset: 10,\n      onVisibilityToggled: () => reportUsage({ featureId: \"visibility-change\", reportInteraction: true }),\n    },\n  };\n\n  const noFilteredDataRenderer = useCallback(() => {\n    return (\n      <VisibilityTreeNoFilteredData\n        title={TreeWidget.translate(\"categoriesTree.noCategoryFound\")}\n        message={TreeWidget.translate(\"categoriesTree.noMatchingCategoryNames\")}\n      />\n    );\n  }, []);\n\n  if (!state) {\n    return null;\n  }\n\n  const isFilterApplied = state.filteringResult?.filteredProvider !== undefined;\n  const overlay = state.filteringResult?.isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n  return (\n    <div className={classNames(\"tree-widget-visibility-tree-base\", \"tree-widget-tree-container\")}>\n      <PresentationTree\n        width={props.width}\n        height={props.height}\n        state={state}\n        selectionMode={props.selectionMode ?? SelectionMode.None}\n        treeRenderer={\n          hierarchyLevelConfig?.isFilteringEnabled\n            ? (rendererProps) => (\n                <FilterableTreeRenderer\n                  {...rendererProps}\n                  {...baseRendererProps}\n                  nodeLoader={state.nodeLoader}\n                  nodeRenderer={(nodeProps) => <CategoriesTreeNodeRenderer {...nodeProps} density={density} />}\n                />\n              )\n            : createVisibilityTreeRenderer(baseRendererProps)\n        }\n        descriptionsEnabled={true}\n        noDataRenderer={isFilterApplied ? noFilteredDataRenderer : undefined}\n      />\n      {overlay}\n    </div>\n  );\n}\n\ninterface CategoriesTreeNodeRendererProps extends FilterableTreeNodeRendererProps {\n  density?: \"default\" | \"enlarged\";\n}\n\nfunction CategoriesTreeNodeRenderer(props: CategoriesTreeNodeRendererProps) {\n  return (\n    <FilterableVisibilityTreeNodeRenderer\n      {...props}\n      iconsEnabled={false}\n      descriptionEnabled={true}\n      levelOffset={10}\n      isEnlarged={props.density === \"enlarged\"}\n      onVisibilityToggled={() => props.reportUsage?.({ featureId: \"visibility-change\", reportInteraction: true })}\n    />\n  );\n}\n\nfunction useCategoryVisibilityHandler(\n  viewManager: ViewManager,\n  imodel: IModelConnection,\n  categories: CategoryInfo[],\n  activeView: Viewport,\n  allViewports?: boolean,\n  visibilityHandler?: CategoryVisibilityHandler,\n) {\n  const [state, setState] = useState<CategoryVisibilityHandler>();\n\n  useEffect(() => {\n    if (visibilityHandler) {\n      return;\n    }\n\n    const defaultHandler = new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports });\n    setState(defaultHandler);\n    return () => {\n      defaultHandler.dispose();\n    };\n  }, [viewManager, imodel, categories, activeView, allViewports, visibilityHandler]);\n\n  return visibilityHandler ?? state;\n}\n\nasync function setViewType(activeView: Viewport) {\n  const view = activeView.view as SpatialViewState;\n  const viewType = view.is3d() ? \"3d\" : \"2d\";\n  await Presentation.presentation.vars(RULESET_CATEGORIES.id).setString(\"ViewType\", viewType);\n}\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([addCustomTreeNodeItemLabelRenderer]);\n"]}