motion-v 1.6.1 → 1.7.0-alpha.0

package/dist/es/external/.pnpm/{motion-dom@12.22.0 → motion-dom@12.23.12}/external/motion-dom/dist/es/view/start.mjs

@@ -6,10 +6,10 @@ import { mapEasingToNativeEasing } from "../animation/waapi/easing/map-easing.mj
 import { applyGeneratorOptions } from "../animation/waapi/utils/apply-generator.mjs";
 import { chooseLayerType } from "./utils/choose-layer-type.mjs";
 import { css } from "./utils/css.mjs";
-import { getLayerName } from "./utils/get-layer-name.mjs";
+import { getViewAnimationLayerInfo } from "./utils/get-layer-info.mjs";
 import { getViewAnimations } from "./utils/get-view-animations.mjs";
 import { hasTarget } from "./utils/has-target.mjs";
-import { secondsToMilliseconds } from "../../../../../../motion-utils@12.19.0/external/motion-utils/dist/es/time-conversion.mjs";
+import { secondsToMilliseconds } from "../../../../../../motion-utils@12.23.6/external/motion-utils/dist/es/time-conversion.mjs";
 const definitionNames = ["layout", "enter", "exit", "new", "old"];
 function startViewAnimation(builder) {
   const { update, targets, options: defaultOptions } = builder;
@@ -78,7 +78,7 @@ function startViewAnimation(builder) {
         const { pseudoElement } = effect;
         if (!pseudoElement)
           continue;
-        const name = getLayerName(pseudoElement);
+        const name = getViewAnimationLayerInfo(pseudoElement);
         if (!name)
           continue;
         const targetDefinition = targets.get(name.layer);

package/dist/es/external/.pnpm/{motion-dom@12.22.0/external/motion-dom/dist/es/view/utils/get-layer-name.mjs → motion-dom@12.23.12/external/motion-dom/dist/es/view/utils/get-layer-info.mjs}

@@ -1,9 +1,9 @@
-function getLayerName(pseudoElement) {
+function getViewAnimationLayerInfo(pseudoElement) {
   const match = pseudoElement.match(/::view-transition-(old|new|group|image-pair)\((.*?)\)/);
   if (!match)
     return null;
   return { layer: match[2], type: match[1] };
 }
 export {
-  getLayerName
+  getViewAnimationLayerInfo
 };

package/dist/es/external/.pnpm/{motion-utils@12.19.0 → motion-utils@12.23.6}/external/motion-utils/dist/es/easing/utils/map.mjs

@@ -24,11 +24,11 @@ const isValidEasing = (easing) => {
 };
 const easingDefinitionToFunction = (definition) => {
   if (isBezierDefinition(definition)) {
-    invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+    invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length");
     const [x1, y1, x2, y2] = definition;
     return cubicBezier(x1, y1, x2, y2);
   } else if (isValidEasing(definition)) {
-    invariant(easingLookup[definition] !== void 0, `Invalid easing type '${definition}'`);
+    invariant(easingLookup[definition] !== void 0, `Invalid easing type '${definition}'`, "invalid-easing-type");
     return easingLookup[definition];
   }
   return definition;

package/dist/es/external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/errors.mjs

@@ -0,0 +1,21 @@
+import { formatErrorMessage } from "./format-error-message.mjs";
+let warning = () => {
+};
+let invariant = () => {
+};
+if (process.env.NODE_ENV !== "production") {
+  warning = (check, message, errorCode) => {
+    if (!check && typeof console !== "undefined") {
+      console.warn(formatErrorMessage(message, errorCode));
+    }
+  };
+  invariant = (check, message, errorCode) => {
+    if (!check) {
+      throw new Error(formatErrorMessage(message, errorCode));
+    }
+  };
+}
+export {
+  invariant,
+  warning
+};

package/dist/es/external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/format-error-message.mjs

@@ -0,0 +1,6 @@
+function formatErrorMessage(message, errorCode) {
+  return errorCode ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}` : message;
+}
+export {
+  formatErrorMessage
+};

package/dist/es/external/.pnpm/{motion-utils@12.19.0 → motion-utils@12.23.6}/external/motion-utils/dist/es/warn-once.mjs

@@ -1,13 +1,12 @@
+import { formatErrorMessage } from "./format-error-message.mjs";
 const warned = /* @__PURE__ */ new Set();
 function hasWarned(message) {
   return warned.has(message);
 }
-function warnOnce(condition, message, element) {
+function warnOnce(condition, message, errorCode) {
   if (condition || warned.has(message))
     return;
-  console.warn(message);
-  if (element)
-    console.warn(element);
+  console.warn(formatErrorMessage(message, errorCode));
   warned.add(message);
 }
 export {

package/dist/es/features/animation/animation.d.ts

@@ -19,7 +19,7 @@ export declare class AnimationFeature extends Feature {
     /**
      * Setup child animations
      */
-    setupChildAnimations(transition: $Transition | undefined, controlActiveState: Partial<Record<string, boolean>> | undefined, isFallback: boolean): {
+    setupChildAnimations(transition: $Transition | undefined, controlActiveState: Partial<Record<string, boolean>> | undefined): {
         getChildAnimations: () => Promise<void>;
     } | {
         getChildAnimations: () => Promise<any[]>;

package/dist/es/features/animation/animation.mjs

@@ -1,27 +1,27 @@
 import { isAnimationControls } from "../../animation/utils.mjs";
 import { Feature } from "../feature.mjs";
 import { mountedStates } from "../../state/motion-state.mjs";
-import { visualElementStore } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/render/store.mjs";
+import { visualElementStore } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/render/store.mjs";
 import { motionEvent } from "../../state/event.mjs";
 import { style } from "../../state/style.mjs";
 import { transformResetValue } from "../../state/transform.mjs";
 import { hasChanged, resolveVariant } from "../../state/utils.mjs";
 import { isDef } from "@vueuse/core";
 import { createVisualElement } from "../../state/create-visual-element.mjs";
-import { prefersReducedMotion } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/utils/reduced-motion/state.mjs";
-import { animate } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/animation/animate/index.mjs";
-import { noop } from "../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/noop.mjs";
+import { prefersReducedMotion } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/utils/reduced-motion/state.mjs";
+import { calcChildStagger } from "./calc-child-stagger.mjs";
+import { animate } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { noop } from "../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/noop.mjs";
 const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 class AnimationFeature extends Feature {
   constructor(state) {
-    var _a;
+    var _a, _b;
     super(state);
     this.animateUpdates = ({
       controlActiveState,
       directAnimate,
       directTransition,
       controlDelay = 0,
-      isFallback,
       isExit
     } = {}) => {
       const { reducedMotion } = this.state.options.motionConfig;
@@ -34,8 +34,9 @@ class AnimationFeature extends Feature {
         directAnimate,
         directTransition
       });
+      this.state.finalTransition = animationOptions;
       const factories = this.createAnimationFactories(prevTarget, animationOptions, controlDelay);
-      const { getChildAnimations } = this.setupChildAnimations(animationOptions, this.state.activeStates, isFallback);
+      const { getChildAnimations } = this.setupChildAnimations(animationOptions, this.state.activeStates);
       return this.executeAnimations({
         factories,
         getChildAnimations,
@@ -65,6 +66,7 @@ class AnimationFeature extends Feature {
       },
       reducedMotionConfig: this.state.options.motionConfig.reducedMotion
     });
+    (_b = this.state.visualElement.parent) == null ? void 0 : _b.addChild(this.state.visualElement);
     this.state.animateUpdates = this.animateUpdates;
     if (this.state.isMounted())
       this.state.startAnimation();
@@ -105,7 +107,7 @@ class AnimationFeature extends Feature {
   /**
    * Setup child animations
    */
-  setupChildAnimations(transition, controlActiveState, isFallback) {
+  setupChildAnimations(transition, controlActiveState) {
     var _a;
     const visualElement = this.state.visualElement;
     if (!((_a = visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
@@ -189,6 +191,7 @@ class AnimationFeature extends Feature {
    * Subscribe any provided AnimationControls to the component's VisualElement
    */
   mount() {
+    var _a, _b;
     const { element } = this.state;
     mountedStates.set(element, this.state);
     if (!visualElementStore.get(element)) {
@@ -197,6 +200,16 @@ class AnimationFeature extends Feature {
     }
     this.state.visualElement.state = this.state;
     this.updateAnimationControlsSubscription();
+    const visualElement = this.state.visualElement;
+    const parentVisualElement = visualElement.parent;
+    visualElement.enteringChildren = void 0;
+    if (((_a = this.state.parent) == null ? void 0 : _a.isMounted()) && !visualElement.isControllingVariants && ((_b = parentVisualElement == null ? void 0 : parentVisualElement.enteringChildren) == null ? void 0 : _b.has(visualElement))) {
+      const { delayChildren } = this.state.parent.finalTransition || {};
+      this.animateUpdates({
+        controlActiveState: this.state.parent.activeStates,
+        controlDelay: calcChildStagger(parentVisualElement.enteringChildren, visualElement, delayChildren)
+      })();
+    }
   }
   update() {
     const { animate: animate2 } = this.state.options;

package/dist/es/features/animation/calc-child-stagger.d.ts

@@ -0,0 +1,3 @@
+import { VisualElement } from 'framer-motion';
+import { DynamicOption } from 'motion-dom';
+export declare function calcChildStagger(children: Set<VisualElement>, child: VisualElement, delayChildren?: number | DynamicOption<number>, staggerChildren?: number, staggerDirection?: number): number;

package/dist/es/features/animation/calc-child-stagger.mjs

@@ -0,0 +1,14 @@
+function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
+  const sortedChildren = Array.from(children).sort((a, b) => a.sortNodePosition(b));
+  const index = sortedChildren.indexOf(child);
+  const numChildren = children.size;
+  const maxStaggerDuration = (numChildren - 1) * staggerChildren;
+  const delayIsFunction = typeof delayChildren === "function";
+  if (index === sortedChildren.length - 1) {
+    child.parent.enteringChildren = void 0;
+  }
+  return delayIsFunction ? delayChildren(index, numChildren) : staggerDirection === 1 ? index * staggerChildren : maxStaggerDuration - index * staggerChildren;
+}
+export {
+  calcChildStagger
+};

package/dist/es/features/animation/types.d.ts

@@ -11,7 +11,6 @@ export interface AnimateUpdatesOptions {
     controlDelay?: number;
     directAnimate?: Options['animate'];
     directTransition?: Options['transition'];
-    isFallback?: boolean;
     isExit?: boolean;
 }
 export type AnimateUpdates = (options?: AnimateUpdatesOptions) => Promise<any> | (() => Promise<any>);

package/dist/es/features/dom-animation.mjs

@@ -9,10 +9,6 @@ const domAnimation = [
   HoverGesture,
   InViewGesture,
   FocusGesture
-  // ProjectionFeature,
-  // DragGesture,
-  // LayoutFeature,
-  // PanGesture,
 ];
 export {
   domAnimation

package/dist/es/features/gestures/drag/VisualElementDragControls.mjs

@@ -11,13 +11,13 @@ import { eachAxis } from "../../../projection/utils/each-axis.mjs";
 import { addValueToWillChange } from "../../../value/use-will-change/add-will-change.mjs";
 import { measurePageBox } from "../../../projection/utils/measure.mjs";
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from "../../../projection/conversion.mjs";
-import { animateMotionValue } from "../../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/animation/interfaces/motion-value.mjs";
+import { animateMotionValue } from "../../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/animation/interfaces/motion-value.mjs";
 import { invariant } from "hey-listen";
 import { isPresent } from "../../../state/utils/is-present.mjs";
 import { getContextWindow } from "../../../utils/get-context-window.mjs";
-import { percent } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/value/types/numbers/units.mjs";
-import { frame } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/frameloop/frame.mjs";
-import { mixNumber } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/utils/mix/number.mjs";
+import { percent } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/value/types/numbers/units.mjs";
+import { frame } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { mixNumber } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/utils/mix/number.mjs";
 const elementDragControls = /* @__PURE__ */ new WeakMap();
 class VisualElementDragControls {
   constructor(visualElement) {

package/dist/es/features/gestures/drag/index.mjs

@@ -1,6 +1,6 @@
 import { Feature } from "../../feature.mjs";
 import { VisualElementDragControls } from "./VisualElementDragControls.mjs";
-import { noop } from "../../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/noop.mjs";
+import { noop } from "../../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/noop.mjs";
 class DragGesture extends Feature {
   constructor(state) {
     super(state);

package/dist/es/features/gestures/drag/utils/constraints.mjs

@@ -1,7 +1,7 @@
 import { calcLength } from "../../../../projection/geometry/delta-calc.mjs";
-import { mixNumber } from "../../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/utils/mix/number.mjs";
-import { progress } from "../../../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/progress.mjs";
-import { clamp } from "../../../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/clamp.mjs";
+import { mixNumber } from "../../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/utils/mix/number.mjs";
+import { progress } from "../../../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/progress.mjs";
+import { clamp } from "../../../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/clamp.mjs";
 function applyConstraints(point, { min, max }, elastic) {
   if (min !== void 0 && point < min) {
     point = elastic ? mixNumber(min, point, elastic.min) : Math.max(point, min);

package/dist/es/features/gestures/focus/index.mjs

@@ -1,6 +1,6 @@
 import { addDomEvent } from "../../../events/add-dom-event.mjs";
 import { Feature } from "../../feature.mjs";
-import { pipe } from "../../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/pipe.mjs";
+import { pipe } from "../../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/pipe.mjs";
 class FocusGesture extends Feature {
   constructor() {
     super(...arguments);

package/dist/es/features/gestures/hover/index.mjs

@@ -1,7 +1,7 @@
 import { Feature } from "../../feature.mjs";
-import { hover } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/gestures/hover.mjs";
+import { hover } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/gestures/hover.mjs";
 import { extractEventInfo } from "../press/index.mjs";
-import { frame } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { frame } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
 function handleHoverEvent(state, event, lifecycle) {
   const props = state.options;
   if (props.whileHover) {

package/dist/es/features/gestures/in-view/index.mjs

@@ -1,6 +1,6 @@
 import { Feature } from "../../feature.mjs";
-import { inView } from "../../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
-import { frame } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { inView } from "../../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { frame } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
 function handleHoverEvent(state, entry, lifecycle) {
   const props = state.options;
   if (props.whileInView) {

package/dist/es/features/gestures/pan/PanSession.mjs

@@ -1,9 +1,9 @@
 import { addPointerEvent } from "../../../events/add-pointer-event.mjs";
 import { extractEventInfo } from "../../../events/event-info.mjs";
-import { distance2D } from "../../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/utils/distance.mjs";
-import { pipe } from "../../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/pipe.mjs";
-import { secondsToMilliseconds, millisecondsToSeconds } from "../../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/time-conversion.mjs";
-import { frame, cancelFrame, frameData } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { distance2D } from "../../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/utils/distance.mjs";
+import { pipe } from "../../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/pipe.mjs";
+import { secondsToMilliseconds, millisecondsToSeconds } from "../../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/time-conversion.mjs";
+import { frame, cancelFrame, frameData } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
 import { isPrimaryPointer } from "../../../events/utils/is-primary-pointer.mjs";
 class PanSession {
   constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {

package/dist/es/features/gestures/pan/index.mjs

@@ -1,9 +1,9 @@
 import { PanSession } from "./PanSession.mjs";
 import { addPointerEvent } from "../../../events/add-pointer-event.mjs";
 import { Feature } from "../../feature.mjs";
-import { noop } from "../../../external/.pnpm/motion-utils@12.19.0/external/motion-utils/dist/es/noop.mjs";
+import { noop } from "../../../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/noop.mjs";
 import { getContextWindow } from "../../../utils/get-context-window.mjs";
-import { frame } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { frame } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
 function asyncHandler(handler) {
   return (event, info) => {
     if (handler) {

package/dist/es/features/gestures/press/index.mjs

@@ -1,6 +1,6 @@
 import { Feature } from "../../feature.mjs";
-import { press } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/gestures/press/index.mjs";
-import { frame } from "../../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { press } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/gestures/press/index.mjs";
+import { frame } from "../../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
 function extractEventInfo(event) {
   return {
     point: {

package/dist/es/features/layout/config.mjs

@@ -1,5 +1,5 @@
-import { correctBorderRadius } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
-import { correctBoxShadow } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
+import { correctBorderRadius } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
+import { correctBoxShadow } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
 const defaultScaleCorrector = {
   borderRadius: {
     ...correctBorderRadius,

package/dist/es/features/layout/layout.mjs

@@ -1,7 +1,7 @@
 import { Feature } from "../feature.mjs";
-import { addScaleCorrector } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
+import { addScaleCorrector } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { defaultScaleCorrector } from "./config.mjs";
-import { globalProjectionState } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/projection/node/state.mjs";
+import { globalProjectionState } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/node/state.mjs";
 class LayoutFeature extends Feature {
   constructor(state) {
     super(state);

package/dist/es/features/layout/projection.mjs

@@ -1,7 +1,7 @@
 import { Feature } from "../feature.mjs";
-import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
+import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
 import { getClosestProjectingNode } from "./utils.mjs";
-import { addScaleCorrector } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
+import { addScaleCorrector } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { defaultScaleCorrector } from "./config.mjs";
 import { isHTMLElement } from "../gestures/drag/utils/is.mjs";
 import { doneCallbacks } from "../../components/animate-presence/presence.mjs";