Update Melt UI version (#138)

huntabyte · Oct 25, 2023 · 8189bde · 8189bde
1 parent aa34a0b
commit 8189bde
Show file tree

Hide file tree

Showing 19 changed files with 80 additions and 23 deletions.
diff --git a/.changeset/wet-poems-drum.md 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
@@ -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 → content/delegation.md b/content/render-delegation.md → content/delegation.md
diff --git 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
diff --git 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
@@ -6,7 +6,7 @@
 </script>
 
 <header class="bg-background/75 backdrop-blur border-b border-border -mb-px sticky top-0 z-50">
-	<div class="mx-auto px-4 sm:px-6 lg:px-8 container">
+	<div class="mx-auto px-4 container">
 		<div class="flex items-center justify-between gap-3 h-16">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />

diff --git 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
@@ -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
@@ -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
@@ -14,7 +14,7 @@ import type { CustomEventHandler } from "$lib/index.js";
 
 type Props = Expand<
 	OmitOpen<Omit<CreateDialogProps, "role">> & {
-		open?: boolean & {};
+		open?: boolean;
 		onOpenChange?: OnChangeFn<boolean>;
 	}
 >;

diff --git 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);
 </script>
 
 <slot />
diff --git 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<TransitionTimes>({});
 	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);
 </script>
 
 <slot />
diff --git 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);
 </script>
 
 <slot />
diff --git 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);
 </script>
 
 <slot />
diff --git 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);
 </script>
 
 <slot />
diff --git 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<CreateSliderProps> & {
-		value?: CreateSliderProps["defaultValue"] & {};
-		onValueChange?: OnChangeFn<CreateSliderProps["defaultValue"]>;
+		value?: number[];
+		onValueChange?: OnChangeFn<number[]>;
 	} & AsChild
 > &
 	HTMLSpanAttributes;

diff --git 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);
 </script>
 
 <slot />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -13,8 +13,8 @@
 
 <SiteHeader />
 <main class="min-h-[calc(100vh-64px)]">
-	<div class="mx-auto px-4 sm:px-6 lg:px-8 container">
-		<div class="lg:grid lg:grid-cols-12 lg:gap-6">
+	<div class="mx-auto px-4 container">
+		<div class="lg:grid lg:grid-cols-12">
 			<div class="lg:col-span-2 border-r border-border">
 				<SidebarNav items={navigation.sidebar} />
 			</div>