# All files / src/segmented-button SegmentedButtonContainer.tsx

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

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
    651x
    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
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
     import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import {
      segmentedButtonContainerStyles,
      type SegmentedButtonContainerClassNameOptions,
    } from "./segmentedButtonContainerStyles.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface SegmentedButtonContainerProps
      extends HTMLAttributes<HTMLDivElement>,
        SegmentedButtonContainerClassNameOptions {
      children: ReactNode;
    }

    /**
     * **Server Component**
     *
     * Simple wrapper `div` to apply the segmented button container styles. You can
     * just use the {@link segmentedButtonContainerStyles} util function instead.
     *
     * @example
     * Without This Component
     * ```tsx
     * import {
     *   SegmentedButton,
     *   segmentedButtonContainerStyles,
     * } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * import { CustomWrapperComponent } from "./CustomWrapperComponent.jsx";
     *
     * function Example(): ReactElement {
     *   return (
     *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>
     *       <SegmentedButton>One</SegmentedButton>
     *       <SegmentedButton>Two</SegmentedButton>
     *       <SegmentedButton>Three</SegmentedButton>
     *     </CustomWrapperComponent>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export const SegmentedButtonContainer = forwardRef<
      HTMLDivElement,
      SegmentedButtonContainerProps
    >(function SegmentedButtonContainer(props, ref) {
      const { className, disableFullWidth, children, ...remaining } = props;

      return (
        <div
          {...remaining}
          ref={ref}
          className={segmentedButtonContainerStyles({
            className,
            disableFullWidth,
          })}
        >
          {children}
        </div>
      );
    });