fluentui-svelte 0.2.0 → 0.3.0

package/dist/components/tree-view/tree-view-item-content.svelte

@@ -16,7 +16,7 @@
 
 	const { config, methods } = TREE_VIEW_CONTEXT;
 
-	const { size } = config;
+	const size = $derived(config.size);
 
 	const { handleCheck } = methods;
 </script>

package/dist/components/tree-view/tree-view-item.svelte

@@ -40,9 +40,9 @@
 
 	const { config, methods } = context;
 
-	const { size } = config;
+	const size = $derived(config.size);
 
-	const itemState: TreeViewItemContext = {
+	const itemState: TreeViewItemContext = $state({
 		get disabled() {
 			return itemContext?.disabled ?? disabled;
 		},
@@ -79,7 +79,7 @@
 		set indeterminate(v) {
 			indeterminate = v;
 		}
-	};
+	});
 
 	setTreeViewItemContext(itemState);
 

package/dist/components/tree-view/tree-view.svelte

@@ -35,106 +35,102 @@
 		...attributes
 	}: TreeViewProps = $props();
 
-	const config: TreeViewContext['config'] = $derived({
-		navigationMode: CONTEXT?.config.navigationMode || navigationMode,
-		size: CONTEXT?.config.size || size,
-		virtualized: CONTEXT?.config.virtualized ?? !!virtualizer,
-		virtualCount: CONTEXT?.config.virtualCount ?? virtualizer?.size
-	});
-
 	let forceVirtualRender = $state(false);
 
-	const _state: TreeViewContext['state'] = {
-		get openItems() {
-			return openItems;
-		},
-		get checkedItems() {
-			return checkedItems;
-		},
-		get selectionMode() {
-			return selectionMode;
-		},
-		get TREE_NODES() {
-			return CONTEXT?.state.TREE_NODES ?? TREE_NODES;
-		},
-		get forceVirtualRender() {
-			return CONTEXT?.state.forceVirtualRender ?? forceVirtualRender;
-		},
-		set forceVirtualRender(v) {
-			if (CONTEXT?.state.forceVirtualRender) {
-				CONTEXT.state.forceVirtualRender = v;
-			} else {
-				forceVirtualRender = v;
-			}
-		}
-	};
-
-	const events: TreeViewContext['events'] = $derived({
-		onCheckedChange: CONTEXT?.events.onCheckedChange ?? ((e, data) => onCheckedChange?.(e, data)),
-		onOpenChange: CONTEXT?.events.onOpenChange ?? ((e, data) => onOpenChange?.(e, data))
-	});
-
-	const methods: TreeViewContext['methods'] = {
-		handleCheck: async (e, id, checked) => {
-			if (virtualizer) {
-				_state.forceVirtualRender = true;
-				await tick();
-			}
-
-			if (_state.selectionMode === 'single') {
-				traversalSyncSingleSelection(id, _state.TREE_NODES, checkedItems);
-				return;
+	const treeViewContext: TreeViewContext = $state({
+		config: {
+			get navigationMode() {
+				return CONTEXT?.config.navigationMode || navigationMode;
+			},
+			get size() {
+				return CONTEXT?.config.size || size;
+			},
+			get virtualized() {
+				return CONTEXT?.config.virtualized ?? !!virtualizer;
+			},
+			get virtualCount() {
+				return CONTEXT?.config.virtualCount ?? virtualizer?.size;
 			}
-
-			traversalSync(id, _state.TREE_NODES, checkedItems, checked);
 		},
-		openItem: (e, id) => {
-			if (openItems instanceof SvelteSet) {
-				openItems.add(id);
-			} else {
-				openItems = [...openItems, id];
-			}
-			const node = _state.TREE_NODES.get(id)!;
-
-			node.open = true;
-		},
-		closeItem: (e, id) => {
-			if (openItems instanceof SvelteSet) {
-				openItems.delete(id);
-			} else {
-				openItems = openItems.filter((itemId) => itemId !== id);
-			}
-			const node = _state.TREE_NODES.get(id)!;
-
-			node.open = false;
-
-			// If
-			if (virtualizer && _state.forceVirtualRender) {
-				_state.forceVirtualRender = false;
+		state: {
+			get openItems() {
+				return openItems;
+			},
+			get checkedItems() {
+				return checkedItems;
+			},
+			get selectionMode() {
+				return selectionMode;
+			},
+			get TREE_NODES() {
+				return CONTEXT?.state.TREE_NODES ?? TREE_NODES;
+			},
+			get forceVirtualRender() {
+				return CONTEXT?.state.forceVirtualRender ?? forceVirtualRender;
+			},
+			set forceVirtualRender(v) {
+				if (CONTEXT) {
+					CONTEXT.state.forceVirtualRender = v;
+				} else {
+					forceVirtualRender = v;
+				}
 			}
 		},
-		registerItem: (node) => {
-			_state.TREE_NODES.set(node.id, node);
+		events: {
+			onCheckedChange: CONTEXT?.events.onCheckedChange ?? ((e, data) => onCheckedChange?.(e, data)),
+			onOpenChange: CONTEXT?.events.onOpenChange ?? ((e, data) => onOpenChange?.(e, data))
 		},
-		unregisterItem: (id) => {
-			_state.TREE_NODES.delete(id);
-		}
-	};
-
-	const treeViewContext: TreeViewContext = {
-		get config() {
-			return config;
-		},
-		get state() {
-			return _state;
-		},
-		get events() {
-			return events;
-		},
-		get methods() {
-			return methods;
+		methods: {
+			handleCheck: async (e, id, checked) => {
+				const { state } = treeViewContext;
+
+				if (virtualizer) {
+					state.forceVirtualRender = true;
+					await tick();
+				}
+
+				if (selectionMode === 'single') {
+					traversalSyncSingleSelection(id, state.TREE_NODES, checkedItems);
+					return;
+				}
+
+				traversalSync(id, state.TREE_NODES, checkedItems, checked);
+			},
+			openItem: (e, id) => {
+				if (openItems instanceof SvelteSet) {
+					openItems.add(id);
+				} else {
+					openItems = [...openItems, id];
+				}
+				const node = treeViewContext.state.TREE_NODES.get(id)!;
+
+				node.open = true;
+			},
+			closeItem: (e, id) => {
+				const { state } = treeViewContext;
+
+				if (openItems instanceof SvelteSet) {
+					openItems.delete(id);
+				} else {
+					openItems = openItems.filter((itemId) => itemId !== id);
+				}
+				const node = state.TREE_NODES.get(id)!;
+
+				node.open = false;
+
+				// If
+				if (virtualizer && state.forceVirtualRender) {
+					state.forceVirtualRender = false;
+				}
+			},
+			registerItem: (node) => {
+				treeViewContext.state.TREE_NODES.set(node.id, node);
+			},
+			unregisterItem: (id) => {
+				treeViewContext.state.TREE_NODES.delete(id);
+			}
 		}
-	};
+	});
 
 	setTreeViewContext(treeViewContext);
 
@@ -194,7 +190,7 @@
 </script>
 
 <!-- Render only when necessary (virtualizer perf) -->
-{#if _state.forceVirtualRender || (config.virtualized && (!IS_SUB_TREE || ITEM_CONTEXT?.open)) || !config.virtualized}
+{#if treeViewContext.state.forceVirtualRender || (treeViewContext.config.virtualized && (!IS_SUB_TREE || ITEM_CONTEXT?.open)) || !treeViewContext.config.virtualized}
 	<ul
 		class="fs-tree-view"
 		role={IS_SUB_TREE ? 'group' : 'tree'}

package/dist/index.d.ts

@@ -55,6 +55,15 @@ export { default as ProgressRing } from './components/progress-ring/progress-rin
 export { default as RadioButton } from './components/radio-button/radio-button.svelte';
 export { default as Skeleton } from './components/skeleton/skeleton.svelte';
 export { default as Slider } from './components/slider/slider.svelte';
+export { default as Table } from './components/table/table.svelte';
+export { default as TableHeader } from './components/table/table-header.svelte';
+export { default as TableHeaderCell } from './components/table/table-header-cell.svelte';
+export { default as TableBody } from './components/table/table-body.svelte';
+export { default as TableRow } from './components/table/table-row.svelte';
+export { default as TableCell } from './components/table/table-cell.svelte';
+export { default as TableSelectionCell } from './components/table/table-selection-cell.svelte';
+export { default as TableCellLayout } from './components/table/table-cell-layout.svelte';
+export { default as TableCellActions } from './components/table/table-cell-actions.svelte';
 export { default as TextArea } from './components/textarea/textarea.svelte';
 export { default as TextBox } from './components/text-box/text-box.svelte';
 export { default as TextBoxButton } from './components/text-box/text-box-button.svelte';

package/dist/index.js

@@ -109,6 +109,17 @@ export { default as Skeleton } from './components/skeleton/skeleton.svelte';
 // Start Slider Component
 export { default as Slider } from './components/slider/slider.svelte';
 // End Slider Component
+// Start Table Component
+export { default as Table } from './components/table/table.svelte';
+export { default as TableHeader } from './components/table/table-header.svelte';
+export { default as TableHeaderCell } from './components/table/table-header-cell.svelte';
+export { default as TableBody } from './components/table/table-body.svelte';
+export { default as TableRow } from './components/table/table-row.svelte';
+export { default as TableCell } from './components/table/table-cell.svelte';
+export { default as TableSelectionCell } from './components/table/table-selection-cell.svelte';
+export { default as TableCellLayout } from './components/table/table-cell-layout.svelte';
+export { default as TableCellActions } from './components/table/table-cell-actions.svelte';
+// End Table Component
 // Start TextArea Component
 export { default as TextArea } from './components/textarea/textarea.svelte';
 // End TextArea Component

package/dist/providers/fluentui-svelte/fluentui-svelte.svelte

@@ -20,21 +20,19 @@
 	// Syncing
 	let reducedMotion = $derived(userReducedMotion.current ?? prefersReducedMotion.current);
 
-	const _state: FSProviderContext['state'] = {
-		get tabspotInstance() {
-			return tabspotInstance;
-		},
-		get reducedMotion() {
-			return reducedMotion;
-		},
-		get theme() {
-			return mode.current;
-		}
-	};
-
-	setGlobalFSContext({
+	const context: FSProviderContext = $state({
 		config: null,
-		state: _state,
+		state: {
+			get tabspotInstance() {
+				return tabspotInstance;
+			},
+			get reducedMotion() {
+				return reducedMotion;
+			},
+			get theme() {
+				return mode.current;
+			}
+		},
 		events: null,
 		methods: {
 			setReducedMotion: (value) => {
@@ -46,6 +44,8 @@
 		}
 	});
 
+	setGlobalFSContext(context);
+
 	onMount(() => {
 		tabspotInstance ??= tabspot();
 
@@ -57,7 +57,7 @@
 	$effect(() => {
 		const root = document.documentElement;
 
-		root.dataset.fsReducedMotion = String(_state.reducedMotion);
+		root.dataset.fsReducedMotion = String(context.state.reducedMotion);
 
 		return () => {
 			delete root.dataset.fsReducedMotion;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-svelte",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",