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

package/CHANGELOG.md

@@ -1,26 +1,9 @@
 # Change Log - @itwin/tree-widget-react
 
-This log was last generated on Thu, 06 Feb 2025 13:36:08 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Jan 2025 18:30:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 3.4.1
-
-Thu, 06 Feb 2025 13:36:08 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

@@ -42,9 +42,6 @@ Typically, the package is used with an [AppUI](https://github.com/iTwin/appui/tr
 
 In any case, **before** using any APIs or components delivered with the package, it needs to be initialized:
 
-<!-- [[include: [TreeWidget.TreeWidgetInitializeImports, TreeWidget.TreeWidgetInitialize], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { TreeWidget } from "@itwin/tree-widget-react";
 import { IModelApp } from "@itwin/core-frontend";
@@ -52,13 +49,8 @@ import { IModelApp } from "@itwin/core-frontend";
 await TreeWidget.initialize(IModelApp.localization);
 ```
 
-<!-- END EXTRACTION -->
-
 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 `createTreeWidget` function that can be used to add the tree widget to UI through a `UiItemsProvider`:
 
-<!-- [[include: [TreeWidget.RegisterExampleImports, TreeWidget.RegisterExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { UiItemsManager } from "@itwin/appui-react";
 import { createTreeWidget, ModelsTreeComponent } from "@itwin/tree-widget-react";
@@ -90,8 +82,6 @@ UiItemsManager.register({
 });
 ```
 
-<!-- END EXTRACTION -->
-
 As seen in the above code snippet, `createTreeWidget` 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
@@ -110,9 +100,6 @@ The component renders a tree that tries to replicate how a typical "Models" tree
 
 Typical usage:
 
-<!-- [[include: [TreeWidget.ModelsTreeExampleImports, TreeWidget.ModelsTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { ModelsTreeComponent } from "@itwin/tree-widget-react";
 
@@ -132,8 +119,6 @@ function MyWidget() {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 Available header buttons:
 
 - `ModelsTreeComponent.ShowAllButton` makes everything in the iModel displayed.
@@ -158,11 +143,7 @@ This package provides building blocks for custom models tree:
 
 Example:
 
-<!-- [[include: [TreeWidget.CustomModelsTreeExampleImports, TreeWidget.CustomModelsTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```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";
@@ -213,15 +194,10 @@ function CustomModelsTreeComponent({ imodel, viewport, getSchemaContext, selecti
 }
 ```
 
-<!-- END EXTRACTION -->
-
 #### Displaying a subset of the tree
 
 Models tree allows displaying a subset of all nodes by providing a `getFilteredPaths` function, which receives a `createInstanceKeyPaths` function for creating hierarchy node paths from instance keys or an instance label and returns a list of hierarchy node paths targeting some nodes. When these paths are provided, the displayed hierarchy consists only of the targeted nodes, their ancestors, and their children. Example implementation of `getFilteredPaths`:
 
-<!-- [[include: [TreeWidget.GetFilteredPathsComponentExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 type UseModelsTreeProps = Parameters<typeof useModelsTree>[0];
 type GetFilteredPathsType = Exclude<UseModelsTreeProps["getFilteredPaths"], undefined>;
@@ -257,8 +233,6 @@ function CustomModelsTreeComponent({ viewport, selectionStorage, imodel, targetI
 }
 ```
 
-<!-- END EXTRACTION -->
-
 ### 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.
@@ -267,9 +241,6 @@ The component, based on the active view, renders a hierarchy of either spatial (
 
 Typical usage:
 
-<!-- [[include: [TreeWidget.CategoriesTreeExampleImports, TreeWidget.CategoriesTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { CategoriesTreeComponent } from "@itwin/tree-widget-react";
 
@@ -286,8 +257,6 @@ function MyWidget() {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 Available header buttons:
 
 - `ModelsTreeComponent.ShowAllButton` makes all categories and their subcategories displayed.
@@ -303,9 +272,6 @@ This package provides building blocks for custom categories tree:
 
 Example:
 
-<!-- [[include: [TreeWidget.CustomCategoriesTreeExampleImports, TreeWidget.CustomCategoriesTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { TreeWithHeader, useCategoriesTree, useCategoriesTreeButtonProps, VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
 import type { IModelConnection, Viewport } from "@itwin/core-frontend";
@@ -325,9 +291,11 @@ function CustomCategoriesTreeRenderer(props: CustomCategoriesTreeRendererProps)
     },
     [getLabel],
   );
+
   const getSublabel = useCallback<Required<VisibilityTreeRendererProps>["getSublabel"]>(() => {
     return <>Custom sub label</>;
   }, []);
+
   return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabel} />;
 }
 
@@ -341,6 +309,7 @@ interface CustomCategoriesTreeProps {
 function CustomCategoriesTreeComponent({ imodel, viewport, getSchemaContext, selectionStorage }: CustomCategoriesTreeProps) {
   const { buttonProps } = useCategoriesTreeButtonProps({ viewport });
   const { categoriesTreeProps, rendererProps } = useCategoriesTree({ activeView: viewport, filter: "" });
+
   return (
     <TreeWithHeader
       buttons={[
@@ -360,8 +329,6 @@ function CustomCategoriesTreeComponent({ imodel, viewport, getSchemaContext, sel
 }
 ```
 
-<!-- END EXTRACTION -->
-
 ### iModel content tree
 
 The component renders a similar hierarchy to [Models tree](#models-tree), but with the following changes:
@@ -377,9 +344,6 @@ In general, the component is expected to be used by advanced users to inspect co
 
 Typical usage:
 
-<!-- [[include: [TreeWidget.ImodelContentTreeExampleImports, TreeWidget.ImodelContentTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { IModelContentTreeComponent } from "@itwin/tree-widget-react";
 
@@ -395,8 +359,6 @@ function MyWidget() {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 ### Custom trees
 
 The package delivers a set of building blocks for creating trees that look and feel similar to the tree components provided by this package.
@@ -410,9 +372,6 @@ A "basic" tree is a tree that renders the hierarchy without visibility control -
 
 Example:
 
-<!-- [[include: [TreeWidget.CustomTreeExampleImports, TreeWidget.CustomTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import type { ComponentPropsWithoutRef } from "react";
 import type { IModelConnection } from "@itwin/core-frontend";
@@ -471,8 +430,6 @@ function MyTree({ imodel }: MyTreeProps) {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 #### Custom visibility tree
 
 A visibility tree is a tree that renders the hierarchy and allows controlling visibility control through the use of "eye" checkboxes - see [Models](#models-tree) and [Categories](#categories-tree) trees. Core components:
@@ -482,9 +439,6 @@ A visibility tree is a tree that renders the hierarchy and allows controlling vi
 
 Example:
 
-<!-- [[include: [TreeWidget.CustomVisibilityTreeExampleImports, TreeWidget.CustomVisibilityTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { BeEvent } from "@itwin/core-bentley";
 import { VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
@@ -562,8 +516,6 @@ function MyVisibilityTree({ imodel }: MyVisibilityTreeProps) {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 ### Hierarchy level size limiting
 
 All tree components in this package enforce a hierarchy level size limit. This means that when a node is expanded, only a certain number of child nodes are loaded. The limit is enforced to prevent loading too many nodes at once and to keep the performance of the tree components at an acceptable level.
@@ -584,9 +536,6 @@ Tree components that support selection synchronization, require a unified select
 
 Typically, we want one unified selection storage per application - this makes sure that selection in all application's components is synchronized. Below is an example implementation of `getUnifiedSelectionStorage` function that creates the storage and clears it when an iModel is closed:
 
-<!-- [[include: [TreeWidget.SelectionStorageExampleImports, TreeWidget.SelectionStorageExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { IModelConnection } from "@itwin/core-frontend";
 import { createStorage } from "@itwin/unified-selection";
@@ -604,30 +553,20 @@ function getUnifiedSelectionStorage(): SelectionStorage {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 In case the application is also using components driven by APIs from `@itwin/presentation-frontend` package, which has its own selection manager, the single unified selection storage object should be passed to [`initialize`](https://www.itwinjs.org/reference/presentation-frontend/core/presentation/initializestatic/) function, e.g.:
 
-<!-- [[include: [TreeWidget.SelectionStorageInitializeExampleImports, TreeWidget.SelectionStorageInitializeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { Presentation } from "@itwin/presentation-frontend";
 
 await Presentation.initialize({ selection: { selectionStorage: getUnifiedSelectionStorage() } });
 ```
 
-<!-- END EXTRACTION -->
-
 ### 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:
 
-<!-- [[include: [TreeWidget.GetSchemaContextExampleImports, TreeWidget.GetSchemaContextExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { SchemaContext } from "@itwin/ecschema-metadata";
 import { ECSchemaRpcLocater } from "@itwin/ecschema-rpcinterface-common";
@@ -648,8 +587,6 @@ function getSchemaContext(imodel: IModelConnection) {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 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
@@ -697,9 +634,6 @@ Where `{tree}` specifies which tree component the feature is of.
 
 For individual tree components the callbacks should be supplied through props:
 
-<!-- [[include: [TreeWidget.TelemetryTreeComponentExampleImports, TreeWidget.TelemetryTreeComponentExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { IModelContentTreeComponent } from "@itwin/tree-widget-react";
 
@@ -719,13 +653,8 @@ function MyWidget() {
 }
 ```
 
-<!-- END EXTRACTION -->
-
 For custom tree components `TelemetryContextProvider` should be used:
 
-<!-- [[include: [TreeWidget.TelemetryCustomTreeExampleImports, TreeWidget.TelemetryCustomTreeExample], tsx]] -->
-<!-- BEGIN EXTRACTION -->
-
 ```tsx
 import { TelemetryContextProvider, useCategoriesTree, VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
 
@@ -760,5 +689,3 @@ function MyTree() {
   // see "Custom trees" section for more example implementations
 }
 ```
-
-<!-- END EXTRACTION -->

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

@@ -43,5 +43,5 @@ export interface SelectableTreeProps {
  * A component that renders a tree (combo box) selector and the selected tree component.
  * @public
  */
-export declare function SelectableTree(props: SelectableTreeProps): JSX.Element | null;
+export declare function SelectableTree(props: SelectableTreeProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=SelectableTree.d.ts.map

package/lib/esm/tree-widget-react/components/SelectableTree.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import "./SelectableTree.scss";
 import { useEffect, useState } from "react";
 import { useActiveIModelConnection } from "@itwin/appui-react";
-import { Flex, ProgressLinear } from "@itwin/itwinui-react";
+import { Spinner } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../TreeWidget.js";
 import { TreeSelector } from "./TreeSelector.js";
 /**
@@ -23,7 +23,7 @@ export function SelectableTree(props) {
 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), density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
+    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(TreeSelector, { ...getTreeSelectorProps(trees), onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = useState();
@@ -63,7 +63,7 @@ function getTreeSelectorProps(trees) {
                 {
                     id: "loading",
                     label: "",
-                    render: () => (_jsx(Delayed, { children: _jsx(ProgressLinear, { indeterminate: true }) })),
+                    render: () => (_jsx(Delayed, { children: _jsx(Spinner, {}) })),
                 },
             ],
         };
@@ -75,7 +75,7 @@ function getTreeSelectorProps(trees) {
                 {
                     id: "no-trees",
                     label: "",
-                    render: () => (_jsx(Flex, { justifyContent: "center", alignItems: "center", className: "tree-widget-no-trees-container", children: TreeWidget.translate("selectableTree.noTrees") })),
+                    render: () => (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, className: "tree-widget-no-trees-container", children: TreeWidget.translate("selectableTree.noTrees") })),
                 },
             ],
         };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/SelectableTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA+CjD;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAC,qBAAqB,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC9D,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAyD;IACtF,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjD,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAEtD,OAAO,CACL,cAAK,SAAS,EAAC,6BAA6B,YAC1C,KAAC,YAAY,OACP,oBAAoB,CAAC,KAAK,CAAC,EAC/B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAClD,aAAa,EAAE,KAAK,CAAC,aAAa,GAClC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,eAA2C,EAAE,MAAwB;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAA2B,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACnE,IAAI,CAAC,QAAQ,EAAE;gBACb,QAAQ,CAAC,YAAY,CAAC,CAAC;aACxB;QACH,CAAC,CAAC,EAAE,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,QAAQ,GAAG,IAAI,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,UAAU,cAAc,CAAC,eAA2C,EAAE,MAAwB;IACjG,MAAM,gBAAgB,GAAG,KAAK,EAAE,OAAiC,EAAE,EAAE;QACnE,IAAI,OAAO,CAAC,UAAU,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;YAC3E,OAAO,SAAS,CAAC;SAClB;QACD,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,EAAE;YACd,KAAK,EAAE,OAAO,CAAC,QAAQ,EAAE;YACzB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,SAAS,EAAE,OAAO,CAAC,SAAS;SAC7B,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,CAA4B,CAAC;AACpI,CAAC;AAED,SAAS,oBAAoB,CAAC,KAA+B;IAC3D,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,OAAO;YACL,wBAAwB,EAAE,SAAS;YACnC,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,OAAO,cACN,KAAC,cAAc,IAAC,aAAa,EAAE,IAAI,GAAI,GAC/B,CACX;iBACF;aACF;SACF,CAAC;KACH;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO;YACL,wBAAwB,EAAE,UAAU;YACpC,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,UAAU;oBACd,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,IAAI,IAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,gCAAgC,YACzF,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAC1C,CACR;iBACF;aACF;SACF,CAAC;KACH;IAED,OAAO;QACL,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;QACrC,KAAK;KACN,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAyC;IAC/E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;YACzB,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,EAAE,KAAK,CAAC,CAAC;QACV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./SelectableTree.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Flex, ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { TreeSelector } from \"./TreeSelector.js\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector.js\";\n\n/**\n * Props for rendering trees\n * @public\n */\nexport interface SelectableTreeRenderProps {\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Definition of a tree component displayed in `SelectableTree`.\n * @public\n */\nexport interface SelectableTreeDefinition {\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: SelectableTreeRenderProps) => 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  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `SelectableTree`\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: SelectableTreeDefinition[];\n  density?: \"enlarged\" | \"default\";\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 * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n  const imodel = useActiveIModelConnection();\n  if (!imodel) {\n    return null;\n  }\n  return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: SelectableTreeProps & { imodel: IModelConnection }) {\n  const { trees: treeDefinitions, imodel } = props;\n  const trees = useActiveTrees(treeDefinitions, imodel);\n\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <TreeSelector\n        {...getTreeSelectorProps(trees)}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: SelectableTreeDefinition[], 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: SelectableTreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: SelectableTreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\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 getTreeSelectorProps(trees?: TreeContentDefinition[]): TreeSelectorProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          render: () => (\n            <Delayed>\n              <ProgressLinear indeterminate={true} />\n            </Delayed>\n          ),\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\n          label: \"\",\n          render: () => (\n            <Flex justifyContent=\"center\" alignItems=\"center\" className=\"tree-widget-no-trees-container\">\n              {TreeWidget.translate(\"selectableTree.noTrees\")}\n            </Flex>\n          ),\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const id = setTimeout(() => {\n      setShow(true);\n    }, delay);\n    return () => {\n      clearTimeout(id);\n    };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}
+{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/SelectableTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA+CjD;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAC,qBAAqB,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC9D,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAyD;IACtF,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjD,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAEtD,OAAO,CACL,cAAK,SAAS,EAAC,6BAA6B,YAC1C,KAAC,YAAY,OAAK,oBAAoB,CAAC,KAAK,CAAC,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,GAAI,GACrI,CACP,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,eAA2C,EAAE,MAAwB;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAA2B,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACnE,IAAI,CAAC,QAAQ,EAAE;gBACb,QAAQ,CAAC,YAAY,CAAC,CAAC;aACxB;QACH,CAAC,CAAC,EAAE,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,QAAQ,GAAG,IAAI,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,UAAU,cAAc,CAAC,eAA2C,EAAE,MAAwB;IACjG,MAAM,gBAAgB,GAAG,KAAK,EAAE,OAAiC,EAAE,EAAE;QACnE,IAAI,OAAO,CAAC,UAAU,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;YAC3E,OAAO,SAAS,CAAC;SAClB;QACD,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,EAAE;YACd,KAAK,EAAE,OAAO,CAAC,QAAQ,EAAE;YACzB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,SAAS,EAAE,OAAO,CAAC,SAAS;SAC7B,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,CAA4B,CAAC;AACpI,CAAC;AAED,SAAS,oBAAoB,CAAC,KAA+B;IAC3D,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,OAAO;YACL,wBAAwB,EAAE,SAAS;YACnC,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,OAAO,cAEN,KAAC,OAAO,KAAG,GACH,CACX;iBACF;aACF;SACF,CAAC;KACH;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO;YACL,wBAAwB,EAAE,UAAU;YACpC,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,UAAU;oBACd,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAC,gCAAgC,YACxH,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAC3C,CACP;iBACF;aACF;SACF,CAAC;KACH;IAED,OAAO;QACL,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;QACrC,KAAK;KACN,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAyC;IAC/E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;YACzB,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,EAAE,KAAK,CAAC,CAAC;QACV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./SelectableTree.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Spinner } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { TreeSelector } from \"./TreeSelector.js\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector.js\";\n/**\n * Props for rendering trees\n * @public\n */\nexport interface SelectableTreeRenderProps {\n  density?: \"enlarged\" | \"default\";\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 SelectableTreeDefinition {\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: SelectableTreeRenderProps) => 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  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `SelectableTree`\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: SelectableTreeDefinition[];\n  density?: \"enlarged\" | \"default\";\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 * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n  const imodel = useActiveIModelConnection();\n  if (!imodel) {\n    return null;\n  }\n  return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: SelectableTreeProps & { imodel: IModelConnection }) {\n  const { trees: treeDefinitions, imodel } = props;\n  const trees = useActiveTrees(treeDefinitions, imodel);\n\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <TreeSelector {...getTreeSelectorProps(trees)} onPerformanceMeasured={props.onPerformanceMeasured} onFeatureUsed={props.onFeatureUsed} />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: SelectableTreeDefinition[], 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: SelectableTreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: SelectableTreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\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 getTreeSelectorProps(trees?: TreeContentDefinition[]): TreeSelectorProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          render: () => (\n            <Delayed>\n              {/* <ProgressLinear indeterminate={true} /> */}\n              <Spinner />\n            </Delayed>\n          ),\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\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 Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const id = setTimeout(() => {\n      setShow(true);\n    }, delay);\n    return () => {\n      clearTimeout(id);\n    };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}

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

@@ -18,7 +18,6 @@ export interface TreeContentDefinition {
 export interface TreeSelectorProps {
     defaultSelectedContentId: string;
     trees: TreeContentDefinition[];
-    density?: "enlarged" | "default";
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
     onFeatureUsed?: (feature: string) => void;
 }
@@ -27,5 +26,5 @@ export interface TreeSelectorProps {
  * allowing to choose which of the provided tree components should be rendered at the bottom.
  * @internal
  */
-export declare function TreeSelector(props: TreeSelectorProps): JSX.Element;
+export declare function TreeSelector({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }: TreeSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TreeSelector.d.ts.map

package/lib/esm/tree-widget-react/components/TreeSelector.js

@@ -1,26 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } 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 "./TreeSelector.scss";
-import { useMemo, useState } from "react";
-import { MenuItem, Select } from "@itwin/itwinui-react";
+import { useState } from "react";
+import { Select } from "@itwin/itwinui-react/bricks";
 /**
  * A component that accepts a list of trees and renders a select box at the top,
  * allowing to choose which of the provided tree components should be rendered at the bottom.
  * @internal
  */
-export function TreeSelector(props) {
-    const [selectedContentId, setSelectedContentId] = useState(props.defaultSelectedContentId);
-    const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];
-    const isEnlarged = props.density === "enlarged";
-    const options = useMemo(() => {
-        return props.trees.map((c) => ({ label: c.label, value: c.id, startIcon: c.startIcon }));
-    }, [props.trees]);
-    return (_jsxs("div", { className: "presentation-components-tree-selector-content", children: [_jsx("div", { className: "presentation-components-tree-selector-content-header", children: options.length > 0 && (_jsx(Select, { options: options, value: selectedContent.id, size: isEnlarged ? "large" : "small", onChange: (treeId) => {
-                        props.onFeatureUsed?.(`choose-${treeId}`);
-                        setSelectedContentId(treeId);
-                    }, itemRenderer: (option, itemProps) => (_jsx(MenuItem, { ...option, isSelected: itemProps.isSelected, size: isEnlarged ? "large" : "default", children: option.label })) })) }), _jsx("div", { className: "presentation-components-tree-selector-content-wrapper", children: selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) })] }));
+export function TreeSelector({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }) {
+    const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);
+    const selectedContent = trees.find((c) => c.id === selectedContentId) ?? trees[0];
+    return (_jsxs("div", { className: "presentation-components-tree-selector-content", children: [_jsx("div", { className: "presentation-components-tree-selector-content-header", children: trees.length > 0 && (_jsx(Select.Root, { children: _jsx(Select.HtmlSelect, { value: selectedContent.id, onChange: (e) => {
+                            const treeId = e.target.value;
+                            onFeatureUsed?.(`choose-${treeId}`);
+                            setSelectedContentId(treeId);
+                        }, children: trees.map((tree) => (_jsxs("option", { value: tree.id, children: [tree.startIcon, tree.label] }, tree.id))) }) })) }), _jsx("div", { className: "presentation-components-tree-selector-content-wrapper", children: selectedContent?.render({ onPerformanceMeasured, onFeatureUsed }) })] }));
 }
 //# sourceMappingURL=TreeSelector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeSelector.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA4BxD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC3F,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9F,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC;IAEhD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAA2B,CAAC;IACrH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,eAAK,SAAS,EAAC,+CAA+C,aAC5D,cAAK,SAAS,EAAC,sDAAsD,YAClE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACpC,QAAQ,EAAE,CAAC,MAAc,EAAE,EAAE;wBAC3B,KAAK,CAAC,aAAa,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;wBAC1C,oBAAoB,CAAC,MAAM,CAAC,CAAC;oBAC/B,CAAC,EACD,YAAY,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CACnC,KAAC,QAAQ,OAAK,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAC3F,MAAM,CAAC,KAAK,GACJ,CACZ,GACD,CACH,GACG,EACN,cAAK,SAAS,EAAC,uDAAuD,YACnE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,GACxI,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeSelector.scss\";\nimport { useMemo, useState } from \"react\";\nimport { MenuItem, Select } from \"@itwin/itwinui-react\";\n\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport type { SelectableTreeRenderProps } from \"./SelectableTree.js\";\n\n/**\n * A definition for trees displayed in `TreeSelector`\n * @internal\n */\nexport interface TreeContentDefinition {\n  id: string;\n  label: string;\n  render: (props: SelectableTreeRenderProps) => React.ReactNode;\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `TreeSelector`\n * @internal\n */\nexport interface TreeSelectorProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that accepts a list of trees and renders a select box at the top,\n * allowing to choose which of the provided tree components should be rendered at the bottom.\n * @internal\n */\nexport function TreeSelector(props: TreeSelectorProps) {\n  const [selectedContentId, setSelectedContentId] = useState(props.defaultSelectedContentId);\n  const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];\n  const isEnlarged = props.density === \"enlarged\";\n\n  const options = useMemo(() => {\n    return props.trees.map((c) => ({ label: c.label, value: c.id, startIcon: c.startIcon })) as SelectOption<string>[];\n  }, [props.trees]);\n\n  return (\n    <div className=\"presentation-components-tree-selector-content\">\n      <div className=\"presentation-components-tree-selector-content-header\">\n        {options.length > 0 && (\n          <Select\n            options={options}\n            value={selectedContent.id}\n            size={isEnlarged ? \"large\" : \"small\"}\n            onChange={(treeId: string) => {\n              props.onFeatureUsed?.(`choose-${treeId}`);\n              setSelectedContentId(treeId);\n            }}\n            itemRenderer={(option, itemProps) => (\n              <MenuItem {...option} isSelected={itemProps.isSelected} size={isEnlarged ? \"large\" : \"default\"}>\n                {option.label}\n              </MenuItem>\n            )}\n          />\n        )}\n      </div>\n      <div className=\"presentation-components-tree-selector-content-wrapper\">\n        {selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed })}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeSelector.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AA0BrD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAqB;IACvH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,wBAAwB,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAElF,OAAO,CACL,eAAK,SAAS,EAAC,+CAA+C,aAC5D,cAAK,SAAS,EAAC,sDAAsD,YAClE,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,MAAM,CAAC,UAAU,IAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;4BAC9B,aAAa,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;4BACpC,oBAAoB,CAAC,MAAM,CAAC,CAAC;wBAC/B,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,kBAAsB,KAAK,EAAE,IAAI,CAAC,EAAE,aACjC,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,KAAK,KAFA,IAAI,CAAC,EAAE,CAGX,CACV,CAAC,GACgB,GACR,CACf,GACG,EACN,cAAK,SAAS,EAAC,uDAAuD,YAAE,eAAe,EAAE,MAAM,CAAC,EAAE,qBAAqB,EAAE,aAAa,EAAE,CAAC,GAAO,IAC5I,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeSelector.scss\";\nimport { useState } from \"react\";\nimport { Select } from \"@itwin/itwinui-react/bricks\";\n\nimport type { SelectableTreeRenderProps } from \"./SelectableTree.js\";\n\n/**\n * A definition for trees displayed in `TreeSelector`\n * @internal\n */\nexport interface TreeContentDefinition {\n  id: string;\n  label: string;\n  render: (props: SelectableTreeRenderProps) => React.ReactNode;\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `TreeSelector`\n * @internal\n */\nexport interface TreeSelectorProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that accepts a list of trees and renders a select box at the top,\n * allowing to choose which of the provided tree components should be rendered at the bottom.\n * @internal\n */\nexport function TreeSelector({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }: TreeSelectorProps) {\n  const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);\n  const selectedContent = trees.find((c) => c.id === selectedContentId) ?? trees[0];\n\n  return (\n    <div className=\"presentation-components-tree-selector-content\">\n      <div className=\"presentation-components-tree-selector-content-header\">\n        {trees.length > 0 && (\n          <Select.Root>\n            <Select.HtmlSelect\n              value={selectedContent.id}\n              onChange={(e) => {\n                const treeId = e.target.value;\n                onFeatureUsed?.(`choose-${treeId}`);\n                setSelectedContentId(treeId);\n              }}\n            >\n              {trees.map((tree) => (\n                <option key={tree.id} value={tree.id}>\n                  {tree.startIcon}\n                  {tree.label}\n                </option>\n              ))}\n            </Select.HtmlSelect>\n          </Select.Root>\n        )}\n      </div>\n      <div className=\"presentation-components-tree-selector-content-wrapper\">{selectedContent?.render({ onPerformanceMeasured, onFeatureUsed })}</div>\n    </div>\n  );\n}\n"]}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./TreeWidgetUiItemsProvider.scss";
 import type { Widget } from "@itwin/appui-react";
 import type { SelectableTreeDefinition, SelectableTreeProps } from "./SelectableTree.js";
@@ -31,6 +30,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): JSX.Element;
+export declare function TreeWidgetComponent(props: SelectableTreeProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TreeWidgetUiItemsProvider.d.ts.map

package/lib/esm/tree-widget-react/components/TreeWidgetUiItemsProvider.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, 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.
@@ -8,8 +8,6 @@ import { useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { StagePanelLocation, StagePanelSection, useTransientState } from "@itwin/appui-react";
 import { SvgHierarchyTree } from "@itwin/itwinui-icons-react";
-import { SvgError } from "@itwin/itwinui-illustrations-react";
-import { Button, NonIdealState } from "@itwin/itwinui-react";
 import { TreeWidget } from "../TreeWidget.js";
 import { SelectableTree } from "./SelectableTree.js";
 /**
@@ -38,8 +36,8 @@ export function TreeWidgetComponent(props) {
     const ref = useTreeWidgetTransientState();
     return (_jsx("div", { ref: ref, className: "tree-widget", children: _jsx(ErrorBoundary, { FallbackComponent: ErrorState, children: _jsx(SelectableTree, { ...props }) }) }));
 }
-function ErrorState({ resetErrorBoundary }) {
-    return (_jsx(NonIdealState, { svg: _jsx(SvgError, {}), heading: TreeWidget.translate("errorState.title"), description: TreeWidget.translate("errorState.description"), actions: _jsx(Button, { styleType: "high-visibility", onClick: resetErrorBoundary, children: TreeWidget.translate("errorState.retryButtonLabel") }) }));
+function ErrorState({}) {
+    return _jsx(_Fragment, { children: " ERROR WINDOW TBD " });
 }
 function useTreeWidgetTransientState() {
     const { ref, persist, restore } = useTreeStorage();

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

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetUiItemsProvider.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 \"./TreeWidgetUiItemsProvider.scss\";\nimport { useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, useTransientState } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { SelectableTree } from \"./SelectableTree.js\";\n\nimport type { Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeDefinition, SelectableTreeProps } from \"./SelectableTree.js\";\nimport type { FallbackProps } from \"react-error-boundary\";\nimport type { Ref } from \"react\";\n\n/**\n * Props for `createWidget`.\n * @public\n */\ninterface TreeWidgetProps {\n  /**\n   * Trees to show in the widget.\n   * @see ModelsTreeComponent\n   * @see CategoriesTreeComponent\n   * @see ExternalSourcesTreeComponent\n   * @see IModelContentTreeComponent\n   */\n  trees: SelectableTreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  /** Callback that is invoked when a tracked feature is used. */\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.\n * @public\n */\nexport function createTreeWidget(props: TreeWidgetProps): Widget {\n  return {\n    id: \"tree-widget-react:trees\",\n    label: TreeWidget.translate(\"widget.label\"),\n    icon: <SvgHierarchyTree />,\n    layouts: {\n      standard: {\n        section: StagePanelSection.Start,\n        location: StagePanelLocation.Right,\n      },\n    },\n    content: (\n      <TreeWidgetComponent\n        trees={props.trees}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    ),\n  };\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeWidgetTransientState();\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"errorState.title\")}\n      description={TreeWidget.translate(\"errorState.description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"errorState.retryButtonLabel\")}\n        </Button>\n      }\n    />\n  );\n}\n\nfunction useTreeWidgetTransientState() {\n  const { ref, persist, restore } = useTreeStorage();\n  useTransientState(persist, restore);\n  return ref;\n}\n\ninterface UseTreeStorageResult {\n  ref: Ref<HTMLDivElement>;\n  persist: () => void;\n  restore: () => void;\n}\n\nfunction useTreeStorage(): UseTreeStorageResult {\n  const ref = useRef<HTMLDivElement>(null);\n  const scrollTop = useRef<number | undefined>();\n\n  const getContainer = () => {\n    return ref.current?.querySelector(\"#tw-tree-renderer-container\");\n  };\n\n  const persist = () => {\n    const container = getContainer();\n    scrollTop.current = container?.scrollTop;\n  };\n\n  const restore = () => {\n    setTimeout(() => {\n      const container = getContainer();\n      if (container && scrollTop.current) {\n        container.scrollTop = scrollTop.current;\n      }\n    });\n  };\n\n  return { ref, persist, restore };\n}\n"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA4BrD;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAsB;IACrD,OAAO;QACL,EAAE,EAAE,yBAAyB;QAC7B,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,cAAc,CAAC;QAC3C,IAAI,EAAE,KAAC,gBAAgB,KAAG;QAC1B,OAAO,EAAE;YACP,QAAQ,EAAE;gBACR,OAAO,EAAE,iBAAiB,CAAC,KAAK;gBAChC,QAAQ,EAAE,kBAAkB,CAAC,KAAK;aACnC;SACF;QACD,OAAO,EAAE,CACP,KAAC,mBAAmB,IAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAClD,aAAa,EAAE,KAAK,CAAC,aAAa,GAClC,CACH;KACF,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA0B;IAC5D,MAAM,GAAG,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YACpC,KAAC,aAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,KAAC,cAAc,OAAK,KAAK,GAAI,GACf,GACZ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAiB;IACnC,OAAO,mDAAuB,CAAC;AACjC,CAAC;AAED,SAAS,2BAA2B;IAClC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACnD,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC;AAQD,SAAS,cAAc;IACrB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,MAAM,EAAsB,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,6BAA6B,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;QACjC,SAAS,CAAC,OAAO,GAAG,SAAS,EAAE,SAAS,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;YACjC,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE;gBAClC,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;aACzC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeWidgetUiItemsProvider.scss\";\nimport { useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, useTransientState } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { SelectableTree } from \"./SelectableTree.js\";\n\nimport type { Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeDefinition, SelectableTreeProps } from \"./SelectableTree.js\";\nimport type { FallbackProps } from \"react-error-boundary\";\nimport type { Ref } from \"react\";\n\n/**\n * Props for `createWidget`.\n * @public\n */\ninterface TreeWidgetProps {\n  /**\n   * Trees to show in the widget.\n   * @see ModelsTreeComponent\n   * @see CategoriesTreeComponent\n   * @see ExternalSourcesTreeComponent\n   * @see IModelContentTreeComponent\n   */\n  trees: SelectableTreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  /** Callback that is invoked when a tracked feature is used. */\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.\n * @public\n */\nexport function createTreeWidget(props: TreeWidgetProps): Widget {\n  return {\n    id: \"tree-widget-react:trees\",\n    label: TreeWidget.translate(\"widget.label\"),\n    icon: <SvgHierarchyTree />,\n    layouts: {\n      standard: {\n        section: StagePanelSection.Start,\n        location: StagePanelLocation.Right,\n      },\n    },\n    content: (\n      <TreeWidgetComponent\n        trees={props.trees}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    ),\n  };\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeWidgetTransientState();\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({}: FallbackProps) {\n  return <> ERROR WINDOW TBD </>;\n}\n\nfunction useTreeWidgetTransientState() {\n  const { ref, persist, restore } = useTreeStorage();\n  useTransientState(persist, restore);\n  return ref;\n}\n\ninterface UseTreeStorageResult {\n  ref: Ref<HTMLDivElement>;\n  persist: () => void;\n  restore: () => void;\n}\n\nfunction useTreeStorage(): UseTreeStorageResult {\n  const ref = useRef<HTMLDivElement>(null);\n  const scrollTop = useRef<number | undefined>();\n\n  const getContainer = () => {\n    return ref.current?.querySelector(\"#tw-tree-renderer-container\");\n  };\n\n  const persist = () => {\n    const container = getContainer();\n    scrollTop.current = container?.scrollTop;\n  };\n\n  const restore = () => {\n    setTimeout(() => {\n      const container = getContainer();\n      if (container && scrollTop.current) {\n        container.scrollTop = scrollTop.current;\n      }\n    });\n  };\n\n  return { ref, persist, restore };\n}\n"]}

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

@@ -4,7 +4,6 @@ import type { Viewport } from "@itwin/core-frontend";
 /** @public */
 export interface TreeHeaderButtonProps {
     viewport: Viewport;
-    density?: "default" | "enlarged";
     onFeatureUsed?: (feature: string) => void;
 }
 /** @beta */
@@ -28,6 +27,6 @@ interface TreeHeaderProps {
     density?: "default" | "enlarged";
     className?: string;
 }
-export declare function TreeHeader(props: PropsWithChildren<TreeHeaderProps>): JSX.Element;
+export declare function TreeHeader(props: PropsWithChildren<TreeHeaderProps>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TreeHeader.d.ts.map