@mui/internal-docs-infra/useScrollAnchor/useScrollAnchor.d.mts

MUI Infra - internal documentation creation tools.

import * as React from 'react';
/**
 * Result returned by `useScrollAnchor`.
 */
export type UseScrollAnchorResult<TContainer extends HTMLElement, TScroll extends HTMLElement = HTMLElement> = {
  /**
   * Ref to attach to the element whose layout is about to change. Resize
   * events on this element drive the scroll compensation.
   */
  containerRef: React.RefObject<TContainer | null>;
  /**
   * Optional ref to attach to a scrollable ancestor that should be
   * compensated instead of the page. When left unattached, the hook
   * compensates `window` scroll, which is the right default for most
   * full-page layouts. Attach it when the changing container lives inside
   * its own `overflow: auto` region (chat threads, side panels, modals).
   */
  scrollContainerRef: React.RefObject<TScroll | null>;
  /**
   * Start an anchoring session. Records the current viewport position of
   * `anchor` and, while the container resizes over the next `duration` ms,
   * scrolls the page (or the attached `scrollContainerRef`) so the anchor
   * stays at the same position.
   *
   * The session ends when any of the following happens:
   * - The user interacts (wheel, touchmove, pointerdown, keydown).
   * - `duration` ms (plus a small safety buffer) elapse.
   * - A new `anchorScroll` call starts.
   * - The hosting component unmounts.
   */
  anchorScroll: (anchor: HTMLElement | null, duration: number) => void;
};
/**
 * Keeps an anchor element visually fixed in the viewport while a nearby
 * container element changes size.
 *
 * Useful around expand/collapse, accordion, and tab-switch transitions
 * where the natural document flow would otherwise push focused content out
 * of (or into) the viewport. Uses a `ResizeObserver` on the container to
 * react to layout changes without polling, and `scrollBy` to nudge either
 * the page or an opt-in scroll container so the anchor's
 * `getBoundingClientRect().top` stays constant.
 */
export declare function useScrollAnchor<TContainer extends HTMLElement = HTMLElement, TScroll extends HTMLElement = HTMLElement>(): UseScrollAnchorResult<TContainer, TScroll>;