@react-md/core 1.0.0-next.0 → 1.0.0-next.1

package/dist/transition/useTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useTransition.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useReducer, useRef, useState } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport type {\n  TransitionHookOptions,\n  TransitionHookReturnValue,\n  TransitionStage,\n  TransitionState,\n} from \"./types.js\";\nimport { getTransitionTimeout } from \"./utils.js\";\n\nconst INITIAL_STATE: TransitionState = {\n  appearing: false,\n  rendered: true,\n  stage: \"exited\",\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * You'll most likely want to use the {@link useCSSTransition} hook instead\n * since this is just a low-level hook that can be used to transition using\n * timeouts.\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function useTransition<E extends HTMLElement>(\n  options: TransitionHookOptions<E>\n): TransitionHookReturnValue<E> {\n  const {\n    nodeRef,\n    timeout,\n    transitionIn,\n    reflow = false,\n    temporary = false,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n    disablePortal: propDisablePortal,\n  } = options;\n\n  const configurationRef = useRef({\n    timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n    reflow,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    configurationRef.current = {\n      timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n    };\n  }, [\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntered,\n    onEntering,\n    onExit,\n    onExited,\n    onExiting,\n    reflow,\n    timeout,\n  ]);\n\n  const ssr = useSsr();\n  const [ref, refCallback] = useEnsuredRef<E>(nodeRef);\n  const [disablePortal, setDisablePortal] = useState(ssr);\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: TransitionState,\n      action: TransitionStage | \"unmount\"\n    ): TransitionState {\n      const { appear, enter, exit } = configurationRef.current.timeout;\n      const { appearing } = state;\n      switch (action) {\n        case \"enter\": {\n          const duration = appearing ? appear : enter;\n          return {\n            stage: duration > 0 ? \"enter\" : \"entered\",\n            rendered: true,\n            appearing,\n          };\n        }\n        case \"entering\":\n        case \"entered\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing,\n          };\n        case \"exit\": {\n          const stage = exit > 0 ? \"exit\" : \"exited\";\n          return {\n            stage,\n            rendered: !temporary || stage !== \"exited\",\n            appearing: false,\n          };\n        }\n        case \"exiting\":\n        case \"exited\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing: false,\n          };\n        case \"unmount\":\n          if (state.stage === \"exited\" && !state.appearing && !state.rendered) {\n            return state;\n          }\n\n          return {\n            stage: \"exited\",\n            rendered: false,\n            appearing: false,\n          };\n      }\n    },\n    INITIAL_STATE,\n    () => {\n      let stage: TransitionStage = \"exited\";\n      if (transitionIn) {\n        stage = appear ? \"enter\" : \"entered\";\n      }\n\n      return {\n        appearing: appear && transitionIn,\n        rendered: !temporary || transitionIn,\n        stage,\n      };\n    }\n  );\n  const { appearing, rendered, stage } = state;\n\n  const isFirstRender = useRef(true);\n  const isRehydrateAppear = useRef(ssr && !transitionIn);\n  const defaultTransitionIn = useRef(transitionIn);\n  useEffect(() => {\n    const {\n      timeout,\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n    } = configurationRef.current;\n    let { onExited } = configurationRef.current;\n    if (isFirstRender.current) {\n      // The exited hook should **not** fire on first render since the element\n      // was never in the DOM.\n      isFirstRender.current = false;\n      onExited = noop;\n    }\n\n    // if the transitionIn did not change between initial render and rehydration,\n    // allow the enter transition to behave like normal.\n    if (\n      isRehydrateAppear.current &&\n      !ssr &&\n      !transitionIn &&\n      !defaultTransitionIn.current\n    ) {\n      isRehydrateAppear.current = false;\n    }\n\n    // Cancel any exiting/exited transitions and instead immediately start the\n    // enter transition\n    if (transitionIn && stage.startsWith(\"exit\")) {\n      const nextStage = isRehydrateAppear.current ? \"entered\" : \"enter\";\n      dispatch(nextStage);\n      return;\n    }\n\n    // Cancel any entering/entered transitions and instead immediately start the\n    // exit transition\n    if (!transitionIn && stage.startsWith(\"enter\")) {\n      dispatch(\"exit\");\n      return;\n    }\n\n    if (reflow && ref.current && stage !== \"exited\" && stage !== \"entered\") {\n      // force reflow by accessing scrollTop\n      ref.current.scrollTop;\n    }\n\n    let duration = 0;\n    let nextStage: TransitionStage = stage;\n    switch (stage) {\n      case \"enter\":\n        onEnter(appearing);\n        nextStage = \"entering\";\n        break;\n      case \"entering\":\n        onEntering(appearing);\n        duration = timeout.enter;\n        nextStage = \"entered\";\n        break;\n      case \"entered\":\n        onEntered(appearing);\n        break;\n      case \"exit\":\n        onExit();\n        nextStage = \"exiting\";\n        break;\n      case \"exiting\":\n        onExiting();\n        duration = timeout.exit;\n        nextStage = \"exited\";\n        break;\n      case \"exited\":\n        onExited();\n        setDisablePortal(false);\n        break;\n    }\n\n    if (stage === nextStage) {\n      // this is used to help catch changing the temporary prop.\n      // not sure if I should really support that though...\n      if (stage === \"exited\" && temporary) {\n        dispatch(\"unmount\");\n      }\n\n      return;\n    }\n\n    // I used to rely on the `dispatch(\"unmount\")` above, but it seems like\n    // there are some cases where re-rendering takes too long so the temporary\n    // element flashes\n    const dispatchStage =\n      temporary && nextStage === \"exited\" ? \"unmount\" : nextStage;\n    if (duration <= 0) {\n      dispatch(dispatchStage);\n      return;\n    }\n\n    const timer = window.setTimeout(() => {\n      dispatch(dispatchStage);\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [appearing, ref, ssr, stage, temporary, transitionIn]);\n\n  return {\n    ref: refCallback,\n    stage,\n    rendered,\n    appearing,\n    transitionTo: dispatch,\n    disablePortal: propDisablePortal || disablePortal,\n  };\n}\n"],"names":["useEffect","useReducer","useRef","useState","useSsr","useEnsuredRef","useIsomorphicLayoutEffect","getTransitionTimeout","INITIAL_STATE","appearing","rendered","stage","noop","useTransition","options","nodeRef","timeout","transitionIn","reflow","temporary","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","disablePortal","propDisablePortal","configurationRef","current","ssr","ref","refCallback","setDisablePortal","state","dispatch","reducer","action","duration","isFirstRender","isRehydrateAppear","defaultTransitionIn","startsWith","nextStage","scrollTop","dispatchStage","timer","window","setTimeout","clearTimeout","transitionTo"],"mappings":"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"}
+{"version":3,"sources":["../../src/transition/useTransition.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useReducer, useRef, useState } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport type {\n  TransitionHookOptions,\n  TransitionHookReturnValue,\n  TransitionStage,\n  TransitionState,\n} from \"./types.js\";\nimport { getTransitionTimeout } from \"./utils.js\";\nimport { TRANSITION_CONFIG } from \"./config.js\";\n\nconst INITIAL_STATE: TransitionState = {\n  appearing: false,\n  rendered: true,\n  stage: \"exited\",\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * You'll most likely want to use the {@link useCSSTransition} hook instead\n * since this is just a low-level hook that can be used to transition using\n * timeouts.\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function useTransition<E extends HTMLElement>(\n  options: TransitionHookOptions<E>\n): TransitionHookReturnValue<E> {\n  const {\n    nodeRef,\n    timeout,\n    transitionIn,\n    reflow = false,\n    temporary = false,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n    disablePortal: propDisablePortal,\n  } = options;\n\n  const configurationRef = useRef({\n    timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n    reflow,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    configurationRef.current = {\n      timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n    };\n  }, [\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntered,\n    onEntering,\n    onExit,\n    onExited,\n    onExiting,\n    reflow,\n    timeout,\n  ]);\n\n  const ssr = useSsr();\n  const [ref, refCallback] = useEnsuredRef<E>(nodeRef);\n  const [disablePortal, setDisablePortal] = useState(ssr);\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: TransitionState,\n      action: TransitionStage | \"unmount\"\n    ): TransitionState {\n      const { appear, enter, exit } = configurationRef.current.timeout;\n      const { appearing } = state;\n      switch (action) {\n        case \"enter\": {\n          const duration = appearing ? appear : enter;\n          return {\n            stage: duration > 0 ? \"enter\" : \"entered\",\n            rendered: true,\n            appearing,\n          };\n        }\n        case \"entering\":\n        case \"entered\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing,\n          };\n        case \"exit\": {\n          const stage = exit > 0 ? \"exit\" : \"exited\";\n          return {\n            stage,\n            rendered: !temporary || stage !== \"exited\",\n            appearing: false,\n          };\n        }\n        case \"exiting\":\n        case \"exited\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing: false,\n          };\n        case \"unmount\":\n          if (state.stage === \"exited\" && !state.appearing && !state.rendered) {\n            return state;\n          }\n\n          return {\n            stage: \"exited\",\n            rendered: false,\n            appearing: false,\n          };\n      }\n    },\n    INITIAL_STATE,\n    () => {\n      let stage: TransitionStage = \"exited\";\n      if (transitionIn) {\n        stage = appear && !TRANSITION_CONFIG.disabled ? \"enter\" : \"entered\";\n      }\n\n      return {\n        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,\n        rendered: !temporary || transitionIn,\n        stage,\n      };\n    }\n  );\n  const { appearing, rendered, stage } = state;\n\n  const isFirstRender = useRef(true);\n  const isRehydrateAppear = useRef(ssr && !transitionIn);\n  const defaultTransitionIn = useRef(transitionIn);\n  useEffect(() => {\n    const {\n      timeout,\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n    } = configurationRef.current;\n    let { onExited } = configurationRef.current;\n    if (isFirstRender.current) {\n      // The exited hook should **not** fire on first render since the element\n      // was never in the DOM.\n      isFirstRender.current = false;\n      onExited = noop;\n    }\n\n    // if the transitionIn did not change between initial render and rehydration,\n    // allow the enter transition to behave like normal.\n    if (\n      isRehydrateAppear.current &&\n      !ssr &&\n      !transitionIn &&\n      !defaultTransitionIn.current\n    ) {\n      isRehydrateAppear.current = false;\n    }\n\n    // Cancel any exiting/exited transitions and instead immediately start the\n    // enter transition\n    if (transitionIn && stage.startsWith(\"exit\")) {\n      const nextStage = isRehydrateAppear.current ? \"entered\" : \"enter\";\n      dispatch(nextStage);\n      return;\n    }\n\n    // Cancel any entering/entered transitions and instead immediately start the\n    // exit transition\n    if (!transitionIn && stage.startsWith(\"enter\")) {\n      dispatch(\"exit\");\n      return;\n    }\n\n    if (reflow && ref.current && stage !== \"exited\" && stage !== \"entered\") {\n      // force reflow by accessing scrollTop\n      ref.current.scrollTop;\n    }\n\n    let duration = 0;\n    let nextStage: TransitionStage = stage;\n    switch (stage) {\n      case \"enter\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"entered\";\n        } else {\n          onEnter(appearing);\n          nextStage = \"entering\";\n        }\n        break;\n      case \"entering\":\n        onEntering(appearing);\n        duration = timeout.enter;\n        nextStage = \"entered\";\n        break;\n      case \"entered\":\n        onEntered(appearing);\n        break;\n      case \"exit\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"exited\";\n        } else {\n          onExit();\n          nextStage = \"exiting\";\n        }\n        break;\n      case \"exiting\":\n        onExiting();\n        duration = timeout.exit;\n        nextStage = \"exited\";\n        break;\n      case \"exited\":\n        onExited();\n        setDisablePortal(false);\n        break;\n    }\n\n    if (stage === nextStage) {\n      // this is used to help catch changing the temporary prop.\n      // not sure if I should really support that though...\n      if (stage === \"exited\" && temporary) {\n        dispatch(\"unmount\");\n      }\n\n      return;\n    }\n\n    // I used to rely on the `dispatch(\"unmount\")` above, but it seems like\n    // there are some cases where re-rendering takes too long so the temporary\n    // element flashes\n    const dispatchStage =\n      temporary && nextStage === \"exited\" ? \"unmount\" : nextStage;\n    if (duration <= 0) {\n      dispatch(dispatchStage);\n      return;\n    }\n\n    const timer = window.setTimeout(() => {\n      dispatch(dispatchStage);\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [appearing, ref, ssr, stage, temporary, transitionIn]);\n\n  return {\n    ref: refCallback,\n    stage,\n    rendered,\n    appearing,\n    transitionTo: dispatch,\n    disablePortal: propDisablePortal || disablePortal,\n  };\n}\n"],"names":["useEffect","useReducer","useRef","useState","useSsr","useEnsuredRef","useIsomorphicLayoutEffect","getTransitionTimeout","TRANSITION_CONFIG","INITIAL_STATE","appearing","rendered","stage","noop","useTransition","options","nodeRef","timeout","transitionIn","reflow","temporary","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","disablePortal","propDisablePortal","configurationRef","current","ssr","ref","refCallback","setDisablePortal","state","dispatch","reducer","action","duration","disabled","isFirstRender","isRehydrateAppear","defaultTransitionIn","startsWith","nextStage","scrollTop","dispatchStage","timer","window","setTimeout","clearTimeout","transitionTo"],"mappings":"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"}

package/dist/tree/DefaultTreeItemRenderer.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from "react";
-import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.jsx";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { type DefaultTreeItemNode, type TreeItemNode } from "./types.js";
 /**
  * **Client Component**

package/dist/tree/DefaultTreeItemRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/DefaultTreeItemRenderer.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.jsx\";\nimport { TreeItem } from \"./TreeItem.js\";\nimport { type DefaultTreeItemNode, type TreeItemNode } from \"./types.js\";\n\n/**\n * **Client Component**\n *\n * A reasonable default for rendering tree items that will extract all the\n * `ListItemChildrenProps` from the item and attempt to pass them into the\n * `TreeItem`.\n *\n * Look at the `Tree` component for an example of creating a custom\n * implementation.\n *\n * @remarks \\@since 6.0.0\n */\nexport function DefaultTreeItemRenderer<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(props: RenderRecursiveItemsProps<T>): ReactElement {\n  const { item: _item, parents, children: childItems } = props;\n  const item = props.item as DefaultTreeItemNode;\n\n  const {\n    itemId,\n    to,\n    href,\n    disabled,\n    className,\n    contentClassName,\n    leftAddon,\n    leftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n  } = item;\n  const children = item.name ?? item.children;\n\n  return (\n    <TreeItem\n      to={to}\n      href={href}\n      depth={parents.length}\n      childItems={childItems}\n      className={className}\n      contentClassName={contentClassName}\n      itemId={itemId}\n      disabled={disabled}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonClassName={leftAddonClassName}\n      leftAddonForceWrap={leftAddonForceWrap}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonClassName={rightAddonClassName}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </TreeItem>\n  );\n}\n"],"names":["TreeItem","DefaultTreeItemRenderer","props","item","_item","parents","children","childItems","itemId","to","href","disabled","className","contentClassName","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","name","depth","length"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAGzC;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,wBAEdC,KAAmC;IACnC,MAAM,EAAEC,MAAMC,KAAK,EAAEC,OAAO,EAAEC,UAAUC,UAAU,EAAE,GAAGL;IACvD,MAAMC,OAAOD,MAAMC,IAAI;IAEvB,MAAM,EACJK,MAAM,EACNC,EAAE,EACFC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,6BAA6B,EAC7BC,8BAA8B,EAC/B,GAAGtB;IACJ,MAAMG,WAAWH,KAAKuB,IAAI,IAAIvB,KAAKG,QAAQ;IAE3C,qBACE,KAACN;QACCS,IAAIA;QACJC,MAAMA;QACNiB,OAAOtB,QAAQuB,MAAM;QACrBrB,YAAYA;QACZK,WAAWA;QACXC,kBAAkBA;QAClBL,QAAQA;QACRG,UAAUA;QACVG,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,oBAAoBA;QACpBC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,qBAAqBA;QACrBC,+BAA+BA;QAC/BC,gCAAgCA;kBAE/BnB;;AAGP"}
+{"version":3,"sources":["../../src/tree/DefaultTreeItemRenderer.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { type RenderRecursiveItemsProps } from \"../utils/RenderRecursively.js\";\nimport { TreeItem } from \"./TreeItem.js\";\nimport { type DefaultTreeItemNode, type TreeItemNode } from \"./types.js\";\n\n/**\n * **Client Component**\n *\n * A reasonable default for rendering tree items that will extract all the\n * `ListItemChildrenProps` from the item and attempt to pass them into the\n * `TreeItem`.\n *\n * Look at the `Tree` component for an example of creating a custom\n * implementation.\n *\n * @remarks \\@since 6.0.0\n */\nexport function DefaultTreeItemRenderer<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(props: RenderRecursiveItemsProps<T>): ReactElement {\n  const { item: _item, parents, children: childItems } = props;\n  const item = props.item as DefaultTreeItemNode;\n\n  const {\n    itemId,\n    to,\n    href,\n    disabled,\n    className,\n    contentClassName,\n    leftAddon,\n    leftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n  } = item;\n  const children = item.name ?? item.children;\n\n  return (\n    <TreeItem\n      to={to}\n      href={href}\n      depth={parents.length}\n      childItems={childItems}\n      className={className}\n      contentClassName={contentClassName}\n      itemId={itemId}\n      disabled={disabled}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonClassName={leftAddonClassName}\n      leftAddonForceWrap={leftAddonForceWrap}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonClassName={rightAddonClassName}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </TreeItem>\n  );\n}\n"],"names":["TreeItem","DefaultTreeItemRenderer","props","item","_item","parents","children","childItems","itemId","to","href","disabled","className","contentClassName","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","name","depth","length"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAGzC;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,wBAEdC,KAAmC;IACnC,MAAM,EAAEC,MAAMC,KAAK,EAAEC,OAAO,EAAEC,UAAUC,UAAU,EAAE,GAAGL;IACvD,MAAMC,OAAOD,MAAMC,IAAI;IAEvB,MAAM,EACJK,MAAM,EACNC,EAAE,EACFC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,6BAA6B,EAC7BC,8BAA8B,EAC/B,GAAGtB;IACJ,MAAMG,WAAWH,KAAKuB,IAAI,IAAIvB,KAAKG,QAAQ;IAE3C,qBACE,KAACN;QACCS,IAAIA;QACJC,MAAMA;QACNiB,OAAOtB,QAAQuB,MAAM;QACrBrB,YAAYA;QACZK,WAAWA;QACXC,kBAAkBA;QAClBL,QAAQA;QACRG,UAAUA;QACVG,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,oBAAoBA;QACpBC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,qBAAqBA;QACrBC,+BAA+BA;QAC/BC,gCAAgCA;kBAE/BnB;;AAGP"}

package/dist/tree/Tree.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
-import { type CustomLinkComponent } from "../link/LinkProvider.js";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { type TreeExpansionMode } from "./TreeProvider.js";

package/dist/tree/Tree.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LinkProvider } from "../link/LinkProvider.js";
 import { List } from "../list/List.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -71,7 +70,7 @@ import { useTreeMovement } from "./useTreeMovement.js";
  * - `getItemValue`
  * - `getItemProps`
  */ export function Tree(props) {
-    const { id, data, sort = identity, rootId = null, treeRef, className, expandedIds, selectedIds, toggleTreeItemSelection, selectMultipleTreeItems, toggleTreeItemExpansion, expandMultipleTreeItems, onClick, onFocus, onKeyDown, renderer: TreeItemRenderer = DefaultTreeItemRenderer, multiSelect = false, expansionMode = "auto", expanderIcon, expanderLeft = false, linkComponent, disableTransition = false, temporaryChildItems = false, ...remaining } = props;
+    const { id, data, sort = identity, rootId = null, treeRef, className, expandedIds, selectedIds, toggleTreeItemSelection, selectMultipleTreeItems, toggleTreeItemExpansion, expandMultipleTreeItems, onClick, onFocus, onKeyDown, renderer: TreeItemRenderer = DefaultTreeItemRenderer, multiSelect = false, expansionMode = "auto", expanderIcon, expanderLeft = false, linkComponent = "a", disableTransition = false, temporaryChildItems = false, ...remaining } = props;
     const treeId = useEnsuredId(id, "tree");
     const { items, treeItemChildIds } = useTreeItems({
         data,
@@ -93,6 +92,7 @@ import { useTreeMovement } from "./useTreeMovement.js";
         data: data,
         rootId: rootId,
         multiSelect: multiSelect,
+        linkComponent: linkComponent,
         selectedIds: selectedIds,
         expandedIds: expandedIds,
         expanderIcon: expanderIcon,
@@ -105,25 +105,22 @@ import { useTreeMovement } from "./useTreeMovement.js";
         toggleTreeItemExpansion: toggleTreeItemExpansion,
         selectMultipleTreeItems: selectMultipleTreeItems,
         expandMultipleTreeItems: expandMultipleTreeItems,
-        children: /*#__PURE__*/ _jsx(LinkProvider, {
-            value: linkComponent,
-            children: /*#__PURE__*/ _jsx(KeyboardMovementProvider, {
-                value: movementContext,
-                children: /*#__PURE__*/ _jsx(List, {
-                    ...remaining,
-                    ...movementProps,
-                    id: treeId,
-                    ref: treeRef,
-                    role: "tree",
-                    tabIndex: 0,
-                    className: tree({
-                        className
-                    }),
-                    children: /*#__PURE__*/ _jsx(RenderRecursively, {
-                        items: items,
-                        getItemKey: (item)=>item.itemId,
-                        render: TreeItemRenderer
-                    })
+        children: /*#__PURE__*/ _jsx(KeyboardMovementProvider, {
+            value: movementContext,
+            children: /*#__PURE__*/ _jsx(List, {
+                ...remaining,
+                ...movementProps,
+                id: treeId,
+                ref: treeRef,
+                role: "tree",
+                tabIndex: 0,
+                className: tree({
+                    className
+                }),
+                children: /*#__PURE__*/ _jsx(RenderRecursively, {
+                    items: items,
+                    getItemKey: (item)=>item.itemId,
+                    render: TreeItemRenderer
                 })
             })
         })

package/dist/tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport {\n  LinkProvider,\n  type CustomLinkComponent,\n} from \"../link/LinkProvider.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  RenderRecursively,\n  type RenderRecursiveItemsProps,\n} from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { TreeProvider, type TreeExpansionMode } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n  type TreeData,\n  type TreeItemNode,\n  type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tree-depth\"?: number;\n    \"--rmd-tree-item-padding\"?: string | number;\n    \"--rmd-tree-item-padding-base\"?: string | number;\n    \"--rmd-tree-item-padding-incrementor\"?: string | number;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n  HTMLAttributes<HTMLUListElement>,\n  \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport interface TreeProps<T extends TreeItemNode>\n  extends TreeHTMLAttributes,\n    TreeExpansion,\n    TreeSelection {\n  /** @see {@link TreeData} */\n  data: TreeData<T>;\n\n  /**\n   * An optional ref to pass to the tree element.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  treeRef?: Ref<HTMLUListElement>;\n\n  /** @defaultValue `identity` */\n  sort?: TreeItemSorter<T>;\n\n  /**\n   * Any nodes in the {@Link data} that have a `parentId` set to this value will\n   * appear at the root of the tree.\n   *\n   * @defaultValue `null`\n   */\n  rootId?: string | null;\n\n  /**\n   * @defaultValue `\"auto\"`\n   * @see {@link TreeExpansionMode}\n   */\n  expansionMode?: TreeExpansionMode;\n\n  /**\n   * Set this to `true` to display the expander icon to the left instead of the\n   * right. This will also update the styles slightly so you can still provide a\n   * `leftAddon`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  expanderIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to disable the collapse transition for all tree items.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * Set this to `true` if the collapsed tree items should be removed from the\n   * DOM instead of hidden using `display: none`. This _might_ improve\n   * performance for large trees.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n\n  /**\n   * @example\n   * Custom Tree Item Renderer\n   * ```tsx\n   * import type { TreeItemRendererProps } from \"@react-md/core\";\n   * import { TreeItem, useKeyboardMovementContext, useTreeContext } from \"@react-md/core\";\n   * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n   * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n   * import type { ReactElement } from \"react\";\n   *\n   * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n   *   const { item, ...remaining  } = props;\n   *   const id = useId();\n   *   const { itemId } = item;\n   *   const {\n   *     data,\n   *     expandedIds,\n   *     selectedIds,\n   *     toggleTreeItemExpansion,\n   *     toggleTreeItemSelection,\n   *   } = useTreeContext()\n   *   const { activeDescendantId } = useKeyboardMovementContext();\n   *\n   *   const focused = id === activeDescendantId;\n   *   const expanded = expandedIds.has(itemId);\n   *   const selected = selectedIds.has(itemId);\n   *   const children = ...; // do whatever\n   *\n   *   return (\n   *     <TreeItem\n   *       {...remaining}\n   *       id={id}\n   *       itemId={itemId}\n   *       leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n   *     >\n   *       {children}\n   *     </TreeItem>\n   *   );\n   * }\n   * ```\n   *\n   * @see {@link DefaultTreeItemRenderer}\n   * @defaultValue `DefaultTreeItemRenderer`\n   */\n  renderer?: ComponentType<RenderRecursiveItemsProps<T>>;\n\n  /**\n   * The link component to use for any tree item nodes that have a `to` or\n   * `href`.\n   *\n   * @see {@link CustomLinkComponent}\n   * @defaultValue `Link`\n   */\n  linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Tree\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import { Tree, useTree } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *   },\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree({\n *     // can enable multiple selected items\n *     // multiSelect: true,\n *\n *     // can set default expanded and selected items\n *     // defaultSelectedIds: [\"item-1\"],\n *     // defaultExpandedIds: [\"item-1\"],\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Tree\"\n *       data={data}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link TreeProps.renderer} for a custom tree item example.\n *\n * @remarks\n * \\@since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n  props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n  const {\n    id,\n    data,\n    sort = identity,\n    rootId = null,\n    treeRef,\n    className,\n    expandedIds,\n    selectedIds,\n    toggleTreeItemSelection,\n    selectMultipleTreeItems,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n    onClick,\n    onFocus,\n    onKeyDown,\n    renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n    multiSelect = false,\n    expansionMode = \"auto\",\n    expanderIcon,\n    expanderLeft = false,\n    linkComponent,\n    disableTransition = false,\n    temporaryChildItems = false,\n    ...remaining\n  } = props;\n  const treeId = useEnsuredId(id, \"tree\");\n  const { items, treeItemChildIds } = useTreeItems({\n    data,\n    sort,\n    rootId,\n  });\n\n  const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  });\n\n  return (\n    <TreeProvider\n      data={data}\n      rootId={rootId}\n      multiSelect={multiSelect}\n      selectedIds={selectedIds}\n      expandedIds={expandedIds}\n      expanderIcon={expanderIcon}\n      expanderLeft={expanderLeft}\n      expansionMode={expansionMode}\n      metadataLookup={metadataLookup}\n      disableTransition={disableTransition}\n      temporaryChildItems={temporaryChildItems}\n      toggleTreeItemSelection={toggleTreeItemSelection}\n      toggleTreeItemExpansion={toggleTreeItemExpansion}\n      selectMultipleTreeItems={selectMultipleTreeItems}\n      expandMultipleTreeItems={expandMultipleTreeItems}\n    >\n      <LinkProvider value={linkComponent}>\n        <KeyboardMovementProvider value={movementContext}>\n          <List\n            {...remaining}\n            {...movementProps}\n            id={treeId}\n            ref={treeRef}\n            role=\"tree\"\n            tabIndex={0}\n            className={tree({ className })}\n          >\n            <RenderRecursively\n              items={items}\n              getItemKey={(item) => item.itemId}\n              render={TreeItemRenderer}\n            />\n          </List>\n        </KeyboardMovementProvider>\n      </LinkProvider>\n    </TreeProvider>\n  );\n}\n"],"names":["LinkProvider","List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","value","ref","role","tabIndex","getItemKey","item","itemId","render"],"mappings":"AAAA;;AAQA,SACEA,YAAY,QAEP,0BAA0B;AACjC,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,iBAAiB,QAEZ,gCAAgC;AACvC,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAOnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAoJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,aAAa,EACbC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEe;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbV,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACxB;YAAa4C,OAAOV;sBACnB,cAAA,KAAChC;gBAAyB0C,OAAOF;0BAC/B,cAAA,KAACzC;oBACE,GAAGoC,SAAS;oBACZ,GAAGM,aAAa;oBACjB9B,IAAIyB;oBACJO,KAAK5B;oBACL6B,MAAK;oBACLC,UAAU;oBACV7B,WAAWV,KAAK;wBAAEU;oBAAU;8BAE5B,cAAA,KAACd;wBACCmC,OAAOA;wBACPS,YAAY,CAACC,OAASA,KAAKC,MAAM;wBACjCC,QAAQtB;;;;;;AAOtB"}
+{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  RenderRecursively,\n  type RenderRecursiveItemsProps,\n} from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { TreeProvider, type TreeExpansionMode } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n  type TreeData,\n  type TreeItemNode,\n  type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tree-depth\"?: number;\n    \"--rmd-tree-item-padding\"?: string | number;\n    \"--rmd-tree-item-padding-base\"?: string | number;\n    \"--rmd-tree-item-padding-incrementor\"?: string | number;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n  HTMLAttributes<HTMLUListElement>,\n  \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport interface TreeProps<T extends TreeItemNode>\n  extends TreeHTMLAttributes,\n    TreeExpansion,\n    TreeSelection {\n  /** @see {@link TreeData} */\n  data: TreeData<T>;\n\n  /**\n   * An optional ref to pass to the tree element.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  treeRef?: Ref<HTMLUListElement>;\n\n  /** @defaultValue `identity` */\n  sort?: TreeItemSorter<T>;\n\n  /**\n   * Any nodes in the {@Link data} that have a `parentId` set to this value will\n   * appear at the root of the tree.\n   *\n   * @defaultValue `null`\n   */\n  rootId?: string | null;\n\n  /**\n   * @defaultValue `\"auto\"`\n   * @see {@link TreeExpansionMode}\n   */\n  expansionMode?: TreeExpansionMode;\n\n  /**\n   * Set this to `true` to display the expander icon to the left instead of the\n   * right. This will also update the styles slightly so you can still provide a\n   * `leftAddon`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  expanderIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to disable the collapse transition for all tree items.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * Set this to `true` if the collapsed tree items should be removed from the\n   * DOM instead of hidden using `display: none`. This _might_ improve\n   * performance for large trees.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n\n  /**\n   * @example\n   * Custom Tree Item Renderer\n   * ```tsx\n   * import type { TreeItemRendererProps } from \"@react-md/core\";\n   * import { TreeItem, useKeyboardMovementContext, useTreeContext } from \"@react-md/core\";\n   * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n   * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n   * import type { ReactElement } from \"react\";\n   *\n   * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n   *   const { item, ...remaining  } = props;\n   *   const id = useId();\n   *   const { itemId } = item;\n   *   const {\n   *     data,\n   *     expandedIds,\n   *     selectedIds,\n   *     toggleTreeItemExpansion,\n   *     toggleTreeItemSelection,\n   *   } = useTreeContext()\n   *   const { activeDescendantId } = useKeyboardMovementContext();\n   *\n   *   const focused = id === activeDescendantId;\n   *   const expanded = expandedIds.has(itemId);\n   *   const selected = selectedIds.has(itemId);\n   *   const children = ...; // do whatever\n   *\n   *   return (\n   *     <TreeItem\n   *       {...remaining}\n   *       id={id}\n   *       itemId={itemId}\n   *       leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n   *     >\n   *       {children}\n   *     </TreeItem>\n   *   );\n   * }\n   * ```\n   *\n   * @see {@link DefaultTreeItemRenderer}\n   * @defaultValue `DefaultTreeItemRenderer`\n   */\n  renderer?: ComponentType<RenderRecursiveItemsProps<T>>;\n\n  /**\n   * The link component to use for any tree item nodes that have a `to` or\n   * `href`.\n   *\n   * @see {@link CustomLinkComponent}\n   * @defaultValue `Link`\n   */\n  linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Tree\n * ```tsx\n * import type { TreeData } from \"@react-md/core\";\n * import { Tree, useTree } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *   },\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree({\n *     // can enable multiple selected items\n *     // multiSelect: true,\n *\n *     // can set default expanded and selected items\n *     // defaultSelectedIds: [\"item-1\"],\n *     // defaultExpandedIds: [\"item-1\"],\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Tree\"\n *       data={data}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link TreeProps.renderer} for a custom tree item example.\n *\n * @remarks\n * \\@since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n  props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n  const {\n    id,\n    data,\n    sort = identity,\n    rootId = null,\n    treeRef,\n    className,\n    expandedIds,\n    selectedIds,\n    toggleTreeItemSelection,\n    selectMultipleTreeItems,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n    onClick,\n    onFocus,\n    onKeyDown,\n    renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n    multiSelect = false,\n    expansionMode = \"auto\",\n    expanderIcon,\n    expanderLeft = false,\n    linkComponent = \"a\",\n    disableTransition = false,\n    temporaryChildItems = false,\n    ...remaining\n  } = props;\n  const treeId = useEnsuredId(id, \"tree\");\n  const { items, treeItemChildIds } = useTreeItems({\n    data,\n    sort,\n    rootId,\n  });\n\n  const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  });\n\n  return (\n    <TreeProvider\n      data={data}\n      rootId={rootId}\n      multiSelect={multiSelect}\n      linkComponent={linkComponent}\n      selectedIds={selectedIds}\n      expandedIds={expandedIds}\n      expanderIcon={expanderIcon}\n      expanderLeft={expanderLeft}\n      expansionMode={expansionMode}\n      metadataLookup={metadataLookup}\n      disableTransition={disableTransition}\n      temporaryChildItems={temporaryChildItems}\n      toggleTreeItemSelection={toggleTreeItemSelection}\n      toggleTreeItemExpansion={toggleTreeItemExpansion}\n      selectMultipleTreeItems={selectMultipleTreeItems}\n      expandMultipleTreeItems={expandMultipleTreeItems}\n    >\n      <KeyboardMovementProvider value={movementContext}>\n        <List\n          {...remaining}\n          {...movementProps}\n          id={treeId}\n          ref={treeRef}\n          role=\"tree\"\n          tabIndex={0}\n          className={tree({ className })}\n        >\n          <RenderRecursively\n            items={items}\n            getItemKey={(item) => item.itemId}\n            render={TreeItemRenderer}\n          />\n        </List>\n      </KeyboardMovementProvider>\n    </TreeProvider>\n  );\n}\n"],"names":["List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","value","ref","role","tabIndex","getItemKey","item","itemId","render"],"mappings":"AAAA;;AASA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,iBAAiB,QAEZ,gCAAgC;AACvC,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAOnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAoJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,gBAAgB,GAAG,EACnBC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEe;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbI,eAAeA;QACfd,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACtB;YAAyB0C,OAAOF;sBAC/B,cAAA,KAACzC;gBACE,GAAGoC,SAAS;gBACZ,GAAGM,aAAa;gBACjB9B,IAAIyB;gBACJO,KAAK5B;gBACL6B,MAAK;gBACLC,UAAU;gBACV7B,WAAWV,KAAK;oBAAEU;gBAAU;0BAE5B,cAAA,KAACd;oBACCmC,OAAOA;oBACPS,YAAY,CAACC,OAASA,KAAKC,MAAM;oBACjCC,QAAQtB;;;;;AAMpB"}

package/dist/tree/TreeItem.js

@@ -3,7 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { useLink } from "../link/LinkProvider.js";
 import { ListItemChildren } from "../list/ListItemChildren.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -31,7 +30,7 @@ import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
         remaining.to = undefined;
         remaining.href = undefined;
     }
-    const { metadataLookup, expandedIds, selectedIds, expanderLeft, expansionMode, toggleTreeItemSelection, toggleTreeItemExpansion, disableTransition: contextDisableTransition } = useTreeContext();
+    const { expandedIds, selectedIds, expanderLeft, expansionMode, metadataLookup, linkComponent: Link, toggleTreeItemSelection, toggleTreeItemExpansion, disableTransition: contextDisableTransition } = useTreeContext();
     const { activeDescendantId } = useKeyboardMovementContext();
     const isLeafNode = !childItems;
     const focused = activeDescendantId === id;
@@ -79,7 +78,6 @@ import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
         disabled
     });
     const isLink = !!(remaining.to || remaining.href);
-    const Link = useLink();
     // cheating a bit so there are type errors around the event handlers
     const ContentComponent = isLink ? Link : "span";
     const leftAddonType = propLeftAddonType ?? (expanderLeft && leftAddon) ? "media" : undefined;

package/dist/tree/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useEffect,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { useLink } from \"../link/LinkProvider.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { TreeGroup, type OverridableTreeGroupProps } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0  Added the `groupProps` prop.\n */\nexport interface TreeItemProps\n  extends Omit<DefaultTreeItemNode, \"parentId\">,\n    HTMLAttributes<HTMLLIElement> {\n  /**\n   * @defaultValue `\"tree-item-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n   * padding to increase for each nested tree.\n   */\n  depth: number;\n\n  /**\n   * Any additional props that should be passed to the surrounding `<li>`\n   * element. The top-level props are passed to the `<span>` or `<a>` element\n   * instead.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;\n\n  /**\n   * This should normally be the text/content to display within the tree item\n   * and should **not** include nested trees.\n   */\n  children?: ReactNode;\n\n  /**\n   * The nested tree items to render within a `TreeGroup`.\n   */\n  childItems?: ReactNode;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /**\n   * This ref is applied to the `<span>` or `<a>` element and can be used to\n   * implement drag and drop behavior.\n   */\n  contentRef?: Ref<HTMLElement>;\n\n  /**\n   * Set this to `true` if the {@link childItems} should not be rendered while\n   * collapsed.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @remarks\n * \\@since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and\n * the `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * \\@since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n  const {\n    id: propId,\n    depth,\n    liProps,\n    disabled = false,\n    disabledOpacity = false,\n    groupProps,\n    children: propChildren,\n    className,\n    itemId,\n    leftAddon,\n    leftAddonType: propLeftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableTextChildren,\n    disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n    textProps,\n    textClassName,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    secondaryTextClassName,\n    threeLines,\n    childItems,\n    contentClassName,\n    temporaryChildItems,\n    disableTransition: propDisableTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    contentRef,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"tree-item\");\n  const children = useHigherContrastChildren(propChildren);\n  if (disabled) {\n    // you can't really disable a link other than removing the href, so\n    // unset these props\n    remaining.to = undefined;\n    remaining.href = undefined;\n  }\n\n  const {\n    metadataLookup,\n    expandedIds,\n    selectedIds,\n    expanderLeft,\n    expansionMode,\n    toggleTreeItemSelection,\n    toggleTreeItemExpansion,\n    disableTransition: contextDisableTransition,\n  } = useTreeContext();\n  const { activeDescendantId } = useKeyboardMovementContext();\n\n  const isLeafNode = !childItems;\n  const focused = activeDescendantId === id;\n  const expanded = expandedIds.has(itemId);\n  const selected = selectedIds.has(itemId);\n  const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n  useEffect(() => {\n    const lookup = metadataLookup.current;\n    lookup.expandable[itemId] = !isLeafNode;\n    lookup.disabledItems[itemId] = disabled;\n    lookup.elementToItem[id] = itemId;\n    lookup.itemToElement[itemId] = id;\n\n    return () => {\n      delete lookup.disabledItems[itemId];\n      delete lookup.expandable[itemId];\n      delete lookup.elementToItem[id];\n      delete lookup.itemToElement[itemId];\n    };\n  }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n  const { pressedClassName, ripples, handlers } =\n    useElementInteraction<HTMLLIElement>({\n      onBlur,\n      onClick(event) {\n        onClick?.(event);\n        toggleTreeItemSelection(itemId);\n        if (!isLeafNode && expansionMode !== \"manual\") {\n          toggleTreeItemExpansion(itemId);\n        }\n      },\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n\n  const isLink = !!(remaining.to || remaining.href);\n  const Link = useLink();\n\n  // cheating a bit so there are type errors around the event handlers\n  const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n  const leftAddonType =\n    propLeftAddonType ?? (expanderLeft && leftAddon) ? \"media\" : undefined;\n  const isMediaLeftAddon =\n    typeof propLeftAddonType === \"undefined\" && leftAddonType === \"media\";\n  const disableLeftAddonCenteredMedia =\n    propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n  return (\n    <li\n      {...liProps}\n      role=\"none\"\n      className={treeItem({\n        className,\n        expander: !!childItems,\n        expanderLeft,\n      })}\n    >\n      <ContentComponent\n        {...remaining}\n        // nodes with children should always apply the `aria-expanded` to show\n        // that it is expandable while leaf nodes should remain omitted\n        aria-expanded={isLeafNode ? undefined : expanded}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        id={id}\n        ref={contentRef}\n        role=\"treeitem\"\n        tabIndex={-1}\n        {...handlers}\n        className={treeItemContent({\n          link: isLink,\n          padded: depth > 0,\n          focused,\n          selected,\n          disabled,\n          disabledOpacity,\n          className: contentClassName,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          threeLines={threeLines}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={\n            <TreeItemExpander\n              isLeft\n              itemId={itemId}\n              addon={leftAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={treeItemMedia({\n            isLeafNode,\n            isMediaLeftAddon,\n            className: leftAddonClassName,\n          })}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={\n            <TreeItemExpander\n              itemId={itemId}\n              addon={rightAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </ContentComponent>\n      <TreeGroup\n        id={`${id}-group`}\n        temporary={temporaryChildItems}\n        disableTransition={disableTransition}\n        {...groupProps}\n        depth={depth - 1}\n        collapsed={isLeafNode || !expanded}\n      >\n        {childItems}\n      </TreeGroup>\n    </li>\n  );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","useLink","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","threeLines","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","remaining","to","undefined","href","metadataLookup","expandedIds","selectedIds","expanderLeft","expansionMode","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","event","isLink","Link","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","padded","isLeft","addon","temporary","collapsed"],"mappings":"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"}
+{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useEffect,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { TreeGroup, type OverridableTreeGroupProps } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0  Added the `groupProps` prop.\n */\nexport interface TreeItemProps\n  extends Omit<DefaultTreeItemNode, \"parentId\">,\n    HTMLAttributes<HTMLLIElement> {\n  /**\n   * @defaultValue `\"tree-item-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n   * padding to increase for each nested tree.\n   */\n  depth: number;\n\n  /**\n   * Any additional props that should be passed to the surrounding `<li>`\n   * element. The top-level props are passed to the `<span>` or `<a>` element\n   * instead.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;\n\n  /**\n   * This should normally be the text/content to display within the tree item\n   * and should **not** include nested trees.\n   */\n  children?: ReactNode;\n\n  /**\n   * The nested tree items to render within a `TreeGroup`.\n   */\n  childItems?: ReactNode;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /**\n   * This ref is applied to the `<span>` or `<a>` element and can be used to\n   * implement drag and drop behavior.\n   */\n  contentRef?: Ref<HTMLElement>;\n\n  /**\n   * Set this to `true` if the {@link childItems} should not be rendered while\n   * collapsed.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @remarks\n * \\@since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and\n * the `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * \\@since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n  const {\n    id: propId,\n    depth,\n    liProps,\n    disabled = false,\n    disabledOpacity = false,\n    groupProps,\n    children: propChildren,\n    className,\n    itemId,\n    leftAddon,\n    leftAddonType: propLeftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableTextChildren,\n    disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n    textProps,\n    textClassName,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    secondaryTextClassName,\n    threeLines,\n    childItems,\n    contentClassName,\n    temporaryChildItems,\n    disableTransition: propDisableTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    contentRef,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"tree-item\");\n  const children = useHigherContrastChildren(propChildren);\n  if (disabled) {\n    // you can't really disable a link other than removing the href, so\n    // unset these props\n    remaining.to = undefined;\n    remaining.href = undefined;\n  }\n\n  const {\n    expandedIds,\n    selectedIds,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    linkComponent: Link,\n    toggleTreeItemSelection,\n    toggleTreeItemExpansion,\n    disableTransition: contextDisableTransition,\n  } = useTreeContext();\n  const { activeDescendantId } = useKeyboardMovementContext();\n\n  const isLeafNode = !childItems;\n  const focused = activeDescendantId === id;\n  const expanded = expandedIds.has(itemId);\n  const selected = selectedIds.has(itemId);\n  const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n  useEffect(() => {\n    const lookup = metadataLookup.current;\n    lookup.expandable[itemId] = !isLeafNode;\n    lookup.disabledItems[itemId] = disabled;\n    lookup.elementToItem[id] = itemId;\n    lookup.itemToElement[itemId] = id;\n\n    return () => {\n      delete lookup.disabledItems[itemId];\n      delete lookup.expandable[itemId];\n      delete lookup.elementToItem[id];\n      delete lookup.itemToElement[itemId];\n    };\n  }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n  const { pressedClassName, ripples, handlers } =\n    useElementInteraction<HTMLLIElement>({\n      onBlur,\n      onClick(event) {\n        onClick?.(event);\n        toggleTreeItemSelection(itemId);\n        if (!isLeafNode && expansionMode !== \"manual\") {\n          toggleTreeItemExpansion(itemId);\n        }\n      },\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n\n  const isLink = !!(remaining.to || remaining.href);\n\n  // cheating a bit so there are type errors around the event handlers\n  const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n  const leftAddonType =\n    propLeftAddonType ?? (expanderLeft && leftAddon) ? \"media\" : undefined;\n  const isMediaLeftAddon =\n    typeof propLeftAddonType === \"undefined\" && leftAddonType === \"media\";\n  const disableLeftAddonCenteredMedia =\n    propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n  return (\n    <li\n      {...liProps}\n      role=\"none\"\n      className={treeItem({\n        className,\n        expander: !!childItems,\n        expanderLeft,\n      })}\n    >\n      <ContentComponent\n        {...remaining}\n        // nodes with children should always apply the `aria-expanded` to show\n        // that it is expandable while leaf nodes should remain omitted\n        aria-expanded={isLeafNode ? undefined : expanded}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        id={id}\n        ref={contentRef}\n        role=\"treeitem\"\n        tabIndex={-1}\n        {...handlers}\n        className={treeItemContent({\n          link: isLink,\n          padded: depth > 0,\n          focused,\n          selected,\n          disabled,\n          disabledOpacity,\n          className: contentClassName,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          threeLines={threeLines}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={\n            <TreeItemExpander\n              isLeft\n              itemId={itemId}\n              addon={leftAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={treeItemMedia({\n            isLeafNode,\n            isMediaLeftAddon,\n            className: leftAddonClassName,\n          })}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={\n            <TreeItemExpander\n              itemId={itemId}\n              addon={rightAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </ContentComponent>\n      <TreeGroup\n        id={`${id}-group`}\n        temporary={temporaryChildItems}\n        disableTransition={disableTransition}\n        {...groupProps}\n        depth={depth - 1}\n        collapsed={isLeafNode || !expanded}\n      >\n        {childItems}\n      </TreeGroup>\n    </li>\n  );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","threeLines","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","remaining","to","undefined","href","expandedIds","selectedIds","expanderLeft","expansionMode","metadataLookup","linkComponent","Link","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","event","isLink","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","padded","isLeft","addon","temporary","collapsed"],"mappings":"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"}

package/dist/tree/TreeProvider.d.ts

@@ -1,4 +1,5 @@
 import { type ReactElement, type ReactNode } from "react";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { type NonNullRef } from "../types.js";
 import { type DefaultTreeItemNode, type TreeData, type TreeItemNode } from "./types.js";
 import { type TreeExpansion } from "./useTreeExpansion.js";
@@ -62,6 +63,7 @@ export interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode> exten
     rootId: string | null;
     disableTransition: boolean;
     temporaryChildItems: boolean;
+    linkComponent: CustomLinkComponent;
     /** @internal */
     expanderLeft: boolean;
     /** @internal */

package/dist/tree/TreeProvider.js

@@ -24,7 +24,7 @@ const { Provider } = context;
  * @internal
  * @remarks \@since 6.0.0
  */ export function TreeProvider(props) {
-    const { children, data, rootId, multiSelect, expanderIcon, expanderLeft, expansionMode, metadataLookup, disableTransition, temporaryChildItems, expandedIds, selectedIds, expandMultipleTreeItems, toggleTreeItemExpansion, selectMultipleTreeItems, toggleTreeItemSelection } = props;
+    const { children, data, rootId, multiSelect, expanderIcon, expanderLeft, expansionMode, metadataLookup, disableTransition, temporaryChildItems, linkComponent, expandedIds, selectedIds, expandMultipleTreeItems, toggleTreeItemExpansion, selectMultipleTreeItems, toggleTreeItemSelection } = props;
     const value = useMemo(()=>({
             data,
             rootId,
@@ -35,6 +35,7 @@ const { Provider } = context;
             metadataLookup,
             disableTransition,
             temporaryChildItems,
+            linkComponent,
             expandedIds,
             selectedIds,
             expandMultipleTreeItems,
@@ -49,6 +50,7 @@ const { Provider } = context;
         expanderIcon,
         expanderLeft,
         expansionMode,
+        linkComponent,
         metadataLookup,
         multiSelect,
         rootId,

package/dist/tree/TreeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/TreeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type NonNullRef } from \"../types.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeItemNode,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * When this is set to `\"auto\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will select and expand/collapse the tree item. The user\n * can still use the ArrowLeft and ArrowRight keys to expand/collapse nested\n * tree items.\n *\n * When this is set to `\"manual\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will only select that tree item. The user must use the\n * ArrowLeft and ArrowRight keys to expand/collapse nested tree items.\n *\n * The main use-case for the `\"manual\"` setting is creating a navigation tree\n * that requires the user to click on an icon or a button to expand the child\n * items.\n *\n * @remarks \\@since 6.0.0\n */\nexport type TreeExpansionMode = \"auto\" | \"manual\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface TreeItemMetadataLookup {\n  /**\n   * This is used for the keyboard movement behavior for trees that allow the\n   * `ArrowRight` key for tree items that have children.\n   */\n  expandable: Record<string, boolean>;\n\n  /**\n   * This is a quick lookup if a tree item is disabled since it's possible the\n   * custom `renderer` sets the `disabled` state and not the `TreeData`.\n   */\n  disabledItems: Record<string, boolean>;\n\n  /**\n   * A lookup of element `id` (DOM id) for each tree item to the `itemId`. This\n   * is a quick way to figure out which item is being interacted with from a\n   * keyboard event without needed to add `data-*` attributes.\n   */\n  elementToItem: Record<string, string>;\n\n  /**\n   * A lookup of tree item `itemId` to the element `id` (DOM id). This is used\n   * to be able to find a parent tree item when the `ArrowLeft` key is pressed\n   * to focus that parent item.\n   */\n  itemToElement: Record<string, string>;\n}\n\n/**\n * The tree context is mostly a convenience API for implementing a custom tree\n * item that requires the {@link TreeExpansion}, {@link TreeSelection} and\n * {@link TreeData} to work.\n *\n * The other properties on the context are most likely for internal use only.\n *\n * @remarks \\@since 6.0.0\n */\nexport interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>\n  extends TreeExpansion,\n    TreeSelection {\n  data: TreeData<T>;\n  rootId: string | null;\n  disableTransition: boolean;\n  temporaryChildItems: boolean;\n\n  /** @internal */\n  expanderLeft: boolean;\n  /** @internal */\n  expanderIcon: ReactNode;\n  /** @internal */\n  expansionMode: TreeExpansionMode;\n  /** @internal */\n  metadataLookup: NonNullRef<TreeItemMetadataLookup>;\n}\n\n// Allow the hook to correct typecast this instead\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst context = createContext<TreeContext<any> | undefined>(undefined);\ncontext.displayName = \"Tree\";\nconst { Provider } = context;\n\n/**\n * This can be used for a custom tree item renderer.\n *\n * @see The `Tree` component for an example.\n * @remarks \\@since 6.0.0\n */\nexport function useTreeContext<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(): TreeContext<T> {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"Cannot find a parent Tree component\");\n  }\n\n  return value;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface TreeProviderProps<T extends TreeItemNode = DefaultTreeItemNode>\n  extends TreeContext<T> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(\n  props: TreeProviderProps<T>\n): ReactElement {\n  const {\n    children,\n    data,\n    rootId,\n    multiSelect,\n    expanderIcon,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    disableTransition,\n    temporaryChildItems,\n    expandedIds,\n    selectedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    selectMultipleTreeItems,\n    toggleTreeItemSelection,\n  } = props;\n  const value = useMemo<TreeContext<T>>(\n    () => ({\n      data,\n      rootId,\n      multiSelect,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      metadataLookup,\n      disableTransition,\n      temporaryChildItems,\n      expandedIds,\n      selectedIds,\n      expandMultipleTreeItems,\n      toggleTreeItemExpansion,\n      selectMultipleTreeItems,\n      toggleTreeItemSelection,\n    }),\n    [\n      data,\n      disableTransition,\n      expandMultipleTreeItems,\n      expandedIds,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      metadataLookup,\n      multiSelect,\n      rootId,\n      selectMultipleTreeItems,\n      selectedIds,\n      temporaryChildItems,\n      toggleTreeItemExpansion,\n      toggleTreeItemSelection,\n    ]\n  );\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","undefined","displayName","Provider","useTreeContext","value","Error","TreeProvider","props","children","data","rootId","multiSelect","expanderIcon","expanderLeft","expansionMode","metadataLookup","disableTransition","temporaryChildItems","expandedIds","selectedIds","expandMultipleTreeItems","toggleTreeItemExpansion","selectMultipleTreeItems","toggleTreeItemSelection"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,OAAO,QAGF,QAAQ;AAuFf,kDAAkD;AAClD,8DAA8D;AAC9D,MAAMC,wBAAUH,cAA4CI;AAC5DD,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AAErB;;;;;CAKC,GACD,OAAO,SAASI;IAGd,MAAMC,QAAQP,WAAWE;IACzB,IAAI,CAACK,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAWA;;;;;CAKC,GACD,OAAO,SAASE,aACdC,KAA2B;IAE3B,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGhB;IACJ,MAAMH,QAAQN,QACZ,IAAO,CAAA;YACLW;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEd;QACAO;QACAI;QACAF;QACAN;QACAC;QACAC;QACAC;QACAJ;QACAD;QACAY;QACAH;QACAF;QACAI;QACAE;KACD;IAGH,qBAAO,KAACrB;QAASE,OAAOA;kBAAQI;;AAClC"}
+{"version":3,"sources":["../../src/tree/TreeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { type NonNullRef } from \"../types.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeItemNode,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * When this is set to `\"auto\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will select and expand/collapse the tree item. The user\n * can still use the ArrowLeft and ArrowRight keys to expand/collapse nested\n * tree items.\n *\n * When this is set to `\"manual\"`, clicking on a tree item with a mouse or with\n * the Enter/Space keys will only select that tree item. The user must use the\n * ArrowLeft and ArrowRight keys to expand/collapse nested tree items.\n *\n * The main use-case for the `\"manual\"` setting is creating a navigation tree\n * that requires the user to click on an icon or a button to expand the child\n * items.\n *\n * @remarks \\@since 6.0.0\n */\nexport type TreeExpansionMode = \"auto\" | \"manual\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface TreeItemMetadataLookup {\n  /**\n   * This is used for the keyboard movement behavior for trees that allow the\n   * `ArrowRight` key for tree items that have children.\n   */\n  expandable: Record<string, boolean>;\n\n  /**\n   * This is a quick lookup if a tree item is disabled since it's possible the\n   * custom `renderer` sets the `disabled` state and not the `TreeData`.\n   */\n  disabledItems: Record<string, boolean>;\n\n  /**\n   * A lookup of element `id` (DOM id) for each tree item to the `itemId`. This\n   * is a quick way to figure out which item is being interacted with from a\n   * keyboard event without needed to add `data-*` attributes.\n   */\n  elementToItem: Record<string, string>;\n\n  /**\n   * A lookup of tree item `itemId` to the element `id` (DOM id). This is used\n   * to be able to find a parent tree item when the `ArrowLeft` key is pressed\n   * to focus that parent item.\n   */\n  itemToElement: Record<string, string>;\n}\n\n/**\n * The tree context is mostly a convenience API for implementing a custom tree\n * item that requires the {@link TreeExpansion}, {@link TreeSelection} and\n * {@link TreeData} to work.\n *\n * The other properties on the context are most likely for internal use only.\n *\n * @remarks \\@since 6.0.0\n */\nexport interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>\n  extends TreeExpansion,\n    TreeSelection {\n  data: TreeData<T>;\n  rootId: string | null;\n  disableTransition: boolean;\n  temporaryChildItems: boolean;\n\n  linkComponent: CustomLinkComponent;\n\n  /** @internal */\n  expanderLeft: boolean;\n  /** @internal */\n  expanderIcon: ReactNode;\n  /** @internal */\n  expansionMode: TreeExpansionMode;\n  /** @internal */\n  metadataLookup: NonNullRef<TreeItemMetadataLookup>;\n}\n\n// Allow the hook to correct typecast this instead\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst context = createContext<TreeContext<any> | undefined>(undefined);\ncontext.displayName = \"Tree\";\nconst { Provider } = context;\n\n/**\n * This can be used for a custom tree item renderer.\n *\n * @see The `Tree` component for an example.\n * @remarks \\@since 6.0.0\n */\nexport function useTreeContext<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(): TreeContext<T> {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"Cannot find a parent Tree component\");\n  }\n\n  return value;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface TreeProviderProps<T extends TreeItemNode = DefaultTreeItemNode>\n  extends TreeContext<T> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(\n  props: TreeProviderProps<T>\n): ReactElement {\n  const {\n    children,\n    data,\n    rootId,\n    multiSelect,\n    expanderIcon,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    disableTransition,\n    temporaryChildItems,\n    linkComponent,\n    expandedIds,\n    selectedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    selectMultipleTreeItems,\n    toggleTreeItemSelection,\n  } = props;\n  const value = useMemo<TreeContext<T>>(\n    () => ({\n      data,\n      rootId,\n      multiSelect,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      metadataLookup,\n      disableTransition,\n      temporaryChildItems,\n      linkComponent,\n      expandedIds,\n      selectedIds,\n      expandMultipleTreeItems,\n      toggleTreeItemExpansion,\n      selectMultipleTreeItems,\n      toggleTreeItemSelection,\n    }),\n    [\n      data,\n      disableTransition,\n      expandMultipleTreeItems,\n      expandedIds,\n      expanderIcon,\n      expanderLeft,\n      expansionMode,\n      linkComponent,\n      metadataLookup,\n      multiSelect,\n      rootId,\n      selectMultipleTreeItems,\n      selectedIds,\n      temporaryChildItems,\n      toggleTreeItemExpansion,\n      toggleTreeItemSelection,\n    ]\n  );\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","undefined","displayName","Provider","useTreeContext","value","Error","TreeProvider","props","children","data","rootId","multiSelect","expanderIcon","expanderLeft","expansionMode","metadataLookup","disableTransition","temporaryChildItems","linkComponent","expandedIds","selectedIds","expandMultipleTreeItems","toggleTreeItemExpansion","selectMultipleTreeItems","toggleTreeItemSelection"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,OAAO,QAGF,QAAQ;AA0Ff,kDAAkD;AAClD,8DAA8D;AAC9D,MAAMC,wBAAUH,cAA4CI;AAC5DD,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AAErB;;;;;CAKC,GACD,OAAO,SAASI;IAGd,MAAMC,QAAQP,WAAWE;IACzB,IAAI,CAACK,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAWA;;;;;CAKC,GACD,OAAO,SAASE,aACdC,KAA2B;IAE3B,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,aAAa,EACbC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGjB;IACJ,MAAMH,QAAQN,QACZ,IAAO,CAAA;YACLW;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEf;QACAO;QACAK;QACAF;QACAP;QACAC;QACAC;QACAI;QACAH;QACAJ;QACAD;QACAa;QACAH;QACAH;QACAK;QACAE;KACD;IAGH,qBAAO,KAACtB;QAASE,OAAOA;kBAAQI;;AAClC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.1",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -11,11 +11,6 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./test-utils": "./dist/test-utils/index.js",
-    "./test-utils/*": {
-      "require": "./dist/test-utils/*",
-      "default": "./dist/test-utils/*.js"
-    },
     "./test-utils/polyfills": {
       "require": "./dist/test-utils/polyfills",
       "default": "./dist/test-utils/polyfills/index.js"
@@ -24,7 +19,13 @@
       "require": "./dist/test-utils/polyfills/*",
       "default": "./dist/test-utils/polyfills/*.js"
     },
-    "./test-utils/jest-setup": "./dist/test-utils/jest-setup.js*",
+    "./test-utils/jest-setup": "./dist/test-utils/jest-setup.js",
+    "./test-utils/data-testid": "./dist/test-utils/data-testid.js",
+    "./test-utils": "./dist/test-utils/index.js",
+    "./test-utils/*": {
+      "require": "./dist/test-utils/*",
+      "default": "./dist/test-utils/*.js"
+    },
     "./colors": {
       "sass": "./dist/_colors.scss"
     },
@@ -54,22 +55,22 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.1"
+    "nanoid": "^5.0.3"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@swc/cli": "^0.1.62",
-    "@swc/core": "1.3.92",
+    "@swc/core": "1.3.96",
     "@swc/jest": "^0.2.29",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/lodash": "^4.14.199",
-    "@types/node": "^20.8.3",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
+    "@types/lodash": "^4.14.201",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "chokidar": "^3.5.3",
     "filesize": "^10.1.0",
     "glob": "10.3.10",
@@ -81,9 +82,9 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-scss": "^4.0.9",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^13.0.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-order": "^6.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
@@ -129,6 +130,7 @@
   },
   "scripts": {
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
+    "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",
     "build-esm": "swc src -d ./dist",
     "build-esm-watch": "pnpm run build-esm --watch",
@@ -136,6 +138,7 @@
     "build-types-watch": "pnpm run build-types --watch",
     "build-scss": "node scripts/copySassFiles.js",
     "build-scss-watch": "pnpm run build-scss --watch",
+    "clean-dist": "rm -rf dist",
     "clean": "rm -rf .turbo dist node_modules",
     "typecheck": "tsc --noEmit",
     "lint-scripts": "eslint \"src/**/*.{ts,tsx,js,jsx,cjs,mjs}\"",

package/src/__tests__/NoSsr.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { type ReactElement } from "react";
-import { render } from "../test-utils/index.js";
+import { render, screen } from "../test-utils/index.js";
 
 import { NoSsr } from "../NoSsr.js";
 import { SsrProvider, useSsr } from "../SsrProvider.js";
@@ -15,17 +15,17 @@ describe("NoSsr", () => {
       return <p>Some Text</p>;
     }
 
-    const { getByText } = render(
+    render(
       <NoSsr>
         <Content />
       </NoSsr>
     );
 
-    expect(() => getByText("Some Text")).not.toThrow();
+    expect(() => screen.getByText("Some Text")).not.toThrow();
   });
 
   it("should always render the children if ssr mode has not been initialized", () => {
-    const { getByText } = render(
+    render(
       <SsrProvider>
         <NoSsr>
           <Content />
@@ -33,7 +33,7 @@ describe("NoSsr", () => {
       </SsrProvider>
     );
 
-    expect(() => getByText("Some Text")).not.toThrow();
+    expect(() => screen.getByText("Some Text")).not.toThrow();
   });
 
   // I don't really know how to test this part

package/src/__tests__/useAsyncAction.tsx

@@ -1,6 +1,12 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { type MouseEvent, type ReactElement } from "react";
-import { act, rmdRender, userEvent, waitFor } from "../test-utils/index.js";
+import {
+  act,
+  rmdRender,
+  screen,
+  userEvent,
+  waitFor,
+} from "../test-utils/index.js";
 
 import { box } from "../box/styles.js";
 import { Button, type ButtonProps } from "../button/Button.js";
@@ -41,7 +47,7 @@ function Test(props: TestProps): ReactElement {
             disablePadding: true,
           })}
         >
-          <CircularProgress />
+          <CircularProgress aria-label="Loading" />
         </span>
       )}
     </Button>
@@ -59,8 +65,8 @@ describe("useAsyncAction", () => {
         instance.addEventListener("resolve-promise", () => resolve());
       });
     });
-    const { getByRole, unmount } = rmdRender(<Test onClick={onClick} />);
-    const button = getByRole("button", { name: "Button" });
+    const { unmount } = rmdRender(<Test onClick={onClick} />);
+    const button = screen.getByRole("button", { name: "Button" });
 
     expect(button).not.toHaveAttribute("aria-disabled");
     await user.click(button);
@@ -74,6 +80,8 @@ describe("useAsyncAction", () => {
     });
     await waitFor(() => {
       expect(button).not.toHaveAttribute("aria-disabled");
+    });
+    await waitFor(() => {
       expect(button).not.toHaveAttribute("disabled");
     });
 
@@ -101,8 +109,8 @@ describe("useAsyncAction", () => {
       onClick,
     };
 
-    const { getByRole, rerender } = rmdRender(<Test {...props} disabled />);
-    const button = getByRole("button", { name: "Button" });
+    const { rerender } = rmdRender(<Test {...props} disabled />);
+    const button = screen.getByRole("button", { name: "Button" });
     expect(button).toBeDisabled();
 
     await user.click(button);