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

package/dist/layout/useExpandableLayout.js

@@ -1,22 +1,21 @@
 "use client";
+import { cnb } from "cnbuilder";
+import { useSsr } from "../SsrProvider.js";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { useToggle } from "../useToggle.js";
 import { useHorizontalLayoutTransition } from "./useHorizontalLayoutTransition.js";
 import { useTemporaryLayout } from "./useTemporaryLayout.js";
 /**
- * @example
- * Main USage
+ * @example Main Usage
  * ```tsx
- * import {
- *   AppBarTitle,
- *   Button,
- *   LayoutAppBar,
- *   LayoutNav,
- *   Main,
- *   Sheet,
- *   useExpandableLayout,
- * } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { LayoutNav } from "@react-md/core/layout/LayoutNav";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useExpandableLayout } from "@react-md/core/layout/useExpandableLayout";
+ * import { Sheet } from "@react-md/core/sheet/Sheet";
+ * import { type ReactElement, type ReactNode } from "react";
  *
  * import { CustomNavigation } from "./CustomNavigation";
  *
@@ -45,7 +44,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  *     windowSplitterProps,
  *   } = useExpandableLayout({ pathname });
  *
- *   return {
+ *   return (
  *     <>
  *       <LayoutAppBar {...appBarProps}>
  *         <Button {...navToggleProps} />
@@ -61,14 +60,57 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  *       )}
  *       <Main {...mainProps}>{children}</Main>
  *     </>
- *   }
+ *   );
  * }
  * ```
  *
- * @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>
+ *     </>
+ *   );
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @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 +122,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
     return {
         visible,
         temporary,
+        persistent: ssr || !temporary,
         hideTemporaryNav,
         showTemporaryNav,
         expanded,
@@ -107,7 +150,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"],"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\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\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  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\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 { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type 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 * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\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","useSsr","useAppSize","useToggle","useHorizontalLayoutTransition","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"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAEEC,6BAA6B,QACxB,qCAAqC;AAG5C,SAMEC,kBAAkB,QACb,0BAA0B;AAoFjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,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,MAAMZ;IACZ,MAAM,EACJa,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,GAAGzB,UAAUQ;IACd,MAAM,EAAEkB,YAAY,EAAE,GAAGzB,8BAA8B;QACrD,GAAGM,eAAe;QAClBoB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG9B;IAC/B,MAAM+B,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,16 +1,16 @@
-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;
-    enter: string;
-    enterActive: string;
-    enterDone: string;
-    exit: string;
+    readonly appearDone: "rmd-layout-h--active";
+    readonly enter: "rmd-layout-h--enter";
+    readonly enterActive: "rmd-layout-h--active";
+    readonly enterDone: "rmd-layout-h--active";
+    readonly exit: "rmd-layout-h--exit";
 };
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTransitionOptions<HTMLElement> {
     /**
@@ -27,7 +27,9 @@ export interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTrans
 /**
  * @example
  * ```tsx
- * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from "@react-md/core";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useHorizontalLayoutTransition } from "@react-md/core/layout/useHorizontalLayoutTransition";
  * import type { ReactElement, ReactNode } from "react";
  *
  * interface Props {
@@ -61,6 +63,7 @@ export interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTrans
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @since 6.0.0
  */
 export declare function useHorizontalLayoutTransition<E extends HTMLElement = HTMLElement>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E>;

package/dist/layout/useHorizontalLayoutTransition.js

@@ -1,9 +1,9 @@
 "use client";
 import { cnb } from "cnbuilder";
-import { DEFAULT_SHEET_TIMEOUT } from "../sheet/Sheet.js";
+import { DEFAULT_SHEET_TIMEOUT } from "../sheet/styles.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",
@@ -14,7 +14,9 @@ import { useCSSTransition } from "../transition/useCSSTransition.js";
 /**
  * @example
  * ```tsx
- * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from "@react-md/core";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useHorizontalLayoutTransition } from "@react-md/core/layout/useHorizontalLayoutTransition";
  * import type { ReactElement, ReactNode } from "react";
  *
  * interface Props {
@@ -48,7 +50,8 @@ import { useCSSTransition } from "../transition/useCSSTransition.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @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"],"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\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/styles.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} as const satisfies 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 } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\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 * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\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"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,qBAAqB,QAAQ,qBAAqB;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA6C;AAmB7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,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,5 @@
-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 CSSVariable } from "../theme/types.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-layout-size"?: string;
@@ -8,23 +7,20 @@ declare module "react" {
     }
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LayoutAppBarHeightResult {
     height: number | undefined;
-    variables: readonly CSSVariable<DefinedCSSVariableName>[];
+    variables: readonly CSSVariable[];
     appBarRef: RefCallback<HTMLDivElement>;
 }
 /**
- * @example
- * Main Usage
+ * @example Main Usage
  * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
  * import type { PropsWithChildren, ReactElement } from "react";
- * import {
- *   AppBar,
- *   useCSSVariables,
- *   useLayoutAppBarHeight
- * } from "@react-md/core";
  *
  * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {
  *   const { appBarRef, variables } = useLayoutAppBarHeight();
@@ -38,15 +34,12 @@ export interface LayoutAppBarHeightResult {
  * };
  * ```
  *
- * @example
- * Inline Variables
+ * @example Inline Variables
  * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
  * import type { PropsWithChildren, ReactElement } from "react";
- * import {
- *   AppBar,
- *   useCSSVariables,
- *   useLayoutAppBarHeight
- * } from "@react-md/core";
  *
  * export function Layout({ children }: PropsWithChildren): ReactElement {
  *   const { appBarRef, variables } = useLayoutAppBarHeight();
@@ -63,6 +56,7 @@ export interface LayoutAppBarHeightResult {
  * };
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @since 6.0.0
  */
 export declare function useLayoutAppBarHeight(ref?: Ref<HTMLDivElement>): LayoutAppBarHeightResult;

package/dist/layout/useLayoutAppBarHeight.js

@@ -1,16 +1,13 @@
 "use client";
-import { useCallback, useMemo, useState } from "react";
-import { useResizeObserver } from "../useResizeObserver.js";
+import { useMemo } from "react";
+import { useElementSize } from "../useElementSize.js";
 /**
- * @example
- * Main Usage
+ * @example Main Usage
  * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
  * import type { PropsWithChildren, ReactElement } from "react";
- * import {
- *   AppBar,
- *   useCSSVariables,
- *   useLayoutAppBarHeight
- * } from "@react-md/core";
  *
  * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {
  *   const { appBarRef, variables } = useLayoutAppBarHeight();
@@ -24,15 +21,12 @@ import { useResizeObserver } from "../useResizeObserver.js";
  * };
  * ```
  *
- * @example
- * Inline Variables
+ * @example Inline Variables
  * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
  * import type { PropsWithChildren, ReactElement } from "react";
- * import {
- *   AppBar,
- *   useCSSVariables,
- *   useLayoutAppBarHeight
- * } from "@react-md/core";
  *
  * export function Layout({ children }: PropsWithChildren): ReactElement {
  *   const { appBarRef, variables } = useLayoutAppBarHeight();
@@ -49,18 +43,15 @@ import { useResizeObserver } from "../useResizeObserver.js";
  * };
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @since 6.0.0
  */ export function useLayoutAppBarHeight(ref) {
-    const [height, setHeight] = useState();
-    const targetRef = useResizeObserver({
+    const { height, elementRef, observedOnce } = useElementSize({
         ref,
-        onUpdate: useCallback((entry)=>{
-            setHeight(entry.borderBoxSize[0].blockSize);
-        }, []),
         disableWidth: true
     });
     const variables = useMemo(()=>{
-        if (typeof height !== "number") {
+        if (Number.isNaN(height) || !observedOnce) {
             return [];
         }
         return [
@@ -70,12 +61,13 @@ import { useResizeObserver } from "../useResizeObserver.js";
             }
         ];
     }, [
-        height
+        height,
+        observedOnce
     ]);
     return {
         height,
         variables,
-        appBarRef: targetRef
+        appBarRef: elementRef
     };
 }
 

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 { useCallback, useMemo, useState } from \"react\";\nimport type { DefinedCSSVariableName } from \"../theme/types.js\";\nimport type { CSSVariable } from \"../theme/useCSSVariables.js\";\nimport { useResizeObserver } from \"../useResizeObserver.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, setHeight] = useState<number | undefined>();\n  const targetRef = useResizeObserver({\n    ref,\n    onUpdate: useCallback((entry) => {\n      setHeight(entry.borderBoxSize[0].blockSize);\n    }, []),\n    disableWidth: true,\n  });\n  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {\n    if (typeof height !== \"number\") {\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: targetRef,\n  };\n}\n"],"names":["useCallback","useMemo","useState","useResizeObserver","useLayoutAppBarHeight","ref","height","setHeight","targetRef","onUpdate","entry","borderBoxSize","blockSize","disableWidth","variables","name","value","appBarRef"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAGvD,SAASC,iBAAiB,QAAQ,0BAA0B;AAkB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,CAACC,QAAQC,UAAU,GAAGL;IAC5B,MAAMM,YAAYL,kBAAkB;QAClCE;QACAI,UAAUT,YAAY,CAACU;YACrBH,UAAUG,MAAMC,aAAa,CAAC,EAAE,CAACC,SAAS;QAC5C,GAAG,EAAE;QACLC,cAAc;IAChB;IACA,MAAMC,YAAYb,QAA+C;QAC/D,IAAI,OAAOK,WAAW,UAAU;YAC9B,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAES,MAAM;gBAA8BC,OAAO,CAAC,EAAEV,OAAO,EAAE,CAAC;YAAC;SAAE;IACvE,GAAG;QAACA;KAAO;IAEX,OAAO;QACLA;QACAQ;QACAG,WAAWT;IACb;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutAppBarHeight.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback, useMemo } from \"react\";\n\nimport { type CSSVariable } from \"../theme/types.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[];\n  appBarRef: RefCallback<HTMLDivElement>;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { useLayoutAppBarHeight } from \"@react-md/core/layout/useLayoutAppBarHeight\";\n * import { useCSSVariables } from \"@react-md/core/theme/useCSSVariables\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\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 { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { useLayoutAppBarHeight } from \"@react-md/core/layout/useLayoutAppBarHeight\";\n * import { useCSSVariables } from \"@react-md/core/theme/useCSSVariables\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\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 * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\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[]>(() => {\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"],"mappings":"AAAA;AAEA,SAAqCA,OAAO,QAAQ,QAAQ;AAG5D,SAASC,cAAc,QAAQ,uBAAuB;AAkBtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL,eAAe;QAC1DE;QACAI,cAAc;IAChB;IACA,MAAMC,YAAYR,QAAuB;QACvC,IAAIS,OAAOC,KAAK,CAACN,WAAW,CAACE,cAAc;YACzC,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAEK,MAAM;gBAA8BC,OAAO,GAAGR,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 TreeDefaultIds, 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> {
     /**
@@ -48,10 +48,10 @@ export interface LayoutTreeOptions<T extends TreeItemNode = DefaultTreeItemNode>
     /**
      * @defaultValue `getParentIds(pathname, navItems)`
      */
-    defaultExpandedIds?: TreeItemDefaultIds;
+    defaultExpandedIds?: TreeDefaultIds;
 }
 /**
- * @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.
  */
@@ -79,9 +79,10 @@ export interface LayoutTreeImplementation<T extends TreeItemNode = DefaultTreeIt
  *
  * @example
  * ```tsx
- * import { Tree, useLayoutTree } from "@react-md/core";
- * import type { TreeData } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useLayoutTree } from "@react-md/core/layout/useLayoutTree"
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { type ReactElement } from "react";
  *
  * // choose your routing library...
  * import { Link, useLocation } from "react-router";
@@ -134,6 +135,9 @@ export interface LayoutTreeImplementation<T extends TreeItemNode = DefaultTreeIt
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Renamed from `useLayoutNavigation`.
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-layout-tree | useLayoutTree Demos}
+ * @since 6.0.0 Renamed from `useLayoutNavigation`.
  */
 export declare function useLayoutTree(options: LayoutTreeOptions): LayoutTreeImplementation;

package/dist/layout/useLayoutTree.js

@@ -30,9 +30,10 @@ const noop = ()=>{
  *
  * @example
  * ```tsx
- * import { Tree, useLayoutTree } from "@react-md/core";
- * import type { TreeData } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useLayoutTree } from "@react-md/core/layout/useLayoutTree"
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { type ReactElement } from "react";
  *
  * // choose your routing library...
  * import { Link, useLocation } from "react-router";
@@ -85,7 +86,10 @@ const noop = ()=>{
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Renamed from `useLayoutNavigation`.
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-layout-tree | useLayoutTree Demos}
+ * @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"],"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\";\n\nimport { useEffect, useMemo } from \"react\";\n\nimport { type TreeProps } from \"../tree/Tree.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeDefaultIds,\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?: TreeDefaultIds;\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 { useLayoutTree } from \"@react-md/core/layout/useLayoutTree\"\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\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 * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}\n * @see {@link https://next.react-md.dev/components/tree | Tree Demos}\n * @see {@link https://next.react-md.dev/hooks/use-layout-tree | useLayoutTree Demos}\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"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAU3C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFC,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,11 +54,11 @@ 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";
+ * import { type ProvidedLayoutWindowSplitterProps } from "@react-md/core/layout/useLayoutWindowSplitter";
+ * import { useWindowSplitter } from "@react-md/core/window-splitter/useWindowSplitter";
+ * import { useWindowSize } from "@react-md/core/useWindowSize.js";
  *
  * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {
  *   const { width } = useWindowSize({ disableHeight: true });
@@ -86,7 +86,8 @@ export interface LayoutWindowSplitterImplementation extends WindowSplitterImplem
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @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,11 +9,11 @@ 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";
+ * import { type ProvidedLayoutWindowSplitterProps } from "@react-md/core/layout/useLayoutWindowSplitter";
+ * import { useWindowSplitter } from "@react-md/core/window-splitter/useWindowSplitter";
+ * import { useWindowSize } from "@react-md/core/useWindowSize.js";
  *
  * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {
  *   const { width } = useWindowSize({ disableHeight: true });
@@ -41,8 +41,9 @@ import { useWindowSplitter } from "../window-splitter/useWindowSplitter.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @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({