From d5cc1c14226a4df413856e5406dd226cfa5c726a Mon Sep 17 00:00:00 2001
From: Not-Jayden <jaydenaus9@gmail.com>
Date: Mon, 20 Nov 2023 10:33:55 +0800
Subject: [PATCH] Feat: expose complete `stateStore` as a slot prop (#38)

* feat: expose stateStore as prop

* chore: add changeset

* chore: update docs

* chore: format docs
---
 .changeset/wicked-cars-compare.md      |  5 +++++
 README.md                              |  9 +++++++++
 src/lib/cmdk/components/Command.svelte | 11 +++++++++--
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wicked-cars-compare.md

diff --git a/.changeset/wicked-cars-compare.md b/.changeset/wicked-cars-compare.md
new file mode 100644
index 0000000..3526d13
--- /dev/null
+++ b/.changeset/wicked-cars-compare.md
@@ -0,0 +1,5 @@
+---
+'cmdk-sv': patch
+---
+
+feat: expose state slot prop for Command.Root
diff --git a/README.md b/README.md
index 12ce97c..25d0d39 100644
--- a/README.md
+++ b/README.md
@@ -119,6 +119,15 @@ You can make the arrow keys wrap around the list (when you reach the end, it goe
 <Command.Root loop />
 ```
 
+This component also exposes two additional slot props for `state` (the current reactive value of the command state) and `stateStore` (the underlying writable state store). These can be used to implement more advanced use cases, such as debouncing the search updates with the `stateStore.updateState` method:
+
+```svelte
+<Command.Root {state} let:stateStore>
+	{@const handleUpdateState = debounce(stateStore.updateState, 200)}
+	<CustomCommandInput {handleUpdateState} />
+</Command.Root>
+```
+
 ### Dialog `[cmdk-dialog]` `[cmdk-overlay]`
 
 Props are forwarded to [Command](#command-cmdk-root). Composes Bits UI's Dialog component. The overlay is always rendered. See the [Bits Documentation](https://bits-ui.com/docs/) for more information. Can be controlled by binding to the `open` prop.
diff --git a/src/lib/cmdk/components/Command.svelte b/src/lib/cmdk/components/Command.svelte
index a650367..2a2eaf4 100644
--- a/src/lib/cmdk/components/Command.svelte
+++ b/src/lib/cmdk/components/Command.svelte
@@ -83,16 +83,23 @@
 		action: rootAction,
 		attrs: rootAttrs
 	};
+
+	$: slotProps = {
+		root,
+		label: { attrs: labelAttrs },
+		stateStore,
+		state: $stateStore
+	};
 </script>
 
 {#if asChild}
-	<slot {root} label={{ attrs: labelAttrs }} />
+	<slot {...slotProps} />
 {:else}
 	<div use:rootAction {...rootAttrs} {...$$restProps}>
 		<!-- svelte-ignore a11y-label-has-associated-control applied in attrs -->
 		<label {...labelAttrs}>
 			{label ?? ''}
 		</label>
-		<slot {root} label={{ attrs: labelAttrs }} />
+		<slot {...slotProps} />
 	</div>
 {/if}