@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.4

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

@@ -1,103 +1,103 @@
-/*---------------------------------------------------------------------------------------------
-* 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/style/themecolors";
-@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: $buic-foreground-muted;
-  margin: 0 20%;
-  text-align: center;
-}
-
-.components-controlledTree {
-  color: $buic-foreground-body;
-  background-color: $buic-background-control;
-
-  /**
-   * Workaround for horizontal scroll issue.
-   * based on https://github.com/bvaughn/react-virtualized/issues/1248
-   */
-  .ReactVirtualized__Grid,
-  .ReactWindow__VariableSizeList {
-    overflow: auto !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 $buic-foreground-primary;
-    padding-#{$edge}: 0;
-  }
-
-  .node-wrapper.is-selected {
-    .core-tree-node {
-      @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/style/themecolors";
+@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: $buic-foreground-muted;
+  margin: 0 20%;
+  text-align: center;
+}
+
+.components-controlledTree {
+  color: $buic-foreground-body;
+  background-color: $buic-background-control;
+
+  /**
+   * Workaround for horizontal scroll issue.
+   * based on https://github.com/bvaughn/react-virtualized/issues/1248
+   */
+  .ReactVirtualized__Grid,
+  .ReactWindow__VariableSizeList {
+    overflow: auto !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 $buic-foreground-primary;
+    padding-#{$edge}: 0;
+  }
+
+  .node-wrapper.is-selected {
+    .core-tree-node {
+      @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

@@ -1,26 +1,26 @@
-/** @packageDocumentation
- * @module Tree
- */
-/// <reference types="react" />
-import "./NodeContent.scss";
-import { CommonProps } from "@itwin/core-react";
-import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager";
-import { HighlightableTreeNodeProps } from "../../HighlightingEngine";
-import { TreeModelNode } from "../TreeModel";
-import { TreeNodeEditorRenderer } from "./TreeNodeEditor";
-/** Properties for [[TreeNodeContent]] component
- * @internal
- */
-export interface TreeNodeContentProps extends CommonProps {
-    node: TreeModelNode;
-    showDescription?: boolean;
-    highlightProps?: HighlightableTreeNodeProps;
-    valueRendererManager: PropertyValueRendererManager;
-    onLabelRendered?: (node: TreeModelNode) => void;
-    nodeEditorRenderer?: TreeNodeEditorRenderer;
-}
-/** React component for displaying [[TreeNode]] label
- * @internal
- */
-export declare function TreeNodeContent(props: TreeNodeContentProps): JSX.Element;
+/** @packageDocumentation
+ * @module Tree
+ */
+/// <reference types="react" />
+import "./NodeContent.scss";
+import { CommonProps } from "@itwin/core-react";
+import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager";
+import { HighlightableTreeNodeProps } from "../../HighlightingEngine";
+import { TreeModelNode } from "../TreeModel";
+import { TreeNodeEditorRenderer } from "./TreeNodeEditor";
+/** Properties for [[TreeNodeContent]] component
+ * @internal
+ */
+export interface TreeNodeContentProps extends CommonProps {
+    node: TreeModelNode;
+    showDescription?: boolean;
+    highlightProps?: HighlightableTreeNodeProps;
+    valueRendererManager: PropertyValueRendererManager;
+    onLabelRendered?: (node: TreeModelNode) => void;
+    nodeEditorRenderer?: TreeNodeEditorRenderer;
+}
+/** React component for displaying [[TreeNode]] label
+ * @internal
+ */
+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,EAAE,WAAW,EAAuB,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAuD,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AAC7I,OAAO,EAAE,0BAA0B,EAAsB,MAAM,0BAA0B,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAkB,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1E;;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,eA8C1D"}
+{"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,EAAE,WAAW,EAAuB,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAuD,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AAC7I,OAAO,EAAE,0BAA0B,EAAsB,MAAM,0BAA0B,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAkB,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1E;;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,eA4C1D"}

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

@@ -1,65 +1,64 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./NodeContent.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { TreeNodePlaceholder } from "@itwin/core-react";
-import { ItemStyleProvider } from "../../../properties/ItemStyle";
-import { PropertyContainerType } from "../../../properties/ValueRendererManager";
-import { HighlightingEngine } from "../../HighlightingEngine";
-import { TreeNodeEditor } from "./TreeNodeEditor";
-/** React component for displaying [[TreeNode]] label
- * @internal
- */
-export function TreeNodeContent(props) {
-    const { node, valueRendererManager, onLabelRendered, highlightProps } = props;
-    const label = React.useMemo(() => getLabel(node, valueRendererManager, highlightProps), [node, valueRendererManager, highlightProps]);
-    React.useEffect(() => {
-        onLabelRendered && onLabelRendered(node);
-    }, [label, node, onLabelRendered]);
-    // handle cell editing
-    let editor;
-    if (props.node.editingInfo) {
-        // if cell editing is enabled, return editor instead of the label
-        const style = getStyle(props.node.item.style, props.node.isSelected);
-        const editorProps = {
-            node: props.node,
-            onCancel: props.node.editingInfo.onCancel,
-            onCommit: props.node.editingInfo.onCommit,
-            style,
-        };
-        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);
-    const descriptionClassName = classnames("components-controlledTree-node-description", editor ? "with-editor" : undefined);
-    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)));
-}
-function getLabel(node, valueRendererManager, highlightProps) {
-    // handle filtered matches' highlighting
-    const highlightCallback = highlightProps
-        ? (text) => HighlightingEngine.renderNodeLabel(text, highlightProps)
-        : undefined;
-    // handle custom cell rendering
-    const context = {
-        containerType: PropertyContainerType.Tree,
-        style: getStyle(node.item.style, node.isSelected),
-        textHighlighter: highlightCallback,
-        defaultValue: React.createElement(TreeNodePlaceholder, { level: 0, "data-testid": "node-label-placeholder" }),
-    };
-    return valueRendererManager.render(node.item.label, context);
-}
-function getStyle(style, isSelected) {
-    return ItemStyleProvider.createStyle(style ? style : {}, isSelected);
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./NodeContent.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { TreeNodePlaceholder } from "@itwin/core-react";
+import { ItemStyleProvider } from "../../../properties/ItemStyle";
+import { PropertyContainerType } from "../../../properties/ValueRendererManager";
+import { HighlightingEngine } from "../../HighlightingEngine";
+import { TreeNodeEditor } from "./TreeNodeEditor";
+/** React component for displaying [[TreeNode]] label
+ * @internal
+ */
+export function TreeNodeContent(props) {
+    const { node, valueRendererManager, onLabelRendered, highlightProps } = props;
+    const label = React.useMemo(() => getLabel(node, valueRendererManager, highlightProps), [node, valueRendererManager, highlightProps]);
+    React.useEffect(() => {
+        onLabelRendered && onLabelRendered(node);
+    }, [label, node, onLabelRendered]);
+    // handle cell editing
+    let editor;
+    if (props.node.editingInfo) {
+        // if cell editing is enabled, return editor instead of the label
+        const style = getStyle(props.node.item.style, props.node.isSelected);
+        const editorProps = {
+            node: props.node,
+            onCancel: props.node.editingInfo.onCancel,
+            onCommit: props.node.editingInfo.onCommit,
+            style,
+        };
+        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);
+    const descriptionClassName = classnames("components-controlledTree-node-description", editor ? "with-editor" : undefined);
+    return (React.createElement("div", { className: containerClassName, style: props.style },
+        editor ? editor : label,
+        isDescriptionEnabled ?
+            React.createElement("div", { className: descriptionClassName }, props.node.item.description)
+            : undefined));
+}
+function getLabel(node, valueRendererManager, highlightProps) {
+    // handle filtered matches' highlighting
+    const highlightCallback = highlightProps
+        ? (text) => HighlightingEngine.renderNodeLabel(text, highlightProps)
+        : undefined;
+    // handle custom cell rendering
+    const context = {
+        containerType: PropertyContainerType.Tree,
+        style: getStyle(node.item.style, node.isSelected),
+        textHighlighter: highlightCallback,
+        defaultValue: React.createElement(TreeNodePlaceholder, { level: 0, "data-testid": "node-label-placeholder" }),
+    };
+    return valueRendererManager.render(node.item.label, context);
+}
+function getStyle(style, isSelected) {
+    return ItemStyleProvider.createStyle(style ? style : {}, isSelected);
+}
 //# sourceMappingURL=NodeContent.js.map

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":["/*---------------------------------------------------------------------------------------------\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 { CommonProps, TreeNodePlaceholder } from \"@itwin/core-react\";\nimport { ItemStyle, ItemStyleProvider } from \"../../../properties/ItemStyle\";\nimport { PropertyContainerType, PropertyValueRendererContext, PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport { HighlightableTreeNodeProps, HighlightingEngine } from \"../../HighlightingEngine\";\nimport { TreeModelNode } from \"../TreeModel\";\nimport { TreeNodeEditor, TreeNodeEditorRenderer } from \"./TreeNodeEditor\";\n\n/** Properties for [[TreeNodeContent]] component\n * @internal\n */\nexport interface TreeNodeContentProps extends CommonProps {\n  node: TreeModelNode;\n  showDescription?: boolean;\n  highlightProps?: HighlightableTreeNodeProps;\n  valueRendererManager: PropertyValueRendererManager;\n\n  onLabelRendered?: (node: TreeModelNode) => void;\n  nodeEditorRenderer?: TreeNodeEditorRenderer;\n}\n\n/** React component for displaying [[TreeNode]] label\n * @internal\n */\nexport function TreeNodeContent(props: TreeNodeContentProps) {\n  const { node, valueRendererManager, onLabelRendered, highlightProps } = props;\n  const label = React.useMemo(() => getLabel(node, valueRendererManager, highlightProps), [node, valueRendererManager, highlightProps]);\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 ? props.nodeEditorRenderer(editorProps) : <TreeNodeEditor {...editorProps} />;\n  }\n\n  const isDescriptionEnabled = 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  valueRendererManager: PropertyValueRendererManager,\n  highlightProps?: HighlightableTreeNodeProps): 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: <TreeNodePlaceholder level={0} data-testid={\"node-label-placeholder\"} />,\n  };\n\n  return valueRendererManager.render(node.item.label, context);\n}\n\nfunction getStyle(style?: ItemStyle, isSelected?: boolean): React.CSSProperties {\n  return ItemStyleProvider.createStyle(style ? style : {}, isSelected);\n}\n"]}
+{"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 { CommonProps, TreeNodePlaceholder } from \"@itwin/core-react\";\r\nimport { ItemStyle, ItemStyleProvider } from \"../../../properties/ItemStyle\";\r\nimport { PropertyContainerType, PropertyValueRendererContext, PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\r\nimport { HighlightableTreeNodeProps, HighlightingEngine } from \"../../HighlightingEngine\";\r\nimport { TreeModelNode } from \"../TreeModel\";\r\nimport { TreeNodeEditor, TreeNodeEditorRenderer } 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  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      {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    </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"]}

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

@@ -1,28 +1,29 @@
-/*---------------------------------------------------------------------------------------------
-* 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/style/themecolors";
-
-.components-controlledTree-node-description {
-  color: $buic-foreground-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.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+.components-controlledTree-node-description {
+  color: $buic-foreground-muted;
+  font-size: $iui-font-size-small;
+  margin-top: 4px;
+
+  &.with-editor {
+    margin: 0;
+    padding-top: 1px;
+  }
+}
+
+.components-controlledTree-node-content {
+  height: 24px;
+  line-height: $iui-font-size-small;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &.with-description {
+    height: 43px;
+  }
+}

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

@@ -1,32 +1,32 @@
-/** @packageDocumentation
- * @module Tree
- */
-import * as React from "react";
-import { TreeModelNode } from "../TreeModel";
-/**
- * Properties for [[TreeNodeEditor]] component.
- * @public
- */
-export interface TreeNodeEditorProps {
-    /** Tree node which is in editing mode. */
-    node: TreeModelNode;
-    /** Callback that is called when changes are committed. */
-    onCommit: (node: TreeModelNode, newValue: string) => void;
-    /** Callback that is called when editing is canceled. */
-    onCancel: () => void;
-    /** Editor style. */
-    style?: React.CSSProperties;
-    /** @internal */
-    ignoreEditorBlur?: boolean;
-}
-/**
- * Type for tree node editor renderer.
- * @public
- */
-export declare type TreeNodeEditorRenderer = (props: TreeNodeEditorProps) => React.ReactNode;
-/**
- * React component for displaying tree node editor.
- * @public
- */
-export declare function TreeNodeEditor(props: TreeNodeEditorProps): JSX.Element;
+/** @packageDocumentation
+ * @module Tree
+ */
+import * as React from "react";
+import { TreeModelNode } from "../TreeModel";
+/**
+ * Properties for [[TreeNodeEditor]] component.
+ * @public
+ */
+export interface TreeNodeEditorProps {
+    /** Tree node which is in editing mode. */
+    node: TreeModelNode;
+    /** Callback that is called when changes are committed. */
+    onCommit: (node: TreeModelNode, newValue: string) => void;
+    /** Callback that is called when editing is canceled. */
+    onCancel: () => void;
+    /** Editor style. */
+    style?: React.CSSProperties;
+    /** @internal */
+    ignoreEditorBlur?: boolean;
+}
+/**
+ * Type for tree node editor renderer.
+ * @public
+ */
+export declare type TreeNodeEditorRenderer = (props: TreeNodeEditorProps) => React.ReactNode;
+/**
+ * React component for displaying tree node editor.
+ * @public
+ */
+export declare function TreeNodeEditor(props: TreeNodeEditorProps): JSX.Element;
 //# sourceMappingURL=TreeNodeEditor.d.ts.map

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

@@ -1,35 +1,35 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import { PropertyRecord } from "@itwin/appui-abstract";
-import { EditorContainer } from "../../../editors/EditorContainer";
-/**
- * React component for displaying tree node editor.
- * @public
- */
-export function TreeNodeEditor(props) {
-    const onCommit = (args) => {
-        const newValue = args.newValue.value;
-        props.onCommit(props.node, newValue);
-    };
-    const propertyRecord = createPropertyRecord(props.node.item.label);
-    return (React.createElement("span", { style: props.style },
-        React.createElement(EditorContainer, { propertyRecord: propertyRecord, title: propertyRecord.description, onCommit: onCommit, onCancel: props.onCancel, ignoreEditorBlur: props.ignoreEditorBlur, setFocus: true })));
-}
-function createPropertyRecord(label) {
-    const property = {
-        name: "tree-node-editor",
-        displayLabel: "Tree Node Editor",
-        typename: label.property.typename,
-    };
-    const record = new PropertyRecord(label.value, property);
-    record.description = "";
-    record.isReadonly = false;
-    return record;
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { PropertyRecord } from "@itwin/appui-abstract";
+import { EditorContainer } from "../../../editors/EditorContainer";
+/**
+ * React component for displaying tree node editor.
+ * @public
+ */
+export function TreeNodeEditor(props) {
+    const onCommit = (args) => {
+        const newValue = args.newValue.value;
+        props.onCommit(props.node, newValue);
+    };
+    const propertyRecord = createPropertyRecord(props.node.item.label);
+    return (React.createElement("span", { style: props.style },
+        React.createElement(EditorContainer, { propertyRecord: propertyRecord, title: propertyRecord.description, onCommit: onCommit, onCancel: props.onCancel, ignoreEditorBlur: props.ignoreEditorBlur, setFocus: true })));
+}
+function createPropertyRecord(label) {
+    const property = {
+        name: "tree-node-editor",
+        displayLabel: "Tree Node Editor",
+        typename: label.property.typename,
+    };
+    const record = new PropertyRecord(label.value, property);
+    record.description = "";
+    record.isReadonly = false;
+    return record;
+}
 //# sourceMappingURL=TreeNodeEditor.js.map