@itwin/tree-widget-react 1.0.0-dev.8 → 1.1.0

package/lib/esm/components/trees/category-tree/CategoryVisibilityHandler.d.ts

@@ -44,8 +44,8 @@ export declare class CategoryVisibilityHandler implements IVisibilityHandler {
     onVisibilityChange: BeEvent<VisibilityChangeListener>;
     getVisibilityStatus(node: TreeNodeItem): VisibilityStatus;
     changeVisibility(node: TreeNodeItem, shouldDisplay: boolean): Promise<void>;
-    getSubCategoryVisibility(id: string): "visible" | "hidden";
-    getCategoryVisibility(id: string): "visible" | "hidden";
+    getSubCategoryVisibility(id: string): "hidden" | "visible";
+    getCategoryVisibility(id: string): "hidden" | "visible";
     getParent(key: string): CategoryInfo | undefined;
     private onDisplayStyleChanged;
     private onViewedCategoriesChanged;

package/lib/esm/components/trees/common/ContextMenu.d.ts

@@ -0,0 +1,39 @@
+import type { MouseEvent, PropsWithChildren, ReactNode } from "react";
+import type { TreeModelNode } from "@itwin/components-react";
+/**
+ * Props for single context menu item.
+ * @public
+ */
+export interface ContextMenuItemProps {
+    node: TreeModelNode;
+}
+/**
+ * Props for configuring tree context menu.
+ * @public
+ */
+export interface TreeContextMenuProps {
+    contextMenuItems?: Array<(props: ContextMenuItemProps) => ReactNode>;
+}
+/**
+ * Props for [[TreeContextMenuItem]] component.
+ * @public
+ */
+export interface TreeContextMenuItemProps {
+    /** Unique id of the context menu item. */
+    id: string;
+    /** Description of the context menu item. */
+    title?: string;
+    /** Callback that is invoked when context menu item is clicked. */
+    onSelect: () => void;
+}
+/**
+ * Base component for rendering single context menu item.
+ * @public
+ */
+export declare function TreeContextMenuItem({ id, children, title, onSelect }: PropsWithChildren<TreeContextMenuItemProps>): JSX.Element;
+/** @internal */
+export declare function useContextMenu({ contextMenuItems }: TreeContextMenuProps): {
+    onContextMenu: (e: MouseEvent, node: TreeModelNode) => void;
+    renderContextMenu: () => JSX.Element | null;
+};
+//# sourceMappingURL=ContextMenu.d.ts.map

package/lib/esm/components/trees/common/ContextMenu.js

@@ -0,0 +1,39 @@
+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 { Fragment, useState } from "react";
+import { ContextMenuItem, GlobalContextMenu } from "@itwin/core-react";
+/**
+ * Base component for rendering single context menu item.
+ * @public
+ */
+export function TreeContextMenuItem({ id, children, title, onSelect }) {
+    return _jsx(ContextMenuItem, { onSelect: onSelect, title: title, children: children }, id);
+}
+/** @internal */
+export function useContextMenu({ contextMenuItems }) {
+    const [contextMenu, setContextMenu] = useState();
+    const close = () => setContextMenu(undefined);
+    const onContextMenu = (e, node) => {
+        if (!contextMenuItems) {
+            return;
+        }
+        setContextMenu({
+            items: contextMenuItems.map((item, index) => _jsx(Fragment, { children: item({ node }) }, index)),
+            position: { x: e.clientX, y: e.clientY },
+        });
+    };
+    const renderContextMenu = () => {
+        if (!contextMenu) {
+            return null;
+        }
+        return (_jsx(GlobalContextMenu, { identifier: "tree-widget-context-menu", x: contextMenu.position.x, y: contextMenu.position.y, opened: true, onOutsideClick: close, onEsc: close, onSelect: close, children: contextMenu.items }));
+    };
+    return {
+        onContextMenu,
+        renderContextMenu,
+    };
+}
+//# sourceMappingURL=ContextMenu.js.map

package/lib/esm/components/trees/common/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/ContextMenu.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAkCvE;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAA+C;IAChH,OAAO,KAAC,eAAe,IAErB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,YAEX,QAAQ,IAJJ,EAAE,CAKS,CAAC;AACrB,CAAC;AAOD,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAAC,EAAE,gBAAgB,EAAwB;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAe,CAAC;IAC9D,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IAE9C,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,IAAmB,EAAE,EAAE;QAC3D,IAAI,CAAC,gBAAgB,EAAE;YACrB,OAAO;SACR;QAED,cAAc,CAAC;YACb,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,QAAQ,cAAc,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,IAAtB,KAAK,CAA6B,CAAC;YAC/F,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE;SACzC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,KAAC,iBAAiB,IAChB,UAAU,EAAC,0BAA0B,EACrC,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,EACzB,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,EACzB,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,KAAK,EACrB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,YAEd,WAAW,CAAC,KAAK,GACA,CACrB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO;QACL,aAAa;QACb,iBAAiB;KAClB,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 { Fragment, useState } from \"react\";\nimport { ContextMenuItem, GlobalContextMenu } from \"@itwin/core-react\";\n\nimport type { MouseEvent, PropsWithChildren, ReactNode } from \"react\";\nimport type { TreeModelNode } from \"@itwin/components-react\";\n\n/**\n * Props for single context menu item.\n * @public\n */\nexport interface ContextMenuItemProps {\n  node: TreeModelNode;\n}\n\n/**\n * Props for configuring tree context menu.\n * @public\n */\nexport interface TreeContextMenuProps {\n  contextMenuItems?: Array<(props: ContextMenuItemProps) => ReactNode>;\n}\n\n/**\n * Props for [[TreeContextMenuItem]] component.\n * @public\n */\nexport interface TreeContextMenuItemProps {\n  /** Unique id of the context menu item. */\n  id: string;\n  /** Description of the context menu item. */\n  title?: string;\n  /** Callback that is invoked when context menu item is clicked. */\n  onSelect: () => void;\n}\n\n/**\n * Base component for rendering single context menu item.\n * @public\n */\nexport function TreeContextMenuItem({ id, children, title, onSelect }: PropsWithChildren<TreeContextMenuItemProps>) {\n  return <ContextMenuItem\n    key={id}\n    onSelect={onSelect}\n    title={title}\n  >\n    {children}\n  </ContextMenuItem>;\n}\n\ninterface ContextMenu {\n  items: ReactNode[];\n  position: {x: number, y: number};\n}\n\n/** @internal */\nexport function useContextMenu({ contextMenuItems }: TreeContextMenuProps) {\n  const [contextMenu, setContextMenu] = useState<ContextMenu>();\n  const close = () => setContextMenu(undefined);\n\n  const onContextMenu = (e: MouseEvent, node: TreeModelNode) => {\n    if (!contextMenuItems) {\n      return;\n    }\n\n    setContextMenu({\n      items: contextMenuItems.map((item, index) => <Fragment key={index}>{item({ node })}</Fragment>),\n      position: { x: e.clientX, y: e.clientY },\n    });\n  };\n\n  const renderContextMenu = () => {\n    if (!contextMenu) {\n      return null;\n    }\n\n    return (\n      <GlobalContextMenu\n        identifier=\"tree-widget-context-menu\"\n        x={contextMenu.position.x}\n        y={contextMenu.position.y}\n        opened={true}\n        onOutsideClick={close}\n        onEsc={close}\n        onSelect={close}\n      >\n        {contextMenu.items}\n      </GlobalContextMenu>\n    );\n  };\n\n  return {\n    onContextMenu,\n    renderContextMenu,\n  };\n}\n"]}

package/lib/esm/components/trees/common/TreeNodeRenderer.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { IPropertyValueRenderer, PropertyValueRendererContext, TreeModelNode } from "@itwin/components-react";
+/**
+ * Context for rendering label value.
+ * @public
+ */
+export interface LabelRendererContext {
+    /** Style that should be applied to the rendered element. */
+    style?: React.CSSProperties;
+    /** Callback to highlight text. */
+    textHighlighter?: (text: string) => React.ReactNode;
+}
+/**
+ * Props for custom node renderer.
+ * @public
+ */
+export interface TreeNodeLabelRendererProps {
+    /** Tree node to rendered label for. */
+    node: TreeModelNode;
+    /** Context for rendering node's label value. */
+    context?: LabelRendererContext;
+}
+/**
+ * Props for customizing node rendering.
+ * @public
+ */
+export interface TreeNodeRendererProps {
+    /** Custom renderer for node's label. */
+    nodeLabelRenderer?: (props: TreeNodeLabelRendererProps) => ReactNode;
+}
+/**
+ * Props for [[DefaultLabelRenderer]] component.
+ * @public
+ */
+export interface DefaultLabelRendererProps {
+    /** Label that should be rendered. */
+    label: PropertyRecord;
+    /** Context for rendering label value. */
+    context?: LabelRendererContext;
+}
+/**
+ * Renders label for tree node.
+ * @public
+ */
+export declare function DefaultLabelRenderer({ label, context }: DefaultLabelRendererProps): JSX.Element;
+/** @internal */
+export interface TreeNodeRendererContextProviderProps extends TreeNodeRendererProps {
+    node: TreeModelNode;
+    children: ReactNode;
+}
+/** @internal */
+export declare function TreeNodeRendererContextProvider({ nodeLabelRenderer, node, children }: TreeNodeRendererContextProviderProps): JSX.Element;
+/** @internal */
+export declare const TREE_NODE_LABEL_RENDERER = "visibility-tree-node-label";
+/** @internal */
+export declare class TreeNodeLabelRenderer implements IPropertyValueRenderer {
+    canRender(record: PropertyRecord, _context?: PropertyValueRendererContext | undefined): boolean;
+    render(record: PropertyRecord, context?: PropertyValueRendererContext | undefined): ReactNode;
+}
+//# sourceMappingURL=TreeNodeRenderer.d.ts.map

package/lib/esm/components/trees/common/TreeNodeRenderer.js

@@ -0,0 +1,44 @@
+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 { createContext, useContext } from "react";
+import { PrimitivePropertyValueRenderer } from "@itwin/components-react";
+/**
+ * Renders label for tree node.
+ * @public
+ */
+export function DefaultLabelRenderer({ label, context }) {
+    const renderer = new PrimitivePropertyValueRenderer();
+    return renderer.render(label, context);
+}
+/** @internal */
+export function TreeNodeRendererContextProvider({ nodeLabelRenderer, node, children }) {
+    return (_jsx(treeNodeLabelRendererContext.Provider, { value: { renderer: nodeLabelRenderer, node }, children: children }));
+}
+/** @internal */
+export const TREE_NODE_LABEL_RENDERER = "visibility-tree-node-label";
+/** @internal */
+export class TreeNodeLabelRenderer {
+    canRender(record, _context) {
+        return record.property.renderer?.name === TREE_NODE_LABEL_RENDERER;
+    }
+    render(record, context) {
+        const labelContext = {
+            style: context?.style,
+            textHighlighter: context?.textHighlighter,
+        };
+        return _jsx(LabelRenderer, { record: record, context: labelContext });
+    }
+}
+const treeNodeLabelRendererContext = createContext(undefined);
+function LabelRenderer({ record, context }) {
+    const renderContext = useContext(treeNodeLabelRendererContext);
+    if (!renderContext || !renderContext.renderer) {
+        return _jsx(DefaultLabelRenderer, { label: record, context: context });
+    }
+    const { renderer, node } = renderContext;
+    return _jsx(_Fragment, { children: renderer({ node, context }) });
+}
+//# sourceMappingURL=TreeNodeRenderer.js.map

package/lib/esm/components/trees/common/TreeNodeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeRenderer.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/TreeNodeRenderer.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC;AAkDzE;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAA6B;IAChF,MAAM,QAAQ,GAAG,IAAI,8BAA8B,EAAE,CAAC;IACtD,OAAO,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACzC,CAAC;AAQD,gBAAgB;AAChB,MAAM,UAAU,+BAA+B,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAwC;IACzH,OAAO,CACL,KAAC,4BAA4B,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAChF,QAAQ,GAC6B,CACzC,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,CAAC,MAAM,wBAAwB,GAAG,4BAA4B,CAAC;AAErE,gBAAgB;AAChB,MAAM,OAAO,qBAAqB;IACzB,SAAS,CAAC,MAAsB,EAAE,QAAmD;QAC1F,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,IAAI,KAAK,wBAAwB,CAAC;IACrE,CAAC;IAEM,MAAM,CAAC,MAAsB,EAAE,OAAkD;QACtF,MAAM,YAAY,GAAyB;YACzC,KAAK,EAAE,OAAO,EAAE,KAAK;YACrB,eAAe,EAAE,OAAO,EAAE,eAAe;SAC1C,CAAC;QACF,OAAO,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAI,CAAC;IAClE,CAAC;CACF;AAOD,MAAM,4BAA4B,GAAG,aAAa,CAA2C,SAAS,CAAC,CAAC;AAOxG,SAAS,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAsB;IAC5D,MAAM,aAAa,GAAG,UAAU,CAAC,4BAA4B,CAAC,CAAC;IAE/D,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;QAC7C,OAAO,KAAC,oBAAoB,IAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;KAClE;IAED,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC;IACzC,OAAO,4BAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,GAAI,CAAC;AAC5C,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 { createContext, useContext } from \"react\";\nimport { PrimitivePropertyValueRenderer } from \"@itwin/components-react\";\n\nimport type { ReactNode } from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport type {\n  IPropertyValueRenderer, PropertyValueRendererContext, TreeModelNode,\n} from \"@itwin/components-react\";\n\n/**\n * Context for rendering label value.\n * @public\n */\nexport interface LabelRendererContext {\n  /** Style that should be applied to the rendered element. */\n  style?: React.CSSProperties;\n  /** Callback to highlight text. */\n  textHighlighter?: (text: string) => React.ReactNode;\n}\n\n/**\n * Props for custom node renderer.\n * @public\n */\nexport interface TreeNodeLabelRendererProps {\n  /** Tree node to rendered label for. */\n  node: TreeModelNode;\n  /** Context for rendering node's label value. */\n  context?: LabelRendererContext;\n}\n\n/**\n * Props for customizing node rendering.\n * @public\n */\nexport interface TreeNodeRendererProps {\n  /** Custom renderer for node's label. */\n  nodeLabelRenderer?: (props: TreeNodeLabelRendererProps) => ReactNode;\n}\n\n/**\n * Props for [[DefaultLabelRenderer]] component.\n * @public\n */\nexport interface DefaultLabelRendererProps {\n  /** Label that should be rendered. */\n  label: PropertyRecord;\n  /** Context for rendering label value. */\n  context?: LabelRendererContext;\n}\n\n/**\n * Renders label for tree node.\n * @public\n */\nexport function DefaultLabelRenderer({ label, context }: DefaultLabelRendererProps) {\n  const renderer = new PrimitivePropertyValueRenderer();\n  return renderer.render(label, context);\n}\n\n/** @internal */\nexport interface TreeNodeRendererContextProviderProps extends TreeNodeRendererProps {\n  node: TreeModelNode;\n  children: ReactNode;\n}\n\n/** @internal */\nexport function TreeNodeRendererContextProvider({ nodeLabelRenderer, node, children }: TreeNodeRendererContextProviderProps) {\n  return (\n    <treeNodeLabelRendererContext.Provider value={{ renderer: nodeLabelRenderer, node }}>\n      {children}\n    </treeNodeLabelRendererContext.Provider>\n  );\n}\n\n/** @internal */\nexport const TREE_NODE_LABEL_RENDERER = \"visibility-tree-node-label\";\n\n/** @internal */\nexport class TreeNodeLabelRenderer implements IPropertyValueRenderer {\n  public canRender(record: PropertyRecord, _context?: PropertyValueRendererContext | undefined): boolean {\n    return record.property.renderer?.name === TREE_NODE_LABEL_RENDERER;\n  }\n\n  public render(record: PropertyRecord, context?: PropertyValueRendererContext | undefined): ReactNode {\n    const labelContext: LabelRendererContext = {\n      style: context?.style,\n      textHighlighter: context?.textHighlighter,\n    };\n    return <LabelRenderer record={record} context={labelContext} />;\n  }\n}\n\ninterface TreeNodeLabelRendererContext {\n  renderer?: (props: TreeNodeLabelRendererProps) => ReactNode;\n  node: TreeModelNode;\n}\n\nconst treeNodeLabelRendererContext = createContext<TreeNodeLabelRendererContext | undefined>(undefined);\n\ninterface LabelRendererProps {\n  record: PropertyRecord;\n  context?: LabelRendererContext;\n}\n\nfunction LabelRenderer({ record, context }: LabelRendererProps) {\n  const renderContext = useContext(treeNodeLabelRendererContext);\n\n  if (!renderContext || !renderContext.renderer) {\n    return <DefaultLabelRenderer label={record} context={context} />;\n  }\n\n  const { renderer, node } = renderContext;\n  return <>{renderer({ node, context })}</>;\n}\n"]}

package/lib/esm/components/trees/common/TreeRenderer.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import "./TreeRenderer.scss";
+import type { TreeRendererProps as ComponentsTreeRendererProps } from "@itwin/components-react";
+import type { TreeNodeRendererProps } from "./TreeNodeRenderer";
+import type { TreeContextMenuProps } from "./ContextMenu";
+/**
+ * Base props for [[TreeRenderer]] component.
+ * @public
+ */
+export interface TreeRendererBaseProps extends TreeContextMenuProps, TreeNodeRendererProps {
+    /**
+     * Modifies the density of tree nodes. `enlarged` tree nodes have bigger height and bigger button hit boxes.
+     */
+    density?: "default" | "enlarged";
+}
+/**
+ * Props for [[TreeRenderer]] component.
+ * @public
+ */
+export type TreeRendererProps = ComponentsTreeRendererProps & TreeRendererBaseProps;
+/**
+ * Base tree renderer for visibility trees.
+ * @public
+ */
+export declare function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }: TreeRendererProps): JSX.Element;
+//# sourceMappingURL=TreeRenderer.d.ts.map

package/lib/esm/components/trees/common/TreeRenderer.js

@@ -0,0 +1,34 @@
+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 "./TreeRenderer.scss";
+import classNames from "classnames";
+import { TreeRenderer as ComponentsTreeRenderer, TreeNodeRenderer } from "@itwin/components-react";
+import { useContextMenu } from "./ContextMenu";
+import { TreeNodeRendererContextProvider } from "./TreeNodeRenderer";
+/**
+ * Base tree renderer for visibility trees.
+ * @public
+ */
+export function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }) {
+    const { onContextMenu, renderContextMenu } = useContextMenu({ contextMenuItems });
+    const nodeHeight = getNodeHeight(density ?? "default", restProps.nodeHeight);
+    const className = classNames("tree-widget-tree-nodes-list", { ["enlarge"]: density === "enlarged" });
+    return (_jsxs("div", { className: className, children: [_jsx(ComponentsTreeRenderer, { ...restProps, nodeRenderer: (nodeProps) => {
+                    const nodeClassName = nodeProps.node.numChildren === 0 ? "without-expander" : undefined;
+                    return (_jsx(TreeNodeRendererContextProvider, { node: nodeProps.node, nodeLabelRenderer: nodeLabelRenderer, children: nodeRenderer
+                            ? nodeRenderer({ ...nodeProps, onContextMenu, className: nodeClassName })
+                            : _jsx(TreeNodeRenderer, { ...nodeProps, onContextMenu: onContextMenu, className: nodeClassName }) }));
+                }, nodeHeight: nodeHeight }), renderContextMenu()] }));
+}
+function getNodeHeight(density, defaultHeight) {
+    switch (density) {
+        case "default":
+            return defaultHeight;
+        case "enlarged":
+            return () => 43;
+    }
+}
+//# sourceMappingURL=TreeRenderer.js.map

package/lib/esm/components/trees/common/TreeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/TreeRenderer.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,qBAAqB,CAAC;AAC7B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,IAAI,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,+BAA+B,EAAE,MAAM,oBAAoB,CAAC;AAuBrE;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,SAAS,EAAqB;IAC1H,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,cAAc,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAElF,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,IAAI,SAAS,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,UAAU,CAAC,6BAA6B,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,CAAC,CAAC;IAErG,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,KAAC,sBAAsB,OACjB,SAAS,EACb,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE;oBAC1B,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;oBACxF,OAAO,CACL,KAAC,+BAA+B,IAAC,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,iBAAiB,YACxF,YAAY;4BACX,CAAC,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;4BACzE,CAAC,CAAC,KAAC,gBAAgB,OAAK,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,GAAI,GAC/D,CACnC,CAAC;gBACJ,CAAC,EAED,UAAU,EAAE,UAAU,GACtB,EACD,iBAAiB,EAAE,IAChB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,OAA+B,EAAE,aAAwD;IAC9G,QAAQ,OAAO,EAAE;QACf,KAAK,SAAS;YACZ,OAAO,aAAa,CAAC;QACvB,KAAK,UAAU;YACb,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC;KACnB;AACH,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 \"./TreeRenderer.scss\";\nimport classNames from \"classnames\";\nimport { TreeRenderer as ComponentsTreeRenderer, TreeNodeRenderer } from \"@itwin/components-react\";\nimport { useContextMenu } from \"./ContextMenu\";\nimport { TreeNodeRendererContextProvider } from \"./TreeNodeRenderer\";\n\nimport type { TreeRendererProps as ComponentsTreeRendererProps } from \"@itwin/components-react\";\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer\";\nimport type { TreeContextMenuProps } from \"./ContextMenu\";\n\n/**\n * Base props for [[TreeRenderer]] component.\n * @public\n */\nexport interface TreeRendererBaseProps extends TreeContextMenuProps, TreeNodeRendererProps {\n  /**\n   * Modifies the density of tree nodes. `enlarged` tree nodes have bigger height and bigger button hit boxes.\n   */\n  density?: \"default\" | \"enlarged\";\n}\n\n/**\n * Props for [[TreeRenderer]] component.\n * @public\n */\nexport type TreeRendererProps = ComponentsTreeRendererProps & TreeRendererBaseProps;\n\n/**\n * Base tree renderer for visibility trees.\n * @public\n */\nexport function TreeRenderer({ contextMenuItems, nodeRenderer, nodeLabelRenderer, density, ...restProps }: TreeRendererProps) {\n  const { onContextMenu, renderContextMenu } = useContextMenu({ contextMenuItems });\n\n  const nodeHeight = getNodeHeight(density ?? \"default\", restProps.nodeHeight);\n  const className = classNames(\"tree-widget-tree-nodes-list\", { [\"enlarge\"]: density === \"enlarged\" });\n\n  return (\n    <div className={className}>\n      <ComponentsTreeRenderer\n        {...restProps}\n        nodeRenderer={(nodeProps) => {\n          const nodeClassName = nodeProps.node.numChildren === 0 ? \"without-expander\" : undefined;\n          return (\n            <TreeNodeRendererContextProvider node={nodeProps.node} nodeLabelRenderer={nodeLabelRenderer}>\n              {nodeRenderer\n                ? nodeRenderer({ ...nodeProps, onContextMenu, className: nodeClassName })\n                : <TreeNodeRenderer {...nodeProps} onContextMenu={onContextMenu} className={nodeClassName} />}\n            </TreeNodeRendererContextProvider>\n          );\n        }\n        }\n        nodeHeight={nodeHeight}\n      />\n      {renderContextMenu()}\n    </div>\n  );\n}\n\nfunction getNodeHeight(density: \"default\" | \"enlarged\", defaultHeight: ComponentsTreeRendererProps[\"nodeHeight\"]) {\n  switch (density) {\n    case \"default\":\n      return defaultHeight;\n    case \"enlarged\":\n      return () => 43;\n  }\n}\n"]}

package/lib/esm/components/trees/common/TreeRenderer.scss

@@ -0,0 +1,102 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.tree-widget-tree-with-header {
+  width: 100%;
+  height: 100%;
+
+  .tree-widget-tree-header {
+    height: var(--iui-size-xl);
+  }
+
+  .tree-widget-tree-content {
+    height: calc(100% - var(--iui-size-xl));
+  }
+}
+
+.tree-widget-tree-nodes-list {
+  height: 100%;
+  width: 100%;
+
+  .ReactWindow__VariableSizeList {
+    >div {
+      min-width: max-content !important; // to override inline class
+    }
+  }
+
+  &.enlarge {
+    --enlarged-node-height: calc(var(--iui-size-l) + var(--iui-size-m) + var(--iui-size-3xs));
+    --enlarged-node-icon-size: var(--iui-size-m);
+    --enlarged-node-icon-padding: calc(var(--enlarged-node-height) - var(--enlarged-node-icon-size));
+    --enlarged-node-expander-additional-padding: calc(var(--iui-size-m) + var(--iui-size-3xs));
+
+    .core-tree-node {
+      &.without-expander {
+        >.contents {
+          padding-left: var(--enlarged-node-expander-additional-padding);
+        }
+      }
+
+      >.contents {
+        height: var(--enlarged-node-height);
+        font-size: var(--iui-font-size-2);
+
+        .core-tree-expansionToggle {
+          >.icon {
+            height: var(--enlarged-node-height);
+            width: var(--enlarged-node-height);
+            padding: calc(var(--enlarged-node-icon-padding) / 2);
+
+            svg {
+              height: var(--enlarged-node-icon-size);
+              width: var(--enlarged-node-icon-size);
+            }
+          }
+        }
+
+        .iui-progress-indicator-radial {
+          height: var(--enlarged-node-height);
+          width: var(--enlarged-node-height);
+          padding: calc(var(--enlarged-node-icon-padding) / 2 - 1px); // need to reduce padding by `1px` to make sure icon is centered
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.tree-widget-tree-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .filteredTreeOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    background-color: hsl(var(--iui-color-background) / var(--iui-opacity-2));
+  }
+
+  .components-tree-errormessage {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    width: 75%;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    font-style: italic;
+    color: var(--iui-color-text-muted);
+
+    .errormessage-header {
+      display: block;
+      font-weight: bold;
+    }
+  }
+}

package/lib/esm/components/trees/{Common.d.ts → common/Types.d.ts}

@@ -1,6 +1,7 @@
 import type { IModelConnection } from "@itwin/core-frontend";
 import type { SelectionMode } from "@itwin/components-react";
 import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+import type { TreeRendererBaseProps } from "./TreeRenderer";
 /**
  * An option of how class grouping should work in a component.
  * @public
@@ -25,7 +26,7 @@ export interface VisibilityTreeFilterInfo {
  * Base props for tree components.
  * @public
  */
-export interface BaseTreeProps {
+export interface BaseTreeProps extends TreeRendererBaseProps {
     /** An iModel to pull data from. */
     iModel: IModelConnection;
     /** Width of the component. */
@@ -45,4 +46,4 @@ export interface BaseFilterableTreeProps extends BaseTreeProps {
     /** Callback invoked when tree is filtered. */
     onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;
 }
-//# sourceMappingURL=Common.d.ts.map
+//# sourceMappingURL=Types.d.ts.map

package/lib/esm/components/trees/{Common.js → common/Types.js}

@@ -15,4 +15,4 @@ export var ClassGroupingOption;
     /** Class grouping is enabled and grouping node shows grouped items count */
     ClassGroupingOption[ClassGroupingOption["YesWithCounts"] = 2] = "YesWithCounts";
 })(ClassGroupingOption || (ClassGroupingOption = {}));
-//# sourceMappingURL=Common.js.map
+//# sourceMappingURL=Types.js.map

package/lib/esm/components/trees/common/Types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/Types.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAO/F;;;GAGG;AACH,MAAM,CAAN,IAAY,mBAOX;AAPD,WAAY,mBAAmB;IAC7B,iCAAiC;IACjC,yDAAE,CAAA;IACF,gCAAgC;IAChC,2DAAG,CAAA;IACH,4EAA4E;IAC5E,+EAAa,CAAA;AACf,CAAC,EAPW,mBAAmB,KAAnB,mBAAmB,QAO9B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { SelectionMode } from \"@itwin/components-react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { TreeRendererBaseProps } from \"./TreeRenderer\";\n\n/**\n * An option of how class grouping should work in a component.\n * @public\n */\nexport enum ClassGroupingOption {\n  /** Class grouping is disabled */\n  No,\n  /** Class grouping is enabled */\n  Yes,\n  /** Class grouping is enabled and grouping node shows grouped items count */\n  YesWithCounts,\n}\n\n/**\n * Data structure that describes info used to filter visibility tree.\n * @public\n */\nexport interface VisibilityTreeFilterInfo {\n  filter: string;\n  activeMatchIndex?: number;\n}\n\n/**\n * Base props for tree components.\n * @public\n */\nexport interface BaseTreeProps extends TreeRendererBaseProps {\n  /** An iModel to pull data from. */\n  iModel: IModelConnection;\n  /** Width of the component. */\n  width: number;\n  /** Height of the component. */\n  height: number;\n  /** Selection mode in the tree. */\n  selectionMode?: SelectionMode;\n}\n\n/**\n * Base props for filterable tree components.\n * @public\n */\nexport interface BaseFilterableTreeProps extends BaseTreeProps {\n  /** Information for tree filtering. */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /** Callback invoked when tree is filtered. */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\n}\n"]}

package/lib/esm/components/trees/common/Utils.d.ts

@@ -0,0 +1,11 @@
+import type { DelayLoadedTreeNodeItem } from "@itwin/components-react";
+import type { Node } from "@itwin/presentation-common";
+/** @internal */
+export declare function combineTreeNodeItemCustomizations(customizations: Array<(item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => void>): (item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => void;
+/** @internal */
+export declare function addCustomTreeNodeItemLabelRenderer(item: Partial<DelayLoadedTreeNodeItem>): void;
+/** @internal */
+export declare function addTreeNodeItemCheckbox(item: Partial<DelayLoadedTreeNodeItem>): void;
+/** @internal */
+export declare function registerRenderers(): () => void;
+//# sourceMappingURL=Utils.d.ts.map

package/lib/esm/components/trees/common/Utils.js

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { PropertyValueRendererManager } from "@itwin/components-react";
+import { CheckBoxState } from "@itwin/core-react";
+import { TREE_NODE_LABEL_RENDERER, TreeNodeLabelRenderer } from "./TreeNodeRenderer";
+/** @internal */
+export function combineTreeNodeItemCustomizations(customizations) {
+    return (item, node) => {
+        customizations.forEach((customize) => customize(item, node));
+    };
+}
+/** @internal */
+export function addCustomTreeNodeItemLabelRenderer(item) {
+    if (!item.label) {
+        return;
+    }
+    item.label.property.renderer = { name: TREE_NODE_LABEL_RENDERER };
+}
+/** @internal */
+export function addTreeNodeItemCheckbox(item) {
+    item.isCheckboxVisible = true;
+    item.isCheckboxDisabled = true;
+    item.checkBoxState = CheckBoxState.Off;
+}
+/** @internal */
+export function registerRenderers() {
+    const renderers = [{
+            name: TREE_NODE_LABEL_RENDERER,
+            renderer: new TreeNodeLabelRenderer(),
+        }];
+    for (const { name, renderer } of renderers) {
+        PropertyValueRendererManager.defaultManager.registerRenderer(name, renderer);
+    }
+    return () => {
+        for (const { name } of renderers) {
+            PropertyValueRendererManager.defaultManager.unregisterRenderer(name);
+        }
+    };
+}
+//# sourceMappingURL=Utils.js.map

package/lib/esm/components/trees/common/Utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../src/components/trees/common/Utils.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAKrF,gBAAgB;AAChB,MAAM,UAAU,iCAAiC,CAAC,cAA4F;IAC5I,OAAO,CAAC,IAAsC,EAAE,IAAmB,EAAE,EAAE;QACrE,cAAc,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,kCAAkC,CAAC,IAAsC;IACvF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACf,OAAO;KACR;IAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,wBAAwB,EAAE,CAAC;AACpE,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,uBAAuB,CAAC,IAAsC;IAC5E,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC;AACzC,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,SAAS,GAA8D,CAAC;YAC5E,IAAI,EAAE,wBAAwB;YAC9B,QAAQ,EAAG,IAAI,qBAAqB,EAAE;SACvC,CAAC,CAAC;IAEH,KAAK,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,SAAS,EAAE;QAC1C,4BAA4B,CAAC,cAAc,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KAC9E;IAED,OAAO,GAAG,EAAE;QACV,KAAK,MAAM,EAAE,IAAI,EAAE,IAAI,SAAS,EAAE;YAChC,4BAA4B,CAAC,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;SACtE;IACH,CAAC,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 { PropertyValueRendererManager } from \"@itwin/components-react\";\nimport { CheckBoxState } from \"@itwin/core-react\";\nimport { TREE_NODE_LABEL_RENDERER, TreeNodeLabelRenderer } from \"./TreeNodeRenderer\";\n\nimport type { DelayLoadedTreeNodeItem, IPropertyValueRenderer } from \"@itwin/components-react\";\nimport type { Node } from \"@itwin/presentation-common\";\n\n/** @internal */\nexport function combineTreeNodeItemCustomizations(customizations: Array<(item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => void>) {\n  return (item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) => {\n    customizations.forEach((customize) => customize(item, node));\n  };\n}\n\n/** @internal */\nexport function addCustomTreeNodeItemLabelRenderer(item: Partial<DelayLoadedTreeNodeItem>) {\n  if (!item.label) {\n    return;\n  }\n\n  item.label.property.renderer = { name: TREE_NODE_LABEL_RENDERER };\n}\n\n/** @internal */\nexport function addTreeNodeItemCheckbox(item: Partial<DelayLoadedTreeNodeItem>) {\n  item.isCheckboxVisible = true;\n  item.isCheckboxDisabled = true;\n  item.checkBoxState = CheckBoxState.Off;\n}\n\n/** @internal */\nexport function registerRenderers() {\n  const renderers: Array<{ name: string, renderer: IPropertyValueRenderer }> = [{\n    name: TREE_NODE_LABEL_RENDERER,\n    renderer:  new TreeNodeLabelRenderer(),\n  }];\n\n  for (const { name, renderer } of renderers) {\n    PropertyValueRendererManager.defaultManager.registerRenderer(name, renderer);\n  }\n\n  return () => {\n    for (const { name } of renderers) {\n      PropertyValueRendererManager.defaultManager.unregisterRenderer(name);\n    }\n  };\n}\n"]}

package/lib/esm/components/trees/external-sources-tree/ExternalSourcesTree.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "../VisibilityTreeBase.scss";
 import type { Ruleset } from "@itwin/presentation-common";
-import type { BaseTreeProps } from "../Common";
+import type { BaseTreeProps } from "../common/Types";
 /**
  * Presentation rules used by ControlledCategoriesTree
  * @internal

package/lib/esm/components/trees/external-sources-tree/ExternalSourcesTree.js

@@ -6,6 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "../VisibilityTreeBase.scss";
 import { ControlledTree, SelectionMode, useTreeModel } from "@itwin/components-react";
 import { usePresentationTreeNodeLoader, useUnifiedSelectionTreeEventHandler } from "@itwin/presentation-components";
+import { TreeRenderer } from "../common/TreeRenderer";
+import { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from "../common/Utils";
 import * as RULESET_EXTERNAL_SOURCES_IMPORT from "./ExternalSources.json";
 /**
  * Presentation rules used by ControlledCategoriesTree
@@ -26,9 +28,12 @@ export function ExternalSourcesTree(props) {
     });
     const eventsHandler = useUnifiedSelectionTreeEventHandler({ nodeLoader });
     const treeModel = useTreeModel(nodeLoader.modelSource);
-    return (_jsx("div", { className: "tree-widget-visibility-tree-base", children: _jsx(ControlledTree, { nodeLoader: nodeLoader, model: treeModel, selectionMode: props.selectionMode ?? SelectionMode.Extended, eventsHandler: eventsHandler, width: props.width, height: props.height, iconsEnabled: true }) }));
-}
-function customizeTreeNodeItem(item, node) {
-    item.icon = node.extendedData?.imageId;
+    return (_jsx("div", { className: "tree-widget-tree-container", children: _jsx(ControlledTree, { nodeLoader: nodeLoader, model: treeModel, selectionMode: props.selectionMode ?? SelectionMode.Extended, eventsHandler: eventsHandler, width: props.width, height: props.height, iconsEnabled: true, treeRenderer: (treeProps) => _jsx(TreeRenderer, { ...treeProps, contextMenuItems: props.contextMenuItems, nodeLabelRenderer: props.nodeLabelRenderer, density: props.density }) }) }));
 }
+const customizeTreeNodeItem = combineTreeNodeItemCustomizations([
+    addCustomTreeNodeItemLabelRenderer,
+    (item, node) => {
+        item.icon = node.extendedData?.imageId;
+    },
+]);
 //# sourceMappingURL=ExternalSourcesTree.js.map

package/lib/esm/components/trees/external-sources-tree/ExternalSourcesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSourcesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTree.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,6BAA6B,EAAE,mCAAmC,EAAE,MAAM,gCAAgC,CAAC;AACpH,OAAO,KAAK,+BAA+B,MAAM,wBAAwB,CAAC;AAM1E;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,+BAA0C,CAAC;AAEnF,MAAM,WAAW,GAAG,EAAE,CAAC;AAQvB;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,UAAU,EAAE,GAAG,6BAA6B,CAAC;QACnD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,wBAAwB;QACjC,UAAU,EAAE,WAAW;QACvB,qBAAqB;KACtB,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,mCAAmC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC1E,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CACL,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,aAAa,CAAC,QAAQ,EAC5D,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,YAAY,EAAE,IAAI,GAClB,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAsC,EAAE,IAAmB;IACxF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;AACzC,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 \"../VisibilityTreeBase.scss\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { usePresentationTreeNodeLoader, useUnifiedSelectionTreeEventHandler } from \"@itwin/presentation-components\";\nimport * as RULESET_EXTERNAL_SOURCES_IMPORT from \"./ExternalSources.json\";\n\nimport type { DelayLoadedTreeNodeItem } from \"@itwin/components-react\";\nimport type { Node, Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseTreeProps } from \"../Common\";\n\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_EXTERNAL_SOURCES = RULESET_EXTERNAL_SOURCES_IMPORT as Ruleset;\n\nconst PAGING_SIZE = 20;\n\n/**\n * Props for the [[ExternalSourcesTree]] component\n * @alpha\n */\nexport type ExternalSourcesTreeProps = BaseTreeProps;\n\n/**\n * Tree which displays a hierarchy of ExternalSources and their elements.\n * @alpha\n */\nexport function ExternalSourcesTree(props: ExternalSourcesTreeProps) {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: RULESET_EXTERNAL_SOURCES,\n    pagingSize: PAGING_SIZE,\n    customizeTreeNodeItem,\n  });\n  const eventsHandler = useUnifiedSelectionTreeEventHandler({ nodeLoader });\n  const treeModel = useTreeModel(nodeLoader.modelSource);\n  return (\n    <div className=\"tree-widget-visibility-tree-base\">\n      <ControlledTree\n        nodeLoader={nodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode ?? SelectionMode.Extended}\n        eventsHandler={eventsHandler}\n        width={props.width}\n        height={props.height}\n        iconsEnabled={true}\n      />\n    </div>\n  );\n}\n\nfunction customizeTreeNodeItem(item: Partial<DelayLoadedTreeNodeItem>, node: Partial<Node>) {\n  item.icon = node.extendedData?.imageId;\n}\n"]}
+{"version":3,"file":"ExternalSourcesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTree.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,6BAA6B,EAAE,mCAAmC,EAAE,MAAM,gCAAgC,CAAC;AACpH,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,kCAAkC,EAAE,iCAAiC,EAAE,MAAM,iBAAiB,CAAC;AACxG,OAAO,KAAK,+BAA+B,MAAM,wBAAwB,CAAC;AAI1E;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,+BAA0C,CAAC;AAEnF,MAAM,WAAW,GAAG,EAAE,CAAC;AAQvB;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,UAAU,EAAE,GAAG,6BAA6B,CAAC;QACnD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,wBAAwB;QACjC,UAAU,EAAE,WAAW;QACvB,qBAAqB;KACtB,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,mCAAmC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC1E,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CACL,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,aAAa,CAAC,QAAQ,EAC5D,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAC1B,KAAC,YAAY,OACP,SAAS,EACb,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,GAEJ,GACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,GAAG,iCAAiC,CAAC;IAC9D,kCAAkC;IAClC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;IACzC,CAAC;CACF,CAAC,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 \"../VisibilityTreeBase.scss\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { usePresentationTreeNodeLoader, useUnifiedSelectionTreeEventHandler } from \"@itwin/presentation-components\";\nimport { TreeRenderer } from \"../common/TreeRenderer\";\nimport { addCustomTreeNodeItemLabelRenderer, combineTreeNodeItemCustomizations } from \"../common/Utils\";\nimport * as RULESET_EXTERNAL_SOURCES_IMPORT from \"./ExternalSources.json\";\n\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseTreeProps } from \"../common/Types\";\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_EXTERNAL_SOURCES = RULESET_EXTERNAL_SOURCES_IMPORT as Ruleset;\n\nconst PAGING_SIZE = 20;\n\n/**\n * Props for the [[ExternalSourcesTree]] component\n * @alpha\n */\nexport type ExternalSourcesTreeProps = BaseTreeProps;\n\n/**\n * Tree which displays a hierarchy of ExternalSources and their elements.\n * @alpha\n */\nexport function ExternalSourcesTree(props: ExternalSourcesTreeProps) {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: RULESET_EXTERNAL_SOURCES,\n    pagingSize: PAGING_SIZE,\n    customizeTreeNodeItem,\n  });\n  const eventsHandler = useUnifiedSelectionTreeEventHandler({ nodeLoader });\n  const treeModel = useTreeModel(nodeLoader.modelSource);\n  return (\n    <div className=\"tree-widget-tree-container\">\n      <ControlledTree\n        nodeLoader={nodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode ?? SelectionMode.Extended}\n        eventsHandler={eventsHandler}\n        width={props.width}\n        height={props.height}\n        iconsEnabled={true}\n        treeRenderer={(treeProps) =>\n          <TreeRenderer\n            {...treeProps}\n            contextMenuItems={props.contextMenuItems}\n            nodeLabelRenderer={props.nodeLabelRenderer}\n            density={props.density}\n          />\n        }\n      />\n    </div>\n  );\n}\n\nconst customizeTreeNodeItem = combineTreeNodeItemCustomizations([\n  addCustomTreeNodeItemLabelRenderer,\n  (item, node) => {\n    item.icon = node.extendedData?.imageId;\n  },\n]);\n"]}

package/lib/esm/components/trees/external-sources-tree/ExternalSourcesTreeComponent.d.ts

@@ -1,11 +1,17 @@
 /// <reference types="react" />
 import "../VisibilityTreeBase.scss";
+import type { ExternalSourcesTreeProps } from "./ExternalSourcesTree";
+/**
+ * Props for [[ExternalSourcesTreeComponent]].
+ * @alpha
+ */
+export type ExternalSourcesTreeComponentProps = Omit<ExternalSourcesTreeProps, "iModel" | "width" | "height">;
 /**
  * A component that displays an External Sources tree and any necessary "chrome".
  * @alpha
  */
 export declare const ExternalSourcesTreeComponent: {
-    (props: {}): JSX.Element | null;
+    (props: ExternalSourcesTreeComponentProps): JSX.Element | null;
     /**
      * Id of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].
      * @alpha

package/lib/esm/components/trees/external-sources-tree/ExternalSourcesTreeComponent.js

@@ -17,11 +17,8 @@ export const ExternalSourcesTreeComponent = (props) => {
     if (!iModel) {
         return null;
     }
-    return (_jsx(ExternalSourcesTreeComponentImpl, { ...props, iModel: iModel }));
+    return (_jsx(AutoSizer, { children: ({ width, height }) => (_jsx(ExternalSourcesTree, { ...props, iModel: iModel, width: width, height: height })) }));
 };
-function ExternalSourcesTreeComponentImpl(props) {
-    return (_jsx(AutoSizer, { children: ({ width, height }) => (_jsx(ExternalSourcesTree, { ...props, width: width, height: height })) }));
-}
 /**
  * Id of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].
  * @alpha

package/lib/esm/components/trees/external-sources-tree/ExternalSourcesTreeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSourcesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTreeComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D;;;GAGG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAS,EAAE,EAAE;IACxD,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,KAAC,gCAAgC,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAChE,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,gCAAgC,CAAC,KAAmC;IAC3E,OAAO,CACL,KAAC,SAAS,cACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,KAAC,mBAAmB,OACd,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACH,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,4BAA4B,CAAC,EAAE,GAAG,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,4BAA4B,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,iBAAiB,CAAC,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 \"../VisibilityTreeBase.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { ExternalSourcesTree } from \"./ExternalSourcesTree\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\n\n/**\n * A component that displays an External Sources tree and any necessary \"chrome\".\n * @alpha\n */\nexport const ExternalSourcesTreeComponent = (props: {}) => {\n  const iModel = useActiveIModelConnection();\n  if (!iModel) {\n    return null;\n  }\n  return (\n    <ExternalSourcesTreeComponentImpl {...props} iModel={iModel} />\n  );\n};\n\nfunction ExternalSourcesTreeComponentImpl(props: { iModel: IModelConnection }) {\n  return (\n    <AutoSizer>\n      {({ width, height }) => (\n        <ExternalSourcesTree\n          {...props}\n          width={width}\n          height={height}\n        />\n      )}\n    </AutoSizer>\n  );\n}\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.id = \"external-sources-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.getLabel = () => TreeWidget.translate(\"externalSources\");\n"]}
+{"version":3,"file":"ExternalSourcesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/external-sources-tree/ExternalSourcesTreeComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAU5D;;;GAGG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAE,EAAE;IACvF,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,SAAS,cACP,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,KAAC,mBAAmB,OACd,KAAK,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACH,GACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,4BAA4B,CAAC,EAAE,GAAG,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,4BAA4B,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,iBAAiB,CAAC,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 \"../VisibilityTreeBase.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { ExternalSourcesTree } from \"./ExternalSourcesTree\";\n\nimport type { ExternalSourcesTreeProps } from \"./ExternalSourcesTree\";\n\n/**\n * Props for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nexport type ExternalSourcesTreeComponentProps = Omit<ExternalSourcesTreeProps, \"iModel\" | \"width\" | \"height\">;\n\n/**\n * A component that displays an External Sources tree and any necessary \"chrome\".\n * @alpha\n */\nexport const ExternalSourcesTreeComponent = (props: ExternalSourcesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  if (!iModel) {\n    return null;\n  }\n\n  return (\n    <AutoSizer>\n      {({ width, height }) => (\n        <ExternalSourcesTree\n          {...props}\n          iModel={iModel}\n          width={width}\n          height={height}\n        />\n      )}\n    </AutoSizer>\n  );\n};\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.id = \"external-sources-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[ExternalSourcesTreeComponent]].\n * @alpha\n */\nExternalSourcesTreeComponent.getLabel = () => TreeWidget.translate(\"externalSources\");\n"]}

package/lib/esm/components/trees/imodel-content-tree/IModelContentTree.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Ruleset } from "@itwin/presentation-common";
-import type { BaseTreeProps } from "../Common";
+import type { BaseTreeProps } from "../common/Types";
 /**
  * Presentation rules used by IModelContentTree
  * @internal