# All files / src/layout useHorizontalLayoutTransition.ts

100% Statements 88/88
100% Branches 1/1
100% Functions 1/1
100% Lines 88/88

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
    891x
    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
    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
    82x
    82x
    82x
    82x
    82x
    82x
    82x
    82x
    82x
     "use client";
    import { cnb } from "cnbuilder";
    import { DEFAULT_SHEET_TIMEOUT } from "../sheet/Sheet.js";
    import type {
      CSSTransitionClassNames,
      CSSTransitionHookReturnValue,
      PreconfiguredCSSTransitionOptions,
      TransitionTimeout,
    } from "../transition/types.js";
    import { useCSSTransition } from "../transition/useCSSTransition.js";

    /**
     * @remarks \@since 6.0.0
     */
    export const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {
      appearDone: "rmd-layout-h--active",
      enter: "rmd-layout-h--enter",
      enterActive: "rmd-layout-h--active",
      enterDone: "rmd-layout-h--active",
      exit: "rmd-layout-h--exit",
    } satisfies Readonly<CSSTransitionClassNames>;

    /**
     * @remarks \@since 6.0.0
     */
    export interface HorizontalLayoutTransitionOptions
      extends PreconfiguredCSSTransitionOptions<HTMLElement> {
      /**
       * @see {@link DEFAULT_SHEET_TIMEOUT}
       * @defaultValue `DEFAULT_SHEET_TIMEOUT`
       */
      timeout?: TransitionTimeout;
      /**
       * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}
       * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`
       */
      classNames?: CSSTransitionClassNames;
    }

    /**
     * @example
     * ```tsx
     * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from "@react-md/core";
     * import type { ReactElement, ReactNode } from "react";
     *
     * interface Props {
     *   title: ReactNode;
     *   children: ReactNode;
     * }
     *
     * export default function Example({ title, children }: Props): ReactElement {
     *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();
     *   const { elementProps, className } = useHorizontalLayoutTransition({
     *     transitionIn: staticNavExpanded,
     *   });
     *
     *   return (
     *     <>
     *       <LayoutAppBar className={className}>
     *         <Button
     *           aria-label="Navigation"
     *           buttonType="icon"
     *           onClick={toggleStaticNav}
     *         >
     *           <MenuOutlinedIcon />
     *         '</Button>
     *         {title}
     *       </LayoutAppBar>
     *       <Main {...elementProps}>
     *         {children}
     *       </Main>
     *     </>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function useHorizontalLayoutTransition<
      E extends HTMLElement = HTMLElement,
    >(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {
      return useCSSTransition({
        timeout: DEFAULT_SHEET_TIMEOUT,
        classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,
        ...options,
        className: cnb("rmd-layout-h", options.className),
      });
    }