@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/useUnmounted.d.ts

@@ -1,9 +1,8 @@
 import type { NonNullRef } from "./types.js";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useUnmounted } from "@react-md/core";
+ * import { useUnmounted } from "@react-md/core/useUnmounted";
  * import { useEffect, useState } from "react";
  *
  * function Example(): ReactElement {
@@ -26,6 +25,6 @@ import type { NonNullRef } from "./types.js";
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useUnmounted(): NonNullRef<boolean>;

package/dist/useUnmounted.js

@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useRef } from "react";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useUnmounted } from "@react-md/core";
+ * import { useUnmounted } from "@react-md/core/useUnmounted";
  * import { useEffect, useState } from "react";
  *
  * function Example(): ReactElement {
@@ -27,7 +26,7 @@ import { useEffect, useRef } from "react";
  *   return null;
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useUnmounted() {
     const unmounted = useRef(false);
     useEffect(()=>{

package/dist/useUnmounted.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useUnmounted.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef } from \"react\";\nimport type { NonNullRef } from \"./types.js\";\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { useUnmounted } from \"@react-md/core\";\n * import { useEffect, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState({ loading: false });\n *   const unmounted = useUnmounted();\n *\n *   useEffect(() => {\n *     async function load(): void {\n *       const result = await fetch('/some-api');\n *       const json = await response.json();\n *       if (!unmounted.current) {\n *         setState({ loading: false, result: json });\n *       }\n *     }\n *\n *     setState({ loading: true });\n *     load();\n *   }, [unmounted]);\n *\n *   return null;\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport function useUnmounted(): NonNullRef<boolean> {\n  const unmounted = useRef(false);\n  useEffect(() => {\n    unmounted.current = false;\n    return () => {\n      unmounted.current = true;\n    };\n  }, []);\n\n  return unmounted;\n}\n"],"names":["useEffect","useRef","useUnmounted","unmounted","current"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASC;IACd,MAAMC,YAAYF,OAAO;IACzBD,UAAU;QACRG,UAAUC,OAAO,GAAG;QACpB,OAAO;YACLD,UAAUC,OAAO,GAAG;QACtB;IACF,GAAG,EAAE;IAEL,OAAOD;AACT"}
+{"version":3,"sources":["../src/useUnmounted.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nimport type { NonNullRef } from \"./types.js\";\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useUnmounted } from \"@react-md/core/useUnmounted\";\n * import { useEffect, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState({ loading: false });\n *   const unmounted = useUnmounted();\n *\n *   useEffect(() => {\n *     async function load(): void {\n *       const result = await fetch('/some-api');\n *       const json = await response.json();\n *       if (!unmounted.current) {\n *         setState({ loading: false, result: json });\n *       }\n *     }\n *\n *     setState({ loading: true });\n *     load();\n *   }, [unmounted]);\n *\n *   return null;\n * }\n * ```\n * @since 6.0.0\n */\nexport function useUnmounted(): NonNullRef<boolean> {\n  const unmounted = useRef(false);\n  useEffect(() => {\n    unmounted.current = false;\n    return () => {\n      unmounted.current = true;\n    };\n  }, []);\n\n  return unmounted;\n}\n"],"names":["useEffect","useRef","useUnmounted","unmounted","current"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC;IACd,MAAMC,YAAYF,OAAO;IACzBD,UAAU;QACRG,UAAUC,OAAO,GAAG;QACpB,OAAO;YACLD,UAAUC,OAAO,GAAG;QACtB;IACF,GAAG,EAAE;IAEL,OAAOD;AACT"}

package/dist/useWindowSize.d.ts

@@ -1,7 +1,7 @@
 import { type ElementSize } from "./types.js";
 import { type ResizeListenerOptions } from "./useResizeListener.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface WindowSizeOptions extends Omit<ResizeListenerOptions, "disabled" | "onUpdate"> {
     /**
@@ -36,10 +36,9 @@ export interface WindowSizeOptions extends Omit<ResizeListenerOptions, "disabled
 /**
  * This is just a convenience wrapper around the {@link useResizeListener}.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useWindowSize } from "@react-md/core";
+ * import { useWindowSize } from "@react-md/core/useWindowSize";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -55,6 +54,6 @@ export interface WindowSizeOptions extends Omit<ResizeListenerOptions, "disabled
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useWindowSize(options?: WindowSizeOptions): ElementSize;

package/dist/useWindowSize.js

@@ -5,10 +5,9 @@ import { useResizeListener } from "./useResizeListener.js";
 /**
  * This is just a convenience wrapper around the {@link useResizeListener}.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useWindowSize } from "@react-md/core";
+ * import { useWindowSize } from "@react-md/core/useWindowSize";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -24,7 +23,7 @@ import { useResizeListener } from "./useResizeListener.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useWindowSize(options = {}) {
     const { once, signal, capture, passive, throttle, ssrHeight = 0, ssrWidth = 0, disableWidth, disableHeight } = options;
     const ssr = useSsr();

package/dist/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useWindowSize.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\nimport { type ElementSize } from \"./types.js\";\nimport {\n  useResizeListener,\n  type ResizeListenerOptions,\n} from \"./useResizeListener.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSizeOptions\n  extends Omit<ResizeListenerOptions, \"disabled\" | \"onUpdate\"> {\n  /**\n   * The default value to use in SSR environments for the window's height.\n   *\n   * @defaultValue `0`\n   */\n  ssrHeight?: number;\n\n  /**\n   * The default value to use in SSR environments for the window's width.\n   *\n   * @defaultValue `0`\n   */\n  ssrWidth?: number;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the height.\n   * The hook can be disabled by setting this and {@link disableWidth} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the width.\n   * The hook can be disabled by setting this and {@link disableHeight} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * This is just a convenience wrapper around the {@link useResizeListener}.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useWindowSize } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width } = useWindowSize();\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSize(options: WindowSizeOptions = {}): ElementSize {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    ssrHeight = 0,\n    ssrWidth = 0,\n    disableWidth,\n    disableHeight,\n  } = options;\n\n  const ssr = useSsr();\n  const [size, setSize] = useState(() => {\n    if (typeof window === \"undefined\" || ssr) {\n      return {\n        height: ssrHeight,\n        width: ssrWidth,\n      };\n    }\n\n    return {\n      height: window.innerHeight,\n      width: window.innerWidth,\n    };\n  });\n\n  useResizeListener({\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    disabled: disableHeight && disableWidth,\n    onUpdate: useCallback(() => {\n      setSize((prevSize) => {\n        const nextSize: ElementSize = {\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const isHeightChange =\n          !disableHeight && prevSize.height !== nextSize.height;\n        const isWidthChange =\n          !disableWidth && prevSize.width !== nextSize.width;\n\n        return isHeightChange || isWidthChange ? nextSize : prevSize;\n      });\n    }, [disableHeight, disableWidth]),\n  });\n\n  return size;\n}\n"],"names":["useCallback","useState","useSsr","useResizeListener","useWindowSize","options","once","signal","capture","passive","throttle","ssrHeight","ssrWidth","disableWidth","disableHeight","ssr","size","setSize","window","height","width","innerHeight","innerWidth","disabled","onUpdate","prevSize","nextSize","isHeightChange","isWidthChange"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SACEC,iBAAiB,QAEZ,yBAAyB;AAwChC;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,cAAcC,UAA6B,CAAC,CAAC;IAC3D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,YAAY,CAAC,EACbC,WAAW,CAAC,EACZC,YAAY,EACZC,aAAa,EACd,GAAGT;IAEJ,MAAMU,MAAMb;IACZ,MAAM,CAACc,MAAMC,QAAQ,GAAGhB,SAAS;QAC/B,IAAI,OAAOiB,WAAW,eAAeH,KAAK;YACxC,OAAO;gBACLI,QAAQR;gBACRS,OAAOR;YACT;QACF;QAEA,OAAO;YACLO,QAAQD,OAAOG,WAAW;YAC1BD,OAAOF,OAAOI,UAAU;QAC1B;IACF;IAEAnB,kBAAkB;QAChBG;QACAC;QACAC;QACAC;QACAC;QACAa,UAAUT,iBAAiBD;QAC3BW,UAAUxB,YAAY;YACpBiB,QAAQ,CAACQ;gBACP,MAAMC,WAAwB;oBAC5BP,QAAQD,OAAOG,WAAW;oBAC1BD,OAAOF,OAAOI,UAAU;gBAC1B;gBAEA,MAAMK,iBACJ,CAACb,iBAAiBW,SAASN,MAAM,KAAKO,SAASP,MAAM;gBACvD,MAAMS,gBACJ,CAACf,gBAAgBY,SAASL,KAAK,KAAKM,SAASN,KAAK;gBAEpD,OAAOO,kBAAkBC,gBAAgBF,WAAWD;YACtD;QACF,GAAG;YAACX;YAAeD;SAAa;IAClC;IAEA,OAAOG;AACT"}
+{"version":3,"sources":["../src/useWindowSize.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport { useSsr } from \"./SsrProvider.js\";\nimport { type ElementSize } from \"./types.js\";\nimport {\n  type ResizeListenerOptions,\n  useResizeListener,\n} from \"./useResizeListener.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSizeOptions\n  extends Omit<ResizeListenerOptions, \"disabled\" | \"onUpdate\"> {\n  /**\n   * The default value to use in SSR environments for the window's height.\n   *\n   * @defaultValue `0`\n   */\n  ssrHeight?: number;\n\n  /**\n   * The default value to use in SSR environments for the window's width.\n   *\n   * @defaultValue `0`\n   */\n  ssrWidth?: number;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the height.\n   * The hook can be disabled by setting this and {@link disableWidth} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the width.\n   * The hook can be disabled by setting this and {@link disableHeight} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * This is just a convenience wrapper around the {@link useResizeListener}.\n *\n * @example Simple Example\n * ```tsx\n * import { useWindowSize } from \"@react-md/core/useWindowSize\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width } = useWindowSize();\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useWindowSize(options: WindowSizeOptions = {}): ElementSize {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    ssrHeight = 0,\n    ssrWidth = 0,\n    disableWidth,\n    disableHeight,\n  } = options;\n\n  const ssr = useSsr();\n  const [size, setSize] = useState(() => {\n    if (typeof window === \"undefined\" || ssr) {\n      return {\n        height: ssrHeight,\n        width: ssrWidth,\n      };\n    }\n\n    return {\n      height: window.innerHeight,\n      width: window.innerWidth,\n    };\n  });\n\n  useResizeListener({\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    disabled: disableHeight && disableWidth,\n    onUpdate: useCallback(() => {\n      setSize((prevSize) => {\n        const nextSize: ElementSize = {\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const isHeightChange =\n          !disableHeight && prevSize.height !== nextSize.height;\n        const isWidthChange =\n          !disableWidth && prevSize.width !== nextSize.width;\n\n        return isHeightChange || isWidthChange ? nextSize : prevSize;\n      });\n    }, [disableHeight, disableWidth]),\n  });\n\n  return size;\n}\n"],"names":["useCallback","useState","useSsr","useResizeListener","useWindowSize","options","once","signal","capture","passive","throttle","ssrHeight","ssrWidth","disableWidth","disableHeight","ssr","size","setSize","window","height","width","innerHeight","innerWidth","disabled","onUpdate","prevSize","nextSize","isHeightChange","isWidthChange"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SAEEC,iBAAiB,QACZ,yBAAyB;AAwChC;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,cAAcC,UAA6B,CAAC,CAAC;IAC3D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,YAAY,CAAC,EACbC,WAAW,CAAC,EACZC,YAAY,EACZC,aAAa,EACd,GAAGT;IAEJ,MAAMU,MAAMb;IACZ,MAAM,CAACc,MAAMC,QAAQ,GAAGhB,SAAS;QAC/B,IAAI,OAAOiB,WAAW,eAAeH,KAAK;YACxC,OAAO;gBACLI,QAAQR;gBACRS,OAAOR;YACT;QACF;QAEA,OAAO;YACLO,QAAQD,OAAOG,WAAW;YAC1BD,OAAOF,OAAOI,UAAU;QAC1B;IACF;IAEAnB,kBAAkB;QAChBG;QACAC;QACAC;QACAC;QACAC;QACAa,UAAUT,iBAAiBD;QAC3BW,UAAUxB,YAAY;YACpBiB,QAAQ,CAACQ;gBACP,MAAMC,WAAwB;oBAC5BP,QAAQD,OAAOG,WAAW;oBAC1BD,OAAOF,OAAOI,UAAU;gBAC1B;gBAEA,MAAMK,iBACJ,CAACb,iBAAiBW,SAASN,MAAM,KAAKO,SAASP,MAAM;gBACvD,MAAMS,gBACJ,CAACf,gBAAgBY,SAASL,KAAK,KAAKM,SAASN,KAAK;gBAEpD,OAAOO,kBAAkBC,gBAAgBF,WAAWD;YACtD;QACF,GAAG;YAACX;YAAeD;SAAa;IAClC;IAEA,OAAOG;AACT"}

package/dist/utils/RenderRecursively.d.ts

@@ -1,12 +1,30 @@
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type RecursiveItem<T = Record<string, unknown>> = T & {
     items?: readonly RecursiveItem<T>[];
 };
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
+ */
+export interface RecursiveItemKeyOptions<Item = Record<string, unknown>> {
+    item: RecursiveItem<Item>;
+    depth: number;
+    index: number;
+}
+/**
+ * This is the default implementation for {@link RenderRecursivelyProps.getItemKey}.
+ *
+ * ```ts
+ * return `${options.depth}-${options.index}`
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function getRecursiveItemKey<Item = Record<string, unknown>>(options: RecursiveItemKeyOptions<Item>): string;
+/**
+ * @since 6.0.0
  */
 export interface RenderRecursiveItemsProps<Item = Record<string, unknown>, Data = unknown> {
     data?: Data;
@@ -26,7 +44,7 @@ export interface RenderRecursiveItemsProps<Item = Record<string, unknown>, Data
     children?: ReactNode;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface RenderRecursivelyProps<Item = Record<string, unknown>, Data = unknown> {
     data?: Data;
@@ -49,12 +67,13 @@ export interface RenderRecursivelyProps<Item = Record<string, unknown>, Data = u
      *
      * @example
      * ```ts
-     * getItemKey={(item) => item.id}
+     * getItemKey={({ item }) => item.id}
      * ```
      *
-     * @defaultValue `() => ${parents.length}-${index}`.
+     * @see {@link getRecursiveItemKey}
+     * @defaultValue `` ({ index, depth }) => `${depth}-${index}` ``
      */
-    getItemKey?(item: RecursiveItem<Item>): string;
+    getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;
 }
 /**
  * Helper component for recursively rendering specific data structures (mostly
@@ -63,17 +82,46 @@ export interface RenderRecursivelyProps<Item = Record<string, unknown>, Data = u
  *
  * @example
  * ```tsx
+ * "use client";
+ *
+ * import { Box } from "@react-md/core/box/Box";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Divider } from "@react-md/core/divider/Divider";
+ * import { List } from "@react-md/core/list/List";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
  * import {
- *   buildTree,
- *   List,
- *   ListItem,
- *   ListItemLink,
- *   RenderRecursively,
- *   TreeData,
  *   type DefaultTreeItemNode,
+ *   type TreeData,
+ * } from "@react-md/core/tree/types";
+ * import { type UseStateSetter } from "@react-md/core/types";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import {
  *   type RenderRecursiveItemsProps,
- * } from "@react-md/core";
- * import { type ReactElement } from "react";
+ *   RenderRecursively,
+ * } from "@react-md/core/utils/RenderRecursively";
+ * import { type ReactElement, useState } from "react";
+ *
+ * interface Data {
+ *   activeId: string;
+ *   setActiveId: UseStateSetter<string>;
+ * }
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   const [activeId, setActiveId] = useState("/");
+ *   return (
+ *     <Box fullWidth disableWrap>
+ *       <Box stacked align="stretch">
+ *         <RenderRecursively
+ *           // this is optional and can be any sort of info
+ *           data={{ activeId, setActiveId }}
+ *           items={Object.values(navItems)}
+ *           render={Render}
+ *         />
+ *       </Box>
+ *       <div>Active route: {activeId}</div>
+ *     </Box>
+ *   );
+ * }
  *
  * const navItems = {
  *   "/": {
@@ -99,51 +147,79 @@ export interface RenderRecursivelyProps<Item = Record<string, unknown>, Data = u
  *   },
  *   "/divider-1": {
  *     itemId: "/divider-1",
- *     parentId: null
+ *     parentId: null,
  *   },
  *   "/route-2": {
- *     itemId: "/route-2"
+ *     itemId: "/route-2",
  *     parentId: null,
  *     children: "Route 2",
  *   },
  * } satisfies TreeData;
  *
- * function NestedNavigation(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents, children } = props;
- *   const { toggle, toggled: collapsed } = useToggle(false);
- *   const { elementProps } = useCollapseTransition({
- *     transitionIn: !collapsed,
- *   });
- *
- *   return (
- *     <li>
- *       <Button onClick={toggle}>{item.children}</Button>
- *       <List {...elementProps}>{children}</List>
- *     </li>
- *   ):
- * }
- *
- *
- * function Render(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents } = props;
+ * function Render(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data,
+ *     // this _might_ be defined based on the implementation. it's set to any
+ *     // renderable element
+ *     children: _children,
+ *   } = props;
  *   if (item.itemId.includes("divider")) {
  *     return <Divider />;
  *   }
  *
  *   if (item.items) {
- *     return <NestedNavigation {...props} />
+ *     return <NestedNavigation {...props} />;
  *   }
  *
  *   const prefix = parents.map((parent) => parent.itemId).join("/");
+ *   const currentId = `${prefix}${item.itemId}`;
+ *   // I haven't figured out how to manage the type safety of this yet
+ *   const active = data?.activeId === currentId;
+ *   // this would normally be a link, but to keep the demo simple, it's a button
  *   return (
- *     <Link href={`${prefix}${item.itemId}`}>
+ *     <Button
+ *       theme={active ? "primary" : "clear"}
+ *       themeType={active ? "contained" : "flat"}
+ *       onClick={() => {
+ *         data?.setActiveId(currentId);
+ *       }}
+ *       style={{ justifyContent: "flex-start" }}
+ *     >
  *       {item.children}
- *     </Link>
+ *     </Button>
  *   );
  * }
- * ```
  *
+ * function NestedNavigation(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents: _parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data: _data,
+ *     children,
+ *   } = props;
+ *   const { toggle, toggled: collapsed } = useToggle(false);
+ *   const { elementProps } = useCollapseTransition({
+ *     transitionIn: !collapsed,
+ *   });
+ *
+ *   return (
+ *     <li>
+ *       <Button onClick={toggle}>{item.children}</Button>
+ *       <List {...elementProps}>{children}</List>
+ *     </li>
+ *   );
+ * }
+ * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/render-recursively | RenderRecursively Demos}
+ * @since 6.0.0
  */
 export declare function RenderRecursively<Item, Data>(props: RenderRecursivelyProps<Item, Data>): ReactElement;

package/dist/utils/RenderRecursively.js

@@ -1,5 +1,17 @@
 // TODO: Figure out how to strictly enforce the data
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * This is the default implementation for {@link RenderRecursivelyProps.getItemKey}.
+ *
+ * ```ts
+ * return `${options.depth}-${options.index}`
+ * ```
+ *
+ * @since 6.0.0
+ */ export function getRecursiveItemKey(options) {
+    const { depth, index } = options;
+    return `${depth}-${index}`;
+}
 /**
  * Helper component for recursively rendering specific data structures (mostly
  * trees). The main use-case is for rendering site navigation and the `Tree`
@@ -7,17 +19,46 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  *
  * @example
  * ```tsx
+ * "use client";
+ *
+ * import { Box } from "@react-md/core/box/Box";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Divider } from "@react-md/core/divider/Divider";
+ * import { List } from "@react-md/core/list/List";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
  * import {
- *   buildTree,
- *   List,
- *   ListItem,
- *   ListItemLink,
- *   RenderRecursively,
- *   TreeData,
  *   type DefaultTreeItemNode,
+ *   type TreeData,
+ * } from "@react-md/core/tree/types";
+ * import { type UseStateSetter } from "@react-md/core/types";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import {
  *   type RenderRecursiveItemsProps,
- * } from "@react-md/core";
- * import { type ReactElement } from "react";
+ *   RenderRecursively,
+ * } from "@react-md/core/utils/RenderRecursively";
+ * import { type ReactElement, useState } from "react";
+ *
+ * interface Data {
+ *   activeId: string;
+ *   setActiveId: UseStateSetter<string>;
+ * }
+ *
+ * export default function SimpleExample(): ReactElement {
+ *   const [activeId, setActiveId] = useState("/");
+ *   return (
+ *     <Box fullWidth disableWrap>
+ *       <Box stacked align="stretch">
+ *         <RenderRecursively
+ *           // this is optional and can be any sort of info
+ *           data={{ activeId, setActiveId }}
+ *           items={Object.values(navItems)}
+ *           render={Render}
+ *         />
+ *       </Box>
+ *       <div>Active route: {activeId}</div>
+ *     </Box>
+ *   );
+ * }
  *
  * const navItems = {
  *   "/": {
@@ -43,54 +84,82 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  *   },
  *   "/divider-1": {
  *     itemId: "/divider-1",
- *     parentId: null
+ *     parentId: null,
  *   },
  *   "/route-2": {
- *     itemId: "/route-2"
+ *     itemId: "/route-2",
  *     parentId: null,
  *     children: "Route 2",
  *   },
  * } satisfies TreeData;
  *
- * function NestedNavigation(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents, children } = props;
- *   const { toggle, toggled: collapsed } = useToggle(false);
- *   const { elementProps } = useCollapseTransition({
- *     transitionIn: !collapsed,
- *   });
- *
- *   return (
- *     <li>
- *       <Button onClick={toggle}>{item.children}</Button>
- *       <List {...elementProps}>{children}</List>
- *     </li>
- *   ):
- * }
- *
- *
- * function Render(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
- *   const { item, parents } = props;
+ * function Render(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data,
+ *     // this _might_ be defined based on the implementation. it's set to any
+ *     // renderable element
+ *     children: _children,
+ *   } = props;
  *   if (item.itemId.includes("divider")) {
  *     return <Divider />;
  *   }
  *
  *   if (item.items) {
- *     return <NestedNavigation {...props} />
+ *     return <NestedNavigation {...props} />;
  *   }
  *
  *   const prefix = parents.map((parent) => parent.itemId).join("/");
+ *   const currentId = `${prefix}${item.itemId}`;
+ *   // I haven't figured out how to manage the type safety of this yet
+ *   const active = data?.activeId === currentId;
+ *   // this would normally be a link, but to keep the demo simple, it's a button
  *   return (
- *     <Link href={`${prefix}${item.itemId}`}>
+ *     <Button
+ *       theme={active ? "primary" : "clear"}
+ *       themeType={active ? "contained" : "flat"}
+ *       onClick={() => {
+ *         data?.setActiveId(currentId);
+ *       }}
+ *       style={{ justifyContent: "flex-start" }}
+ *     >
  *       {item.children}
- *     </Link>
+ *     </Button>
  *   );
  * }
- * ```
  *
+ * function NestedNavigation(
+ *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
+ * ): ReactElement {
+ *   const {
+ *     item,
+ *     parents: _parents,
+ *     // this is passed down from the root `RenderRecursively`
+ *     data: _data,
+ *     children,
+ *   } = props;
+ *   const { toggle, toggled: collapsed } = useToggle(false);
+ *   const { elementProps } = useCollapseTransition({
+ *     transitionIn: !collapsed,
+ *   });
+ *
+ *   return (
+ *     <li>
+ *       <Button onClick={toggle}>{item.children}</Button>
+ *       <List {...elementProps}>{children}</List>
+ *     </li>
+ *   );
+ * }
+ * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/render-recursively | RenderRecursively Demos}
+ * @since 6.0.0
  */ export function RenderRecursively(props) {
-    const { data, items, render: Render, getItemKey, parents = [] } = props;
+    const { data, items, render: Render, getItemKey = getRecursiveItemKey, parents = [] } = props;
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: items.map((item, index)=>{
             let children;
@@ -113,7 +182,11 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
                 item: item,
                 parents: parents,
                 children: children
-            }, getItemKey ? getItemKey(item) : `${depth}-${index}`);
+            }, getItemKey({
+                item,
+                depth,
+                index
+            }));
         })
     });
 }

package/dist/utils/RenderRecursively.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/RenderRecursively.tsx"],"sourcesContent":["// TODO: Figure out how to strictly enforce the data\nimport { type ComponentType, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type RecursiveItem<T = Record<string, unknown>> = T & {\n  items?: readonly RecursiveItem<T>[];\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface RenderRecursiveItemsProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n\n  /**\n   * The current item to render.\n   */\n  item: RecursiveItem<Item>;\n\n  /**\n   * The list of parent items which can be used to determine the depth or \"share\n   * props\" if the items contained props.\n   */\n  parents: readonly RecursiveItem<Item>[];\n\n  /**\n   * This will be provided if the {@link item} had child items and will be the\n   * rendered content.\n   */\n  children?: ReactNode;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface RenderRecursivelyProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /**\n   * The renderer for each item.\n   */\n  render: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /**\n   * This should not be used for external users. This is used to build the\n   * {@link RenderRecursiveItemsProps.parents} list.\n   *\n   * @internal\n   * @defaultValue `[]`\n   */\n  parents?: readonly RecursiveItem<Item>[];\n\n  /**\n   * Gets a React `key` for a specific item. This should be provided if the\n   * items can be moved around to improve performance.\n   *\n   * @example\n   * ```ts\n   * getItemKey={(item) => item.id}\n   * ```\n   *\n   * @defaultValue `() => ${parents.length}-${index}`.\n   */\n  getItemKey?(item: RecursiveItem<Item>): string;\n}\n\n/**\n * Helper component for recursively rendering specific data structures (mostly\n * trees). The main use-case is for rendering site navigation and the `Tree`\n * component.\n *\n * @example\n * ```tsx\n * import {\n *   buildTree,\n *   List,\n *   ListItem,\n *   ListItemLink,\n *   RenderRecursively,\n *   TreeData,\n *   type DefaultTreeItemNode,\n *   type RenderRecursiveItemsProps,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * const navItems = {\n *   \"/\": {\n *     href: \"/\",\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Collapsible\",\n *   },\n *   \"/nested-route-1\": {\n *     itemId: \"/nested-route-1\",\n *     parentId: \"/route-1\",\n *     children: \"Child 1\",\n *   },\n *   \"/nested-route-2\": {\n *     itemId: \"/nested-route-2\",\n *     parentId: \"/route-2\",\n *     children: \"Child 2\",\n *   },\n *   \"/divider-1\": {\n *     itemId: \"/divider-1\",\n *     parentId: null\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\"\n *     parentId: null,\n *     children: \"Route 2\",\n *   },\n * } satisfies TreeData;\n *\n * function NestedNavigation(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {\n *   const { item, parents, children } = props;\n *   const { toggle, toggled: collapsed } = useToggle(false);\n *   const { elementProps } = useCollapseTransition({\n *     transitionIn: !collapsed,\n *   });\n *\n *   return (\n *     <li>\n *       <Button onClick={toggle}>{item.children}</Button>\n *       <List {...elementProps}>{children}</List>\n *     </li>\n *   ):\n * }\n *\n *\n * function Render(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {\n *   const { item, parents } = props;\n *   if (item.itemId.includes(\"divider\")) {\n *     return <Divider />;\n *   }\n *\n *   if (item.items) {\n *     return <NestedNavigation {...props} />\n *   }\n *\n *   const prefix = parents.map((parent) => parent.itemId).join(\"/\");\n *   return (\n *     <Link href={`${prefix}${item.itemId}`}>\n *       {item.children}\n *     </Link>\n *   );\n * }\n * ```\n *\n *\n * @remarks \\@since 6.0.0\n */\nexport function RenderRecursively<Item, Data>(\n  props: RenderRecursivelyProps<Item, Data>\n): ReactElement {\n  const { data, items, render: Render, getItemKey, parents = [] } = props;\n\n  return (\n    <>\n      {items.map((item, index) => {\n        let children: ReactNode;\n        const depth = parents.length;\n        if (item.items?.length) {\n          children = (\n            <RenderRecursively\n              data={data}\n              items={item.items}\n              render={Render}\n              getItemKey={getItemKey}\n              parents={[...parents, item]}\n            />\n          );\n        }\n\n        return (\n          <Render\n            key={getItemKey ? getItemKey(item) : `${depth}-${index}`}\n            // typecast since it should be undefined in renderer as well?\n            data={data}\n            item={item}\n            parents={parents}\n          >\n            {children}\n          </Render>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["RenderRecursively","props","data","items","render","Render","getItemKey","parents","map","item","index","children","depth","length"],"mappings":"AAAA,oDAAoD;;AA2EpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFC,GACD,OAAO,SAASA,kBACdC,KAAyC;IAEzC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQC,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAE,EAAE,GAAGN;IAElE,qBACE;kBACGE,MAAMK,GAAG,CAAC,CAACC,MAAMC;YAChB,IAAIC;YACJ,MAAMC,QAAQL,QAAQM,MAAM;YAC5B,IAAIJ,KAAKN,KAAK,EAAEU,QAAQ;gBACtBF,yBACE,KAACX;oBACCE,MAAMA;oBACNC,OAAOM,KAAKN,KAAK;oBACjBC,QAAQC;oBACRC,YAAYA;oBACZC,SAAS;2BAAIA;wBAASE;qBAAK;;YAGjC;YAEA,qBACE,KAACJ;gBAEC,6DAA6D;gBAC7DH,MAAMA;gBACNO,MAAMA;gBACNF,SAASA;0BAERI;eANIL,aAAaA,WAAWG,QAAQ,CAAC,EAAEG,MAAM,CAAC,EAAEF,MAAM,CAAC;QAS9D;;AAGN"}
+{"version":3,"sources":["../../src/utils/RenderRecursively.tsx"],"sourcesContent":["// TODO: Figure out how to strictly enforce the data\nimport { type ComponentType, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport type RecursiveItem<T = Record<string, unknown>> = T & {\n  items?: readonly RecursiveItem<T>[];\n};\n\n/**\n * @since 6.0.0\n */\nexport interface RecursiveItemKeyOptions<Item = Record<string, unknown>> {\n  item: RecursiveItem<Item>;\n  depth: number;\n  index: number;\n}\n\n/**\n * This is the default implementation for {@link RenderRecursivelyProps.getItemKey}.\n *\n * ```ts\n * return `${options.depth}-${options.index}`\n * ```\n *\n * @since 6.0.0\n */\nexport function getRecursiveItemKey<Item = Record<string, unknown>>(\n  options: RecursiveItemKeyOptions<Item>\n): string {\n  const { depth, index } = options;\n\n  return `${depth}-${index}`;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RenderRecursiveItemsProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n\n  /**\n   * The current item to render.\n   */\n  item: RecursiveItem<Item>;\n\n  /**\n   * The list of parent items which can be used to determine the depth or \"share\n   * props\" if the items contained props.\n   */\n  parents: readonly RecursiveItem<Item>[];\n\n  /**\n   * This will be provided if the {@link item} had child items and will be the\n   * rendered content.\n   */\n  children?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RenderRecursivelyProps<\n  Item = Record<string, unknown>,\n  Data = unknown,\n> {\n  data?: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /**\n   * The renderer for each item.\n   */\n  render: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /**\n   * This should not be used for external users. This is used to build the\n   * {@link RenderRecursiveItemsProps.parents} list.\n   *\n   * @internal\n   * @defaultValue `[]`\n   */\n  parents?: readonly RecursiveItem<Item>[];\n\n  /**\n   * Gets a React `key` for a specific item. This should be provided if the\n   * items can be moved around to improve performance.\n   *\n   * @example\n   * ```ts\n   * getItemKey={({ item }) => item.id}\n   * ```\n   *\n   * @see {@link getRecursiveItemKey}\n   * @defaultValue `` ({ index, depth }) => `${depth}-${index}` ``\n   */\n  getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;\n}\n\n/**\n * Helper component for recursively rendering specific data structures (mostly\n * trees). The main use-case is for rendering site navigation and the `Tree`\n * component.\n *\n * @example\n * ```tsx\n * \"use client\";\n *\n * import { Box } from \"@react-md/core/box/Box\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Divider } from \"@react-md/core/divider/Divider\";\n * import { List } from \"@react-md/core/list/List\";\n * import { useCollapseTransition } from \"@react-md/core/transition/useCollapseTransition\";\n * import {\n *   type DefaultTreeItemNode,\n *   type TreeData,\n * } from \"@react-md/core/tree/types\";\n * import { type UseStateSetter } from \"@react-md/core/types\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import {\n *   type RenderRecursiveItemsProps,\n *   RenderRecursively,\n * } from \"@react-md/core/utils/RenderRecursively\";\n * import { type ReactElement, useState } from \"react\";\n *\n * interface Data {\n *   activeId: string;\n *   setActiveId: UseStateSetter<string>;\n * }\n *\n * export default function SimpleExample(): ReactElement {\n *   const [activeId, setActiveId] = useState(\"/\");\n *   return (\n *     <Box fullWidth disableWrap>\n *       <Box stacked align=\"stretch\">\n *         <RenderRecursively\n *           // this is optional and can be any sort of info\n *           data={{ activeId, setActiveId }}\n *           items={Object.values(navItems)}\n *           render={Render}\n *         />\n *       </Box>\n *       <div>Active route: {activeId}</div>\n *     </Box>\n *   );\n * }\n *\n * const navItems = {\n *   \"/\": {\n *     href: \"/\",\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Collapsible\",\n *   },\n *   \"/nested-route-1\": {\n *     itemId: \"/nested-route-1\",\n *     parentId: \"/route-1\",\n *     children: \"Child 1\",\n *   },\n *   \"/nested-route-2\": {\n *     itemId: \"/nested-route-2\",\n *     parentId: \"/route-2\",\n *     children: \"Child 2\",\n *   },\n *   \"/divider-1\": {\n *     itemId: \"/divider-1\",\n *     parentId: null,\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *   },\n * } satisfies TreeData;\n *\n * function Render(\n *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>\n * ): ReactElement {\n *   const {\n *     item,\n *     parents,\n *     // this is passed down from the root `RenderRecursively`\n *     data,\n *     // this _might_ be defined based on the implementation. it's set to any\n *     // renderable element\n *     children: _children,\n *   } = props;\n *   if (item.itemId.includes(\"divider\")) {\n *     return <Divider />;\n *   }\n *\n *   if (item.items) {\n *     return <NestedNavigation {...props} />;\n *   }\n *\n *   const prefix = parents.map((parent) => parent.itemId).join(\"/\");\n *   const currentId = `${prefix}${item.itemId}`;\n *   // I haven't figured out how to manage the type safety of this yet\n *   const active = data?.activeId === currentId;\n *   // this would normally be a link, but to keep the demo simple, it's a button\n *   return (\n *     <Button\n *       theme={active ? \"primary\" : \"clear\"}\n *       themeType={active ? \"contained\" : \"flat\"}\n *       onClick={() => {\n *         data?.setActiveId(currentId);\n *       }}\n *       style={{ justifyContent: \"flex-start\" }}\n *     >\n *       {item.children}\n *     </Button>\n *   );\n * }\n *\n * function NestedNavigation(\n *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>\n * ): ReactElement {\n *   const {\n *     item,\n *     parents: _parents,\n *     // this is passed down from the root `RenderRecursively`\n *     data: _data,\n *     children,\n *   } = props;\n *   const { toggle, toggled: collapsed } = useToggle(false);\n *   const { elementProps } = useCollapseTransition({\n *     transitionIn: !collapsed,\n *   });\n *\n *   return (\n *     <li>\n *       <Button onClick={toggle}>{item.children}</Button>\n *       <List {...elementProps}>{children}</List>\n *     </li>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/render-recursively | RenderRecursively Demos}\n * @since 6.0.0\n */\nexport function RenderRecursively<Item, Data>(\n  props: RenderRecursivelyProps<Item, Data>\n): ReactElement {\n  const {\n    data,\n    items,\n    render: Render,\n    getItemKey = getRecursiveItemKey,\n    parents = [],\n  } = props;\n\n  return (\n    <>\n      {items.map((item, index) => {\n        let children: ReactNode;\n        const depth = parents.length;\n        if (item.items?.length) {\n          children = (\n            <RenderRecursively\n              data={data}\n              items={item.items}\n              render={Render}\n              getItemKey={getItemKey}\n              parents={[...parents, item]}\n            />\n          );\n        }\n\n        return (\n          <Render\n            key={getItemKey({ item, depth, index })}\n            // typecast since it should be undefined in renderer as well?\n            data={data}\n            item={item}\n            parents={parents}\n          >\n            {children}\n          </Render>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["getRecursiveItemKey","options","depth","index","RenderRecursively","props","data","items","render","Render","getItemKey","parents","map","item","children","length"],"mappings":"AAAA,oDAAoD;;AAmBpD;;;;;;;;CAQC,GACD,OAAO,SAASA,oBACdC,OAAsC;IAEtC,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGF;IAEzB,OAAO,GAAGC,MAAM,CAAC,EAAEC,OAAO;AAC5B;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJC,GACD,OAAO,SAASC,kBACdC,KAAyC;IAEzC,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,QAAQC,MAAM,EACdC,aAAaV,mBAAmB,EAChCW,UAAU,EAAE,EACb,GAAGN;IAEJ,qBACE;kBACGE,MAAMK,GAAG,CAAC,CAACC,MAAMV;YAChB,IAAIW;YACJ,MAAMZ,QAAQS,QAAQI,MAAM;YAC5B,IAAIF,KAAKN,KAAK,EAAEQ,QAAQ;gBACtBD,yBACE,KAACV;oBACCE,MAAMA;oBACNC,OAAOM,KAAKN,KAAK;oBACjBC,QAAQC;oBACRC,YAAYA;oBACZC,SAAS;2BAAIA;wBAASE;qBAAK;;YAGjC;YAEA,qBACE,KAACJ;gBAEC,6DAA6D;gBAC7DH,MAAMA;gBACNO,MAAMA;gBACNF,SAASA;0BAERG;eANIJ,WAAW;gBAAEG;gBAAMX;gBAAOC;YAAM;QAS3C;;AAGN"}