@eintrek/erp-shell 0.1.47 → 0.1.48

package/dist/index.esm.js

@@ -419,44 +419,49 @@ function useSidebar() {
     }
     return context;
 }
+/**
+ * Below this width the sidebar is a drawer over the page rather than a docked
+ * column (AppLayoutShell uses the same query).
+ */
+const DRAWER_QUERY = "(max-width: 1024px)";
+const isDrawerLayout = () => typeof window !== "undefined" && window.matchMedia(DRAWER_QUERY).matches;
+/** Whether the docked sidebar was left open, as remembered in this browser. */
+function rememberedDockedOpen(fallback) {
+    if (typeof window === "undefined")
+        return fallback;
+    const saved = localStorage.getItem("sidebar-open");
+    return saved !== null ? saved === "true" : fallback;
+}
 /**
  * Sidebar Provider Component
- * Provides sidebar state management through React Context
- * Persists state to localStorage
+ * Provides sidebar state management through React Context.
+ *
+ * What is remembered (localStorage) is whether the DOCKED sidebar was open.
+ * A drawer always starts closed — a remembered desktop preference, or a
+ * drawer someone left open, is not a request to cover the page on load.
  */
 function SidebarProvider({ children, defaultOpen = true, }) {
-    // Initialize from localStorage or default
-    const [open, setOpenState] = useState(() => {
-        if (typeof window !== "undefined") {
-            const saved = localStorage.getItem("sidebar-open");
-            return saved !== null ? saved === "true" : defaultOpen;
-        }
-        return defaultOpen;
-    });
+    const [open, setOpenState] = useState(() => isDrawerLayout() ? false : rememberedDockedOpen(defaultOpen));
     const [isMobile, setIsMobile] = useState(false);
-    // Persist to localStorage
+    // Remember the docked sidebar only; opening the drawer changes nothing.
     useEffect(() => {
-        if (typeof window !== "undefined") {
+        if (typeof window !== "undefined" && !isDrawerLayout()) {
             localStorage.setItem("sidebar-open", String(open));
         }
     }, [open]);
-    // Handle mobile detection.
-    //
-    // Crossing into a narrow viewport closes the sidebar. One `open` state
-    // serves both layouts, and on desktop it is remembered as true — so
-    // narrowing the window turned that into a drawer covering the whole page,
-    // which had to be dismissed before anything underneath could be reached.
-    // A remembered desktop preference is not a request to open a drawer.
+    // Crossing into the drawer layout closes it; crossing back restores the
+    // docked sidebar as it was left.
     useEffect(() => {
-        let wasMobile = null;
-        const checkMobile = () => {
-            const nowMobile = window.innerWidth < 768;
-            setIsMobile(nowMobile);
-            if (nowMobile && wasMobile === false) {
-                setOpenState(false);
-            }
-            wasMobile = nowMobile;
+        const drawer = window.matchMedia(DRAWER_QUERY);
+        const onChange = () => {
+            setOpenState(drawer.matches ? false : rememberedDockedOpen(defaultOpen));
         };
+        drawer.addEventListener("change", onChange);
+        return () => drawer.removeEventListener("change", onChange);
+    }, [defaultOpen]);
+    // Phone width — the organisation switcher opens its menu from the bottom.
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768);
         checkMobile();
         window.addEventListener("resize", checkMobile);
         return () => window.removeEventListener("resize", checkMobile);
@@ -1076,52 +1081,88 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
             setOpen(false);
     };
     const code = orgCode ?? params?.code;
+    // Which module (and sub-item) the current page belongs to.
+    const states = items.map(item => {
+        const itemUrl = buildUrlWithCode(code, item.url);
+        // Most specific (longest) matching sub-item URL so only one link is active.
+        const activeSubItemUrl = item.subModules?.reduce((best, subItem) => {
+            const subItemUrl = buildUrlWithCode(code, subItem.url);
+            const matches = isPathActive(pathname, subItemUrl) ||
+                isPathActive(pathname, subItem.url);
+            const subPageMatches = subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
+                isPathActive(pathname, subPage.url));
+            if (!matches && !subPageMatches)
+                return best;
+            const candidateUrl = subItemUrl;
+            if (!best)
+                return candidateUrl;
+            return candidateUrl.length > best.length ? candidateUrl : best;
+        }, null) ?? null;
+        const hasActiveSubItem = !!activeSubItemUrl ||
+            !!item.subModules?.some(subItem => subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
+                isPathActive(pathname, subPage.url)));
+        // Parent only active when path matches its URL exactly AND no child
+        // is active (so parent+child don't both light up).
+        const isItemActive = (workspace ? samePage(pathname, itemUrl) : pathname === itemUrl) &&
+            !hasActiveSubItem;
+        return { itemUrl, activeSubItemUrl, hasActiveSubItem, isItemActive };
+    });
+    // A group opens when its page becomes current and otherwise stays as the
+    // user left it. defaultOpen alone decided once, on the first render — and
+    // on a direct load the sub-items arrive after permissions do, so the group
+    // holding the current page stayed shut.
+    const activeKey = items
+        .filter((_, i) => states[i].isItemActive || states[i].hasActiveSubItem)
+        .map(item => item.id)
+        .join(",");
+    const [openIds, setOpenIds] = React.useState(() => new Set(activeKey ? activeKey.split(",") : []));
+    React.useEffect(() => {
+        if (!activeKey)
+            return;
+        setOpenIds(prev => {
+            const ids = activeKey.split(",");
+            if (ids.every(id => prev.has(id)))
+                return prev;
+            const next = new Set(prev);
+            ids.forEach(id => next.add(id));
+            return next;
+        });
+    }, [activeKey]);
+    const setItemOpen = (id, open) => setOpenIds(prev => {
+        if (prev.has(id) === open)
+            return prev;
+        const next = new Set(prev);
+        if (open)
+            next.add(id);
+        else
+            next.delete(id);
+        return next;
+    });
     return (jsx(SidebarGroup, { "data-sidebar": true, className: workspace ? "p-0" : undefined, children: jsx(SidebarMenu, { className: workspace ? "gap-[3px]" : undefined, children: items.map((item, index) => {
                 const groupHeading = workspace &&
                     item.group &&
-                    item.group !== items[index - 1]?.group ? (jsx("li", { className: "list-none px-[15px] pb-2.5 text-xs text-muted-foreground" +
-                        (index > 0 ? " pt-8" : ""), children: item.group }, `group-${item.id}`)) : null;
-                const itemUrl = buildUrlWithCode(code, item.url);
-                // Most specific (longest) matching sub-item URL so only one link is active.
-                const activeSubItemUrl = item.subModules?.reduce((best, subItem) => {
-                    const subItemUrl = buildUrlWithCode(code, subItem.url);
-                    const matches = isPathActive(pathname, subItemUrl) ||
-                        isPathActive(pathname, subItem.url);
-                    const subPageMatches = subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                        isPathActive(pathname, subPage.url));
-                    if (!matches && !subPageMatches)
-                        return best;
-                    const candidateUrl = subItemUrl;
-                    if (!best)
-                        return candidateUrl;
-                    return candidateUrl.length > best.length ? candidateUrl : best;
-                }, null) ?? null;
-                const hasActiveSubItem = !!activeSubItemUrl ||
-                    !!item.subModules?.some(subItem => subItem.subPages?.some(subPage => isPathActive(pathname, buildUrlWithCode(code, subPage.url)) ||
-                        isPathActive(pathname, subPage.url)));
-                // Parent only active when path matches its URL exactly AND no child
-                // is active (so parent+child don't both light up).
-                const isItemActive = (workspace ? samePage(pathname, itemUrl) : pathname === itemUrl) &&
-                    !hasActiveSubItem;
+                    item.group !== items[index - 1]?.group ? (jsx("li", { className: "list-none px-3 pb-2.5 text-xs text-muted-foreground" +
+                        (index > 0 ? " pt-5" : ""), children: item.group }, `group-${item.id}`)) : null;
+                const { itemUrl, activeSubItemUrl, isItemActive } = states[index];
                 const IconComp = item.icon;
                 const workspaceButton = workspace
-                    ? "h-auto gap-3 rounded-[10px] px-3.5 py-[11px] text-sm " +
+                    ? "h-auto gap-3 rounded-[10px] px-3 py-2.5 text-[13px] " +
                         (isItemActive
                             ? "bg-sidebar-accent font-bold text-sidebar-accent-foreground"
                             : "font-medium text-sidebar-foreground/70")
                     : "";
                 const icon = workspace && IconComp ? (jsx(IconComp, { className: "size-[18px] shrink-0" })) : null;
                 const badge = workspace && item.badge !== undefined && item.badge !== "" ? (jsx("span", { className: "ml-auto min-w-5 rounded-[5px] bg-primary/15 px-1 text-center text-[10px] leading-5 font-bold tabular-nums text-primary", children: item.badge })) : null;
-                return (jsxs(React.Fragment, { children: [groupHeading, jsx(Collapsible, { asChild: true, defaultOpen: isItemActive || hasActiveSubItem, className: "group/collapsible", children: jsxs(SidebarMenuItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
+                return (jsxs(React.Fragment, { children: [groupHeading, jsx(Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: open => setItemOpen(item.id, open), className: "group/collapsible", children: jsxs(SidebarMenuItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsx(SidebarMenuButton, { asChild: !item.subModules || item.subModules.length === 0, isActive: isItemActive, className: "data-[state=open]:text-sidebar-accent-foreground " +
                                                 workspaceButton, children: item.subModules && item.subModules.length > 0 ? (jsxs(Fragment$1, { children: [icon, jsx("span", { id: item.id, children: item.titleTh }), jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) : (jsxs(Link, { href: itemUrl, prefetch: false, className: "flex items-center w-full min-w-0 flex-1 " +
                                                     (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, children: [icon, jsx("span", { id: item.id, className: "flex-1 truncate", title: item.titleTh, children: item.titleTh }), badge] })) }) }), item.subModules && item.subModules.length > 0 && (jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: workspace
-                                                ? "mx-0 ml-[23px] mt-1 border-l border-sidebar-border pl-2.5 [&_a]:text-[13px] [&_svg]:!size-4"
+                                                ? "mx-0 mt-1 mb-3 ml-[21px] gap-0.5 border-l border-sidebar-border pl-2.5 [&_a]:h-auto [&_a]:gap-[11px] [&_a]:px-3 [&_a]:py-2 [&_a]:text-[13px] [&_svg]:!size-[17px]"
                                                 : undefined, children: item.subModules.map(subItem => {
                                                 const subItemUrl = buildUrlWithCode(code, subItem.url);
                                                 const isSubItemActive = subItemUrl === activeSubItemUrl;
                                                 const SubIcon = subItem.icon;
                                                 const approvalCount = approvalCounts && subItem.approvalCountKey
-                                                    ? approvalCounts[subItem.approvalCountKey] ?? 0
+                                                    ? (approvalCounts[subItem.approvalCountKey] ?? 0)
                                                     : 0;
                                                 if (subItem.isCollapsible &&
                                                     subItem.subPages &&
@@ -1136,7 +1177,12 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                                                         : "text-sidebar-foreground"}`, isActive: false, children: jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubPageIcon && (jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", title: subPage.titleTh, children: subPage.titleTh })] }) }) }, subPage.id));
                                                                         }) }) })] }) }, subItem.id));
                                                 }
-                                                return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, className: "w-full", isActive: isSubItemActive, children: jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), approvalCount > 0 && (jsx(Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99 ? "99+" : approvalCount }))] }) }) }, subItem.id));
+                                                return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, className: "w-full" +
+                                                            (workspace && isSubItemActive
+                                                                ? " font-semibold"
+                                                                : ""), isActive: isSubItemActive, children: jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", title: subItem.titleTh, children: subItem.titleTh }), approvalCount > 0 && (jsx(Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
+                                                                        ? "99+"
+                                                                        : approvalCount }))] }) }) }, subItem.id));
                                             }) }) }))] }) })] }, item.id));
             }) }) }));
 }