diff --git a/CHANGELOG.md b/CHANGELOG.md index 06a68cd99..43b2cb933 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @huntabyte/primitives +## 0.9.8 + +### Patch Changes + +- Update melt ([#186](https://github.com/huntabyte/bits-ui/pull/186)) + ## 0.9.7 ### Patch Changes diff --git a/content/delegation.md b/content/delegation.md index 80744084e..5fca92f98 100644 --- a/content/delegation.md +++ b/content/delegation.md @@ -55,15 +55,15 @@ Let's create a custom `` component that could be used with this patter ```svelte - + ``` -We're using the `builderActions` and `builderAttrs` helpers to apply the actions and attributes to the button. We're also using the `Builder` type to type the `builders` prop we'd receive from whatever component we're using this with. We use an array here to cover the case where we may want to apply multiple builders to the button. The helper functions handle applying all the actions and attributes to the button for us. +We're using the `builderActions` and `getAttrs` helpers to apply the actions and attributes to the button. We're also using the `Builder` type to type the `builders` prop we'd receive from whatever component we're using this with. We use an array here to cover the case where we may want to apply multiple builders to the button. The helper functions handle applying all the actions and attributes to the button for us. If you do plan to pass multiple builders, the order in which you pass them matters. Certain actions/attributes may override others, so be sure to test your implementation to ensure it's working as expected. diff --git a/package.json b/package.json index c4cc31cbe..12368847a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bits-ui", - "version": "0.9.7", + "version": "0.9.8", "license": "MIT", "repository": "github:huntabyte/bits-ui", "scripts": { diff --git a/src/components/index.ts b/src/components/index.ts index ae88d007f..5baaef0ce 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -13,3 +13,4 @@ export { default as Code } from "./markdown/code.svelte"; export { default as APISection } from "./api-section.svelte"; export { default as ComponentPreview } from "./component-preview.svelte"; export { default as LightSwitch } from "./light-switch.svelte"; +export { default as Metadata } from "./metadata.svelte"; diff --git a/src/components/metadata.svelte b/src/components/metadata.svelte new file mode 100644 index 000000000..ea3def4b8 --- /dev/null +++ b/src/components/metadata.svelte @@ -0,0 +1,15 @@ + + + + {title} + + + + diff --git a/src/config/site.ts b/src/config/site.ts index 8ceadffea..54691ed52 100644 --- a/src/config/site.ts +++ b/src/config/site.ts @@ -1,6 +1,6 @@ export const siteConfig = { - name: "Bit UI", - url: "https://bit-ui.com", + name: "Bits UI", + url: "https://bits-ui.com", description: "Headless components for Svelte built on top of Melt UI.", links: { melt: "https://melt-ui.com", diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index fd2c72b6c..b6a4ceb25 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,7 @@ + diff --git a/src/tests/select/Select.spec.ts b/src/tests/select/Select.spec.ts index 34912ee40..e19c2f081 100644 --- a/src/tests/select/Select.spec.ts +++ b/src/tests/select/Select.spec.ts @@ -88,6 +88,14 @@ describe("Select", () => { expect(input).not.toBeVisible(); }); + it.each([kbd.SPACE, kbd.ENTER])("selects item with the %s key", async (key) => { + const { user, queryByTestId, getByTestId } = await open(); + await user.keyboard(kbd.ARROW_DOWN); + await user.keyboard(key); + await waitFor(() => expect(queryByTestId("content")).toBeNull()); + expect(getByTestId("value")).toHaveTextContent("A"); + }); + it("syncs the name prop to the hidden input", async () => { const { input } = setup({ name: "test" }); expect(input).toHaveAttribute("name", "test");