@intility/bifrost-react/dist/components/FloatingArea/FloatingArea.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { forwardRef, useRef } from "react";
import classNames from "classnames";
import useScrollDirection from "../../hooks/useScrollDirection.js";
import setRef from "../../utils/setRef.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * FloatingArea appears in bottom right corner when user is scrolling upwards.
 * Only use a single `<FloatingArea>` at a time.
 *
 * @see https://bifrost.intility.com/react/floatingArea
 */
const FloatingArea = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(17);
  let children;
  let className;
  let props;
  let t1;
  if ($[0] !== t0) {
    ({
      className,
      children,
      noPadding: t1,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = props;
    $[4] = t1;
  } else {
    children = $[1];
    className = $[2];
    props = $[3];
    t1 = $[4];
  }
  const noPadding = t1 === undefined ? false : t1;
  const divRef = useRef(null);
  let t2;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = {
      elementRef: divRef
    };
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  const scrollDirection = useScrollDirection(t2);
  let t3;
  if ($[6] !== ref) {
    t3 = r => {
      setRef(ref, r);
      setRef(divRef, r);
    };
    $[6] = ref;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  const t4 = scrollDirection !== "down";
  const t5 = !noPadding;
  let t6;
  if ($[8] !== className || $[9] !== t4 || $[10] !== t5) {
    t6 = classNames(className, "bf-floating-area bf-notch", {
      "bf-scrolled-up": t4,
      "bf-page-padding": t5
    });
    $[8] = className;
    $[9] = t4;
    $[10] = t5;
    $[11] = t6;
  } else {
    t6 = $[11];
  }
  let t7;
  if ($[12] !== children || $[13] !== props || $[14] !== t3 || $[15] !== t6) {
    t7 = /*#__PURE__*/_jsx("div", {
      ref: t3,
      className: t6,
      ...props,
      children: children
    });
    $[12] = children;
    $[13] = props;
    $[14] = t3;
    $[15] = t6;
    $[16] = t7;
  } else {
    t7 = $[16];
  }
  return t7;
});
FloatingArea.displayName = "FloatingArea";
export default FloatingArea;