next: rename Listbox to Select and drop old select (#769)

.changeset/mighty-chefs-cheer.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Breaking: replace existing `Select` implementation with `Listbox` and remove standalone `Listbox` as `Select` now has the exact functionality

.changeset/weak-ducks-brush.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Add support for typeahead select when the trigger is focused and content is closed via the `items` prop on `Select.Root`.

package.json

@@ -12,7 +12,9 @@
 		"lint": "prettier --check . && eslint .",
 		"lint:fix": "eslint --fix .",
 		"test": "pnpm -F \"./packages/**\" --parallel --reporter append-only --color test",
-		"test:components": "pnpm -F tests test"
+		"test:components": "pnpm -F tests test",
+		"test:utils": "pnpm -F bits-ui test"
+
 	},
 	"keywords": [],
 	"author": "Hunter Johnston <https://github.com/huntabyte>",

packages/bits-ui/package.json

@@ -52,7 +52,7 @@
 		"@internationalized/date": "^3.5.6",
 		"esm-env": "^1.0.0",
 		"runed": "^0.15.2",
-		"svelte-toolbelt": "^0.4.1"
+		"svelte-toolbelt": "^0.4.4"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0-next.1"

packages/bits-ui/src/lib/bits/combobox/components/combobox-input.svelte

@@ -3,7 +3,7 @@
 	import type { ComboboxInputProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
-	import { useListboxInput } from "$lib/bits/listbox/listbox.svelte.js";
+	import { useSelectInput } from "$lib/bits/select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -13,7 +13,7 @@
 		...restProps
 	}: ComboboxInputProps = $props();
 
-	const inputState = useListboxInput({
+	const inputState = useSelectInput({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

packages/bits-ui/src/lib/bits/combobox/components/combobox-trigger.svelte

@@ -2,7 +2,7 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ComboboxTriggerProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
-	import { useListboxComboTrigger } from "$lib/bits/listbox/listbox.svelte.js";
+	import { useSelectComboTrigger } from "$lib/bits/select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -12,7 +12,7 @@
 		...restProps
 	}: ComboboxTriggerProps = $props();
 
-	const triggerState = useListboxComboTrigger({
+	const triggerState = useSelectComboTrigger({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte

@@ -3,8 +3,8 @@
 	import type { ComboboxRootProps } from "../types.js";
 	import { noop } from "$lib/internal/noop.js";
 	import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte";
-	import { useListboxRoot } from "$lib/bits/listbox/listbox.svelte.js";
-	import ListboxHiddenInput from "$lib/bits/listbox/components/listbox-hidden-input.svelte";
+	import { useSelectRoot } from "$lib/bits/select/select.svelte.js";
+	import ListboxHiddenInput from "$lib/bits/select/components/select-hidden-input.svelte";
 
 	let {
 		value = $bindable(),
@@ -19,6 +19,7 @@
 		required = false,
 		controlledOpen = false,
 		controlledValue = false,
+		items = [],
 		children,
 	}: ComboboxRootProps = $props();
 
@@ -31,7 +32,7 @@
 		}
 	}
 
-	useListboxRoot({
+	const rootState = useSelectRoot({
 		type,
 		value: box.with(
 			() => value!,
@@ -61,21 +62,22 @@
 		scrollAlignment: box.with(() => scrollAlignment),
 		name: box.with(() => name),
 		isCombobox: true,
+		items: box.with(() => items),
 	});
 </script>
 
 <FloatingLayer>
 	{@render children?.()}
 </FloatingLayer>
 
-{#if Array.isArray(value)}
-	{#if value.length === 0}
+{#if Array.isArray(rootState.value.current)}
+	{#if rootState.value.current.length === 0}
 		<ListboxHiddenInput value="" />
 	{:else}
-		{#each value as item}
+		{#each rootState.value.current as item}
 			<ListboxHiddenInput value={item} />
 		{/each}
 	{/if}
 {:else}
-	<ListboxHiddenInput {value} />
+	<ListboxHiddenInput bind:value={rootState.value.current as string} />
 {/if}

packages/bits-ui/src/lib/bits/combobox/exports.ts

@@ -4,14 +4,14 @@ export { default as Separator } from "../separator/components/separator.svelte";
 export { default as Arrow } from "$lib/bits/utilities/arrow/arrow.svelte";
 export { default as Trigger } from "./components/combobox-trigger.svelte";
 export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
-export { default as Content } from "$lib/bits/listbox/components/listbox-content.svelte";
-export { default as ContentStatic } from "$lib/bits/listbox/components/listbox-content-static.svelte";
-export { default as Item } from "$lib/bits/listbox/components/listbox-item.svelte";
-export { default as Group } from "$lib/bits/listbox/components/listbox-group.svelte";
-export { default as GroupHeading } from "$lib/bits/listbox/components/listbox-group-heading.svelte";
-export { default as Viewport } from "$lib/bits/listbox/components/listbox-viewport.svelte";
-export { default as ScrollDownButton } from "$lib/bits/listbox/components/listbox-scroll-down-button.svelte";
-export { default as ScrollUpButton } from "$lib/bits/listbox/components/listbox-scroll-up-button.svelte";
+export { default as Content } from "$lib/bits/select/components/select-content.svelte";
+export { default as ContentStatic } from "$lib/bits/select/components/select-content-static.svelte";
+export { default as Item } from "$lib/bits/select/components/select-item.svelte";
+export { default as Group } from "$lib/bits/select/components/select-group.svelte";
+export { default as GroupHeading } from "$lib/bits/select/components/select-group-heading.svelte";
+export { default as Viewport } from "$lib/bits/select/components/select-viewport.svelte";
+export { default as ScrollDownButton } from "$lib/bits/select/components/select-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "$lib/bits/select/components/select-scroll-up-button.svelte";
 
 export type {
 	ComboboxRootProps as RootProps,

packages/bits-ui/src/lib/bits/combobox/types.ts

@@ -2,37 +2,37 @@ import type { BitsPrimitiveInputAttributes } from "$lib/shared/attributes.js";
 import type { WithChild, Without } from "$lib/internal/types.js";
 
 export type {
-	ListboxBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML,
-	ListboxContentProps as ComboboxContentProps,
-	ListboxContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML,
-	ListboxContentStaticProps as ComboboxContentStaticProps,
-	ListboxContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML,
-	ListboxItemProps as ComboboxItemProps,
-	ListboxItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML,
-	ListboxItemSnippetProps as ComboboxItemSnippetProps,
-	ListboxMultipleRootProps as ComboboxMultipleRootProps,
-	ListboxMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML,
-	ListboxRootProps as ComboboxRootProps,
-	ListboxRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML,
-	ListboxSingleRootProps as ComboboxSingleRootProps,
-	ListboxSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML,
-	ListboxTriggerProps as ComboboxTriggerProps,
-	ListboxTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML,
-	ListboxGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML,
-	ListboxGroupProps as ComboboxGroupProps,
-	ListboxGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML,
-	ListboxGroupHeadingProps as ComboboxGroupHeadingProps,
-	ListboxViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML,
-	ListboxViewportProps as ComboboxViewportProps,
-	ListboxScrollDownButtonProps as ComboboxScrollDownButtonProps,
-	ListboxScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML,
-	ListboxScrollUpButtonProps as ComboboxScrollUpButtonProps,
-	ListboxScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML,
-	ListboxArrowProps as ComboboxArrowProps,
-	ListboxArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML,
-	ListboxPortalProps as ComboboxPortalProps,
-	ListboxPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML,
-} from "$lib/bits/listbox/types.js";
+	SelectBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML,
+	SelectContentProps as ComboboxContentProps,
+	SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML,
+	SelectContentStaticProps as ComboboxContentStaticProps,
+	SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML,
+	SelectItemProps as ComboboxItemProps,
+	SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML,
+	SelectItemSnippetProps as ComboboxItemSnippetProps,
+	SelectMultipleRootProps as ComboboxMultipleRootProps,
+	SelectMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML,
+	SelectRootProps as ComboboxRootProps,
+	SelectRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML,
+	SelectSingleRootProps as ComboboxSingleRootProps,
+	SelectSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML,
+	SelectTriggerProps as ComboboxTriggerProps,
+	SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML,
+	SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML,
+	SelectGroupProps as ComboboxGroupProps,
+	SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML,
+	SelectGroupHeadingProps as ComboboxGroupHeadingProps,
+	SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML,
+	SelectViewportProps as ComboboxViewportProps,
+	SelectScrollDownButtonProps as ComboboxScrollDownButtonProps,
+	SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML,
+	SelectScrollUpButtonProps as ComboboxScrollUpButtonProps,
+	SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML,
+	SelectArrowProps as ComboboxArrowProps,
+	SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML,
+	SelectPortalProps as ComboboxPortalProps,
+	SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML,
+} from "$lib/bits/select/types.js";
 
 export type ComboboxInputPropsWithoutHTML = WithChild<{
 	/**

packages/bits-ui/src/lib/bits/index.ts

@@ -17,7 +17,6 @@ export { Dialog } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
 export { Label } from "./label/index.js";
 export { LinkPreview } from "./link-preview/index.js";
-export { Listbox } from "./listbox/index.js";
 export { Menubar } from "./menubar/index.js";
 export { NavigationMenu } from "./navigation-menu/index.js";
 export { Pagination } from "./pagination/index.js";