@eintrek/erp-shell 0.1.46 → 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));
             }) }) }));
 }
@@ -1389,7 +1435,13 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         : "";
     const needsLeftGutter = workspace || !(open && !isSidebarModalLayout);
     const wrap = permissionProvider ?? ((c) => c);
-    return (jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsx("button", { type: "button", "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39", className: "fixed inset-0 z-40 bg-black/50", onClick: () => setOpen(false) })), jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", style: WORKSPACE_HEADER_VARS, children: [jsx(HeaderBackground, { className: "rounded-none" }), jsxs("header", { className: "relative z-10 flex min-h-[72px] w-full items-center gap-3 px-4 py-3 text-[var(--header-fg)] sm:px-6 lg:min-h-[88px] lg:px-10", children: [jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" }), isSidebarModalLayout && mobileBrand ? (jsx("div", { className: "shrink-0", children: mobileBrand })) : null, jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsx("div", { className: "hidden min-w-0 sm:block", children: breadcrumb }), jsx("div", { id: "header-title", className: "min-w-0" })] }), headerEnd ? (jsx("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: headerEnd })) : null] })] })) : (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsx(HeaderBackground, {}), jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsx("div", { className: "flex-1 min-w-0", children: breadcrumb }), headerEnd ? (jsx("div", { className: "flex shrink-0 items-center gap-3", children: headerEnd })) : null] }), jsx("div", { id: "header-title" })] })] })), jsx(Suspense, { fallback: jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "space-y-4 text-center", children: [jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsx("div", { className: cx("relative z-10 pr-6", needsLeftGutter && "pl-6", workspace && "pt-4 sm:pr-6 lg:pt-6 lg:pr-10 lg:pl-10"), children: orgContextIsStale ? loadingComponent : wrap(children) }, `org-${contentOrgKey}`) })] }) })] }));
+    return (jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsx("button", { type: "button", "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39", className: "fixed inset-0 z-40 bg-black/50", onClick: () => setOpen(false) })), jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxs("main", { className: cx("flex flex-1 flex-col min-h-screen", workspace ? "gap-0" : "gap-4"), children: [workspace ? (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", style: WORKSPACE_HEADER_VARS, children: [jsx(HeaderBackground, { className: "rounded-none" }), jsxs("header", { className: "relative z-10 flex min-h-[72px] w-full items-center gap-3 px-[18px] py-3 text-[var(--header-fg)] sm:px-6 lg:min-h-[88px] lg:px-10", children: [isSidebarModalLayout ? (
+                                        // As in the design: the mark, then a menu button, and the
+                                        // organisation on the right — no trail, no title, so the
+                                        // organisation's name has the room it needs on a phone.
+                                        jsxs(Fragment$1, { children: [mobileBrand ? (jsx("div", { className: "shrink-0", children: mobileBrand })) : null, jsx("button", { type: "button", onClick: () => setOpen(!open), "aria-label": open ? "ปิดเมนู" : "เปิดเมนู", className: "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted)] transition-colors hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted)]", children: jsx(LayoutGrid, { className: "size-5", strokeWidth: 1.65 }) })] })) : (jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" })), jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsx("div", { className: "hidden min-w-0 sm:block", children: breadcrumb }), jsx("div", { id: "header-title", className: "min-w-0 max-sm:hidden" })] }), headerEnd ? (jsx("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: headerEnd })) : null] })] })) : (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsx(HeaderBackground, {}), jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsx("div", { className: "flex-1 min-w-0", children: breadcrumb }), headerEnd ? (jsx("div", { className: "flex shrink-0 items-center gap-3", children: headerEnd })) : null] }), jsx("div", { id: "header-title" })] })] })), jsx(Suspense, { fallback: jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "space-y-4 text-center", children: [jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsx("div", { className: workspace
+                                    ? "relative z-10 px-[18px] pt-[26px] pb-4 sm:px-6 lg:px-10 lg:pt-[38px]"
+                                    : cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: orgContextIsStale ? loadingComponent : wrap(children) }, `org-${contentOrgKey}`) })] }) })] }));
 }
 /** Local tiny classnames helper — avoids pulling clsx/tailwind-merge into
  *  the shell just for the layout file. Falsy values are skipped. */