@helpdice/ui 1.7.5 → 1.7.8

package/dist/menu/index.js

@@ -2635,6 +2635,11 @@ function canAnimate(keyframes, name, type, velocity) {
         ((type === "spring" || isGenerator(type)) && velocity));
 }
 
+function makeAnimationInstant(options) {
+    options.duration = 0;
+    options.type === "keyframes";
+}
+
 /**
  * A list of values that can be hardware-accelerated.
  */
@@ -2727,7 +2732,7 @@ class AsyncMotionValueAnimation extends WithPromise {
                 onUpdate?.(getFinalKeyframe$1(keyframes, options, finalKeyframe));
             }
             keyframes[0] = keyframes[keyframes.length - 1];
-            options.duration = 0;
+            makeAnimationInstant(options);
             options.repeat = 0;
         }
         /**
@@ -3272,7 +3277,7 @@ class MotionValue {
          * An object containing a SubscriptionManager for each active event.
          */
         this.events = {};
-        this.updateAndNotify = (v, render = true) => {
+        this.updateAndNotify = (v) => {
             const currentTime = time.now();
             /**
              * If we're updating the value during another frame or eventloop
@@ -3293,10 +3298,6 @@ class MotionValue {
                     }
                 }
             }
-            // Update render subscribers
-            if (render) {
-                this.events.renderRequest?.notify(this.current);
-            }
         };
         this.hasAnimated = false;
         this.setCurrent(init);
@@ -3407,9 +3408,9 @@ class MotionValue {
      *
      * @public
      */
-    set(v, render = true) {
-        if (!render || !this.passiveEffect) {
-            this.updateAndNotify(v, render);
+    set(v) {
+        if (!this.passiveEffect) {
+            this.updateAndNotify(v);
         }
         else {
             this.passiveEffect(v, this.updateAndNotify);
@@ -5045,6 +5046,11 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
             });
             wantsHandoff.current = false;
         }
+        /**
+         * Now we've finished triggering animations for this element we
+         * can wipe the enteringChildren set for the next render.
+         */
+        visualElement.enteringChildren = undefined;
     });
     return visualElement;
 }
@@ -5603,7 +5609,7 @@ class VisualElement {
         for (const key in initialMotionValues) {
             const value = initialMotionValues[key];
             if (latestValues[key] !== undefined && isMotionValue(value)) {
-                value.set(latestValues[key], false);
+                value.set(latestValues[key]);
             }
         }
     }
@@ -5629,8 +5635,7 @@ class VisualElement {
         if (process.env.NODE_ENV !== "production") {
             warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
         }
-        if (this.parent)
-            this.parent.children.add(this);
+        this.parent?.addChild(this);
         this.update(this.props, this.presenceContext);
     }
     unmount() {
@@ -5640,7 +5645,7 @@ class VisualElement {
         this.valueSubscriptions.forEach((remove) => remove());
         this.valueSubscriptions.clear();
         this.removeFromVariantTree && this.removeFromVariantTree();
-        this.parent && this.parent.children.delete(this);
+        this.parent?.removeChild(this);
         for (const key in this.events) {
             this.events[key].clear();
         }
@@ -5653,6 +5658,15 @@ class VisualElement {
         }
         this.current = null;
     }
+    addChild(child) {
+        this.children.add(child);
+        this.enteringChildren ?? (this.enteringChildren = new Set());
+        this.enteringChildren.add(child);
+    }
+    removeChild(child) {
+        this.children.delete(child);
+        this.enteringChildren && this.enteringChildren.delete(child);
+    }
     bindToMotionValue(key, value) {
         if (this.valueSubscriptions.has(key)) {
             this.valueSubscriptions.get(key)();
@@ -5667,15 +5681,14 @@ class VisualElement {
             if (valueIsTransform && this.projection) {
                 this.projection.isTransformDirty = true;
             }
+            this.scheduleRender();
         });
-        const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
         let removeSyncCheck;
         if (window.MotionCheckAppearSync) {
             removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
         }
         this.valueSubscriptions.set(key, () => {
             removeOnChange();
-            removeOnRenderRequest();
             if (removeSyncCheck)
                 removeSyncCheck();
             if (value.owner)
@@ -6270,7 +6283,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     let shouldSkip = false;
     if (options.type === false ||
         (options.duration === 0 && !options.repeatDelay)) {
-        options.duration = 0;
+        makeAnimationInstant(options);
         if (options.delay === 0) {
             shouldSkip = true;
         }
@@ -6278,7 +6291,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     if (MotionGlobalConfig.instantAnimations ||
         MotionGlobalConfig.skipAnimations) {
         shouldSkip = true;
-        options.duration = 0;
+        makeAnimationInstant(options);
         options.delay = 0;
     }
     /**
@@ -6382,6 +6395,20 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
     return animations;
 }
 
+function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
+    const index = Array.from(children)
+        .sort((a, b) => a.sortNodePosition(b))
+        .indexOf(child);
+    const numChildren = children.size;
+    const maxStaggerDuration = (numChildren - 1) * staggerChildren;
+    const delayIsFunction = typeof delayChildren === "function";
+    return delayIsFunction
+        ? delayChildren(index, numChildren)
+        : staggerDirection === 1
+            ? index * staggerChildren
+            : maxStaggerDuration - index * staggerChildren;
+}
+
 function animateVariant(visualElement, variant, options = {}) {
     const resolved = resolveVariant(visualElement, variant, options.type === "exit"
         ? visualElement.presenceContext?.custom
@@ -6424,31 +6451,17 @@ function animateVariant(visualElement, variant, options = {}) {
 }
 function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
     const animations = [];
-    const numChildren = visualElement.variantChildren.size;
-    const maxStaggerDuration = (numChildren - 1) * staggerChildren;
-    const delayIsFunction = typeof delayChildren === "function";
-    const generateStaggerDuration = delayIsFunction
-        ? (i) => delayChildren(i, numChildren)
-        : // Support deprecated staggerChildren
-            staggerDirection === 1
-                ? (i = 0) => i * staggerChildren
-                : (i = 0) => maxStaggerDuration - i * staggerChildren;
-    Array.from(visualElement.variantChildren)
-        .sort(sortByTreeOrder)
-        .forEach((child, i) => {
+    for (const child of visualElement.variantChildren) {
         child.notify("AnimationStart", variant);
         animations.push(animateVariant(child, variant, {
             ...options,
             delay: delay +
-                (delayIsFunction ? 0 : delayChildren) +
-                generateStaggerDuration(i),
+                (typeof delayChildren === "function" ? 0 : delayChildren) +
+                calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection),
         }).then(() => child.notify("AnimationComplete", variant)));
-    });
+    }
     return Promise.all(animations);
 }
-function sortByTreeOrder(a, b) {
-    return a.sortNodePosition(b);
-}
 
 function animateVisualElement(visualElement, definition, options = {}) {
     visualElement.notify("AnimationStart", definition);
@@ -6601,9 +6614,6 @@ function createAnimationState(visualElement) {
             let isInherited = prop === context[type] &&
                 prop !== props[type] &&
                 propIsVariant;
-            /**
-             *
-             */
             if (isInherited &&
                 isInitialRender &&
                 visualElement.manuallyAnimateOnMount) {
@@ -6724,9 +6734,6 @@ function createAnimationState(visualElement) {
              */
             typeState.prevProp = prop;
             typeState.prevResolvedValues = resolvedValues;
-            /**
-             *
-             */
             if (typeState.isActive) {
                 encounteredKeys = { ...encounteredKeys, ...resolvedValues };
             }
@@ -6740,10 +6747,30 @@ function createAnimationState(visualElement) {
             const willAnimateViaParent = isInherited && variantDidChange;
             const needsAnimating = !willAnimateViaParent || handledRemovedValues;
             if (shouldAnimateType && needsAnimating) {
-                animations.push(...definitionList.map((animation) => ({
-                    animation: animation,
-                    options: { type },
-                })));
+                animations.push(...definitionList.map((animation) => {
+                    const options = { type };
+                    /**
+                     * If we're performing the initial animation, but we're not
+                     * rendering at the same time as the variant-controlling parent,
+                     * we want to use the parent's transition to calculate the stagger.
+                     */
+                    if (typeof animation === "string" &&
+                        isInitialRender &&
+                        !willAnimateViaParent &&
+                        visualElement.manuallyAnimateOnMount &&
+                        visualElement.parent) {
+                        const { parent } = visualElement;
+                        const parentVariant = resolveVariant(parent, animation);
+                        if (parent.enteringChildren && parentVariant) {
+                            const { delayChildren } = parentVariant.transition || {};
+                            options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
+                        }
+                    }
+                    return {
+                        animation: animation,
+                        options,
+                    };
+                }));
             }
         }
         /**
@@ -7917,6 +7944,10 @@ const correctBoxShadow = {
 /**
  * Track whether we've taken any snapshots yet. If not,
  * we can safely skip notification of didUpdate.
+ *
+ * Difficult to capture in a test but to prevent flickering
+ * we must set this to true either on update or unmount.
+ * Running `next-env/layout-id` in Safari will show this behaviour if broken.
  */
 let hasTakenAnySnapshot = false;
 class MeasureLayoutWithContext extends React.Component {
@@ -8005,6 +8036,7 @@ class MeasureLayoutWithContext extends React.Component {
     componentWillUnmount() {
         const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;
         const { projection } = visualElement;
+        hasTakenAnySnapshot = true;
         if (projection) {
             projection.scheduleCheckAfterUnmount();
             if (layoutGroup && layoutGroup.group)