@itwin/components-react 4.17.6 → 5.0.0-dev.3

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

@@ -0,0 +1,88 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { FillCentered } from "@itwin/core-react";
+import { DelayedSpinner } from "../../../common/DelayedSpinner.js";
+import { TreeImageLoader } from "../../ImageLoader.js";
+import { TreeEventDispatcher } from "../TreeEventDispatcher.js";
+import { computeVisibleNodes, isTreeModelNode } from "../TreeModel.js";
+import { TreeNodeRenderer } from "./TreeNodeRenderer.js";
+import { TreeRenderer } from "./TreeRenderer.js";
+import { useElementsScrollStorage } from "../../../common/UseElementsScrollStorage.js";
+import { useTranslation } from "../../../l10n/useTranslation.js";
+/**
+ * React tree component which rendering is fully controlled from outside.
+ * @public
+ */
+export function ControlledTree(props) {
+    const nodeHeight = useNodeHeight(!!props.descriptionsEnabled);
+    const imageLoader = React.useMemo(() => new TreeImageLoader(), []);
+    const nodeRenderer = React.useCallback((nodeProps) => (React.createElement(TreeNodeRenderer, { ...nodeProps, descriptionEnabled: props.descriptionsEnabled, imageLoader: props.iconsEnabled ? imageLoader : undefined })), [props.descriptionsEnabled, props.iconsEnabled, imageLoader]);
+    const visibleNodesRef = React.useRef();
+    visibleNodesRef.current = React.useMemo(() => computeVisibleNodes(props.model), [props.model]);
+    const eventDispatcher = React.useMemo(() => new TreeEventDispatcher(props.eventsHandler, props.nodeLoader, props.selectionMode, () => visibleNodesRef.current), [props.eventsHandler, props.nodeLoader, props.selectionMode]);
+    const treeProps = {
+        nodeRenderer,
+        nodeHeight,
+        visibleNodes: visibleNodesRef.current,
+        treeActions: eventDispatcher,
+        nodeLoader: props.nodeLoader,
+        nodeHighlightingProps: props.nodeHighlightingProps,
+        onItemsRendered: props.onItemsRendered,
+        width: props.width,
+        height: props.height,
+    };
+    const loading = useRootNodeLoader(visibleNodesRef.current, props.nodeLoader);
+    const noData = visibleNodesRef.current.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 }))));
+}
+/**
+ * Returns callbacks for persisting and restoring [[ControlledTree]] layout state.
+ * Returned `ref` should be set on container containing ControlledTree.
+ * @public
+ */
+export function useControlledTreeLayoutStorage() {
+    return useElementsScrollStorage("ReactWindow__VariableSizeList");
+}
+function useRootNodeLoader(visibleNodes, nodeLoader) {
+    React.useEffect(() => {
+        if (visibleNodes.getNumRootNodes() === undefined) {
+            const subscription = nodeLoader
+                .loadNode(visibleNodes.getModel().getRootNode(), 0)
+                .subscribe();
+            return () => subscription.unsubscribe();
+        }
+        return () => { };
+    }, [visibleNodes, nodeLoader]);
+    return visibleNodes.getNumRootNodes() === undefined;
+}
+function Loader(props) {
+    const { translate } = useTranslation();
+    if (props.loading) {
+        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()) : (
+        // eslint-disable-next-line deprecation/deprecation
+        React.createElement(FillCentered, null,
+            React.createElement("p", { className: "components-controlledTree-errorMessage" }, translate("general.noData"))));
+    }
+    return props.children;
+}
+function useNodeHeight(descriptionsEnabled) {
+    return React.useCallback((node) => {
+        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;
+    }, [descriptionsEnabled]);
+}
+//# sourceMappingURL=ControlledTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledTree.js","sourceRoot":"","sources":["../../../../../src/components-react/tree/controlled/component/ControlledTree.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAQhE,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AA6CjE;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,SAAgC,EAAE,EAAE,CAAC,CACpC,oBAAC,gBAAgB,OACX,SAAS,EACb,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,EAC7C,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,GACzD,CACH,EACD,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,YAAY,EAAE,WAAW,CAAC,CAC7D,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;IACzD,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CACrC,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,EACtC,CAAC,KAAK,CAAC,KAAK,CAAC,CACd,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CACH,IAAI,mBAAmB,CACrB,KAAK,CAAC,aAAa,EACnB,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,aAAa,EACnB,GAAG,EAAE,CAAC,eAAe,CAAC,OAAQ,CAC/B,EACH,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,CAC7D,CAAC;IAEF,MAAM,SAAS,GAAsB;QACnC,YAAY;QACZ,UAAU;QACV,YAAY,EAAE,eAAe,CAAC,OAAO;QACrC,WAAW,EAAE,eAAe;QAC5B,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;QAClD,eAAe,EAAE,KAAK,CAAC,eAAe;QACtC,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;IAEF,MAAM,OAAO,GAAG,iBAAiB,CAAC,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC7E,MAAM,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IAC/D,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,cAAc,EAAE,KAAK,CAAC,cAAc,IAEnC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAC9B,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,OAAK,SAAS,GAAI,CAChC,CACM,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,8BAA8B;IAC5C,OAAO,wBAAwB,CAAI,+BAA+B,CAAC,CAAC;AACtE,CAAC;AAED,SAAS,iBAAiB,CACxB,YAA8B,EAC9B,UAA2B;IAE3B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,eAAe,EAAE,KAAK,SAAS,EAAE,CAAC;YACjD,MAAM,YAAY,GAAG,UAAU;iBAC5B,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;iBAClD,SAAS,EAAE,CAAC;YACf,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;QAC1C,CAAC;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/B,OAAO,YAAY,CAAC,eAAe,EAAE,KAAK,SAAS,CAAC;AACtD,CAAC;AAUD,SAAS,MAAM,CAAC,KAAkB;IAChC,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAC7B,KAAK,CAAC,eAAe,EAAE,CACxB,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAC3B,CACP,CAAC;IACJ,CAAC;IACD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAC5B,KAAK,CAAC,cAAc,EAAE,CACvB,CAAC,CAAC,CAAC;QACF,mDAAmD;QACnD,oBAAC,YAAY;YACX,2BAAG,SAAS,EAAC,wCAAwC,IAClD,SAAS,CAAC,gBAAgB,CAAC,CAC1B,CACS,CAChB,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC;AAED,SAAS,aAAa,CACpB,mBAA4B;IAE5B,OAAO,KAAK,CAAC,WAAW,CACtB,CAAC,IAA8C,EAAU,EAAE;QACzD,MAAM,aAAa,GACjB,eAAe,CAAC,IAAI,CAAC,IAAI,mBAAmB,IAAI,IAAI,IAAI,IAAI,CAAC,WAAW;YACtE,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,EAAE,CAAC;QACT,MAAM,UAAU,GAAG,CAAC,CAAC;QACrB,uFAAuF;QACvF,OAAO,aAAa,GAAG,UAAU,CAAC;IACpC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @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.js\";\nimport type { SelectionMode } from \"../../../common/selection/SelectionModes.js\";\nimport type { HighlightableTreeProps } from \"../../HighlightingEngine.js\";\nimport { TreeImageLoader } from \"../../ImageLoader.js\";\nimport { TreeEventDispatcher } from \"../TreeEventDispatcher.js\";\nimport type { TreeEvents } from \"../TreeEvents.js\";\nimport type {\n  TreeModel,\n  TreeModelNode,\n  TreeModelNodePlaceholder,\n  VisibleTreeNodes,\n} from \"../TreeModel.js\";\nimport { computeVisibleNodes, isTreeModelNode } from \"../TreeModel.js\";\nimport type { ITreeNodeLoader } from \"../TreeNodeLoader.js\";\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer.js\";\nimport { TreeNodeRenderer } from \"./TreeNodeRenderer.js\";\nimport type { RenderedItemsRange, TreeRendererProps } from \"./TreeRenderer.js\";\nimport { TreeRenderer } from \"./TreeRenderer.js\";\nimport { useElementsScrollStorage } from \"../../../common/UseElementsScrollStorage.js\";\nimport { useTranslation } from \"../../../l10n/useTranslation.js\";\n\n/**\n * Properties for [[ControlledTree]]\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\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 visibleNodesRef = React.useRef<VisibleTreeNodes>();\n  visibleNodesRef.current = React.useMemo(\n    () => computeVisibleNodes(props.model),\n    [props.model]\n  );\n\n  const eventDispatcher = React.useMemo(\n    () =>\n      new TreeEventDispatcher(\n        props.eventsHandler,\n        props.nodeLoader,\n        props.selectionMode,\n        () => visibleNodesRef.current!\n      ),\n    [props.eventsHandler, props.nodeLoader, props.selectionMode]\n  );\n\n  const treeProps: TreeRendererProps = {\n    nodeRenderer,\n    nodeHeight,\n    visibleNodes: visibleNodesRef.current,\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(visibleNodesRef.current, props.nodeLoader);\n  const noData = visibleNodesRef.current.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\n/**\n * Returns callbacks for persisting and restoring [[ControlledTree]] layout state.\n * Returned `ref` should be set on container containing ControlledTree.\n * @public\n */\nexport function useControlledTreeLayoutStorage<T extends Element>() {\n  return useElementsScrollStorage<T>(\"ReactWindow__VariableSizeList\");\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\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  const { translate } = useTranslation();\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      // eslint-disable-next-line deprecation/deprecation\n      <FillCentered>\n        <p className=\"components-controlledTree-errorMessage\">\n          {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/components-react/tree/controlled/component/ControlledTree.scss

@@ -0,0 +1,102 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
+
+.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/components-react/tree/controlled/component/NodeContent.d.ts

@@ -0,0 +1,32 @@
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./NodeContent.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+import type { HighlightableTreeNodeProps } from "../../HighlightingEngine.js";
+import type { TreeModelNode } from "../TreeModel.js";
+import type { TreeNodeEditorRenderer } from "./TreeNodeEditor.js";
+/**
+ * Properties for [[TreeNodeContent]] component
+ * @public
+ * @deprecated in 4.17.0. Use `React.ComponentProps<typeof TreeNodeContent>`
+ */
+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;
+    /** 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
+ * @public
+ */
+export declare function TreeNodeContent(props: TreeNodeContentProps): React.JSX.Element;
+//# sourceMappingURL=NodeContent.d.ts.map

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

@@ -0,0 +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;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOrD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGlE;;;;GAIG;AAEH,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;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAuD1D"}

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

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ * 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.js";
+import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager.js";
+import { PropertyContainerType } from "../../../properties/ValueRendererManager.js";
+import { HighlightingEngine } from "../../HighlightingEngine.js";
+import { TreeNodeEditor } from "./TreeNodeEditor.js";
+/**
+ * React component for displaying [[TreeNode]] label
+ * @public
+ */
+// eslint-disable-next-line deprecation/deprecation
+export function TreeNodeContent(props) {
+    const { node, onLabelRendered, highlightProps } = props;
+    const label = React.useMemo(
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    () => getLabel(node, highlightProps), [node, 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, 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: (
+        // eslint-disable-next-line deprecation/deprecation
+        React.createElement(TreeNodePlaceholder, { level: 0, "data-testid": "node-label-placeholder" })),
+    };
+    return PropertyValueRendererManager.defaultManager.render(node.item.label, context);
+}
+function getStyle(style, isSelected) {
+    return ItemStyleProvider.createStyle(style ? style : {}, isSelected);
+}
+//# sourceMappingURL=NodeContent.js.map

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

@@ -0,0 +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 type { CommonProps } from \"@itwin/core-react\";\nimport { TreeNodePlaceholder } from \"@itwin/core-react\";\nimport type { ItemStyle } from \"../../../properties/ItemStyle.js\";\nimport { ItemStyleProvider } from \"../../../properties/ItemStyle.js\";\nimport type { PropertyValueRendererContext } from \"../../../properties/ValueRendererManager.js\";\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager.js\";\nimport { PropertyContainerType } from \"../../../properties/ValueRendererManager.js\";\nimport type { HighlightableTreeNodeProps } from \"../../HighlightingEngine.js\";\nimport { HighlightingEngine } from \"../../HighlightingEngine.js\";\nimport type { TreeModelNode } from \"../TreeModel.js\";\nimport type { TreeNodeEditorRenderer } from \"./TreeNodeEditor.js\";\nimport { TreeNodeEditor } from \"./TreeNodeEditor.js\";\n\n/**\n * Properties for [[TreeNodeContent]] component\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof TreeNodeContent>`\n */\n// eslint-disable-next-line deprecation/deprecation\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 */\n// eslint-disable-next-line deprecation/deprecation\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      // eslint-disable-next-line deprecation/deprecation\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/components-react/tree/controlled/component/NodeContent.scss

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +1,32 @@
+/** @packageDocumentation
+ * @module Tree
+ */
+import * as React from "react";
+import type { TreeModelNode } from "../TreeModel.js";
+/**
+ * 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 type TreeNodeEditorRenderer = (props: TreeNodeEditorProps) => React.ReactNode;
+/**
+ * React component for displaying tree node editor.
+ * @public
+ */
+export declare function TreeNodeEditor(props: TreeNodeEditorProps): React.JSX.Element;
+//# sourceMappingURL=TreeNodeEditor.d.ts.map

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

@@ -0,0 +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;AAQ/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;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,qBAoBxD"}

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

@@ -0,0 +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.js";
+/**
+ * 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

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

@@ -0,0 +1 @@
+{"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,qCAAqC,CAAC;AA6BtE;;;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.js\";\nimport { EditorContainer } from \"../../../editors/EditorContainer.js\";\nimport type { TreeModelNode } from \"../TreeModel.js\";\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/components-react/tree/controlled/component/TreeNodeRenderer.d.ts

@@ -0,0 +1,68 @@
+/** @packageDocumentation
+ * @module Tree
+ */
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+import type { Checkbox } from "@itwin/itwinui-react";
+import type { HighlightableTreeNodeProps } from "../../HighlightingEngine.js";
+import type { ITreeImageLoader } from "../../ImageLoader.js";
+import type { TreeActions } from "../TreeActions.js";
+import type { TreeModelNode } from "../TreeModel.js";
+import type { TreeNodeEditorRenderer } from "./TreeNodeEditor.js";
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof Checkbox>;
+type CheckboxRendererProps = Omit<CheckboxProps, "onChange" | "onClick"> & {
+    onChange: (checked: boolean) => void;
+    onClick: (e: React.MouseEvent) => void;
+};
+/**
+ * Properties for [[TreeNodeRenderer]].
+ * @public
+ */
+export interface TreeNodeRendererProps extends CommonProps {
+    /** Tree node to render. */
+    node: TreeModelNode;
+    /** Action handler. */
+    treeActions: TreeActions;
+    /** Properties used to highlight matches when tree is filtered. */
+    nodeHighlightProps?: HighlightableTreeNodeProps;
+    /** Specifies whether to show descriptions or not. */
+    descriptionEnabled?: boolean;
+    /** Image loader for node icons. */
+    imageLoader?: ITreeImageLoader;
+    /** Callback to render custom checkbox. */
+    checkboxRenderer?: (props: CheckboxRendererProps) => React.ReactNode;
+    /** Callback to render custom node editor when node is in editing mode. */
+    nodeEditorRenderer?: TreeNodeEditorRenderer;
+    /**
+     * Callback used to detect when label is rendered. It is used by TreeRenderer for scrolling to active match.
+     * @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;
+}
+/**
+ * Default component for rendering tree node.
+ * @public
+ */
+export declare const TreeNodeRenderer: React.NamedExoticComponent<TreeNodeRendererProps>;
+/**
+ * Props for [[TreeNodeIcon]] component.
+ * @public
+ * @deprecated in 4.17.0. Use `React.ComponentProps<typeof TreeNodeIcon>`
+ */
+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): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=TreeNodeRenderer.d.ts.map

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

@@ -0,0 +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,MAAM,mBAAmB,CAAC;AAExE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAElE,KAAK,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,QAAQ,CAAC,CAAC;AAErE,KAAK,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IACzE,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;;GAGG;AAEH,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,CAAC,KAAK,EAAE,qBAAqB,KAAK,KAAK,CAAC,SAAS,CAAC;IAErE,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,mDAmE3B,CAAC;AAEH;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,IAAI,EAAE,aAAa,CAAC;IACpB,gDAAgD;IAChD,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED;;;GAGG;AAEH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,4BAQpD"}

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

@@ -0,0 +1,56 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { TreeNode } from "@itwin/core-react";
+import { ImageRenderer } from "../../../common/ImageRenderer.js";
+import { TreeComponentTestId } from "../../TreeComponentTestId.js";
+import { TreeNodeContent } from "./NodeContent.js";
+/**
+ * Default component for rendering tree node.
+ * @public
+ */
+export const TreeNodeRenderer = React.memo(function TreeNodeRenderer(props) {
+    const label = (React.createElement(TreeNodeContent, { key: props.node.id, node: props.node, showDescription: props.descriptionEnabled, highlightProps: props.nodeHighlightProps, onLabelRendered: props.onLabelRendered, nodeEditorRenderer: props.nodeEditorRenderer }));
+    function onExpansionToggle() {
+        if (props.node.isExpanded)
+            props.treeActions.onNodeCollapsed(props.node.id);
+        else
+            props.treeActions.onNodeExpanded(props.node.id);
+    }
+    function onContextMenu(e) {
+        e.preventDefault();
+        props.onContextMenu && props.onContextMenu(e, props.node);
+    }
+    const createCheckboxProps = (checkboxInfo
+    // eslint-disable-next-line deprecation/deprecation
+    ) => ({
+        state: checkboxInfo.state,
+        tooltip: checkboxInfo.tooltip,
+        isDisabled: checkboxInfo.isDisabled,
+        onClick: (newState) => props.treeActions.onNodeCheckboxClicked(props.node.id, newState),
+    });
+    return (
+    // eslint-disable-next-line deprecation/deprecation
+    React.createElement(TreeNode, { "data-testid": TreeComponentTestId.Node, className: props.className, checkboxProps: props.node.checkbox.isVisible
+            ? createCheckboxProps(props.node.checkbox)
+            : undefined, style: props.style, isExpanded: props.node.isExpanded, isSelected: props.node.isSelected, isLoading: props.node.isLoading, isLeaf: props.node.numChildren === 0, icon: props.imageLoader ? (React.createElement(TreeNodeIcon, { node: props.node, imageLoader: props.imageLoader })) : undefined, label: label, level: props.node.depth, onClick: (event) => props.treeActions.onNodeClicked(props.node.id, event), onMouseDown: () => props.treeActions.onNodeMouseDown(props.node.id), onMouseMove: () => props.treeActions.onNodeMouseMove(props.node.id), onClickExpansionToggle: onExpansionToggle, onContextMenu: onContextMenu, renderOverrides: { renderCheckbox: props.checkboxRenderer } }, props.children));
+});
+/**
+ * React component that renders icon for [[TreeNode]].
+ * @public
+ */
+// eslint-disable-next-line deprecation/deprecation
+export function TreeNodeIcon(props) {
+    const { imageLoader, node } = props;
+    const image = imageLoader.load(node.item);
+    if (!image)
+        return null;
+    const renderer = new ImageRenderer();
+    return React.createElement(React.Fragment, null, renderer.render(image));
+}
+//# sourceMappingURL=TreeNodeRenderer.js.map

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

@@ -0,0 +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 type { CommonProps, NodeCheckboxProps } from \"@itwin/core-react\";\nimport { TreeNode } from \"@itwin/core-react\";\nimport type { Checkbox } from \"@itwin/itwinui-react\";\nimport { ImageRenderer } from \"../../../common/ImageRenderer.js\";\nimport type { HighlightableTreeNodeProps } from \"../../HighlightingEngine.js\";\nimport type { ITreeImageLoader } from \"../../ImageLoader.js\";\nimport { TreeComponentTestId } from \"../../TreeComponentTestId.js\";\nimport type { TreeActions } from \"../TreeActions.js\";\nimport type { CheckBoxInfo, TreeModelNode } from \"../TreeModel.js\";\nimport { TreeNodeContent } from \"./NodeContent.js\";\nimport type { TreeNodeEditorRenderer } from \"./TreeNodeEditor.js\";\n\ntype CheckboxProps = React.ComponentPropsWithoutRef<typeof Checkbox>;\n\ntype CheckboxRendererProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\n  onChange: (checked: boolean) => void;\n  onClick: (e: React.MouseEvent) => void;\n};\n\n/**\n * Properties for [[TreeNodeRenderer]].\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\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?: (props: CheckboxRendererProps) => React.ReactNode;\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  /** Callback that is invoked when context menu should be opened. */\n  onContextMenu?: (e: React.MouseEvent, 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(function TreeNodeRenderer(\n  props: TreeNodeRendererProps\n) {\n  const label = (\n    <TreeNodeContent\n      key={props.node.id}\n      node={props.node}\n      showDescription={props.descriptionEnabled}\n      highlightProps={props.nodeHighlightProps}\n      onLabelRendered={props.onLabelRendered}\n      nodeEditorRenderer={props.nodeEditorRenderer}\n    />\n  );\n\n  function onExpansionToggle() {\n    if (props.node.isExpanded) props.treeActions.onNodeCollapsed(props.node.id);\n    else props.treeActions.onNodeExpanded(props.node.id);\n  }\n\n  function onContextMenu(e: React.MouseEvent) {\n    e.preventDefault();\n    props.onContextMenu && props.onContextMenu(e, props.node);\n  }\n\n  const createCheckboxProps = (\n    checkboxInfo: CheckBoxInfo\n    // eslint-disable-next-line deprecation/deprecation\n  ): NodeCheckboxProps => ({\n    state: checkboxInfo.state,\n    tooltip: checkboxInfo.tooltip,\n    isDisabled: checkboxInfo.isDisabled,\n    onClick: (newState) =>\n      props.treeActions.onNodeCheckboxClicked(props.node.id, newState),\n  });\n\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <TreeNode\n      data-testid={TreeComponentTestId.Node}\n      className={props.className}\n      checkboxProps={\n        props.node.checkbox.isVisible\n          ? createCheckboxProps(props.node.checkbox)\n          : undefined\n      }\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={\n        props.imageLoader ? (\n          <TreeNodeIcon node={props.node} imageLoader={props.imageLoader} />\n        ) : undefined\n      }\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      onContextMenu={onContextMenu}\n      renderOverrides={{ renderCheckbox: props.checkboxRenderer }}\n    >\n      {props.children}\n    </TreeNode>\n  );\n});\n\n/**\n * Props for [[TreeNodeIcon]] component.\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof TreeNodeIcon>`\n */\nexport interface TreeNodeIconProps {\n  /** Tree node to render icon for. */\n  node: TreeModelNode;\n  /** Image loader used to load tree node icon. */\n  imageLoader: ITreeImageLoader;\n}\n\n/**\n * React component that renders icon for [[TreeNode]].\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function TreeNodeIcon(props: TreeNodeIconProps) {\n  const { imageLoader, node } = props;\n  const image = imageLoader.load(node.item);\n\n  if (!image) return null;\n\n  const renderer = new ImageRenderer();\n  return <>{renderer.render(image)}</>;\n}\n"]}