rift-ds 1.0.0 → 1.1.0

package/components/AppSidebar/AppSidebar.js

@@ -5,6 +5,7 @@ import { useLayer } from "../../behaviors/useLayer.js";
 import { useFocusScope } from "../../behaviors/useFocusScope.js";
 import { useScrollLock } from "../../behaviors/useScrollLock.js";
 import { Avatar } from "../Avatar/Avatar.js";
+import { SidebarPanel } from "../SidebarPanel/SidebarPanel.js";
 import "./AppSidebar.css";
 import "../../fonts/material-symbols.css";
 function DefaultLogo() {
@@ -30,6 +31,11 @@ const AppSidebar = ({
   profile,
   activeKey,
   activeSubKey,
+  activeTertiaryKey,
+  subNav = "accordion",
+  defaultPanelOpen = true,
+  panelOpen: controlledPanelOpen,
+  onPanelOpenChange,
   defaultExpanded = false,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -83,7 +89,20 @@ const AppSidebar = ({
     query.addEventListener("change", onChange);
     return () => query.removeEventListener("change", onChange);
   }, [mobileOpen]);
-  const [openKeys, setOpenKeys] = useState(/* @__PURE__ */ new Set());
+  const [openKeys, setOpenKeys] = useState(() => {
+    const initial = /* @__PURE__ */ new Set();
+    if (subNav !== "panel" && (activeSubKey || activeTertiaryKey)) {
+      for (const section of sections) {
+        for (const item of section.items) {
+          const holdsActive = item.children?.some(
+            (sub) => sub.key === activeSubKey || sub.children?.some((leaf) => leaf.key === activeTertiaryKey)
+          );
+          if (holdsActive) initial.add(item.key);
+        }
+      }
+    }
+    return initial;
+  });
   const toggleAccordion = useCallback((key) => {
     setOpenKeys((prev) => {
       const next = new Set(prev);
@@ -95,6 +114,85 @@ const AppSidebar = ({
       return next;
     });
   }, []);
+  const isPanelMode = subNav === "panel";
+  const [panelSourceKey, setPanelSourceKey] = useState(() => {
+    for (const section of sections) {
+      for (const item of section.items) {
+        if (isPanelMode) {
+          if (item.children?.length && (item.key === activeKey || item.children.some((c) => c.key === activeSubKey))) {
+            return item.key;
+          }
+        } else {
+          for (const sub of item.children ?? []) {
+            if (sub.children?.length && (sub.key === activeSubKey || sub.children.some((c) => c.key === activeTertiaryKey))) {
+              return sub.key;
+            }
+          }
+        }
+      }
+    }
+    return void 0;
+  });
+  let panelSource;
+  for (const section of sections) {
+    for (const item of section.items) {
+      if (isPanelMode && item.key === panelSourceKey && item.children?.length) {
+        panelSource = { label: item.label, items: item.children };
+      }
+      if (!isPanelMode) {
+        for (const sub of item.children ?? []) {
+          if (sub.key === panelSourceKey && sub.children?.length) {
+            panelSource = {
+              label: sub.label,
+              parentLabel: item.label,
+              items: sub.children.map(({ children: _deeper, ...leaf }) => leaf)
+            };
+          }
+        }
+      }
+    }
+  }
+  const [internalPanelOpen, setInternalPanelOpen] = useState(defaultPanelOpen);
+  const isPanelOpen = controlledPanelOpen ?? internalPanelOpen;
+  const setPanelOpen = useCallback(
+    (next) => {
+      setInternalPanelOpen(next);
+      if (next !== isPanelOpen) onPanelOpenChange?.(next);
+    },
+    [isPanelOpen, onPanelOpenChange]
+  );
+  const panelVisible = Boolean(panelSource) && isPanelOpen;
+  const panelId = useId();
+  const [drilled, setDrilled] = useState(false);
+  const focusAfterDrill = useRef(null);
+  const openMobile = useCallback(() => {
+    setDrilled(Boolean(panelSource));
+    setMobileOpen(true);
+  }, [panelSource]);
+  useEffect(() => {
+    const target = focusAfterDrill.current;
+    focusAfterDrill.current = null;
+    if (!target || !drawerRef.current) return;
+    const selector = target === "in" ? ".ds-sidebar-panel__back" : '[data-panel-source="true"]';
+    drawerRef.current.querySelector(selector)?.focus();
+  }, [drilled]);
+  const selectPanelSource = useCallback(
+    (key) => {
+      if (mobileOpen) {
+        setPanelSourceKey(key);
+        focusAfterDrill.current = "in";
+        setDrilled(true);
+        return;
+      }
+      if (key === panelSourceKey && isPanelOpen) {
+        setPanelOpen(false);
+      } else {
+        setPanelSourceKey(key);
+        setPanelOpen(true);
+      }
+    },
+    [mobileOpen, panelSourceKey, isPanelOpen, setPanelOpen]
+  );
   const classes = [
     baseClass,
     // The drawer always shows the expanded layout: an icon rail inside
@@ -102,6 +200,7 @@ const AppSidebar = ({
     isExpanded || mobileOpen ? `${baseClass}--expanded` : "",
     floating ? `${baseClass}--floating` : "",
     mobileOpen ? `${baseClass}--mobile-open` : "",
+    isPanelMode ? `${baseClass}--panel-mode` : "",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -113,7 +212,7 @@ const AppSidebar = ({
         "aria-label": "Open navigation",
         "aria-expanded": mobileOpen,
         "aria-controls": drawerId,
-        onClick: () => setMobileOpen(true),
+        onClick: openMobile,
         children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "menu" })
       }
     ),
@@ -153,12 +252,28 @@ const AppSidebar = ({
           )
         ] }),
         topSlot && /* @__PURE__ */ jsx("div", { className: `${baseClass}__top-slot`, children: topSlot }),
-        sections.map((section, si) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__nav`, children: [
+        mobileOpen && drilled && panelSource ? /* @__PURE__ */ jsx(
+          SidebarPanel,
+          {
+            className: `${baseClass}__drill`,
+            items: panelSource.items,
+            title: panelSource.label,
+            activeKey: activeTertiaryKey ?? activeSubKey,
+            onBack: () => {
+              focusAfterDrill.current = "out";
+              setDrilled(false);
+            },
+            backLabel: panelSource.parentLabel ?? "Menu"
+          },
+          panelSourceKey
+        ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__sections`, children: sections.map((section, si) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__nav`, children: [
           section.category && /* @__PURE__ */ jsx("div", { className: `${baseClass}__category`, children: section.category }),
           section.items.map((item) => {
             const hasChildren = item.children && item.children.length > 0;
             const isOpen = openKeys.has(item.key);
-            const isActive = activeKey === item.key;
+            const feedsPanel = isPanelMode && hasChildren;
+            const isSource = feedsPanel && item.key === panelSourceKey;
+            const isActive = isPanelMode && panelVisible ? isSource : activeKey === item.key;
             const isLink = Boolean(item.href) && !hasChildren;
             const itemClasses = [
               `${baseClass}__btn`,
@@ -181,7 +296,7 @@ const AppSidebar = ({
                 {
                   className: [
                     `${baseClass}__btn-chevron material-symbols-rounded`,
-                    isOpen ? `${baseClass}__btn-chevron--open` : ""
+                    isOpen && !isPanelMode ? `${baseClass}__btn-chevron--open` : ""
                   ].filter(Boolean).join(" "),
                   children: "chevron_right"
                 }
@@ -204,18 +319,27 @@ const AppSidebar = ({
                   type: "button",
                   className: itemClasses,
                   onClick: () => {
-                    if (hasChildren && isExpanded) {
-                      toggleAccordion(item.key);
+                    if (feedsPanel) {
+                      selectPanelSource(item.key);
+                    } else if (hasChildren) {
+                      if (!isExpanded && !mobileOpen) {
+                        toggleExpanded();
+                        setOpenKeys((prev) => new Set(prev).add(item.key));
+                      } else {
+                        toggleAccordion(item.key);
+                      }
                     }
                     item.onClick?.();
                   },
-                  "aria-expanded": hasChildren ? isOpen : void 0,
-                  "aria-current": isActive ? "page" : void 0,
-                  title: !isExpanded ? item.label : void 0,
+                  "aria-expanded": feedsPanel ? mobileOpen ? void 0 : isSource && panelVisible : hasChildren ? isOpen : void 0,
+                  "aria-controls": feedsPanel && !mobileOpen ? panelId : void 0,
+                  "aria-current": activeKey === item.key ? "page" : void 0,
+                  "data-panel-source": isSource ? "true" : void 0,
+                  title: !isExpanded && !isPanelMode ? item.label : void 0,
                   children: itemContent
                 }
               ),
-              hasChildren && /* @__PURE__ */ jsx(
+              hasChildren && !isPanelMode && /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: [
@@ -223,15 +347,43 @@ const AppSidebar = ({
                     isOpen && isExpanded ? `${baseClass}__sub-items--open` : ""
                   ].filter(Boolean).join(" "),
                   children: item.children.map((sub) => {
-                    const subActive = activeSubKey === sub.key;
+                    const subHasChildren = Boolean(sub.children?.length);
+                    const subIsSource = subHasChildren && sub.key === panelSourceKey;
+                    const subActive = panelVisible && subHasChildren ? subIsSource : activeSubKey === sub.key;
                     const subClasses = [
                       `${baseClass}__sub-btn`,
                       subActive ? `${baseClass}__sub-btn--active` : ""
                     ].filter(Boolean).join(" ");
-                    const subLabel = /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label });
+                    const subLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label }),
+                      sub.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: sub.badge }),
+                      subHasChildren && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__sub-chevron material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: "chevron_right"
+                        }
+                      )
+                    ] });
                     return /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sub-item`, children: [
                       /* @__PURE__ */ jsx("div", { className: `${baseClass}__sub-line` }),
-                      sub.href ? /* @__PURE__ */ jsx(
+                      subHasChildren ? /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: subClasses,
+                          onClick: () => {
+                            selectPanelSource(sub.key);
+                            sub.onClick?.();
+                          },
+                          "aria-expanded": mobileOpen ? void 0 : subIsSource && panelVisible,
+                          "aria-controls": mobileOpen ? void 0 : panelId,
+                          "aria-current": activeSubKey === sub.key ? "page" : void 0,
+                          "data-panel-source": subIsSource ? "true" : void 0,
+                          children: subLabel
+                        }
+                      ) : sub.href ? /* @__PURE__ */ jsx(
                         "a",
                         {
                           className: subClasses,
@@ -256,7 +408,7 @@ const AppSidebar = ({
               )
             ] }, item.key);
           })
-        ] }, si))
+        ] }, si)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: `${baseClass}__bottom`, children: [
         footerSlot && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer-slot`, children: footerSlot }),
@@ -287,7 +439,26 @@ const AppSidebar = ({
           )
         ] })
       ] })
-    ] })
+    ] }),
+    panelSource && !mobileOpen && /* @__PURE__ */ jsx(
+      SidebarPanel,
+      {
+        id: panelId,
+        className: [
+          `${baseClass}__panel`,
+          panelVisible ? `${baseClass}__panel--visible` : "",
+          isExpanded ? `${baseClass}__panel--beside-expanded` : "",
+          isPanelMode ? `${baseClass}__panel--panel-mode` : "",
+          floating ? `${baseClass}__panel--floating` : ""
+        ].filter(Boolean).join(" "),
+        items: panelSource.items,
+        title: panelSource.label,
+        activeKey: activeTertiaryKey ?? activeSubKey,
+        onCollapse: () => setPanelOpen(false),
+        inert: !panelVisible
+      },
+      panelSourceKey
+    )
   ] });
 };
 export {