design-zystem 1.0.215 → 1.0.217

package/dist/index.js

@@ -2588,7 +2588,7 @@ var AnimatedContent = ({
 }) => {
   const innerRef = (0, import_react9.useRef)(null);
   const [height, setHeight] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
+  const recalc = (0, import_react9.useCallback)(() => {
     if (open && innerRef.current) {
       const full = innerRef.current.scrollHeight;
       setHeight(maxHeight ? Math.min(full, maxHeight) : full);
@@ -2596,6 +2596,13 @@ var AnimatedContent = ({
       setHeight(0);
     }
   }, [open, maxHeight]);
+  (0, import_react9.useEffect)(recalc, [recalc]);
+  (0, import_react9.useEffect)(() => {
+    if (!open || !innerRef.current) return;
+    const observer = new ResizeObserver(recalc);
+    observer.observe(innerRef.current);
+    return () => observer.disconnect();
+  }, [open, recalc]);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ContentWrapper, { $height: height, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ContentInner, { ref: innerRef, $maxHeight: maxHeight, children }) });
 };
 var Accordion = ({

package/dist/index.mjs

@@ -2508,7 +2508,7 @@ var AnimatedContent = ({
 }) => {
   const innerRef = useRef6(null);
   const [height, setHeight] = useState5(0);
-  useEffect6(() => {
+  const recalc = useCallback(() => {
     if (open && innerRef.current) {
       const full = innerRef.current.scrollHeight;
       setHeight(maxHeight ? Math.min(full, maxHeight) : full);
@@ -2516,6 +2516,13 @@ var AnimatedContent = ({
       setHeight(0);
     }
   }, [open, maxHeight]);
+  useEffect6(recalc, [recalc]);
+  useEffect6(() => {
+    if (!open || !innerRef.current) return;
+    const observer = new ResizeObserver(recalc);
+    observer.observe(innerRef.current);
+    return () => observer.disconnect();
+  }, [open, recalc]);
   return /* @__PURE__ */ jsx22(ContentWrapper, { $height: height, children: /* @__PURE__ */ jsx22(ContentInner, { ref: innerRef, $maxHeight: maxHeight, children }) });
 };
 var Accordion = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.215",
+  "version": "1.0.217",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",