import type { CSSTransitionClassNames, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions } from "./types.js"; /** * The default {@link TransitionTimeout} to use for horizontal and vertical * scale transitions. * * @since 2.0.0 * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`. */ export declare const DEFAULT_SCALE_TIMEOUT: { readonly enter: 200; readonly exit: 150; }; /** * The default {@link CSSTransitionClassNames} for a horizontal scale * transition. * * @since 2.0.0 * @since 6.0.0 The class names were updated to be prefixed with * `rmd-scale-transition` and renamed from `SCALE_CLASSNAMES` to * `DEFAULT_SCALE_CLASSNAMES`. */ export declare const DEFAULT_SCALE_CLASSNAMES: { readonly appear: "rmd-scale-transition--enter"; readonly appearActive: "rmd-scale-transition--enter-active"; readonly enter: "rmd-scale-transition--enter"; readonly enterActive: "rmd-scale-transition--enter-active"; readonly enterDone: ""; readonly exit: "rmd-scale-transition--exit"; readonly exitActive: "rmd-scale-transition--exit-active"; }; /** * The default {@link CSSTransitionClassNames} for a vertical scale transition. * * @since 2.0.0 * @since 6.0.0 The class names were updated to be prefixed with * `rmd-scale-y-transition` and merged with the {@link DEFAULT_SCALE_CLASSNAMES}. * It was also renamed from `SCALE_Y_CLASSNAMES` to * `DEFAULT_SCALE_Y_CLASSNAMES`. */ export declare const DEFAULT_SCALE_Y_CLASSNAMES: { readonly appear: "rmd-scale-transition--enter rmd-scale-transition--y-enter"; readonly appearActive: "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active"; readonly enter: "rmd-scale-transition--enter rmd-scale-transition--y-enter"; readonly enterActive: "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active"; readonly enterDone: ""; readonly exit: "rmd-scale-transition--exit rmd-scale-transition--y-exit"; readonly exitActive: "rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active"; }; /** * @typeParam E - The HTMLElement type used or the ref required for the * transition. * @since 4.0.0 */ export interface ScaleTransitionHookOptions extends PreconfiguredCSSTransitionOptions { /** * Boolean if the scale transition should be vertical instead of horizontal. * This really only changes the default value for the {@link classNames}. * * @defaultValue `false` */ vertical?: boolean; /** * @see {@link PreconfiguredCSSTransitionOptions.temporary} * @defaultValue `true` */ temporary?: boolean; /** * @see {@link vertical} * @see {@link DEFAULT_SCALE_CLASSNAMES} * @see {@link DEFAULT_SCALE_Y_CLASSNAMES} * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES` */ classNames?: CSSTransitionClassNames; } /** * Implements a scale transition that should generally be used for temporary * elements that are positioned via `position: absolute` or `position: fixed`. * * @example Dropdown Menu Example * ```tsx * import { Button } from "@react-md/core/button/Button"; * import { useFixedPositioning } from "@react-md/core/positioning/useFixedPositioning"; * import { useScaleTransition } from "@react-md/core/transition/useScaleTransition"; * import { type ReactElement, useRef, useState } from "react"; * * function Example(): ReactElement { * const buttonRef = useRef(null); * const [transitionIn, setTransitionIn] = useState(false); * const { style, transitionOptions } = useFixedPositioning({ * fixedTo: buttonRef, * }); * const { elementProps, rendered } = useScaleTransition({ * ...transitionOptions, * transitionIn, * vertical: true, * }); * * return ( * <> * * {rendered && ( *
* Some content within a menu *
* )} * * ); * } * ``` * * @see {@link https://react-md.dev/hooks/use-scale-transition | useScaleTransition Demos} * @see {@link https://react-md.dev/components/scale | Scale Demos} * @typeParam E - The HTMLElement type used or the ref required for the * transition. * @since 4.0.0 */ export declare function useScaleTransition(options: ScaleTransitionHookOptions): CSSTransitionHookReturnValue;