motion-v 0.7.0 → 0.7.1

package/dist/cjs/index.js

@@ -3309,7 +3309,7 @@ function initPrefersReducedMotion() {
 }
 const valueTypes = [...dimensionValueTypes, color, complex];
 const findValueType = (v) => valueTypes.find(testValueType(v));
-function isAnimationControls(v) {
+function isAnimationControls$1(v) {
   return v !== null && typeof v === "object" && typeof v.start === "function";
 }
 function isVariantLabel(v) {
@@ -3326,7 +3326,7 @@ const variantPriorityOrder = [
 ];
 const variantProps = ["initial", ...variantPriorityOrder];
 function isControllingVariants(props) {
-  return isAnimationControls(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
+  return isAnimationControls$1(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
 }
 function isVariantNode(props) {
   return Boolean(isControllingVariants(props) || props.variants);
@@ -7943,6 +7943,36 @@ class ProjectionFeature extends Feature {
     (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
   }
 }
+class FocusGesture extends Feature {
+  constructor() {
+    super(...arguments);
+    this.isActive = false;
+  }
+  onFocus() {
+    let isFocusVisible = false;
+    try {
+      isFocusVisible = this.state.element.matches(":focus-visible");
+    } catch (e) {
+      isFocusVisible = true;
+    }
+    if (!isFocusVisible)
+      return;
+    this.state.setActive("focus", true);
+    this.isActive = true;
+  }
+  onBlur() {
+    if (!this.isActive)
+      return;
+    this.state.setActive("focus", false);
+    this.isActive = false;
+  }
+  mount() {
+    this.unmount = pipe(
+      addDomEvent$1(this.state.element, "focus", () => this.onFocus()),
+      addDomEvent$1(this.state.element, "blur", () => this.onBlur())
+    );
+  }
+}
 class FeatureManager {
   constructor(state2) {
     this.features = [];
@@ -7954,7 +7984,9 @@ class FeatureManager {
       new LayoutFeature(state2),
       new ProjectionFeature(state2),
       new PanGesture(state2),
-      new DragGesture(state2)
+      new DragGesture(state2),
+      new FocusGesture(state2),
+      new AnimationFeature(state2)
     ];
   }
   mount() {
@@ -7982,13 +8014,160 @@ class FeatureManager {
     this.features.forEach((feature) => feature.beforeUnmount());
   }
 }
-function motionEvent(name, target, isExit) {
-  return new CustomEvent(name, { detail: { target, isExit } });
+function isAnimationControls(v) {
+  return v !== null && typeof v === "object" && typeof v.start === "function";
+}
+class AnimationFeature extends Feature {
+  constructor(state2) {
+    super(state2);
+  }
+  updateAnimationControlsSubscription() {
+    const { animate: animate2 } = this.state.options;
+    if (isAnimationControls(animate2)) {
+      this.unmountControls = animate2.subscribe(this.state);
+    }
+  }
+  /**
+   * Subscribe any provided AnimationControls to the component's VisualElement
+   */
+  mount() {
+    this.updateAnimationControlsSubscription();
+  }
+  update() {
+    const { animate: animate2 } = this.state.options;
+    const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
+    if (animate2 !== prevAnimate) {
+      this.updateAnimationControlsSubscription();
+    }
+  }
+  unmount() {
+    var _a;
+    (_a = this.unmountControls) == null ? void 0 : _a.call(this);
+  }
 }
 function createVisualElement(Component, options) {
   return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
+function motionEvent(name, target, isExit) {
+  return new CustomEvent(name, { detail: { target, isExit } });
+}
+const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+function animateUpdates({
+  controlActiveState = void 0,
+  controlDelay = 0,
+  directAnimate,
+  directTransition,
+  isFallback = false
+} = {}) {
+  const prevTarget = this.target;
+  this.target = { ...this.baseTarget };
+  const animationOptions = {};
+  const transition = { ...this.options.transition };
+  if (directAnimate)
+    resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
+  else
+    resolveStateAnimation.call(this, controlActiveState, animationOptions);
+  const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback);
+  return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
+}
+function resolveDirectAnimation(directAnimate, directTransition, animationOptions) {
+  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
+  if (!variant)
+    return;
+  const transition = { ...this.options.transition, ...directTransition || variant.transition };
+  Object.entries(variant).forEach(([key, value]) => {
+    if (key === "transition")
+      return;
+    this.target[key] = value;
+    animationOptions[key] = getOptions(transition, key);
+  });
+}
+function resolveStateAnimation(controlActiveState, animationOptions) {
+  if (controlActiveState)
+    this.activeStates = { ...this.activeStates, ...controlActiveState };
+  STATE_TYPES.forEach((name) => {
+    if (!this.activeStates[name] || isAnimationControls(this.options[name]))
+      return;
+    const definition = core.isDef(this.options[name]) ? this.options[name] : this.context[name];
+    const variant = resolveVariant(definition, this.options.variants, this.options.custom);
+    if (!variant)
+      return;
+    const transition = { ...this.options.transition, ...variant.transition };
+    Object.entries(variant).forEach(([key, value]) => {
+      if (key === "transition")
+        return;
+      this.target[key] = value;
+      animationOptions[key] = getOptions(transition, key);
+    });
+  });
+}
+function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
+  const factories = [];
+  new Set(Object.keys(this.target)).forEach((key) => {
+    var _a;
+    if (!hasChanged(this.visualElement.getValue(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];
+    const targetTransition = animationOptions[key];
+    factories.push(() => animate(
+      this.element,
+      { [key]: keyValue },
+      {
+        ...targetTransition,
+        delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
+      }
+    ));
+  });
+  return factories;
+}
+function setupChildAnimations(transition, controlActiveState, isFallback) {
+  var _a;
+  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || controlActiveState)
+    return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
+  const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
+  const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
+  const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
+  const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
+    const childDelay = delayChildren + generateStaggerDuration(index);
+    return child.state.animateUpdates({
+      controlActiveState: this.activeStates,
+      controlDelay: isFallback ? 0 : childDelay
+    });
+  }).filter(Boolean);
+  return {
+    getChildAnimations: () => Promise.all(childAnimations.map((animation) => animation())),
+    childAnimations
+  };
+}
+function executeAnimations(factories, getChildAnimations, childAnimations, transition, controlActiveState) {
+  let animations;
+  const getAnimation = () => {
+    animations = factories.map((factory) => factory()).filter(Boolean);
+    return Promise.all(animations);
+  };
+  const isExit = this.activeStates.exit;
+  const animationTarget2 = { ...this.target };
+  const element = this.element;
+  const finishAnimation2 = (animationPromise) => {
+    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
+      if (isExit) {
+        element.dispatchEvent(motionEvent("motionstart", animationTarget2));
+        element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
+      }
+      return;
+    }
+    element.dispatchEvent(motionEvent("motionstart", animationTarget2));
+    animationPromise.then(() => element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit))).catch(noop);
+  };
+  const getAnimationPromise = () => {
+    const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);
+    finishAnimation2(animationPromise);
+    return animationPromise;
+  };
+  return controlActiveState ? getAnimationPromise : getAnimationPromise();
+}
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
@@ -8003,6 +8182,7 @@ class MotionState {
       animate: true
     };
     this._context = null;
+    this.animateUpdates = animateUpdates;
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
@@ -8152,122 +8332,10 @@ class MotionState {
       child.state.setActive(name, isActive, false);
     });
     if (isAnimate) {
-      this.animateUpdates();
-    }
-  }
-  // Core animation update logic
-  animateUpdates(controlActiveState = void 0, controlDelay = 0) {
-    var _a;
-    const prevTarget = this.target;
-    this.target = {
-      ...this.baseTarget
-    };
-    const animationOptions = {};
-    let transition;
-    if (controlActiveState) {
-      this.activeStates = { ...this.activeStates, ...controlActiveState };
-    }
-    for (const name of STATE_TYPES) {
-      if (!this.activeStates[name]) {
-        continue;
-      }
-      const definition = core.isDef(this.options[name]) ? this.options[name] : this.context[name];
-      const variant = resolveVariant(
-        definition,
-        this.options.variants,
-        this.options.custom
-      );
-      transition = Object.assign({}, this.options.transition, variant == null ? void 0 : variant.transition);
-      if (!variant)
-        continue;
-      const allTarget = { ...variant };
-      for (const key in allTarget) {
-        if (key === "transition")
-          continue;
-        this.target[key] = variant[key];
-        animationOptions[key] = getOptions(
-          transition,
-          key
-        );
-      }
-    }
-    const allTargetKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(this.target)
-    ]);
-    const animationFactories = [];
-    allTargetKeys.forEach((key) => {
-      var _a2;
-      if (hasChanged(prevTarget[key], this.target[key])) {
-        (_a2 = this.baseTarget)[key] ?? (_a2[key] = style.get(this.element, key));
-        const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
-        const targetTransition = animationOptions[key];
-        animationFactories.push(
-          () => {
-            return animate(
-              this.element,
-              {
-                [key]: keyValue
-              },
-              {
-                ...targetTransition,
-                delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
-              }
-            );
-          }
-        );
-      }
-    });
-    let getChildAnimations = () => Promise.resolve();
-    let childAnimations = [];
-    if (((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) && !controlActiveState) {
-      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
-      const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
-      const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
-      childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
-        const childDelay = delayChildren + generateStaggerDuration(index);
-        return child.state.animateUpdates(this.activeStates, childDelay);
-      }).filter(Boolean);
-      getChildAnimations = () => Promise.all(childAnimations.map((animation) => animation()));
-    }
-    let animations;
-    const getAnimation = () => {
-      animations = animationFactories.map((factory) => factory()).filter(Boolean);
-      return Promise.all(animations);
-    };
-    const { when } = transition;
-    let animationPromise;
-    const isExit = this.activeStates.exit;
-    const animationTarget2 = { ...this.target };
-    const element = this.element;
-    function finishAnimation2() {
-      if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
-        if (isExit) {
-          element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-          element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
-        }
-        return;
-      }
-      element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-      animationPromise.then(() => {
-        element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
-      }).catch(noop);
-    }
-    function getAnimationPromise() {
-      if (when) {
-        const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
-        animationPromise = first().then(() => last());
-        finishAnimation2();
-        return animationPromise;
-      } else {
-        animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
-        finishAnimation2();
-        return animationPromise;
-      }
-    }
-    if (controlActiveState) {
-      return getAnimationPromise;
+      this.animateUpdates({
+        isFallback: !isActive
+      });
     }
-    getAnimationPromise();
   }
   isMounted() {
     return Boolean(this.element);
@@ -8359,7 +8427,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     onPanSessionStart: { type: Function },
     onPanStart: { type: Function },
     onPan: { type: Function },
-    onPanEnd: { type: Function }
+    onPanEnd: { type: Function },
+    focus: {},
+    onFocus: { type: Function },
+    onBlur: { type: Function }
   }, {
     as: "div",
     asChild: false,
@@ -8578,13 +8649,6 @@ function usePopLayout(props) {
     styles
   };
 }
-function requestIdleCallback$1(callback) {
-  if (typeof requestIdleCallback$1 !== "undefined") {
-    requestIdleCallback$1(callback);
-  } else {
-    setTimeout(callback, 50);
-  }
-}
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
@@ -8646,7 +8710,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           if (!styles.has(state2)) {
             state2.willUpdate("done");
           } else {
-            requestIdleCallback$1(() => {
+            frame.render(() => {
               removePopStyle(state2);
             });
           }
@@ -8891,7 +8955,7 @@ function useSpring(source, config = {}) {
   let latestValue = value.get();
   let latestSetter = () => {
   };
-  const stopAnimation = () => {
+  const stopAnimation2 = () => {
     if (activeSpringAnimation) {
       activeSpringAnimation.stop();
       activeSpringAnimation = null;
@@ -8902,7 +8966,7 @@ function useSpring(source, config = {}) {
     if ((animation == null ? void 0 : animation.time) === 0) {
       animation.sample(frameData.delta);
     }
-    stopAnimation();
+    stopAnimation2();
     activeSpringAnimation = animateValue({
       keyframes: [value.get(), latestValue],
       velocity: value.getVelocity(),
@@ -8919,7 +8983,7 @@ function useSpring(source, config = {}) {
       latestSetter = set;
       frame.update(startAnimation);
       return value.get();
-    }, stopAnimation);
+    }, stopAnimation2);
   }, { immediate: true });
   if (isMotionValue(source)) {
     source.on("change", (v) => {
@@ -8993,7 +9057,6 @@ function useVelocity(value) {
 }
 const components = {
   motion: [
-    "motion",
     "Motion",
     "AnimatePresence",
     "LayoutGroup",
@@ -9043,6 +9106,88 @@ function useAnimate() {
   });
   return [domProxy, animate2];
 }
+function stopAnimation(visualElement) {
+  visualElement.values.forEach((value) => value.stop());
+}
+function animationControls() {
+  let hasMounted = false;
+  const subscribers = /* @__PURE__ */ new Set();
+  const controls = {
+    subscribe(state2) {
+      subscribers.add(state2);
+      return () => void subscribers.delete(state2);
+    },
+    start(definition, transitionOverride) {
+      heyListen.invariant(
+        hasMounted,
+        "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook."
+      );
+      const animations = [];
+      subscribers.forEach((state2) => {
+        animations.push(
+          state2.animateUpdates({
+            directAnimate: definition,
+            directTransition: transitionOverride
+          })
+        );
+      });
+      return Promise.all(animations);
+    },
+    set(definition) {
+      heyListen.invariant(
+        hasMounted,
+        "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook."
+      );
+      return subscribers.forEach((state2) => {
+        setValues(state2, definition);
+      });
+    },
+    stop() {
+      subscribers.forEach((state2) => {
+        stopAnimation(state2.visualElement);
+      });
+    },
+    mount() {
+      hasMounted = true;
+      return () => {
+        hasMounted = false;
+        controls.stop();
+      };
+    }
+  };
+  return controls;
+}
+function setValues(state2, definition) {
+  if (typeof definition === "string") {
+    return setVariants(state2, [definition]);
+  } else {
+    setTarget(state2.visualElement, definition);
+  }
+}
+function setVariants(state2, variantLabels) {
+  const reversedLabels = [...variantLabels].reverse();
+  const visualElement = state2.visualElement;
+  reversedLabels.forEach((key) => {
+    const variant = visualElement.getVariant(key);
+    variant && setTarget(visualElement, variant);
+    if (visualElement.variantChildren) {
+      visualElement.variantChildren.forEach((child) => {
+        setVariants(mountedStates.get(child.current), variantLabels);
+      });
+    }
+  });
+}
+function useAnimationControls() {
+  const controls = animationControls();
+  let unmount;
+  vue.onMounted(() => {
+    unmount = controls.mount();
+  });
+  vue.onUnmounted(() => {
+    unmount();
+  });
+  return controls;
+}
 class DragControls {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
@@ -9143,6 +9288,7 @@ exports.sync = sync;
 exports.time = time;
 exports.transform = transform;
 exports.useAnimate = useAnimate;
+exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useCombineMotionValues = useCombineMotionValues;
 exports.useComputed = useComputed;

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

@@ -0,0 +1,78 @@
+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";
+function stopAnimation(visualElement) {
+  visualElement.values.forEach((value) => value.stop());
+}
+function animationControls() {
+  let hasMounted = false;
+  const subscribers = /* @__PURE__ */ new Set();
+  const controls = {
+    subscribe(state) {
+      subscribers.add(state);
+      return () => void subscribers.delete(state);
+    },
+    start(definition, transitionOverride) {
+      invariant(
+        hasMounted,
+        "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook."
+      );
+      const animations = [];
+      subscribers.forEach((state) => {
+        animations.push(
+          state.animateUpdates({
+            directAnimate: definition,
+            directTransition: transitionOverride
+          })
+        );
+      });
+      return Promise.all(animations);
+    },
+    set(definition) {
+      invariant(
+        hasMounted,
+        "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook."
+      );
+      return subscribers.forEach((state) => {
+        setValues(state, definition);
+      });
+    },
+    stop() {
+      subscribers.forEach((state) => {
+        stopAnimation(state.visualElement);
+      });
+    },
+    mount() {
+      hasMounted = true;
+      return () => {
+        hasMounted = false;
+        controls.stop();
+      };
+    }
+  };
+  return controls;
+}
+function setValues(state, definition) {
+  if (typeof definition === "string") {
+    return setVariants(state, [definition]);
+  } else {
+    setTarget(state.visualElement, definition);
+  }
+}
+function setVariants(state, variantLabels) {
+  const reversedLabels = [...variantLabels].reverse();
+  const visualElement = state.visualElement;
+  reversedLabels.forEach((key) => {
+    const variant = visualElement.getVariant(key);
+    variant && setTarget(visualElement, variant);
+    if (visualElement.variantChildren) {
+      visualElement.variantChildren.forEach((child) => {
+        setVariants(mountedStates.get(child.current), variantLabels);
+      });
+    }
+  });
+}
+export {
+  animationControls,
+  setValues
+};

package/dist/es/animation/{use-animate.mjs → hooks/use-animate.mjs}

@@ -1,5 +1,5 @@
 import { ref, onUnmounted } from "vue";
-import { createScopedAnimate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { createScopedAnimate } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
 function useAnimate() {
   const dom = ref(null);
   const domProxy = new Proxy(dom, {

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

@@ -0,0 +1,16 @@
+import { animationControls } from "./animation-controls.mjs";
+import { onMounted, onUnmounted } from "vue";
+function useAnimationControls() {
+  const controls = animationControls();
+  let unmount;
+  onMounted(() => {
+    unmount = controls.mount();
+  });
+  onUnmounted(() => {
+    unmount();
+  });
+  return controls;
+}
+export {
+  useAnimationControls
+};

package/dist/es/animation/utils.mjs

@@ -0,0 +1,6 @@
+function isAnimationControls(v) {
+  return v !== null && typeof v === "object" && typeof v.start === "function";
+}
+export {
+  isAnimationControls
+};

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 { requestIdleCallback } from "./utils.mjs";
+import { frame } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -64,7 +64,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!styles.has(state)) {
             state.willUpdate("done");
           } else {
-            requestIdleCallback(() => {
+            frame.render(() => {
               removePopStyle(state);
             });
           }

package/dist/es/components/motion/Motion.vue.mjs

@@ -66,7 +66,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onPanSessionStart: { type: Function },
     onPanStart: { type: Function },
     onPan: { type: Function },
-    onPanEnd: { type: Function }
+    onPanEnd: { type: Function },
+    focus: {},
+    onFocus: { type: Function },
+    onBlur: { type: Function }
   }, {
     as: "div",
     asChild: false,

package/dist/es/constants/index.mjs

@@ -1,6 +1,5 @@
 const components = {
   motion: [
-    "motion",
     "Motion",
     "AnimatePresence",
     "LayoutGroup",