@itwin/tree-widget-react 4.0.0-alpha.1 → 4.0.0-alpha.11

package/CHANGELOG.md

@@ -1,9 +1,92 @@
 # Change Log - @itwin/tree-widget-react
 
-This log was last generated on Mon, 27 Jan 2025 18:30:40 GMT and should not be manually modified.
+This log was last generated on Thu, 15 May 2025 05:33:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.8.0
+
+Thu, 15 May 2025 05:33:32 GMT
+
+### Minor changes
+
+- Fixed merged (categories and models) nodes visibility. Changed `@beta` APIs in a **breaking** way: `ModelsTreeVisibilityHandlerOverrides.getModelDisplayStatus` and `ModelsTreeVisibilityHandlerOverrides.getCategoryDisplayStatus` - `id` and `categoryId` props are now of `Id64Arg` type instead of `Id64String`. Use `Id64` from `@itwin/core-bentley` to access individual IDs. ([#1311](https://github.com/iTwin/viewer-components-react/pull/1311))
+
+### Patches
+
+- update presentation deps to versions that properly support core @ 5.0-rc ([#1304](https://github.com/iTwin/viewer-components-react/pull/1304))
+
+## 3.7.0
+
+Mon, 28 Apr 2025 16:18:43 GMT
+
+### Minor changes
+
+- Added ability to disabled hierarchy level filtering in `ModelsTree`. ([#1297](https://github.com/iTwin/viewer-components-react/pull/1297))
+
+## 3.6.1
+
+Fri, 18 Apr 2025 17:06:22 GMT
+
+### Patches
+
+- Fixed Categories tree not reacting to Category display changes from Models tree, when they're made on per-model category overrides. ([#1284](https://github.com/iTwin/viewer-components-react/pull/1284))
+- Fixed `ModelsTree` and `CategoriesTree` not applying custom hierarchy level size limit. ([#1292](https://github.com/iTwin/viewer-components-react/pull/1292))
+
+## 3.6.0
+
+Fri, 21 Mar 2025 11:37:20 GMT
+
+### Minor changes
+
+- Add ability to remove root Subject node from Models and iModel content trees by setting `hideRootSubject: true` in the `hierarchyConfig` prop. ([#1251](https://github.com/iTwin/viewer-components-react/pull/1251))
+
+### Patches
+
+- Fixed Models tree showing that modeled elements have children, when their sub model is private or when sub model does not have any elements. Now it shows that modeled element has children only when it's sub model has children and is not private. ([#1253](https://github.com/iTwin/viewer-components-react/pull/1253))
+- Fixed Categories tree showing definition containers that contain categories without elements. Now it displays definition containers only when they have categories that contain elements. ([#1248](https://github.com/iTwin/viewer-components-react/pull/1248))
+
+## 3.5.1
+
+Thu, 06 Mar 2025 12:37:44 GMT
+
+### Patches
+
+- Update import to use `@itwin/core-bentley` for types that are reexported by `@itwin/core-common` ([#1232](https://github.com/iTwin/viewer-components-react/pull/1232))
+
+## 3.5.0
+
+Wed, 19 Feb 2025 21:08:10 GMT
+
+### Minor changes
+
+- `CategoriesTree` component rendered `Categories` as a flat list, where each `Category` had zero or more child `SubCategories`. Some iTwin.js applications started to group `Categories` under `DefinitionContainers` and wanted to see them displayed in `CategoriesTree` component. Added `DefinitionContainers` to `CategoriesTree` component. This change doesn't affect applications that don't have `DefinitionContainers`. ([#1172](https://github.com/iTwin/viewer-components-react/pull/1172))
+
+## 3.4.2
+
+Fri, 14 Feb 2025 15:54:49 GMT
+
+### Patches
+
+- Adjusted modeled element / sub-model visibility controls. Now, if visibility of modeled element is changed, visibility of sub-model is adjusted accordingly and vice versa. ([#1183](https://github.com/iTwin/viewer-components-react/pull/1183))
+
+## 3.4.1
+
+Thu, 06 Feb 2025 13:36:20 GMT
+
+### Patches
+
+- Removed horizontal scroll from trees. ([#1180](https://github.com/iTwin/viewer-components-react/pull/1180))
+
+## 3.4.0
+
+Tue, 04 Feb 2025 15:29:52 GMT
+
+### Minor changes
+
+- Expose `FocusedInstancesContextProvider` and `useFocusedInstancesContext` to allow using `ModelsTreeComponent.ToggleInstancesFocusButton` from outside of `ModelsTreeComponent` and accesing the context from other React components. ([#1175](https://github.com/iTwin/viewer-components-react/pull/1175))
+- Add `filterButtonsVisibility` prop to `TreeRenderer`. The prop allows to control visibility of hierarchy level filtering buttons in the tree: `show-on-hover` (default) shows them on hover or focus, `hide` only shows them when a node is filtered. ([#1178](https://github.com/iTwin/viewer-components-react/pull/1178))
+
 ## 3.3.0
 
 Mon, 27 Jan 2025 18:30:40 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={[
@@ -144,10 +140,10 @@ This package provides building blocks for custom models tree:
 Example:
 
 ```tsx
+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>;
@@ -161,17 +157,17 @@ function CustomModelsTreeRenderer(props: CustomModelsTreeRendererProps) {
     },
     [getLabel],
   );
-  return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabel} />;
+  const getSublabelCallback = useCallback<Required<VisibilityTreeRendererProps>["getSublabel"]>((node) => <>Sublabel - {node.label}</>, []);
+  return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabelCallback} />;
 }
 
 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 });
 
@@ -184,7 +180,6 @@ function CustomModelsTreeComponent({ imodel, viewport, getSchemaContext, selecti
     >
       <VisibilityTree
         {...modelsTreeProps}
-        getSchemaContext={getSchemaContext}
         selectionStorage={selectionStorage}
         imodel={imodel}
         treeRenderer={(props) => <CustomModelsTreeRenderer {...props} {...rendererProps} />}
@@ -224,7 +219,6 @@ function CustomModelsTreeComponent({ viewport, selectionStorage, imodel, targetI
   return (
     <VisibilityTree
       {...modelsTreeProps}
-      getSchemaContext={getSchemaContext}
       selectionStorage={selectionStorage}
       imodel={imodel}
       treeRenderer={(props) => <VisibilityTreeRenderer {...props} {...rendererProps} />}
@@ -247,8 +241,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} />]}
@@ -276,7 +268,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>;
@@ -291,25 +282,21 @@ function CustomCategoriesTreeRenderer(props: CustomCategoriesTreeRendererProps)
     },
     [getLabel],
   );
-
   const getSublabel = useCallback<Required<VisibilityTreeRendererProps>["getSublabel"]>(() => {
     return <>Custom sub label</>;
   }, []);
-
   return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabel} />;
 }
 
 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 (
     <TreeWithHeader
       buttons={[
@@ -319,7 +306,6 @@ function CustomCategoriesTreeComponent({ imodel, viewport, getSchemaContext, sel
     >
       <VisibilityTree
         {...categoriesTreeProps}
-        getSchemaContext={getSchemaContext}
         selectionStorage={selectionStorage}
         imodel={imodel}
         treeRenderer={(props) => <CustomCategoriesTreeRenderer {...props} {...rendererProps} />}
@@ -350,8 +336,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}
     />
@@ -422,7 +406,6 @@ function MyTree({ imodel }: MyTreeProps) {
       treeName="MyTree"
       imodel={imodel}
       selectionStorage={unifiedSelectionStorage}
-      getSchemaContext={getSchemaContext}
       getHierarchyDefinition={getHierarchyDefinition}
       treeRenderer={(props) => <TreeRenderer {...props} />}
     />
@@ -507,7 +490,6 @@ function MyVisibilityTree({ imodel }: MyVisibilityTreeProps) {
       treeName="MyVisibilityTree"
       imodel={imodel}
       selectionStorage={unifiedSelectionStorage}
-      getSchemaContext={getSchemaContext}
       getHierarchyDefinition={getHierarchyDefinition}
       visibilityHandlerFactory={visibilityHandlerFactory}
       treeRenderer={(props) => <VisibilityTreeRenderer {...props} />}
@@ -561,34 +543,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
@@ -646,7 +600,6 @@ function MyWidget() {
       onFeatureUsed={(feature) => {
         console.log(`TreeWidget [${feature}] used`);
       }}
-      getSchemaContext={getSchemaContext}
       selectionStorage={unifiedSelectionStorage}
     />
   );
@@ -680,7 +633,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/TreeWidget.d.ts

@@ -1,24 +1,29 @@
 import type { Localization, TranslationOptions } from "@itwin/core-common";
+import type { ILogger } from "@itwin/presentation-shared";
 /**
  * Entry point for static initialization required by various components used in the package.
  * @public
  */
 export declare class TreeWidget {
     private static _i18n?;
+    private static _logger?;
     private static _initialized?;
     /**
      * Called by IModelApp to initialize the Tree Widget
      * @param i18n - The internationalization service created by the IModelApp.
+     * @param logger - The logger to use for logging messages. Defaults to `Logger` from `@itwin/core-bentley`.
      */
-    static initialize(i18n?: Localization): Promise<void>;
+    static initialize(i18n?: Localization, logger?: ILogger): Promise<void>;
     /** Unregisters the TreeWidget internationalization service namespace */
     static terminate(): void;
+    /** The logger used by this components in this package. */
+    static get logger(): ILogger;
     /** The internationalization service created by the IModelApp. */
     static get i18n(): Localization;
     /** The internationalization service namespace. */
     static get i18nNamespace(): string;
     /** Calls i18n.translateWithNamespace with the "TreeWidget" namespace. Do NOT include the namespace in the key.
      */
-    static translate(key: string | string[], options?: TranslationOptions): string;
+    static translate(key: string, options?: TranslationOptions): string;
 }
 //# sourceMappingURL=TreeWidget.d.ts.map

package/lib/esm/tree-widget-react/TreeWidget.js

@@ -2,22 +2,32 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { BentleyError, BentleyStatus } from "@itwin/core-common";
+import { BentleyError, BentleyStatus, Logger } from "@itwin/core-bentley";
 import { IModelApp } from "@itwin/core-frontend";
+import { createLogger } from "@itwin/presentation-core-interop";
+import { setLogger as setHierarchiesLogger } from "@itwin/presentation-hierarchies";
+import { setLogger as setHierarchiesReactLogger } from "@itwin/presentation-hierarchies-react";
 /**
  * Entry point for static initialization required by various components used in the package.
  * @public
  */
 export class TreeWidget {
+    static _i18n;
+    static _logger;
+    static _initialized;
     /**
      * Called by IModelApp to initialize the Tree Widget
      * @param i18n - The internationalization service created by the IModelApp.
+     * @param logger - The logger to use for logging messages. Defaults to `Logger` from `@itwin/core-bentley`.
      */
-    static async initialize(i18n) {
+    static async initialize(i18n, logger) {
         if (this._initialized) {
             return;
         }
         TreeWidget._initialized = true;
+        TreeWidget._logger = logger ?? createLogger(Logger);
+        setHierarchiesLogger(TreeWidget._logger);
+        setHierarchiesReactLogger(TreeWidget._logger);
         TreeWidget._i18n = i18n ?? IModelApp.localization;
         return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);
     }
@@ -27,8 +37,18 @@ export class TreeWidget {
             TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);
             TreeWidget._i18n = undefined;
         }
+        TreeWidget._logger = undefined;
+        setHierarchiesLogger(undefined);
+        setHierarchiesReactLogger(undefined);
         TreeWidget._initialized = false;
     }
+    /** The logger used by this components in this package. */
+    static get logger() {
+        if (!TreeWidget._logger) {
+            throw new BentleyError(BentleyStatus.ERROR, "TreeWidget not initialized");
+        }
+        return TreeWidget._logger;
+    }
     /** The internationalization service created by the IModelApp. */
     static get i18n() {
         if (!TreeWidget._i18n) {

package/lib/esm/tree-widget-react/TreeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../../src/tree-widget-react/TreeWidget.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD;;;GAGG;AACH,MAAM,OAAO,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO;SACR;QAED,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,SAAS,CAAC,YAAY,CAAC;QAClD,OAAO,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,SAAS;QACrB,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAC/D,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;SAC9B;QAED,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;YACrB,MAAM,IAAI,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;SAC3E;QACD,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB,EAAE,OAA4B;QAC1E,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC;CACF","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 { BentleyError, BentleyStatus } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\n\nimport type { Localization, TranslationOptions } from \"@itwin/core-common\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   */\n  public static async initialize(i18n?: Localization): Promise<void> {\n    if (this._initialized) {\n      return;\n    }\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n) {\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n      TreeWidget._i18n = undefined;\n    }\n\n    TreeWidget._initialized = false;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n) {\n      throw new BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n    }\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(key: string | string[], options?: TranslationOptions): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(stringKey, options);\n  }\n}\n"]}
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../../src/tree-widget-react/TreeWidget.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,SAAS,IAAI,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAK/F;;;GAGG;AACH,MAAM,OAAO,UAAU;IACb,MAAM,CAAC,KAAK,CAAgB;IAC5B,MAAM,CAAC,OAAO,CAAW;IACzB,MAAM,CAAC,YAAY,CAAW;IAEtC;;;;OAIG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB,EAAE,MAAgB;QAClE,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAE/B,UAAU,CAAC,OAAO,GAAG,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;QACpD,oBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzC,yBAAyB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAE9C,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,SAAS,CAAC,YAAY,CAAC;QAClD,OAAO,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,SAAS;QACrB,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAC/D,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;QAC/B,CAAC;QAED,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC;QAC/B,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAChC,yBAAyB,CAAC,SAAS,CAAC,CAAC;QAErC,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,0DAA0D;IACnD,MAAM,KAAK,MAAM;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YACxB,MAAM,IAAI,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;QAC5E,CAAC;QACD,OAAO,UAAU,CAAC,OAAO,CAAC;IAC5B,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YACtB,MAAM,IAAI,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;QAC5E,CAAC;QACD,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CAAC,GAAW,EAAE,OAA4B;QAC/D,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC;CACF","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 { BentleyError, BentleyStatus, Logger } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { createLogger } from \"@itwin/presentation-core-interop\";\nimport { setLogger as setHierarchiesLogger } from \"@itwin/presentation-hierarchies\";\nimport { setLogger as setHierarchiesReactLogger } from \"@itwin/presentation-hierarchies-react\";\n\nimport type { Localization, TranslationOptions } from \"@itwin/core-common\";\nimport type { ILogger } from \"@itwin/presentation-shared\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _logger?: ILogger;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   * @param logger - The logger to use for logging messages. Defaults to `Logger` from `@itwin/core-bentley`.\n   */\n  public static async initialize(i18n?: Localization, logger?: ILogger): Promise<void> {\n    if (this._initialized) {\n      return;\n    }\n\n    TreeWidget._initialized = true;\n\n    TreeWidget._logger = logger ?? createLogger(Logger);\n    setHierarchiesLogger(TreeWidget._logger);\n    setHierarchiesReactLogger(TreeWidget._logger);\n\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n) {\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n      TreeWidget._i18n = undefined;\n    }\n\n    TreeWidget._logger = undefined;\n    setHierarchiesLogger(undefined);\n    setHierarchiesReactLogger(undefined);\n\n    TreeWidget._initialized = false;\n  }\n\n  /** The logger used by this components in this package. */\n  public static get logger(): ILogger {\n    if (!TreeWidget._logger) {\n      throw new BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n    }\n    return TreeWidget._logger;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n) {\n      throw new BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n    }\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(key: string, options?: TranslationOptions): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(stringKey, options);\n  }\n}\n"]}

package/lib/esm/tree-widget-react/components/{SelectableTree.scss → TreeWidgetComponentImpl.css}

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 
 .tree-widget-selectable-tree {
-  padding: var(--iui-size-xs);
   width: 100%;
   height: 100%;
   box-sizing: border-box;

package/lib/esm/tree-widget-react/components/{SelectableTree.d.ts → TreeWidgetComponentImpl.d.ts}

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-import "./SelectableTree.scss";
+import "./TreeWidgetComponentImpl.css";
 import type { IModelConnection } from "@itwin/core-frontend";
 /**
  * Props for rendering trees
  * @public
  */
-export interface SelectableTreeRenderProps {
-    density?: "enlarged" | "default";
+export interface TreeRenderProps {
+    filter?: string;
     onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;
     onFeatureUsed?: (feature: string) => void;
 }
@@ -14,34 +13,39 @@ export interface SelectableTreeRenderProps {
  * Definition of a tree component displayed in `SelectableTree`.
  * @public
  */
-export interface SelectableTreeDefinition {
+export interface TreeDefinition {
     /** Id of the tree */
     id: string;
     /** Callback that is used to get tree label */
     getLabel: () => string;
     /** Callback that is used to render tree component */
-    render: (props: SelectableTreeRenderProps) => React.ReactNode;
+    render: (props: TreeRenderProps) => React.ReactNode;
     /**
      * Callback that is used to determine if tree should be shown for current active iModel connection.
      * If callback is `undefined` tree is shown for all iModel connections.
      */
     shouldShow?: (imodel: IModelConnection) => Promise<boolean>;
+    /**
+     *  Flag to determine if search box should be rendered.
+     *  - false or undefined, the search box will not be rendered.
+     *  - true, the search box will be rendered.
+     */
+    isSearchable?: boolean;
     /** Icon to render before tree label in tree selector */
     startIcon?: React.ReactNode;
 }
 /**
- * Props for `SelectableTree`
- * @public
+ * Props for `TreeWidgetComponent`
+ * @internal
  */
-export interface SelectableTreeProps {
-    trees: SelectableTreeDefinition[];
-    density?: "enlarged" | "default";
+export interface TreeWidgetComponentImplProps {
+    trees: TreeDefinition[];
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
     onFeatureUsed?: (feature: string) => void;
 }
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
- * @public
+ * @internal
  */
-export declare function SelectableTree(props: SelectableTreeProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=SelectableTree.d.ts.map
+export declare function TreeWidgetComponentImpl(props: TreeWidgetComponentImplProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TreeWidgetComponentImpl.d.ts.map

package/lib/esm/tree-widget-react/components/{SelectableTree.js → TreeWidgetComponentImpl.js}

@@ -1,29 +1,38 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import "./SelectableTree.scss";
-import { useEffect, useState } from "react";
+import "./TreeWidgetComponentImpl.css";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useActiveIModelConnection } from "@itwin/appui-react";
-import { Spinner } from "@itwin/itwinui-react/bricks";
+import { Skeleton } from "@stratakit/bricks";
 import { TreeWidget } from "../TreeWidget.js";
-import { TreeSelector } from "./TreeSelector.js";
+import { SelectableTree } from "./tree-header/SelectableTree.js";
+import { WidgetHeader } from "./tree-header/WidgetHeader.js";
+import { SkeletonTree } from "./trees/common/components/SkeletonTree.js";
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
- * @public
+ * @internal
  */
-export function SelectableTree(props) {
+export function TreeWidgetComponentImpl(props) {
     const imodel = useActiveIModelConnection();
     if (!imodel) {
         return null;
     }
     return _jsx(SelectableTreeContent, { ...props, imodel: imodel });
 }
-function SelectableTreeContent(props) {
-    const { trees: treeDefinitions, imodel } = props;
-    const trees = useActiveTrees(treeDefinitions, imodel);
-    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(TreeSelector, { ...getTreeSelectorProps(trees), onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
+function SelectableTreeContent({ onPerformanceMeasured, onFeatureUsed, trees: treeDefinitions, imodel, }) {
+    const activeTrees = useActiveTrees(treeDefinitions, imodel);
+    const { trees, defaultSelectedContentId } = useMemo(() => getWidgetWithHeaderProps(activeTrees), [activeTrees]);
+    const [searchValue, setSearchValue] = useState(undefined);
+    const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);
+    const selectedContent = useMemo(() => trees.find((c) => c.id === selectedContentId) ?? trees[0], [selectedContentId, trees]);
+    const onSelect = useCallback((treeId) => {
+        onFeatureUsed?.(`choose-${treeId}`);
+        setSelectedContentId(treeId);
+    }, [onFeatureUsed]);
+    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsxs("div", { className: "tw-content", children: [_jsx(WidgetHeader, { trees: trees, defaultSelectedContentId: defaultSelectedContentId, onSearch: setSearchValue, onSelect: onSelect, isLoading: selectedContent.id === "loading" }), _jsx("div", { className: "tw-content-wrapper", children: selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue }) })] }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = useState();
@@ -48,6 +57,7 @@ async function getActiveTrees(treeDefinitions, imodel) {
         }
         return {
             id: treeDef.id,
+            isSearchable: treeDef.isSearchable,
             label: treeDef.getLabel(),
             render: treeDef.render,
             startIcon: treeDef.startIcon,
@@ -55,7 +65,7 @@ async function getActiveTrees(treeDefinitions, imodel) {
     };
     return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined);
 }
-function getTreeSelectorProps(trees) {
+function getWidgetWithHeaderProps(trees) {
     if (trees === undefined) {
         return {
             defaultSelectedContentId: "loading",
@@ -63,7 +73,8 @@ function getTreeSelectorProps(trees) {
                 {
                     id: "loading",
                     label: "",
-                    render: () => (_jsx(Delayed, { children: _jsx(Spinner, {}) })),
+                    isSearchable: false,
+                    render: () => _jsx(LoadingTree, {}),
                 },
             ],
         };
@@ -74,6 +85,7 @@ function getTreeSelectorProps(trees) {
             trees: [
                 {
                     id: "no-trees",
+                    isSearchable: false,
                     label: "",
                     render: () => (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, className: "tree-widget-no-trees-container", children: TreeWidget.translate("selectableTree.noTrees") })),
                 },
@@ -85,19 +97,7 @@ function getTreeSelectorProps(trees) {
         trees,
     };
 }
-function Delayed({ delay = 200, children }) {
-    const [show, setShow] = useState(false);
-    useEffect(() => {
-        const id = setTimeout(() => {
-            setShow(true);
-        }, delay);
-        return () => {
-            clearTimeout(id);
-        };
-    }, [delay]);
-    if (!show) {
-        return null;
-    }
-    return _jsx(_Fragment, { children: children });
+function LoadingTree() {
+    return (_jsx(SelectableTree, { buttons: _jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" })] }), children: _jsx(SkeletonTree, {}) }));
 }
-//# sourceMappingURL=SelectableTree.js.map
+//# sourceMappingURL=TreeWidgetComponentImpl.js.map

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

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

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

@@ -1,6 +1,6 @@
-import "./TreeWidgetUiItemsProvider.scss";
+import "./TreeWidgetUiItemsProvider.css";
 import type { Widget } from "@itwin/appui-react";
-import type { SelectableTreeDefinition, SelectableTreeProps } from "./SelectableTree.js";
+import type { TreeDefinition } from "./TreeWidgetComponentImpl.js";
 /**
  * Props for `createWidget`.
  * @public
@@ -13,9 +13,7 @@ interface TreeWidgetProps {
      * @see ExternalSourcesTreeComponent
      * @see IModelContentTreeComponent
      */
-    trees: SelectableTreeDefinition[];
-    /** Modifies the density of the tree widget. `enlarged` widget contains larger content */
-    density?: "enlarged" | "default";
+    trees: TreeDefinition[];
     /** Callback that is invoked when performance of tracked feature is measured. */
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
     /** Callback that is invoked when a tracked feature is used. */
@@ -30,6 +28,6 @@ export declare function createTreeWidget(props: TreeWidgetProps): Widget;
  * Tree widget component which allows selecting which tree to render.
  * @public
  */
-export declare function TreeWidgetComponent(props: SelectableTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeWidgetComponent(props: TreeWidgetProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TreeWidgetUiItemsProvider.d.ts.map