@mieweb/ui 0.10.0-dev.3 → 0.10.0-dev.4

package/dist/index.cjs

@@ -40688,86 +40688,149 @@ function SidebarNavGroup({
   children,
   defaultExpanded = false,
   groupId,
-  className
+  className,
+  forceMount
 }) {
   const { isCollapsed, isMobileViewport, expandedGroup, toggleGroup } = useSidebar();
   const showCollapsed = !isMobileViewport && isCollapsed;
+  const prefersReducedMotion = chunk6HFFWEM3_cjs.usePrefersReducedMotion();
+  const contentId = React13.useId();
+  const groupRef = React13.useRef(null);
+  const triggerRef = React13.useRef(null);
   const isExpanded = groupId ? expandedGroup === groupId : defaultExpanded;
   const [localExpanded, setLocalExpanded] = React13.useState(defaultExpanded);
   const effectiveExpanded = groupId ? isExpanded : localExpanded;
+  const itemsVisible = !showCollapsed && effectiveExpanded;
+  const focusWasInsideRef = React13.useRef(false);
+  const captureFocusInside = React13.useCallback(() => {
+    const active = document.activeElement;
+    focusWasInsideRef.current = active !== triggerRef.current && groupRef.current?.contains(active) === true;
+  }, []);
+  React13.useEffect(() => {
+    if (!itemsVisible) return;
+    function trackFocus(event) {
+      const target = event.target;
+      focusWasInsideRef.current = target !== triggerRef.current && groupRef.current?.contains(target) === true;
+    }
+    document.addEventListener("focusin", trackFocus);
+    return () => document.removeEventListener("focusin", trackFocus);
+  }, [itemsVisible]);
+  React13.useEffect(() => {
+    if (itemsVisible) return;
+    if (focusWasInsideRef.current) {
+      focusWasInsideRef.current = false;
+      triggerRef.current?.focus();
+    }
+  }, [itemsVisible]);
   const handleToggle = React13.useCallback(() => {
+    captureFocusInside();
     if (groupId) {
       toggleGroup(groupId);
     } else {
       setLocalExpanded((prev) => !prev);
     }
-  }, [groupId, toggleGroup]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "sidebar-nav-group", className: chunkS5RVSXDV_cjs.cn("mb-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        "data-slot": "sidebar-nav-group-button",
-        onClick: handleToggle,
-        className: chunkS5RVSXDV_cjs.cn(
-          "flex w-full items-center rounded-lg px-3 py-2 text-sm font-semibold",
-          "text-neutral-700 dark:text-neutral-300",
-          "transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800",
-          showCollapsed && "justify-center"
-        ),
-        title: showCollapsed ? label : void 0,
-        "aria-label": showCollapsed ? label : void 0,
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: chunkS5RVSXDV_cjs.cn(
-                "text-muted-foreground h-5 w-5 flex-shrink-0",
-                !showCollapsed && "me-3"
-              ),
-              children: icon
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(chunkNV2CWBI2_cjs.AnimatedPresence, { initial: false, children: [
-            !showCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNV2CWBI2_cjs.Animated,
-              {
-                as: "span",
-                preset: "sidebarLabel",
-                mode: "presence",
-                className: "flex-1 truncate text-start",
-                children: label
-              },
-              "label"
+  }, [captureFocusInside, groupId, toggleGroup]);
+  const items = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 ps-2", children });
+  const panelInDom = forceMount || itemsVisible;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: groupRef,
+      "data-slot": "sidebar-nav-group",
+      className: chunkS5RVSXDV_cjs.cn("mb-2", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            "data-slot": "sidebar-nav-group-button",
+            onClick: handleToggle,
+            "aria-expanded": itemsVisible,
+            "aria-controls": panelInDom ? contentId : void 0,
+            className: chunkS5RVSXDV_cjs.cn(
+              "flex w-full items-center rounded-lg px-3 py-2 text-sm font-semibold",
+              "text-neutral-700 dark:text-neutral-300",
+              "transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800",
+              showCollapsed && "justify-center"
             ),
-            !showCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNV2CWBI2_cjs.Animated,
-              {
-                as: "span",
-                preset: "sidebarLabel",
-                mode: "presence",
-                className: chunkS5RVSXDV_cjs.cn(
-                  "ms-2 flex-shrink-0 transition-transform duration-200",
-                  effectiveExpanded && "rotate-180"
+            title: showCollapsed ? label : void 0,
+            "aria-label": showCollapsed ? label : void 0,
+            children: [
+              icon && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "text-muted-foreground h-5 w-5 flex-shrink-0",
+                    !showCollapsed && "me-3"
+                  ),
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(chunkNV2CWBI2_cjs.AnimatedPresence, { initial: false, children: [
+                !showCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkNV2CWBI2_cjs.Animated,
+                  {
+                    as: "span",
+                    preset: "sidebarLabel",
+                    mode: "presence",
+                    className: "flex-1 truncate text-start",
+                    children: label
+                  },
+                  "label"
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon4, {})
-              },
-              "chevron"
-            )
-          ] })
-        ]
-      }
-    ),
-    !showCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: chunkS5RVSXDV_cjs.cn(
-          "overflow-hidden transition-all duration-300",
-          effectiveExpanded ? "mt-1 max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+                !showCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkNV2CWBI2_cjs.Animated,
+                  {
+                    as: "span",
+                    preset: "sidebarLabel",
+                    mode: "presence",
+                    className: chunkS5RVSXDV_cjs.cn(
+                      "ms-2 flex-shrink-0 transition-transform duration-200",
+                      effectiveExpanded && "rotate-180"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon4, {})
+                  },
+                  "chevron"
+                )
+              ] })
+            ]
+          }
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ps-2", children })
-      }
-    )
-  ] });
+        forceMount ? (
+          /*
+           * Deliberately outside the rail-collapsed gate. Gating it there would
+           * unmount the items whenever the sidebar collapsed, destroying exactly
+           * the state this prop exists to preserve — the prop would hold its
+           * promise for the group's own toggle and quietly break it for the
+           * rail's, which is worse than not offering it.
+           */
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: contentId,
+              "data-slot": "sidebar-nav-group-items",
+              "data-state": itemsVisible ? "open" : "closed",
+              hidden: !itemsVisible,
+              children: items
+            }
+          )
+        ) : !showCollapsed && /* @__PURE__ */ jsxRuntime.jsx(chunkNV2CWBI2_cjs.AnimatedPresence, { initial: false, children: effectiveExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkNV2CWBI2_cjs.Animated,
+          {
+            id: contentId,
+            "data-slot": "sidebar-nav-group-items",
+            "data-state": "open",
+            preset: "collapse",
+            mode: "presence",
+            enabled: !prefersReducedMotion,
+            className: "overflow-hidden",
+            children: items
+          },
+          "items"
+        ) })
+      ]
+    }
+  );
 }
 function SidebarNavItem({
   label,