@itwin/tree-widget-react 2.0.0-dev.0 → 2.0.1

package/CHANGELOG.md

@@ -1,9 +1,41 @@
 # Change Log - @itwin/tree-widget-react
 
-This log was last generated on Tue, 30 Jan 2024 13:20:38 GMT and should not be manually modified.
+This log was last generated on Thu, 07 Mar 2024 13:36:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.1
+
+Thu, 07 Mar 2024 13:36:50 GMT
+
+### Patches
+
+- Updated trees to always react to data changes and auto update. ([#795](https://github.com/iTwin/viewer-components-react/pull/795))
+
+## 2.0.0
+
+Wed, 06 Mar 2024 15:24:33 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:38 GMT

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

@@ -9,10 +9,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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
@@ -28,7 +28,7 @@ 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)();
@@ -60,11 +60,11 @@ 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: "",
@@ -76,7 +76,7 @@ function getSelectableContentProps(trees) {
     if (trees.length === 0) {
         return {
             defaultSelectedContentId: "no-trees",
-            children: [
+            trees: [
                 {
                     id: "no-trees",
                     label: "",
@@ -87,7 +87,7 @@ function getSelectableContentProps(trees) {
     }
     return {
         defaultSelectedContentId: trees[0].id,
-        children: trees,
+        trees,
     };
 }
 function Delayed({ delay = 200, children }) {

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\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    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<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        {\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      children: [\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    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(() => {\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/components/SelectableTree.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,iCAA+B;AAC/B,iCAA4C;AAC5C,oDAA+D;AAC/D,kDAAiD;AACjD,wDAAsD;AACtD,8CAA2C;AAK3C,iDAA8C;AAqC9C;;;GAGG;AACH,SAAgB,cAAc,CAAC,KAA0B;IACvD,MAAM,MAAM,GAAG,IAAA,uCAAyB,GAAE,CAAC;IAE3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,uBAAC,qBAAqB,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC9D,CAAC;AARD,wCAQC;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,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,uBAAC,2BAAY,OAAK,oBAAoB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,GACrE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,eAAiC,EAAE,MAAwB;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAA2B,CAAC;IAE9D,IAAA,iBAAS,EAAC,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,uBAAuB;YACvB,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,eAAiC,EAAE,MAAwB;IACvF,MAAM,gBAAgB,GAAG,KAAK,EAAE,OAAuB,EAAE,EAAE;QACzD,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;SACvB,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,uBAAC,OAAO,cACN,uBAAC,8BAAc,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,uBAAC,yBAAY,cAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GAAgB;iBAC7E;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,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,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,2DAAG,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 { 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/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.
  *--------------------------------------------------------------------------------------------*/
 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,19 +41,19 @@ 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 [
             {
                 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,
             },
@@ -61,10 +61,15 @@ class TreeWidgetUiItemsProvider {
     }
 }
 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;;;gGAGgG;AAEhG,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;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,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;YACL;gBACE,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;SACF,CAAC;IACJ,CAAC;CACF;AApCD,8DAoCC;AAED,SAAS,oBAAoB,CAAC,KAA0B;IACtD,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;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 { 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(_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: () => <ModelsTreeComponent />,\n      },\n      {\n        id: CategoriesTreeComponent.id,\n        getLabel: CategoriesTreeComponent.getLabel,\n        render: () => <CategoriesTreeComponent />,\n      },\n    ];\n\n    return [\n      {\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}\n\nfunction SelectableTreeWidget(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}\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/tree-header/TreeHeader.d.ts

@@ -5,6 +5,7 @@ import type { CommonProps } from "@itwin/core-react";
 /** @internal */
 export interface TreeHeaderButtonProps {
     viewport: Viewport;
+    density?: "default" | "enlarged";
 }
 /** @internal */
 export interface TreeHeaderProps extends CommonProps {
@@ -20,6 +21,8 @@ export interface TreeHeaderProps extends CommonProps {
     onSelectedChanged: (index: number) => void;
     /** Header buttons */
     children?: React.ReactNode;
+    /** Modifies the density of tree header. `enlarged` header contains larger content */
+    density?: "default" | "enlarged";
 }
 /** @internal */
 export declare function TreeHeader(props: TreeHeaderProps): JSX.Element;

package/lib/cjs/components/tree-header/TreeHeader.js

@@ -17,12 +17,13 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
 const TreeWidget_1 = require("../../TreeWidget");
 /** @internal */
 function TreeHeader(props) {
-    const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, className } = props;
+    const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;
     const [isSearchOpen, setIsSearchOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tree-widget-tree-header", className), children: [(0, jsx_runtime_1.jsx)(HeaderButtons, { contracted: isSearchOpen, children: children }), (0, jsx_runtime_1.jsx)(DebouncedSearchBox, { isOpened: isSearchOpen, onOpen: () => setIsSearchOpen(true), onClose: () => setIsSearchOpen(false), onChange: (value) => (value ? onFilterStart(value) : onFilterClear()), delay: 500, selectedResultIndex: selectedIndex, resultCount: resultCount, onSelectedResultChanged: onSelectedChanged })] }));
+    const isEnlarged = density === "enlarged";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tree-widget-tree-header", className, isEnlarged && "enlarge"), children: [(0, jsx_runtime_1.jsx)(HeaderButtons, { contracted: isSearchOpen, isEnlarged: isEnlarged, children: children }), (0, jsx_runtime_1.jsx)(DebouncedSearchBox, { isOpened: isSearchOpen, onOpen: () => setIsSearchOpen(true), onClose: () => setIsSearchOpen(false), onChange: (value) => (value ? onFilterStart(value) : onFilterClear()), delay: 500, selectedResultIndex: selectedIndex, resultCount: resultCount, onSelectedResultChanged: onSelectedChanged, size: isEnlarged ? "large" : "small" })] }));
 }
 exports.TreeHeader = TreeHeader;
-function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSelectedResultChanged, onChange, onOpen, onClose, delay, }) {
+function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSelectedResultChanged, onChange, onOpen, onClose, delay, size, }) {
     const [inputValue, setInputValue] = (0, react_1.useState)("");
     const onChangeRef = (0, react_1.useRef)(onChange);
     // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.
@@ -39,27 +40,28 @@ function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSele
             clearTimeout(timeoutId);
         };
     }, [inputValue, delay]);
-    return ((0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox, { expandable: true, onExpand: onOpen, onCollapse: onClose, size: "small", className: (0, classnames_1.default)("tree-widget-search-box", !isOpened && "contracted"), children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapsedState, { children: (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.ExpandButton, { title: TreeWidget_1.TreeWidget.translate("searchBox.searchForSomething"), "aria-label": TreeWidget_1.TreeWidget.translate("searchBox.open"), size: "small" }) }), (0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox.ExpandedState, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Input, { placeholder: TreeWidget_1.TreeWidget.translate("searchBox.search"), onChange: (e) => setInputValue(e.currentTarget.value), className: "search-input" }), (0, jsx_runtime_1.jsx)(SearchResultStepper, { selectedIndex: selectedResultIndex, total: resultCount, onStep: onSelectedResultChanged }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapseButton, { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox, { expandable: true, onExpand: onOpen, onCollapse: onClose, size: size, className: (0, classnames_1.default)("tree-widget-search-box", !isOpened && "contracted"), children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapsedState, { children: (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.ExpandButton, { title: TreeWidget_1.TreeWidget.translate("searchBox.searchForSomething"), "aria-label": TreeWidget_1.TreeWidget.translate("searchBox.open"), size: size }) }), (0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox.ExpandedState, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Input, { placeholder: TreeWidget_1.TreeWidget.translate("searchBox.search"), onChange: (e) => setInputValue(e.currentTarget.value) }), (0, jsx_runtime_1.jsx)(SearchResultStepper, { selectedIndex: selectedResultIndex, total: resultCount, onStep: onSelectedResultChanged, size: size }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapseButton, { onClick: () => {
                             setInputValue("");
                             onClose();
-                        }, size: "small", "aria-label": TreeWidget_1.TreeWidget.translate("searchBox.close") })] })] }));
+                        }, size: size, "aria-label": TreeWidget_1.TreeWidget.translate("searchBox.close") })] })] }));
 }
 function HeaderButtons(props) {
     const className = (0, classnames_1.default)("button-container", props.contracted && "contracted");
+    const dropdownClassName = (0, classnames_1.default)("dropdown-item", props.isEnlarged && "enlarge");
     return ((0, jsx_runtime_1.jsx)(itwinui_react_1.ButtonGroup, { className: className, overflowButton: (overflowStart) => ((0, jsx_runtime_1.jsx)(itwinui_react_1.DropdownMenu, { menuItems: () => react_1.Children.toArray(props.children)
-                .slice(overflowStart - 1)
-                .map((btn, index) => ((0, jsx_runtime_1.jsx)("li", { className: "dropdown-item", role: "menuitem", children: btn }, index))), className: "tree-header-button-dropdown-container", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { styleType: "borderless", size: "small", children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgMore, {}) }) })), children: props.children }));
+                .slice(overflowStart)
+                .map((btn, index) => ((0, jsx_runtime_1.jsx)("li", { className: dropdownClassName, role: "menuitem", children: btn }, index))), className: "tree-header-button-dropdown-container", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { title: TreeWidget_1.TreeWidget.translate("dropdownMore"), styleType: "borderless", size: props.isEnlarged ? undefined : "small", children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgMore, {}) }) })), children: props.children }));
 }
 function SearchResultStepper(props) {
     const { selectedIndex = 1, total, onStep } = props;
     if (!total) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "searchbox-stepping-count", children: `${selectedIndex}/${total}` }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_1.TreeWidget.translate("searchBox.previous"), size: "small", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "searchbox-stepping-count", children: `${selectedIndex}/${total}` }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_1.TreeWidget.translate("searchBox.previous"), size: props.size, onClick: () => {
                     if (selectedIndex > 1) {
                         onStep(selectedIndex - 1);
                     }
-                }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgCaretUpSmall, {}) }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_1.TreeWidget.translate("searchBox.next"), size: "small", onClick: () => {
+                }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgCaretUpSmall, {}) }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_1.TreeWidget.translate("searchBox.next"), size: props.size, onClick: () => {
                     if (selectedIndex < total) {
                         onStep(selectedIndex + 1);
                     }

package/lib/cjs/components/tree-header/TreeHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.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 \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useEffect, useRef, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** @internal */\nexport interface TreeHeaderButtonProps {\n  viewport: Viewport;\n}\n\n/** @internal */\nexport interface TreeHeaderProps extends CommonProps {\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** listens for onClick event for Clear (x) icon */\n  onFilterClear: () => void;\n  /** Total number of results/entries */\n  resultCount?: number;\n  /** Current selected result index */\n  selectedIndex?: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n  /** Header buttons */\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n  const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, className } = props;\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  return (\n    <div className={classnames(\"tree-widget-tree-header\", className)}>\n      <HeaderButtons contracted={isSearchOpen}>{children}</HeaderButtons>\n      <DebouncedSearchBox\n        isOpened={isSearchOpen}\n        onOpen={() => setIsSearchOpen(true)}\n        onClose={() => setIsSearchOpen(false)}\n        onChange={(value) => (value ? onFilterStart(value) : onFilterClear())}\n        delay={500}\n        selectedResultIndex={selectedIndex}\n        resultCount={resultCount}\n        onSelectedResultChanged={onSelectedChanged}\n      />\n    </div>\n  );\n}\n\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n  onChange: (value: string) => void;\n  delay: number;\n  selectedResultIndex?: number;\n  resultCount?: number;\n  onSelectedResultChanged: (index: number) => void;\n}\n\nfunction DebouncedSearchBox({\n  isOpened,\n  selectedResultIndex,\n  resultCount,\n  onSelectedResultChanged,\n  onChange,\n  onOpen,\n  onClose,\n  delay,\n}: DebouncedSearchBoxProps) {\n  const [inputValue, setInputValue] = useState<string>(\"\");\n  const onChangeRef = useRef(onChange);\n  // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    if (!inputValue) {\n      onChangeRef.current(\"\");\n      return;\n    }\n\n    const timeoutId = setTimeout(() => {\n      onChangeRef.current(inputValue);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [inputValue, delay]);\n\n  return (\n    <SearchBox expandable onExpand={onOpen} onCollapse={onClose} size=\"small\" className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}>\n      <SearchBox.CollapsedState>\n        <SearchBox.ExpandButton title={TreeWidget.translate(\"searchBox.searchForSomething\")} aria-label={TreeWidget.translate(\"searchBox.open\")} size=\"small\" />\n      </SearchBox.CollapsedState>\n      <SearchBox.ExpandedState>\n        <SearchBox.Input\n          placeholder={TreeWidget.translate(\"searchBox.search\")}\n          onChange={(e) => setInputValue(e.currentTarget.value)}\n          className=\"search-input\"\n        />\n        <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} />\n        <SearchBox.CollapseButton\n          onClick={() => {\n            setInputValue(\"\");\n            onClose();\n          }}\n          size=\"small\"\n          aria-label={TreeWidget.translate(\"searchBox.close\")}\n        />\n      </SearchBox.ExpandedState>\n    </SearchBox>\n  );\n}\n\ninterface HeaderButtonsProps {\n  contracted: boolean;\n  children?: React.ReactNode;\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n  const className = classnames(\"button-container\", props.contracted && \"contracted\");\n\n  return (\n    <ButtonGroup\n      className={className}\n      overflowButton={(overflowStart) => (\n        <DropdownMenu\n          menuItems={() =>\n            Children.toArray(props.children)\n              .slice(overflowStart - 1)\n              .map((btn, index) => (\n                <li key={index} className=\"dropdown-item\" role=\"menuitem\">\n                  {btn}\n                </li>\n              ))\n          }\n          className=\"tree-header-button-dropdown-container\"\n        >\n          <IconButton styleType=\"borderless\" size=\"small\">\n            <SvgMore />\n          </IconButton>\n        </DropdownMenu>\n      )}\n    >\n      {props.children}\n    </ButtonGroup>\n  );\n}\n\ninterface SearchResultStepperProps {\n  total?: number;\n  onStep: (newIndex: number) => void;\n  selectedIndex?: number;\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n  const { selectedIndex = 1, total, onStep } = props;\n  if (!total) {\n    return null;\n  }\n\n  return (\n    <>\n      <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n      <Divider orientation=\"vertical\" />\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.previous\")}\n        size=\"small\"\n        onClick={() => {\n          if (selectedIndex > 1) {\n            onStep(selectedIndex - 1);\n          }\n        }}\n      >\n        <SvgCaretUpSmall />\n      </SearchBox.Button>\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.next\")}\n        size=\"small\"\n        onClick={() => {\n          if (selectedIndex < total) {\n            onStep(selectedIndex + 1);\n          }\n        }}\n      >\n        <SvgCaretDownSmall />\n      </SearchBox.Button>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;gGAGgG;AAEhG,6BAA2B;AAC3B,4DAAoC;AACpC,iCAA8D;AAC9D,oEAAyF;AACzF,wDAAiG;AACjG,iDAA8C;AA6B9C,gBAAgB;AAChB,SAAgB,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5H,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,OAAO,KAAK,UAAU,CAAC;IAC1C,OAAO,CACL,iCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,yBAAyB,EAAE,SAAS,EAAE,UAAU,IAAI,SAAS,CAAC,aACvF,uBAAC,aAAa,IAAC,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,YAC5D,QAAQ,GACK,EAChB,uBAAC,kBAAkB,IACjB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EACrE,KAAK,EAAE,GAAG,EACV,mBAAmB,EAAE,aAAa,EAClC,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,iBAAiB,EAC1C,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,GACpC,IACE,CACP,CAAC;AACJ,CAAC;AAtBD,gCAsBC;AAcD,SAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,mBAAmB,EACnB,WAAW,EACX,uBAAuB,EACvB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,IAAI,GACoB;IACxB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,CAAC;IACrC,gHAAgH;IAChH,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,EAAE;YACf,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACxB,OAAO;SACR;QAED,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,wBAAC,yBAAS,IAAC,UAAU,QAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,wBAAwB,EAAE,CAAC,QAAQ,IAAI,YAAY,CAAC,aACjJ,uBAAC,yBAAS,CAAC,cAAc,cACvB,uBAAC,yBAAS,CAAC,YAAY,IACrB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,8BAA8B,CAAC,gBAC/C,uBAAU,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAClD,IAAI,EAAE,IAAI,GACV,GACuB,EAC3B,wBAAC,yBAAS,CAAC,aAAa,eACtB,uBAAC,yBAAS,CAAC,KAAK,IACd,WAAW,EAAE,uBAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,EACrD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,GACrD,EACF,uBAAC,mBAAmB,IAAC,aAAa,EAAE,mBAAmB,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,GAAI,EAC5H,uBAAC,yBAAS,CAAC,cAAc,IACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,aAAa,CAAC,EAAE,CAAC,CAAC;4BAClB,OAAO,EAAE,CAAC;wBACZ,CAAC,EACD,IAAI,EAAE,IAAI,gBACE,uBAAU,CAAC,SAAS,CAAC,iBAAiB,CAAC,GACnD,IACsB,IAChB,CACb,CAAC;AACJ,CAAC;AAQD,SAAS,aAAa,CAAC,KAAyB;IAC9C,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE,KAAK,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC;IACnF,MAAM,iBAAiB,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE,KAAK,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAErF,OAAO,CACL,uBAAC,2BAAW,IACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,CACjC,uBAAC,4BAAY,IACX,SAAS,EAAE,GAAG,EAAE,CACd,gBAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;iBAC7B,KAAK,CAAC,aAAa,CAAC;iBACpB,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACnB,+BAAgB,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAC,UAAU,YAC1D,GAAG,IADG,KAAK,CAET,CACN,CAAC,EAEN,SAAS,EAAC,uCAAuC,YAEjD,uBAAC,0BAAU,IAAC,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,YAC1H,uBAAC,6BAAO,KAAG,GACA,GACA,CAChB,YAEA,KAAK,CAAC,QAAQ,GACH,CACf,CAAC;AACJ,CAAC;AASD,SAAS,mBAAmB,CAAC,KAA+B;IAC1D,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnD,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6DACE,iCAAM,SAAS,EAAC,0BAA0B,YAAE,GAAG,aAAa,IAAI,KAAK,EAAE,GAAQ,EAC/E,uBAAC,uBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,yBAAS,CAAC,MAAM,IACf,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,oBAAoB,CAAC,EACjD,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,aAAa,GAAG,CAAC,EAAE;wBACrB,MAAM,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;qBAC3B;gBACH,CAAC,YAED,uBAAC,qCAAe,KAAG,GACF,EACnB,uBAAC,yBAAS,CAAC,MAAM,IACf,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC7C,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,aAAa,GAAG,KAAK,EAAE;wBACzB,MAAM,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;qBAC3B;gBACH,CAAC,YAED,uBAAC,uCAAiB,KAAG,GACJ,IAClB,CACJ,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 \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useEffect, useRef, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** @internal */\nexport interface TreeHeaderButtonProps {\n  viewport: Viewport;\n  density?: \"default\" | \"enlarged\";\n}\n\n/** @internal */\nexport interface TreeHeaderProps extends CommonProps {\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** listens for onClick event for Clear (x) icon */\n  onFilterClear: () => void;\n  /** Total number of results/entries */\n  resultCount?: number;\n  /** Current selected result index */\n  selectedIndex?: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n  /** Header buttons */\n  children?: React.ReactNode;\n  /** Modifies the density of tree header. `enlarged` header contains larger content */\n  density?: \"default\" | \"enlarged\";\n}\n\n/** @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n  const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  const isEnlarged = density === \"enlarged\";\n  return (\n    <div className={classnames(\"tree-widget-tree-header\", className, isEnlarged && \"enlarge\")}>\n      <HeaderButtons contracted={isSearchOpen} isEnlarged={isEnlarged}>\n        {children}\n      </HeaderButtons>\n      <DebouncedSearchBox\n        isOpened={isSearchOpen}\n        onOpen={() => setIsSearchOpen(true)}\n        onClose={() => setIsSearchOpen(false)}\n        onChange={(value) => (value ? onFilterStart(value) : onFilterClear())}\n        delay={500}\n        selectedResultIndex={selectedIndex}\n        resultCount={resultCount}\n        onSelectedResultChanged={onSelectedChanged}\n        size={isEnlarged ? \"large\" : \"small\"}\n      />\n    </div>\n  );\n}\n\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n  onChange: (value: string) => void;\n  delay: number;\n  selectedResultIndex?: number;\n  resultCount?: number;\n  onSelectedResultChanged: (index: number) => void;\n  size?: \"large\" | \"small\";\n}\n\nfunction DebouncedSearchBox({\n  isOpened,\n  selectedResultIndex,\n  resultCount,\n  onSelectedResultChanged,\n  onChange,\n  onOpen,\n  onClose,\n  delay,\n  size,\n}: DebouncedSearchBoxProps) {\n  const [inputValue, setInputValue] = useState<string>(\"\");\n  const onChangeRef = useRef(onChange);\n  // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    if (!inputValue) {\n      onChangeRef.current(\"\");\n      return;\n    }\n\n    const timeoutId = setTimeout(() => {\n      onChangeRef.current(inputValue);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [inputValue, delay]);\n\n  return (\n    <SearchBox expandable onExpand={onOpen} onCollapse={onClose} size={size} className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}>\n      <SearchBox.CollapsedState>\n        <SearchBox.ExpandButton\n          title={TreeWidget.translate(\"searchBox.searchForSomething\")}\n          aria-label={TreeWidget.translate(\"searchBox.open\")}\n          size={size}\n        />\n      </SearchBox.CollapsedState>\n      <SearchBox.ExpandedState>\n        <SearchBox.Input\n          placeholder={TreeWidget.translate(\"searchBox.search\")}\n          onChange={(e) => setInputValue(e.currentTarget.value)}\n        />\n        <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} size={size} />\n        <SearchBox.CollapseButton\n          onClick={() => {\n            setInputValue(\"\");\n            onClose();\n          }}\n          size={size}\n          aria-label={TreeWidget.translate(\"searchBox.close\")}\n        />\n      </SearchBox.ExpandedState>\n    </SearchBox>\n  );\n}\n\ninterface HeaderButtonsProps {\n  contracted: boolean;\n  children?: React.ReactNode;\n  isEnlarged?: boolean;\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n  const className = classnames(\"button-container\", props.contracted && \"contracted\");\n  const dropdownClassName = classnames(\"dropdown-item\", props.isEnlarged && \"enlarge\");\n\n  return (\n    <ButtonGroup\n      className={className}\n      overflowButton={(overflowStart) => (\n        <DropdownMenu\n          menuItems={() =>\n            Children.toArray(props.children)\n              .slice(overflowStart)\n              .map((btn, index) => (\n                <li key={index} className={dropdownClassName} role=\"menuitem\">\n                  {btn}\n                </li>\n              ))\n          }\n          className=\"tree-header-button-dropdown-container\"\n        >\n          <IconButton title={TreeWidget.translate(\"dropdownMore\")} styleType=\"borderless\" size={props.isEnlarged ? undefined : \"small\"}>\n            <SvgMore />\n          </IconButton>\n        </DropdownMenu>\n      )}\n    >\n      {props.children}\n    </ButtonGroup>\n  );\n}\n\ninterface SearchResultStepperProps {\n  total?: number;\n  onStep: (newIndex: number) => void;\n  selectedIndex?: number;\n  size?: \"large\" | \"small\";\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n  const { selectedIndex = 1, total, onStep } = props;\n  if (!total) {\n    return null;\n  }\n\n  return (\n    <>\n      <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n      <Divider orientation=\"vertical\" />\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.previous\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex > 1) {\n            onStep(selectedIndex - 1);\n          }\n        }}\n      >\n        <SvgCaretUpSmall />\n      </SearchBox.Button>\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.next\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex < total) {\n            onStep(selectedIndex + 1);\n          }\n        }}\n      >\n        <SvgCaretDownSmall />\n      </SearchBox.Button>\n    </>\n  );\n}\n"]}

package/lib/cjs/components/tree-header/TreeHeader.scss

@@ -14,6 +14,10 @@
     width: 100%;
     height: var(--iui-size-xl);
 
+    &.enlarge {
+      height: calc(var(--iui-size-xl) + var(--iui-size-m));
+    }
+
     > * {
       width: 100%;
       height: 100%;
@@ -66,4 +70,28 @@
       width: var(--iui-size-xl);
     }
   }
+
+  &.enlarge {
+    --enlarged-header-height: calc(var(--iui-size-xl) + var(--iui-size-m));
+
+    height: var(--enlarged-header-height);
+    min-width: calc(100% - var(--enlarged-header-height));
+
+    .tree-widget-search-box {
+      height: var(--enlarged-header-height);
+      width: calc(100% - var(--enlarged-header-height));
+
+      &.contracted {
+        width: var(--enlarged-header-height);
+      }
+    }
+
+    .button-container {
+      width: calc(100% - var(--enlarged-header-height));
+
+      &.contracted {
+        width: var(--enlarged-header-height);
+      }
+    }
+  }
 }

package/lib/cjs/components/trees/category-tree/CategoriesTree.js

@@ -51,6 +51,7 @@ function CategoryTree(props) {
         filterInfo: props.filterInfo,
         onFilterChange,
         hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit,
+        enableHierarchyAutoUpdate: true,
     });
     (0, react_1.useEffect)(() => {
         setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises