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

A set of utilities to apply motion in your application.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';
import type { XCSSProp } from '@compiled/react';
import { type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
import { type Motion as MotionToken } from '@atlaskit/tokens/css-type-schema';
import { type Transition } from './types';
export type CustomMotionXCSS = XCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
/**
 * Supported reanimate values.
 * 'enter' will re-enter the animation.
 * 'exit-then-enter' will exit the animation and then enter it again.
 */
export declare enum Reanimate {
    enter = "enter",
    exit_then_enter = "exit_then_enter"
}
export interface MotionRef {
    /**
     * Reanimates the motion.
     * @param value - The value to reanimate.
     */
    reanimate: (value: Reanimate) => void;
}
export interface MotionProps {
    /**
     * 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;
    /**
     * Children to be animated.
     */
    children: React.ReactNode;
    /**
     * Motion token for the entering animation.
     */
    enteringAnimation?: MotionToken;
    /**
     * CSS properties to apply to the entering animation.
     */
    enteringAnimationXcss?: CustomMotionXCSS;
    /**
     * Motion token for the exiting animation.
     */
    exitingAnimation?: MotionToken;
    /**
     * CSS properties to apply to the exiting animation.
     */
    exitingAnimationXcss?: CustomMotionXCSS;
    /**
     * CSS properties to apply to the motion container.
     */
    xcss?: XCSSProp<XCSSAllProperties, XCSSAllPseudos>;
    /**
     * Inline styles to apply to the motion container div.
     * These are merged with any animation styles managed internally.
     */
    style?: React.CSSProperties;
    /**
     * A `testId` prop is provided for specified elements,
     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
     * serving as a hook for automated tests.
     */
    testId?: string;
}
/**
 * __Motion__
 *
 * A motion primitive that can be used to animate the entry and exit of components.
 */
declare const Motion: React.ForwardRefExoticComponent<React.PropsWithoutRef<MotionProps> & React.RefAttributes<any>>;
export default Motion;