@itwin/tree-widget-react 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @itwin/tree-widget-react
 
-This log was last generated on Mon, 31 Jul 2023 14:10:09 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
@@ -47,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
@@ -81,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
@@ -94,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
@@ -131,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
@@ -166,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;