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

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { forwardRef, useRef, useState } from "react";
import classNames from "classnames";
import useAnimationDuration from "../../hooks/useAnimationDuration.js";
import isInert from "../../utils/isInert.js";
import setRef from "../../utils/setRef.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Wrapper for collapsible content with height transition (except for
 * `prefers-reduce-motion` users)
 *
 * @see https://bifrost.intility.com/react/slideDown
 */
const SlideDown = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(26);
  let children;
  let className;
  let open;
  let props;
  let t1;
  if ($[0] !== t0) {
    ({
      open,
      eager: t1,
      children,
      className,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = open;
    $[4] = props;
    $[5] = t1;
  } else {
    children = $[1];
    className = $[2];
    open = $[3];
    props = $[4];
    t1 = $[5];
  }
  const eager = t1 === undefined ? false : t1;
  const animationDuration = useAnimationDuration();
  const [previousOpen, setPreviousOpen] = useState(open);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const wrapperRef = useRef(null);
  if (open !== previousOpen) {
    if (animationDuration !== 0) {
      setIsTransitioning(true);
    }
    setPreviousOpen(open);
  }
  let t2;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = e => {
      if (e.propertyName !== "grid-template-rows" || e.target !== wrapperRef.current) {
        return;
      }
      setIsTransitioning(false);
    };
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  const handleTransitionEnd = t2;
  let t3;
  if ($[7] !== ref) {
    t3 = r => {
      setRef(ref, r);
      setRef(wrapperRef, r);
    };
    $[7] = ref;
    $[8] = t3;
  } else {
    t3 = $[8];
  }
  const t4 = !open;
  let t5;
  if ($[9] !== t4) {
    t5 = isInert(t4);
    $[9] = t4;
    $[10] = t5;
  } else {
    t5 = $[10];
  }
  let t6;
  if ($[11] !== props) {
    t6 = e_0 => {
      props?.onTransitionEnd?.(e_0);
      handleTransitionEnd(e_0);
    };
    $[11] = props;
    $[12] = t6;
  } else {
    t6 = $[12];
  }
  const t7 = !open;
  const t8 = !isTransitioning && open;
  let t9;
  if ($[13] !== className || $[14] !== t7 || $[15] !== t8) {
    t9 = classNames(className, "bf-expand", {
      "bf-expand-closed": t7,
      "bf-expand-expanded": t8
    });
    $[13] = className;
    $[14] = t7;
    $[15] = t8;
    $[16] = t9;
  } else {
    t9 = $[16];
  }
  const t10 = (eager || open || isTransitioning) && children;
  let t11;
  if ($[17] !== t10) {
    t11 = /*#__PURE__*/_jsx("div", {
      children: t10
    });
    $[17] = t10;
    $[18] = t11;
  } else {
    t11 = $[18];
  }
  let t12;
  if ($[19] !== props || $[20] !== t11 || $[21] !== t3 || $[22] !== t5 || $[23] !== t6 || $[24] !== t9) {
    t12 = /*#__PURE__*/_jsx("div", {
      ref: t3,
      inert: t5,
      ...props,
      onTransitionEnd: t6,
      className: t9,
      children: t11
    });
    $[19] = props;
    $[20] = t11;
    $[21] = t3;
    $[22] = t5;
    $[23] = t6;
    $[24] = t9;
    $[25] = t12;
  } else {
    t12 = $[25];
  }
  return t12;
});
SlideDown.displayName = "SlideDown";
export default SlideDown;