motion-v 0.8.0 → 0.9.0

package/dist/cjs/index.js

@@ -6398,8 +6398,12 @@ class LayoutFeature extends Feature {
     this.state.willUpdate("beforeUpdate");
   }
   update() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.root.didUpdate();
+    this.didUpdate();
+  }
+  didUpdate() {
+    var _a, _b;
+    if (this.state.options.layout || this.state.options.layoutId)
+      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
   beforeMount() {
   }
@@ -6413,7 +6417,7 @@ class LayoutFeature extends Feature {
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
       globalProjectionState.hasEverUpdated = true;
-      projection == null ? void 0 : projection.root.didUpdate();
+      this.didUpdate();
     }
   }
   beforeUnmount() {
@@ -6429,14 +6433,11 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
-    var _a, _b;
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
     if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
       layoutGroup.group.remove(projection);
-    if (this.state.options.layoutId || this.state.options.layout) {
-      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
-    }
+    this.didUpdate();
   }
 }
 function asyncHandler(handler) {
@@ -7932,7 +7933,21 @@ class ProjectionFeature extends Feature {
       // initialPromotionConfig
       layoutRoot: options.layoutRoot,
       layoutScroll: options.layoutScroll,
-      crossfade: options.crossfade
+      crossfade: options.crossfade,
+      onExitComplete: () => {
+        var _a;
+        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
+          const done = doneCallbacks.get(this.state.element);
+          this.state.isSafeToRemove = true;
+          if (done) {
+            done({
+              detail: {
+                isExit: true
+              }
+            }, true);
+          }
+        }
+      }
     });
   }
   update() {
@@ -8229,6 +8244,9 @@ class MotionState {
   // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
+    for (const key in this.baseTarget) {
+      this.visualElement.setStaticValue(key, this.baseTarget[key]);
+    }
     this.target = {};
   }
   // Get initial animation state
@@ -8265,15 +8283,6 @@ class MotionState {
     }
     this.visualElement.state = this;
     this.updateOptions();
-    if (typeof this.initial === "object") {
-      for (const key in this.initial) {
-        this.visualElement.setStaticValue(key, this.initial[key]);
-      }
-    } else if (typeof this.initial === "string" && this.options.variants) {
-      for (const key in this.options.variants[this.initial]) {
-        this.visualElement.setStaticValue(key, this.options.variants[this.initial][key]);
-      }
-    }
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
       this.animateUpdates();
@@ -8345,7 +8354,8 @@ class MotionState {
   }
   willUpdate(label) {
     var _a;
-    (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+    if (this.options.layout || this.options.layoutId)
+      (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
   }
 }
 function getMotionElement(el) {
@@ -8368,7 +8378,7 @@ const [injectMotionConfig, provideMotionConfig] = createContext("MotionConfig");
 function useMotionConfig() {
   return injectMotionConfig(vue.computed(() => defaultConfig));
 }
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "Motion",
     inheritAttrs: false
@@ -8396,6 +8406,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean },
+    onBeforeLayoutMeasure: { type: Function },
+    onLayoutMeasure: { type: Function },
+    onLayoutAnimationStart: { type: Function },
+    onLayoutAnimationComplete: { type: Function },
     globalPressTarget: { type: Boolean },
     press: {},
     onPressStart: { type: Function },
@@ -8557,7 +8571,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const componentCache = /* @__PURE__ */ new Map();
-const motion = new Proxy(_sfc_main$3, {
+const motion = new Proxy(_sfc_main$5, {
   get(target, prop) {
     if (typeof prop === "symbol")
       return target[prop];
@@ -8569,7 +8583,7 @@ const motion = new Proxy(_sfc_main$3, {
           name: `motion.${component.$name}`,
           setup(_, { attrs, slots }) {
             return () => {
-              return vue.h(_sfc_main$3, {
+              return vue.h(_sfc_main$5, {
                 ...attrs,
                 as: component,
                 asChild: false
@@ -8585,7 +8599,7 @@ const motion = new Proxy(_sfc_main$3, {
         name: `motion.${prop}`,
         setup(_, { attrs, slots }) {
           return () => {
-            return vue.h(_sfc_main$3, {
+            return vue.h(_sfc_main$5, {
               ...attrs,
               as: prop,
               asChild: false
@@ -8649,7 +8663,7 @@ function usePopLayout(props) {
     styles
   };
 }
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
     inheritAttrs: true
@@ -8747,7 +8761,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MotionConfig",
     inheritAttrs: false
@@ -8772,86 +8786,163 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function useForceUpdate() {
-  const key = vue.ref(0);
-  function forceUpdate() {
-    key.value++;
-  }
-  return [forceUpdate, key];
-}
-function notify(node) {
-  return !node.isLayoutDirty && node.willUpdate(false);
-}
-function nodeGroup() {
-  const nodes = /* @__PURE__ */ new Set();
-  const subscriptions = /* @__PURE__ */ new WeakMap();
-  const dirtyAll = () => nodes.forEach(notify);
-  return {
-    add: (node) => {
-      nodes.add(node);
-      subscriptions.set(
-        node,
-        node.addEventListener("willUpdate", dirtyAll)
-      );
-    },
-    remove: (node) => {
-      nodes.delete(node);
-      const unsubscribe = subscriptions.get(node);
-      if (unsubscribe) {
-        unsubscribe();
-        subscriptions.delete(node);
-      }
-    },
-    dirty: dirtyAll,
-    didUpdate: () => {
-      var _a;
-      (_a = nodes[0]) == null ? void 0 : _a.didUpdate();
-    }
-  };
-}
-function useLayoutGroupProvider(props) {
-  const parentGroup = injectLayoutGroup(null);
-  const [forceRender, key] = useForceUpdate();
-  const context = {
-    id: getGroupId(props, parentGroup),
-    group: getGroup(props, parentGroup),
-    forceRender,
-    key
-  };
-  provideLayoutGroup(context);
-  return context;
-}
-function useLayoutGroup() {
-  const { forceRender } = injectLayoutGroup({ forceRender: () => {
-  } });
-  return { forceRender };
+const [useReorderContext, reorderContextProvider] = createContext("ReorderContext");
+function compareMin(a, b) {
+  return a.layout.min - b.layout.min;
+}
+function getValue(item) {
+  return item.value;
+}
+function checkReorder(order2, value, offset, velocity) {
+  if (!velocity)
+    return order2;
+  const index = order2.findIndex((item2) => item2.value === value);
+  if (index === -1)
+    return order2;
+  const nextOffset = velocity > 0 ? 1 : -1;
+  const nextItem = order2[index + nextOffset];
+  if (!nextItem)
+    return order2;
+  const item = order2[index];
+  const nextLayout = nextItem.layout;
+  const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5);
+  if (nextOffset === 1 && item.layout.max + offset > nextItemCenter || nextOffset === -1 && item.layout.min + offset < nextItemCenter) {
+    return moveItem(order2, index, index + nextOffset);
+  }
+  return order2;
+}
+function moveItem([...arr], fromIndex, toIndex) {
+  const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+  if (startIndex >= 0 && startIndex < arr.length) {
+    const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
+    const [item] = arr.splice(fromIndex, 1);
+    arr.splice(endIndex, 0, item);
+  }
+  return arr;
+}
+function useDefaultMotionValue(value, defaultValue = 0) {
+  return isMotionValue(value) ? value : motionValue(defaultValue);
 }
-function getGroupId(props, parentGroup) {
-  const shouldInherit = props.inherit === true || props.inherit === "id";
-  const parentId = parentGroup == null ? void 0 : parentGroup.id;
-  if (shouldInherit && parentId) {
-    return props.id ? `${parentId}-${props.id}` : parentId;
-  }
-  return props.id;
-}
-function getGroup(props, parentGroup) {
-  const shouldInherit = props.inherit === true || props.inherit === "group";
-  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
-}
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "LayoutGroup",
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "ReorderGroup",
+    inheritAttrs: false
+  },
+  __name: "Group",
   props: {
-    id: {},
-    inherit: { type: [Boolean, String] }
+    axis: { default: "y" },
+    "onUpdate:values": {},
+    values: {},
+    as: { default: "ul" },
+    asChild: { type: Boolean },
+    whileDrag: {},
+    custom: {},
+    initial: { type: [String, Object, Boolean] },
+    animate: {},
+    exit: {},
+    variants: {},
+    style: {},
+    transformTemplate: {},
+    transition: {},
+    layoutGroup: {},
+    motionConfig: {},
+    onAnimationComplete: {},
+    onUpdate: {},
+    layout: { type: [Boolean, String] },
+    layoutId: {},
+    layoutScroll: { type: Boolean },
+    layoutRoot: { type: Boolean },
+    "data-framer-portal-id": {},
+    crossfade: { type: Boolean },
+    onBeforeLayoutMeasure: {},
+    onLayoutMeasure: {},
+    onLayoutAnimationStart: {},
+    onLayoutAnimationComplete: {},
+    globalPressTarget: { type: Boolean },
+    press: {},
+    onPressStart: {},
+    onPress: {},
+    onPressCancel: {},
+    hover: {},
+    onHoverStart: {},
+    onHoverEnd: {},
+    inViewOptions: {},
+    inView: {},
+    onViewportEnter: {},
+    onViewportLeave: {},
+    drag: { type: [Boolean, String] },
+    dragSnapToOrigin: { type: Boolean },
+    dragDirectionLock: { type: Boolean },
+    dragPropagation: { type: Boolean },
+    dragConstraints: { type: [Boolean, Object] },
+    dragElastic: { type: [Boolean, Number, Object] },
+    dragMomentum: { type: Boolean },
+    dragTransition: {},
+    dragListener: { type: Boolean },
+    dragControls: {},
+    onDragStart: {},
+    onDragEnd: {},
+    onDrag: {},
+    onDirectionLock: {},
+    onDragTransitionEnd: {},
+    onMeasureDragConstraints: {},
+    onPanSessionStart: {},
+    onPanStart: {},
+    onPan: {},
+    onPanEnd: {},
+    focus: {},
+    onFocus: {},
+    onBlur: {}
   },
   setup(__props) {
     const props = __props;
-    const { forceRender, key } = useLayoutGroupProvider(props);
+    const { axis } = vue.toRefs(props);
+    const order2 = [];
+    let isReordering = false;
+    function warning2() {
+      heyListen.invariant(Boolean(props.values), "Reorder.Group must be provided a values prop");
+    }
+    vue.onUpdated(() => {
+      isReordering = false;
+    });
+    reorderContextProvider({
+      axis,
+      registerItem: (value, layout) => {
+        const idx = order2.findIndex((entry) => value === entry.value);
+        if (idx !== -1) {
+          order2[idx].layout = layout[axis.value];
+        } else {
+          order2.push({ value, layout: layout[axis.value] });
+        }
+        order2.sort(compareMin);
+      },
+      updateOrder: (item, offset, velocity) => {
+        if (isReordering)
+          return;
+        const newOrder = checkReorder(order2, item, offset, velocity);
+        if (order2 !== newOrder) {
+          isReordering = true;
+          props["onUpdate:values"](
+            newOrder.map(getValue).filter((value) => props.values.includes(value))
+          );
+        }
+      }
+    });
+    const attrs = vue.useAttrs();
+    function bindProps() {
+      return {
+        ...attrs,
+        ...props
+      };
+    }
     return (_ctx, _cache) => {
-      return vue.renderSlot(_ctx.$slots, "default", {
-        renderKey: vue.unref(key),
-        forceRender: vue.unref(forceRender)
-      });
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$5), vue.normalizeProps(vue.guardReactiveProps(bindProps())), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default"),
+          vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
+        ]),
+        _: 3
+      }, 16);
     };
   }
 });
@@ -9055,12 +9146,221 @@ function useVelocity(value) {
   });
   return velocity;
 }
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "ReorderItem",
+    inheritAttrs: false
+  },
+  __name: "Item",
+  props: {
+    value: {},
+    layout: { type: [Boolean, String], default: true },
+    as: { default: "li" },
+    asChild: { type: Boolean },
+    whileDrag: { default: void 0 },
+    custom: {},
+    initial: { type: [String, Object, Boolean], default: void 0 },
+    animate: { default: void 0 },
+    exit: {},
+    variants: {},
+    style: {},
+    transformTemplate: {},
+    transition: {},
+    layoutGroup: {},
+    motionConfig: {},
+    onAnimationComplete: {},
+    onUpdate: {},
+    layoutId: { default: void 0 },
+    layoutScroll: { type: Boolean, default: false },
+    layoutRoot: { type: Boolean, default: false },
+    "data-framer-portal-id": {},
+    crossfade: { type: Boolean, default: true },
+    onBeforeLayoutMeasure: {},
+    onLayoutMeasure: {},
+    onLayoutAnimationStart: {},
+    onLayoutAnimationComplete: {},
+    globalPressTarget: { type: Boolean },
+    press: {},
+    onPressStart: {},
+    onPress: {},
+    onPressCancel: {},
+    hover: { default: void 0 },
+    onHoverStart: {},
+    onHoverEnd: {},
+    inViewOptions: {},
+    inView: { default: void 0 },
+    onViewportEnter: {},
+    onViewportLeave: {},
+    drag: { type: [Boolean, String] },
+    dragSnapToOrigin: { type: Boolean },
+    dragDirectionLock: { type: Boolean },
+    dragPropagation: { type: Boolean },
+    dragConstraints: { type: [Boolean, Object] },
+    dragElastic: { type: [Boolean, Number, Object], default: 0.5 },
+    dragMomentum: { type: Boolean, default: true },
+    dragTransition: {},
+    dragListener: { type: Boolean, default: true },
+    dragControls: {},
+    onDragStart: {},
+    onDragEnd: {},
+    onDrag: {},
+    onDirectionLock: {},
+    onDragTransitionEnd: {},
+    onMeasureDragConstraints: {},
+    onPanSessionStart: {},
+    onPanStart: {},
+    onPan: {},
+    onPanEnd: {},
+    focus: {},
+    onFocus: {},
+    onBlur: {}
+  },
+  setup(__props) {
+    var _a, _b;
+    const props = __props;
+    const { style: style2 } = vue.toRefs(props);
+    const context = useReorderContext(null);
+    const point2 = {
+      x: useDefaultMotionValue((_a = style2.value) == null ? void 0 : _a.x),
+      y: useDefaultMotionValue((_b = style2.value) == null ? void 0 : _b.y)
+    };
+    const zIndex = useTransform([point2.x, point2.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
+    function warning2() {
+      heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    }
+    const { axis, registerItem, updateOrder } = context || {};
+    const attrs = vue.useAttrs();
+    function bindProps() {
+      return {
+        ...attrs,
+        ...props,
+        style: {
+          ...style2.value,
+          x: point2.x,
+          y: point2.y,
+          zIndex
+        }
+      };
+    }
+    const drag = vue.computed(() => {
+      if (props.drag) {
+        return props.drag;
+      }
+      return axis.value;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$5), vue.mergeProps(bindProps(), {
+        drag: drag.value,
+        "drag-snap-to-origin": true,
+        onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
+          const { velocity } = gesturePoint;
+          velocity[vue.unref(axis)] && vue.unref(updateOrder)(_ctx.value, point2[vue.unref(axis)].get(), velocity[vue.unref(axis)]);
+          _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
+        }),
+        onLayoutMeasure: _cache[1] || (_cache[1] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
+      }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default"),
+          vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
+        ]),
+        _: 3
+      }, 16, ["drag"]);
+    };
+  }
+});
+const ReorderGroup = _sfc_main$2;
+const ReorderItem = _sfc_main$1;
+const Reorder = {
+  Group: ReorderGroup,
+  Item: ReorderItem
+};
+function useForceUpdate() {
+  const key = vue.ref(0);
+  function forceUpdate() {
+    key.value++;
+  }
+  return [forceUpdate, key];
+}
+function notify(node) {
+  return !node.isLayoutDirty && node.willUpdate(false);
+}
+function nodeGroup() {
+  const nodes = /* @__PURE__ */ new Set();
+  const subscriptions = /* @__PURE__ */ new WeakMap();
+  const dirtyAll = () => nodes.forEach(notify);
+  return {
+    add: (node) => {
+      nodes.add(node);
+      subscriptions.set(
+        node,
+        node.addEventListener("willUpdate", dirtyAll)
+      );
+    },
+    remove: (node) => {
+      nodes.delete(node);
+      const unsubscribe = subscriptions.get(node);
+      if (unsubscribe) {
+        unsubscribe();
+        subscriptions.delete(node);
+      }
+    },
+    dirty: dirtyAll
+  };
+}
+function useLayoutGroupProvider(props) {
+  const parentGroup = injectLayoutGroup(null);
+  const [forceRender, key] = useForceUpdate();
+  const context = {
+    id: getGroupId(props, parentGroup),
+    group: getGroup(props, parentGroup),
+    forceRender,
+    key
+  };
+  provideLayoutGroup(context);
+  return context;
+}
+function useLayoutGroup() {
+  const { forceRender } = injectLayoutGroup({ forceRender: () => {
+  } });
+  return { forceRender };
+}
+function getGroupId(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "id";
+  const parentId = parentGroup == null ? void 0 : parentGroup.id;
+  if (shouldInherit && parentId) {
+    return props.id ? `${parentId}-${props.id}` : parentId;
+  }
+  return props.id;
+}
+function getGroup(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "group";
+  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
+}
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "LayoutGroup",
+  props: {
+    id: {},
+    inherit: { type: [Boolean, String] }
+  },
+  setup(__props) {
+    const props = __props;
+    const { forceRender, key } = useLayoutGroupProvider(props);
+    return (_ctx, _cache) => {
+      return vue.renderSlot(_ctx.$slots, "default", {
+        renderKey: vue.unref(key),
+        forceRender: vue.unref(forceRender)
+      });
+    };
+  }
+});
 const components = {
   motion: [
     "Motion",
     "AnimatePresence",
     "LayoutGroup",
-    "MotionConfig"
+    "MotionConfig",
+    "ReorderGroup",
+    "ReorderItem"
   ]
 };
 const utilities = {
@@ -9237,11 +9537,14 @@ class DragControls {
 }
 const createDragControls = () => new DragControls();
 const useDragControls = createDragControls;
-exports.AnimatePresence = _sfc_main$2;
+exports.AnimatePresence = _sfc_main$4;
 exports.LayoutGroup = _sfc_main;
-exports.Motion = _sfc_main$3;
-exports.MotionConfig = _sfc_main$1;
+exports.Motion = _sfc_main$5;
+exports.MotionConfig = _sfc_main$3;
 exports.MotionValue = MotionValue;
+exports.Reorder = Reorder;
+exports.ReorderGroup = ReorderGroup;
+exports.ReorderItem = ReorderItem;
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.anticipate = anticipate;

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

@@ -6,7 +6,6 @@ export interface NodeGroup {
     add: (node: IProjectionNode) => void;
     remove: (node: IProjectionNode) => void;
     dirty: VoidFunction;
-    didUpdate: VoidFunction;
 }
 export interface LayoutGroupState {
     id?: string;

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

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

package/dist/es/components/group.mjs

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

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

@@ -1,3 +1,4 @@
 export { Motion, motion, type MotionProps } from './motion';
 export * from './animate-presence';
 export * from './motion-config';
+export * from './reorder';

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

@@ -35,6 +35,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean },
+    onBeforeLayoutMeasure: { type: Function },
+    onLayoutMeasure: { type: Function },
+    onLayoutAnimationStart: { type: Function },
+    onLayoutAnimationComplete: { type: Function },
     globalPressTarget: { type: Boolean },
     press: {},
     onPressStart: { type: Function },