Skip to content

Commit

Permalink
more
Browse files Browse the repository at this point in the history
  • Loading branch information
@huntabyte
huntabyte committed Feb 19, 2025
1 parent 855a5e3 commit b42c5b4
Show file tree
Hide file tree
Showing 6 changed files with 30 additions and 20 deletions.
8 changes: 4 additions & 4 deletions docs/src/lib/components/demos/combobox-demo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,16 @@
</div>
<Combobox.Portal>
<Combobox.Content
class="border-muted bg-background shadow-popover max-h-96 w-[var(--bits-combobox-anchor-width)] min-w-[var(--bits-combobox-anchor-width)] rounded-xl border px-1 py-3 outline-none"
class="focus-override border-muted bg-background shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-combobox-anchor-width)] min-w-[var(--bits-combobox-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
sideOffset={10}
>
<Combobox.ScrollUpButton class="flex w-full items-center justify-center">
<Combobox.ScrollUpButton class="flex w-full items-center justify-center py-1">
<CaretDoubleUp class="size-3" />
</Combobox.ScrollUpButton>
<Combobox.Viewport class="p-1">
{#each filteredFruits as fruit, i (i + fruit.value)}
<Combobox.Item
class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none"
class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none"
value={fruit.value}
label={fruit.label}
>
Expand All @@ -89,7 +89,7 @@
</span>
{/each}
</Combobox.Viewport>
<Combobox.ScrollDownButton class="flex w-full items-center justify-center">
<Combobox.ScrollDownButton class="flex w-full items-center justify-center py-1">
<CaretDoubleDown class="size-3" />
</Combobox.ScrollDownButton>
</Combobox.Content>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/lib/components/demos/select-demo-custom.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,14 @@
</Select.Trigger>
<Select.Portal>
<Select.Content
class="border-muted bg-background shadow-popover w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] rounded-xl border px-1 py-3 outline-none"
class="focus-override border-muted bg-background shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
sideOffset={10}
{...contentProps}
>
<Select.ScrollUpButton class="flex w-full items-center justify-center">
<CaretDoubleUp class="size-3" />
</Select.ScrollUpButton>
<Select.Viewport class="max-h-96 p-1">
<Select.Viewport class="p-1">
{#each themes as theme, i (i + theme.value)}
<Select.Item
class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none"
Expand Down
6 changes: 3 additions & 3 deletions docs/src/lib/components/demos/select-demo-multiple.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

<Select.Root type="multiple" bind:value>
<Select.Trigger
class="h-input rounded-9px border-border-input bg-background placeholder:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
class="h-input rounded-9px border-border-input bg-background data-[placeholder]:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
aria-label="Select a theme"
>
<Palette class="text-muted-foreground mr-[9px] size-6" />
Expand All @@ -51,13 +51,13 @@
</Select.Trigger>
<Select.Portal>
<Select.Content
class="border-muted bg-background shadow-popover w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] rounded-xl border px-1 py-3 outline-none"
class="focus-override border-muted bg-background shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
sideOffset={10}
>
<Select.ScrollUpButton class="flex w-full items-center justify-center">
<CaretDoubleUp class="size-3" />
</Select.ScrollUpButton>
<Select.Viewport class="max-h-96 p-1">
<Select.Viewport class="p-1">
{#each themes as theme, i (i + theme.value)}
<Select.Item
class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none"
Expand Down
4 changes: 2 additions & 2 deletions docs/src/lib/components/demos/select-demo-transition.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
</Select.Trigger>
<Select.Portal>
<Select.Content
class="focus-override border-muted bg-background shadow-popover z-50 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none"
class="focus-override border-muted bg-background shadow-popover z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none"
sideOffset={10}
forceMount
>
Expand All @@ -58,7 +58,7 @@
<Select.ScrollUpButton class="flex w-full items-center justify-center">
<CaretDoubleUp class="size-3" />
</Select.ScrollUpButton>
<Select.Viewport class="max-h-96 p-1">
<Select.Viewport class="p-1">
{#each themes as theme, i (i + theme.value)}
<Select.Item
class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75"
Expand Down
6 changes: 3 additions & 3 deletions docs/src/lib/components/demos/select-demo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@

<Select.Root type="single" onValueChange={(v) => (value = v)}>
<Select.Trigger
class="h-input rounded-9px border-border-input bg-background placeholder:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
class="h-input rounded-9px border-border-input bg-background data-[placeholder]:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
aria-label="Select a theme"
>
<Palette class="text-muted-foreground mr-[9px] size-6" />
Expand All @@ -46,13 +46,13 @@
</Select.Trigger>
<Select.Portal>
<Select.Content
class="focus-override border-muted bg-background shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
class="focus-override border-muted bg-background shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
sideOffset={10}
>
<Select.ScrollUpButton class="flex w-full items-center justify-center">
<CaretDoubleUp class="size-3" />
</Select.ScrollUpButton>
<Select.Viewport class="max-h-96 p-1">
<Select.Viewport class="p-1">
{#each themes as theme, i (i + theme.value)}
<Select.Item
class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none data-[disabled]:opacity-50"
Expand Down
22 changes: 16 additions & 6 deletions packages/bits-ui/src/lib/bits/select/select.svelte.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Context, Previous, watch } from "runed";
import {
afterSleep,
afterTick,
onDestroyEffect,
srOnlyStyles,
Expand Down Expand Up @@ -1126,12 +1127,6 @@ class SelectScrollButtonImplState {
return;
}
if (this.isUserScrolling) return;

// afterSleep(0, () => {
// const activeItem = this.root.highlightedNode;
// console.log("scrolling into view");
// activeItem?.scrollIntoView({ block: "nearest" });
// });
});

$effect(() => {
Expand Down Expand Up @@ -1195,6 +1190,7 @@ class SelectScrollDownButtonState {
content: SelectContentState;
root: SelectBaseRootState;
canScrollDown = $state(false);
scrollIntoViewTimer: ReturnType<typeof globalThis.setTimeout> | null = null;

constructor(readonly state: SelectScrollButtonImplState) {
this.content = state.content;
Expand All @@ -1210,6 +1206,20 @@ class SelectScrollDownButtonState {

return on(this.content.viewportNode, "scroll", () => this.handleScroll());
});

watch(
() => this.state.mounted,
() => {
if (!this.state.mounted) return;
if (this.scrollIntoViewTimer) {
clearTimeout(this.scrollIntoViewTimer);
}
this.scrollIntoViewTimer = afterSleep(5, () => {
const activeItem = this.root.highlightedNode;
activeItem?.scrollIntoView({ block: "nearest" });
});
}
);
}
/**
* @param manual - if true, it means the function was invoked manually outside of an event
Expand Down

0 comments on commit b42c5b4

Please sign in to comment.