@dnb/eufemia 10.19.0 → 10.20.0

package/components/height-animation/HeightAnimationInstance.js

@@ -1,29 +1,36 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { warn } from '../../shared/component-helper';
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 export default class HeightAnimation {
   constructor() {
     let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _defineProperty(this, "isInBrowser", void 0);
     _defineProperty(this, "state", void 0);
-    _defineProperty(this, "onStartStack", void 0);
-    _defineProperty(this, "onEndStack", void 0);
-    _defineProperty(this, "events", void 0);
-    _defineProperty(this, "opts", void 0);
+    _defineProperty(this, "isInBrowser", void 0);
+    _defineProperty(this, "onStartStack", []);
+    _defineProperty(this, "onEndStack", []);
+    _defineProperty(this, "events", []);
+    _defineProperty(this, "opts", {
+      animate: true
+    });
     _defineProperty(this, "elem", void 0);
     _defineProperty(this, "reqId1", void 0);
     _defineProperty(this, "reqId2", void 0);
     _defineProperty(this, "resizeTimeout", void 0);
+    _defineProperty(this, "timeouts", []);
+    _defineProperty(this, "firstTime", 0);
+    _defineProperty(this, "startTime", 0);
+    _defineProperty(this, "duration", 0);
     _defineProperty(this, "isAnimating", void 0);
     _defineProperty(this, "__currentHeight", void 0);
-    _defineProperty(this, "onResize", void 0);
     this.isInBrowser = typeof window !== 'undefined';
-    this.state = 'init';
-    this.onStartStack = [];
-    this.onEndStack = [];
-    this.events = [];
-    this.opts = opts;
+    this.setState('init');
+    this.setOptions(opts);
   }
-  _callOnStart() {
+  callAnimationStart() {
+    this.startTime = Date.now();
+    if (!this.firstTime) {
+      this.firstTime = this.startTime;
+    }
     if (this.onStartStack) {
       this.onStartStack.forEach(fn => {
         if (typeof fn === 'function') {
@@ -32,12 +39,12 @@ export default class HeightAnimation {
       });
     }
   }
-  _callOnEnd() {
+  callAnimationEnd() {
     this.isAnimating = false;
     if (this.state !== 'opened') {
       delete this.__currentHeight;
     }
-    this._removeEndEvents();
+    this.removeEndEvents();
     if (this.onEndStack) {
       this.onEndStack.forEach(fn => {
         if (typeof fn === 'function') {
@@ -46,91 +53,108 @@ export default class HeightAnimation {
       });
     }
   }
-  reset() {
-    this.state = 'init';
-    this.isAnimating = false;
-    this._removeEndEvents();
-    this._restore();
-  }
-  _restore() {
-    if (this.elem.parentElement) {
-      this.elem.parentElement.style.position = '';
-    }
-    this.elem.style.position = '';
-    this.elem.style.visibility = '';
-    this.elem.style.height = '';
-    this.elem.style.width = '';
-  }
-  _addEndEvents(listener) {
-    this._removeEndEvents();
-    this.events.push(listener);
-    this.elem.addEventListener('transitionend', listener);
+  addEndEvent(listener) {
+    var _this$elem, _this$elem$addEventLi;
+    this.removeEndEvents();
+    const handleTransitionEnd = e => {
+      if (this.canFinish()) {
+        listener(e);
+      } else {
+        const delay = this.duration - (Date.now() - this.startTime);
+        if (delay === -1) {
+          listener(e);
+        } else {
+          this.timeouts.push(setTimeout(() => listener(e), delay));
+        }
+      }
+    };
+    this.events.push(handleTransitionEnd);
+    (_this$elem = this.elem) === null || _this$elem === void 0 ? void 0 : (_this$elem$addEventLi = _this$elem.addEventListener) === null || _this$elem$addEventLi === void 0 ? void 0 : _this$elem$addEventLi.call(_this$elem, 'transitionend', handleTransitionEnd);
   }
-  _removeEndEvents() {
-    if (!this.elem) {
-      return;
-    }
-    this.events.forEach((listener, i) => {
-      this.elem.removeEventListener('transitionend', listener);
-      this.events.splice(i, 1);
+  removeEndEvents() {
+    this.events.forEach(listener => {
+      var _this$elem2, _this$elem2$removeEve;
+      (_this$elem2 = this.elem) === null || _this$elem2 === void 0 ? void 0 : (_this$elem2$removeEve = _this$elem2.removeEventListener) === null || _this$elem2$removeEve === void 0 ? void 0 : _this$elem2$removeEve.call(_this$elem2, 'transitionend', listener);
     });
-  }
-  _emitTransitionEnd() {
-    try {
-      const event = new CustomEvent('transitionend');
-      this.elem.dispatchEvent(event);
-    } catch (e) {
-      warn(e);
-    }
+    this.events = [];
   }
   setElement(elem) {
-    var _this$elem;
-    this._removeEndEvents();
+    var _this$elem3, _globalThis$animation;
     this.elem = elem || typeof document !== 'undefined' && document.createElement('div');
-    if (String((_this$elem = this.elem) === null || _this$elem === void 0 ? void 0 : _this$elem.nodeName).toLowerCase() === 'td') {
+    if (String((_this$elem3 = this.elem) === null || _this$elem3 === void 0 ? void 0 : _this$elem3.nodeName).toLowerCase() === 'td') {
       this.elem = this.elem.parentElement;
     }
+    this.duration = (_globalThis$animation = globalThis.animationDuration) !== null && _globalThis$animation !== void 0 ? _globalThis$animation : parseFloat(window.getComputedStyle(this.elem).transitionDuration) * 1000 || 400;
+  }
+  setState(state) {
+    this.state = Object.freeze(state);
+  }
+  setOptions(opts) {
+    this.opts = Object.freeze(_objectSpread(_objectSpread({}, this.opts), opts));
+  }
+  getOptions() {
+    return this.opts;
   }
   remove() {
     this.stop();
-    this._removeEndEvents();
+    this.removeEndEvents();
+    this.setState('init');
     this.isAnimating = false;
-    this.onStartStack = null;
-    this.onEndStack = null;
-    this.elem = null;
-    this.state = 'init';
-    if (this.onResize && this.isInBrowser) {
-      clearTimeout(this.resizeTimeout);
-      window.removeEventListener('resize', this.onResize);
+    this.onEndStack = [];
+    this.onStartStack = [];
+    this.__currentHeight = undefined;
+    this.elem = undefined;
+  }
+  setAsOpen() {
+    if (this.state === 'opened') {
+      return;
     }
+    this.setState('opening');
+    this.callAnimationStart();
+    this.setState('opened');
+    this.callAnimationEnd();
+  }
+  setAsClosed() {
+    if (this.state === 'closed') {
+      return;
+    }
+    this.setState('closing');
+    this.callAnimationStart();
+    this.setState('closed');
+    this.callAnimationEnd();
   }
   getHeight() {
-    var _this$elem2;
-    return parseFloat(String((_this$elem2 = this.elem) === null || _this$elem2 === void 0 ? void 0 : _this$elem2.clientHeight)) || null;
+    var _this$elem4;
+    return parseFloat(String((_this$elem4 = this.elem) === null || _this$elem4 === void 0 ? void 0 : _this$elem4.clientHeight)) || null;
   }
-  getWidth() {
-    if (!this.isInBrowser) {
-      return null;
-    }
-    return window.getComputedStyle(this.elem).width;
+  firstPaintStyle() {
+    return {
+      position: 'absolute',
+      visibility: 'hidden',
+      opacity: '0',
+      height: 'auto'
+    };
   }
   getUnknownHeight() {
+    var _this$elem$parentNode, _clonedElem$parentNod;
     if (!this.elem) {
       return null;
     }
-    if (this.isAnimating && this.__currentHeight) {
+    if (this.isAnimating && typeof this.__currentHeight !== 'undefined') {
       return this.__currentHeight;
     }
-    this.elem.style.width = this.getWidth();
-    if (this.elem.parentElement) {
-      this.elem.parentElement.style.position = 'relative';
+    const clonedElem = this.elem.cloneNode(true);
+    (_this$elem$parentNode = this.elem.parentNode) === null || _this$elem$parentNode === void 0 ? void 0 : _this$elem$parentNode.insertBefore(clonedElem, this.elem.nextSibling);
+    for (const key in this.firstPaintStyle) {
+      clonedElem.style[key] = this.firstPaintStyle[key];
+    }
+    clonedElem.style.height = 'auto';
+    const height = parseFloat(String(clonedElem.clientHeight)) || parseFloat(clonedElem.getAttribute('data-height')) || null;
+    (_clonedElem$parentNod = clonedElem.parentNode) === null || _clonedElem$parentNod === void 0 ? void 0 : _clonedElem$parentNod.removeChild(clonedElem);
+    if (height) {
+      this.__currentHeight = height;
     }
-    this.elem.style.position = 'absolute';
-    this.elem.style.visibility = 'hidden';
-    this.elem.style.height = 'auto';
-    this.__currentHeight = this.getHeight();
-    this._restore();
-    return this.__currentHeight;
+    return height;
   }
   onStart(fn) {
     this.onStartStack.push(fn);
@@ -139,124 +163,128 @@ export default class HeightAnimation {
     this.onEndStack.push(fn);
   }
   start(fromHeight, toHeight) {
-    var _window, _window$location, _window$location$href, _this$opts;
-    let {
-      animate = true
-    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    if ((_window = window) !== null && _window !== void 0 && (_window$location = _window.location) !== null && _window$location !== void 0 && (_window$location$href = _window$location.href) !== null && _window$location$href !== void 0 && _window$location$href.includes('data-visual-test')) {
-      animate = false;
+    if (!this.elem || !(this.isInBrowser && typeof window.requestAnimationFrame === 'function')) {
+      return;
     }
-    if (fromHeight === toHeight || animate === false || ((_this$opts = this.opts) === null || _this$opts === void 0 ? void 0 : _this$opts.animate) === false) {
-      this.elem.style.height = `${toHeight}px`;
-      this._callOnStart();
-      this._emitTransitionEnd();
+    const opts = this.getOptions();
+    if (opts.animate === false) {
       return;
     }
-    if (this.isInBrowser && typeof window.requestAnimationFrame === 'function') {
-      this.stop();
-      this.isAnimating = true;
-      this._callOnStart();
-      this.reqId1 = window.requestAnimationFrame(() => {
+    this.isAnimating = true;
+    this.reqId1 = window.requestAnimationFrame(() => {
+      if (!this.elem) {
+        return;
+      }
+      this.elem.style.height = `${fromHeight}px`;
+      this.reqId2 = window.requestAnimationFrame(() => {
         if (!this.elem) {
           return;
         }
-        this.elem.style.height = `${fromHeight}px`;
-        this.reqId2 = window.requestAnimationFrame(() => {
-          this.elem.style.height = `${toHeight}px`;
-        });
+        this.elem.style.height = `${toHeight}px`;
       });
-    }
+    });
   }
   stop() {
+    this.timeouts.forEach(id => clearTimeout(id));
+    this.timeouts = [];
     if (this.isInBrowser && typeof window.requestAnimationFrame === 'function') {
       window.cancelAnimationFrame(this.reqId1);
       window.cancelAnimationFrame(this.reqId2);
     }
   }
-  adjustFrom() {
-    let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (!this.elem) {
+  open() {
+    if (this.state === 'opened' || this.state === 'opening' || this.shouldBypassAnimation()) {
+      this.setAsOpen();
       return;
     }
-    height = height || this.getHeight();
-    this.elem.style.height = `${height}px`;
-    return height;
+    this.setState('opening');
+    this.callAnimationStart();
+    const toHeight = this.getUnknownHeight();
+    this.addEndEvent(e => {
+      if (e.target === e.currentTarget) {
+        this.setState('opened');
+        this.readjust();
+      }
+    });
+    this.start(0, toHeight);
+  }
+  close() {
+    if (this.state === 'closed' || this.state === 'closing' || this.shouldBypassAnimation()) {
+      this.setAsClosed();
+      return;
+    }
+    this.setState('closing');
+    this.callAnimationStart();
+    const fromHeight = this.getHeight();
+    this.addEndEvent(e => {
+      if (e.target === e.currentTarget) {
+        if (this.elem) {
+          this.elem.style.visibility = 'hidden';
+          this.elem.style.overflowY = 'clip';
+        }
+        this.setState('closed');
+        this.callAnimationEnd();
+      }
+    });
+    this.start(fromHeight, 0);
   }
   adjustTo() {
     let fromHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     let toHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let {
-      animate = true
-    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    if (!this.elem) {
+    const opts = this.getOptions();
+    if (!this.elem || opts.animate === false || this.state === 'opening' || this.state === 'closing') {
       return;
     }
-    if (fromHeight === null) {
+    if (fromHeight === 0 || fromHeight === null) {
       fromHeight = this.getHeight();
     }
     if (toHeight === null) {
       toHeight = this.getUnknownHeight();
     }
-    this._addEndEvents(e => {
-      if (e.target === e.currentTarget) {
-        if (this.elem) {
-          this.elem.style.height = 'auto';
-        }
-        this.state = 'adjusted';
-        this._callOnEnd();
-      }
-    });
-    this.state = 'adjusting';
-    this.start(fromHeight, toHeight, {
-      animate
-    });
-  }
-  open() {
-    let {
-      animate = true
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (!this.elem || this.state === 'opened' || this.state === 'opening') {
+    if (fromHeight === toHeight) {
+      this.setState('adjusted');
       return;
     }
-    const height = this.getUnknownHeight();
-    this._addEndEvents(e => {
-      if (e.target === e.currentTarget) {
+    this.setState('adjusting');
+    this.callAnimationStart();
+    this.addEndEvent(e => {
+      if (this.state === 'adjusting' && e.target === e.currentTarget) {
         if (this.elem) {
           this.elem.style.height = 'auto';
         }
-        this.state = 'opened';
-        this._callOnEnd();
+        this.setState('adjusted');
+        this.callAnimationEnd();
       }
     });
-    this.state = 'opening';
-    this.start(0, height, {
-      animate
-    });
+    this.start(fromHeight, toHeight);
   }
-  close() {
-    let {
-      animate = true
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (!this.elem || this.state === 'closed' || this.state === 'closing') {
-      return;
+  readjust() {
+    const endHeight = this.getHeight();
+    if (this.elem) {
+      this.elem.style.height = 'auto';
     }
-    let height = this.getHeight();
-    if (this.state === 'init') {
-      height = this.getUnknownHeight();
+    this.__currentHeight = undefined;
+    const newHeight = this.getUnknownHeight();
+    if (endHeight !== newHeight) {
+      this.adjustTo(endHeight, newHeight);
+    } else {
+      this.callAnimationEnd();
     }
-    this._addEndEvents(e => {
-      if (e.target === e.currentTarget) {
-        if (this.elem) {
-          this.elem.style.visibility = 'hidden';
-        }
-        this.state = 'closed';
-        this._callOnEnd();
-      }
-    });
-    this.state = 'closing';
-    this.start(height, 0, {
-      animate
-    });
+  }
+  canFinish() {
+    var _globalThis$animation2;
+    return Boolean(this.startTime && Date.now() - this.startTime > ((_globalThis$animation2 = globalThis.animationDuration) !== null && _globalThis$animation2 !== void 0 ? _globalThis$animation2 : this.duration));
+  }
+  shouldBypassAnimation() {
+    var _globalThis$bypassTim;
+    const opts = this.getOptions();
+    if (!this.elem || opts.animate === false) {
+      return true;
+    }
+    if (this.isInBrowser && (globalThis.IS_TEST || globalThis.bypassTime === -1)) {
+      return false;
+    }
+    return Boolean(this.firstTime && Date.now() - this.firstTime < ((_globalThis$bypassTim = globalThis.bypassTime) !== null && _globalThis$bypassTim !== void 0 ? _globalThis$bypassTim : 100));
   }
 }
 //# sourceMappingURL=HeightAnimationInstance.js.map

package/components/height-animation/HeightAnimationInstance.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeightAnimationInstance.js","names":["warn","HeightAnimation","constructor","opts","arguments","length","undefined","_defineProperty","isInBrowser","window","state","onStartStack","onEndStack","events","_callOnStart","forEach","fn","_callOnEnd","isAnimating","__currentHeight","_removeEndEvents","reset","_restore","elem","parentElement","style","position","visibility","height","width","_addEndEvents","listener","push","addEventListener","i","removeEventListener","splice","_emitTransitionEnd","event","CustomEvent","dispatchEvent","e","setElement","_this$elem","document","createElement","String","nodeName","toLowerCase","remove","stop","onResize","clearTimeout","resizeTimeout","getHeight","_this$elem2","parseFloat","clientHeight","getWidth","getComputedStyle","getUnknownHeight","onStart","onEnd","start","fromHeight","toHeight","_window","_window$location","_window$location$href","_this$opts","animate","location","href","includes","requestAnimationFrame","reqId1","reqId2","cancelAnimationFrame","adjustFrom","adjustTo","target","currentTarget","open","close"],"sources":["../../../../src/components/height-animation/HeightAnimationInstance.ts"],"sourcesContent":["import { warn } from '../../shared/component-helper'\n\nexport type HeightAnimationOnStartStates =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\nexport type HeightAnimationOnEndStates = 'opened' | 'closed' | 'adjusted'\nexport type HeightAnimationStates =\n  | HeightAnimationOnStartStates\n  | HeightAnimationOnEndStates\n  | 'init'\nexport type HeightAnimationOptions = {\n  animate?: boolean\n}\nexport type HeightAnimationOnStartCallback = (\n  state: HeightAnimationStates\n) => void\nexport type HeightAnimationOnEndCallback = (\n  state: HeightAnimationStates\n) => void\nexport type HeightAnimationOnStartStack =\n  Array<HeightAnimationOnStartCallback>\nexport type HeightAnimationOnEndStack = Array<HeightAnimationOnEndCallback>\nexport type HeightAnimationEventListener = (e: Event) => void\nexport type HeightAnimationEvents = Array<HeightAnimationEventListener>\nexport type HeightAnimationElement = HTMLElement\nexport type HeightAnimationContainer = HTMLElement\nexport type HeightAnimationFromHeight = number\nexport type HeightAnimationToHeight = number\n\nexport default class HeightAnimation {\n  isInBrowser: boolean\n  state: HeightAnimationStates\n  onStartStack: HeightAnimationOnStartStack\n  onEndStack: HeightAnimationOnEndStack\n  events: HeightAnimationEvents\n  opts: HeightAnimationOptions\n  elem: HeightAnimationElement\n  reqId1: number\n  reqId2: number\n  resizeTimeout: NodeJS.Timeout\n  isAnimating: boolean\n  __currentHeight: number\n  onResize: () => void\n\n  constructor(opts: HeightAnimationOptions = {}) {\n    this.isInBrowser = typeof window !== 'undefined'\n    this.state = 'init'\n    this.onStartStack = []\n    this.onEndStack = []\n    this.events = []\n    this.opts = opts\n  }\n\n  // Private methods\n  _callOnStart() {\n    if (this.onStartStack) {\n      this.onStartStack.forEach((fn) => {\n        if (typeof fn === 'function') {\n          fn(this.state)\n        }\n      })\n    }\n  }\n  _callOnEnd() {\n    this.isAnimating = false\n\n    if (this.state !== 'opened') {\n      delete this.__currentHeight\n    }\n\n    this._removeEndEvents()\n\n    if (this.onEndStack) {\n      this.onEndStack.forEach((fn) => {\n        if (typeof fn === 'function') {\n          fn(this.state)\n        }\n      })\n    }\n  }\n  reset() {\n    this.state = 'init'\n    this.isAnimating = false\n    this._removeEndEvents()\n    this._restore()\n  }\n  _restore() {\n    if (this.elem.parentElement) {\n      this.elem.parentElement.style.position = ''\n    }\n    this.elem.style.position = ''\n    this.elem.style.visibility = ''\n    this.elem.style.height = '' // not sure about this\n    this.elem.style.width = ''\n  }\n  _addEndEvents(listener: HeightAnimationEventListener) {\n    this._removeEndEvents() // also, remove events on every open (but not on close!)\n\n    this.events.push(listener)\n    this.elem.addEventListener('transitionend', listener)\n  }\n  _removeEndEvents() {\n    if (!this.elem) {\n      return // stop here\n    }\n\n    this.events.forEach((listener, i) => {\n      this.elem.removeEventListener('transitionend', listener)\n      this.events.splice(i, 1)\n    })\n  }\n  _emitTransitionEnd() {\n    try {\n      const event = new CustomEvent('transitionend')\n      this.elem.dispatchEvent(event)\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  // Public methods\n  setElement(elem: HeightAnimationElement) {\n    this._removeEndEvents() // in case element gets set several times\n\n    this.elem =\n      elem ||\n      (typeof document !== 'undefined' && document.createElement('div'))\n\n    // TODO: remove when responsive tables are supported\n    if (String(this.elem?.nodeName).toLowerCase() === 'td') {\n      this.elem = this.elem.parentElement\n    }\n  }\n  remove() {\n    this.stop()\n    this._removeEndEvents()\n    this.isAnimating = false\n    this.onStartStack = null\n    this.onEndStack = null\n    this.elem = null\n    this.state = 'init'\n    if (this.onResize && this.isInBrowser) {\n      clearTimeout(this.resizeTimeout)\n      window.removeEventListener('resize', this.onResize)\n    }\n  }\n  getHeight() {\n    return parseFloat(String(this.elem?.clientHeight)) || null\n  }\n  getWidth() {\n    if (!this.isInBrowser) {\n      return null\n    }\n    return window.getComputedStyle(this.elem).width\n  }\n  getUnknownHeight() {\n    if (!this.elem) {\n      return null\n    }\n\n    if (this.isAnimating && this.__currentHeight) {\n      return this.__currentHeight\n    }\n\n    this.elem.style.width = this.getWidth()\n\n    if (this.elem.parentElement) {\n      this.elem.parentElement.style.position = 'relative'\n    }\n    this.elem.style.position = 'absolute'\n    this.elem.style.visibility = 'hidden'\n    this.elem.style.height = 'auto'\n\n    this.__currentHeight = this.getHeight()\n\n    this._restore()\n\n    return this.__currentHeight\n  }\n\n  onStart(fn: HeightAnimationOnStartCallback) {\n    this.onStartStack.push(fn)\n  }\n  onEnd(fn: HeightAnimationOnEndCallback) {\n    this.onEndStack.push(fn)\n  }\n  start(\n    fromHeight: HeightAnimationFromHeight,\n    toHeight: HeightAnimationToHeight,\n    { animate = true }: HeightAnimationOptions = {}\n  ) {\n    if (window?.location?.href?.includes('data-visual-test')) {\n      animate = false\n    }\n\n    if (\n      fromHeight === toHeight ||\n      animate === false ||\n      this.opts?.animate === false\n    ) {\n      this.elem.style.height = `${toHeight}px`\n\n      this._callOnStart()\n\n      this._emitTransitionEnd()\n\n      return // stop here\n    }\n\n    if (\n      this.isInBrowser &&\n      typeof window.requestAnimationFrame === 'function'\n    ) {\n      this.stop()\n\n      this.isAnimating = true\n\n      // call the callbacks here, because then we do not call this during startup. This way we get an instant startup\n      this._callOnStart()\n\n      // make the animation\n      this.reqId1 = window.requestAnimationFrame(() => {\n        if (!this.elem) {\n          return // stop here\n        }\n\n        this.elem.style.height = `${fromHeight}px`\n\n        this.reqId2 = window.requestAnimationFrame(() => {\n          this.elem.style.height = `${toHeight}px`\n        })\n      })\n    }\n  }\n  stop() {\n    if (\n      this.isInBrowser &&\n      typeof window.requestAnimationFrame === 'function'\n    ) {\n      window.cancelAnimationFrame(this.reqId1)\n      window.cancelAnimationFrame(this.reqId2)\n    }\n  }\n  /**\n   * Deprecated\n   * \"adjustFrom\" is only used by GlobalStatus.js\n   * it should be replaced with \"useHeightAnimation\"\n   */\n  adjustFrom(height: HeightAnimationFromHeight = null) {\n    if (!this.elem) {\n      return\n    }\n\n    height = height || this.getHeight()\n    this.elem.style.height = `${height}px`\n    return height\n  }\n  adjustTo(\n    fromHeight: HeightAnimationFromHeight = null,\n    toHeight: HeightAnimationToHeight = null,\n    { animate = true }: HeightAnimationOptions = {}\n  ) {\n    if (!this.elem) {\n      return\n    }\n\n    if (fromHeight === null) {\n      fromHeight = this.getHeight()\n    }\n    if (toHeight === null) {\n      toHeight = this.getUnknownHeight()\n    }\n\n    this._addEndEvents((e) => {\n      if (e.target === e.currentTarget) {\n        if (this.elem) {\n          this.elem.style.height = 'auto'\n        }\n\n        this.state = 'adjusted'\n        this._callOnEnd()\n      }\n    })\n\n    this.state = 'adjusting'\n    this.start(fromHeight, toHeight, { animate })\n  }\n  open({ animate = true }: HeightAnimationOptions = {}) {\n    if (\n      !this.elem ||\n      this.state === 'opened' ||\n      this.state === 'opening'\n    ) {\n      return\n    }\n\n    const height = this.getUnknownHeight()\n\n    this._addEndEvents((e) => {\n      if (e.target === e.currentTarget) {\n        if (this.elem) {\n          this.elem.style.height = 'auto'\n        }\n\n        this.state = 'opened'\n        this._callOnEnd()\n      }\n    })\n\n    this.state = 'opening'\n    this.start(0, height, { animate })\n  }\n  close({ animate = true }: HeightAnimationOptions = {}) {\n    if (\n      !this.elem ||\n      this.state === 'closed' ||\n      this.state === 'closing'\n    ) {\n      return\n    }\n\n    let height = this.getHeight()\n    if (this.state === 'init') {\n      height = this.getUnknownHeight()\n    }\n\n    this._addEndEvents((e) => {\n      if (e.target === e.currentTarget) {\n        if (this.elem) {\n          this.elem.style.visibility = 'hidden'\n        }\n\n        this.state = 'closed'\n        this._callOnEnd()\n      }\n    })\n\n    this.state = 'closing'\n    this.start(height, 0, { animate })\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"HeightAnimationInstance.js","names":["HeightAnimation","constructor","opts","arguments","length","undefined","_defineProperty","animate","isInBrowser","window","setState","setOptions","callAnimationStart","startTime","Date","now","firstTime","onStartStack","forEach","fn","state","callAnimationEnd","isAnimating","__currentHeight","removeEndEvents","onEndStack","addEndEvent","listener","_this$elem","_this$elem$addEventLi","handleTransitionEnd","e","canFinish","delay","duration","timeouts","push","setTimeout","events","elem","addEventListener","call","_this$elem2","_this$elem2$removeEve","removeEventListener","setElement","_this$elem3","_globalThis$animation","document","createElement","String","nodeName","toLowerCase","parentElement","globalThis","animationDuration","parseFloat","getComputedStyle","transitionDuration","Object","freeze","_objectSpread","getOptions","remove","stop","setAsOpen","setAsClosed","getHeight","_this$elem4","clientHeight","firstPaintStyle","position","visibility","opacity","height","getUnknownHeight","_this$elem$parentNode","_clonedElem$parentNod","clonedElem","cloneNode","parentNode","insertBefore","nextSibling","key","style","getAttribute","removeChild","onStart","onEnd","start","fromHeight","toHeight","requestAnimationFrame","reqId1","reqId2","id","clearTimeout","cancelAnimationFrame","open","shouldBypassAnimation","target","currentTarget","readjust","close","overflowY","adjustTo","endHeight","newHeight","_globalThis$animation2","Boolean","_globalThis$bypassTim","IS_TEST","bypassTime"],"sources":["../../../../src/components/height-animation/HeightAnimationInstance.ts"],"sourcesContent":["export type HeightAnimationOnStartStates =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\nexport type HeightAnimationOnEndStates = 'opened' | 'closed' | 'adjusted'\nexport type HeightAnimationStates =\n  | HeightAnimationOnStartStates\n  | HeightAnimationOnEndStates\n  | 'init'\nexport type HeightAnimationOptions = {\n  animate?: boolean\n}\nexport type HeightAnimationOnStartCallback = (\n  state: HeightAnimationStates\n) => void\nexport type HeightAnimationOnEndCallback = (\n  state: HeightAnimationStates\n) => void\nexport type HeightAnimationOnStartStack =\n  Array<HeightAnimationOnStartCallback>\nexport type HeightAnimationOnEndStack = Array<HeightAnimationOnEndCallback>\nexport type HeightAnimationEventListener = (e: Event) => void\nexport type HeightAnimationEvents = Array<HeightAnimationEventListener>\nexport type HeightAnimationElement = HTMLElement\nexport type HeightAnimationContainer = HTMLElement\nexport type HeightAnimationFromHeight = number\nexport type HeightAnimationToHeight = number\n\nexport default class HeightAnimation {\n  private state: Readonly<HeightAnimationStates>\n  isInBrowser: boolean\n  onStartStack: HeightAnimationOnStartStack = []\n  onEndStack: HeightAnimationOnEndStack = []\n  events: HeightAnimationEvents = []\n  opts: HeightAnimationOptions = { animate: true }\n  elem: HeightAnimationElement\n  reqId1: number\n  reqId2: number\n  resizeTimeout: NodeJS.Timeout\n  timeouts: NodeJS.Timeout[] = []\n  firstTime?: number = 0\n  startTime?: number = 0\n  duration?: number = 0\n  isAnimating: boolean\n  __currentHeight: number\n\n  constructor(opts: HeightAnimationOptions = {}) {\n    this.isInBrowser = typeof window !== 'undefined'\n    this.setState('init')\n    this.setOptions(opts)\n  }\n\n  callAnimationStart() {\n    this.startTime = Date.now()\n    if (!this.firstTime) {\n      this.firstTime = this.startTime\n    }\n    if (this.onStartStack) {\n      this.onStartStack.forEach((fn) => {\n        if (typeof fn === 'function') {\n          fn(this.state)\n        }\n      })\n    }\n  }\n  callAnimationEnd() {\n    this.isAnimating = false\n\n    if (this.state !== 'opened') {\n      delete this.__currentHeight\n    }\n\n    this.removeEndEvents()\n\n    if (this.onEndStack) {\n      this.onEndStack.forEach((fn) => {\n        if (typeof fn === 'function') {\n          fn(this.state)\n        }\n      })\n    }\n  }\n  addEndEvent(listener: HeightAnimationEventListener) {\n    this.removeEndEvents() // also, remove events on every open (but not on close!)\n\n    const handleTransitionEnd = (e) => {\n      if (this.canFinish()) {\n        listener(e)\n      } else {\n        const delay = this.duration - (Date.now() - this.startTime)\n\n        if (delay === -1) {\n          listener(e)\n        } else {\n          this.timeouts.push(setTimeout(() => listener(e), delay))\n        }\n      }\n    }\n\n    this.events.push(handleTransitionEnd)\n    this.elem?.addEventListener?.('transitionend', handleTransitionEnd)\n  }\n  removeEndEvents() {\n    this.events.forEach((listener) => {\n      this.elem?.removeEventListener?.('transitionend', listener)\n    })\n    this.events = []\n  }\n\n  // Public methods\n  setElement(elem: HeightAnimationElement) {\n    this.elem =\n      elem ||\n      (typeof document !== 'undefined' && document.createElement('div'))\n\n    // TODO: remove when responsive tables are supported\n    if (String(this.elem?.nodeName).toLowerCase() === 'td') {\n      this.elem = this.elem.parentElement\n    }\n\n    this.duration =\n      globalThis.animationDuration ??\n      (parseFloat(window.getComputedStyle(this.elem).transitionDuration) *\n        1000 ||\n        400) // The default duration\n  }\n  setState(state: HeightAnimationStates) {\n    this.state = Object.freeze(state)\n  }\n  setOptions(opts: HeightAnimationOptions) {\n    this.opts = Object.freeze({ ...this.opts, ...opts })\n  }\n  getOptions() {\n    return this.opts\n  }\n  remove() {\n    this.stop()\n    this.removeEndEvents()\n    this.setState('init')\n    this.isAnimating = false\n    this.onEndStack = []\n    this.onStartStack = []\n    this.__currentHeight = undefined\n    this.elem = undefined\n  }\n  setAsOpen() {\n    if (this.state === 'opened') {\n      return\n    }\n    this.setState('opening')\n    this.callAnimationStart()\n    this.setState('opened')\n    this.callAnimationEnd()\n  }\n  setAsClosed() {\n    if (this.state === 'closed') {\n      return\n    }\n    this.setState('closing')\n    this.callAnimationStart()\n    this.setState('closed')\n    this.callAnimationEnd()\n  }\n  getHeight() {\n    return parseFloat(String(this.elem?.clientHeight)) || null\n  }\n  firstPaintStyle() {\n    return {\n      position: 'absolute',\n      visibility: 'hidden',\n      opacity: '0', // prevents before/after elements to be visible\n      height: 'auto',\n    }\n  }\n  getUnknownHeight() {\n    if (!this.elem) {\n      return null\n    }\n\n    if (this.isAnimating && typeof this.__currentHeight !== 'undefined') {\n      return this.__currentHeight\n    }\n\n    const clonedElem = this.elem.cloneNode(true) as HTMLElement\n    this.elem.parentNode?.insertBefore(clonedElem, this.elem.nextSibling)\n\n    for (const key in this.firstPaintStyle) {\n      clonedElem.style[key] = this.firstPaintStyle[key]\n    }\n    clonedElem.style.height = 'auto'\n\n    const height =\n      parseFloat(String(clonedElem.clientHeight)) ||\n      // data-height is used for mockup testing with \"mockHeight\"\n      parseFloat(clonedElem.getAttribute('data-height')) ||\n      null\n\n    clonedElem.parentNode?.removeChild(clonedElem)\n\n    if (height) {\n      this.__currentHeight = height\n    }\n\n    return height\n  }\n  onStart(fn: HeightAnimationOnStartCallback) {\n    this.onStartStack.push(fn)\n  }\n  onEnd(fn: HeightAnimationOnEndCallback) {\n    this.onEndStack.push(fn)\n  }\n  start(\n    fromHeight: HeightAnimationFromHeight,\n    toHeight: HeightAnimationToHeight\n  ) {\n    if (\n      !this.elem ||\n      !(\n        this.isInBrowser &&\n        typeof window.requestAnimationFrame === 'function'\n      )\n    ) {\n      return\n    }\n\n    const opts = this.getOptions()\n    if (opts.animate === false) {\n      return\n    }\n\n    this.isAnimating = true\n\n    // make the animation\n    this.reqId1 = window.requestAnimationFrame(() => {\n      if (!this.elem) {\n        return\n      }\n\n      this.elem.style.height = `${fromHeight}px`\n\n      this.reqId2 = window.requestAnimationFrame(() => {\n        if (!this.elem) {\n          return\n        }\n\n        this.elem.style.height = `${toHeight}px`\n      })\n    })\n  }\n  stop() {\n    this.timeouts.forEach((id) => clearTimeout(id))\n    this.timeouts = []\n\n    if (\n      this.isInBrowser &&\n      typeof window.requestAnimationFrame === 'function'\n    ) {\n      window.cancelAnimationFrame(this.reqId1)\n      window.cancelAnimationFrame(this.reqId2)\n    }\n  }\n  open() {\n    if (\n      this.state === 'opened' ||\n      this.state === 'opening' ||\n      this.shouldBypassAnimation()\n    ) {\n      this.setAsOpen()\n      return\n    }\n\n    this.setState('opening')\n    this.callAnimationStart()\n\n    const toHeight = this.getUnknownHeight()\n\n    this.addEndEvent((e) => {\n      if (e.target === e.currentTarget) {\n        this.setState('opened')\n        this.readjust()\n      }\n    })\n\n    this.start(0, toHeight)\n  }\n  close() {\n    if (\n      this.state === 'closed' ||\n      this.state === 'closing' ||\n      this.shouldBypassAnimation()\n    ) {\n      this.setAsClosed()\n      return\n    }\n\n    this.setState('closing')\n    this.callAnimationStart()\n\n    const fromHeight = this.getHeight()\n\n    this.addEndEvent((e) => {\n      if (e.target === e.currentTarget) {\n        if (this.elem) {\n          this.elem.style.visibility = 'hidden'\n          this.elem.style.overflowY = 'clip'\n        }\n        this.setState('closed')\n        this.callAnimationEnd()\n      }\n    })\n\n    this.start(fromHeight, 0)\n  }\n  adjustTo(\n    fromHeight: HeightAnimationFromHeight = null,\n    toHeight: HeightAnimationToHeight = null\n  ) {\n    const opts = this.getOptions()\n\n    if (\n      !this.elem ||\n      opts.animate === false ||\n      this.state === 'opening' ||\n      this.state === 'closing'\n    ) {\n      return\n    }\n\n    if (fromHeight === 0 || fromHeight === null) {\n      fromHeight = this.getHeight()\n    }\n    if (toHeight === null) {\n      toHeight = this.getUnknownHeight()\n    }\n\n    if (fromHeight === toHeight) {\n      this.setState('adjusted')\n      return\n    }\n\n    this.setState('adjusting')\n    this.callAnimationStart()\n\n    this.addEndEvent((e) => {\n      if (this.state === 'adjusting' && e.target === e.currentTarget) {\n        if (this.elem) {\n          this.elem.style.height = 'auto'\n        }\n        this.setState('adjusted')\n        this.callAnimationEnd()\n      }\n    })\n\n    this.start(fromHeight, toHeight)\n  }\n  readjust() {\n    const endHeight = this.getHeight()\n\n    if (this.elem) {\n      this.elem.style.height = 'auto'\n    }\n\n    this.__currentHeight = undefined\n    const newHeight = this.getUnknownHeight()\n\n    // If the height has changed during the animation, we need to adjust it\n    if (endHeight !== newHeight) {\n      this.adjustTo(endHeight, newHeight)\n    } else {\n      this.callAnimationEnd()\n    }\n  }\n  /**\n   * Determines whether the animation can finish.\n   * Check for certain states and if the time passed is too short.\n   * With a so short first state change, we do not call animation end.\n   */\n  canFinish() {\n    return Boolean(\n      this.startTime &&\n        Date.now() - this.startTime >\n          (globalThis.animationDuration ?? this.duration)\n    )\n  }\n  /**\n   * Determines whether the animation should be bypassed.\n   * Check for certain states and if the time passed is too short to be correct.\n   * With a very short first state change, we skip animation.\n   */\n  shouldBypassAnimation() {\n    const opts = this.getOptions()\n\n    if (!this.elem || opts.animate === false) {\n      return true\n    }\n\n    if (\n      this.isInBrowser &&\n      (globalThis.IS_TEST || globalThis.bypassTime === -1)\n    ) {\n      return false\n    }\n\n    return Boolean(\n      this.firstTime &&\n        Date.now() - this.firstTime < (globalThis.bypassTime ?? 100)\n    )\n  }\n}\n"],"mappings":"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"}

package/components/height-animation/style/dnb-height-animation.css

@@ -6,10 +6,24 @@
  * Utilities
  */
 .dnb-height-animation {
-  transition: height var(--duration, 400ms) var(--easing-default);
+  --height-animation: height var(--duration, 400ms) var(--easing-default)
+    var(--delay, 0ms);
+  will-change: height;
+  transition: var(--height-animation);
+}
+html[data-visual-test] .dnb-height-animation {
+  transition: none;
 }
 .dnb-height-animation--animating {
-  overflow: hidden;
+  overflow-y: hidden;
+}
+@supports (overflow-y: clip) {
+  .dnb-height-animation--animating {
+    overflow-y: clip;
+  }
+}
+.dnb-height-animation--hidden {
+  display: none;
 }
 .dnb-height-animation--show-overflow {
   overflow: visible;

package/components/height-animation/style/dnb-height-animation.min.css

@@ -1 +1 @@
-.dnb-height-animation{transition:height var(--duration,.4s) var(--easing-default)}.dnb-height-animation--animating{overflow:hidden}.dnb-height-animation--show-overflow{overflow:visible}
+.dnb-height-animation{--height-animation:height var(--duration,400ms) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation{transition:none}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}

package/components/height-animation/style/dnb-height-animation.scss

@@ -6,10 +6,26 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-height-animation {
-  transition: height var(--duration, 400ms) var(--easing-default);
+  --height-animation: height var(--duration, 400ms) var(--easing-default)
+    var(--delay, 0ms);
+
+  will-change: height;
+  transition: var(--height-animation);
+
+  html[data-visual-test] & {
+    transition: none;
+  }
 
   &--animating {
-    overflow: hidden;
+    overflow-y: hidden;
+
+    @supports (overflow-y: clip) {
+      overflow-y: clip;
+    }
+  }
+
+  &--hidden {
+    display: none;
   }
 
   &--show-overflow {

package/components/height-animation/useHeightAnimation.d.ts

@@ -23,6 +23,10 @@ export type useHeightAnimationOptions = {
      * Is called when fully opened or closed
      */
     onOpen?: (isOpen: boolean) => void;
+    /**
+     * Is called when animation has started.
+     */
+    onAnimationStart?: (state: HeightAnimationOnStartTypes) => void;
     /**
      * Is called when animation is done and the full height is reached.
      */
@@ -30,11 +34,12 @@ export type useHeightAnimationOptions = {
 };
 export type HeightAnimationOnStartTypes = 'opening' | 'closing' | 'adjusting';
 export type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted';
-export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, onInit, onOpen, onAnimationEnd, }?: useHeightAnimationOptions): {
+export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
     open: boolean;
     isOpen: boolean;
     isInDOM: boolean;
     isVisible: boolean;
     isVisibleParallax: boolean;
     isAnimating: boolean;
+    firstPaintStyle: React.CSSProperties;
 };