# All files / src/responsive-item ResponsiveItemOverlay.tsx

100% Statements 100/100
100% Branches 4/4
100% Functions 2/2
100% Lines 100/100

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
    1011x
    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
    11x
    11x
    11x
    11x
    11x
    11x
    11x
    11x
    11x
    11x
    11x
    11x
    11x
    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
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-responsive-item-overlay");

    /**
     * The overlay positions relative to the `MediaContainer` component.  Most of
     * the sizes are self-explanatory, but the `middle` position will be centered
     * vertically while `center` will be centered `horizontally`.
     *
     * @remarks \@since 6.0.0 Renamed from `MediaOverlayPosition` to
     * `ResponsiveItemOverlayProps`.
     */
    export type ResponsiveItemOverlayPosition =
      | "top"
      | "right"
      | "bottom"
      | "left"
      | "middle"
      | "center"
      | "absolute-center";

    /** @remarks \@since 6.0.0 */
    export interface ResponsiveItemOverlayClassNameOptions {
      className?: string;
      /** @defaultValue `"bottom"` */
      position?: ResponsiveItemOverlayPosition;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function responsiveItemOverlay(
      options: ResponsiveItemOverlayClassNameOptions = {}
    ): string {
      const { className, position = "bottom" } = options;

      return cnb(
        styles({
          [position]: true,
          horizontal:
            position !== "top" && position !== "bottom" && position !== "middle",
        }),
        className
      );
    }

    /**
     * @remarks \@since 6.0.0 Renamed from `MediaOverlayProps` to
     * `ResponsiveItemOverlayProps`.
     */
    export interface ResponsiveItemOverlayProps
      extends HTMLAttributes<HTMLSpanElement>,
        ResponsiveItemOverlayClassNameOptions {}

    /**
     * **Server Component**
     *
     * @example
     * Simple Example
     * ```tsx
     * import { ResponsiveItemContainer, ResponsiveItemOverlay } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return (
     *     <ResponsiveItemContainer>
     *       <img alt="" src="/some-image.png" />
     *       <ResponsiveItemOverlay>
     *         <Typography type="headline-5" margin="none">
     *           This appears at the bottom by default.
     *         </Typography>
     *       </ResponsiveItemOverlay>
     *     </ResponsiveItemContainer>
     *   );
     * }
     * ```
     *
     * @see {@link ResponsiveItemOverlayPosition}
     *
     * @remarks \@since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
     * and renders as a `<span>` instead of a `<div>`.
     */
    export const ResponsiveItemOverlay = forwardRef<
      HTMLSpanElement,
      ResponsiveItemOverlayProps
    >(function ResponsiveItemOverlay(props, ref) {
      const { className, children, position = "bottom", ...remaining } = props;

      return (
        <span
          {...remaining}
          ref={ref}
          className={responsiveItemOverlay({ className, position })}
        >
          {children}
        </span>
      );
    });