Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Oct 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/mighty-chefs-cheer.md
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions .changeset/weak-ducks-brush.md
Original file line number Diff line number Diff line change
@@ -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`.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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>",
Expand Down
2 changes: 1 addition & 1 deletion packages/bits-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -13,7 +13,7 @@
...restProps
}: ComboboxInputProps = $props();

const inputState = useListboxInput({
const inputState = useSelectInput({
id: box.with(() => id),
ref: box.with(
() => ref,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -12,7 +12,7 @@
...restProps
}: ComboboxTriggerProps = $props();

const triggerState = useListboxComboTrigger({
const triggerState = useSelectComboTrigger({
id: box.with(() => id),
ref: box.with(
() => ref,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -19,6 +19,7 @@
required = false,
controlledOpen = false,
controlledValue = false,
items = [],
children,
}: ComboboxRootProps = $props();

Expand All @@ -31,7 +32,7 @@
}
}

useListboxRoot({
const rootState = useSelectRoot({
type,
value: box.with(
() => value!,
Expand Down Expand Up @@ -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}
16 changes: 8 additions & 8 deletions packages/bits-ui/src/lib/bits/combobox/exports.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
62 changes: 31 additions & 31 deletions packages/bits-ui/src/lib/bits/combobox/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
/**
Expand Down
1 change: 0 additions & 1 deletion packages/bits-ui/src/lib/bits/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

Loading