@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/dist/layout/mainStyles.d.ts

@@ -1,5 +1,5 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MainClassNameOptions {
     className?: string;
@@ -21,6 +21,6 @@ export interface MainClassNameOptions {
     appBarOffset?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function main(options?: MainClassNameOptions): string;

package/dist/layout/mainStyles.js

@@ -2,7 +2,7 @@ import { cnb } from "cnbuilder";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-layout-main");
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function main(options = {}) {
     const { navOffset, appBarOffset, className } = options;
     return cnb(styles({

package/dist/layout/mainStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/mainStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-main\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MainClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to apply `margin-left` equal to the current navigation\n   * width. If you want this value to animate, use the `useMainClassName` hook\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  navOffset?: boolean;\n\n  /**\n   * Set this to `true` to apply `padding-top` equal to the height of the main\n   * app bar so that content is not covered.\n   *\n   * @see {@link useLayoutAppBarHeight}\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function main(options: MainClassNameOptions = {}): string {\n  const { navOffset, appBarOffset, className } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n    }),\n    navOffset && \"rmd-layout-h--active\",\n    className\n  );\n}\n"],"names":["cnb","bem","styles","main","options","navOffset","appBarOffset","className"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA2BnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,SAAS,EAAE,GAAGH;IAE/C,OAAOJ,IACLE,OAAO;QACL,YAAYI;IACd,IACAD,aAAa,wBACbE;AAEJ"}
+{"version":3,"sources":["../../src/layout/mainStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-main\");\n\n/**\n * @since 6.0.0\n */\nexport interface MainClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to apply `margin-left` equal to the current navigation\n   * width. If you want this value to animate, use the `useMainClassName` hook\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  navOffset?: boolean;\n\n  /**\n   * Set this to `true` to apply `padding-top` equal to the height of the main\n   * app bar so that content is not covered.\n   *\n   * @see {@link useLayoutAppBarHeight}\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function main(options: MainClassNameOptions = {}): string {\n  const { navOffset, appBarOffset, className } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n    }),\n    navOffset && \"rmd-layout-h--active\",\n    className\n  );\n}\n"],"names":["cnb","bem","styles","main","options","navOffset","appBarOffset","className"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA2BnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,SAAS,EAAE,GAAGH;IAE/C,OAAOJ,IACLE,OAAO;QACL,YAAYI;IACd,IACAD,aAAa,wBACbE;AAEJ"}

package/dist/layout/useExpandableLayout.d.ts

@@ -1,10 +1,10 @@
-import type { CSSTransitionElementProps } from "../transition/types.js";
-import type { CssPosition, UseStateInitializer } from "../types.js";
-import type { LayoutNavProps } from "./LayoutNav.js";
-import type { HorizontalLayoutTransitionOptions } from "./useHorizontalLayoutTransition.js";
-import type { ProvidedTemporaryLayoutAppBarProps, ProvidedTemporaryLayoutMainProps, TemporaryLayoutImplementation, TemporaryLayoutOptions } from "./useTemporaryLayout.js";
+import { type CSSTransitionElementProps } from "../transition/types.js";
+import { type CssPosition, type UseStateInitializer } from "../types.js";
+import { type LayoutNavProps } from "./LayoutNav.js";
+import { type HorizontalLayoutTransitionOptions } from "./useHorizontalLayoutTransition.js";
+import { type ProvidedLayoutNavToggleProps, type ProvidedTemporaryLayoutAppBarProps, type ProvidedTemporaryLayoutMainProps, type TemporaryLayoutImplementation, type TemporaryLayoutOptions } from "./useTemporaryLayout.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ExpandableLayoutOptions extends TemporaryLayoutOptions {
     /** @defaultValue `"fixed"` */
@@ -17,9 +17,13 @@ export interface ExpandableLayoutOptions extends TemporaryLayoutOptions {
      * by the navigation. The default behavior is to place the navigation below
      * the fixed header.
      *
+     * Set this to `"static"` to make the navigation span the full height of the
+     * screen and hide the button until the screen shrinks to the temporary
+     * layout type.
+     *
      * @defaultValue `false`
      */
-    fullHeightNav?: boolean;
+    fullHeightNav?: boolean | "static";
     /** @see {@link HorizontalLayoutTransitionOptions} */
     transitionProps?: Omit<HorizontalLayoutTransitionOptions, "transitionIn">;
     /**
@@ -31,34 +35,41 @@ export interface ExpandableLayoutOptions extends TemporaryLayoutOptions {
     temporaryUntil?: "tablet" | "desktop";
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedLayoutMainProps extends ProvidedTemporaryLayoutMainProps, CSSTransitionElementProps<HTMLElement> {
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ProvidedLayoutNavProps = Pick<LayoutNavProps, "expanded" | "appBarOffset">;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps & Partial<CSSTransitionElementProps<HTMLElement>>;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
+ */
+export interface ProvidedExpandableLayoutNavToggleProps extends ProvidedLayoutNavToggleProps {
+    className: string;
+}
+/**
+ * @since 6.0.0
  */
 export interface ExpandableLayoutImplementation extends TemporaryLayoutImplementation {
     temporary: boolean;
+    persistent: boolean;
     expanded: boolean;
     expandNavigation(): void;
     collapseNavigation(): void;
     toggleNavigation(): void;
     appBarProps: ProvidedLayoutAppBarProps;
     mainProps: ProvidedLayoutMainProps;
+    navToggleProps: ProvidedExpandableLayoutNavToggleProps;
     expandableNavProps: ProvidedLayoutNavProps;
 }
 /**
- * @example
- * Main USage
+ * @example Main Usage
  * ```tsx
  * import {
  *   AppBarTitle,
@@ -118,7 +129,48 @@ export interface ExpandableLayoutImplementation extends TemporaryLayoutImplement
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * If you have a large navigation panel, you can conditionally render the
+ * `LayoutNav` with the `persistent` boolean returned by the hook which will
+ * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.
+ *
+ * @example Safely Conditionally Rendering
+ * ```diff
+ *   const {
+ *     temporary,
+ * +   persistent,
+ *     appBarProps,
+ *     expandableNavProps,
+ *     mainProps,
+ *     navToggleProps,
+ *     temporaryNavProps,
+ *     windowSplitterProps,
+ *   } = useExpandableLayout({ pathname });
+ *
+ *   return {
+ *     <>
+ *       <LayoutAppBar {...appBarProps}>
+ *         <Button {...navToggleProps} />
+ *         <AppBarTitle>Hello, world!</AppBarTitle>
+ *       </LayoutAppBar>
+ * -     <LayoutNav {...expandableNavProps}>
+ * -       <CustomNavigation />
+ * -     </LayoutNav>
+ * +     {persistent && (
+ * +       <LayoutNav {...expandableNavProps}>
+ * +         <CustomNavigation />
+ * +       </LayoutNav>
+ * +     )}
+ *       {temporary && (
+ *         <Sheet {...temporaryNavProps}>
+ *           <CustomNavigation />
+ *         </Sheet>
+ *       )}
+ *       <Main {...mainProps}>{children}</Main>
+ *     </>
+ *   }
+ * ```
+ *
+ * @since 6.0.0
  * @see {@link useResizableLayout}
  */
 export declare function useExpandableLayout(options: ExpandableLayoutOptions): ExpandableLayoutImplementation;

package/dist/layout/useExpandableLayout.js

@@ -1,11 +1,12 @@
 "use client";
+import { cnb } from "cnbuilder";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { useToggle } from "../useToggle.js";
 import { useHorizontalLayoutTransition } from "./useHorizontalLayoutTransition.js";
+import { useSsr } from "../SsrProvider.js";
 import { useTemporaryLayout } from "./useTemporaryLayout.js";
 /**
- * @example
- * Main USage
+ * @example Main Usage
  * ```tsx
  * import {
  *   AppBarTitle,
@@ -65,10 +66,52 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * If you have a large navigation panel, you can conditionally render the
+ * `LayoutNav` with the `persistent` boolean returned by the hook which will
+ * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.
+ *
+ * @example Safely Conditionally Rendering
+ * ```diff
+ *   const {
+ *     temporary,
+ * +   persistent,
+ *     appBarProps,
+ *     expandableNavProps,
+ *     mainProps,
+ *     navToggleProps,
+ *     temporaryNavProps,
+ *     windowSplitterProps,
+ *   } = useExpandableLayout({ pathname });
+ *
+ *   return {
+ *     <>
+ *       <LayoutAppBar {...appBarProps}>
+ *         <Button {...navToggleProps} />
+ *         <AppBarTitle>Hello, world!</AppBarTitle>
+ *       </LayoutAppBar>
+ * -     <LayoutNav {...expandableNavProps}>
+ * -       <CustomNavigation />
+ * -     </LayoutNav>
+ * +     {persistent && (
+ * +       <LayoutNav {...expandableNavProps}>
+ * +         <CustomNavigation />
+ * +       </LayoutNav>
+ * +     )}
+ *       {temporary && (
+ *         <Sheet {...temporaryNavProps}>
+ *           <CustomNavigation />
+ *         </Sheet>
+ *       )}
+ *       <Main {...mainProps}>{children}</Main>
+ *     </>
+ *   }
+ * ```
+ *
+ * @since 6.0.0
  * @see {@link useResizableLayout}
  */ export function useExpandableLayout(options) {
-    const { defaultExpanded = false, fullHeightNav = false, transitionProps, temporaryUntil = "tablet", ...temporaryOptions } = options;
+    const { fullHeightNav = false, temporaryUntil = "tablet", transitionProps, defaultExpanded = fullHeightNav === "static", ...temporaryOptions } = options;
+    const ssr = useSsr();
     const { appBarProps, mainProps, navToggleProps, temporaryNavProps, hideTemporaryNav, showTemporaryNav, visible } = useTemporaryLayout(temporaryOptions);
     const { toggled: expanded, enable: expandNavigation, disable: collapseNavigation, toggle: toggleNavigation } = useToggle(defaultExpanded);
     const { elementProps } = useHorizontalLayoutTransition({
@@ -80,6 +123,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
     return {
         visible,
         temporary,
+        persistent: ssr || !temporary,
         hideTemporaryNav,
         showTemporaryNav,
         expanded,
@@ -107,7 +151,8 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
                 } else {
                     toggleNavigation();
                 }
-            }
+            },
+            className: cnb(fullHeightNav === "static" && "rmd-layout-nav-toggle")
         }
     };
 }

package/dist/layout/useExpandableLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport type { CSSTransitionElementProps } from \"../transition/types.js\";\nimport type { CssPosition, UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport type { LayoutNavProps } from \"./LayoutNav.js\";\nimport type { HorizontalLayoutTransitionOptions } from \"./useHorizontalLayoutTransition.js\";\nimport { useHorizontalLayoutTransition } from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type { useResizableLayout } from \"./useResizableLayout.js\";\nimport type {\n  ProvidedTemporaryLayoutAppBarProps,\n  ProvidedTemporaryLayoutMainProps,\n  TemporaryLayoutImplementation,\n  TemporaryLayoutOptions,\n} from \"./useTemporaryLayout.js\";\nimport { useTemporaryLayout } from \"./useTemporaryLayout.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean;\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * Set this to `\"desktop\"` if you want to use the temporary navigation until\n   * the viewport is at least desktop width instead of tablet.\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  expanded: boolean;\n  expandNavigation(): void;\n  collapseNavigation(): void;\n  toggleNavigation(): void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example\n * Main USage\n * ```tsx\n * import {\n *   AppBarTitle,\n *   Button,\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   Sheet,\n *   useExpandableLayout,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return {\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   }\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    defaultExpanded = false,\n    fullHeightNav = false,\n    transitionProps,\n    temporaryUntil = \"tablet\",\n    ...temporaryOptions\n  } = options;\n\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const temporary = isPhone || (temporaryUntil === \"desktop\" && !isDesktop);\n\n  return {\n    visible,\n    temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n    },\n  };\n}\n"],"names":["useAppSize","useToggle","useHorizontalLayoutTransition","useTemporaryLayout","useExpandableLayout","options","defaultExpanded","fullHeightNav","transitionProps","temporaryUntil","temporaryOptions","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","temporary","expandableNavProps","appBarOffset","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,SAAS,QAAQ,kBAAkB;AAG5C,SAASC,6BAA6B,QAAQ,qCAAqC;AASnF,SAASC,kBAAkB,QAAQ,0BAA0B;AAsE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,kBAAkB,KAAK,EACvBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,iBAAiB,QAAQ,EACzB,GAAGC,kBACJ,GAAGL;IAEJ,MAAM,EACJM,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGd,mBAAmBO;IAEvB,MAAM,EACJQ,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAGxB,UAAUK;IACd,MAAM,EAAEoB,YAAY,EAAE,GAAGxB,8BAA8B;QACrD,GAAGM,eAAe;QAClBmB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG7B;IAC/B,MAAM8B,YAAYF,WAAYnB,mBAAmB,aAAa,CAACoB;IAE/D,OAAO;QACLZ;QACAa;QACAf;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIJ,gBAAgBmB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAiB,oBAAoB;YAClBZ;YACAa,cAAc,CAACzB;QACjB;QACAM,gBAAgB;YACd,GAAGA,cAAc;YACjBoB;gBACE,IAAIH,WAAW;oBACbd;gBACF,OAAO;oBACLS;gBACF;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  useHorizontalLayoutTransition,\n  type HorizontalLayoutTransitionOptions,\n} from \"./useHorizontalLayoutTransition.js\";\nimport { useSsr } from \"../SsrProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  useTemporaryLayout,\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n} from \"./useTemporaryLayout.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * Set this to `\"desktop\"` if you want to use the temporary navigation until\n   * the viewport is at least desktop width instead of tablet.\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps\n  extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation(): void;\n  collapseNavigation(): void;\n  toggleNavigation(): void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import {\n *   AppBarTitle,\n *   Button,\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   Sheet,\n *   useExpandableLayout,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return {\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   }\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return {\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   }\n * ```\n *\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const temporary = isPhone || (temporaryUntil === \"desktop\" && !isDesktop);\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useAppSize","useToggle","useHorizontalLayoutTransition","useSsr","useTemporaryLayout","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","temporary","persistent","expandableNavProps","appBarOffset","onClick","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SACEC,6BAA6B,QAExB,qCAAqC;AAC5C,SAASC,MAAM,QAAQ,oBAAoB;AAG3C,SACEC,kBAAkB,QAMb,0BAA0B;AAoFjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,gBAAgB,KAAK,EACrBC,iBAAiB,QAAQ,EACzBC,eAAe,EACfC,kBAAkBH,kBAAkB,QAAQ,EAC5C,GAAGI,kBACJ,GAAGL;IAEJ,MAAMM,MAAMT;IACZ,MAAM,EACJU,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGf,mBAAmBO;IAEvB,MAAM,EACJS,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAG1B,UAAUS;IACd,MAAM,EAAEkB,YAAY,EAAE,GAAG1B,8BAA8B;QACrD,GAAGO,eAAe;QAClBoB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG/B;IAC/B,MAAMgC,YAAYF,WAAYtB,mBAAmB,aAAa,CAACuB;IAE/D,OAAO;QACLZ;QACAa;QACAC,YAAYrB,OAAO,CAACoB;QACpBf;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIN,gBAAgBqB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAkB,oBAAoB;YAClBb;YACAc,cAAc,CAAC5B;QACjB;QACAQ,gBAAgB;YACd,GAAGA,cAAc;YACjBqB;gBACE,IAAIJ,WAAW;oBACbd;gBACF,OAAO;oBACLS;gBACF;YACF;YACAU,WAAWtC,IAAIQ,kBAAkB,YAAY;QAC/C;IACF;AACF"}

package/dist/layout/useHorizontalLayoutTransition.d.ts

@@ -1,6 +1,6 @@
-import type { CSSTransitionClassNames, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout } from "../transition/types.js";
+import { type CSSTransitionClassNames, type CSSTransitionHookReturnValue, type PreconfiguredCSSTransitionOptions, type TransitionTimeout } from "../transition/types.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES: {
     appearDone: string;
@@ -10,7 +10,7 @@ export declare const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES: {
     exit: string;
 };
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTransitionOptions<HTMLElement> {
     /**
@@ -61,6 +61,6 @@ export interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTrans
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useHorizontalLayoutTransition<E extends HTMLElement = HTMLElement>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E>;

package/dist/layout/useHorizontalLayoutTransition.js

@@ -3,7 +3,7 @@ import { cnb } from "cnbuilder";
 import { DEFAULT_SHEET_TIMEOUT } from "../sheet/Sheet.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {
     appearDone: "rmd-layout-h--active",
     enter: "rmd-layout-h--enter",
@@ -48,7 +48,7 @@ import { useCSSTransition } from "../transition/useCSSTransition.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useHorizontalLayoutTransition(options) {
     return useCSSTransition({
         timeout: DEFAULT_SHEET_TIMEOUT,

package/dist/layout/useHorizontalLayoutTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/Sheet.js\";\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} satisfies Readonly<CSSTransitionClassNames>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions\n  extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,qBAAqB,QAAQ,oBAAoB;AAO1D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA8C;AAmB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}
+{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/Sheet.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} satisfies Readonly<CSSTransitionClassNames>;\n\n/**\n * @since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions\n  extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,qBAAqB,QAAQ,oBAAoB;AAO1D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA8C;AAmB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}

package/dist/layout/useLayoutAppBarHeight.d.ts

@@ -1,6 +1,6 @@
-import type { Ref, RefCallback } from "react";
-import type { DefinedCSSVariableName } from "../theme/types.js";
-import type { CSSVariable } from "../theme/useCSSVariables.js";
+import { type Ref, type RefCallback } from "react";
+import { type DefinedCSSVariableName } from "../theme/types.js";
+import { type CSSVariable } from "../theme/useCSSVariables.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-layout-size"?: string;
@@ -8,7 +8,7 @@ declare module "react" {
     }
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutAppBarHeightResult {
     height: number | undefined;
@@ -16,8 +16,7 @@ export interface LayoutAppBarHeightResult {
     appBarRef: RefCallback<HTMLDivElement>;
 }
 /**
- * @example
- * Main Usage
+ * @example Main Usage
  * ```tsx
  * import type { PropsWithChildren, ReactElement } from "react";
  * import {
@@ -38,8 +37,7 @@ export interface LayoutAppBarHeightResult {
  * };
  * ```
  *
- * @example
- * Inline Variables
+ * @example Inline Variables
  * ```tsx
  * import type { PropsWithChildren, ReactElement } from "react";
  * import {
@@ -63,6 +61,6 @@ export interface LayoutAppBarHeightResult {
  * };
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useLayoutAppBarHeight(ref?: Ref<HTMLDivElement>): LayoutAppBarHeightResult;

package/dist/layout/useLayoutAppBarHeight.js

@@ -2,8 +2,7 @@
 import { useMemo } from "react";
 import { useElementSize } from "../useElementSize.js";
 /**
- * @example
- * Main Usage
+ * @example Main Usage
  * ```tsx
  * import type { PropsWithChildren, ReactElement } from "react";
  * import {
@@ -24,8 +23,7 @@ import { useElementSize } from "../useElementSize.js";
  * };
  * ```
  *
- * @example
- * Inline Variables
+ * @example Inline Variables
  * ```tsx
  * import type { PropsWithChildren, ReactElement } from "react";
  * import {
@@ -49,14 +47,14 @@ import { useElementSize } from "../useElementSize.js";
  * };
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useLayoutAppBarHeight(ref) {
-    const { height, elementRef } = useElementSize({
+    const { height, elementRef, observedOnce } = useElementSize({
         ref,
         disableWidth: true
     });
     const variables = useMemo(()=>{
-        if (Number.isNaN(height)) {
+        if (Number.isNaN(height) || !observedOnce) {
             return [];
         }
         return [
@@ -66,7 +64,8 @@ import { useElementSize } from "../useElementSize.js";
             }
         ];
     }, [
-        height
+        height,
+        observedOnce
     ]);
     return {
         height,

package/dist/layout/useLayoutAppBarHeight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutAppBarHeight.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback } from \"react\";\nimport { useMemo } from \"react\";\nimport type { DefinedCSSVariableName } from \"../theme/types.js\";\nimport type { CSSVariable } from \"../theme/useCSSVariables.js\";\nimport { useElementSize } from \"../useElementSize.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-layout-size\"?: string;\n    \"--rmd-layout-header-height\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LayoutAppBarHeightResult {\n  height: number | undefined;\n  variables: readonly CSSVariable<DefinedCSSVariableName>[];\n  appBarRef: RefCallback<HTMLDivElement>;\n}\n\n/**\n * @example\n * Main Usage\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   useCSSVariables(variables);\n *\n *   return (\n *     <AppBar ref={appBarRef} {...customProps}>\n *       <CustomChildren />\n *     </AppBar>\n *   );\n * };\n * ```\n *\n * @example\n * Inline Variables\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   const inlineStyle = useCSSVariables(variables, true);\n *\n *   return (\n *     <div style={inlineStyle}>\n *       <AppBar ref={appBarRef} {...customProps}>\n *         <CustomChildren />\n *       </AppBar>\n *       {children}\n *     </div>\n *   );\n * };\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useLayoutAppBarHeight(\n  ref?: Ref<HTMLDivElement>\n): LayoutAppBarHeightResult {\n  const { height, elementRef } = useElementSize({\n    ref,\n    disableWidth: true,\n  });\n  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {\n    if (Number.isNaN(height)) {\n      return [];\n    }\n\n    return [{ name: \"--rmd-layout-header-height\", value: `${height}px` }];\n  }, [height]);\n\n  return {\n    height,\n    variables,\n    appBarRef: elementRef,\n  };\n}\n"],"names":["useMemo","useElementSize","useLayoutAppBarHeight","ref","height","elementRef","disableWidth","variables","Number","isNaN","name","value","appBarRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAGhC,SAASC,cAAc,QAAQ,uBAAuB;AAkBtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGJ,eAAe;QAC5CE;QACAG,cAAc;IAChB;IACA,MAAMC,YAAYP,QAA+C;QAC/D,IAAIQ,OAAOC,KAAK,CAACL,SAAS;YACxB,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAEM,MAAM;gBAA8BC,OAAO,CAAC,EAAEP,OAAO,EAAE,CAAC;YAAC;SAAE;IACvE,GAAG;QAACA;KAAO;IAEX,OAAO;QACLA;QACAG;QACAK,WAAWP;IACb;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutAppBarHeight.ts"],"sourcesContent":["\"use client\";\nimport { useMemo, type Ref, type RefCallback } from \"react\";\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { type CSSVariable } from \"../theme/useCSSVariables.js\";\nimport { useElementSize } from \"../useElementSize.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-layout-size\"?: string;\n    \"--rmd-layout-header-height\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutAppBarHeightResult {\n  height: number | undefined;\n  variables: readonly CSSVariable<DefinedCSSVariableName>[];\n  appBarRef: RefCallback<HTMLDivElement>;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   useCSSVariables(variables);\n *\n *   return (\n *     <AppBar ref={appBarRef} {...customProps}>\n *       <CustomChildren />\n *     </AppBar>\n *   );\n * };\n * ```\n *\n * @example Inline Variables\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   const inlineStyle = useCSSVariables(variables, true);\n *\n *   return (\n *     <div style={inlineStyle}>\n *       <AppBar ref={appBarRef} {...customProps}>\n *         <CustomChildren />\n *       </AppBar>\n *       {children}\n *     </div>\n *   );\n * };\n * ```\n *\n * @since 6.0.0\n */\nexport function useLayoutAppBarHeight(\n  ref?: Ref<HTMLDivElement>\n): LayoutAppBarHeightResult {\n  const { height, elementRef, observedOnce } = useElementSize({\n    ref,\n    disableWidth: true,\n  });\n  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {\n    if (Number.isNaN(height) || !observedOnce) {\n      return [];\n    }\n\n    return [{ name: \"--rmd-layout-header-height\", value: `${height}px` }];\n  }, [height, observedOnce]);\n\n  return {\n    height,\n    variables,\n    appBarRef: elementRef,\n  };\n}\n"],"names":["useMemo","useElementSize","useLayoutAppBarHeight","ref","height","elementRef","observedOnce","disableWidth","variables","Number","isNaN","name","value","appBarRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,OAAO,QAAoC,QAAQ;AAG5D,SAASC,cAAc,QAAQ,uBAAuB;AAkBtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL,eAAe;QAC1DE;QACAI,cAAc;IAChB;IACA,MAAMC,YAAYR,QAA+C;QAC/D,IAAIS,OAAOC,KAAK,CAACN,WAAW,CAACE,cAAc;YACzC,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAEK,MAAM;gBAA8BC,OAAO,CAAC,EAAER,OAAO,EAAE,CAAC;YAAC;SAAE;IACvE,GAAG;QAACA;QAAQE;KAAa;IAEzB,OAAO;QACLF;QACAI;QACAK,WAAWR;IACb;AACF"}

package/dist/layout/useLayoutTree.d.ts

@@ -1,8 +1,8 @@
-import type { TreeProps } from "../tree/Tree.js";
-import type { DefaultTreeItemNode, TreeData, TreeItemDefaultIds, TreeItemNode } from "../tree/types.js";
-import type { TreeImplementation } from "../tree/useTree.js";
+import { type TreeProps } from "../tree/Tree.js";
+import { type DefaultTreeItemNode, type TreeData, type TreeItemDefaultIds, type TreeItemNode } from "../tree/types.js";
+import { type TreeImplementation } from "../tree/useTree.js";
 /**
- * @remarks \@since 6.0.0 Removed the `linkComponent` option.
+ * @since 6.0.0 Removed the `linkComponent` option.
  */
 export interface LayoutTreeOptions<T extends TreeItemNode = DefaultTreeItemNode> {
     /**
@@ -51,7 +51,7 @@ export interface LayoutTreeOptions<T extends TreeItemNode = DefaultTreeItemNode>
     defaultExpandedIds?: TreeItemDefaultIds;
 }
 /**
- * @remarks \@since 6.0.0 Renamed from `LayoutNavigationState`, removed the
+ * @since 6.0.0 Renamed from `LayoutNavigationState`, removed the
  * `linkComponent`, and remap `navItems` to `data` so it can be passed to the
  * `Tree` component.
  */
@@ -134,6 +134,6 @@ export interface LayoutTreeImplementation<T extends TreeItemNode = DefaultTreeIt
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Renamed from `useLayoutNavigation`.
+ * @since 6.0.0 Renamed from `useLayoutNavigation`.
  */
 export declare function useLayoutTree(options: LayoutTreeOptions): LayoutTreeImplementation;

package/dist/layout/useLayoutTree.js

@@ -85,7 +85,7 @@ const noop = ()=>{
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Renamed from `useLayoutNavigation`.
+ * @since 6.0.0 Renamed from `useLayoutNavigation`.
  */ export function useLayoutTree(options) {
     const { defaultExpandedIds, navItems, pathname } = options;
     const selectedIds = useMemo(()=>new Set([

package/dist/layout/useLayoutTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutTree.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo } from \"react\";\nimport type { TreeProps } from \"../tree/Tree.js\";\nimport type {\n  DefaultTreeItemNode,\n  TreeData,\n  TreeItemDefaultIds,\n  TreeItemNode,\n} from \"../tree/types.js\";\nimport type { TreeImplementation } from \"../tree/useTree.js\";\nimport { useTreeExpansion } from \"../tree/useTreeExpansion.js\";\nimport { getTreeItemsFrom } from \"../tree/utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nconst getParentIds = (\n  itemId: string,\n  navItems: TreeData<TreeItemNode>\n): readonly string[] =>\n  getTreeItemsFrom(navItems, itemId).map(({ itemId }) => itemId);\n\n/**\n * @remarks \\@since 6.0.0 Removed the `linkComponent` option.\n */\nexport interface LayoutTreeOptions<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> {\n  /**\n   * The current pathname which is used as the tree `itemId`.\n   */\n  pathname: string;\n\n  /**\n   * @example\n   * ```tsx\n   * const navItems = {\n   *   \"/\": {\n   *     itemId: \"/\",\n   *     parentId: null,\n   *     children: \"Home\",\n   *     leftAddon: <HomeIcon />,\n   *     to: \"/\",\n   *   },\n   *   \"/route-1\": {\n   *     itemId: \"/route-1\",\n   *     parentId: null,\n   *     children: \"Route 1\",\n   *     leftAddon: <TvIcon />,\n   *     to: \"/route-1\",\n   *   },\n   *   \"/route-2\": {\n   *     itemId: \"/route-2\",\n   *     parentId: null,\n   *     children: \"Route 2\",\n   *     leftAddon: <AppsIcon />,\n   *     to: \"/route-2\",\n   *   },\n   *   \"/route-3\": {\n   *     itemId: \"/route-3\",\n   *     parentId: null,\n   *     children: \"Route 3\",\n   *     leftAddon: <BookIcon />,\n   *     to: \"/route-3\",\n   *   },\n   * } satisfies TreeData;\n   * ```\n   */\n  navItems: TreeData<T>;\n\n  /**\n   * @defaultValue `getParentIds(pathname, navItems)`\n   */\n  defaultExpandedIds?: TreeItemDefaultIds;\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed from `LayoutNavigationState`, removed the\n * `linkComponent`, and remap `navItems` to `data` so it can be passed to the\n * `Tree` component.\n */\nexport interface LayoutTreeImplementation<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends Pick<TreeProps<T>, \"data\">,\n    TreeImplementation {}\n\n/**\n * Before considering to use a `Tree` for site navigation, it is important to\n * understand:\n * - There is a lot of functionality required to implement the tree widget so\n *   your bundle size will increase\n * - A pattern more suited for typical site navigation with expandable groups of\n *   links is the disclosure pattern.\n * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/\n *\n * This is a pretty reasonable default implementation for having a navigation\n * tree within the Layout component. The way it'll work is that the current\n * route will be the only selected item within the tree. When the pathname\n * changes, the selectedIds will be updated to only be the current pathname once\n * again.\n *\n * This means that you can use whatever routing library or history provider that\n * ensures that your layout re-renders on a path change.\n *\n * @example\n * ```tsx\n * import { Tree, useLayoutTree } from \"@react-md/core\";\n * import type { TreeData } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * // choose your routing library...\n * import { Link, useLocation } from \"react-router\";\n *\n * const navItems = {\n *   \"/\": {\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *     leftAddon: <HomeIcon />,\n *     to: \"/\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Route 1\",\n *     leftAddon: <TvIcon />,\n *     to: \"/route-1\",\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *     leftAddon: <AppsIcon />,\n *     to: \"/route-2\",\n *   },\n *   \"/route-3\": {\n *     itemId: \"/route-3\",\n *     parentId: null,\n *     children: \"Route 3\",\n *     leftAddon: <BookIcon />,\n *     to: \"/route-3\",\n *   },\n * } satisfies TreeData;\n *\n * function Example(): ReactElement {\n *   const { pathname } = useLocation();\n *   const tree = useLayoutTree({\n *     navItems,\n *     pathname,\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Navigation\"\n *       linkComponent={Link}\n *     />\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Renamed from `useLayoutNavigation`.\n */\nexport function useLayoutTree(\n  options: LayoutTreeOptions\n): LayoutTreeImplementation {\n  const { defaultExpandedIds, navItems, pathname } = options;\n\n  const selectedIds = useMemo(() => new Set([pathname]), [pathname]);\n  const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } =\n    useTreeExpansion(\n      defaultExpandedIds ?? (() => getParentIds(pathname, navItems))\n    );\n\n  useEffect(() => {\n    expandMultipleTreeItems((prevExpandedIds) => {\n      const nextExpandedIds = new Set([\n        ...prevExpandedIds,\n        ...getParentIds(pathname, navItems),\n      ]);\n\n      return nextExpandedIds;\n    });\n  }, [expandMultipleTreeItems, pathname, navItems]);\n\n  return {\n    data: navItems,\n    multiSelect: false,\n    selectedIds,\n    expandedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    toggleTreeItemSelection: noop,\n    selectMultipleTreeItems: noop,\n  };\n}\n"],"names":["useEffect","useMemo","useTreeExpansion","getTreeItemsFrom","noop","getParentIds","itemId","navItems","map","useLayoutTree","options","defaultExpandedIds","pathname","selectedIds","Set","expandedIds","expandMultipleTreeItems","toggleTreeItemExpansion","prevExpandedIds","nextExpandedIds","data","multiSelect","toggleTreeItemSelection","selectMultipleTreeItems"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAS3C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,MAAMC,eAAe,CACnBC,QACAC,WAEAJ,iBAAiBI,UAAUD,QAAQE,GAAG,CAAC,CAAC,EAAEF,MAAM,EAAE,GAAKA;AAkEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASG,cACdC,OAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAEJ,QAAQ,EAAEK,QAAQ,EAAE,GAAGF;IAEnD,MAAMG,cAAcZ,QAAQ,IAAM,IAAIa,IAAI;YAACF;SAAS,GAAG;QAACA;KAAS;IACjE,MAAM,EAAEG,WAAW,EAAEC,uBAAuB,EAAEC,uBAAuB,EAAE,GACrEf,iBACES,sBAAuB,CAAA,IAAMN,aAAaO,UAAUL,SAAQ;IAGhEP,UAAU;QACRgB,wBAAwB,CAACE;YACvB,MAAMC,kBAAkB,IAAIL,IAAI;mBAC3BI;mBACAb,aAAaO,UAAUL;aAC3B;YAED,OAAOY;QACT;IACF,GAAG;QAACH;QAAyBJ;QAAUL;KAAS;IAEhD,OAAO;QACLa,MAAMb;QACNc,aAAa;QACbR;QACAE;QACAC;QACAC;QACAK,yBAAyBlB;QACzBmB,yBAAyBnB;IAC3B;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutTree.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo } from \"react\";\nimport { type TreeProps } from \"../tree/Tree.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeItemDefaultIds,\n  type TreeItemNode,\n} from \"../tree/types.js\";\nimport { type TreeImplementation } from \"../tree/useTree.js\";\nimport { useTreeExpansion } from \"../tree/useTreeExpansion.js\";\nimport { getTreeItemsFrom } from \"../tree/utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nconst getParentIds = (\n  itemId: string,\n  navItems: TreeData<TreeItemNode>\n): readonly string[] =>\n  getTreeItemsFrom(navItems, itemId).map(({ itemId }) => itemId);\n\n/**\n * @since 6.0.0 Removed the `linkComponent` option.\n */\nexport interface LayoutTreeOptions<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> {\n  /**\n   * The current pathname which is used as the tree `itemId`.\n   */\n  pathname: string;\n\n  /**\n   * @example\n   * ```tsx\n   * const navItems = {\n   *   \"/\": {\n   *     itemId: \"/\",\n   *     parentId: null,\n   *     children: \"Home\",\n   *     leftAddon: <HomeIcon />,\n   *     to: \"/\",\n   *   },\n   *   \"/route-1\": {\n   *     itemId: \"/route-1\",\n   *     parentId: null,\n   *     children: \"Route 1\",\n   *     leftAddon: <TvIcon />,\n   *     to: \"/route-1\",\n   *   },\n   *   \"/route-2\": {\n   *     itemId: \"/route-2\",\n   *     parentId: null,\n   *     children: \"Route 2\",\n   *     leftAddon: <AppsIcon />,\n   *     to: \"/route-2\",\n   *   },\n   *   \"/route-3\": {\n   *     itemId: \"/route-3\",\n   *     parentId: null,\n   *     children: \"Route 3\",\n   *     leftAddon: <BookIcon />,\n   *     to: \"/route-3\",\n   *   },\n   * } satisfies TreeData;\n   * ```\n   */\n  navItems: TreeData<T>;\n\n  /**\n   * @defaultValue `getParentIds(pathname, navItems)`\n   */\n  defaultExpandedIds?: TreeItemDefaultIds;\n}\n\n/**\n * @since 6.0.0 Renamed from `LayoutNavigationState`, removed the\n * `linkComponent`, and remap `navItems` to `data` so it can be passed to the\n * `Tree` component.\n */\nexport interface LayoutTreeImplementation<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends Pick<TreeProps<T>, \"data\">,\n    TreeImplementation {}\n\n/**\n * Before considering to use a `Tree` for site navigation, it is important to\n * understand:\n * - There is a lot of functionality required to implement the tree widget so\n *   your bundle size will increase\n * - A pattern more suited for typical site navigation with expandable groups of\n *   links is the disclosure pattern.\n * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/\n *\n * This is a pretty reasonable default implementation for having a navigation\n * tree within the Layout component. The way it'll work is that the current\n * route will be the only selected item within the tree. When the pathname\n * changes, the selectedIds will be updated to only be the current pathname once\n * again.\n *\n * This means that you can use whatever routing library or history provider that\n * ensures that your layout re-renders on a path change.\n *\n * @example\n * ```tsx\n * import { Tree, useLayoutTree } from \"@react-md/core\";\n * import type { TreeData } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * // choose your routing library...\n * import { Link, useLocation } from \"react-router\";\n *\n * const navItems = {\n *   \"/\": {\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *     leftAddon: <HomeIcon />,\n *     to: \"/\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Route 1\",\n *     leftAddon: <TvIcon />,\n *     to: \"/route-1\",\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *     leftAddon: <AppsIcon />,\n *     to: \"/route-2\",\n *   },\n *   \"/route-3\": {\n *     itemId: \"/route-3\",\n *     parentId: null,\n *     children: \"Route 3\",\n *     leftAddon: <BookIcon />,\n *     to: \"/route-3\",\n *   },\n * } satisfies TreeData;\n *\n * function Example(): ReactElement {\n *   const { pathname } = useLocation();\n *   const tree = useLayoutTree({\n *     navItems,\n *     pathname,\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Navigation\"\n *       linkComponent={Link}\n *     />\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `useLayoutNavigation`.\n */\nexport function useLayoutTree(\n  options: LayoutTreeOptions\n): LayoutTreeImplementation {\n  const { defaultExpandedIds, navItems, pathname } = options;\n\n  const selectedIds = useMemo(() => new Set([pathname]), [pathname]);\n  const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } =\n    useTreeExpansion(\n      defaultExpandedIds ?? (() => getParentIds(pathname, navItems))\n    );\n\n  useEffect(() => {\n    expandMultipleTreeItems((prevExpandedIds) => {\n      const nextExpandedIds = new Set([\n        ...prevExpandedIds,\n        ...getParentIds(pathname, navItems),\n      ]);\n\n      return nextExpandedIds;\n    });\n  }, [expandMultipleTreeItems, pathname, navItems]);\n\n  return {\n    data: navItems,\n    multiSelect: false,\n    selectedIds,\n    expandedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    toggleTreeItemSelection: noop,\n    selectMultipleTreeItems: noop,\n  };\n}\n"],"names":["useEffect","useMemo","useTreeExpansion","getTreeItemsFrom","noop","getParentIds","itemId","navItems","map","useLayoutTree","options","defaultExpandedIds","pathname","selectedIds","Set","expandedIds","expandMultipleTreeItems","toggleTreeItemExpansion","prevExpandedIds","nextExpandedIds","data","multiSelect","toggleTreeItemSelection","selectMultipleTreeItems"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAS3C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,MAAMC,eAAe,CACnBC,QACAC,WAEAJ,iBAAiBI,UAAUD,QAAQE,GAAG,CAAC,CAAC,EAAEF,MAAM,EAAE,GAAKA;AAkEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASG,cACdC,OAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAEJ,QAAQ,EAAEK,QAAQ,EAAE,GAAGF;IAEnD,MAAMG,cAAcZ,QAAQ,IAAM,IAAIa,IAAI;YAACF;SAAS,GAAG;QAACA;KAAS;IACjE,MAAM,EAAEG,WAAW,EAAEC,uBAAuB,EAAEC,uBAAuB,EAAE,GACrEf,iBACES,sBAAuB,CAAA,IAAMN,aAAaO,UAAUL,SAAQ;IAGhEP,UAAU;QACRgB,wBAAwB,CAACE;YACvB,MAAMC,kBAAkB,IAAIL,IAAI;mBAC3BI;mBACAb,aAAaO,UAAUL;aAC3B;YAED,OAAOY;QACT;IACF,GAAG;QAACH;QAAyBJ;QAAUL;KAAS;IAEhD,OAAO;QACLa,MAAMb;QACNc,aAAa;QACbR;QACAE;QACAC;QACAC;QACAK,yBAAyBlB;QACzBmB,yBAAyBnB;IAC3B;AACF"}

package/dist/layout/useLayoutWindowSplitter.d.ts

@@ -1,7 +1,7 @@
 import { type UseStateInitializer } from "../types.js";
 import { type WindowSplitterImplementation, type WindowSplitterOptions, type WindowSplitterWidgetProps } from "../window-splitter/useWindowSplitter.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutWindowSplitterOptions extends Omit<WindowSplitterOptions, "min" | "max"> {
     /**
@@ -34,14 +34,14 @@ export interface LayoutWindowSplitterOptions extends Omit<WindowSplitterOptions,
     defaultValue?: UseStateInitializer<number>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedLayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTMLButtonElement> {
     /** @defaultValue {@link WindowSplitterImplementation.value} */
     navWidth: number;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutWindowSplitterImplementation extends WindowSplitterImplementation {
     splitterProps: ProvidedLayoutWindowSplitterProps;
@@ -54,8 +54,7 @@ export interface LayoutWindowSplitterImplementation extends WindowSplitterImplem
  * Note: This will automatically save the width in local storage as
  * `"navWidth"`. See the example below if you do not want to use local storage.
  *
- * @example
- * Without this hook
+ * @example Without this hook
  * ```tsx
  * import { useWindowSize, useWindowSplitter } from "@react-md/core";
  * import type { ProvidedLayoutWindowSplitterProps } from "@react-md/core";
@@ -87,6 +86,6 @@ export interface LayoutWindowSplitterImplementation extends WindowSplitterImplem
  * ```
  *
  * @see {@link useResizableLayout} For a pre-built solution.
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useLayoutWindowSplitter(options?: LayoutWindowSplitterOptions): LayoutWindowSplitterImplementation;

package/dist/layout/useLayoutWindowSplitter.js

@@ -9,8 +9,7 @@ import { useWindowSplitter } from "../window-splitter/useWindowSplitter.js";
  * Note: This will automatically save the width in local storage as
  * `"navWidth"`. See the example below if you do not want to use local storage.
  *
- * @example
- * Without this hook
+ * @example Without this hook
  * ```tsx
  * import { useWindowSize, useWindowSplitter } from "@react-md/core";
  * import type { ProvidedLayoutWindowSplitterProps } from "@react-md/core";
@@ -42,7 +41,7 @@ import { useWindowSplitter } from "../window-splitter/useWindowSplitter.js";
  * ```
  *
  * @see {@link useResizableLayout} For a pre-built solution.
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useLayoutWindowSplitter(options = {}) {
     const { min = 96, maxMinimum = 600, windowPercentage = 0.45, defaultValue = 256, ...remaining } = options;
     const { width } = useWindowSize({