@atlaskit/motion/dist/types/resizing/use-resizing.d.ts

A set of utilities to apply motion in your application.

import type { MotionDuration, MotionEasing } from '@atlaskit/tokens/css-type-schema';
import { type CallbackRef } from '../utils/use-element-ref';
/**
 * Which dimension(s) of the element to animate.
 *
 * - `'width'` animates only width changes.
 * - `'height'` animates only height changes.
 * - `'both'` animates width and height changes simultaneously.
 */
type ResizingDimension = 'width' | 'height' | 'both';
export interface ResizingOpts {
    /**
     * Which dimension(s) to animate. One of `'width'`, `'height'`, or `'both'`.
     */
    dimension: ResizingDimension;
    /**
     * Duration of the resize transition as a design token CSS variable.
     *
     * Accepts a `MotionDuration` token value, e.g. `token('motion.duration.medium')`.
     */
    duration: MotionDuration;
    /**
     * Easing of the resize transition as a design token CSS variable.
     *
     * Accepts a `MotionEasing` token value, e.g. `token('motion.easing.inout.bold')`.
     */
    easing: MotionEasing;
    /**
     * Callback fired once the resize animation has completed,
     * or immediately if the dimension(s) did not change (no animation was needed).
     */
    onFinishMotion?: () => void;
    /**
     * Callback fired immediately before a resize animation starts, while the element is still at
     * its natural layout with no transition styles applied. Measurements taken here reflect the
     * size the element will settle at, rather than an intermediate animation frame.
     *
     * Not called on the initial render, under reduced motion, or when the dimension(s) did not
     * change (no animation was needed) - in all of those cases no motion starts.
     */
    onStartMotion?: () => void;
}
/**
 * `useResizing` animates dimension changes (width, height, or both) over state changes.
 * If the relevant dimension(s) haven't changed nothing will happen.
 *
 * Pass `dimension: 'width' | 'height' | 'both'` to choose which axis (or axes) to animate.
 *
 * __WARNING__: Potentially janky. This hook animates layout-affecting properties which are
 * [notoriously unperformant](https://firefox-source-docs.mozilla.org/performance/bestpractices.html#Get_familiar_with_the_pipeline_that_gets_pixels_to_the_screen).
 * Test your app over low powered devices, you may want to avoid this if you can see it impacting FPS.
 */
export declare const useResizing: ({ dimension, duration, easing, onFinishMotion, onStartMotion, }: ResizingOpts) => {
    ref: CallbackRef;
};
export {};