@itwin/tree-widget-react 0.10.0-dev.1 → 1.0.0-dev.0

package/CHANGELOG.md

@@ -0,0 +1,331 @@
+# Change Log - @itwin/tree-widget-react
+
+This log was last generated on Tue, 23 May 2023 13:16:11 GMT and should not be manually modified.
+
+## 0.10.0
+Tue, 23 May 2023 13:16:11 GMT
+
+_Version update only_
+
+## 0.9.0
+Tue, 02 May 2023 16:12:17 GMT
+
+### Minor changes
+
+- Updated to AppUI 4.0 and Presentation 4.0
+
+## 0.8.0
+Mon, 03 Apr 2023 15:34:07 GMT
+
+### Minor changes
+
+- Removed `SpatialTree` and related components in favor of the ones in `@itwin/breakdown-trees-react`
+- Updated dependencies (`itwinui@2`, `appui@4`, `presentation-components@4`, `itwinjs-core@3.7`)
+
+### Patches
+
+- Use iTwin UI components instead of custom ones and CSS variables from `@itwin/itwinui-variables` instead of `@itwin/core-react`
+
+## 0.7.2
+Fri, 24 Mar 2023 10:46:34 GMT
+
+### Patches
+
+- Fixed tree filtering not being removed when search box is closed
+
+## 0.7.1
+Thu, 23 Mar 2023 15:12:36 GMT
+
+### Patches
+
+- 'ModelsTree': Restored 'HideAll' button behavior to hide only models
+
+## 0.7.0
+Mon, 20 Mar 2023 14:48:35 GMT
+
+### Minor changes
+
+- Add an option to control what buttons are available in tree toolbars.
+- Upgrade `itwinjs-core` dependencies to `^3.6.0`
+- Upgrade `typescript` to `~4.4.0`
+
+### Patches
+
+- ModelsTree: ensure that the "Show all" button is going to show all elements when there are elements with an "exclusive" flag
+- '2d' and '3d' buttons react to visibility changes in the viewport. The '2d' button will be disabled if no models with the PlanProjection flag are present in the model.
+
+## 0.6.2
+Thu, 09 Mar 2023 20:08:53 GMT
+
+### Patches
+
+- `ModelsTreeComponent`: ensure that the "show all" and "hide all" buttons affect all iModel content
+- Models Tree: Remove unused feature of filtering the tree by element ids
+
+## 0.6.1
+Thu, 19 Jan 2023 10:29:18 GMT
+
+### Patches
+
+- CategoriesTree: Updated ruleset to not show private SubCategories
+- Bug fix for changing visibility of multiple nodes at once
+
+## 0.6.0
+Tue, 20 Dec 2022 15:12:29 GMT
+
+### Minor changes
+
+- Moved core trees implementation from @itwin/appui-react package to @itwin/tree-widget-react
+
+## 0.5.0
+Mon, 12 Sep 2022 19:50:36 GMT
+
+### Minor changes
+
+- Add new `defaultTreeId` prop to specify default tree for TreeWidgetUiItemsProvider
+
+## 0.4.7
+Mon, 30 May 2022 12:44:10 GMT
+
+### Patches
+
+- Fix GeometricElement nodes not being shown in `IModelContentTree`.
+
+## 0.4.6
+Thu, 26 May 2022 15:54:07 GMT
+
+### Patches
+
+- Allow a caller to specify a default priority for Tree Widget item provider.
+
+## 0.4.5
+Mon, 09 May 2022 18:04:58 GMT
+
+### Patches
+
+- set restore transient state in tree widget ui items provider to restore state when remounted
+
+## 0.4.4
+Thu, 05 May 2022 12:21:21 GMT
+
+### Patches
+
+- set tree-widget-search-bar-button-container z-index to 1
+
+## 0.4.3
+Thu, 21 Apr 2022 18:47:53 GMT
+
+### Patches
+
+- Do not unmount children in AutoSizer when height or width is 0 to avoid losing children state
+
+## 0.4.2
+Tue, 19 Apr 2022 14:15:57 GMT
+
+### Patches
+
+- Fixed search bar container to take up entire width of widget when open.
+
+## 0.4.1
+Wed, 06 Apr 2022 13:48:44 GMT
+
+### Patches
+
+- Updates to allow specification of default panel location.
+- Add transitive peers as dev deps
+- added tree icon to tree widget tab
+
+## 0.4.0
+Fri, 18 Mar 2022 13:31:19 GMT
+
+### Minor changes
+
+- Remove deprecated WidgetControl, update UiItemsProvider init
+
+## 0.3.0
+Wed, 02 Mar 2022 21:38:51 GMT
+
+### Minor changes
+
+- Add `IModelContentTree`
+
+## 0.2.1
+Fri, 04 Feb 2022 00:43:35 GMT
+
+### Patches
+
+- Update scss to be pulled from cjs dir
+
+## 0.2.0
+Mon, 24 Jan 2022 19:14:37 GMT
+
+### Minor changes
+
+- Bump to official iTwin.js 3.0 release
+
+## 0.1.2
+Wed, 19 Jan 2022 17:39:40 GMT
+
+### Patches
+
+- updated to latest rc, dev-185, and updated deps
+
+## 0.1.1
+Wed, 12 Jan 2022 13:59:35 GMT
+
+### Patches
+
+- iTwin.js 3.0 first rc
+
+## 1.4.6
+Tue, 11 Jan 2022 16:25:27 GMT
+
+### Patches
+
+- Fix hide all button blocked by search bar
+
+## 1.4.5
+Tue, 23 Nov 2021 21:19:42 GMT
+
+### Patches
+
+- Fix an issue where ModelsTree Component could lose its state
+
+## 1.4.4
+Thu, 16 Sep 2021 17:55:54 GMT
+
+### Patches
+
+- Stop delivering psuedo-localized strings
+
+## 1.4.3
+Thu, 26 Aug 2021 14:00:14 GMT
+
+### Patches
+
+- Search bar was not sized correctly, and alignment was not centered.
+
+## 1.4.2
+Mon, 09 Aug 2021 20:24:55 GMT
+
+### Patches
+
+- Updated tree widget barrel file to include UiProvider
+
+## 1.4.1
+Mon, 19 Jul 2021 18:07:24 GMT
+
+### Patches
+
+- Model/Category tree was not resizing properly, missing flex=1.
+
+## 1.4.0
+Tue, 13 Jul 2021 17:43:28 GMT
+
+### Minor changes
+
+- Added a UiProvider that implements the existing tree widget
+
+## 1.3.1
+Tue, 08 Jun 2021 21:23:59 GMT
+
+### Patches
+
+- bump classnames dep
+
+## 1.3.0
+Thu, 13 May 2021 21:15:14 GMT
+
+### Minor changes
+
+- update imjs to 2.15.2 to resolve breaking change in usePResentationTreeNodeLoader
+
+## 1.2.8
+Wed, 24 Mar 2021 21:09:25 GMT
+
+### Patches
+
+- Avoid Nested ScrollBars in Tree View widget
+
+## 1.2.7
+Tue, 23 Mar 2021 16:17:57 GMT
+
+### Patches
+
+- Change .component-selectable-content to block to display to fix resize flicker.
+
+## 1.2.6
+Fri, 26 Feb 2021 18:43:33 GMT
+
+### Patches
+
+- Fixes for models tree not loading models when using show all, invert and other toggles
+
+## 1.2.5
+Tue, 15 Dec 2020 13:51:37 GMT
+
+### Patches
+
+- Fix styling issues in search bar
+
+## 1.2.4
+Wed, 09 Dec 2020 19:09:13 GMT
+
+### Patches
+
+- Fixing resizing issues with the SearchBox in Model tree
+
+## 1.2.3
+Tue, 25 Aug 2020 16:57:36 GMT
+
+### Patches
+
+- rm unecessary dep on react-scripts
+
+## 1.2.2
+Mon, 24 Aug 2020 17:39:24 GMT
+
+### Patches
+
+- alphabetize package.json
+
+## 1.2.1
+Fri, 21 Aug 2020 21:17:48 GMT
+
+### Patches
+
+- readme update
+- support replacing model/category/spatial trees in TreeWidgetControl
+
+## 1.2.0
+Tue, 11 Aug 2020 14:24:07 GMT
+
+### Minor changes
+
+- Added 2D / 3D toggle to tree view header
+
+### Patches
+
+- Decouple tree header for using in other widgets
+
+## 1.1.1
+Tue, 28 Jul 2020 22:10:32 GMT
+
+### Patches
+
+- Fixes for tree widgets consistency: Category tree invert functionality, tooltips on buttons and fix for iFrame height of tree not defined properly
+
+## 1.1.0
+Tue, 14 Jul 2020 22:54:18 GMT
+
+### Minor changes
+
+- "Add classifications tree."
+- Added in tree-widget package
+- Replacing ThemedSelect component with SelectableContent component
+
+### Patches
+
+- Functional component.
+- Model tree search box will now properly clear itself in addition to closing when its "X" icon is hit
+

package/README.md

@@ -2,60 +2,177 @@
 
 Copyright © Bentley Systems, Incorporated. All rights reserved.
 
-The tree-widget-react package provides React components to access Models and Categories within an iModel via a UiProvider, `TreeWidgetUiItemsProvider`.
+The `@itwin/tree-widget-react` package provides React components to build a widget with tree components' selector, along with all the building blocks that can be used individually.
 
-The package also provides the underlying component, `TreeWidgetComponent`, which you can wrap within your own custom UiProvider and pass in your own custom trees to display.
+![Widget example](./media/widget.png)
 
 ## Usage
 
-### What to add in your iTwin AppUI based application
+Typically, the package is used with an [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) based application, but the building blocks may as well be used with any other iTwin.js React app.
 
-With a few short lines, you can add the tree widget to your app.
-
-#### Call TreeWidget.initialize() **_before_** making use of the provided Tree Widget Provider
+In any case, **before** using any APIs or components delivered with the package, it needs to be initialized:
 
 ```ts
+import { IModelApp } from "@itwin/core-frontend";
 import { TreeWidget } from "@itwin/tree-widget-react";
 ...
 await TreeWidget.initialize(IModelApp.localization);
 ```
 
-#### Register Tree Widget Provider
+In [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) based applications widgets are typically provided using `UiItemsProvider` implementations. The `@itwin/tree-widget-react` package delivers `TreeWidgetUiItemsProvider` that can be used to add the tree widget to UI:
 
 ```ts
-import { UiItemsManager } from "@itwin/appui-abstract";
+import { UiItemsManager } from "@itwin/appui-react";
 import { TreeWidgetUiItemsProvider } from "@itwin/tree-widget-react";
 ...
 UiItemsManager.register(
-  new TreeWidgetUiItemsProvider({ ...TreeWidgetOptions })
+  new TreeWidgetUiItemsProvider()
 );
 ```
 
-### Additional trees avaialable
+The above example uses default widget parameters and results in a component similar to the one visible at the top of this README. Customization is also possible:
+
+```ts
+import { UiItemsManager } from "@itwin/appui-react";
+import { TreeWidgetUiItemsProvider, ModelsTreeComponent } from "@itwin/tree-widget-react";
+...
+UiItemsManager.register(
+  new TreeWidgetUiItemsProvider({
+    // defaults to `StagePanelLocation.Right`
+    defaultPanelLocation: StagePanelLocation.Left,
+    // defaults to `StagePanelSection.Start`
+    defaultPanelSection: StagePanelSection.End,
+    // defaults to whatever the default `Widget.priority` in AppUI is
+    defaultTreeWidgetPriority: 1000,
+    // defaults to `ModelsTreeComponent` and `CategoriesTreeComponent`
+    trees: [{
+        id: ModelsTreeComponent.id,
+        getLabel: ModelsTreeComponent.getLabel,
+        render: () => <ModelsTreeComponent />,
+    }, {
+        id: "my-tree-id",
+        getLabel: "My Custom Tree",
+        render: () => <>This is my custom tree.</>,
+    }];
+  })
+);
+```
+
+As seen in the above code snippet, `TreeWidgetUiItemsProvider` takes a list of trees that are displayed in the widget. This package delivers a number of tree components for everyone's use (see below), but providing custom trees is also an option.
+
+## Components
+
+While we expect this package to be mostly used with [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) and widget created through `TreeWidgetUiItemsProvider`, the package delivers components used within the widget to meet other use cases:
+
+- `TreeWidgetComponent` renders a tree selector and selected tree (based on the `trees` prop).
+
+- Visibility tree components help you build trees that look and feel like [Models](#models-tree) and [Categories](#categories-tree) trees, letting you control display of elements in the hierarchy.
+
+  - `createVisibilityTreeRenderer` returns a tree renderer that renders nodes with "eye" checkboxes. Its building blocks:
+    - `createVisibilityTreeNodeRenderer`
+    - `VisibilityTreeNodeCheckbox`
+  - `useVisibilityTreeFiltering` is used to filter the hierarchy.
+  - `VisibilityTreeNoFilteredData` is used to render a "no results" when filtering.
+  - `VisibilityTreeEventHandler` is an extension of [UnifiedSelectionTreeEventHandler](https://www.itwinjs.org/reference/presentation-components/tree/unifiedselectiontreeeventhandler/), that additionally handles checkbox events and calls provided `IVisibilityHandler` to get/set display of the elements in the hierarchy.
+
+### Models tree
+
+The component renders a tree that tries to replicate how a typical "Models" tree of the iModel would look like in the source application. There's also a header that renders models search box and various visibility control buttons.
+
+![Models tree example](./media/models-tree.png)
+
+Typical usage:
+
+```tsx
+import { ModelsTreeComponent, ClassGroupingOption } from "@itwin/tree-widget-react";
+import { SelectionMode } from "@itwin/components-react";
+...
+function MyWidget() {
+  return (
+    <ModelsTreeComponent
+      headerButtons={[
+        (props) => <ModelsTreeComponent.ShowAllButton {...props} />,
+        (props) => <ModelsTreeComponent.HideAllButton {...props} />,
+        (props) => <MyCustomButton />,
+      ]}
+      selectionMode={SelectionMode.Extended}
+      hierarchyConfig={{
+        enableElementsClassGrouping: ClassGroupingOption.Yes,
+      }}
+    />
+  );
+}
+```
+
+Available header buttons:
+
+- `ModelsTreeComponent.ShowAllButton` makes everything in the iModel displayed.
+- `ModelsTreeComponent.HideAllButton` makes everything in the iModel hidden by turning off all models.
+- `ModelsTreeComponent.InvertButton` inverts display of all models.
+- `ModelsTreeComponent.View2DButton` toggles plan projection models' display.
+- `ModelsTreeComponent.View3DButton` toggles non-plan projection models' display.
+
+`ModelsTreeComponent` building blocks:
+
+- `ModelsTree` renders the tree without the header.
+- `ModelsVisibilityHandler` knows how to get and control display of various concepts displayed in the Models tree: Subjects, Models, Categories, Elements.
+
+### Categories tree
+
+The component, based on the active view, renders a hierarchy of either spatial (3d) or drawing (2d) categories. The hierarchy consists of two levels - the category (spatial or drawing) and its sub-categories. There's also a header that renders categories search box and various visibility control buttons.
+
+![Categories tree example](./media/categories-tree.png)
+
+Typical usage:
+
+```tsx
+import { CategoriesTreeComponent } from "@itwin/tree-widget-react";
+...
+function MyWidget() {
+  return (
+    <CategoriesTreeComponent
+      headerButtons={[
+        (props) => <CategoriesTreeComponent.ShowAllButton {...props} />,
+        (props) => <CategoriesTreeComponent.HideAllButton {...props} />,
+        (props) => <MyCustomButton />,
+      ]}
+    />
+  );
+}
+```
+
+Available header buttons:
 
-#### IModelContentTree
+- `ModelsTreeComponent.ShowAllButton` makes all categories and their subcategories displayed.
+- `ModelsTreeComponent.HideAllButton` makes all categories hidden.
+- `ModelsTreeComponent.InvertButton` inverts display of all categories.
 
-Component that displays a hierarchy with content of a given `IModelConnection`.
+`CategoriesTreeComponent` building blocks:
 
-##### Resulting hierarchy
+- `CategoryTree` renders the tree without the header.
+- `CategoryVisibilityHandler` knows how to get and control display of Categories and SubCategories.
 
-- Root Subject
-  - Child Subjects
-    - Target Model
-      - Spatial Categories of top-assemblies in the Model (if model is a GeometricModel3d)
-        - Top-assemblies in the model and category
-          - Child elements of the assembly
-      - Drawing Categories of top-assemblies in the Model (if model is a GeometricModel2d)
-        - Top-assemblies in the model and category
-          - Child elements of the assembly
-      - Top-assemblies in the Model (if model is neither GeometricModel3d nor GeometricModel2d)
-        - Child elements of the assembly
+### IModel content tree
 
-In addition, for every modeled element we show content of the model as children for the element's node.
+The component renders a similar hierarchy to [Models tree](#models-tree), but with the following changes:
 
-More details about Subjects and Models can be found here:
+- Only the hierarchy, without a header is rendered.
+- Visibility control is not allowed.
+- There's less hiding of `Subject` and `Model` nodes.
+- Show not only geometric, but all Models.
 
-- <https://www.imodeljs.org/bis/intro/information-hierarchy/>
-- <https://www.imodeljs.org/bis/intro/organizing-models-and-elements/>
+In general, the component is expected to be used by advanced users to inspect contents of the iModel.
 
-More details about the hierarchy can be found in the [presentation ruleset JSON file](./src/components/rulesets/IModelContent.json).
+![IModel content tree example](./media/imodel-content-tree.png)
+
+Typical usage:
+
+```tsx
+import { IModelContentTreeComponent } from "@itwin/tree-widget-react";
+...
+function MyWidget() {
+  return (
+    <IModelContentTreeComponent />
+  );
+}
+```

package/lib/cjs/TreeWidget.d.ts

@@ -22,6 +22,5 @@ export declare class TreeWidget {
     /** Calls i18n.translateWithNamespace with the "TreeWidget" namespace. Do NOT include the namespace in the key.
      */
     static translate(key: string | string[], options?: LocalizationOptions): string;
-    static loggerCategory(obj: any): string;
 }
 //# sourceMappingURL=TreeWidget.d.ts.map

package/lib/cjs/TreeWidget.js

@@ -33,7 +33,7 @@ class TreeWidget {
     /** The internationalization service created by the IModelApp. */
     static get i18n() {
         if (!TreeWidget._i18n)
-            throw new appui_abstract_1.UiError(TreeWidget.loggerCategory(this), "TreeWidget not initialized");
+            throw new appui_abstract_1.UiError(TreeWidget.packageName, "TreeWidget not initialized");
         return TreeWidget._i18n;
     }
     /** The internationalization service namespace. */
@@ -49,11 +49,6 @@ class TreeWidget {
         const stringKey = `${TreeWidget.i18nNamespace}:${key}`;
         return TreeWidget.i18n.getLocalizedString(stringKey, options);
     }
-    static loggerCategory(obj) {
-        const className = (0, appui_abstract_1.getClassName)(obj);
-        const category = TreeWidget.packageName + (className ? `.${className}` : "");
-        return category;
-    }
 }
 exports.TreeWidget = TreeWidget;
 //# sourceMappingURL=TreeWidget.js.map

package/lib/cjs/TreeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,0DAA8D;AAC9D,wDAAiD;AAIjD;;;GAGG;AACH,MAAa,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE9B,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,yBAAS,CAAC,YAAY,CAAC;QAElD,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;YAClB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,yCAAyC;QAC3G,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;QAC7B,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,MAAM,IAAI,wBAAO,CACf,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAC/B,4BAA4B,CAC7B,CAAC;QACJ,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAEM,MAAM,KAAK,WAAW;QAC3B,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CACrB,GAAsB,EACtB,OAA6B;QAE7B,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CACvC,SAAS,EACT,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,IAAA,6BAAY,EAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GACZ,UAAU,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9D,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF;AA/DD,gCA+DC","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 { getClassName, UiError } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport type { Localization } from \"@itwin/core-common\";\nimport type { LocalizationOptions } from \"@itwin/core-i18n\";\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) return;\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n\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); // eslint-disable-line @itwin/no-internal\n    TreeWidget._i18n = undefined;\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 UiError(\n        TreeWidget.loggerCategory(this),\n        \"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  public static get packageName(): string {\n    return \"tree-widget-react\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(\n    key: string | string[],\n    options?: LocalizationOptions\n  ): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(\n      stringKey,\n      options\n    );\n  }\n\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category =\n      TreeWidget.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n}\n"]}
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,0DAAgD;AAChD,wDAAiD;AAKjD;;;GAGG;AACH,MAAa,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE9B,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,yBAAS,CAAC,YAAY,CAAC;QAElD,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;YAClB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,yCAAyC;QAC3G,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;QAC7B,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,MAAM,IAAI,wBAAO,CACf,UAAU,CAAC,WAAW,EACtB,4BAA4B,CAC7B,CAAC;QACJ,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAEM,MAAM,KAAK,WAAW;QAC3B,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CACrB,GAAsB,EACtB,OAA6B;QAE7B,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CACvC,SAAS,EACT,OAAO,CACR,CAAC;IACJ,CAAC;CACF;AAxDD,gCAwDC","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 { UiError } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\n\nimport type { Localization } from \"@itwin/core-common\";\nimport type { LocalizationOptions } from \"@itwin/core-i18n\";\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) return;\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n\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); // eslint-disable-line @itwin/no-internal\n    TreeWidget._i18n = undefined;\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 UiError(\n        TreeWidget.packageName,\n        \"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  public static get packageName(): string {\n    return \"tree-widget-react\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(\n    key: string | string[],\n    options?: LocalizationOptions\n  ): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(\n      stringKey,\n      options\n    );\n  }\n}\n"]}

package/lib/cjs/components/TreeFilteringState.d.ts

@@ -1,15 +1,17 @@
 import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+/** @internal */
 export interface SearchOptions {
     isFiltering: boolean;
     onFilterCancel: () => void;
     onFilterStart: (newFilter: string) => void;
     onResultSelectedChanged: (index: number) => void;
     matchedResultCount: number | undefined;
+    activeMatchIndex: number | undefined;
 }
+/** @internal */
 export declare const useTreeFilteringState: () => {
     searchOptions: SearchOptions;
     filterString: string;
-    activeMatchIndex: number | undefined;
     onFilterApplied: (provider: IPresentationTreeDataProvider, matches: number) => void;
     filteredProvider: IPresentationTreeDataProvider | undefined;
 };

package/lib/cjs/components/TreeFilteringState.js

@@ -1,51 +1,30 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTreeFilteringState = void 0;
 /*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-const react_1 = __importStar(require("react"));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeFilteringState = void 0;
+const react_1 = require("react");
+/** @internal */
 const useTreeFilteringState = () => {
-    const [filterString, setFilterString] = (0, react_1.useState)("");
-    const [matchedResultCount, setMatchedResultCount] = (0, react_1.useState)();
-    const [activeMatchIndex, setActiveMatchIndex] = (0, react_1.useState)();
-    const [filteredProvider, setFilteredProvider] = (0, react_1.useState)();
-    const onFilterCancel = react_1.default.useCallback(() => {
-        setFilterString("");
-        setMatchedResultCount(undefined);
-        setFilteredProvider(undefined);
+    const [{ filterString, matchedResultCount, activeMatchIndex, filteredProvider }, setState] = (0, react_1.useState)({ filterString: "" });
+    const onFilterCancel = (0, react_1.useCallback)(() => {
+        setState({ filterString: "" });
     }, []);
-    const onFilterStart = react_1.default.useCallback((newFilter) => {
-        setFilterString(newFilter);
-        setMatchedResultCount(undefined);
-        setFilteredProvider(undefined);
+    const onFilterStart = (0, react_1.useCallback)((newFilter) => {
+        setState({ filterString: newFilter });
     }, []);
-    const onResultSelectedChanged = react_1.default.useCallback((index) => {
-        setActiveMatchIndex(index);
+    const onResultSelectedChanged = (0, react_1.useCallback)((index) => {
+        setState((prev) => ({ ...prev, activeMatchIndex: index }));
     }, []);
-    const onFilterApplied = react_1.default.useCallback((provider, matches) => {
-        setFilteredProvider(provider);
-        setMatchedResultCount(matches);
+    const onFilterApplied = (0, react_1.useCallback)((provider, matches) => {
+        setState((prev) => ({
+            ...prev,
+            activeMatchIndex: prev.activeMatchIndex === undefined ? 1 : Math.min(prev.activeMatchIndex, matches),
+            matchedResultCount: matches,
+            filteredProvider: provider,
+        }));
     }, []);
     const isFiltering = !!filterString && matchedResultCount === undefined;
     const searchOptions = {
@@ -54,11 +33,11 @@ const useTreeFilteringState = () => {
         onFilterStart,
         onResultSelectedChanged,
         matchedResultCount,
+        activeMatchIndex,
     };
     return {
         searchOptions,
         filterString,
-        activeMatchIndex,
         onFilterApplied,
         filteredProvider,
     };