@itwin/tree-widget-react 0.10.0 → 1.0.0-dev.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 * as React from \"react\";\nimport {\n  AbstractTreeNodeLoaderWithProvider, TreeImageLoader, TreeNodeRenderer, TreeNodeRendererProps, TreeRenderer, TreeRendererProps,\n} from \"@itwin/components-react\";\nimport { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { IPresentationTreeDataProvider, useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport { VisibilityTreeFilterInfo } from \"./Common\";\n\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @alpha\n */\nexport const useVisibilityTreeRenderer = (iconsEnabled: boolean, descriptionsEnabled: boolean) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const nodeRenderer = React.useCallback(createVisibilityTreeNodeRenderer(iconsEnabled, descriptionsEnabled), [iconsEnabled, descriptionsEnabled]);\n  return React.useCallback((props: TreeRendererProps) => (\n    <TreeRenderer\n      {...props}\n      nodeRenderer={nodeRenderer}\n    />\n  ), [nodeRenderer]);\n};\n\nconst imageLoader = new TreeImageLoader();\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @alpha\n */\nexport const createVisibilityTreeNodeRenderer = (iconsEnabled: boolean, descriptionEnabled: boolean) => {\n  return (props: TreeNodeRendererProps) => ( // eslint-disable-line react/display-name\n    <TreeNodeRenderer\n      {...props}\n      checkboxRenderer={visibilityTreeNodeCheckboxRenderer}\n      descriptionEnabled={descriptionEnabled}\n      imageLoader={iconsEnabled ? imageLoader : undefined}\n      className=\"with-checkbox\"\n    />\n  );\n};\n\n/**\n * Checkbox renderer that renders an eye.\n * @alpha\n */\nexport const visibilityTreeNodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => (\n  <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 * @alpha\n */\nexport const 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  React.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 * @alpha\n */\nexport interface VisibilityTreeNoFilteredDataProps {\n  title: string;\n  message: string;\n}\n\n/**\n * Renders message that no nodes was found for filter.\n * @alpha\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":";;;;;;;AAAA;;;+FAG+F;AAE/F,iCAAkC;AAClC,8DAA0F;AAC1F,wDAAgD;AAChD,4EAAwF;AACxF,4DAAoC;AAOpC;;;;;GAKG;AACH,MAAM,sBAAsB,GAAG,EAAE,CAAC;AA2BlC;;;GAGG;AACI,MAAM,4BAA4B,GAAG,CAAC,2BAAwD,EAAE,EAAE;IACvG,MAAM,YAAY,GAAG,IAAA,wCAAgC,EAAC,2BAA2B,CAAC,CAAC;IACnF,OAAO,SAAS,sBAAsB,CAAC,KAAwB;QAC7D,OAAO,CACL,uBAAC,+BAAY,OACP,KAAK,EACT,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,4BAA4B,gCAUvC;AAEF,MAAM,WAAW,GAAG,IAAI,kCAAe,EAAE,CAAC;AAE1C;;;GAGG;AACI,MAAM,gCAAgC,GAAG,CAAC,EAAE,WAAW,GAAG,EAAE,EAAE,uBAAuB,GAAG,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAA+B,EAAE,EAAE;IACvK,OAAO,SAAS,0BAA0B,CAAC,aAAoC;QAC7E,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChI,OAAO,CACL,uBAAC,mCAAgB,OACX,aAAa,EACjB,IAAI,EAAE,EAAE,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,EACzD,gBAAgB,EAAE,CAAC,aAAsC,EAAE,EAAE,CAAC,CAC5D,gCAAK,SAAS,EAAC,oCAAoC,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,GAAG,UAAU,IAAI,EAAE,YAC3F,uBAAC,kCAA0B,OAAM,aAAa,GAAI,GAC9C,CACP,EACD,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACnD,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,CAAC,uBAAuB,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,IAAI,kBAAkB,EAAE,aAAa,CAAC,SAAS,CAAC,GACvM,CACH,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,gCAAgC,oCAkB3C;AAEF;;;GAGG;AACI,MAAM,0BAA0B,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CAC5E,uBAAC,wBAAQ,IACP,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,EACxD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,GAClB,CACH,CAAC;AATW,QAAA,0BAA0B,8BASrC;AAEF;;;GAGG;AACI,MAAM,0BAA0B,GAAG,CACxC,UAA6E,EAC7E,UAAqC,EACrC,eAAqG,EACrG,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC;IACtG,MAAM,EACJ,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,qBAAqB,GACtB,GAAG,IAAA,gEAAsC,EAAC,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAErF,IAAA,iBAAS,EACP,GAAG,EAAE;QACH,IAAI,MAAM,IAAI,YAAY,KAAK,SAAS,IAAI,kBAAkB,KAAK,UAAU;YAC3E,eAAe,IAAI,eAAe,CAAC,kBAAkB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACtF,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,CAAC,CACxE,CAAC;IAEF,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC;AACpE,CAAC,CAAC;AAtBW,QAAA,0BAA0B,8BAsBrC;AAWF;;;GAGG;AACH,SAAgB,4BAA4B,CAAC,KAAwC;IACnF,OAAO,CACL,iCAAK,SAAS,EAAC,8BAA8B,aAC3C,iCAAM,SAAS,EAAC,qBAAqB,YAAE,KAAK,CAAC,KAAK,GAAQ,EAC1D,iCAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,CAAC,OAAO,GAAQ,IACtD,CACP,CAAC;AACJ,CAAC;AAPD,oEAOC","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 node renderer.\n * @public\n */\nexport interface VisibilityTreeRendererProps {\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 const createVisibilityTreeRenderer = (visibilityTreeRendererProps: VisibilityTreeRendererProps) => {\n  const nodeRenderer = createVisibilityTreeNodeRenderer(visibilityTreeRendererProps);\n  return function VisibilityTreeRenderer(props: TreeRendererProps) {\n    return (\n      <TreeRenderer\n        {...props}\n        nodeRenderer={nodeRenderer}\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 const createVisibilityTreeNodeRenderer = ({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }: VisibilityTreeRendererProps) => {\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 const VisibilityTreeNodeCheckbox = (props: NodeCheckboxRenderProps) => (\n  <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 const 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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import "../VisibilityTreeBase.scss";
-import { IModelConnection, ViewManager, Viewport } from "@itwin/core-frontend";
-import { Ruleset } from "@itwin/presentation-common";
-import { IPresentationTreeDataProvider } from "@itwin/presentation-components";
-import { VisibilityTreeFilterInfo } from "../Common";
-import { CategoryInfo, CategoryVisibilityHandler } from "./CategoryVisibilityHandler";
+import { CategoryVisibilityHandler } from "./CategoryVisibilityHandler";
+import type { IModelConnection, ViewManager, Viewport } from "@itwin/core-frontend";
+import type { Ruleset } from "@itwin/presentation-common";
+import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+import type { VisibilityTreeFilterInfo } from "../Common";
+import type { CategoryInfo } from "./CategoryVisibilityHandler";
 /**
  * Presentation rules used by ControlledCategoriesTree
  * @internal
@@ -18,7 +19,7 @@ export interface CategoryTreeProps {
     /** Flag for accommodating all viewports */
     allViewports?: boolean;
     /** Active viewport */
-    activeView?: Viewport;
+    activeView: Viewport;
     /**
      * An IModel to pull data from
      */
@@ -36,6 +37,10 @@ export interface CategoryTreeProps {
      * Callback invoked when tree is filtered.
      */
     onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;
+    /**
+     * Available iModel categories
+     */
+    categories: CategoryInfo[];
     /**
      * Custom category visibility handler to use for testing
      * @internal
@@ -46,13 +51,9 @@ export interface CategoryTreeProps {
      * @internal
      */
     viewManager?: ViewManager;
-    /**
-     * Available iModel categories
-     */
-    categories: CategoryInfo[];
 }
 /**
- * Tree which displays and manages categories contained in an iModel.
+ * Tree which displays and manages display of categories contained in an iModel.
  * @public
  */
 export declare function CategoryTree(props: CategoryTreeProps): JSX.Element;

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

@@ -1,31 +1,13 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoryTree = exports.RULESET_CATEGORIES = 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.
 *--------------------------------------------------------------------------------------------*/
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CategoryTree = exports.RULESET_CATEGORIES = void 0;
 require("../VisibilityTreeBase.scss");
-const React = __importStar(require("react"));
+const react_1 = require("react");
 const components_react_1 = require("@itwin/components-react");
 const core_frontend_1 = require("@itwin/core-frontend");
 const core_react_1 = require("@itwin/core-react");
@@ -42,7 +24,7 @@ const PAGING_SIZE = 20;
  */
 exports.RULESET_CATEGORIES = require("./Categories.json"); // eslint-disable-line @typescript-eslint/no-var-requires
 /**
- * Tree which displays and manages categories contained in an iModel.
+ * Tree which displays and manages display of categories contained in an iModel.
  * @public
  */
 function CategoryTree(props) {
@@ -55,36 +37,30 @@ function CategoryTree(props) {
     // istanbul ignore next
     const viewManager = props.viewManager ?? core_frontend_1.IModelApp.viewManager;
     const { activeView, allViewports, categoryVisibilityHandler } = props;
-    const currentActiveView = activeView ?? viewManager.getFirstOpenView();
-    const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, currentActiveView, allViewports, categoryVisibilityHandler);
-    React.useEffect(() => {
-        setViewType(currentActiveView); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }, [currentActiveView]);
-    const eventHandler = (0, core_react_1.useDisposable)(React.useCallback(() => new VisibilityTreeEventHandler_1.VisibilityTreeEventHandler({
+    const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);
+    (0, react_1.useEffect)(() => {
+        setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [activeView]);
+    const eventHandler = (0, core_react_1.useDisposable)((0, react_1.useCallback)(() => new VisibilityTreeEventHandler_1.VisibilityTreeEventHandler({
         nodeLoader: filteredNodeLoader,
         visibilityHandler,
-        collapsedChildrenDisposalEnabled: true,
     }), [filteredNodeLoader, visibilityHandler]));
     const treeModel = (0, components_react_1.useTreeModel)(filteredNodeLoader.modelSource);
-    const treeRenderer = (0, VisibilityTreeRenderer_1.useVisibilityTreeRenderer)(false, true);
-    const overlay = isFiltering ? React.createElement("div", { className: "filteredTreeOverlay" }) : undefined;
+    const treeRenderer = (0, VisibilityTreeRenderer_1.createVisibilityTreeRenderer)({ iconsEnabled: false, descriptionEnabled: true, levelOffset: 10 });
+    const overlay = isFiltering ? (0, jsx_runtime_1.jsx)("div", { className: "filteredTreeOverlay" }) : undefined;
     const filterApplied = filteredNodeLoader !== nodeLoader;
-    const noFilteredDataRenderer = React.useCallback(() => {
-        return React.createElement(VisibilityTreeRenderer_1.VisibilityTreeNoFilteredData, { title: TreeWidget_1.TreeWidget.translate("categoriesTree.noCategoryFound"), message: TreeWidget_1.TreeWidget.translate("categoriesTree.noMatchingCategoryNames") });
+    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 (React.createElement("div", { className: "tree-widget-visibility-tree-base" },
-        React.createElement(components_react_1.ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, 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: "tree-widget-visibility-tree-base", children: [(0, jsx_runtime_1.jsx)(components_react_1.ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, 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) {
-    return (0, core_react_1.useDisposable)(React.useCallback(() => 
+    const defaultVisibilityHandler = (0, core_react_1.useDisposable)((0, react_1.useCallback)(() => new CategoryVisibilityHandler_1.CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }), [viewManager, imodel, categories, activeView, allViewports]));
     // istanbul ignore next
-    visibilityHandler ?? new CategoryVisibilityHandler_1.CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }), [viewManager, imodel, categories, activeView, allViewports, visibilityHandler]));
+    return visibilityHandler ?? defaultVisibilityHandler;
 }
 async function setViewType(activeView) {
-    if (!activeView)
-        return;
     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

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 * as React from \"react\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { IModelApp, IModelConnection, SpatialViewState, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport { useDisposable } from \"@itwin/core-react\";\nimport { Ruleset } from \"@itwin/presentation-common\";\nimport { IPresentationTreeDataProvider, usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { VisibilityTreeFilterInfo } from \"../Common\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { useVisibilityTreeFiltering, useVisibilityTreeRenderer, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { CategoryInfo, CategoryVisibilityHandler } 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 {\n  /** Flag for accommodating all viewports */\n  allViewports?: boolean;\n  /** Active viewport */\n  activeView?: Viewport;\n  /**\n   * An IModel to pull data from\n   */\n  iModel: IModelConnection;\n  /** Width of the component */\n  width: number;\n  /** Height of the component */\n  height: number;\n  /**\n   * Information for tree filtering.\n   * @alpha\n   */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /**\n   * Callback invoked when tree is filtered.\n   */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\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   * Available iModel categories\n   */\n  categories: CategoryInfo[];\n}\n\n/**\n * Tree which displays and manages 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 currentActiveView = activeView ?? viewManager.getFirstOpenView();\n  const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, currentActiveView, allViewports, categoryVisibilityHandler);\n\n  React.useEffect(() => {\n    setViewType(currentActiveView); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [currentActiveView]);\n\n  const eventHandler = useDisposable(React.useCallback(() => new VisibilityTreeEventHandler({\n    nodeLoader: filteredNodeLoader,\n    visibilityHandler,\n    collapsedChildrenDisposalEnabled: true,\n  }), [filteredNodeLoader, visibilityHandler]));\n\n  const treeModel = useTreeModel(filteredNodeLoader.modelSource);\n  const treeRenderer = useVisibilityTreeRenderer(false, true);\n  const overlay = isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n  const filterApplied = filteredNodeLoader !== nodeLoader;\n\n  const noFilteredDataRenderer = React.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={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  return useDisposable(React.useCallback(\n    () =>\n      // istanbul ignore next\n      visibilityHandler ?? new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }),\n    [viewManager, imodel, categories, activeView, allViewports, visibilityHandler]),\n  );\n}\n\nasync function setViewType(activeView?: Viewport) {\n  if (!activeView)\n    return;\n\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":";;;;AAAA;;;+FAG+F;AAE/F,sCAAoC;AACpC,iCAA+C;AAC/C,8DAAsF;AACtF,wDAAiD;AACjD,kDAAkD;AAClD,4EAA+E;AAC/E,wEAA4D;AAC5D,oDAAiD;AACjD,8EAA2E;AAC3E,sEAAmI;AACnI,2EAAwE;AAQxE,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB;;;GAGG;AACU,QAAA,kBAAkB,GAAY,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,yDAAyD;AA4ClI;;;GAGG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uDAA6B,EAAC;QACnD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,0BAAkB;QAC3B,UAAU,EAAE,WAAW;KACxB,CAAC,CAAC;IAEH,MAAM,EAAE,kBAAkB,EAAE,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAA,mDAA0B,EAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IACnJ,uBAAuB;IACvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,yBAAS,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,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,8DAA8D;IACzF,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,IAAA,0BAAa,EAAC,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,IAAI,uDAA0B,CAAC;QAClF,UAAU,EAAE,kBAAkB;QAC9B,iBAAiB;KAClB,CAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,IAAA,+BAAY,EAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,IAAA,qDAA4B,EAAC,EAAE,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IACtH,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,gCAAK,SAAS,EAAC,qBAAqB,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAClF,MAAM,aAAa,GAAG,kBAAkB,KAAK,UAAU,CAAC;IAExD,MAAM,sBAAsB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC9C,OAAO,uBAAC,qDAA4B,IAClC,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,gCAAgC,CAAC,EAC7D,OAAO,EAAE,uBAAU,CAAC,SAAS,CAAC,wCAAwC,CAAC,GACvE,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,iCAAc,IACb,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,gCAAa,CAAC,IAAI,EACjC,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;AAnDD,oCAmDC;AAED,SAAS,4BAA4B,CAAC,WAAwB,EAAE,MAAwB,EAAE,UAA0B,EAAE,UAAoB,EAAE,YAAsB,EAAE,iBAA6C;IAC/M,MAAM,wBAAwB,GAAG,IAAA,0BAAa,EAAC,IAAA,mBAAW,EACxD,GAAG,EAAE,CACH,IAAI,qDAAyB,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,oCAAY,CAAC,YAAY,CAAC,IAAI,CAAC,0BAAkB,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAC9F,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 { 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 { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } 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 {\n  /** Flag for accommodating all viewports */\n  allViewports?: boolean;\n  /** Active viewport */\n  activeView: Viewport;\n  /**\n   * An IModel to pull data from\n   */\n  iModel: IModelConnection;\n  /** Width of the component */\n  width: number;\n  /** Height of the component */\n  height: number;\n  /**\n   * Information for tree filtering.\n   * @alpha\n   */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /**\n   * Callback invoked when tree is filtered.\n   */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\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({ iconsEnabled: false, descriptionEnabled: true, levelOffset: 10 });\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={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"]}

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

@@ -1,10 +1,71 @@
 /// <reference types="react" />
 import "../VisibilityTreeBase.scss";
-import type { CategoriesTreeHeaderButtonProps, CategoriesTreeProps } from "../../../types";
-export declare function CategoriesTreeComponent(props: CategoriesTreeProps): JSX.Element | null;
-export declare namespace CategoriesTreeComponent {
-    var ShowAllButton: (props: CategoriesTreeHeaderButtonProps) => JSX.Element;
-    var HideAllButton: (props: CategoriesTreeHeaderButtonProps) => JSX.Element;
-    var InvertButton: (props: CategoriesTreeHeaderButtonProps) => JSX.Element;
+import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader";
+import type { CategoryTreeProps } from "./CategoriesTree";
+import type { CategoryInfo } from "./CategoryVisibilityHandler";
+/**
+ * Props that get passed to [[CategoriesTreeComponent]] header button renderer.
+ * @see CategoriesTreeComponentProps.headerButtons
+ * @public
+ */
+export interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {
+    /** A list of categories available in the iModel */
+    categories: CategoryInfo[];
+    /** In case the tree is filtered, a list of filtered categories. */
+    filteredCategories?: CategoryInfo[];
 }
+/**
+ * Props for [[CategoriesTreeComponent]].
+ * @public
+ */
+export interface CategoriesTreeComponentProps extends Omit<CategoryTreeProps, "iModel" | "activeView" | "width" | "height" | "filterInfo" | "onFilterApplied" | "categories" | "categoryVisibilityHandler" | "viewManager"> {
+    /**
+     * Renderers of header buttons. Defaults to:
+     * ```ts
+     * [
+     *   CategoriesTreeComponent.ShowAllButton,
+     *   CategoriesTreeComponent.HideAllButton,
+     *   CategoriesTreeComponent.InvertAllButton,
+     * ]
+     * ```
+     */
+    headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;
+}
+/**
+ * A component that renders [[CategoriesTree]] and a header with filtering capabilities
+ * and header buttons.
+ * @public
+ */
+export declare const CategoriesTreeComponent: {
+    (props: CategoriesTreeComponentProps): JSX.Element | null;
+    /**
+     * Renders a "Show all" button that enables display of all categories and their subcategories.
+     * @public
+     */
+    ShowAllButton: typeof ShowAllButton;
+    /**
+     * Renders a "Hide all" button that disables display of all categories.
+     * @public
+     */
+    HideAllButton: typeof HideAllButton;
+    /**
+     * Renders an "Invert all" button that inverts display of all categories.
+     * @public
+     */
+    InvertAllButton: typeof InvertAllButton;
+    /**
+     * Id of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+     * @public
+     */
+    id: string;
+    /**
+     * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+     * @public
+     */
+    getLabel(): string;
+};
+declare function ShowAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
+declare function HideAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
+declare function InvertAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
+export {};
 //# sourceMappingURL=CategoriesTreeComponent.d.ts.map

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

@@ -1,116 +1,105 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CategoriesTreeComponent = 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("../VisibilityTreeBase.scss");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const appui_react_1 = require("@itwin/appui-react");
 const core_frontend_1 = require("@itwin/core-frontend");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const presentation_components_1 = require("@itwin/presentation-components");
 const TreeWidget_1 = require("../../../TreeWidget");
-const SearchBar_1 = require("../../search-bar/SearchBar");
+const TreeHeader_1 = require("../../tree-header/TreeHeader");
 const TreeFilteringState_1 = require("../../TreeFilteringState");
 const AutoSizer_1 = require("../../utils/AutoSizer");
-const CategoriesVisibilityUtils_1 = require("../CategoriesVisibilityUtils");
 const CategoriesTree_1 = require("./CategoriesTree");
 const CategoryVisibilityHandler_1 = require("./CategoryVisibilityHandler");
-function CategoriesTreeComponent(props) {
+/**
+ * A component that renders [[CategoriesTree]] and a header with filtering capabilities
+ * and header buttons.
+ * @public
+ */
+const CategoriesTreeComponent = (props) => {
     const iModel = (0, appui_react_1.useActiveIModelConnection)();
     const viewport = (0, appui_react_1.useActiveViewport)();
     if (!iModel || !viewport) {
         return null;
     }
-    return (react_1.default.createElement(CategoriesTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }));
-}
+    return ((0, jsx_runtime_1.jsx)(CategoriesTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }));
+};
 exports.CategoriesTreeComponent = CategoriesTreeComponent;
-CategoriesTreeComponent.ShowAllButton = ShowAllButton;
-CategoriesTreeComponent.HideAllButton = HideAllButton;
-CategoriesTreeComponent.InvertButton = InvertButton;
+/**
+ * Renders a "Show all" button that enables display of all categories and their subcategories.
+ * @public
+ */
+exports.CategoriesTreeComponent.ShowAllButton = ShowAllButton;
+/**
+ * Renders a "Hide all" button that disables display of all categories.
+ * @public
+ */
+exports.CategoriesTreeComponent.HideAllButton = HideAllButton;
+/**
+ * Renders an "Invert all" button that inverts display of all categories.
+ * @public
+ */
+exports.CategoriesTreeComponent.InvertAllButton = InvertAllButton;
+/**
+ * Id of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+ * @public
+ */
+exports.CategoriesTreeComponent.id = "categories-tree";
+/**
+ * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+ * @public
+ */
+exports.CategoriesTreeComponent.getLabel = () => TreeWidget_1.TreeWidget.translate("categories");
 function CategoriesTreeComponentImpl(props) {
     const categories = (0, CategoryVisibilityHandler_1.useCategories)(core_frontend_1.IModelApp.viewManager, props.iModel, props.viewport);
     const [filteredCategories, setFilteredCategories] = (0, react_1.useState)();
-    const { searchOptions, filterString, activeMatchIndex, onFilterApplied, filteredProvider, } = (0, TreeFilteringState_1.useTreeFilteringState)();
+    const { searchOptions, filterString, onFilterApplied, filteredProvider, } = (0, TreeFilteringState_1.useTreeFilteringState)();
     (0, react_1.useEffect)(() => {
         (async () => {
             if (filteredProvider)
-                setFilteredCategories((await getFilteredCategories(filteredProvider)).map((category) => ({ categoryId: category })));
+                setFilteredCategories((await getFilteredCategories(filteredProvider)));
             else
                 setFilteredCategories(undefined);
         })();
     }, [filteredProvider]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SearchBar_1.SearchBar, { value: "", valueChangedDelay: 500, placeholder: TreeWidget_1.TreeWidget.translate("search"), title: TreeWidget_1.TreeWidget.translate("searchForSomething"), filteringInProgress: searchOptions.isFiltering, onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount ?? 0 }, props.headerButtons
-            ? props.headerButtons.map((btn, index) => react_1.default.createElement(react_1.default.Fragment, { key: index }, btn({ viewport: props.viewport, categories, filteredCategories })))
-            : [
-                react_1.default.createElement(ShowAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, key: "show-all-btn" }),
-                react_1.default.createElement(HideAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, key: "hide-all-btn" }),
-                react_1.default.createElement(InvertButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, key: "invert-all-btn" }),
-            ]),
-        react_1.default.createElement(AutoSizer_1.AutoSizer, null, ({ width, height }) => (react_1.default.createElement(CategoriesTree_1.CategoryTree, { ...props, categories: categories, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied })))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tree-widget-tree-with-header", children: [(0, jsx_runtime_1.jsx)(TreeHeader_1.TreeHeader, { onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount, selectedIndex: searchOptions.activeMatchIndex, children: props.headerButtons
+                    ? props.headerButtons.map((btn, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: btn({ viewport: props.viewport, categories, filteredCategories }) }, index))
+                    : [
+                        (0, jsx_runtime_1.jsx)(ShowAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories }, "show-all-btn"),
+                        (0, jsx_runtime_1.jsx)(HideAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories }, "hide-all-btn"),
+                        (0, jsx_runtime_1.jsx)(InvertAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories }, "invert-all-btn"),
+                    ] }), (0, jsx_runtime_1.jsx)("div", { className: "tree-widget-tree-content", children: (0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(CategoriesTree_1.CategoryTree, { ...props, categories: categories, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }, onFilterApplied: onFilterApplied, activeView: props.viewport })) }) })] }));
 }
 async function getFilteredCategories(filteredProvider) {
+    const filteredCategories = [];
     const nodes = await filteredProvider.getNodes();
-    return nodes
-        .filter((node) => (0, presentation_components_1.isPresentationTreeNodeItem)(node))
-        .map((node) => CategoryVisibilityHandler_1.CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(node.key));
+    for (const node of nodes) {
+        if (!(0, presentation_components_1.isPresentationTreeNodeItem)(node)) {
+            continue;
+        }
+        const filteredCategoryId = CategoryVisibilityHandler_1.CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(node.key);
+        const filteredSubCategoriesIds = node.hasChildren
+            ? (await filteredProvider.getNodes(node)).filter(presentation_components_1.isPresentationTreeNodeItem).map((child) => CategoryVisibilityHandler_1.CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(child.key))
+            : [];
+        filteredCategories.push({ categoryId: filteredCategoryId, subCategoryIds: filteredSubCategoriesIds });
+    }
+    return filteredCategories;
 }
 function ShowAllButton(props) {
-    const showAll = async () => {
-        await (0, CategoriesVisibilityUtils_1.enableCategory)(core_frontend_1.IModelApp.viewManager, props.viewport.iModel, (props.filteredCategories ?? props.categories).map((category) => category.categoryId), true, true);
-    };
-    return (react_1.default.createElement(itwinui_react_1.IconButton, { className: "tree-widget-header-tree-toolbar-icon", size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("showAll"), onClick: showAll },
-        react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityShow, null)));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("showAll"), onClick: () => void (0, CategoryVisibilityHandler_1.showAllCategories)((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) }));
 }
 function HideAllButton(props) {
-    const hideAll = async () => {
-        await (0, CategoriesVisibilityUtils_1.enableCategory)(core_frontend_1.IModelApp.viewManager, props.viewport.iModel, (props.filteredCategories ?? props.categories).map((category) => category.categoryId), false, true);
-    };
-    return (react_1.default.createElement(itwinui_react_1.IconButton, { className: "tree-widget-header-tree-toolbar-icon", size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("hideAll"), onClick: hideAll },
-        react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityHide, null)));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("hideAll"), onClick: () => void (0, CategoryVisibilityHandler_1.hideAllCategories)((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}) }));
 }
-function InvertButton(props) {
-    const invert = async () => {
-        const ids = (props.filteredCategories ?? props.categories).map((category) => category.categoryId);
-        const enabled = [];
-        const disabled = [];
-        for (const id of ids) {
-            if (props.viewport.view.viewsCategory(id)) {
-                enabled.push(id);
-            }
-            else {
-                disabled.push(id);
-            }
-        }
-        // Disable enabled
-        await (0, CategoriesVisibilityUtils_1.enableCategory)(core_frontend_1.IModelApp.viewManager, props.viewport.iModel, enabled, false, true);
-        // Enable disabled
-        await (0, CategoriesVisibilityUtils_1.enableCategory)(core_frontend_1.IModelApp.viewManager, props.viewport.iModel, disabled, true, true);
-    };
-    return (react_1.default.createElement(itwinui_react_1.IconButton, { className: "tree-widget-header-tree-toolbar-icon", title: TreeWidget_1.TreeWidget.translate("invert"), size: "small", styleType: "borderless", onClick: invert },
-        react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityHalf, null)));
+function InvertAllButton(props) {
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { title: TreeWidget_1.TreeWidget.translate("invert"), size: "small", styleType: "borderless", onClick: () => void (0, CategoryVisibilityHandler_1.invertAllCategories)(props.filteredCategories ?? props.categories, props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHalf, {}) }));
 }
 //# sourceMappingURL=CategoriesTreeComponent.js.map

package/lib/cjs/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*--------------------------------------------------------------------------------------------*/\nimport \"../VisibilityTreeBase.scss\";\nimport React, { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { IModelApp, IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { IPresentationTreeDataProvider, isPresentationTreeNodeItem, PresentationTreeNodeItem } from \"@itwin/presentation-components\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { SearchBar } from \"../../search-bar/SearchBar\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { enableCategory } from \"../CategoriesVisibilityUtils\";\nimport { CategoryTree } from \"./CategoriesTree\";\nimport { CategoryInfo, CategoryVisibilityHandler, useCategories } from \"./CategoryVisibilityHandler\";\n\nimport type { CategoriesTreeHeaderButtonProps, CategoriesTreeProps } from \"../../../types\";\n\nexport function CategoriesTreeComponent(props: CategoriesTreeProps) {\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\nCategoriesTreeComponent.ShowAllButton = ShowAllButton;\nCategoriesTreeComponent.HideAllButton = HideAllButton;\nCategoriesTreeComponent.InvertButton = InvertButton;\n\nfunction CategoriesTreeComponentImpl(props: CategoriesTreeProps & { 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    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  } = useTreeFilteringState();\n\n  useEffect(() => {\n    (async () => {\n      if (filteredProvider)\n        setFilteredCategories((await getFilteredCategories(filteredProvider)).map((category) => ({ categoryId: category })));\n      else\n        setFilteredCategories(undefined);\n    })();\n  }, [filteredProvider]);\n\n  return (\n    <>\n      <SearchBar\n        value=\"\"\n        valueChangedDelay={500}\n        placeholder={TreeWidget.translate(\"search\")}\n        title={TreeWidget.translate(\"searchForSomething\")}\n        filteringInProgress={searchOptions.isFiltering}\n        onFilterClear={searchOptions.onFilterCancel}\n        onFilterStart={searchOptions.onFilterStart}\n        onSelectedChanged={searchOptions.onResultSelectedChanged}\n        resultCount={searchOptions.matchedResultCount ?? 0}\n      >\n        {props.headerButtons\n          ? props.headerButtons.map((btn, index) =>\n            <React.Fragment key={index}>\n              {btn({ viewport: props.viewport, categories, filteredCategories })}\n            </React.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            <InvertButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"invert-all-btn\" />,\n          ]\n        }\n      </SearchBar>\n      <AutoSizer>\n        {({ width, height }) => (\n          <CategoryTree\n            {...props}\n            categories={categories}\n            width={width}\n            height={height}\n            filterInfo={{ filter: filterString, activeMatchIndex }}\n            onFilterApplied={onFilterApplied}\n          />\n        )}\n      </AutoSizer>\n    </>\n  );\n}\n\nasync function getFilteredCategories(filteredProvider: IPresentationTreeDataProvider) {\n  const nodes = await filteredProvider.getNodes();\n  return nodes\n    .filter((node) => isPresentationTreeNodeItem(node))\n    .map((node) => CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey((node as PresentationTreeNodeItem).key));\n}\n\nfunction ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  const showAll = async () => {\n    await enableCategory(\n      IModelApp.viewManager,\n      props.viewport.iModel,\n      (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n      true,\n      true,\n    );\n  };\n\n  return (\n    <IconButton\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"showAll\")}\n      onClick={showAll}\n    >\n      <SvgVisibilityShow />\n    </IconButton>\n  );\n}\n\nfunction HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  const hideAll = async () => {\n    await enableCategory(\n      IModelApp.viewManager,\n      props.viewport.iModel,\n      (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n      false,\n      true,\n    );\n  };\n\n  return (\n    <IconButton\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"hideAll\")}\n      onClick={hideAll}\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\nfunction InvertButton(props: CategoriesTreeHeaderButtonProps) {\n  const invert = async () => {\n    const ids = (props.filteredCategories ?? props.categories).map((category) => category.categoryId);\n\n    const enabled: string[] = [];\n    const disabled: string[] = [];\n    for (const id of ids) {\n      if (props.viewport.view.viewsCategory(id)) {\n        enabled.push(id);\n      } else {\n        disabled.push(id);\n      }\n    }\n    // Disable enabled\n    await enableCategory(\n      IModelApp.viewManager,\n      props.viewport.iModel,\n      enabled,\n      false,\n      true\n    );\n\n    // Enable disabled\n    await enableCategory(\n      IModelApp.viewManager,\n      props.viewport.iModel,\n      disabled,\n      true,\n      true\n    );\n  };\n\n  return (\n    <IconButton\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      title={TreeWidget.translate(\"invert\")}\n      size=\"small\"\n      styleType=\"borderless\"\n      onClick={invert}\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 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 [[TreeWidgetComponent]].\n * @public\n */\nCategoriesTreeComponent.id = \"categories-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].\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"]}