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

package/lib/cjs/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/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-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 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/cjs/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,eA+C1D"}

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -43,6 +47,7 @@ const TreeNodeEditor_1 = require("./TreeNodeEditor");
  */
 function TreeNodeContent(props) {
     const { node, valueRendererManager, onLabelRendered, highlightProps } = props;
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
     const label = React.useMemo(() => getLabel(node, valueRendererManager, highlightProps), [node, valueRendererManager, highlightProps]);
     React.useEffect(() => {
         onLabelRendered && onLabelRendered(node);

package/lib/cjs/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  // 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"]}

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

@@ -1,28 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* 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.
+*--------------------------------------------------------------------------------------------*/
+
+.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/cjs/components-react/tree/controlled/component/TreeNodeEditor.d.ts

@@ -23,7 +23,7 @@ export interface TreeNodeEditorProps {
  * Type for tree node editor renderer.
  * @public
  */
-export declare type TreeNodeEditorRenderer = (props: TreeNodeEditorProps) => React.ReactNode;
+export type TreeNodeEditorRenderer = (props: TreeNodeEditorProps) => React.ReactNode;
 /**
  * React component for displaying tree node editor.
  * @public

package/lib/cjs/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;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C;;;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,oBAAY,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;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C;;;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"}

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/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,6CAA+B;AAC/B,0DAA4F;AAC5F,sEAAwF;AA2BxF;;;GAGG;AACH,SAAgB,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,iCAAe,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;AApBD,wCAoBC;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,+BAAc,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 { PrimitiveValue, PropertyDescription, PropertyRecord } from \"@itwin/appui-abstract\";\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\nimport { 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 = (props: TreeNodeEditorProps) => 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"]}
+{"version":3,"file":"TreeNodeEditor.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeEditor.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAC/B,0DAA4F;AAC5F,sEAAwF;AA2BxF;;;GAGG;AACH,SAAgB,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,iCAAe,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;AApBD,wCAoBC;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,+BAAc,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 { PrimitiveValue, PropertyDescription, PropertyRecord } from \"@itwin/appui-abstract\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../../../editors/EditorContainer\";\r\nimport { 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"]}

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

@@ -39,5 +39,5 @@ export interface TreeNodeRendererProps extends CommonProps {
  * Default component for rendering tree node.
  * @public
  */
-export declare const TreeNodeRenderer: React.MemoExoticComponent<(props: TreeNodeRendererProps) => JSX.Element>;
+export declare const TreeNodeRenderer: React.NamedExoticComponent<TreeNodeRendererProps>;
 //# sourceMappingURL=TreeNodeRenderer.d.ts.map

package/lib/cjs/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,EAAE,WAAW,EAAqB,oBAAoB,EAAY,MAAM,mBAAmB,CAAC;AAGnG,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAgB,aAAa,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;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,oCAAsB,qBAAqB,iBAiDtE,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,EAAE,WAAW,EAAqB,oBAAoB,EAAY,MAAM,mBAAmB,CAAC;AAGnG,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAgB,aAAa,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;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"}

package/lib/cjs/components-react/tree/controlled/component/TreeNodeRenderer.js

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -37,7 +41,7 @@ const NodeContent_1 = require("./NodeContent");
  * Default component for rendering tree node.
  * @public
  */
-exports.TreeNodeRenderer = React.memo((props) => {
+exports.TreeNodeRenderer = React.memo(function TreeNodeRenderer(props) {
     const label = (React.createElement(NodeContent_1.TreeNodeContent, { key: props.node.id, node: props.node, showDescription: props.descriptionEnabled, valueRendererManager: ValueRendererManager_1.PropertyValueRendererManager.defaultManager, highlightProps: props.nodeHighlightProps, onLabelRendered: props.onLabelRendered, nodeEditorRenderer: props.nodeEditorRenderer }));
     function onExpansionToggle() {
         if (props.node.isExpanded)

package/lib/cjs/components-react/tree/controlled/component/TreeNodeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNodeRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeRenderer.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 { CommonProps, NodeCheckboxProps, NodeCheckboxRenderer, TreeNode } from \"@itwin/core-react\";\nimport { ImageRenderer } from \"../../../common/ImageRenderer\";\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport { HighlightableTreeNodeProps } from \"../../HighlightingEngine\";\nimport { ITreeImageLoader } from \"../../ImageLoader\";\nimport { TreeComponentTestId } from \"../../TreeComponentTestId\";\nimport { TreeActions } from \"../TreeActions\";\nimport { CheckBoxInfo, TreeModelNode } from \"../TreeModel\";\nimport { TreeNodeContent } from \"./NodeContent\";\nimport { TreeNodeEditorRenderer } from \"./TreeNodeEditor\";\n\n/**\n * Properties for [[TreeNodeRenderer]].\n * @public\n */\nexport interface TreeNodeRendererProps extends CommonProps {\n  /** Tree node to render. */\n  node: TreeModelNode;\n\n  /** Action handler. */\n  treeActions: TreeActions;\n\n  /** Properties used to highlight matches when tree is filtered. */\n  nodeHighlightProps?: HighlightableTreeNodeProps;\n\n  /** Specifies whether to show descriptions or not. */\n  descriptionEnabled?: boolean;\n\n  /** Image loader for node icons. */\n  imageLoader?: ITreeImageLoader;\n\n  /** Callback to render custom checkbox. */\n  checkboxRenderer?: NodeCheckboxRenderer;\n\n  /** Callback to render custom node editor when node is in editing mode. */\n  nodeEditorRenderer?: TreeNodeEditorRenderer;\n\n  /**\n   * Callback used to detect when label is rendered. It is used by TreeRenderer for scrolling to active match.\n   * @internal\n   */\n  onLabelRendered?: (node: TreeModelNode) => void;\n\n  /** Child components to render inside the node.*/\n  children?: React.ReactNode;\n}\n\n/**\n * Default component for rendering tree node.\n * @public\n */\nexport const TreeNodeRenderer = React.memo((props: TreeNodeRendererProps) => {\n  const label = (\n    <TreeNodeContent\n      key={props.node.id}\n      node={props.node}\n      showDescription={props.descriptionEnabled}\n      valueRendererManager={PropertyValueRendererManager.defaultManager}\n      highlightProps={props.nodeHighlightProps}\n      onLabelRendered={props.onLabelRendered}\n      nodeEditorRenderer={props.nodeEditorRenderer}\n    />\n  );\n\n  function onExpansionToggle() {\n    if (props.node.isExpanded)\n      props.treeActions.onNodeCollapsed(props.node.id);\n    else\n      props.treeActions.onNodeExpanded(props.node.id);\n  }\n\n  const createCheckboxProps = (checkboxInfo: CheckBoxInfo): NodeCheckboxProps => ({\n    state: checkboxInfo.state,\n    tooltip: checkboxInfo.tooltip,\n    isDisabled: checkboxInfo.isDisabled,\n    onClick: (newState) => props.treeActions.onNodeCheckboxClicked(props.node.id, newState),\n  });\n\n  return (\n    <TreeNode\n      data-testid={TreeComponentTestId.Node}\n      className={props.className}\n      checkboxProps={props.node.checkbox.isVisible ? createCheckboxProps(props.node.checkbox) : undefined}\n      style={props.style}\n      isExpanded={props.node.isExpanded}\n      isSelected={props.node.isSelected}\n      isLoading={props.node.isLoading}\n      isLeaf={props.node.numChildren === 0}\n      icon={props.imageLoader ? <TreeNodeIcon node={props.node} imageLoader={props.imageLoader} /> : undefined}\n      label={label}\n      level={props.node.depth}\n      onClick={(event) => props.treeActions.onNodeClicked(props.node.id, event)}\n      onMouseDown={() => props.treeActions.onNodeMouseDown(props.node.id)}\n      onMouseMove={() => props.treeActions.onNodeMouseMove(props.node.id)}\n      onClickExpansionToggle={onExpansionToggle}\n      renderOverrides={{ renderCheckbox: props.checkboxRenderer }}\n    >\n      {props.children}\n    </TreeNode>\n  );\n});\n\ninterface TreeNodeIconProps {\n  node: TreeModelNode;\n  imageLoader: ITreeImageLoader;\n}\n\nfunction TreeNodeIcon(props: TreeNodeIconProps) {\n  const { imageLoader, node } = props;\n  const image = imageLoader.load(node.item);\n\n  if (!image)\n    return null;\n\n  const renderer = new ImageRenderer();\n  return <>{renderer.render(image)}</>;\n}\n"]}
+{"version":3,"file":"TreeNodeRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeNodeRenderer.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 { CommonProps, NodeCheckboxProps, NodeCheckboxRenderer, TreeNode } from \"@itwin/core-react\";\r\nimport { ImageRenderer } from \"../../../common/ImageRenderer\";\r\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\r\nimport { HighlightableTreeNodeProps } from \"../../HighlightingEngine\";\r\nimport { ITreeImageLoader } from \"../../ImageLoader\";\r\nimport { TreeComponentTestId } from \"../../TreeComponentTestId\";\r\nimport { TreeActions } from \"../TreeActions\";\r\nimport { CheckBoxInfo, TreeModelNode } from \"../TreeModel\";\r\nimport { TreeNodeContent } from \"./NodeContent\";\r\nimport { TreeNodeEditorRenderer } from \"./TreeNodeEditor\";\r\n\r\n/**\r\n * Properties for [[TreeNodeRenderer]].\r\n * @public\r\n */\r\nexport interface TreeNodeRendererProps extends CommonProps {\r\n  /** Tree node to render. */\r\n  node: TreeModelNode;\r\n\r\n  /** Action handler. */\r\n  treeActions: TreeActions;\r\n\r\n  /** Properties used to highlight matches when tree is filtered. */\r\n  nodeHighlightProps?: HighlightableTreeNodeProps;\r\n\r\n  /** Specifies whether to show descriptions or not. */\r\n  descriptionEnabled?: boolean;\r\n\r\n  /** Image loader for node icons. */\r\n  imageLoader?: ITreeImageLoader;\r\n\r\n  /** Callback to render custom checkbox. */\r\n  checkboxRenderer?: NodeCheckboxRenderer;\r\n\r\n  /** Callback to render custom node editor when node is in editing mode. */\r\n  nodeEditorRenderer?: TreeNodeEditorRenderer;\r\n\r\n  /**\r\n   * Callback used to detect when label is rendered. It is used by TreeRenderer for scrolling to active match.\r\n   * @internal\r\n   */\r\n  onLabelRendered?: (node: TreeModelNode) => void;\r\n\r\n  /** Child components to render inside the node.*/\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Default component for rendering tree node.\r\n * @public\r\n */\r\nexport const TreeNodeRenderer = React.memo(function TreeNodeRenderer(props: TreeNodeRendererProps) {\r\n  const label = (\r\n    <TreeNodeContent\r\n      key={props.node.id}\r\n      node={props.node}\r\n      showDescription={props.descriptionEnabled}\r\n      valueRendererManager={PropertyValueRendererManager.defaultManager}\r\n      highlightProps={props.nodeHighlightProps}\r\n      onLabelRendered={props.onLabelRendered}\r\n      nodeEditorRenderer={props.nodeEditorRenderer}\r\n    />\r\n  );\r\n\r\n  function onExpansionToggle() {\r\n    if (props.node.isExpanded)\r\n      props.treeActions.onNodeCollapsed(props.node.id);\r\n    else\r\n      props.treeActions.onNodeExpanded(props.node.id);\r\n  }\r\n\r\n  const createCheckboxProps = (checkboxInfo: CheckBoxInfo): NodeCheckboxProps => ({\r\n    state: checkboxInfo.state,\r\n    tooltip: checkboxInfo.tooltip,\r\n    isDisabled: checkboxInfo.isDisabled,\r\n    onClick: (newState) => props.treeActions.onNodeCheckboxClicked(props.node.id, newState),\r\n  });\r\n\r\n  return (\r\n    <TreeNode\r\n      data-testid={TreeComponentTestId.Node}\r\n      className={props.className}\r\n      checkboxProps={props.node.checkbox.isVisible ? createCheckboxProps(props.node.checkbox) : undefined}\r\n      style={props.style}\r\n      isExpanded={props.node.isExpanded}\r\n      isSelected={props.node.isSelected}\r\n      isLoading={props.node.isLoading}\r\n      isLeaf={props.node.numChildren === 0}\r\n      icon={props.imageLoader ? <TreeNodeIcon node={props.node} imageLoader={props.imageLoader} /> : undefined}\r\n      label={label}\r\n      level={props.node.depth}\r\n      onClick={(event) => props.treeActions.onNodeClicked(props.node.id, event)}\r\n      onMouseDown={() => props.treeActions.onNodeMouseDown(props.node.id)}\r\n      onMouseMove={() => props.treeActions.onNodeMouseMove(props.node.id)}\r\n      onClickExpansionToggle={onExpansionToggle}\r\n      renderOverrides={{ renderCheckbox: props.checkboxRenderer }}\r\n    >\r\n      {props.children}\r\n    </TreeNode>\r\n  );\r\n});\r\n\r\ninterface TreeNodeIconProps {\r\n  node: TreeModelNode;\r\n  imageLoader: ITreeImageLoader;\r\n}\r\n\r\nfunction TreeNodeIcon(props: TreeNodeIconProps) {\r\n  const { imageLoader, node } = props;\r\n  const image = imageLoader.load(node.item);\r\n\r\n  if (!image)\r\n    return null;\r\n\r\n  const renderer = new ImageRenderer();\r\n  return <>{renderer.render(image)}</>;\r\n}\r\n"]}

package/lib/cjs/components-react/tree/controlled/component/TreeRenderer.d.ts

@@ -10,7 +10,7 @@ import { ITreeNodeLoader } from "../TreeNodeLoader";
 import { TreeNodeRendererProps } from "./TreeNodeRenderer";
 /**
  * Data structure that describes range of rendered items in the tree.
- * @beta
+ * @public
  */
 export interface RenderedItemsRange {
     overscanStartIndex: number;
@@ -33,10 +33,7 @@ export interface TreeRendererProps {
     nodeRenderer?: (props: TreeNodeRendererProps) => React.ReactNode;
     /** Properties used to highlight nodes and scroll to active match while filtering. */
     nodeHighlightingProps?: HighlightableTreeProps;
-    /**
-     * Callback that is called when rendered items range changes.
-     * @beta
-     */
+    /** Callback that is called when rendered items range changes. */
     onItemsRendered?: (renderedItems: RenderedItemsRange) => void;
     /**
      * Callback used when an editor closes
@@ -61,7 +58,7 @@ export interface TreeRendererAttributes {
      */
     scrollToNode(nodeId: string, alignment?: Alignment): void;
 }
-declare type Alignment = "auto" | "smart" | "center" | "end" | "start";
+type Alignment = "auto" | "smart" | "center" | "end" | "start";
 /**
  * Default tree rendering component.
  * @public

package/lib/cjs/components-react/tree/controlled/component/TreeRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,sBAAsB,EAAsB,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAC6D,aAAa,EAAE,wBAAwB,EAAE,gBAAgB,EAC5H,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,eAAe,CAAC;IAE5B,sDAAsD;IACtD,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,wBAAwB,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtF,yCAAyC;IACzC,YAAY,EAAE,gBAAgB,CAAC;IAE/B,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEjE,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,sBAAsB,CAAC;IAE/C;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE9D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3D;AAED,aAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AAsC/D;;;GAGG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAE,YAAW,sBAAsB;IACpG,OAAO,CAAC,IAAI,CAA6C;IAEzD,kBAAkB;IACX,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS;IAMzC,MAAM;CAKvB"}
+{"version":3,"file":"TreeRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,sBAAsB,EAAsB,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAC6D,aAAa,EAAE,wBAAwB,EAAE,gBAAgB,EAC5H,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,eAAe,CAAC;IAE5B,sDAAsD;IACtD,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,wBAAwB,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtF,yCAAyC;IACzC,YAAY,EAAE,gBAAgB,CAAC;IAE/B,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEjE,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,sBAAsB,CAAC;IAE/C,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE9D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3D;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AAsC/D;;;GAGG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAE,YAAW,sBAAsB;IACpG,OAAO,CAAC,IAAI,CAA6C;IAEzD,kBAAkB;IACX,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS;IAMzC,MAAM;CAKvB"}

package/lib/cjs/components-react/tree/controlled/component/TreeRenderer.js

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -151,7 +155,7 @@ function getNodeKey(node) {
     return `${node.parentId || ""}-${node.childIndex}`;
 }
 const Node = React.memo(// eslint-disable-line @typescript-eslint/naming-convention
-(props) => {
+function Node(props) {
     const { index, style } = props;
     const { nodeRenderer, visibleNodes, treeActions, nodeLoader, onLabelRendered, highlightingEngine, onNodeWidthMeasured, onNodeEditorClosed, } = useTreeRendererContext(Node);
     const node = visibleNodes.getAtIndex(index);
@@ -240,7 +244,7 @@ function useScrollToActiveMatch(treeRef, highlightableTreeProps) {
         scrollToActive.current = false;
         const scrollTo = [...treeRef.current.getElementsByClassName(HighlightingEngine_1.HighlightingEngine.ACTIVE_CLASS_NAME)];
         // istanbul ignore else
-        if (scrollTo.length > 0 && scrollTo[0].scrollIntoView)
+        if (scrollTo.length > 0 && scrollTo[0].scrollIntoView !== undefined)
             scrollTo[0].scrollIntoView({ behavior: "auto", block: "nearest", inline: "end" });
     }, [highlightableTreeProps, treeRef]);
     return onLabelRendered;