@nova-design-system/nova-react 3.5.0 → 3.7.0

package/README.md

@@ -45,6 +45,12 @@ npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base
 yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react
 ```
 
+> In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the [Developers' setup guide](https://wiki.eliagroup.eu/spaces/EAing/pages/89296007/2.3.3.10+Developer+Setup#id-2.3.3.10DeveloperSetup-NPMconfig), you need to turn off the SSL certificate verification:
+
+```bash
+npm config set strict-ssl false
+```
+
 > **Note for Yarn Users**
 > Yarn **does not automatically** install peer dependencies. You must install the following peer dependency manually:
 > ```bash

package/dist/cjs/{timeline.animation-1b88f052-B8-vCVrY.js → collapse.animation-16e3af45-CChx_tQJ.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+var stylefire_es74da334a = require('./stylefire.es-74da334a-y0piPjlz.js');
 
 const useCollapse = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = fade_animation2a077983.index(node);
+    const nodeStyler = stylefire_es74da334a.index(node);
     /**
      * Will set the overflow to hidden, and animate the max height to 0. Make sure
      * the element has no border or y padding set, otherwise the animation will
@@ -13,7 +13,7 @@ const useCollapse = (node, { duration } = { duration: 200 }) => {
         return new Promise(resolve => {
             const height = node.getBoundingClientRect().height;
             nodeStyler.set({ overflow: 'hidden' });
-            fade_animation2a077983.animate({
+            stylefire_es74da334a.animate({
                 from: height,
                 to: 0,
                 duration,
@@ -56,7 +56,7 @@ const useCollapse = (node, { duration } = { duration: 200 }) => {
             nodeStyler.set({
                 overflow: 'hidden',
             });
-            fade_animation2a077983.animate({
+            stylefire_es74da334a.animate({
                 from: 0,
                 to: scrollHeight,
                 duration,
@@ -81,25 +81,4 @@ const useCollapse = (node, { duration } = { duration: 200 }) => {
     };
 };
 
-/**
- * Will execute a series of animation promises in sequence.
- * This is useful for chaining animations where each step depends on the
- * previous one completing before starting the next.
- *
- * @param {Array<() => Promise<void>>} animations - The array of animation functions.
- * @returns {Object} - An object with a `start` method to begin the timeline.
- *
- * @example
- * const { fadeOut } = useFade(this.ref);
- * const { collapse } = useCollapse(this.ref);
- *
- * timeline(fadeOut, collapse).start();
- */
-const timeline = (...animations) => ({
-    start: () => {
-        return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
-    },
-});
-
-exports.timeline = timeline;
 exports.useCollapse = useCollapse;

package/dist/cjs/fade.animation-71e8e34c-BAw_TYsB.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var stylefire_es74da334a = require('./stylefire.es-74da334a-y0piPjlz.js');
+
+const useFade = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = stylefire_es74da334a.index(node);
+    /**
+     * Will animate the opacity to 1, and removes the opacity style attribute once
+     * complete.
+     */
+    function fadeIn() {
+        return new Promise(resolve => {
+            stylefire_es74da334a.animate({
+                from: { opacity: 0 },
+                to: { opacity: 1 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ opacity: latest.opacity });
+                },
+                onComplete() {
+                    resolve();
+                    node.style.removeProperty('opacity');
+                },
+            });
+        });
+    }
+    /**
+     * Applies the fadeOut styles without animating, useful when initial state
+     * is hidden.
+     */
+    function setFadeOut() {
+        node.style.opacity = '0';
+    }
+    /**
+     * Applies the fadeIn styles without animating, useful when initial state
+     * is visible.
+     */
+    function setFadeIn() {
+        node.style.opacity = '1';
+    }
+    /**
+     * Will animate the opacity to 0, once complete, the opacity style attribute
+     * will stay on the element.
+     */
+    function fadeOut() {
+        return new Promise(resolve => {
+            stylefire_es74da334a.animate({
+                from: { opacity: 1 },
+                to: { opacity: 0 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ opacity: latest.opacity });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        fadeIn,
+        fadeOut,
+        setFadeOut,
+        setFadeIn,
+    };
+};
+
+exports.useFade = useFade;