@nextclaw/ui 0.14.1-beta.0 → 0.14.1

package/src/features/system-status/components/runtime-security-card.tsx

@@ -40,7 +40,29 @@ function SecurityCardFrame({ children, contentClassName = 'space-y-6' }: { child
   );
 }
 
-function RuntimeSecuritySetupSection(props: { setupUsername: string; setSetupUsername: (value: string) => void; setupPassword: string; setSetupPassword: (value: string) => void; setupConfirmPassword: string; setSetupConfirmPassword: (value: string) => void; canSubmitSetup: boolean; isPending: boolean; onSubmit: () => void }) {
+type RuntimeSecuritySetupSectionProps = {
+  setupUsername: string;
+  setSetupUsername: (value: string) => void;
+  setupPassword: string;
+  setSetupPassword: (value: string) => void;
+  setupConfirmPassword: string;
+  setSetupConfirmPassword: (value: string) => void;
+  canSubmitSetup: boolean;
+  isPending: boolean;
+  onSubmit: () => void;
+};
+
+function RuntimeSecuritySetupSection({
+  canSubmitSetup,
+  isPending,
+  onSubmit,
+  setSetupConfirmPassword,
+  setSetupPassword,
+  setSetupUsername,
+  setupConfirmPassword,
+  setupPassword,
+  setupUsername
+}: RuntimeSecuritySetupSectionProps) {
   return (
     <SecurityCardFrame contentClassName="space-y-5">
       <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50/70 p-4">
@@ -52,8 +74,8 @@ function RuntimeSecuritySetupSection(props: { setupUsername: string; setSetupUse
           <Label htmlFor="auth-setup-username">{t('authUsername')}</Label>
           <Input
             id="auth-setup-username"
-            value={props.setupUsername}
-            onChange={(event) => props.setSetupUsername(event.target.value)}
+            value={setupUsername}
+            onChange={(event) => setSetupUsername(event.target.value)}
             placeholder={t('authUsernamePlaceholder')}
           />
         </div>
@@ -62,8 +84,8 @@ function RuntimeSecuritySetupSection(props: { setupUsername: string; setSetupUse
           <Input
             id="auth-setup-password"
             type="password"
-            value={props.setupPassword}
-            onChange={(event) => props.setSetupPassword(event.target.value)}
+            value={setupPassword}
+            onChange={(event) => setSetupPassword(event.target.value)}
             placeholder={t('authPasswordPlaceholder')}
           />
         </div>
@@ -73,43 +95,75 @@ function RuntimeSecuritySetupSection(props: { setupUsername: string; setSetupUse
         <Input
           id="auth-setup-confirm"
           type="password"
-          value={props.setupConfirmPassword}
-          onChange={(event) => props.setSetupConfirmPassword(event.target.value)}
+          value={setupConfirmPassword}
+          onChange={(event) => setSetupConfirmPassword(event.target.value)}
           placeholder={t('authConfirmPasswordPlaceholder')}
         />
         <p className="text-xs text-gray-500">{t('authPasswordMinLengthHint')}</p>
       </div>
-      <Button type="button" disabled={!props.canSubmitSetup} onClick={() => void props.onSubmit()}>
-        {props.isPending ? t('authSettingUp') : t('authSetupAction')}
+      <Button type="button" disabled={!canSubmitSetup} onClick={() => void onSubmit()}>
+        {isPending ? t('authSettingUp') : t('authSetupAction')}
       </Button>
     </SecurityCardFrame>
   );
 }
 
-function RuntimeSecurityConfiguredSection(props: { authenticated: boolean; enabled: boolean; username: string | null | undefined; nextPassword: string; setNextPassword: (value: string) => void; nextConfirmPassword: string; setNextConfirmPassword: (value: string) => void; canUpdatePassword: boolean; isUpdatingEnabled: boolean; isUpdatingPassword: boolean; isLoggingOut: boolean; onEnabledChange: (enabled: boolean) => void; onPasswordUpdate: () => void; onLogout: () => void }) {
+type RuntimeSecurityConfiguredSectionProps = {
+  authenticated: boolean;
+  enabled: boolean;
+  username: string | null | undefined;
+  nextPassword: string;
+  setNextPassword: (value: string) => void;
+  nextConfirmPassword: string;
+  setNextConfirmPassword: (value: string) => void;
+  canUpdatePassword: boolean;
+  isUpdatingEnabled: boolean;
+  isUpdatingPassword: boolean;
+  isLoggingOut: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+  onPasswordUpdate: () => void;
+  onLogout: () => void;
+};
+
+function RuntimeSecurityConfiguredSection({
+  authenticated,
+  canUpdatePassword,
+  enabled,
+  isLoggingOut,
+  isUpdatingEnabled,
+  isUpdatingPassword,
+  nextConfirmPassword,
+  nextPassword,
+  onEnabledChange,
+  onLogout,
+  onPasswordUpdate,
+  setNextConfirmPassword,
+  setNextPassword,
+  username
+}: RuntimeSecurityConfiguredSectionProps) {
   return (
     <SecurityCardFrame>
       <div className="rounded-xl border border-gray-200 p-4">
         <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
           <div className="space-y-1">
             <p className="text-sm font-medium text-gray-900">{t('authStatusLabel')}</p>
-            <p className="text-sm text-gray-600">{t('authStatusConfiguredUser').replace('{username}', props.username ?? '')}</p>
+            <p className="text-sm text-gray-600">{t('authStatusConfiguredUser').replace('{username}', username ?? '')}</p>
             <p className="text-xs text-gray-500">{t('authUsernameFixedHelp')}</p>
           </div>
           <span className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
-            {props.enabled ? t('enabled') : t('disabled')}
+            {enabled ? t('enabled') : t('disabled')}
           </span>
         </div>
         <div className="mt-4 flex flex-col gap-4 border-t border-gray-200 pt-4 md:flex-row md:items-center md:justify-between">
           <div className="space-y-1">
             <p className="text-sm font-medium text-gray-900">{t('authEnableLabel')}</p>
-            <p className="text-xs text-gray-500">{props.enabled ? t('authEnableOnHelp') : t('authEnableOffHelp')}</p>
+            <p className="text-xs text-gray-500">{enabled ? t('authEnableOnHelp') : t('authEnableOffHelp')}</p>
           </div>
           <Switch
-            checked={props.enabled}
-            disabled={props.isUpdatingEnabled}
+            checked={enabled}
+            disabled={isUpdatingEnabled}
             onCheckedChange={(checked) => {
-              void props.onEnabledChange(checked);
+              void onEnabledChange(checked);
             }}
           />
         </div>
@@ -125,8 +179,8 @@ function RuntimeSecurityConfiguredSection(props: { authenticated: boolean; enabl
             <Input
               id="auth-password-next"
               type="password"
-              value={props.nextPassword}
-              onChange={(event) => props.setNextPassword(event.target.value)}
+              value={nextPassword}
+              onChange={(event) => setNextPassword(event.target.value)}
               placeholder={t('authPasswordPlaceholder')}
             />
           </div>
@@ -135,19 +189,19 @@ function RuntimeSecurityConfiguredSection(props: { authenticated: boolean; enabl
             <Input
               id="auth-password-confirm"
               type="password"
-              value={props.nextConfirmPassword}
-              onChange={(event) => props.setNextConfirmPassword(event.target.value)}
+              value={nextConfirmPassword}
+              onChange={(event) => setNextConfirmPassword(event.target.value)}
               placeholder={t('authConfirmPasswordPlaceholder')}
             />
           </div>
         </div>
         <div className="flex flex-wrap items-center gap-3">
-          <Button type="button" disabled={!props.canUpdatePassword} onClick={() => void props.onPasswordUpdate()}>
-            {props.isUpdatingPassword ? t('authPasswordUpdating') : t('authPasswordAction')}
+          <Button type="button" disabled={!canUpdatePassword} onClick={() => void onPasswordUpdate()}>
+            {isUpdatingPassword ? t('authPasswordUpdating') : t('authPasswordAction')}
           </Button>
-          {props.enabled && props.authenticated ? (
-            <Button type="button" variant="outline" disabled={props.isLoggingOut} onClick={() => void props.onLogout()}>
-              {props.isLoggingOut ? t('authLoggingOut') : t('authLogoutAction')}
+          {enabled && authenticated ? (
+            <Button type="button" variant="outline" disabled={isLoggingOut} onClick={() => void onLogout()}>
+              {isLoggingOut ? t('authLoggingOut') : t('authLogoutAction')}
             </Button>
           ) : null}
         </div>

package/src/shared/components/common/__tests__/agent-avatar.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { AgentAvatar } from '../agent-avatar';
+import { AgentAvatar } from '@/shared/components/common/agent-avatar';
 
 describe('AgentAvatar', () => {
   it('uses the configured image for the main agent before fallback', () => {
@@ -23,6 +23,8 @@ describe('AgentAvatar', () => {
     const avatar = screen.getByLabelText('Main');
     expect(avatar.querySelector('svg')).toBeTruthy();
     expect(avatar.textContent).not.toContain('M');
+    expect(avatar.className).toContain('bg-primary');
+    expect(avatar.className).toContain('text-primary-foreground');
   });
 
   it('keeps letter fallback avatars for specialist agents', () => {

package/src/shared/components/common/__tests__/searchable-model-input.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SearchableModelInput } from '@/shared/components/common/searchable-model-input';
+import { createPopoverAvailableHeightLimit } from '@/shared/components/ui/popover';
+
+describe('SearchableModelInput', () => {
+  it('keeps the model option panel bounded with an internal scroll region', async () => {
+    render(
+      <SearchableModelInput
+        value=""
+        onChange={vi.fn()}
+        options={Array.from({ length: 40 }, (_, index) => `model-${index}`)}
+        placeholder="Model"
+        emptyText="No models"
+        createText="Use {value}"
+        toggleLabel="Toggle models"
+      />
+    );
+
+    fireEvent.focus(screen.getByPlaceholderText('Model'));
+
+    const firstOption = await screen.findByRole('button', { name: 'model-0' });
+    const panel = firstOption.closest('[data-state="open"]') as HTMLElement | null;
+    const scrollRegion = firstOption.closest('.overflow-y-auto');
+
+    expect(panel?.style.maxHeight).toBe(createPopoverAvailableHeightLimit('15rem'));
+    expect(panel?.style.maxHeight).toContain('max(0px');
+    expect(panel?.style.maxHeight).toContain('100vh');
+    expect(panel?.style.maxHeight).toContain('2rem');
+    expect(panel?.className).toContain('flex-col');
+    expect(scrollRegion?.className).toContain('flex-1');
+    expect(scrollRegion?.className).toContain('overflow-y-auto');
+  });
+});

package/src/shared/components/common/agent-avatar.tsx

@@ -28,7 +28,10 @@ function hashText(value: string): number {
 
 export function AgentAvatar({ agentId, displayName, avatarUrl, className }: AgentAvatarProps) {
   const seed = displayName?.trim() || agentId;
-  const [bgClass, textClass] = PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
+  const isMainAgent = agentId.trim().toLowerCase() === 'main';
+  const [paletteBgClass, paletteTextClass] = PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
+  const bgClass = isMainAgent ? 'bg-primary' : paletteBgClass;
+  const textClass = isMainAgent ? 'text-primary-foreground' : paletteTextClass;
 
   if (avatarUrl?.trim()) {
     return (
@@ -50,7 +53,7 @@ export function AgentAvatar({ agentId, displayName, avatarUrl, className }: Agen
       )}
       aria-label={displayName?.trim() || agentId}
     >
-      {agentId.trim().toLowerCase() === 'main' ? (
+      {isMainAgent ? (
         <Bot className="h-[55%] w-[55%]" strokeWidth={2.4} />
       ) : (
         (seed.trim() || 'A').slice(0, 1).toUpperCase()

package/src/shared/components/common/provider-scoped-model-input.tsx

@@ -151,6 +151,7 @@ export function ProviderScopedModelInput({
           inputClassName="h-10 rounded-xl"
           emptyText={t('modelPickerNoOptions')}
           createText={t('modelPickerUseCustom')}
+          toggleLabel={t('modelPickerToggleOptions')}
         />
       </div>
       <p className="mt-2 text-xs text-gray-500">{t('modelInputCustomHint')}</p>

package/src/shared/components/common/searchable-model-input.tsx

@@ -1,6 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import { Input } from '@/shared/components/ui/input';
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  createPopoverAvailableHeightLimit,
+} from '@/shared/components/ui/popover';
 import { cn } from '@/shared/lib/utils';
 
 type SearchableModelInputProps = {
@@ -12,12 +18,15 @@ type SearchableModelInputProps = {
   placeholder?: string;
   className?: string;
   inputClassName?: string;
-  emptyText?: string;
-  createText?: string;
+  emptyText: string;
+  createText: string;
+  toggleLabel: string;
   maxItems?: number;
   onEnter?: () => void;
 };
 
+const SEARCHABLE_MODEL_MENU_MAX_HEIGHT = createPopoverAvailableHeightLimit('15rem');
+
 function normalizeOptions(options: string[]): string[] {
   const deduped = new Set<string>();
   for (const option of options) {
@@ -40,6 +49,7 @@ export function SearchableModelInput({
   inputClassName,
   emptyText,
   createText,
+  toggleLabel,
   maxItems = Number.POSITIVE_INFINITY,
   onEnter
 }: SearchableModelInputProps) {
@@ -77,97 +87,102 @@ export function SearchableModelInput({
   }, [normalizedOptions, query, maxItems]);
 
   const hasExactMatch = value.trim().length > 0 && normalizedOptions.some((option) => option === value.trim());
+  const closeMenu = () => setOpen(false);
 
   return (
-    <div
-      className={cn('relative', className)}
-      onBlur={() => {
-        setTimeout(() => setOpen(false), 120);
-      }}
+    <Popover
+      open={open && !disabled}
+      onOpenChange={(nextOpen) => setOpen(!disabled && nextOpen)}
     >
-      <Input
-        id={id}
-        value={value}
-        disabled={disabled}
-        onFocus={() => {
-          if (!disabled) {
-            setOpen(true);
-          }
-        }}
-        onChange={(event) => {
-          onChange(event.target.value);
-          if (!open && !disabled) {
-            setOpen(true);
-          }
-        }}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter') {
-            if (onEnter) {
-              event.preventDefault();
-              onEnter();
-            }
-            setOpen(false);
-          }
-        }}
-        placeholder={placeholder}
-        className={cn('pr-10', inputClassName)}
-      />
-      <button
-        type="button"
-        onMouseDown={(event) => event.preventDefault()}
-        onClick={() => setOpen((prev) => !prev)}
-        disabled={disabled}
-        className={cn(
-          'absolute inset-y-0 right-0 inline-flex w-10 items-center justify-center',
-          disabled ? 'cursor-not-allowed text-gray-300' : 'text-gray-400 hover:text-gray-600'
-        )}
-        aria-label="toggle model options"
-      >
-        <ChevronsUpDown className="h-4 w-4" />
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute z-20 mt-1 w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
-          <div className="max-h-60 overflow-y-auto py-1">
-            {!hasExactMatch && value.trim().length > 0 && (
-              <button
-                type="button"
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={() => {
-                  onChange(value.trim());
-                  setOpen(false);
-                }}
-                className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
-              >
-                <Check className="h-4 w-4 text-transparent" />
-                <span className="truncate text-gray-700">
-                  {createText ? createText.replace('{value}', value.trim()) : value.trim()}
-                </span>
-              </button>
+      <PopoverAnchor asChild>
+        <div className={cn('relative', className)}>
+          <Input
+            id={id}
+            value={value}
+            disabled={disabled}
+            onFocus={() => {
+              if (!disabled) {
+                setOpen(true);
+              }
+            }}
+            onChange={(event) => {
+              onChange(event.target.value);
+              if (!open && !disabled) {
+                setOpen(true);
+              }
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                if (onEnter) {
+                  event.preventDefault();
+                  onEnter();
+                }
+                closeMenu();
+              }
+            }}
+            placeholder={placeholder}
+            className={cn('pr-10', inputClassName)}
+          />
+          <button
+            type="button"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => setOpen((prev) => !prev)}
+            disabled={disabled}
+            className={cn(
+              'absolute inset-y-0 right-0 inline-flex w-10 items-center justify-center',
+              disabled ? 'cursor-not-allowed text-gray-300' : 'text-gray-400 hover:text-gray-600'
             )}
+            aria-label={toggleLabel}
+          >
+            <ChevronsUpDown className="h-4 w-4" />
+          </button>
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        align="start"
+        className="flex w-[var(--radix-popover-trigger-width)] min-w-[12rem] flex-col overflow-hidden rounded-xl border border-gray-200 p-0 shadow-lg"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        style={{ maxHeight: SEARCHABLE_MODEL_MENU_MAX_HEIGHT }}
+      >
+        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto py-1">
+          {!hasExactMatch && value.trim().length > 0 && (
+            <button
+              type="button"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                onChange(value.trim());
+                closeMenu();
+              }}
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+            >
+              <Check className="h-4 w-4 text-transparent" />
+              <span className="truncate text-gray-700">
+                {createText.replace('{value}', value.trim())}
+              </span>
+            </button>
+          )}
 
-            {orderedOptions.map((option) => (
-              <button
-                key={option}
-                type="button"
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={() => {
-                  onChange(option);
-                  setOpen(false);
-                }}
-                className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
-              >
-                <Check className={cn('h-4 w-4', option === value.trim() ? 'text-primary' : 'text-transparent')} />
-                <span className="truncate text-gray-700">{option}</span>
-              </button>
-            ))}
+          {orderedOptions.map((option) => (
+            <button
+              key={option}
+              type="button"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                onChange(option);
+                closeMenu();
+              }}
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+            >
+              <Check className={cn('h-4 w-4', option === value.trim() ? 'text-primary' : 'text-transparent')} />
+              <span className="truncate text-gray-700">{option}</span>
+            </button>
+          ))}
 
-            {orderedOptions.length === 0 && value.trim().length === 0 && (
-              <div className="px-3 py-2 text-sm text-gray-500">{emptyText ?? 'No models available'}</div>
-            )}
-          </div>
+          {orderedOptions.length === 0 && value.trim().length === 0 && (
+            <div className="px-3 py-2 text-sm text-gray-500">{emptyText}</div>
+          )}
         </div>
-      )}
-    </div>
+      </PopoverContent>
+    </Popover>
   );
 }

package/src/shared/components/ui/README.md

@@ -0,0 +1,7 @@
+# Shared UI Components
+
+本目录是前端 shared UI primitive 根目录，只放业务无关的基础展示与交互组件。
+
+## 目录预算豁免
+
+- 原因：该目录历史上承载 button、dialog、popover、select、tabs、tooltip 等基础 UI primitive，当前文件数已经超过目录预算。后续新增复杂组件应优先进入语义子目录，或复用现有 primitive 扩展合同；不要继续把业务组件或一次性页面组件放到本目录根部。

package/src/shared/components/ui/popover.tsx

@@ -3,6 +3,14 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 import { cn } from '@/shared/lib/utils';
 
+const FLOATING_CONTENT_AVAILABLE_HEIGHT_GAP = '2rem';
+
+function createPopoverAvailableHeightLimit(limit: string): string {
+  return `min(${limit}, max(0px, calc(var(--radix-popover-content-available-height, 100vh) - ${FLOATING_CONTENT_AVAILABLE_HEIGHT_GAP})))`;
+}
+
+const POPOVER_CONTENT_MAX_HEIGHT = createPopoverAvailableHeightLimit('24rem');
+
 const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
@@ -12,20 +20,28 @@ const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, sideOffset = 8, align = 'start', ...props }, ref) => (
+>(({ className, sideOffset = 8, align = 'start', collisionPadding = 12, style, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       align={align}
+      collisionPadding={collisionPadding}
       className={cn(
-        'z-[var(--z-popover,50)] w-72 overflow-hidden rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
         className
       )}
+      style={{ maxHeight: POPOVER_CONTENT_MAX_HEIGHT, ...style }}
       {...props}
     />
   </PopoverPrimitive.Portal>
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  createPopoverAvailableHeightLimit,
+};

package/src/shared/components/ui/select.tsx

@@ -6,6 +6,13 @@ import { cn } from "@/shared/lib/utils"
 const Select = SelectPrimitive.Root
 const SelectGroup = SelectPrimitive.Group
 const SelectValue = SelectPrimitive.Value
+const SELECT_CONTENT_AVAILABLE_HEIGHT_GAP = "2rem"
+
+function createSelectAvailableHeightLimit(limit: string): string {
+    return `min(${limit}, max(0px, calc(var(--radix-select-content-available-height, 100vh) - ${SELECT_CONTENT_AVAILABLE_HEIGHT_GAP})))`
+}
+
+const SELECT_CONTENT_MAX_HEIGHT = createSelectAvailableHeightLimit("24rem")
 
 type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
     indicator?: React.ReactNode
@@ -66,24 +73,26 @@ type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.
 const SelectContent = React.forwardRef<
     React.ElementRef<typeof SelectPrimitive.Content>,
     SelectContentProps
->(({ className, children, position = "popper", viewportClassName, ...props }, ref) => (
+>(({ className, children, collisionPadding = 12, position = "popper", style, viewportClassName, ...props }, ref) => (
     <SelectPrimitive.Portal>
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                "relative z-[var(--z-popover,50)] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 bg-white",
+                "relative z-[var(--z-popover,50)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 bg-white",
                 position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
             )}
+            collisionPadding={collisionPadding}
             position={position}
+            style={{ maxHeight: SELECT_CONTENT_MAX_HEIGHT, ...style }}
             {...props}
         >
             <SelectScrollUpButton />
             <SelectPrimitive.Viewport
                 className={cn(
-                    "p-1",
-                    position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+                    "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",
+                    position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]",
                     viewportClassName
                 )}
             >
@@ -144,4 +153,5 @@ export {
     SelectSeparator,
     SelectScrollUpButton,
     SelectScrollDownButton,
+    createSelectAvailableHeightLimit,
 }

package/src/shared/hooks/use-infinite-scroll-loader.ts

@@ -9,33 +9,37 @@ type UseInfiniteScrollLoaderParams = {
   watchValue?: string | number;
 };
 
-export function useInfiniteScrollLoader(params: UseInfiniteScrollLoaderParams) {
+export function useInfiniteScrollLoader({
+  disabled,
+  onLoadMore,
+  thresholdPx = DEFAULT_THRESHOLD_PX,
+  watchValue
+}: UseInfiniteScrollLoaderParams) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const sentinelRef = useRef<HTMLDivElement | null>(null);
-  const onLoadMoreRef = useRef(params.onLoadMore);
+  const onLoadMoreRef = useRef(onLoadMore);
   const loadingRef = useRef(false);
 
   useEffect(() => {
-    onLoadMoreRef.current = params.onLoadMore;
-  }, [params.onLoadMore]);
+    onLoadMoreRef.current = onLoadMore;
+  }, [onLoadMore]);
 
   useEffect(() => {
-    if (params.disabled) {
+    if (disabled) {
       loadingRef.current = false;
     }
-  }, [params.disabled]);
+  }, [disabled]);
 
   useEffect(() => {
     const container = containerRef.current;
     const sentinel = sentinelRef.current;
-    const thresholdPx = params.thresholdPx ?? DEFAULT_THRESHOLD_PX;
 
-    if (params.disabled || !container || !sentinel) {
+    if (disabled || !container || !sentinel) {
       return;
     }
 
     const triggerLoadMore = () => {
-      if (loadingRef.current || params.disabled) {
+      if (loadingRef.current || disabled) {
         return;
       }
 
@@ -79,7 +83,7 @@ export function useInfiniteScrollLoader(params: UseInfiniteScrollLoaderParams) {
     return () => {
       container.removeEventListener('scroll', maybeLoadMore);
     };
-  }, [params.disabled, params.thresholdPx, params.watchValue]);
+  }, [disabled, thresholdPx, watchValue]);
 
   return {
     containerRef,