@sigmela/router 0.7.2 → 0.8.0

package/dist/index.js

@@ -311,13 +311,17 @@ function SheetSurface({
     return () => controls.stop();
   }, [closeWithAnimation, open, y]);
   useEffect(() => {
-    if (!canDismiss) return;
+    if (!canDismiss || !open) return;
     const handler = (event) => {
-      if (event.key === "Escape") requestClose();
+      if (event.key !== "Escape") return;
+      const higherSurface = Array.from(
+        document.querySelectorAll(".router-overlay-shell")
+      ).some((shell2) => Number(shell2.style.zIndex) > zIndex);
+      if (!higherSurface) requestClose();
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [canDismiss, requestClose]);
+  }, [canDismiss, open, requestClose, zIndex]);
   const shouldStartDrag = useCallback(
     (update) => update.totalY > 0 && sheetScrollAtTop(scrollElement ?? null),
     [scrollElement]
@@ -527,6 +531,10 @@ function ModalFrame({
       backdropClassName: `router-modal-backdrop${isContentSized ? " router-modal-backdrop--transparent" : ""}`,
       shellClassName: "router-modal-shell",
       surfaceClassName: `router-modal-surface${isContentSized ? " router-modal-surface--content-sized" : ""}${options?.size === "wide" ? " router-modal-surface--wide" : ""}`,
+      surfaceStyle: {
+        "--router-modal-width": options?.width ? `${options.width}px` : void 0,
+        "--router-modal-height": options?.height ? `${options.height}px` : void 0
+      },
       scrollElement: swipeTarget,
       ariaLabel,
       closeTarget: isContentSized ? "surface" : "viewport",
@@ -539,14 +547,16 @@ function ModalRoot({
   swipeToClose = true,
   ariaLabel,
   size = "regular",
+  width,
+  height,
   presentation = "fullscreen"
 }) {
   const { setOptions } = useModalContext();
   const contentKey = useOverlayContentKey();
   useLayoutEffect(() => {
-    setOptions(contentKey, { swipeToClose, ariaLabel, size, presentation });
+    setOptions(contentKey, { swipeToClose, ariaLabel, size, width, height, presentation });
     return () => setOptions(contentKey, null);
-  }, [ariaLabel, contentKey, presentation, setOptions, size, swipeToClose]);
+  }, [ariaLabel, contentKey, height, presentation, setOptions, size, swipeToClose, width]);
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function ModalHeader({
@@ -941,7 +951,7 @@ function splitNavigationFromState(state) {
   if (!isRecord(state)) return void 0;
   const value = state[SPLIT_NAVIGATION_KEY];
   if (!isRecord(value)) return void 0;
-  if (typeof value.splitViewId !== "string" || typeof value.detailPathId !== "string" || typeof value.detailDepth !== "number" || value.operation !== "selection" && value.operation !== "push" && value.operation !== "replace") {
+  if (typeof value.splitViewId !== "string" || typeof value.detailPathId !== "string" || typeof value.detailDepth !== "number" || value.operation !== "selection" && value.operation !== "push" && value.operation !== "replace" && value.operation !== "pop") {
     return void 0;
   }
   return {
@@ -994,7 +1004,7 @@ function historyNavigationKeyFromState(state) {
 function historyCommitFromState(state) {
   if (isRecord(state)) {
     const commit = state[HISTORY_COMMIT_KEY];
-    if (commit === "sync" || commit === "replace") return commit;
+    if (commit === "sync" || commit === "replace" || commit === "pop") return commit;
   }
   return "push";
 }
@@ -1119,6 +1129,7 @@ function splitRouteChildren(children) {
   const routeChildren = [];
   const nonRouteChildren = [];
   for (const child of childArray) {
+    if (child == null || typeof child === "boolean") continue;
     if (isStackRouteElement(child)) {
       routeChildren.push(child);
     } else {
@@ -1506,7 +1517,8 @@ function compileStackRoutes(children, parentPath, parentId = "root", inheritedGu
               container: descriptor.container,
               childRoute,
               drawerAside: isTabBar ? void 0 : props.aside,
-              drawerFooter: isTabBar ? void 0 : props.footer
+              drawerFooter: isTabBar ? void 0 : props.footer,
+              drawerDesktopCollapsible: isTabBar ? void 0 : props.desktopCollapsible
             };
             if (isTabBar && tabs) {
               containerRoute.tabBar = {
@@ -1622,8 +1634,8 @@ function stateForSplitNavigationTarget(state, targetMatch, action) {
     } : {
       splitViewId: origin.splitViewId,
       detailPathId: origin.detailPathId,
-      detailDepth: action === "navigate" ? origin.detailDepth + 1 : origin.detailDepth,
-      operation: action === "navigate" ? "push" : "replace"
+      detailDepth: action === "navigate" ? origin.detailDepth + 1 : action === "pop" ? Math.max(0, origin.detailDepth - 1) : origin.detailDepth,
+      operation: action === "navigate" ? "push" : action
     }
   );
   next[SPLIT_NAVIGATION_KEY] = metadata;
@@ -2099,6 +2111,12 @@ function useRouter() {
           ...options,
           state: stateWithSplitNavigationOrigin(options.state, splitPaneOrigin)
         });
+      },
+      popTo: (to, options = {}) => {
+        router.popTo(to, {
+          ...options,
+          state: stateWithSplitNavigationOrigin(options.state, splitPaneOrigin)
+        });
       }
     };
   }, [router, splitPaneOrigin]);
@@ -2118,7 +2136,6 @@ function useCurrentModal() {
   return current;
 }
 function DefaultSplitViewLayout({
-  children,
   primary,
   secondary,
   isWide,
@@ -2135,8 +2152,15 @@ function DefaultSplitViewLayout({
       "data-router-split-view-id": splitViewLayoutId,
       style: { "--sigmela-split-primary-max-width": `${primaryMaxWidth}px` },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "sigmela-split-view__primary", children: isWide ? primary : children }),
-        isWide ? /* @__PURE__ */ jsx("div", { className: "sigmela-split-view__secondary", children: secondary }) : null
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sigmela-split-view__primary",
+            style: !isWide && secondary ? { display: "none" } : void 0,
+            children: primary
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "sigmela-split-view__secondary", children: secondary })
       ]
     }
   );
@@ -2161,88 +2185,119 @@ function DefaultDrawerLayout({
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "sigmela-drawer", "data-drawer-open": drawer?.isOpen ? "true" : "false", children: [
-    /* @__PURE__ */ jsxs("aside", { className: "sigmela-drawer__sidebar", children: [
-      /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__sidebar-content", children: items.filter((node) => !node.hidden).map((node) => {
-        if (node.type === "item") {
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "sigmela-drawer__item",
-              "data-active": node.id === activeItem ? "true" : void 0,
-              onClick: () => onItemChange?.(node.id),
-              children: [
-                node.icon ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", children: node.icon }) : null,
-                /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: node.label }),
-                node.badge ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-badge", children: node.badge }) : null
-              ]
-            },
-            node.id
-          );
-        }
-        if (node.type === "section") {
-          return /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__section-label", children: node.title }, node.id);
-        }
-        const visibleItems = node.items.filter((item) => !item.hidden);
-        if (visibleItems.length === 0) return null;
-        const isExpanded = expandedGroups.has(node.id);
-        const itemsId = `${node.id}-drawer-items`;
-        return /* @__PURE__ */ jsxs("div", { className: "sigmela-drawer__group-container", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "sigmela-drawer__item sigmela-drawer__group-label",
-              "aria-controls": itemsId,
-              "aria-expanded": isExpanded,
-              onClick: () => toggleGroup(node.id),
-              children: [
-                node.icon ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", children: node.icon }) : null,
-                /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: node.label }),
-                node.chevron ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "sigmela-drawer__group-chevron",
-                    "data-expanded": isExpanded ? "true" : void 0,
-                    "aria-hidden": "true",
-                    children: node.chevron
-                  }
-                ) : null
-              ]
-            }
-          ),
-          isExpanded ? /* @__PURE__ */ jsx("div", { id: itemsId, className: "sigmela-drawer__group-items", children: visibleItems.map((item) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "sigmela-drawer__item sigmela-drawer__subitem",
-              "data-active": item.id === activeItem ? "true" : void 0,
-              onClick: () => onItemChange?.(item.id),
-              children: [
-                item.icon ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", children: item.icon }) : null,
-                /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: item.label }),
-                item.badge ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-badge", children: item.badge }) : null
-              ]
-            },
-            item.id
-          )) }) : null
-        ] }, node.id);
-      }) }),
-      footer ? /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__footer", children: footer }) : null
-    ] }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "sigmela-drawer__overlay",
-        "aria-label": "Close navigation",
-        onClick: drawer?.close
-      }
-    ),
-    /* @__PURE__ */ jsx("main", { className: "sigmela-drawer__main", children }),
-    aside ? /* @__PURE__ */ jsx("aside", { className: "sigmela-drawer__assistant", children: aside }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "sigmela-drawer",
+      "data-drawer-open": drawer?.isOpen ? "true" : "false",
+      "data-drawer-collapsed": drawer?.isCollapsed ? "true" : "false",
+      "data-drawer-desktop": drawer?.desktopCollapsible,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            className: "sigmela-drawer__sidebar",
+            inert: drawer?.isMobile && !drawer.isOpen ? true : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__sidebar-content", children: items.filter((node) => !node.hidden).map((node) => {
+                if (node.type === "item") {
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sigmela-drawer__item",
+                      "aria-label": node.label,
+                      title: drawer?.isCollapsed ? node.label : void 0,
+                      "data-active": node.id === activeItem ? "true" : void 0,
+                      onClick: () => onItemChange?.(node.id),
+                      children: [
+                        node.icon || drawer?.isCollapsed ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", "aria-hidden": "true", children: node.icon ?? node.label.slice(0, 1) }) : null,
+                        /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: node.label }),
+                        node.badge ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-badge", children: node.badge }) : null
+                      ]
+                    },
+                    node.id
+                  );
+                }
+                if (node.type === "section") {
+                  return /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__section-label", children: node.title }, node.id);
+                }
+                const visibleItems = node.items.filter((item) => !item.hidden);
+                if (visibleItems.length === 0) return null;
+                const isExpanded = expandedGroups.has(node.id);
+                const itemsId = `${node.id}-drawer-items`;
+                return /* @__PURE__ */ jsxs("div", { className: "sigmela-drawer__group-container", children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sigmela-drawer__item sigmela-drawer__group-label",
+                      "aria-label": node.label,
+                      title: drawer?.isCollapsed ? node.label : void 0,
+                      "aria-controls": itemsId,
+                      "aria-expanded": isExpanded,
+                      onClick: () => {
+                        if (drawer?.isCollapsed) drawer.open();
+                        toggleGroup(node.id);
+                      },
+                      children: [
+                        node.icon || drawer?.isCollapsed ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", "aria-hidden": "true", children: node.icon ?? node.label.slice(0, 1) }) : null,
+                        /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: node.label }),
+                        node.chevron ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "sigmela-drawer__group-chevron",
+                            "data-expanded": isExpanded ? "true" : void 0,
+                            "aria-hidden": "true",
+                            children: node.chevron
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
+                  isExpanded ? /* @__PURE__ */ jsx("div", { id: itemsId, className: "sigmela-drawer__group-items", children: visibleItems.map((item) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sigmela-drawer__item sigmela-drawer__subitem",
+                      "data-active": item.id === activeItem ? "true" : void 0,
+                      onClick: () => onItemChange?.(item.id),
+                      children: [
+                        item.icon ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", children: item.icon }) : null,
+                        /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: item.label }),
+                        item.badge ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-badge", children: item.badge }) : null
+                      ]
+                    },
+                    item.id
+                  )) }) : null
+                ] }, node.id);
+              }) }),
+              footer ? /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__footer", children: footer }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "sigmela-drawer__overlay",
+            "aria-label": "Close navigation",
+            tabIndex: drawer?.isMobile && drawer.isOpen ? 0 : -1,
+            onClick: drawer?.close
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "main",
+          {
+            className: "sigmela-drawer__main",
+            inert: drawer?.isMobile && drawer.isOpen ? true : void 0,
+            children
+          }
+        ),
+        aside ? /* @__PURE__ */ jsx("aside", { className: "sigmela-drawer__assistant", children: aside }) : null
+      ]
+    }
+  );
 }
 function FrozenPaneRouteContent({
   route,
@@ -2568,7 +2623,7 @@ function SplitViewRouteContent({
       fallback: splitView.primaryRoute.fallback ?? fallback
     }
   ) });
-  const secondary = splitView.secondaryRoute ? /* @__PURE__ */ jsx(SplitPaneNavigationContext.Provider, { value: secondaryNavigationOrigin, children: isWide ? /* @__PURE__ */ jsx(
+  const secondary = splitView.secondaryRoute ? /* @__PURE__ */ jsx(SplitPaneNavigationContext.Provider, { value: secondaryNavigationOrigin, children: /* @__PURE__ */ jsx(
     RouteStackViewport,
     {
       route: splitView.secondaryRoute,
@@ -2577,13 +2632,6 @@ function SplitViewRouteContent({
       stackKey: `${route.id}:secondary`
     },
     detailPathId
-  ) : /* @__PURE__ */ jsx(
-    FrozenPaneRouteContent,
-    {
-      route: splitView.secondaryRoute,
-      props: secondaryProps,
-      fallback: splitView.secondaryRoute.fallback ?? fallback
-    }
   ) }) : null;
   const activeContent = splitView.activePane === "secondary" && secondary ? secondary : primary;
   const layoutProps = {
@@ -2614,13 +2662,44 @@ function DrawerRouteContent({
   route,
   props
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const open = useCallback(() => setIsOpen(true), []);
-  const close = useCallback(() => setIsOpen(false), []);
-  const toggle = useCallback(() => setIsOpen((value) => !value), []);
+  const isMobile = !useMinWidth(641);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [desktopCollapsed, setDesktopCollapsed] = useState(false);
+  const desktopCollapsible = route.drawerDesktopCollapsible ?? "offcanvas";
+  const isCollapsed = !isMobile && desktopCollapsed;
+  const isOpen = isMobile ? mobileOpen : !desktopCollapsed;
+  const open = useCallback(() => {
+    if (isMobile) setMobileOpen(true);
+    else setDesktopCollapsed(false);
+  }, [isMobile]);
+  const close = useCallback(() => {
+    if (isMobile) setMobileOpen(false);
+    else setDesktopCollapsed(true);
+  }, [isMobile]);
+  const toggle = useCallback(() => {
+    if (isMobile) setMobileOpen((value) => !value);
+    else setDesktopCollapsed((value) => !value);
+  }, [isMobile]);
+  useEffect(() => setMobileOpen(false), [isMobile, props.pathname]);
+  useEffect(() => {
+    if (!isMobile || !mobileOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented) setMobileOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isMobile, mobileOpen]);
   const drawerApi = useMemo(
-    () => ({ isOpen, open, close, toggle }),
-    [close, isOpen, open, toggle]
+    () => ({
+      isOpen,
+      isMobile,
+      isCollapsed,
+      desktopCollapsible,
+      open,
+      close,
+      toggle
+    }),
+    [close, isOpen, isMobile, isCollapsed, desktopCollapsible, open, toggle]
   );
   const childFallback = route.childRoute?.fallback ?? route.fallback ?? null;
   const drawer = route.drawer;
@@ -2640,7 +2719,7 @@ function DrawerRouteContent({
     if (item && normalizedPath(item.path) !== props.pathname) {
       navigateWithHistoryIndex(item.path);
     }
-    close();
+    setMobileOpen(false);
   } : void 0;
   const layoutProps = {
     children: content,
@@ -2909,6 +2988,13 @@ function resolveStackChange(prev, snapshot) {
     };
   }
   const direction = resolveDirection(top, snapshot);
+  if (snapshot.historyCommit === "pop" && snapshot.splitPane === "secondary") {
+    const existingIndex2 = existingStackEntryIndexForSnapshot(prev, snapshot);
+    return {
+      entries: existingIndex2 !== -1 && existingIndex2 < prev.length - 1 ? entriesRevealingSnapshot(prev, existingIndex2, snapshot) : [createEntry(snapshot, "back", true)],
+      direction: "back"
+    };
+  }
   if (isExplicitStackReplace(top, snapshot)) {
     return {
       entries: replaceActiveStackEntry(prev, top.id, snapshot, direction, true),
@@ -2970,6 +3056,10 @@ function visibleEntriesForSnapshot(entries, snapshot) {
       (entry) => entry.id === top.id ? mergeEntrySnapshot(entry, snapshot) : entry
     );
   }
+  if (snapshot.historyCommit === "pop" && snapshot.splitPane === "secondary") {
+    const existingIndex2 = existingStackEntryIndexForSnapshot(entries, snapshot);
+    return existingIndex2 !== -1 && existingIndex2 < entries.length - 1 ? entriesRevealingSnapshot(entries, existingIndex2, snapshot) : [createEntry(snapshot, "back", true)];
+  }
   if (isExplicitStackReplace(top, snapshot)) {
     return replaceActiveStackEntry(
       entries,
@@ -3640,6 +3730,20 @@ function RouterRuntime({
     },
     [pushModalEntry, updateActiveModalFlow]
   );
+  const popTo = useCallback((to, options = {}) => {
+    const { compiledRoutes: compiledRoutes2, pathname: pathname2, parser } = navigationScopeRef.current;
+    const target = parseNavigationTarget(to, pathname2);
+    const pushMatch = matchStackRouteByPresentation(
+      compiledRoutes2,
+      parser,
+      target.pathname,
+      PUSH_PRESENTATIONS
+    );
+    navigateWithHistoryIndex(to, {
+      commit: "pop",
+      state: stateForSplitNavigationTarget(options.state, pushMatch, "pop")
+    });
+  }, []);
   const goBack = useCallback(() => {
     if (goBackTopModal()) return true;
     const activeEntry = visibleActiveEntryRef.current;
@@ -3686,11 +3790,12 @@ function RouterRuntime({
     () => ({
       navigate,
       replace,
+      popTo,
       close: closeModal,
       closeAll: closeAllModals,
       goBack
     }),
-    [closeAllModals, closeModal, goBack, navigate, replace]
+    [closeAllModals, closeModal, goBack, navigate, popTo, replace]
   );
   useEffect(() => {
     if (visibleActiveEntry) {
@@ -3762,6 +3867,8 @@ function RouterRuntime({
               "data-route-stack-phase": phase,
               "data-route-stack-transition": transitionStatus,
               className: screenClassName(entry, phase, transitionStatus, animationType),
+              "aria-hidden": phase === "active" ? void 0 : true,
+              inert: phase === "active" ? void 0 : true,
               style: { zIndex },
               children: /* @__PURE__ */ jsx("div", { className: "stack-screen-container", children: /* @__PURE__ */ jsx(FrozenStackEntry, { entry, fallback: fallbackNode }) })
             },