@itwin/tree-widget-react 4.0.0-alpha.7 → 4.0.0-alpha.9

package/lib/esm/tree-widget-react/TreeWidget.d.ts

@@ -1,18 +1,23 @@
 import type { Localization, TranslationOptions } from "@itwin/core-common";
+import type { ILogger } from "@itwin/presentation-shared";
 /**
  * Entry point for static initialization required by various components used in the package.
  * @public
  */
 export declare class TreeWidget {
     private static _i18n?;
+    private static _logger?;
     private static _initialized?;
     /**
      * Called by IModelApp to initialize the Tree Widget
      * @param i18n - The internationalization service created by the IModelApp.
+     * @param logger - The logger to use for logging messages. Defaults to `Logger` from `@itwin/core-bentley`.
      */
-    static initialize(i18n?: Localization): Promise<void>;
+    static initialize(i18n?: Localization, logger?: ILogger): Promise<void>;
     /** Unregisters the TreeWidget internationalization service namespace */
     static terminate(): void;
+    /** The logger used by this components in this package. */
+    static get logger(): ILogger;
     /** The internationalization service created by the IModelApp. */
     static get i18n(): Localization;
     /** The internationalization service namespace. */

package/lib/esm/tree-widget-react/TreeWidget.js

@@ -2,8 +2,11 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { BentleyError, BentleyStatus } from "@itwin/core-bentley";
+import { BentleyError, BentleyStatus, Logger } from "@itwin/core-bentley";
 import { IModelApp } from "@itwin/core-frontend";
+import { createLogger } from "@itwin/presentation-core-interop";
+import { setLogger as setHierarchiesLogger } from "@itwin/presentation-hierarchies";
+import { setLogger as setHierarchiesReactLogger } from "@itwin/presentation-hierarchies-react";
 /**
  * Entry point for static initialization required by various components used in the package.
  * @public
@@ -12,12 +15,16 @@ export class TreeWidget {
     /**
      * Called by IModelApp to initialize the Tree Widget
      * @param i18n - The internationalization service created by the IModelApp.
+     * @param logger - The logger to use for logging messages. Defaults to `Logger` from `@itwin/core-bentley`.
      */
-    static async initialize(i18n) {
+    static async initialize(i18n, logger) {
         if (this._initialized) {
             return;
         }
         TreeWidget._initialized = true;
+        TreeWidget._logger = logger ?? createLogger(Logger);
+        setHierarchiesLogger(TreeWidget._logger);
+        setHierarchiesReactLogger(TreeWidget._logger);
         TreeWidget._i18n = i18n ?? IModelApp.localization;
         return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);
     }
@@ -27,8 +34,18 @@ export class TreeWidget {
             TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);
             TreeWidget._i18n = undefined;
         }
+        TreeWidget._logger = undefined;
+        setHierarchiesLogger(undefined);
+        setHierarchiesReactLogger(undefined);
         TreeWidget._initialized = false;
     }
+    /** The logger used by this components in this package. */
+    static get logger() {
+        if (!TreeWidget._logger) {
+            throw new BentleyError(BentleyStatus.ERROR, "TreeWidget not initialized");
+        }
+        return TreeWidget._logger;
+    }
     /** The internationalization service created by the IModelApp. */
     static get i18n() {
         if (!TreeWidget._i18n) {

package/lib/esm/tree-widget-react/TreeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../../src/tree-widget-react/TreeWidget.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD;;;GAGG;AACH,MAAM,OAAO,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO;SACR;QAED,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,SAAS,CAAC,YAAY,CAAC;QAClD,OAAO,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,SAAS;QACrB,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAC/D,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;SAC9B;QAED,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;YACrB,MAAM,IAAI,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;SAC3E;QACD,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB,EAAE,OAA4B;QAC1E,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC;CACF","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 { BentleyError, BentleyStatus } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\n\nimport type { Localization, TranslationOptions } from \"@itwin/core-common\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   */\n  public static async initialize(i18n?: Localization): Promise<void> {\n    if (this._initialized) {\n      return;\n    }\n\n    TreeWidget._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n) {\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n      TreeWidget._i18n = undefined;\n    }\n\n    TreeWidget._initialized = false;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n) {\n      throw new BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n    }\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(key: string | string[], options?: TranslationOptions): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(stringKey, options);\n  }\n}\n"]}
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../../src/tree-widget-react/TreeWidget.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,SAAS,IAAI,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAK/F;;;GAGG;AACH,MAAM,OAAO,UAAU;IAKrB;;;;OAIG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB,EAAE,MAAgB;QAClE,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO;SACR;QAED,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAE/B,UAAU,CAAC,OAAO,GAAG,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;QACpD,oBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzC,yBAAyB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAE9C,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,SAAS,CAAC,YAAY,CAAC;QAClD,OAAO,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,SAAS;QACrB,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAC/D,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;SAC9B;QAED,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC;QAC/B,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAChC,yBAAyB,CAAC,SAAS,CAAC,CAAC;QAErC,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,0DAA0D;IACnD,MAAM,KAAK,MAAM;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACvB,MAAM,IAAI,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;SAC3E;QACD,OAAO,UAAU,CAAC,OAAO,CAAC;IAC5B,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;YACrB,MAAM,IAAI,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;SAC3E;QACD,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB,EAAE,OAA4B;QAC1E,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC;CACF","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 { BentleyError, BentleyStatus, Logger } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { createLogger } from \"@itwin/presentation-core-interop\";\nimport { setLogger as setHierarchiesLogger } from \"@itwin/presentation-hierarchies\";\nimport { setLogger as setHierarchiesReactLogger } from \"@itwin/presentation-hierarchies-react\";\n\nimport type { Localization, TranslationOptions } from \"@itwin/core-common\";\nimport type { ILogger } from \"@itwin/presentation-shared\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n  private static _i18n?: Localization;\n  private static _logger?: ILogger;\n  private static _initialized?: boolean;\n\n  /**\n   * Called by IModelApp to initialize the Tree Widget\n   * @param i18n - The internationalization service created by the IModelApp.\n   * @param logger - The logger to use for logging messages. Defaults to `Logger` from `@itwin/core-bentley`.\n   */\n  public static async initialize(i18n?: Localization, logger?: ILogger): Promise<void> {\n    if (this._initialized) {\n      return;\n    }\n\n    TreeWidget._initialized = true;\n\n    TreeWidget._logger = logger ?? createLogger(Logger);\n    setHierarchiesLogger(TreeWidget._logger);\n    setHierarchiesReactLogger(TreeWidget._logger);\n\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n    return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n  }\n\n  /** Unregisters the TreeWidget internationalization service namespace */\n  public static terminate() {\n    if (TreeWidget._i18n) {\n      TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n      TreeWidget._i18n = undefined;\n    }\n\n    TreeWidget._logger = undefined;\n    setHierarchiesLogger(undefined);\n    setHierarchiesReactLogger(undefined);\n\n    TreeWidget._initialized = false;\n  }\n\n  /** The logger used by this components in this package. */\n  public static get logger(): ILogger {\n    if (!TreeWidget._logger) {\n      throw new BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n    }\n    return TreeWidget._logger;\n  }\n\n  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n) {\n      throw new BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n    }\n    return TreeWidget._i18n;\n  }\n\n  /** The internationalization service namespace. */\n  public static get i18nNamespace(): string {\n    return \"TreeWidget\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(key: string | string[], options?: TranslationOptions): string {\n    const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n    return TreeWidget.i18n.getLocalizedString(stringKey, options);\n  }\n}\n"]}

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

@@ -26,6 +26,12 @@ export interface TreeDefinition {
      * If callback is `undefined` tree is shown for all iModel connections.
      */
     shouldShow?: (imodel: IModelConnection) => Promise<boolean>;
+    /**
+     *  Flag to determine if search box should be rendered.
+     *  - false or undefined, the search box will not be rendered.
+     *  - true, the search box will be rendered.
+     */
+    isSearchable?: boolean;
     /** Icon to render before tree label in tree selector */
     startIcon?: React.ReactNode;
 }

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

@@ -1,14 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, 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 "./TreeWidgetComponentImpl.css";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useActiveIModelConnection } from "@itwin/appui-react";
-import { Spinner } from "@itwin/itwinui-react/bricks";
+import { Skeleton } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../TreeWidget.js";
+import { SelectableTree } from "./tree-header/SelectableTree.js";
 import { WidgetHeader } from "./tree-header/WidgetHeader.js";
+import { SkeletonTree } from "./trees/common/components/SkeletonTree.js";
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
  * @internal
@@ -20,11 +22,17 @@ export function TreeWidgetComponentImpl(props) {
     }
     return _jsx(SelectableTreeContent, { ...props, imodel: imodel });
 }
-function SelectableTreeContent(props) {
-    const { trees: treeDefinitions, imodel } = props;
-    const trees = useActiveTrees(treeDefinitions, imodel);
-    // 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 SelectableTreeContent({ onPerformanceMeasured, onFeatureUsed, trees: treeDefinitions, imodel, }) {
+    const activeTrees = useActiveTrees(treeDefinitions, imodel);
+    const { trees, defaultSelectedContentId } = useMemo(() => getWidgetWithHeaderProps(activeTrees), [activeTrees]);
+    const [searchValue, setSearchValue] = useState(undefined);
+    const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);
+    const selectedContent = useMemo(() => trees.find((c) => c.id === selectedContentId) ?? trees[0], [selectedContentId, trees]);
+    const onSelect = useCallback((treeId) => {
+        onFeatureUsed?.(`choose-${treeId}`);
+        setSelectedContentId(treeId);
+    }, [onFeatureUsed]);
+    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsxs("div", { className: "tw-content", children: [_jsx(WidgetHeader, { trees: trees, defaultSelectedContentId: defaultSelectedContentId, onSearch: setSearchValue, onSelect: onSelect, isLoading: selectedContent.id === "loading" }), _jsx("div", { className: "tw-content-wrapper", children: selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue }) })] }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = useState();
@@ -49,6 +57,7 @@ async function getActiveTrees(treeDefinitions, imodel) {
         }
         return {
             id: treeDef.id,
+            isSearchable: treeDef.isSearchable,
             label: treeDef.getLabel(),
             render: treeDef.render,
             startIcon: treeDef.startIcon,
@@ -64,7 +73,8 @@ function getWidgetWithHeaderProps(trees) {
                 {
                     id: "loading",
                     label: "",
-                    render: () => (_jsx(Delayed, { children: _jsx(Spinner, {}) })),
+                    isSearchable: false,
+                    render: () => _jsx(LoadingTree, {}),
                 },
             ],
         };
@@ -75,6 +85,7 @@ function getWidgetWithHeaderProps(trees) {
             trees: [
                 {
                     id: "no-trees",
+                    isSearchable: false,
                     label: "",
                     render: () => (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, className: "tree-widget-no-trees-container", children: TreeWidget.translate("selectableTree.noTrees") })),
                 },
@@ -86,19 +97,7 @@ function getWidgetWithHeaderProps(trees) {
         trees,
     };
 }
-function Delayed({ delay = 200, children }) {
-    const [show, setShow] = useState(false);
-    useEffect(() => {
-        const id = setTimeout(() => {
-            setShow(true);
-        }, delay);
-        return () => {
-            clearTimeout(id);
-        };
-    }, [delay]);
-    if (!show) {
-        return null;
-    }
-    return _jsx(_Fragment, { children: children });
+function LoadingTree() {
+    return (_jsx(SelectableTree, { buttons: _jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" }), _jsx(Skeleton, { variant: "object", size: "medium" })] }), children: _jsx(SkeletonTree, {}) }));
 }
 //# sourceMappingURL=TreeWidgetComponentImpl.js.map

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

@@ -1 +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"]}
+{"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 { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Skeleton } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { SelectableTree } from \"./tree-header/SelectableTree.js\";\nimport { WidgetHeader } from \"./tree-header/WidgetHeader.js\";\nimport { SkeletonTree } from \"./trees/common/components/SkeletonTree.js\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectionProps } 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  /**\n   *  Flag to determine if search box should be rendered.\n   *  - false or undefined, the search box will not be rendered.\n   *  - true, the search box will be rendered.\n   */\n  isSearchable?: 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({\n  onPerformanceMeasured,\n  onFeatureUsed,\n  trees: treeDefinitions,\n  imodel,\n}: TreeWidgetComponentImplProps & { imodel: IModelConnection }) {\n  const activeTrees = useActiveTrees(treeDefinitions, imodel);\n  const { trees, defaultSelectedContentId } = useMemo(() => getWidgetWithHeaderProps(activeTrees), [activeTrees]);\n  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);\n  const [selectedContentId, setSelectedContentId] = useState<string | undefined>(defaultSelectedContentId);\n  const selectedContent = useMemo(() => trees.find((c) => c.id === selectedContentId) ?? trees[0], [selectedContentId, trees]);\n\n  const onSelect = useCallback(\n    (treeId: string) => {\n      onFeatureUsed?.(`choose-${treeId}`);\n      setSelectedContentId(treeId);\n    },\n    [onFeatureUsed],\n  );\n\n  return (\n    <div className=\"tree-widget-selectable-tree\">\n      <div className=\"tw-content\">\n        <WidgetHeader\n          trees={trees}\n          defaultSelectedContentId={defaultSelectedContentId}\n          onSearch={setSearchValue}\n          onSelect={onSelect}\n          isLoading={selectedContent.id === \"loading\"}\n        />\n        <div className=\"tw-content-wrapper\">{selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue })}</div>\n      </div>\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      isSearchable: treeDef.isSearchable,\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[]): TreeSelectionProps {\n  if (trees === undefined) {\n    return {\n      defaultSelectedContentId: \"loading\",\n      trees: [\n        {\n          id: \"loading\",\n          label: \"\",\n          isSearchable: false,\n          render: () => <LoadingTree />,\n        },\n      ],\n    };\n  }\n\n  if (trees.length === 0) {\n    return {\n      defaultSelectedContentId: \"no-trees\",\n      trees: [\n        {\n          id: \"no-trees\",\n          isSearchable: false,\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 LoadingTree() {\n  return (\n    <SelectableTree\n      buttons={\n        <>\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n          <Skeleton variant={\"object\"} size={\"medium\"} />\n        </>\n      }\n    >\n      <SkeletonTree />\n    </SelectableTree>\n  );\n}\n"]}

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

@@ -7,11 +7,11 @@ import "./TreeWidgetUiItemsProvider.css";
 import { useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { StagePanelLocation, StagePanelSection, useTransientState } from "@itwin/appui-react";
+import hierarchyTreeSvg from "@itwin/itwinui-icons/hierarchy-tree.svg";
 import { Icon } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../TreeWidget.js";
 import { ErrorState } from "./tree-header/ErrorState.js";
 import { TreeWidgetComponentImpl } from "./TreeWidgetComponentImpl.js";
-const hierarchyTreeSvg = new URL("@itwin/itwinui-icons/hierarchy-tree.svg", import.meta.url).href;
 /**
  * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.
  * @public

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,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,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAwBvE,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC,yCAAyC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AAElG;;;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,IAAI,IAAC,IAAI,EAAE,gBAAgB,GAAI;QACtC,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 { Icon } from \"@itwin/itwinui-react/bricks\";\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 * 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\nconst hierarchyTreeSvg = new URL(\"@itwin/itwinui-icons/hierarchy-tree.svg\", import.meta.url).href;\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: <Icon href={hierarchyTreeSvg} />,\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"]}
+{"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,gBAAgB,MAAM,yCAAyC,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,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,IAAI,IAAC,IAAI,EAAE,gBAAgB,GAAI;QACtC,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 hierarchyTreeSvg from \"@itwin/itwinui-icons/hierarchy-tree.svg\";\nimport { Icon } from \"@itwin/itwinui-react/bricks\";\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 * 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/**\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: <Icon href={hierarchyTreeSvg} />,\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.js

@@ -3,9 +3,9 @@ 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 errorSvg from "@itwin/itwinui-icons/status-error.svg";
 import { Button, Icon, Text } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../../TreeWidget.js";
-const errorSvg = 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: errorSvg, size: "large" }), _jsx(Text, { variant: "body-sm", children: TreeWidget.translate("errorState.description") }), _jsx(Button, { onClick: resetErrorBoundary, children: TreeWidget.translate("errorState.retryButtonLabel") })] }));

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

@@ -1 +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,QAAQ,GAAG,IAAI,GAAG,CAAC,uCAAuC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AAExF,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,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,EACrC,KAAC,IAAI,IAAC,OAAO,EAAE,SAAS,YAAG,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAAQ,EACjF,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 errorSvg = 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={errorSvg} size=\"large\" />\n      <Text variant={\"body-sm\"}>{TreeWidget.translate(\"errorState.description\")}</Text>\n      <Button onClick={resetErrorBoundary}>{TreeWidget.translate(\"errorState.retryButtonLabel\")}</Button>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/ErrorState.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAIjD,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,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,EACrC,KAAC,IAAI,IAAC,OAAO,EAAE,SAAS,YAAG,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAAQ,EACjF,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 errorSvg from \"@itwin/itwinui-icons/status-error.svg\";\nimport { Button, Icon, Text } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../../TreeWidget.js\";\n\nimport type { FallbackProps } from \"react-error-boundary\";\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={errorSvg} size=\"large\" />\n      <Text variant={\"body-sm\"}>{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.d.ts

@@ -1,4 +1,3 @@
-import "./SearchBox.css";
 interface DebouncedSearchBoxProps {
     isOpened: boolean;
     setIsOpened: (value: boolean) => void;

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

@@ -3,12 +3,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * 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 closeSvg from "@itwin/itwinui-icons/close.svg";
+import searchSvg from "@itwin/itwinui-icons/search.svg";
 import { IconButton, TextBox } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../../TreeWidget.js";
-const dismissSvg = new URL("@itwin/itwinui-icons/dismiss.svg", import.meta.url).href;
-const searchSvg = new URL("@itwin/itwinui-icons/search.svg", import.meta.url).href;
 /** @internal */
 export function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }) {
     const [inputValue, setInputValue] = useState(undefined);
@@ -26,7 +25,7 @@ export function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, cla
     return !isOpened ? (_jsx(IconButton, { className: "tw-search-box-button", variant: "ghost", label: TreeWidget.translate("header.searchBox.searchForSomething"), icon: searchSvg, 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: dismissSvg, onClick: () => {
+        } })) : (_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: closeSvg, onClick: () => {
                     setIsOpened(false);
                     setInputValue(undefined);
                 } })] }));

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

@@ -1 +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;AAUjD,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,kCAAkC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AACrF,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,iCAAiC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AAEnF,gBAAgB;AAChB,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,SAAS,EACf,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,UAAU,EAChB,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\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  setIsOpened: (value: boolean) => void;\n  onSearch: (value?: string) => void;\n  delay: number;\n  className?: string;\n}\n\nconst dismissSvg = new URL(\"@itwin/itwinui-icons/dismiss.svg\", import.meta.url).href;\nconst searchSvg = new URL(\"@itwin/itwinui-icons/search.svg\", import.meta.url).href;\n\n/** @internal */\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={searchSvg}\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={dismissSvg}\n        onClick={() => {\n          setIsOpened(false);\n          setInputValue(undefined);\n        }}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/SearchBox.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUjD,gBAAgB;AAChB,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,SAAS,EACf,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,QAAQ,EACd,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 { useEffect, useRef, useState } from \"react\";\nimport closeSvg from \"@itwin/itwinui-icons/close.svg\";\nimport searchSvg from \"@itwin/itwinui-icons/search.svg\";\nimport { IconButton, TextBox } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../../TreeWidget.js\";\n\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  setIsOpened: (value: boolean) => void;\n  onSearch: (value?: string) => void;\n  delay: number;\n  className?: string;\n}\n\n/** @internal */\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={searchSvg}\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={closeSvg}\n        onClick={() => {\n          setIsOpened(false);\n          setInputValue(undefined);\n        }}\n      />\n    </>\n  );\n}\n"]}

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

@@ -13,6 +13,7 @@
     display: flex;
     vertical-align: middle;
     padding: var(--iui-size-s) var(--iui-size-s) var(--iui-size-xs) var(--iui-size-s);
+    gap:  var(--iui-size-s);
 
     .tw-content-header-selector {
       width: 100%;

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

@@ -8,22 +8,30 @@ import type { TreeRenderProps } from "../TreeWidgetComponentImpl.js";
 export interface TreeContentDefinition {
     id: string;
     label: string;
+    isSearchable?: boolean;
     render: (props: TreeRenderProps) => React.ReactNode;
 }
 /**
  * Props for `WidgetWithHeader`
  * @internal
  */
-export interface WidgetHeaderProps {
+export interface TreeSelectionProps {
     defaultSelectedContentId: string;
     trees: TreeContentDefinition[];
-    onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
-    onFeatureUsed?: (feature: string) => void;
 }
+/**
+ * Props for `WidgetWithHeader`
+ * @internal
+ */
+export type WidgetHeaderProps = {
+    onSearch: (value?: string) => void;
+    onSelect: (value: string) => void;
+    isLoading?: boolean;
+} & TreeSelectionProps;
 /**
  * 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 WidgetHeader({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }: WidgetHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetHeader({ defaultSelectedContentId, trees, onSelect, onSearch }: WidgetHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=WidgetHeader.d.ts.map

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

@@ -5,23 +5,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *--------------------------------------------------------------------------------------------*/
 import "./WidgetHeader.css";
 import { useState } from "react";
-import { Select } from "@itwin/itwinui-react/bricks";
+import { Select, Skeleton } 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 }) {
+export function WidgetHeader({ defaultSelectedContentId, trees, onSelect, onSearch }) {
     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 }) })] }));
+    if (trees.length === 0 || selectedContent.id === "loading") {
+        return _jsx(LoadingHeader, {});
+    }
+    return (_jsxs("div", { className: "tw-content-header", children: [trees.length > 0 && !isSearchOpen && (_jsx(Select.Root, { className: "tw-content-header-selector", children: _jsx(Select.HtmlSelect, { value: selectedContentId, onChange: (e) => {
+                        const treeId = e.target.value;
+                        onSelect(treeId);
+                        setSelectedContentId(treeId);
+                    }, children: trees.map((tree) => (_jsx("option", { value: tree.id, children: tree.label }, tree.id))) }) })), selectedContent.isSearchable && (_jsx(DebouncedSearchBox, { className: "tw-content-header-search", isOpened: isSearchOpen, setIsOpened: setIsSearchOpen, onSearch: onSearch, delay: 20 }))] }));
+}
+function LoadingHeader() {
+    return (_jsxs("div", { className: "tw-content-header", children: [_jsx(Skeleton, { variant: "text", size: "xlarge" }), _jsx(Skeleton, { variant: "object", size: "medium" })] }));
 }
 //# sourceMappingURL=WidgetHeader.js.map

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

@@ -1 +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"]}
+{"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,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAkCpD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,wBAAwB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IACrG,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;IAEjE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,eAAe,CAAC,EAAE,KAAK,SAAS,EAAE;QAC1D,OAAO,KAAC,aAAa,KAAG,CAAC;KAC1B;IAED,OAAO,CACL,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,iBAAiB,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;wBAC9B,QAAQ,CAAC,MAAM,CAAC,CAAC;wBACjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;oBAC/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,EACA,eAAe,CAAC,YAAY,IAAI,CAC/B,KAAC,kBAAkB,IAAC,SAAS,EAAE,0BAA0B,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAI,CACnJ,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAI,EAC7C,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,IAC3C,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, Skeleton } 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  isSearchable?: boolean;\n  render: (props: TreeRenderProps) => React.ReactNode;\n}\n\n/**\n * Props for `WidgetWithHeader`\n * @internal\n */\nexport interface TreeSelectionProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n}\n\n/**\n * Props for `WidgetWithHeader`\n * @internal\n */\nexport type WidgetHeaderProps = {\n  onSearch: (value?: string) => void;\n  onSelect: (value: string) => void;\n  isLoading?: boolean;\n} & TreeSelectionProps;\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 WidgetHeader({ defaultSelectedContentId, trees, onSelect, onSearch }: 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\n  if (trees.length === 0 || selectedContent.id === \"loading\") {\n    return <LoadingHeader />;\n  }\n\n  return (\n    <div className=\"tw-content-header\">\n      {trees.length > 0 && !isSearchOpen && (\n        <Select.Root className={\"tw-content-header-selector\"}>\n          <Select.HtmlSelect\n            value={selectedContentId}\n            onChange={(e) => {\n              const treeId = e.target.value;\n              onSelect(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      {selectedContent.isSearchable && (\n        <DebouncedSearchBox className={\"tw-content-header-search\"} isOpened={isSearchOpen} setIsOpened={setIsSearchOpen} onSearch={onSearch} delay={20} />\n      )}\n    </div>\n  );\n}\n\nfunction LoadingHeader() {\n  return (\n    <div className=\"tw-content-header\">\n      <Skeleton variant={\"text\"} size={\"xlarge\"} />\n      <Skeleton variant={\"object\"} size={\"medium\"} />\n    </div>\n  );\n}\n"]}

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

@@ -2,11 +2,11 @@ import type { VisibilityTreeRendererProps } from "../common/components/Visibilit
 import type { UseCategoriesTreeProps } from "./UseCategoriesTree.js";
 import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
 /** @beta */
-export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "actions" | "getDecorations"> & UseCategoriesTreeProps & {
+export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "getActions" | "getDecorations"> & UseCategoriesTreeProps & {
     hierarchyLevelConfig?: {
         sizeLimit?: number;
     };
 };
 /** @beta */
-export declare function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, actions, hierarchyConfig, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getActions, hierarchyConfig, }: 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,7 +7,7 @@ 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, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, actions, hierarchyConfig, }) {
+export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getActions, hierarchyConfig, }) {
     const { categoriesTreeProps, rendererProps } = useCategoriesTree({
         filter,
         activeView,
@@ -15,6 +15,6 @@ export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, act
         emptyTreeContent,
         hierarchyConfig,
     });
-    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (_jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps, actions: actions, getDecorations: getDecorations ?? rendererProps.getDecorations })) }));
+    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (_jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps, getActions: getActions, getDecorations: getDecorations ?? rendererProps.getDecorations })) }));
 }
 //# 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;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,EAChB,cAAc,EACd,OAAO,EACP,eAAe,GACK;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;QACpB,gBAAgB;QAChB,eAAe;KAChB,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,CAC3B,KAAC,sBAAsB,OAAK,SAAS,KAAM,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,IAAI,aAAa,CAAC,cAAc,GAAI,CAC/I,GACD,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\" | \"getDecorations\"> &\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  getDecorations,\n  actions,\n  hierarchyConfig,\n}: CategoriesTreeProps) {\n  const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n    filter,\n    activeView,\n    onCategoriesFiltered,\n    emptyTreeContent,\n    hierarchyConfig,\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) => (\n        <VisibilityTreeRenderer {...treeProps} {...rendererProps} actions={actions} getDecorations={getDecorations ?? rendererProps.getDecorations} />\n      )}\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,EAChB,cAAc,EACd,UAAU,EACV,eAAe,GACK;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;QACpB,gBAAgB;QAChB,eAAe;KAChB,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,CAC3B,KAAC,sBAAsB,OAAK,SAAS,KAAM,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,IAAI,aAAa,CAAC,cAAc,GAAI,CACrJ,GACD,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, \"getActions\" | \"getDecorations\"> &\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  getDecorations,\n  getActions,\n  hierarchyConfig,\n}: CategoriesTreeProps) {\n  const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n    filter,\n    activeView,\n    onCategoriesFiltered,\n    emptyTreeContent,\n    hierarchyConfig,\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) => (\n        <VisibilityTreeRenderer {...treeProps} {...rendererProps} getActions={getActions} getDecorations={getDecorations ?? rendererProps.getDecorations} />\n      )}\n    />\n  );\n}\n"]}

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

@@ -6,6 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAsyncValue } from "@itwin/components-react";
 import { QueryRowFormat } from "@itwin/core-common";
+import visibilityHideSvg from "@itwin/itwinui-icons/visibility-hide.svg";
+import visibilityShowSvg from "@itwin/itwinui-icons/visibility-show.svg";
+import visibilityInvertSvg from "@itwin/itwinui-icons/visibilty-invert.svg";
 import { IconButton } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../../../TreeWidget.js";
 import { hideAllCategories, invertAllCategories } from "../common/CategoriesVisibilityUtils.js";
@@ -47,7 +50,6 @@ export function useCategoriesTreeButtonProps({ viewport }) {
         }, []),
     };
 }
-const visibilityShowSvg = new URL("@itwin/itwinui-icons/visibility-show.svg", import.meta.url).href;
 /** @public */
 export function ShowAllButton(props) {
     return (_jsx(IconButton, { variant: "ghost", label: TreeWidget.translate("categoriesTree.buttons.showAll.tooltip"), onClick: () => {
@@ -55,7 +57,6 @@ export function ShowAllButton(props) {
             void showAll({ models: props.models, viewport: props.viewport, categories: props.categories.map((category) => category.categoryId) });
         }, icon: visibilityShowSvg }));
 }
-const visibilityHideSvg = new URL("@itwin/itwinui-icons/visibility-hide.svg", import.meta.url).href;
 /** @public */
 export function HideAllButton(props) {
     return (_jsx(IconButton, { variant: "ghost", label: TreeWidget.translate("categoriesTree.buttons.hideAll.tooltip"), onClick: () => {
@@ -64,7 +65,6 @@ export function HideAllButton(props) {
             void hideAllModels(props.models, props.viewport);
         }, icon: visibilityHideSvg }));
 }
-const visibilityInvertSvg = new URL("@itwin/itwinui-icons/visibilty-invert.svg", import.meta.url).href;
 /** @public */
 export function InvertAllButton(props) {
     return (_jsx(IconButton, { variant: "ghost", label: TreeWidget.translate("categoriesTree.buttons.invert.tooltip"), onClick: () => {