import type * as React from 'react'; import type { PrimitivePropsWithRef } from '../utils/primitive.js'; /** Controls when the custom {@link ScrollAreaScrollbar} is shown, mirroring the CSS `overflow` keywords. */ export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll'; /** * Overflow state published as `data-overflow-x`/`data-overflow-y` on root; logical (RTL-aware) values. */ export type ScrollAreaOverflow = 'none' | 'start' | 'end' | 'both'; /** The scroll position a ScrollArea reports through `onScrollPositionChange`. */ export interface ScrollAreaScrollPosition { /** The viewport's `scrollLeft`. Negative in an RTL scroll container, exactly as the platform reports it. */ x: number; /** The viewport's `scrollTop`. */ y: number; } /** @internal Shared state distributed from {@link ScrollArea} to its parts via context. */ export interface ScrollAreaContextValue { type: ScrollAreaType; viewportRef: React.RefObject; contentRef: React.RefObject; scrollbarXEnabled: boolean; scrollbarYEnabled: boolean; setScrollbarXEnabled: (enabled: boolean) => void; setScrollbarYEnabled: (enabled: boolean) => void; hovering: boolean; scrolling: boolean; setScrolling: (scrolling: boolean) => void; scrollHideDelay: number; /** Reports a new scroll position from the Viewport to the root, which forwards it to `onScrollPositionChange`. */ reportScrollPosition: (position: ScrollAreaScrollPosition, overflow: { x: ScrollAreaOverflow; y: ScrollAreaOverflow; }) => void; /** Scroll the Viewport programmatically. */ scrollTo: (options: ScrollAreaScrollToOptions) => void; } /** Options for the ScrollArea's `scrollTo` method — the subset of `ScrollToOptions` that makes sense here. */ export interface ScrollAreaScrollToOptions { /** Target `scrollTop`. Omit to leave the block axis where it is. */ top?: number | undefined; /** Target `scrollLeft`. Omit to leave the inline axis where it is. */ left?: number | undefined; /** * Whether to animate the scroll. * @default 'auto' */ behavior?: 'auto' | 'smooth' | undefined; } /** Props for {@link ScrollAreaRoot}: {@link ScrollAreaProps} minus the derived-anatomy-only `scrollbars`. */ export interface ScrollAreaRootProps extends PrimitivePropsWithRef<'div'> { /** * When to show scrollbar. `'hover'` while pointer over, `'scroll'` while scrolling, * `'always'` visible, `'auto'` visible only when overflowing. * @default 'hover' */ type?: ScrollAreaType | undefined; /** * How long, in milliseconds, the scrollbar stays visible after scrolling stops when `type="scroll"`. * @default 600 */ scrollHideDelay?: number | undefined; /** * Fires with viewport `{ x, y }` offsets on every scroll tick; `x` is raw `scrollLeft` (negative in RTL). * @default undefined — no-op if omitted. */ onScrollPositionChange?: ((position: ScrollAreaScrollPosition) => void) | undefined; /** * Size rung the skin scales the scrollbars by, mirrored to `data-size`. * @default undefined — the skin's own default size. */ size?: 'sm' | 'lg' | (string & {}) | undefined; } /** * Props for the {@link ScrollArea} recipe, whose `children` render inside a derived `ScrollAreaViewport`. */ export interface ScrollAreaProps extends ScrollAreaRootProps { /** * Which derived scrollbar tracks to render. * @default 'both' */ scrollbars?: 'vertical' | 'horizontal' | 'both' | undefined; } /** Props for {@link ScrollAreaViewport}, the natively-scrollable region that renders the content. */ export interface ScrollAreaViewportProps extends PrimitivePropsWithRef<'div'> { /** * Props for the internal content wrapper the children are measured through; merged with, not replacing, its measurement defaults. * @default undefined */ contentProps?: React.ComponentPropsWithRef<'div'> | undefined; } /** Props for a {@link ScrollAreaScrollbar}, the custom scrollbar track along one axis. */ export interface ScrollAreaScrollbarProps extends PrimitivePropsWithRef<'div'> { /** * Which scroll axis this scrollbar controls. * @default 'vertical' */ orientation?: 'vertical' | 'horizontal' | undefined; /** * Render even when the content doesn't overflow in this axis. * @default false */ forceMount?: boolean | undefined; } /** Props for the {@link ScrollAreaThumb}, the draggable handle inside a {@link ScrollAreaScrollbar}. */ export interface ScrollAreaThumbProps extends PrimitivePropsWithRef<'div'> { } /** Props for the {@link ScrollAreaCorner}, the filler square where horizontal and vertical scrollbars meet. */ export interface ScrollAreaCornerProps extends PrimitivePropsWithRef<'div'> { /** * Render even when the content doesn't overflow in both axes; pair with `forceMount` on both {@link ScrollAreaScrollbar}s to avoid an unfilled notch. * @default false */ forceMount?: boolean | undefined; }