feat: treeview node context (#4058)

Author: dev-viinz

.changeset/loud-singers-march.md

@@ -0,0 +1,7 @@
+---
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+Added the TreeView.NodeContext component
+  

packages/skeleton-react/src/components/tree-view/anatomy/node-context.tsx

@@ -0,0 +1,16 @@
+import { NodeContext as NodeContext_ } from '../modules/node-context.js';
+import type { NodeProps } from '@zag-js/tree-view';
+import { use } from 'react';
+import type { ReactNode } from 'react';
+
+export interface TreeViewNodeContextProps {
+	children: (treeView: NodeProps) => ReactNode;
+}
+
+export default function NodeContext(props: TreeViewNodeContextProps) {
+	const treeView = use(NodeContext_);
+
+	const { children } = props;
+
+	return children(treeView);
+}

packages/skeleton-react/src/components/tree-view/index.ts

@@ -12,5 +12,6 @@ export type { TreeViewBranchTextProps } from './anatomy/branch-text.jsx';
 export type { TreeViewBranchIndicatorProps } from './anatomy/branch-indicator.jsx';
 export type { TreeViewBranchContentProps } from './anatomy/branch-content.jsx';
 export type { TreeViewBranchIndentGuideProps } from './anatomy/branch-indent-guide.jsx';
+export type { TreeViewNodeContextProps } from './anatomy/node-context.jsx';
 export type { TreeViewNodeProviderProps } from './anatomy/node-provider.jsx';
 export type { TreeViewLabelProps } from './anatomy/label.jsx';

packages/skeleton-react/src/components/tree-view/modules/anatomy.ts

@@ -6,6 +6,7 @@ import BranchText from '../anatomy/branch-text.jsx';
 import Branch from '../anatomy/branch.jsx';
 import Item from '../anatomy/item.jsx';
 import Label from '../anatomy/label.jsx';
+import NodeContext from '../anatomy/node-context.jsx';
 import NodeProvider from '../anatomy/node-provider.jsx';
 import RootContext from '../anatomy/root-context.jsx';
 import RootProvider from '../anatomy/root-provider.jsx';
@@ -18,6 +19,7 @@ export const TreeView = Object.assign(Root, {
 	Tree: Tree,
 	Label: Label,
 	NodeProvider: NodeProvider,
+	NodeContext: NodeContext,
 	Branch: Branch,
 	BranchControl: BranchControl,
 	BranchText: BranchText,

packages/skeleton-svelte/src/components/tree-view/anatomy/node-context.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import type { NodeProps } from '@zag-js/tree-view';
+	import type { Snippet } from 'svelte';
+
+	export interface TreeViewNodeContextProps {
+		children: Snippet<[() => NodeProps]>;
+	}
+</script>
+
+<script lang="ts">
+	import { NodeContext } from '../modules/node-context.js';
+
+	const props: TreeViewNodeContextProps = $props();
+
+	const nodeProps = NodeContext.consume();
+
+	const { children } = $derived(props);
+</script>
+
+{@render children(nodeProps)}

packages/skeleton-svelte/src/components/tree-view/index.ts

@@ -12,5 +12,6 @@ export type { TreeViewBranchTextProps } from './anatomy/branch-text.svelte';
 export type { TreeViewBranchIndicatorProps } from './anatomy/branch-indicator.svelte';
 export type { TreeViewBranchContentProps } from './anatomy/branch-content.svelte';
 export type { TreeViewBranchIndentGuideProps } from './anatomy/branch-indent-guide.svelte';
+export type { TreeViewNodeContextProps } from './anatomy/node-context.svelte';
 export type { TreeViewNodeProviderProps } from './anatomy/node-provider.svelte';
 export type { TreeViewLabelProps } from './anatomy/label.svelte';

packages/skeleton-svelte/src/components/tree-view/modules/anatomy.ts

@@ -6,6 +6,7 @@ import BranchText from '../anatomy/branch-text.svelte';
 import Branch from '../anatomy/branch.svelte';
 import Item from '../anatomy/item.svelte';
 import Label from '../anatomy/label.svelte';
+import NodeContext from '../anatomy/node-context.svelte';
 import NodeProvider from '../anatomy/node-provider.svelte';
 import RootContext from '../anatomy/root-context.svelte';
 import RootProvider from '../anatomy/root-provider.svelte';
@@ -31,6 +32,7 @@ export const TreeView: typeof Root & {
 	Tree: Tree,
 	Label: Label,
 	NodeProvider: NodeProvider,
+	NodeContext: NodeContext,
 	Branch: Branch,
 	BranchControl: BranchControl,
 	BranchText: BranchText,