@postenbring/hedwig-react/dist/chunk-KPNAC2WN.mjs

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

import {
  useMergeRefs
} from "./chunk-3V4GFS46.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-YOSPWY5K.mjs";

// src/utils/auto-animate-height.tsx
import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var AutoAnimateHeight = forwardRef(
  (_a, ref) => {
    var _b = _a, {
      children,
      style,
      animationDuration = "quick",
      animationEasing = "normal",
      onTransitionEnd
    } = _b, rest = __objRest(_b, [
      "children",
      "style",
      "animationDuration",
      "animationEasing",
      "onTransitionEnd"
    ]);
    var _a2, _b2;
    const rootRef = useRef(null);
    const mergedRef = useMergeRefs([rootRef, ref]);
    const measurementRef = useRef(null);
    const [height, setHeight] = useState(
      void 0
    );
    const [clonedChildren, setClonedChildren] = useState(
      () => cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {})
    );
    useEffect(() => {
      var _a3;
      if (!rootRef.current) return;
      if (!measurementRef.current) return;
      if (document.body.scrollHeight === 0) return;
      const currentMeasurement = measurementRef.current;
      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
      let previouslyObservedHeight = newHeight;
      const resizeObserver = new ResizeObserver(() => {
        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
        if (resizedHeight === previouslyObservedHeight) return;
        previouslyObservedHeight = resizedHeight;
        setHeight({ height: resizedHeight, shouldAnimate: false });
      });
      resizeObserver.observe(currentMeasurement);
      setHeight({ height: newHeight, shouldAnimate: true });
      const nextClonedChildren = cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {});
      if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
        setClonedChildren(nextClonedChildren);
        return () => {
          resizeObserver.disconnect();
        };
      }
      const currentRoot = rootRef.current;
      function onTransitionEndHandler(e) {
        if (e.propertyName !== "height") return;
        setClonedChildren(nextClonedChildren);
      }
      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
      return () => {
        resizeObserver.disconnect();
        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
      };
    }, [children]);
    return /* @__PURE__ */ jsxs(
      "div",
      __spreadProps(__spreadValues({
        ref: mergedRef,
        onTransitionEnd,
        style: __spreadValues({
          position: "relative",
          overflow: "hidden",
          height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
          transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
          willChange: "height"
        }, style)
      }, rest), {
        children: [
          /* @__PURE__ */ jsx(
            "div",
            {
              "aria-hidden": true,
              ref: measurementRef,
              style: {
                position: "absolute",
                visibility: "hidden",
                pointerEvents: "none"
              },
              children
            }
          ),
          clonedChildren
        ]
      })
    );
  }
);
AutoAnimateHeight.displayName = "AutoAnimateHeight";

export {
  AutoAnimateHeight
};
//# sourceMappingURL=chunk-KPNAC2WN.mjs.map