gridsmith-ui 0.30.0 → 0.30.1

package/dist/{chunk-UNS4TGGK.js → chunk-KMKBOTFR.js}

@@ -1,16 +1,17 @@
 "use client";
+import { useKeyboardScroll } from './chunk-SJZWEBHL.js';
 import { PreferencesContext } from './chunk-TYNDXMBV.js';
 import { FormChangeCtx } from './chunk-72SDAX54.js';
-import { SurfaceBoundary, Button } from './chunk-Q36JVJX4.js';
+import { SurfaceBoundary, Button } from './chunk-ULCACQSA.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
 import { useRevealFocus } from './chunk-HTXP5BMM.js';
-import { usePopupFocus, useOverlayLayer, useReturnFocus, useFocusTrap, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-OIOII5L6.js';
-import { useTextOverflow, AutoTooltip } from './chunk-GQVBZ4GW.js';
+import { usePopupFocus, useOverlayLayer, useReturnFocus, useFocusTrap, inertOutside, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-R5QXMNW7.js';
+import { useTextOverflow } from './chunk-IELIF4PJ.js';
+import { AutoTooltip } from './chunk-UDJOIVKQ.js';
 import { Icon } from './chunk-L6HWACK7.js';
-import { usePosition } from './chunk-HP7WUZPK.js';
-import { useLatest } from './chunk-WH2FUFAC.js';
-import { cn, FOCUS_RING, FOCUS_INSET, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, GROUP_FOCUS_RING } from './chunk-JTU7OBYJ.js';
-import { createContext, version, forwardRef, useState, useCallback, useRef, useEffect, useContext, useMemo, useId, useLayoutEffect } from 'react';
+import { usePosition, useLatest } from './chunk-WIUGPZOH.js';
+import { cn, FOCUS_INSET_WHILE_STOP, FOCUS_RING, FOCUS_INSET, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, GROUP_FOCUS_RING } from './chunk-YL5KD5RC.js';
+import { createContext, version, forwardRef, useState, useCallback, useRef, useId, useEffect, useContext, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -268,6 +269,7 @@ function useOverlayMark(open) {
   const round = useRef(0);
   const [changed, setChanged] = useState(false);
   const [holds, setHolds] = useState(0);
+  const [pends, setPends] = useState(0);
   const [answers, setAnswers] = useState([]);
   const [wasOpen, setWasOpen] = useState(open);
   if (open !== wasOpen) {
@@ -325,6 +327,15 @@ function useOverlayMark(open) {
         setHolds((n) => n - 1);
       };
     },
+    pend: () => {
+      setPends((n) => n + 1);
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        setPends((n) => n - 1);
+      };
+    },
     open
   }), [open]);
   useEffect(() => {
@@ -345,7 +356,7 @@ function useOverlayMark(open) {
     setAnswers([]);
     setChanged([...forms.current.values()].some((f) => f.stamp > 0));
   }, [answers]);
-  return { marked: changed || holds > 0, mark };
+  return { marked: changed || holds > 0, pending: pends > 0, mark };
 }
 var OverlayCloseCtx = createContext(null);
 function useDirtyGuard(dirty, onClose, onDiscard) {
@@ -439,6 +450,7 @@ function useScrollbarInset() {
 }
 var insetLessScrollbar = (gutter) => `max(0px, calc(${gutter} - var(--gs-scrollbar, 0px)))`;
 var DrawerFooterCtx = createContext(null);
+var DrawerScopeCtx = createContext(null);
 var slideClasses = {
   right: {
     panel: "top-0 right-0 h-full",
@@ -466,8 +478,8 @@ function Drawer(props) {
   const shellWidth = useContext(DrawerWidthCtx) ?? void 0;
   const isPhone = useBreakpoint("sm");
   const mobileMode = mobile ?? (position === "left" && props.modal !== false ? "panel" : "sheet");
-  const { marked, mark } = useOverlayMark(open);
-  const guard = useDirtyGuard(dirty ?? marked, onClose, onDiscard);
+  const { marked, pending, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard((dirty ?? marked) || pending, onClose, onDiscard);
   const confirm = /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard });
   const [actionsMap, setActionsMap] = useState(/* @__PURE__ */ new Map());
   const registerActions = useCallback((formId, acts) => {
@@ -503,6 +515,9 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
   const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
   const isMobile = useBreakpoint("sm");
   const panelRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const scope = useContext(DrawerScopeCtx);
+  const scoped = !!scope && blocking && !sheet;
   const [mounted, setMounted] = useState(open);
   const [hidden, setHidden] = useState(!open);
   const [snapIdx, setSnapIdx] = useState(0);
@@ -538,7 +553,13 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
     return () => unlockBodyScroll();
   }, [open, blocking, container]);
   useReturnFocus(open && !nonModal, panelRef);
-  useFocusTrap(panelRef, open && blocking && (sheet || !topOffset), isTopLayer);
+  useFocusTrap(panelRef, open && blocking && (sheet || !topOffset || scoped), isTopLayer, scoped ? scope : null);
+  useEffect(() => {
+    const keep = scope?.current;
+    const own = wrapperRef.current;
+    if (!open || !mounted || !scoped || !keep || !own) return;
+    return inertOutside([keep, own], container instanceof Element ? container : document.body);
+  }, [open, mounted, scoped, scope, container]);
   useEffect(() => {
     if (!open || !mounted || nonModal) return;
     const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
@@ -573,7 +594,13 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
     const panel = panelRef.current;
     if (panel && !panel.contains(document.activeElement)) focusInitial(panel);
   }, [open, mounted, blocking]);
-  const bodyRef = useScrollbarInset();
+  const bodyInset = useScrollbarInset();
+  const [bodyEl, setBodyEl] = useState(null);
+  const bodyRef = useCallback((el) => {
+    bodyInset(el);
+    setBodyEl(el);
+  }, [bodyInset]);
+  useKeyboardScroll(bodyEl, typeof title === "string" ? title : "Content", open);
   useCloseSettle(open, panelRef, () => {
     if (keepMounted) setHidden(true);
     else setMounted(false);
@@ -627,6 +654,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: wrapperRef,
         hidden: keepMounted && hidden ? true : void 0,
         className: cn(
           `${positionClass} transition-opacity duration-[var(--ds-transition-speed)]`,
@@ -657,7 +685,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
               "data-gs": sheet ? "sheet" : "drawer",
               "data-ds-sheet": sheet ? "" : void 0,
               ...{ [OVERLAY_ROOT_ATTR]: "" },
-              "aria-modal": blocking ? "true" : void 0,
+              "aria-modal": blocking && !scoped ? "true" : void 0,
               "aria-labelledby": title ? titleId : labelledBy,
               style: sheet ? {
                 containerType: "inline-size",
@@ -731,7 +759,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
                     },
                     children: [
                       !sheet && titleTruncated ? /* @__PURE__ */ jsx(AutoTooltip, { content: title, children: /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: heading, children: title }) }) : /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: heading, children: title }),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(AutoTooltip, { content: "Close", children: /* @__PURE__ */ jsx(
                         "button",
                         {
                           type: "button",
@@ -741,7 +769,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
                           "aria-label": "Close",
                           children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
                         }
-                      )
+                      ) })
                     ]
                   }
                 ),
@@ -749,7 +777,7 @@ function DrawerPanel({ form, open, onClose, position = "right", width = "400px",
                   "div",
                   {
                     ref: bodyRef,
-                    className: "flex-1 overflow-y-auto",
+                    className: cn("flex-1 overflow-y-auto", FOCUS_INSET),
                     style: flush ? void 0 : { padding: `var(--ds-space-5) ${insetLessScrollbar(INSET)} var(--ds-space-5) ${INSET}` },
                     children: /* @__PURE__ */ jsx(SurfaceBoundary, { children })
                   }
@@ -882,6 +910,15 @@ var AppShell = forwardRef(function AppShell2({
   const isHome = currentPath != null && currentPath === homePath;
   const hasFooter = footer != null && scrollable;
   const mainRef = useRef(null);
+  const [mainEl, setMainEl] = useState(null);
+  const setMain = useCallback((el) => {
+    mainRef.current = el;
+    setMainEl(el);
+  }, []);
+  useKeyboardScroll(mainEl, "Main content");
+  const navbarRef = useRef(null);
+  const navbarSlot = navbar != null && navbar !== false ? /* @__PURE__ */ jsx("div", { ref: navbarRef, "data-ds-navbar-slot": "", className: "contents", children: navbar }) : navbar;
+  const menuNameId = useId();
   useEffect(() => {
     const main = mainRef.current;
     if (!hasFooter || !shellEl || !main || typeof ResizeObserver === "undefined") {
@@ -925,18 +962,18 @@ var AppShell = forwardRef(function AppShell2({
         className
       ), children: [
         skipLink && /* @__PURE__ */ jsx(SkipLink, { href: `#${mainId}` }),
-        layout === "sidebar-header" && navbar,
-        layout === "multi-column" && navbar,
+        layout === "sidebar-header" && navbarSlot,
+        layout === "multi-column" && navbarSlot,
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
           hasSidebar && !isMobile && /* @__PURE__ */ jsx("div", { className: "shrink-0 h-full", children: sidebar }),
           aside && asideSide === "left" && aside,
           /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 min-h-0", children: [
-            layout === "sidebar" && navbar,
-            layout === "stacked" && navbar,
+            layout === "sidebar" && navbarSlot,
+            layout === "stacked" && navbarSlot,
             /* @__PURE__ */ jsx(
               "main",
               {
-                ref: mainRef,
+                ref: setMain,
                 id: mainId,
                 "data-shell-main": "",
                 tabIndex: -1,
@@ -946,6 +983,14 @@ var AppShell = forwardRef(function AppShell2({
                   // <main> to it. Placed against the shell instead, it stayed where the unscrolled page had put it, out of
                   // <main>'s reach, and focus scrolled the shell's outer box to show it
                   "relative flex-1 min-h-0 focus:outline-none",
+                  // the skip link's target draws no ring (GOV.UK's); a Tab stop while it scrolls with nothing in it to Tab
+                  // to, it draws the inset ring (Sprint 25.29 item 10)
+                  FOCUS_INSET_WHILE_STOP,
+                  // the outline's reach at the foot as scroll padding, which a control Tab reaches across the bottom edge
+                  // stops short of (Sprint 25.29 item 19; a pinned PageHeader claims the top inline). The page's last control
+                  // has its room from the page's own foot (PageContainer's bottom padding): padding here would sit under a
+                  // view that fills the page, past the gutter its sides keep (Sprint 25.16 A42)
+                  "scroll-pb-[4px]",
                   scrollable && "overflow-y-auto",
                   layout === "multi-column" && "flex"
                 ),
@@ -959,7 +1004,10 @@ var AppShell = forwardRef(function AppShell2({
           ] }),
           aside && asideSide === "right" && aside
         ] }),
-        showMobileDrawer && isMobile && /* @__PURE__ */ jsx(
+        showMobileDrawer && isMobile && // Under the navbar, the menu is modal over the page with the navbar in its scope: the rest inert, Tab cycling the
+        // two, Escape closing it (the Authoring Practices; Sprint 25.29 item 9). The stacked shell, with no offset, traps
+        // in the menu alone.
+        /* @__PURE__ */ jsx(DrawerScopeCtx, { value: layout !== "stacked" && navbar != null ? navbarRef : null, children: /* @__PURE__ */ jsxs(
           Drawer,
           {
             open: sidebarOpen,
@@ -970,9 +1018,13 @@ var AppShell = forwardRef(function AppShell2({
             flush: mobileMenuFlush,
             lightBackdrop: mobileMenuLightBackdrop,
             topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
-            children: mobileMenu
+            labelledBy: menuNameId,
+            children: [
+              /* @__PURE__ */ jsx("span", { id: menuNameId, hidden: true, children: "Menu" }),
+              mobileMenu
+            ]
           }
-        ),
+        ) }),
         isSmallMobile && hasMobileNav && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-[var(--ds-z-sticky)]", children: mobileNav }),
         !isSmallMobile && launcher
       ] })
@@ -1306,5 +1358,5 @@ function useElementWidth(ref) {
 }
 
 export { AppShell, Breadcrumbs, DiscardConfirm, Drawer, DrawerFooterCtx, DrawerPanel, LAUNCHER_INSET_PRIORITY, NAVBAR_INSET_PRIORITY, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, PANEL_INSET_PRIORITY, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, besideRoom, crumbGoes, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBelow, useCloseSettle, useCompact, useCornerInset, useCrumbFollow, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
-//# sourceMappingURL=chunk-UNS4TGGK.js.map
-//# sourceMappingURL=chunk-UNS4TGGK.js.map
+//# sourceMappingURL=chunk-KMKBOTFR.js.map
+//# sourceMappingURL=chunk-KMKBOTFR.js.map