npm - @itwin/tree-widget-react - Versions diffs - 1.2.2 → 2.0.0 - Mend

@itwin/tree-widget-react 1.2.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (194) hide show

package/lib/cjs/components/trees/VisibilityTreeRenderer.js CHANGED Viewed

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisibilityTreeNoFilteredData = exports.useVisibilityTreeFiltering = exports.VisibilityTreeNodeCheckbox = exports.createVisibilityTreeNodeRenderer = exports.createVisibilityTreeRenderer = void 0;
+exports.VisibilityTreeNoFilteredData = exports.useVisibilityTreeFiltering = exports.FilterableVisibilityTreeNodeRenderer = exports.VisibilityTreeNodeCheckbox = exports.createVisibilityTreeNodeRenderer = exports.createVisibilityTreeRenderer = 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.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const components_react_1 = require("@itwin/components-react");
@@ -16,12 +16,14 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
 const presentation_components_1 = require("@itwin/presentation-components");
 const TreeRenderer_1 = require("./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 components_react_1.TreeImageLoader();
 /**
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
  * @public
@@ -32,12 +34,11 @@ function createVisibilityTreeRenderer({ nodeRendererProps, ...restProps }) {
     };
 }
 exports.createVisibilityTreeRenderer = createVisibilityTreeRenderer;
-const imageLoader = new components_react_1.TreeImageLoader();
 /**
  * Creates node renderer which renders node with eye checkbox.
  * @public
  */
-function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }) {
+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 ((0, jsx_runtime_1.jsx)(components_react_1.TreeNodeRenderer, { ...treeNodeProps, node: { ...treeNodeProps.node, depth: 0, numChildren: 1 }, checkboxRenderer: (checkboxProps) => ((0, jsx_runtime_1.jsx)("div", { className: "visibility-tree-checkbox-container", style: { marginRight: `${nodeOffset}px` }, children: (0, jsx_runtime_1.jsx)(VisibilityTreeNodeCheckbox, { ...checkboxProps }) })), descriptionEnabled: descriptionEnabled, imageLoader: iconsEnabled ? imageLoader : undefined, className: (0, classnames_1.default)("with-checkbox", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && "disable-expander", treeNodeProps.className) }));
@@ -49,19 +50,36 @@ exports.createVisibilityTreeNodeRenderer = createVisibilityTreeNodeRenderer;
  * @public
  */
 function VisibilityTreeNodeCheckbox(props) {
-    return (0, jsx_runtime_1.jsx)(itwinui_react_1.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 ((0, jsx_runtime_1.jsx)(itwinui_react_1.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 }));
 }
 exports.VisibilityTreeNodeCheckbox = VisibilityTreeNodeCheckbox;
+/**
+ * Creates node renderer which renders node with eye checkbox and hierarchy level filtering actions.
+ * @beta
+ */
+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 ((0, jsx_runtime_1.jsx)(presentation_components_1.PresentationTreeNodeRenderer, { ...restProps, checkboxRenderer: (checkboxProps) => ((0, jsx_runtime_1.jsx)("div", { className: "visibility-tree-checkbox-container", style: { marginRight: `${nodeOffset}px` }, children: (0, jsx_runtime_1.jsx)(VisibilityTreeNodeCheckbox, { ...checkboxProps }) })), descriptionEnabled: descriptionEnabled, imageLoader: imageLoader, className: (0, classnames_1.default)("with-checkbox", (restProps.node.numChildren === 0 || (disableRootNodeCollapse && restProps.node.parentId === undefined)) && "disable-expander") }));
+}
+exports.FilterableVisibilityTreeNodeRenderer = FilterableVisibilityTreeNodeRenderer;
 /**
  * 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
 function useVisibilityTreeFiltering(nodeLoader, filterInfo, onFilterApplied) {
     const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };
-    const { filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps, } = (0, presentation_components_1.useControlledPresentationTreeFiltering)({ nodeLoader, filter, activeMatchIndex });
+    const { filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps } = (0, presentation_components_1.useControlledPresentationTreeFiltering)({
+        nodeLoader,
+        filter,
+        activeMatchIndex,
+    });
     (0, react_1.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/cjs/components/trees/VisibilityTreeRenderer.js.map CHANGED Viewed

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

package/lib/cjs/components/trees/category-tree/CategoriesTree.d.ts CHANGED Viewed

@@ -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/cjs/components/trees/category-tree/CategoriesTree.js CHANGED Viewed

@@ -6,20 +6,20 @@ 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.
-*--------------------------------------------------------------------------------------------*/
+ * 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 classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const components_react_1 = require("@itwin/components-react");
 const core_frontend_1 = require("@itwin/core-frontend");
-const core_react_1 = require("@itwin/core-react");
 const presentation_components_1 = require("@itwin/presentation-components");
 const presentation_frontend_1 = require("@itwin/presentation-frontend");
 const TreeWidget_1 = require("../../../TreeWidget");
+const TreeRenderer_1 = require("../common/TreeRenderer");
+const UseVisibilityTreeState_1 = require("../common/UseVisibilityTreeState");
 const Utils_1 = require("../common/Utils");
-const VisibilityTreeEventHandler_1 = require("../VisibilityTreeEventHandler");
 const VisibilityTreeRenderer_1 = require("../VisibilityTreeRenderer");
 const CategoryVisibilityHandler_1 = require("./CategoryVisibilityHandler");
 const PAGING_SIZE = 20;
@@ -33,26 +33,29 @@ exports.RULESET_CATEGORIES = require("./Categories.json"); // eslint-disable-lin
  * @public
  */
 function CategoryTree(props) {
-    const { nodeLoader } = (0, presentation_components_1.usePresentationTreeNodeLoader)({
+    // istanbul ignore next
+    const viewManager = props.viewManager ?? core_frontend_1.IModelApp.viewManager;
+    const { activeView, allViewports, categoryVisibilityHandler, onFilterApplied, density, hierarchyLevelConfig } = props;
+    const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);
+    const onFilterChange = (0, react_1.useCallback)((dataProvider, matchesCount) => {
+        if (onFilterApplied && dataProvider && matchesCount !== undefined) {
+            onFilterApplied(dataProvider, matchesCount);
+        }
+    }, [onFilterApplied]);
+    const state = (0, UseVisibilityTreeState_1.useVisibilityTreeState)({
         imodel: props.iModel,
         ruleset: exports.RULESET_CATEGORIES,
         pagingSize: PAGING_SIZE,
+        visibilityHandler,
         customizeTreeNodeItem,
+        filterInfo: props.filterInfo,
+        onFilterChange,
+        hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
     });
-    const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = (0, VisibilityTreeRenderer_1.useVisibilityTreeFiltering)(nodeLoader, props.filterInfo, props.onFilterApplied);
-    // istanbul ignore next
-    const viewManager = props.viewManager ?? core_frontend_1.IModelApp.viewManager;
-    const { activeView, allViewports, categoryVisibilityHandler } = props;
-    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,
-    }), [filteredNodeLoader, visibilityHandler]));
-    const treeModel = (0, components_react_1.useTreeModel)(filteredNodeLoader.modelSource);
-    const treeRenderer = (0, VisibilityTreeRenderer_1.createVisibilityTreeRenderer)({
+    const baseRendererProps = {
         contextMenuItems: props.contextMenuItems,
         nodeLabelRenderer: props.nodeLabelRenderer,
         density: props.density,
@@ -61,27 +64,41 @@ function CategoryTree(props) {
             descriptionEnabled: true,
             levelOffset: 10,
         },
-    });
-    const overlay = isFiltering ? (0, jsx_runtime_1.jsx)("div", { className: "filteredTreeOverlay" }) : undefined;
-    const filterApplied = filteredNodeLoader !== nodeLoader;
+    };
     const noFilteredDataRenderer = (0, react_1.useCallback)(() => {
-        return (0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.VisibilityTreeNoFilteredData, { title: TreeWidget_1.TreeWidget.translate("categoriesTree.noCategoryFound"), message: TreeWidget_1.TreeWidget.translate("categoriesTree.noMatchingCategoryNames") });
+        return ((0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.VisibilityTreeNoFilteredData, { title: TreeWidget_1.TreeWidget.translate("categoriesTree.noCategoryFound"), message: TreeWidget_1.TreeWidget.translate("categoriesTree.noMatchingCategoryNames") }));
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tree-widget-visibility-tree-base", "tree-widget-tree-container"), children: [(0, jsx_runtime_1.jsx)(components_react_1.ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode ?? components_react_1.SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, descriptionsEnabled: true, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, width: props.width, height: props.height }), overlay] }));
+    if (!state) {
+        return null;
+    }
+    const isFilterApplied = state.filteringResult?.filteredProvider !== undefined;
+    const overlay = state.filteringResult?.isFiltering ? (0, jsx_runtime_1.jsx)("div", { className: "filteredTreeOverlay" }) : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tree-widget-visibility-tree-base", "tree-widget-tree-container"), children: [(0, jsx_runtime_1.jsx)(presentation_components_1.PresentationTree, { width: props.width, height: props.height, state: state, selectionMode: props.selectionMode ?? components_react_1.SelectionMode.None, treeRenderer: hierarchyLevelConfig?.isFilteringEnabled
+                    ? (rendererProps) => ((0, jsx_runtime_1.jsx)(TreeRenderer_1.FilterableTreeRenderer, { ...rendererProps, ...baseRendererProps, nodeLoader: state.nodeLoader, nodeRenderer: (nodeProps) => (0, jsx_runtime_1.jsx)(CategoriesTreeNodeRenderer, { ...nodeProps, density: density }) }))
+                    : (0, VisibilityTreeRenderer_1.createVisibilityTreeRenderer)(baseRendererProps), descriptionsEnabled: true, noDataRenderer: isFilterApplied ? noFilteredDataRenderer : undefined }), overlay] }));
 }
 exports.CategoryTree = CategoryTree;
+function CategoriesTreeNodeRenderer(props) {
+    return ((0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.FilterableVisibilityTreeNodeRenderer, { ...props, iconsEnabled: false, descriptionEnabled: true, levelOffset: 10, isEnlarged: props.density === "enlarged" }));
+}
 function useCategoryVisibilityHandler(viewManager, imodel, categories, activeView, allViewports, visibilityHandler) {
-    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
-    return visibilityHandler ?? defaultVisibilityHandler;
+    const [state, setState] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (visibilityHandler) {
+            return;
+        }
+        const defaultHandler = new CategoryVisibilityHandler_1.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_frontend_1.Presentation.presentation.vars(exports.RULESET_CATEGORIES.id).setString("ViewType", viewType);
 }
-const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([
-    Utils_1.addCustomTreeNodeItemLabelRenderer,
-]);
+const customizeTreeNodeItem = (0, Utils_1.combineTreeNodeItemCustomizations)([Utils_1.addCustomTreeNodeItemLabelRenderer]);
 //# sourceMappingURL=CategoriesTree.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n--------------------------------------------------------------------------------------------/\n\nimport \"../VisibilityTreeBase.scss\";\nimport classNames from \"classnames\";\nimport { useCallback, useEffect } 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"]}
1	+ {"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"../VisibilityTreeBase.scss\";\nimport classNames from \"classnames\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { SelectionMode } from \"@itwin/components-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { PresentationTree } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { FilterableTreeRenderer } from \"../common/TreeRenderer\";\nimport { 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/cjs/components/trees/category-tree/CategoriesTreeComponent.js CHANGED Viewed

@@ -1,11 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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.
-*--------------------------------------------------------------------------------------------*/
+ * 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 = require("react");
 const appui_react_1 = require("@itwin/appui-react");
@@ -19,6 +22,7 @@ const TreeFilteringState_1 = require("../../TreeFilteringState");
 const AutoSizer_1 = require("../../utils/AutoSizer");
 const CategoriesTree_1 = require("./CategoriesTree");
 const CategoryVisibilityHandler_1 = require("./CategoryVisibilityHandler");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * A component that renders [[CategoriesTree]] and a header with filtering capabilities
  * and header buttons.
@@ -30,7 +34,7 @@ const CategoriesTreeComponent = (props) => {
     if (!iModel || !viewport) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(CategoriesTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }));
+    return (0, jsx_runtime_1.jsx)(CategoriesTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport });
 };
 exports.CategoriesTreeComponent = CategoriesTreeComponent;
 /**
@@ -61,22 +65,25 @@ exports.CategoriesTreeComponent.getLabel = () => TreeWidget_1.TreeWidget.transla
 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, onFilterApplied, filteredProvider, } = (0, TreeFilteringState_1.useTreeFilteringState)();
+    const { searchOptions, filterString, onFilterApplied, filteredProvider } = (0, TreeFilteringState_1.useTreeFilteringState)();
+    const contentClassName = (0, classnames_1.default)("tree-widget-tree-content", props.density === "enlarged" && "enlarge");
     (0, react_1.useEffect)(() => {
-        (async () => {
-            if (filteredProvider)
-                setFilteredCategories((await getFilteredCategories(filteredProvider)));
-            else
+        void (async () => {
+            if (filteredProvider) {
+                setFilteredCategories(await getFilteredCategories(filteredProvider));
+            }
+            else {
                 setFilteredCategories(undefined);
+            }
         })();
     }, [filteredProvider]);
-    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
+    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, density: props.density, 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 })) }) })] }));
+                        (0, jsx_runtime_1.jsx)(ShowAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, density: props.density }, "show-all-btn"),
+                        (0, jsx_runtime_1.jsx)(HideAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, density: props.density }, "hide-all-btn"),
+                        (0, jsx_runtime_1.jsx)(InvertAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, density: props.density }, "invert-all-btn"),
+                    ] }), (0, jsx_runtime_1.jsx)("div", { className: contentClassName, 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 = [];
@@ -87,19 +94,21 @@ async function getFilteredCategories(filteredProvider) {
         }
         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))
+            ? (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) {
-    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, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "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) {
-    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, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "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 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, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { title: TreeWidget_1.TreeWidget.translate("invert"), size: props.density === "enlarged" ? "large" : "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 CHANGED Viewed

	@@ -1 +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"]}
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\";\nimport classNames from \"classnames\";\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 const contentClassName = classNames(\"tree-widget-tree-content\", props.density === \"enlarged\" && \"enlarge\");\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 density={props.density}\n >\n {props.headerButtons\n ? props.headerButtons.map((btn, index) => <Fragment key={index}>{btn({ viewport: props.viewport, categories, filteredCategories })}</Fragment>)\n : [\n <ShowAllButton\n viewport={props.viewport}\n categories={categories}\n filteredCategories={filteredCategories}\n key=\"show-all-btn\"\n density={props.density}\n />,\n <HideAllButton\n viewport={props.viewport}\n categories={categories}\n filteredCategories={filteredCategories}\n key=\"hide-all-btn\"\n density={props.density}\n />,\n <InvertAllButton\n viewport={props.viewport}\n categories={categories}\n filteredCategories={filteredCategories}\n key=\"invert-all-btn\"\n density={props.density}\n />,\n ]}\n </TreeHeader>\n <div className={contentClassName}>\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={props.density === \"enlarged\" ? \"large\" : \"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={props.density === \"enlarged\" ? \"large\" : \"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={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n onClick={() => void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport)}\n >\n <SvgVisibilityHalf />\n </IconButton>\n );\n}\n"]}

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

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