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

A set of utilities to apply motion in your application.

import { type StrictXCSSProp } from '@atlaskit/css';
import { Reanimate } from './reanimate';
import { type Transition } from './types';
export type CustomMotionXCSS = StrictXCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
type MotionState = 'init' | 'entering' | 'visible' | 'exiting' | 'hidden';
export interface UseMotionProps {
    /**
     * Called immediately before an entering or exiting motion starts. The transition is provided so
     * consumers can handle only one direction; callbacks that do not filter it run for both.
     */
    onStart?: (state: Transition) => void;
    /**
     * Will callback when the motion has finished in the particular direction.
     * If it finished entering direction will be `entering`.
     * And vice versa for `exiting`.
     */
    onFinish?: (state: Transition) => void;
    initialState?: MotionState;
}
export interface UseMotionResult<T extends HTMLElement = HTMLElement> {
    /**
     * Ref that __must__ be attached to the animated element. It is used internally to
     * measure the animation duration so the exit animation can complete before the
     * element is removed (via `ExitingPersistence`) and before `onFinish` is called.
     */
    ref: (node: T | null) => void;
    /**
     * Imperative handle to reanimate the motion. Intended for advanced use cases such
     * as exit-then-enter transitions.
     */
    reanimate: (value: Reanimate) => void;
    /**
     * The current motion state.
     */
    state: MotionState;
}
/**
 * __useMotion__
 *
 * A hook form of the `Motion` primitive. It manages the entering/exiting animation
 * lifecycle and returns `{ ref, reanimate, state }` so that motion can be applied to
 * an existing element __without__ introducing an extra wrapper element. The consumer
 * drives the animation styling from `state` (e.g. via a `cssMap`) and applies the
 * animation to their own element.
 *
 * The returned `ref` __must__ be attached to the animated element, otherwise exit
 * timing, `onFinish`, and `ExitingPersistence` removal will not work.
 */
export declare function useMotion<T extends HTMLElement = HTMLElement>({ onFinish: onFinishMotion, onStart: onStartMotion, initialState, }?: UseMotionProps): UseMotionResult<T>;
export {};