motion-v 0.7.1 → 0.8.1

package/dist/cjs/index.js

@@ -6398,8 +6398,12 @@ class LayoutFeature extends Feature {
     this.state.willUpdate("beforeUpdate");
   }
   update() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.root.didUpdate();
+    this.didUpdate();
+  }
+  didUpdate() {
+    var _a, _b;
+    if (this.state.options.layout || this.state.options.layoutId)
+      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
   beforeMount() {
   }
@@ -6413,7 +6417,7 @@ class LayoutFeature extends Feature {
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
       globalProjectionState.hasEverUpdated = true;
-      projection == null ? void 0 : projection.root.didUpdate();
+      this.didUpdate();
     }
   }
   beforeUnmount() {
@@ -6429,14 +6433,11 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
-    var _a, _b;
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
     if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
       layoutGroup.group.remove(projection);
-    if (this.state.options.layoutId || this.state.options.layout) {
-      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
-    }
+    this.didUpdate();
   }
 }
 function asyncHandler(handler) {
@@ -7932,7 +7933,21 @@ class ProjectionFeature extends Feature {
       // initialPromotionConfig
       layoutRoot: options.layoutRoot,
       layoutScroll: options.layoutScroll,
-      crossfade: options.crossfade
+      crossfade: options.crossfade,
+      onExitComplete: () => {
+        var _a;
+        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
+          const done = doneCallbacks.get(this.state.element);
+          this.state.isSafeToRemove = true;
+          if (done) {
+            done({
+              detail: {
+                isExit: true
+              }
+            }, true);
+          }
+        }
+      }
     });
   }
   update() {
@@ -8104,9 +8119,9 @@ function resolveStateAnimation(controlActiveState, animationOptions) {
 }
 function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
   const factories = [];
-  new Set(Object.keys(this.target)).forEach((key) => {
+  Object.keys(this.target).forEach((key) => {
     var _a;
-    if (!hasChanged(this.visualElement.getValue(key), this.target[key]))
+    if (!hasChanged(prevTarget[key], this.target[key]))
       return;
     (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
     const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
@@ -8345,7 +8360,8 @@ class MotionState {
   }
   willUpdate(label) {
     var _a;
-    (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+    if (this.options.layout || this.options.layoutId)
+      (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
   }
 }
 function getMotionElement(el) {
@@ -8802,11 +8818,7 @@ function nodeGroup() {
         subscriptions.delete(node);
       }
     },
-    dirty: dirtyAll,
-    didUpdate: () => {
-      var _a;
-      (_a = nodes[0]) == null ? void 0 : _a.didUpdate();
-    }
+    dirty: dirtyAll
   };
 }
 function useLayoutGroupProvider(props) {
@@ -9109,6 +9121,14 @@ function useAnimate() {
 function stopAnimation(visualElement) {
   visualElement.values.forEach((value) => value.stop());
 }
+function setStateTarget(state2, definition) {
+  const resolvedVariant = resolveVariant(definition, state2.options.variants, state2.options.custom);
+  Object.entries(resolvedVariant).forEach(([key, value]) => {
+    if (key === "transition")
+      return;
+    state2.target[key] = value;
+  });
+}
 function animationControls() {
   let hasMounted = false;
   const subscribers = /* @__PURE__ */ new Set();
@@ -9161,6 +9181,7 @@ function setValues(state2, definition) {
   if (typeof definition === "string") {
     return setVariants(state2, [definition]);
   } else {
+    setStateTarget(state2, definition);
     setTarget(state2.visualElement, definition);
   }
 }
@@ -9170,6 +9191,7 @@ function setVariants(state2, variantLabels) {
   reversedLabels.forEach((key) => {
     const variant = visualElement.getVariant(key);
     variant && setTarget(visualElement, variant);
+    setStateTarget(state2, variant);
     if (visualElement.variantChildren) {
       visualElement.variantChildren.forEach((child) => {
         setVariants(mountedStates.get(child.current), variantLabels);

package/dist/es/animation/hooks/animation-controls.mjs

@@ -1,9 +1,18 @@
 import { mountedStates } from "../../state/motion-state.mjs";
 import { invariant } from "hey-listen";
 import { setTarget } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/utils/setters.mjs";
+import { resolveVariant } from "../../state/utils.mjs";
 function stopAnimation(visualElement) {
   visualElement.values.forEach((value) => value.stop());
 }
+function setStateTarget(state, definition) {
+  const resolvedVariant = resolveVariant(definition, state.options.variants, state.options.custom);
+  Object.entries(resolvedVariant).forEach(([key, value]) => {
+    if (key === "transition")
+      return;
+    state.target[key] = value;
+  });
+}
 function animationControls() {
   let hasMounted = false;
   const subscribers = /* @__PURE__ */ new Set();
@@ -56,6 +65,7 @@ function setValues(state, definition) {
   if (typeof definition === "string") {
     return setVariants(state, [definition]);
   } else {
+    setStateTarget(state, definition);
     setTarget(state.visualElement, definition);
   }
 }
@@ -65,6 +75,7 @@ function setVariants(state, variantLabels) {
   reversedLabels.forEach((key) => {
     const variant = visualElement.getVariant(key);
     variant && setTarget(visualElement, variant);
+    setStateTarget(state, variant);
     if (visualElement.variantChildren) {
       visualElement.variantChildren.forEach((child) => {
         setVariants(mountedStates.get(child.current), variantLabels);

package/dist/{src → es}/components/group.d.ts

@@ -3,6 +3,5 @@ export interface NodeGroup {
     add: (node: IProjectionNode) => void;
     remove: (node: IProjectionNode) => void;
     dirty: VoidFunction;
-    didUpdate: VoidFunction;
 }
 export declare function nodeGroup(): NodeGroup;

package/dist/es/components/group.mjs

@@ -21,11 +21,7 @@ function nodeGroup() {
         subscriptions.delete(node);
       }
     },
-    dirty: dirtyAll,
-    didUpdate: () => {
-      var _a;
-      (_a = nodes[0]) == null ? void 0 : _a.didUpdate();
-    }
+    dirty: dirtyAll
   };
 }
 export {

package/dist/{src → es}/features/gestures/drag/types.d.ts

@@ -82,7 +82,7 @@ export interface DragHandlers {
      */
     onDragTransitionEnd?: () => void;
     /**
-     * If `dragConstraints` is set to a React ref, this callback will call with the measured drag constraints.
+     * If `dragConstraints` is set to a HTMLElement, this callback will call with the measured drag constraints.
      *
      * @public
      */

package/dist/{src → es}/features/layout/layout.d.ts

@@ -4,6 +4,7 @@ export declare class LayoutFeature extends Feature {
     constructor(state: MotionState);
     beforeUpdate(): void;
     update(): void;
+    didUpdate(): void;
     beforeMount(): void;
     mount(): void;
     beforeUnmount(): void;

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

@@ -11,8 +11,12 @@ class LayoutFeature extends Feature {
     this.state.willUpdate("beforeUpdate");
   }
   update() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.root.didUpdate();
+    this.didUpdate();
+  }
+  didUpdate() {
+    var _a, _b;
+    if (this.state.options.layout || this.state.options.layoutId)
+      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
   beforeMount() {
   }
@@ -26,7 +30,7 @@ class LayoutFeature extends Feature {
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
       globalProjectionState.hasEverUpdated = true;
-      projection == null ? void 0 : projection.root.didUpdate();
+      this.didUpdate();
     }
   }
   beforeUnmount() {
@@ -42,14 +46,11 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
-    var _a, _b;
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
     if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
       layoutGroup.group.remove(projection);
-    if (this.state.options.layoutId || this.state.options.layout) {
-      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
-    }
+    this.didUpdate();
   }
 }
 export {

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

@@ -4,6 +4,7 @@ import { getClosestProjectingNode } from "./utils.mjs";
 import { addScaleCorrector } from "../../external/.pnpm/framer-motion@11.16.6/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/presence.mjs";
 class ProjectionFeature extends Feature {
   constructor(state) {
     super(state);
@@ -32,7 +33,21 @@ class ProjectionFeature extends Feature {
       // initialPromotionConfig
       layoutRoot: options.layoutRoot,
       layoutScroll: options.layoutScroll,
-      crossfade: options.crossfade
+      crossfade: options.crossfade,
+      onExitComplete: () => {
+        var _a;
+        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
+          const done = doneCallbacks.get(this.state.element);
+          this.state.isSafeToRemove = true;
+          if (done) {
+            done({
+              detail: {
+                isExit: true
+              }
+            }, true);
+          }
+        }
+      }
     });
   }
   update() {

package/dist/es/state/animate-updates.mjs

@@ -60,9 +60,9 @@ function resolveStateAnimation(controlActiveState, animationOptions) {
 }
 function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
   const factories = [];
-  new Set(Object.keys(this.target)).forEach((key) => {
+  Object.keys(this.target).forEach((key) => {
     var _a;
-    if (!hasChanged(this.visualElement.getValue(key), this.target[key]))
+    if (!hasChanged(prevTarget[key], this.target[key]))
       return;
     (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
     const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];

package/dist/es/state/motion-state.mjs

@@ -184,7 +184,8 @@ class MotionState {
   }
   willUpdate(label) {
     var _a;
-    (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+    if (this.options.layout || this.options.layoutId)
+      (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
   }
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -17,7 +17,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/src/index.d.ts",
+      "types": "./dist/es/index.d.ts",
       "import": "./dist/es/index.mjs",
       "require": "./dist/cjs/index.js"
     },
@@ -34,12 +34,12 @@
   },
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.mjs",
-  "types": "./dist/src/index.d.ts",
+  "types": "./dist/es/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
         "./dist/*/index.d.ts",
-        "./dist/src/index.d.ts"
+        "./dist/es/index.d.ts"
       ],
       "nuxt": [
         "./dist/nuxt/index.d.mts",

package/dist/src/animation/use-animate.d.ts

@@ -1,8 +0,0 @@
-import { AnimationPlaybackControls } from 'framer-motion';
-import { Ref, UnwrapRef } from 'vue';
-import { createScopedAnimate } from 'framer-motion/dom';
-type Scope = Ref<UnwrapRef<Element>> & {
-    animations: AnimationPlaybackControls[];
-};
-export declare function useAnimate<T extends Element = any>(): [Scope, ReturnType<typeof createScopedAnimate>];
-export {};