# All files / src/button FloatingActionButton.tsx

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

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
    1001x
    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
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1063x
    1063x
    1063x
    1063x
    1063x
    1063x
    1063x
    1063x
    1056x
    1056x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { bem } from "../utils/bem.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-fab-offset"?: string | number;
      }
    }

    const styles = bem("rmd-fab");

    /**
     * The position within the viewport for the floating action button.
     *
     * @remarks \@since 6.0.0 This was renamed from `FABPosition`
     */
    export type FloatingActionButtonPosition =
      | "bottom-left"
      | "bottom-right"
      | "top-left"
      | "top-right"
      | null;

    /**
     * @remarks \@since 6.0.0
     * @internal
     */
    export interface FloatingActionButtonClassNameOptions {
      className?: string;

      /** @defaultValue `null` */
      position?: FloatingActionButtonPosition;

      /**
       * @defaultValue `false`
       */
      absolute?: boolean;
    }

    /**
     * FAB = Floating Action Button
     *
     * @remarks \@since 6.0.0
     * @internal
     */
    export function fab(options: FloatingActionButtonClassNameOptions): string {
      const { className, position = null, absolute = false } = options;

      return cnb(
        styles({
          tl: position === "top-left",
          tr: position === "top-right",
          bl: position === "bottom-left",
          br: position === "bottom-right",
          absolute,
        }),
        className
      );
    }

    /** @remarks \@since 6.0.0 */
    export interface FloatingActionButtonProps
      extends HTMLAttributes<HTMLSpanElement>,
        FloatingActionButtonClassNameOptions {}

    /**
     * @remarks \@since 6.0.0
     * @internal
     */
    export const FloatingActionButton = forwardRef<
      HTMLSpanElement,
      FloatingActionButtonProps
    >(function FloatingActionButton(props, ref) {
      const {
        children,
        className,
        position = null,
        absolute = false,
        ...remaining
      } = props;
      if (!position) {
        return <>{children}</>;
      }

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