@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/basic/tree/index.js

@@ -0,0 +1,528 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import clsx from "clsx";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import isArray from "lodash-es/isArray";
+import isEmpty from "lodash-es/isEmpty";
+import isEqual from "lodash-es/isEqual";
+import isObject from "lodash-es/isObject";
+import isString from "lodash-es/isString";
+import { getOrderedDataset } from "../../../utils/transformedDataset-utils";
+import Box from "@mui/material/Box";
+import TreeNodeComponent from "./Components/TreeNodeComponent";
+import {
+  processNode,
+  generateUniqueNodeId,
+  findNodeById,
+  toggleExpansionInTree,
+  isTreeNodeDisabled,
+  migrateLegacyTreeUrlState,
+  normalizeExpandedIds,
+  collectExpandedNodeIdsForUrl
+} from "./utils";
+import { useCustomTemplate } from "../../common/customTemplate";
+import { useTreePersistedState } from "./hooks/useTreePersistedState";
+const DEFAULT_CLASS = "app-tree";
+const DEFAULT_TREE_ICON_CLASS = "plus-minus";
+const persistenceEnabledFor = (statehandler) => statehandler === "URL" || statehandler === "localStorage" || statehandler === "sessionStorage";
+const WmTree = (props) => {
+  var _a, _b;
+  const {
+    dataset = "node1, node2, node3",
+    datavalue,
+    treeicons = DEFAULT_TREE_ICON_CLASS,
+    levels = 0,
+    nodelabel = "",
+    nodeicon = "",
+    nodechildren = "",
+    nodeid = "",
+    nodeaction = "",
+    nodeclick = "none",
+    tabindex = 0,
+    name = "treeview",
+    className,
+    orderby = "",
+    onExpand,
+    onCollapse,
+    onSelect,
+    onCheck,
+    horizontalalign = "left",
+    listener,
+    width,
+    height,
+    template,
+    statehandler
+  } = props;
+  const [persistedState, setPersistedState] = useTreePersistedState(name, statehandler);
+  const persistenceEnabled = persistenceEnabledFor(statehandler);
+  const isCheckboxTree = (_a = className == null ? void 0 : className.includes("Checkbox")) != null ? _a : false;
+  const isRadioTree = (_b = className == null ? void 0 : className.includes("Radio")) != null ? _b : false;
+  const [treeNodes, setTreeNodes] = useState([]);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [radioSelectedNodeId, setRadioSelectedNodeId] = useState(null);
+  const { templateName, setTemplate } = useCustomTemplate({ content: template, name });
+  const treeNodesRef = useRef([]);
+  treeNodesRef.current = treeNodes;
+  const skipNextPersistRef = useRef(false);
+  const usedNodeIds = useRef(/* @__PURE__ */ new Set());
+  const getNodesFromString = useCallback(
+    (value) => {
+      if (!value) return [];
+      return value.split(",").map((item, index) => ({
+        name: item.trim(),
+        label: item.trim(),
+        nodeId: `string_node_${index}_${item.trim()}`,
+        tId: `${name}_string_node_${index}_${item.trim()}`,
+        data: { label: item.trim() },
+        children: [],
+        open: levels > 0,
+        checked: false
+      }));
+    },
+    [levels, name]
+  );
+  const getNodes = useCallback(
+    (newVal) => {
+      usedNodeIds.current.clear();
+      const processNodeOptions = {
+        levels,
+        nodelabel,
+        nodeicon,
+        nodechildren,
+        nodeid,
+        generateUniqueNodeId: (baseId) => generateUniqueNodeId(baseId, usedNodeIds.current)
+      };
+      if (isArray(newVal)) {
+        const ordered = orderby ? getOrderedDataset(newVal, orderby) : newVal;
+        return ordered.map(
+          (item, index) => processNode(item, 0, void 0, ordered, index, name, processNodeOptions)
+        );
+      } else if (isObject(newVal) && newVal !== null) {
+        return [processNode(newVal, 0, void 0, [newVal], 0, name, processNodeOptions)];
+      } else if (isString(newVal) && !isEmpty(newVal)) {
+        return getNodesFromString(newVal.trim());
+      }
+      return [];
+    },
+    [getNodesFromString, levels, nodelabel, nodeicon, nodechildren, nodeid, name, orderby]
+  );
+  const getPath = useCallback((node) => {
+    if (!node) return "";
+    const path = [];
+    let currentNode = node;
+    while (currentNode) {
+      path.unshift(currentNode.name);
+      currentNode = currentNode.parent;
+    }
+    return `/${path.join("/")}`;
+  }, []);
+  const toggleNodeExpansion = useCallback(
+    (event, node) => {
+      var _a2, _b2, _c;
+      const ev = event != null ? event : {
+        preventDefault: () => {
+        },
+        stopPropagation: () => {
+        }
+      };
+      (_a2 = ev.stopPropagation) == null ? void 0 : _a2.call(ev);
+      const prev = treeNodesRef.current;
+      const currentTreeNode = findNodeById(prev, node.nodeId);
+      if (!currentTreeNode) return;
+      if (isTreeNodeDisabled(currentTreeNode.data)) return;
+      const updatedNodes = toggleExpansionInTree(prev, node.nodeId);
+      const after_nodeUpdate = findNodeById(updatedNodes, node.nodeId);
+      treeNodesRef.current = updatedNodes;
+      setTreeNodes(updatedNodes);
+      if (persistenceEnabled) {
+        setPersistedState((prevPersist) => {
+          const base = prevPersist && typeof prevPersist === "object" ? prevPersist : {};
+          return __spreadProps(__spreadValues({}, base), {
+            expanded: collectExpandedNodeIdsForUrl(updatedNodes)
+          });
+        });
+      }
+      if (after_nodeUpdate && ev && name) {
+        const path = getPath(after_nodeUpdate);
+        if (after_nodeUpdate.open) {
+          if (onExpand) {
+            onExpand(ev, (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name], after_nodeUpdate.data, path);
+          }
+        } else if (onCollapse) {
+          onCollapse(ev, (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name], after_nodeUpdate.data, path);
+        }
+      }
+    },
+    [getPath, name, onCollapse, onExpand, persistenceEnabled]
+  );
+  const selectNode = useCallback(
+    (event, node) => {
+      var _a2, _b2, _c;
+      if (!node) return;
+      const resolvedTreeNode = (_a2 = findNodeById(treeNodesRef.current, node.nodeId)) != null ? _a2 : node;
+      if (isTreeNodeDisabled(resolvedTreeNode.data)) return;
+      setSelectedItem(resolvedTreeNode);
+      if (persistenceEnabled && !skipNextPersistRef.current) {
+        setPersistedState((prevPersist) => {
+          const base = prevPersist && typeof prevPersist === "object" ? prevPersist : {};
+          return __spreadProps(__spreadValues({}, base), { selected: resolvedTreeNode.nodeId });
+        });
+      }
+      if (event && nodeclick === "expand" && ((_b2 = resolvedTreeNode.children) == null ? void 0 : _b2.length)) {
+        toggleNodeExpansion(event, resolvedTreeNode);
+      }
+      if (onSelect && event && name) {
+        onSelect(
+          event,
+          (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name],
+          resolvedTreeNode.data,
+          getPath(resolvedTreeNode)
+        );
+      }
+    },
+    [name, nodeclick, onSelect, toggleNodeExpansion, persistenceEnabled]
+  );
+  const handleNodeClick = useCallback(
+    (event, node) => {
+      selectNode(event, node);
+    },
+    [selectNode]
+  );
+  const toggleNodeChecked = useCallback(
+    (event, node) => {
+      var _a2;
+      event.stopPropagation();
+      const resolvedNode = (_a2 = findNodeById(treeNodesRef.current, node.nodeId)) != null ? _a2 : node;
+      if (isTreeNodeDisabled(resolvedNode.data)) return;
+      const newCheckedState = !node.checked;
+      const updateCheckedState = (nodes, nodeId, checked) => {
+        return nodes.map((node2) => {
+          var _a3, _b2;
+          if (node2.nodeId === nodeId) {
+            const updatedNode = __spreadProps(__spreadValues({}, node2), { checked });
+            if ((_a3 = node2.children) == null ? void 0 : _a3.length) {
+              updatedNode.children = updateAllChildrenChecked(node2.children, checked);
+            }
+            if (updatedNode.data) {
+              updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked });
+            }
+            return updatedNode;
+          } else if ((_b2 = node2.children) == null ? void 0 : _b2.length) {
+            const updatedChildren = updateCheckedState(node2.children, nodeId, checked);
+            const allChildrenChecked = updatedChildren.every((child) => child.checked);
+            const anyChildChecked = updatedChildren.some((child) => child.checked);
+            const updatedCheckedState = nodeId !== node2.nodeId ? checked ? allChildrenChecked : anyChildChecked ? node2.checked : false : node2.checked;
+            const updatedNode = __spreadProps(__spreadValues({}, node2), {
+              children: updatedChildren,
+              checked: updatedCheckedState
+            });
+            if (updatedNode.data) {
+              updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked: updatedCheckedState });
+            }
+            return updatedNode;
+          }
+          return node2;
+        });
+      };
+      const updateAllChildrenChecked = (nodes, checked) => {
+        return nodes.map((node2) => {
+          var _a3;
+          const updatedNode = __spreadProps(__spreadValues({}, node2), {
+            checked,
+            children: ((_a3 = node2.children) == null ? void 0 : _a3.length) ? updateAllChildrenChecked(node2.children, checked) : node2.children
+          });
+          if (updatedNode.data) {
+            updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked });
+          }
+          return updatedNode;
+        });
+      };
+      const updatedNodes = updateCheckedState(treeNodes, node.nodeId, newCheckedState);
+      setTreeNodes(updatedNodes);
+      if (onCheck) {
+        onCheck(event, void 0, node.data, newCheckedState);
+      }
+    },
+    [name, onCheck, treeNodes]
+  );
+  const handleRadioSelect = useCallback(
+    (event, node) => {
+      var _a2;
+      event.stopPropagation();
+      const resolvedNode = (_a2 = findNodeById(treeNodesRef.current, node.nodeId)) != null ? _a2 : node;
+      if (isTreeNodeDisabled(resolvedNode.data)) return;
+      if (radioSelectedNodeId === node.nodeId) {
+        return;
+      }
+      setRadioSelectedNodeId(node.nodeId);
+      const updateRadioState = (nodes, selectedNodeId) => {
+        return nodes.map((node2) => {
+          var _a3;
+          const isChecked = node2.nodeId === selectedNodeId;
+          const updatedNode = __spreadProps(__spreadValues({}, node2), {
+            checked: isChecked
+          });
+          if (updatedNode.data) {
+            updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked: isChecked });
+          }
+          if ((_a3 = node2.children) == null ? void 0 : _a3.length) {
+            updatedNode.children = updateRadioState(node2.children, selectedNodeId);
+          }
+          return updatedNode;
+        });
+      };
+      const updatedNodes = updateRadioState(treeNodes, node.nodeId);
+      setTreeNodes(updatedNodes);
+      if (onCheck) {
+        onCheck(event, void 0, node.data, true);
+      }
+    },
+    [name, onCheck, radioSelectedNodeId, treeNodes]
+  );
+  const selectById = useCallback(
+    (nodeId) => {
+      if (!nodeId) {
+        setSelectedItem(null);
+        if (persistenceEnabled) {
+          setPersistedState((prevPersist) => {
+            if (!prevPersist || typeof prevPersist !== "object") return prevPersist;
+            const _a2 = prevPersist, { selected: _s } = _a2, rest = __objRest(_a2, ["selected"]);
+            return rest;
+          });
+        }
+        return;
+      }
+      const node = findNodeById(treeNodes, nodeId);
+      if (node) {
+        if (isTreeNodeDisabled(node.data)) return;
+        skipNextPersistRef.current = true;
+        selectNode(void 0, node);
+        skipNextPersistRef.current = false;
+        let working = treeNodesRef.current;
+        if (isRadioTree) {
+          setRadioSelectedNodeId(node.nodeId);
+          const updateRadioState = (nodes, selectedNodeId) => {
+            return nodes.map((n) => {
+              var _a2;
+              const isChecked = n.nodeId === selectedNodeId;
+              const updatedNode = __spreadProps(__spreadValues({}, n), {
+                checked: isChecked
+              });
+              if (updatedNode.data) {
+                updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked: isChecked });
+              }
+              if ((_a2 = n.children) == null ? void 0 : _a2.length) {
+                updatedNode.children = updateRadioState(n.children, selectedNodeId);
+              }
+              return updatedNode;
+            });
+          };
+          working = updateRadioState(working, node.nodeId);
+        }
+        let currentNode = node.parent;
+        const nodesToExpand = [];
+        while (currentNode) {
+          nodesToExpand.push(currentNode);
+          currentNode = currentNode.parent;
+        }
+        if (nodesToExpand.length) {
+          const updateNodeOpenState = (nodes, toExpand) => {
+            return nodes.map((n) => {
+              var _a2;
+              if (toExpand.some((x) => x.nodeId === n.nodeId)) {
+                return __spreadProps(__spreadValues({}, n), {
+                  open: true,
+                  children: n.children ? updateNodeOpenState(n.children, toExpand) : void 0
+                });
+              } else if ((_a2 = n.children) == null ? void 0 : _a2.length) {
+                return __spreadProps(__spreadValues({}, n), { children: updateNodeOpenState(n.children, toExpand) });
+              }
+              return n;
+            });
+          };
+          working = updateNodeOpenState(working, nodesToExpand);
+        }
+        treeNodesRef.current = working;
+        setTreeNodes(working);
+        if (persistenceEnabled) {
+          setPersistedState((prevPersist) => {
+            const base = prevPersist && typeof prevPersist === "object" ? prevPersist : {};
+            return __spreadProps(__spreadValues({}, base), {
+              selected: node.nodeId,
+              expanded: collectExpandedNodeIdsForUrl(working)
+            });
+          });
+        }
+      }
+    },
+    [isRadioTree, selectNode, persistenceEnabled, treeNodes]
+  );
+  const deselectById = useCallback(() => {
+    setSelectedItem(null);
+    if (persistenceEnabled) {
+      setPersistedState((prevPersist) => {
+        if (!prevPersist || typeof prevPersist !== "object") return prevPersist;
+        const _a2 = prevPersist, { selected: _s } = _a2, rest = __objRest(_a2, ["selected"]);
+        return rest;
+      });
+    }
+    if (isRadioTree) {
+      setRadioSelectedNodeId(null);
+      const clearCheckedState = (nodes) => {
+        return nodes.map((node) => {
+          var _a2;
+          const updatedNode = __spreadProps(__spreadValues({}, node), {
+            checked: false,
+            children: ((_a2 = node.children) == null ? void 0 : _a2.length) ? clearCheckedState(node.children) : node.children
+          });
+          if (updatedNode.data) {
+            updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked: false });
+          }
+          return updatedNode;
+        });
+      };
+      setTreeNodes(clearCheckedState(treeNodes));
+    }
+  }, [isRadioTree, persistenceEnabled, treeNodes]);
+  const sortedTreeNodes = useMemo(() => treeNodes, [treeNodes]);
+  const urlExpansionOverlay = useMemo(() => {
+    if (!persistenceEnabled || !sortedTreeNodes.length || !persistedState) return void 0;
+    const raw = Array.isArray(persistedState.expanded) && persistedState.expanded.length > 0 ? persistedState.expanded.map(String) : migrateLegacyTreeUrlState(persistedState);
+    if (!raw.length) return void 0;
+    return normalizeExpandedIds(sortedTreeNodes, raw);
+  }, [persistenceEnabled, sortedTreeNodes, persistedState]);
+  const urlSelectedId = persistenceEnabled ? persistedState == null ? void 0 : persistedState.selected : void 0;
+  const prevDatasetRef = useRef(void 0);
+  const prevGetNodesRef = useRef(null);
+  useEffect(() => {
+    const getNodesIdentityChanged = prevGetNodesRef.current !== getNodes;
+    prevGetNodesRef.current = getNodes;
+    try {
+      const datasetUnchangedDeep = prevDatasetRef.current !== void 0 && isEqual(prevDatasetRef.current, dataset);
+      if (!getNodesIdentityChanged && datasetUnchangedDeep) {
+        return;
+      }
+      prevDatasetRef.current = dataset;
+      const parsedNodes = getNodes(dataset);
+      setTreeNodes(parsedNodes);
+    } catch (error) {
+      setTreeNodes([]);
+    }
+  }, [dataset, getNodes]);
+  useEffect(() => {
+    var _a2;
+    if (!datavalue || !sortedTreeNodes.length) return;
+    if (selectedItem) return;
+    let targetNode = null;
+    if (datavalue === "FirstNode") {
+      targetNode = sortedTreeNodes[0];
+    } else if (datavalue === "LastNode") {
+      targetNode = sortedTreeNodes[sortedTreeNodes.length - 1];
+    } else {
+      targetNode = findNodeById(sortedTreeNodes, datavalue);
+    }
+    if (targetNode && !isTreeNodeDisabled(targetNode.data)) {
+      selectNode(void 0, targetNode);
+      if ((_a2 = targetNode.children) == null ? void 0 : _a2.length) {
+        const updateNodeOpenState = (nodes, targetNodeId) => {
+          return nodes.map((node) => {
+            var _a3;
+            if (node.nodeId === targetNodeId) {
+              return __spreadProps(__spreadValues({}, node), {
+                open: true,
+                children: node.children ? updateNodeOpenState(node.children, targetNodeId) : void 0
+              });
+            } else if ((_a3 = node.children) == null ? void 0 : _a3.length) {
+              return __spreadProps(__spreadValues({}, node), { children: updateNodeOpenState(node.children, targetNodeId) });
+            }
+            return node;
+          });
+        };
+        const updatedNodes = updateNodeOpenState(treeNodes, targetNode.nodeId);
+        setTreeNodes(updatedNodes);
+      }
+    }
+  }, [datavalue, sortedTreeNodes.length, selectedItem, treeNodes, selectNode]);
+  useEffect(() => {
+    if (listener == null ? void 0 : listener.onChange) {
+      listener.onChange(name, {
+        selectById,
+        deselectById,
+        setTemplate
+      });
+    }
+  }, [name]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "ul",
+      className: clsx(DEFAULT_CLASS, className, "ztree", template && "app-tree-custom"),
+      id: name,
+      name,
+      tabIndex: tabindex,
+      style: __spreadProps(__spreadValues({}, props.styles), {
+        width,
+        height,
+        textAlign: horizontalalign
+      }),
+      hidden: props.hidden,
+      children: sortedTreeNodes.length > 0 ? sortedTreeNodes.map((node) => /* @__PURE__ */ jsx(
+        TreeNodeComponent,
+        {
+          node,
+          treeicons,
+          isCheckboxTree,
+          isRadioTree,
+          selectedItem,
+          handleNodeClick,
+          toggleNodeExpansion,
+          toggleNodeChecked,
+          handleRadioSelect,
+          treeName: name,
+          template: template || templateName,
+          listener,
+          urlExpansionOverlay,
+          urlSelectedId
+        },
+        node.nodeId
+      )) : /* @__PURE__ */ jsx("li", { className: "wm-tree-empty-message", children: "No tree data available" })
+    }
+  );
+};
+WmTree.displayName = "WmTree";
+var tree_default = withBaseWrapper(WmTree);
+export {
+  WmTree,
+  tree_default as default
+};

package/components/basic/tree/props.d.ts

@@ -0,0 +1,144 @@
+import type { MouseEvent as ReactMouseEvent } from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Represents the data associated with a tree node.
+ */
+export interface TreeNodeData {
+    name?: string;
+    label?: string;
+    icon?: string;
+    nodeId?: string;
+    id?: string;
+    data?: any;
+    checked?: boolean;
+    [key: string]: any;
+}
+/**
+ * Represents an item within the tree structure.
+ */
+export interface TreeItem {
+    name: string;
+    label: string;
+    icon?: string;
+    nodeId: string;
+    data: TreeNodeData;
+    children?: TreeItem[];
+    open?: boolean;
+    checked?: boolean;
+    parent?: TreeItem;
+    tId?: string;
+    isParent?: boolean;
+}
+/** Persisted tree widget state shape (URL / localStorage / sessionStorage via wm_state). */
+export type TreeUrlState = {
+    /** Node ids that are expanded (nested shells open). Ancestors need not be listed; they are implied. */
+    expanded?: string[];
+    /** Last selected node id (optional). */
+    selected?: string;
+    /** @deprecated Legacy shape — migrated on read */
+    id?: string;
+    open?: boolean;
+    parentNode?: string[];
+};
+/**
+ * Base props specific to the WmTree component.
+ */
+export interface TreeProps {
+    /**
+     * Custom icons for the tree nodes.
+     */
+    treeicons?: string;
+    /**
+     * The number of levels to auto-expand.
+     */
+    levels?: number;
+    /**
+     * The field in the dataset to be used as node label.
+     */
+    nodelabel?: string;
+    /**
+     * The field in the dataset to be used as node icon.
+     */
+    nodeicon?: string;
+    /**
+     * The field in the dataset representing child nodes.
+     */
+    nodechildren?: string;
+    /**
+     * The field in the dataset to be used as node ID.
+     */
+    nodeid?: string;
+    /**
+     * The action to perform on node click.
+     */
+    nodeaction?: string;
+    orderby?: string;
+    /**
+     * The click behavior for nodes: 'expand' or 'none'.
+     */
+    nodeclick?: "expand" | "none";
+    /**
+     * The horizontal alignment of the tree content.
+     */
+    horizontalalign?: string;
+    /**
+     * Action to perform when a node is expanded.
+     */
+    onExpand?: (event: React.MouseEvent, widget: any, item: any, path: string) => void;
+    /**
+     * Callback fired when a node is collapsed.
+     */
+    onCollapse?: (event: React.MouseEvent, widget: any, item: any, path: string) => void;
+    /**
+     * Callback fired when a node is selected.
+     */
+    onSelect?: (event: React.MouseEvent, widget: any, item: any, path: string) => void;
+    /**
+     * Callback fired when a node is checked/unchecked.
+     */
+    onCheck?: (event: React.MouseEvent, widget: any, item: any, checked: boolean) => void;
+    /**
+     **template**: partial name for custom node rendering .
+     */
+    template?: string;
+    /** Persist expansion/selection via `URL`, `localStorage`, or `sessionStorage` (wm_state). */
+    statehandler?: string;
+}
+/**
+ * Combined props for the WmTree component, including base WaveMaker props.
+ */
+export type WmTreeProps = Prettify<TreeProps & BaseProps>;
+/**
+ * Props for the TreeNode component.
+ */
+export interface TreeNodeComponentProps {
+    node: TreeItem;
+    treeicons: string;
+    isCheckboxTree: boolean;
+    isRadioTree: boolean;
+    selectedItem: TreeItem | null;
+    handleNodeClick: (event: React.MouseEvent | undefined, node: TreeItem) => void;
+    toggleNodeExpansion: (event: React.MouseEvent | undefined, node: TreeItem) => void;
+    toggleNodeChecked: (event: React.MouseEvent, node: TreeItem) => void;
+    handleRadioSelect: (event: React.MouseEvent, node: TreeItem) => void;
+    depth?: number;
+    treeName: string;
+    /** Partial name from {@link TreeProps.template}; replaces default row with partial UI when set */
+    template?: string;
+    /** Page / fragment listener for partial container + widget registry */
+    listener?: Record<string, unknown> | undefined;
+    /** Normalized expanded ids from URL (overlay until tree state hydrates) */
+    urlExpansionOverlay?: Set<string> | undefined;
+    /** Selected node id from URL persistence */
+    urlSelectedId?: string | undefined;
+}
+export type TreePartialNodeApi = {
+    select: () => void;
+    toggleExpand: (event?: ReactMouseEvent) => void;
+    getParentNode: () => Record<string, unknown> | null;
+    getNextNode: () => Record<string, unknown> | null;
+    getPreNode: () => Record<string, unknown> | null;
+    getPath: () => string;
+    getIndex: () => number;
+    getCheckStatus: () => number;
+} & Record<string, unknown>;