@nswds/app 1.72.3 → 1.73.0

package/dist/index.d.cts

@@ -1204,7 +1204,9 @@ type HeadingProps = ({
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     trim?: 'normal' | 'start' | 'end' | 'both';
 } & BaseProps$1);
-declare function Heading({ className, trim, size, level, display, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function Heading({ className, trim, id, size, level, display, children, ...props }: HeadingProps & {
+    id?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare const heroBannerVariants: (props?: ({
     variant?: "white" | "primary-800" | "grey-150" | "accent-800" | "primary-200" | null | undefined;

package/dist/index.d.ts

@@ -1204,7 +1204,9 @@ type HeadingProps = ({
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     trim?: 'normal' | 'start' | 'end' | 'both';
 } & BaseProps$1);
-declare function Heading({ className, trim, size, level, display, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function Heading({ className, trim, id, size, level, display, children, ...props }: HeadingProps & {
+    id?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare const heroBannerVariants: (props?: ({
     variant?: "white" | "primary-800" | "grey-150" | "accent-800" | "primary-200" | null | undefined;

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, Component } from 'react';
+import React5__default, { forwardRef, useEffect, createContext, useState, useContext, useMemo, useRef, useInsertionEffect, useLayoutEffect, Fragment as Fragment$1, createElement, useCallback, Suspense, useId, Children, 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';
@@ -51,6 +51,7 @@ import { Drawer as Drawer$1 } from 'vaul';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { slugifyWithCounter } from '@sindresorhus/slugify';
 import Image2 from 'next/image';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { OTPInput, OTPInputContext } from 'input-otp';
@@ -60,7 +61,6 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { tv } from 'tailwind-variants';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import { slugifyWithCounter } from '@sindresorhus/slugify';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 
@@ -7353,7 +7353,7 @@ function Breadcrumbs({
       return "";
     }
     if (transformLabel) {
-      return segment.replace(/-/g, " ").replace(/_/g, " ").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+      return segment.replace(/[-_]/g, " ").toLowerCase().replace(/^\w/, (c) => c.toUpperCase());
     }
     return segment;
   };
@@ -17412,16 +17412,36 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.70.0"};
+  version: "1.72.4"};
+function isReactElement(child) {
+  return typeof child === "object" && child !== null && "props" in child;
+}
+function textFromChildren(node) {
+  let out = "";
+  Children.forEach(node, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      out += String(child);
+    } else if (isReactElement(child) && child.props && typeof child.props === "object" && "children" in child.props) {
+      out += textFromChildren(child.props.children);
+    }
+  });
+  return out.trim();
+}
 function Heading({
   className,
   trim = "normal",
+  id: id3,
   size = 1,
   level = 1,
   display = false,
+  children,
   ...props
 }) {
   const Element2 = `h${level}`;
+  const slugify = slugifyWithCounter();
+  const computedId = id3 ?? slugify(textFromChildren(children));
+  if (typeof window === "undefined") console.log("SSR id:", id3);
+  else console.log("Client id:", id3);
   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))]",
@@ -17457,6 +17477,7 @@ function Heading({
     Element2,
     {
       ...props,
+      id: computedId,
       className: clsx12(
         className,
         trimClasses[trim],
@@ -17465,7 +17486,8 @@ function Heading({
         "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
         "text-primary-800 dark:text-white",
         sizeClass
-      )
+      ),
+      children
     }
   );
 }
@@ -29856,12 +29878,24 @@ function useActiveSectionObserver(tableOfContents) {
   return currentSection;
 }
 function TableOfContents({ tableOfContents }) {
-  const currentSection = useActiveSectionObserver(tableOfContents);
-  function isActive(section) {
-    if (section.id === currentSection) return true;
-    return section.children?.some(isActive) ?? false;
-  }
-  return /* @__PURE__ */ jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", children: tableOfContents.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const currentSection = useActiveSectionObserver(mounted ? tableOfContents : []);
+  const isActive = useMemo(() => {
+    const check = (section) => {
+      if (section.id === currentSection) return true;
+      return section.children?.some(check) ?? false;
+    };
+    return check;
+  }, [currentSection]);
+  return /* @__PURE__ */ jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", suppressHydrationWarning: true, children: !mounted ? (
+    // lightweight placeholder to avoid layout shift (optional)
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "mt-3 space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-black/10 dark:bg-white/10" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-black/10 dark:bg-white/10" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-48 animate-pulse rounded bg-black/10 dark:bg-white/10" })
+    ] })
+  ) : tableOfContents.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "h2",
       {
@@ -29884,6 +29918,7 @@ function TableOfContents({ tableOfContents }) {
             Link12,
             {
               href: `#${section.id}`,
+              prefetch: false,
               className: clsx12(
                 "-ml-px inline-block border-l pl-4",
                 "hover:border-primary-800 dark:hover:border-white",
@@ -29896,6 +29931,7 @@ function TableOfContents({ tableOfContents }) {
             Link12,
             {
               href: `#${subSection.id}`,
+              prefetch: false,
               className: clsx12(
                 "-ml-px inline-block border-l pl-8",
                 "hover:border-primary-800 dark:hover:border-white",
@@ -29907,7 +29943,7 @@ function TableOfContents({ tableOfContents }) {
         ] }, section.id))
       }
     )
-  ] }) });
+  ] }) : null });
 }
 function getSubtree(options, content) {
   const { asChild, children } = options;