@itwin/tree-widget-react 1.0.0 → 1.1.1

package/lib/cjs/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 { useEffect } from \"react\";\nimport { TreeImageLoader, TreeNodeRenderer, TreeRenderer } from \"@itwin/components-react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport classNames from \"classnames\";\n\nimport type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from \"@itwin/components-react\";\nimport type { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"./Common\";\n\n/**\n * This constant is 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;\n\n/**\n * Props for visibility tree renderer.\n * @public\n */\nexport interface VisibilityTreeRendererProps {\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\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeRenderer({ nodeRendererProps }: VisibilityTreeRendererProps) {\n  return function VisibilityTreeRenderer(props: TreeRendererProps) {\n    return (\n      <TreeRenderer\n        {...props}\n        nodeRenderer={createVisibilityTreeNodeRenderer(nodeRendererProps)}\n      />\n    );\n  };\n}\n\nconst imageLoader = new TreeImageLoader();\n\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }: 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(\"with-checkbox\", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && \"disable-expander\", treeNodeProps.className)}\n      />\n    );\n  };\n}\n\n/**\n * Checkbox renderer that renders an eye.\n * @public\n */\nexport function VisibilityTreeNodeCheckbox(props: NodeCheckboxRenderProps) {\n  return <Checkbox\n    className=\"visibility-tree-checkbox\"\n    variant=\"eyeball\"\n    checked={props.checked}\n    onChange={(e) => props.onChange(e.currentTarget.checked)}\n    disabled={props.disabled}\n    title={props.title}\n  />;\n}\n\n/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @public\n */\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 {\n    filteredNodeLoader,\n    isFiltering,\n    matchesCount,\n    nodeHighlightingProps,\n  } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });\n\n  useEffect(\n    () => {\n      if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader)\n        onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    },\n    [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied],\n  );\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 { useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport { TreeRenderer } from \"./common/TreeRenderer\";\n\nimport type { TreeRendererBaseProps } from \"./common/TreeRenderer\";\nimport type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from \"@itwin/components-react\";\nimport type { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"./common/Types\";\n\n/**\n * This constant is 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;\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\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\nconst imageLoader = new TreeImageLoader();\n\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }: 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(\"with-checkbox\", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && \"disable-expander\", treeNodeProps.className)}\n      />\n    );\n  };\n}\n\n/**\n * Checkbox renderer that renders an eye.\n * @public\n */\nexport function VisibilityTreeNodeCheckbox(props: NodeCheckboxRenderProps) {\n  return <Checkbox\n    className=\"visibility-tree-checkbox\"\n    variant=\"eyeball\"\n    checked={props.checked}\n    onChange={(e) => props.onChange(e.currentTarget.checked)}\n    disabled={props.disabled}\n    title={props.title}\n  />;\n}\n\n/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @public\n */\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 {\n    filteredNodeLoader,\n    isFiltering,\n    matchesCount,\n    nodeHighlightingProps,\n  } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });\n\n  useEffect(\n    () => {\n      if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader)\n        onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    },\n    [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied],\n  );\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/cjs/components/trees/category-tree/CategoriesTree.d.ts

@@ -3,7 +3,7 @@ import "../VisibilityTreeBase.scss";
 import { CategoryVisibilityHandler } from "./CategoryVisibilityHandler";
 import type { ViewManager, Viewport } from "@itwin/core-frontend";
 import type { Ruleset } from "@itwin/presentation-common";
-import type { BaseFilterableTreeProps } from "../Common";
+import type { BaseFilterableTreeProps } from "../common/Types";
 import type { CategoryInfo } from "./CategoryVisibilityHandler";
 /**
  * Presentation rules used by ControlledCategoriesTree

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

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CategoryTree = exports.RULESET_CATEGORIES = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,6 +10,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 require("../VisibilityTreeBase.scss");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const components_react_1 = require("@itwin/components-react");
 const core_frontend_1 = require("@itwin/core-frontend");
@@ -14,6 +18,7 @@ const core_react_1 = require("@itwin/core-react");
 const presentation_components_1 = require("@itwin/presentation-components");
 const presentation_frontend_1 = require("@itwin/presentation-frontend");
 const TreeWidget_1 = require("../../../TreeWidget");
+const Utils_1 = require("../common/Utils");
 const VisibilityTreeEventHandler_1 = require("../VisibilityTreeEventHandler");
 const VisibilityTreeRenderer_1 = require("../VisibilityTreeRenderer");
 const CategoryVisibilityHandler_1 = require("./CategoryVisibilityHandler");
@@ -32,6 +37,7 @@ function CategoryTree(props) {
         imodel: props.iModel,
         ruleset: exports.RULESET_CATEGORIES,
         pagingSize: PAGING_SIZE,
+        customizeTreeNodeItem,
     });
     const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = (0, VisibilityTreeRenderer_1.useVisibilityTreeFiltering)(nodeLoader, props.filterInfo, props.onFilterApplied);
     // istanbul ignore next
@@ -47,6 +53,9 @@ function CategoryTree(props) {
     }), [filteredNodeLoader, visibilityHandler]));
     const treeModel = (0, components_react_1.useTreeModel)(filteredNodeLoader.modelSource);
     const treeRenderer = (0, VisibilityTreeRenderer_1.createVisibilityTreeRenderer)({
+        contextMenuItems: props.contextMenuItems,
+        nodeLabelRenderer: props.nodeLabelRenderer,
+        density: props.density,
         nodeRendererProps: {
             iconsEnabled: false,
             descriptionEnabled: true,
@@ -58,7 +67,7 @@ function CategoryTree(props) {
     const noFilteredDataRenderer = (0, react_1.useCallback)(() => {
         return (0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.VisibilityTreeNoFilteredData, { title: TreeWidget_1.TreeWidget.translate("categoriesTree.noCategoryFound"), message: TreeWidget_1.TreeWidget.translate("categoriesTree.noMatchingCategoryNames") });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "tree-widget-visibility-tree-base", children: [(0, jsx_runtime_1.jsx)(components_react_1.ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode ?? components_react_1.SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, descriptionsEnabled: true, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, width: props.width, height: props.height }), overlay] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tree-widget-visibility-tree-base", "tree-widget-tree-container"), children: [(0, jsx_runtime_1.jsx)(components_react_1.ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode ?? components_react_1.SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, descriptionsEnabled: true, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, width: props.width, height: props.height }), overlay] }));
 }
 exports.CategoryTree = CategoryTree;
 function useCategoryVisibilityHandler(viewManager, imodel, categories, activeView, allViewports, visibilityHandler) {
@@ -72,4 +81,7 @@ async function setViewType(activeView) {
     const viewType = view.is3d() ? "3d" : "2d"; // eslint-disable-line @itwin/no-internal
     await presentation_frontend_1.Presentation.presentation.vars(exports.RULESET_CATEGORIES.id).setString("ViewType", viewType);
 }
+const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([
+    Utils_1.addCustomTreeNodeItemLabelRenderer,
+]);
 //# sourceMappingURL=CategoriesTree.js.map

package/lib/cjs/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 { useCallback, useEffect } from \"react\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { useDisposable } from \"@itwin/core-react\";\nimport { usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { createVisibilityTreeRenderer, useVisibilityTreeFiltering, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { CategoryVisibilityHandler } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, SpatialViewState, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseFilterableTreeProps } from \"../Common\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\n\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\n/**\n * Tree which displays and manages display of categories contained in an iModel.\n * @public\n */\nexport function CategoryTree(props: CategoryTreeProps) {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: RULESET_CATEGORIES,\n    pagingSize: PAGING_SIZE,\n  });\n\n  const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = useVisibilityTreeFiltering(nodeLoader, props.filterInfo, props.onFilterApplied);\n  // istanbul ignore next\n  const viewManager = props.viewManager ?? IModelApp.viewManager;\n  const { activeView, allViewports, categoryVisibilityHandler } = props;\n  const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);\n\n  useEffect(() => {\n    setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeView]);\n\n  const eventHandler = useDisposable(useCallback(() => new VisibilityTreeEventHandler({\n    nodeLoader: filteredNodeLoader,\n    visibilityHandler,\n  }), [filteredNodeLoader, visibilityHandler]));\n\n  const treeModel = useTreeModel(filteredNodeLoader.modelSource);\n  const treeRenderer = createVisibilityTreeRenderer({\n    nodeRendererProps: {\n      iconsEnabled: false,\n      descriptionEnabled: true,\n      levelOffset: 10,\n    },\n  });\n  const overlay = isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n  const filterApplied = filteredNodeLoader !== nodeLoader;\n\n  const noFilteredDataRenderer = useCallback(() => {\n    return <VisibilityTreeNoFilteredData\n      title={TreeWidget.translate(\"categoriesTree.noCategoryFound\")}\n      message={TreeWidget.translate(\"categoriesTree.noMatchingCategoryNames\")}\n    />;\n  }, []);\n\n  return (\n    <div className=\"tree-widget-visibility-tree-base\">\n      <ControlledTree\n        nodeLoader={filteredNodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode ?? SelectionMode.None}\n        eventsHandler={eventHandler}\n        treeRenderer={treeRenderer}\n        descriptionsEnabled={true}\n        nodeHighlightingProps={nodeHighlightingProps}\n        noDataRenderer={filterApplied ? noFilteredDataRenderer : undefined}\n        width={props.width}\n        height={props.height}\n      />\n      {overlay}\n    </div>\n  );\n}\n\nfunction useCategoryVisibilityHandler(viewManager: ViewManager, imodel: IModelConnection, categories: CategoryInfo[], activeView: Viewport, allViewports?: boolean, visibilityHandler?: CategoryVisibilityHandler) {\n  const defaultVisibilityHandler = useDisposable(useCallback(\n    () =>\n      new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }),\n    [viewManager, imodel, categories, activeView, allViewports]),\n  );\n  // istanbul ignore next\n  return visibilityHandler ?? defaultVisibilityHandler;\n}\n\nasync function setViewType(activeView: Viewport) {\n  const view = activeView.view as SpatialViewState;\n  // TODO: remove this eslint rule when tree-widget uses itwinjs-core 4.0.0 version\n  const viewType = view.is3d() ? \"3d\" : \"2d\"; // eslint-disable-line @itwin/no-internal\n  await Presentation.presentation.vars(RULESET_CATEGORIES.id).setString(\"ViewType\", viewType);\n}\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 } from \"react\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { useDisposable } from \"@itwin/core-react\";\nimport { usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { createVisibilityTreeRenderer, useVisibilityTreeFiltering, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { CategoryVisibilityHandler } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, SpatialViewState, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseFilterableTreeProps } from \"../common/Types\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\n\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\n/**\n * Tree which displays and manages display of categories contained in an iModel.\n * @public\n */\nexport function CategoryTree(props: CategoryTreeProps) {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: RULESET_CATEGORIES,\n    pagingSize: PAGING_SIZE,\n    customizeTreeNodeItem,\n  });\n\n  const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = useVisibilityTreeFiltering(nodeLoader, props.filterInfo, props.onFilterApplied);\n  // istanbul ignore next\n  const viewManager = props.viewManager ?? IModelApp.viewManager;\n  const { activeView, allViewports, categoryVisibilityHandler } = props;\n  const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);\n\n  useEffect(() => {\n    setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeView]);\n\n  const eventHandler = useDisposable(useCallback(() => new VisibilityTreeEventHandler({\n    nodeLoader: filteredNodeLoader,\n    visibilityHandler,\n  }), [filteredNodeLoader, visibilityHandler]));\n\n  const treeModel = useTreeModel(filteredNodeLoader.modelSource);\n  const treeRenderer = createVisibilityTreeRenderer({\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  const overlay = isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n  const filterApplied = filteredNodeLoader !== nodeLoader;\n\n  const noFilteredDataRenderer = useCallback(() => {\n    return <VisibilityTreeNoFilteredData\n      title={TreeWidget.translate(\"categoriesTree.noCategoryFound\")}\n      message={TreeWidget.translate(\"categoriesTree.noMatchingCategoryNames\")}\n    />;\n  }, []);\n\n  return (\n    <div className={classNames(\"tree-widget-visibility-tree-base\", \"tree-widget-tree-container\")}>\n      <ControlledTree\n        nodeLoader={filteredNodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode ?? SelectionMode.None}\n        eventsHandler={eventHandler}\n        treeRenderer={treeRenderer}\n        descriptionsEnabled={true}\n        nodeHighlightingProps={nodeHighlightingProps}\n        noDataRenderer={filterApplied ? noFilteredDataRenderer : undefined}\n        width={props.width}\n        height={props.height}\n      />\n      {overlay}\n    </div>\n  );\n}\n\nfunction useCategoryVisibilityHandler(viewManager: ViewManager, imodel: IModelConnection, categories: CategoryInfo[], activeView: Viewport, allViewports?: boolean, visibilityHandler?: CategoryVisibilityHandler) {\n  const defaultVisibilityHandler = useDisposable(useCallback(\n    () =>\n      new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }),\n    [viewManager, imodel, categories, activeView, allViewports]),\n  );\n  // istanbul ignore next\n  return visibilityHandler ?? defaultVisibilityHandler;\n}\n\nasync function setViewType(activeView: Viewport) {\n  const view = activeView.view as SpatialViewState;\n  // TODO: remove this eslint rule when tree-widget uses itwinjs-core 4.0.0 version\n  const viewType = view.is3d() ? \"3d\" : \"2d\"; // eslint-disable-line @itwin/no-internal\n  await Presentation.presentation.vars(RULESET_CATEGORIES.id).setString(\"ViewType\", viewType);\n}\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([\n  addCustomTreeNodeItemLabelRenderer,\n]);\n"]}

package/lib/cjs/components/trees/category-tree/CategoryVisibilityHandler.d.ts

@@ -44,8 +44,8 @@ export declare class CategoryVisibilityHandler implements IVisibilityHandler {
     onVisibilityChange: BeEvent<VisibilityChangeListener>;
     getVisibilityStatus(node: TreeNodeItem): VisibilityStatus;
     changeVisibility(node: TreeNodeItem, shouldDisplay: boolean): Promise<void>;
-    getSubCategoryVisibility(id: string): "visible" | "hidden";
-    getCategoryVisibility(id: string): "visible" | "hidden";
+    getSubCategoryVisibility(id: string): "hidden" | "visible";
+    getCategoryVisibility(id: string): "hidden" | "visible";
     getParent(key: string): CategoryInfo | undefined;
     private onDisplayStyleChanged;
     private onViewedCategoriesChanged;

package/lib/cjs/components/trees/common/ContextMenu.d.ts

@@ -0,0 +1,39 @@
+import type { MouseEvent, PropsWithChildren, ReactNode } from "react";
+import type { TreeModelNode } from "@itwin/components-react";
+/**
+ * Props for single context menu item.
+ * @public
+ */
+export interface ContextMenuItemProps {
+    node: TreeModelNode;
+}
+/**
+ * Props for configuring tree context menu.
+ * @public
+ */
+export interface TreeContextMenuProps {
+    contextMenuItems?: Array<(props: ContextMenuItemProps) => ReactNode>;
+}
+/**
+ * Props for [[TreeContextMenuItem]] component.
+ * @public
+ */
+export interface TreeContextMenuItemProps {
+    /** Unique id of the context menu item. */
+    id: string;
+    /** Description of the context menu item. */
+    title?: string;
+    /** Callback that is invoked when context menu item is clicked. */
+    onSelect: () => void;
+}
+/**
+ * Base component for rendering single context menu item.
+ * @public
+ */
+export declare function TreeContextMenuItem({ id, children, title, onSelect }: PropsWithChildren<TreeContextMenuItemProps>): JSX.Element;
+/** @internal */
+export declare function useContextMenu({ contextMenuItems }: TreeContextMenuProps): {
+    onContextMenu: (e: MouseEvent, node: TreeModelNode) => void;
+    renderContextMenu: () => JSX.Element | null;
+};
+//# sourceMappingURL=ContextMenu.d.ts.map

package/lib/cjs/components/trees/common/ContextMenu.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextMenu = exports.TreeContextMenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const react_1 = require("react");
+const core_react_1 = require("@itwin/core-react");
+/**
+ * Base component for rendering single context menu item.
+ * @public
+ */
+function TreeContextMenuItem({ id, children, title, onSelect }) {
+    return (0, jsx_runtime_1.jsx)(core_react_1.ContextMenuItem, { onSelect: onSelect, title: title, children: children }, id);
+}
+exports.TreeContextMenuItem = TreeContextMenuItem;
+/** @internal */
+function useContextMenu({ contextMenuItems }) {
+    const [contextMenu, setContextMenu] = (0, react_1.useState)();
+    const close = () => setContextMenu(undefined);
+    const onContextMenu = (e, node) => {
+        if (!contextMenuItems) {
+            return;
+        }
+        setContextMenu({
+            items: contextMenuItems.map((item, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: item({ node }) }, index)),
+            position: { x: e.clientX, y: e.clientY },
+        });
+    };
+    const renderContextMenu = () => {
+        if (!contextMenu) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(core_react_1.GlobalContextMenu, { identifier: "tree-widget-context-menu", x: contextMenu.position.x, y: contextMenu.position.y, opened: true, onOutsideClick: close, onEsc: close, onSelect: close, children: contextMenu.items }));
+    };
+    return {
+        onContextMenu,
+        renderContextMenu,
+    };
+}
+exports.useContextMenu = useContextMenu;
+//# sourceMappingURL=ContextMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/ContextMenu.tsx"],"names":[],"mappings":";;;;AAAA;;;+FAG+F;AAE/F,iCAA2C;AAC3C,kDAAuE;AAkCvE;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAA+C;IAChH,OAAO,uBAAC,4BAAe,IAErB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,YAEX,QAAQ,IAJJ,EAAE,CAKS,CAAC;AACrB,CAAC;AARD,kDAQC;AAOD,gBAAgB;AAChB,SAAgB,cAAc,CAAC,EAAE,gBAAgB,EAAwB;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,GAAe,CAAC;IAC9D,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IAE9C,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,IAAmB,EAAE,EAAE;QAC3D,IAAI,CAAC,gBAAgB,EAAE;YACrB,OAAO;SACR;QAED,cAAc,CAAC;YACb,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,uBAAC,gBAAQ,cAAc,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,IAAtB,KAAK,CAA6B,CAAC;YAC/F,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE;SACzC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,uBAAC,8BAAiB,IAChB,UAAU,EAAC,0BAA0B,EACrC,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,EACzB,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,EACzB,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,KAAK,EACrB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,YAEd,WAAW,CAAC,KAAK,GACA,CACrB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO;QACL,aAAa;QACb,iBAAiB;KAClB,CAAC;AACJ,CAAC;AAvCD,wCAuCC","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 { Fragment, useState } from \"react\";\nimport { ContextMenuItem, GlobalContextMenu } from \"@itwin/core-react\";\n\nimport type { MouseEvent, PropsWithChildren, ReactNode } from \"react\";\nimport type { TreeModelNode } from \"@itwin/components-react\";\n\n/**\n * Props for single context menu item.\n * @public\n */\nexport interface ContextMenuItemProps {\n  node: TreeModelNode;\n}\n\n/**\n * Props for configuring tree context menu.\n * @public\n */\nexport interface TreeContextMenuProps {\n  contextMenuItems?: Array<(props: ContextMenuItemProps) => ReactNode>;\n}\n\n/**\n * Props for [[TreeContextMenuItem]] component.\n * @public\n */\nexport interface TreeContextMenuItemProps {\n  /** Unique id of the context menu item. */\n  id: string;\n  /** Description of the context menu item. */\n  title?: string;\n  /** Callback that is invoked when context menu item is clicked. */\n  onSelect: () => void;\n}\n\n/**\n * Base component for rendering single context menu item.\n * @public\n */\nexport function TreeContextMenuItem({ id, children, title, onSelect }: PropsWithChildren<TreeContextMenuItemProps>) {\n  return <ContextMenuItem\n    key={id}\n    onSelect={onSelect}\n    title={title}\n  >\n    {children}\n  </ContextMenuItem>;\n}\n\ninterface ContextMenu {\n  items: ReactNode[];\n  position: {x: number, y: number};\n}\n\n/** @internal */\nexport function useContextMenu({ contextMenuItems }: TreeContextMenuProps) {\n  const [contextMenu, setContextMenu] = useState<ContextMenu>();\n  const close = () => setContextMenu(undefined);\n\n  const onContextMenu = (e: MouseEvent, node: TreeModelNode) => {\n    if (!contextMenuItems) {\n      return;\n    }\n\n    setContextMenu({\n      items: contextMenuItems.map((item, index) => <Fragment key={index}>{item({ node })}</Fragment>),\n      position: { x: e.clientX, y: e.clientY },\n    });\n  };\n\n  const renderContextMenu = () => {\n    if (!contextMenu) {\n      return null;\n    }\n\n    return (\n      <GlobalContextMenu\n        identifier=\"tree-widget-context-menu\"\n        x={contextMenu.position.x}\n        y={contextMenu.position.y}\n        opened={true}\n        onOutsideClick={close}\n        onEsc={close}\n        onSelect={close}\n      >\n        {contextMenu.items}\n      </GlobalContextMenu>\n    );\n  };\n\n  return {\n    onContextMenu,\n    renderContextMenu,\n  };\n}\n"]}

package/lib/cjs/components/trees/common/TreeNodeRenderer.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { IPropertyValueRenderer, PropertyValueRendererContext, TreeModelNode } from "@itwin/components-react";
+/**
+ * Context for rendering label value.
+ * @public
+ */
+export interface LabelRendererContext {
+    /** Style that should be applied to the rendered element. */
+    style?: React.CSSProperties;
+    /** Callback to highlight text. */
+    textHighlighter?: (text: string) => React.ReactNode;
+}
+/**
+ * Props for custom node renderer.
+ * @public
+ */
+export interface TreeNodeLabelRendererProps {
+    /** Tree node to rendered label for. */
+    node: TreeModelNode;
+    /** Context for rendering node's label value. */
+    context?: LabelRendererContext;
+}
+/**
+ * Props for customizing node rendering.
+ * @public
+ */
+export interface TreeNodeRendererProps {
+    /** Custom renderer for node's label. */
+    nodeLabelRenderer?: (props: TreeNodeLabelRendererProps) => ReactNode;
+}
+/**
+ * Props for [[DefaultLabelRenderer]] component.
+ * @public
+ */
+export interface DefaultLabelRendererProps {
+    /** Label that should be rendered. */
+    label: PropertyRecord;
+    /** Context for rendering label value. */
+    context?: LabelRendererContext;
+}
+/**
+ * Renders label for tree node.
+ * @public
+ */
+export declare function DefaultLabelRenderer({ label, context }: DefaultLabelRendererProps): JSX.Element;
+/** @internal */
+export interface TreeNodeRendererContextProviderProps extends TreeNodeRendererProps {
+    node: TreeModelNode;
+    children: ReactNode;
+}
+/** @internal */
+export declare function TreeNodeRendererContextProvider({ nodeLabelRenderer, node, children }: TreeNodeRendererContextProviderProps): JSX.Element;
+/** @internal */
+export declare const TREE_NODE_LABEL_RENDERER = "visibility-tree-node-label";
+/** @internal */
+export declare class TreeNodeLabelRenderer implements IPropertyValueRenderer {
+    canRender(record: PropertyRecord, _context?: PropertyValueRendererContext | undefined): boolean;
+    render(record: PropertyRecord, context?: PropertyValueRendererContext | undefined): ReactNode;
+}
+//# sourceMappingURL=TreeNodeRenderer.d.ts.map

package/lib/cjs/components/trees/common/TreeNodeRenderer.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNodeLabelRenderer = exports.TREE_NODE_LABEL_RENDERER = exports.TreeNodeRendererContextProvider = exports.DefaultLabelRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const react_1 = require("react");
+const components_react_1 = require("@itwin/components-react");
+/**
+ * Renders label for tree node.
+ * @public
+ */
+function DefaultLabelRenderer({ label, context }) {
+    const renderer = new components_react_1.PrimitivePropertyValueRenderer();
+    return renderer.render(label, context);
+}
+exports.DefaultLabelRenderer = DefaultLabelRenderer;
+/** @internal */
+function TreeNodeRendererContextProvider({ nodeLabelRenderer, node, children }) {
+    return ((0, jsx_runtime_1.jsx)(treeNodeLabelRendererContext.Provider, { value: { renderer: nodeLabelRenderer, node }, children: children }));
+}
+exports.TreeNodeRendererContextProvider = TreeNodeRendererContextProvider;
+/** @internal */
+exports.TREE_NODE_LABEL_RENDERER = "visibility-tree-node-label";
+/** @internal */
+class TreeNodeLabelRenderer {
+    canRender(record, _context) {
+        return record.property.renderer?.name === exports.TREE_NODE_LABEL_RENDERER;
+    }
+    render(record, context) {
+        const labelContext = {
+            style: context?.style,
+            textHighlighter: context?.textHighlighter,
+        };
+        return (0, jsx_runtime_1.jsx)(LabelRenderer, { record: record, context: labelContext });
+    }
+}
+exports.TreeNodeLabelRenderer = TreeNodeLabelRenderer;
+const treeNodeLabelRendererContext = (0, react_1.createContext)(undefined);
+function LabelRenderer({ record, context }) {
+    const renderContext = (0, react_1.useContext)(treeNodeLabelRendererContext);
+    if (!renderContext || !renderContext.renderer) {
+        return (0, jsx_runtime_1.jsx)(DefaultLabelRenderer, { label: record, context: context });
+    }
+    const { renderer, node } = renderContext;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderer({ node, context }) });
+}
+//# sourceMappingURL=TreeNodeRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeRenderer.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/TreeNodeRenderer.tsx"],"names":[],"mappings":";;;;AAAA;;;+FAG+F;AAE/F,iCAAkD;AAClD,8DAAyE;AAkDzE;;;GAGG;AACH,SAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAA6B;IAChF,MAAM,QAAQ,GAAG,IAAI,iDAA8B,EAAE,CAAC;IACtD,OAAO,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACzC,CAAC;AAHD,oDAGC;AAQD,gBAAgB;AAChB,SAAgB,+BAA+B,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAwC;IACzH,OAAO,CACL,uBAAC,4BAA4B,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAChF,QAAQ,GAC6B,CACzC,CAAC;AACJ,CAAC;AAND,0EAMC;AAED,gBAAgB;AACH,QAAA,wBAAwB,GAAG,4BAA4B,CAAC;AAErE,gBAAgB;AAChB,MAAa,qBAAqB;IACzB,SAAS,CAAC,MAAsB,EAAE,QAAmD;QAC1F,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,IAAI,KAAK,gCAAwB,CAAC;IACrE,CAAC;IAEM,MAAM,CAAC,MAAsB,EAAE,OAAkD;QACtF,MAAM,YAAY,GAAyB;YACzC,KAAK,EAAE,OAAO,EAAE,KAAK;YACrB,eAAe,EAAE,OAAO,EAAE,eAAe;SAC1C,CAAC;QACF,OAAO,uBAAC,aAAa,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAI,CAAC;IAClE,CAAC;CACF;AAZD,sDAYC;AAOD,MAAM,4BAA4B,GAAG,IAAA,qBAAa,EAA2C,SAAS,CAAC,CAAC;AAOxG,SAAS,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAsB;IAC5D,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4BAA4B,CAAC,CAAC;IAE/D,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;QAC7C,OAAO,uBAAC,oBAAoB,IAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;KAClE;IAED,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC;IACzC,OAAO,2DAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,GAAI,CAAC;AAC5C,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 { createContext, useContext } from \"react\";\nimport { PrimitivePropertyValueRenderer } from \"@itwin/components-react\";\n\nimport type { ReactNode } from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport type {\n  IPropertyValueRenderer, PropertyValueRendererContext, TreeModelNode,\n} from \"@itwin/components-react\";\n\n/**\n * Context for rendering label value.\n * @public\n */\nexport interface LabelRendererContext {\n  /** Style that should be applied to the rendered element. */\n  style?: React.CSSProperties;\n  /** Callback to highlight text. */\n  textHighlighter?: (text: string) => React.ReactNode;\n}\n\n/**\n * Props for custom node renderer.\n * @public\n */\nexport interface TreeNodeLabelRendererProps {\n  /** Tree node to rendered label for. */\n  node: TreeModelNode;\n  /** Context for rendering node's label value. */\n  context?: LabelRendererContext;\n}\n\n/**\n * Props for customizing node rendering.\n * @public\n */\nexport interface TreeNodeRendererProps {\n  /** Custom renderer for node's label. */\n  nodeLabelRenderer?: (props: TreeNodeLabelRendererProps) => ReactNode;\n}\n\n/**\n * Props for [[DefaultLabelRenderer]] component.\n * @public\n */\nexport interface DefaultLabelRendererProps {\n  /** Label that should be rendered. */\n  label: PropertyRecord;\n  /** Context for rendering label value. */\n  context?: LabelRendererContext;\n}\n\n/**\n * Renders label for tree node.\n * @public\n */\nexport function DefaultLabelRenderer({ label, context }: DefaultLabelRendererProps) {\n  const renderer = new PrimitivePropertyValueRenderer();\n  return renderer.render(label, context);\n}\n\n/** @internal */\nexport interface TreeNodeRendererContextProviderProps extends TreeNodeRendererProps {\n  node: TreeModelNode;\n  children: ReactNode;\n}\n\n/** @internal */\nexport function TreeNodeRendererContextProvider({ nodeLabelRenderer, node, children }: TreeNodeRendererContextProviderProps) {\n  return (\n    <treeNodeLabelRendererContext.Provider value={{ renderer: nodeLabelRenderer, node }}>\n      {children}\n    </treeNodeLabelRendererContext.Provider>\n  );\n}\n\n/** @internal */\nexport const TREE_NODE_LABEL_RENDERER = \"visibility-tree-node-label\";\n\n/** @internal */\nexport class TreeNodeLabelRenderer implements IPropertyValueRenderer {\n  public canRender(record: PropertyRecord, _context?: PropertyValueRendererContext | undefined): boolean {\n    return record.property.renderer?.name === TREE_NODE_LABEL_RENDERER;\n  }\n\n  public render(record: PropertyRecord, context?: PropertyValueRendererContext | undefined): ReactNode {\n    const labelContext: LabelRendererContext = {\n      style: context?.style,\n      textHighlighter: context?.textHighlighter,\n    };\n    return <LabelRenderer record={record} context={labelContext} />;\n  }\n}\n\ninterface TreeNodeLabelRendererContext {\n  renderer?: (props: TreeNodeLabelRendererProps) => ReactNode;\n  node: TreeModelNode;\n}\n\nconst treeNodeLabelRendererContext = createContext<TreeNodeLabelRendererContext | undefined>(undefined);\n\ninterface LabelRendererProps {\n  record: PropertyRecord;\n  context?: LabelRendererContext;\n}\n\nfunction LabelRenderer({ record, context }: LabelRendererProps) {\n  const renderContext = useContext(treeNodeLabelRendererContext);\n\n  if (!renderContext || !renderContext.renderer) {\n    return <DefaultLabelRenderer label={record} context={context} />;\n  }\n\n  const { renderer, node } = renderContext;\n  return <>{renderer({ node, context })}</>;\n}\n"]}

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import "./TreeRenderer.scss";
+import type { TreeRendererProps as ComponentsTreeRendererProps } from "@itwin/components-react";
+import type { TreeNodeRendererProps } from "./TreeNodeRenderer";
+import type { TreeContextMenuProps } from "./ContextMenu";
+/**
+ * Base props for [[TreeRenderer]] component.
+ * @public
+ */
+export interface TreeRendererBaseProps extends TreeContextMenuProps, TreeNodeRendererProps {
+    /**
+     * Modifies the density of tree nodes. `enlarged` tree nodes have bigger height and bigger button hit boxes.
+     */
+    density?: "default" | "enlarged";
+}
+/**
+ * Props for [[TreeRenderer]] component.
+ * @public
+ */
+export type TreeRendererProps = ComponentsTreeRendererProps & TreeRendererBaseProps;
+/**
+ * Base tree renderer for visibility trees.
+ * @public
+ */
+export declare function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }: TreeRendererProps): JSX.Element;
+//# sourceMappingURL=TreeRenderer.d.ts.map

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

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+require("./TreeRenderer.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const components_react_1 = require("@itwin/components-react");
+const ContextMenu_1 = require("./ContextMenu");
+const TreeNodeRenderer_1 = require("./TreeNodeRenderer");
+/**
+ * Base tree renderer for visibility trees.
+ * @public
+ */
+function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }) {
+    const { onContextMenu, renderContextMenu } = (0, ContextMenu_1.useContextMenu)({ contextMenuItems });
+    const nodeHeight = getNodeHeight(density ?? "default", restProps.nodeHeight);
+    const className = (0, classnames_1.default)("tree-widget-tree-nodes-list", { ["enlarge"]: density === "enlarged" });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)(components_react_1.TreeRenderer, { ...restProps, nodeRenderer: (nodeProps) => {
+                    const nodeClassName = nodeProps.node.numChildren === 0 ? "without-expander" : undefined;
+                    return ((0, jsx_runtime_1.jsx)(TreeNodeRenderer_1.TreeNodeRendererContextProvider, { node: nodeProps.node, nodeLabelRenderer: nodeLabelRenderer, children: nodeRenderer
+                            ? nodeRenderer({ ...nodeProps, onContextMenu, className: nodeClassName })
+                            : (0, jsx_runtime_1.jsx)(components_react_1.TreeNodeRenderer, { ...nodeProps, onContextMenu: onContextMenu, className: nodeClassName }) }));
+                }, nodeHeight: nodeHeight }), renderContextMenu()] }));
+}
+exports.TreeRenderer = TreeRenderer;
+function getNodeHeight(density, defaultHeight) {
+    switch (density) {
+        case "default":
+            return defaultHeight;
+        case "enlarged":
+            return () => 43;
+    }
+}
+//# sourceMappingURL=TreeRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/TreeRenderer.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;+FAG+F;AAE/F,+BAA6B;AAC7B,4DAAoC;AACpC,8DAAmG;AACnG,+CAA+C;AAC/C,yDAAqE;AAuBrE;;;GAGG;AACH,SAAgB,YAAY,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,SAAS,EAAqB;IAC1H,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,IAAA,4BAAc,EAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAElF,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,IAAI,SAAS,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,6BAA6B,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,CAAC,CAAC;IAErG,OAAO,CACL,iCAAK,SAAS,EAAE,SAAS,aACvB,uBAAC,+BAAsB,OACjB,SAAS,EACb,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE;oBAC1B,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;oBACxF,OAAO,CACL,uBAAC,kDAA+B,IAAC,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,iBAAiB,YACxF,YAAY;4BACX,CAAC,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;4BACzE,CAAC,CAAC,uBAAC,mCAAgB,OAAK,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,GAAI,GAC/D,CACnC,CAAC;gBACJ,CAAC,EAED,UAAU,EAAE,UAAU,GACtB,EACD,iBAAiB,EAAE,IAChB,CACP,CAAC;AACJ,CAAC;AA1BD,oCA0BC;AAED,SAAS,aAAa,CAAC,OAA+B,EAAE,aAAwD;IAC9G,QAAQ,OAAO,EAAE;QACf,KAAK,SAAS;YACZ,OAAO,aAAa,CAAC;QACvB,KAAK,UAAU;YACb,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC;KACnB;AACH,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeRenderer.scss\";\nimport classNames from \"classnames\";\nimport { TreeRenderer as ComponentsTreeRenderer, TreeNodeRenderer } from \"@itwin/components-react\";\nimport { useContextMenu } from \"./ContextMenu\";\nimport { TreeNodeRendererContextProvider } from \"./TreeNodeRenderer\";\n\nimport type { TreeRendererProps as ComponentsTreeRendererProps } from \"@itwin/components-react\";\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer\";\nimport type { TreeContextMenuProps } from \"./ContextMenu\";\n\n/**\n * Base props for [[TreeRenderer]] component.\n * @public\n */\nexport interface TreeRendererBaseProps extends TreeContextMenuProps, TreeNodeRendererProps {\n  /**\n   * Modifies the density of tree nodes. `enlarged` tree nodes have bigger height and bigger button hit boxes.\n   */\n  density?: \"default\" | \"enlarged\";\n}\n\n/**\n * Props for [[TreeRenderer]] component.\n * @public\n */\nexport type TreeRendererProps = ComponentsTreeRendererProps & TreeRendererBaseProps;\n\n/**\n * Base tree renderer for visibility trees.\n * @public\n */\nexport function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }: TreeRendererProps) {\n  const { onContextMenu, renderContextMenu } = useContextMenu({ contextMenuItems });\n\n  const nodeHeight = getNodeHeight(density ?? \"default\", restProps.nodeHeight);\n  const className = classNames(\"tree-widget-tree-nodes-list\", { [\"enlarge\"]: density === \"enlarged\" });\n\n  return (\n    <div className={className}>\n      <ComponentsTreeRenderer\n        {...restProps}\n        nodeRenderer={(nodeProps) => {\n          const nodeClassName = nodeProps.node.numChildren === 0 ? \"without-expander\" : undefined;\n          return (\n            <TreeNodeRendererContextProvider node={nodeProps.node} nodeLabelRenderer={nodeLabelRenderer}>\n              {nodeRenderer\n                ? nodeRenderer({ ...nodeProps, onContextMenu, className: nodeClassName })\n                : <TreeNodeRenderer {...nodeProps} onContextMenu={onContextMenu} className={nodeClassName} />}\n            </TreeNodeRendererContextProvider>\n          );\n        }\n        }\n        nodeHeight={nodeHeight}\n      />\n      {renderContextMenu()}\n    </div>\n  );\n}\n\nfunction getNodeHeight(density: \"default\" | \"enlarged\", defaultHeight: ComponentsTreeRendererProps[\"nodeHeight\"]) {\n  switch (density) {\n    case \"default\":\n      return defaultHeight;\n    case \"enlarged\":\n      return () => 43;\n  }\n}\n"]}

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

@@ -0,0 +1,102 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.tree-widget-tree-with-header {
+  width: 100%;
+  height: 100%;
+
+  .tree-widget-tree-header {
+    height: var(--iui-size-xl);
+  }
+
+  .tree-widget-tree-content {
+    height: calc(100% - var(--iui-size-xl));
+  }
+}
+
+.tree-widget-tree-nodes-list {
+  height: 100%;
+  width: 100%;
+
+  .ReactWindow__VariableSizeList {
+    >div {
+      min-width: max-content !important; // to override inline class
+    }
+  }
+
+  &.enlarge {
+    --enlarged-node-height: calc(var(--iui-size-l) + var(--iui-size-m) + var(--iui-size-3xs));
+    --enlarged-node-icon-size: var(--iui-size-m);
+    --enlarged-node-icon-padding: calc(var(--enlarged-node-height) - var(--enlarged-node-icon-size));
+    --enlarged-node-expander-additional-padding: calc(var(--iui-size-m) + var(--iui-size-3xs));
+
+    .core-tree-node {
+      &.without-expander {
+        >.contents {
+          padding-left: var(--enlarged-node-expander-additional-padding);
+        }
+      }
+
+      >.contents {
+        height: var(--enlarged-node-height);
+        font-size: var(--iui-font-size-2);
+
+        .core-tree-expansionToggle {
+          >.icon {
+            height: var(--enlarged-node-height);
+            width: var(--enlarged-node-height);
+            padding: calc(var(--enlarged-node-icon-padding) / 2);
+
+            svg {
+              height: var(--enlarged-node-icon-size);
+              width: var(--enlarged-node-icon-size);
+            }
+          }
+        }
+
+        .iui-progress-indicator-radial {
+          height: var(--enlarged-node-height);
+          width: var(--enlarged-node-height);
+          padding: calc(var(--enlarged-node-icon-padding) / 2 - 1px); // need to reduce padding by `1px` to make sure icon is centered
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.tree-widget-tree-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .filteredTreeOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    background-color: hsl(var(--iui-color-background) / var(--iui-opacity-2));
+  }
+
+  .components-tree-errormessage {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    width: 75%;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    font-style: italic;
+    color: var(--iui-color-text-muted);
+
+    .errormessage-header {
+      display: block;
+      font-weight: bold;
+    }
+  }
+}

package/lib/cjs/components/trees/{Common.d.ts → common/Types.d.ts}

@@ -1,6 +1,7 @@
 import type { IModelConnection } from "@itwin/core-frontend";
 import type { SelectionMode } from "@itwin/components-react";
 import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+import type { TreeRendererBaseProps } from "./TreeRenderer";
 /**
  * An option of how class grouping should work in a component.
  * @public
@@ -25,7 +26,7 @@ export interface VisibilityTreeFilterInfo {
  * Base props for tree components.
  * @public
  */
-export interface BaseTreeProps {
+export interface BaseTreeProps extends TreeRendererBaseProps {
     /** An iModel to pull data from. */
     iModel: IModelConnection;
     /** Width of the component. */
@@ -45,4 +46,4 @@ export interface BaseFilterableTreeProps extends BaseTreeProps {
     /** Callback invoked when tree is filtered. */
     onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;
 }
-//# sourceMappingURL=Common.d.ts.map
+//# sourceMappingURL=Types.d.ts.map

package/lib/cjs/components/trees/{Common.js → common/Types.js}

@@ -18,4 +18,4 @@ var ClassGroupingOption;
     /** Class grouping is enabled and grouping node shows grouped items count */
     ClassGroupingOption[ClassGroupingOption["YesWithCounts"] = 2] = "YesWithCounts";
 })(ClassGroupingOption = exports.ClassGroupingOption || (exports.ClassGroupingOption = {}));
-//# sourceMappingURL=Common.js.map
+//# sourceMappingURL=Types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/Types.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAO/F;;;GAGG;AACH,IAAY,mBAOX;AAPD,WAAY,mBAAmB;IAC7B,iCAAiC;IACjC,yDAAE,CAAA;IACF,gCAAgC;IAChC,2DAAG,CAAA;IACH,4EAA4E;IAC5E,+EAAa,CAAA;AACf,CAAC,EAPW,mBAAmB,GAAnB,2BAAmB,KAAnB,2BAAmB,QAO9B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { SelectionMode } from \"@itwin/components-react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { TreeRendererBaseProps } from \"./TreeRenderer\";\n\n/**\n * An option of how class grouping should work in a component.\n * @public\n */\nexport enum ClassGroupingOption {\n  /** Class grouping is disabled */\n  No,\n  /** Class grouping is enabled */\n  Yes,\n  /** Class grouping is enabled and grouping node shows grouped items count */\n  YesWithCounts,\n}\n\n/**\n * Data structure that describes info used to filter visibility tree.\n * @public\n */\nexport interface VisibilityTreeFilterInfo {\n  filter: string;\n  activeMatchIndex?: number;\n}\n\n/**\n * Base props for tree components.\n * @public\n */\nexport interface BaseTreeProps extends TreeRendererBaseProps {\n  /** An iModel to pull data from. */\n  iModel: IModelConnection;\n  /** Width of the component. */\n  width: number;\n  /** Height of the component. */\n  height: number;\n  /** Selection mode in the tree. */\n  selectionMode?: SelectionMode;\n}\n\n/**\n * Base props for filterable tree components.\n * @public\n */\nexport interface BaseFilterableTreeProps extends BaseTreeProps {\n  /** Information for tree filtering. */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /** Callback invoked when tree is filtered. */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\n}\n"]}

package/lib/cjs/components/trees/common/Utils.d.ts

@@ -0,0 +1,11 @@
+import type { DelayLoadedTreeNodeItem } from "@itwin/components-react";
+import type { Node } from "@itwin/presentation-common";
+/** @internal */
+export declare function combineTreeNodeItemCustomizations(customizations: Array<(item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => void>): (item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => void;
+/** @internal */
+export declare function addCustomTreeNodeItemLabelRenderer(item: Partial<DelayLoadedTreeNodeItem>): void;
+/** @internal */
+export declare function addTreeNodeItemCheckbox(item: Partial<DelayLoadedTreeNodeItem>): void;
+/** @internal */
+export declare function registerRenderers(): () => void;
+//# sourceMappingURL=Utils.d.ts.map