next: Menubar (#572)

huntabyte · Jun 12, 2024 · c83f4a2 · c83f4a2
1 parent ba7ebfa
commit c83f4a2
Show file tree

Hide file tree

Showing 229 changed files with 1,613 additions and 1,676 deletions.
diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -31,6 +31,7 @@ type AccordionBaseStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 	orientation: Orientation;
 	loop: boolean;
+	ref: HTMLElement | null | undefined;
 }>;
 
 class AccordionBaseState {
@@ -48,7 +49,7 @@ class AccordionBaseState {
 		this.orientation = props.orientation;
 		this.#loop = props.loop;
 		this.rovingFocusGroup = useRovingFocus({
-			rootNode: this.node,
+			rootNodeId: this.id,
 			candidateSelector: TRIGGER_ATTR,
 			loop: this.#loop,
 			orientation: this.orientation,
@@ -356,6 +357,7 @@ type InitAccordionProps = {
 	disabled: boolean;
 	orientation: Orientation;
 	loop: boolean;
+	ref: HTMLElement | null | undefined;
 }>;
 
 const [setAccordionRootContext, getAccordionRootContext] =

diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
@@ -8,30 +8,30 @@
 	let {
 		child,
 		asChild,
-		el = $bindable(),
+		ref = $bindable(),
 		id = useId(),
 		forceMount = false,
 		children,
 		...restProps
 	}: AccordionContentProps = $props();
 
-	const state = useAccordionContent({
+	const contentState = useAccordionContent({
 		forceMount: box.with(() => forceMount),
 		id: box.with(() => id),
 	});
 </script>
 
-<PresenceLayer forceMount={true} present={state.present} {id}>
+<PresenceLayer forceMount={true} present={contentState.present} {id}>
 	{#snippet presence({ present })}
-		{@const mergedProps = mergeProps(restProps, state.props, {
+		{@const mergedProps = mergeProps(restProps, contentState.props, {
 			hidden: !present.value,
 		})}
 		{#if asChild}
 			{@render child?.({
 				props: mergedProps,
 			})}
 		{:else}
-			<div {...mergedProps} bind:this={el}>
+			<div {...mergedProps} bind:this={ref}>
 				{@render children?.()}
 			</div>
 		{/if}

diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte
@@ -9,21 +9,21 @@
 		level = 2,
 		children,
 		child,
-		el = $bindable(),
+		ref = $bindable(),
 		...restProps
 	}: AccordionHeaderProps = $props();
 
-	const state = useAccordionHeader({
+	const headerState = useAccordionHeader({
 		level: box.with(() => level),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, state.props));
+	const mergedProps = $derived(mergeProps(restProps, headerState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={el}>
+	<div {...mergedProps} bind:this={ref}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
@@ -10,22 +10,22 @@
 		value,
 		children,
 		child,
-		el = $bindable(),
+		ref = $bindable(),
 		...restProps
 	}: AccordionItemProps = $props();
 
-	const state = useAccordionItem({
+	const itemState = useAccordionItem({
 		value: box.with(() => value),
 		disabled: box.with(() => disabled),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, state.props));
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={el}>
+	<div {...mergedProps} bind:this={ref}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
@@ -7,25 +7,25 @@
 	let {
 		disabled = false,
 		asChild,
-		el = $bindable(),
+		ref = $bindable(),
 		id = useId(),
 		children,
 		child,
 		...restProps
 	}: AccordionTriggerProps = $props();
 
-	const state = useAccordionTrigger({
+	const triggerState = useAccordionTrigger({
 		disabled: box.with(() => disabled),
 		id: box.with(() => id),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, state.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={el} type="button" {...mergedProps}>
+	<button bind:this={ref} type="button" {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
@@ -12,7 +12,7 @@
 		child,
 		type,
 		value = $bindable(),
-		el = $bindable(),
+		ref = $bindable(),
 		id = useId(),
 		onValueChange,
 		loop = true,
@@ -22,7 +22,7 @@
 
 	value === undefined && (value = type === "single" ? "" : []);
 
-	const state = useAccordionRoot({
+	const rootState = useAccordionRoot({
 		type,
 		value: box.with(
 			() => value!,
@@ -35,15 +35,16 @@
 		disabled: box.with(() => disabled),
 		loop: box.with(() => loop),
 		orientation: box.with(() => orientation),
+		ref: box.with(() => ref),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, state.props));
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={el} {...mergedProps}>
+	<div bind:this={ref} {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
@@ -26,7 +26,7 @@
 	<slot {builder} />
 {:else}
 	<button
-		bind:this={el}
+		bind:this={ref}
 		use:melt={builder}
 		type="button"
 		{...$$restProps}

diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
@@ -26,7 +26,7 @@
 	<slot {builder} />
 {:else}
 	<button
-		bind:this={el}
+		bind:this={ref}
 		use:melt={builder}
 		type="button"
 		{...$$restProps}

diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
@@ -40,7 +40,7 @@
 	<slot {builder} />
 {:else if transition && $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		on:pointerdown
@@ -56,7 +56,7 @@
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
@@ -73,7 +73,7 @@
 	</div>
 {:else if inTransition && $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		on:pointerdown
@@ -89,7 +89,7 @@
 	</div>
 {:else if outTransition && $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		on:pointerdown
@@ -105,7 +105,7 @@
 	</div>
 {:else if $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		use:melt={builder}
 		on:pointerdown
 		on:pointermove

diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
@@ -27,7 +27,7 @@
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
+	<div bind:this={ref} use:melt={builder} {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
@@ -35,28 +35,28 @@
 	<slot {builder} />
 {:else if transition && $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
 	/>
 {:else if inTransition && outTransition && $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
 	/>
 {:else if inTransition && $open}
-	<div bind:this={el} in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} />
+	<div bind:this={ref} in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} />
 {:else if outTransition && $open}
 	<div
-		bind:this={el}
+		bind:this={ref}
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
 	/>
 {:else if $open}
-	<div bind:this={el} use:melt={builder} {...$$restProps} />
+	<div bind:this={ref} use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
@@ -21,7 +21,7 @@
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
+	<div bind:this={ref} use:melt={builder} {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
@@ -29,7 +29,7 @@
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<svelte:element this={level} bind:this={el} use:melt={builder} {...$$restProps}>
+	<svelte:element this={level} bind:this={ref} use:melt={builder} {...$$restProps}>
 		<slot {builder} />
 	</svelte:element>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
@@ -26,7 +26,7 @@
 	<slot {builder} />
 {:else}
 	<button
-		bind:this={el}
+		bind:this={ref}
 		use:melt={builder}
 		type="button"
 		on:m-click={dispatch}

diff --git a/packages/bits-ui/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte b/packages/bits-ui/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { Props } from "../index.js";
 
-	let { ratio, children, el = $bindable(), ...restProps }: Props = $props();
+	let { ratio, children, ref = $bindable(), ...restProps }: Props = $props();
 </script>
 
 <div style:position="relative" style:width="100%" style:padding-bottom="{ratio ? 100 / ratio : 0}%">
 	<div
-		bind:this={el}
+		bind:this={ref}
 		style:position="absolute"
 		style:top="0"
 		style:right="0"

diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte
@@ -3,17 +3,17 @@
 	import { useAvatarFallback } from "../avatar.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	let { asChild, children, child, el = $bindable(), ...restProps }: FallbackProps = $props();
+	let { asChild, children, child, ref = $bindable(), ...restProps }: FallbackProps = $props();
 
-	const state = useAvatarFallback();
+	const fallbackState = useAvatarFallback();
 
-	const mergedProps = $derived(mergeProps(restProps, state.props));
+	const mergedProps = $derived(mergeProps(restProps, fallbackState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<span bind:this={el} {...mergedProps}>
+	<span bind:this={ref} {...mergedProps}>
 		{@render children?.()}
 	</span>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte
@@ -4,17 +4,17 @@
 	import { useAvatarImage } from "../avatar.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	let { src, asChild, child, el = $bindable(), ...restProps }: ImageProps = $props();
+	let { src, asChild, child, ref = $bindable(), ...restProps }: ImageProps = $props();
 
-	const state = useAvatarImage({
+	const imageState = useAvatarImage({
 		src: box.with(() => src),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, state.props));
+	const mergedProps = $derived(mergeProps(restProps, imageState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<img bind:this={el} {...mergedProps} {src} />
+	<img bind:this={ref} {...mergedProps} {src} />
 {/if}