Extract from a9a41362efce7723da69f2bc19d1836b5efb8c41

lib/components/Block/Block.js

@@ -1,27 +1,27 @@
-"use strict";var U=Object.defineProperty,M=Object.defineProperties;var E=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var y=(e,t,r)=>t in e?U(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,A=(e,t)=>{for(var r in t||(t={}))$.call(t,r)&&y(e,r,t[r]);if(u)for(var r of u(t))j.call(t,r)&&y(e,r,t[r]);return e},I=(e,t)=>M(e,E(t));var k=(e,t)=>{var r={};for(var o in e)$.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&u)for(var o of u(e))t.indexOf(o)<0&&j.call(e,o)&&(r[o]=e[o]);return r};var i=require("react/jsx-runtime"),l=require("react"),f=require("styled-components"),a=require("../../theme/theme.js"),F=require("../../icons/ArrowDownIcon.js"),G=require("../../icons/ArrowUpIcon.js"),J=require("../IconButton/IconButton.js");function _(e){return e&&e.__esModule?e:{default:e}}var K=_(l),s=_(f);const q=100,P=s.default.div`
+"use strict";var U=Object.defineProperty,E=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var j=(e,t,r)=>t in e?U(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,k=(e,t)=>{for(var r in t||(t={}))A.call(t,r)&&j(e,r,t[r]);if(f)for(var r of f(t))I.call(t,r)&&j(e,r,t[r]);return e},_=(e,t)=>E(e,F(t));var q=(e,t)=>{var r={};for(var o in e)A.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&f)for(var o of f(e))t.indexOf(o)<0&&I.call(e,o)&&(r[o]=e[o]);return r};var i=require("react/jsx-runtime"),c=require("react"),h=require("styled-components"),l=require("../../theme/theme.js"),G=require("../../icons/ArrowDownIcon.js"),J=require("../../icons/ArrowUpIcon.js"),K=require("../IconButton/IconButton.js");function C(e){return e&&e.__esModule?e:{default:e}}var L=C(c),u=C(h);const R=100,P=u.default.div`
   display: flex;
   align-items: center;
   column-gap: 10px;
   justify-content: space-between;
-`,Q=s.default.div``,V=s.default.div`
+`,Q=u.default.div``,V=u.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 24px;
-  color: ${a.getColor("grey",140)};
-`,W=s.default.div`
+  color: ${l.getColor("grey",140)};
+`,W=u.default.div`
   overflow-wrap: break-word;
   white-space: break-spaces;
   margin-top: ${({$height:e,isCollapsable:t})=>e===0&&t?0:10}px;
-  ${({isCollapsable:e,$height:t,$overflow:r,shouldAnimate:o})=>e&&f.css`
+  ${({isCollapsable:e,$height:t,$overflow:r,shouldAnimate:o})=>e&&h.css`
       max-height: ${t}px;
       overflow: ${r};
-      ${o&&f.css`
-        transition: all ${q}ms ease-in-out;
+      ${o&&h.css`
+        transition: all ${R}ms ease-in-out;
         transition-property: max-height, margin-top;
       `}
     `}
-`,X=s.default.div`
+`,X=u.default.div`
   box-sizing: border-box;
   padding: 10px 15px;
   border-style: solid;
@@ -30,12 +30,12 @@
   display: flex;
   flex-direction: column;
   font-family: inherit;
-  font-size: ${a.getFontSize("default")};
+  font-size: ${l.getFontSize("default")};
   font-weight: 400;
-  background-color: ${a.getColor("white")};
-  border-color: ${a.getColor("grey",80)};
+  background-color: ${l.getColor("white")};
+  border-color: ${l.getColor("grey",80)};
 
   &:hover {
-    background-color: ${a.getColor("grey",20)};
+    background-color: ${l.getColor("grey",20)};
   }
-`,Y=K.default.forwardRef((Z,T)=>{var x=Z,{title:e,actions:t,ariaDescribedBy:r,ariaLabel:o,ariaLabelledBy:C,isOpen:n,collapseButtonLabel:h,onCollapse:c,children:g}=x,R=k(x,["title","actions","ariaDescribedBy","ariaLabel","ariaLabelledBy","isOpen","collapseButtonLabel","onCollapse","children"]);const[B,z]=l.useState(0),[v,D]=l.useState(!1),w=l.useRef(null),d=h!==void 0&&c!==void 0&&n!==void 0,H=()=>c==null?void 0:c(!n);return l.useEffect(()=>{if(!d)return;z(N=>{var b,p;const m=(p=(b=w.current)==null?void 0:b.scrollHeight)!=null?p:0;return m===0?N:m});const S=window.setTimeout(()=>{D(!0)},q);return()=>{window.clearTimeout(S)}},[g]),i.jsxs(X,I(A({"aria-describedby":r,"aria-label":o,"aria-labelledby":C,ref:T},R),{children:[i.jsxs(V,{children:[i.jsx(Q,{children:e}),i.jsxs(P,{children:[t,d?i.jsx(J.IconButton,{icon:n?i.jsx(G.ArrowUpIcon,{}):i.jsx(F.ArrowDownIcon,{}),title:h,level:"tertiary",ghost:!0,size:"small",onClick:H}):null]})]}),d?i.jsx(W,{ref:w,isCollapsable:d,$overflow:v||!n?"hidden":"inherit",$height:n===!0?B:0,shouldAnimate:v,"aria-hidden":!n,children:g}):null]}))});exports.Block=Y;
+`,Y=L.default.forwardRef((Z,H)=>{var v=Z,{title:e,actions:t,ariaDescribedBy:r,ariaLabel:o,ariaLabelledBy:T,isOpen:n,collapseButtonLabel:g,onCollapse:d,children:B}=v,D=q(v,["title","actions","ariaDescribedBy","ariaLabel","ariaLabelledBy","isOpen","collapseButtonLabel","onCollapse","children"]);const[x,z]=c.useState(0),[w,S]=c.useState(!1),a=c.useRef(null),s=g!==void 0&&d!==void 0&&n!==void 0,M=()=>d==null?void 0:d(!n);return c.useEffect(()=>{if(!s)return;const b=()=>{var y,$;const p=($=(y=a.current)==null?void 0:y.scrollHeight)!=null?$:0;z(p===0?x:p)};b();const m=new MutationObserver(b);a.current&&m.observe(a.current,{childList:!0,subtree:!0,characterData:!0});const N=window.setTimeout(()=>{S(!0)},R);return()=>{m.disconnect(),window.clearTimeout(N)}},[a.current,s]),i.jsxs(X,_(k({"aria-describedby":r,"aria-label":o,"aria-labelledby":T,ref:H},D),{children:[i.jsxs(V,{children:[i.jsx(Q,{children:e}),i.jsxs(P,{children:[t,s?i.jsx(K.IconButton,{icon:n?i.jsx(J.ArrowUpIcon,{}):i.jsx(G.ArrowDownIcon,{}),title:g,level:"tertiary",ghost:!0,size:"small",onClick:M}):null]})]}),s?i.jsx(W,{ref:a,isCollapsable:s,$overflow:w||!n?"hidden":"inherit",$height:n===!0?x:0,shouldAnimate:w,"aria-hidden":!n,children:B}):null]}))});exports.Block=Y;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Akeneo design system",
   "files": [
     "lib"

src/components/Block/Block.tsx

@@ -147,20 +147,32 @@ const Block = React.forwardRef<HTMLDivElement, BlockProps>(
     useEffect(() => {
       if (!isCollapsable) return;
 
-      setContentHeight(contentHeight => {
+      const updateHeight = () => {
         const scrollHeight = contentRef.current?.scrollHeight ?? 0;
+        setContentHeight(0 === scrollHeight ? contentHeight : scrollHeight);
+      };
+
+      updateHeight();
 
-        return 0 === scrollHeight ? contentHeight : scrollHeight;
-      });
+      const observer = new MutationObserver(updateHeight);
+
+      if (contentRef.current) {
+        observer.observe(contentRef.current, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+        });
+      }
 
       const shouldAnimateTimeoutId = window.setTimeout(() => {
         setShouldAnimate(true);
       }, ANIMATION_DURATION);
 
       return () => {
+        observer.disconnect();
         window.clearTimeout(shouldAnimateTimeoutId);
       };
-    }, [children]);
+    }, [contentRef.current, isCollapsable]);
 
     return (
       <Container