@atlaskit/motion/dist/types/resizing/height.d.ts

A set of utilities to apply motion in your application.

import React from 'react';
import { type CallbackRef } from '../utils/use-element-ref';
interface ResizingHeightOpts {
    /**
     * Duration as a `function`.
     * Will receive previous and next `height` and return the `duration`.
     *
     * By default this will match the [ADG specifications](https://atlassian.design) for how long motion should take.
     * Design specifications are still a work in progress.
     */
    duration?: (prevHeight: number, nextHeight: number) => number;
    /**
     * Timing function as a `function`.
     * This is handy for changing the curve depending on the user interaction.
     * Does the user interact [directly or indirectly](/packages/helpers/motion/docs/variables)?
     * You'll want to use an appropriate curve.
     * Will receive previous and next `height`, `duration`, and return the
     * [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function).
     *
     * By default this will assume indirect motion using `easeInOut`.
     */
    timingFunction?: (prevHeight: number, nextHeight: number, duration: number) => string;
}
/**
 * `useResizingHeight` animates height changes over state changes. If the height hasn't changed nothing will happen.
 *
 * __WARNING__: Potentially janky. This hook animates height which is
 * [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.
 *
 * See [examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/resizing-motions).
 */
export declare const useResizingHeight: ({ duration: calcDuration, timingFunction: calcTimingFunction, }?: ResizingHeightOpts) => {
    ref: CallbackRef;
};
/**
 * __ResizingHeight__
 *
 * Component which consumes the useResizingHook() under-the-hood. Its props are the same as the hooks opts.
 *
 * See [examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/resizing-motions).
 */
export declare const ResizingHeight: ({ children, ...props }: ResizingHeightOpts & {
    children: (opts: {
        ref: CallbackRef;
    }) => React.ReactNode;
}) => React.JSX.Element;
export {};