update to latest melt version / APIs (#122)

.changeset/dull-rabbits-sip.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+- update to the latest Melt UI version

package.json

@@ -84,7 +84,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.41.3",
+		"@melt-ui/svelte": "0.55.2",
 		"nanoid": "^4.0.2"
 	},
 	"peerDependencies": {

src/lib/bits/select/components/SelectContent.svelte

@@ -38,7 +38,7 @@
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		on:m-keydown={dispatch}
+		on:m-pointerleave={dispatch}
 	>
 		<slot {builder} />
 	</div>
@@ -49,7 +49,7 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		on:m-keydown={dispatch}
+		on:m-pointerleave={dispatch}
 	>
 		<slot {builder} />
 	</div>
@@ -59,7 +59,7 @@
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		on:m-keydown={dispatch}
+		on:m-pointerleave={dispatch}
 	>
 		<slot {builder} />
 	</div>
@@ -69,13 +69,13 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		on:m-keydown={dispatch}
+		on:m-pointerleave={dispatch}
 	>
 		<slot {builder} />
 	</div>
 {:else if $open}
 	{@const builder = $menu}
-	<div use:melt={builder} {...$$restProps} on:m-keydown={dispatch}>
+	<div use:melt={builder} {...$$restProps} on:m-pointerleave={dispatch}>
 		<slot {builder} />
 	</div>
 {/if}

src/lib/bits/select/components/SelectInput.svelte

@@ -5,7 +5,7 @@
 
 	type $$Props = InputProps;
 	export let asChild = false;
-	const input = ctx.get().elements.input;
+	const input = ctx.get().elements.hiddenInput;
 </script>
 
 {#if asChild}

src/lib/bits/select/components/SelectItem.svelte

@@ -23,16 +23,7 @@
 	<slot builder={$option({ value, disabled, label })} />
 {:else}
 	{@const builder = $option({ value, disabled, label })}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
+	<div use:melt={builder} {...$$restProps} on:m-click={dispatch} on:m-pointermove={dispatch}>
 		<slot {builder}>
 			{label ? label : value}
 		</slot>

src/lib/bits/select/ctx.ts

@@ -67,6 +67,6 @@ function getItemIndicator() {
 
 function setArrow(size = 8) {
 	const select = get();
-	select.options.arrowSize.set(size);
+	select.options.arrowSize?.set(size);
 	return select;
 }

src/lib/bits/select/index.ts

@@ -6,7 +6,7 @@ import Input from "./components/SelectInput.svelte";
 import Item from "./components/SelectItem.svelte";
 import ItemIndicator from "./components/SelectItemIndicator.svelte";
 import Label from "./components/SelectLabel.svelte";
-import Separator from "./components/SelectSeparator.svelte";
+import Separator from "../separator/components/Separator.svelte";
 import Trigger from "./components/SelectTrigger.svelte";
 import Value from "./components/SelectValue.svelte";
 

src/lib/bits/select/types.ts

@@ -50,11 +50,7 @@ type ArrowProps = Expand<
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	focusin: CustomEventHandler<FocusEvent, T>;
-	focusout: CustomEventHandler<FocusEvent, T>;
-	pointerleave: CustomEventHandler<MouseEvent, T>;
-	pointermove: CustomEventHandler<MouseEvent, T>;
+	pointermove: CustomEventHandler<PointerEvent, T>;
 };
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
@@ -66,7 +62,7 @@ type LabelEvents<T extends Element = HTMLSpanElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
 };
 type ContentEvents<T extends Element = HTMLDivElement> = {
-	keydown: CustomEventHandler<KeyboardEvent, T>;
+	pointerleave: CustomEventHandler<PointerEvent, T>;
 };
 
 export type {