@itwin/tree-widget-react 1.2.2 → 2.0.0-dev.0

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { TreeRendererBaseProps } from "./common/TreeRenderer";
-import type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from "@itwin/components-react";
 import type { NodeCheckboxRenderProps } from "@itwin/core-react";
-import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+import type { TreeRendererBaseProps, TreeRendererProps } from "./common/TreeRenderer";
+import type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps } from "@itwin/components-react";
+import type { IPresentationTreeDataProvider, PresentationTreeNodeRendererProps } from "@itwin/presentation-components";
 import type { VisibilityTreeFilterInfo } from "./common/Types";
 /**
  * Props for visibility tree renderer.
@@ -35,6 +35,11 @@ export interface VisibilityTreeNodeRendererProps {
      * Defaults to `false`.
      */
     disableRootNodeCollapse?: boolean;
+    /**
+     * Specifies whether the nodes should be enlarged (less dense and larger content).
+     * Is `false` by default
+     */
+    isEnlarged?: boolean;
 }
 /**
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
@@ -45,15 +50,26 @@ 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, }: VisibilityTreeNodeRendererProps): (treeNodeProps: TreeNodeRendererProps) => JSX.Element;
 /**
  * Checkbox renderer that renders an eye.
  * @public
  */
 export declare function VisibilityTreeNodeCheckbox(props: NodeCheckboxRenderProps): JSX.Element;
+/**
+ * Props for [[FilterableVisibilityTreeNodeRenderer]].
+ * @beta
+ */
+export type FilterableVisibilityTreeNodeRendererProps = Omit<PresentationTreeNodeRendererProps, "descriptionEnabled"> & VisibilityTreeNodeRendererProps;
+/**
+ * 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;
 /**
  * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.
  * @public
+ * @deprecated in 2.0.0. Use [[useVisibilityTree]] instead.
  */
 export declare function useVisibilityTreeFiltering(nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>, filterInfo?: VisibilityTreeFilterInfo, onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void): {
     filteredNodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>;

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

@@ -1,21 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import classNames from "classnames";
 import { useEffect } from "react";
 import { TreeImageLoader, TreeNodeRenderer } from "@itwin/components-react";
 import { Checkbox } from "@itwin/itwinui-react";
-import { useControlledPresentationTreeFiltering } from "@itwin/presentation-components";
+import { PresentationTreeNodeRenderer, useControlledPresentationTreeFiltering } from "@itwin/presentation-components";
 import { TreeRenderer } from "./common/TreeRenderer";
 /**
- * This constant is taken from `@itwin/core-react`.
+ * These constants are taken from `@itwin/core-react`.
  * Defines the size in pixels of the expansion toggle.
  * It is used to keep same hierarchy nodes with children and nodes without children in the same line.
  * @note This value applies only to the leaf nodes.
  */
 const EXPANSION_TOGGLE_WIDTH = 24;
+const EXPANDED_EXPANSION_TOGGLE_WIDTH = 42;
+const imageLoader = new TreeImageLoader();
 /**
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
  * @public
@@ -25,12 +27,11 @@ export function createVisibilityTreeRenderer({ nodeRendererProps, ...restProps }
         return _jsx(TreeRenderer, { ...treeProps, ...restProps, nodeRenderer: createVisibilityTreeNodeRenderer(nodeRendererProps) });
     };
 }
-const imageLoader = new TreeImageLoader();
 /**
  * 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, }) {
     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) }));
@@ -41,18 +42,34 @@ 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.onChange(e.currentTarget.checked), 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 }) {
+    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") }));
 }
 /**
  * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.
  * @public
+ * @deprecated in 2.0.0. Use [[useVisibilityTree]] instead.
  */
+// istanbul ignore next
 export function useVisibilityTreeFiltering(nodeLoader, filterInfo, onFilterApplied) {
     const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };
-    const { filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps, } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });
+    const { filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps } = useControlledPresentationTreeFiltering({
+        nodeLoader,
+        filter,
+        activeMatchIndex,
+    });
     useEffect(() => {
-        if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader)
+        if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader) {
             onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);
+        }
     }, [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied]);
     return { filteredNodeLoader, isFiltering, nodeHighlightingProps };
 }

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 { 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    onClick={props.onClick}\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 { 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"]}

package/lib/esm/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/Types";
+import type { BaseFilterableTreeProps, HierarchyLevelConfig } from "../common/Types";
 import type { CategoryInfo } from "./CategoryVisibilityHandler";
 /**
  * Presentation rules used by ControlledCategoriesTree
@@ -33,10 +33,15 @@ export interface CategoryTreeProps extends BaseFilterableTreeProps {
      * @internal
      */
     viewManager?: ViewManager;
+    /**
+     * Props for configuring hierarchy level.
+     * @beta
+     */
+    hierarchyLevelConfig?: HierarchyLevelConfig;
 }
 /**
  * Tree which displays and manages display of categories contained in an iModel.
  * @public
  */
-export declare function CategoryTree(props: CategoryTreeProps): JSX.Element;
+export declare function CategoryTree(props: CategoryTreeProps): JSX.Element | null;
 //# sourceMappingURL=CategoriesTree.d.ts.map

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

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import "../VisibilityTreeBase.scss";
 import classNames from "classnames";
-import { useCallback, useEffect } from "react";
-import { ControlledTree, SelectionMode, useTreeModel } from "@itwin/components-react";
+import { useCallback, useEffect, useState } from "react";
+import { SelectionMode } from "@itwin/components-react";
 import { IModelApp } from "@itwin/core-frontend";
-import { useDisposable } from "@itwin/core-react";
-import { usePresentationTreeNodeLoader } from "@itwin/presentation-components";
+import { PresentationTree } from "@itwin/presentation-components";
 import { Presentation } from "@itwin/presentation-frontend";
 import { TreeWidget } from "../../../TreeWidget";
+import { FilterableTreeRenderer } from "../common/TreeRenderer";
+import { useVisibilityTreeState } from "../common/UseVisibilityTreeState";
 import { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from "../common/Utils";
-import { VisibilityTreeEventHandler } from "../VisibilityTreeEventHandler";
-import { createVisibilityTreeRenderer, useVisibilityTreeFiltering, VisibilityTreeNoFilteredData } from "../VisibilityTreeRenderer";
+import { createVisibilityTreeRenderer, FilterableVisibilityTreeNodeRenderer, VisibilityTreeNoFilteredData } from "../VisibilityTreeRenderer";
 import { CategoryVisibilityHandler } from "./CategoryVisibilityHandler";
 const PAGING_SIZE = 20;
 /**
@@ -27,26 +27,29 @@ export const RULESET_CATEGORIES = require("./Categories.json"); // eslint-disabl
  * @public
  */
 export function CategoryTree(props) {
-    const { nodeLoader } = usePresentationTreeNodeLoader({
+    // istanbul ignore next
+    const viewManager = props.viewManager ?? IModelApp.viewManager;
+    const { activeView, allViewports, categoryVisibilityHandler, onFilterApplied, density, hierarchyLevelConfig } = 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 state = useVisibilityTreeState({
         imodel: props.iModel,
         ruleset: RULESET_CATEGORIES,
         pagingSize: PAGING_SIZE,
+        visibilityHandler,
         customizeTreeNodeItem,
+        filterInfo: props.filterInfo,
+        onFilterChange,
+        hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
     });
-    const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = useVisibilityTreeFiltering(nodeLoader, props.filterInfo, props.onFilterApplied);
-    // istanbul ignore next
-    const viewManager = props.viewManager ?? IModelApp.viewManager;
-    const { activeView, allViewports, categoryVisibilityHandler } = props;
-    const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);
     useEffect(() => {
         setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises
     }, [activeView]);
-    const eventHandler = useDisposable(useCallback(() => new VisibilityTreeEventHandler({
-        nodeLoader: filteredNodeLoader,
-        visibilityHandler,
-    }), [filteredNodeLoader, visibilityHandler]));
-    const treeModel = useTreeModel(filteredNodeLoader.modelSource);
-    const treeRenderer = createVisibilityTreeRenderer({
+    const baseRendererProps = {
         contextMenuItems: props.contextMenuItems,
         nodeLabelRenderer: props.nodeLabelRenderer,
         density: props.density,
@@ -55,26 +58,40 @@ export function CategoryTree(props) {
             descriptionEnabled: true,
             levelOffset: 10,
         },
-    });
-    const overlay = isFiltering ? _jsx("div", { className: "filteredTreeOverlay" }) : undefined;
-    const filterApplied = filteredNodeLoader !== nodeLoader;
+    };
     const noFilteredDataRenderer = useCallback(() => {
-        return _jsx(VisibilityTreeNoFilteredData, { title: TreeWidget.translate("categoriesTree.noCategoryFound"), message: TreeWidget.translate("categoriesTree.noMatchingCategoryNames") });
+        return (_jsx(VisibilityTreeNoFilteredData, { title: TreeWidget.translate("categoriesTree.noCategoryFound"), message: TreeWidget.translate("categoriesTree.noMatchingCategoryNames") }));
     }, []);
-    return (_jsxs("div", { className: classNames("tree-widget-visibility-tree-base", "tree-widget-tree-container"), children: [_jsx(ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode ?? SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, descriptionsEnabled: true, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, width: props.width, height: props.height }), overlay] }));
+    if (!state) {
+        return null;
+    }
+    const isFilterApplied = state.filteringResult?.filteredProvider !== undefined;
+    const overlay = state.filteringResult?.isFiltering ? _jsx("div", { className: "filteredTreeOverlay" }) : undefined;
+    return (_jsxs("div", { className: classNames("tree-widget-visibility-tree-base", "tree-widget-tree-container"), children: [_jsx(PresentationTree, { width: props.width, height: props.height, state: state, selectionMode: props.selectionMode ?? SelectionMode.None, treeRenderer: hierarchyLevelConfig?.isFilteringEnabled
+                    ? (rendererProps) => (_jsx(FilterableTreeRenderer, { ...rendererProps, ...baseRendererProps, nodeLoader: state.nodeLoader, nodeRenderer: (nodeProps) => _jsx(CategoriesTreeNodeRenderer, { ...nodeProps, density: density }) }))
+                    : 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" }));
 }
 function useCategoryVisibilityHandler(viewManager, imodel, categories, activeView, allViewports, visibilityHandler) {
-    const defaultVisibilityHandler = useDisposable(useCallback(() => new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }), [viewManager, imodel, categories, activeView, allViewports]));
-    // istanbul ignore next
-    return visibilityHandler ?? defaultVisibilityHandler;
+    const [state, setState] = useState();
+    useEffect(() => {
+        if (visibilityHandler) {
+            return;
+        }
+        const defaultHandler = new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports });
+        setState(defaultHandler);
+        return () => {
+            defaultHandler.dispose();
+        };
+    }, [viewManager, imodel, categories, activeView, allViewports, visibilityHandler]);
+    return visibilityHandler ?? state;
 }
 async function setViewType(activeView) {
     const view = activeView.view;
-    // TODO: remove this eslint rule when tree-widget uses itwinjs-core 4.0.0 version
-    const viewType = view.is3d() ? "3d" : "2d"; // eslint-disable-line @itwin/no-internal
+    const viewType = view.is3d() ? "3d" : "2d";
     await Presentation.presentation.vars(RULESET_CATEGORIES.id).setString("ViewType", viewType);
 }
-const customizeTreeNodeItem = combineTreeNodeItemCustomizations([
-    addCustomTreeNodeItemLabelRenderer,
-]);
+const customizeTreeNodeItem = combineTreeNodeItemCustomizations([addCustomTreeNodeItemLabelRenderer]);
 //# sourceMappingURL=CategoriesTree.js.map

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":";AAAA;;;+FAG+F;AAE/F,OAAO,4BAA4B,CAAC;AACpC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,kCAAkC,EAAE,iCAAiC,EAAE,MAAM,iBAAiB,CAAC;AACxG,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AACnI,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAOxE,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAY,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,yDAAyD;AA2BlI;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,6BAA6B,CAAC;QACnD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,kBAAkB;QAC3B,UAAU,EAAE,WAAW;QACvB,qBAAqB;KACtB,CAAC,CAAC;IAEH,MAAM,EAAE,kBAAkB,EAAE,WAAW,EAAE,qBAAqB,EAAE,GAAG,0BAA0B,CAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IACnJ,uBAAuB;IACvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,CAAC;IAC/D,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,iBAAiB,GAAG,4BAA4B,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,yBAAyB,CAAC,CAAC;IAEzJ,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,8DAA8D;IACzF,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,IAAI,0BAA0B,CAAC;QAClF,UAAU,EAAE,kBAAkB;QAC9B,iBAAiB;KAClB,CAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,YAAY,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,4BAA4B,CAAC;QAChD,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB;QAC1C,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,iBAAiB,EAAE;YACjB,YAAY,EAAE,KAAK;YACnB,kBAAkB,EAAE,IAAI;YACxB,WAAW,EAAE,EAAE;SAChB;KACF,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,qBAAqB,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAClF,MAAM,aAAa,GAAG,kBAAkB,KAAK,UAAU,CAAC;IAExD,MAAM,sBAAsB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9C,OAAO,KAAC,4BAA4B,IAClC,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,gCAAgC,CAAC,EAC7D,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,wCAAwC,CAAC,GACvE,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,kCAAkC,EAAE,4BAA4B,CAAC,aAC1F,KAAC,cAAc,IACb,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,aAAa,CAAC,IAAI,EACxD,aAAa,EAAE,YAAY,EAC3B,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,IAAI,EACzB,qBAAqB,EAAE,qBAAqB,EAC5C,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,EAClE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,GACpB,EACD,OAAO,IACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,4BAA4B,CAAC,WAAwB,EAAE,MAAwB,EAAE,UAA0B,EAAE,UAAoB,EAAE,YAAsB,EAAE,iBAA6C;IAC/M,MAAM,wBAAwB,GAAG,aAAa,CAAC,WAAW,CACxD,GAAG,EAAE,CACH,IAAI,yBAAyB,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,EAC9F,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC7D,CAAC;IACF,uBAAuB;IACvB,OAAO,iBAAiB,IAAI,wBAAwB,CAAC;AACvD,CAAC;AAED,KAAK,UAAU,WAAW,CAAC,UAAoB;IAC7C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAwB,CAAC;IACjD,iFAAiF;IACjF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,yCAAyC;IACrF,MAAM,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAC9F,CAAC;AAED,MAAM,qBAAqB,GAAG,iCAAiC,CAAC;IAC9D,kCAAkC;CACnC,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"../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"]}
+{"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 { useVisibilityTreeState } from \"../common/UseVisibilityTreeState\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport { createVisibilityTreeRenderer, FilterableVisibilityTreeNodeRenderer, 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 { 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\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 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  });\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"]}

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import "../VisibilityTreeBase.scss";
 import { Fragment, useEffect, useState } from "react";
 import { useActiveIModelConnection, useActiveViewport } from "@itwin/appui-react";
@@ -27,7 +27,7 @@ export const CategoriesTreeComponent = (props) => {
     if (!iModel || !viewport) {
         return null;
     }
-    return (_jsx(CategoriesTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }));
+    return _jsx(CategoriesTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport });
 };
 /**
  * Renders a "Show all" button that enables display of all categories and their subcategories.
@@ -57,13 +57,15 @@ CategoriesTreeComponent.getLabel = () => TreeWidget.translate("categories");
 function CategoriesTreeComponentImpl(props) {
     const categories = useCategories(IModelApp.viewManager, props.iModel, props.viewport);
     const [filteredCategories, setFilteredCategories] = useState();
-    const { searchOptions, filterString, onFilterApplied, filteredProvider, } = useTreeFilteringState();
+    const { searchOptions, filterString, onFilterApplied, filteredProvider } = useTreeFilteringState();
     useEffect(() => {
-        (async () => {
-            if (filteredProvider)
-                setFilteredCategories((await getFilteredCategories(filteredProvider)));
-            else
+        void (async () => {
+            if (filteredProvider) {
+                setFilteredCategories(await getFilteredCategories(filteredProvider));
+            }
+            else {
                 setFilteredCategories(undefined);
+            }
         })();
     }, [filteredProvider]);
     return (_jsxs("div", { className: "tree-widget-tree-with-header", children: [_jsx(TreeHeader, { onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount, selectedIndex: searchOptions.activeMatchIndex, children: props.headerButtons
@@ -83,7 +85,9 @@ async function getFilteredCategories(filteredProvider) {
         }
         const filteredCategoryId = CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(node.key);
         const filteredSubCategoriesIds = node.hasChildren
-            ? (await filteredProvider.getNodes(node)).filter(isPresentationTreeNodeItem).map((child) => CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(child.key))
+            ? (await filteredProvider.getNodes(node))
+                .filter(isPresentationTreeNodeItem)
+                .map((child) => CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(child.key))
             : [];
         filteredCategories.push({ categoryId: filteredCategoryId, subCategoryIds: filteredSubCategoriesIds });
     }

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

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTreeComponent.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 { Fragment, useEffect, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { isPresentationTreeNodeItem } from \"@itwin/presentation-components\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeHeader } from \"../../tree-header/TreeHeader\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { CategoryTree } from \"./CategoriesTree\";\nimport { CategoryVisibilityHandler, hideAllCategories, invertAllCategories, showAllCategories, useCategories } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\nimport type { CategoryTreeProps } from \"./CategoriesTree\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\n\n/**\n * Props that get passed to [[CategoriesTreeComponent]] header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n */\nexport interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  /** A list of categories available in the iModel */\n  categories: CategoryInfo[];\n  /** In case the tree is filtered, a list of filtered categories. */\n  filteredCategories?: CategoryInfo[];\n}\n\n/**\n * Props for [[CategoriesTreeComponent]].\n * @public\n */\nexport interface CategoriesTreeComponentProps extends Omit<CategoryTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n| \"categories\"\n| \"categoryVisibilityHandler\"\n| \"viewManager\"\n> {\n  /**\n   * Renderers of header buttons. Defaults to:\n   * ```ts\n   * [\n   *   CategoriesTreeComponent.ShowAllButton,\n   *   CategoriesTreeComponent.HideAllButton,\n   *   CategoriesTreeComponent.InvertAllButton,\n   * ]\n   * ```\n   */\n  headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;\n}\n\n/**\n * A component that renders [[CategoriesTree]] and a header with filtering capabilities\n * and header buttons.\n * @public\n */\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return (\n    <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />\n  );\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n */\nCategoriesTreeComponent.ShowAllButton = ShowAllButton;\n\n/**\n * Renders a \"Hide all\" button that disables display of all categories.\n * @public\n */\nCategoriesTreeComponent.HideAllButton = HideAllButton;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n */\nCategoriesTreeComponent.InvertAllButton = InvertAllButton;\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nCategoriesTreeComponent.id = \"categories-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categories\");\n\nfunction CategoriesTreeComponentImpl(props: CategoriesTreeComponentProps & { iModel: IModelConnection, viewport: ScreenViewport }) {\n  const categories = useCategories(IModelApp.viewManager, props.iModel, props.viewport);\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[]>();\n  const {\n    searchOptions,\n    filterString,\n    onFilterApplied,\n    filteredProvider,\n  } = useTreeFilteringState();\n\n  useEffect(() => {\n    (async () => {\n      if (filteredProvider)\n        setFilteredCategories((await getFilteredCategories(filteredProvider)));\n      else\n        setFilteredCategories(undefined);\n    })();\n  }, [filteredProvider]);\n\n  return (\n    <div className=\"tree-widget-tree-with-header\">\n      <TreeHeader\n        onFilterClear={searchOptions.onFilterCancel}\n        onFilterStart={searchOptions.onFilterStart}\n        onSelectedChanged={searchOptions.onResultSelectedChanged}\n        resultCount={searchOptions.matchedResultCount}\n        selectedIndex={searchOptions.activeMatchIndex}\n      >\n        {props.headerButtons\n          ? props.headerButtons.map(\n            (btn, index) =>\n              <Fragment key={index}>\n                {btn({ viewport: props.viewport, categories, filteredCategories })}\n              </Fragment>\n          )\n          : [\n            <ShowAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"show-all-btn\" />,\n            <HideAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"hide-all-btn\" />,\n            <InvertAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"invert-all-btn\" />,\n          ]\n        }\n      </TreeHeader>\n      <div className=\"tree-widget-tree-content\">\n        <AutoSizer>\n          {({ width, height }) => (\n            <CategoryTree\n              {...props}\n              categories={categories}\n              width={width}\n              height={height}\n              filterInfo={{ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }}\n              onFilterApplied={onFilterApplied}\n              activeView={props.viewport}\n            />\n          )}\n        </AutoSizer>\n      </div>\n    </div>\n  );\n}\n\nasync function getFilteredCategories(filteredProvider: IPresentationTreeDataProvider) {\n  const filteredCategories: CategoryInfo[] = [];\n  const nodes = await filteredProvider.getNodes();\n  for (const node of nodes) {\n    if (!isPresentationTreeNodeItem(node)) {\n      continue;\n    }\n    const filteredCategoryId = CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(node.key);\n    const filteredSubCategoriesIds = node.hasChildren\n      ? (await filteredProvider.getNodes(node)).filter(isPresentationTreeNodeItem).map((child) => CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(child.key))\n      : [];\n    filteredCategories.push({ categoryId: filteredCategoryId, subCategoryIds: filteredSubCategoriesIds });\n  }\n  return filteredCategories;\n}\n\nfunction ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"showAll\")}\n      onClick={() => void showAllCategories((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport)}\n    >\n      <SvgVisibilityShow />\n    </IconButton>\n  );\n}\n\nfunction HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"hideAll\")}\n      onClick={() => void hideAllCategories((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport)}\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\nfunction InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      title={TreeWidget.translate(\"invert\")}\n      size=\"small\"\n      styleType=\"borderless\"\n      onClick={() => void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport)}\n    >\n      <SvgVisibilityHalf />\n    </IconButton>\n  );\n}\n"]}
+{"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTreeComponent.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 { Fragment, useEffect, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { isPresentationTreeNodeItem } from \"@itwin/presentation-components\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeHeader } from \"../../tree-header/TreeHeader\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { CategoryTree } from \"./CategoriesTree\";\nimport { CategoryVisibilityHandler, hideAllCategories, invertAllCategories, showAllCategories, useCategories } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\nimport type { CategoryTreeProps } from \"./CategoriesTree\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\n\n/**\n * Props that get passed to [[CategoriesTreeComponent]] header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n */\nexport interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  /** A list of categories available in the iModel */\n  categories: CategoryInfo[];\n  /** In case the tree is filtered, a list of filtered categories. */\n  filteredCategories?: CategoryInfo[];\n}\n\n/**\n * Props for [[CategoriesTreeComponent]].\n * @public\n */\nexport interface CategoriesTreeComponentProps\n  extends Omit<\n    CategoryTreeProps,\n    \"iModel\" | \"activeView\" | \"width\" | \"height\" | \"filterInfo\" | \"onFilterApplied\" | \"categories\" | \"categoryVisibilityHandler\" | \"viewManager\"\n  > {\n  /**\n   * Renderers of header buttons. Defaults to:\n   * ```ts\n   * [\n   *   CategoriesTreeComponent.ShowAllButton,\n   *   CategoriesTreeComponent.HideAllButton,\n   *   CategoriesTreeComponent.InvertAllButton,\n   * ]\n   * ```\n   */\n  headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;\n}\n\n/**\n * A component that renders [[CategoriesTree]] and a header with filtering capabilities\n * and header buttons.\n * @public\n */\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n */\nCategoriesTreeComponent.ShowAllButton = ShowAllButton;\n\n/**\n * Renders a \"Hide all\" button that disables display of all categories.\n * @public\n */\nCategoriesTreeComponent.HideAllButton = HideAllButton;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n */\nCategoriesTreeComponent.InvertAllButton = InvertAllButton;\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nCategoriesTreeComponent.id = \"categories-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categories\");\n\nfunction CategoriesTreeComponentImpl(props: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n  const categories = useCategories(IModelApp.viewManager, props.iModel, props.viewport);\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[]>();\n  const { searchOptions, filterString, onFilterApplied, filteredProvider } = useTreeFilteringState();\n\n  useEffect(() => {\n    void (async () => {\n      if (filteredProvider) {\n        setFilteredCategories(await getFilteredCategories(filteredProvider));\n      } else {\n        setFilteredCategories(undefined);\n      }\n    })();\n  }, [filteredProvider]);\n\n  return (\n    <div className=\"tree-widget-tree-with-header\">\n      <TreeHeader\n        onFilterClear={searchOptions.onFilterCancel}\n        onFilterStart={searchOptions.onFilterStart}\n        onSelectedChanged={searchOptions.onResultSelectedChanged}\n        resultCount={searchOptions.matchedResultCount}\n        selectedIndex={searchOptions.activeMatchIndex}\n      >\n        {props.headerButtons\n          ? props.headerButtons.map((btn, index) => <Fragment key={index}>{btn({ viewport: props.viewport, categories, filteredCategories })}</Fragment>)\n          : [\n              <ShowAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"show-all-btn\" />,\n              <HideAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"hide-all-btn\" />,\n              <InvertAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"invert-all-btn\" />,\n            ]}\n      </TreeHeader>\n      <div className=\"tree-widget-tree-content\">\n        <AutoSizer>\n          {({ width, height }) => (\n            <CategoryTree\n              {...props}\n              categories={categories}\n              width={width}\n              height={height}\n              filterInfo={{ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }}\n              onFilterApplied={onFilterApplied}\n              activeView={props.viewport}\n            />\n          )}\n        </AutoSizer>\n      </div>\n    </div>\n  );\n}\n\nasync function getFilteredCategories(filteredProvider: IPresentationTreeDataProvider) {\n  const filteredCategories: CategoryInfo[] = [];\n  const nodes = await filteredProvider.getNodes();\n  for (const node of nodes) {\n    if (!isPresentationTreeNodeItem(node)) {\n      continue;\n    }\n    const filteredCategoryId = CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(node.key);\n    const filteredSubCategoriesIds = node.hasChildren\n      ? (await filteredProvider.getNodes(node))\n          .filter(isPresentationTreeNodeItem)\n          .map((child) => CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(child.key))\n      : [];\n    filteredCategories.push({ categoryId: filteredCategoryId, subCategoryIds: filteredSubCategoriesIds });\n  }\n  return filteredCategories;\n}\n\nfunction ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"showAll\")}\n      onClick={() =>\n        void showAllCategories(\n          (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n          props.viewport,\n        )\n      }\n    >\n      <SvgVisibilityShow />\n    </IconButton>\n  );\n}\n\nfunction HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"hideAll\")}\n      onClick={() =>\n        void hideAllCategories(\n          (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n          props.viewport,\n        )\n      }\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\nfunction InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      title={TreeWidget.translate(\"invert\")}\n      size=\"small\"\n      styleType=\"borderless\"\n      onClick={() => void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport)}\n    >\n      <SvgVisibilityHalf />\n    </IconButton>\n  );\n}\n"]}

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { useMemo } from "react";
 import { useAsyncValue } from "@itwin/components-react";
 import { BeEvent } from "@itwin/core-bentley";
@@ -51,23 +51,26 @@ export class CategoryVisibilityHandler {
     }
     getVisibilityStatus(node) {
         const nodeKey = isPresentationTreeNodeItem(node) ? node.key : undefined;
-        if (!nodeKey)
+        if (!nodeKey) {
             return { state: "hidden", isDisabled: true };
+        }
         const instanceId = CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(nodeKey);
         return { state: node.parentId ? this.getSubCategoryVisibility(instanceId) : this.getCategoryVisibility(instanceId) };
     }
     async changeVisibility(node, shouldDisplay) {
         const nodeKey = isPresentationTreeNodeItem(node) ? node.key : undefined;
-        if (!nodeKey)
+        if (!nodeKey) {
             return;
+        }
         // handle subcategory visibility change
         if (node.parentId) {
             const childId = CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(nodeKey);
             // istanbul ignore next
             const parentId = this.getParent(childId)?.categoryId;
             // make sure parent category is enabled
-            if (shouldDisplay && parentId)
+            if (shouldDisplay && parentId) {
                 await this.enableCategory([parentId], true, false);
+            }
             this.enableSubCategory(childId, shouldDisplay);
             return;
         }
@@ -76,8 +79,9 @@ export class CategoryVisibilityHandler {
     }
     getSubCategoryVisibility(id) {
         const parentItem = this.getParent(id);
-        if (!parentItem)
+        if (!parentItem) {
             return "hidden";
+        }
         const isVisible = this._activeView.view.viewsCategory(parentItem.categoryId) && this._activeView.isSubCategoryVisible(id);
         return isVisible ? "visible" : "hidden";
     }
@@ -87,23 +91,23 @@ export class CategoryVisibilityHandler {
     getParent(key) {
         for (const category of this._categories) {
             // istanbul ignore else
-            if (category.subCategoryIds) {
-                if (category.subCategoryIds.indexOf(key) !== -1)
-                    return category;
+            if (category.subCategoryIds && category.subCategoryIds.indexOf(key) !== -1) {
+                return category;
             }
         }
         return undefined;
     }
     onVisibilityChangeInternal() {
-        if (this._pendingVisibilityChange)
+        if (this._pendingVisibilityChange) {
             return;
+        }
         this._pendingVisibilityChange = setTimeout(() => {
             this.onVisibilityChange.raiseEvent();
             this._pendingVisibilityChange = undefined;
         }, 0);
     }
     static getInstanceIdFromTreeNodeKey(nodeKey) {
-        return (NodeKey.isInstancesNodeKey(nodeKey) && nodeKey.instanceKeys.length > 0) ? nodeKey.instanceKeys[0].id : /* istanbul ignore next */ "";
+        return NodeKey.isInstancesNodeKey(nodeKey) && nodeKey.instanceKeys.length > 0 ? nodeKey.instanceKeys[0].id : /* istanbul ignore next */ "";
     }
     async enableCategory(ids, enabled, enableAllSubCategories = true) {
         await enableCategory(this._viewManager, this._imodel, ids, enabled, this._useAllViewports, enableAllSubCategories);
@@ -142,8 +146,9 @@ export async function invertAllCategories(categories, viewport) {
         }
         // First, we need to check if at least one subcategory is disabled. If it is true, then only subcategories should change display, not categories.
         if (category.subCategoryIds?.some((subCategory) => !viewport.isSubCategoryVisible(subCategory))) {
-            for (const subCategory of category.subCategoryIds)
+            for (const subCategory of category.subCategoryIds) {
                 viewport.isSubCategoryVisible(subCategory) ? enabledSubCategories.push(subCategory) : disabledSubCategories.push(subCategory);
+            }
         }
         else {
             enabled.push(category.categoryId);