@itwin/tree-widget-react 4.0.0-alpha.10 → 4.0.0-alpha.12

package/CHANGELOG.md

@@ -1,9 +1,33 @@
 # Change Log - @itwin/tree-widget-react
 
-This log was last generated on Thu, 15 May 2025 05:33:32 GMT and should not be manually modified.
+This log was last generated on Fri, 20 Jun 2025 17:05:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.10.1
+
+Fri, 20 Jun 2025 17:05:06 GMT
+
+### Patches
+
+- Update itwinjs-core dependencies to v5.0.0 ([#1349](https://github.com/iTwin/viewer-components-react/pull/1349))
+
+## 3.10.0
+
+Mon, 02 Jun 2025 13:19:21 GMT
+
+### Minor changes
+
+- `useModelsTree`: The `getFilteredPaths` callback prop now has a `filter` prop, which matches the value of `filter` prop passed to `useModelsTree` hook. This make it more convenient for consumers to filter by instance keys and label at the same time. ([#1335](https://github.com/iTwin/viewer-components-react/pull/1335))
+
+## 3.9.0
+
+Mon, 19 May 2025 16:58:21 GMT
+
+### Minor changes
+
+- Add support for iTwin.js v5.0 ([#1326](https://github.com/iTwin/viewer-components-react/pull/1326))
+
 ## 3.8.0
 
 Thu, 15 May 2025 05:33:32 GMT

package/README.md

@@ -69,8 +69,6 @@ UiItemsManager.register({
             getLabel: () => ModelsTreeComponent.getLabel(),
             render: (props) => (
               <ModelsTreeComponent
-                // see "Creating schema context" section for example implementation
-                getSchemaContext={getSchemaContext}
                 // see "Creating unified selection storage" section for example implementation
                 selectionStorage={unifiedSelectionStorage}
               />
@@ -106,8 +104,6 @@ import { ModelsTreeComponent } from "@itwin/tree-widget-react";
 function MyWidget() {
   return (
     <ModelsTreeComponent
-      // see "Creating schema context" section for example implementation
-      getSchemaContext={getSchemaContext}
       // see "Creating unified selection storage" section for example implementation
       selectionStorage={unifiedSelectionStorage}
       headerButtons={[
@@ -148,7 +144,6 @@ import { useCallback } from "react";
 import { TreeWithHeader, useModelsTree, useModelsTreeButtonProps, VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
 import type { SelectionStorage } from "@itwin/unified-selection";
 import type { IModelConnection, Viewport } from "@itwin/core-frontend";
-import type { SchemaContext } from "@itwin/ecschema-metadata";
 import type { ComponentPropsWithoutRef } from "react";
 
 type VisibilityTreeRendererProps = ComponentPropsWithoutRef<typeof VisibilityTreeRenderer>;
@@ -169,11 +164,10 @@ function CustomModelsTreeRenderer(props: CustomModelsTreeRendererProps) {
 interface CustomModelsTreeProps {
   imodel: IModelConnection;
   viewport: Viewport;
-  getSchemaContext: (imodel: IModelConnection) => SchemaContext;
   selectionStorage: SelectionStorage;
 }
 
-function CustomModelsTreeComponent({ imodel, viewport, getSchemaContext, selectionStorage }: CustomModelsTreeProps) {
+function CustomModelsTreeComponent({ imodel, viewport, selectionStorage }: CustomModelsTreeProps) {
   const { buttonProps } = useModelsTreeButtonProps({ imodel, viewport });
   const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport });
 
@@ -186,7 +180,6 @@ function CustomModelsTreeComponent({ imodel, viewport, getSchemaContext, selecti
     >
       <VisibilityTree
         {...modelsTreeProps}
-        getSchemaContext={getSchemaContext}
         selectionStorage={selectionStorage}
         imodel={imodel}
         treeRenderer={(props) => <CustomModelsTreeRenderer {...props} {...rendererProps} />}
@@ -198,42 +191,149 @@ function CustomModelsTreeComponent({ imodel, viewport, getSchemaContext, selecti
 
 #### Displaying a subset of the tree
 
-Models tree allows displaying a subset of all nodes by providing a `getFilteredPaths` function, which receives a `createInstanceKeyPaths` function for creating hierarchy node paths from instance keys or an instance label and returns a list of hierarchy node paths targeting some nodes. When these paths are provided, the displayed hierarchy consists only of the targeted nodes, their ancestors, and their children. Example implementation of `getFilteredPaths`:
-
-```tsx
-type UseModelsTreeProps = Parameters<typeof useModelsTree>[0];
-type GetFilteredPathsType = Exclude<UseModelsTreeProps["getFilteredPaths"], undefined>;
-interface CustomModelsTreeProps {
-  viewport: Viewport;
-  selectionStorage: SelectionStorage;
-  imodel: IModelConnection;
-  targetItems: InstanceKey[];
-}
-
-function CustomModelsTreeComponent({ viewport, selectionStorage, imodel, targetItems }: CustomModelsTreeProps) {
-  const getFilteredPaths = useCallback<GetFilteredPathsType>(
-    async ({ createInstanceKeyPaths }) => {
-      return createInstanceKeyPaths({
-        // list of instance keys representing nodes that should be displayed in the hierarchy
-        targetItems,
-      });
-    },
-    [targetItems],
-  );
-
-  const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths });
-
-  return (
-    <VisibilityTree
-      {...modelsTreeProps}
-      getSchemaContext={getSchemaContext}
-      selectionStorage={selectionStorage}
-      imodel={imodel}
-      treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
-    />
-  );
-}
-```
+Models tree allows displaying a subset of all nodes by providing a `getFilteredPaths` function. This function receives a helper function called `createInstanceKeyPaths`, which can generate paths from either:
+
+- a list of instance keys (`targetItems`)
+- a label string
+
+Based on the returned paths, the displayed hierarchy consists only of the targeted nodes, their ancestors, and their children.
+
+Use `getFilteredPaths` when you need more control over which nodes are shown. Here are some example use cases:
+
+- **Filter by known instance keys**: You already have a list of `InstanceKey` items that should remain in the tree. Pass them as `targetItems` to `createInstanceKeyPaths`.
+  <!-- [[include: [TreeWidget.GetFilteredPathsComponentWithTargetItemsExample], tsx]] -->
+  <!-- BEGIN EXTRACTION -->
+
+  ```tsx
+  type UseModelsTreeProps = Parameters<typeof useModelsTree>[0];
+  type GetFilteredPathsType = Exclude<UseModelsTreeProps["getFilteredPaths"], undefined>;
+
+  function CustomModelsTreeComponentWithTargetItems({
+    viewport,
+    selectionStorage,
+    imodel,
+    targetItems,
+  }: {
+    viewport: Viewport;
+    selectionStorage: SelectionStorage;
+    imodel: IModelConnection;
+    targetItems: InstanceKey[];
+  }) {
+    const getFilteredPaths = useCallback<GetFilteredPathsType>(
+      async ({ createInstanceKeyPaths }) => {
+        return createInstanceKeyPaths({
+          // list of instance keys representing nodes that should be displayed in the hierarchy
+          targetItems,
+        });
+      },
+      [targetItems],
+    );
+
+    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths });
+
+    return (
+      <VisibilityTree
+        {...modelsTreeProps}
+        getSchemaContext={getSchemaContext}
+        selectionStorage={selectionStorage}
+        imodel={imodel}
+        treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+      />
+    );
+  }
+  ```
+
+  <!-- END EXTRACTION -->
+
+- **Post-process the paths created `createInstanceKeyPaths`**: Use `filter` string to generate the paths, then apply additional filtering - e.g., remove paths that are too long.
+  <!-- [[include: [TreeWidget.GetFilteredPathsComponentWithPostProcessingExample], tsx]] -->
+  <!-- BEGIN EXTRACTION -->
+
+  ```tsx
+  function CustomModelsTreeComponentWithPostProcessing({
+    viewport,
+    selectionStorage,
+    imodel,
+  }: {
+    viewport: Viewport;
+    selectionStorage: SelectionStorage;
+    imodel: IModelConnection;
+  }) {
+    const getFilteredPaths = useCallback<GetFilteredPathsType>(async ({ createInstanceKeyPaths, filter }) => {
+      const defaultPaths = await createInstanceKeyPaths({ label: filter ?? "test" });
+      const result = new Array<HierarchyFilteringPath>();
+      for (const path of defaultPaths) {
+        const normalizedPath = HierarchyFilteringPath.normalize(path);
+        if (normalizedPath.path.length < 5) {
+          normalizedPath.options = { autoExpand: true };
+          result.push(normalizedPath);
+        }
+      }
+      return result;
+    }, []);
+
+    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths });
+
+    return (
+      <VisibilityTree
+        {...modelsTreeProps}
+        getSchemaContext={getSchemaContext}
+        selectionStorage={selectionStorage}
+        imodel={imodel}
+        treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+      />
+    );
+  }
+  ```
+
+  <!-- END EXTRACTION -->
+
+- **Apply custom logic to generate instance keys**: Generate instance keys using custom implementation. For example: query elements that have specified filter in their user label and provide them as targetItems.
+    <!-- [[include: [TreeWidget.GetFilteredPathsComponentWithFilterAndTargetItemsExample], tsx]] -->
+    <!-- BEGIN EXTRACTION -->
+  ```tsx
+  function CustomModelsTreeComponentWithFilterAndTargetItems({
+    viewport,
+    selectionStorage,
+    imodel,
+  }: {
+    viewport: Viewport;
+    selectionStorage: SelectionStorage;
+    imodel: IModelConnection;
+  }) {
+    const getFilteredPaths = useCallback<GetFilteredPathsType>(
+      async ({ createInstanceKeyPaths, filter }) => {
+        const targetItems = new Array<InstanceKey>();
+        for await (const row of imodel.createQueryReader(
+          `
+            SELECT ec_classname(e.ECClassId, 's.c') className, e.ECInstanceId id
+            FROM BisCore.Element e
+            WHERE UserLabel LIKE '%${filter ?? ""}%'
+          `,
+          undefined,
+          { rowFormat: QueryRowFormat.UseJsPropertyNames },
+        )) {
+          targetItems.push({ id: row.id, className: row.className });
+        }
+        return createInstanceKeyPaths({ targetItems });
+      },
+      [imodel],
+    );
+
+    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths, filter: "test" });
+
+    return (
+      <VisibilityTree
+        {...modelsTreeProps}
+        getSchemaContext={getSchemaContext}
+        selectionStorage={selectionStorage}
+        imodel={imodel}
+        treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
+      />
+    );
+  }
+  ```
+    <!-- END EXTRACTION -->
 
 ### Categories tree
 
@@ -249,8 +349,6 @@ import { CategoriesTreeComponent } from "@itwin/tree-widget-react";
 function MyWidget() {
   return (
     <CategoriesTreeComponent
-      // see "Creating schema context" section for example implementation
-      getSchemaContext={getSchemaContext}
       // see "Creating unified selection storage" section for example implementation
       selectionStorage={unifiedSelectionStorage}
       headerButtons={[(props) => <CategoriesTreeComponent.ShowAllButton {...props} />, (props) => <CategoriesTreeComponent.HideAllButton {...props} />]}
@@ -278,7 +376,6 @@ Example:
 import { TreeWithHeader, useCategoriesTree, useCategoriesTreeButtonProps, VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
 import type { IModelConnection, Viewport } from "@itwin/core-frontend";
 import type { SelectionStorage } from "@itwin/unified-selection";
-import type { SchemaContext } from "@itwin/ecschema-metadata";
 import type { ComponentPropsWithoutRef } from "react";
 
 type VisibilityTreeRendererProps = ComponentPropsWithoutRef<typeof VisibilityTreeRenderer>;
@@ -302,11 +399,10 @@ function CustomCategoriesTreeRenderer(props: CustomCategoriesTreeRendererProps)
 interface CustomCategoriesTreeProps {
   imodel: IModelConnection;
   viewport: Viewport;
-  getSchemaContext: (imodel: IModelConnection) => SchemaContext;
   selectionStorage: SelectionStorage;
 }
 
-function CustomCategoriesTreeComponent({ imodel, viewport, getSchemaContext, selectionStorage }: CustomCategoriesTreeProps) {
+function CustomCategoriesTreeComponent({ imodel, viewport, selectionStorage }: CustomCategoriesTreeProps) {
   const { buttonProps } = useCategoriesTreeButtonProps({ viewport });
   const { categoriesTreeProps, rendererProps } = useCategoriesTree({ activeView: viewport, filter: "" });
   return (
@@ -318,7 +414,6 @@ function CustomCategoriesTreeComponent({ imodel, viewport, getSchemaContext, sel
     >
       <VisibilityTree
         {...categoriesTreeProps}
-        getSchemaContext={getSchemaContext}
         selectionStorage={selectionStorage}
         imodel={imodel}
         treeRenderer={(props) => <CustomCategoriesTreeRenderer {...props} {...rendererProps} />}
@@ -349,8 +444,6 @@ import { IModelContentTreeComponent } from "@itwin/tree-widget-react";
 function MyWidget() {
   return (
     <IModelContentTreeComponent
-      // see "Creating schema context" section for example implementation
-      getSchemaContext={getSchemaContext}
       // see "Creating unified selection storage" section for example implementation
       selectionStorage={unifiedSelectionStorage}
     />
@@ -421,7 +514,6 @@ function MyTree({ imodel }: MyTreeProps) {
       treeName="MyTree"
       imodel={imodel}
       selectionStorage={unifiedSelectionStorage}
-      getSchemaContext={getSchemaContext}
       getHierarchyDefinition={getHierarchyDefinition}
       treeRenderer={(props) => <TreeRenderer {...props} />}
     />
@@ -506,7 +598,6 @@ function MyVisibilityTree({ imodel }: MyVisibilityTreeProps) {
       treeName="MyVisibilityTree"
       imodel={imodel}
       selectionStorage={unifiedSelectionStorage}
-      getSchemaContext={getSchemaContext}
       getHierarchyDefinition={getHierarchyDefinition}
       visibilityHandlerFactory={visibilityHandlerFactory}
       treeRenderer={(props) => <VisibilityTreeRenderer {...props} />}
@@ -560,34 +651,6 @@ import { Presentation } from "@itwin/presentation-frontend";
 await Presentation.initialize({ selection: { selectionStorage: getUnifiedSelectionStorage() } });
 ```
 
-### Creating schema context
-
-All tree components delivered with the package require a [`SchemaContext`](https://www.itwinjs.org/reference/ecschema-metadata/context/schemacontext/) to be able to access iModels metadata.
-
-Typically, we want one schema context per iModel per application - this allows schema information to be shared across components, saving memory and time required to access the metadata. Below is an example implementation of `getSchemaContext` function, required by tree components:
-
-```tsx
-import { SchemaContext } from "@itwin/ecschema-metadata";
-import { ECSchemaRpcLocater } from "@itwin/ecschema-rpcinterface-common";
-import type { IModelConnection } from "@itwin/core-frontend";
-
-const schemaContextCache = new Map<string, SchemaContext>();
-function getSchemaContext(imodel: IModelConnection) {
-  const key = imodel.getRpcProps().key;
-  let schemaContext = schemaContextCache.get(key);
-  if (!schemaContext) {
-    const schemaLocater = new ECSchemaRpcLocater(imodel.getRpcProps());
-    schemaContext = new SchemaContext();
-    schemaContext.addLocater(schemaLocater);
-    schemaContextCache.set(key, schemaContext);
-    imodel.onClose.addOnce(() => schemaContextCache.delete(key));
-  }
-  return schemaContext;
-}
-```
-
-Note: Using `ECSchemaRpcLocater` requires the application to support [ECSchemaRpcInterface](https://github.com/iTwin/itwinjs-core/blob/111ab9053f4718896de17bdaeb8de037bad281bd/core/ecschema-rpc/common/src/ECSchemaRpcInterface.ts#L14). This means [registering the interface](https://www.itwinjs.org/learning/rpcinterface/#configure-interfaces) and, on the backend, [registering the implementation](https://www.itwinjs.org/learning/rpcinterface/#server-side-configuration) by calling [ECSchemaRpcImpl.register()](https://github.com/iTwin/itwinjs-core/blob/111ab9053f4718896de17bdaeb8de037bad281bd/core/ecschema-rpc/impl/src/ECSchemaRpcImpl.ts#L29).
-
 ## Telemetry
 
 ### Performance tracking
@@ -645,7 +708,6 @@ function MyWidget() {
       onFeatureUsed={(feature) => {
         console.log(`TreeWidget [${feature}] used`);
       }}
-      getSchemaContext={getSchemaContext}
       selectionStorage={unifiedSelectionStorage}
     />
   );
@@ -679,7 +741,6 @@ function MyTree() {
     // VisibilityTree will use provided telemetry context to report used features and their performance
     <VisibilityTree
       {...categoriesTreeProps}
-      getSchemaContext={getSchemaContext}
       selectionStorage={unifiedSelectionStorage}
       imodel={imodel}
       treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}

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

@@ -2,11 +2,11 @@ import type { VisibilityTreeRendererProps } from "../common/components/Visibilit
 import type { UseCategoriesTreeProps } from "./UseCategoriesTree.js";
 import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
 /** @beta */
-export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "getActions" | "getDecorations"> & UseCategoriesTreeProps & {
+export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "getActions" | "getDecorations"> & UseCategoriesTreeProps & {
     hierarchyLevelConfig?: {
         sizeLimit?: number;
     };
 };
 /** @beta */
-export declare function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getActions, hierarchyConfig, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoriesTree({ imodel, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getActions, hierarchyConfig, }: 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,7 +7,7 @@ import { VisibilityTree } from "../common/components/VisibilityTree.js";
 import { VisibilityTreeRenderer } from "../common/components/VisibilityTreeRenderer.js";
 import { useCategoriesTree } from "./UseCategoriesTree.js";
 /** @beta */
-export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getActions, hierarchyConfig, }) {
+export function CategoriesTree({ imodel, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getActions, hierarchyConfig, }) {
     const { categoriesTreeProps, rendererProps } = useCategoriesTree({
         filter,
         activeView,
@@ -15,6 +15,6 @@ export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, act
         emptyTreeContent,
         hierarchyConfig,
     });
-    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (_jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps, getActions: getActions, getDecorations: getDecorations ?? rendererProps.getDecorations })) }));
+    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (_jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps, getActions: getActions, getDecorations: getDecorations ?? rendererProps.getDecorations })) }));
 }
 //# 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,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,eAAe,GACK;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,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,OAAK,SAAS,KAAM,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,IAAI,aAAa,CAAC,cAAc,GAAI,CACrJ,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 { VisibilityTreeRendererProps } from \"../common/components/VisibilityTreeRenderer.js\";\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" | \"getSchemaContext\" | \"selectionStorage\" | \"selectionMode\" | \"emptyTreeContent\"> &\n  Pick<VisibilityTreeRendererProps, \"getActions\" | \"getDecorations\"> &\n  UseCategoriesTreeProps & {\n    hierarchyLevelConfig?: {\n      sizeLimit?: number;\n    };\n  };\n\n/** @beta */\nexport function CategoriesTree({\n  imodel,\n  getSchemaContext,\n  selectionStorage,\n  activeView,\n  filter,\n  hierarchyLevelConfig,\n  selectionMode,\n  onCategoriesFiltered,\n  emptyTreeContent,\n  getDecorations,\n  getActions,\n  hierarchyConfig,\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      getSchemaContext={getSchemaContext}\n      hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n      selectionMode={selectionMode ?? \"none\"}\n      treeRenderer={(treeProps) => (\n        <VisibilityTreeRenderer {...treeProps} {...rendererProps} getActions={getActions} getDecorations={getDecorations ?? rendererProps.getDecorations} />\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;AAe3D,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,eAAe,GACK;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,OAAK,SAAS,KAAM,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,IAAI,aAAa,CAAC,cAAc,GAAI,CACrJ,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 { VisibilityTreeRendererProps } from \"../common/components/VisibilityTreeRenderer.js\";\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" | \"selectionStorage\" | \"selectionMode\" | \"emptyTreeContent\"> &\n  Pick<VisibilityTreeRendererProps, \"getActions\" | \"getDecorations\"> &\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  selectionMode,\n  onCategoriesFiltered,\n  emptyTreeContent,\n  getDecorations,\n  getActions,\n  hierarchyConfig,\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 {...treeProps} {...rendererProps} getActions={getActions} getDecorations={getDecorations ?? rendererProps.getDecorations} />\n      )}\n    />\n  );\n}\n"]}

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

@@ -1,7 +1,7 @@
 import type { CategoriesTreeProps } from "./CategoriesTree.js";
 import type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from "./CategoriesTreeButtons.js";
 /** @public */
-interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "getSchemaContext" | "selectionStorage" | "hierarchyLevelConfig" | "selectionMode" | "filter" | "emptyTreeContent" | "getActions" | "getDecorations" | "hierarchyConfig"> {
+interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "selectionStorage" | "hierarchyLevelConfig" | "selectionMode" | "filter" | "emptyTreeContent" | "getActions" | "getDecorations" | "hierarchyConfig"> {
     /**
      * 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,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,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;AAoCzH;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IAErC,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,GAAG,SAAS,EAC0E;IACtF,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,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,oBAAoB,EAAE,oBAAoB,GAAI,GACpH,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 { useActiveViewport } from \"../common/internal/UseActiveViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { CategoriesTree } from \"./CategoriesTree.js\";\nimport { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from \"./CategoriesTreeButtons.js\";\n\nimport type { CategoriesTreeProps } from \"./CategoriesTree.js\";\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from \"./CategoriesTreeButtons.js\";\n\n/** @public */\ninterface CategoriesTreeComponentProps\n  extends Pick<\n    CategoriesTreeProps,\n    | \"getSchemaContext\"\n    | \"selectionStorage\"\n    | \"hierarchyLevelConfig\"\n    | \"selectionMode\"\n    | \"filter\"\n    | \"emptyTreeContent\"\n    | \"getActions\"\n    | \"getDecorations\"\n    | \"hierarchyConfig\"\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  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 = useActiveViewport();\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n */\nCategoriesTreeComponent.ShowAllButton = ShowAllButton 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  ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\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 {...treeProps} imodel={iModel} activeView={viewport} filter={filter} onCategoriesFiltered={onCategoriesFiltered} />\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,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,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;AA4BzH;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IAErC,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,GAAG,SAAS,EAC0E;IACtF,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,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,oBAAoB,EAAE,oBAAoB,GAAI,GACpH,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 { useActiveViewport } from \"../common/internal/UseActiveViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { CategoriesTree } from \"./CategoriesTree.js\";\nimport { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from \"./CategoriesTreeButtons.js\";\n\nimport type { CategoriesTreeProps } from \"./CategoriesTree.js\";\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from \"./CategoriesTreeButtons.js\";\n\n/** @public */\ninterface CategoriesTreeComponentProps\n  extends Pick<\n    CategoriesTreeProps,\n    \"selectionStorage\" | \"hierarchyLevelConfig\" | \"selectionMode\" | \"filter\" | \"emptyTreeContent\" | \"getActions\" | \"getDecorations\" | \"hierarchyConfig\"\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  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 = useActiveViewport();\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n */\nCategoriesTreeComponent.ShowAllButton = ShowAllButton 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  ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\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 {...treeProps} imodel={iModel} activeView={viewport} filter={filter} onCategoriesFiltered={onCategoriesFiltered} />\n      </SelectableTree>\n    </TelemetryContextProvider>\n  );\n}\n"]}

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

@@ -6,7 +6,7 @@ import { bufferCount, defer, firstValueFrom, from, lastValueFrom, map, merge, me
 import { assert } from "@itwin/core-bentley";
 import { createNodesQueryClauseFactory, createPredicateBasedHierarchyDefinition, ProcessedHierarchyNode } from "@itwin/presentation-hierarchies";
 import { createBisInstanceLabelSelectClauseFactory, ECSql } from "@itwin/presentation-shared";
-import { DEFINITION_CONTAINER_CLASS_NAME, INFORMATION_PARTITION_ELEMENT_CLASS_NAME, MODEL_CLASS_NAME, SUB_CATEGORY_CLASS_NAME, SUB_MODELED_ELEMENT_CLASS_NAME, } from "../common/internal/ClassNameDefinitions.js";
+import { CLASS_NAME_DefinitionContainer, CLASS_NAME_InformationPartitionElement, CLASS_NAME_ISubModeledElement, CLASS_NAME_Model, CLASS_NAME_SubCategory, } from "../common/internal/ClassNameDefinitions.js";
 import { createIdsSelector, getClassesByView, getDistinctMapValues, parseIdsSelectorResult, releaseMainThreadOnItemsCount } from "../common/internal/Utils.js";
 import { FilterLimitExceededError } from "../common/TreeErrors.js";
 const MAX_FILTERING_INSTANCE_KEY_COUNT = 100;
@@ -85,7 +85,7 @@ export class CategoriesTreeDefinition {
                                     definitions: async (requestProps) => this.createElementChildrenQuery(requestProps),
                                 },
                                 {
-                                    parentInstancesNodePredicate: SUB_MODELED_ELEMENT_CLASS_NAME,
+                                    parentInstancesNodePredicate: CLASS_NAME_ISubModeledElement,
                                     definitions: async (requestProps) => this.createISubModeledElementChildrenQuery(requestProps),
                                 },
                                 {
@@ -105,7 +105,7 @@ export class CategoriesTreeDefinition {
                         ...(isDefinitionContainerSupported
                             ? [
                                 {
-                                    parentInstancesNodePredicate: DEFINITION_CONTAINER_CLASS_NAME,
+                                    parentInstancesNodePredicate: CLASS_NAME_DefinitionContainer,
                                     definitions: async (requestProps) => this.createDefinitionContainersAndCategoriesQuery(requestProps),
                                 },
                             ]
@@ -213,11 +213,11 @@ export class CategoriesTreeDefinition {
     async createDefinitionContainersQuery({ definitionContainerIds, instanceFilter, }) {
         const instanceFilterClauses = await this._selectQueryFactory.createFilterClauses({
             filter: instanceFilter,
-            contentClass: { fullName: DEFINITION_CONTAINER_CLASS_NAME, alias: "this" },
+            contentClass: { fullName: CLASS_NAME_DefinitionContainer, alias: "this" },
         });
         return [
             {
-                fullClassName: DEFINITION_CONTAINER_CLASS_NAME,
+                fullClassName: CLASS_NAME_DefinitionContainer,
                 query: {
                     ecsql: `
             SELECT
@@ -227,7 +227,7 @@ export class CategoriesTreeDefinition {
                         nodeLabel: {
                             selector: await this._nodeLabelSelectClauseFactory.createSelectClause({
                                 classAlias: "this",
-                                className: DEFINITION_CONTAINER_CLASS_NAME,
+                                className: CLASS_NAME_DefinitionContainer,
                             }),
                         },
                         extendedData: {
@@ -323,11 +323,11 @@ export class CategoriesTreeDefinition {
     async createSubCategoriesQuery({ parentNodeInstanceIds: categoryIds, instanceFilter, }) {
         const instanceFilterClauses = await this._selectQueryFactory.createFilterClauses({
             filter: instanceFilter,
-            contentClass: { fullName: SUB_CATEGORY_CLASS_NAME, alias: "this" },
+            contentClass: { fullName: CLASS_NAME_SubCategory, alias: "this" },
         });
         return [
             {
-                fullClassName: SUB_CATEGORY_CLASS_NAME,
+                fullClassName: CLASS_NAME_SubCategory,
                 query: {
                     ecsql: `
             SELECT
@@ -337,7 +337,7 @@ export class CategoriesTreeDefinition {
                         nodeLabel: {
                             selector: await this._nodeLabelSelectClauseFactory.createSelectClause({
                                 classAlias: "this",
-                                className: SUB_CATEGORY_CLASS_NAME,
+                                className: CLASS_NAME_SubCategory,
                             }),
                         },
                         extendedData: {
@@ -412,7 +412,7 @@ export class CategoriesTreeDefinition {
                         supportsFiltering: true,
                     })}
           FROM ${instanceFilterClauses.from} this
-          ${parentNode.extendedData?.isCategoryOfSubModel ? "" : `JOIN ${INFORMATION_PARTITION_ELEMENT_CLASS_NAME} ipe ON ipe.ECInstanceId = this.Model.Id`}
+          ${parentNode.extendedData?.isCategoryOfSubModel ? "" : `JOIN ${CLASS_NAME_InformationPartitionElement} ipe ON ipe.ECInstanceId = this.Model.Id`}
           ${instanceFilterClauses.joins}
           WHERE
             this.Category.Id IN (${categoryIds.join(",")})
@@ -449,7 +449,7 @@ export class CategoriesTreeDefinition {
                     IFNULL((
                       SELECT 1
                       FROM ${this._categoryElementClass} ce
-                      JOIN ${MODEL_CLASS_NAME} m ON ce.Model.Id = m.ECInstanceId
+                      JOIN ${CLASS_NAME_Model} m ON ce.Model.Id = m.ECInstanceId
                       WHERE ce.Parent.Id = this.ECInstanceId OR (ce.Model.Id = this.ECInstanceId AND m.IsPrivate = false)
                       LIMIT 1
                     ), 0)
@@ -492,7 +492,7 @@ async function createInstanceKeyPathsFromInstanceLabel(props) {
     const ELEMENTS_WITH_LABELS_CTE = "ElementsWithLabels";
     const SUBCATEGORIES_WITH_LABELS_CTE = "SubCategoriesWithLabels";
     const DEFINITION_CONTAINERS_WITH_LABELS_CTE = "DefinitionContainersWithLabels";
-    const [categoryLabelSelectClause, subCategoryLabelSelectClause, elementLabelSelectClause, definitionContainerLabelSelectClause] = await Promise.all([categoryClass, SUB_CATEGORY_CLASS_NAME, elementClass, ...(definitionContainers.length > 0 ? [DEFINITION_CONTAINER_CLASS_NAME] : [])].map(async (className) => props.labelsFactory.createSelectClause({ classAlias: "this", className })));
+    const [categoryLabelSelectClause, subCategoryLabelSelectClause, elementLabelSelectClause, definitionContainerLabelSelectClause] = await Promise.all([categoryClass, CLASS_NAME_SubCategory, elementClass, ...(definitionContainers.length > 0 ? [CLASS_NAME_DefinitionContainer] : [])].map(async (className) => props.labelsFactory.createSelectClause({ classAlias: "this", className })));
     return lastValueFrom(defer(() => {
         const ctes = [
             `${CATEGORIES_WITH_LABELS_CTE}(ClassName, ECInstanceId, ChildCount, DisplayLabel) AS (
@@ -503,7 +503,7 @@ async function createInstanceKeyPathsFromInstanceLabel(props) {
               ${categoryLabelSelectClause}
             FROM
               ${categoryClass} this
-              JOIN ${SUB_CATEGORY_CLASS_NAME} sc ON sc.Parent.Id = this.ECInstanceId
+              JOIN ${CLASS_NAME_SubCategory} sc ON sc.Parent.Id = this.ECInstanceId
             WHERE
               this.ECInstanceId IN (${categories.join(", ")})
               GROUP BY this.ECInstanceId
@@ -518,7 +518,7 @@ async function createInstanceKeyPathsFromInstanceLabel(props) {
                     ${elementLabelSelectClause}
                   FROM
                     ${elementClass} this
-                    JOIN ${MODEL_CLASS_NAME} m ON this.Model.Id = m.ECInstanceId
+                    JOIN ${CLASS_NAME_Model} m ON this.Model.Id = m.ECInstanceId
                   WHERE
                     NOT m.IsPrivate
                     AND this.Category.Id IN (${categories.join(", ")})
@@ -535,7 +535,7 @@ async function createInstanceKeyPathsFromInstanceLabel(props) {
                   this.Parent.Id,
                   ${subCategoryLabelSelectClause}
                 FROM
-                  ${SUB_CATEGORY_CLASS_NAME} this
+                  ${CLASS_NAME_SubCategory} this
                 WHERE
                   NOT this.IsPrivate
                   AND this.Parent.Id IN (${categories.join(", ")})
@@ -549,7 +549,7 @@ async function createInstanceKeyPathsFromInstanceLabel(props) {
                   this.ECInstanceId,
                   ${definitionContainerLabelSelectClause}
                 FROM
-                  ${DEFINITION_CONTAINER_CLASS_NAME} this
+                  ${CLASS_NAME_DefinitionContainer} this
                 WHERE
                   this.ECInstanceId IN (${definitionContainers.join(", ")})
               )`,
@@ -620,13 +620,13 @@ async function createInstanceKeyPathsFromInstanceLabel(props) {
                 className = categoryClass;
                 break;
             case "sc":
-                className = SUB_CATEGORY_CLASS_NAME;
+                className = CLASS_NAME_SubCategory;
                 break;
             case "e":
                 className = elementClass;
                 break;
             default:
-                className = DEFINITION_CONTAINER_CLASS_NAME;
+                className = CLASS_NAME_DefinitionContainer;
                 break;
         }
         return {
@@ -645,11 +645,11 @@ function createInstanceKeyPathsFromTargetItems({ targetItems, imodelAccess, view
             acc.categoryIds.push(id);
             return acc;
         }
-        if (className === DEFINITION_CONTAINER_CLASS_NAME) {
+        if (className === CLASS_NAME_DefinitionContainer) {
             acc.definitionContainerIds.push(id);
             return acc;
         }
-        if (className === SUB_CATEGORY_CLASS_NAME) {
+        if (className === CLASS_NAME_SubCategory) {
             if (hierarchyConfig.hideSubCategories) {
                 return acc;
             }