# All files / button FloatingActionButton.tsx

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

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
    1151x
    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
    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
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
     import { cnb } from "cnbuilder";
    import type { HTMLAttributes } from "react";
    import { forwardRef } from "react";
    import { bem } from "../utils";
    import { Button, type ButtonProps } from "./Button";
    import type { PropsWithRef } from "../types";

    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` and removed the
     * `null` option.
     */
    export type FloatingActionButtonPosition =
      | "bottom-left"
      | "bottom-right"
      | "top-left"
      | "top-right";

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

      /** @defaultValue `bottom-right` */
      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 = "bottom-right", 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 ButtonProps,
        FloatingActionButtonClassNameOptions {
      /**
       * Any additional props to provide the to `FAB` container element when the
       * `floating` prop is provided
       */
      containerProps?: PropsWithRef<
        HTMLAttributes<HTMLSpanElement>,
        HTMLSpanElement
      >;
    }

    /**
     * @remarks \@since 6.0.0
     * @internal
     */
    export const FloatingActionButton = forwardRef<
      HTMLButtonElement,
      FloatingActionButtonProps
    >(function FloatingActionButton(props, ref) {
      const {
        position = "bottom-right",
        absolute = false,
        containerProps,
        theme = "secondary",
        themeType = "contained",
        buttonType = "icon",
        ...remaining
      } = props;

      return (
        <span
          {...containerProps}
          className={fab({
            className: containerProps?.className,
            position,
            absolute,
          })}
        >
          <Button
            ref={ref}
            {...remaining}
            theme={theme}
            themeType={themeType}
            buttonType={buttonType}
          />
        </span>
      );
    });