@postenbring/hedwig-react 0.0.61 → 0.0.62

package/dist/{chunk-2LKUHKL4.mjs → chunk-Q6REETZD.mjs}

@@ -28,6 +28,7 @@ var AutoAnimateHeight = forwardRef(
       "animationDuration",
       "animationEasing"
     ]);
+    const timeoutRef = useRef(null);
     const measurementRef = useRef(null);
     const [height, setHeight] = useState(void 0);
     const [clonedChildren, setClonedChildren] = useState(
@@ -36,13 +37,18 @@ var AutoAnimateHeight = forwardRef(
     useEffect(() => {
       if (measurementRef.current) {
         const { height: newHeight } = measurementRef.current.getBoundingClientRect();
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         if (newHeight < (height != null ? height : 0)) {
-          flushSync(() => {
-            setHeight(newHeight);
-          });
           setTimeout(() => {
-            setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
-          }, animationDurationToValue[animationDuration]);
+            flushSync(() => {
+              setHeight(newHeight);
+            });
+            timeoutRef.current = setTimeout(() => {
+              setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
+            }, animationDurationToValue[animationDuration]);
+          });
         } else {
           setHeight(newHeight);
           setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
@@ -85,4 +91,4 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
 export {
   AutoAnimateHeight
 };
-//# sourceMappingURL=chunk-2LKUHKL4.mjs.map
+//# sourceMappingURL=chunk-Q6REETZD.mjs.map

package/dist/chunk-Q6REETZD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n  quick: 100,\n  normal: 300,\n  slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n  /**\n   * Time of the animation, using the hedwig animation tokens\n   * quick: 0.1s\n   * normal: 0.3s\n   * slow: 0.7s\n   *\n   * default is \"quick\"\n   */\n  animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n  /**\n   * Which hedwig easing function to use, default is \"normal\"\n   */\n  animationEasing?: \"in\" | \"out\" | \"normal\";\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        as: Component = \"div\",\n        children,\n        style,\n        animationDuration = \"quick\",\n        animationEasing = \"normal\",\n        ...rest\n      },\n      ref,\n    ) => {\n      const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<number | undefined>(undefined);\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n      useEffect(() => {\n        if (measurementRef.current) {\n          const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          if (newHeight < (height ?? 0)) {\n            // If the children are shrinking, hold off on replacing until the animation is done\n            // This way we don't get a sudden flash of empty content\n            setTimeout(() => {\n              flushSync(() => {\n                setHeight(newHeight);\n              });\n              timeoutRef.current = setTimeout(() => {\n                setClonedChildren(cloneElement(<>{children}</>, {}));\n              }, animationDurationToValue[animationDuration]);\n            });\n          } else {\n            setHeight(newHeight);\n            setClonedChildren(cloneElement(<>{children}</>, {}));\n          }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={ref}\n          style={{\n            overflow: \"hidden\",\n            height,\n            transitionProperty: \"height\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n            ...style,\n          }}\n          {...rest}\n        >\n          <div\n            aria-hidden\n            ref={measurementRef}\n            style={{\n              position: \"absolute\",\n              visibility: \"hidden\",\n            }}\n          >\n            {children}\n          </div>\n          {clonedChildren}\n        </Component>\n      );\n    },\n  );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;AAAA,SAAS,cAAc,YAAY,WAAW,QAAQ,gBAAgB;AACtE,SAAS,iBAAiB;AAoDL,wBA6Bb,YA7Ba;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,oBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,OAA8B,IAAI;AACrD,UAAM,iBAAiB,OAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAA0B,MACpE,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,cAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,sBAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,gCAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,4BAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACF,kBAAkB,cAAc;","names":[]}

package/dist/index-no-css.js

@@ -1516,6 +1516,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
       "animationDuration",
       "animationEasing"
     ]);
+    const timeoutRef = (0, import_react24.useRef)(null);
     const measurementRef = (0, import_react24.useRef)(null);
     const [height, setHeight] = (0, import_react24.useState)(void 0);
     const [clonedChildren, setClonedChildren] = (0, import_react24.useState)(
@@ -1524,13 +1525,18 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
     (0, import_react24.useEffect)(() => {
       if (measurementRef.current) {
         const { height: newHeight } = measurementRef.current.getBoundingClientRect();
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         if (newHeight < (height != null ? height : 0)) {
-          (0, import_react_dom.flushSync)(() => {
-            setHeight(newHeight);
-          });
           setTimeout(() => {
-            setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
-          }, animationDurationToValue[animationDuration]);
+            (0, import_react_dom.flushSync)(() => {
+              setHeight(newHeight);
+            });
+            timeoutRef.current = setTimeout(() => {
+              setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
+            }, animationDurationToValue[animationDuration]);
+          });
         } else {
           setHeight(newHeight);
           setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));