@wavemaker-ai/react-runtime 1.0.0-rc.647565 → 1.0.0-rc.647582

package/actions/navigation-action.d.ts

@@ -31,5 +31,6 @@ export declare class NavigationAction extends BaseAction<NavigationActionConfig>
      * When true, we skip router.push.
      */
     private isSamePageAsCurrent;
+    private notifyAccessDenied;
     private handleGotoPage;
 }

package/actions/navigation-action.js

@@ -20,6 +20,7 @@ import { merge } from "lodash-es";
 import { getRouterInstance } from "../store/middleware/navigationMiddleware";
 import { PREVIEW_ROUTING_BASEPATH, getActiveRoutingBasePath } from "../core/constants";
 import { store } from "../store";
+import { checkAccess } from "../store/slices/authSlice";
 import {
   setPendingAccordionExpansion,
   setPendingTabSelection
@@ -57,19 +58,19 @@ class NavigationAction extends BaseAction {
     }
     params = (params == null ? void 0 : params.data) ? merge(this.config.paramProvider(), this.dataBinding, params == null ? void 0 : params.data) : merge(this.config.paramProvider(), this.dataBinding, this.dataSet);
     this.notify(VariableEvents.BEFORE_INVOKE, [this, this.dataSet]);
-    return super.invoke(params, onSuccess, onError).then(() => {
+    return super.invoke(params, onSuccess, onError).then(async () => {
       switch (config.operation) {
         case "goToPreviousPage":
           this.handleGoToPreviousPage();
           break;
         case "gotoTab":
-          this.handleGotoTab(params || {});
+          await this.handleGotoTab(params || {});
           break;
         case "gotoAccordion":
-          this.handleGotoAccordion(params || {});
+          await this.handleGotoAccordion(params || {});
           break;
         case "gotoPage":
-          this.handleGotoPage(params || {});
+          await this.handleGotoPage(params || {});
       }
     }).then(
       () => {
@@ -108,7 +109,7 @@ class NavigationAction extends BaseAction {
       }
     }
   }
-  handleGotoTab(params) {
+  async handleGotoTab(params) {
     const tabName = params == null ? void 0 : params.tabName;
     const pageName = params == null ? void 0 : params.pageName;
     if (!tabName) {
@@ -122,7 +123,7 @@ class NavigationAction extends BaseAction {
     }
     if (pageName) {
       store.dispatch(setPendingTabSelection(tabName));
-      this.handleGotoPage(params);
+      await this.handleGotoPage(params);
       return;
     }
     console.warn(
@@ -137,7 +138,7 @@ class NavigationAction extends BaseAction {
     }
     return null;
   }
-  handleGotoAccordion(params) {
+  async handleGotoAccordion(params) {
     var _a, _b, _c, _d;
     const accordionName = params == null ? void 0 : params.accordionName;
     const pageName = params == null ? void 0 : params.pageName;
@@ -145,7 +146,7 @@ class NavigationAction extends BaseAction {
       (_d = (_c = this.config._context) == null ? void 0 : _c.Widgets[accordionName]) == null ? void 0 : _d.expand();
     } else if (pageName && accordionName) {
       store.dispatch(setPendingAccordionExpansion(accordionName));
-      this.handleGotoPage(params);
+      await this.handleGotoPage(params);
     } else {
       console.warn(`Unable to expand accordion: ${accordionName}`);
     }
@@ -253,10 +254,34 @@ class NavigationAction extends BaseAction {
     }
     return true;
   }
-  handleGotoPage(params) {
+  notifyAccessDenied() {
+    var _a, _b, _c, _d;
+    const state = store.getState();
+    const isAuthenticated = (_b = (_a = state.auth) == null ? void 0 : _a.loggedInUser) == null ? void 0 : _b.isAuthenticated;
+    if (!isAuthenticated) {
+      return;
+    }
+    const context = this.config._context;
+    const message = ((_d = (_c = context == null ? void 0 : context.appLocale) == null ? void 0 : _c.LABELS) == null ? void 0 : _d.ACCESS_DENIED) || "Access Denied";
+    const notifyApp = context == null ? void 0 : context.notifyApp;
+    notifyApp == null ? void 0 : notifyApp(message, "Error");
+  }
+  async handleGotoPage(params) {
     const router = getRouterInstance();
     const pageName = params == null ? void 0 : params.pageName;
     if (pageName) {
+      try {
+        const hasAccess = await store.dispatch(checkAccess({ name: pageName, type: "PAGE" })).unwrap();
+        if (!hasAccess) {
+          clearPageNavigationPending();
+          this.notifyAccessDenied();
+          return;
+        }
+      } catch (e) {
+        clearPageNavigationPending();
+        this.notifyAccessDenied();
+        return;
+      }
       const currentPageInfo = this.getCurrentPageInfo();
       if (currentPageInfo) {
         this.rememberPageQueryParams(currentPageInfo.pageName, currentPageInfo.queryParams);

package/components/auth/RoleAuthGuard.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type RoleAuthGuardProps = {
+    children: React.ReactNode;
+};
+export default function RoleAuthGuard({ children }: RoleAuthGuardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/auth/RoleAuthGuard.js

@@ -0,0 +1,65 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { useAppSelector } from "../../store";
+import { useAuth } from "../../hooks/useAuth";
+import { getActiveRoutingBasePath } from "../../core/constants";
+import { useAppContext } from "../../context/AppContext";
+function getPageNameFromPathname(pathname) {
+  const segments = pathname.split("/").filter(Boolean);
+  const routingBase = getActiveRoutingBasePath();
+  const baseIndex = segments.indexOf(routingBase);
+  if (baseIndex >= 0) {
+    return segments[baseIndex + 1] || "Main";
+  }
+  return segments[segments.length - 1] || "Main";
+}
+function RoleAuthGuard({ children }) {
+  const pathname = usePathname();
+  const { loggedInUser } = useAuth();
+  const isSecurityEnabled = useAppSelector(
+    (state) => {
+      var _a;
+      return (_a = state.auth.securityConfig) == null ? void 0 : _a.isSecurityEnabled;
+    }
+  );
+  const pages = useAppSelector((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.info) == null ? void 0 : _a.appConfig) == null ? void 0 : _b.pages) || [];
+  });
+  const i18n = useAppSelector((state) => state.i18n);
+  const appContext = useAppContext();
+  const [hasAccess, setHasAccess] = useState(false);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (isSecurityEnabled === void 0) {
+      return;
+    }
+    if (!isSecurityEnabled) {
+      setHasAccess(true);
+      return;
+    }
+    const pageName = getPageNameFromPathname(pathname || "");
+    const userRoles = (loggedInUser == null ? void 0 : loggedInUser.roles) || [];
+    const allowedRoles = ((_a = pages.find((page) => page.name === pageName)) == null ? void 0 : _a.allowedRoles) || [];
+    if (allowedRoles.length === 0) {
+      setHasAccess(true);
+      return;
+    }
+    const pageAccess = userRoles.some((role) => allowedRoles.includes(role));
+    if (!pageAccess) {
+      appContext.notifyApp(((_c = (_b = i18n == null ? void 0 : i18n.appLocale) == null ? void 0 : _b.LABELS) == null ? void 0 : _c.ACCESS_DENIED) || "Access Denied", "Error");
+      setHasAccess(false);
+      return;
+    }
+    setHasAccess(true);
+  }, [pathname, pages, isSecurityEnabled, loggedInUser == null ? void 0 : loggedInUser.roles, appContext.notifyApp]);
+  if (!hasAccess) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  RoleAuthGuard as default
+};

package/components/basic/search/index.js

@@ -1075,7 +1075,8 @@ const Search = React.forwardRef((props, ref) => {
         "groupedData",
         "handleHeaderClick",
         "toggleAllHeaders",
-        "isDestroyed"
+        "isDestroyed",
+        "setTemplate"
       ];
       if (!invalidProps.includes(key)) {
         acc[key] = value2;

package/components/basic/search/providers.js

@@ -196,7 +196,7 @@ class DataProvider {
   init(component) {
     var _a, _b, _c;
     let datasource = component == null ? void 0 : component.datasource;
-    if (datasource) {
+    if (datasource && datasource.execute) {
       return datasource.execute(DataSource.Operation.IS_PAGEABLE) || ((_c = (_b = (_a = datasource == null ? void 0 : datasource.serviceInfo) == null ? void 0 : _a.parameters) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
     }
     return false;
@@ -224,7 +224,7 @@ class DataProvider {
       }
       return new Promise(async (resolve, reject) => {
         try {
-          const result = await dataSource.execute(DataSource.Operation.SEARCH_RECORDS, component);
+          const result = await (dataSource == null ? void 0 : dataSource.execute(DataSource.Operation.SEARCH_RECORDS, component));
           resolve((result == null ? void 0 : result.data) || []);
         } catch (err) {
           resolve([]);

package/components/basic/tree/Components/TreeNodeComponent.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TreeNodeComponentProps } from "../props";
-declare const TreeNodeComponent: React.MemoExoticComponent<({ node, treeicons, isCheckboxTree, isRadioTree, selectedItem, handleNodeClick, toggleNodeExpansion, toggleNodeChecked, handleRadioSelect, depth, treeName, template, listener, }: TreeNodeComponentProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TreeNodeComponent: React.MemoExoticComponent<({ node, treeicons, isCheckboxTree, isRadioTree, selectedItem, handleNodeClick, toggleNodeExpansion, toggleNodeChecked, handleRadioSelect, depth, treeName, template, listener, urlExpansionOverlay, urlSelectedId, }: TreeNodeComponentProps) => import("react/jsx-runtime").JSX.Element>;
 export default TreeNodeComponent;

package/components/basic/tree/Components/TreeNodeComponent.js

@@ -39,8 +39,12 @@ const TreeNodeComponent = React.memo(
     depth = 0,
     treeName,
     template,
-    listener
+    listener,
+    urlExpansionOverlay,
+    urlSelectedId
   }) => {
+    const isNodeOpen = node.open || !!(urlExpansionOverlay == null ? void 0 : urlExpansionOverlay.has(node.nodeId));
+    const isSelected = (selectedItem == null ? void 0 : selectedItem.nodeId) === node.nodeId || urlSelectedId === node.nodeId;
     const hasChildren = node.children && node.children.length > 0;
     const disabledClassName = useMemo(() => {
       return isTreeNodeDisabled(node.data) ? "wm-tree-node-disabled" : "";
@@ -79,7 +83,7 @@ const TreeNodeComponent = React.memo(
               "button",
               `level${depth}`,
               "switch",
-              depth === 0 ? node.open ? "roots_open" : "roots_close" : node.open ? "bottom_open" : "bottom_close",
+              depth === 0 ? isNodeOpen ? "roots_open" : "roots_close" : isNodeOpen ? "bottom_open" : "bottom_close",
               treeicons,
               "treenode_switch",
               disabledClassName
@@ -156,7 +160,7 @@ const TreeNodeComponent = React.memo(
             `level${depth}`,
             !template && "glyphicon",
             !template && (node.icon || "glyphicon-music"),
-            { curSelectedNode: (selectedItem == null ? void 0 : selectedItem.nodeId) === node.nodeId },
+            { curSelectedNode: isSelected },
             "treenode_a",
             disabledClassName
           ),
@@ -181,7 +185,7 @@ const TreeNodeComponent = React.memo(
     };
     const renderChildNodes = () => {
       if (!hasChildren) return null;
-      return /* @__PURE__ */ jsx(Collapse, { in: !!node.open, timeout: "auto", unmountOnExit: false, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Collapse, { in: isNodeOpen, timeout: "auto", unmountOnExit: false, children: /* @__PURE__ */ jsx(
         Box,
         {
           component: "ul",
@@ -189,7 +193,7 @@ const TreeNodeComponent = React.memo(
             `level${depth}`,
             "line",
             "wm-tree-children-list",
-            node.open ? "wm-tree-children-open" : "wm-tree-children-closed"
+            isNodeOpen ? "wm-tree-children-open" : "wm-tree-children-closed"
           ),
           id: `${node.tId}_ul`,
           children: node.children && node.children.map((childNode) => /* @__PURE__ */ jsx(
@@ -207,7 +211,9 @@ const TreeNodeComponent = React.memo(
               depth: depth + 1,
               treeName,
               template,
-              listener
+              listener,
+              urlExpansionOverlay,
+              urlSelectedId
             },
             childNode.nodeId
           ))
@@ -219,10 +225,10 @@ const TreeNodeComponent = React.memo(
       __spreadProps(__spreadValues({
         component: "li",
         className: clsx(`level${depth}`, {
-          selected: (selectedItem == null ? void 0 : selectedItem.nodeId) === node.nodeId
+          selected: isSelected
         }),
         id: node.tId,
-        tabIndex: (selectedItem == null ? void 0 : selectedItem.nodeId) === node.nodeId ? 0 : -1
+        tabIndex: isSelected ? 0 : -1
       }, { treenode: "true" }), {
         children: [
           !template && renderExpandCollapseIcon(),

package/components/basic/tree/hooks/useTreePersistedState.d.ts

@@ -0,0 +1,3 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { TreeUrlState } from "../props";
+export declare function useTreePersistedState(name: string, statehandler: string | undefined): readonly [TreeUrlState | null, Dispatch<SetStateAction<TreeUrlState | null>>];

package/components/basic/tree/hooks/useTreePersistedState.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from "react";
+import { getTreeState, saveTreeState } from "../utils";
+const storageType = (statehandler) => {
+  if (statehandler === "localStorage" || statehandler === "sessionStorage" || statehandler === "URL") {
+    return statehandler;
+  }
+  return null;
+};
+function useTreePersistedState(name, statehandler) {
+  const storage = storageType(statehandler);
+  const [persisted, setPersisted] = useState(null);
+  useEffect(() => {
+    if (!storage || typeof window === "undefined") {
+      setPersisted(null);
+      return;
+    }
+    try {
+      setPersisted(getTreeState(name, storage));
+    } catch (e) {
+      setPersisted(null);
+    }
+  }, [name, storage]);
+  const setPersistedState = useCallback(
+    (update) => {
+      if (!storage) return;
+      setPersisted((prev) => {
+        const next = typeof update === "function" ? update(prev) : update;
+        saveTreeState(name, storage, next);
+        return next;
+      });
+    },
+    [name, storage]
+  );
+  return [persisted, setPersistedState];
+}
+export {
+  useTreePersistedState
+};

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

@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
     onSelect?: (event: React.MouseEvent, widget: any, item: any, path: string) => void;
     onCheck?: (event: React.MouseEvent, widget: any, item: any, checked: boolean) => void;
     template?: string;
+    statehandler?: string;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;

package/components/basic/tree/index.js

@@ -17,6 +17,18 @@ var __spreadValues = (a, b) => {
   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";
@@ -34,11 +46,16 @@ import {
   generateUniqueNodeId,
   findNodeById,
   toggleExpansionInTree,
-  isTreeNodeDisabled
+  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 {
@@ -64,8 +81,11 @@ const WmTree = (props) => {
     listener,
     width,
     height,
-    template
+    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([]);
@@ -74,6 +94,7 @@ const WmTree = (props) => {
   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) => {
@@ -128,7 +149,7 @@ const WmTree = (props) => {
   }, []);
   const toggleNodeExpansion = useCallback(
     (event, node) => {
-      var _a2;
+      var _a2, _b2, _c;
       const ev = event != null ? event : {
         preventDefault: () => {
         },
@@ -144,34 +165,53 @@ const WmTree = (props) => {
       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, listener == null ? void 0 : listener.Widgets[name], after_nodeUpdate.data, path);
+            onExpand(ev, (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name], after_nodeUpdate.data, path);
           }
         } else if (onCollapse) {
-          onCollapse(ev, listener == null ? void 0 : listener.Widgets[name], after_nodeUpdate.data, path);
+          onCollapse(ev, (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name], after_nodeUpdate.data, path);
         }
       }
     },
-    [getPath, name, onCollapse, onExpand]
+    [getPath, name, onCollapse, onExpand, persistenceEnabled]
   );
   const selectNode = useCallback(
     (event, node) => {
-      var _a2, _b2;
+      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, listener == null ? void 0 : listener.Widgets[name], resolvedTreeNode.data, getPath(resolvedTreeNode));
+        onSelect(
+          event,
+          (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name],
+          resolvedTreeNode.data,
+          getPath(resolvedTreeNode)
+        );
       }
     },
-    [name, nodeclick, onSelect, toggleNodeExpansion]
+    [name, nodeclick, onSelect, toggleNodeExpansion, persistenceEnabled]
   );
   const handleNodeClick = useCallback(
     (event, node) => {
@@ -274,32 +314,41 @@ const WmTree = (props) => {
     (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((node2) => {
+            return nodes.map((n) => {
               var _a2;
-              const isChecked = node2.nodeId === selectedNodeId;
-              const updatedNode = __spreadProps(__spreadValues({}, node2), {
+              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 = node2.children) == null ? void 0 : _a2.length) {
-                updatedNode.children = updateRadioState(node2.children, selectedNodeId);
+              if ((_a2 = n.children) == null ? void 0 : _a2.length) {
+                updatedNode.children = updateRadioState(n.children, selectedNodeId);
               }
               return updatedNode;
             });
           };
-          const updatedNodes = updateRadioState(treeNodes, node.nodeId);
-          setTreeNodes(updatedNodes);
+          working = updateRadioState(working, node.nodeId);
         }
         let currentNode = node.parent;
         const nodesToExpand = [];
@@ -308,29 +357,46 @@ const WmTree = (props) => {
           currentNode = currentNode.parent;
         }
         if (nodesToExpand.length) {
-          const updateNodeOpenState = (nodes, nodesToExpand2) => {
-            return nodes.map((node2) => {
+          const updateNodeOpenState = (nodes, toExpand) => {
+            return nodes.map((n) => {
               var _a2;
-              if (nodesToExpand2.some((n) => n.nodeId === node2.nodeId)) {
-                return __spreadProps(__spreadValues({}, node2), {
+              if (toExpand.some((x) => x.nodeId === n.nodeId)) {
+                return __spreadProps(__spreadValues({}, n), {
                   open: true,
-                  children: node2.children ? updateNodeOpenState(node2.children, nodesToExpand2) : void 0
+                  children: n.children ? updateNodeOpenState(n.children, toExpand) : void 0
                 });
-              } else if ((_a2 = node2.children) == null ? void 0 : _a2.length) {
-                return __spreadProps(__spreadValues({}, node2), { children: updateNodeOpenState(node2.children, nodesToExpand2) });
+              } else if ((_a2 = n.children) == null ? void 0 : _a2.length) {
+                return __spreadProps(__spreadValues({}, n), { children: updateNodeOpenState(n.children, toExpand) });
               }
-              return node2;
+              return n;
             });
           };
-          const updatedNodes = updateNodeOpenState(treeNodes, nodesToExpand);
-          setTreeNodes(updatedNodes);
+          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, treeNodes]
+    [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) => {
@@ -348,8 +414,15 @@ const WmTree = (props) => {
       };
       setTreeNodes(clearCheckedState(treeNodes));
     }
-  }, [isRadioTree]);
+  }, [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(() => {
@@ -409,7 +482,7 @@ const WmTree = (props) => {
         setTemplate
       });
     }
-  }, [selectById, deselectById]);
+  }, [name]);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -438,7 +511,9 @@ const WmTree = (props) => {
           handleRadioSelect,
           treeName: name,
           template: template || templateName,
-          listener
+          listener,
+          urlExpansionOverlay,
+          urlSelectedId
         },
         node.nodeId
       )) : /* @__PURE__ */ jsx("li", { className: "wm-tree-empty-message", children: "No tree data available" })

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

@@ -29,6 +29,17 @@ export interface 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.
  */
@@ -90,6 +101,8 @@ export interface TreeProps {
      **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.
@@ -113,7 +126,11 @@ export interface TreeNodeComponentProps {
     /** 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>;
+    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;