@itwin/tree-widget-react 4.0.0-alpha.23 → 4.0.0-alpha.25

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/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, searchText, 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, searchText, hierarchyLevelConfig, hierarchyConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getInlineActions, getMenuActions, getContextMenuActions, treeLabel, }) {
-    const { categoriesTreeProps, rendererProps } = useCategoriesTree({
+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,UAAU,EACV,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,UAAU;QACV,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  searchText,\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    searchText,\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" | "searchText" | "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

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,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    | \"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 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"]}
+{"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

@@ -1,6 +1,6 @@
 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 { DefineHierarchyLevelProps, HierarchyDefinition, HierarchyLevelDefinition, LimitingECSqlQueryExecutor, NodePreProcessor } from "@itwin/presentation-hierarchies";
 import type { ECClassHierarchyInspector, ECSchemaProvider } from "@itwin/presentation-shared";
 import type { NormalizedHierarchySearchPath } from "../common/Utils.js";
 import type { CategoriesTreeIdsCache } from "./internal/CategoriesTreeIdsCache.js";
@@ -38,6 +38,7 @@ export declare const defaultHierarchyConfiguration: CategoriesTreeHierarchyConfi
 export declare class CategoriesTreeDefinition implements HierarchyDefinition {
     #private;
     constructor(props: CategoriesTreeDefinitionProps);
+    preProcessNode: NodePreProcessor;
     postProcessNode(node: ProcessedHierarchyNode): Promise<ProcessedHierarchyNode>;
     private getHierarchyDefinition;
     defineHierarchyLevel(props: DefineHierarchyLevelProps): Promise<HierarchyLevelDefinition>;

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

@@ -7,6 +7,7 @@ import { assert, Guid } from "@itwin/core-bentley";
 import { createNodesQueryClauseFactory, createPredicateBasedHierarchyDefinition, ProcessedHierarchyNode } from "@itwin/presentation-hierarchies";
 import { createBisInstanceLabelSelectClauseFactory, ECSql } from "@itwin/presentation-shared";
 import { CLASS_NAME_DefinitionContainer, CLASS_NAME_InformationPartitionElement, CLASS_NAME_ISubModeledElement, CLASS_NAME_Model, CLASS_NAME_SubCategory, } from "../common/internal/ClassNameDefinitions.js";
+import { catchBeSQLiteInterrupts } from "../common/internal/UseErrorState.js";
 import { createIdsSelector, fromWithRelease, getClassesByView, getOptimalBatchSize, groupingNodeHasSearchTargets, parseIdsSelectorResult, releaseMainThreadOnItemsCount, } from "../common/internal/Utils.js";
 import { SearchLimitExceededError } from "../common/TreeErrors.js";
 const MAX_SEARCH_INSTANCE_KEY_COUNT = 100;
@@ -42,6 +43,18 @@ export class CategoriesTreeDefinition {
         this.#categoryElementClass = elementClass;
         this.#categoryModelClass = modelClass;
     }
+    preProcessNode = async (node) => {
+        if (node.extendedData?.isCategory) {
+            return {
+                ...node,
+                extendedData: {
+                    ...node.extendedData,
+                    modelIds: parseIdsSelectorResult(node.extendedData.modelIds),
+                },
+            };
+        }
+        return node;
+    };
     async postProcessNode(node) {
         if (ProcessedHierarchyNode.isGroupingNode(node)) {
             const modelElementsMap = new Map();
@@ -634,7 +647,7 @@ async function createInstanceKeyPathsFromInstanceLabel(props) {
         if (!queryProps) {
             return EMPTY;
         }
-        return imodelAccess.createQueryReader(queryProps, { restartToken: `${componentName}/${componentId}/filter-by-label`, limit });
+        return from(imodelAccess.createQueryReader(queryProps, { restartToken: `${componentName}/${componentId}/filter-by-label`, limit })).pipe(catchBeSQLiteInterrupts);
     }), releaseMainThreadOnItemsCount(1000), map((row) => {
         let className;
         switch (row.ClassName) {
@@ -747,7 +760,7 @@ function createGeometricElementInstanceKeyPaths(props) {
       WHERE mce.ParentId IS NULL
     `;
         return imodelAccess.createQueryReader({ ctes, ecsql }, { rowFormat: "Indexes", limit: "unbounded", restartToken: `${componentName}/${componentId}/element-paths/${chunkIndex}` });
-    }).pipe(releaseMainThreadOnItemsCount(300), map((row) => parseQueryRow(row, separator, elementClass, categoryClass, modelClass)), mergeMap((elementHierarchyPath) => forkJoin({ elementHierarchyPath: of(elementHierarchyPath), pathToCategory: idsCache.getInstanceKeyPaths({ categoryId: elementHierarchyPath[0].id }) })), map(({ elementHierarchyPath, pathToCategory }) => {
+    }).pipe(catchBeSQLiteInterrupts, releaseMainThreadOnItemsCount(300), map((row) => parseQueryRow(row, separator, elementClass, categoryClass, modelClass)), mergeMap((elementHierarchyPath) => forkJoin({ elementHierarchyPath: of(elementHierarchyPath), pathToCategory: idsCache.getInstanceKeyPaths({ categoryId: elementHierarchyPath[0].id }) })), map(({ elementHierarchyPath, pathToCategory }) => {
         pathToCategory.pop(); // category is already included in the element hierarchy path
         const path = [...pathToCategory, ...elementHierarchyPath];
         return { path, options: { reveal: true } };