# All files / src/transition useMaxWidthTransition.ts

100% Statements 40/40
100% Branches 5/5
100% Functions 1/1
100% Lines 40/40

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
    411x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    55x
    55x
    55x
    55x
    55x
    55x
    29x
    29x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
     "use client";
    import { cnb } from "cnbuilder";
    import type { ReactNode } from "react";
    import { Children, cloneElement, isValidElement } from "react";
    import { maxWidthTransition } from "./maxWidthTransition.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface MaxWidthTransitionOptions {
      element: ReactNode;
      transitionIn: boolean;

      className?: string;
      disabled?: boolean;
      disableTransition?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function useMaxWidthTransition(
      options: MaxWidthTransitionOptions
    ): ReactNode {
      const { element, disabled, disableTransition, transitionIn, className } =
        options;

      if (disabled || !isValidElement<{ className?: string }>(element)) {
        return element;
      }

      const child = Children.only(element);
      return cloneElement(element, {
        className: maxWidthTransition({
          className: cnb(child.props.className, className),
          disabled: disableTransition,
          transitionIn,
        }),
      });
    }