motion-v 0.10.0 → 0.10.1

package/dist/cjs/index.js

@@ -4875,7 +4875,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2 } = {})
     return startDelay + delay2;
   };
 }
-function delay(callback, timeout) {
+function delay$1(callback, timeout) {
   const start = time.now();
   const checkElapsed = ({ timestamp }) => {
     const elapsed = timestamp - start;
@@ -4888,7 +4888,7 @@ function delay(callback, timeout) {
   return () => cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {
-  return delay(callback, secondsToMilliseconds$1(timeout));
+  return delay$1(callback, secondsToMilliseconds$1(timeout));
 }
 const distance = (a, b) => Math.abs(a - b);
 function distance2D(a, b) {
@@ -5012,7 +5012,7 @@ function shallowCompare(next, prev) {
   return true;
 }
 function getOptions(options, key) {
-  return options[key] ? { ...options, ...options[key] } : { ...options };
+  return options[key] ? { ...options, ...options[key], [key]: void 0 } : { ...options };
 }
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");
@@ -6422,22 +6422,22 @@ class LayoutFeature extends Feature {
   }
   didUpdate() {
     var _a, _b;
-    if (this.state.options.layout || this.state.options.layoutId)
+    if (this.state.options.layout || this.state.options.layoutId || this.state.options.drag)
       (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
   mount() {
     var _a;
     const options = this.state.options;
     const layoutGroup = this.state.options.layoutGroup;
-    if (options.layout || options.layoutId || options.drag) {
+    if (options.layout || options.layoutId) {
       const projection = this.state.visualElement.projection;
       if (projection) {
         projection.promote();
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
-      this.didUpdate();
       globalProjectionState.hasEverUpdated = true;
     }
+    this.didUpdate();
   }
   beforeUnmount() {
     const projection = this.state.visualElement.projection;
@@ -6452,11 +6452,16 @@ 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);
-    } else {
+    if (projection) {
+      if (layoutGroup == null ? void 0 : layoutGroup.group) {
+        layoutGroup.group.remove(projection);
+      }
+      if ((_b = (_a = projection.getStack()) == null ? void 0 : _a.lead) == null ? void 0 : _b.animationProgress) {
+        return;
+      }
       this.didUpdate();
     }
   }
@@ -6971,7 +6976,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         attachResizeListener(instance, () => {
           this.root.updateBlockedByResize = true;
           cancelDelay && cancelDelay();
-          cancelDelay = delay(resizeUnblockUpdate, 250);
+          cancelDelay = delay$1(resizeUnblockUpdate, 250);
           if (globalProjectionState.hasAnimatedSinceResize) {
             globalProjectionState.hasAnimatedSinceResize = false;
             this.nodes.forEach(finishAnimation);
@@ -8322,34 +8327,26 @@ class MotionState {
   unmount(unMountChildren = false) {
     const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
     const unmount = () => {
-      var _a, _b, _c;
-      mountedStates.delete(this.element);
-      this.featureManager.unmount();
-      if (unMountChildren && !shouldDelay) {
-        frame.render(() => {
-          var _a2;
-          (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
-        });
-      } else {
-        (_a = this.visualElement) == null ? void 0 : _a.unmount();
-      }
       if (unMountChildren) {
-        const unmountChild = (child) => {
-          var _a2;
-          child.unmount(true);
-          (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
-        };
-        Array.from(this.children).forEach(unmountChild);
+        Array.from(this.children).reverse().forEach(this.unmountChild);
+      }
+      const unmountState = () => {
+        var _a, _b, _c;
+        (_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();
+      };
+      if (shouldDelay) {
+        Promise.resolve().then(unmountState);
+      } else {
+        unmountState();
       }
-      (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
     };
-    if (shouldDelay) {
-      Promise.resolve().then(() => {
-        unmount();
-      });
-    } else {
-      unmount();
-    }
+    unmount();
+  }
+  unmountChild(child) {
+    child.unmount(true);
   }
   // Called before updating, executes in parent-to-child order
   beforeUpdate() {
@@ -8376,7 +8373,7 @@ class MotionState {
     });
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive
+        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants
       });
     }
   }
@@ -8654,12 +8651,17 @@ function usePopLayout(props) {
   function addPopStyle(state2) {
     if (props.mode !== "popLayout")
       return;
+    const parent = state2.element.offsetParent;
+    const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
     const size = {
       height: state2.element.offsetHeight || 0,
       width: state2.element.offsetWidth || 0,
       top: state2.element.offsetTop,
-      left: state2.element.offsetLeft
+      left: state2.element.offsetLeft,
+      right: 0
     };
+    size.right = parentWidth - size.width - size.left;
+    const x = props.anchorX === "left" ? `left: ${size.left}` : `right: ${size.right}`;
     state2.element.dataset.motionPopId = state2.id;
     const style2 = document.createElement("style");
     if (config.value.nonce) {
@@ -8667,11 +8669,6 @@ function usePopLayout(props) {
     }
     styles.set(state2, style2);
     document.head.appendChild(style2);
-    style2.textContent = `
-      [data-motion-pop-id="${state2.id}"] {
-        animation: pop 0.3s ease-in-out;
-      }
-    `;
     if (style2.sheet) {
       style2.sheet.insertRule(`
     [data-motion-pop-id="${state2.id}"] {
@@ -8679,8 +8676,8 @@ function usePopLayout(props) {
       width: ${size.width}px !important;
       height: ${size.height}px !important;
       top: ${size.top}px !important;
-          left: ${size.left}px !important;
-        }
+      ${x}px !important;
+      }
       `);
     }
   }
@@ -8689,7 +8686,7 @@ function usePopLayout(props) {
     if (!style2)
       return;
     styles.delete(state2);
-    requestIdleCallback(() => {
+    frame.render(() => {
       document.head.removeChild(style2);
     });
   }
@@ -8699,6 +8696,11 @@ function usePopLayout(props) {
     styles
   };
 }
+function delay(fn) {
+  return Promise.resolve().then(() => {
+    fn();
+  });
+}
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
@@ -8712,7 +8714,8 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: Boolean, default: false }
+    unwrapElement: { type: Boolean, default: false },
+    anchorX: { default: "left" }
   },
   setup(__props) {
     const props = __props;
@@ -8724,28 +8727,30 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       presenceContext.initial = void 0;
     });
+    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     function enter(el) {
       const state2 = mountedStates.get(el);
       if (!state2) {
         return;
       }
+      removePopStyle(state2);
       state2.isVShow = true;
       removeDoneCallback(el);
-      state2.setActive("exit", false);
+      delay(() => {
+        state2.setActive("exit", false);
+      });
     }
-    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     const exitDom = /* @__PURE__ */ new Map();
     vue.onUnmounted(() => {
       exitDom.clear();
     });
     function exit(el, done) {
-      let state2 = mountedStates.get(el);
-      if (!state2) {
-        if (!props.unwrapElement) {
-          return done();
-        }
+      if (props.unwrapElement) {
         el = el.firstElementChild;
-        state2 = mountedStates.get(el);
+      }
+      const state2 = mountedStates.get(el);
+      if (!state2) {
+        return done();
       }
       exitDom.set(el, true);
       removeDoneCallback(el);
@@ -8765,19 +8770,19 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           if (!styles.has(state2)) {
             state2.willUpdate("done");
           } else {
-            frame.render(() => {
-              removePopStyle(state2);
-            });
+            removePopStyle(state2);
           }
           done();
-          if (!(el == null ? void 0 : el.isConnected)) {
+          if (!el.isConnected) {
             state2.unmount(true);
           }
         }
       }
       doneCallbacks.set(el, doneCallback);
       el.addEventListener("motioncomplete", doneCallback);
-      state2.setActive("exit", true);
+      delay(() => {
+        state2.setActive("exit", true);
+      });
     }
     const transitionProps = vue.computed(() => {
       if (props.multiple) {
@@ -9405,7 +9410,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "LayoutGroup",
   props: {
     id: {},
-    inherit: { type: [Boolean, String] }
+    inherit: { type: [Boolean, String], default: true }
   },
   setup(__props) {
     const props = __props;
@@ -9611,6 +9616,7 @@ exports.Reorder = Reorder;
 exports.ReorderGroup = ReorderGroup;
 exports.ReorderItem = ReorderItem;
 exports.RowValue = _sfc_main$1;
+exports.addScaleCorrector = addScaleCorrector;
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.anticipate = anticipate;
@@ -9650,6 +9656,7 @@ exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
 exports.motion = motion;
 exports.motionValue = motionValue;
+exports.mountedStates = mountedStates;
 exports.noop = noop;
 exports.pipe = pipe;
 exports.progress = progress$1;

package/dist/es/components/LayoutGroup.d.ts

@@ -10,9 +10,20 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<LayoutGroupProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<LayoutGroupProps>>>, {}, {}>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<LayoutGroupProps>, {
+    inherit: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LayoutGroupProps>, {
+    inherit: boolean;
+}>>>, {
+    inherit: boolean | "id" | "group";
+}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
@@ -27,3 +38,6 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/es/components/LayoutGroup.vue.mjs

@@ -4,7 +4,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutGroup",
   props: {
     id: {},
-    inherit: { type: [Boolean, String] }
+    inherit: { type: [Boolean, String], default: true }
   },
   setup(__props) {
     const props = __props;

package/dist/es/components/animate-presence/AnimatePresence.d.ts

@@ -12,16 +12,19 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     initial: boolean;
     multiple: boolean;
     unwrapElement: boolean;
+    anchorX: string;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
     mode: string;
     initial: boolean;
     multiple: boolean;
     unwrapElement: boolean;
+    anchorX: string;
 }>>>, {
     initial: boolean;
     mode: "wait" | "popLayout" | "sync";
     multiple: boolean;
     unwrapElement: boolean;
+    anchorX: "left" | "right";
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/es/components/animate-presence/AnimatePresence.vue.mjs

@@ -2,7 +2,7 @@ import { defineComponent, onMounted, onUnmounted, computed, openBlock, createBlo
 import { mountedStates } from "../../state/motion-state.mjs";
 import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
-import { frame } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { delay } from "../../utils/delay.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -16,7 +16,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: Boolean, default: false }
+    unwrapElement: { type: Boolean, default: false },
+    anchorX: { default: "left" }
   },
   setup(__props) {
     const props = __props;
@@ -28,28 +29,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       presenceContext.initial = void 0;
     });
+    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     function enter(el) {
       const state = mountedStates.get(el);
       if (!state) {
         return;
       }
+      removePopStyle(state);
       state.isVShow = true;
       removeDoneCallback(el);
-      state.setActive("exit", false);
+      delay(() => {
+        state.setActive("exit", false);
+      });
     }
-    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     const exitDom = /* @__PURE__ */ new Map();
     onUnmounted(() => {
       exitDom.clear();
     });
     function exit(el, done) {
-      let state = mountedStates.get(el);
-      if (!state) {
-        if (!props.unwrapElement) {
-          return done();
-        }
+      if (props.unwrapElement) {
         el = el.firstElementChild;
-        state = mountedStates.get(el);
+      }
+      const state = mountedStates.get(el);
+      if (!state) {
+        return done();
       }
       exitDom.set(el, true);
       removeDoneCallback(el);
@@ -69,19 +72,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!styles.has(state)) {
             state.willUpdate("done");
           } else {
-            frame.render(() => {
-              removePopStyle(state);
-            });
+            removePopStyle(state);
           }
           done();
-          if (!(el == null ? void 0 : el.isConnected)) {
+          if (!el.isConnected) {
             state.unmount(true);
           }
         }
       }
       doneCallbacks.set(el, doneCallback);
       el.addEventListener("motioncomplete", doneCallback);
-      state.setActive("exit", true);
+      delay(() => {
+        state.setActive("exit", true);
+      });
     }
     const transitionProps = computed(() => {
       if (props.multiple) {

package/dist/es/components/animate-presence/types.d.ts

@@ -6,4 +6,5 @@ export interface AnimatePresenceProps {
     custom?: any;
     onExitComplete?: VoidFunction;
     unwrapElement?: boolean;
+    anchorX?: 'left' | 'right';
 }

package/dist/es/components/animate-presence/use-pop-layout.mjs

@@ -1,16 +1,22 @@
 import { useMotionConfig } from "../motion-config/context.mjs";
+import { frame } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();
   function addPopStyle(state) {
     if (props.mode !== "popLayout")
       return;
+    const parent = state.element.offsetParent;
+    const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
     const size = {
       height: state.element.offsetHeight || 0,
       width: state.element.offsetWidth || 0,
       top: state.element.offsetTop,
-      left: state.element.offsetLeft
+      left: state.element.offsetLeft,
+      right: 0
     };
+    size.right = parentWidth - size.width - size.left;
+    const x = props.anchorX === "left" ? `left: ${size.left}` : `right: ${size.right}`;
     state.element.dataset.motionPopId = state.id;
     const style = document.createElement("style");
     if (config.value.nonce) {
@@ -18,11 +24,6 @@ function usePopLayout(props) {
     }
     styles.set(state, style);
     document.head.appendChild(style);
-    style.textContent = `
-      [data-motion-pop-id="${state.id}"] {
-        animation: pop 0.3s ease-in-out;
-      }
-    `;
     if (style.sheet) {
       style.sheet.insertRule(`
     [data-motion-pop-id="${state.id}"] {
@@ -30,8 +31,8 @@ function usePopLayout(props) {
       width: ${size.width}px !important;
       height: ${size.height}px !important;
       top: ${size.top}px !important;
-          left: ${size.left}px !important;
-        }
+      ${x}px !important;
+      }
       `);
     }
   }
@@ -40,7 +41,7 @@ function usePopLayout(props) {
     if (!style)
       return;
     styles.delete(state);
-    requestIdleCallback(() => {
+    frame.render(() => {
       document.head.removeChild(style);
     });
   }

package/dist/es/components/index.d.ts

@@ -3,3 +3,4 @@ export * from './animate-presence';
 export * from './motion-config';
 export * from './reorder';
 export { default as RowValue } from './RowValue';
+export { mountedStates } from '../state';

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

@@ -1,11 +1,14 @@
 import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue';
 import { MotionProps } from './Motion';
+import { MotionHTMLAttributes } from '../../types';
 type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;
 type MotionComponentProps = {
     create: <T extends DefineComponent>(T: any) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
 };
-interface MotionNameSpace extends Record<keyof IntrinsicElementAttributes, DefineComponent<MotionProps<keyof IntrinsicElementAttributes, unknown>>> {
+type MotionNameSpace = {
+    [K in keyof IntrinsicElementAttributes]: DefineComponent<MotionProps<K, unknown> & MotionHTMLAttributes<K>>;
+} & {
     create: MotionComponentProps['create'];
-}
+};
 export declare const motion: MotionNameSpace;
 export {};

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

@@ -15,22 +15,22 @@ class LayoutFeature extends Feature {
   }
   didUpdate() {
     var _a, _b;
-    if (this.state.options.layout || this.state.options.layoutId)
+    if (this.state.options.layout || this.state.options.layoutId || this.state.options.drag)
       (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
   mount() {
     var _a;
     const options = this.state.options;
     const layoutGroup = this.state.options.layoutGroup;
-    if (options.layout || options.layoutId || options.drag) {
+    if (options.layout || options.layoutId) {
       const projection = this.state.visualElement.projection;
       if (projection) {
         projection.promote();
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
-      this.didUpdate();
       globalProjectionState.hasEverUpdated = true;
     }
+    this.didUpdate();
   }
   beforeUnmount() {
     const projection = this.state.visualElement.projection;
@@ -45,11 +45,16 @@ 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);
-    } else {
+    if (projection) {
+      if (layoutGroup == null ? void 0 : layoutGroup.group) {
+        layoutGroup.group.remove(projection);
+      }
+      if ((_b = (_a = projection.getStack()) == null ? void 0 : _a.lead) == null ? void 0 : _b.animationProgress) {
+        return;
+      }
       this.didUpdate();
     }
   }

package/dist/es/index.d.ts

@@ -1,4 +1,5 @@
 export * from 'framer-motion/dom';
+export { addScaleCorrector } from '../node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs';
 export { motionValue as useMotionValue } from 'framer-motion/dom';
 export * from './components';
 export { default as LayoutGroup } from './components/LayoutGroup';

package/dist/es/index.mjs

@@ -1,3 +1,4 @@
+import { addScaleCorrector } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { default as default2 } from "./components/LayoutGroup.vue.mjs";
 import { useLayoutGroup } from "./components/use-layout-group.mjs";
 import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion } from "./components/context.mjs";
@@ -41,6 +42,7 @@ import { wrap } from "./external/.pnpm/framer-motion@11.16.6/external/framer-mot
 import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
 import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { motion } from "./components/motion/NameSpace.mjs";
+import { mountedStates } from "./state/motion-state.mjs";
 import { provideMotionConfig, useMotionConfig } from "./components/motion-config/context.mjs";
 import { Reorder, ReorderGroup, ReorderItem } from "./components/reorder/index.mjs";
 import { useComputed } from "./value/use-computed.mjs";
@@ -70,6 +72,7 @@ export {
   ReorderGroup,
   ReorderItem,
   default4 as RowValue,
+  addScaleCorrector,
   animate,
   animateMini,
   anticipate,
@@ -110,6 +113,7 @@ export {
   mix,
   motion,
   motionValue,
+  mountedStates,
   noop,
   pipe,
   progress,

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

@@ -29,6 +29,7 @@ export declare class MotionState {
     mount(element: HTMLElement, options: Options, notAnimate?: boolean): void;
     beforeUnmount(): void;
     unmount(unMountChildren?: boolean): void;
+    private unmountChild;
     beforeUpdate(): void;
     update(options: Options): void;
     setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;

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

@@ -124,34 +124,26 @@ class MotionState {
   unmount(unMountChildren = false) {
     const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
     const unmount = () => {
-      var _a, _b, _c;
-      mountedStates.delete(this.element);
-      this.featureManager.unmount();
-      if (unMountChildren && !shouldDelay) {
-        frame.render(() => {
-          var _a2;
-          (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
-        });
-      } else {
-        (_a = this.visualElement) == null ? void 0 : _a.unmount();
-      }
       if (unMountChildren) {
-        const unmountChild = (child) => {
-          var _a2;
-          child.unmount(true);
-          (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
-        };
-        Array.from(this.children).forEach(unmountChild);
+        Array.from(this.children).reverse().forEach(this.unmountChild);
+      }
+      const unmountState = () => {
+        var _a, _b, _c;
+        (_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();
+      };
+      if (shouldDelay) {
+        Promise.resolve().then(unmountState);
+      } else {
+        unmountState();
       }
-      (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
     };
-    if (shouldDelay) {
-      Promise.resolve().then(() => {
-        unmount();
-      });
-    } else {
-      unmount();
-    }
+    unmount();
+  }
+  unmountChild(child) {
+    child.unmount(true);
   }
   // Called before updating, executes in parent-to-child order
   beforeUpdate() {
@@ -178,7 +170,7 @@ class MotionState {
     });
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive
+        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants
       });
     }
   }

package/dist/es/state/utils.mjs

@@ -24,7 +24,7 @@ function shallowCompare(next, prev) {
   return true;
 }
 function getOptions(options, key) {
-  return options[key] ? { ...options, ...options[key] } : { ...options };
+  return options[key] ? { ...options, ...options[key], [key]: void 0 } : { ...options };
 }
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");

package/dist/es/types/motion-values.d.ts

@@ -1,6 +1,6 @@
 import { MotionValue } from 'framer-motion/dom';
-import { Options } from './state';
-import { AriaAttributes, Events, SVGAttributes } from 'vue';
+import { ElementType, Options } from './state';
+import { AriaAttributes, Events, IntrinsicElementAttributes, SVGAttributes } from 'vue';
 type EventHandlers<E> = {
     [K in keyof E]?: E[K] extends (...args: any) => any ? E[K] : (payload: E[K]) => void;
 };
@@ -88,4 +88,6 @@ export interface SVGAttributesWithMotionValues {
 export type SetMotionValueType<T, Keys extends keyof T> = {
     [K in keyof T]: K extends Keys ? SVGAttributesAsMotionValues : T[K];
 };
+type IntrinsicElementAttributesAsMotionValues = SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>;
+export type MotionHTMLAttributes<C extends ElementType> = Omit<IntrinsicElementAttributesAsMotionValues[C], keyof Options | 'style' | 'as' | 'asChild'>;
 export {};

package/dist/es/utils/delay.d.ts

@@ -0,0 +1 @@
+export declare function delay(fn: () => void): Promise<void>;

package/dist/es/utils/delay.mjs

@@ -0,0 +1,8 @@
+function delay(fn) {
+  return Promise.resolve().then(() => {
+    fn();
+  });
+}
+export {
+  delay
+};

package/package.json

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