From bc0560c75a04bc63a898e76d447130424bccec31 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Thu, 22 Feb 2024 15:04:11 -0500 Subject: [PATCH] fix: update melt & select/combo docs (#344) --- .changeset/quiet-starfishes-flash.md | 5 +++++ .changeset/sweet-forks-melt.md | 5 +++++ package.json | 2 +- pnpm-lock.yaml | 14 +++++++------- src/content/api-reference/combobox.ts | 4 ++++ src/content/api-reference/select.ts | 4 ++++ src/tests/combobox/Combobox.spec.ts | 3 +++ src/tests/popover/Popover.spec.ts | 4 ++++ src/tests/select/Select.spec.ts | 3 +++ 9 files changed, 36 insertions(+), 8 deletions(-) create mode 100644 .changeset/quiet-starfishes-flash.md create mode 100644 .changeset/sweet-forks-melt.md diff --git a/.changeset/quiet-starfishes-flash.md b/.changeset/quiet-starfishes-flash.md new file mode 100644 index 000000000..b859ce18c --- /dev/null +++ b/.changeset/quiet-starfishes-flash.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +Floating/Modal Components: improve handling of interact outside events diff --git a/.changeset/sweet-forks-melt.md b/.changeset/sweet-forks-melt.md new file mode 100644 index 000000000..2e041825b --- /dev/null +++ b/.changeset/sweet-forks-melt.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +Dialogs: Fix bug where dragging outside of dialog would close it diff --git a/package.json b/package.json index 54b31ac83..55c4c5769 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "type": "module", "dependencies": { "@internationalized/date": "^3.5.1", - "@melt-ui/svelte": "0.71.2", + "@melt-ui/svelte": "0.74.2", "nanoid": "^5.0.5" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df876a2f7..eb4834448 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ dependencies: specifier: ^3.5.1 version: 3.5.1 '@melt-ui/svelte': - specifier: 0.71.2 - version: 0.71.2(svelte@4.2.9) + specifier: 0.74.2 + version: 0.74.2(svelte@4.2.9) nanoid: specifier: ^5.0.5 version: 5.0.5 @@ -24,7 +24,7 @@ devDependencies: version: 0.16.5(svelte@4.2.9) '@melt-ui/pp': specifier: ^0.3.0 - version: 0.3.0(@melt-ui/svelte@0.71.2)(svelte@4.2.9) + version: 0.3.0(@melt-ui/svelte@0.74.2)(svelte@4.2.9) '@playwright/test': specifier: ^1.28.1 version: 1.36.2 @@ -1087,21 +1087,21 @@ packages: - supports-color dev: true - /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.71.2)(svelte@4.2.9): + /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.74.2)(svelte@4.2.9): resolution: {integrity: sha512-b07Bdh8l2KcwKVCXOY+SoBw1dk9eWvQfMSi6SoacpRVyVmmfpi0kV4oGt3HYF0tUCB3sEmVicxse50ZzZxEzEA==} engines: {pnpm: '>=8.6.3'} peerDependencies: '@melt-ui/svelte': '>= 0.29.0' svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1 dependencies: - '@melt-ui/svelte': 0.71.2(svelte@4.2.9) + '@melt-ui/svelte': 0.74.2(svelte@4.2.9) estree-walker: 3.0.3 magic-string: 0.30.5 svelte: 4.2.9 dev: true - /@melt-ui/svelte@0.71.2(svelte@4.2.9): - resolution: {integrity: sha512-GDUErhAphEoEOLpcBjQ84BgzRR6M3344fQE4QYFffwT7aedWak7CvNsECgeig1Y5xvfDmeEaFnGlOQXIBucJYw==} + /@melt-ui/svelte@0.74.2(svelte@4.2.9): + resolution: {integrity: sha512-bIfZakPK4h6mOeoeqFnpksUGxkGp5JO2xtfhv/eXjG2rTogsSeVZRPe8eTtE7HoCbokP1+mVM9LqWxipsYTjUA==} peerDependencies: svelte: '>=3 <5' dependencies: diff --git a/src/content/api-reference/combobox.ts b/src/content/api-reference/combobox.ts index 11dee7584..6caf8db4f 100644 --- a/src/content/api-reference/combobox.ts +++ b/src/content/api-reference/combobox.ts @@ -161,6 +161,10 @@ export const item: APISchema = { name: "disabled", description: "Present when the item is disabled.", }, + { + name: "highlighted", + description: "Present when the item is highlighted, via keyboard navigation or hover.", + }, { name: "combobox-item", description: "Present on the item element.", diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts index 1b0690a42..23c770605 100644 --- a/src/content/api-reference/select.ts +++ b/src/content/api-reference/select.ts @@ -187,6 +187,10 @@ export const item: APISchema = { value: enums("selected", "hovered"), isEnum: true, }, + { + name: "highlighted", + description: "Present when the item is highlighted, via keyboard navigation or hover.", + }, { name: "disabled", description: "Present when the item is disabled.", diff --git a/src/tests/combobox/Combobox.spec.ts b/src/tests/combobox/Combobox.spec.ts index 4fd777396..e08d85460 100644 --- a/src/tests/combobox/Combobox.spec.ts +++ b/src/tests/combobox/Combobox.spec.ts @@ -6,6 +6,7 @@ import ComboboxTest from "./ComboboxTest.svelte"; import type { Item } from "./ComboboxTest.svelte"; import { getTestKbd } from "../utils.js"; import type { Combobox } from "$lib"; +import { sleep } from "$lib/internal"; const kbd = getTestKbd(); @@ -133,7 +134,9 @@ describe("Combobox", () => { it("closes on outside click", async () => { const { user, queryByTestId, getByTestId } = await open(); const outside = getByTestId("outside"); + await sleep(100); await user.click(outside); + await sleep(100); expect(queryByTestId("content")).toBeNull(); }); diff --git a/src/tests/popover/Popover.spec.ts b/src/tests/popover/Popover.spec.ts index bca1e94e8..9c2ae82df 100644 --- a/src/tests/popover/Popover.spec.ts +++ b/src/tests/popover/Popover.spec.ts @@ -5,6 +5,7 @@ import { describe, it } from "vitest"; import { getTestKbd } from "../utils.js"; import PopoverTest from "./PopoverTest.svelte"; import type { Popover } from "$lib"; +import { sleep } from "$lib/internal/sleep.js"; const kbd = getTestKbd(); @@ -67,7 +68,10 @@ describe("Popover", () => { it("closes on outside click", async () => { const { user, queryByTestId, getByTestId } = await open(); const outside = getByTestId("outside"); + await sleep(100); await user.click(outside); + await sleep(100); + expect(queryByTestId("content")).toBeNull(); }); diff --git a/src/tests/select/Select.spec.ts b/src/tests/select/Select.spec.ts index aa340d440..66f3c8fe9 100644 --- a/src/tests/select/Select.spec.ts +++ b/src/tests/select/Select.spec.ts @@ -6,6 +6,7 @@ import SelectTest from "./SelectTest.svelte"; import type { Item } from "./SelectTest.svelte"; import { getTestKbd } from "../utils.js"; import type { Select } from "$lib"; +import { sleep } from "$lib/internal"; const kbd = getTestKbd(); @@ -130,7 +131,9 @@ describe("Select", () => { it("closes on outside click", async () => { const { user, queryByTestId, getByTestId } = await open(); const outside = getByTestId("outside"); + await sleep(100); await user.click(outside); + await sleep(100); expect(queryByTestId("content")).toBeNull(); });