@sv-use/core/dist/observe-resize/index.svelte.d.ts

A collection of Svelte 5 utilities.

import { type ConfigurableWindow } from '../__internal__/configurable.js';
import type { CleanupFunction, MaybeGetter } from '../__internal__/types.js';
type ResizeObserverSize = {
    readonly inlineSize: number;
    readonly blockSize: number;
};
type ResizeObserverEntry = {
    readonly target: Element;
    readonly contentRect: DOMRectReadOnly;
    readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
    readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
    readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
};
type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
export interface ObserveResizeOptions extends ConfigurableWindow {
    /**
     * Whether to automatically cleanup the observer or not.
     *
     * If set to `true`, it must run in the component initialization lifecycle.
     * @default true
     */
    autoCleanup?: boolean;
    /**
     * Sets which box model the observer will observe changes to. Possible values
     * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
     *
     * @default 'content-box'
     */
    box?: ResizeObserverBoxOptions;
}
declare class ResizeObserver {
    constructor(callback: ResizeObserverCallback);
    disconnect(): void;
    observe(target: Element, options?: ObserveResizeOptions): void;
    unobserve(target: Element): void;
}
type ObserveResizeReturn = {
    /** Whether the {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver | `Resize Observer API`} is supported or not. */
    readonly isSupported: boolean;
    /** A function to cleanup the observer. */
    cleanup: CleanupFunction;
};
/**
 * Watch for changes to the dimensions of a given element's content or its border-box.
 * @param target The target to watch.
 * @param callback The callback for when an element's dimensions changes.
 * @param options Additional options to customize the behavior.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/observe-resize
 */
export declare function observeResize(target: MaybeGetter<HTMLElement | null | undefined>, callback: ResizeObserverCallback, options?: ObserveResizeOptions): ObserveResizeReturn;
/**
 * Watch for changes to the dimensions of the given elements' content or their border-box.
 * @param targets The targets to watch.
 * @param callback The callback for when an element's dimensions changes.
 * @param options Additional options to customize the behavior.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/observe-resize
 */
export declare function observeResize(targets: Array<MaybeGetter<HTMLElement | null | undefined>>, callback: ResizeObserverCallback, options?: ObserveResizeOptions): ObserveResizeReturn;
export {};