@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/basic/tree/index.js

@@ -1,529 +1,528 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmTree = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
-var _isEmpty = _interopRequireDefault(require("lodash-es/isEmpty"));
-var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
-var _isObject = _interopRequireDefault(require("lodash-es/isObject"));
-var _isString = _interopRequireDefault(require("lodash-es/isString"));
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _TreeNodeComponent = _interopRequireDefault(require("./Components/TreeNodeComponent"));
-var _utils = require("./utils");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DEFAULT_CLASS = "app-tree";
-var DEFAULT_TREE_ICON_CLASS = "plus-minus";
-var WmTree = exports.WmTree = function WmTree(props) {
-  var _className$includes, _className$includes2;
-  var _props$dataset = props.dataset,
-    dataset = _props$dataset === void 0 ? "node1, node2, node3" : _props$dataset,
-    datavalue = props.datavalue,
-    _props$treeicons = props.treeicons,
-    treeicons = _props$treeicons === void 0 ? DEFAULT_TREE_ICON_CLASS : _props$treeicons,
-    _props$levels = props.levels,
-    levels = _props$levels === void 0 ? 0 : _props$levels,
-    _props$nodelabel = props.nodelabel,
-    nodelabel = _props$nodelabel === void 0 ? "" : _props$nodelabel,
-    _props$nodeicon = props.nodeicon,
-    nodeicon = _props$nodeicon === void 0 ? "" : _props$nodeicon,
-    _props$nodechildren = props.nodechildren,
-    nodechildren = _props$nodechildren === void 0 ? "" : _props$nodechildren,
-    _props$nodeid = props.nodeid,
-    nodeid = _props$nodeid === void 0 ? "" : _props$nodeid,
-    _props$nodeaction = props.nodeaction,
-    nodeaction = _props$nodeaction === void 0 ? "" : _props$nodeaction,
-    _props$nodeclick = props.nodeclick,
-    nodeclick = _props$nodeclick === void 0 ? "none" : _props$nodeclick,
-    _props$tabindex = props.tabindex,
-    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    _props$name = props.name,
-    name = _props$name === void 0 ? "treeview" : _props$name,
-    className = props.className,
-    _props$orderby = props.orderby,
-    orderby = _props$orderby === void 0 ? "" : _props$orderby,
-    onExpand = props.onExpand,
-    onCollapse = props.onCollapse,
-    onSelect = props.onSelect,
-    onCheck = props.onCheck,
-    _props$horizontalalig = props.horizontalalign,
-    horizontalalign = _props$horizontalalig === void 0 ? "left" : _props$horizontalalig,
-    listener = props.listener,
-    width = props.width,
-    height = props.height,
-    template = props.template;
-
-  // Combined class for both props.class and props.className
-  var isCheckboxTree = (_className$includes = className === null || className === void 0 ? void 0 : className.includes("Checkbox")) !== null && _className$includes !== void 0 ? _className$includes : false;
-  var isRadioTree = (_className$includes2 = className === null || className === void 0 ? void 0 : className.includes("Radio")) !== null && _className$includes2 !== void 0 ? _className$includes2 : false;
-
-  // Component state
-  var _useState = (0, _react.useState)([]),
-    treeNodes = _useState[0],
-    setTreeNodes = _useState[1];
-  var _useState2 = (0, _react.useState)(null),
-    selectedItem = _useState2[0],
-    setSelectedItem = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    radioSelectedNodeId = _useState3[0],
-    setRadioSelectedNodeId = _useState3[1];
-
-  /** Latest tree  stale `treeNodes` re rendering ref */
-  var treeNodesRef = (0, _react.useRef)([]);
+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;
-
-  // Unique ID generator for ensuring nodeId uniqueness
-  var usedNodeIds = (0, _react.useRef)(new Set());
-
-  // Function to get nodes from string input
-  var getNodesFromString = (0, _react.useCallback)(function (value) {
-    if (!value) return [];
-    return value.split(",").map(function (item, index) {
-      return {
+  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_".concat(index, "_").concat(item.trim()),
-        tId: "".concat(name, "_string_node_").concat(index, "_").concat(item.trim()),
-        data: {
-          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)
       };
-    });
-  }, [levels, name]);
-
-  // Get initial nodes from dataset
-  var getNodes = (0, _react.useCallback)(function (newVal) {
-    usedNodeIds.current.clear();
-    var processNodeOptions = {
-      levels: levels,
-      nodelabel: nodelabel,
-      nodeicon: nodeicon,
-      nodechildren: nodechildren,
-      nodeid: nodeid,
-      generateUniqueNodeId: function generateUniqueNodeId(baseId) {
-        return (0, _utils.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());
       }
-    };
-    if ((0, _isArray["default"])(newVal)) {
-      var ordered = orderby ? (0, _transformedDatasetUtils.getOrderedDataset)(newVal, orderby) : newVal;
-      return ordered.map(function (item, index) {
-        return (0, _utils.processNode)(item, 0, undefined, ordered, index, name, processNodeOptions);
-      });
-    } else if ((0, _isObject["default"])(newVal) && newVal !== null) {
-      return [(0, _utils.processNode)(newVal, 0, undefined, [newVal], 0, name, processNodeOptions)];
-    } else if ((0, _isString["default"])(newVal) && !(0, _isEmpty["default"])(newVal)) {
-      return getNodesFromString(newVal.trim());
-    }
-    return [];
-  }, [getNodesFromString, levels, nodelabel, nodeicon, nodechildren, nodeid, name, orderby]);
-
-  // Get path to node (for event callbacks)
-  var getPath = (0, _react.useCallback)(function (node) {
+      return [];
+    },
+    [getNodesFromString, levels, nodelabel, nodeicon, nodechildren, nodeid, name, orderby]
+  );
+  const getPath = useCallback((node) => {
     if (!node) return "";
-    var path = [];
-    var currentNode = node;
+    const path = [];
+    let currentNode = node;
     while (currentNode) {
       path.unshift(currentNode.name);
       currentNode = currentNode.parent;
     }
-    return "/".concat(path.join("/"));
+    return `/${path.join("/")}`;
   }, []);
-  var toggleNodeExpansion = (0, _react.useCallback)(function (event, node) {
-    var _ev$stopPropagation;
-    var ev = event !== null && event !== void 0 ? event : {
-      preventDefault: function preventDefault() {},
-      stopPropagation: function stopPropagation() {}
-    };
-    (_ev$stopPropagation = ev.stopPropagation) === null || _ev$stopPropagation === void 0 || _ev$stopPropagation.call(ev);
-    var prev = treeNodesRef.current;
-    var currentTreeNode = (0, _utils.findNodeById)(prev, node.nodeId);
-    if (!currentTreeNode) return;
-    if ((0, _utils.isTreeNodeDisabled)(currentTreeNode.data)) return;
-    var updatedNodes = (0, _utils.toggleExpansionInTree)(prev, node.nodeId);
-    var after_nodeUpdate = (0, _utils.findNodeById)(updatedNodes, node.nodeId);
-    treeNodesRef.current = updatedNodes;
-    setTreeNodes(updatedNodes);
-    if (after_nodeUpdate && ev && name) {
-      var path = getPath(after_nodeUpdate);
-      if (after_nodeUpdate.open) {
-        if (onExpand) {
-          onExpand(ev, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], after_nodeUpdate.data, path);
+  const toggleNodeExpansion = useCallback(
+    (event, node) => {
+      var _a2, _b2, _c;
+      const ev = event != null ? event : {
+        preventDefault: () => {
+        },
+        stopPropagation: () => {
         }
-      } else if (onCollapse) {
-        onCollapse(ev, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], after_nodeUpdate.data, path);
-      }
-    }
-  }, [getPath, name, onCollapse, onExpand]);
-
-  // Handle node selection
-  var selectNode = (0, _react.useCallback)(function (event, node) {
-    var _findNodeById, _resolvedTreeNode$chi;
-    if (!node) return;
-    var resolvedTreeNode = (_findNodeById = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById !== void 0 ? _findNodeById : node;
-    if ((0, _utils.isTreeNodeDisabled)(resolvedTreeNode.data)) return;
-    setSelectedItem(resolvedTreeNode);
-    if (event && nodeclick === "expand" && (_resolvedTreeNode$chi = resolvedTreeNode.children) !== null && _resolvedTreeNode$chi !== void 0 && _resolvedTreeNode$chi.length) {
-      toggleNodeExpansion(event, resolvedTreeNode);
-    }
-    if (onSelect && event && name) {
-      onSelect(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], resolvedTreeNode.data, getPath(resolvedTreeNode));
-    }
-  }, [name, nodeclick, onSelect, toggleNodeExpansion]);
-
-  // Handle node click (`event` undefined when invoked from partial `node.select()` / programmatic selection)
-  var handleNodeClick = (0, _react.useCallback)(function (event, node) {
-    selectNode(event, node);
-  }, [selectNode]);
-
-  // Handle checkbox toggle
-  var toggleNodeChecked = (0, _react.useCallback)(function (event, node) {
-    var _findNodeById2;
-    event.stopPropagation(); // Prevent triggering node selection
-
-    var resolvedNode = (_findNodeById2 = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById2 !== void 0 ? _findNodeById2 : node;
-    if ((0, _utils.isTreeNodeDisabled)(resolvedNode.data)) return;
-
-    // Toggle the checked state
-    var newCheckedState = !node.checked;
-
-    // Update the tree with cascading effect
-    var _updateCheckedState = function updateCheckedState(nodes, nodeId, checked) {
-      return nodes.map(function (node) {
-        var _node$children2;
-        if (node.nodeId === nodeId) {
-          var _node$children;
-          // Update this node's checked state
-          var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
-            checked: checked
+      };
+      (_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)
           });
-
-          // Update all children recursively if any
-          if ((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length) {
-            updatedNode.children = _updateAllChildrenChecked(node.children, checked);
-          }
-
-          // Also update the data object to maintain consistency
-          if (updatedNode.data) {
-            updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
-              checked: checked
-            });
+        });
+      }
+      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);
           }
-          return updatedNode;
-        } else if ((_node$children2 = node.children) !== null && _node$children2 !== void 0 && _node$children2.length) {
-          // Check if the target node is in the children
-          var updatedChildren = _updateCheckedState(node.children, nodeId, checked);
-
-          // Check if all children are checked or unchecked to update parent accordingly
-          var allChildrenChecked = updatedChildren.every(function (child) {
-            return child.checked;
-          });
-          var anyChildChecked = updatedChildren.some(function (child) {
-            return child.checked;
-          });
-          var updatedCheckedState = nodeId !== node.nodeId ? checked ? allChildrenChecked : anyChildChecked ? node.checked : false : node.checked;
-
-          // Update the data object to maintain consistency
-          var _updatedNode = _objectSpread(_objectSpread({}, node), {}, {
-            children: updatedChildren,
-            checked: updatedCheckedState
-          });
-          if (_updatedNode.data) {
-            _updatedNode.data = _objectSpread(_objectSpread({}, _updatedNode.data), {}, {
+        } 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 _updatedNode;
-        }
-        return node;
-      });
-    };
-
-    // Helper function to set all children to the same checked state
-    var _updateAllChildrenChecked = function updateAllChildrenChecked(nodes, checked) {
-      return nodes.map(function (node) {
-        var _node$children3;
-        var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
-          checked: checked,
-          children: (_node$children3 = node.children) !== null && _node$children3 !== void 0 && _node$children3.length ? _updateAllChildrenChecked(node.children, checked) : node.children
+          return node2;
         });
-
-        // Update the data object to maintain consistency
-        if (updatedNode.data) {
-          updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
-            checked: checked
+      };
+      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
           });
-        }
-        return updatedNode;
-      });
-    };
-    var updatedNodes = _updateCheckedState(treeNodes, node.nodeId, newCheckedState);
-    setTreeNodes(updatedNodes);
-    if (onCheck) {
-      onCheck(event, undefined, node.data, newCheckedState);
-    }
-  }, [name, onCheck, treeNodes]);
-
-  // Handle radio button selection
-  var handleRadioSelect = (0, _react.useCallback)(function (event, node) {
-    var _findNodeById3;
-    event.stopPropagation(); // Prevent triggering node selection
-
-    var resolvedNode = (_findNodeById3 = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById3 !== void 0 ? _findNodeById3 : node;
-    if ((0, _utils.isTreeNodeDisabled)(resolvedNode.data)) return;
-
-    // Already selected, skip
-    if (radioSelectedNodeId === node.nodeId) {
-      return;
-    }
-
-    // Set new selected radio
-    setRadioSelectedNodeId(node.nodeId);
-
-    // Update all nodes in the tree to set the correct radio state
-    var _updateRadioState = function updateRadioState(nodes, selectedNodeId) {
-      return nodes.map(function (node) {
-        var _node$children4;
-        var isChecked = node.nodeId === selectedNodeId;
-
-        // Update this node
-        var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
-          checked: isChecked
+          if (updatedNode.data) {
+            updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked });
+          }
+          return updatedNode;
         });
-
-        // Update the data object to maintain consistency
-        if (updatedNode.data) {
-          updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
+      };
+      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
           });
-        }
-
-        // Update children recursively if any
-        if ((_node$children4 = node.children) !== null && _node$children4 !== void 0 && _node$children4.length) {
-          updatedNode.children = _updateRadioState(node.children, selectedNodeId);
-        }
-        return updatedNode;
-      });
-    };
-    var updatedNodes = _updateRadioState(treeNodes, node.nodeId);
-    setTreeNodes(updatedNodes);
-    if (onCheck) {
-      onCheck(event, undefined, node.data, true);
-    }
-  }, [name, onCheck, radioSelectedNodeId, treeNodes]);
-
-  // Implement programmatic API methods
-  var selectById = (0, _react.useCallback)(function (nodeId) {
-    if (!nodeId) {
-      setSelectedItem(null);
-      return;
-    }
-    var node = (0, _utils.findNodeById)(treeNodes, nodeId);
-    if (node) {
-      if ((0, _utils.isTreeNodeDisabled)(node.data)) return;
-      selectNode(undefined, node);
-      if (isRadioTree) {
-        setRadioSelectedNodeId(node.nodeId);
-        var _updateRadioState2 = function updateRadioState(nodes, selectedNodeId) {
-          return nodes.map(function (node) {
-            var _node$children5;
-            var isChecked = node.nodeId === selectedNodeId;
-            var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
-              checked: isChecked
-            });
-            if (updatedNode.data) {
-              updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
-                checked: isChecked
-              });
-            }
-            if ((_node$children5 = node.children) !== null && _node$children5 !== void 0 && _node$children5.length) {
-              updatedNode.children = _updateRadioState2(node.children, selectedNodeId);
-            }
-            return updatedNode;
-          });
-        };
-        var updatedNodes = _updateRadioState2(treeNodes, node.nodeId);
-        setTreeNodes(updatedNodes);
+          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);
       }
-      var currentNode = node.parent;
-      var nodesToExpand = [];
-      while (currentNode) {
-        nodesToExpand.push(currentNode);
-        currentNode = currentNode.parent;
+    },
+    [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;
       }
-      if (nodesToExpand.length) {
-        var _updateNodeOpenState = function updateNodeOpenState(nodes, nodesToExpand) {
-          return nodes.map(function (node) {
-            var _node$children6;
-            if (nodesToExpand.some(function (n) {
-              return n.nodeId === node.nodeId;
-            })) {
-              return _objectSpread(_objectSpread({}, node), {}, {
-                open: true,
-                children: node.children ? _updateNodeOpenState(node.children, nodesToExpand) : undefined
-              });
-            } else if ((_node$children6 = node.children) !== null && _node$children6 !== void 0 && _node$children6.length) {
-              return _objectSpread(_objectSpread({}, node), {}, {
-                children: _updateNodeOpenState(node.children, nodesToExpand)
+      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
               });
-            }
-            return node;
+              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)
+            });
           });
-        };
-        var _updatedNodes = _updateNodeOpenState(treeNodes, nodesToExpand);
-        setTreeNodes(_updatedNodes);
+        }
       }
-    }
-  }, [isRadioTree, selectNode, treeNodes]);
-  var deselectById = (0, _react.useCallback)(function () {
+    },
+    [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);
-      var _clearCheckedState = function clearCheckedState(nodes) {
-        return nodes.map(function (node) {
-          var _node$children7;
-          var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+      const clearCheckedState = (nodes) => {
+        return nodes.map((node) => {
+          var _a2;
+          const updatedNode = __spreadProps(__spreadValues({}, node), {
             checked: false,
-            children: (_node$children7 = node.children) !== null && _node$children7 !== void 0 && _node$children7.length ? _clearCheckedState(node.children) : node.children
+            children: ((_a2 = node.children) == null ? void 0 : _a2.length) ? clearCheckedState(node.children) : node.children
           });
           if (updatedNode.data) {
-            updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
-              checked: false
-            });
+            updatedNode.data = __spreadProps(__spreadValues({}, updatedNode.data), { checked: false });
           }
           return updatedNode;
         });
       };
-      setTreeNodes(_clearCheckedState(treeNodes));
+      setTreeNodes(clearCheckedState(treeNodes));
     }
-  }, [isRadioTree]);
-  var sortedTreeNodes = (0, _react.useMemo)(function () {
-    return treeNodes;
-  }, [treeNodes]);
-
-  /** Parents often pass a new array reference each render (`dataset={[...]}`); only re-parse when data or shape config actually changes. */
-  var prevDatasetRef = (0, _react.useRef)(undefined);
-  var prevGetNodesRef = (0, _react.useRef)(null);
-
-  // Process dataset when it changes
-  (0, _react.useEffect)(function () {
-    var getNodesIdentityChanged = prevGetNodesRef.current !== getNodes;
+  }, [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 {
-      var datasetUnchangedDeep = prevDatasetRef.current !== undefined && (0, _isEqual["default"])(prevDatasetRef.current, dataset);
+      const datasetUnchangedDeep = prevDatasetRef.current !== void 0 && isEqual(prevDatasetRef.current, dataset);
       if (!getNodesIdentityChanged && datasetUnchangedDeep) {
         return;
       }
       prevDatasetRef.current = dataset;
-      var parsedNodes = getNodes(dataset);
+      const parsedNodes = getNodes(dataset);
       setTreeNodes(parsedNodes);
     } catch (error) {
       setTreeNodes([]);
     }
   }, [dataset, getNodes]);
-
-  // Handle datavalue changes - following Angular's approach
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
+    var _a2;
     if (!datavalue || !sortedTreeNodes.length) return;
     if (selectedItem) return;
-    var targetNode = null;
+    let targetNode = null;
     if (datavalue === "FirstNode") {
       targetNode = sortedTreeNodes[0];
     } else if (datavalue === "LastNode") {
       targetNode = sortedTreeNodes[sortedTreeNodes.length - 1];
     } else {
-      targetNode = (0, _utils.findNodeById)(sortedTreeNodes, datavalue);
+      targetNode = findNodeById(sortedTreeNodes, datavalue);
     }
-    if (targetNode && !(0, _utils.isTreeNodeDisabled)(targetNode.data)) {
-      var _targetNode$children;
-      selectNode(undefined, targetNode);
-      if ((_targetNode$children = targetNode.children) !== null && _targetNode$children !== void 0 && _targetNode$children.length) {
-        var _updateNodeOpenState2 = function updateNodeOpenState(nodes, targetNodeId) {
-          return nodes.map(function (node) {
-            var _node$children8;
+    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 _objectSpread(_objectSpread({}, node), {}, {
+              return __spreadProps(__spreadValues({}, node), {
                 open: true,
-                children: node.children ? _updateNodeOpenState2(node.children, targetNodeId) : undefined
-              });
-            } else if ((_node$children8 = node.children) !== null && _node$children8 !== void 0 && _node$children8.length) {
-              return _objectSpread(_objectSpread({}, node), {}, {
-                children: _updateNodeOpenState2(node.children, targetNodeId)
+                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;
           });
         };
-        var updatedNodes = _updateNodeOpenState2(treeNodes, targetNode.nodeId);
+        const updatedNodes = updateNodeOpenState(treeNodes, targetNode.nodeId);
         setTreeNodes(updatedNodes);
       }
     }
-  }, [datavalue, sortedTreeNodes.length, selectedItem, treeNodes, selectNode]); // Added selectNode to dependencies
-
-  //Handled methods
-  (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange) {
+  }, [datavalue, sortedTreeNodes.length, selectedItem, treeNodes, selectNode]);
+  useEffect(() => {
+    if (listener == null ? void 0 : listener.onChange) {
       listener.onChange(name, {
-        selectById: selectById,
-        deselectById: deselectById
+        selectById,
+        deselectById,
+        setTemplate
       });
     }
-  }, [selectById, deselectById]);
-  return __jsx(_Box["default"], {
-    component: "ul",
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "ztree", template && "app-tree-custom"),
-    id: name,
-    name: name,
-    tabIndex: tabindex,
-    style: _objectSpread(_objectSpread({}, props.styles), {}, {
-      width: width,
-      height: height,
-      textAlign: horizontalalign
-    }),
-    hidden: props.hidden
-  }, sortedTreeNodes.length > 0 ? sortedTreeNodes.map(function (node) {
-    return __jsx(_TreeNodeComponent["default"], {
-      key: node.nodeId,
-      node: node,
-      treeicons: treeicons,
-      isCheckboxTree: isCheckboxTree,
-      isRadioTree: isRadioTree,
-      selectedItem: selectedItem,
-      handleNodeClick: handleNodeClick,
-      toggleNodeExpansion: toggleNodeExpansion,
-      toggleNodeChecked: toggleNodeChecked,
-      handleRadioSelect: handleRadioSelect,
-      treeName: name,
-      template: template || undefined,
-      listener: listener
-    });
-  }) : __jsx("li", {
-    className: "wm-tree-empty-message"
-  }, "No tree data available"));
+  }, [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";
-
-/**
- * The WmTree component is used to display hierarchical data in a tree structure.
- * It supports node selection, expansion/collapse, and checkbox/radio modes.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-tree--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-tree--docs)
- *
- * @param props - {@link WmTreeProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmTree);
+var tree_default = withBaseWrapper(WmTree);
+export {
+  WmTree,
+  tree_default as default
+};