@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/navigation/useActiveHeadingId.d.ts

@@ -1,17 +1,6 @@
 import { type UseStateInitializer } from "../types.js";
 import { type IntersectionObserverRootMargin, type IntersectionObserverThreshold } from "../useIntersectionObserver.js";
-/**
- * @since 6.0.0
- */
-export interface HeadingReference {
-    id: string;
-}
-/**
- * @since 6.0.0
- */
-export interface HeadingReferenceWithChildren extends HeadingReference {
-    items?: readonly HeadingReferenceWithChildren[];
-}
+import { type HeadingReferenceWithChildren } from "./types.js";
 /**
  * @defaultValue `[0.0, 1.0]`
  * @since 6.0.0
@@ -49,6 +38,7 @@ export interface ActiveHeadingIdOptions {
  * This is heavily inspired by:
  * @see https://github.com/mdn/yari/blob/231d6aab8f1c8efe159d268c261446c5b7ae12d9/client/src/document/hooks.ts#L171
  *
+ * @see {@link https://next.react-md.dev/hooks/use-active-heading-id | useActiveHeadingId Demos}
  * @since 6.0.0
  */
 export declare function useActiveHeadingId(options: ActiveHeadingIdOptions): string;

package/dist/navigation/useActiveHeadingId.js

@@ -65,6 +65,7 @@ import { parseCssLengthUnit } from "../utils/parseCssLengthUnit.js";
  * This is heavily inspired by:
  * @see https://github.com/mdn/yari/blob/231d6aab8f1c8efe159d268c261446c5b7ae12d9/client/src/document/hooks.ts#L171
  *
+ * @see {@link https://next.react-md.dev/hooks/use-active-heading-id | useActiveHeadingId Demos}
  * @since 6.0.0
  */ export function useActiveHeadingId(options) {
     const { headings, threshold = DEFAULT_ACTIVE_HEADING_THRESHOLD, getRootMargin = DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN, defaultActiveId = headings[0]?.id ?? "", scrollBottomThreshold = 0.8 } = options;

package/dist/navigation/useActiveHeadingId.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/useActiveHeadingId.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer } from \"../types.js\";\nimport {\n  type IntersectionObserverRootMargin,\n  type IntersectionObserverThreshold,\n  useIntersectionObserver,\n} from \"../useIntersectionObserver.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReference {\n  id: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReferenceWithChildren extends HeadingReference {\n  items?: readonly HeadingReferenceWithChildren[];\n}\n\n/**\n * @defaultValue `[0.0, 1.0]`\n * @since 6.0.0\n */\nexport const DEFAULT_ACTIVE_HEADING_THRESHOLD: IntersectionObserverThreshold = [\n  0.0, 1.0,\n];\n\n/**\n * ```tsx\n * const headerHeightVar = window\n *   .getComputedStyle(document.documentElement)\n *   .getPropertyValue(\"--rmd-layout-header-height\");\n * const headerHeight = parseCssLengthUnit({\n *   value: headerHeightVar || \"3.5rem\",\n * });\n\n * return `-${headerHeight}px 0px 0px 0px`;\n * ```\n * @since 6.0.0\n */\nexport const DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN = (): string => {\n  const headerHeightVar = window\n    .getComputedStyle(document.documentElement)\n    .getPropertyValue(\"--rmd-layout-header-height\");\n  const headerHeight = parseCssLengthUnit({\n    value: headerHeightVar || \"3.5rem\",\n  });\n\n  return `-${headerHeight}px 0px 0px 0px`;\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getHeadingElements(\n  items: readonly HeadingReferenceWithChildren[]\n): HTMLElement[] {\n  const headings: HTMLElement[] = [];\n  items.forEach((item) => {\n    const heading = document.getElementById(item.id);\n    if (heading) {\n      headings.push(heading);\n    }\n\n    if (item.items) {\n      headings.push(...getHeadingElements(item.items));\n    }\n  });\n\n  return headings;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLastHeadingId(\n  items: readonly HeadingReferenceWithChildren[]\n): string {\n  const last = items.at(-1);\n  if (!last) {\n    return \"\";\n  }\n\n  if (last.items) {\n    return getLastHeadingId(last.items);\n  }\n\n  return last.id;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst isScrolledNearPageBottom = (threshold: number): boolean =>\n  window.scrollY >= document.documentElement.scrollHeight * threshold;\n\n/**\n * @since 6.0.0\n */\nexport interface ActiveHeadingIdOptions {\n  headings: readonly HeadingReferenceWithChildren[];\n\n  /** @see {@link DEFAULT_ACTIVE_HEADING_THRESHOLD} */\n  threshold?: IntersectionObserverThreshold;\n\n  /** @see {@link DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN} */\n  getRootMargin?: () => IntersectionObserverRootMargin;\n\n  /** @defaultValue `headings[0]?.id ?? \"\"` */\n  defaultActiveId?: UseStateInitializer<string>;\n\n  /** @defaultValue `0.8` */\n  scrollBottomThreshold?: number;\n}\n\n/**\n * This is heavily inspired by:\n * @see https://github.com/mdn/yari/blob/231d6aab8f1c8efe159d268c261446c5b7ae12d9/client/src/document/hooks.ts#L171\n *\n * @since 6.0.0\n */\nexport function useActiveHeadingId(options: ActiveHeadingIdOptions): string {\n  const {\n    headings,\n    threshold = DEFAULT_ACTIVE_HEADING_THRESHOLD,\n    getRootMargin = DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN,\n    defaultActiveId = headings[0]?.id ?? \"\",\n    scrollBottomThreshold = 0.8,\n  } = options;\n  const elements = useRef<Map<string, boolean>>();\n  const isFirstRender = useRef(true);\n  const [activeHeadingId, setActiveHeadingId] = useState(defaultActiveId);\n  useIntersectionObserver({\n    threshold,\n    getRootMargin,\n    getTargets: useCallback(() => {\n      const headingElements = getHeadingElements(headings);\n      const lookup = new Map<string, boolean>();\n      headingElements.forEach((heading) => {\n        lookup.set(heading.id, false);\n      });\n      elements.current = lookup;\n\n      return headingElements;\n    }, [headings]),\n    onUpdate: useCallback(\n      (entries) => {\n        const lookup = elements.current;\n        if (!lookup) {\n          return;\n        }\n\n        entries.forEach((entry) => {\n          lookup.set(entry.target.id, entry.isIntersecting);\n        });\n\n        // get the first visible/intersecting item and set it\n        let foundId = [...lookup.entries()].find(\n          ([_id, isIntersecting]) => isIntersecting\n        )?.[0];\n        if (\n          !foundId &&\n          isFirstRender.current &&\n          isScrolledNearPageBottom(scrollBottomThreshold)\n        ) {\n          foundId = getLastHeadingId(headings);\n        }\n\n        isFirstRender.current = false;\n\n        // if there isn't a found id, it might be a really large section where\n        // another heading isn't visible, so maintain the previous one\n        if (foundId) {\n          setActiveHeadingId(foundId);\n        }\n      },\n      [headings, scrollBottomThreshold]\n    ),\n  });\n\n  return activeHeadingId;\n}\n"],"names":["useCallback","useRef","useState","useIntersectionObserver","parseCssLengthUnit","DEFAULT_ACTIVE_HEADING_THRESHOLD","DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN","headerHeightVar","window","getComputedStyle","document","documentElement","getPropertyValue","headerHeight","value","getHeadingElements","items","headings","forEach","item","heading","getElementById","id","push","getLastHeadingId","last","at","isScrolledNearPageBottom","threshold","scrollY","scrollHeight","useActiveHeadingId","options","getRootMargin","defaultActiveId","scrollBottomThreshold","elements","isFirstRender","activeHeadingId","setActiveHeadingId","getTargets","headingElements","lookup","Map","set","current","onUpdate","entries","entry","target","isIntersecting","foundId","find","_id"],"mappings":"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"}
+{"version":3,"sources":["../../src/navigation/useActiveHeadingId.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer } from \"../types.js\";\nimport {\n  type IntersectionObserverRootMargin,\n  type IntersectionObserverThreshold,\n  useIntersectionObserver,\n} from \"../useIntersectionObserver.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\nimport { type HeadingReferenceWithChildren } from \"./types.js\";\n\n/**\n * @defaultValue `[0.0, 1.0]`\n * @since 6.0.0\n */\nexport const DEFAULT_ACTIVE_HEADING_THRESHOLD: IntersectionObserverThreshold = [\n  0.0, 1.0,\n];\n\n/**\n * ```tsx\n * const headerHeightVar = window\n *   .getComputedStyle(document.documentElement)\n *   .getPropertyValue(\"--rmd-layout-header-height\");\n * const headerHeight = parseCssLengthUnit({\n *   value: headerHeightVar || \"3.5rem\",\n * });\n\n * return `-${headerHeight}px 0px 0px 0px`;\n * ```\n * @since 6.0.0\n */\nexport const DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN = (): string => {\n  const headerHeightVar = window\n    .getComputedStyle(document.documentElement)\n    .getPropertyValue(\"--rmd-layout-header-height\");\n  const headerHeight = parseCssLengthUnit({\n    value: headerHeightVar || \"3.5rem\",\n  });\n\n  return `-${headerHeight}px 0px 0px 0px`;\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getHeadingElements(\n  items: readonly HeadingReferenceWithChildren[]\n): readonly HTMLElement[] {\n  const headings: HTMLElement[] = [];\n  items.forEach((item) => {\n    const heading = document.getElementById(item.id);\n    if (heading) {\n      headings.push(heading);\n    }\n\n    if (item.items) {\n      headings.push(...getHeadingElements(item.items));\n    }\n  });\n\n  return headings;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLastHeadingId(\n  items: readonly HeadingReferenceWithChildren[]\n): string {\n  const last = items.at(-1);\n  if (!last) {\n    return \"\";\n  }\n\n  if (last.items) {\n    return getLastHeadingId(last.items);\n  }\n\n  return last.id;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst isScrolledNearPageBottom = (threshold: number): boolean =>\n  window.scrollY >= document.documentElement.scrollHeight * threshold;\n\n/**\n * @since 6.0.0\n */\nexport interface ActiveHeadingIdOptions {\n  headings: readonly HeadingReferenceWithChildren[];\n\n  /** @see {@link DEFAULT_ACTIVE_HEADING_THRESHOLD} */\n  threshold?: IntersectionObserverThreshold;\n\n  /** @see {@link DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN} */\n  getRootMargin?: () => IntersectionObserverRootMargin;\n\n  /** @defaultValue `headings[0]?.id ?? \"\"` */\n  defaultActiveId?: UseStateInitializer<string>;\n\n  /** @defaultValue `0.8` */\n  scrollBottomThreshold?: number;\n}\n\n/**\n * This is heavily inspired by:\n * @see https://github.com/mdn/yari/blob/231d6aab8f1c8efe159d268c261446c5b7ae12d9/client/src/document/hooks.ts#L171\n *\n * @see {@link https://next.react-md.dev/hooks/use-active-heading-id | useActiveHeadingId Demos}\n * @since 6.0.0\n */\nexport function useActiveHeadingId(options: ActiveHeadingIdOptions): string {\n  const {\n    headings,\n    threshold = DEFAULT_ACTIVE_HEADING_THRESHOLD,\n    getRootMargin = DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN,\n    defaultActiveId = headings[0]?.id ?? \"\",\n    scrollBottomThreshold = 0.8,\n  } = options;\n  const elements = useRef<Map<string, boolean>>();\n  const isFirstRender = useRef(true);\n  const [activeHeadingId, setActiveHeadingId] = useState(defaultActiveId);\n  useIntersectionObserver({\n    threshold,\n    getRootMargin,\n    getTargets: useCallback(() => {\n      const headingElements = getHeadingElements(headings);\n      const lookup = new Map<string, boolean>();\n      headingElements.forEach((heading) => {\n        lookup.set(heading.id, false);\n      });\n      elements.current = lookup;\n\n      return headingElements;\n    }, [headings]),\n    onUpdate: useCallback(\n      (entries) => {\n        const lookup = elements.current;\n        if (!lookup) {\n          return;\n        }\n\n        entries.forEach((entry) => {\n          lookup.set(entry.target.id, entry.isIntersecting);\n        });\n\n        // get the first visible/intersecting item and set it\n        let foundId = [...lookup.entries()].find(\n          ([_id, isIntersecting]) => isIntersecting\n        )?.[0];\n        if (\n          !foundId &&\n          isFirstRender.current &&\n          isScrolledNearPageBottom(scrollBottomThreshold)\n        ) {\n          foundId = getLastHeadingId(headings);\n        }\n\n        isFirstRender.current = false;\n\n        // if there isn't a found id, it might be a really large section where\n        // another heading isn't visible, so maintain the previous one\n        if (foundId) {\n          setActiveHeadingId(foundId);\n        }\n      },\n      [headings, scrollBottomThreshold]\n    ),\n  });\n\n  return activeHeadingId;\n}\n"],"names":["useCallback","useRef","useState","useIntersectionObserver","parseCssLengthUnit","DEFAULT_ACTIVE_HEADING_THRESHOLD","DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN","headerHeightVar","window","getComputedStyle","document","documentElement","getPropertyValue","headerHeight","value","getHeadingElements","items","headings","forEach","item","heading","getElementById","id","push","getLastHeadingId","last","at","isScrolledNearPageBottom","threshold","scrollY","scrollHeight","useActiveHeadingId","options","getRootMargin","defaultActiveId","scrollBottomThreshold","elements","isFirstRender","activeHeadingId","setActiveHeadingId","getTargets","headingElements","lookup","Map","set","current","onUpdate","entries","entry","target","isIntersecting","foundId","find","_id"],"mappings":"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"}

package/dist/navigation/useNavigationExpansion.d.ts

@@ -99,6 +99,8 @@ export interface NavigationExpansionImplementation extends NavigationExpansion {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
 export declare function useNavigationExpansion(options: NavigationExpansionOptions): NavigationExpansionImplementation;

package/dist/navigation/useNavigationExpansion.js

@@ -28,6 +28,8 @@ import { getPartsFromPathname } from "./utils.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */ export function useNavigationExpansion(options) {
     const { pathname, linkComponent, defaultExpandedItems, disableFollowingPathname } = options;

package/dist/navigation/useNavigationExpansion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/useNavigationExpansion.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport {\n  type NavigationExpansion,\n  type NavigationLinkComponent,\n  type NavigationRenderData,\n} from \"./types.js\";\nimport { getPartsFromPathname } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansionOptions {\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n\n  /**\n   * An optional list or set of items that should be expanded before the user\n   * interacts with the navigation items.\n   *\n   * The default implementation works well with the `DefaultNavigationRenderer`\n   * by allowing all \"folders\" (or groups) of items to be expanded by the\n   * `pathname`.\n   *\n   * ```ts\n   * const navItems: readonly NavigationItem[] = [\n   *   {\n   *     type: \"route\",\n   *     href: \"/\",\n   *     children: \"Home\",\n   *   },\n   *   {\n   *     type: \"group\",\n   *     href: \"/group-1\",\n   *     children: \"Group 1\",\n   *     items: [\n   *       {\n   *         type: \"group\",\n   *         href: \"/subgroup-1\",\n   *         children: \"Subgroup 1\",\n   *         items: [\n   *           {\n   *             type: \"route\",\n   *             href: \"/route\",\n   *             children: \"Group 1 > Subgroup 1 > Route\"\n   *           },\n   *         ],\n   *       },\n   *       {\n   *         type: \"route\",\n   *         href: \"/route\",\n   *         children: \"Group 1 > Route\",\n   *       },\n   *     ],\n   *   },\n   * ];\n   * ```\n   *\n   * - `pathname === \"/\"` - No groups expanded\n   *   - Resolves as `new Set([\"/\"])`\n   * - `pathname === \"/group-1/subgroup-1/route\"` - \"Group 1\" and \"Subgroup 1\"\n   *   are expanded\n   *   - Resolves as `new Set([\"/\", \"/group-1\", \"/group-1/route\"])`\n   */\n  defaultExpandedItems?: UseStateInitializer<\n    ReadonlySet<string> | readonly string[]\n  >;\n\n  /**\n   * The default behavior is to update the `expandedItems` set as the `pathname`\n   * updates to capture anytime the user might navigate to outer routes outside\n   * of the `Navigation` component. i.e. Click a link within the page.\n   *\n   * Set this to `true` to disable this behavior.\n   *\n   * @defaultValue `false`\n   */\n  disableFollowingPathname?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansionImplementation extends NavigationExpansion {\n  data: NavigationRenderData;\n  setExpandedItems: UseStateSetter<ReadonlySet<string>>;\n}\n\n/**\n * Used to create the `data` prop for the `Navigation` component and handling\n * the expansion of items.\n *\n * @example Main Usage\n * ```tsx\n * \"use client\";\n * import { Navigation } from \"@react-md/core/navigation/Navigation\";\n * import { useNavigationExpansion } from \"@react-md/core/navigation/useNavigationExpansion\";\n * import Link from \"next/link\";\n * import { usePathname } from \"next/navigation.js\";\n * import { type ReactElement } from \"react\";\n *\n * import { navItems } from \"./navItems.js\";\n *\n * export function Example(): ReactElement {\n *   const pathname = usePathname();\n *   const { data } = useNavigationExpansion({\n *     pathname,\n *     linkComponent: Link,\n *   });\n *\n *   return <Navigation data={data} items={navItems} />;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useNavigationExpansion(\n  options: NavigationExpansionOptions\n): NavigationExpansionImplementation {\n  const {\n    pathname,\n    linkComponent,\n    defaultExpandedItems,\n    disableFollowingPathname,\n  } = options;\n  const {\n    value: expandedItems,\n    setValue: setExpandedItems,\n    toggleValue: toggleExpandedItem,\n  } = useReadonlySet({\n    defaultValue:\n      defaultExpandedItems ?? (() => new Set(getPartsFromPathname(pathname))),\n  });\n\n  const prevPathname = useRef(pathname);\n  useEffect(() => {\n    if (disableFollowingPathname || pathname === prevPathname.current) {\n      return;\n    }\n\n    prevPathname.current = pathname;\n    setExpandedItems((prev) => {\n      const next = new Set([...prev, ...getPartsFromPathname(pathname)]);\n      if (next.size === prev.size) {\n        return prev;\n      }\n\n      return next;\n    });\n  }, [disableFollowingPathname, pathname, setExpandedItems]);\n\n  const data = useMemo<NavigationRenderData>(\n    () => ({\n      pathname,\n      linkComponent,\n      expandedItems,\n      toggleExpandedItem,\n    }),\n    [expandedItems, linkComponent, pathname, toggleExpandedItem]\n  );\n\n  return {\n    data,\n    expandedItems,\n    setExpandedItems,\n    toggleExpandedItem,\n  };\n}\n"],"names":["useEffect","useMemo","useRef","useReadonlySet","getPartsFromPathname","useNavigationExpansion","options","pathname","linkComponent","defaultExpandedItems","disableFollowingPathname","value","expandedItems","setValue","setExpandedItems","toggleValue","toggleExpandedItem","defaultValue","Set","prevPathname","current","prev","next","size","data"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGnD,SAASC,cAAc,QAAQ,uBAAuB;AAMtD,SAASC,oBAAoB,QAAQ,aAAa;AAiFlD;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,uBACdC,OAAmC;IAEnC,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,oBAAoB,EACpBC,wBAAwB,EACzB,GAAGJ;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,aAAaC,kBAAkB,EAChC,GAAGb,eAAe;QACjBc,cACER,wBAAyB,CAAA,IAAM,IAAIS,IAAId,qBAAqBG,UAAS;IACzE;IAEA,MAAMY,eAAejB,OAAOK;IAC5BP,UAAU;QACR,IAAIU,4BAA4BH,aAAaY,aAAaC,OAAO,EAAE;YACjE;QACF;QAEAD,aAAaC,OAAO,GAAGb;QACvBO,iBAAiB,CAACO;YAChB,MAAMC,OAAO,IAAIJ,IAAI;mBAAIG;mBAASjB,qBAAqBG;aAAU;YACjE,IAAIe,KAAKC,IAAI,KAAKF,KAAKE,IAAI,EAAE;gBAC3B,OAAOF;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACZ;QAA0BH;QAAUO;KAAiB;IAEzD,MAAMU,OAAOvB,QACX,IAAO,CAAA;YACLM;YACAC;YACAI;YACAI;QACF,CAAA,GACA;QAACJ;QAAeJ;QAAeD;QAAUS;KAAmB;IAG9D,OAAO;QACLQ;QACAZ;QACAE;QACAE;IACF;AACF"}
+{"version":3,"sources":["../../src/navigation/useNavigationExpansion.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\nimport {\n  type NavigationExpansion,\n  type NavigationLinkComponent,\n  type NavigationRenderData,\n} from \"./types.js\";\nimport { getPartsFromPathname } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansionOptions {\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n\n  /**\n   * An optional list or set of items that should be expanded before the user\n   * interacts with the navigation items.\n   *\n   * The default implementation works well with the `DefaultNavigationRenderer`\n   * by allowing all \"folders\" (or groups) of items to be expanded by the\n   * `pathname`.\n   *\n   * ```ts\n   * const navItems: readonly NavigationItem[] = [\n   *   {\n   *     type: \"route\",\n   *     href: \"/\",\n   *     children: \"Home\",\n   *   },\n   *   {\n   *     type: \"group\",\n   *     href: \"/group-1\",\n   *     children: \"Group 1\",\n   *     items: [\n   *       {\n   *         type: \"group\",\n   *         href: \"/subgroup-1\",\n   *         children: \"Subgroup 1\",\n   *         items: [\n   *           {\n   *             type: \"route\",\n   *             href: \"/route\",\n   *             children: \"Group 1 > Subgroup 1 > Route\"\n   *           },\n   *         ],\n   *       },\n   *       {\n   *         type: \"route\",\n   *         href: \"/route\",\n   *         children: \"Group 1 > Route\",\n   *       },\n   *     ],\n   *   },\n   * ];\n   * ```\n   *\n   * - `pathname === \"/\"` - No groups expanded\n   *   - Resolves as `new Set([\"/\"])`\n   * - `pathname === \"/group-1/subgroup-1/route\"` - \"Group 1\" and \"Subgroup 1\"\n   *   are expanded\n   *   - Resolves as `new Set([\"/\", \"/group-1\", \"/group-1/route\"])`\n   */\n  defaultExpandedItems?: UseStateInitializer<\n    ReadonlySet<string> | readonly string[]\n  >;\n\n  /**\n   * The default behavior is to update the `expandedItems` set as the `pathname`\n   * updates to capture anytime the user might navigate to outer routes outside\n   * of the `Navigation` component. i.e. Click a link within the page.\n   *\n   * Set this to `true` to disable this behavior.\n   *\n   * @defaultValue `false`\n   */\n  disableFollowingPathname?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansionImplementation extends NavigationExpansion {\n  data: NavigationRenderData;\n  setExpandedItems: UseStateSetter<ReadonlySet<string>>;\n}\n\n/**\n * Used to create the `data` prop for the `Navigation` component and handling\n * the expansion of items.\n *\n * @example Main Usage\n * ```tsx\n * \"use client\";\n * import { Navigation } from \"@react-md/core/navigation/Navigation\";\n * import { useNavigationExpansion } from \"@react-md/core/navigation/useNavigationExpansion\";\n * import Link from \"next/link\";\n * import { usePathname } from \"next/navigation.js\";\n * import { type ReactElement } from \"react\";\n *\n * import { navItems } from \"./navItems.js\";\n *\n * export function Example(): ReactElement {\n *   const pathname = usePathname();\n *   const { data } = useNavigationExpansion({\n *     pathname,\n *     linkComponent: Link,\n *   });\n *\n *   return <Navigation data={data} items={navItems} />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport function useNavigationExpansion(\n  options: NavigationExpansionOptions\n): NavigationExpansionImplementation {\n  const {\n    pathname,\n    linkComponent,\n    defaultExpandedItems,\n    disableFollowingPathname,\n  } = options;\n  const {\n    value: expandedItems,\n    setValue: setExpandedItems,\n    toggleValue: toggleExpandedItem,\n  } = useReadonlySet({\n    defaultValue:\n      defaultExpandedItems ?? (() => new Set(getPartsFromPathname(pathname))),\n  });\n\n  const prevPathname = useRef(pathname);\n  useEffect(() => {\n    if (disableFollowingPathname || pathname === prevPathname.current) {\n      return;\n    }\n\n    prevPathname.current = pathname;\n    setExpandedItems((prev) => {\n      const next = new Set([...prev, ...getPartsFromPathname(pathname)]);\n      if (next.size === prev.size) {\n        return prev;\n      }\n\n      return next;\n    });\n  }, [disableFollowingPathname, pathname, setExpandedItems]);\n\n  const data = useMemo<NavigationRenderData>(\n    () => ({\n      pathname,\n      linkComponent,\n      expandedItems,\n      toggleExpandedItem,\n    }),\n    [expandedItems, linkComponent, pathname, toggleExpandedItem]\n  );\n\n  return {\n    data,\n    expandedItems,\n    setExpandedItems,\n    toggleExpandedItem,\n  };\n}\n"],"names":["useEffect","useMemo","useRef","useReadonlySet","getPartsFromPathname","useNavigationExpansion","options","pathname","linkComponent","defaultExpandedItems","disableFollowingPathname","value","expandedItems","setValue","setExpandedItems","toggleValue","toggleExpandedItem","defaultValue","Set","prevPathname","current","prev","next","size","data"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGnD,SAASC,cAAc,QAAQ,uBAAuB;AAMtD,SAASC,oBAAoB,QAAQ,aAAa;AAiFlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,uBACdC,OAAmC;IAEnC,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,oBAAoB,EACpBC,wBAAwB,EACzB,GAAGJ;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,aAAaC,kBAAkB,EAChC,GAAGb,eAAe;QACjBc,cACER,wBAAyB,CAAA,IAAM,IAAIS,IAAId,qBAAqBG,UAAS;IACzE;IAEA,MAAMY,eAAejB,OAAOK;IAC5BP,UAAU;QACR,IAAIU,4BAA4BH,aAAaY,aAAaC,OAAO,EAAE;YACjE;QACF;QAEAD,aAAaC,OAAO,GAAGb;QACvBO,iBAAiB,CAACO;YAChB,MAAMC,OAAO,IAAIJ,IAAI;mBAAIG;mBAASjB,qBAAqBG;aAAU;YACjE,IAAIe,KAAKC,IAAI,KAAKF,KAAKE,IAAI,EAAE;gBAC3B,OAAOF;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACZ;QAA0BH;QAAUO;KAAiB;IAEzD,MAAMU,OAAOvB,QACX,IAAO,CAAA;YACLM;YACAC;YACAI;YACAI;QACF,CAAA,GACA;QAACJ;QAAeJ;QAAeD;QAAUS;KAAmB;IAG9D,OAAO;QACLQ;QACAZ;QACAE;QACAE;IACF;AACF"}

package/dist/navigation/useTableOfContentsHeadings.d.ts

@@ -1,4 +1,4 @@
-import { type HeadingReference, type HeadingReferenceWithChildren } from "./useActiveHeadingId.js";
+import { type TableOfContentsHeadings, type TableOfContentsHeadingsOptions } from "./types.js";
 /**
  * This will find all headings that have an `id` that are not part of a `<nav>`
  * element since that should normally be a table of contents component.
@@ -17,41 +17,6 @@ export declare const DEFAULT_GET_HEADING_DEPTH: (element: Element) => number;
  * @since 6.0.0
  */
 export declare const DEFAULT_GET_HEADING_TEXT: (element: Element) => string;
-/** @since 6.0.0 */
-export interface TableOfContentsHeadingsOptions {
-    /**
-     * This should be a `document.querySelectorAll` query that returns elements
-     * to display in a table of contents component that have a valid id.
-     *
-     * @see {@link DEFAULT_HEADING_SELECTOR}
-     * @defaultValue `main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])`
-     */
-    selector?: string;
-    /**
-     * @see {@link DEFAULT_GET_HEADING_DEPTH}
-     * @defaultValue `(element) => parseInt(element.tagName.substring(1))`
-     */
-    getDepth?: (element: Element) => number;
-    /**
-     * This is used to get the text to display in a table of contents from each
-     * heading element.
-     *
-     * @see {@link DEFAULT_GET_HEADING_TEXT}
-     * @defaultValue `(element) => element.textContent || ""`
-     */
-    getHeadingText?: (element: Element) => string;
-}
-/** @since 6.0.0 */
-export interface TableOfContentsHeading extends HeadingReference {
-    depth: number;
-    children: string;
-}
-/** @since 6.0.0 */
-export interface TableOfContentsHeadingItem extends TableOfContentsHeading, HeadingReferenceWithChildren {
-    items?: TableOfContentsHeadingItem[];
-}
-/** @since 6.0.0 */
-export type TableOfContentsHeadings = TableOfContentsHeadingItem[];
 /**
  * The `useTableOfContentsHeadings` should normally be used with the
  * `useActiveHeadingId` hook to generate a table of contents for the current
@@ -70,6 +35,7 @@ export type TableOfContentsHeadings = TableOfContentsHeadingItem[];
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-table-of-contents-headings | useTableOfContentsHeadings Demos}
  * @since 6.0.0
  */
-export declare function useTableOfContentsHeadings(options?: TableOfContentsHeadingsOptions): readonly HeadingReferenceWithChildren[];
+export declare function useTableOfContentsHeadings(options?: TableOfContentsHeadingsOptions): TableOfContentsHeadings;

package/dist/navigation/useTableOfContentsHeadings.js

@@ -1,6 +1,7 @@
 "use client";
-import { useMemo } from "react";
-import { useSsr } from "../SsrProvider.jsx";
+import { useEffect, useState } from "react";
+import { useSsr } from "../SsrProvider.js";
+import { getTableOfContentsHeadings } from "./getTableOfContentsHeadings.js";
 /**
  * This will find all headings that have an `id` that are not part of a `<nav>`
  * element since that should normally be a table of contents component.
@@ -37,55 +38,31 @@ import { useSsr } from "../SsrProvider.jsx";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-table-of-contents-headings | useTableOfContentsHeadings Demos}
  * @since 6.0.0
  */ export function useTableOfContentsHeadings(options = {}) {
     const { selector = DEFAULT_HEADING_SELECTOR, getDepth = DEFAULT_GET_HEADING_DEPTH, getHeadingText = DEFAULT_GET_HEADING_TEXT } = options;
     const ssr = useSsr();
-    return useMemo(()=>{
-        if (ssr || typeof window === "undefined") {
-            return [];
-        }
-        const root = {
-            id: "",
-            depth: 0,
-            items: [],
-            children: ""
-        };
-        let previous = root;
-        const parents = [];
-        const headings = document.querySelectorAll(selector);
-        headings.forEach((heading)=>{
-            const depth = getDepth(heading);
-            const item = {
-                id: heading.id,
-                depth,
-                items: [],
-                children: getHeadingText(heading)
-            };
-            if (depth > previous.depth) {
-                if (!previous.items) {
-                    previous.items = [];
-                }
-                parents.push(previous);
-            } else if (depth < previous.depth) {
-                while(parents[parents.length - 1].depth >= depth){
-                    parents.pop();
-                }
-            }
-            const i = parents.length - 1;
-            parents[i].items = [
-                ...parents[i].items ?? [],
-                item
-            ];
-            previous = item;
-        });
-        return root.items;
+    const [headings, setHeadings] = useState(()=>getTableOfContentsHeadings({
+            ssr,
+            selector,
+            getDepth,
+            getHeadingText
+        }));
+    useEffect(()=>{
+        setHeadings(getTableOfContentsHeadings({
+            ssr,
+            selector,
+            getDepth,
+            getHeadingText
+        }));
     }, [
         getDepth,
         getHeadingText,
         selector,
         ssr
     ]);
+    return headings;
 }
 
 //# sourceMappingURL=useTableOfContentsHeadings.js.map

package/dist/navigation/useTableOfContentsHeadings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/useTableOfContentsHeadings.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.jsx\";\nimport {\n  type HeadingReference,\n  type HeadingReferenceWithChildren,\n} from \"./useActiveHeadingId.js\";\n\n/**\n * This will find all headings that have an `id` that are not part of a `<nav>`\n * element since that should normally be a table of contents component.\n *\n * @since 6.0.0\n */\nexport const DEFAULT_HEADING_SELECTOR =\n  \"main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])\";\n\n/**\n * This only works for heading elements since it is pretty much:\n * `return parseInt(element.tagName.substring(1))`\n *\n * @since 6.0.0\n */\nexport const DEFAULT_GET_HEADING_DEPTH = (element: Element): number => {\n  const depth = parseInt(element.tagName.substring(1));\n  return Number.isNaN(depth) ? 0 : depth;\n};\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_GET_HEADING_TEXT = (element: Element): string =>\n  element.textContent || \"\";\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingsOptions {\n  /**\n   * This should be a `document.querySelectorAll` query that returns elements\n   * to display in a table of contents component that have a valid id.\n   *\n   * @see {@link DEFAULT_HEADING_SELECTOR}\n   * @defaultValue `main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])`\n   */\n  selector?: string;\n\n  /**\n   * @see {@link DEFAULT_GET_HEADING_DEPTH}\n   * @defaultValue `(element) => parseInt(element.tagName.substring(1))`\n   */\n  getDepth?: (element: Element) => number;\n\n  /**\n   * This is used to get the text to display in a table of contents from each\n   * heading element.\n   *\n   * @see {@link DEFAULT_GET_HEADING_TEXT}\n   * @defaultValue `(element) => element.textContent || \"\"`\n   */\n  getHeadingText?: (element: Element) => string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeading extends HeadingReference {\n  depth: number;\n  children: string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingItem\n  extends TableOfContentsHeading,\n    HeadingReferenceWithChildren {\n  items?: TableOfContentsHeadingItem[];\n}\n\n/** @since 6.0.0 */\nexport type TableOfContentsHeadings = TableOfContentsHeadingItem[];\n\n/**\n * The `useTableOfContentsHeadings` should normally be used with the\n * `useActiveHeadingId` hook to generate a table of contents for the current\n * page.\n *\n * @example Example Usage\n * ```tsx\n * import { useActiveHeadingId } from \"@react-md/core/navigation/useActiveHeadingId\";\n * import { useTableOfContentsHeadings } from \"@react-md/core/navigation/useTableOfContentsHeadings\";\n *\n * function Example() {\n *   const headings = useTableOfContentsHeadings();\n *   const activeHeadingId = useActiveHeadingId({ headings });\n *\n *   return <TableOfContents headings={headings} activeHeadingId={activeHeadingId} />;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTableOfContentsHeadings(\n  options: TableOfContentsHeadingsOptions = {}\n): readonly HeadingReferenceWithChildren[] {\n  const {\n    selector = DEFAULT_HEADING_SELECTOR,\n    getDepth = DEFAULT_GET_HEADING_DEPTH,\n    getHeadingText = DEFAULT_GET_HEADING_TEXT,\n  } = options;\n  const ssr = useSsr();\n\n  return useMemo(() => {\n    if (ssr || typeof window === \"undefined\") {\n      return [];\n    }\n\n    const root = {\n      id: \"\",\n      depth: 0,\n      items: [],\n      children: \"\",\n    } satisfies TableOfContentsHeadingItem;\n    let previous: TableOfContentsHeadingItem = root;\n    const parents: TableOfContentsHeadingItem[] = [];\n    const headings = document.querySelectorAll(selector);\n    headings.forEach((heading) => {\n      const depth = getDepth(heading);\n      const item: TableOfContentsHeadingItem = {\n        id: heading.id,\n        depth,\n        items: [],\n        children: getHeadingText(heading),\n      };\n      if (depth > previous.depth) {\n        if (!previous.items) {\n          previous.items = [];\n        }\n\n        parents.push(previous);\n      } else if (depth < previous.depth) {\n        while (parents[parents.length - 1].depth >= depth) {\n          parents.pop();\n        }\n      }\n      const i = parents.length - 1;\n      parents[i].items = [...(parents[i].items ?? []), item];\n      previous = item;\n    });\n\n    return root.items;\n  }, [getDepth, getHeadingText, selector, ssr]);\n}\n"],"names":["useMemo","useSsr","DEFAULT_HEADING_SELECTOR","DEFAULT_GET_HEADING_DEPTH","element","depth","parseInt","tagName","substring","Number","isNaN","DEFAULT_GET_HEADING_TEXT","textContent","useTableOfContentsHeadings","options","selector","getDepth","getHeadingText","ssr","window","root","id","items","children","previous","parents","headings","document","querySelectorAll","forEach","heading","item","push","length","pop","i"],"mappings":"AAAA;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,MAAM,QAAQ,qBAAqB;AAM5C;;;;;CAKC,GACD,OAAO,MAAMC,2BACX,4EAA4E;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAMC,QAAQC,SAASF,QAAQG,OAAO,CAACC,SAAS,CAAC;IACjD,OAAOC,OAAOC,KAAK,CAACL,SAAS,IAAIA;AACnC,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMM,2BAA2B,CAACP,UACvCA,QAAQQ,WAAW,IAAI,GAAG;AA6C5B;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,2BACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAWb,wBAAwB,EACnCc,WAAWb,yBAAyB,EACpCc,iBAAiBN,wBAAwB,EAC1C,GAAGG;IACJ,MAAMI,MAAMjB;IAEZ,OAAOD,QAAQ;QACb,IAAIkB,OAAO,OAAOC,WAAW,aAAa;YACxC,OAAO,EAAE;QACX;QAEA,MAAMC,OAAO;YACXC,IAAI;YACJhB,OAAO;YACPiB,OAAO,EAAE;YACTC,UAAU;QACZ;QACA,IAAIC,WAAuCJ;QAC3C,MAAMK,UAAwC,EAAE;QAChD,MAAMC,WAAWC,SAASC,gBAAgB,CAACb;QAC3CW,SAASG,OAAO,CAAC,CAACC;YAChB,MAAMzB,QAAQW,SAASc;YACvB,MAAMC,OAAmC;gBACvCV,IAAIS,QAAQT,EAAE;gBACdhB;gBACAiB,OAAO,EAAE;gBACTC,UAAUN,eAAea;YAC3B;YACA,IAAIzB,QAAQmB,SAASnB,KAAK,EAAE;gBAC1B,IAAI,CAACmB,SAASF,KAAK,EAAE;oBACnBE,SAASF,KAAK,GAAG,EAAE;gBACrB;gBAEAG,QAAQO,IAAI,CAACR;YACf,OAAO,IAAInB,QAAQmB,SAASnB,KAAK,EAAE;gBACjC,MAAOoB,OAAO,CAACA,QAAQQ,MAAM,GAAG,EAAE,CAAC5B,KAAK,IAAIA,MAAO;oBACjDoB,QAAQS,GAAG;gBACb;YACF;YACA,MAAMC,IAAIV,QAAQQ,MAAM,GAAG;YAC3BR,OAAO,CAACU,EAAE,CAACb,KAAK,GAAG;mBAAKG,OAAO,CAACU,EAAE,CAACb,KAAK,IAAI,EAAE;gBAAGS;aAAK;YACtDP,WAAWO;QACb;QAEA,OAAOX,KAAKE,KAAK;IACnB,GAAG;QAACN;QAAUC;QAAgBF;QAAUG;KAAI;AAC9C"}
+{"version":3,"sources":["../../src/navigation/useTableOfContentsHeadings.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { getTableOfContentsHeadings } from \"./getTableOfContentsHeadings.js\";\nimport {\n  type TableOfContentsHeadings,\n  type TableOfContentsHeadingsOptions,\n} from \"./types.js\";\n\n/**\n * This will find all headings that have an `id` that are not part of a `<nav>`\n * element since that should normally be a table of contents component.\n *\n * @since 6.0.0\n */\nexport const DEFAULT_HEADING_SELECTOR =\n  \"main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])\";\n\n/**\n * This only works for heading elements since it is pretty much:\n * `return parseInt(element.tagName.substring(1))`\n *\n * @since 6.0.0\n */\nexport const DEFAULT_GET_HEADING_DEPTH = (element: Element): number => {\n  const depth = parseInt(element.tagName.substring(1));\n  return Number.isNaN(depth) ? 0 : depth;\n};\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_GET_HEADING_TEXT = (element: Element): string =>\n  element.textContent || \"\";\n\n/**\n * The `useTableOfContentsHeadings` should normally be used with the\n * `useActiveHeadingId` hook to generate a table of contents for the current\n * page.\n *\n * @example Example Usage\n * ```tsx\n * import { useActiveHeadingId } from \"@react-md/core/navigation/useActiveHeadingId\";\n * import { useTableOfContentsHeadings } from \"@react-md/core/navigation/useTableOfContentsHeadings\";\n *\n * function Example() {\n *   const headings = useTableOfContentsHeadings();\n *   const activeHeadingId = useActiveHeadingId({ headings });\n *\n *   return <TableOfContents headings={headings} activeHeadingId={activeHeadingId} />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/hooks/use-table-of-contents-headings | useTableOfContentsHeadings Demos}\n * @since 6.0.0\n */\nexport function useTableOfContentsHeadings(\n  options: TableOfContentsHeadingsOptions = {}\n): TableOfContentsHeadings {\n  const {\n    selector = DEFAULT_HEADING_SELECTOR,\n    getDepth = DEFAULT_GET_HEADING_DEPTH,\n    getHeadingText = DEFAULT_GET_HEADING_TEXT,\n  } = options;\n  const ssr = useSsr();\n  const [headings, setHeadings] = useState(() =>\n    getTableOfContentsHeadings({\n      ssr,\n      selector,\n      getDepth,\n      getHeadingText,\n    })\n  );\n  useEffect(() => {\n    setHeadings(\n      getTableOfContentsHeadings({ ssr, selector, getDepth, getHeadingText })\n    );\n  }, [getDepth, getHeadingText, selector, ssr]);\n\n  return headings;\n}\n"],"names":["useEffect","useState","useSsr","getTableOfContentsHeadings","DEFAULT_HEADING_SELECTOR","DEFAULT_GET_HEADING_DEPTH","element","depth","parseInt","tagName","substring","Number","isNaN","DEFAULT_GET_HEADING_TEXT","textContent","useTableOfContentsHeadings","options","selector","getDepth","getHeadingText","ssr","headings","setHeadings"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,0BAA0B,QAAQ,kCAAkC;AAM7E;;;;;CAKC,GACD,OAAO,MAAMC,2BACX,4EAA4E;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAMC,QAAQC,SAASF,QAAQG,OAAO,CAACC,SAAS,CAAC;IACjD,OAAOC,OAAOC,KAAK,CAACL,SAAS,IAAIA;AACnC,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMM,2BAA2B,CAACP,UACvCA,QAAQQ,WAAW,IAAI,GAAG;AAE5B;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,2BACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAWb,wBAAwB,EACnCc,WAAWb,yBAAyB,EACpCc,iBAAiBN,wBAAwB,EAC1C,GAAGG;IACJ,MAAMI,MAAMlB;IACZ,MAAM,CAACmB,UAAUC,YAAY,GAAGrB,SAAS,IACvCE,2BAA2B;YACzBiB;YACAH;YACAC;YACAC;QACF;IAEFnB,UAAU;QACRsB,YACEnB,2BAA2B;YAAEiB;YAAKH;YAAUC;YAAUC;QAAe;IAEzE,GAAG;QAACD;QAAUC;QAAgBF;QAAUG;KAAI;IAE5C,OAAOC;AACT"}

package/dist/overlay/Overlay.d.ts

@@ -1,6 +1,12 @@
 import { type HTMLAttributes } from "react";
 import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
 import { type CSSTransitionComponentProps, type TransitionActions } from "../transition/types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-overlay-background-color"?: string;
+        "--rmd-overlay-z-index"?: number;
+    }
+}
 /**
  * @since 6.0.0 Added `align` and `justify` props.
  * @since 6.0.0 Renamed `hidden` to `noOpacity`.
@@ -48,7 +54,9 @@ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
  *
  * @example Simple Example
  * ```tsx
- * import { Button, Overlay, useToggle } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Overlay } from "@react-md/core/overlay/Overlay";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -63,6 +71,7 @@ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}
  * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
  */

package/dist/overlay/Overlay.js

@@ -4,13 +4,15 @@ import { forwardRef } from "react";
 import { useSsr } from "../SsrProvider.js";
 import { Portal } from "../portal/Portal.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
-import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./overlayStyles.js";
+import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./styles.js";
 /**
  * **Client Component**
  *
  * @example Simple Example
  * ```tsx
- * import { Button, Overlay, useToggle } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Overlay } from "@react-md/core/overlay/Overlay";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -25,6 +27,7 @@ import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}
  * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
  */ export const Overlay = /*#__PURE__*/ forwardRef(function Overlay(props, nodeRef) {

package/dist/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./overlayStyles.js\";\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n */\nexport interface OverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` for when the overlay should be visible. Toggling this\n   * value will trigger the enter/exit animation.\n   */\n  visible: boolean;\n\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button, Overlay, useToggle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n  function Overlay(props, nodeRef) {\n    const {\n      children,\n      className,\n      visible,\n      noOpacity = false,\n      clickable = !noOpacity,\n      temporary = true,\n      timeout = DEFAULT_OVERLAY_TIMEOUT,\n      classNames = DEFAULT_OVERLAY_CLASSNAMES,\n      disableTransition = false,\n      align = \"center\",\n      justify = \"center\",\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      exitedHidden = true,\n      disablePortal: propDisablePortal = false,\n      ...remaining\n    } = props;\n\n    const ssr = useSsr();\n    const { elementProps, rendered, disablePortal } = useCSSTransition({\n      nodeRef,\n      transitionIn: visible,\n      timeout: noOpacity ? 0 : timeout,\n      classNames: noOpacity ? \"\" : classNames,\n      className: overlay({\n        visible,\n        clickable,\n        align,\n        justify,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps}>\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAE3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,qBAAqB;AAsD5B;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-overlay-background-color\"?: string;\n    \"--rmd-overlay-z-index\"?: number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n */\nexport interface OverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` for when the overlay should be visible. Toggling this\n   * value will trigger the enter/exit animation.\n   */\n  visible: boolean;\n\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n  function Overlay(props, nodeRef) {\n    const {\n      children,\n      className,\n      visible,\n      noOpacity = false,\n      clickable = !noOpacity,\n      temporary = true,\n      timeout = DEFAULT_OVERLAY_TIMEOUT,\n      classNames = DEFAULT_OVERLAY_CLASSNAMES,\n      disableTransition = false,\n      align = \"center\",\n      justify = \"center\",\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      exitedHidden = true,\n      disablePortal: propDisablePortal = false,\n      ...remaining\n    } = props;\n\n    const ssr = useSsr();\n    const { elementProps, rendered, disablePortal } = useCSSTransition({\n      nodeRef,\n      transitionIn: visible,\n      timeout: noOpacity ? 0 : timeout,\n      classNames: noOpacity ? \"\" : classNames,\n      className: overlay({\n        visible,\n        clickable,\n        align,\n        justify,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps}>\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAE3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AA6DrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}

package/dist/overlay/_overlay.scss

@@ -1,17 +1,40 @@
+////
+/// @group overlay
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../theme/colors";
 @use "../transition/transition";
 
+/// Set to `true` to disable all the styles.
+/// @type Boolean
 $disable-everything: false !default;
+
+/// The default `Overlay` background color.
+/// @type Color
 $background-color: rgba(colors.$black, 0.4) !default;
+
+/// The default `Overlay` z-index.
+/// @type Number
 $z-index: utils.$temporary-element-z-index !default;
 
+/// The default `Overlay` enter/exit transition duration
+/// @type Number
 $transition-duration: transition.$linear-duration !default;
+
+/// The default `Overlay` enter/exit transition timing function
+/// @type Number
 $transition-timing-function: transition.$linear-timing-function !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (background-color, z-index);
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "overlay");
   @if $fallback {
@@ -21,16 +44,24 @@ $variables: (background-color, z-index);
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "overlay")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -38,6 +69,10 @@ $variables: (background-color, z-index);
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(overlay, $disable-layer) {

package/dist/overlay/{overlayStyles.d.ts → styles.d.ts}

@@ -1,10 +1,4 @@
 import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-overlay-background-color"?: string;
-        "--rmd-overlay-z-index"?: number;
-    }
-}
 /** @since 6.0.0 */
 export interface OverlayClassNameOptions {
     className?: string;

package/dist/overlay/{overlayStyles.js → styles.js}

@@ -25,4 +25,4 @@ const styles = bem("rmd-overlay");
     enterDone: "rmd-overlay--active"
 };
 
-//# sourceMappingURL=overlayStyles.js.map
+//# sourceMappingURL=styles.js.map

package/dist/overlay/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/overlay/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type BoxAlignItems,\n  type BoxJustifyContent,\n  box,\n} from \"../box/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-overlay\");\n\n/** @since 6.0.0 */\nexport interface OverlayClassNameOptions {\n  className?: string;\n\n  visible: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  clickable?: boolean;\n\n  /** @defaultValue `false` */\n  absolute?: boolean;\n\n  /** @defaultValue `\"center\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"center\"` */\n  justify?: BoxJustifyContent;\n}\n\n/**\n * @since 6.0.0\n */\nexport function overlay(\n  options: OverlayClassNameOptions & { active?: boolean }\n): string {\n  const {\n    visible,\n    active,\n    absolute = false,\n    clickable = false,\n    align = \"center\",\n    justify = \"center\",\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      visible,\n      clickable,\n      absolute,\n    }),\n    box({\n      align,\n      justify,\n      disablePadding: true,\n    }),\n    className\n  );\n}\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT = 150 as const satisfies TransitionTimeout;\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES = {\n  appearActive: \"rmd-overlay--active\",\n  appearDone: \"rmd-overlay--active\",\n  enterActive: \"rmd-overlay--active\",\n  enterDone: \"rmd-overlay--active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAGEC,GAAG,QACE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwBnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAME,0BAA0B,IAAyC;AAEhF,iBAAiB,GACjB,OAAO,MAAMC,6BAA6B;IACxCC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAA6C"}

package/dist/portal/Portal.d.ts

@@ -29,6 +29,7 @@ export interface PortalProps {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @see {@link PortalContainerProvider}
  * @see {@link usePortalContainer}
  */

package/dist/portal/Portal.js

@@ -18,6 +18,7 @@ import { usePortalContainer } from "./PortalContainerProvider.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @see {@link PortalContainerProvider}
  * @see {@link usePortalContainer}
  */ export function Portal(props) {

package/dist/portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePortalContainer } from \"./PortalContainerProvider.js\";\n\n/**\n * @since 6.0.0 Removed the `into` and `intoId` props. Use the\n * `PortalContainerProvider` instead.\n */\nexport interface PortalProps {\n  children: ReactNode;\n\n  /**\n   * Setting this to `true` will disable the portal behavior and just render\n   * the `children` in the normal DOM tree.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Portals are a great way to render temporary elements like dialogs, tooltips,\n * and menus at a different port of the DOM. This implementation will render\n * the `children` in the current {@link PortalContainer} element.\n *\n * @example Simple Example\n * ```tsx\n * import { Portal } from \"@react-md/portal\";\n *\n * function Example() {\n *   return <Portal><div>Some Content</div></Portal>;\n * }\n * ```\n *\n * @see {@link PortalContainerProvider}\n * @see {@link usePortalContainer}\n */\nexport function Portal(props: PortalProps): ReactElement {\n  const { children, disabled = false } = props;\n  const container = usePortalContainer();\n  if (!container || disabled) {\n    return <>{disabled && children}</>;\n  }\n\n  return createPortal(children, container);\n}\n"],"names":["createPortal","usePortalContainer","Portal","props","children","disabled","container"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,YAAY;AAEzC,SAASC,kBAAkB,QAAQ,+BAA+B;AAkBlE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGF;IACvC,MAAMG,YAAYL;IAClB,IAAI,CAACK,aAAaD,UAAU;QAC1B,qBAAO;sBAAGA,YAAYD;;IACxB;IAEA,qBAAOJ,aAAaI,UAAUE;AAChC"}
+{"version":3,"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePortalContainer } from \"./PortalContainerProvider.js\";\n\n/**\n * @since 6.0.0 Removed the `into` and `intoId` props. Use the\n * `PortalContainerProvider` instead.\n */\nexport interface PortalProps {\n  children: ReactNode;\n\n  /**\n   * Setting this to `true` will disable the portal behavior and just render\n   * the `children` in the normal DOM tree.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Portals are a great way to render temporary elements like dialogs, tooltips,\n * and menus at a different port of the DOM. This implementation will render\n * the `children` in the current {@link PortalContainer} element.\n *\n * @example Simple Example\n * ```tsx\n * import { Portal } from \"@react-md/portal\";\n *\n * function Example() {\n *   return <Portal><div>Some Content</div></Portal>;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/portal | Portal Demos}\n * @see {@link PortalContainerProvider}\n * @see {@link usePortalContainer}\n */\nexport function Portal(props: PortalProps): ReactElement {\n  const { children, disabled = false } = props;\n  const container = usePortalContainer();\n  if (!container || disabled) {\n    return <>{disabled && children}</>;\n  }\n\n  return createPortal(children, container);\n}\n"],"names":["createPortal","usePortalContainer","Portal","props","children","disabled","container"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,YAAY;AAEzC,SAASC,kBAAkB,QAAQ,+BAA+B;AAkBlE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGF;IACvC,MAAMG,YAAYL;IAClB,IAAI,CAACK,aAAaD,UAAU;QAC1B,qBAAO;sBAAGA,YAAYD;;IACxB;IAEA,qBAAOJ,aAAaI,UAAUE;AAChC"}

package/dist/portal/PortalContainerProvider.d.ts

@@ -33,6 +33,7 @@ export interface PortalContainerProviderProps {
  * `<div id="rmd-portal-container"></div>` will be added as the last child to
  * the `document.body` and be used as the container element.
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @see {@link Portal}
  * @since 6.0.0
  */

package/dist/portal/PortalContainerProvider.js

@@ -21,6 +21,7 @@ const { Provider } = context;
  * `<div id="rmd-portal-container"></div>` will be added as the last child to
  * the `document.body` and be used as the container element.
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @see {@link Portal}
  * @since 6.0.0
  */ export function PortalContainerProvider(props) {

package/dist/portal/PortalContainerProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type PortalContainerNode = Element | DocumentFragment | null;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type PortalContainer =\n  | PortalContainerNode\n  | RefObject<PortalContainerNode>;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainerNode = null;\n\nconst getPortalContainer = (): PortalContainerNode =>\n  typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainerNode>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function usePortalContainer(): PortalContainerNode {\n  return useContext(context);\n}\n\n/** @since 6.0.0 */\nexport interface PortalContainerProviderProps {\n  /**\n   * An optional container element to use. When this is `undefined`, a\n   * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n   * the `document.body` and be used as the container element.\n   */\n  container?: PortalContainer;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n *\n * @see {@link Portal}\n * @since 6.0.0\n */\nexport function PortalContainerProvider(\n  props: PortalContainerProviderProps\n): ReactElement {\n  const { container, children } = props;\n  const [value, setValue] = useState<PortalContainerNode>(portalContainer);\n  useEffect(() => {\n    if (container && \"current\" in container) {\n      setValue(container.current);\n      return;\n    }\n\n    if (typeof container !== \"undefined\") {\n      setValue(container);\n      return;\n    }\n\n    if (!portalContainer) {\n      portalContainer = document.createElement(\"div\");\n      portalContainer.id = PORTAL_CONTAINER_ID;\n    }\n    if (!document.body.contains(portalContainer)) {\n      document.body.appendChild(portalContainer);\n    }\n\n    setValue(portalContainer);\n\n    return () => {\n      if (portalContainer && document.body.contains(portalContainer)) {\n        document.body.removeChild(portalContainer);\n      }\n    };\n  }, [container]);\n\n  const containerValue =\n    (container && \"current\" in container) || !container ? value : container;\n  return <Provider value={containerValue}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","current","createElement","id","contains","appendChild","removeChild","containerValue"],"mappings":"AAAA;;AAEA,SAIEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACH,QAAQ;AAgBf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAuC;AAE3C,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAAmCM;AACnDI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;CAUC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA8BE;IACxDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpCG,SAASH;YACT;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASa,aAAa,CAAC;YACzChB,gBAAgBiB,EAAE,GAAGlB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;YAC5CG,SAASC,IAAI,CAACe,WAAW,CAACnB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACgB,WAAW,CAACpB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,MAAMU,iBACJ,AAACV,aAAa,aAAaA,aAAc,CAACA,YAAYE,QAAQF;IAChE,qBAAO,KAACJ;QAASM,OAAOQ;kBAAiBT;;AAC3C"}
+{"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type PortalContainerNode = Element | DocumentFragment | null;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type PortalContainer =\n  | PortalContainerNode\n  | RefObject<PortalContainerNode>;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainerNode = null;\n\nconst getPortalContainer = (): PortalContainerNode =>\n  typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainerNode>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function usePortalContainer(): PortalContainerNode {\n  return useContext(context);\n}\n\n/** @since 6.0.0 */\nexport interface PortalContainerProviderProps {\n  /**\n   * An optional container element to use. When this is `undefined`, a\n   * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n   * the `document.body` and be used as the container element.\n   */\n  container?: PortalContainer;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n *\n * @see {@link https://next.react-md.dev/components/portal | Portal Demos}\n * @see {@link Portal}\n * @since 6.0.0\n */\nexport function PortalContainerProvider(\n  props: PortalContainerProviderProps\n): ReactElement {\n  const { container, children } = props;\n  const [value, setValue] = useState<PortalContainerNode>(portalContainer);\n  useEffect(() => {\n    if (container && \"current\" in container) {\n      setValue(container.current);\n      return;\n    }\n\n    if (typeof container !== \"undefined\") {\n      setValue(container);\n      return;\n    }\n\n    if (!portalContainer) {\n      portalContainer = document.createElement(\"div\");\n      portalContainer.id = PORTAL_CONTAINER_ID;\n    }\n    if (!document.body.contains(portalContainer)) {\n      document.body.appendChild(portalContainer);\n    }\n\n    setValue(portalContainer);\n\n    return () => {\n      if (portalContainer && document.body.contains(portalContainer)) {\n        document.body.removeChild(portalContainer);\n      }\n    };\n  }, [container]);\n\n  const containerValue =\n    (container && \"current\" in container) || !container ? value : container;\n  return <Provider value={containerValue}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","current","createElement","id","contains","appendChild","removeChild","containerValue"],"mappings":"AAAA;;AAEA,SAIEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACH,QAAQ;AAgBf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAuC;AAE3C,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAAmCM;AACnDI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;;CAWC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA8BE;IACxDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpCG,SAASH;YACT;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASa,aAAa,CAAC;YACzChB,gBAAgBiB,EAAE,GAAGlB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;YAC5CG,SAASC,IAAI,CAACe,WAAW,CAACnB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACgB,WAAW,CAACpB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,MAAMU,iBACJ,AAACV,aAAa,aAAaA,aAAc,CAACA,YAAYE,QAAQF;IAChE,qBAAO,KAACJ;QAASM,OAAOQ;kBAAiBT;;AAC3C"}