import * as React from 'react'; export type Duration = 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; export type Delay = 'short' | 'medium' | 'long'; export type Direction = 'topToBottom' | 'bottomToTop' | 'leftToRight' | 'rightToLeft'; export type FadeIn = { delay?: Delay; duration: Duration; easing?: 'enterEasing' | 'standardEasing'; }; export type FadeOut = { delay?: Delay; duration: Duration; easing?: 'exitEasing' | 'standardEasing'; }; export type MoveIn = { delay?: Delay; direction: Direction; distance: string; duration: Duration; easing?: 'enterEasing' | 'standardEasing'; }; export type MoveOut = { delay?: Delay; direction: Direction; distance: string; duration: Duration; easing?: 'exitEasing' | 'standardEasing'; }; export type Expand = { delay?: Delay; direction: Direction; duration: Duration; easing?: 'enterEasing' | 'standardEasing'; }; export type Collapse = { delay?: Delay; direction: Direction; duration: Duration; easing?: 'exitEasing' | 'standardEasing'; }; export type ScaleUp = { delay?: Delay; direction: 'center' | 'top' | 'topEnd' | 'right' | 'bottomEnd' | 'bottom' | 'bottomStart' | 'left' | 'topStart'; duration: Duration; easing?: 'enterEasing' | 'standardEasing'; scale: string; }; export type ScaleDown = { delay?: Delay; direction: 'center' | 'top' | 'topEnd' | 'right' | 'bottomEnd' | 'bottom' | 'bottomStart' | 'left' | 'topStart'; duration: Duration; easing?: 'exitEasing' | 'standardEasing'; scale: string; }; export type EnterAnimation = { fadeIn?: FadeIn | boolean; moveIn?: MoveIn | boolean; expand?: Expand | boolean; scaleUp?: ScaleUp | boolean; }; export type ExitAnimation = { fadeOut?: FadeOut | boolean; moveOut?: MoveOut | boolean; collapse?: Collapse | boolean; scaleDown?: ScaleDown | boolean; }; export type TransitionProps = { /** Shows enter animation on component mount. */ animateOnLoad?: boolean; /** Applies a data-hook HTML attribute to be used in the tests. */ dataHook?: string; /** Allows to render any component as a child item. */ children?: React.ReactNode; /** Sets a type of animation that happens on enter animation. * - fadeIn - ```javascript { delay?: 'short' | 'medium' | 'long'; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'enterEasing' | 'standardEasing'; } ``` * - moveIn - ```javascript { delay?: 'short' | 'medium' | 'long'; direction: | 'topToBottom' | 'bottomToTop' | 'leftToRight' | 'rightToLeft'; distance: string; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'enterEasing' | 'standardEasing'; } ``` * - expand - ```javascript { delay?: 'short' | 'medium' | 'long'; direction: | 'topToBottom' | 'bottomToTop' | 'leftToRight' | 'rightToLeft'; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'enterEasing' | 'standardEasing'; } ``` * - scaleUp - ```javascript { delay?: 'short' | 'medium' | 'long'; direction: | 'center' | 'top' | 'topEnd' | 'right' | 'bottomEnd' | 'bottom' | 'bottomStart' | 'left' | 'topStart'; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'enterEasing' | 'standardEasing'; scale: string; } ``` */ enterAnimation?: EnterAnimation; /** Sets a type of animation that happens on exit animation. * - fadeOut - ```javascript { delay?: 'short' | 'medium' | 'long'; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'exitEasing' | 'standardEasing'; } ``` * - moveOut - ```javascript { delay?: 'short' | 'medium' | 'long'; direction: | 'topToBottom' | 'bottomToTop' | 'leftToRight' | 'rightToLeft'; distance: string; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'exitEasing' | 'standardEasing' } ``` * - collapse - ```javascript { delay?: 'short' | 'medium' | 'long'; direction: | 'topToBottom' | 'bottomToTop' | 'leftToRight' | 'rightToLeft'; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'exitEasing' | 'standardEasing'; } ``` * - scaleDown - ```javascript { delay?: 'short' | 'medium' | 'long'; direction: | 'center' | 'top' | 'topEnd' | 'right' | 'bottomEnd' | 'bottom' | 'bottomStart' | 'left' | 'topStart'; duration: | 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02'; easing?: 'exitEasing' | 'standardEasing'; scale: string; } ``` */ exitAnimation?: ExitAnimation; /** Lazy-mounts the component. If false, will be mounted immediately. It true, will be mounted with first enter. */ mountOnEnter?: boolean; /** Defines a callback function which is called immediately after the animation starts. */ onStart?: () => void; /** Defines a callback function which is called immediately after the animation ends. */ onEnd?: () => void; /** Shows animation when set to true. */ show?: boolean; /** Unmounts the component after it finishes exiting. If false, will stay mounted after exit. */ unmountOnExit?: boolean; /** className to be applied to the root element. */ className?: string; }; //# sourceMappingURL=Transition.types.d.ts.map