# All files / layout LayoutWindowSplitter.tsx

100% Statements 125/125
66.66% Branches 2/3
100% Functions 1/1
100% Lines 125/125

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
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    1261x
    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
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
    26x
     "use client";
    import { forwardRef, useMemo } from "react";
    import type { DefinedCSSVariableName } from "../theme/types.js";
    import { useCSSVariables } from "../theme/useCSSVariables.js";
    import type { BaseWindowSplitterProps } from "../window-splitter/WindowSplitter.js";
    import { WindowSplitter } from "../window-splitter/WindowSplitter.js";
    import type { WindowSplitterWidgetProps } from "../window-splitter/useControlledWindowSplitter.js";
    import type { LayoutWindowSplitterClassNameOptions } from "./layoutWindowSplitterStyles.js";
    import { layoutWindowSplitter } from "./layoutWindowSplitterStyles.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface LayoutWindowSplitterProps
      extends WindowSplitterWidgetProps<HTMLButtonElement>,
        Omit<
          BaseWindowSplitterProps,
          keyof WindowSplitterWidgetProps<HTMLButtonElement>
        >,
        LayoutWindowSplitterClassNameOptions {
      /** @defaultValue `"Resize Navigation"` */
      "aria-label"?: string;

      /**
       * The current navigation width (in px).
       */
      navWidth: number;
    }

    /**
     * **Client Component**
     *
     * This component is used to resize the `LayoutNav` component.
     *
     * @see {@link useResizableExpandableLayout} for a default implementation for
     * this component.
     *
     * @example
     * Dynamic Resizing
     * ```tsx
     * import {
     *   LayoutNav,
     *   LayoutWindowSplitter,
     *   Main,
     *   NoSsr,
     *   useWindowSize,
     *   useWindowSplitter,
     * } from "@react-md/core";
     * import type { ReactElement, PropsWithChildren } from "react"
     *
     * function MyWindowSplitter(): ReactElement {
     *   const { width } = useWindowSize({ disableHeight: true });
     *   const min = 96;
     *   const max = Math.max(600, width * .7);
     *
     *   const { value, splitterProps } = useWindowSplitter({
     *     min,
     *     max,
     *     defaultValue: 256,
     *   });
     *
     *   return (
     *     <LayoutWindowSplitter
     *       aria-controls="layout-nav-id"
     *       {...splitterProps}
     *       value={value}
     *     />
     *   );
     * }
     *
     * function Layout({ children }: PropsWithChildren): ReactElement {
     *   return (
     *     <>
     *       <LayoutNav id="layout-nav" {...otherProps}>
     *         <YourNavigation />
     *       </LayoutNav>
     *       // only required when using SSR
     *       <NoSsr>
     *         <MyWindowSplitter />
     *       </NoSsr>
     *       <Main navOffset>
     *         {children}
     *       </Main>
     *     </>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export const LayoutWindowSplitter = forwardRef<
      HTMLButtonElement,
      LayoutWindowSplitterProps
    >(function LayoutWindowSplitter(props, ref) {
      const {
        "aria-labelledby": ariaLabelledBy,
        "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Resize Navigation",
        appBarOffset,
        disableResponsive,
        className,
        navWidth,
        ...remaining
      } = props;

      useCSSVariables<DefinedCSSVariableName>(
        useMemo(
          () => [{ name: "--rmd-layout-size", value: `${navWidth}px` }],
          [navWidth]
        )
      );

      return (
        <WindowSplitter
          {...remaining}
          ref={ref}
          aria-label={ariaLabel as string}
          aria-labelledby={ariaLabelledBy}
          className={layoutWindowSplitter({
            appBarOffset,
            disableResponsive,
            className,
          })}
        />
      );
    });