motion-v 1.7.0 → 1.7.2

package/dist/cjs/index.js

@@ -7540,7 +7540,7 @@ class AnimationFeature extends Feature {
       let resolvedVariant = core.isDef(definition) ? resolveVariant(definition, variants, customValue) : void 0;
       if (this.state.visualElement.isVariantNode) {
         const controlVariant = resolveVariant(this.state.context[name], variants, customValue);
-        resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : variant;
+        resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : Object.assign(variant, resolvedVariant);
       }
       if (!resolvedVariant)
         return;
@@ -9125,7 +9125,6 @@ function isVariantLabels(value) {
 }
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
-const mountedLayoutIds = /* @__PURE__ */ new Set();
 class MotionState {
   constructor(options, parent) {
     var _a;
@@ -9192,22 +9191,17 @@ class MotionState {
   }
   // Mount motion state to DOM element, handles parent-child relationships
   mount(element, options, notAnimate = false) {
-    var _a;
+    var _a, _b;
     heyListen.invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
     );
     this.element = element;
     this.updateOptions(options);
+    this.options.layoutId && ((_a = this.visualElement.projection.getStack()) == null ? void 0 : _a.members.length) > 0;
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      (_a = this.startAnimation) == null ? void 0 : _a.call(this);
-    }
-    if (this.options.layoutId) {
-      mountedLayoutIds.add(this.options.layoutId);
-      frame.render(() => {
-        mountedLayoutIds.clear();
-      });
+      (_b = this.startAnimation) == null ? void 0 : _b.call(this);
     }
   }
   clearAnimation() {
@@ -9231,22 +9225,22 @@ class MotionState {
     this.featureManager.beforeUnmount();
   }
   unmount(unMountChildren = false) {
-    const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
-    const unmount = () => {
-      const unmountState = () => {
-        var _a, _b, _c;
-        if (unMountChildren) {
-          Array.from(this.children).reverse().forEach(this.unmountChild);
-        }
-        (_b = (_a = this.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.delete(this);
-        mountedStates.delete(this.element);
-        this.featureManager.unmount();
-        (_c = this.visualElement) == null ? void 0 : _c.unmount();
-        this.clearAnimation();
-      };
-      shouldDelay ? Promise.resolve().then(unmountState) : unmountState();
-    };
-    unmount();
+    var _a, _b, _c, _d;
+    const shouldDelay = this.options.layoutId && ((_a = this.visualElement.projection) == null ? void 0 : _a.getStack().lead) === this.visualElement.projection && this.visualElement.projection.isProjecting();
+    if (shouldDelay) {
+      Promise.resolve().then(() => {
+        this.unmount(unMountChildren);
+      });
+      return;
+    }
+    if (unMountChildren) {
+      Array.from(this.children).reverse().forEach(this.unmountChild);
+    }
+    (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
+    mountedStates.delete(this.element);
+    this.featureManager.unmount();
+    (_d = this.visualElement) == null ? void 0 : _d.unmount();
+    this.clearAnimation();
   }
   unmountChild(child) {
     child.unmount(true);
@@ -9451,7 +9445,7 @@ const MotionComponentProps = {
   "layoutRoot": { type: Boolean, default: false },
   "data-framer-portal-id": { type: String },
   "crossfade": { type: Boolean, default: true },
-  "layoutDependency": { type: [String, Number, Object, Array] },
+  "layoutDependency": { type: null },
   "onBeforeLayoutMeasure": { type: Function },
   "onLayoutMeasure": { type: Function },
   "onLayoutAnimationStart": { type: Function },

package/dist/es/components/lazy-motion/context.d.ts

@@ -1,7 +1,7 @@
 import { Feature } from '../../features';
 import { Ref } from 'vue';
 export type LazyMotionContext = {
-    features: Ref<Feature[]>;
+    features: Ref<Array<typeof Feature>>;
     strict: boolean;
 };
 export declare const useLazyMotionContext: <T extends LazyMotionContext = LazyMotionContext>(fallback?: T) => T extends null ? LazyMotionContext : LazyMotionContext, lazyMotionContextProvider: (contextValue: LazyMotionContext) => LazyMotionContext;

package/dist/es/components/motion/props.d.ts

@@ -114,7 +114,7 @@ export declare const MotionComponentProps: {
         default: boolean;
     };
     layoutDependency: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+        type: any;
     };
     onBeforeLayoutMeasure: {
         type: FunctionConstructor;

package/dist/es/components/motion/props.mjs

@@ -51,7 +51,7 @@ const MotionComponentProps = {
   "layoutRoot": { type: Boolean, default: false },
   "data-framer-portal-id": { type: String },
   "crossfade": { type: Boolean, default: true },
-  "layoutDependency": { type: [String, Number, Object, Array] },
+  "layoutDependency": { type: null },
   "onBeforeLayoutMeasure": { type: Function },
   "onLayoutMeasure": { type: Function },
   "onLayoutAnimationStart": { type: Function },

package/dist/es/components/motion/utils.d.ts

@@ -7,7 +7,7 @@ type MotionCompProps = {
 };
 export interface MotionCreateOptions {
     forwardMotionProps?: boolean;
-    features?: Feature[];
+    features?: Array<typeof Feature>;
 }
 export declare function checkMotionIsHidden(instance: ComponentPublicInstance): boolean;
 /**
@@ -18,5 +18,5 @@ export declare function createMotionComponent(component: string | DefineComponen
 type MotionNameSpace = {
     [K in keyof IntrinsicElementAttributes]: DefineComponent<Omit<MotionProps<K, unknown>, 'as' | 'asChild' | 'motionConfig' | 'layoutGroup'> & MotionHTMLAttributes<K>, 'create'>;
 } & MotionCompProps;
-export declare function createMotionComponentWithFeatures(features?: Feature[]): MotionNameSpace;
+export declare function createMotionComponentWithFeatures(features?: Array<typeof Feature>): MotionNameSpace;
 export {};

package/dist/es/external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/microtask.mjs

@@ -1,5 +1,5 @@
 import { createRenderBatcher } from "./batcher.mjs";
-const { schedule: microtask, cancel: cancelMicrotask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
+const { schedule: microtask, cancel: cancelMicrotask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, true);
 export {
   cancelMicrotask,
   microtask

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

@@ -168,7 +168,7 @@ class AnimationFeature extends Feature {
       let resolvedVariant = isDef(definition) ? resolveVariant(definition, variants, customValue) : void 0;
       if (this.state.visualElement.isVariantNode) {
         const controlVariant = resolveVariant(this.state.context[name], variants, customValue);
-        resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : variant;
+        resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : Object.assign(variant, resolvedVariant);
       }
       if (!resolvedVariant)
         return;

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

@@ -1,2 +1,2 @@
 import { Feature } from './feature';
-export declare const domAnimation: Feature[];
+export declare const domAnimation: Array<typeof Feature>;

package/dist/es/features/dom-max.d.ts

@@ -1,2 +1,2 @@
 import { Feature } from './feature';
-export declare const domMax: Feature[];
+export declare const domMax: Array<typeof Feature>;

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

@@ -1,5 +1,5 @@
 import { MotionState } from '../state/motion-state';
-export declare abstract class Feature {
+export declare class Feature {
     state: MotionState;
     constructor(state: MotionState);
     beforeMount(): void;

package/dist/es/state/motion-state.d.ts

@@ -17,7 +17,7 @@ export declare class MotionState {
     parent?: MotionState;
     options: Options & {
         animatePresenceContext?: PresenceContext;
-        features?: Feature[];
+        features?: Array<typeof Feature>;
         lazyMotionContext?: LazyMotionContext;
     };
     isSafeToRemove: boolean;

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

@@ -4,10 +4,9 @@ import { FeatureManager } from "../features/feature-manager.mjs";
 import { doneCallbacks } from "../components/animate-presence/presence.mjs";
 import { isVariantLabels } from "./utils/is-variant-labels.mjs";
 import { noop } from "../external/.pnpm/motion-utils@12.23.6/external/motion-utils/dist/es/noop.mjs";
-import { frame, cancelFrame } from "../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { cancelFrame, frame } from "../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
-const mountedLayoutIds = /* @__PURE__ */ new Set();
 class MotionState {
   constructor(options, parent) {
     var _a;
@@ -74,22 +73,17 @@ class MotionState {
   }
   // Mount motion state to DOM element, handles parent-child relationships
   mount(element, options, notAnimate = false) {
-    var _a;
+    var _a, _b;
     invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
     );
     this.element = element;
     this.updateOptions(options);
+    this.options.layoutId && ((_a = this.visualElement.projection.getStack()) == null ? void 0 : _a.members.length) > 0;
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      (_a = this.startAnimation) == null ? void 0 : _a.call(this);
-    }
-    if (this.options.layoutId) {
-      mountedLayoutIds.add(this.options.layoutId);
-      frame.render(() => {
-        mountedLayoutIds.clear();
-      });
+      (_b = this.startAnimation) == null ? void 0 : _b.call(this);
     }
   }
   clearAnimation() {
@@ -113,22 +107,22 @@ class MotionState {
     this.featureManager.beforeUnmount();
   }
   unmount(unMountChildren = false) {
-    const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
-    const unmount = () => {
-      const unmountState = () => {
-        var _a, _b, _c;
-        if (unMountChildren) {
-          Array.from(this.children).reverse().forEach(this.unmountChild);
-        }
-        (_b = (_a = this.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.delete(this);
-        mountedStates.delete(this.element);
-        this.featureManager.unmount();
-        (_c = this.visualElement) == null ? void 0 : _c.unmount();
-        this.clearAnimation();
-      };
-      shouldDelay ? Promise.resolve().then(unmountState) : unmountState();
-    };
-    unmount();
+    var _a, _b, _c, _d;
+    const shouldDelay = this.options.layoutId && ((_a = this.visualElement.projection) == null ? void 0 : _a.getStack().lead) === this.visualElement.projection && this.visualElement.projection.isProjecting();
+    if (shouldDelay) {
+      Promise.resolve().then(() => {
+        this.unmount(unMountChildren);
+      });
+      return;
+    }
+    if (unMountChildren) {
+      Array.from(this.children).reverse().forEach(this.unmountChild);
+    }
+    (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
+    mountedStates.delete(this.element);
+    this.featureManager.unmount();
+    (_d = this.visualElement) == null ? void 0 : _d.unmount();
+    this.clearAnimation();
   }
   unmountChild(child) {
     child.unmount(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "",
   "author": "",
   "license": "MIT",

package/README.md

@@ -1,106 +0,0 @@
-<p align="center">
-  <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" />
-</p>
-<h1 align="center">Motion for Vue</h1>
-
-<br>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
-    <img src="https://img.shields.io/npm/v/motion-v.svg?style=flat-square" />
-  </a>
-  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
-  <img src="https://img.shields.io/npm/dm/motion-v.svg?style=flat-square" />
-  </a>
-  <a href="https://twitter.com/motiondotdev" target="_blank">
-  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
-  </a>
-</p>
-
-<br>
-<hr>
-<br>
-
-Motion for Vue is an open source, production-ready library that’s designed for all creative developers.
-
-It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
-
-It looks like this:
-
-```jsx
-<motion.div :animate="{ x: 100 }" />
-```
-
-It does all this:
-
-- Springs
-- Keyframes
-- Layout animations
-- Shared layout animations
-- Gestures (drag/tap/hover)
-- Scroll animations
-- SVG paths
-- Exit animations
-- Server-side rendering
-- Independent transforms
-- Orchestrate animations across components
-- CSS variables
-
-...and a whole lot more.
-
-## Get started
-
-### 🐇 Quick start
-
-Install `motion-v` via your package manager:
-
-```
-npm install motion-v
-```
-
-Then import the `motion` component:
-
-```vue
-<script setup>
-import { motion } from 'motion-v'
-</script>
-
-<template>
-  <motion.div :animate="{ x: 100 }" />
-</template>
-```
-
-### 💎 Contribute
-
-- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion-vue/blob/master/CONTRIBUTING.md) has you covered.
-- [Join our discord ](https://discord.com/invite/dCBuRgdNDG)
-
-### 👩🏻‍⚖️ License
-
-- Motion for Vue is MIT licensed.
-
-## ✨ Sponsors
-
-Motion is sustainable thanks to the kind support of its sponsors.
-
-### Partners
-
-#### Framer
-
-Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
-
-<a href="https://www.framer.com?utm_source=motion-readme">
-  <img alt="Framer" src="https://github.com/user-attachments/assets/0404c7a1-c29d-4785-89ae-aae315f3c759" width="300px" height="200px">
-</a>
-
-### Platinum
-
-<a href="https://syntax.fm"><img alt="Syntax.fm" src="https://github.com/user-attachments/assets/ab852bfe-b36c-490b-b98d-4061158c4863" width="300px" height="200px"></a> <a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
-
-### Gold
-
-<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
-
-### Silver
-
-<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://statamic.com"><img alt="Statamic" src="https://github.com/user-attachments/assets/5d28f090-bdd9-4b31-b134-fb2b94ca636f" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a> <a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a> <a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>