import { type CSSProperties } from "react"; import { type CSSTransitionElementProps, type CSSTransitionHookReturnValue, type PreconfiguredCSSTransitionOptions, type TransitionTimeout } from "./types.js"; /** * @since 2.0.0 */ export declare const DEFAULT_COLLAPSE_TIMEOUT: { readonly enter: 250; readonly exit: 200; }; /** * @since 4.0.0 */ export interface CollapseConfigurationStyle { /** * The minimum height that the collapsed element can be which defaults to `0`. * This can either be a number of pixels or a string CSS height value. * * Setting this value to any non-zero value will allow for the element to * shrink to the defined min-height, and then expand to the full height once * no longer collapsed. * * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options * are all set to `0` (default), the child will be removed from the DOM while * collapsed. * * @defaultValue `0` */ minHeight?: number | string; /** * The minimum padding-top that the collapsed element can be which defaults to * `0`. This can either be a number of pixels or a string CSS `padding-top` * value. * * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options * are all set to `0` (default), the child will be removed from the DOM while * collapsed. * * @defaultValue `0` */ minPaddingTop?: number | string; /** * The minimum padding-bottom that the collapsed element can be which defaults * to `0`. This can either be a number of pixels or a string CSS * `padding-bottom` value. * * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options * are all set to `0` (default), the child will be removed from the DOM while * collapsed. * * @defaultValue `0` */ minPaddingBottom?: number | string; } /** * @since 4.0.0 */ export interface CollapseStyle extends CollapseConfigurationStyle { /** * This will only be set when the {@link TransitionStage} is `"entering"` or * `"exiting"` as `"${timeout}ms"`. */ transitionDuration?: string; } /** * These props (and `ref`) **must** be passed to a DOM element for the collapse * transition to work. * * @typeParam E - An HTMLElement type used for the ref required for the * transition. * @since 4.0.0 */ export interface CollapseElementProps extends CSSTransitionElementProps { /** * A merged styled object required for the collapse transition to work. * * @see {@link CollapseStyle} * @see {@link CollapseTransitionHookOptions.style} */ style: CSSProperties; } /** * @typeParam E - An HTMLElement type used for the ref required for the * transition. * @since 4.0.0 */ export interface CollapseTransitionHookOptions extends Omit, "exitedHidden">, CollapseConfigurationStyle { /** * An optional style to merge with the required collapse transition styles. * * If any keys from the {@link CollapseStyle} are included in this object, * these styles will override and possibly break the collapse transition. */ style?: CSSProperties; /** * * @see {@link DEFAULT_COLLAPSE_TIMEOUT} * @defaultValue `DEFAULT_COLLAPSE_TIMEOUT` */ timeout?: TransitionTimeout; /** * * @defaultValue `minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0` */ temporary?: boolean; } /** * @typeParam E - An HTMLElement type used for the ref required for the * transition. * @since 4.0.0 */ export interface CollapseTransitionHookReturnValue extends CSSTransitionHookReturnValue, CollapseElementProps { /** * This is just a convenience object so that you don't need to destructure as * many variables to pass to an element. * * @example Simple Usage * ```tsx * const { elementProps, rendered } = useCollapseTransition({ * // ...options * transitionIn, * }); * * if (!rendered) { * return null * } * * return
{children}
; * * // This is the long-hand version * const { ref, style, className, hidden, rendered } = useCollapseTransition({ * // ...options * transitionIn, * }); * * if (!rendered) { * return null * } * * return ( * * ); * ``` */ elementProps: Readonly>; } /** * This hook is used to create a transition to collapse and expand an element * **inline** with other content like an accordion by animating the * `max-height`, `padding-top`, and `padding-bottom` CSS properties. The default * behavior is to hide the element completely while collapsed, but providing the * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this * work like a "See More"/"Preview" type of element * * @example Simple Example * ```tsx * import { Button } from "@react-md/core/button/Button"; * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition"; * import { Typography } from "@react-md/core/typography/Typography"; * import { type ReactElement, useState } from "react"; * * function Example(): ReactElement { * const [collapsed, setCollapsed] = useState(true); * const { elementProps, rendered } = * useCollapseTransition({ * transitionIn: !collapsed, * // If the collapsible element should maintain state by not unmounting * // while collapsed, uncomment this next line * // temporary: false, * }); * * return ( * <> * * {rendered && ( *
* Stuff that should be collapsed *
Whatever content...
*
* )} * * ); * } * ``` * * @example See More Example * ```tsx * import { Button } from "@react-md/core/button/Button"; * import { IconRotator } from "@react-md/core/icon/IconRotator"; * import KeyboardArrowDownIcon from "@react-md/material-icons/KeyboardArrowDownIcon" * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition"; * import { Typography } from "@react-md/core/typography/Typography"; * import { type ReactElement, useState } from "react"; * * import styles from "./Example.module.scss"; * // pretend styles: * // * // .container { * // padding: 1rem; * // position: relative; * // } * // * // .button { * // position: absolute; * // right: 0; * // top: 0; * // } * * * function Example(): ReactElement { * const [collapsed, setCollapsed] = useState(true); * const { elementProps } = * useCollapseTransition({ * transitionIn: !collapsed, * minHeight: 120, * minPaddingTop: 16, * className: styles.container, * }); * * return ( *
* * *
* ); * } * ``` * * @see {@link https://react-md.dev/hooks/use-collapse-transition | useCollapseTransition Demos} * @see {@link https://react-md.dev/components/collapse | Collapse Demos} * @typeParam E - An HTMLElement type used for the ref required for the * transition. * @since 4.0.0 */ export declare function useCollapseTransition(options: CollapseTransitionHookOptions): CollapseTransitionHookReturnValue;