@itwin/components-react 4.17.1 → 5.0.0-dev.2

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

@@ -1,88 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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";
-import { TreeImageLoader } from "../../ImageLoader";
-import { TreeEventDispatcher } from "../TreeEventDispatcher";
-import { computeVisibleNodes, isTreeModelNode } from "../TreeModel";
-import { TreeNodeRenderer } from "./TreeNodeRenderer";
-import { TreeRenderer } from "./TreeRenderer";
-import { useElementsScrollStorage } from "../../../common/UseElementsScrollStorage";
-import { useTranslation } from "../../../l10n/useTranslation";
-/**
- * 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/esm/components-react/tree/controlled/component/ControlledTree.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlledTree.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/ControlledTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tree\n */\n\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { DelayedSpinner } from \"../../../common/DelayedSpinner\";\nimport type { SelectionMode } from \"../../../common/selection/SelectionModes\";\nimport type { HighlightableTreeProps } from \"../../HighlightingEngine\";\nimport { TreeImageLoader } from \"../../ImageLoader\";\nimport { TreeEventDispatcher } from \"../TreeEventDispatcher\";\nimport type { TreeEvents } from \"../TreeEvents\";\nimport type {\n  TreeModel,\n  TreeModelNode,\n  TreeModelNodePlaceholder,\n  VisibleTreeNodes,\n} from \"../TreeModel\";\nimport { computeVisibleNodes, isTreeModelNode } from \"../TreeModel\";\nimport type { ITreeNodeLoader } from \"../TreeNodeLoader\";\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer\";\nimport { TreeNodeRenderer } from \"./TreeNodeRenderer\";\nimport type { RenderedItemsRange, TreeRendererProps } from \"./TreeRenderer\";\nimport { TreeRenderer } from \"./TreeRenderer\";\nimport { useElementsScrollStorage } from \"../../../common/UseElementsScrollStorage\";\nimport { useTranslation } from \"../../../l10n/useTranslation\";\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/esm/components-react/tree/controlled/component/ControlledTree.scss

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

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

@@ -1,32 +0,0 @@
-/** @packageDocumentation
- * @module Tree
- */
-import "./NodeContent.scss";
-import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-import type { HighlightableTreeNodeProps } from "../../HighlightingEngine";
-import type { TreeModelNode } from "../TreeModel";
-import type { TreeNodeEditorRenderer } from "./TreeNodeEditor";
-/**
- * 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/esm/components-react/tree/controlled/component/NodeContent.d.ts.map

@@ -1 +0,0 @@
-{"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,0BAA0B,CAAC;AAE3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG/D;;;;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/esm/components-react/tree/controlled/component/NodeContent.js

@@ -1,70 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Tree
- */
-import "./NodeContent.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { TreeNodePlaceholder } from "@itwin/core-react";
-import { ItemStyleProvider } from "../../../properties/ItemStyle";
-import { PropertyValueRendererManager } from "../../../properties/ValueRendererManager";
-import { PropertyContainerType } from "../../../properties/ValueRendererManager";
-import { HighlightingEngine } from "../../HighlightingEngine";
-import { TreeNodeEditor } from "./TreeNodeEditor";
-/**
- * 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/esm/components-react/tree/controlled/component/NodeContent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NodeContent.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/NodeContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./NodeContent.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { TreeNodePlaceholder } from \"@itwin/core-react\";\nimport type { ItemStyle } from \"../../../properties/ItemStyle\";\nimport { ItemStyleProvider } from \"../../../properties/ItemStyle\";\nimport type { PropertyValueRendererContext } from \"../../../properties/ValueRendererManager\";\nimport { PropertyValueRendererManager } from \"../../../properties/ValueRendererManager\";\nimport { PropertyContainerType } from \"../../../properties/ValueRendererManager\";\nimport type { HighlightableTreeNodeProps } from \"../../HighlightingEngine\";\nimport { HighlightingEngine } from \"../../HighlightingEngine\";\nimport type { TreeModelNode } from \"../TreeModel\";\nimport type { TreeNodeEditorRenderer } from \"./TreeNodeEditor\";\nimport { TreeNodeEditor } from \"./TreeNodeEditor\";\n\n/**\n * Properties for [[TreeNodeContent]] component\n * @public\n * @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/esm/components-react/tree/controlled/component/NodeContent.scss

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

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

@@ -1,32 +0,0 @@
-/** @packageDocumentation
- * @module Tree
- */
-import * as React from "react";
-import type { TreeModelNode } from "../TreeModel";
-/**
- * Properties for [[TreeNodeEditor]] component.
- * @public
- */
-export interface TreeNodeEditorProps {
-    /** Tree node which is in editing mode. */
-    node: TreeModelNode;
-    /** Callback that is called when changes are committed. */
-    onCommit: (node: TreeModelNode, newValue: string) => void;
-    /** Callback that is called when editing is canceled. */
-    onCancel: () => void;
-    /** Editor style. */
-    style?: React.CSSProperties;
-    /** @internal */
-    ignoreEditorBlur?: boolean;
-}
-/**
- * Type for tree node editor renderer.
- * @public
- */
-export 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/esm/components-react/tree/controlled/component/TreeNodeEditor.d.ts.map

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

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

@@ -1,35 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Tree
- */
-import * as React from "react";
-import { PropertyRecord } from "@itwin/appui-abstract";
-import { EditorContainer } from "../../../editors/EditorContainer";
-/**
- * React component for displaying tree node editor.
- * @public
- */
-export function TreeNodeEditor(props) {
-    const onCommit = (args) => {
-        const newValue = args.newValue.value;
-        props.onCommit(props.node, newValue);
-    };
-    const propertyRecord = createPropertyRecord(props.node.item.label);
-    return (React.createElement("span", { style: props.style },
-        React.createElement(EditorContainer, { propertyRecord: propertyRecord, title: propertyRecord.description, onCommit: onCommit, onCancel: props.onCancel, ignoreEditorBlur: props.ignoreEditorBlur, setFocus: true })));
-}
-function createPropertyRecord(label) {
-    const property = {
-        name: "tree-node-editor",
-        displayLabel: "Tree Node Editor",
-        typename: label.property.typename,
-    };
-    const record = new PropertyRecord(label.value, property);
-    record.description = "";
-    record.isReadonly = false;
-    return record;
-}
-//# sourceMappingURL=TreeNodeEditor.js.map

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

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

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

@@ -1,68 +0,0 @@
-/** @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";
-import type { ITreeImageLoader } from "../../ImageLoader";
-import type { TreeActions } from "../TreeActions";
-import type { TreeModelNode } from "../TreeModel";
-import type { TreeNodeEditorRenderer } from "./TreeNodeEditor";
-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/esm/components-react/tree/controlled/component/TreeNodeRenderer.d.ts.map

@@ -1 +0,0 @@
-{"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,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,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/esm/components-react/tree/controlled/component/TreeNodeRenderer.js

@@ -1,56 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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";
-import { TreeComponentTestId } from "../../TreeComponentTestId";
-import { TreeNodeContent } from "./NodeContent";
-/**
- * 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/esm/components-react/tree/controlled/component/TreeNodeRenderer.js.map

@@ -1 +0,0 @@
-{"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\";\nimport type { HighlightableTreeNodeProps } from \"../../HighlightingEngine\";\nimport type { ITreeImageLoader } from \"../../ImageLoader\";\nimport { TreeComponentTestId } from \"../../TreeComponentTestId\";\nimport type { TreeActions } from \"../TreeActions\";\nimport type { CheckBoxInfo, TreeModelNode } from \"../TreeModel\";\nimport { TreeNodeContent } from \"./NodeContent\";\nimport type { TreeNodeEditorRenderer } from \"./TreeNodeEditor\";\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"]}