@nswds/app 1.31.0 → 1.32.0

package/dist/globals.css

@@ -399,6 +399,9 @@
   .z-30 {
     z-index: 30;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -717,6 +720,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-\(--radix-context-menu-content-available-height\) {
     max-height: var(--radix-context-menu-content-available-height);
   }
@@ -2275,6 +2281,18 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-grey-900 {
+    --tw-shadow-color: oklch(0.17511812981113217 0.007251980042076026 242.08383926925922);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, oklch(0.17511812981113217 0.007251980042076026 242.08383926925922) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .shadow-grey-900\/5 {
+    --tw-shadow-color: color-mix(in srgb, oklch(0.17511812981113217 0.007251980042076026 242.08383926925922) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, oklch(0.17511812981113217 0.007251980042076026 242.08383926925922) 5%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .shadow-slate-900 {
     --tw-shadow-color: oklch(20.8% 0.042 265.755);
     @supports (color: color-mix(in lab, red, red)) {

package/dist/index.cjs

@@ -7454,7 +7454,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.30.0"};
+  version: "1.31.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7558,7 +7558,7 @@ function SiteSearch({ navigation: navigation$1 }) {
       /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Type to search across the site..." }),
       /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No results found." }),
-        navigation$1.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: page.title, children: page.links.map((page2) => /* @__PURE__ */ jsxRuntime.jsx(
+        navigation$1.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: page.title, children: page.links && page.links.map((page2) => /* @__PURE__ */ jsxRuntime.jsx(
           CommandItem,
           {
             onSelect: () => runCommand(() => router.push(page2.href)),
@@ -7571,13 +7571,14 @@ function SiteSearch({ navigation: navigation$1 }) {
   ] });
 }
 function Header2({
+  children,
   sitename,
   navigation,
   version = false,
   hide = {}
 }) {
   const [isScrolled, setIsScrolled] = React6.useState(false);
-  const { search = false, themeSwitcher = false, github = false } = hide;
+  const { search = true, themeSwitcher = true, github = true, shadow = true } = hide;
   React6.useEffect(() => {
     function onScroll() {
       setIsScrolled(window.scrollY > 0);
@@ -7592,7 +7593,8 @@ function Header2({
     "header",
     {
       className: clsx12__default.default(
-        "sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-12 dark:shadow-none",
+        "sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 transition duration-500 sm:px-6 lg:px-12",
+        shadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
         isScrolled ? "dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75" : "dark:bg-transparent"
       ),
       children: [
@@ -7605,9 +7607,9 @@ function Header2({
           version && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "soft", color: "primary", className: "ml-2", children: package_default.version })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex basis-0 justify-end gap-2 sm:gap-4 md:grow", children: [
-          !search && /* @__PURE__ */ jsxRuntime.jsx(SiteSearch, { navigation }),
-          !themeSwitcher && /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitcher, {}),
-          !github && /* @__PURE__ */ jsxRuntime.jsx(
+          search && /* @__PURE__ */ jsxRuntime.jsx(SiteSearch, { navigation }),
+          themeSwitcher && /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitcher, {}),
+          github && /* @__PURE__ */ jsxRuntime.jsx(
             Button2,
             {
               variant: "surface",
@@ -7624,7 +7626,8 @@ function Header2({
                 }
               )
             }
-          )
+          ),
+          children
         ] })
       ]
     }
@@ -7918,24 +7921,61 @@ function MenubarSubContent({
   );
 }
 function MainNavigation({ navigation }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden bg-gray-100 sm:px-6 lg:block lg:px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-50 mx-auto flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx(Headless.PopoverGroup, { className: "flex justify-start", children: navigation.map(
-    (item) => item.links ? /* @__PURE__ */ jsxRuntime.jsx(
-      MegaMenu,
-      {
-        title: item.title,
-        href: item.href !== void 0 ? item.href : "#",
-        links: item.links
-      },
-      item.title
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      TopLevel,
-      {
-        title: item.title,
-        href: item.href !== void 0 ? item.href : "#"
+  const [headerHeight, setHeaderHeight] = React6.useState(88);
+  React6.useEffect(() => {
+    const measureHeader = () => {
+      const header2 = document.querySelector("header");
+      if (header2) {
+        setHeaderHeight(header2.offsetHeight);
+      }
+    };
+    const timeoutId = setTimeout(measureHeader, 100);
+    const header = document.querySelector("header");
+    let resizeObserver = null;
+    if (header) {
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setHeaderHeight(entry.contentRect.height);
+        }
+      });
+      resizeObserver.observe(header);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      className: "shadow-grey-900/5 sticky z-40 hidden bg-gray-100 shadow-md sm:px-6 lg:block lg:px-4 dark:shadow-none",
+      style: {
+        top: `${headerHeight}px`,
+        // Ensure the nav doesn't jump when header height is calculated
+        transition: "top 0.2s ease-in-out"
       },
-      item.title
-    )
-  ) }) }) });
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-50 mx-auto flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx(Headless.PopoverGroup, { className: "flex justify-start", children: navigation.map(
+        (item, index) => item.links ? /* @__PURE__ */ jsxRuntime.jsx(
+          MegaMenu,
+          {
+            title: item.title,
+            href: item.href !== void 0 ? item.href : "#",
+            links: item.links
+          },
+          index
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          TopLevel,
+          {
+            title: item.title,
+            href: item.href !== void 0 ? item.href : "#"
+          },
+          index
+        )
+      ) }) })
+    }
+  );
 }
 function TopLevel({ title, href }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8006,14 +8046,35 @@ function Navigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }),
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+    section.links ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        role: "list",
+        className: "border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
+        children: /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Link10__default.default,
+          {
+            href: section.href || "/",
+            onClick: onLinkClick,
+            className: clsx12__default.default(
+              "text-foreground inline-block border-l border-transparent pl-5 text-base/8 sm:pl-4 sm:text-sm/6",
+              "hover:border-nsw-grey-950 hover:text-nsw-gray-950 hover:font-semibold",
+              "dark:text-nsw-grey-400",
+              "dark:hover:border-nsw-grey-400 dark:hover:text-white",
+              section.href === pathname && "border-primary text-primary border-l font-semibold dark:border-white"
+            ),
+            children: section.title
+          }
+        ) }, index)
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
         role: "list",
         className: "border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
-        children: section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: section.links && section.links.map((link, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
           Link10__default.default,
           {
             href: link.href,
@@ -8027,10 +8088,10 @@ function Navigation({
             ),
             children: link.title
           }
-        ) }, link.href))
+        ) }, index2))
       }
     )
-  ] }, section.title)) }) });
+  ] }, index)) }) });
 }
 function NavigationMenu({
   className,
@@ -8295,9 +8356,9 @@ function PrevNextLinksPageLink({
 function PrevNextLinks({ navigation: navigation$1 }) {
   const pathname = navigation.usePathname();
   const allLinks = navigation$1.flatMap((section) => section.links);
-  const linkIndex = allLinks.findIndex((link) => link.href === pathname);
-  const previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null;
-  const nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null;
+  const linkIndex = allLinks.findIndex((link) => link?.href === pathname);
+  const previousPage = linkIndex > 0 ? allLinks[linkIndex - 1] : null;
+  const nextPage = linkIndex > -1 && linkIndex < allLinks.length - 1 ? allLinks[linkIndex + 1] : null;
   if (!nextPage && !previousPage) {
     return null;
   }
@@ -8528,13 +8589,29 @@ function SidebarNavigation({
 }) {
   const pathname = navigation.usePathname();
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }),
+    section.links ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-foreground font-medium dark:text-white", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        role: "list",
+        className: "border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarLink,
+          {
+            link: { title: section.title, href: "#" },
+            pathname,
+            onLinkClick: onLinkClick || (() => {
+            }),
+            depth: 0
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
         role: "list",
         className: "border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4",
-        children: section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: section.links && section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
           SidebarLink,
           {
             link,
@@ -8842,7 +8919,7 @@ function StepNavigation({
   const navigationWithStatus = React6.useMemo(
     () => navigation.map((section) => ({
       ...section,
-      links: section.links.map((link) => ({
+      links: (section.links ?? []).map((link) => ({
         ...link,
         status: getStatus(link.id ?? "", formStatus)
       }))