@itwin/tree-widget-react 4.0.0-alpha.22 → 4.0.0-alpha.24

package/README.md

@@ -149,16 +149,18 @@ import type { ComponentPropsWithoutRef } from "react";
 type VisibilityTreeRendererProps = ComponentPropsWithoutRef<typeof VisibilityTreeRenderer>;
 type CustomModelsTreeRendererProps = Parameters<ComponentPropsWithoutRef<typeof VisibilityTree>["treeRenderer"]>[0];
 function CustomModelsTreeRenderer(props: CustomModelsTreeRendererProps) {
-  const getLabel = props.getLabel;
-  const getLabelCallback = useCallback<Required<VisibilityTreeRendererProps>["getLabel"]>(
+  const getTreeItemProps = useCallback<Required<VisibilityTreeRendererProps>["getTreeItemProps"]>(
     (node) => {
-      const originalLabel = getLabel(node);
-      return <>Custom node - {originalLabel}</>;
+      const treeProps = props.getTreeItemProps(node);
+      const label = treeProps.label ?? node.label;
+      return {
+        label: <>Custom node - {label}</>
+        description: <>Sublabel - {label}</>
+      };
     },
-    [getLabel],
+    [props.getTreeItemProps],
   );
-  const getSublabelCallback = useCallback<Required<VisibilityTreeRendererProps>["getSublabel"]>((node) => <>Sublabel - {node.label}</>, []);
-  return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabelCallback} />;
+  return <VisibilityTreeRenderer {...props} getTreeItemProps={getTreeItemProps} />;
 }
 
 interface CustomModelsTreeProps {
@@ -169,7 +171,7 @@ interface CustomModelsTreeProps {
 
 function CustomModelsTreeComponent({ imodel, viewport, selectionStorage }: CustomModelsTreeProps) {
   const { buttonProps } = useModelsTreeButtonProps({ imodel, viewport });
-  const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport });
+  const modelsTree = useModelsTree({ activeView: viewport });
 
   return (
     <TreeWithHeader
@@ -179,10 +181,10 @@ function CustomModelsTreeComponent({ imodel, viewport, selectionStorage }: Custo
       ]}
     >
       <VisibilityTree
-        {...modelsTreeProps}
+        {...modelsTree.treeProps}
         selectionStorage={selectionStorage}
         imodel={imodel}
-        treeRenderer={(props) => <CustomModelsTreeRenderer {...props} {...rendererProps} />}
+        treeRenderer={(rendererProps) => <CustomModelsTreeRenderer {...rendererProps} getTreeItemProps={(node) => modelsTree.getTreeItemProps(node, rendererProps)} />}
       />
     </TreeWithHeader>
   );
@@ -232,15 +234,17 @@ Use `getFilteredPaths` when you need more control over filtering behaviour. Here
       [targetItems],
     );
 
-    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths });
+    const modelsTree = useModelsTree({ activeView: viewport, getFilteredPaths });
 
     return (
       <VisibilityTree
-        {...modelsTreeProps}
+        {...modelsTree.treeProps}
         getSchemaContext={getSchemaContext}
         selectionStorage={selectionStorage}
         imodel={imodel}
-        treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+        treeRenderer={(rendererProps) => (
+          <VisibilityTreeRenderer {...rendererProps} getTreeItemProps={(node) => modelsTree.getTreeItemProps(node, rendererProps)} />
+        )}
       />
     );
   }
@@ -271,15 +275,17 @@ Use `getFilteredPaths` when you need more control over filtering behaviour. Here
       return result;
     }, []);
 
-    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths });
+    const modelsTree = useModelsTree({ activeView: viewport, getFilteredPaths });
 
     return (
       <VisibilityTree
-        {...modelsTreeProps}
+        {...modelsTree.treeProps}
         getSchemaContext={getSchemaContext}
         selectionStorage={selectionStorage}
         imodel={imodel}
-        treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+        treeRenderer={(rendererProps) => (
+          <VisibilityTreeRenderer {...rendererProps} getTreeItemProps={(node) => modelsTree.getTreeItemProps(node, rendererProps)} />
+        )}
       />
     );
   }
@@ -343,14 +349,16 @@ Use `getFilteredPaths` when you need more control over filtering behaviour. Here
       [imodel],
     );
 
-    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths, filter });
+    const modelsTree = useModelsTree({ activeView: viewport, getFilteredPaths, filter });
     return (
       <VisibilityTree
-        {...modelsTreeProps}
+        {...modelsTree.treeProps}
         getSchemaContext={getSchemaContext}
         selectionStorage={selectionStorage}
         imodel={imodel}
-        treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+        treeRenderer={(rendererProps) => (
+          <VisibilityTreeRenderer {...rendererProps} getTreeItemProps={(node) => modelsTree.getTreeItemProps(node, rendererProps)} />
+        )}
       />
     );
   }
@@ -386,14 +394,14 @@ function CustomModelsTreeComponentWithTargetItems({
     [targetItems],
   );
 
-  const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getSubTreePaths });
+  const modelsTree = useModelsTree({ activeView: viewport, getSubTreePaths });
 
   return (
     <VisibilityTree
-      {...modelsTreeProps}
+      {...modelsTree.treeProps}
       selectionStorage={selectionStorage}
       imodel={imodel}
-      treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+      treeRenderer={(rendererProps) => <VisibilityTreeRenderer {...props} getTreeItemProps={(node) => modelsTree.getTreeItemProps(node, rendererProps)} />}
     />
   );
 }
@@ -446,18 +454,17 @@ type VisibilityTreeRendererProps = ComponentPropsWithoutRef<typeof VisibilityTre
 type CustomCategoriesTreeRendererProps = Parameters<ComponentPropsWithoutRef<typeof VisibilityTree>["treeRenderer"]>[0];
 
 function CustomCategoriesTreeRenderer(props: CustomCategoriesTreeRendererProps) {
-  const getLabel = props.getLabel;
-  const getLabelCallback = useCallback<Required<VisibilityTreeRendererProps>["getLabel"]>(
+  const getTreeItemProps = useCallback<Required<VisibilityTreeRendererProps>["getTreeItemProps"]>(
     (node) => {
-      const originalLabel = getLabel(node);
-      return <>Custom node - {originalLabel}</>;
+      const treeProps = props.getTreeItemProps(node);
+      return {
+        label: <>Custom node - {treeProps.label ?? node.label}</>,
+        description: <>Custom sub label</>,
+      };
     },
-    [getLabel],
+    [props.getTreeItemProps],
   );
-  const getSublabel = useCallback<Required<VisibilityTreeRendererProps>["getSublabel"]>(() => {
-    return <>Custom sub label</>;
-  }, []);
-  return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabel} />;
+  return <VisibilityTreeRenderer {...props} getTreeItemProps={getTreeItemProps} />;
 }
 
 interface CustomCategoriesTreeProps {
@@ -468,7 +475,7 @@ interface CustomCategoriesTreeProps {
 
 function CustomCategoriesTreeComponent({ imodel, viewport, selectionStorage }: CustomCategoriesTreeProps) {
   const { buttonProps } = useCategoriesTreeButtonProps({ viewport });
-  const { categoriesTreeProps, rendererProps } = useCategoriesTree({ activeView: viewport, filter: "" });
+  const categoriesTree = useCategoriesTree({ activeView: viewport, filter: "" });
   return (
     <TreeWithHeader
       buttons={[
@@ -477,10 +484,12 @@ function CustomCategoriesTreeComponent({ imodel, viewport, selectionStorage }: C
       ]}
     >
       <VisibilityTree
-        {...categoriesTreeProps}
+        {...categoriesTree.treeProps}
         selectionStorage={selectionStorage}
         imodel={imodel}
-        treeRenderer={(props) => <CustomCategoriesTreeRenderer {...props} {...rendererProps} />}
+        treeRenderer={(rendererProps) => (
+          <CustomCategoriesTreeRenderer {...rendererProps} getTreeItemProps={(node) => categoriesTree.getTreeItemProps(node, rendererProps)} />
+        )}
       />
     </TreeWithHeader>
   );
@@ -803,14 +812,16 @@ function MyWidget() {
 }
 
 function MyTree() {
-  const { categoriesTreeProps, rendererProps } = useCategoriesTree({ activeView: viewport, filter: "" });
+  const categoriesTree = useCategoriesTree({ activeView: viewport, filter: "" });
   return (
     // VisibilityTree will use provided telemetry context to report used features and their performance
     <VisibilityTree
-      {...categoriesTreeProps}
+      {...categoriesTree.treeProps}
       selectionStorage={unifiedSelectionStorage}
       imodel={imodel}
-      treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+      treeRenderer={(rendererProps) => (
+        <VisibilityTreeRenderer {...rendererProps} getTreeItemProps={(node) => categoriesTree.getTreeItemProps(node, rendererProps)} />
+      )}
     />
   );
   // see "Custom trees" section for more example implementations

package/lib/esm/tree-widget-react/components/TreeWidgetComponentImpl.d.ts

@@ -5,7 +5,7 @@ import type { IModelConnection } from "@itwin/core-frontend";
  * @public
  */
 export interface TreeRenderProps {
-    filter?: string;
+    searchText?: string;
     treeLabel: string;
     onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;
     onFeatureUsed?: (feature: string) => void;

package/lib/esm/tree-widget-react/components/TreeWidgetComponentImpl.js

@@ -32,7 +32,7 @@ function SelectableTreeContent({ onPerformanceMeasured, onFeatureUsed, trees: tr
         onFeatureUsed?.(`choose-${treeId}`);
         setSelectedContentId(treeId);
     }, [onFeatureUsed]);
-    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsxs("div", { className: "tw-content", children: [_jsx(WidgetHeader, { trees: trees, defaultSelectedContentId: defaultSelectedContentId, onSearch: setSearchValue, onSelect: onSelect, isLoading: selectedContent.id === "loading" }), _jsx("div", { className: "tw-content-wrapper", children: selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue, treeLabel: selectedContent.label }) })] }) }));
+    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsxs("div", { className: "tw-content", children: [_jsx(WidgetHeader, { trees: trees, defaultSelectedContentId: defaultSelectedContentId, onSearch: setSearchValue, onSelect: onSelect, isLoading: selectedContent.id === "loading" }), _jsx("div", { className: "tw-content-wrapper", children: selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, searchText: searchValue, treeLabel: selectedContent.label }) })] }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = useState();

package/lib/esm/tree-widget-react/components/TreeWidgetComponentImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetComponentImpl.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetComponentImpl.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 \"./TreeWidgetComponentImpl.css\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Skeleton } from \"@stratakit/bricks\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { SelectableTree } from \"./tree-header/SelectableTree.js\";\nimport { WidgetHeader } from \"./tree-header/WidgetHeader.js\";\nimport { SkeletonTree } from \"./trees/common/components/SkeletonTree.js\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectionProps } from \"./tree-header/WidgetHeader.js\";\n\n/**\n * Props for rendering trees\n * @public\n */\nexport interface TreeRenderProps {\n  filter?: string;\n  treeLabel: string;\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n// TODO: fix interface so startIcon type is taken from this interface for `TreeSelector`\n/**\n * Definition of a tree component displayed in `SelectableTree`.\n * @public\n */\nexport interface TreeDefinition {\n  /** Id of the tree */\n  id: string;\n  /** Callback that is used to get tree label */\n  getLabel: () => string;\n  /** Callback that is used to render tree component */\n  render: (props: TreeRenderProps) => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n  /**\n   *  Flag to determine if search box should be rendered.\n   *  - false or undefined, the search box will not be rendered.\n   *  - true, the search box will be rendered.\n   */\n  isSearchable?: boolean;\n  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `TreeWidgetComponent`\n * @internal\n */\nexport interface TreeWidgetComponentImplProps {\n  trees: TreeDefinition[];\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders a tree (combo box) selector and the selected tree component.\n * @internal\n */\nexport function TreeWidgetComponentImpl(props: TreeWidgetComponentImplProps) {\n  const imodel = useActiveIModelConnection();\n  if (!imodel) {\n    return null;\n  }\n  return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent({\n  onPerformanceMeasured,\n  onFeatureUsed,\n  trees: treeDefinitions,\n  imodel,\n}: TreeWidgetComponentImplProps & { imodel: IModelConnection }) {\n  const activeTrees = useActiveTrees(treeDefinitions, imodel);\n  const { trees, defaultSelectedContentId } = useMemo(() => getWidgetWithHeaderProps(activeTrees), [activeTrees]);\n  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);\n  const [selectedContentId, setSelectedContentId] = useState<string | undefined>(defaultSelectedContentId);\n  const selectedContent = useMemo(() => trees.find((c) => c.id === selectedContentId) ?? trees[0], [selectedContentId, trees]);\n\n  const onSelect = useCallback(\n    (treeId: string) => {\n      onFeatureUsed?.(`choose-${treeId}`);\n      setSelectedContentId(treeId);\n    },\n    [onFeatureUsed],\n  );\n\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <div className=\"tw-content\">\n        <WidgetHeader\n          trees={trees}\n          defaultSelectedContentId={defaultSelectedContentId}\n          onSearch={setSearchValue}\n          onSelect={onSelect}\n          isLoading={selectedContent.id === \"loading\"}\n        />\n        <div className=\"tw-content-wrapper\">\n          {selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue, treeLabel: selectedContent.label })}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n  const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n  useEffect(() => {\n    let disposed = false;\n    void (async () => {\n      const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n      if (!disposed) {\n        setTrees(visibleTrees);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n    };\n  }, [treeDefinitions, imodel]);\n\n  return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: TreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      isSearchable: treeDef.isSearchable,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\n      startIcon: treeDef.startIcon,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getWidgetWithHeaderProps(trees?: TreeContentDefinition[]): TreeSelectionProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          isSearchable: false,\n          render: () => <LoadingTree />,\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\n          isSearchable: false,\n          label: \"\",\n          render: () => (\n            <div style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\" }} className=\"tree-widget-no-trees-container\">\n              {TreeWidget.translate(\"selectableTree.noTrees\")}\n            </div>\n          ),\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction LoadingTree() {\n  return (\n    <SelectableTree\n      buttons={\n        <>\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n        </>\n      }\n    >\n      <SkeletonTree />\n    </SelectableTree>\n  );\n}\n"]}
+{"version":3,"file":"TreeWidgetComponentImpl.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetComponentImpl.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 \"./TreeWidgetComponentImpl.css\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Skeleton } from \"@stratakit/bricks\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { SelectableTree } from \"./tree-header/SelectableTree.js\";\nimport { WidgetHeader } from \"./tree-header/WidgetHeader.js\";\nimport { SkeletonTree } from \"./trees/common/components/SkeletonTree.js\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectionProps } from \"./tree-header/WidgetHeader.js\";\n\n/**\n * Props for rendering trees\n * @public\n */\nexport interface TreeRenderProps {\n  searchText?: string;\n  treeLabel: string;\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n// TODO: fix interface so startIcon type is taken from this interface for `TreeSelector`\n/**\n * Definition of a tree component displayed in `SelectableTree`.\n * @public\n */\nexport interface TreeDefinition {\n  /** Id of the tree */\n  id: string;\n  /** Callback that is used to get tree label */\n  getLabel: () => string;\n  /** Callback that is used to render tree component */\n  render: (props: TreeRenderProps) => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n  /**\n   *  Flag to determine if search box should be rendered.\n   *  - false or undefined, the search box will not be rendered.\n   *  - true, the search box will be rendered.\n   */\n  isSearchable?: boolean;\n  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `TreeWidgetComponent`\n * @internal\n */\nexport interface TreeWidgetComponentImplProps {\n  trees: TreeDefinition[];\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders a tree (combo box) selector and the selected tree component.\n * @internal\n */\nexport function TreeWidgetComponentImpl(props: TreeWidgetComponentImplProps) {\n  const imodel = useActiveIModelConnection();\n  if (!imodel) {\n    return null;\n  }\n  return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent({\n  onPerformanceMeasured,\n  onFeatureUsed,\n  trees: treeDefinitions,\n  imodel,\n}: TreeWidgetComponentImplProps & { imodel: IModelConnection }) {\n  const activeTrees = useActiveTrees(treeDefinitions, imodel);\n  const { trees, defaultSelectedContentId } = useMemo(() => getWidgetWithHeaderProps(activeTrees), [activeTrees]);\n  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);\n  const [selectedContentId, setSelectedContentId] = useState<string | undefined>(defaultSelectedContentId);\n  const selectedContent = useMemo(() => trees.find((c) => c.id === selectedContentId) ?? trees[0], [selectedContentId, trees]);\n\n  const onSelect = useCallback(\n    (treeId: string) => {\n      onFeatureUsed?.(`choose-${treeId}`);\n      setSelectedContentId(treeId);\n    },\n    [onFeatureUsed],\n  );\n\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <div className=\"tw-content\">\n        <WidgetHeader\n          trees={trees}\n          defaultSelectedContentId={defaultSelectedContentId}\n          onSearch={setSearchValue}\n          onSelect={onSelect}\n          isLoading={selectedContent.id === \"loading\"}\n        />\n        <div className=\"tw-content-wrapper\">\n          {selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, searchText: searchValue, treeLabel: selectedContent.label })}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n  const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n  useEffect(() => {\n    let disposed = false;\n    void (async () => {\n      const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n      if (!disposed) {\n        setTrees(visibleTrees);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n    };\n  }, [treeDefinitions, imodel]);\n\n  return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: TreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      isSearchable: treeDef.isSearchable,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\n      startIcon: treeDef.startIcon,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getWidgetWithHeaderProps(trees?: TreeContentDefinition[]): TreeSelectionProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          isSearchable: false,\n          render: () => <LoadingTree />,\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\n          isSearchable: false,\n          label: \"\",\n          render: () => (\n            <div style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\" }} className=\"tree-widget-no-trees-container\">\n              {TreeWidget.translate(\"selectableTree.noTrees\")}\n            </div>\n          ),\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction LoadingTree() {\n  return (\n    <SelectableTree\n      buttons={\n        <>\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n        </>\n      }\n    >\n      <SkeletonTree />\n    </SelectableTree>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.d.ts

@@ -1,12 +1,12 @@
 import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
-import type { VisibilityTreeRendererProps } from "../common/components/VisibilityTreeRenderer.js";
+import type { ExtendedVisibilityTreeRendererProps } from "../common/components/VisibilityTreeRenderer.js";
 import type { UseCategoriesTreeProps } from "./UseCategoriesTree.js";
 /** @beta */
-export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "getInlineActions" | "getMenuActions" | "getContextMenuActions" | "getDecorations" | "treeLabel"> & UseCategoriesTreeProps & {
+export type CategoriesTreeProps = Pick<ExtendedVisibilityTreeRendererProps, "getInlineActions" | "getMenuActions" | "getContextMenuActions" | "getTreeItemProps" | "treeLabel"> & Pick<VisibilityTreeProps, "imodel" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & UseCategoriesTreeProps & {
     hierarchyLevelConfig?: {
         sizeLimit?: number;
     };
 };
 /** @beta */
-export declare function CategoriesTree({ imodel, selectionStorage, activeView, filter, hierarchyLevelConfig, hierarchyConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getInlineActions, getMenuActions, getContextMenuActions, treeLabel, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoriesTree({ imodel, selectionStorage, activeView, searchText, hierarchyLevelConfig, hierarchyConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getInlineActions, getMenuActions, getContextMenuActions, getTreeItemProps, treeLabel, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CategoriesTree.d.ts.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.js

@@ -7,14 +7,15 @@ import { VisibilityTree } from "../common/components/VisibilityTree.js";
 import { VisibilityTreeRenderer } from "../common/components/VisibilityTreeRenderer.js";
 import { useCategoriesTree } from "./UseCategoriesTree.js";
 /** @beta */
-export function CategoriesTree({ imodel, selectionStorage, activeView, filter, hierarchyLevelConfig, hierarchyConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getInlineActions, getMenuActions, getContextMenuActions, treeLabel, }) {
-    const { categoriesTreeProps, rendererProps } = useCategoriesTree({
-        filter,
+export function CategoriesTree({ imodel, selectionStorage, activeView, searchText, hierarchyLevelConfig, hierarchyConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getInlineActions, getMenuActions, getContextMenuActions, getTreeItemProps, treeLabel, }) {
+    const categoriesTree = useCategoriesTree({
+        searchText,
         activeView,
         onCategoriesFiltered,
         emptyTreeContent,
         hierarchyConfig,
+        getTreeItemProps,
     });
-    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (_jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps, treeLabel: treeLabel, getInlineActions: getInlineActions, getMenuActions: getMenuActions, getContextMenuActions: getContextMenuActions, getDecorations: getDecorations ?? rendererProps.getDecorations })) }));
+    return (_jsx(VisibilityTree, { ...categoriesTree.treeProps, imodel: imodel, selectionStorage: selectionStorage, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (_jsx(VisibilityTreeRenderer, { ...treeProps, treeLabel: treeLabel, getInlineActions: getInlineActions ? (node) => getInlineActions(node, treeProps) : undefined, getMenuActions: getMenuActions ? (node) => getMenuActions(node, treeProps) : undefined, getContextMenuActions: getContextMenuActions ? (node) => getContextMenuActions(node, treeProps) : undefined, getTreeItemProps: (node) => categoriesTree.getTreeItemProps(node, treeProps) })) }));
 }
 //# sourceMappingURL=CategoriesTree.js.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAe3D,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,SAAS,GACW;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;QACpB,gBAAgB;QAChB,eAAe;KAChB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,OACT,mBAAmB,EACvB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EACxD,aAAa,EAAE,aAAa,IAAI,MAAM,EACtC,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAC3B,KAAC,sBAAsB,OACjB,SAAS,KACT,aAAa,EACjB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,EAC5C,cAAc,EAAE,cAAc,IAAI,aAAa,CAAC,cAAc,GAC9D,CACH,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { VisibilityTree } from \"../common/components/VisibilityTree.js\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer.js\";\nimport { useCategoriesTree } from \"./UseCategoriesTree.js\";\n\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\nimport type { VisibilityTreeRendererProps } from \"../common/components/VisibilityTreeRenderer.js\";\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" | \"selectionStorage\" | \"selectionMode\" | \"emptyTreeContent\"> &\n  Pick<VisibilityTreeRendererProps, \"getInlineActions\" | \"getMenuActions\" | \"getContextMenuActions\" | \"getDecorations\" | \"treeLabel\"> &\n  UseCategoriesTreeProps & {\n    hierarchyLevelConfig?: {\n      sizeLimit?: number;\n    };\n  };\n\n/** @beta */\nexport function CategoriesTree({\n  imodel,\n  selectionStorage,\n  activeView,\n  filter,\n  hierarchyLevelConfig,\n  hierarchyConfig,\n  selectionMode,\n  onCategoriesFiltered,\n  emptyTreeContent,\n  getDecorations,\n  getInlineActions,\n  getMenuActions,\n  getContextMenuActions,\n  treeLabel,\n}: CategoriesTreeProps) {\n  const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n    filter,\n    activeView,\n    onCategoriesFiltered,\n    emptyTreeContent,\n    hierarchyConfig,\n  });\n\n  return (\n    <VisibilityTree\n      {...categoriesTreeProps}\n      imodel={imodel}\n      selectionStorage={selectionStorage}\n      hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n      selectionMode={selectionMode ?? \"none\"}\n      treeRenderer={(treeProps) => (\n        <VisibilityTreeRenderer\n          {...treeProps}\n          {...rendererProps}\n          treeLabel={treeLabel}\n          getInlineActions={getInlineActions}\n          getMenuActions={getMenuActions}\n          getContextMenuActions={getContextMenuActions}\n          getDecorations={getDecorations ?? rendererProps.getDecorations}\n        />\n      )}\n    />\n  );\n}\n"]}
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAkB3D,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,GACW;IACpB,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,UAAU;QACV,UAAU;QACV,oBAAoB;QACpB,gBAAgB;QAChB,eAAe;QACf,gBAAgB;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,OACT,cAAc,CAAC,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EACxD,aAAa,EAAE,aAAa,IAAI,MAAM,EACtC,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAC3B,KAAC,sBAAsB,OACjB,SAAS,EACb,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5F,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EACtF,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3G,gBAAgB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,GAC5E,CACH,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { VisibilityTree } from \"../common/components/VisibilityTree.js\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer.js\";\nimport { useCategoriesTree } from \"./UseCategoriesTree.js\";\n\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\nimport type { ExtendedVisibilityTreeRendererProps } from \"../common/components/VisibilityTreeRenderer.js\";\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<\n  ExtendedVisibilityTreeRendererProps,\n  \"getInlineActions\" | \"getMenuActions\" | \"getContextMenuActions\" | \"getTreeItemProps\" | \"treeLabel\"\n> &\n  Pick<VisibilityTreeProps, \"imodel\" | \"selectionStorage\" | \"selectionMode\" | \"emptyTreeContent\"> &\n  UseCategoriesTreeProps & {\n    hierarchyLevelConfig?: {\n      sizeLimit?: number;\n    };\n  };\n\n/** @beta */\nexport function CategoriesTree({\n  imodel,\n  selectionStorage,\n  activeView,\n  searchText,\n  hierarchyLevelConfig,\n  hierarchyConfig,\n  selectionMode,\n  onCategoriesFiltered,\n  emptyTreeContent,\n  getInlineActions,\n  getMenuActions,\n  getContextMenuActions,\n  getTreeItemProps,\n  treeLabel,\n}: CategoriesTreeProps) {\n  const categoriesTree = useCategoriesTree({\n    searchText,\n    activeView,\n    onCategoriesFiltered,\n    emptyTreeContent,\n    hierarchyConfig,\n    getTreeItemProps,\n  });\n\n  return (\n    <VisibilityTree\n      {...categoriesTree.treeProps}\n      imodel={imodel}\n      selectionStorage={selectionStorage}\n      hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n      selectionMode={selectionMode ?? \"none\"}\n      treeRenderer={(treeProps) => (\n        <VisibilityTreeRenderer\n          {...treeProps}\n          treeLabel={treeLabel}\n          getInlineActions={getInlineActions ? (node) => getInlineActions(node, treeProps) : undefined}\n          getMenuActions={getMenuActions ? (node) => getMenuActions(node, treeProps) : undefined}\n          getContextMenuActions={getContextMenuActions ? (node) => getContextMenuActions(node, treeProps) : undefined}\n          getTreeItemProps={(node) => categoriesTree.getTreeItemProps(node, treeProps)}\n        />\n      )}\n    />\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.js

@@ -12,6 +12,7 @@ import visibilityInvertSvg from "@stratakit/icons/visibility-invert.svg";
 import visibilityShowSvg from "@stratakit/icons/visibility-show.svg";
 import { TreeWidget } from "../../../TreeWidget.js";
 import { hideAllCategories, invertAllCategories } from "../common/CategoriesVisibilityUtils.js";
+import { isBeSqliteInterruptError, useErrorState } from "../common/internal/UseErrorState.js";
 import { useGuid } from "../common/internal/useGuid.js";
 import { getClassesByView } from "../common/internal/Utils.js";
 import { loadCategoriesFromViewport } from "../common/internal/VisibilityUtils.js";
@@ -58,7 +59,12 @@ export function ShowAllButton(props) {
     return (_jsx(IconButton, { variant: "ghost", label: TreeWidget.translate("categoriesTree.buttons.showAll.tooltip"), onClick: () => {
             // cspell:disable-next-line
             props.onFeatureUsed?.(`categories-tree-showall`);
-            void showAll({ models: props.models, viewport: props.viewport, categories: props.categories.map((category) => category.categoryId), componentId });
+            void showAll({
+                models: props.models,
+                viewport: props.viewport,
+                categories: props.categories.map((category) => category.categoryId),
+                componentId,
+            }).catch(() => { });
         }, icon: visibilityShowSvg }));
 }
 /** @public */
@@ -79,11 +85,21 @@ export function InvertAllButton(props) {
 }
 const EMPTY_CATEGORIES_ARRAY = [];
 function useCategories(viewport, componentId) {
-    const categoriesPromise = useMemo(async () => loadCategoriesFromViewport(viewport, componentId), [viewport, componentId]);
+    const setErrorState = useErrorState();
+    const categoriesPromise = useMemo(async () => {
+        try {
+            return await loadCategoriesFromViewport(viewport, componentId);
+        }
+        catch (error) {
+            setErrorState(error);
+            return [];
+        }
+    }, [viewport, componentId, setErrorState]);
     return useAsyncValue(categoriesPromise) ?? EMPTY_CATEGORIES_ARRAY;
 }
 function useAvailableModels(viewport, componentId) {
     const [availableModels, setAvailableModels] = useState([]);
+    const setErrorState = useErrorState();
     const imodel = viewport.iModel;
     const viewType = viewport.viewType === "2d" ? "2d" : "3d";
     useEffect(() => {
@@ -91,29 +107,38 @@ function useAvailableModels(viewport, componentId) {
             .then((models) => {
             setAvailableModels(models);
         })
-            .catch(() => {
+            .catch((error) => {
+            setErrorState(error);
             setAvailableModels([]);
         });
-    }, [imodel, viewType, componentId]);
+    }, [imodel, viewType, componentId, setErrorState]);
     return availableModels;
 }
 async function queryModelsForHeaderActions(iModel, viewType, componentId) {
     const { modelClass } = getClassesByView(viewType);
     const models = new Array();
-    const query = `
-    SELECT
-      m.ECInstanceId id
-    FROM
-      ${modelClass} m
-    WHERE
-      m.IsPrivate = false
-  `;
-    for await (const _row of iModel.createQueryReader(query, undefined, {
-        restartToken: `CategoriesTreeButtons/${componentId}/all-models`,
-        rowFormat: QueryRowFormat.UseECSqlPropertyNames,
-    })) {
-        models.push(_row.id);
+    try {
+        const query = `
+      SELECT
+        m.ECInstanceId id
+      FROM
+        ${modelClass} m
+      WHERE
+        m.IsPrivate = false
+    `;
+        for await (const _row of iModel.createQueryReader(query, undefined, {
+            restartToken: `CategoriesTreeButtons/${componentId}/all-models`,
+            rowFormat: QueryRowFormat.UseECSqlPropertyNames,
+        })) {
+            models.push(_row.id);
+        }
+        return models;
+    }
+    catch (error) {
+        if (isBeSqliteInterruptError(error)) {
+            return [];
+        }
+        throw error;
     }
-    return models;
 }
 //# sourceMappingURL=CategoriesTreeButtons.js.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTreeButtons.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.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 { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useAsyncValue } from \"@itwin/components-react\";\nimport { QueryRowFormat } from \"@itwin/core-common\";\nimport { IconButton } from \"@stratakit/bricks\";\nimport visibilityHideSvg from \"@stratakit/icons/visibility-hide.svg\";\nimport visibilityInvertSvg from \"@stratakit/icons/visibility-invert.svg\";\nimport visibilityShowSvg from \"@stratakit/icons/visibility-show.svg\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { hideAllCategories, invertAllCategories } from \"../common/CategoriesVisibilityUtils.js\";\nimport { useGuid } from \"../common/internal/useGuid.js\";\nimport { getClassesByView } from \"../common/internal/Utils.js\";\nimport { loadCategoriesFromViewport } from \"../common/internal/VisibilityUtils.js\";\nimport { hideAllModels, showAll } from \"../common/Utils.js\";\n\nimport type { GuidString, Id64Array } from \"@itwin/core-bentley\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeToolbarButtonProps } from \"../../tree-header/SelectableTree.js\";\nimport type { CategoryInfo } from \"../common/CategoriesVisibilityUtils.js\";\nimport type { ModelId } from \"../common/internal/Types.js\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\n\n/**\n * Props that get passed to `CategoriesTreeComponent` header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n */\nexport interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps {\n  /** A list of categories available in the iModel */\n  categories: CategoryInfo[];\n  /** A list of models available in the iModel. */\n  models: Id64Array;\n}\n\n/**\n * Custom hook that creates props required to render `CategoriesTreeComponent` header button.\n *\n * Example:\n * ```tsx\n * const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <CategoriesTreeComponent.ShowAllButton {...buttonProps} />,\n *     <CategoriesTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <CategoriesTree {...treeProps} onCategoriesFiltered={onCategoriesFiltered} />\n * </TreeWithHeader>\n * ```\n *\n * @public\n */\nexport function useCategoriesTreeButtonProps({ viewport }: { viewport: TreeWidgetViewport }): {\n  buttonProps: Pick<CategoriesTreeHeaderButtonProps, \"categories\" | \"viewport\" | \"models\">;\n  onCategoriesFiltered: (props: { categories: CategoryInfo[] | undefined; models?: Id64Array }) => void;\n} {\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[] | undefined>();\n  const [filteredModels, setFilteredModels] = useState<Id64Array | undefined>();\n\n  const componentId = useGuid();\n  const categories = useCategories(viewport, componentId);\n  const models = useAvailableModels(viewport, componentId);\n\n  return {\n    buttonProps: {\n      viewport,\n      categories: filteredCategories ?? categories,\n      models: filteredModels ?? models,\n    },\n    onCategoriesFiltered: useCallback((props) => {\n      setFilteredCategories(props.categories);\n      setFilteredModels(props.models);\n    }, []),\n  };\n}\n\n/** @public */\nexport type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonProps) => React.ReactElement | null;\n\n/** @public */\nexport function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  const componentId = useGuid();\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.showAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(`categories-tree-showall`);\n        void showAll({ models: props.models, viewport: props.viewport, categories: props.categories.map((category) => category.categoryId), componentId });\n      }}\n      icon={visibilityShowSvg}\n    />\n  );\n}\n\n/** @public */\nexport function HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(`categories-tree-hideall`);\n        void hideAllCategories(\n          props.categories.map((category) => category.categoryId),\n          props.viewport,\n        );\n        hideAllModels(props.models, props.viewport);\n      }}\n      icon={visibilityHideSvg}\n    />\n  );\n}\n\n/** @public */\nexport function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.invert.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-invert`);\n        void invertAllCategories(props.categories, props.viewport);\n      }}\n      icon={visibilityInvertSvg}\n    />\n  );\n}\n\nconst EMPTY_CATEGORIES_ARRAY: CategoryInfo[] = [];\n\nfunction useCategories(viewport: TreeWidgetViewport, componentId: GuidString) {\n  const categoriesPromise = useMemo(async () => loadCategoriesFromViewport(viewport, componentId), [viewport, componentId]);\n  return useAsyncValue(categoriesPromise) ?? EMPTY_CATEGORIES_ARRAY;\n}\n\nfunction useAvailableModels(viewport: TreeWidgetViewport, componentId: GuidString): Array<ModelId> {\n  const [availableModels, setAvailableModels] = useState<Array<ModelId>>([]);\n  const imodel = viewport.iModel;\n  const viewType = viewport.viewType === \"2d\" ? \"2d\" : \"3d\";\n  useEffect(() => {\n    queryModelsForHeaderActions(imodel, viewType, componentId)\n      .then((models) => {\n        setAvailableModels(models);\n      })\n      .catch(() => {\n        setAvailableModels([]);\n      });\n  }, [imodel, viewType, componentId]);\n\n  return availableModels;\n}\n\nasync function queryModelsForHeaderActions(iModel: IModelConnection, viewType: \"2d\" | \"3d\", componentId: GuidString): Promise<Array<ModelId>> {\n  const { modelClass } = getClassesByView(viewType);\n  const models = new Array<ModelId>();\n  const query = `\n    SELECT\n      m.ECInstanceId id\n    FROM\n      ${modelClass} m\n    WHERE\n      m.IsPrivate = false\n  `;\n  for await (const _row of iModel.createQueryReader(query, undefined, {\n    restartToken: `CategoriesTreeButtons/${componentId}/all-models`,\n    rowFormat: QueryRowFormat.UseECSqlPropertyNames,\n  })) {\n    models.push(_row.id);\n  }\n  return models;\n}\n"]}
+{"version":3,"file":"CategoriesTreeButtons.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.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 { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useAsyncValue } from \"@itwin/components-react\";\nimport { QueryRowFormat } from \"@itwin/core-common\";\nimport { IconButton } from \"@stratakit/bricks\";\nimport visibilityHideSvg from \"@stratakit/icons/visibility-hide.svg\";\nimport visibilityInvertSvg from \"@stratakit/icons/visibility-invert.svg\";\nimport visibilityShowSvg from \"@stratakit/icons/visibility-show.svg\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { hideAllCategories, invertAllCategories } from \"../common/CategoriesVisibilityUtils.js\";\nimport { isBeSqliteInterruptError, useErrorState } from \"../common/internal/UseErrorState.js\";\nimport { useGuid } from \"../common/internal/useGuid.js\";\nimport { getClassesByView } from \"../common/internal/Utils.js\";\nimport { loadCategoriesFromViewport } from \"../common/internal/VisibilityUtils.js\";\nimport { hideAllModels, showAll } from \"../common/Utils.js\";\n\nimport type { GuidString, Id64Array } from \"@itwin/core-bentley\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeToolbarButtonProps } from \"../../tree-header/SelectableTree.js\";\nimport type { CategoryInfo } from \"../common/CategoriesVisibilityUtils.js\";\nimport type { ModelId } from \"../common/internal/Types.js\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\n\n/**\n * Props that get passed to `CategoriesTreeComponent` header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n */\nexport interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps {\n  /** A list of categories available in the iModel */\n  categories: CategoryInfo[];\n  /** A list of models available in the iModel. */\n  models: Id64Array;\n}\n\n/**\n * Custom hook that creates props required to render `CategoriesTreeComponent` header button.\n *\n * Example:\n * ```tsx\n * const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <CategoriesTreeComponent.ShowAllButton {...buttonProps} />,\n *     <CategoriesTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <CategoriesTree {...treeProps} onCategoriesFiltered={onCategoriesFiltered} />\n * </TreeWithHeader>\n * ```\n *\n * @public\n */\nexport function useCategoriesTreeButtonProps({ viewport }: { viewport: TreeWidgetViewport }): {\n  buttonProps: Pick<CategoriesTreeHeaderButtonProps, \"categories\" | \"viewport\" | \"models\">;\n  onCategoriesFiltered: (props: { categories: CategoryInfo[] | undefined; models?: Id64Array }) => void;\n} {\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[] | undefined>();\n  const [filteredModels, setFilteredModels] = useState<Id64Array | undefined>();\n\n  const componentId = useGuid();\n  const categories = useCategories(viewport, componentId);\n  const models = useAvailableModels(viewport, componentId);\n\n  return {\n    buttonProps: {\n      viewport,\n      categories: filteredCategories ?? categories,\n      models: filteredModels ?? models,\n    },\n    onCategoriesFiltered: useCallback((props) => {\n      setFilteredCategories(props.categories);\n      setFilteredModels(props.models);\n    }, []),\n  };\n}\n\n/** @public */\nexport type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonProps) => React.ReactElement | null;\n\n/** @public */\nexport function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  const componentId = useGuid();\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.showAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(`categories-tree-showall`);\n        void showAll({\n          models: props.models,\n          viewport: props.viewport,\n          categories: props.categories.map((category) => category.categoryId),\n          componentId,\n        }).catch(() => {});\n      }}\n      icon={visibilityShowSvg}\n    />\n  );\n}\n\n/** @public */\nexport function HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(`categories-tree-hideall`);\n        void hideAllCategories(\n          props.categories.map((category) => category.categoryId),\n          props.viewport,\n        );\n        hideAllModels(props.models, props.viewport);\n      }}\n      icon={visibilityHideSvg}\n    />\n  );\n}\n\n/** @public */\nexport function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.invert.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-invert`);\n        void invertAllCategories(props.categories, props.viewport);\n      }}\n      icon={visibilityInvertSvg}\n    />\n  );\n}\n\nconst EMPTY_CATEGORIES_ARRAY: CategoryInfo[] = [];\n\nfunction useCategories(viewport: TreeWidgetViewport, componentId: GuidString) {\n  const setErrorState = useErrorState();\n\n  const categoriesPromise = useMemo(async () => {\n    try {\n      return await loadCategoriesFromViewport(viewport, componentId);\n    } catch (error) {\n      setErrorState(error);\n      return [];\n    }\n  }, [viewport, componentId, setErrorState]);\n  return useAsyncValue(categoriesPromise) ?? EMPTY_CATEGORIES_ARRAY;\n}\n\nfunction useAvailableModels(viewport: TreeWidgetViewport, componentId: GuidString): Array<ModelId> {\n  const [availableModels, setAvailableModels] = useState<Array<ModelId>>([]);\n  const setErrorState = useErrorState();\n  const imodel = viewport.iModel;\n  const viewType = viewport.viewType === \"2d\" ? \"2d\" : \"3d\";\n  useEffect(() => {\n    queryModelsForHeaderActions(imodel, viewType, componentId)\n      .then((models) => {\n        setAvailableModels(models);\n      })\n      .catch((error) => {\n        setErrorState(error);\n        setAvailableModels([]);\n      });\n  }, [imodel, viewType, componentId, setErrorState]);\n\n  return availableModels;\n}\n\nasync function queryModelsForHeaderActions(iModel: IModelConnection, viewType: \"2d\" | \"3d\", componentId: GuidString): Promise<Array<ModelId>> {\n  const { modelClass } = getClassesByView(viewType);\n  const models = new Array<ModelId>();\n  try {\n    const query = `\n      SELECT\n        m.ECInstanceId id\n      FROM\n        ${modelClass} m\n      WHERE\n        m.IsPrivate = false\n    `;\n    for await (const _row of iModel.createQueryReader(query, undefined, {\n      restartToken: `CategoriesTreeButtons/${componentId}/all-models`,\n      rowFormat: QueryRowFormat.UseECSqlPropertyNames,\n    })) {\n      models.push(_row.id);\n    }\n    return models;\n  } catch (error) {\n    if (isBeSqliteInterruptError(error)) {\n      return [];\n    }\n    throw error;\n  }\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.d.ts

@@ -2,7 +2,7 @@ import type { TreeWidgetViewport } from "../common/TreeWidgetViewport.js";
 import type { CategoriesTreeProps } from "./CategoriesTree.js";
 import type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from "./CategoriesTreeButtons.js";
 /** @public */
-interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "selectionStorage" | "hierarchyLevelConfig" | "selectionMode" | "filter" | "emptyTreeContent" | "getInlineActions" | "getMenuActions" | "getContextMenuActions" | "getDecorations" | "hierarchyConfig" | "treeLabel"> {
+interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "selectionStorage" | "hierarchyLevelConfig" | "selectionMode" | "searchText" | "emptyTreeContent" | "getInlineActions" | "getMenuActions" | "getContextMenuActions" | "getTreeItemProps" | "hierarchyConfig" | "treeLabel"> {
     /**
      * Renderers of header buttons. Defaults to:
      * ```ts
@@ -24,7 +24,7 @@ interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "select
     onFeatureUsed?: (feature: string) => void;
 }
 /**
- * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.
+ * A component that renders `CategoriesTree` and a header with search capabilities and header buttons.
  * @public
  */
 export declare const CategoriesTreeComponent: {

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.js

@@ -13,7 +13,7 @@ import { TelemetryContextProvider } from "../common/UseTelemetryContext.js";
 import { CategoriesTree } from "./CategoriesTree.js";
 import { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from "./CategoriesTreeButtons.js";
 /**
- * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.
+ * A component that renders `CategoriesTree` and a header with search capabilities and header buttons.
  * @public
  */
 export const CategoriesTreeComponent = (props) => {
@@ -49,7 +49,7 @@ CategoriesTreeComponent.id = "categories-tree-v2";
  * @public
  */
 CategoriesTreeComponent.getLabel = () => TreeWidget.translate("categoriesTree.label");
-function CategoriesTreeComponentImpl({ iModel, viewport, headerButtons, onPerformanceMeasured, onFeatureUsed, filter, treeLabel, ...treeProps }) {
+function CategoriesTreeComponentImpl({ iModel, viewport, headerButtons, onPerformanceMeasured, onFeatureUsed, searchText, treeLabel, ...treeProps }) {
     const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });
     const buttons = headerButtons
         ? headerButtons.map((btn, index) => _jsx(Fragment, { children: btn({ ...buttonProps, onFeatureUsed }) }, index))
@@ -58,6 +58,6 @@ function CategoriesTreeComponentImpl({ iModel, viewport, headerButtons, onPerfor
             _createElement(HideAllButton, { ...buttonProps, key: "hide-all-btn", onFeatureUsed: onFeatureUsed }),
             _createElement(InvertAllButton, { ...buttonProps, key: "invert-all-btn", onFeatureUsed: onFeatureUsed }),
         ];
-    return (_jsx(TelemetryContextProvider, { componentIdentifier: CategoriesTreeComponent.id, onFeatureUsed: onFeatureUsed, onPerformanceMeasured: onPerformanceMeasured, children: _jsx(SelectableTree, { buttons: buttons, children: _jsx(CategoriesTree, { ...treeProps, imodel: iModel, activeView: viewport, filter: filter, treeLabel: treeLabel, onCategoriesFiltered: onCategoriesFiltered }) }) }));
+    return (_jsx(TelemetryContextProvider, { componentIdentifier: CategoriesTreeComponent.id, onFeatureUsed: onFeatureUsed, onPerformanceMeasured: onPerformanceMeasured, children: _jsx(SelectableTree, { buttons: buttons, children: _jsx(CategoriesTree, { ...treeProps, imodel: iModel, activeView: viewport, searchText: searchText, treeLabel: treeLabel, onCategoriesFiltered: onCategoriesFiltered }) }) }));
 }
 //# sourceMappingURL=CategoriesTreeComponent.js.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.tsx"],"names":[],"mappings":";;AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AAChG,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AA6CzH;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,2BAA2B,CAAC,EAAE,kBAAkB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAErF,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,2BAA2B,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACxF,CAAC,CAAC;AAEF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,eAAe,GAAG,eAAiD,CAAC;AAE5F;;;GAGG;AACH,uBAAuB,CAAC,EAAE,GAAG,oBAAoB,CAAC;AAElD;;;GAGG;AACH,uBAAuB,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;AAEtF,SAAS,2BAA2B,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,SAAS,EAC8E;IAC1F,MAAM,EAAE,WAAW,EAAE,oBAAoB,EAAE,GAAG,4BAA4B,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAEzF,MAAM,OAAO,GAAc,aAAa;QACtC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,QAAQ,cAAc,GAAG,CAAC,EAAE,GAAG,WAAW,EAAE,aAAa,EAAE,CAAC,IAA9C,KAAK,CAAqD,CAAC;QAC9G,CAAC,CAAC;YACE,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,eAAe,OAAK,WAAW,EAAE,GAAG,EAAC,gBAAgB,EAAC,aAAa,EAAE,aAAa,GAAI;SACxF,CAAC;IAEN,OAAO,CACL,KAAC,wBAAwB,IAAC,mBAAmB,EAAE,uBAAuB,CAAC,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,qBAAqB,EAAE,qBAAqB,YACnJ,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,YAC9B,KAAC,cAAc,OACT,SAAS,EACb,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,QAAQ,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,oBAAoB,GAC1C,GACa,GACQ,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { Fragment } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { SelectableTree } from \"../../tree-header/SelectableTree.js\";\nimport { useActiveTreeWidgetViewport } from \"../common/internal/UseActiveTreeWidgetViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { CategoriesTree } from \"./CategoriesTree.js\";\nimport { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from \"./CategoriesTreeButtons.js\";\n\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\nimport type { CategoriesTreeProps } from \"./CategoriesTree.js\";\nimport type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from \"./CategoriesTreeButtons.js\";\n\n/** @public */\ninterface CategoriesTreeComponentProps\n  extends Pick<\n    CategoriesTreeProps,\n    | \"selectionStorage\"\n    | \"hierarchyLevelConfig\"\n    | \"selectionMode\"\n    | \"filter\"\n    | \"emptyTreeContent\"\n    | \"getInlineActions\"\n    | \"getMenuActions\"\n    | \"getContextMenuActions\"\n    | \"getDecorations\"\n    | \"hierarchyConfig\"\n    | \"treeLabel\"\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   * Viewport used for visibility controls.\n   *\n   * When viewport is not provided, `IModelApp.viewManager.selectedView` will be used.\n   */\n  viewport?: TreeWidgetViewport;\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.\n * @public\n */\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveTreeWidgetViewport({ treeWidgetViewport: props.viewport });\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 as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders a \"Hide all\" button that disables display of all categories.\n * @public\n */\nCategoriesTreeComponent.HideAllButton = HideAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n */\nCategoriesTreeComponent.InvertAllButton = InvertAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.id = \"categories-tree-v2\";\n\n/**\n * Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categoriesTree.label\");\n\nfunction CategoriesTreeComponentImpl({\n  iModel,\n  viewport,\n  headerButtons,\n  onPerformanceMeasured,\n  onFeatureUsed,\n  filter,\n  treeLabel,\n  ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: TreeWidgetViewport }) {\n  const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n\n  const buttons: ReactNode = headerButtons\n    ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)\n    : [\n        <ShowAllButton {...buttonProps} key=\"show-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <HideAllButton {...buttonProps} key=\"hide-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <InvertAllButton {...buttonProps} key=\"invert-all-btn\" onFeatureUsed={onFeatureUsed} />,\n      ];\n\n  return (\n    <TelemetryContextProvider componentIdentifier={CategoriesTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>\n      <SelectableTree buttons={buttons}>\n        <CategoriesTree\n          {...treeProps}\n          imodel={iModel}\n          activeView={viewport}\n          filter={filter}\n          treeLabel={treeLabel}\n          onCategoriesFiltered={onCategoriesFiltered}\n        />\n      </SelectableTree>\n    </TelemetryContextProvider>\n  );\n}\n"]}
+{"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.tsx"],"names":[],"mappings":";;AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AAChG,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AA6CzH;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,2BAA2B,CAAC,EAAE,kBAAkB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAErF,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,2BAA2B,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACxF,CAAC,CAAC;AAEF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,eAAe,GAAG,eAAiD,CAAC;AAE5F;;;GAGG;AACH,uBAAuB,CAAC,EAAE,GAAG,oBAAoB,CAAC;AAElD;;;GAGG;AACH,uBAAuB,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;AAEtF,SAAS,2BAA2B,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,UAAU,EACV,SAAS,EACT,GAAG,SAAS,EAC8E;IAC1F,MAAM,EAAE,WAAW,EAAE,oBAAoB,EAAE,GAAG,4BAA4B,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAEzF,MAAM,OAAO,GAAc,aAAa;QACtC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,QAAQ,cAAc,GAAG,CAAC,EAAE,GAAG,WAAW,EAAE,aAAa,EAAE,CAAC,IAA9C,KAAK,CAAqD,CAAC;QAC9G,CAAC,CAAC;YACE,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,eAAe,OAAK,WAAW,EAAE,GAAG,EAAC,gBAAgB,EAAC,aAAa,EAAE,aAAa,GAAI;SACxF,CAAC;IAEN,OAAO,CACL,KAAC,wBAAwB,IAAC,mBAAmB,EAAE,uBAAuB,CAAC,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,qBAAqB,EAAE,qBAAqB,YACnJ,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,YAC9B,KAAC,cAAc,OACT,SAAS,EACb,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,oBAAoB,GAC1C,GACa,GACQ,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { Fragment } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { SelectableTree } from \"../../tree-header/SelectableTree.js\";\nimport { useActiveTreeWidgetViewport } from \"../common/internal/UseActiveTreeWidgetViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { CategoriesTree } from \"./CategoriesTree.js\";\nimport { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from \"./CategoriesTreeButtons.js\";\n\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\nimport type { CategoriesTreeProps } from \"./CategoriesTree.js\";\nimport type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from \"./CategoriesTreeButtons.js\";\n\n/** @public */\ninterface CategoriesTreeComponentProps\n  extends Pick<\n    CategoriesTreeProps,\n    | \"selectionStorage\"\n    | \"hierarchyLevelConfig\"\n    | \"selectionMode\"\n    | \"searchText\"\n    | \"emptyTreeContent\"\n    | \"getInlineActions\"\n    | \"getMenuActions\"\n    | \"getContextMenuActions\"\n    | \"getTreeItemProps\"\n    | \"hierarchyConfig\"\n    | \"treeLabel\"\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   * Viewport used for visibility controls.\n   *\n   * When viewport is not provided, `IModelApp.viewManager.selectedView` will be used.\n   */\n  viewport?: TreeWidgetViewport;\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders `CategoriesTree` and a header with search capabilities and header buttons.\n * @public\n */\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveTreeWidgetViewport({ treeWidgetViewport: props.viewport });\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 as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders a \"Hide all\" button that disables display of all categories.\n * @public\n */\nCategoriesTreeComponent.HideAllButton = HideAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n */\nCategoriesTreeComponent.InvertAllButton = InvertAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.id = \"categories-tree-v2\";\n\n/**\n * Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categoriesTree.label\");\n\nfunction CategoriesTreeComponentImpl({\n  iModel,\n  viewport,\n  headerButtons,\n  onPerformanceMeasured,\n  onFeatureUsed,\n  searchText,\n  treeLabel,\n  ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: TreeWidgetViewport }) {\n  const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n\n  const buttons: ReactNode = headerButtons\n    ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)\n    : [\n        <ShowAllButton {...buttonProps} key=\"show-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <HideAllButton {...buttonProps} key=\"hide-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <InvertAllButton {...buttonProps} key=\"invert-all-btn\" onFeatureUsed={onFeatureUsed} />,\n      ];\n\n  return (\n    <TelemetryContextProvider componentIdentifier={CategoriesTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>\n      <SelectableTree buttons={buttons}>\n        <CategoriesTree\n          {...treeProps}\n          imodel={iModel}\n          activeView={viewport}\n          searchText={searchText}\n          treeLabel={treeLabel}\n          onCategoriesFiltered={onCategoriesFiltered}\n        />\n      </SelectableTree>\n    </TelemetryContextProvider>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeDefinition.d.ts

@@ -2,7 +2,7 @@ import { ProcessedHierarchyNode } from "@itwin/presentation-hierarchies";
 import type { GuidString } from "@itwin/core-bentley";
 import type { DefineHierarchyLevelProps, HierarchyDefinition, HierarchyLevelDefinition, LimitingECSqlQueryExecutor } from "@itwin/presentation-hierarchies";
 import type { ECClassHierarchyInspector, ECSchemaProvider } from "@itwin/presentation-shared";
-import type { NormalizedHierarchyFilteringPath } from "../common/Utils.js";
+import type { NormalizedHierarchySearchPath } from "../common/Utils.js";
 import type { CategoriesTreeIdsCache } from "./internal/CategoriesTreeIdsCache.js";
 interface CategoriesTreeDefinitionProps {
     imodelAccess: ECSchemaProvider & ECClassHierarchyInspector & LimitingECSqlQueryExecutor;
@@ -50,7 +50,7 @@ export declare class CategoriesTreeDefinition implements HierarchyDefinition {
     private createSubCategoriesQuery;
     private createCategoryElementsQuery;
     private createElementChildrenQuery;
-    static createInstanceKeyPaths(props: CategoriesTreeInstanceKeyPathsFromInstanceLabelProps): Promise<NormalizedHierarchyFilteringPath[]>;
+    static createInstanceKeyPaths(props: CategoriesTreeInstanceKeyPathsFromInstanceLabelProps): Promise<NormalizedHierarchySearchPath[]>;
 }
 export {};
 //# sourceMappingURL=CategoriesTreeDefinition.d.ts.map