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

package/lib/esm/tree-widget-react/components/{SelectableTree.scss → TreeWidgetComponentImpl.css}

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 
 .tree-widget-selectable-tree {
-  padding: var(--iui-size-xs);
   width: 100%;
   height: 100%;
   box-sizing: border-box;

package/lib/esm/tree-widget-react/components/{SelectableTree.d.ts → TreeWidgetComponentImpl.d.ts}

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import "./SelectableTree.scss";
+import "./TreeWidgetComponentImpl.css";
 import type { IModelConnection } from "@itwin/core-frontend";
 /**
  * Props for rendering trees
  * @public
  */
-export interface SelectableTreeRenderProps {
-    density?: "enlarged" | "default";
+export interface TreeRenderProps {
+    filter?: string;
     onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;
     onFeatureUsed?: (feature: string) => void;
 }
@@ -14,13 +14,13 @@ export interface SelectableTreeRenderProps {
  * Definition of a tree component displayed in `SelectableTree`.
  * @public
  */
-export interface SelectableTreeDefinition {
+export interface TreeDefinition {
     /** Id of the tree */
     id: string;
     /** Callback that is used to get tree label */
     getLabel: () => string;
     /** Callback that is used to render tree component */
-    render: (props: SelectableTreeRenderProps) => 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.
@@ -30,18 +30,17 @@ export interface SelectableTreeDefinition {
     startIcon?: React.ReactNode;
 }
 /**
- * Props for `SelectableTree`
- * @public
+ * Props for `TreeWidgetComponent`
+ * @internal
  */
-export interface SelectableTreeProps {
-    trees: SelectableTreeDefinition[];
-    density?: "enlarged" | "default";
+export interface TreeWidgetComponentImplProps {
+    trees: TreeDefinition[];
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
     onFeatureUsed?: (feature: string) => void;
 }
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
- * @public
+ * @internal
  */
-export declare function SelectableTree(props: SelectableTreeProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=SelectableTree.d.ts.map
+export declare function TreeWidgetComponentImpl(props: TreeWidgetComponentImplProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TreeWidgetComponentImpl.d.ts.map

package/lib/esm/tree-widget-react/components/{SelectableTree.js → TreeWidgetComponentImpl.js}

@@ -3,17 +3,17 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import "./SelectableTree.scss";
+import "./TreeWidgetComponentImpl.css";
 import { useEffect, useState } from "react";
 import { useActiveIModelConnection } from "@itwin/appui-react";
 import { Spinner } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../TreeWidget.js";
-import { TreeSelector } from "./TreeSelector.js";
+import { WidgetHeader } from "./tree-header/WidgetHeader.js";
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
- * @public
+ * @internal
  */
-export function SelectableTree(props) {
+export function TreeWidgetComponentImpl(props) {
     const imodel = useActiveIModelConnection();
     if (!imodel) {
         return null;
@@ -23,7 +23,8 @@ export function SelectableTree(props) {
 function SelectableTreeContent(props) {
     const { trees: treeDefinitions, imodel } = props;
     const trees = useActiveTrees(treeDefinitions, imodel);
-    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(TreeSelector, { ...getTreeSelectorProps(trees), onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
+    // TODO: move tree content rendering here
+    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(WidgetHeader, { ...getWidgetWithHeaderProps(trees), onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = useState();
@@ -55,7 +56,7 @@ async function getActiveTrees(treeDefinitions, imodel) {
     };
     return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined);
 }
-function getTreeSelectorProps(trees) {
+function getWidgetWithHeaderProps(trees) {
     if (trees === undefined) {
         return {
             defaultSelectedContentId: "loading",
@@ -100,4 +101,4 @@ function Delayed({ delay = 200, children }) {
     }
     return _jsx(_Fragment, { children: children });
 }
-//# sourceMappingURL=SelectableTree.js.map
+//# sourceMappingURL=TreeWidgetComponentImpl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeWidgetComponentImpl.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetComponentImpl.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 \"./TreeWidgetComponentImpl.css\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Spinner } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { WidgetHeader } from \"./tree-header/WidgetHeader.js\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, WidgetHeaderProps } from \"./tree-header/WidgetHeader.js\";\n/**\n * Props for rendering trees\n * @public\n */\nexport interface TreeRenderProps {\n  filter?: string;\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n// TODO: fix interface so startIcon type is taken from this interface for `TreeSelector`\n/**\n * Definition of a tree component displayed in `SelectableTree`.\n * @public\n */\nexport interface 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  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `TreeWidgetComponent`\n * @internal\n */\nexport interface TreeWidgetComponentImplProps {\n  trees: TreeDefinition[];\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders a tree (combo box) selector and the selected tree component.\n * @internal\n */\nexport function TreeWidgetComponentImpl(props: TreeWidgetComponentImplProps) {\n  const imodel = useActiveIModelConnection();\n  if (!imodel) {\n    return null;\n  }\n  return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: TreeWidgetComponentImplProps & { imodel: IModelConnection }) {\n  const { trees: treeDefinitions, imodel } = props;\n  const trees = useActiveTrees(treeDefinitions, imodel);\n\n  // TODO: move tree content rendering here\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <WidgetHeader {...getWidgetWithHeaderProps(trees)} onPerformanceMeasured={props.onPerformanceMeasured} onFeatureUsed={props.onFeatureUsed} />\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      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      startIcon: treeDef.startIcon,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getWidgetWithHeaderProps(trees?: TreeContentDefinition[]): WidgetHeaderProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          render: () => (\n            <Delayed>\n              {/* <ProgressLinear indeterminate={true} /> */}\n              <Spinner />\n            </Delayed>\n          ),\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\n          label: \"\",\n          render: () => (\n            <div style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\" }} className=\"tree-widget-no-trees-container\">\n              {TreeWidget.translate(\"selectableTree.noTrees\")}\n            </div>\n          ),\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const id = setTimeout(() => {\n      setShow(true);\n    }, delay);\n    return () => {\n      clearTimeout(id);\n    };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}

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

@@ -1,6 +1,6 @@
-import "./TreeWidgetUiItemsProvider.scss";
+import "./TreeWidgetUiItemsProvider.css";
 import type { Widget } from "@itwin/appui-react";
-import type { SelectableTreeDefinition, SelectableTreeProps } from "./SelectableTree.js";
+import type { TreeDefinition } from "./TreeWidgetComponentImpl.js";
 /**
  * Props for `createWidget`.
  * @public
@@ -13,9 +13,7 @@ interface TreeWidgetProps {
      * @see ExternalSourcesTreeComponent
      * @see IModelContentTreeComponent
      */
-    trees: SelectableTreeDefinition[];
-    /** Modifies the density of the tree widget. `enlarged` widget contains larger content */
-    density?: "enlarged" | "default";
+    trees: TreeDefinition[];
     /** Callback that is invoked when performance of tracked feature is measured. */
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
     /** Callback that is invoked when a tracked feature is used. */
@@ -30,6 +28,6 @@ export declare function createTreeWidget(props: TreeWidgetProps): Widget;
  * Tree widget component which allows selecting which tree to render.
  * @public
  */
-export declare function TreeWidgetComponent(props: SelectableTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeWidgetComponent(props: TreeWidgetProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TreeWidgetUiItemsProvider.d.ts.map

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

@@ -1,15 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import "./TreeWidgetUiItemsProvider.scss";
+import "./TreeWidgetUiItemsProvider.css";
 import { useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { StagePanelLocation, StagePanelSection, useTransientState } from "@itwin/appui-react";
 import { SvgHierarchyTree } from "@itwin/itwinui-icons-react";
 import { TreeWidget } from "../TreeWidget.js";
-import { SelectableTree } from "./SelectableTree.js";
+import { ErrorState } from "./tree-header/ErrorState.js";
+import { TreeWidgetComponentImpl } from "./TreeWidgetComponentImpl.js";
 /**
  * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.
  * @public
@@ -25,7 +26,7 @@ export function createTreeWidget(props) {
                 location: StagePanelLocation.Right,
             },
         },
-        content: (_jsx(TreeWidgetComponent, { trees: props.trees, density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed })),
+        content: _jsx(TreeWidgetComponent, { trees: props.trees, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }),
     };
 }
 /**
@@ -34,10 +35,7 @@ export function createTreeWidget(props) {
  */
 export function TreeWidgetComponent(props) {
     const ref = useTreeWidgetTransientState();
-    return (_jsx("div", { ref: ref, className: "tree-widget", children: _jsx(ErrorBoundary, { FallbackComponent: ErrorState, children: _jsx(SelectableTree, { ...props }) }) }));
-}
-function ErrorState({}) {
-    return _jsx(_Fragment, { children: " ERROR WINDOW TBD " });
+    return (_jsx("div", { ref: ref, className: "tree-widget", children: _jsx(ErrorBoundary, { FallbackComponent: ErrorState, children: _jsx(TreeWidgetComponentImpl, { ...props }) }) }));
 }
 function useTreeWidgetTransientState() {
     const { ref, persist, restore } = useTreeStorage();

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

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

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

@@ -0,0 +1,4 @@
+import type { FallbackProps } from "react-error-boundary";
+/** @internal */
+export declare function ErrorState({ resetErrorBoundary }: FallbackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ErrorState.d.ts.map

package/lib/esm/tree-widget-react/components/tree-header/ErrorState.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { Button, Icon, Text } from "@itwin/itwinui-react/bricks";
+import { TreeWidget } from "../../TreeWidget.js";
+const errorIcon = new URL("@itwin/itwinui-icons/status-error.svg", import.meta.url).href;
+/** @internal */
+export function ErrorState({ resetErrorBoundary }) {
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: "0.5rem" }, children: [_jsx(Icon, { href: errorIcon, size: "large" }), _jsx(Text, { children: TreeWidget.translate("errorState.description") }), _jsx(Button, { onClick: resetErrorBoundary, children: TreeWidget.translate("errorState.retryButtonLabel") })] }));
+}
+//# sourceMappingURL=ErrorState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/ErrorState.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAIjD,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,uCAAuC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AAEzF,gBAAgB;AAChB,MAAM,UAAU,UAAU,CAAC,EAAE,kBAAkB,EAAiB;IAC9D,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,aACrI,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,GAAG,EACtC,KAAC,IAAI,cAAE,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAAQ,EAC7D,KAAC,MAAM,IAAC,OAAO,EAAE,kBAAkB,YAAG,UAAU,CAAC,SAAS,CAAC,6BAA6B,CAAC,GAAU,IAC/F,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { Button, Icon, Text } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../../TreeWidget.js\";\n\nimport type { FallbackProps } from \"react-error-boundary\";\n\nconst errorIcon = new URL(\"@itwin/itwinui-icons/status-error.svg\", import.meta.url).href;\n\n/** @internal */\nexport function ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"center\", height: \"100%\", gap: \"0.5rem\" }}>\n      <Icon href={errorIcon} size=\"large\" />\n      <Text>{TreeWidget.translate(\"errorState.description\")}</Text>\n      <Button onClick={resetErrorBoundary}>{TreeWidget.translate(\"errorState.retryButtonLabel\")}</Button>\n    </div>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/tree-header/SearchBox.css

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.tw-search-box-button {
+  margin-left: var(--iui-size-xs);
+}

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

@@ -0,0 +1,11 @@
+import "./SearchBox.css";
+interface DebouncedSearchBoxProps {
+    isOpened: boolean;
+    setIsOpened: (value: boolean) => void;
+    onSearch: (value?: string) => void;
+    delay: number;
+    className?: string;
+}
+export declare function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }: DebouncedSearchBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchBox.d.ts.map

package/lib/esm/tree-widget-react/components/tree-header/SearchBox.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./SearchBox.css";
+import { useEffect, useRef, useState } from "react";
+import { IconButton, TextBox } from "@itwin/itwinui-react/bricks";
+import { TreeWidget } from "../../TreeWidget.js";
+const searchIcon = new URL("@itwin/itwinui-icons/search.svg", import.meta.url).href;
+const dismissIcon = new URL("@itwin/itwinui-icons/dismiss.svg", import.meta.url).href;
+export function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }) {
+    const [inputValue, setInputValue] = useState(undefined);
+    const onChangeRef = useRef(onSearch);
+    // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.
+    onChangeRef.current = onSearch;
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            onChangeRef.current(inputValue);
+        }, delay);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [inputValue, delay]);
+    return !isOpened ? (_jsx(IconButton, { className: "tw-search-box-button", variant: "ghost", label: TreeWidget.translate("header.searchBox.searchForSomething"), icon: searchIcon, onClick: () => {
+            setIsOpened(true);
+            setInputValue("");
+        } })) : (_jsxs(_Fragment, { children: [_jsx(TextBox.Root, { className: className, children: _jsx(TextBox.Input, { type: "text", onChange: (e) => setInputValue(e.currentTarget.value), placeholder: TreeWidget.translate("header.searchBox.search") }) }), _jsx(IconButton, { className: "tw-search-box-button", variant: "ghost", label: TreeWidget.translate("header.searchBox.close"), icon: dismissIcon, onClick: () => {
+                    setIsOpened(false);
+                    setInputValue(undefined);
+                } })] }));
+}
+//# sourceMappingURL=SearchBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/SearchBox.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,iCAAiC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AACpF,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,kCAAkC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AAUtF,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAA2B;IAC/G,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,gHAAgH;IAChH,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,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,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjB,KAAC,UAAU,IACT,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,qCAAqC,CAAC,EAClE,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,aAAa,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,OAAO,CAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAChC,KAAC,OAAO,CAAC,KAAK,IAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,yBAAyB,CAAC,GAAI,GACvI,EACf,KAAC,UAAU,IACT,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,EACrD,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,KAAK,CAAC,CAAC;oBACnB,aAAa,CAAC,SAAS,CAAC,CAAC;gBAC3B,CAAC,GACD,IACD,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 \"./SearchBox.css\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { IconButton, TextBox } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../../TreeWidget.js\";\n\nconst searchIcon = new URL(\"@itwin/itwinui-icons/search.svg\", import.meta.url).href;\nconst dismissIcon = new URL(\"@itwin/itwinui-icons/dismiss.svg\", import.meta.url).href;\n\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  setIsOpened: (value: boolean) => void;\n  onSearch: (value?: string) => void;\n  delay: number;\n  className?: string;\n}\n\nexport function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }: DebouncedSearchBoxProps) {\n  const [inputValue, setInputValue] = useState<string | undefined>(undefined);\n  const onChangeRef = useRef(onSearch);\n  // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n  onChangeRef.current = onSearch;\n\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      onChangeRef.current(inputValue);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [inputValue, delay]);\n\n  return !isOpened ? (\n    <IconButton\n      className={\"tw-search-box-button\"}\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"header.searchBox.searchForSomething\")}\n      icon={searchIcon}\n      onClick={() => {\n        setIsOpened(true);\n        setInputValue(\"\");\n      }}\n    />\n  ) : (\n    <>\n      <TextBox.Root className={className}>\n        <TextBox.Input type={\"text\"} onChange={(e) => setInputValue(e.currentTarget.value)} placeholder={TreeWidget.translate(\"header.searchBox.search\")} />\n      </TextBox.Root>\n      <IconButton\n        className={\"tw-search-box-button\"}\n        variant={\"ghost\"}\n        label={TreeWidget.translate(\"header.searchBox.close\")}\n        icon={dismissIcon}\n        onClick={() => {\n          setIsOpened(false);\n          setInputValue(undefined);\n        }}\n      />\n    </>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/tree-header/{TreeWithHeader.scss → SelectableTree.css}

@@ -3,21 +3,21 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 
-.tw-tree-with-header {
-  --tree-header-height: var(--iui-size-xl);
-  --tree-header-contracted-width: var(--iui-size-xl);
-
+.tw-tree-with-toolbar {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 
-  &.enlarge {
-    --tree-header-height: calc(var(--iui-size-xl) + var(--iui-size-l));
-    --tree-header-contracted-width: calc(var(--iui-size-xl) + var(--iui-size-l));
+  .tw-tree-toolbar {
+    padding: 0 var(--iui-size-s) var(--iui-size-xs)  var(--iui-size-s);
+    display: flex;
+    align-items: center;
+    gap: var(--iui-size-2xs);
   }
 
   .tw-tree-content {
-    height: calc(100% - var(--tree-header-height));
+    padding-top: var(--iui-size-xs);
+    height: 100%;
   }
 }

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

@@ -0,0 +1,16 @@
+import "./SelectableTree.css";
+import type { Viewport } from "@itwin/core-frontend";
+import type { PropsWithChildren, ReactNode } from "react";
+/** @public */
+export interface TreeToolbarButtonProps {
+    viewport: Viewport;
+    onFeatureUsed?: (feature: string) => void;
+}
+/** @beta */
+interface TreehHeaderProps {
+    buttons?: ReactNode;
+}
+/** @beta */
+export declare function SelectableTree({ buttons, children }: PropsWithChildren<TreehHeaderProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectableTree.d.ts.map

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./SelectableTree.css";
+import { ErrorBoundary } from "react-error-boundary";
+import { Divider } from "@itwin/itwinui-react/bricks";
+import { ErrorState } from "./ErrorState.js";
+/** @beta */
+export function SelectableTree({ buttons, children }) {
+    return (_jsxs("div", { className: "tw-tree-with-toolbar", children: [buttons ? _jsx("div", { className: "tw-tree-toolbar", children: buttons }) : _jsx(_Fragment, {}), _jsx(Divider, {}), _jsx(ErrorBoundary, { FallbackComponent: ErrorState, children: _jsx("div", { className: "tw-tree-content", children: children }) })] }));
+}
+//# sourceMappingURL=SelectableTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/SelectableTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAuC;IACvF,OAAO,CACL,eAAK,SAAS,EAAE,sBAAsB,aACnC,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,iBAAiB,YAAG,OAAO,GAAO,CAAC,CAAC,CAAC,mBAAK,EACrE,KAAC,OAAO,KAAG,EACX,KAAC,aAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,cAAK,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAO,GACnC,IACZ,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./SelectableTree.css\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { Divider } from \"@itwin/itwinui-react/bricks\";\nimport { ErrorState } from \"./ErrorState.js\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\n\n/** @public */\nexport interface TreeToolbarButtonProps {\n  viewport: Viewport;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/** @beta */\ninterface TreehHeaderProps {\n  buttons?: ReactNode;\n}\n\n/** @beta */\nexport function SelectableTree({ buttons, children }: PropsWithChildren<TreehHeaderProps>) {\n  return (\n    <div className={\"tw-tree-with-toolbar\"}>\n      {buttons ? <div className={\"tw-tree-toolbar\"}>{buttons}</div> : <></>}\n      <Divider />\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <div className=\"tw-tree-content\">{children}</div>\n      </ErrorBoundary>\n    </div>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/{TreeSelector.scss → tree-header/WidgetHeader.css}

@@ -3,21 +3,27 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 
-.presentation-components-tree-selector-content {
+.tw-content {
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
 
-  .presentation-components-tree-selector-content-header {
-    padding-bottom: var(--iui-size-2xs);
+  .tw-content-header {
+    display: flex;
+    vertical-align: middle;
+    padding: var(--iui-size-s) var(--iui-size-s) var(--iui-size-xs) var(--iui-size-s);
+
+    .tw-content-header-selector {
+      width: 100%;
+    }
 
-    .presentation-components-tree-selector-content-selector {
+    .tw-content-header-search {
       width: 100%;
     }
   }
 
-  .presentation-components-tree-selector-content-wrapper {
+  .tw-content-wrapper {
     display: flex;
     flex-direction: column;
     flex-grow: 1;

package/lib/esm/tree-widget-react/components/{TreeSelector.d.ts → tree-header/WidgetHeader.d.ts}

@@ -1,21 +1,20 @@
 /// <reference types="react" />
-import "./TreeSelector.scss";
-import type { SelectableTreeRenderProps } from "./SelectableTree.js";
+import "./WidgetHeader.css";
+import type { TreeRenderProps } from "../TreeWidgetComponentImpl.js";
 /**
- * A definition for trees displayed in `TreeSelector`
+ * A definition for trees displayed in `WidgetWithHeader`
  * @internal
  */
 export interface TreeContentDefinition {
     id: string;
     label: string;
-    render: (props: SelectableTreeRenderProps) => React.ReactNode;
-    startIcon?: React.ReactNode;
+    render: (props: TreeRenderProps) => React.ReactNode;
 }
 /**
- * Props for `TreeSelector`
+ * Props for `WidgetWithHeader`
  * @internal
  */
-export interface TreeSelectorProps {
+export interface WidgetHeaderProps {
     defaultSelectedContentId: string;
     trees: TreeContentDefinition[];
     onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
@@ -26,5 +25,5 @@ export interface TreeSelectorProps {
  * allowing to choose which of the provided tree components should be rendered at the bottom.
  * @internal
  */
-export declare function TreeSelector({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }: TreeSelectorProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TreeSelector.d.ts.map
+export declare function WidgetHeader({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }: WidgetHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WidgetHeader.d.ts.map

package/lib/esm/tree-widget-react/components/tree-header/WidgetHeader.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./WidgetHeader.css";
+import { useState } from "react";
+import { Select } from "@itwin/itwinui-react/bricks";
+import { DebouncedSearchBox } from "./SearchBox.js";
+// TODO: move tree content rendering outside
+/**
+ * A component that accepts a list of trees and renders a select box at the top,
+ * allowing to choose which of the provided tree components should be rendered at the bottom.
+ * @internal
+ */
+export function WidgetHeader({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }) {
+    const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);
+    const selectedContent = trees.find((c) => c.id === selectedContentId) ?? trees[0];
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState(undefined);
+    return (_jsxs("div", { className: "tw-content", children: [_jsxs("div", { className: "tw-content-header", children: [trees.length > 0 && !isSearchOpen && (_jsx(Select.Root, { className: "tw-content-header-selector", children: _jsx(Select.HtmlSelect, { value: selectedContent.id, onChange: (e) => {
+                                const treeId = e.target.value;
+                                onFeatureUsed?.(`choose-${treeId}`);
+                                setSelectedContentId(treeId);
+                            }, children: trees.map((tree) => (_jsx("option", { value: tree.id, children: tree.label }, tree.id))) }) })), _jsx(DebouncedSearchBox, { className: "tw-content-header-search", isOpened: isSearchOpen, setIsOpened: setIsSearchOpen, onSearch: setSearchValue, delay: 20 })] }), _jsx("div", { className: "tw-content-wrapper", children: selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue }) })] }));
+}
+//# sourceMappingURL=WidgetHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetHeader.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/WidgetHeader.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAyBpD,4CAA4C;AAC5C;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAqB;IACvH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,wBAAwB,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAClF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACjE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAE9E,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,aACzB,eAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CACpC,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,4BAA4B,YAClD,KAAC,MAAM,CAAC,UAAU,IAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;gCAC9B,aAAa,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;gCACpC,oBAAoB,CAAC,MAAM,CAAC,CAAC;4BAC/B,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAAsB,KAAK,EAAE,IAAI,CAAC,EAAE,YACjC,IAAI,CAAC,KAAK,IADA,IAAI,CAAC,EAAE,CAEX,CACV,CAAC,GACgB,GACR,CACf,EACD,KAAC,kBAAkB,IAAC,SAAS,EAAE,0BAA0B,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,GAAI,IACpJ,EACN,cAAK,SAAS,EAAC,oBAAoB,YAAE,eAAe,EAAE,MAAM,CAAC,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,GAAO,IAC9H,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./WidgetHeader.css\";\nimport { useState } from \"react\";\nimport { Select } from \"@itwin/itwinui-react/bricks\";\nimport { DebouncedSearchBox } from \"./SearchBox.js\";\n\nimport type { TreeRenderProps } from \"../TreeWidgetComponentImpl.js\";\n\n/**\n * A definition for trees displayed in `WidgetWithHeader`\n * @internal\n */\nexport interface TreeContentDefinition {\n  id: string;\n  label: string;\n  render: (props: TreeRenderProps) => React.ReactNode;\n}\n\n/**\n * Props for `WidgetWithHeader`\n * @internal\n */\nexport interface WidgetHeaderProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n// TODO: move tree content rendering outside\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 WidgetHeader({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }: WidgetHeaderProps) {\n  const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);\n  const selectedContent = trees.find((c) => c.id === selectedContentId) ?? trees[0];\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);\n\n  return (\n    <div className=\"tw-content\">\n      <div className=\"tw-content-header\">\n        {trees.length > 0 && !isSearchOpen && (\n          <Select.Root className={\"tw-content-header-selector\"}>\n            <Select.HtmlSelect\n              value={selectedContent.id}\n              onChange={(e) => {\n                const treeId = e.target.value;\n                onFeatureUsed?.(`choose-${treeId}`);\n                setSelectedContentId(treeId);\n              }}\n            >\n              {trees.map((tree) => (\n                <option key={tree.id} value={tree.id}>\n                  {tree.label}\n                </option>\n              ))}\n            </Select.HtmlSelect>\n          </Select.Root>\n        )}\n        <DebouncedSearchBox className={\"tw-content-header-search\"} isOpened={isSearchOpen} setIsOpened={setIsSearchOpen} onSearch={setSearchValue} delay={20} />\n      </div>\n      <div className=\"tw-content-wrapper\">{selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue })}</div>\n    </div>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.d.ts

@@ -1,11 +1,12 @@
+import type { VisibilityTreeRendererProps } from "../common/components/VisibilityTreeRenderer.js";
 import type { UseCategoriesTreeProps } from "./UseCategoriesTree.js";
 import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
 /** @beta */
-export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "density" | "selectionMode"> & UseCategoriesTreeProps & {
+export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "actions"> & UseCategoriesTreeProps & {
     hierarchyLevelConfig?: {
         sizeLimit?: number;
     };
 };
 /** @beta */
-export declare function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, density, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CategoriesTree.d.ts.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.js

@@ -7,12 +7,13 @@ import { VisibilityTree } from "../common/components/VisibilityTree.js";
 import { VisibilityTreeRenderer } from "../common/components/VisibilityTreeRenderer.js";
 import { useCategoriesTree } from "./UseCategoriesTree.js";
 /** @beta */
-export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, density, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, }) {
+export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, }) {
     const { categoriesTreeProps, rendererProps } = useCategoriesTree({
         filter,
         activeView,
         onCategoriesFiltered,
+        emptyTreeContent,
     });
-    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, density: density, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => _jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps }) }));
+    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => _jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps }) }));
 }
 //# sourceMappingURL=CategoriesTree.js.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAa3D,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,aAAa,EACb,oBAAoB,GACA;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;KACrB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,OACT,mBAAmB,EACvB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EACxD,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,IAAI,MAAM,EACtC,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,KAAC,sBAAsB,OAAK,SAAS,KAAM,aAAa,GAAI,GACzF,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 { VisibilityTree } from \"../common/components/VisibilityTree.js\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer.js\";\nimport { useCategoriesTree } from \"./UseCategoriesTree.js\";\n\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" | \"getSchemaContext\" | \"selectionStorage\" | \"density\" | \"selectionMode\"> &\n  UseCategoriesTreeProps & {\n    hierarchyLevelConfig?: {\n      sizeLimit?: number;\n    };\n  };\n\n/** @beta */\nexport function CategoriesTree({\n  imodel,\n  getSchemaContext,\n  selectionStorage,\n  activeView,\n  filter,\n  density,\n  hierarchyLevelConfig,\n  selectionMode,\n  onCategoriesFiltered,\n}: CategoriesTreeProps) {\n  const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n    filter,\n    activeView,\n    onCategoriesFiltered,\n  });\n\n  return (\n    <VisibilityTree\n      {...categoriesTreeProps}\n      imodel={imodel}\n      selectionStorage={selectionStorage}\n      getSchemaContext={getSchemaContext}\n      hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n      density={density}\n      selectionMode={selectionMode ?? \"none\"}\n      treeRenderer={(treeProps) => <VisibilityTreeRenderer {...treeProps} {...rendererProps} />}\n    />\n  );\n}\n"]}
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAe3D,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,GACI;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;QACpB,gBAAgB;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,OACT,mBAAmB,EACvB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EACxD,aAAa,EAAE,aAAa,IAAI,MAAM,EACtC,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,KAAC,sBAAsB,OAAK,SAAS,KAAM,aAAa,GAAI,GACzF,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 { VisibilityTree } from \"../common/components/VisibilityTree.js\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer.js\";\nimport { useCategoriesTree } from \"./UseCategoriesTree.js\";\n\nimport type { VisibilityTreeRendererProps } from \"../common/components/VisibilityTreeRenderer.js\";\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" | \"getSchemaContext\" | \"selectionStorage\" | \"selectionMode\" | \"emptyTreeContent\"> &\n  Pick<VisibilityTreeRendererProps, \"actions\"> &\n  UseCategoriesTreeProps & {\n    hierarchyLevelConfig?: {\n      sizeLimit?: number;\n    };\n  };\n\n/** @beta */\nexport function CategoriesTree({\n  imodel,\n  getSchemaContext,\n  selectionStorage,\n  activeView,\n  filter,\n  hierarchyLevelConfig,\n  selectionMode,\n  onCategoriesFiltered,\n  emptyTreeContent,\n}: CategoriesTreeProps) {\n  const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n    filter,\n    activeView,\n    onCategoriesFiltered,\n    emptyTreeContent,\n  });\n\n  return (\n    <VisibilityTree\n      {...categoriesTreeProps}\n      imodel={imodel}\n      selectionStorage={selectionStorage}\n      getSchemaContext={getSchemaContext}\n      hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n      selectionMode={selectionMode ?? \"none\"}\n      treeRenderer={(treeProps) => <VisibilityTreeRenderer {...treeProps} {...rendererProps} />}\n    />\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import type { CategoryInfo } from "../common/CategoriesVisibilityUtils.js";
-import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader.js";
+import type { TreeToolbarButtonProps } from "../../tree-header/SelectableTree.js";
 import type { Viewport } from "@itwin/core-frontend";
 /**
  * Props that get passed to `CategoriesTreeComponent` header button renderer.
  * @see CategoriesTreeComponentProps.headerButtons
  * @public
  */
-export interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {
+export interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps {
     /** A list of categories available in the iModel */
     categories: CategoryInfo[];
 }