import { Machine, EventObject, Service } from '@zag-js/core'; import { PropTypes, Point, Orientation, DirectionProperty, CommonProperties, Size } from '@zag-js/types'; import { Timeout } from './utils/timeout.js'; type ScrollToEdge = "top" | "right" | "bottom" | "left"; type ScrollRecord = Record; type ElementIds = Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string; }>; interface ScrollAreaProps extends DirectionProperty, CommonProperties { /** * The ids of the scroll area elements */ ids?: ElementIds; } interface ScrollbarProps { orientation?: Orientation; } interface ThumbProps { orientation?: Orientation; } interface ScrollbarHiddenState { scrollbarYHidden: boolean; scrollbarXHidden: boolean; cornerHidden: boolean; } interface ScrollAreaContext { cornerSize: Size; thumbSize: Size; scrollingX: boolean; scrollingY: boolean; hiddenState: ScrollbarHiddenState; hovering: boolean; touchModality: boolean; atSides: ScrollRecord; } interface ScrollAreaRefs { orientation: Orientation | null; scrollPosition: { x: number; y: number; }; scrollYTimeout: Timeout; scrollXTimeout: Timeout; scrollEndTimeout: Timeout; startX: number; startY: number; startScrollTop: number; startScrollLeft: number; programmaticScroll: boolean; } interface ScrollAreaSchema { state: "idle" | "dragging"; props: ScrollAreaProps; context: ScrollAreaContext; event: EventObject; action: string; guard: string; effect: string; refs: ScrollAreaRefs; } type ScrollAreaService = Service; type ScrollAreaMachine = Machine; interface ScrollbarState { hovering: boolean; scrolling: boolean; hidden: boolean; } type ScrollEasingFunction = (t: number) => number; interface ScrollbarEasing { easing?: ScrollEasingFunction | undefined; duration?: number | undefined; } interface ScrollToDetails extends ScrollbarEasing { top?: number | undefined; left?: number | undefined; behavior?: ScrollBehavior | undefined; } interface ScrollToEdgeDetails extends ScrollbarEasing { edge: ScrollToEdge; behavior?: ScrollBehavior | undefined; } interface ScrollAreaApi { /** * Whether the scroll area is at the top */ isAtTop: boolean; /** * Whether the scroll area is at the bottom */ isAtBottom: boolean; /** * Whether the scroll area is at the left */ isAtLeft: boolean; /** * Whether the scroll area is at the right */ isAtRight: boolean; /** * Whether the scroll area has horizontal overflow */ hasOverflowX: boolean; /** * Whether the scroll area has vertical overflow */ hasOverflowY: boolean; /** * Get the scroll progress as values between 0 and 1 */ getScrollProgress: () => Point; /** * Scroll to the edge of the scroll area */ scrollToEdge: (details: ScrollToEdgeDetails) => void; /** * Scroll to specific coordinates */ scrollTo: (details: ScrollToDetails) => void; /** * Returns the state of the scrollbar */ getScrollbarState: (props: ScrollbarProps) => ScrollbarState; getRootProps: () => T["element"]; getViewportProps: () => T["element"]; getContentProps: () => T["element"]; getScrollbarProps: (props?: ScrollbarProps) => T["element"]; getThumbProps: (props?: ThumbProps) => T["element"]; getCornerProps: () => T["element"]; } export type { ElementIds, ScrollAreaApi, ScrollAreaContext, ScrollAreaMachine, ScrollAreaProps, ScrollAreaRefs, ScrollAreaSchema, ScrollAreaService, ScrollEasingFunction, ScrollRecord, ScrollToDetails, ScrollToEdge, ScrollToEdgeDetails, ScrollbarEasing, ScrollbarHiddenState, ScrollbarProps, ScrollbarState, ThumbProps };