@adecore/ui 0.53.2 → 0.54.0

package/src/ErrorBoundary.tsx

@@ -1,12 +1,13 @@
-import { Component, type ErrorInfo, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { RotateCw, TriangleAlert } from 'lucide-react';
+import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './Button.tsx';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { CopyButton } from './CopyButton.tsx';
 import { errorMessageOf, errorReport, shouldReset, type ResetKeys } from './error-boundary.ts';
 import { Icon } from './Icon.tsx';
+import { ScrollArea } from './ScrollArea.tsx';
 
 export interface ErrorBoundaryProps {
     /* The first line of the message: "Could not show this view". */
@@ -49,7 +50,7 @@ function ErrorFallback({ label, error, componentStack, compact, reload, classNam
     const { t } = useTranslation('ui');
 
     return (
-        <div role="alert" className={clsx('grid place-items-center overflow-auto bg-surface', compact ? 'p-3' : 'p-6', className)}>
+        <ScrollArea role="alert" className={clsx('bg-surface', className)} viewportClassName={clsx('grid place-items-center', compact ? 'p-3' : 'p-6')}>
             <div className={clsx('flex max-w-[360px] flex-col items-center text-center', compact ? 'gap-1' : 'gap-2')}>
                 {!compact && <Icon icon={TriangleAlert} size={20} className="text-status-error" />}
                 <p className="text-sm font-medium text-text">{label}</p>
@@ -69,7 +70,7 @@ function ErrorFallback({ label, error, componentStack, compact, reload, classNam
                     </ButtonGroup>
                 </div>
             </div>
-        </div>
+        </ScrollArea>
     );
 }
 

package/src/Field.tsx

@@ -1,6 +1,6 @@
-import { useId, type ReactNode, type Ref } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useId, type ReactNode, type Ref } from 'react';
 import { FieldContext } from './field-context.ts';
 import { SectionLabel } from './SectionLabel.tsx';
 

package/src/FileIcon.tsx

@@ -1,5 +1,5 @@
-import { useInsertionEffect, type Ref } from 'react';
 import clsx from 'clsx';
+import { useInsertionEffect, type Ref } from 'react';
 import { fileIconFor, fileIconOverrideFor, mountFileIconSprite } from './file-icon.ts';
 
 export interface FileIconProps {

package/src/Icon.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import type { Ref } from 'react';
 
 // The whole client draws at this weight. 2 is Lucide's default, but at 12 and 14 pixels next to
 // text of the same size a hair thinner keeps the glyph from outweighing the words beside it.

package/src/IconButton.tsx

@@ -1,12 +1,12 @@
-import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
-import { useRender } from '@base-ui/react/use-render';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE, type IconButtonSize } from './icon-button-size.ts';
 import { Icon } from './Icon.tsx';
 import type { Shortcut } from './shortcut.ts';
 import { Spinner } from './Spinner.tsx';
 import { Tooltip, type TooltipSide } from './Tooltip.tsx';
-import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE, type IconButtonSize } from './icon-button-size.ts';
 
 export type { IconButtonSize };
 

package/src/IconPicker.tsx

@@ -1,14 +1,15 @@
-import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import clsx from 'clsx';
 import { Ban, ChevronDown, Search, X } from 'lucide-react';
+import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './Button.tsx';
 import { EmptyState } from './EmptyState.tsx';
 import { formatNumber } from './format/number.ts';
+import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf, type IconPickerIcons, type IconSection } from './icon-picker.ts';
 import { Icon } from './Icon.tsx';
 import { IconButton } from './IconButton.tsx';
-import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf, type IconPickerIcons, type IconSection } from './icon-picker.ts';
 import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.tsx';
+import { ScrollArea } from './ScrollArea.tsx';
 import { SectionLabel } from './SectionLabel.tsx';
 import { Tooltip } from './Tooltip.tsx';
 
@@ -277,12 +278,12 @@ function IconPickerPanel({ id, name, sections, headed, value, keywords, searchab
                     )}
                 </div>
             )}
-            <div
-                ref={area}
+            <ScrollArea
+                viewportRef={area}
                 id={`${id}-grid`}
                 role="radiogroup"
                 aria-label={name}
-                className={clsx('relative overflow-y-auto overscroll-contain', headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2')}
+                viewportClassName={clsx('relative overscroll-contain', headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2')}
                 style={rows === undefined ? undefined : { height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA) }}
                 onScroll={(event) => markStuckHeadings(event.currentTarget)}
                 onKeyDown={moveFocus}
@@ -342,7 +343,7 @@ function IconPickerPanel({ id, name, sections, headed, value, keywords, searchab
                         );
                     })
                 )}
-            </div>
+            </ScrollArea>
             {onClear && (
                 <div className="flex border-t border-border p-1">
                     <Button size="sm" disabled={disabled || value === null} onClick={onClear}>

package/src/Input.tsx

@@ -1,6 +1,6 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
 import { fieldControlProps, useFieldControl } from './field-context.ts';
 import { Icon } from './Icon.tsx';
 

package/src/Kbd.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
+import type { ReactNode, Ref } from 'react';
 import { isApplePlatform } from './platform.ts';
 import { formatShortcut, shortcutParts, type Shortcut } from './shortcut.ts';
 

package/src/ListRow.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 const VARIANT = {
     /* A row of a list that reads as a table and fills the width of its panel: commits, processes,

package/src/Meter.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface MeterProps {
     /* In the unit of `min` and `max`, held to them. Null draws an empty track, for a level not measured yet. */

package/src/MiddleTruncate.tsx

@@ -1,7 +1,7 @@
-import { useLayoutEffect, useState, type Ref } from 'react';
 import clsx from 'clsx';
-import { fitMiddle, type MiddleCut } from './middle-truncate.ts';
+import { useLayoutEffect, useState, type Ref } from 'react';
 import { mergeRefs } from './merge-refs.ts';
+import { fitMiddle, type MiddleCut } from './middle-truncate.ts';
 import { Tooltip } from './Tooltip.tsx';
 
 export interface MiddleTruncateProps {

package/src/PanelEmpty.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode, Ref } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 import { EmptyState } from './EmptyState.tsx';
 
 export interface PanelEmptyProps {

package/src/PanelHeader.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import { SectionLabel } from './SectionLabel.tsx';
 
 export type PanelHeaderProps = useRender.ComponentProps<'header'> & {

package/src/Pill.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import clsx from 'clsx';
+import type { ReactNode, Ref } from 'react';
 
 /* Every ground is an alpha over whatever the pill stands on, the way a border is: a solid sunken ground read as a hole on a dark row. */
 const TONES = {

package/src/ProjectSwitcher.tsx

@@ -1,7 +1,7 @@
-import type { ComponentProps, MouseEvent, ReactNode, Ref } from 'react';
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { ChevronDown, History } from 'lucide-react';
+import type { ComponentProps, MouseEvent, ReactNode, Ref } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
 import * as Menu from './menu/index.parts.ts';
 import { ProjectSwitcherRow } from './project-switcher-row.tsx';

package/src/PromptDialog.tsx

@@ -1,6 +1,6 @@
+import type { LucideIcon } from 'lucide-react';
 import { useState, type ReactNode, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { LucideIcon } from 'lucide-react';
 import { Button } from './Button.tsx';
 import { DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle } from './dialog/parts.tsx';
 import { Field, FormError } from './Field.tsx';

package/src/RelativeTime.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 import { formatAge, formatDayClockWithYear, useFormatLocale } from './format/index.ts';
 import { Tooltip, type TooltipSide } from './Tooltip.tsx';
 import { useNow } from './useNow.ts';

package/src/ScrollArea.tsx

@@ -0,0 +1,47 @@
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useState, type CSSProperties, type Ref } from 'react';
+import { mergeRefs } from './merge-refs.ts';
+import { useOverlayScrollbars, type ScrollAreaAxis } from './useOverlayScrollbars.tsx';
+
+export type ScrollAreaProps = Omit<useRender.ComponentProps<'div'>, 'className' | 'ref'> & {
+    /* The directions the content scrolls in; the other one clips. */
+    axis?: ScrollAreaAxis;
+
+    /* The outer box, which holds the bars and takes the size. */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+
+    /* The element that scrolls, for a virtualizer or code that sets the scroll position. */
+    viewportRef?: Ref<HTMLElement>;
+
+    /* Padding and layout of the content. `render` and the remaining props land on the viewport too. */
+    viewportClassName?: string;
+
+    /* Pixels of the bottom edge a layer over the area covers, such as a docked input. The bars end above it. */
+    coveredBottom?: number;
+};
+
+/* A box that scrolls natively under thin bars that float over its content and show only while it scrolls. */
+export function ScrollArea({ axis = 'y', className, viewportClassName, viewportRef, coveredBottom, ref, render, ...props }: ScrollAreaProps) {
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+    const scrollbars = useOverlayScrollbars(viewport, { axis });
+
+    const content = useRender<Record<string, never>, HTMLElement>({
+        render,
+        ref: mergeRefs<HTMLElement>(setViewport, viewportRef),
+        defaultTagName: 'div',
+        props: { ...props, 'data-axis': axis, className: clsx('ade-scroll-viewport', viewportClassName) }
+    });
+
+    return (
+        <div
+            ref={ref}
+            className={clsx('ade-scroll-area', className)}
+            style={coveredBottom ? ({ '--scrollbar-covered-bottom': `${coveredBottom}px` } as CSSProperties) : undefined}
+        >
+            {content}
+            {scrollbars}
+        </div>
+    );
+}

package/src/SectionLabel.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 /* A label takes the line height of the row it sits in, which is why the size carries `/[inherit]`. */
 const SECTION_LABEL = 'text-xs/[inherit] font-medium text-text-faint';

package/src/SegmentBar.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, type Ref } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState, type Ref } from 'react';
 import { mergeRefs } from './merge-refs.ts';
 import { Tooltip } from './Tooltip.tsx';
 import { useMeasuredWidth } from './useMeasuredWidth.ts';

package/src/Segmented.tsx

@@ -1,6 +1,6 @@
-import type { KeyboardEvent, Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
+import type { KeyboardEvent, Ref } from 'react';
 import { Icon } from './Icon.tsx';
 import { segmentedStop, segmentedTarget } from './segmented-keys.ts';
 import { Tooltip } from './Tooltip.tsx';

package/src/Select.tsx

@@ -1,7 +1,7 @@
-import type { Ref } from 'react';
 import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
 import { MENU_LABEL } from './menu/parts.tsx';
@@ -9,6 +9,7 @@ import { renderPositioner } from './popup-layer.ts';
 import { RowContent } from './select-row.tsx';
 import { isGroup, rowClassName, triggerClassName, type SelectGroup, type SelectItem } from './select-shared.ts';
 import { SelectSearch } from './SelectSearch.tsx';
+import { useOverlayScrollbars } from './useOverlayScrollbars.tsx';
 
 export type { SelectGroup, SelectItem };
 
@@ -74,6 +75,8 @@ function PlainSelect<T extends string>({
     const groups = items.length > 0 && isGroup(items[0]!) ? (items as SelectGroup<T>[]) : null;
     const flat = groups ? groups.flatMap((group) => group.items) : (items as SelectItem<T>[]);
     const selected = flat.find((item) => item.value === value) ?? null;
+    const [list, setList] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(list);
 
     return (
         <BaseSelect.Root
@@ -99,7 +102,7 @@ function PlainSelect<T extends string>({
                     alignItemWithTrigger={false}
                 >
                     <BaseSelect.Popup className="menu-popup">
-                        <BaseSelect.List className="max-h-80 overflow-auto">
+                        <BaseSelect.List ref={setList} className="max-h-80 overflow-auto">
                             {groups
                                 ? groups.map((group) => (
                                       <BaseSelect.Group key={group.label}>
@@ -112,6 +115,7 @@ function PlainSelect<T extends string>({
                                 : flat.map((item) => <Row key={item.value} item={item} picked={item.value === value} />)}
                         </BaseSelect.List>
                     </BaseSelect.Popup>
+                    {scrollbars}
                 </BaseSelect.Positioner>
             </BaseSelect.Portal>
         </BaseSelect.Root>

package/src/SelectSearch.tsx

@@ -1,14 +1,15 @@
-import { useState } from 'react';
 import { Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { ChevronDown, Search } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
 import { MENU_LABEL } from './menu/parts.tsx';
 import { renderPositioner } from './popup-layer.ts';
-import type { SelectProps } from './Select.tsx';
 import { RowContent } from './select-row.tsx';
 import { isGroup, rowClassName, triggerClassName, type SelectGroup, type SelectItem } from './select-shared.ts';
+import type { SelectProps } from './Select.tsx';
+import { useOverlayScrollbars } from './useOverlayScrollbars.tsx';
 
 /* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
 export function SelectSearch<T extends string>({
@@ -38,6 +39,8 @@ export function SelectSearch<T extends string>({
         : flat.map((item) => item.value);
 
     const searchLabel = searchPlaceholder ?? t('select.search');
+    const [list, setList] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(list);
 
     const renderRow = (itemValue: T) => {
         const item = byValue.get(itemValue)!;
@@ -87,16 +90,20 @@ export function SelectSearch<T extends string>({
                             />
                         </label>
                         <Combobox.Empty className="px-3 py-4 text-center text-xs text-text-faint empty:hidden">{t('select.noMatch', { query })}</Combobox.Empty>
-                        <Combobox.List className="min-h-0 overflow-auto">
-                            {groups
-                                ? (group: { value: string; items: T[] }) => (
-                                      <Combobox.Group key={group.value} items={group.items}>
-                                          <Combobox.GroupLabel className={MENU_LABEL}>{group.value}</Combobox.GroupLabel>
-                                          <Combobox.Collection>{renderRow}</Combobox.Collection>
-                                      </Combobox.Group>
-                                  )
-                                : renderRow}
-                        </Combobox.List>
+                        {/* Out to the popup's edge on the right, so the bar lies where a menu's does. */}
+                        <div className="relative -mr-1 flex min-h-0 flex-col">
+                            <Combobox.List ref={setList} className="min-h-0 overflow-auto pr-1">
+                                {groups
+                                    ? (group: { value: string; items: T[] }) => (
+                                          <Combobox.Group key={group.value} items={group.items}>
+                                              <Combobox.GroupLabel className={MENU_LABEL}>{group.value}</Combobox.GroupLabel>
+                                              <Combobox.Collection>{renderRow}</Combobox.Collection>
+                                          </Combobox.Group>
+                                      )
+                                    : renderRow}
+                            </Combobox.List>
+                            {scrollbars}
+                        </div>
                     </Combobox.Popup>
                 </Combobox.Positioner>
             </Combobox.Portal>

package/src/Separator.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface SeparatorProps {
     orientation?: 'vertical' | 'horizontal';

package/src/ShortcutHints.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import { isApplePlatform } from './platform.ts';
-import { formatShortcut } from './shortcut.ts';
 import { ModifierHold, placeHint, shortcutHintTargets } from './shortcut-hints.ts';
+import { formatShortcut } from './shortcut.ts';
 
 interface PlacedHint {
     id: number;

package/src/Skeleton.tsx

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface SkeletonProps {
     /* The width, and a height other than the one line of 16px. */

package/src/Slider.tsx

@@ -1,6 +1,6 @@
-import { useId, type Ref } from 'react';
-import clsx from 'clsx';
 import { Slider as BaseSlider } from '@base-ui/react/slider';
+import clsx from 'clsx';
+import { useId, type Ref } from 'react';
 import { formatFixed } from './format/number.ts';
 import { placesOf } from './step-places.ts';
 

package/src/SlidingColumn.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref, type RefObject } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref, type RefObject } from 'react';
 import { ColumnResizeHandle } from './ColumnResizeHandle.tsx';
 import { mergeRefs } from './merge-refs.ts';
 import { useColumnResize } from './useColumnResize.ts';

package/src/Spinner.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps, CSSProperties } from 'react';
 import clsx from 'clsx';
+import type { ComponentProps, CSSProperties } from 'react';
 
 const DOTS = [0, 1, 2];
 

package/src/SplitButton.tsx

@@ -1,6 +1,6 @@
-import { useState, type ComponentProps, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState, type ComponentProps, type ReactNode } from 'react';
 import { splitFrameClass, splitHalfClass, type ButtonSize, type ButtonVariant } from './button-class.ts';
 import { Icon } from './Icon.tsx';
 import { MenuPopup, MenuRoot, MenuTrigger, type MenuPopupProps } from './menu/parts.tsx';

package/src/Stepper.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
 import { Minus, Plus } from 'lucide-react';
+import type { Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { formatFixed } from './format/number.ts';

package/src/Surface.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 
 const FLOAT = 'border border-border bg-[color-mix(in_srgb,var(--surface-raised)_88%,transparent)] shadow-float backdrop-blur-[14px]';
 

package/src/Switch.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
-import clsx from 'clsx';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import clsx from 'clsx';
+import type { Ref } from 'react';
 
 export interface SwitchProps {
     checked: boolean;

package/src/TextMenu.tsx

@@ -1,11 +1,11 @@
-import { useRef, useState, type ComponentProps, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react';
 import { Copy, Scan } from 'lucide-react';
+import { useRef, useState, type ComponentProps, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { copyText } from './clipboard.ts';
 import { Icon } from './Icon.tsx';
 import { Kbd } from './Kbd.tsx';
-import { mergeRefs } from './merge-refs.ts';
 import { ContextMenuRoot, ContextMenuTrigger, MenuItem, MenuPopup, MenuSeparator } from './menu/parts.tsx';
+import { mergeRefs } from './merge-refs.ts';
 import { isApplePlatform } from './platform.ts';
 import { selectAllWithin, selectionWithin } from './selection.ts';
 import { EDIT_SHORTCUTS, matchesShortcut } from './shortcut.ts';

package/src/Tile.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from 'react';
 import clsx from 'clsx';
+import type { ComponentProps, ReactNode } from 'react';
 import { Kbd } from './Kbd.tsx';
 import type { Shortcut } from './shortcut.ts';
 

package/src/Toasts.tsx

@@ -1,7 +1,7 @@
-import { useState, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { useState, type ReactNode, type Ref } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 import { Button } from './Button.tsx';
 import { Icon } from './Icon.tsx';

package/src/Tooltip.tsx

@@ -1,8 +1,8 @@
-import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Kbd } from './Kbd.tsx';
-import type { Shortcut } from './shortcut.ts';
 import { registerShortcutHint } from './shortcut-hints.ts';
+import type { Shortcut } from './shortcut.ts';
 
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 

package/src/UIProvider.tsx

@@ -1,5 +1,5 @@
-import { useLayoutEffect, useState, type ReactNode } from 'react';
 import type { i18n as I18n } from 'i18next';
+import { useLayoutEffect, useState, type ReactNode } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { setFormatSource, type FormatSource } from './format/locale.ts';
 import { addUiResources } from './locales.ts';

package/src/Waveform.tsx

@@ -1,5 +1,5 @@
-import { useRef, type KeyboardEvent, type PointerEvent, type Ref } from 'react';
 import clsx from 'clsx';
+import { useRef, type KeyboardEvent, type PointerEvent, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatClockDuration } from './format/duration.ts';
 import { mergeRefs } from './merge-refs.ts';

package/src/Wipe.tsx

@@ -1,8 +1,8 @@
-import { useRef, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { ChevronsLeftRight } from 'lucide-react';
-import { Icon } from './Icon.tsx';
+import { useRef, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref } from 'react';
 import { formatPercent } from './format/number.ts';
+import { Icon } from './Icon.tsx';
 import { mergeRefs } from './merge-refs.ts';
 import { splitAt, splitForKey } from './wipe-split.ts';
 

package/src/ZoomControls.tsx

@@ -1,6 +1,6 @@
-import type { Ref } from 'react';
 import clsx from 'clsx';
 import { Maximize, Minus, Plus, Scan, type LucideIcon } from 'lucide-react';
+import type { Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { Icon } from './Icon.tsx';

package/src/combobox/parts.tsx

@@ -1,16 +1,18 @@
-import type { ComponentProps, ReactNode } from 'react';
+import { Autocomplete } from '@base-ui/react/autocomplete';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
+import { useState, type ComponentProps, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Autocomplete } from '@base-ui/react/autocomplete';
 import { withClass } from '../class-name.ts';
 import { fieldControlProps, useFieldControl } from '../field-context.ts';
 import { Icon } from '../Icon.tsx';
 import { Kbd } from '../Kbd.tsx';
 import { MENU_LABEL } from '../menu/parts.tsx';
+import { mergeRefs } from '../merge-refs.ts';
 import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
 import type { Shortcut } from '../shortcut.ts';
+import { useOverlayScrollbars } from '../useOverlayScrollbars.tsx';
 
 /* It takes no room while it has nothing to say. */
 const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
@@ -63,13 +65,16 @@ type Placement = Pick<ComponentProps<typeof Autocomplete.Positioner>, PlacementK
 
 export type ComboboxPopupProps = ComponentProps<typeof Autocomplete.Popup> & Placement;
 
-export function ComboboxPopup({ side = 'bottom', align = 'start', sideOffset = 6, className, ...props }: ComboboxPopupProps) {
+export function ComboboxPopup({ side = 'bottom', align = 'start', sideOffset = 6, className, ref, ...props }: ComboboxPopupProps) {
     const [placement, popupProps] = splitPlacement(props);
+    const [popup, setPopup] = useState<HTMLDivElement | null>(null);
+    const scrollbars = useOverlayScrollbars(popup);
 
     return (
         <Autocomplete.Portal>
             <Autocomplete.Positioner className="popup-positioner" render={renderPositioner} {...placement} side={side} align={align} sideOffset={sideOffset}>
-                <Autocomplete.Popup className={withClass('menu-popup min-w-(--anchor-width)', className)} {...popupProps} />
+                <Autocomplete.Popup ref={mergeRefs(setPopup, ref)} className={withClass('menu-popup min-w-(--anchor-width)', className)} {...popupProps} />
+                {scrollbars}
             </Autocomplete.Positioner>
         </Autocomplete.Portal>
     );