expose additional events (#124)

huntabyte · Oct 19, 2023 · e788665 · e788665
1 parent c410155
commit e788665
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/.changeset/twelve-avocados-exercise.md b/.changeset/twelve-avocados-exercise.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+expose additional events
diff --git a/src/lib/bits/select/components/SelectContent.svelte b/src/lib/bits/select/components/SelectContent.svelte
@@ -39,6 +39,7 @@
 		use:melt={builder}
 		{...$$restProps}
 		on:m-pointerleave={dispatch}
+		on:keydown
 	>
 		<slot {builder} />
 	</div>
@@ -50,6 +51,7 @@
 		use:melt={builder}
 		{...$$restProps}
 		on:m-pointerleave={dispatch}
+		on:keydown
 	>
 		<slot {builder} />
 	</div>
@@ -60,6 +62,7 @@
 		use:melt={builder}
 		{...$$restProps}
 		on:m-pointerleave={dispatch}
+		on:keydown
 	>
 		<slot {builder} />
 	</div>
@@ -70,12 +73,13 @@
 		use:melt={builder}
 		{...$$restProps}
 		on:m-pointerleave={dispatch}
+		on:keydown
 	>
 		<slot {builder} />
 	</div>
 {:else if $open}
 	{@const builder = $menu}
-	<div use:melt={builder} {...$$restProps} on:m-pointerleave={dispatch}>
+	<div use:melt={builder} {...$$restProps} on:m-pointerleave={dispatch} on:keydown>
 		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/SelectItem.svelte b/src/lib/bits/select/components/SelectItem.svelte
@@ -23,7 +23,16 @@
 	<slot builder={$option({ value, disabled, label })} />
 {:else}
 	{@const builder = $option({ value, disabled, label })}
-	<div use:melt={builder} {...$$restProps} on:m-click={dispatch} on:m-pointermove={dispatch}>
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		on:m-click={dispatch}
+		on:m-pointermove={dispatch}
+		on:focusin
+		on:keydown
+		on:focusout
+		on:pointerleave
+	>
 		<slot {builder}>
 			{label ? label : value}
 		</slot>

diff --git a/src/lib/bits/select/types.ts b/src/lib/bits/select/types.ts
@@ -8,7 +8,12 @@ import type {
 	Transition,
 	TransitionProps
 } from "$lib/internal/index.js";
-import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+import type {
+	EventHandler,
+	HTMLAttributes,
+	HTMLButtonAttributes,
+	HTMLInputAttributes
+} from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
 
 type Props = Expand<
@@ -51,6 +56,10 @@ type ArrowProps = Expand<
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
 	pointermove: CustomEventHandler<PointerEvent, T>;
+	focusin: EventHandler<FocusEvent, T>;
+	keydown: EventHandler<KeyboardEvent, T>;
+	focusout: EventHandler<FocusEvent, T>;
+	pointerleave: EventHandler<PointerEvent, T>;
 };
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
@@ -63,6 +72,7 @@ type LabelEvents<T extends Element = HTMLSpanElement> = {
 };
 type ContentEvents<T extends Element = HTMLDivElement> = {
 	pointerleave: CustomEventHandler<PointerEvent, T>;
+	keydown: EventHandler<KeyboardEvent, T>;
 };
 
 export type {