starcoach-hackathon/zarinpal-analytics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): keep floating menus within viewport

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-08-21 01:33:12 +03:30
parent 9722adc93e
commit 35472979d6
7 changed files with 109 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
View File

@@ -8,6 +8,11 @@
ref = $bindable(null),
sideOffset = 4,
align = 'start',
collisionPadding = 8,
avoidCollisions = true,
sticky = 'always',
hideWhenDetached = true,
dir = 'rtl',
portalProps,
class: className,
...restProps
@@ -22,8 +27,13 @@
data-slot="dropdown-menu-content"
{sideOffset}
{align}
{collisionPadding}
{avoidCollisions}
{sticky}
{hideWhenDetached}
{dir}
class={cn(
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 w-(--bits-dropdown-menu-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden',
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 max-h-[min(20rem,var(--bits-dropdown-menu-content-available-height))] w-(--bits-dropdown-menu-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden',
className,
)}
{...restProps}

12
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
View File

@@ -5,15 +5,25 @@
let {
ref = $bindable(null),
class: className,
collisionPadding = 8,
avoidCollisions = true,
sticky = 'always',
hideWhenDetached = true,
dir = 'rtl',
...restProps
}: DropdownMenuPrimitive.SubContentProps = $props();
</script>
<DropdownMenuPrimitive.SubContent
bind:ref
{collisionPadding}
{avoidCollisions}
{sticky}
{hideWhenDetached}
{dir}
data-slot="dropdown-menu-sub-content"
class={cn(
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100',
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 max-h-[min(20rem,var(--bits-dropdown-menu-content-available-height))] w-auto min-w-[96px] overflow-y-auto overscroll-contain rounded-lg p-1 shadow-lg ring-1 duration-100',
className,
)}
{...restProps}

4
src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
let { open = $bindable(false), dir = 'rtl', ...restProps }: DropdownMenuPrimitive.RootProps = $props();
</script>
<DropdownMenuPrimitive.Root bind:open {...restProps} />
<DropdownMenuPrimitive.Root bind:open {dir} {...restProps} />

26
src/lib/components/ui/floating-content.test.svelte Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts">
import * as DropdownMenu from './dropdown-menu';
import * as Popover from './popover';
import * as Select from './select';
let { kind }: { kind: 'select' | 'popover' | 'menu' } = $props();
</script>
<div dir="rtl">
{#if kind === 'select'}
<Select.Root type="single" value="" open items={[{ value: 'one', label: 'یک' }]}>
<Select.Trigger>انتخاب</Select.Trigger>
<Select.Content forceMount><Select.Item value="one" label="یک" /></Select.Content>
</Select.Root>
{:else if kind === 'popover'}
<Popover.Root open>
<Popover.Trigger>جزئیات</Popover.Trigger>
<Popover.Content forceMount>محتوای جزئیات</Popover.Content>
</Popover.Root>
{:else}
<DropdownMenu.Root open>
<DropdownMenu.Trigger>عملیات</DropdownMenu.Trigger>
<DropdownMenu.Content forceMount><DropdownMenu.Item>ویرایش</DropdownMenu.Item></DropdownMenu.Content>
</DropdownMenu.Root>
{/if}
</div>

33
src/lib/components/ui/floating-content.test.ts Normal file
View File

@@ -0,0 +1,33 @@
import { cleanup, render, screen } from '@testing-library/svelte';
import { afterEach, describe, expect, it } from 'vitest';
import FloatingContentHarness from './floating-content.test.svelte';
afterEach(cleanup);
describe('floating content primitives', () => {
it('bounds select menus to the available viewport with an internal scroll region', async () => {
render(FloatingContentHarness, { kind: 'select' });
const content = await screen.findByRole('listbox');
const viewport = content.querySelector('[data-select-viewport]');
expect(content.className).toContain('var(--bits-select-content-available-height)');
expect(viewport?.className).toContain('overscroll-contain');
expect(content.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
});
it('bounds popovers and menus to their collision-aware available height', async () => {
const popoverView = render(FloatingContentHarness, { kind: 'popover' });
const popover = screen.getByText('محتوای جزئیات');
expect(popover.className).toContain('var(--bits-popover-content-available-height)');
expect(popover.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
popoverView.unmount();
render(FloatingContentHarness, { kind: 'menu' });
const menu = screen.getByRole('menu');
expect(menu.className).toContain('var(--bits-dropdown-menu-content-available-height)');
expect(menu.className).toContain('overscroll-contain');
expect(menu.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
});
});

12
src/lib/components/ui/popover/popover-content.svelte
View File

@@ -9,6 +9,11 @@
class: className,
sideOffset = 4,
align = 'center',
collisionPadding = 8,
avoidCollisions = true,
sticky = 'always',
hideWhenDetached = true,
dir = 'rtl',
portalProps,
...restProps
}: PopoverPrimitive.ContentProps & {
@@ -22,8 +27,13 @@
data-slot="popover-content"
{sideOffset}
{align}
{collisionPadding}
{avoidCollisions}
{sticky}
{hideWhenDetached}
{dir}
class={cn(
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 flex max-h-[min(32rem,var(--bits-popover-content-available-height))] w-72 origin-(--transform-origin) flex-col gap-2.5 overflow-y-auto overscroll-contain rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
className,
)}
{...restProps}

17
src/lib/components/ui/select/select-content.svelte
View File

@@ -11,6 +11,11 @@
ref = $bindable(null),
class: className,
sideOffset = 4,
collisionPadding = 8,
avoidCollisions = true,
sticky = 'always',
hideWhenDetached = true,
dir = 'rtl',
portalProps,
children,
preventScroll = true,
@@ -24,17 +29,25 @@
<SelectPrimitive.Content
bind:ref
{sideOffset}
{collisionPadding}
{avoidCollisions}
{sticky}
{hideWhenDetached}
{dir}
{preventScroll}
data-slot="select-content"
class={cn(
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 relative isolate z-50 min-w-36 overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100',
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 relative isolate z-50 max-h-[min(20rem,var(--bits-select-content-available-height))] min-w-36 overflow-x-hidden rounded-lg shadow-md ring-1 duration-100',
className,
)}
{...restProps}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
class={cn('h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1')}
dir="rtl"
class={cn(
'max-h-[min(20rem,var(--bits-select-content-available-height))] w-full min-w-(--bits-select-anchor-width) scroll-my-1 overscroll-contain',
)}
>
{@render children?.()}
</SelectPrimitive.Viewport>