@nswds/app 1.75.0 → 1.76.1

package/dist/index.js

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as React5 from 'react';
-import React5__default, { forwardRef, useEffect, createContext, useState, useContext, useMemo, useRef, useInsertionEffect, useLayoutEffect, Fragment as Fragment$1, createElement, useCallback, Suspense, useId, isValidElement, Component } from 'react';
+import React5__default, { forwardRef, useEffect, createContext, useState, useContext, useMemo, useRef, useInsertionEffect, useLayoutEffect, Fragment as Fragment$1, createElement, useCallback, Suspense, useId, Component } from 'react';
 import * as Headless4 from '@headlessui/react';
 import { PopoverGroup, Popover as Popover$1, PopoverButton, PopoverPanel, Dialog as Dialog$1, DialogPanel } from '@headlessui/react';
 import Link12 from 'next/link';
@@ -17412,18 +17412,19 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.74.0"};
+  version: "1.75.0"};
+var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
-  if (typeof nodes === "string" || typeof nodes === "number") return String(nodes);
+  if (typeof nodes === "string" || typeof nodes === "number" || typeof nodes === "bigint")
+    return String(nodes);
   if (Array.isArray(nodes)) return nodes.map(flattenText).join("");
-  if (isValidElement(nodes)) {
-    const { children } = nodes.props;
-    return flattenText(children);
+  if (React5__default.isValidElement(nodes)) {
+    return flattenText(nodes.props.children);
   }
   return "";
 }
-function slugify(input) {
+function baseSlug(input) {
   return input.toLowerCase().trim().replace(/[\s\W]+/g, "-").replace(/^-+|-+$/g, "");
 }
 function Heading({
@@ -17437,6 +17438,7 @@ function Heading({
   ...props
 }) {
   const Tag = `h${level}`;
+  const slugger = useContext(SluggerContext);
   const headingSizeClasses = {
     1: "text-[calc(var(--heading-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
     2: "text-[calc(var(--heading-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
@@ -17471,8 +17473,10 @@ function Heading({
   const computedId = useMemo(() => {
     if (idProp) return idProp;
     const text = flattenText(children);
-    return text ? slugify(text) : void 0;
-  }, [idProp, children]);
+    if (!text) return void 0;
+    const base = baseSlug(text);
+    return slugger ? slugger.slug(base) : base;
+  }, [idProp, children, slugger]);
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -30583,7 +30587,7 @@ function domToSimple(node) {
   }
   throw new Error("Unsupported node type");
 }
-function getHeadings(slugify2 = slugifyWithCounter()) {
+function getHeadings(slugify = slugifyWithCounter()) {
   const content = document.querySelector("article");
   if (!content) {
     return [];
@@ -30594,7 +30598,7 @@ function getHeadings(slugify2 = slugifyWithCounter()) {
   headings.forEach((el) => {
     const simplifiedNode = domToSimple(el);
     const title = getNodeText(simplifiedNode).trim();
-    const slugifiedTitle = slugify2(title);
+    const slugifiedTitle = slugify(title);
     const id3 = el.id || slugifiedTitle;
     const level = parseInt(el.tagName[1]);
     const node = { level, id: id3, title, children: [] };
@@ -30617,27 +30621,58 @@ function getHeadings(slugify2 = slugifyWithCounter()) {
 }
 function usePageHeadings() {
   const [headings, setHeadings] = useState([]);
+  const pathname = usePathname();
+  const observerRef = useRef(null);
+  const observedElRef = useRef(null);
   useEffect(() => {
-    const raf = requestAnimationFrame(() => {
-      setHeadings(getHeadings());
-    });
-    const observer = new MutationObserver(() => {
-      setHeadings(getHeadings());
-    });
-    const article = document.querySelector("article");
-    if (article) {
-      observer.observe(article, {
+    const update = () => setHeadings(getHeadings());
+    const attachToCurrentArticle = () => {
+      const article = document.querySelector("article");
+      if (!article || observedElRef.current === article) return;
+      observerRef.current?.disconnect();
+      const obs = new MutationObserver(() => {
+        update();
+      });
+      obs.observe(article, {
         childList: true,
         subtree: true,
         attributes: true,
         attributeFilter: ["id"]
       });
+      observerRef.current = obs;
+      observedElRef.current = article;
+      requestAnimationFrame(update);
+    };
+    attachToCurrentArticle();
+    const articleParent = document.querySelector("article")?.parentElement;
+    const rootObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of Array.from(mutation.addedNodes)) {
+          if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "article") {
+            attachToCurrentArticle();
+            return;
+          }
+        }
+        for (const node of Array.from(mutation.removedNodes)) {
+          if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "article") {
+            attachToCurrentArticle();
+            return;
+          }
+        }
+      }
+    });
+    if (articleParent) {
+      rootObserver.observe(articleParent, { childList: true });
+    } else {
+      rootObserver.observe(document.body, { childList: true });
     }
     return () => {
-      cancelAnimationFrame(raf);
-      observer.disconnect();
+      rootObserver.disconnect();
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+      observedElRef.current = null;
     };
-  }, []);
+  }, [pathname]);
   return headings;
 }
 function createFormStore(opts) {