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

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/dist/tree/_tree.scss

@@ -6,6 +6,7 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 
+$disable-everything: false !default;
 $disable-expander-left: false !default;
 $disable-expander-left-as-media: false !default;
 $disable-expander-left-as-media-offset: false !default;
@@ -22,153 +23,145 @@ $selected-styles: (
   font-weight: typography.$font-weight-bold,
 ) !default;
 
-$var-lookup: (
-  depth: (
-    var: --rmd-tree-depth,
-    value: -1,
-  ),
-  item-padding: (
-    var: --rmd-tree-item-padding,
-    value: 0,
-  ),
-  padding-base: (
-    var: --rmd-tree-item-padding-base,
-    value: $padding-base,
-  ),
-  padding-incrementor: (
-    var: --rmd-tree-item-padding-incrementor,
-    value: $padding-incrementor,
-  ),
-);
+$variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tree var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "tree");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tree var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tree")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
-  .rmd-tree {
-    display: block;
-    height: 100%;
-    outline-style: none;
-    overflow: auto;
-    // this is mostly for firefox. moving the mouse even 1px while clicking will
-    // select the current item and all items to the tree root
-    user-select: none;
-    width: 100%;
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(depth, -1);
+    @include set-var(item-padding, 0);
+    @include set-var(item-padding-base, $padding-base);
+    @include set-var(item-padding-incrementor, $padding-incrementor);
   }
+}
 
-  .rmd-tree-item {
-    @include icon.set-var(rotate-from, $expander-right-from);
-    @include icon.set-var(rotate-to, $expander-right-to);
-    @include set-var(
-      item-padding,
-      calc(
-        get-var(depth) * get-var(padding-incrementor) + get-var(padding-base)
-      )
-    );
-
-    list-style: none;
-
-    @if not $disable-expander-left {
-      &--expander-left {
-        @include icon.set-var(rotate-from, $expander-left-from);
-        @include icon.set-var(rotate-to, $expander-left-to);
-      }
+@mixin styles {
+  @if not $disable-everything {
+    .rmd-tree {
+      display: block;
+      height: 100%;
+      outline-style: none;
+      overflow: auto;
+      // this is mostly for firefox. moving the mouse even 1px while clicking will
+      // select the current item and all items to the tree root
+      user-select: none;
+      width: 100%;
     }
 
-    &__content {
-      &--disabled {
-        cursor: auto;
-
-        &:hover::before {
-          @include interaction.set-var(background-color, transparent);
+    .rmd-tree-item {
+      @include icon.set-var(rotate-from, $expander-right-from);
+      @include icon.set-var(rotate-to, $expander-right-to);
+      @include set-var(
+        item-padding,
+        calc(
+          get-var(depth) * get-var(item-padding-incrementor) +
+            get-var(item-padding-base)
+        )
+      );
+
+      list-style: none;
+
+      @if not $disable-expander-left {
+        &--expander-left {
+          @include icon.set-var(rotate-from, $expander-left-from);
+          @include icon.set-var(rotate-to, $expander-left-to);
         }
       }
 
-      &--link {
-        color: inherit;
-        text-decoration: none;
-      }
+      &__content {
+        &--disabled {
+          cursor: auto;
 
-      &--padded {
-        @include utils.auto-rtl(
-          padding-left,
-          get-var(item-padding),
-          list.get-var(item-horizontal-padding)
-        );
-      }
+          &:hover::before {
+            @include interaction.set-var(background-color, transparent);
+          }
+        }
+
+        &--link {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        &--padded {
+          @include utils.auto-rtl(
+            padding-left,
+            get-var(item-padding),
+            list.get-var(item-horizontal-padding)
+          );
+        }
 
-      &--focused::before {
-        .rmd-tree:focus-within & {
-          @include utils.keyboard-only {
-            @include interaction.focus-styles;
+        &--focused::before {
+          .rmd-tree:focus-within & {
+            @include utils.keyboard-only {
+              @include interaction.focus-styles;
+            }
           }
         }
-      }
 
-      @if $selected-styles {
-        &--selected {
-          @if not $disable-selected-background-color {
-            @include interaction.set-var(
-              background-color,
-              interaction.get-var(selected-background-color)
-            );
-
-            @include utils.touch-only {
-              &:hover::before {
-                @include interaction.set-var(
-                  background-color,
-                  interaction.get-var(selected-background-color)
-                );
+        @if $selected-styles {
+          &--selected {
+            @if not $disable-selected-background-color {
+              @include interaction.set-var(
+                background-color,
+                interaction.get-var(selected-background-color)
+              );
+
+              @include utils.touch-only {
+                &:hover::before {
+                  @include interaction.set-var(
+                    background-color,
+                    interaction.get-var(selected-background-color)
+                  );
+                }
               }
             }
+            @include utils.map-to-styles($selected-styles);
           }
-          @include utils.map-to-styles($selected-styles);
         }
       }
-    }
 
-    @if not $disable-expander-left-as-media {
-      &__media {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+      @if not $disable-expander-left-as-media {
+        &__media {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
 
-        @if not $disable-expander-left-as-media-offset {
-          &--single {
-            justify-content: flex-end;
+          @if not $disable-expander-left-as-media-offset {
+            &--single {
+              justify-content: flex-end;
+            }
           }
         }
       }
     }
-  }
 
-  .rmd-tree-group {
-    background-color: inherit;
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
+    .rmd-tree-group {
+      background-color: inherit;
+      color: inherit;
+      font-size: inherit;
+      line-height: inherit;
 
-    // remove the list padding to make it more condensed
-    padding-bottom: 0;
-    padding-top: 0;
+      // remove the list padding to make it more condensed
+      padding-bottom: 0;
+      padding-top: 0;
+    }
   }
 }

package/dist/typography/_typography.scss

@@ -222,36 +222,21 @@ $button-styles: map.merge(
 $text-container-padding: 1rem !default;
 $text-line-length: 65ch !default;
 
-$typography-var-lookup: (
-  line-length: (
-    var: --rmd-line-length,
-    value: $text-line-length,
-  ),
-  text-container-padding: (
-    var: --rmd-text-container-padding,
-    value: $text-container-padding,
-  ),
-);
+$typography-variables: (line-length, text-container-padding);
 
 @function typography-get-var($name, $fallback: null) {
-  $found: utils.validate($typography-var-lookup, $name, "typography var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($typography-variables, $name, "typography");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin typography-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($typography-var-lookup, $name, "typography var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($typography-variables, $name, "typography")}: #{$value};
+  }
 }
 
 @mixin typography-use-var($property, $name: $property, $fallback: null) {
@@ -339,6 +324,16 @@ $typography-var-lookup: (
   display: -webkit-box;
 }
 
+@mixin typography-variables {
+  @if not $disable-text-container {
+    @include typography-set-var(line-length, $text-line-length);
+    @include typography-set-var(
+      text-container-padding,
+      $text-container-padding
+    );
+  }
+}
+
 @mixin typography-styles {
   @include typography-text-container-styles;
   @include typography-base-styles;