@royaloperahouse/harmonic 0.18.3-d → 0.18.3-e

package/dist/harmonic.cjs.development.js

@@ -5902,21 +5902,43 @@ var Accordion = function Accordion(_ref) {
   var content = React.useRef(null);
   var timeoutRef = React.useRef(null);
   var rafRef = React.useRef(null);
+  var resizeObserverRef = React.useRef(null);
   React.useEffect(function () {
-    if (content != null && content.current && initOpen) {
+    if (content.current && initOpen) {
       setTextHeight(content.current.scrollHeight + "px");
     }
-  }, [content, initOpen]);
+  }, [initOpen]);
   React.useEffect(function () {
-    if (openAccordion && content != null && content.current) {
-      rafRef.current = window.requestAnimationFrame(function () {
-        var _content$current$scro, _content$current;
-        setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
-      });
-    } else if (!openAccordion) {
+    var el = content.current;
+    if (!el) return;
+    if (!openAccordion) {
       setTextHeight('0px');
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      return;
+    }
+    var updateHeight = function updateHeight() {
+      setTextHeight(el.scrollHeight + "px");
+    };
+    rafRef.current = window.requestAnimationFrame(updateHeight);
+    if ('ResizeObserver' in window) {
+      var ro = new ResizeObserver(updateHeight);
+      ro.observe(el);
+      resizeObserverRef.current = ro;
+      return function () {
+        ro.disconnect();
+        resizeObserverRef.current = null;
+      };
     }
-  }, [openAccordion, childrenVisibility, content, children]);
+    return function () {
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [openAccordion, childrenVisibility, children]);
   React.useEffect(function () {
     return function () {
       if (timeoutRef.current) {
@@ -5927,6 +5949,10 @@ var Accordion = function Accordion(_ref) {
         window.cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
     };
   }, []);
   var toggleAccordion = function toggleAccordion() {
@@ -5975,9 +6001,9 @@ var Accordion = function Accordion(_ref) {
     "aria-live": openAccordion ? 'polite' : 'off',
     tag: "div",
     size: "large"
-  }, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
+  }, childrenVisibility && (/*#__PURE__*/React__default.createElement(ChildrenContainer, {
     isVisible: childrenVisibility
-  }, children)));
+  }, children))));
 };
 
 var _templateObject$E;