next: Scroll Area (#618)

NOTICE.txt

@@ -6,20 +6,30 @@ The following is a list of sources from which code was used/modified in this cod
 This codebase contains a modified portion of code from Adobe which can be obtained at:
   * SOURCE:
     * https://www.npmjs.com/package/@react-aria/utils
-  * LICENSE:
+  * LICENSE (Apache 2.0):
     * https://unpkg.com/@react-aria/utils@3.24.1/LICENSE
 
   * SOURCE:
     * https://www.npmjs.com/package/react-stately
-  * LICENSE:
+  * LICENSE (Apache 2.0):
     * https://unpkg.com/react-stately@3.31.1/LICENSE
 
 -------------------------------------------------------------------------------
 
 This codebase contains a modified portion of code from Melt UI which can be obtained at:
   * SOURCE:
     * https://www.npmjs.com/package/@melt-ui/svelte
-  * LICENSE:
+  * LICENSE (MIT):
     * https://unpkg.com/@melt-ui/svelte@0.76.2/LICENSE
 
+-------------------------------------------------------------------------------
+
+This codebase contains a modified portion of code from Radix UI which can be obtained at:
+  * SOURCE:
+    * https://www.npmjs.com/package/@radix-ui/react-scroll-area
+    * https://www.npmjs.com/package/@radix-ui/react-select
+    * https://www.npmjs.com/package/@radix-ui/react-navigation-menu
+  * LICENSE (MIT):
+    * https://github.com/radix-ui/primitives/blob/main/LICENSE
+
 -------------------------------------------------------------------------------

package.json

@@ -26,8 +26,8 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "5.0.0-next.183",
-		"svelte-eslint-parser": "^0.34.1",
+		"svelte": "5.0.0-next.192",
+		"svelte-eslint-parser": "^0.41.0",
 		"wrangler": "^3.44.0"
 	},
 	"type": "module",

packages/bits-ui/package.json

@@ -45,7 +45,7 @@
 		"jsdom": "^24.1.0",
 		"publint": "^0.2.8",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "5.0.0-next.183",
+		"svelte": "5.0.0-next.192",
 		"svelte-check": "^3.8.4",
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.3",

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-corner-impl.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { CornerProps } from "../index.js";
+	import { useScrollAreaCorner } from "../scroll-area.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		ref = $bindable(null),
+		id,
+		children,
+		child,
+		...restProps
+	}: Omit<CornerProps, "id"> & {
+		id: string;
+	} = $props();
+
+	const cornerState = useScrollAreaCorner({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, cornerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-corner.svelte

@@ -1,34 +1,19 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
 	import type { CornerProps } from "../index.js";
-	import { getCtx } from "../ctx.js";
+	import { getScrollAreaRootContext } from "../scroll-area.svelte.js";
+	import ScrollAreaCornerImpl from "./scroll-area-corner-impl.svelte";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
-	type $$Props = CornerProps;
+	let { ref = $bindable(null), id = useId(), ...restProps }: CornerProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let ref: $$Props["el"] = undefined;
+	const scrollAreaState = getScrollAreaRootContext();
 
-	const {
-		elements: { corner },
-		getAttrs,
-	} = getCtx();
-
-	const bitsAttrs = getAttrs("corner");
-
-	$: attrs = {
-		...$$restProps,
-		...bitsAttrs,
-	};
-
-	$: builder = $corner;
-
-	$: Object.assign(builder, attrs);
+	const hasBothScrollbarsVisible = $derived(
+		Boolean(scrollAreaState.scrollbarXNode && scrollAreaState.scrollbarYNode)
+	);
+	const hasCorner = $derived(scrollAreaState.type.value !== "scroll" && hasBothScrollbarsVisible);
 </script>
 
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<div use:melt={builder} bind:this={ref}>
-		<slot {builder} />
-	</div>
+{#if hasCorner}
+	<ScrollAreaCornerImpl {...restProps} {id} bind:ref />
 {/if}

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-auto.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { useScrollAreaScrollbarAuto } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarAutoState = useScrollAreaScrollbarAuto();
+	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props));
+</script>
+
+<PresenceLayer present={forceMount || scrollbarAutoState.isVisible} {...mergedProps}>
+	{#snippet presence()}
+		<ScrollAreaScrollbarVisible {...mergedProps} />
+	{/snippet}
+</PresenceLayer>

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-hover.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import {
+		useScrollAreaScrollbarAuto,
+		useScrollAreaScrollbarHover,
+	} from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarHoverState = useScrollAreaScrollbarHover();
+	const scrollbarAutoState = useScrollAreaScrollbarAuto();
+	const mergedProps = $derived(
+		mergeProps(restProps, scrollbarHoverState.props, scrollbarAutoState.props, {
+			"data-state": scrollbarHoverState.isVisible ? "visible" : "hidden",
+		})
+	);
+
+	const present = $derived(
+		forceMount || (scrollbarHoverState.isVisible && scrollbarAutoState.isVisible)
+	);
+</script>
+
+<PresenceLayer {...mergedProps} {present}>
+	{#snippet presence()}
+		<ScrollAreaScrollbarVisible {...mergedProps} />
+	{/snippet}
+</PresenceLayer>

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-scroll.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { useScrollAreaScrollbarScroll } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarScrollState = useScrollAreaScrollbarScroll();
+
+	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props));
+</script>
+
+<PresenceLayer {...mergedProps} present={forceMount || !scrollbarScrollState.isHidden}>
+	{#snippet presence()}
+		<ScrollAreaScrollbarVisible {...mergedProps} />
+	{/snippet}
+</PresenceLayer>

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-shared.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { useScrollAreaScrollbarShared } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let { child, children, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarSharedState = useScrollAreaScrollbarShared();
+
+	const mergedProps = $derived(mergeProps(restProps, scrollbarSharedState.props));
+</script>
+
+{#if child}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-visible.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { useScrollAreaScrollbarVisible } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarX from "./scroll-area-scrollbar-x.svelte";
+	import ScrollAreaScrollbarY from "./scroll-area-scrollbar-y.svelte";
+
+	let { ...restProps }: Omit<_ScrollbarStubProps, "forceMount"> = $props();
+
+	const scrollbarVisibleState = useScrollAreaScrollbarVisible();
+</script>
+
+{#if scrollbarVisibleState.scrollbar.orientation.value === "horizontal"}
+	<ScrollAreaScrollbarX {...restProps} />
+{:else}
+	<ScrollAreaScrollbarY {...restProps} />
+{/if}

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-x.svelte

@@ -1,34 +1,19 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import type { ScrollbarProps } from "../index.js";
-	import { getCtx } from "../ctx.js";
+	import { IsMounted } from "runed";
+	import { box } from "svelte-toolbelt";
+	import { useScrollAreaScrollbarX } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = Omit<ScrollbarProps, "orientation">;
+	let { ...restProps }: _ScrollbarStubProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let ref: $$Props["el"] = undefined;
+	const isMounted = new IsMounted();
 
-	const {
-		elements: { scrollbarX },
-		getAttrs,
-	} = getCtx();
-
-	const bitsAttrs = getAttrs("scrollbar-x");
-
-	$: attrs = {
-		...$$restProps,
-		...bitsAttrs,
-	};
-
-	$: builder = $scrollbarX;
-
-	$: Object.assign(builder, attrs);
+	const scrollbarXState = useScrollAreaScrollbarX({
+		mounted: box.with(() => isMounted.current),
+	});
+	const mergedProps = $derived(mergeProps(restProps, scrollbarXState.props));
 </script>
 
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<div use:melt={builder} bind:this={ref}>
-		<slot {builder} />
-	</div>
-{/if}
+<ScrollAreaScrollbarShared {...mergedProps} />

packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-y.svelte

@@ -1,34 +1,20 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import type { ScrollbarProps } from "../index.js";
-	import { getCtx } from "../ctx.js";
+	import { IsMounted } from "runed";
+	import { box } from "svelte-toolbelt";
+	import { useScrollAreaScrollbarY } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = Omit<ScrollbarProps, "orientation">;
+	let { ...restProps }: _ScrollbarStubProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let ref: $$Props["el"] = undefined;
+	const isMounted = new IsMounted();
 
-	const {
-		elements: { scrollbarY },
-		getAttrs,
-	} = getCtx();
+	const scrollbarYState = useScrollAreaScrollbarY({
+		mounted: box.with(() => isMounted.current),
+	});
 
-	const bitsAttrs = getAttrs("scrollbar-y");
-
-	$: attrs = {
-		...$$restProps,
-		...bitsAttrs,
-	};
-
-	$: builder = $scrollbarY;
-
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, scrollbarYState.props));
 </script>
 
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<div use:melt={builder} bind:this={ref}>
-		<slot {builder} />
-	</div>
-{/if}
+<ScrollAreaScrollbarShared {...mergedProps} />