@tker-react/layout 0.2.3 → 0.2.4

package/dist/index.d.mts

@@ -85,6 +85,8 @@ interface LayoutContextValue {
     setActivePath: (path: string, fullPath?: string) => void;
     toggleCollapse: () => void;
     setCollapsed: (collapsed: boolean) => void;
+    openKeys: Set<string>;
+    toggleMenuOpen: (path: string, forceOpen?: boolean) => void;
     setExpandedWidth: (width: string) => void;
     setCollapsedWidth: (width: string) => void;
     setLayoutMode: (mode: "side-menu" | "top-menu") => void;

package/dist/index.d.ts

@@ -85,6 +85,8 @@ interface LayoutContextValue {
     setActivePath: (path: string, fullPath?: string) => void;
     toggleCollapse: () => void;
     setCollapsed: (collapsed: boolean) => void;
+    openKeys: Set<string>;
+    toggleMenuOpen: (path: string, forceOpen?: boolean) => void;
     setExpandedWidth: (width: string) => void;
     setCollapsedWidth: (width: string) => void;
     setLayoutMode: (mode: "side-menu" | "top-menu") => void;

package/dist/index.mjs

@@ -99,10 +99,37 @@ function LayoutProvider({ children }) {
     "side-menu"
   );
   const setMenus = useCallback((data) => setMenuData(data), []);
-  const toggleCollapse = useCallback(
-    () => setCollapsedState((p) => !p),
-    []
-  );
+  const [openKeys, setOpenKeys] = useState(/* @__PURE__ */ new Set());
+  const savedOpenKeysRef = useRef(/* @__PURE__ */ new Set());
+  const openKeysRef = useRef(openKeys);
+  openKeysRef.current = openKeys;
+  const collapsedRef = useRef(collapsed);
+  collapsedRef.current = collapsed;
+  const toggleMenuOpen = useCallback((path, forceOpen) => {
+    setOpenKeys((prev) => {
+      const next = new Set(prev);
+      if (forceOpen === true) {
+        next.add(path);
+      } else if (forceOpen === false) {
+        next.delete(path);
+      } else if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+  const toggleCollapse = useCallback(() => {
+    const nextCollapsed = !collapsedRef.current;
+    if (nextCollapsed) {
+      savedOpenKeysRef.current = new Set(openKeysRef.current);
+      setOpenKeys(/* @__PURE__ */ new Set());
+    } else {
+      setOpenKeys(new Set(savedOpenKeysRef.current));
+    }
+    setCollapsedState(nextCollapsed);
+  }, []);
   const pathParamsMap = useRef(/* @__PURE__ */ new Map());
   const storePathParams = useCallback((path, fullPath) => {
     if (fullPath && fullPath !== path) {
@@ -153,7 +180,17 @@ function LayoutProvider({ children }) {
       setMenus,
       setActivePath,
       toggleCollapse,
-      setCollapsed: setCollapsedState,
+      setCollapsed: (val) => {
+        if (val) {
+          savedOpenKeysRef.current = new Set(openKeysRef.current);
+          setOpenKeys(/* @__PURE__ */ new Set());
+        } else {
+          setOpenKeys(new Set(savedOpenKeysRef.current));
+        }
+        setCollapsedState(val);
+      },
+      openKeys,
+      toggleMenuOpen,
       setExpandedWidth,
       setCollapsedWidth,
       setLayoutMode,
@@ -183,6 +220,8 @@ function LayoutProvider({ children }) {
       setMenus,
       setActivePath,
       toggleCollapse,
+      openKeys,
+      toggleMenuOpen,
       isConcretePage,
       getFullPath,
       setNavigateAdapter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tker-react/layout",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": false,
   "license": "MIT",
   "type": "module",