# All files / src/transition Slide.tsx

97.87% Statements 92/94
50% Branches 1/2
100% Functions 1/1
97.87% Lines 92/94

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    951x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x

    67x
    67x
    67x
    67x
    67x
    67x
    67x
    1x
     "use client";
    import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import {
      type CSSTransitionComponentProps,
      type TransitionActions,
      type TransitionTimeout,
    } from "./types.js";
    import {
      DEFAULT_SLIDE_TRANSITION_TIMEOUT,
      useSlideTransition,
    } from "./useSlideTransition.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-slide-duration"?: string | number;
      }
    }

    /** @remarks \@since 6.0.0 */
    export interface SlideProps
      extends HTMLAttributes<HTMLDivElement>,
        CSSTransitionComponentProps,
        TransitionActions {
      /**
       * Set this to `true` to animate this slide into view within a
       * `SlideContainer`. When this switches from `true` to `false`, it will
       * animate out.
       */
      active: boolean;

      /** @defaultValue {@link DEFAULT_SLIDE_TRANSITION_DURATION} */
      timeout?: TransitionTimeout;
      children: ReactNode;
    }

    /**
     * **Client Component**
     *
     * A reasonable default for handling a slide transition using
     * {@link useSlideTransition}.
     *
     * @see {@link SlideContainer} for example usage.
     * @remarks \@since 6.0.0
     */
    export const Slide = forwardRef<HTMLDivElement, SlideProps>(
      function Slide(props, nodeRef) {
        const {
          active,
          appear,
          enter,
          exit,
          onEnter,
          onEntering,
          onEntered,
          onExit,
          onExiting,
          onExited,
          className,
          children,
          timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,
          temporary = false,
          exitedHidden = true,
          ...remaining
        } = props;

        const { rendered, elementProps } = useSlideTransition({
          nodeRef,
          appear,
          enter,
          exit,
          onEnter,
          onEntering,
          onEntered,
          onExit,
          onExiting,
          onExited,
          className,
          timeout,
          temporary,
          transitionIn: active,
          exitedHidden,
        });

        if (!rendered) {
          return null;
        }

        return (
          <div {...remaining} {...elementProps}>
            {children}
          </div>
        );
      }
    );