@itwin/tree-widget-react 1.0.0-dev.8 → 1.1.0

package/CHANGELOG.md

@@ -1,6 +1,55 @@
 # 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.
+This log was last generated on Mon, 07 Aug 2023 13:36:23 GMT and should not be manually modified.
+
+## 1.1.0
+Mon, 07 Aug 2023 13:36:23 GMT
+
+### Minor changes
+
+- Trees: Added ability to increase node size in order to make tree more user friendly on touch devices.
+- Trees: Added ability to customize tree node label
+- `ModelsTree`: Added ability to show models without elements.
+- Added context menu support.
+
+### Patches
+
+- Removed `@itwin/itwinui-variables` from dependencies.
+
+## 1.0.0
+Mon, 31 Jul 2023 14:10:09 GMT
+
+### Breaking changes
+
+- Trees: Make eye checkboxes static on horizontal scroll.
+- `createVisibilityTreeNodeRenderer` now takes a `props` object of type `VisibilityTreeNodeRendererProps`. It contains two new configuration options: `levelOffset`, and `disableRootNodeCollapse`.
+- Rename `useVisibilityTreeRenderer` to `createVisibilityTreeRenderer`. It now takes a `props` object of type `VisibilityTreeRendererProps`
+- Bumped AppUI peer dependencies to `^4.3.0`.
+- Renamed `TreeWidgetComponent` to `SelectableTree`.
+- Widget: Reworked the way trees are provided to the widget. Instead of having separate configuration properties for hiding default trees and adding additional trees now there is only one property for supplying a list of trees to show.
+- Refactored `IModelContentTreeProps` to not inherit `HTMLDivElement` props.
+- `IVisibilityHandler`: Methods `getVisibilityStatus` and `changeVisibility` don't take `NodeKey` argument anymore.
+- Models tree: `ModelsTreeProps.enableElementsClassGrouping` has been moved to `ModelsTreeProps.hierarchyConfig.enableElementsClassGrouping`.
+
+### Minor changes
+
+- Models tree: Removed expansion toggle for root node.
+- Widget: Added ability to conditionally show trees.
+- Trees: Decrease whitespace size between the node label and eye checkbox.
+- Added base tree props interface for props shared between trees.
+- External sources tree: Add `ExternalSourcesTreeComponent` (currently `@alpha`).
+- Models tree: Added an option to specialize the class of geometric elements loaded into the hierarchy (see `ModelsTreeHierarchyConfiguration.elementClassSpecification`).
+- Trees: Use search box from the `@itwin/itwinui-react` library.
+
+### Patches
+
+- Trees: Keep child nodes state the same after parent node re-expands.
+- Categories tree: Fixed behavior of the Invert button. Previously, only categories were affected, now sub-categories are affected as well.
+- Handle errors thrown from tree components.
+- Persist tree scroll position when switching between widgets.
+- `Tree Header`: Fixed dropdown buttons menu not theming correctly.
+- `ModelsTree`: Refactor ruleset to not use deprecated `ImageIdOverride` rule. 
+- `ModelsTree`: Always render checkbox to avoid UI shifting when checkbox appear.
 
 ## 0.10.0
 Tue, 23 May 2023 13:16:11 GMT
@@ -12,33 +61,33 @@ Tue, 02 May 2023 16:12:17 GMT
 
 ### Minor changes
 
-- Updated to AppUI 4.0 and Presentation 4.0
+- 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`)
+- 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`
+- 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
+- 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
+- 'ModelsTree': Restored 'HideAll' button behavior to hide only models.
 
 ## 0.7.0
 Mon, 20 Mar 2023 14:48:35 GMT
@@ -46,12 +95,12 @@ 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`
+- 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
+- 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
@@ -59,30 +108,30 @@ 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
+- `ModelsTreeComponent`: ensure that the "show all" and "hide all" buttons affect all iModel content.
+- `ModelsTree`: 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
+- `CategoryTree`: 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
+- 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
+- Add new `defaultTreeId` prop to specify default tree for `TreeWidgetUiItemsProvider`.
 
 ## 0.4.7
 Mon, 30 May 2022 12:44:10 GMT
@@ -96,28 +145,28 @@ Thu, 26 May 2022 15:54:07 GMT
 
 ### Patches
 
-- Allow a caller to specify a default priority for Tree Widget item provider.
+- Allow a caller to specify a default priority for `TreeWidgetUiItemsProvider`.
 
 ## 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
+- Set restore transient state in `TreeWidgetUiItemsProvider` 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
+- 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
+- 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
@@ -131,201 +180,48 @@ 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
+- Allow specifying default panel location.
+- 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
+- Remove deprecated `WidgetControl`, update `UiItemsProvider` initialization.
 
 ## 0.3.0
 Wed, 02 Mar 2022 21:38:51 GMT
 
 ### Minor changes
 
-- Add `IModelContentTree`
+- Add `IModelContentTree`.
 
 ## 0.2.1
 Fri, 04 Feb 2022 00:43:35 GMT
 
 ### Patches
 
-- Update scss to be pulled from cjs dir
+- 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
+- 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
+- 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
+- iTwin.js 3.0 first rc.
 

package/lib/cjs/TreeWidget.d.ts

@@ -7,6 +7,7 @@ import type { LocalizationOptions } from "@itwin/core-i18n";
 export declare class TreeWidget {
     private static _i18n?;
     private static _initialized?;
+    private static _dispose?;
     /**
      * Called by IModelApp to initialize the Tree Widget
      * @param i18n - The internationalization service created by the IModelApp.

package/lib/cjs/TreeWidget.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeWidget = void 0;
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_frontend_1 = require("@itwin/core-frontend");
+const Utils_1 = require("./components/trees/common/Utils");
 /**
  * Entry point for static initialization required by various components used in the package.
  * @public
@@ -21,13 +22,19 @@ class TreeWidget {
             return;
         TreeWidget._initialized = true;
         TreeWidget._i18n = i18n ?? core_frontend_1.IModelApp.localization;
+        TreeWidget._dispose = (0, Utils_1.registerRenderers)();
         return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);
     }
     /** Unregisters the TreeWidget internationalization service namespace */
     static terminate() {
-        if (TreeWidget._i18n)
-            TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace); // eslint-disable-line @itwin/no-internal
-        TreeWidget._i18n = undefined;
+        if (TreeWidget._i18n) {
+            TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);
+            TreeWidget._i18n = undefined;
+        }
+        if (TreeWidget._dispose) {
+            TreeWidget._dispose();
+            TreeWidget._dispose = undefined;
+        }
         TreeWidget._initialized = false;
     }
     /** The internationalization service created by the IModelApp. */

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,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"]}
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,0DAAgD;AAChD,wDAAiD;AACjD,2DAAoE;AAKpE;;;GAGG;AACH,MAAa,UAAU;IAKrB;;;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;QAClD,UAAU,CAAC,QAAQ,GAAG,IAAA,yBAAiB,GAAE,CAAC;QAC1C,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,IAAI,UAAU,CAAC,QAAQ,EAAE;YACvB,UAAU,CAAC,QAAQ,EAAE,CAAC;YACtB,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC;SACjC;QAED,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;AAhED,gCAgEC","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\";\nimport { registerRenderers } from \"./components/trees/common/Utils\";\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  private static _dispose?: () => void;\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    TreeWidget._dispose = registerRenderers();\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    if (TreeWidget._dispose) {\n      TreeWidget._dispose();\n      TreeWidget._dispose = 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 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/SelectableTree.scss

@@ -2,7 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-variables";
 
 .tree-widget-selectable-tree {
   padding: var(--iui-size-xs);

package/lib/cjs/components/trees/VisibilityTreeBase.scss

@@ -3,109 +3,80 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 
-.tree-widget-tree-with-header {
-  width: 100%;
-  height: 100%;
-
-  .tree-widget-tree-header {
-    height: var(--iui-size-xl);
-  }
-
-  .tree-widget-tree-content {
-    height: calc(100% - var(--iui-size-xl));
-  }
-}
-
 .tree-widget-visibility-tree-base {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .ReactWindow__VariableSizeList {
-    >div {
-      min-width: max-content !important; // to override inline class
-    }
-  }
-  .core-tree-node {
-    &.with-checkbox {
-      >.contents {
-        padding-left: calc(var(--iui-size-3xs) / 2);
+  .tree-widget-tree-nodes-list {
+    .core-tree-node {
+      &.with-checkbox {
+        >.contents {
+          padding-left: calc(var(--iui-size-3xs) / 2);
+        }
       }
-    }
 
-    &.disable-expander {
-      >.contents {
-        >.core-tree-expansionToggle {
-          display: none;
+      &.disable-expander {
+        >.contents {
+          >.core-tree-expansionToggle {
+            display: none;
+          }
         }
       }
-    }
 
-    &.is-selected {
-      >.contents {
-        >.visibility-tree-checkbox-container {
-          background-color: var(--iui-color-background-accent-muted)
+      &.is-selected {
+        >.contents {
+          >.visibility-tree-checkbox-container {
+            background-color: var(--iui-color-background-accent-muted)
+          }
         }
       }
-    }
-  }
 
-  .contents {
-    &:hover {
-      > .visibility-tree-checkbox-container {
-        background-color: var(--iui-color-background-hover);
+      .contents {
+        &:hover {
+          .visibility-tree-checkbox-container {
+            background-color: var(--iui-color-background-hover);
+          }
+        }
       }
-    }
 
-    > .visibility-tree-checkbox-container {
-      height: var(--iui-size-l);
-      width: var(--iui-size-l);
-      position: sticky;
-      order: -1;
-      left: 0;
-      background-color: var(--iui-color-background);
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .visibility-tree-checkbox-container {
+        height: var(--iui-size-l);
+        width: var(--iui-size-l);
+        position: sticky;
+        order: -1;
+        left: 0;
+        background-color: var(--iui-color-background);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-      .visibility-tree-checkbox {
-        &:disabled {
-          background-color: transparent;
-        }
+        .visibility-tree-checkbox {
+          &:disabled {
+            background-color: transparent;
+          }
 
-        &:hover {
-          background-color: transparent;
+          &:hover {
+            background-color: transparent;
+          }
         }
       }
     }
-  }
 
-  .filteredTreeOverlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
-    background-color: hsl(var(--iui-color-background) / var(--iui-opacity-2));
-  }
+    &.enlarge {
+      .core-tree-node {
+        .visibility-tree-checkbox-container {
+          height: var(--enlarged-node-height);
+          width: var(--enlarged-node-height);
 
-  .components-tree-errormessage {
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    width: 75%;
-    text-align: center;
-    transform: translate(-50%, -50%);
-    font-style: italic;
-    color: var(--iui-color-text-muted);
+          .visibility-tree-checkbox {
+            --iui-checkbox-target-size: var(--enlarged-node-height);
+          }
+        }
+      }
 
-    .errormessage-header {
-      display: block;
-      font-weight: bold;
+      .without-expander {
+        .visibility-tree-checkbox-container+* {
+          margin-left: var(--enlarged-node-expander-additional-padding);
+        }
+      }
     }
   }
 }

package/lib/cjs/components/trees/VisibilityTreeRenderer.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
+import type { TreeRendererBaseProps } from "./common/TreeRenderer";
 import type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from "@itwin/components-react";
 import type { NodeCheckboxRenderProps } from "@itwin/core-react";
 import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
-import type { VisibilityTreeFilterInfo } from "./Common";
+import type { VisibilityTreeFilterInfo } from "./common/Types";
 /**
  * Props for visibility tree renderer.
  * @public
  */
-export interface VisibilityTreeRendererProps {
+export interface VisibilityTreeRendererProps extends TreeRendererBaseProps {
     /** Props for single node renderer. */
     nodeRendererProps: VisibilityTreeNodeRendererProps;
 }
@@ -39,7 +40,7 @@ export interface VisibilityTreeNodeRendererProps {
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
  * @public
  */
-export declare function createVisibilityTreeRenderer({ nodeRendererProps }: VisibilityTreeRendererProps): (props: TreeRendererProps) => JSX.Element;
+export declare function createVisibilityTreeRenderer({ nodeRendererProps, ...restProps }: VisibilityTreeRendererProps): (treeProps: TreeRendererProps) => JSX.Element;
 /**
  * Creates node renderer which renders node with eye checkbox.
  * @public

package/lib/cjs/components/trees/VisibilityTreeRenderer.js

@@ -9,11 +9,12 @@ const jsx_runtime_1 = require("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.
 *--------------------------------------------------------------------------------------------*/
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const components_react_1 = require("@itwin/components-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const presentation_components_1 = require("@itwin/presentation-components");
-const classnames_1 = __importDefault(require("classnames"));
+const TreeRenderer_1 = require("./common/TreeRenderer");
 /**
  * This constant is taken from `@itwin/core-react`.
  * Defines the size in pixels of the expansion toggle.
@@ -25,9 +26,9 @@ const EXPANSION_TOGGLE_WIDTH = 24;
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
  * @public
  */
-function createVisibilityTreeRenderer({ nodeRendererProps }) {
-    return function VisibilityTreeRenderer(props) {
-        return ((0, jsx_runtime_1.jsx)(components_react_1.TreeRenderer, { ...props, nodeRenderer: createVisibilityTreeNodeRenderer(nodeRendererProps) }));
+function createVisibilityTreeRenderer({ nodeRendererProps, ...restProps }) {
+    return function VisibilityTreeRenderer(treeProps) {
+        return (0, jsx_runtime_1.jsx)(TreeRenderer_1.TreeRenderer, { ...treeProps, ...restProps, nodeRenderer: createVisibilityTreeNodeRenderer(nodeRendererProps) });
     };
 }
 exports.createVisibilityTreeRenderer = createVisibilityTreeRenderer;