motion-v 0.6.2 → 0.7.1

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,6 +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";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -62,9 +63,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
           if (!styles.has(state)) {
             state.willUpdate("done");
+          } else {
+            frame.render(() => {
+              removePopStyle(state);
+            });
           }
           done();
-          removePopStyle(state);
           if (!(el == null ? void 0 : el.isConnected)) {
             state.unmount(true);
           }

package/dist/es/components/{Motion.vue.mjs → motion/Motion.vue.mjs}

@@ -1,12 +1,12 @@
 import { defineComponent, mergeDefaults, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, ref, openBlock, createBlock, unref, withCtx, renderSlot } from "vue";
-import { injectMotion, injectLayoutGroup, provideMotion } from "./context.mjs";
-import { convertSvgStyleToAttributes, createStyles } from "../state/style.mjs";
+import { injectMotion, injectLayoutGroup, provideMotion } from "../context.mjs";
+import { convertSvgStyleToAttributes, createStyles } from "../../state/style.mjs";
 import { Primitive } from "./Primitive.mjs";
-import { MotionState } from "../state/motion-state.mjs";
-import { injectAnimatePresence } from "./presence.mjs";
+import { MotionState } from "../../state/motion-state.mjs";
+import { injectAnimatePresence } from "../presence.mjs";
 import { getMotionElement, checkMotionIsHidden } from "./utils.mjs";
-import { useMotionConfig } from "./motion-config/context.mjs";
-import { isMotionValue } from "../utils/motion-value.mjs";
+import { useMotionConfig } from "../motion-config/context.mjs";
+import { isMotionValue } from "../../utils/motion-value.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "Motion",
@@ -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,
@@ -79,7 +82,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     layoutScroll: false,
     layoutRoot: false,
     dragListener: true,
-    dragElastic: 0.2,
+    dragElastic: 0.5,
     dragMomentum: true,
     whileDrag: void 0,
     crossfade: true

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

@@ -0,0 +1,47 @@
+import { defineComponent, h } from "vue";
+import _sfc_main from "./Motion.vue.mjs";
+const componentCache = /* @__PURE__ */ new Map();
+const motion = new Proxy(_sfc_main, {
+  get(target, prop) {
+    if (typeof prop === "symbol")
+      return target[prop];
+    let motionComponent = componentCache.get(prop);
+    if (prop === "create") {
+      return (component) => {
+        return defineComponent({
+          inheritAttrs: false,
+          name: `motion.${component.$name}`,
+          setup(_, { attrs, slots }) {
+            return () => {
+              return h(_sfc_main, {
+                ...attrs,
+                as: component,
+                asChild: false
+              }, slots);
+            };
+          }
+        });
+      };
+    }
+    if (!motionComponent) {
+      motionComponent = defineComponent({
+        inheritAttrs: false,
+        name: `motion.${prop}`,
+        setup(_, { attrs, slots }) {
+          return () => {
+            return h(_sfc_main, {
+              ...attrs,
+              as: prop,
+              asChild: false
+            }, slots);
+          };
+        }
+      });
+      componentCache.set(prop, motionComponent);
+    }
+    return motionComponent;
+  }
+});
+export {
+  motion
+};

package/dist/es/constants/index.mjs

@@ -19,7 +19,8 @@ const utilities = {
     "useInView",
     "useAnimationFrame",
     "useMotionValueEvent",
-    "useLayoutGroup"
+    "useLayoutGroup",
+    "useDragControls"
   ]
 };
 export {

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

@@ -0,0 +1,33 @@
+import { isAnimationControls } from "../../animation/utils.mjs";
+import { Feature } from "../feature.mjs";
+class AnimationFeature extends Feature {
+  constructor(state) {
+    super(state);
+  }
+  updateAnimationControlsSubscription() {
+    const { animate } = this.state.options;
+    if (isAnimationControls(animate)) {
+      this.unmountControls = animate.subscribe(this.state);
+    }
+  }
+  /**
+   * Subscribe any provided AnimationControls to the component's VisualElement
+   */
+  mount() {
+    this.updateAnimationControlsSubscription();
+  }
+  update() {
+    const { animate } = this.state.options;
+    const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
+    if (animate !== prevAnimate) {
+      this.updateAnimationControlsSubscription();
+    }
+  }
+  unmount() {
+    var _a;
+    (_a = this.unmountControls) == null ? void 0 : _a.call(this);
+  }
+}
+export {
+  AnimationFeature
+};

package/dist/es/features/feature-manager.mjs

@@ -1,7 +1,9 @@
 import { SVGFeature } from "./svg.mjs";
 import { LayoutFeature } from "./layout/layout.mjs";
 import { PanGesture } from "./gestures/pan/index.mjs";
+import { AnimationFeature } from "./animation/animation.mjs";
 import { ProjectionFeature } from "./layout/projection.mjs";
+import { FocusGesture } from "./gestures/focus/index.mjs";
 import { HoverGesture } from "./gestures/hover/index.mjs";
 import { PressGesture } from "./gestures/press/index.mjs";
 import { InViewGesture } from "./gestures/in-view/index.mjs";
@@ -17,7 +19,9 @@ class FeatureManager {
       new LayoutFeature(state),
       new ProjectionFeature(state),
       new PanGesture(state),
-      new DragGesture(state)
+      new DragGesture(state),
+      new FocusGesture(state),
+      new AnimationFeature(state)
     ];
   }
   mount() {

package/dist/es/features/gestures/drag/use-drag-controls.mjs

@@ -0,0 +1,43 @@
+class DragControls {
+  constructor() {
+    this.componentControls = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
+   *
+   * @internal
+   */
+  subscribe(controls) {
+    this.componentControls.add(controls);
+    return () => this.componentControls.delete(controls);
+  }
+  /**
+   * Start a drag gesture on every `motion` component that has this set of drag controls
+   * passed into it via the `dragControls` prop.
+   *
+   * ```jsx
+   * dragControls.start(e, {
+   *   snapToCursor: true
+   * })
+   * ```
+   *
+   * @param event - PointerEvent
+   * @param options - Options
+   *
+   * @public
+   */
+  start(event, options) {
+    this.componentControls.forEach((controls) => {
+      controls.start(
+        event,
+        options
+      );
+    });
+  }
+}
+const createDragControls = () => new DragControls();
+const useDragControls = createDragControls;
+export {
+  DragControls,
+  useDragControls
+};

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

@@ -0,0 +1,36 @@
+import { addDomEvent } from "../../../events/add-dom-event.mjs";
+import { Feature } from "../../feature.mjs";
+import { pipe } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/pipe.mjs";
+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(this.state.element, "focus", () => this.onFocus()),
+      addDomEvent(this.state.element, "blur", () => this.onBlur())
+    );
+  }
+}
+export {
+  FocusGesture
+};

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

@@ -19,21 +19,41 @@ class InViewGesture extends Feature {
   constructor(state) {
     super(state);
   }
-  mount() {
+  startObserver() {
     const element = this.state.element;
     if (!element)
       return;
+    this.unmount();
+    const { once, ...viewOptions } = this.state.getOptions().inViewOptions || {};
     this.unmount = inView(
       element,
       (entry) => {
         handleHoverEvent(this.state, entry, "Enter");
-        return (endEvent) => {
-          handleHoverEvent(this.state, entry, "Leave");
-        };
-      }
+        if (!once) {
+          return (endEvent) => {
+            handleHoverEvent(this.state, entry, "Leave");
+          };
+        }
+      },
+      viewOptions
+    );
+  }
+  mount() {
+    this.startObserver();
+  }
+  update() {
+    const { props, prevProps } = this.state.visualElement;
+    const hasOptionsChanged = ["amount", "margin", "root"].some(
+      hasViewportOptionChanged(props, prevProps)
     );
+    if (hasOptionsChanged) {
+      this.startObserver();
+    }
   }
 }
+function hasViewportOptionChanged({ inViewOptions = {} }, { inViewOptions: prevViewport = {} } = {}) {
+  return (name) => inViewOptions[name] !== prevViewport[name];
+}
 export {
   InViewGesture
 };

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

@@ -3,7 +3,7 @@ import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@11.16.6/e
 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 { doneCallbacks } from "../../components/presence.mjs";
+import { isHTMLElement } from "../gestures/drag/utils/is.mjs";
 class ProjectionFeature extends Feature {
   constructor(state) {
     super(state);
@@ -16,43 +16,17 @@ class ProjectionFeature extends Feature {
       options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.state.visualElement.parent)
     );
     this.state.visualElement.projection.isPresent = true;
-    this.state.visualElement.projection.setOptions({
-      layout: options.layout,
-      layoutId: options.layoutId,
-      // TODO: drag
-      alwaysMeasureLayout: false,
-      visualElement: this.state.visualElement,
-      animationType: typeof options.layout === "string" ? options.layout : "both",
-      // initialPromotionConfig
-      layoutRoot: options.layoutRoot,
-      layoutScroll: options.layoutScroll,
-      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);
-          }
-        }
-      }
-    });
+    this.setOptions();
   }
   beforeMount() {
     this.initProjection();
   }
-  update() {
+  setOptions() {
     const options = this.state.options;
     this.state.visualElement.projection.setOptions({
       layout: options.layout,
       layoutId: options.layoutId,
-      // TODO: drag
-      alwaysMeasureLayout: false,
+      alwaysMeasureLayout: Boolean(options.drag) || options.dragConstraints && isHTMLElement(options.dragConstraints),
       visualElement: this.state.visualElement,
       animationType: typeof options.layout === "string" ? options.layout : "both",
       // initialPromotionConfig
@@ -61,6 +35,9 @@ class ProjectionFeature extends Feature {
       crossfade: options.crossfade
     });
   }
+  update() {
+    this.setOptions();
+  }
   mount() {
     var _a;
     (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);

package/dist/es/index.mjs

@@ -1,8 +1,9 @@
-import { default as default2 } from "./components/Motion.vue.mjs";
-import { default as default3 } from "./components/LayoutGroup.vue.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";
 import { components, utilities } from "./constants/index.mjs";
+import { useDragControls } from "./features/gestures/drag/use-drag-controls.mjs";
+import { default as default3 } from "./components/motion/Motion.vue.mjs";
 import { default as default4 } from "./components/animate-presence/AnimatePresence.vue.mjs";
 import { default as default5 } from "./components/motion-config/MotionConfig.vue.mjs";
 import { MotionValue, motionValue, motionValue as motionValue2 } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
@@ -38,6 +39,7 @@ import { transform } from "./external/.pnpm/framer-motion@11.16.6/external/frame
 import { wrap } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/wrap.mjs";
 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 { provideMotionConfig, useMotionConfig } from "./components/motion-config/context.mjs";
 import { useComputed } from "./value/use-computed.mjs";
 import { useCombineMotionValues } from "./value/use-combine-values.mjs";
@@ -48,7 +50,8 @@ import { useMotionValueEvent } from "./value/use-motion-value-event.mjs";
 import { useSpring } from "./value/use-spring.mjs";
 import { useScroll } from "./value/use-scroll.mjs";
 import { useVelocity } from "./value/use-velocity.mjs";
-import { useAnimate } from "./animation/use-animate.mjs";
+import { useAnimate } from "./animation/hooks/use-animate.mjs";
+import { useAnimationControls } from "./animation/hooks/use-animation-controls.mjs";
 import { createContext } from "./utils/createContext.mjs";
 import { isMotionValue } from "./utils/motion-value.mjs";
 import { useInView } from "./utils/use-in-view.mjs";
@@ -57,8 +60,8 @@ import { millisecondsToSeconds, secondsToMilliseconds } from "./utils/time-conve
 import { getContextWindow } from "./utils/get-context-window.mjs";
 export {
   default4 as AnimatePresence,
-  default3 as LayoutGroup,
-  default2 as Motion,
+  default2 as LayoutGroup,
+  default3 as Motion,
   default5 as MotionConfig,
   MotionValue,
   animate,
@@ -99,6 +102,7 @@ export {
   millisecondsToSeconds,
   mirrorEasing,
   mix,
+  motion,
   motionValue,
   noop,
   pipe,
@@ -117,9 +121,11 @@ export {
   time,
   transform,
   useAnimate,
+  useAnimationControls,
   useAnimationFrame,
   useCombineMotionValues,
   useComputed,
+  useDragControls,
   useInView,
   useLayoutGroup,
   useMotionConfig,

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

@@ -0,0 +1,129 @@
+import { resolveVariant, getOptions, hasChanged } from "./utils.mjs";
+import { style } from "./style.mjs";
+import { transformResetValue } from "./transform.mjs";
+import { motionEvent } from "./event.mjs";
+import { isDef } from "@vueuse/core";
+import { isAnimationControls } from "../animation/utils.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { noop } from "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
+import "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+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 = 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 animationTarget = { ...this.target };
+  const element = this.element;
+  const finishAnimation = (animationPromise) => {
+    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
+      if (isExit) {
+        element.dispatchEvent(motionEvent("motionstart", animationTarget));
+        element.dispatchEvent(motionEvent("motioncomplete", animationTarget, isExit));
+      }
+      return;
+    }
+    element.dispatchEvent(motionEvent("motionstart", animationTarget));
+    animationPromise.then(() => element.dispatchEvent(motionEvent("motioncomplete", animationTarget, 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()]);
+    finishAnimation(animationPromise);
+    return animationPromise;
+  };
+  return controlActiveState ? getAnimationPromise : getAnimationPromise();
+}
+export {
+  animateUpdates
+};