@itwin/tree-widget-react 1.2.2 → 2.0.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @itwin/tree-widget-react
 
-This log was last generated on Tue, 30 Jan 2024 13:20:25 GMT and should not be manually modified.
+This log was last generated on Wed, 06 Mar 2024 15:24:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0
+
+Wed, 06 Mar 2024 15:24:12 GMT
+
+### Major changes
+
+- Update `@itwin/itwinui-react` dependency to `3.x` ([#771](https://github.com/iTwin/viewer-components-react/pull/771))
+- Bumped `@itwin/presentation-components` peer dependency version to `^5.0.0`. ([#789](https://github.com/iTwin/viewer-components-react/pull/789))
+- Bumped AppUI peer dependencies version to `^4.10.0`. ([#789](https://github.com/iTwin/viewer-components-react/pull/789))
+
+### Minor changes
+
+- Tree Widget: Updated header and its content to be touch friendly when using expanded layout. ([#782](https://github.com/iTwin/viewer-components-react/pull/782))
+- Added React 18 support. ([#728](https://github.com/iTwin/viewer-components-react/pull/728))
+- Models Tree: zoom to viewport element on node double-click. ([#704](https://github.com/iTwin/viewer-components-react/pull/704))
+- Tree Widget: allow opt-in to hierarchy level size limiting. ([#761](https://github.com/iTwin/viewer-components-react/pull/761))
+- Tree Widget: Allow opt-in to hierarchy level filtering using `isHierarchyLevelFilteringEnabled` flag for all trees. Add support for `enlarged` nodes in non-visibility trees. ([#751](https://github.com/iTwin/viewer-components-react/pull/751))
+- Move `VisibilityTreeEventHandler.onNodeDoubleClick` event handler to newly added `ModelsTreeEventHandler`. Expand `useVisibilityTreeState` hook to support custom `VisibilityTreeEventHandler`'s. ([#741](https://github.com/iTwin/viewer-components-react/pull/741))
+
+### Patches
+
+- Models Tree: For all header actions only consider Models that model either `InformationPartitionElement` or `GeometricElement3d`. This should omit Models that are not displayed in the component. ([#738](https://github.com/iTwin/viewer-components-react/pull/738))
+- Fixed progress indicator positioning in enlarged tree layout. ([#790](https://github.com/iTwin/viewer-components-react/pull/790))
+
 ## 1.2.2
 
-Tue, 30 Jan 2024 13:20:25 GMT
+Tue, 30 Jan 2024 13:20:38 GMT
 
 ### Patches
 

package/README.md

@@ -71,7 +71,7 @@ While we expect this package to be mostly used with [AppUI](https://github.com/i
   - `createVisibilityTreeRenderer` returns a tree renderer that renders nodes with "eye" checkboxes. Its building blocks:
     - `createVisibilityTreeNodeRenderer`
     - `VisibilityTreeNodeCheckbox`
-  - `useVisibilityTreeFiltering` is used to filter the hierarchy.
+  - `useVisibilityTreeState` is used to create and manage tree state.
   - `VisibilityTreeNoFilteredData` is used to render a "no results" when filtering.
   - `VisibilityTreeEventHandler` is an extension of [UnifiedSelectionTreeEventHandler](https://www.itwinjs.org/reference/presentation-components/tree/unifiedselectiontreeeventhandler/), that additionally handles checkbox events and calls provided `IVisibilityHandler` to get/set display of the elements in the hierarchy.
   - `useTreeTransientState` is used to persist tree scroll position when tree is used in [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) widget.

package/lib/cjs/TreeWidget.d.ts

@@ -19,7 +19,6 @@ export declare class TreeWidget {
     static get i18n(): Localization;
     /** The internationalization service namespace. */
     static get i18nNamespace(): string;
-    static get packageName(): string;
     /** Calls i18n.translateWithNamespace with the "TreeWidget" namespace. Do NOT include the namespace in the key.
      */
     static translate(key: string | string[], options?: LocalizationOptions): string;

package/lib/cjs/TreeWidget.js

@@ -1,11 +1,11 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeWidget = void 0;
-const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_common_1 = require("@itwin/core-common");
 const core_frontend_1 = require("@itwin/core-frontend");
 const Utils_1 = require("./components/trees/common/Utils");
 /**
@@ -18,8 +18,9 @@ class TreeWidget {
      * @param i18n - The internationalization service created by the IModelApp.
      */
     static async initialize(i18n) {
-        if (this._initialized)
+        if (this._initialized) {
             return;
+        }
         TreeWidget._initialized = true;
         TreeWidget._i18n = i18n ?? core_frontend_1.IModelApp.localization;
         TreeWidget._dispose = (0, Utils_1.registerRenderers)();
@@ -39,17 +40,15 @@ class TreeWidget {
     }
     /** The internationalization service created by the IModelApp. */
     static get i18n() {
-        if (!TreeWidget._i18n)
-            throw new appui_abstract_1.UiError(TreeWidget.packageName, "TreeWidget not initialized");
+        if (!TreeWidget._i18n) {
+            throw new core_common_1.BentleyError(core_common_1.BentleyStatus.ERROR, "TreeWidget not initialized");
+        }
         return TreeWidget._i18n;
     }
     /** The internationalization service namespace. */
     static get i18nNamespace() {
         return "TreeWidget";
     }
-    static get packageName() {
-        return "tree-widget-react";
-    }
     /** Calls i18n.translateWithNamespace with the "TreeWidget" namespace. Do NOT include the namespace in the key.
      */
     static translate(key, options) {

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;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"]}
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;AAGhG,oDAAiE;AACjE,wDAAiD;AACjD,2DAAoE;AAIpE;;;GAGG;AACH,MAAa,UAAU;IAKrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO;SACR;QAED,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,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,EAAE;YACrB,MAAM,IAAI,0BAAY,CAAC,2BAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;SAC3E;QACD,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB,EAAE,OAA6B;QAC3E,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC;CACF;AAtDD,gCAsDC","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 type { Localization } from \"@itwin/core-common\";\nimport { BentleyError, BentleyStatus } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { registerRenderers } from \"./components/trees/common/Utils\";\n\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) {\n      return;\n    }\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 BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n    }\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(key: string | string[], options?: LocalizationOptions): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(stringKey, options);\n  }\n}\n"]}

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

@@ -1,6 +1,13 @@
 /// <reference types="react" />
 import "./SelectableTree.scss";
 import type { IModelConnection } from "@itwin/core-frontend";
+/**
+ * Props for rendering trees
+ * @public
+ */
+export interface TreeRenderProps {
+    density?: "enlarged" | "default";
+}
 /**
  * Definition of a tree component displayed in [[SelectableTree]]
  * @public
@@ -11,7 +18,7 @@ export interface TreeDefinition {
     /** Callback that is used to get tree label */
     getLabel: () => string;
     /** Callback that is used to render tree component */
-    render: () => React.ReactNode;
+    render: (props: TreeRenderProps) => React.ReactNode;
     /**
      * Callback that is used to determine if tree should be shown for current active iModel connection.
      * If callback is `undefined` tree is shown for all iModel connections.
@@ -24,6 +31,7 @@ export interface TreeDefinition {
  */
 export interface SelectableTreeProps {
     trees: TreeDefinition[];
+    density?: "enlarged" | "default";
 }
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.

package/lib/cjs/components/SelectableTree.js

@@ -3,44 +3,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectableTree = void 0;
 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.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 require("./SelectableTree.scss");
 const react_1 = require("react");
 const appui_react_1 = require("@itwin/appui-react");
-const components_react_1 = require("@itwin/components-react");
 const core_react_1 = require("@itwin/core-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const TreeWidget_1 = require("../TreeWidget");
+const TreeSelector_1 = require("./TreeSelector");
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
  * @public
  */
 function SelectableTree(props) {
     const imodel = (0, appui_react_1.useActiveIModelConnection)();
-    if (!imodel)
+    if (!imodel) {
         return null;
+    }
     return (0, jsx_runtime_1.jsx)(SelectableTreeContent, { ...props, imodel: imodel });
 }
 exports.SelectableTree = SelectableTree;
 function SelectableTreeContent(props) {
     const { trees: treeDefinitions, imodel } = props;
     const trees = useActiveTrees(treeDefinitions, imodel);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-selectable-tree", children: (0, jsx_runtime_1.jsx)(components_react_1.SelectableContent, { ...getSelectableContentProps(trees) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-selectable-tree", children: (0, jsx_runtime_1.jsx)(TreeSelector_1.TreeSelector, { ...getTreeSelectorProps(trees), density: props.density }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
         let disposed = false;
-        (async () => {
+        void (async () => {
             const visibleTrees = await getActiveTrees(treeDefinitions, imodel);
             // istanbul ignore else
             if (!disposed) {
                 setTrees(visibleTrees);
             }
         })();
-        return () => { disposed = true; };
+        return () => {
+            disposed = true;
+        };
     }, [treeDefinitions, imodel]);
     return trees;
 }
@@ -57,37 +60,45 @@ async function getActiveTrees(treeDefinitions, imodel) {
     };
     return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined);
 }
-function getSelectableContentProps(trees) {
+function getTreeSelectorProps(trees) {
     if (trees === undefined) {
         return {
             defaultSelectedContentId: "loading",
-            children: [{
+            trees: [
+                {
                     id: "loading",
                     label: "",
                     render: () => ((0, jsx_runtime_1.jsx)(Delayed, { children: (0, jsx_runtime_1.jsx)(itwinui_react_1.ProgressLinear, { indeterminate: true }) })),
-                }],
+                },
+            ],
         };
     }
     if (trees.length === 0) {
         return {
             defaultSelectedContentId: "no-trees",
-            children: [{
+            trees: [
+                {
                     id: "no-trees",
                     label: "",
-                    render: () => ((0, jsx_runtime_1.jsx)(core_react_1.FillCentered, { children: TreeWidget_1.TreeWidget.translate("noTrees") })),
-                }],
+                    render: () => (0, jsx_runtime_1.jsx)(core_react_1.FillCentered, { children: TreeWidget_1.TreeWidget.translate("noTrees") }),
+                },
+            ],
         };
     }
     return {
         defaultSelectedContentId: trees[0].id,
-        children: trees,
+        trees,
     };
 }
 function Delayed({ delay = 200, children }) {
     const [show, setShow] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
-        const id = setTimeout(() => { setShow(true); }, delay);
-        return () => { clearTimeout(id); };
+        const id = setTimeout(() => {
+            setShow(true);
+        }, delay);
+        return () => {
+            clearTimeout(id);
+        };
     }, [delay]);
     if (!show) {
         return null;

package/lib/cjs/components/SelectableTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../src/components/SelectableTree.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 \"./SelectableTree.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { SelectableContent } from \"@itwin/components-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { SelectableContentDefinition, SelectableContentProps } from \"@itwin/components-react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\n\n/**\n * Definition of a tree component displayed in [[SelectableTree]]\n * @public\n */\nexport interface TreeDefinition {\n  /** Id of the tree */\n  id: string;\n  /** Callback that is used to get tree label */\n  getLabel: () => string;\n  /** Callback that is used to render tree component */\n  render: () => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n}\n\n/**\n * Props for [[SelectableTree]]\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: TreeDefinition[];\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\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      <SelectableContent {...getSelectableContentProps(trees)} />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n  const [trees, setTrees] = useState<SelectableContentDefinition[]>();\n\n  useEffect(() => {\n    let disposed = false;\n    (async () => {\n      const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n      // istanbul ignore else\n      if (!disposed) {\n        setTrees(visibleTrees);\n      }\n    })();\n\n    return () => { disposed = true; };\n  }, [treeDefinitions, imodel]);\n\n  return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<SelectableContentDefinition[]> {\n  const handleDefinition = async (treeDef: TreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as SelectableContentDefinition[];\n}\n\nfunction getSelectableContentProps(trees?: SelectableContentDefinition[]): SelectableContentProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      children: [{\n        id: \"loading\",\n        label: \"\",\n        render: () => (\n          <Delayed>\n            <ProgressLinear indeterminate={true} />\n          </Delayed>\n        ),\n      }],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      children: [{\n        id: \"no-trees\",\n        label: \"\",\n        render: () => (\n          <FillCentered>\n            {TreeWidget.translate(\"noTrees\")}\n          </FillCentered>\n        ),\n      }],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    children: 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(() => { setShow(true); }, delay);\n    return () => { clearTimeout(id); };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}
+{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../src/components/SelectableTree.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 \"./SelectableTree.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector\";\nimport { TreeSelector } from \"./TreeSelector\";\n\n/**\n * Props for rendering trees\n * @public\n */\nexport interface TreeRenderProps {\n  density?: \"enlarged\" | \"default\";\n}\n\n/**\n * Definition of a tree component displayed in [[SelectableTree]]\n * @public\n */\nexport interface TreeDefinition {\n  /** Id of the tree */\n  id: string;\n  /** Callback that is used to get tree label */\n  getLabel: () => string;\n  /** Callback that is used to render tree component */\n  render: (props: TreeRenderProps) => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n}\n\n/**\n * Props for [[SelectableTree]]\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: TreeDefinition[];\n  density?: \"enlarged\" | \"default\";\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\n  if (!imodel) {\n    return null;\n  }\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)} density={props.density} />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n  const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n  useEffect(() => {\n    let disposed = false;\n    void (async () => {\n      const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n      // istanbul ignore else\n      if (!disposed) {\n        setTrees(visibleTrees);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n    };\n  }, [treeDefinitions, imodel]);\n\n  return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: TreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\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: () => <FillCentered>{TreeWidget.translate(\"noTrees\")}</FillCentered>,\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/cjs/components/SelectableTree.scss

@@ -10,20 +10,4 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-
-  .components-selectable-content {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .components-selectable-content-header {
-    padding-bottom: var(--iui-size-2xs);
-  }
-
-  .components-selectable-content-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
-  }
 }

package/lib/cjs/components/TreeFilteringState.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTreeFilteringState = void 0;
 const react_1 = require("react");

package/lib/cjs/components/TreeFilteringState.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeFilteringState.js","sourceRoot":"","sources":["../../../src/components/TreeFilteringState.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,iCAA8C;AAqB9C,gBAAgB;AACT,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAqB,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAEhJ,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,CAAC,SAAiB,EAAE,EAAE;QACtD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,uBAAuB,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAa,EAAE,EAAE;QAC5D,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,CAAC,QAAuC,EAAE,OAAe,EAAE,EAAE;QAC/F,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAClB,GAAG,IAAI;YACP,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;YACpG,kBAAkB,EAAE,OAAO;YAC3B,gBAAgB,EAAE,QAAQ;SAC3B,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAAC,CAAC,YAAY,IAAI,kBAAkB,KAAK,SAAS,CAAC;IACvE,MAAM,aAAa,GAAkB;QACnC,WAAW;QACX,cAAc;QACd,aAAa;QACb,uBAAuB;QACvB,kBAAkB;QAClB,gBAAgB;KACjB,CAAC;IAEF,OAAO;QACL,aAAa;QACb,YAAY;QACZ,eAAe;QACf,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,qBAAqB,yBAwChC","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 { useCallback, useState } from \"react\";\n\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\n\n/** @internal */\nexport interface SearchOptions {\n  isFiltering: boolean;\n  onFilterCancel: () => void;\n  onFilterStart: (newFilter: string) => void;\n  onResultSelectedChanged: (index: number) => void;\n  matchedResultCount: number | undefined;\n  activeMatchIndex: number | undefined;\n}\n\ninterface TreeFilteringState {\n  filterString: string;\n  matchedResultCount?: number;\n  activeMatchIndex?: number;\n  filteredProvider?: IPresentationTreeDataProvider;\n}\n\n/** @internal */\nexport const useTreeFilteringState = () => {\n  const [{ filterString, matchedResultCount, activeMatchIndex, filteredProvider }, setState] = useState<TreeFilteringState>({ filterString: \"\" });\n\n  const onFilterCancel = useCallback(() => {\n    setState({ filterString: \"\" });\n  }, []);\n\n  const onFilterStart = useCallback((newFilter: string) => {\n    setState({ filterString: newFilter });\n  }, []);\n\n  const onResultSelectedChanged = useCallback((index: number) => {\n    setState((prev) => ({ ...prev, activeMatchIndex: index }));\n  }, []);\n\n  const onFilterApplied = useCallback((provider: IPresentationTreeDataProvider, matches: number) => {\n    setState((prev) => ({\n      ...prev,\n      activeMatchIndex: prev.activeMatchIndex === undefined ? 1 : Math.min(prev.activeMatchIndex, matches),\n      matchedResultCount: matches,\n      filteredProvider: provider,\n    }));\n  }, []);\n\n  const isFiltering = !!filterString && matchedResultCount === undefined;\n  const searchOptions: SearchOptions = {\n    isFiltering,\n    onFilterCancel,\n    onFilterStart,\n    onResultSelectedChanged,\n    matchedResultCount,\n    activeMatchIndex,\n  };\n\n  return {\n    searchOptions,\n    filterString,\n    onFilterApplied,\n    filteredProvider,\n  };\n};\n"]}
+{"version":3,"file":"TreeFilteringState.js","sourceRoot":"","sources":["../../../src/components/TreeFilteringState.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;AAEhG,iCAA8C;AAqB9C,gBAAgB;AACT,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAqB,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAEhJ,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,CAAC,SAAiB,EAAE,EAAE;QACtD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,uBAAuB,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAa,EAAE,EAAE;QAC5D,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,CAAC,QAAuC,EAAE,OAAe,EAAE,EAAE;QAC/F,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAClB,GAAG,IAAI;YACP,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;YACpG,kBAAkB,EAAE,OAAO;YAC3B,gBAAgB,EAAE,QAAQ;SAC3B,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAAC,CAAC,YAAY,IAAI,kBAAkB,KAAK,SAAS,CAAC;IACvE,MAAM,aAAa,GAAkB;QACnC,WAAW;QACX,cAAc;QACd,aAAa;QACb,uBAAuB;QACvB,kBAAkB;QAClB,gBAAgB;KACjB,CAAC;IAEF,OAAO;QACL,aAAa;QACb,YAAY;QACZ,eAAe;QACf,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,qBAAqB,yBAwChC","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 { useCallback, useState } from \"react\";\n\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\n\n/** @internal */\nexport interface SearchOptions {\n  isFiltering: boolean;\n  onFilterCancel: () => void;\n  onFilterStart: (newFilter: string) => void;\n  onResultSelectedChanged: (index: number) => void;\n  matchedResultCount: number | undefined;\n  activeMatchIndex: number | undefined;\n}\n\ninterface TreeFilteringState {\n  filterString: string;\n  matchedResultCount?: number;\n  activeMatchIndex?: number;\n  filteredProvider?: IPresentationTreeDataProvider;\n}\n\n/** @internal */\nexport const useTreeFilteringState = () => {\n  const [{ filterString, matchedResultCount, activeMatchIndex, filteredProvider }, setState] = useState<TreeFilteringState>({ filterString: \"\" });\n\n  const onFilterCancel = useCallback(() => {\n    setState({ filterString: \"\" });\n  }, []);\n\n  const onFilterStart = useCallback((newFilter: string) => {\n    setState({ filterString: newFilter });\n  }, []);\n\n  const onResultSelectedChanged = useCallback((index: number) => {\n    setState((prev) => ({ ...prev, activeMatchIndex: index }));\n  }, []);\n\n  const onFilterApplied = useCallback((provider: IPresentationTreeDataProvider, matches: number) => {\n    setState((prev) => ({\n      ...prev,\n      activeMatchIndex: prev.activeMatchIndex === undefined ? 1 : Math.min(prev.activeMatchIndex, matches),\n      matchedResultCount: matches,\n      filteredProvider: provider,\n    }));\n  }, []);\n\n  const isFiltering = !!filterString && matchedResultCount === undefined;\n  const searchOptions: SearchOptions = {\n    isFiltering,\n    onFilterCancel,\n    onFilterStart,\n    onResultSelectedChanged,\n    matchedResultCount,\n    activeMatchIndex,\n  };\n\n  return {\n    searchOptions,\n    filterString,\n    onFilterApplied,\n    filteredProvider,\n  };\n};\n"]}

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import "./TreeSelector.scss";
+import type { TreeRenderProps } from "./SelectableTree";
+/**
+ * A definition for trees displayed in [[TreeSelector]]
+ * @internal
+ */
+export interface TreeContentDefinition {
+    id: string;
+    label: string;
+    render: (props: TreeRenderProps) => React.ReactNode;
+}
+/**
+ * Props for [[TreeSelector]]
+ * @internal
+ */
+export interface TreeSelectorProps {
+    defaultSelectedContentId: string;
+    trees: TreeContentDefinition[];
+    density?: "enlarged" | "default";
+}
+/**
+ * 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 declare function TreeSelector(props: TreeSelectorProps): JSX.Element;
+//# sourceMappingURL=TreeSelector.d.ts.map

package/lib/cjs/components/TreeSelector.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeSelector = void 0;
+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.
+ *--------------------------------------------------------------------------------------------*/
+require("./TreeSelector.scss");
+const react_1 = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/**
+ * 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
+ */
+function TreeSelector(props) {
+    const [selectedContentId, setSelectedContentId] = (0, react_1.useState)(props.defaultSelectedContentId);
+    const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];
+    const isEnlarged = props.density === "enlarged";
+    const options = (0, react_1.useMemo)(() => {
+        return props.trees.map((c) => ({ label: c.label, value: c.id }));
+    }, [props.trees]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "presentation-components-tree-selector-content", children: [(0, jsx_runtime_1.jsx)("div", { className: "presentation-components-tree-selector-content-header", children: options.length > 0 && ((0, jsx_runtime_1.jsx)(itwinui_react_1.Select, { onChange: setSelectedContentId, options: options, value: selectedContent.id, size: isEnlarged ? "large" : "small", itemRenderer: (option, itemProps) => ((0, jsx_runtime_1.jsx)(itwinui_react_1.MenuItem, { ...option, isSelected: itemProps.isSelected, size: isEnlarged ? "large" : "default", children: option.label })) })) }), (0, jsx_runtime_1.jsx)("div", { className: "presentation-components-tree-selector-content-wrapper", children: selectedContent?.render({ density: props.density }) })] }));
+}
+exports.TreeSelector = TreeSelector;
+//# sourceMappingURL=TreeSelector.js.map

package/lib/cjs/components/TreeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../src/components/TreeSelector.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,+BAA6B;AAC7B,iCAA0C;AAC1C,wDAAwD;AAyBxD;;;;GAIG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,IAAA,eAAO,EAAC,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,CAAC,CAA2B,CAAC;IAC7F,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,iCAAK,SAAS,EAAC,+CAA+C,aAC5D,gCAAK,SAAS,EAAC,sDAAsD,YAClE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,uBAAC,sBAAM,IACL,QAAQ,EAAE,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACpC,YAAY,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CACnC,uBAAC,wBAAQ,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,gCAAK,SAAS,EAAC,uDAAuD,YAAE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAO,IAC9H,CACP,CAAC;AACJ,CAAC;AA7BD,oCA6BC","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 { TreeRenderProps } from \"./SelectableTree\";\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: TreeRenderProps) => 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}\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 })) 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            onChange={setSelectedContentId}\n            options={options}\n            value={selectedContent.id}\n            size={isEnlarged ? \"large\" : \"small\"}\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\">{selectedContent?.render({ density: props.density })}</div>\n    </div>\n  );\n}\n"]}

package/lib/cjs/components/TreeSelector.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.presentation-components-tree-selector-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+
+  .presentation-components-tree-selector-content-header {
+    padding-bottom: var(--iui-size-2xs);
+
+    .presentation-components-tree-selector-content-selector {
+      width: 100%;
+    }
+  }
+
+  .presentation-components-tree-selector-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+    overflow: hidden;
+  }
+}

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

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import "./TreeWidgetUiItemsProvider.scss";
 import { StagePanelLocation, StagePanelSection } from "@itwin/appui-react";
 import type { UiItemsProvider, Widget } from "@itwin/appui-react";
-import type { TreeDefinition } from "./SelectableTree";
+import type { SelectableTreeProps, TreeDefinition } from "./SelectableTree";
 /**
  * Parameters for creating a [[TreeWidgetUiItemsProvider]].
  * @public
@@ -15,6 +16,8 @@ export interface TreeWidgetOptions {
     defaultTreeWidgetPriority?: number;
     /** Trees to show in the widget. Defaults to [[ModelsTreeComponent]] and [[CategoriesTreeComponent]]. */
     trees?: TreeDefinition[];
+    /** Modifies the density of the tree widget. `enlarged` widget contains larger content */
+    density?: "enlarged" | "default";
 }
 /**
  * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].
@@ -31,4 +34,9 @@ export declare class TreeWidgetUiItemsProvider implements UiItemsProvider {
     constructor(_treeWidgetOptions?: TreeWidgetOptions | undefined);
     provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): ReadonlyArray<Widget>;
 }
+/**
+ * Tree widget component which allows selecting which tree to render.
+ * @public
+ */
+export declare function TreeWidgetComponent(props: SelectableTreeProps): JSX.Element;
 //# sourceMappingURL=TreeWidgetUiItemsProvider.d.ts.map

package/lib/cjs/components/TreeWidgetUiItemsProvider.js

@@ -1,22 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeWidgetUiItemsProvider = exports.TreeWidgetId = void 0;
+exports.TreeWidgetComponent = exports.TreeWidgetUiItemsProvider = exports.TreeWidgetId = void 0;
 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.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 require("./TreeWidgetUiItemsProvider.scss");
-const react_error_boundary_1 = require("react-error-boundary");
 const appui_react_1 = require("@itwin/appui-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-const itwinui_illustrations_react_1 = require("@itwin/itwinui-illustrations-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
 const TreeWidget_1 = require("../TreeWidget");
-const SelectableTree_1 = require("./SelectableTree");
 const CategoriesTreeComponent_1 = require("./trees/category-tree/CategoriesTreeComponent");
 const ModelsTreeComponent_1 = require("./trees/models-tree/ModelsTreeComponent");
+const react_error_boundary_1 = require("react-error-boundary");
+const SelectableTree_1 = require("./SelectableTree");
 const UseTreeTransientState_1 = require("./utils/UseTreeTransientState");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_illustrations_react_1 = require("@itwin/itwinui-illustrations-react");
 /**
  * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].
  * @public
@@ -41,28 +41,35 @@ class TreeWidgetUiItemsProvider {
             {
                 id: ModelsTreeComponent_1.ModelsTreeComponent.id,
                 getLabel: ModelsTreeComponent_1.ModelsTreeComponent.getLabel,
-                render: () => (0, jsx_runtime_1.jsx)(ModelsTreeComponent_1.ModelsTreeComponent, {}),
+                render: (props) => (0, jsx_runtime_1.jsx)(ModelsTreeComponent_1.ModelsTreeComponent, { density: props.density }),
             },
             {
                 id: CategoriesTreeComponent_1.CategoriesTreeComponent.id,
                 getLabel: CategoriesTreeComponent_1.CategoriesTreeComponent.getLabel,
-                render: () => (0, jsx_runtime_1.jsx)(CategoriesTreeComponent_1.CategoriesTreeComponent, {}),
+                render: (props) => (0, jsx_runtime_1.jsx)(CategoriesTreeComponent_1.CategoriesTreeComponent, { density: props.density }),
             },
         ];
-        return [{
+        return [
+            {
                 id: exports.TreeWidgetId,
                 label: TreeWidget_1.TreeWidget.translate("treeview"),
-                content: (0, jsx_runtime_1.jsx)(SelectableTreeWidget, { trees: trees }),
+                content: (0, jsx_runtime_1.jsx)(TreeWidgetComponent, { trees: trees, density: this._treeWidgetOptions?.density }),
                 icon: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgHierarchyTree, {}),
                 priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,
-            }];
+            },
+        ];
     }
 }
 exports.TreeWidgetUiItemsProvider = TreeWidgetUiItemsProvider;
-function SelectableTreeWidget(props) {
+/**
+ * Tree widget component which allows selecting which tree to render.
+ * @public
+ */
+function TreeWidgetComponent(props) {
     const ref = (0, UseTreeTransientState_1.useTreeTransientState)();
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "tree-widget", children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorState, children: (0, jsx_runtime_1.jsx)(SelectableTree_1.SelectableTree, { ...props }) }) }));
 }
+exports.TreeWidgetComponent = TreeWidgetComponent;
 function ErrorState({ resetErrorBoundary }) {
     return ((0, jsx_runtime_1.jsx)(itwinui_react_1.NonIdealState, { svg: (0, jsx_runtime_1.jsx)(itwinui_illustrations_react_1.SvgError, {}), heading: TreeWidget_1.TreeWidget.translate("error"), description: TreeWidget_1.TreeWidget.translate("generic-error-description"), actions: (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { styleType: "high-visibility", onClick: resetErrorBoundary, children: TreeWidget_1.TreeWidget.translate("retry") }) }));
 }

package/lib/cjs/components/TreeWidgetUiItemsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";;;;AAAA;;;+FAG+F;AAE/F,4CAA0C;AAC1C,+DAAqD;AACrD,oDAAuF;AACvF,oEAA8D;AAC9D,oFAA8D;AAC9D,wDAA6D;AAC7D,8CAA2C;AAC3C,qDAAkD;AAClD,2FAAwF;AACxF,iFAA8E;AAC9E,yEAAsE;AAqBtE;;;GAGG;AACU,QAAA,YAAY,GAAG,yBAAyB,CAAC;AAEtD;;;GAGG;AACH,MAAa,yBAAyB;IAGpC,YAAoB,kBAAsC;QAAtC,uBAAkB,GAAlB,kBAAkB,CAAoB;QAF1C,OAAE,GAAG,2BAA2B,CAAC;IAEa,CAAC;IAExD,cAAc,CACnB,QAAgB,EAChB,UAAkB,EAClB,QAA4B,EAC5B,OAA2B;QAE3B,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,oBAAoB,IAAI,gCAAkB,CAAC,KAAK,CAAC;QACpG,MAAM,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,IAAI,+BAAiB,CAAC,KAAK,CAAC;QAEtG,IAAI,QAAQ,KAAK,iBAAiB,IAAI,OAAO,KAAK,qBAAqB,IAAI,UAAU,KAAK,wBAAU,CAAC,OAAO,EAAE;YAC5G,OAAO,EAAE,CAAC;SACX;QAED,MAAM,KAAK,GAAqB,IAAI,CAAC,kBAAkB,EAAE,KAAK,IAAI;YAChE;gBACE,EAAE,EAAE,yCAAmB,CAAC,EAAE;gBAC1B,QAAQ,EAAE,yCAAmB,CAAC,QAAQ;gBACtC,MAAM,EAAE,GAAG,EAAE,CAAC,uBAAC,yCAAmB,KAAG;aACtC;YACD;gBACE,EAAE,EAAE,iDAAuB,CAAC,EAAE;gBAC9B,QAAQ,EAAE,iDAAuB,CAAC,QAAQ;gBAC1C,MAAM,EAAE,GAAG,EAAE,CAAC,uBAAC,iDAAuB,KAAG;aAC1C;SACF,CAAC;QAEF,OAAO,CAAC;gBACN,EAAE,EAAE,oBAAY;gBAChB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,UAAU,CAAC;gBACvC,OAAO,EAAE,uBAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,GAAI;gBAC/C,IAAI,EAAE,uBAAC,sCAAgB,KAAG;gBAC1B,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,yBAAyB;aAC7D,CAAC,CAAC;IACL,CAAC;CACF;AAvCD,8DAuCC;AAED,SAAS,oBAAoB,CAAC,KAA0B;IACtD,MAAM,GAAG,GAAG,IAAA,6CAAqB,GAAkB,CAAC;IAEpD,OAAO,CAAC,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5C,uBAAC,oCAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,uBAAC,+BAAc,OAAK,KAAK,GAAI,GACf,GACZ,CAAC,CAAC;AACV,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,kBAAkB,EAAiB;IACvD,OAAO,CACL,uBAAC,6BAAa,IACZ,GAAG,EAAE,uBAAC,sCAAQ,KAAG,EACjB,OAAO,EAAE,uBAAU,CAAC,SAAS,CAAC,OAAO,CAAC,EACtC,WAAW,EAAE,uBAAU,CAAC,SAAS,CAAC,2BAA2B,CAAC,EAC9D,OAAO,EACL,uBAAC,sBAAM,IAAC,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,YAAG,uBAAU,CAAC,SAAS,CAAC,OAAO,CAAC,GAAU,GAE7G,CACH,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 \"./TreeWidgetUiItemsProvider.scss\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, StageUsage } 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\";\nimport { SelectableTree } from \"./SelectableTree\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { useTreeTransientState } from \"./utils/UseTreeTransientState\";\n\nimport type { FallbackProps } from \"react-error-boundary\";\nimport type { UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeProps, TreeDefinition } from \"./SelectableTree\";\n\n/**\n * Parameters for creating a [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport interface TreeWidgetOptions {\n  /** The stage panel to place the widget in. Defaults to `StagePanelLocation.Right`. */\n  defaultPanelLocation?: StagePanelLocation;\n  /** The stage panel section to place the widget in. Defaults to `StagePanelSection.Start`. */\n  defaultPanelSection?: StagePanelSection;\n  /** Widget priority in the stage panel. */\n  defaultTreeWidgetPriority?: number;\n  /** Trees to show in the widget. Defaults to [[ModelsTreeComponent]] and [[CategoriesTreeComponent]]. */\n  trees?: TreeDefinition[];\n}\n\n/**\n * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport const TreeWidgetId = \"tree-widget-react:trees\";\n\n/**\n * A [[UiItemsProvider]] implementation that provides a [[SelectableTree]] into a stage panel.\n * @public\n */\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) { }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    section?: StagePanelSection\n  ): ReadonlyArray<Widget> {\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n\n    if (location !== preferredLocation || section !== preferredPanelSection || stageUsage !== StageUsage.General) {\n      return [];\n    }\n\n    const trees: TreeDefinition[] = this._treeWidgetOptions?.trees ?? [\n      {\n        id: ModelsTreeComponent.id,\n        getLabel: ModelsTreeComponent.getLabel,\n        render: () => <ModelsTreeComponent />,\n      },\n      {\n        id: CategoriesTreeComponent.id,\n        getLabel: CategoriesTreeComponent.getLabel,\n        render: () => <CategoriesTreeComponent />,\n      },\n    ];\n\n    return [{\n      id: TreeWidgetId,\n      label: TreeWidget.translate(\"treeview\"),\n      content: <SelectableTreeWidget trees={trees} />,\n      icon: <SvgHierarchyTree />,\n      priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n    }];\n  }\n}\n\nfunction SelectableTreeWidget(props: SelectableTreeProps) {\n  const ref = useTreeTransientState<HTMLDivElement>();\n\n  return (<div ref={ref} className=\"tree-widget\">\n    <ErrorBoundary FallbackComponent={ErrorState}>\n      <SelectableTree {...props} />\n    </ErrorBoundary>\n  </div>);\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"error\")}\n      description={TreeWidget.translate(\"generic-error-description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>{TreeWidget.translate(\"retry\")}</Button>\n      }\n    />\n  );\n}\n"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,4CAA0C;AAC1C,oDAAuF;AACvF,oEAA8D;AAC9D,8CAA2C;AAC3C,2FAAwF;AACxF,iFAA8E;AAK9E,+DAAqD;AACrD,qDAAkD;AAClD,yEAAsE;AACtE,wDAA6D;AAC7D,oFAA8D;AAkB9D;;;GAGG;AACU,QAAA,YAAY,GAAG,yBAAyB,CAAC;AAEtD;;;GAGG;AACH,MAAa,yBAAyB;IAGpC,YAAoB,kBAAsC;QAAtC,uBAAkB,GAAlB,kBAAkB,CAAoB;QAF1C,OAAE,GAAG,2BAA2B,CAAC;IAEY,CAAC;IAEvD,cAAc,CAAC,QAAgB,EAAE,UAAkB,EAAE,QAA4B,EAAE,OAA2B;QACnH,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,oBAAoB,IAAI,gCAAkB,CAAC,KAAK,CAAC;QACpG,MAAM,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,IAAI,+BAAiB,CAAC,KAAK,CAAC;QAEtG,IAAI,QAAQ,KAAK,iBAAiB,IAAI,OAAO,KAAK,qBAAqB,IAAI,UAAU,KAAK,wBAAU,CAAC,OAAO,EAAE;YAC5G,OAAO,EAAE,CAAC;SACX;QAED,MAAM,KAAK,GAAqB,IAAI,CAAC,kBAAkB,EAAE,KAAK,IAAI;YAChE;gBACE,EAAE,EAAE,yCAAmB,CAAC,EAAE;gBAC1B,QAAQ,EAAE,yCAAmB,CAAC,QAAQ;gBACtC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAC,yCAAmB,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI;aACnE;YACD;gBACE,EAAE,EAAE,iDAAuB,CAAC,EAAE;gBAC9B,QAAQ,EAAE,iDAAuB,CAAC,QAAQ;gBAC1C,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAC,iDAAuB,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI;aACvE;SACF,CAAC;QAEF,OAAO;YACL;gBACE,EAAE,EAAE,oBAAY;gBAChB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,UAAU,CAAC;gBACvC,OAAO,EAAE,uBAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAI;gBACzF,IAAI,EAAE,uBAAC,sCAAgB,KAAG;gBAC1B,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,yBAAyB;aAC7D;SACF,CAAC;IACJ,CAAC;CACF;AApCD,8DAoCC;AAED;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,KAA0B;IAC5D,MAAM,GAAG,GAAG,IAAA,6CAAqB,GAAkB,CAAC;IAEpD,OAAO,CACL,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YACpC,uBAAC,oCAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,uBAAC,+BAAc,OAAK,KAAK,GAAI,GACf,GACZ,CACP,CAAC;AACJ,CAAC;AAVD,kDAUC;AAED,SAAS,UAAU,CAAC,EAAE,kBAAkB,EAAiB;IACvD,OAAO,CACL,uBAAC,6BAAa,IACZ,GAAG,EAAE,uBAAC,sCAAQ,KAAG,EACjB,OAAO,EAAE,uBAAU,CAAC,SAAS,CAAC,OAAO,CAAC,EACtC,WAAW,EAAE,uBAAU,CAAC,SAAS,CAAC,2BAA2B,CAAC,EAC9D,OAAO,EACL,uBAAC,sBAAM,IAAC,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,YAC9D,uBAAU,CAAC,SAAS,CAAC,OAAO,CAAC,GACvB,GAEX,CACH,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 \"./TreeWidgetUiItemsProvider.scss\";\nimport { StagePanelLocation, StagePanelSection, StageUsage } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\n\nimport type { UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeProps, TreeDefinition } from \"./SelectableTree\";\nimport type { FallbackProps } from \"react-error-boundary\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { SelectableTree } from \"./SelectableTree\";\nimport { useTreeTransientState } from \"./utils/UseTreeTransientState\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\n/**\n * Parameters for creating a [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport interface TreeWidgetOptions {\n  /** The stage panel to place the widget in. Defaults to `StagePanelLocation.Right`. */\n  defaultPanelLocation?: StagePanelLocation;\n  /** The stage panel section to place the widget in. Defaults to `StagePanelSection.Start`. */\n  defaultPanelSection?: StagePanelSection;\n  /** Widget priority in the stage panel. */\n  defaultTreeWidgetPriority?: number;\n  /** Trees to show in the widget. Defaults to [[ModelsTreeComponent]] and [[CategoriesTreeComponent]]. */\n  trees?: TreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n}\n\n/**\n * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport const TreeWidgetId = \"tree-widget-react:trees\";\n\n/**\n * A [[UiItemsProvider]] implementation that provides a [[SelectableTree]] into a stage panel.\n * @public\n */\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) {}\n\n  public provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): ReadonlyArray<Widget> {\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n\n    if (location !== preferredLocation || section !== preferredPanelSection || stageUsage !== StageUsage.General) {\n      return [];\n    }\n\n    const trees: TreeDefinition[] = this._treeWidgetOptions?.trees ?? [\n      {\n        id: ModelsTreeComponent.id,\n        getLabel: ModelsTreeComponent.getLabel,\n        render: (props) => <ModelsTreeComponent density={props.density} />,\n      },\n      {\n        id: CategoriesTreeComponent.id,\n        getLabel: CategoriesTreeComponent.getLabel,\n        render: (props) => <CategoriesTreeComponent density={props.density} />,\n      },\n    ];\n\n    return [\n      {\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        content: <TreeWidgetComponent trees={trees} density={this._treeWidgetOptions?.density} />,\n        icon: <SvgHierarchyTree />,\n        priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\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 = useTreeTransientState<HTMLDivElement>();\n\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(\"error\")}\n      description={TreeWidget.translate(\"generic-error-description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"retry\")}\n        </Button>\n      }\n    />\n  );\n}"]}

package/lib/cjs/components/TreeWidgetUiItemsProvider.scss

@@ -6,4 +6,4 @@
 .tree-widget {
   height: 100%;
   width: 100%;
-}
+}