@itwin/components-react 4.1.0 → 4.2.0-dev.1

package/lib/esm/components-react/tree/controlled/component/ControlledTree.js

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Tree
  */
@@ -37,12 +37,14 @@ export function ControlledTree(props) {
     };
     const loading = useRootNodeLoader(visibleNodes, props.nodeLoader);
     const noData = visibleNodes.getNumRootNodes() === 0;
-    return (React.createElement(Loader, { loading: loading, noData: noData, spinnerRenderer: props.spinnerRenderer, noDataRenderer: props.noDataRenderer }, props.treeRenderer ? props.treeRenderer(treeProps) : React.createElement(TreeRenderer, { ...treeProps })));
+    return (React.createElement(Loader, { loading: loading, noData: noData, spinnerRenderer: props.spinnerRenderer, noDataRenderer: props.noDataRenderer }, props.treeRenderer ? (props.treeRenderer(treeProps)) : (React.createElement(TreeRenderer, { ...treeProps }))));
 }
 function useRootNodeLoader(visibleNodes, nodeLoader) {
     React.useEffect(() => {
         if (visibleNodes.getNumRootNodes() === undefined) {
-            const subscription = nodeLoader.loadNode(visibleNodes.getModel().getRootNode(), 0).subscribe();
+            const subscription = nodeLoader
+                .loadNode(visibleNodes.getModel().getRootNode(), 0)
+                .subscribe();
             return () => subscription.unsubscribe();
         }
         return () => { };
@@ -60,22 +62,20 @@ function useEventDispatcher(nodeLoader, treeEvents, selectionMode, visibleNodes)
 }
 function Loader(props) {
     if (props.loading) {
-        return props.spinnerRenderer
-            ? props.spinnerRenderer()
-            : (React.createElement("div", { className: "components-controlledTree-loader" },
-                React.createElement(DelayedSpinner, { size: "large" })));
+        return props.spinnerRenderer ? (props.spinnerRenderer()) : (React.createElement("div", { className: "components-controlledTree-loader" },
+            React.createElement(DelayedSpinner, { size: "large" })));
     }
     if (props.noData) {
-        return props.noDataRenderer
-            ? props.noDataRenderer()
-            : (React.createElement(FillCentered, null,
-                React.createElement("p", { className: "components-controlledTree-errorMessage" }, UiComponents.translate("general.noData"))));
+        return props.noDataRenderer ? (props.noDataRenderer()) : (React.createElement(FillCentered, null,
+            React.createElement("p", { className: "components-controlledTree-errorMessage" }, UiComponents.translate("general.noData"))));
     }
     return props.children;
 }
 function useNodeHeight(descriptionsEnabled) {
     return React.useCallback((node) => {
-        const contentHeight = (isTreeModelNode(node) && descriptionsEnabled && node && node.description) ? 43 : 24;
+        const contentHeight = isTreeModelNode(node) && descriptionsEnabled && node && node.description
+            ? 43
+            : 24;
         const borderSize = 1;
         // Not counting node's border size twice because we want neighboring borders to overlap
         return contentHeight + borderSize;

package/lib/esm/components-react/tree/controlled/component/ControlledTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlledTree.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/ControlledTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Tree\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport type { CommonProps} from \"@itwin/core-react\";\r\nimport { FillCentered } from \"@itwin/core-react\";\r\nimport { DelayedSpinner } from \"../../../common/DelayedSpinner\";\r\nimport type { SelectionMode } from \"../../../common/selection/SelectionModes\";\r\nimport { UiComponents } from \"../../../UiComponents\";\r\nimport type { HighlightableTreeProps } from \"../../HighlightingEngine\";\r\nimport { TreeImageLoader } from \"../../ImageLoader\";\r\nimport { TreeEventDispatcher } from \"../TreeEventDispatcher\";\r\nimport type { TreeEvents } from \"../TreeEvents\";\r\nimport type { TreeModel, TreeModelNode, TreeModelNodePlaceholder, VisibleTreeNodes } from \"../TreeModel\";\r\nimport { computeVisibleNodes, isTreeModelNode } from \"../TreeModel\";\r\nimport type { ITreeNodeLoader } from \"../TreeNodeLoader\";\r\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer\";\r\nimport { TreeNodeRenderer } from \"./TreeNodeRenderer\";\r\nimport type { RenderedItemsRange, TreeRendererProps } from \"./TreeRenderer\";\r\nimport { TreeRenderer } from \"./TreeRenderer\";\r\n\r\n/**\r\n * Properties for [[ControlledTree]]\r\n * @public\r\n */\r\nexport interface ControlledTreeProps extends CommonProps {\r\n  /** Model of the tree to display. */\r\n  model: TreeModel;\r\n  /** Node loader used to load root nodes and placeholder nodes. */\r\n  nodeLoader: ITreeNodeLoader;\r\n  /** Tree events handler. */\r\n  eventsHandler: TreeEvents;\r\n  /** Mode of nodes' selection in tree. */\r\n  selectionMode: SelectionMode;\r\n  /**\r\n   * Specifies whether to show node description or not. It is used in default node renderer and to determine node height.\r\n   * If custom node renderer and node height callbacks are used it does nothing.\r\n   */\r\n  descriptionsEnabled?: boolean;\r\n  /**\r\n   * Specifies whether to show node icon or not. It is used in default node renderer.\r\n   * If custom node renderer is used it does nothing.\r\n   */\r\n  iconsEnabled?: boolean;\r\n  /**\r\n   * Used to highlight matches when filtering tree.\r\n   * It is passed to treeRenderer.\r\n   */\r\n  nodeHighlightingProps?: HighlightableTreeProps;\r\n  /** Custom renderer to be used to render a tree. */\r\n  treeRenderer?: (props: TreeRendererProps) => React.ReactElement;\r\n  /** Custom renderer to be used while root nodes is loading. */\r\n  spinnerRenderer?: () => React.ReactElement;\r\n  /** Custom renderer to be used when there is no data to show in tree. */\r\n  noDataRenderer?: () => React.ReactElement;\r\n  /** Callback that is invoked when rendered items range changes. */\r\n  onItemsRendered?: (items: RenderedItemsRange) => void;\r\n  /** Width of the tree renderer. */\r\n  width: number;\r\n  /** Height of the tree renderer. */\r\n  height: number;\r\n}\r\n\r\n/**\r\n * React tree component which rendering is fully controlled from outside.\r\n * @public\r\n */\r\nexport function ControlledTree(props: ControlledTreeProps) {\r\n  const nodeHeight = useNodeHeight(!!props.descriptionsEnabled);\r\n  const imageLoader = React.useMemo(() => new TreeImageLoader(), []);\r\n  const nodeRenderer = React.useCallback((nodeProps: TreeNodeRendererProps) => (\r\n    <TreeNodeRenderer\r\n      {...nodeProps}\r\n      descriptionEnabled={props.descriptionsEnabled}\r\n      imageLoader={props.iconsEnabled ? imageLoader : undefined}\r\n    />\r\n  ), [props.descriptionsEnabled, props.iconsEnabled, imageLoader]);\r\n\r\n  const visibleNodes = React.useMemo(() => computeVisibleNodes(props.model), [props.model]);\r\n  const eventDispatcher = useEventDispatcher(props.nodeLoader, props.eventsHandler, props.selectionMode, visibleNodes);\r\n\r\n  const treeProps: TreeRendererProps = {\r\n    nodeRenderer,\r\n    nodeHeight,\r\n    visibleNodes,\r\n    treeActions: eventDispatcher,\r\n    nodeLoader: props.nodeLoader,\r\n    nodeHighlightingProps: props.nodeHighlightingProps,\r\n    onItemsRendered: props.onItemsRendered,\r\n    width: props.width,\r\n    height: props.height,\r\n  };\r\n\r\n  const loading = useRootNodeLoader(visibleNodes, props.nodeLoader);\r\n  const noData = visibleNodes.getNumRootNodes() === 0;\r\n  return (\r\n    <Loader loading={loading} noData={noData} spinnerRenderer={props.spinnerRenderer} noDataRenderer={props.noDataRenderer}>\r\n      {props.treeRenderer ? props.treeRenderer(treeProps) : <TreeRenderer {...treeProps} />}\r\n    </Loader>\r\n  );\r\n}\r\n\r\nfunction useRootNodeLoader(visibleNodes: VisibleTreeNodes, nodeLoader: ITreeNodeLoader): boolean {\r\n  React.useEffect(() => {\r\n    if (visibleNodes.getNumRootNodes() === undefined) {\r\n      const subscription = nodeLoader.loadNode(visibleNodes.getModel().getRootNode(), 0).subscribe();\r\n      return () => subscription.unsubscribe();\r\n    }\r\n\r\n    return () => { };\r\n  }, [visibleNodes, nodeLoader]);\r\n\r\n  return visibleNodes.getNumRootNodes() === undefined;\r\n}\r\n\r\nfunction useEventDispatcher(nodeLoader: ITreeNodeLoader, treeEvents: TreeEvents, selectionMode: SelectionMode, visibleNodes: VisibleTreeNodes) {\r\n  /* istanbul ignore next */\r\n  const getVisibleNodes = React.useCallback(() => visibleNodes, [visibleNodes]);\r\n  const eventDispatcher = React.useMemo(() => new TreeEventDispatcher(treeEvents, nodeLoader, selectionMode), [treeEvents, nodeLoader, selectionMode]);\r\n\r\n  React.useEffect(() => {\r\n    eventDispatcher.setVisibleNodes(getVisibleNodes);\r\n  }, [eventDispatcher, getVisibleNodes]);\r\n\r\n  return eventDispatcher;\r\n}\r\n\r\ninterface LoaderProps {\r\n  loading: boolean;\r\n  noData: boolean;\r\n  spinnerRenderer?: () => React.ReactElement;\r\n  noDataRenderer?: () => React.ReactElement;\r\n  children: JSX.Element;\r\n}\r\n\r\nfunction Loader(props: LoaderProps) {\r\n  if (props.loading) {\r\n    return props.spinnerRenderer\r\n      ? props.spinnerRenderer()\r\n      : (\r\n        <div className=\"components-controlledTree-loader\">\r\n          <DelayedSpinner size=\"large\" />\r\n        </div>\r\n      );\r\n  }\r\n  if (props.noData) {\r\n    return props.noDataRenderer\r\n      ? props.noDataRenderer()\r\n      : (\r\n        <FillCentered>\r\n          <p className=\"components-controlledTree-errorMessage\">\r\n            {UiComponents.translate(\"general.noData\")}\r\n          </p>\r\n        </FillCentered>\r\n      );\r\n  }\r\n\r\n  return props.children;\r\n}\r\n\r\nfunction useNodeHeight(\r\n  descriptionsEnabled: boolean,\r\n): (node: TreeModelNode | TreeModelNodePlaceholder) => number {\r\n  return React.useCallback(\r\n    (node: TreeModelNode | TreeModelNodePlaceholder): number => {\r\n      const contentHeight = (isTreeModelNode(node) && descriptionsEnabled && node && node.description) ? 43 : 24;\r\n      const borderSize = 1;\r\n      // Not counting node's border size twice because we want neighboring borders to overlap\r\n      return contentHeight + borderSize;\r\n    },\r\n    [descriptionsEnabled],\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ControlledTree.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/ControlledTree.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/** @packageDocumentation\n * @module Tree\n */\n\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { DelayedSpinner } from \"../../../common/DelayedSpinner\";\nimport type { SelectionMode } from \"../../../common/selection/SelectionModes\";\nimport { UiComponents } from \"../../../UiComponents\";\nimport type { HighlightableTreeProps } from \"../../HighlightingEngine\";\nimport { TreeImageLoader } from \"../../ImageLoader\";\nimport { TreeEventDispatcher } from \"../TreeEventDispatcher\";\nimport type { TreeEvents } from \"../TreeEvents\";\nimport type {\n  TreeModel,\n  TreeModelNode,\n  TreeModelNodePlaceholder,\n  VisibleTreeNodes,\n} from \"../TreeModel\";\nimport { computeVisibleNodes, isTreeModelNode } from \"../TreeModel\";\nimport type { ITreeNodeLoader } from \"../TreeNodeLoader\";\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer\";\nimport { TreeNodeRenderer } from \"./TreeNodeRenderer\";\nimport type { RenderedItemsRange, TreeRendererProps } from \"./TreeRenderer\";\nimport { TreeRenderer } from \"./TreeRenderer\";\n\n/**\n * Properties for [[ControlledTree]]\n * @public\n */\nexport interface ControlledTreeProps extends CommonProps {\n  /** Model of the tree to display. */\n  model: TreeModel;\n  /** Node loader used to load root nodes and placeholder nodes. */\n  nodeLoader: ITreeNodeLoader;\n  /** Tree events handler. */\n  eventsHandler: TreeEvents;\n  /** Mode of nodes' selection in tree. */\n  selectionMode: SelectionMode;\n  /**\n   * Specifies whether to show node description or not. It is used in default node renderer and to determine node height.\n   * If custom node renderer and node height callbacks are used it does nothing.\n   */\n  descriptionsEnabled?: boolean;\n  /**\n   * Specifies whether to show node icon or not. It is used in default node renderer.\n   * If custom node renderer is used it does nothing.\n   */\n  iconsEnabled?: boolean;\n  /**\n   * Used to highlight matches when filtering tree.\n   * It is passed to treeRenderer.\n   */\n  nodeHighlightingProps?: HighlightableTreeProps;\n  /** Custom renderer to be used to render a tree. */\n  treeRenderer?: (props: TreeRendererProps) => React.ReactElement;\n  /** Custom renderer to be used while root nodes is loading. */\n  spinnerRenderer?: () => React.ReactElement;\n  /** Custom renderer to be used when there is no data to show in tree. */\n  noDataRenderer?: () => React.ReactElement;\n  /** Callback that is invoked when rendered items range changes. */\n  onItemsRendered?: (items: RenderedItemsRange) => void;\n  /** Width of the tree renderer. */\n  width: number;\n  /** Height of the tree renderer. */\n  height: number;\n}\n\n/**\n * React tree component which rendering is fully controlled from outside.\n * @public\n */\nexport function ControlledTree(props: ControlledTreeProps) {\n  const nodeHeight = useNodeHeight(!!props.descriptionsEnabled);\n  const imageLoader = React.useMemo(() => new TreeImageLoader(), []);\n  const nodeRenderer = React.useCallback(\n    (nodeProps: TreeNodeRendererProps) => (\n      <TreeNodeRenderer\n        {...nodeProps}\n        descriptionEnabled={props.descriptionsEnabled}\n        imageLoader={props.iconsEnabled ? imageLoader : undefined}\n      />\n    ),\n    [props.descriptionsEnabled, props.iconsEnabled, imageLoader]\n  );\n\n  const visibleNodes = React.useMemo(\n    () => computeVisibleNodes(props.model),\n    [props.model]\n  );\n  const eventDispatcher = useEventDispatcher(\n    props.nodeLoader,\n    props.eventsHandler,\n    props.selectionMode,\n    visibleNodes\n  );\n\n  const treeProps: TreeRendererProps = {\n    nodeRenderer,\n    nodeHeight,\n    visibleNodes,\n    treeActions: eventDispatcher,\n    nodeLoader: props.nodeLoader,\n    nodeHighlightingProps: props.nodeHighlightingProps,\n    onItemsRendered: props.onItemsRendered,\n    width: props.width,\n    height: props.height,\n  };\n\n  const loading = useRootNodeLoader(visibleNodes, props.nodeLoader);\n  const noData = visibleNodes.getNumRootNodes() === 0;\n  return (\n    <Loader\n      loading={loading}\n      noData={noData}\n      spinnerRenderer={props.spinnerRenderer}\n      noDataRenderer={props.noDataRenderer}\n    >\n      {props.treeRenderer ? (\n        props.treeRenderer(treeProps)\n      ) : (\n        <TreeRenderer {...treeProps} />\n      )}\n    </Loader>\n  );\n}\n\nfunction useRootNodeLoader(\n  visibleNodes: VisibleTreeNodes,\n  nodeLoader: ITreeNodeLoader\n): boolean {\n  React.useEffect(() => {\n    if (visibleNodes.getNumRootNodes() === undefined) {\n      const subscription = nodeLoader\n        .loadNode(visibleNodes.getModel().getRootNode(), 0)\n        .subscribe();\n      return () => subscription.unsubscribe();\n    }\n\n    return () => {};\n  }, [visibleNodes, nodeLoader]);\n\n  return visibleNodes.getNumRootNodes() === undefined;\n}\n\nfunction useEventDispatcher(\n  nodeLoader: ITreeNodeLoader,\n  treeEvents: TreeEvents,\n  selectionMode: SelectionMode,\n  visibleNodes: VisibleTreeNodes\n) {\n  /* istanbul ignore next */\n  const getVisibleNodes = React.useCallback(() => visibleNodes, [visibleNodes]);\n  const eventDispatcher = React.useMemo(\n    () => new TreeEventDispatcher(treeEvents, nodeLoader, selectionMode),\n    [treeEvents, nodeLoader, selectionMode]\n  );\n\n  React.useEffect(() => {\n    eventDispatcher.setVisibleNodes(getVisibleNodes);\n  }, [eventDispatcher, getVisibleNodes]);\n\n  return eventDispatcher;\n}\n\ninterface LoaderProps {\n  loading: boolean;\n  noData: boolean;\n  spinnerRenderer?: () => React.ReactElement;\n  noDataRenderer?: () => React.ReactElement;\n  children: React.ReactElement;\n}\n\nfunction Loader(props: LoaderProps) {\n  if (props.loading) {\n    return props.spinnerRenderer ? (\n      props.spinnerRenderer()\n    ) : (\n      <div className=\"components-controlledTree-loader\">\n        <DelayedSpinner size=\"large\" />\n      </div>\n    );\n  }\n  if (props.noData) {\n    return props.noDataRenderer ? (\n      props.noDataRenderer()\n    ) : (\n      <FillCentered>\n        <p className=\"components-controlledTree-errorMessage\">\n          {UiComponents.translate(\"general.noData\")}\n        </p>\n      </FillCentered>\n    );\n  }\n\n  return props.children;\n}\n\nfunction useNodeHeight(\n  descriptionsEnabled: boolean\n): (node: TreeModelNode | TreeModelNodePlaceholder) => number {\n  return React.useCallback(\n    (node: TreeModelNode | TreeModelNodePlaceholder): number => {\n      const contentHeight =\n        isTreeModelNode(node) && descriptionsEnabled && node && node.description\n          ? 43\n          : 24;\n      const borderSize = 1;\n      // Not counting node's border size twice because we want neighboring borders to overlap\n      return contentHeight + borderSize;\n    },\n    [descriptionsEnabled]\n  );\n}\n"]}

package/lib/esm/components-react/tree/controlled/component/ControlledTree.scss

@@ -1,103 +1,102 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/scrollbar";
-
-.components-controlledTree-loader {
-  position: relative;
-  display: block;
-  left: calc(50% - 24px);
-  top: calc(50% - 24px);
-  height: 48px;
-  width: 48px;
-}
-
-.components-controlledTree-errorMessage {
-  font-style: italic;
-  color: var(--iui-color-text-muted);
-  margin: 0 20%;
-  text-align: center;
-}
-
-.components-controlledTree {
-  color: var(--iui-color-text);
-  background-color: var(--iui-color-background);
-
-  /**
-   * Workaround for horizontal scroll issue.
-   * based on https://github.com/bvaughn/react-window/issues/681
-   */
-  .ReactVirtualized__Grid,
-  .ReactWindow__VariableSizeList {
-    overflow: scroll !important;
-    background-color: inherit;
-
-    @include uicore-scrollbar;
-
-    &:focus {
-      outline: none;
-    }
-
-    >div {
-      overflow: visible !important;
-      max-width: none !important;
-    }
-  }
-
-  .node-wrapper {
-    // The virtualized list wants to use absolute layout, but we
-    // need the inner container to grow in width based on the widest
-    // node. To workaround, we use relative layout with 0 heigh nodes.
-    position: relative !important;
-    height: 0 !important;
-    width: fit-content !important;
-    min-width: 100% !important;
-    overflow: visible !important;
-
-    &.is-selected {
-      // Prevent selected node's borders from being overdrawn by non-selected neighbors
-      z-index: 1;
-    }
-
-    .core-tree-node {
-
-      &.is-focused,
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  @mixin enable-border($edge) {
-    border-#{$edge}: 1px solid var(--iui-color-icon-accent);
-    padding-#{$edge}: 0;
-  }
-
-  .node-wrapper.is-selected {
-    .core-tree-node {
-      background: var(--iui-color-background-accent-muted);
-      @include enable-border("left");
-      @include enable-border("right");
-    }
-  }
-
-  .node-wrapper.is-selected:first-child,
-  .node-wrapper:not(.is-selected) + .node-wrapper.is-selected {
-    .core-tree-node {
-      @include enable-border("top");
-    }
-  }
-
-  .node-wrapper.is-selected + .node-wrapper:not(.is-selected) {
-    .core-tree-node {
-      @include enable-border("top");
-    }
-  }
-
-  .node-wrapper.is-selected:last-child {
-    .core-tree-node {
-      @include enable-border("bottom");
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/scrollbar";
+
+.components-controlledTree-loader {
+  position: relative;
+  display: block;
+  left: calc(50% - 24px);
+  top: calc(50% - 24px);
+  height: 48px;
+  width: 48px;
+}
+
+.components-controlledTree-errorMessage {
+  font-style: italic;
+  color: var(--iui-color-text-muted);
+  margin: 0 20%;
+  text-align: center;
+}
+
+.components-controlledTree {
+  color: var(--iui-color-text);
+  background-color: var(--iui-color-background);
+
+  /**
+   * Workaround for horizontal scroll issue.
+   * based on https://github.com/bvaughn/react-window/issues/681
+   */
+  .ReactVirtualized__Grid,
+  .ReactWindow__VariableSizeList {
+    overflow: scroll !important;
+    background-color: inherit;
+
+    @include uicore-scrollbar;
+
+    &:focus {
+      outline: none;
+    }
+
+    > div {
+      overflow: visible !important;
+      max-width: none !important;
+    }
+  }
+
+  .node-wrapper {
+    // The virtualized list wants to use absolute layout, but we
+    // need the inner container to grow in width based on the widest
+    // node. To workaround, we use relative layout with 0 heigh nodes.
+    position: relative !important;
+    height: 0 !important;
+    width: fit-content !important;
+    min-width: 100% !important;
+    overflow: visible !important;
+
+    &.is-selected {
+      // Prevent selected node's borders from being overdrawn by non-selected neighbors
+      z-index: 1;
+    }
+
+    .core-tree-node {
+      &.is-focused,
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  @mixin enable-border($edge) {
+    border-#{$edge}: 1px solid var(--iui-color-icon-accent);
+    padding-#{$edge}: 0;
+  }
+
+  .node-wrapper.is-selected {
+    .core-tree-node {
+      background: var(--iui-color-background-accent-muted);
+      @include enable-border("left");
+      @include enable-border("right");
+    }
+  }
+
+  .node-wrapper.is-selected:first-child,
+  .node-wrapper:not(.is-selected) + .node-wrapper.is-selected {
+    .core-tree-node {
+      @include enable-border("top");
+    }
+  }
+
+  .node-wrapper.is-selected + .node-wrapper:not(.is-selected) {
+    .core-tree-node {
+      @include enable-border("top");
+    }
+  }
+
+  .node-wrapper.is-selected:last-child {
+    .core-tree-node {
+      @include enable-border("bottom");
+    }
+  }
+}

package/lib/esm/components-react/tree/controlled/component/NodeContent.d.ts

@@ -4,23 +4,28 @@
 /// <reference types="react" />
 import "./NodeContent.scss";
 import type { CommonProps } from "@itwin/core-react";
-import type { PropertyValueRendererManager } from "../../../properties/ValueRendererManager";
 import type { HighlightableTreeNodeProps } from "../../HighlightingEngine";
 import type { TreeModelNode } from "../TreeModel";
 import type { TreeNodeEditorRenderer } from "./TreeNodeEditor";
-/** Properties for [[TreeNodeContent]] component
- * @internal
+/**
+ * Properties for [[TreeNodeContent]] component
+ * @public
  */
 export interface TreeNodeContentProps extends CommonProps {
+    /** Tree node to render label for. */
     node: TreeModelNode;
+    /** Flag that specified whether the description should be shown or not. */
     showDescription?: boolean;
+    /** Props for highlighting label parts that matches filter when tree is filtered. */
     highlightProps?: HighlightableTreeNodeProps;
-    valueRendererManager: PropertyValueRendererManager;
+    /** Callback used to detect when label is rendered. */
     onLabelRendered?: (node: TreeModelNode) => void;
+    /** Callback to render custom node editor when node is in editing mode. */
     nodeEditorRenderer?: TreeNodeEditorRenderer;
 }
-/** React component for displaying [[TreeNode]] label
- * @internal
+/**
+ * React component for displaying [[TreeNode]] label
+ * @public
  */
 export declare function TreeNodeContent(props: TreeNodeContentProps): JSX.Element;
 //# sourceMappingURL=NodeContent.d.ts.map

package/lib/esm/components-react/tree/controlled/component/NodeContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/NodeContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAIpD,OAAO,KAAK,EAAgC,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AAE3H,OAAO,KAAK,EAAE,0BAA0B,EAAC,MAAM,0BAA0B,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG/D;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,IAAI,EAAE,aAAa,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,oBAAoB,EAAE,4BAA4B,CAAC;IAEnD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA+C1D"}
+{"version":3,"file":"NodeContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/NodeContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOrD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG/D;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,qCAAqC;IACrC,IAAI,EAAE,aAAa,CAAC;IACpB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oFAAoF;IACpF,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,sDAAsD;IACtD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;CAC7C;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuD1D"}

package/lib/esm/components-react/tree/controlled/component/NodeContent.js

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Tree
  */
@@ -10,16 +10,19 @@ import classnames from "classnames";
 import * as React from "react";
 import { TreeNodePlaceholder } from "@itwin/core-react";
 import { ItemStyleProvider } from "../../../properties/ItemStyle";
+import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager";
 import { PropertyContainerType } from "../../../properties/ValueRendererManager";
 import { HighlightingEngine } from "../../HighlightingEngine";
 import { TreeNodeEditor } from "./TreeNodeEditor";
-/** React component for displaying [[TreeNode]] label
- * @internal
+/**
+ * React component for displaying [[TreeNode]] label
+ * @public
  */
 export function TreeNodeContent(props) {
-    const { node, valueRendererManager, onLabelRendered, highlightProps } = props;
+    const { node, onLabelRendered, highlightProps } = props;
+    const label = React.useMemo(
     // eslint-disable-next-line @typescript-eslint/promise-function-async
-    const label = React.useMemo(() => getLabel(node, valueRendererManager, highlightProps), [node, valueRendererManager, highlightProps]);
+    () => getLabel(node, highlightProps), [node, highlightProps]);
     React.useEffect(() => {
         onLabelRendered && onLabelRendered(node);
     }, [label, node, onLabelRendered]);
@@ -34,7 +37,7 @@ export function TreeNodeContent(props) {
             onCommit: props.node.editingInfo.onCommit,
             style,
         };
-        editor = props.nodeEditorRenderer ? props.nodeEditorRenderer(editorProps) : React.createElement(TreeNodeEditor, { ...editorProps });
+        editor = props.nodeEditorRenderer ? (props.nodeEditorRenderer(editorProps)) : (React.createElement(TreeNodeEditor, { ...editorProps }));
     }
     const isDescriptionEnabled = props.node.item.description && props.showDescription;
     const containerClassName = classnames("components-controlledTree-node-content", isDescriptionEnabled ? "with-description" : undefined, props.className);
@@ -42,11 +45,9 @@ export function TreeNodeContent(props) {
     return (React.createElement("div", { className: containerClassName, style: props.style },
         React.createElement(React.Fragment, null,
             editor ? editor : label,
-            isDescriptionEnabled ?
-                React.createElement("div", { className: descriptionClassName }, props.node.item.description)
-                : undefined)));
+            isDescriptionEnabled ? (React.createElement("div", { className: descriptionClassName }, props.node.item.description)) : undefined)));
 }
-function getLabel(node, valueRendererManager, highlightProps) {
+function getLabel(node, highlightProps) {
     // handle filtered matches' highlighting
     const highlightCallback = highlightProps
         ? (text) => HighlightingEngine.renderNodeLabel(text, highlightProps)
@@ -56,9 +57,9 @@ function getLabel(node, valueRendererManager, highlightProps) {
         containerType: PropertyContainerType.Tree,
         style: getStyle(node.item.style, node.isSelected),
         textHighlighter: highlightCallback,
-        defaultValue: React.createElement(TreeNodePlaceholder, { level: 0, "data-testid": "node-label-placeholder" }),
+        defaultValue: (React.createElement(TreeNodePlaceholder, { level: 0, "data-testid": "node-label-placeholder" })),
     };
-    return valueRendererManager.render(node.item.label, context);
+    return PropertyValueRendererManager.defaultManager.render(node.item.label, context);
 }
 function getStyle(style, isSelected) {
     return ItemStyleProvider.createStyle(style ? style : {}, isSelected);

package/lib/esm/components-react/tree/controlled/component/NodeContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeContent.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/NodeContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Tree\r\n */\r\n\r\nimport \"./NodeContent.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport type { CommonProps} from \"@itwin/core-react\";\r\nimport { TreeNodePlaceholder } from \"@itwin/core-react\";\r\nimport type { ItemStyle} from \"../../../properties/ItemStyle\";\r\nimport { ItemStyleProvider } from \"../../../properties/ItemStyle\";\r\nimport type { PropertyValueRendererContext, PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\r\nimport { PropertyContainerType } from \"../../../properties/ValueRendererManager\";\r\nimport type { HighlightableTreeNodeProps} from \"../../HighlightingEngine\";\r\nimport { HighlightingEngine } from \"../../HighlightingEngine\";\r\nimport type { TreeModelNode } from \"../TreeModel\";\r\nimport type { TreeNodeEditorRenderer } from \"./TreeNodeEditor\";\r\nimport { TreeNodeEditor } from \"./TreeNodeEditor\";\r\n\r\n/** Properties for [[TreeNodeContent]] component\r\n * @internal\r\n */\r\nexport interface TreeNodeContentProps extends CommonProps {\r\n  node: TreeModelNode;\r\n  showDescription?: boolean;\r\n  highlightProps?: HighlightableTreeNodeProps;\r\n  valueRendererManager: PropertyValueRendererManager;\r\n\r\n  onLabelRendered?: (node: TreeModelNode) => void;\r\n  nodeEditorRenderer?: TreeNodeEditorRenderer;\r\n}\r\n\r\n/** React component for displaying [[TreeNode]] label\r\n * @internal\r\n */\r\nexport function TreeNodeContent(props: TreeNodeContentProps) {\r\n  const { node, valueRendererManager, onLabelRendered, highlightProps } = props;\r\n  // eslint-disable-next-line @typescript-eslint/promise-function-async\r\n  const label = React.useMemo(() => getLabel(node, valueRendererManager, highlightProps), [node, valueRendererManager, highlightProps]);\r\n  React.useEffect(() => {\r\n    onLabelRendered && onLabelRendered(node);\r\n  }, [label, node, onLabelRendered]);\r\n\r\n  // handle cell editing\r\n  let editor: React.ReactNode;\r\n  if (props.node.editingInfo) {\r\n    // if cell editing is enabled, return editor instead of the label\r\n    const style = getStyle(props.node.item.style, props.node.isSelected);\r\n    const editorProps = {\r\n      node: props.node,\r\n      onCancel: props.node.editingInfo.onCancel,\r\n      onCommit: props.node.editingInfo.onCommit,\r\n      style,\r\n    };\r\n    editor = props.nodeEditorRenderer ? props.nodeEditorRenderer(editorProps) : <TreeNodeEditor {...editorProps} />;\r\n  }\r\n\r\n  const isDescriptionEnabled = props.node.item.description && props.showDescription;\r\n\r\n  const containerClassName = classnames(\r\n    \"components-controlledTree-node-content\",\r\n    isDescriptionEnabled ? \"with-description\" : undefined,\r\n    props.className,\r\n  );\r\n\r\n  const descriptionClassName = classnames(\r\n    \"components-controlledTree-node-description\",\r\n    editor ? \"with-editor\" : undefined,\r\n  );\r\n\r\n  return (\r\n    <div className={containerClassName} style={props.style}>\r\n      <>\r\n        {editor ? editor : label}\r\n        {isDescriptionEnabled ?\r\n          <div className={descriptionClassName}>\r\n            {props.node.item.description}\r\n          </div>\r\n          : undefined}\r\n      </>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction getLabel(\r\n  node: TreeModelNode,\r\n  valueRendererManager: PropertyValueRendererManager,\r\n  highlightProps?: HighlightableTreeNodeProps): React.ReactNode | Promise<React.ReactNode> {\r\n  // handle filtered matches' highlighting\r\n  const highlightCallback = highlightProps\r\n    ? (text: string) => HighlightingEngine.renderNodeLabel(text, highlightProps)\r\n    : undefined;\r\n\r\n  // handle custom cell rendering\r\n  const context: PropertyValueRendererContext = {\r\n    containerType: PropertyContainerType.Tree,\r\n    style: getStyle(node.item.style, node.isSelected),\r\n    textHighlighter: highlightCallback,\r\n    defaultValue: <TreeNodePlaceholder level={0} data-testid={\"node-label-placeholder\"} />,\r\n  };\r\n\r\n  return valueRendererManager.render(node.item.label, context);\r\n}\r\n\r\nfunction getStyle(style?: ItemStyle, isSelected?: boolean): React.CSSProperties {\r\n  return ItemStyleProvider.createStyle(style ? style : {}, isSelected);\r\n}\r\n"]}
+{"version":3,"file":"NodeContent.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/NodeContent.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/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./NodeContent.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { TreeNodePlaceholder } from \"@itwin/core-react\";\nimport type { ItemStyle } from \"../../../properties/ItemStyle\";\nimport { ItemStyleProvider } from \"../../../properties/ItemStyle\";\nimport type { PropertyValueRendererContext } from \"../../../properties/ValueRendererManager\";\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport { PropertyContainerType } from \"../../../properties/ValueRendererManager\";\nimport type { HighlightableTreeNodeProps } from \"../../HighlightingEngine\";\nimport { HighlightingEngine } from \"../../HighlightingEngine\";\nimport type { TreeModelNode } from \"../TreeModel\";\nimport type { TreeNodeEditorRenderer } from \"./TreeNodeEditor\";\nimport { TreeNodeEditor } from \"./TreeNodeEditor\";\n\n/**\n * Properties for [[TreeNodeContent]] component\n * @public\n */\nexport interface TreeNodeContentProps extends CommonProps {\n  /** Tree node to render label for. */\n  node: TreeModelNode;\n  /** Flag that specified whether the description should be shown or not. */\n  showDescription?: boolean;\n  /** Props for highlighting label parts that matches filter when tree is filtered. */\n  highlightProps?: HighlightableTreeNodeProps;\n  /** Callback used to detect when label is rendered. */\n  onLabelRendered?: (node: TreeModelNode) => void;\n  /** Callback to render custom node editor when node is in editing mode. */\n  nodeEditorRenderer?: TreeNodeEditorRenderer;\n}\n\n/**\n * React component for displaying [[TreeNode]] label\n * @public\n */\nexport function TreeNodeContent(props: TreeNodeContentProps) {\n  const { node, onLabelRendered, highlightProps } = props;\n  const label = React.useMemo(\n    // eslint-disable-next-line @typescript-eslint/promise-function-async\n    () => getLabel(node, highlightProps),\n    [node, highlightProps]\n  );\n  React.useEffect(() => {\n    onLabelRendered && onLabelRendered(node);\n  }, [label, node, onLabelRendered]);\n\n  // handle cell editing\n  let editor: React.ReactNode;\n  if (props.node.editingInfo) {\n    // if cell editing is enabled, return editor instead of the label\n    const style = getStyle(props.node.item.style, props.node.isSelected);\n    const editorProps = {\n      node: props.node,\n      onCancel: props.node.editingInfo.onCancel,\n      onCommit: props.node.editingInfo.onCommit,\n      style,\n    };\n    editor = props.nodeEditorRenderer ? (\n      props.nodeEditorRenderer(editorProps)\n    ) : (\n      <TreeNodeEditor {...editorProps} />\n    );\n  }\n\n  const isDescriptionEnabled =\n    props.node.item.description && props.showDescription;\n\n  const containerClassName = classnames(\n    \"components-controlledTree-node-content\",\n    isDescriptionEnabled ? \"with-description\" : undefined,\n    props.className\n  );\n\n  const descriptionClassName = classnames(\n    \"components-controlledTree-node-description\",\n    editor ? \"with-editor\" : undefined\n  );\n\n  return (\n    <div className={containerClassName} style={props.style}>\n      <>\n        {editor ? editor : label}\n        {isDescriptionEnabled ? (\n          <div className={descriptionClassName}>\n            {props.node.item.description}\n          </div>\n        ) : undefined}\n      </>\n    </div>\n  );\n}\n\nfunction getLabel(\n  node: TreeModelNode,\n  highlightProps?: HighlightableTreeNodeProps\n): React.ReactNode | Promise<React.ReactNode> {\n  // handle filtered matches' highlighting\n  const highlightCallback = highlightProps\n    ? (text: string) => HighlightingEngine.renderNodeLabel(text, highlightProps)\n    : undefined;\n\n  // handle custom cell rendering\n  const context: PropertyValueRendererContext = {\n    containerType: PropertyContainerType.Tree,\n    style: getStyle(node.item.style, node.isSelected),\n    textHighlighter: highlightCallback,\n    defaultValue: (\n      <TreeNodePlaceholder level={0} data-testid={\"node-label-placeholder\"} />\n    ),\n  };\n\n  return PropertyValueRendererManager.defaultManager.render(\n    node.item.label,\n    context\n  );\n}\n\nfunction getStyle(\n  style?: ItemStyle,\n  isSelected?: boolean\n): React.CSSProperties {\n  return ItemStyleProvider.createStyle(style ? style : {}, isSelected);\n}\n"]}

package/lib/esm/components-react/tree/controlled/component/NodeContent.scss

@@ -1,27 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-.components-controlledTree-node-description {
-  color: var(--iui-color-text-muted);
-  font-size: var(--iui-font-size-0);
-  margin-top: 4px;
-
-  &.with-editor {
-    margin: 0;
-    padding-top: 1px;
-  }
-}
-
-.components-controlledTree-node-content {
-  height: 24px;
-  line-height: var(--iui-font-size-0);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  &.with-description {
-    height: 43px;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.components-controlledTree-node-description {
+  color: var(--iui-color-text-muted);
+  font-size: var(--iui-font-size-0);
+  margin-top: 4px;
+
+  &.with-editor {
+    margin: 0;
+    padding-top: 1px;
+  }
+}
+
+.components-controlledTree-node-content {
+  height: 24px;
+  line-height: var(--iui-font-size-0);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &.with-description {
+    height: 43px;
+  }
+}

package/lib/esm/components-react/tree/controlled/component/TreeNodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNodeEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,IAAI,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;AAErF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAoBxD"}
+{"version":3,"file":"TreeNodeEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,IAAI,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CACnC,KAAK,EAAE,mBAAmB,KACvB,KAAK,CAAC,SAAS,CAAC;AAErB;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAoBxD"}

package/lib/esm/components-react/tree/controlled/component/TreeNodeEditor.js

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Tree
  */

package/lib/esm/components-react/tree/controlled/component/TreeNodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNodeEditor.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeEditor.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AA2BnE;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,QAAQ,GAAG,CAAC,IAAyB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAI,IAAI,CAAC,QAA2B,CAAC,KAAe,CAAC;QACnE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnE,OAAO,CACL,8BAAM,KAAK,EAAE,KAAK,CAAC,KAAK;QACtB,oBAAC,eAAe,IACd,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,cAAc,CAAC,WAAW,EACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,QAAQ,EAAE,IAAI,GACd,CACG,CACR,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,KAAqB;IACjD,MAAM,QAAQ,GAAwB;QACpC,IAAI,EAAE,kBAAkB;QACxB,YAAY,EAAE,kBAAkB;QAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ;KAClC,CAAC;IAEF,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IACzD,MAAM,CAAC,WAAW,GAAG,EAAE,CAAC;IACxB,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;IAE1B,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Tree\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport type { PrimitiveValue, PropertyDescription} from \"@itwin/appui-abstract\";\r\nimport { PropertyRecord } from \"@itwin/appui-abstract\";\r\nimport type { PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\r\nimport { EditorContainer } from \"../../../editors/EditorContainer\";\r\nimport type { TreeModelNode } from \"../TreeModel\";\r\n\r\n/**\r\n * Properties for [[TreeNodeEditor]] component.\r\n * @public\r\n */\r\nexport interface TreeNodeEditorProps {\r\n  /** Tree node which is in editing mode. */\r\n  node: TreeModelNode;\r\n  /** Callback that is called when changes are committed. */\r\n  onCommit: (node: TreeModelNode, newValue: string) => void;\r\n  /** Callback that is called when editing is canceled. */\r\n  onCancel: () => void;\r\n  /** Editor style. */\r\n  style?: React.CSSProperties;\r\n\r\n  /** @internal */\r\n  ignoreEditorBlur?: boolean;\r\n}\r\n\r\n/**\r\n * Type for tree node editor renderer.\r\n * @public\r\n */\r\nexport type TreeNodeEditorRenderer = (props: TreeNodeEditorProps) => React.ReactNode;\r\n\r\n/**\r\n * React component for displaying tree node editor.\r\n * @public\r\n */\r\nexport function TreeNodeEditor(props: TreeNodeEditorProps) {\r\n  const onCommit = (args: PropertyUpdatedArgs) => {\r\n    const newValue = (args.newValue as PrimitiveValue).value as string;\r\n    props.onCommit(props.node, newValue);\r\n  };\r\n\r\n  const propertyRecord = createPropertyRecord(props.node.item.label);\r\n\r\n  return (\r\n    <span style={props.style}>\r\n      <EditorContainer\r\n        propertyRecord={propertyRecord}\r\n        title={propertyRecord.description}\r\n        onCommit={onCommit}\r\n        onCancel={props.onCancel}\r\n        ignoreEditorBlur={props.ignoreEditorBlur}\r\n        setFocus={true}\r\n      />\r\n    </span>\r\n  );\r\n}\r\n\r\nfunction createPropertyRecord(label: PropertyRecord) {\r\n  const property: PropertyDescription = {\r\n    name: \"tree-node-editor\",\r\n    displayLabel: \"Tree Node Editor\",\r\n    typename: label.property.typename,\r\n  };\r\n\r\n  const record = new PropertyRecord(label.value, property);\r\n  record.description = \"\";\r\n  record.isReadonly = false;\r\n\r\n  return record;\r\n}\r\n"]}
+{"version":3,"file":"TreeNodeEditor.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AA6BnE;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,QAAQ,GAAG,CAAC,IAAyB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAI,IAAI,CAAC,QAA2B,CAAC,KAAe,CAAC;QACnE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnE,OAAO,CACL,8BAAM,KAAK,EAAE,KAAK,CAAC,KAAK;QACtB,oBAAC,eAAe,IACd,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,cAAc,CAAC,WAAW,EACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,QAAQ,EAAE,IAAI,GACd,CACG,CACR,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,KAAqB;IACjD,MAAM,QAAQ,GAAwB;QACpC,IAAI,EAAE,kBAAkB;QACxB,YAAY,EAAE,kBAAkB;QAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ;KAClC,CAAC;IAEF,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IACzD,MAAM,CAAC,WAAW,GAAG,EAAE,CAAC;IACxB,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;IAE1B,OAAO,MAAM,CAAC;AAChB,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/** @packageDocumentation\n * @module Tree\n */\n\nimport * as React from \"react\";\nimport type {\n  PrimitiveValue,\n  PropertyDescription,\n} from \"@itwin/appui-abstract\";\nimport { PropertyRecord } from \"@itwin/appui-abstract\";\nimport type { PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\nimport { EditorContainer } from \"../../../editors/EditorContainer\";\nimport type { TreeModelNode } from \"../TreeModel\";\n\n/**\n * Properties for [[TreeNodeEditor]] component.\n * @public\n */\nexport interface TreeNodeEditorProps {\n  /** Tree node which is in editing mode. */\n  node: TreeModelNode;\n  /** Callback that is called when changes are committed. */\n  onCommit: (node: TreeModelNode, newValue: string) => void;\n  /** Callback that is called when editing is canceled. */\n  onCancel: () => void;\n  /** Editor style. */\n  style?: React.CSSProperties;\n\n  /** @internal */\n  ignoreEditorBlur?: boolean;\n}\n\n/**\n * Type for tree node editor renderer.\n * @public\n */\nexport type TreeNodeEditorRenderer = (\n  props: TreeNodeEditorProps\n) => React.ReactNode;\n\n/**\n * React component for displaying tree node editor.\n * @public\n */\nexport function TreeNodeEditor(props: TreeNodeEditorProps) {\n  const onCommit = (args: PropertyUpdatedArgs) => {\n    const newValue = (args.newValue as PrimitiveValue).value as string;\n    props.onCommit(props.node, newValue);\n  };\n\n  const propertyRecord = createPropertyRecord(props.node.item.label);\n\n  return (\n    <span style={props.style}>\n      <EditorContainer\n        propertyRecord={propertyRecord}\n        title={propertyRecord.description}\n        onCommit={onCommit}\n        onCancel={props.onCancel}\n        ignoreEditorBlur={props.ignoreEditorBlur}\n        setFocus={true}\n      />\n    </span>\n  );\n}\n\nfunction createPropertyRecord(label: PropertyRecord) {\n  const property: PropertyDescription = {\n    name: \"tree-node-editor\",\n    displayLabel: \"Tree Node Editor\",\n    typename: label.property.typename,\n  };\n\n  const record = new PropertyRecord(label.value, property);\n  record.description = \"\";\n  record.isReadonly = false;\n\n  return record;\n}\n"]}

package/lib/esm/components-react/tree/controlled/component/TreeNodeRenderer.d.ts

@@ -32,6 +32,8 @@ export interface TreeNodeRendererProps extends CommonProps {
      * @internal
      */
     onLabelRendered?: (node: TreeModelNode) => void;
+    /** Callback that is invoked when context menu should be opened. */
+    onContextMenu?: (e: React.MouseEvent, node: TreeModelNode) => void;
     /** Child components to render inside the node.*/
     children?: React.ReactNode;
 }
@@ -40,4 +42,19 @@ export interface TreeNodeRendererProps extends CommonProps {
  * @public
  */
 export declare const TreeNodeRenderer: React.NamedExoticComponent<TreeNodeRendererProps>;
+/**
+ * Props for [[TreeNodeIcon]] component.
+ * @public
+ */
+export interface TreeNodeIconProps {
+    /** Tree node to render icon for. */
+    node: TreeModelNode;
+    /** Image loader used to load tree node icon. */
+    imageLoader: ITreeImageLoader;
+}
+/**
+ * React component that renders icon for [[TreeNode]].
+ * @public
+ */
+export declare function TreeNodeIcon(props: TreeNodeIconProps): JSX.Element | null;
 //# sourceMappingURL=TreeNodeRenderer.d.ts.map

package/lib/esm/components-react/tree/controlled/component/TreeNodeRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNodeRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAqB,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAI7F,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2BAA2B;IAC3B,IAAI,EAAE,aAAa,CAAC;IAEpB,sBAAsB;IACtB,WAAW,EAAE,WAAW,CAAC;IAEzB,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;IAEhD,qDAAqD;IACrD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,mCAAmC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAE/B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IAExC,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAE5C;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAEhD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,mDAiD3B,CAAC"}
+{"version":3,"file":"TreeNodeRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,WAAW,EAEX,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2BAA2B;IAC3B,IAAI,EAAE,aAAa,CAAC;IAEpB,sBAAsB;IACtB,WAAW,EAAE,WAAW,CAAC;IAEzB,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;IAEhD,qDAAqD;IACrD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,mCAAmC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAE/B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IAExC,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAE5C;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAEhD,mEAAmE;IACnE,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAEnE,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,mDAiE3B,CAAC;AAEH;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,IAAI,EAAE,aAAa,CAAC;IACpB,gDAAgD;IAChD,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,sBAQpD"}