@react-md/core 1.0.0-next.16 → 1.0.0-next.17

package/dist/navigation/NavItemLink.js

@@ -13,9 +13,10 @@ import { navItemLink } from "./navItemStyles.js";
  *
  * @since 6.0.0
  */ export const NavItemLink = /*#__PURE__*/ forwardRef(function NavItemLink(props, propRef) {
-    const { as: Component = "a", href, active, activeClassName, beforeAddon, afterAddon, className, children, liProps, spanProps, disabled = !href, onClick, onBlur, onDragStart, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onMouseUp, onTouchMove, onTouchEnd, onTouchStart, tooltipOptions, disableScrollIntoView, ...remaining } = props;
+    const { as: Component = "a", href, active, activeClassName, beforeAddon, afterAddon, className, children, liProps, spanProps, disabled = !href, onClick, onBlur, onDragStart, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onMouseUp, onTouchMove, onTouchEnd, onTouchStart, tooltipOptions, disableRipple, disableScrollIntoView, ...remaining } = props;
     const [linkRef, linkRefCallback] = useEnsuredRef(propRef);
     const { handlers, ripples } = useElementInteraction({
+        mode: disableRipple ? "none" : undefined,
         disabled,
         onClick,
         onBlur,
@@ -37,7 +38,9 @@ import { navItemLink } from "./navItemStyles.js";
     });
     useEffect(()=>{
         const link = linkRef.current;
-        if (!active || !link || disableScrollIntoView || document.activeElement === link) {
+        if (!active || !link || disableScrollIntoView || document.activeElement === link || // do not scroll into view if the collapse transition is occurring since
+        // it makes it animate weirdly
+        link.closest(".rmd-collapse--enter")) {
             return;
         }
         link.scrollIntoView({
@@ -52,6 +55,7 @@ import { navItemLink } from "./navItemStyles.js";
         ...liProps,
         children: [
             /*#__PURE__*/ _jsxs(Component, {
+                "aria-current": active ? "page" : undefined,
                 ...remaining,
                 ...handlers,
                 ...elementProps,

package/dist/navigation/NavItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavItemLink.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useEffect,\n  type AnchorHTMLAttributes,\n  type LiHTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport { navItemLink } from \"./navItemStyles.js\";\nimport {\n  type NavItemContentProps,\n  type NavigationLinkComponent,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\">,\n    NavItemContentProps {\n  /** @defaultValue `\"a\"` */\n  as?: NavigationLinkComponent;\n  href: string;\n\n  /**\n   * Any additional props to provide the wrapping `<li>` element such as\n   * `style`, `className`, and `ref`.\n   */\n  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * Set this to `true` if the link matches the current `pathname`. This will\n   * enable `aria-current=\"true\"` and apply active styling.\n   */\n  active: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n\n  /** @defaultValue `!to && !href` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` to prevent this item from scrolling into view when it\n   * becomes active. It is generally recommended to keep this `true` unless a\n   * custom implementation has been added so that when the temporary navigation\n   * will show the active route.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollIntoView?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(\n  function NavItemLink(props, propRef) {\n    const {\n      as: Component = \"a\",\n      href,\n      active,\n      activeClassName,\n      beforeAddon,\n      afterAddon,\n      className,\n      children,\n      liProps,\n      spanProps,\n      disabled = !href,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      disableScrollIntoView,\n      ...remaining\n    } = props;\n\n    const [linkRef, linkRefCallback] = useEnsuredRef(propRef);\n    const { handlers, ripples } = useElementInteraction({\n      disabled,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      ...handlers,\n    });\n    useEffect(() => {\n      const link = linkRef.current;\n      if (\n        !active ||\n        !link ||\n        disableScrollIntoView ||\n        document.activeElement === link\n      ) {\n        return;\n      }\n\n      link.scrollIntoView({ block: \"center\" });\n    }, [active, disableScrollIntoView, linkRef]);\n\n    return (\n      <NavItem {...liProps}>\n        <Component\n          {...remaining}\n          {...handlers}\n          {...elementProps}\n          ref={linkRefCallback}\n          href={href}\n          className={navItemLink({\n            active,\n            activeClassName,\n            className,\n          })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {ripples}\n        </Component>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </NavItem>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","cssUtils","useElementInteraction","Tooltip","useTooltip","useEnsuredRef","NavItem","navItemLink","NavItemLink","props","propRef","as","Component","href","active","activeClassName","beforeAddon","afterAddon","className","children","liProps","spanProps","disabled","onClick","onBlur","onDragStart","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchMove","onTouchEnd","onTouchStart","tooltipOptions","disableScrollIntoView","remaining","linkRef","linkRefCallback","handlers","ripples","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","link","current","document","activeElement","scrollIntoView","block","ref","span","textOverflow"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,SAAS,QAGJ,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,WAAW,QAAQ,qBAAqB;AA6CjD;;;;CAIC,GACD,OAAO,MAAMC,4BAAcT,WACzB,SAASS,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,IAAIC,YAAY,GAAG,EACnBC,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,WAAW,CAACT,IAAI,EAChBU,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,cAAc,EACdC,qBAAqB,EACrB,GAAGC,WACJ,GAAG3B;IAEJ,MAAM,CAAC4B,SAASC,gBAAgB,GAAGjC,cAAcK;IACjD,MAAM,EAAE6B,QAAQ,EAAEC,OAAO,EAAE,GAAGtC,sBAAsB;QAClDoB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAM,EAAEQ,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGvC,WAAW;QAC7DwC,cAAc;QACdC,iBAAiB;QACjB,GAAGX,cAAc;QACjB,GAAGK,QAAQ;IACb;IACAvC,UAAU;QACR,MAAM8C,OAAOT,QAAQU,OAAO;QAC5B,IACE,CAACjC,UACD,CAACgC,QACDX,yBACAa,SAASC,aAAa,KAAKH,MAC3B;YACA;QACF;QAEAA,KAAKI,cAAc,CAAC;YAAEC,OAAO;QAAS;IACxC,GAAG;QAACrC;QAAQqB;QAAuBE;KAAQ;IAE3C,qBACE,MAAC/B;QAAS,GAAGc,OAAO;;0BAClB,MAACR;gBACE,GAAGwB,SAAS;gBACZ,GAAGG,QAAQ;gBACX,GAAGE,YAAY;gBAChBW,KAAKd;gBACLzB,MAAMA;gBACNK,WAAWX,YAAY;oBACrBO;oBACAC;oBACAG;gBACF;;oBAECF;kCACD,KAACqC;wBACE,GAAGhC,SAAS;wBACb+B,KAAKT;wBACLzB,WAAWjB,SAAS;4BAClBiB,WAAWG,WAAWH;4BACtBoC,cAAc;wBAChB;kCAECnC;;oBAEFF;oBACAuB;;;0BAEH,KAACrC;gBAAS,GAAGuC,YAAY;0BAAGvB;;;;AAGlC,GACA"}
+{"version":3,"sources":["../../src/navigation/NavItemLink.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useEffect,\n  type AnchorHTMLAttributes,\n  type LiHTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport { navItemLink } from \"./navItemStyles.js\";\nimport {\n  type NavItemContentProps,\n  type NavigationLinkComponent,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\">,\n    NavItemContentProps,\n    ComponentWithRippleProps {\n  /** @defaultValue `\"a\"` */\n  as?: NavigationLinkComponent;\n  href: string;\n\n  /**\n   * Any additional props to provide the wrapping `<li>` element such as\n   * `style`, `className`, and `ref`.\n   */\n  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * Set this to `true` if the link matches the current `pathname`. This will\n   * enable `aria-current=\"true\"` and apply active styling.\n   */\n  active: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n\n  /** @defaultValue `!to && !href` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` to prevent this item from scrolling into view when it\n   * becomes active. It is generally recommended to keep this `false` unless a\n   * custom implementation has been added so that when the temporary navigation\n   * will show the active route.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollIntoView?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(\n  function NavItemLink(props, propRef) {\n    const {\n      as: Component = \"a\",\n      href,\n      active,\n      activeClassName,\n      beforeAddon,\n      afterAddon,\n      className,\n      children,\n      liProps,\n      spanProps,\n      disabled = !href,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      disableRipple,\n      disableScrollIntoView,\n      ...remaining\n    } = props;\n\n    const [linkRef, linkRefCallback] = useEnsuredRef(propRef);\n    const { handlers, ripples } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      disabled,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      ...handlers,\n    });\n    useEffect(() => {\n      const link = linkRef.current;\n      if (\n        !active ||\n        !link ||\n        disableScrollIntoView ||\n        document.activeElement === link ||\n        // do not scroll into view if the collapse transition is occurring since\n        // it makes it animate weirdly\n        link.closest(\".rmd-collapse--enter\")\n      ) {\n        return;\n      }\n\n      link.scrollIntoView({ block: \"center\" });\n    }, [active, disableScrollIntoView, linkRef]);\n\n    return (\n      <NavItem {...liProps}>\n        <Component\n          aria-current={active ? \"page\" : undefined}\n          {...remaining}\n          {...handlers}\n          {...elementProps}\n          ref={linkRefCallback}\n          href={href}\n          className={navItemLink({\n            active,\n            activeClassName,\n            className,\n          })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {ripples}\n        </Component>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </NavItem>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","cssUtils","useElementInteraction","Tooltip","useTooltip","useEnsuredRef","NavItem","navItemLink","NavItemLink","props","propRef","as","Component","href","active","activeClassName","beforeAddon","afterAddon","className","children","liProps","spanProps","disabled","onClick","onBlur","onDragStart","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchMove","onTouchEnd","onTouchStart","tooltipOptions","disableRipple","disableScrollIntoView","remaining","linkRef","linkRefCallback","handlers","ripples","mode","undefined","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","link","current","document","activeElement","closest","scrollIntoView","block","aria-current","ref","span","textOverflow"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,SAAS,QAGJ,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,WAAW,QAAQ,qBAAqB;AA8CjD;;;;CAIC,GACD,OAAO,MAAMC,4BAAcT,WACzB,SAASS,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,IAAIC,YAAY,GAAG,EACnBC,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,WAAW,CAACT,IAAI,EAChBU,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,cAAc,EACdC,aAAa,EACbC,qBAAqB,EACrB,GAAGC,WACJ,GAAG5B;IAEJ,MAAM,CAAC6B,SAASC,gBAAgB,GAAGlC,cAAcK;IACjD,MAAM,EAAE8B,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QAClDwC,MAAMP,gBAAgB,SAASQ;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAM,EAAEW,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAG1C,WAAW;QAC7D2C,cAAc;QACdC,iBAAiB;QACjB,GAAGd,cAAc;QACjB,GAAGM,QAAQ;IACb;IACAxC,UAAU;QACR,MAAMiD,OAAOX,QAAQY,OAAO;QAC5B,IACE,CAACpC,UACD,CAACmC,QACDb,yBACAe,SAASC,aAAa,KAAKH,QAC3B,wEAAwE;QACxE,8BAA8B;QAC9BA,KAAKI,OAAO,CAAC,yBACb;YACA;QACF;QAEAJ,KAAKK,cAAc,CAAC;YAAEC,OAAO;QAAS;IACxC,GAAG;QAACzC;QAAQsB;QAAuBE;KAAQ;IAE3C,qBACE,MAAChC;QAAS,GAAGc,OAAO;;0BAClB,MAACR;gBACC4C,gBAAc1C,SAAS,SAAS6B;gBAC/B,GAAGN,SAAS;gBACZ,GAAGG,QAAQ;gBACX,GAAGI,YAAY;gBAChBa,KAAKlB;gBACL1B,MAAMA;gBACNK,WAAWX,YAAY;oBACrBO;oBACAC;oBACAG;gBACF;;oBAECF;kCACD,KAAC0C;wBACE,GAAGrC,SAAS;wBACboC,KAAKX;wBACL5B,WAAWjB,SAAS;4BAClBiB,WAAWG,WAAWH;4BACtByC,cAAc;wBAChB;kCAECxC;;oBAEFF;oBACAwB;;;0BAEH,KAACtC;gBAAS,GAAG0C,YAAY;0BAAG1B;;;;AAGlC,GACA"}

package/dist/navigation/NavSubheader.d.ts

@@ -2,12 +2,11 @@ import { type ListSubheaderProps } from "../list/ListSubheader.js";
 /**
  * @since 6.0.0
  */
-export interface NavSubheaderProps extends ListSubheaderProps {
-}
+export type NavSubheaderProps = ListSubheaderProps;
 /**
  * A simple wrapper around the {@Link ListSubheader} that updates the padding
  * based on the current navigation item depth to match the other items.
  *
  * @since 6.0.0
  */
-export declare const NavSubheader: import("react").ForwardRefExoticComponent<NavSubheaderProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare const NavSubheader: import("react").ForwardRefExoticComponent<ListSubheaderProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/navigation/NavSubheader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavSubheader.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavSubheaderProps extends ListSubheaderProps {}\n\n/**\n * A simple wrapper around the {@Link ListSubheader} that updates the padding\n * based on the current navigation item depth to match the other items.\n *\n * @since 6.0.0\n */\nexport const NavSubheader = forwardRef<HTMLLIElement, NavSubheaderProps>(\n  function NavSubheader(props, ref) {\n    const { textProps, ...remaining } = props;\n\n    return (\n      <ListSubheader\n        {...remaining}\n        ref={ref}\n        textProps={{\n          ...textProps,\n          className: navItem({ className: textProps?.className }),\n        }}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","navItem","NavSubheader","props","ref","textProps","remaining","className"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,OAAO,QAAQ,qBAAqB;AAO7C;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAEpC,qBACE,KAACH;QACE,GAAGM,SAAS;QACbF,KAAKA;QACLC,WAAW;YACT,GAAGA,SAAS;YACZE,WAAWN,QAAQ;gBAAEM,WAAWF,WAAWE;YAAU;QACvD;;AAGN,GACA"}
+{"version":3,"sources":["../../src/navigation/NavSubheader.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type NavSubheaderProps = ListSubheaderProps;\n\n/**\n * A simple wrapper around the {@Link ListSubheader} that updates the padding\n * based on the current navigation item depth to match the other items.\n *\n * @since 6.0.0\n */\nexport const NavSubheader = forwardRef<HTMLLIElement, NavSubheaderProps>(\n  function NavSubheader(props, ref) {\n    const { textProps, ...remaining } = props;\n\n    return (\n      <ListSubheader\n        {...remaining}\n        ref={ref}\n        textProps={{\n          ...textProps,\n          className: navItem({ className: textProps?.className }),\n        }}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","navItem","NavSubheader","props","ref","textProps","remaining","className"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,OAAO,QAAQ,qBAAqB;AAO7C;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAEpC,qBACE,KAACH;QACE,GAAGM,SAAS;QACbF,KAAKA;QACLC,WAAW;YACT,GAAGA,SAAS;YACZE,WAAWN,QAAQ;gBAAEM,WAAWF,WAAWE;YAAU;QACvD;;AAGN,GACA"}

package/dist/navigation/Navigation.d.ts

@@ -21,7 +21,7 @@ export interface NavigationProps<Item extends NavigationItem = NavigationItem, D
     /** @see {@link DefaultNavigationRenderer} */
     render?: ComponentType<RenderRecursiveItemsProps<Item, Data>>;
     /** @see {@link getRecursiveNavItemKey} */
-    getItemKey?(options: RecursiveItemKeyOptions<Item>): string;
+    getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;
 }
 /**
  * **Client Component**

package/dist/navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/Navigation.tsx"],"sourcesContent":["import { type ComponentType, type ReactElement } from \"react\";\nimport { type ListProps } from \"../list/List.js\";\nimport {\n  RenderRecursively,\n  getRecursiveItemKey,\n  type RecursiveItem,\n  type RecursiveItemKeyOptions,\n  type RenderRecursiveItemsProps,\n} from \"../utils/RenderRecursively.js\";\nimport { DefaultNavigationRenderer } from \"./DefaultNavigationRenderer.js\";\nimport { NavGroup } from \"./NavGroup.js\";\nimport { type NavigationItem, type NavigationRenderData } from \"./types.js\";\n\n/**\n * The default implementation for the nav item keys. It will attempt to set the\n * key in the following order:\n * - `href` if it exists and has length\n * - `children` if it's a string and has length\n * - default {@link getRecursiveItemKey} behavior of `${depth}-${index}`\n *\n * @since 6.0.0\n */\nexport function getRecursiveNavItemKey<\n  Item extends NavigationItem = NavigationItem,\n>(options: RecursiveItemKeyOptions<Item>): string {\n  const { item } = options;\n  // if it's a route, try setting the key to the href since they are generally\n  // unique\n  if (\"href\" in item && item.href) {\n    return item.href;\n  }\n\n  // if children exist in the item (group, route, subheader), try to set that as\n  // the key since they are usually unique\n  if (\n    \"children\" in item &&\n    typeof item.children === \"string\" &&\n    item.children\n  ) {\n    return item.children;\n  }\n\n  // use the default key behavior if all else fails\n  return getRecursiveItemKey(options);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationProps<\n  Item extends NavigationItem = NavigationItem,\n  Data extends NavigationRenderData = NavigationRenderData,\n> extends Omit<ListProps, \"children\"> {\n  data: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /** @see {@link DefaultNavigationRenderer} */\n  render?: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /** @see {@link getRecursiveNavItemKey} */\n  getItemKey?(options: RecursiveItemKeyOptions<Item>): string;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport function Navigation<\n  Item extends NavigationItem,\n  Data extends NavigationRenderData,\n>(props: NavigationProps<Item, Data>): ReactElement {\n  const {\n    data,\n    items,\n    render = DefaultNavigationRenderer,\n    getItemKey = getRecursiveNavItemKey,\n    ...remaining\n  } = props;\n\n  return (\n    <NavGroup depth={0} {...remaining}>\n      <RenderRecursively\n        data={data}\n        items={items}\n        render={render}\n        getItemKey={getItemKey}\n      />\n    </NavGroup>\n  );\n}\n"],"names":["RenderRecursively","getRecursiveItemKey","DefaultNavigationRenderer","NavGroup","getRecursiveNavItemKey","options","item","href","children","Navigation","props","data","items","render","getItemKey","remaining","depth"],"mappings":";AAEA,SACEA,iBAAiB,EACjBC,mBAAmB,QAId,gCAAgC;AACvC,SAASC,yBAAyB,QAAQ,iCAAiC;AAC3E,SAASC,QAAQ,QAAQ,gBAAgB;AAGzC;;;;;;;;CAQC,GACD,OAAO,SAASC,uBAEdC,OAAsC;IACtC,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,4EAA4E;IAC5E,SAAS;IACT,IAAI,UAAUC,QAAQA,KAAKC,IAAI,EAAE;QAC/B,OAAOD,KAAKC,IAAI;IAClB;IAEA,8EAA8E;IAC9E,wCAAwC;IACxC,IACE,cAAcD,QACd,OAAOA,KAAKE,QAAQ,KAAK,YACzBF,KAAKE,QAAQ,EACb;QACA,OAAOF,KAAKE,QAAQ;IACtB;IAEA,iDAAiD;IACjD,OAAOP,oBAAoBI;AAC7B;AAmBA;;;;CAIC,GACD,OAAO,SAASI,WAGdC,KAAkC;IAClC,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,SAASX,yBAAyB,EAClCY,aAAaV,sBAAsB,EACnC,GAAGW,WACJ,GAAGL;IAEJ,qBACE,KAACP;QAASa,OAAO;QAAI,GAAGD,SAAS;kBAC/B,cAAA,KAACf;YACCW,MAAMA;YACNC,OAAOA;YACPC,QAAQA;YACRC,YAAYA;;;AAIpB"}
+{"version":3,"sources":["../../src/navigation/Navigation.tsx"],"sourcesContent":["import { type ComponentType, type ReactElement } from \"react\";\nimport { type ListProps } from \"../list/List.js\";\nimport {\n  RenderRecursively,\n  getRecursiveItemKey,\n  type RecursiveItem,\n  type RecursiveItemKeyOptions,\n  type RenderRecursiveItemsProps,\n} from \"../utils/RenderRecursively.js\";\nimport { DefaultNavigationRenderer } from \"./DefaultNavigationRenderer.js\";\nimport { NavGroup } from \"./NavGroup.js\";\nimport { type NavigationItem, type NavigationRenderData } from \"./types.js\";\n\n/**\n * The default implementation for the nav item keys. It will attempt to set the\n * key in the following order:\n * - `href` if it exists and has length\n * - `children` if it's a string and has length\n * - default {@link getRecursiveItemKey} behavior of `${depth}-${index}`\n *\n * @since 6.0.0\n */\nexport function getRecursiveNavItemKey<\n  Item extends NavigationItem = NavigationItem,\n>(options: RecursiveItemKeyOptions<Item>): string {\n  const { item } = options;\n  // if it's a route, try setting the key to the href since they are generally\n  // unique\n  if (\"href\" in item && item.href) {\n    return item.href;\n  }\n\n  // if children exist in the item (group, route, subheader), try to set that as\n  // the key since they are usually unique\n  if (\n    \"children\" in item &&\n    typeof item.children === \"string\" &&\n    item.children\n  ) {\n    return item.children;\n  }\n\n  // use the default key behavior if all else fails\n  return getRecursiveItemKey(options);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationProps<\n  Item extends NavigationItem = NavigationItem,\n  Data extends NavigationRenderData = NavigationRenderData,\n> extends Omit<ListProps, \"children\"> {\n  data: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /** @see {@link DefaultNavigationRenderer} */\n  render?: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /** @see {@link getRecursiveNavItemKey} */\n  getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport function Navigation<\n  Item extends NavigationItem,\n  Data extends NavigationRenderData,\n>(props: NavigationProps<Item, Data>): ReactElement {\n  const {\n    data,\n    items,\n    render = DefaultNavigationRenderer,\n    getItemKey = getRecursiveNavItemKey,\n    ...remaining\n  } = props;\n\n  return (\n    <NavGroup depth={0} {...remaining}>\n      <RenderRecursively\n        data={data}\n        items={items}\n        render={render}\n        getItemKey={getItemKey}\n      />\n    </NavGroup>\n  );\n}\n"],"names":["RenderRecursively","getRecursiveItemKey","DefaultNavigationRenderer","NavGroup","getRecursiveNavItemKey","options","item","href","children","Navigation","props","data","items","render","getItemKey","remaining","depth"],"mappings":";AAEA,SACEA,iBAAiB,EACjBC,mBAAmB,QAId,gCAAgC;AACvC,SAASC,yBAAyB,QAAQ,iCAAiC;AAC3E,SAASC,QAAQ,QAAQ,gBAAgB;AAGzC;;;;;;;;CAQC,GACD,OAAO,SAASC,uBAEdC,OAAsC;IACtC,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,4EAA4E;IAC5E,SAAS;IACT,IAAI,UAAUC,QAAQA,KAAKC,IAAI,EAAE;QAC/B,OAAOD,KAAKC,IAAI;IAClB;IAEA,8EAA8E;IAC9E,wCAAwC;IACxC,IACE,cAAcD,QACd,OAAOA,KAAKE,QAAQ,KAAK,YACzBF,KAAKE,QAAQ,EACb;QACA,OAAOF,KAAKE,QAAQ;IACtB;IAEA,iDAAiD;IACjD,OAAOP,oBAAoBI;AAC7B;AAmBA;;;;CAIC,GACD,OAAO,SAASI,WAGdC,KAAkC;IAClC,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,SAASX,yBAAyB,EAClCY,aAAaV,sBAAsB,EACnC,GAAGW,WACJ,GAAGL;IAEJ,qBACE,KAACP;QAASa,OAAO;QAAI,GAAGD,SAAS;kBAC/B,cAAA,KAACf;YACCW,MAAMA;YACNC,OAAOA;YACPC,QAAQA;YACRC,YAAYA;;;AAIpB"}

package/dist/navigation/_navigation.scss

@@ -55,11 +55,6 @@ $variables: (border-radius, horizontal-padding, padding-incrementor);
       }
 
       .rmd-nav-item {
-        @include utils.rtl {
-          @include use-var(padding-left, horizontal-padding);
-
-          padding-right: $increasing-padding;
-        }
         @include use-var(padding-right, horizontal-padding);
 
         padding-left: $increasing-padding;
@@ -93,6 +88,12 @@ $variables: (border-radius, horizontal-padding, padding-incrementor);
             opacity: 1;
           }
         }
+
+        @include utils.rtl {
+          @include use-var(padding-left, horizontal-padding);
+
+          padding-right: $increasing-padding;
+        }
       }
     }
   }

package/dist/navigation/types.d.ts

@@ -36,13 +36,15 @@ export interface NavigationItemSubheader extends ListSubheaderProps {
  * @example Route Group Output
  * ```tsx
  * const nextParents = [item, ...parents];
+ * const id = getNavigationGroupId(item, nextParents);
  * return (
  *   <CollapsibleNavGroup
- *     depth={nextParents.length})
- *     defaultCollapsed={() =>
- *       !data.pathname.includes(getHrefFromParents(nextParents))
- *     }
+ *     depth={nextParents.length}
+ *     collapsed={!data?.expandedItems.has(id)}
  *     buttonChildren={item.children}
+ *     toggleCollapsed={() => {
+ *       data?.toggleExpandedItem(id);
+ *     }}
  *   >
  *     {children}
  *   </CollapsibleNavGroup>
@@ -55,6 +57,41 @@ export interface NavigationItemSubheader extends ListSubheaderProps {
  */
 export interface NavigationItemGroup {
     type: "group";
+    /**
+     * An optional unique id to identify the group used for handling the expanded
+     * state when the `href` can't be used.
+     */
+    id?: string;
+    /**
+     * An optional href to prefix all child routes with and can be used instead of
+     * the {@link id} for handling the expanded state.
+     *
+     * @example
+     * ```ts
+     * {
+     *   type: "group",
+     *   href: "/some-path",
+     *   children: "Some Name",
+     *   items: [
+     *     {
+     *       type: "route",
+     *       href: "/page-1",
+     *       children: "Page 1",
+     *     },
+     *     {
+     *       type: "route",
+     *       href: "/page-2",
+     *       children: "Page 2",
+     *     },
+     *   ],
+     * }
+     * ```
+     *
+     * Would result in:
+     *
+     * - Page 1 - `/some-path/page-1`
+     * - Page 2 - `/some-path/page-2`
+     */
     href?: string;
     children: ReactNode;
     items: readonly NavigationItem[];
@@ -77,13 +114,24 @@ export type NavigationItem = NavigationItemDivider | NavigationItemSubheader | N
 /**
  * @since 6.0.0
  */
-export type NavigationLinkComponent = "a" | ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type CustomNavigationLinkComponent = ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
 }>;
 /**
  * @since 6.0.0
  */
-export interface NavigationRenderData {
+export type NavigationLinkComponent = "a" | CustomNavigationLinkComponent;
+/**
+ * @since 6.0.0
+ */
+export interface NavigationExpansion {
+    expandedItems: ReadonlySet<string>;
+    toggleExpandedItem: (id: string) => void;
+}
+/**
+ * @since 6.0.0
+ */
+export interface NavigationRenderData extends NavigationExpansion {
     /**
      * This is used to set the `active` state on a `NavItemLink`
      */

package/dist/navigation/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/types.ts"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type ListSubheaderProps } from \"../list/ListSubheader.js\";\nimport {\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\n\n/**\n * Used to add a `Divider` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <Divider {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemDivider extends DividerProps {\n  type: \"divider\";\n}\n\n/**\n * Used to add a `ListSubheader` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <ListSubheader {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemSubheader extends ListSubheaderProps {\n  type: \"subheader\";\n  children: ReactNode;\n}\n\n/**\n * This is used to either create a route group which update all child routes to\n * be prefixed with the optional `href`.\n *\n * @example Route Group Output\n * ```tsx\n * const nextParents = [item, ...parents];\n * return (\n *   <CollapsibleNavGroup\n *     depth={nextParents.length})\n *     defaultCollapsed={() =>\n *       !data.pathname.includes(getHrefFromParents(nextParents))\n *     }\n *     buttonChildren={item.children}\n *   >\n *     {children}\n *   </CollapsibleNavGroup>\n * );\n * ```\n *\n * Note: `children` are any child `items` that have been rendered.\n *\n * @since 6.0.0\n */\nexport interface NavigationItemGroup {\n  type: \"group\";\n  href?: string;\n  children: ReactNode;\n  items: readonly NavigationItem[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationItemRoute {\n  type: \"route\";\n  href: string;\n  children: ReactNode;\n  active?: boolean;\n  beforeAddon?: ReactNode;\n  afterAddon?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport type NavigationItem =\n  | NavigationItemDivider\n  | NavigationItemSubheader\n  | NavigationItemGroup\n  | NavigationItemRoute;\n\n/**\n * @since 6.0.0\n */\nexport type NavigationLinkComponent =\n  | \"a\"\n  | ForwardRefExoticComponent<\n      AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n    >;\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationRenderData {\n  /**\n   * This is used to set the `active` state on a `NavItemLink`\n   */\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentProps {\n  /**\n   * Any additional props to provide the `<span>` element that wraps the\n   * children such as `style`, `className`, and `ref`.\n   */\n  spanProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * An optional addon to render before the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * This should contain accessible text for the page that this will link to and\n   * will automatically be truncated with ellipsis if it is too large. A tooltip\n   * will also appear only when it has been truncated.\n   */\n  children: ReactNode;\n\n  /**\n   * This most likely will never need to be used, but it's a way to override any\n   * tooltip options. The default behavior will position the tooltip to the\n   * right and only appear if the `children` are overflown.\n   *\n   * @example Customize\n   * ```tsx\n   * <NavItemLink\n   *   {...props}\n   *   tooltipOptions={{\n   *     overflowOnly: false,\n   *     defaultPosition: \"above\",\n   *     vhMargin: \"1rem\",\n   *     vwMargin: \"1rem\",\n   *   }}\n   * >\n   * ```\n   */\n  tooltipOptions?: Omit<\n    TooltipOptions<HTMLAnchorElement>,\n    keyof TooltippedElementEventHandlers<HTMLAnchorElement>\n  >;\n}\n"],"names":[],"mappings":"AAkHA;;CAEC,GACD,WAgDC"}
+{"version":3,"sources":["../../src/navigation/types.ts"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type ListSubheaderProps } from \"../list/ListSubheader.js\";\nimport {\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\n\n/**\n * Used to add a `Divider` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <Divider {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemDivider extends DividerProps {\n  type: \"divider\";\n}\n\n/**\n * Used to add a `ListSubheader` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <ListSubheader {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemSubheader extends ListSubheaderProps {\n  type: \"subheader\";\n  children: ReactNode;\n}\n\n/**\n * This is used to either create a route group which update all child routes to\n * be prefixed with the optional `href`.\n *\n * @example Route Group Output\n * ```tsx\n * const nextParents = [item, ...parents];\n * const id = getNavigationGroupId(item, nextParents);\n * return (\n *   <CollapsibleNavGroup\n *     depth={nextParents.length}\n *     collapsed={!data?.expandedItems.has(id)}\n *     buttonChildren={item.children}\n *     toggleCollapsed={() => {\n *       data?.toggleExpandedItem(id);\n *     }}\n *   >\n *     {children}\n *   </CollapsibleNavGroup>\n * );\n * ```\n *\n * Note: `children` are any child `items` that have been rendered.\n *\n * @since 6.0.0\n */\nexport interface NavigationItemGroup {\n  type: \"group\";\n\n  /**\n   * An optional unique id to identify the group used for handling the expanded\n   * state when the `href` can't be used.\n   */\n  id?: string;\n\n  /**\n   * An optional href to prefix all child routes with and can be used instead of\n   * the {@link id} for handling the expanded state.\n   *\n   * @example\n   * ```ts\n   * {\n   *   type: \"group\",\n   *   href: \"/some-path\",\n   *   children: \"Some Name\",\n   *   items: [\n   *     {\n   *       type: \"route\",\n   *       href: \"/page-1\",\n   *       children: \"Page 1\",\n   *     },\n   *     {\n   *       type: \"route\",\n   *       href: \"/page-2\",\n   *       children: \"Page 2\",\n   *     },\n   *   ],\n   * }\n   * ```\n   *\n   * Would result in:\n   *\n   * - Page 1 - `/some-path/page-1`\n   * - Page 2 - `/some-path/page-2`\n   */\n  href?: string;\n  children: ReactNode;\n  items: readonly NavigationItem[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationItemRoute {\n  type: \"route\";\n  href: string;\n  children: ReactNode;\n  active?: boolean;\n  beforeAddon?: ReactNode;\n  afterAddon?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport type NavigationItem =\n  | NavigationItemDivider\n  | NavigationItemSubheader\n  | NavigationItemGroup\n  | NavigationItemRoute;\n\n/**\n * @since 6.0.0\n */\nexport type CustomNavigationLinkComponent = ForwardRefExoticComponent<\n  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>;\n\n/**\n * @since 6.0.0\n */\nexport type NavigationLinkComponent = \"a\" | CustomNavigationLinkComponent;\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansion {\n  expandedItems: ReadonlySet<string>;\n  toggleExpandedItem: (id: string) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationRenderData extends NavigationExpansion {\n  /**\n   * This is used to set the `active` state on a `NavItemLink`\n   */\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentProps {\n  /**\n   * Any additional props to provide the `<span>` element that wraps the\n   * children such as `style`, `className`, and `ref`.\n   */\n  spanProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * An optional addon to render before the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * This should contain accessible text for the page that this will link to and\n   * will automatically be truncated with ellipsis if it is too large. A tooltip\n   * will also appear only when it has been truncated.\n   */\n  children: ReactNode;\n\n  /**\n   * This most likely will never need to be used, but it's a way to override any\n   * tooltip options. The default behavior will position the tooltip to the\n   * right and only appear if the `children` are overflown.\n   *\n   * @example Customize\n   * ```tsx\n   * <NavItemLink\n   *   {...props}\n   *   tooltipOptions={{\n   *     overflowOnly: false,\n   *     defaultPosition: \"above\",\n   *     vhMargin: \"1rem\",\n   *     vwMargin: \"1rem\",\n   *   }}\n   * >\n   * ```\n   */\n  tooltipOptions?: Omit<\n    TooltipOptions<HTMLAnchorElement>,\n    keyof TooltippedElementEventHandlers<HTMLAnchorElement>\n  >;\n}\n"],"names":[],"mappings":"AAoKA;;CAEC,GACD,WAgDC"}

package/dist/navigation/useActiveHeadingId.d.ts

@@ -39,7 +39,7 @@ export interface ActiveHeadingIdOptions {
     /** @see {@link DEFAULT_ACTIVE_HEADING_THRESHOLD} */
     threshold?: IntersectionObserverThreshold;
     /** @see {@link DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN} */
-    getRootMargin?(): IntersectionObserverRootMargin;
+    getRootMargin?: () => IntersectionObserverRootMargin;
     /** @defaultValue `headings[0]?.id ?? ""` */
     defaultActiveId?: UseStateInitializer<string>;
     /** @defaultValue `0.8` */

package/dist/navigation/useActiveHeadingId.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/useActiveHeadingId.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport {\n  useIntersectionObserver,\n  type IntersectionObserverRootMargin,\n  type IntersectionObserverThreshold,\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  children?: 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.children) {\n      headings.push(...getHeadingElements(item.children));\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.children) {\n    return getLastHeadingId(last.children);\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","children","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\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport {\n  useIntersectionObserver,\n  type IntersectionObserverRootMargin,\n  type IntersectionObserverThreshold,\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  children?: 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.children) {\n      headings.push(...getHeadingElements(item.children));\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.children) {\n    return getLastHeadingId(last.children);\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","children","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

@@ -0,0 +1,104 @@
+import { type UseStateInitializer, type UseStateSetter } from "../types.js";
+import { type NavigationExpansion, type NavigationLinkComponent, type NavigationRenderData } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export interface NavigationExpansionOptions {
+    pathname: string;
+    linkComponent: NavigationLinkComponent;
+    /**
+     * An optional list or set of items that should be expanded before the user
+     * interacts with the navigation items.
+     *
+     * The default implementation works well with the `DefaultNavigationRenderer`
+     * by allowing all "folders" (or groups) of items to be expanded by the
+     * `pathname`.
+     *
+     * ```ts
+     * const navItems: readonly NavigationItem[] = [
+     *   {
+     *     type: "route",
+     *     href: "/",
+     *     children: "Home",
+     *   },
+     *   {
+     *     type: "group",
+     *     href: "/group-1",
+     *     children: "Group 1",
+     *     items: [
+     *       {
+     *         type: "group",
+     *         href: "/subgroup-1",
+     *         children: "Subgroup 1",
+     *         items: [
+     *           {
+     *             type: "route",
+     *             href: "/route",
+     *             children: "Group 1 > Subgroup 1 > Route"
+     *           },
+     *         ],
+     *       },
+     *       {
+     *         type: "route",
+     *         href: "/route",
+     *         children: "Group 1 > Route",
+     *       },
+     *     ],
+     *   },
+     * ];
+     * ```
+     *
+     * - `pathname === "/"` - No groups expanded
+     *   - Resolves as `new Set(["/"])`
+     * - `pathname === "/group-1/subgroup-1/route"` - "Group 1" and "Subgroup 1"
+     *   are expanded
+     *   - Resolves as `new Set(["/", "/group-1", "/group-1/route"])`
+     */
+    defaultExpandedItems?: UseStateInitializer<ReadonlySet<string> | readonly string[]>;
+    /**
+     * The default behavior is to update the `expandedItems` set as the `pathname`
+     * updates to capture anytime the user might navigate to outer routes outside
+     * of the `Navigation` component. i.e. Click a link within the page.
+     *
+     * Set this to `true` to disable this behavior.
+     *
+     * @defaultValue `false`
+     */
+    disableFollowingPathname?: boolean;
+}
+/**
+ * @since 6.0.0
+ */
+export interface NavigationExpansionImplementation extends NavigationExpansion {
+    data: NavigationRenderData;
+    setExpandedItems: UseStateSetter<ReadonlySet<string>>;
+}
+/**
+ * Used to create the `data` prop for the `Navigation` component and handling
+ * the expansion of items.
+ *
+ * @example Main Usage
+ * ```tsx
+ * "use client";
+ * import { Navigation } from "@react-md/core/navigation/Navigation";
+ * import { useNavigationExpansion } from "@react-md/core/navigation/useNavigationExpansion";
+ * import Link from "next/link";
+ * import { usePathname } from "next/navigation.js";
+ * import { type ReactElement } from "react";
+ *
+ * import { navItems } from "./navItems.js";
+ *
+ * export function Example(): ReactElement {
+ *   const pathname = usePathname();
+ *   const { data } = useNavigationExpansion({
+ *     pathname,
+ *     linkComponent: Link,
+ *   });
+ *
+ *   return <Navigation data={data} items={navItems} />;
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useNavigationExpansion(options: NavigationExpansionOptions): NavigationExpansionImplementation;

package/dist/navigation/useNavigationExpansion.js

@@ -0,0 +1,77 @@
+"use client";
+import { useEffect, useMemo, useRef } from "react";
+import { useReadonlySet } from "../useReadonlySet.js";
+import { getPartsFromPathname } from "./utils.js";
+/**
+ * Used to create the `data` prop for the `Navigation` component and handling
+ * the expansion of items.
+ *
+ * @example Main Usage
+ * ```tsx
+ * "use client";
+ * import { Navigation } from "@react-md/core/navigation/Navigation";
+ * import { useNavigationExpansion } from "@react-md/core/navigation/useNavigationExpansion";
+ * import Link from "next/link";
+ * import { usePathname } from "next/navigation.js";
+ * import { type ReactElement } from "react";
+ *
+ * import { navItems } from "./navItems.js";
+ *
+ * export function Example(): ReactElement {
+ *   const pathname = usePathname();
+ *   const { data } = useNavigationExpansion({
+ *     pathname,
+ *     linkComponent: Link,
+ *   });
+ *
+ *   return <Navigation data={data} items={navItems} />;
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */ export function useNavigationExpansion(options) {
+    const { pathname, linkComponent, defaultExpandedItems, disableFollowingPathname } = options;
+    const { value: expandedItems, setValue: setExpandedItems, toggleValue: toggleExpandedItem } = useReadonlySet({
+        defaultValue: defaultExpandedItems ?? (()=>new Set(getPartsFromPathname(pathname)))
+    });
+    const prevPathname = useRef(pathname);
+    useEffect(()=>{
+        if (disableFollowingPathname || pathname === prevPathname.current) {
+            return;
+        }
+        prevPathname.current = pathname;
+        setExpandedItems((prev)=>{
+            const next = new Set([
+                ...prev,
+                ...getPartsFromPathname(pathname)
+            ]);
+            if (next.size === prev.size) {
+                return prev;
+            }
+            return next;
+        });
+    }, [
+        disableFollowingPathname,
+        pathname,
+        setExpandedItems
+    ]);
+    const data = useMemo(()=>({
+            pathname,
+            linkComponent,
+            expandedItems,
+            toggleExpandedItem
+        }), [
+        expandedItems,
+        linkComponent,
+        pathname,
+        toggleExpandedItem
+    ]);
+    return {
+        data,
+        expandedItems,
+        setExpandedItems,
+        toggleExpandedItem
+    };
+}
+
+//# sourceMappingURL=useNavigationExpansion.js.map

package/dist/navigation/useNavigationExpansion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/useNavigationExpansion.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo, useRef } from \"react\";\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;AACA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,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"}

package/dist/navigation/utils.d.ts

@@ -0,0 +1,13 @@
+import { type NavigationItem } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export declare function getHrefFromParents(parents: readonly NavigationItem[]): string;
+/**
+ * @since 6.0.0
+ */
+export declare function getNavigationGroupId(group: NavigationItem, parents: readonly NavigationItem[]): string;
+/**
+ * @since 6.0.0
+ */
+export declare function getPartsFromPathname(pathname: string): ReadonlySet<string>;

package/dist/navigation/utils.js

@@ -0,0 +1,36 @@
+/**
+ * @since 6.0.0
+ */ export function getHrefFromParents(parents) {
+    return parents.reduce((result, parent)=>{
+        if ("href" in parent && parent.href) {
+            const { href } = parent;
+            return result + href;
+        }
+        return result;
+    }, "");
+}
+/**
+ * @since 6.0.0
+ */ export function getNavigationGroupId(group, parents) {
+    if ("id" in group && typeof group.id === "string" && group.id) {
+        return group.id;
+    }
+    return getHrefFromParents(parents);
+}
+/**
+ * @since 6.0.0
+ */ export function getPartsFromPathname(pathname) {
+    // remove trailing slashes just in case there aren't rewrites in place
+    const href = pathname.replace(/\/{2,}/g, "/").replace(/\/+$/, "");
+    const parts = href.split("/");
+    const set = new Set();
+    let prefix = "";
+    for (const part of parts){
+        const slashed = `/${part}`;
+        prefix = prefix === "/" ? slashed : prefix + slashed;
+        set.add(prefix);
+    }
+    return set;
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/navigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/utils.ts"],"sourcesContent":["import { type NavigationItem } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport function getHrefFromParents(parents: readonly NavigationItem[]): string {\n  return parents.reduce<string>((result, parent) => {\n    if (\"href\" in parent && parent.href) {\n      const { href } = parent;\n      return result + href;\n    }\n\n    return result;\n  }, \"\");\n}\n\n/**\n * @since 6.0.0\n */\nexport function getNavigationGroupId(\n  group: NavigationItem,\n  parents: readonly NavigationItem[]\n): string {\n  if (\"id\" in group && typeof group.id === \"string\" && group.id) {\n    return group.id;\n  }\n\n  return getHrefFromParents(parents);\n}\n\n/**\n * @since 6.0.0\n */\nexport function getPartsFromPathname(pathname: string): ReadonlySet<string> {\n  // remove trailing slashes just in case there aren't rewrites in place\n  const href = pathname.replace(/\\/{2,}/g, \"/\").replace(/\\/+$/, \"\");\n  const parts = href.split(\"/\");\n  const set = new Set<string>();\n  let prefix = \"\";\n  for (const part of parts) {\n    const slashed = `/${part}`;\n    prefix = prefix === \"/\" ? slashed : prefix + slashed;\n    set.add(prefix);\n  }\n\n  return set;\n}\n"],"names":["getHrefFromParents","parents","reduce","result","parent","href","getNavigationGroupId","group","id","getPartsFromPathname","pathname","replace","parts","split","set","Set","prefix","part","slashed","add"],"mappings":"AAEA;;CAEC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,OAAOA,QAAQC,MAAM,CAAS,CAACC,QAAQC;QACrC,IAAI,UAAUA,UAAUA,OAAOC,IAAI,EAAE;YACnC,MAAM,EAAEA,IAAI,EAAE,GAAGD;YACjB,OAAOD,SAASE;QAClB;QAEA,OAAOF;IACT,GAAG;AACL;AAEA;;CAEC,GACD,OAAO,SAASG,qBACdC,KAAqB,EACrBN,OAAkC;IAElC,IAAI,QAAQM,SAAS,OAAOA,MAAMC,EAAE,KAAK,YAAYD,MAAMC,EAAE,EAAE;QAC7D,OAAOD,MAAMC,EAAE;IACjB;IAEA,OAAOR,mBAAmBC;AAC5B;AAEA;;CAEC,GACD,OAAO,SAASQ,qBAAqBC,QAAgB;IACnD,sEAAsE;IACtE,MAAML,OAAOK,SAASC,OAAO,CAAC,WAAW,KAAKA,OAAO,CAAC,QAAQ;IAC9D,MAAMC,QAAQP,KAAKQ,KAAK,CAAC;IACzB,MAAMC,MAAM,IAAIC;IAChB,IAAIC,SAAS;IACb,KAAK,MAAMC,QAAQL,MAAO;QACxB,MAAMM,UAAU,CAAC,CAAC,EAAED,MAAM;QAC1BD,SAASA,WAAW,MAAME,UAAUF,SAASE;QAC7CJ,IAAIK,GAAG,CAACH;IACV;IAEA,OAAOF;AACT"}