From 8189bde017012a5dbdbe45435d33810dfe427020 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Wed, 25 Oct 2023 18:48:03 -0400 Subject: [PATCH] Update Melt UI version (#138) --- .changeset/wet-poems-drum.md | 5 ++++ .eslintrc.cjs | 1 + .../{render-delegation.md => delegation.md} | 0 package.json | 4 ++-- pnpm-lock.yaml | 24 ++++++++++++------- .../navigation/sidebar-nav-main-items.svelte | 2 +- src/components/site-header.svelte | 2 +- src/config/navigation.ts | 4 ++-- src/content/api-reference/dropdown-menu.ts | 3 ++- src/content/api-reference/helpers.ts | 3 +-- src/lib/bits/alert-dialog/types.ts | 2 +- .../components/ContextMenu.svelte | 9 +++++++ src/lib/bits/dialog/components/Dialog.svelte | 6 +++++ .../components/DropdownMenu.svelte | 9 +++++++ .../menubar/components/MenubarMenu.svelte | 9 +++++++ .../bits/popover/components/Popover.svelte | 6 +++++ src/lib/bits/slider/types.ts | 4 ++-- .../bits/tooltip/components/Tooltip.svelte | 6 +++++ src/routes/+layout.svelte | 4 ++-- 19 files changed, 80 insertions(+), 23 deletions(-) create mode 100644 .changeset/wet-poems-drum.md rename content/{render-delegation.md => delegation.md} (100%) diff --git a/.changeset/wet-poems-drum.md b/.changeset/wet-poems-drum.md new file mode 100644 index 000000000..47a6f4e12 --- /dev/null +++ b/.changeset/wet-poems-drum.md @@ -0,0 +1,5 @@ +--- +"bits-ui": minor +--- + +Update Melt UI version & include new `openFocus` & `closeFocus` props diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 85f15d4a8..aed3929af 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -50,6 +50,7 @@ module.exports = { "@typescript-eslint/no-unused-vars": [ "warn", { + argsIgnorePattern: "^_", varsIgnorePattern: "^\\$\\$(Props|Events|Slots|Generic)$" } ] diff --git a/content/render-delegation.md b/content/delegation.md similarity index 100% rename from content/render-delegation.md rename to content/delegation.md diff --git a/package.json b/package.json index 74afe988d..5fdeb14e1 100644 --- a/package.json +++ b/package.json @@ -85,8 +85,8 @@ "types": "./dist/index.d.ts", "type": "module", "dependencies": { - "@melt-ui/svelte": "0.55.3", - "nanoid": "^4.0.2" + "@melt-ui/svelte": "0.56.0", + "nanoid": "^5.0.2" }, "peerDependencies": { "svelte": "^4.0.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e4e3f876..08973d2f7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,11 +6,11 @@ settings: dependencies: '@melt-ui/svelte': - specifier: 0.55.3 - version: 0.55.3(svelte@4.2.2) + specifier: 0.56.0 + version: 0.56.0(svelte@4.2.2) nanoid: - specifier: ^4.0.2 - version: 4.0.2 + specifier: ^5.0.2 + version: 5.0.2 devDependencies: '@changesets/cli': @@ -21,7 +21,7 @@ devDependencies: version: 0.16.5(svelte@4.2.2) '@melt-ui/pp': specifier: ^0.1.2 - version: 0.1.2(@melt-ui/svelte@0.55.3)(svelte@4.2.2) + version: 0.1.2(@melt-ui/svelte@0.56.0)(svelte@4.2.2) '@playwright/test': specifier: ^1.28.1 version: 1.36.2 @@ -1013,19 +1013,19 @@ packages: - supports-color dev: true - /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.55.3)(svelte@4.2.2): + /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.56.0)(svelte@4.2.2): resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==} engines: {pnpm: '>=8.6.3'} peerDependencies: '@melt-ui/svelte': '>= 0.29.0' svelte: ^3.55.0 || ^4.0.0 dependencies: - '@melt-ui/svelte': 0.55.3(svelte@4.2.2) + '@melt-ui/svelte': 0.56.0(svelte@4.2.2) svelte: 4.2.2 dev: true - /@melt-ui/svelte@0.55.3(svelte@4.2.2): - resolution: {integrity: sha512-KT9/14LRk5gaUgd2aywUmCpm3jq4RCTIyIvhktKCkP5v/OSsyftkLti6j9uySWNuNeUR4VGBChkT8/sR/bOUyw==} + /@melt-ui/svelte@0.56.0(svelte@4.2.2): + resolution: {integrity: sha512-7T/hGDaeMzHG+C53J1Lanlp9PUe8Mr926LgLvdmQewfi+2n/50bsA9NO/Bk2jZWHLlwRKfyn1th+8eWnmCREQw==} peerDependencies: svelte: '>=3 <5' dependencies: @@ -4962,6 +4962,12 @@ packages: engines: {node: ^14 || ^16 || >=18} hasBin: true + /nanoid@5.0.2: + resolution: {integrity: sha512-2ustYUX1R2rL/Br5B/FMhi8d5/QzvkJ912rBYxskcpu0myTHzSZfTr1LAS2Sm7jxRUObRrSBFoyzwAhL49aVSg==} + engines: {node: ^18 || >=20} + hasBin: true + dev: false + /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte index da1f7e6b2..21a0ee034 100644 --- a/src/components/navigation/sidebar-nav-main-items.svelte +++ b/src/components/navigation/sidebar-nav-main-items.svelte @@ -9,7 +9,7 @@ const iconMap = { Introduction: BookOpen, "Getting Started": RocketLaunch, - "Render Delegation": Code + Delegation: Code } as const; const iconMapKeys = Object.keys(iconMap) as (keyof typeof iconMap)[]; diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte index 1897499c2..a3ebb5198 100644 --- a/src/components/site-header.svelte +++ b/src/components/site-header.svelte @@ -6,7 +6,7 @@
-
+
diff --git a/src/config/navigation.ts b/src/config/navigation.ts index 335e96980..d17b598a4 100644 --- a/src/config/navigation.ts +++ b/src/config/navigation.ts @@ -41,8 +41,8 @@ export const navigation: Navigation = { items: [] }, { - title: "Render Delegation", - href: "/docs/render-delegation", + title: "Delegation", + href: "/docs/delegation", items: [] } ] diff --git a/src/content/api-reference/dropdown-menu.ts b/src/content/api-reference/dropdown-menu.ts index 46efde07a..f7871f10f 100644 --- a/src/content/api-reference/dropdown-menu.ts +++ b/src/content/api-reference/dropdown-menu.ts @@ -101,7 +101,8 @@ export const item: APISchema = { { name: "href", type: "string", - description: "An optional prop that when passed converts the dropdown item into an anchor tag." + description: + "An optional prop that when passed converts the dropdown item into an anchor tag." } ], dataAttributes: [ diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts index 848619964..c6a4b99bc 100644 --- a/src/content/api-reference/helpers.ts +++ b/src/content/api-reference/helpers.ts @@ -2,6 +2,5 @@ export const asChild = { name: "asChild", type: "boolean", default: "false", - description: - "Whether to use [render delegation](/docs/render-delegation) with this component or not." + description: "Whether to use [render delegation](/docs/delegation) with this component or not." }; diff --git a/src/lib/bits/alert-dialog/types.ts b/src/lib/bits/alert-dialog/types.ts index 170b57544..9587686a9 100644 --- a/src/lib/bits/alert-dialog/types.ts +++ b/src/lib/bits/alert-dialog/types.ts @@ -14,7 +14,7 @@ import type { CustomEventHandler } from "$lib/index.js"; type Props = Expand< OmitOpen> & { - open?: boolean & {}; + open?: boolean; onOpenChange?: OnChangeFn; } >; diff --git a/src/lib/bits/context-menu/components/ContextMenu.svelte b/src/lib/bits/context-menu/components/ContextMenu.svelte index b198510eb..8ac2dcb9b 100644 --- a/src/lib/bits/context-menu/components/ContextMenu.svelte +++ b/src/lib/bits/context-menu/components/ContextMenu.svelte @@ -14,6 +14,9 @@ export let positioning: $$Props["positioning"] = undefined; export let loop: $$Props["loop"] = undefined; export let dir: $$Props["dir"] = undefined; + export let typeahead: $$Props["typeahead"] = undefined; + export let closeFocus: $$Props["closeFocus"] = undefined; + export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined; const { states: { open: localOpen }, @@ -29,6 +32,9 @@ positioning, loop, dir, + typeahead, + disableFocusFirstItem, + closeFocus, onOpenChange: ({ next }) => { if (open !== next) { onOpenChange?.(next); @@ -49,6 +55,9 @@ $: updateOption("positioning", positioning); $: updateOption("loop", loop); $: updateOption("dir", dir); + $: updateOption("closeFocus", closeFocus); + $: updateOption("disableFocusFirstItem", disableFocusFirstItem); + $: updateOption("typeahead", typeahead); diff --git a/src/lib/bits/dialog/components/Dialog.svelte b/src/lib/bits/dialog/components/Dialog.svelte index b5f1e61cc..f3201fef2 100644 --- a/src/lib/bits/dialog/components/Dialog.svelte +++ b/src/lib/bits/dialog/components/Dialog.svelte @@ -14,6 +14,8 @@ export let forceVisible: $$Props["forceVisible"] = true; export let open: $$Props["open"] = undefined; export let onOpenChange: $$Props["onOpenChange"] = undefined; + export let openFocus: $$Props["openFocus"] = undefined; + export let closeFocus: $$Props["closeFocus"] = undefined; const transitionTimes = writable({}); const tOpen = writable(open); @@ -30,6 +32,8 @@ defaultOpen: open, transitionTimes, tOpen, + openFocus, + closeFocus, onOpenChange: ({ next }) => { if (!isBrowser) { return next; @@ -72,6 +76,8 @@ $: updateOption("closeOnOutsideClick", closeOnOutsideClick); $: updateOption("portal", portal); $: updateOption("forceVisible", forceVisible); + $: updateOption("openFocus", openFocus); + $: updateOption("closeFocus", closeFocus); diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte index c78fb7264..8b1529e79 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte @@ -14,6 +14,9 @@ export let positioning: $$Props["positioning"] = undefined; export let loop: $$Props["loop"] = undefined; export let dir: $$Props["dir"] = undefined; + export let typeahead: $$Props["typeahead"] = undefined; + export let closeFocus: $$Props["closeFocus"] = undefined; + export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined; const { states: { open: localOpen }, @@ -29,6 +32,9 @@ positioning, loop, dir, + typeahead, + closeFocus, + disableFocusFirstItem, onOpenChange: ({ next }) => { if (open !== next) { onOpenChange?.(next); @@ -48,6 +54,9 @@ $: updateOption("positioning", positioning); $: updateOption("loop", loop); $: updateOption("dir", dir); + $: updateOption("closeFocus", closeFocus); + $: updateOption("disableFocusFirstItem", disableFocusFirstItem); + $: updateOption("typeahead", typeahead); diff --git a/src/lib/bits/menubar/components/MenubarMenu.svelte b/src/lib/bits/menubar/components/MenubarMenu.svelte index a577678d1..1a3940a39 100644 --- a/src/lib/bits/menubar/components/MenubarMenu.svelte +++ b/src/lib/bits/menubar/components/MenubarMenu.svelte @@ -13,6 +13,9 @@ export let positioning: $$Props["positioning"] = undefined; export let loop: $$Props["loop"] = undefined; export let dir: $$Props["dir"] = undefined; + export let typeahead: $$Props["typeahead"] = undefined; + export let closeFocus: $$Props["closeFocus"] = undefined; + export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined; const { states: { open: localOpen }, @@ -26,6 +29,9 @@ positioning, loop, dir, + typeahead, + closeFocus, + disableFocusFirstItem, onOpenChange: ({ next }) => { if (open !== next) { onOpenChange?.(next); @@ -44,6 +50,9 @@ $: updateOption("positioning", positioning); $: updateOption("loop", loop); $: updateOption("dir", dir); + $: updateOption("closeFocus", closeFocus); + $: updateOption("disableFocusFirstItem", disableFocusFirstItem); + $: updateOption("typeahead", typeahead); diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/Popover.svelte index bd6dcce79..c15308c9d 100644 --- a/src/lib/bits/popover/components/Popover.svelte +++ b/src/lib/bits/popover/components/Popover.svelte @@ -12,6 +12,8 @@ export let portal: $$Props["portal"] = undefined; export let open: $$Props["open"] = undefined; export let onOpenChange: $$Props["onOpenChange"] = undefined; + export let openFocus: $$Props["openFocus"] = undefined; + export let closeFocus: $$Props["closeFocus"] = undefined; const { updateOption, @@ -25,6 +27,8 @@ preventScroll, portal, defaultOpen: open, + openFocus, + closeFocus, onOpenChange: ({ next }) => { if (open !== next) { onOpenChange?.(next); @@ -42,6 +46,8 @@ $: updateOption("closeOnOutsideClick", closeOnOutsideClick); $: updateOption("preventScroll", preventScroll); $: updateOption("portal", portal); + $: updateOption("openFocus", openFocus); + $: updateOption("closeFocus", closeFocus); diff --git a/src/lib/bits/slider/types.ts b/src/lib/bits/slider/types.ts index 0d90a388d..660760c19 100644 --- a/src/lib/bits/slider/types.ts +++ b/src/lib/bits/slider/types.ts @@ -11,8 +11,8 @@ import type { HTMLInputAttributes } from "svelte/elements"; type Props = Expand< OmitValue & { - value?: CreateSliderProps["defaultValue"] & {}; - onValueChange?: OnChangeFn; + value?: number[]; + onValueChange?: OnChangeFn; } & AsChild > & HTMLSpanAttributes; diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/Tooltip.svelte index e8f5f88ce..dc07d100b 100644 --- a/src/lib/bits/tooltip/components/Tooltip.svelte +++ b/src/lib/bits/tooltip/components/Tooltip.svelte @@ -13,6 +13,8 @@ export let open: $$Props["open"] = undefined; export let onOpenChange: $$Props["onOpenChange"] = undefined; export let forceVisible: $$Props["forceVisible"] = true; + export let disableHoverableContent: $$Props["disableHoverableContent"] = undefined; + export let group: $$Props["group"] = undefined; const { states: { open: localOpen }, @@ -27,6 +29,8 @@ closeDelay, forceVisible, defaultOpen: open, + disableHoverableContent, + group, onOpenChange: ({ next }) => { if (open !== next) { onOpenChange?.(next); @@ -45,6 +49,8 @@ $: updateOption("openDelay", openDelay); $: updateOption("closeDelay", closeDelay); $: updateOption("forceVisible", forceVisible); + $: updateOption("group", group); + $: updateOption("disableHoverableContent", disableHoverableContent); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 64dc2f739..d3c8c7859 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -13,8 +13,8 @@
-
-
+
+