motion-v 1.8.0 → 1.8.1

package/dist/cjs/index.js

@@ -6298,12 +6298,13 @@ 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 direction = velocity !== 0 ? velocity : offset;
+  if (!direction)
+    return order2;
+  const nextOffset = direction > 0 ? 1 : -1;
   const nextItem = order2[index + nextOffset];
   if (!nextItem)
     return order2;
@@ -6416,8 +6417,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     vue.onUpdated(() => {
       isReordering = false;
     });
-    vue.onBeforeUpdate(() => {
-      order2 = [];
+    vue.watch(() => props.values, () => {
+      if (!isReordering) {
+        order2 = [];
+      }
+    }, {
+      flush: "pre"
     });
     const groupRef = useDomRef();
     reorderContextProvider({
@@ -6439,6 +6444,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         const newOrder = checkReorder(order2, item, offset, velocity);
         if (order2 !== newOrder) {
           isReordering = true;
+          order2 = newOrder;
           (_a2 = props["onUpdate:values"]) == null ? void 0 : _a2.call(
             props,
             newOrder.map(getValue).filter((value) => props.values.includes(value))
@@ -6847,19 +6853,20 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     var _a2, _b;
     const props = __props;
     const { style: style2 } = vue.toRefs(props);
-    const context = useReorderContext(null);
+    const context = useReorderContext();
     const point2 = {
       x: useDefaultMotionValue((_a2 = style2.value) == null ? void 0 : _a2.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 warning() {
-      heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+      heyListen.invariant(Boolean(context), "Reorder.Item must be a descendant of Reorder.Group");
     }
-    const { axis, registerItem, updateOrder, groupRef } = context || {};
+    warning();
+    const { axis, registerItem, updateOrder, groupRef } = context;
     const attrs = vue.useAttrs();
     function bindProps() {
-      const { value, ...rest } = props;
+      const { value, onDragStart, onDragEnd, onDrag, ...rest } = props;
       return {
         ...attrs,
         ...rest,
@@ -6879,6 +6886,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     });
     const isDragging = vue.ref(false);
     function handleDrag(event, gesturePoint) {
+      var _a3;
       const { velocity, point: pointerPoint } = gesturePoint;
       const offset = point2[axis.value].get();
       updateOrder(props.value, offset, velocity[axis.value]);
@@ -6888,16 +6896,18 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         axis.value,
         velocity[axis.value]
       );
-      props.onDrag && props.onDrag(event, gesturePoint);
+      if (!isDragging.value)
+        isDragging.value = true;
+      (_a3 = props.onDrag) == null ? void 0 : _a3.call(props, event, gesturePoint);
     }
     function handleDragEnd(event, gesturePoint) {
+      var _a3;
       isDragging.value = false;
       resetAutoScrollState();
-      props.onDragEnd && props.onDragEnd(event, gesturePoint);
+      (_a3 = props.onDragEnd) == null ? void 0 : _a3.call(props, event, gesturePoint);
     }
     function handleDragStart(event, gesturePoint) {
       var _a3;
-      isDragging.value = true;
       (_a3 = props.onDragStart) == null ? void 0 : _a3.call(props, event, gesturePoint);
     }
     return (_ctx, _cache) => {
@@ -6907,11 +6917,12 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         onDrag: handleDrag,
         onDragEnd: handleDragEnd,
         onDragStart: handleDragStart,
-        onLayoutMeasure: _cache[0] || (_cache[0] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
+        onLayoutMeasure: _cache[0] || (_cache[0] = (measured) => {
+          vue.unref(registerItem)(_ctx.value, measured);
+        })
       }), {
         default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value }),
-          vue.createTextVNode(" " + vue.toDisplayString(warning()), 1)
+          vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value })
         ]),
         _: 3
       }, 16, ["drag"]);

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

@@ -8,8 +8,8 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<AnimatePresenceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimatePresenceProps> & Readonly<{}>, {
-    mode: "wait" | "popLayout" | "sync";
     initial: boolean;
+    mode: "wait" | "popLayout" | "sync";
     anchorX: "left" | "right";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -11,57 +11,57 @@ export declare const MotionComponentProps: {
         default: boolean;
     };
     hover: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
     press: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
     inView: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
     focus: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
     whileDrag: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
     whileHover: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
         default: ({ hover }: {
             hover: any;
         }) => any;
     };
     whilePress: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
         default: ({ press }: {
             press: any;
         }) => any;
     };
     whileInView: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
         default: ({ inView }: {
             inView: any;
         }) => any;
     };
     whileFocus: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
         default: ({ focus }: {
             focus: any;
         }) => any;
     };
     custom: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
     };
     initial: {
-        type: (ArrayConstructor | BooleanConstructor | ObjectConstructor | StringConstructor)[];
+        type: (BooleanConstructor | ObjectConstructor | ArrayConstructor | StringConstructor)[];
         default: any;
     };
     animate: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
         default: any;
     };
     exit: {
-        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
     variants: {
         type: ObjectConstructor;

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

@@ -13,7 +13,7 @@ export declare function useMotionState(props: MotionProps): {
             once?: boolean;
         };
         animatePresenceContext: import('../animate-presence/presence').PresenceContext;
-        initial: false | import('framer-motion').VariantLabels | import('../..').VariantType;
+        initial: false | import('../..').VariantType | import('framer-motion').VariantLabels;
         as?: "div";
         asChild?: boolean;
         hover?: import('../..').Options["hover"];
@@ -27,26 +27,42 @@ export declare function useMotionState(props: MotionProps): {
         whileFocus?: import('../..').Options["whileFocus"];
         forwardMotionProps?: boolean;
         ignoreStrict?: boolean;
-        layout?: boolean | "position" | "size" | "preserve-aspect";
-        layoutScroll?: boolean;
-        layoutRoot?: boolean;
-        'data-framer-portal-id'?: string;
-        crossfade?: boolean;
-        layoutDependency?: any;
-        dragSnapToOrigin?: boolean;
-        drag?: boolean | "x" | "y";
-        animate?: import('framer-motion').VariantLabels | import('../..').VariantType | import('../../animation/types').AnimationControls;
-        variants?: {
-            [k: string]: import('../..').VariantType | ((custom: unknown) => import('../..').VariantType);
-        };
-        custom?: unknown;
         style?: Partial<{
             [x: `--${string}`]: string | number | import('framer-motion').MotionValue<any>;
             string?: string | number | import('framer-motion').MotionValue<any>;
-            end?: string | number | import('framer-motion').MotionValue<any>;
+            clipPath?: string | number | import('framer-motion').MotionValue<any>;
+            filter?: string | number | import('framer-motion').MotionValue<any>;
+            marker?: string | number | import('framer-motion').MotionValue<any>;
+            mask?: string | number | import('framer-motion').MotionValue<any>;
+            path?: string | number | import('framer-motion').MotionValue<any>;
+            transition?: string | number | import('framer-motion').MotionValue<any>;
+            values?: string | number | import('framer-motion').MotionValue<any>;
+            clear?: string | number | import('framer-motion').MotionValue<any>;
             x?: string | number | import('framer-motion').MotionValue<any>;
             y?: string | number | import('framer-motion').MotionValue<any>;
-            transition?: string | number | import('framer-motion').MotionValue<any>;
+            resize?: string | number | import('framer-motion').MotionValue<any>;
+            readonly length?: string | number | import('framer-motion').MotionValue<any>;
+            fill?: string | number | import('framer-motion').MotionValue<any>;
+            z?: string | number | import('framer-motion').MotionValue<any>;
+            translateX?: string | number | import('framer-motion').MotionValue<any>;
+            translateY?: string | number | import('framer-motion').MotionValue<any>;
+            translateZ?: string | number | import('framer-motion').MotionValue<any>;
+            rotate?: string | number | import('framer-motion').MotionValue<any>;
+            rotateX?: string | number | import('framer-motion').MotionValue<any>;
+            rotateY?: string | number | import('framer-motion').MotionValue<any>;
+            rotateZ?: string | number | import('framer-motion').MotionValue<any>;
+            scale?: string | number | import('framer-motion').MotionValue<any>;
+            scaleX?: string | number | import('framer-motion').MotionValue<any>;
+            scaleY?: string | number | import('framer-motion').MotionValue<any>;
+            scaleZ?: string | number | import('framer-motion').MotionValue<any>;
+            skew?: string | number | import('framer-motion').MotionValue<any>;
+            skewX?: string | number | import('framer-motion').MotionValue<any>;
+            skewY?: string | number | import('framer-motion').MotionValue<any>;
+            originX?: string | number | import('framer-motion').MotionValue<any>;
+            originY?: string | number | import('framer-motion').MotionValue<any>;
+            originZ?: string | number | import('framer-motion').MotionValue<any>;
+            perspective?: string | number | import('framer-motion').MotionValue<any>;
+            transformPerspective?: string | number | import('framer-motion').MotionValue<any>;
             accentColor?: string | number | import('framer-motion').MotionValue<any>;
             alignContent?: string | number | import('framer-motion').MotionValue<any>;
             alignItems?: string | number | import('framer-motion').MotionValue<any>;
@@ -151,9 +167,7 @@ export declare function useMotionState(props: MotionProps): {
             breakInside?: string | number | import('framer-motion').MotionValue<any>;
             captionSide?: string | number | import('framer-motion').MotionValue<any>;
             caretColor?: string | number | import('framer-motion').MotionValue<any>;
-            clear?: string | number | import('framer-motion').MotionValue<any>;
             clip?: string | number | import('framer-motion').MotionValue<any>;
-            clipPath?: string | number | import('framer-motion').MotionValue<any>;
             clipRule?: string | number | import('framer-motion').MotionValue<any>;
             color?: string | number | import('framer-motion').MotionValue<any>;
             colorInterpolation?: string | number | import('framer-motion').MotionValue<any>;
@@ -193,10 +207,8 @@ export declare function useMotionState(props: MotionProps): {
             display?: string | number | import('framer-motion').MotionValue<any>;
             dominantBaseline?: string | number | import('framer-motion').MotionValue<any>;
             emptyCells?: string | number | import('framer-motion').MotionValue<any>;
-            fill?: string | number | import('framer-motion').MotionValue<any>;
             fillOpacity?: string | number | import('framer-motion').MotionValue<any>;
             fillRule?: string | number | import('framer-motion').MotionValue<any>;
-            filter?: string | number | import('framer-motion').MotionValue<any>;
             flex?: string | number | import('framer-motion').MotionValue<any>;
             flexBasis?: string | number | import('framer-motion').MotionValue<any>;
             flexDirection?: string | number | import('framer-motion').MotionValue<any>;
@@ -268,7 +280,6 @@ export declare function useMotionState(props: MotionProps): {
             justifyItems?: string | number | import('framer-motion').MotionValue<any>;
             justifySelf?: string | number | import('framer-motion').MotionValue<any>;
             left?: string | number | import('framer-motion').MotionValue<any>;
-            readonly length?: string | number | import('framer-motion').MotionValue<any>;
             letterSpacing?: string | number | import('framer-motion').MotionValue<any>;
             lightingColor?: string | number | import('framer-motion').MotionValue<any>;
             lineBreak?: string | number | import('framer-motion').MotionValue<any>;
@@ -288,11 +299,9 @@ export declare function useMotionState(props: MotionProps): {
             marginLeft?: string | number | import('framer-motion').MotionValue<any>;
             marginRight?: string | number | import('framer-motion').MotionValue<any>;
             marginTop?: string | number | import('framer-motion').MotionValue<any>;
-            marker?: string | number | import('framer-motion').MotionValue<any>;
             markerEnd?: string | number | import('framer-motion').MotionValue<any>;
             markerMid?: string | number | import('framer-motion').MotionValue<any>;
             markerStart?: string | number | import('framer-motion').MotionValue<any>;
-            mask?: string | number | import('framer-motion').MotionValue<any>;
             maskClip?: string | number | import('framer-motion').MotionValue<any>;
             maskComposite?: string | number | import('framer-motion').MotionValue<any>;
             maskImage?: string | number | import('framer-motion').MotionValue<any>;
@@ -356,7 +365,6 @@ export declare function useMotionState(props: MotionProps): {
             pageBreakBefore?: string | number | import('framer-motion').MotionValue<any>;
             pageBreakInside?: string | number | import('framer-motion').MotionValue<any>;
             paintOrder?: string | number | import('framer-motion').MotionValue<any>;
-            perspective?: string | number | import('framer-motion').MotionValue<any>;
             perspectiveOrigin?: string | number | import('framer-motion').MotionValue<any>;
             placeContent?: string | number | import('framer-motion').MotionValue<any>;
             placeItems?: string | number | import('framer-motion').MotionValue<any>;
@@ -366,14 +374,11 @@ export declare function useMotionState(props: MotionProps): {
             printColorAdjust?: string | number | import('framer-motion').MotionValue<any>;
             quotes?: string | number | import('framer-motion').MotionValue<any>;
             r?: string | number | import('framer-motion').MotionValue<any>;
-            resize?: string | number | import('framer-motion').MotionValue<any>;
             right?: string | number | import('framer-motion').MotionValue<any>;
-            rotate?: string | number | import('framer-motion').MotionValue<any>;
             rowGap?: string | number | import('framer-motion').MotionValue<any>;
             rubyPosition?: string | number | import('framer-motion').MotionValue<any>;
             rx?: string | number | import('framer-motion').MotionValue<any>;
             ry?: string | number | import('framer-motion').MotionValue<any>;
-            scale?: string | number | import('framer-motion').MotionValue<any>;
             scrollBehavior?: string | number | import('framer-motion').MotionValue<any>;
             scrollMargin?: string | number | import('framer-motion').MotionValue<any>;
             scrollMarginBlock?: string | number | import('framer-motion').MotionValue<any>;
@@ -542,25 +547,6 @@ export declare function useMotionState(props: MotionProps): {
             writingMode?: string | number | import('framer-motion').MotionValue<any>;
             zIndex?: string | number | import('framer-motion').MotionValue<any>;
             zoom?: string | number | import('framer-motion').MotionValue<any>;
-            z?: string | number | import('framer-motion').MotionValue<any>;
-            originX?: string | number | import('framer-motion').MotionValue<any>;
-            originY?: string | number | import('framer-motion').MotionValue<any>;
-            originZ?: string | number | import('framer-motion').MotionValue<any>;
-            translateX?: string | number | import('framer-motion').MotionValue<any>;
-            translateY?: string | number | import('framer-motion').MotionValue<any>;
-            translateZ?: string | number | import('framer-motion').MotionValue<any>;
-            rotateX?: string | number | import('framer-motion').MotionValue<any>;
-            rotateY?: string | number | import('framer-motion').MotionValue<any>;
-            rotateZ?: string | number | import('framer-motion').MotionValue<any>;
-            scaleX?: string | number | import('framer-motion').MotionValue<any>;
-            scaleY?: string | number | import('framer-motion').MotionValue<any>;
-            scaleZ?: string | number | import('framer-motion').MotionValue<any>;
-            skewX?: string | number | import('framer-motion').MotionValue<any>;
-            skewY?: string | number | import('framer-motion').MotionValue<any>;
-            transformPerspective?: string | number | import('framer-motion').MotionValue<any>;
-            pathLength?: string | number | import('framer-motion').MotionValue<any>;
-            pathOffset?: string | number | import('framer-motion').MotionValue<any>;
-            pathSpacing?: string | number | import('framer-motion').MotionValue<any>;
             accentHeight?: string | number | import('framer-motion').MotionValue<any>;
             accumulate?: string | number | import('framer-motion').MotionValue<any>;
             additive?: string | number | import('framer-motion').MotionValue<any>;
@@ -596,6 +582,7 @@ export declare function useMotionState(props: MotionProps): {
             edgeMode?: string | number | import('framer-motion').MotionValue<any>;
             elevation?: string | number | import('framer-motion').MotionValue<any>;
             enableBackground?: string | number | import('framer-motion').MotionValue<any>;
+            end?: string | number | import('framer-motion').MotionValue<any>;
             exponent?: string | number | import('framer-motion').MotionValue<any>;
             externalResourcesRequired?: string | number | import('framer-motion').MotionValue<any>;
             filterRes?: string | number | import('framer-motion').MotionValue<any>;
@@ -650,7 +637,7 @@ export declare function useMotionState(props: MotionProps): {
             overlinePosition?: string | number | import('framer-motion').MotionValue<any>;
             overlineThickness?: string | number | import('framer-motion').MotionValue<any>;
             panose1?: string | number | import('framer-motion').MotionValue<any>;
-            path?: string | number | import('framer-motion').MotionValue<any>;
+            pathLength?: string | number | import('framer-motion').MotionValue<any>;
             patternContentUnits?: string | number | import('framer-motion').MotionValue<any>;
             patternTransform?: string | number | import('framer-motion').MotionValue<any>;
             patternUnits?: string | number | import('framer-motion').MotionValue<any>;
@@ -700,7 +687,6 @@ export declare function useMotionState(props: MotionProps): {
             unicodeRange?: string | number | import('framer-motion').MotionValue<any>;
             unitsPerEm?: string | number | import('framer-motion').MotionValue<any>;
             vAlphabetic?: string | number | import('framer-motion').MotionValue<any>;
-            values?: string | number | import('framer-motion').MotionValue<any>;
             version?: string | number | import('framer-motion').MotionValue<any>;
             vertAdvY?: string | number | import('framer-motion').MotionValue<any>;
             vertOriginX?: string | number | import('framer-motion').MotionValue<any>;
@@ -731,44 +717,58 @@ export declare function useMotionState(props: MotionProps): {
             y2?: string | number | import('framer-motion').MotionValue<any>;
             yChannelSelector?: string | number | import('framer-motion').MotionValue<any>;
             zoomAndPan?: string | number | import('framer-motion').MotionValue<any>;
-            skew?: string | number | import('framer-motion').MotionValue<any>;
+            pathOffset?: string | number | import('framer-motion').MotionValue<any>;
+            pathSpacing?: string | number | import('framer-motion').MotionValue<any>;
         }>;
+        animate?: import('framer-motion').VariantLabels | import('../..').VariantType | import('../../animation/types').AnimationControls;
+        custom?: unknown;
         exit?: import('framer-motion').VariantLabels | import('../..').VariantType;
-        onHoverStart?: import('../../features/gestures/hover/types').HoverEvent;
-        onHoverEnd?: import('../../features/gestures/hover/types').HoverEvent;
+        variants?: {
+            [k: string]: import('../..').VariantType | ((custom: unknown) => import('../..').VariantType);
+        };
+        inherit?: boolean;
+        transformTemplate?: (transform: import('framer-motion').TransformProperties, generatedTransform: string) => string;
+        onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
+        onUpdate?: (latest: import('framer-motion').ResolvedValues) => void;
+        onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
+        layout?: boolean | "position" | "size" | "preserve-aspect";
+        layoutScroll?: boolean;
+        layoutRoot?: boolean;
+        'data-framer-portal-id'?: string;
+        crossfade?: boolean;
+        layoutDependency?: any;
+        onBeforeLayoutMeasure?: (box: import('framer-motion').Box) => void;
+        onLayoutMeasure?: (box: import('framer-motion').Box, prevBox: import('framer-motion').Box) => void;
+        onLayoutAnimationStart?: () => void;
+        onLayoutAnimationComplete?: () => void;
+        globalPressTarget?: boolean;
         onPressStart?: import('../../features/gestures/press/types').PressEvent;
         onPress?: import('../../features/gestures/press/types').PressEvent;
         onPressCancel?: import('../../features/gestures/press/types').PressEvent;
+        onHoverStart?: import('../../features/gestures/hover/types').HoverEvent;
+        onHoverEnd?: import('../../features/gestures/hover/types').HoverEvent;
         onViewportEnter?: (entry: IntersectionObserverEntry | null) => void;
         onViewportLeave?: (entry: IntersectionObserverEntry | null) => void;
-        dragControls?: import('../../features/gestures/drag/use-drag-controls').DragControls;
-        onPanSessionStart?: (event: PointerEvent, info: import('../..').PanInfo) => void;
-        onPanStart?: (event: PointerEvent, info: import('../..').PanInfo) => void;
-        onPan?: (event: PointerEvent, info: import('../..').PanInfo) => void;
-        onPanEnd?: (event: PointerEvent, info: import('../..').PanInfo) => void;
-        onUpdate?: (latest: import('framer-motion').ResolvedValues) => void;
-        dragConstraints?: false | Partial<import('framer-motion').BoundingBox> | HTMLElement;
-        onDragTransitionEnd?: () => void;
-        onDragEnd?: (event: PointerEvent, info: import('framer-motion').PanInfo) => void;
+        drag?: boolean | "x" | "y";
+        dragSnapToOrigin?: boolean;
+        dragDirectionLock?: boolean;
         dragPropagation?: boolean;
+        dragConstraints?: false | Partial<import('framer-motion').BoundingBox> | HTMLElement;
         dragElastic?: import('framer-motion').DragElastic;
-        onMeasureDragConstraints?: (constraints: import('framer-motion').BoundingBox) => import('framer-motion').BoundingBox | void;
         dragMomentum?: boolean;
         dragTransition?: import('framer-motion').InertiaOptions;
-        transformTemplate?: (transform: import('framer-motion').TransformProperties, generatedTransform: string) => string;
-        dragDirectionLock?: boolean;
-        inherit?: boolean;
-        onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
-        onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
-        onBeforeLayoutMeasure?: (box: import('framer-motion').Box) => void;
-        onLayoutMeasure?: (box: import('framer-motion').Box, prevBox: import('framer-motion').Box) => void;
-        onLayoutAnimationStart?: () => void;
-        onLayoutAnimationComplete?: () => void;
-        globalPressTarget?: boolean;
         dragListener?: boolean;
+        dragControls?: import('../../features/gestures/drag/use-drag-controls').DragControls;
         onDragStart?: (event: PointerEvent, info: import('framer-motion').PanInfo) => void;
+        onDragEnd?: (event: PointerEvent, info: import('framer-motion').PanInfo) => void;
         onDrag?: (event: PointerEvent, info: import('framer-motion').PanInfo) => void;
         onDirectionLock?: (axis: "x" | "y") => void;
+        onDragTransitionEnd?: () => void;
+        onMeasureDragConstraints?: (constraints: import('framer-motion').BoundingBox) => import('framer-motion').BoundingBox | void;
+        onPanSessionStart?: (event: PointerEvent, info: import('../..').PanInfo) => void;
+        onPanStart?: (event: PointerEvent, info: import('../..').PanInfo) => void;
+        onPan?: (event: PointerEvent, info: import('../..').PanInfo) => void;
+        onPanEnd?: (event: PointerEvent, info: import('../..').PanInfo) => void;
         onFocus?: (e: FocusEvent) => void;
         onBlur?: (e: FocusEvent) => void;
     };

package/dist/es/components/reorder/Group.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, onUpdated, onBeforeUpdate, useAttrs, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, toRefs, onUpdated, watch, useAttrs, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { Motion } from "../motion/index.mjs";
 import { invariant } from "hey-listen";
 import { reorderContextProvider } from "./context.mjs";
@@ -93,8 +93,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onUpdated(() => {
       isReordering = false;
     });
-    onBeforeUpdate(() => {
-      order = [];
+    watch(() => props.values, () => {
+      if (!isReordering) {
+        order = [];
+      }
+    }, {
+      flush: "pre"
     });
     const groupRef = useDomRef();
     reorderContextProvider({
@@ -116,6 +120,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const newOrder = checkReorder(order, item, offset, velocity);
         if (order !== newOrder) {
           isReordering = true;
+          order = newOrder;
           (_a = props["onUpdate:values"]) == null ? void 0 : _a.call(
             props,
             newOrder.map(getValue).filter((value) => props.values.includes(value))

package/dist/es/components/reorder/Item.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, useAttrs, computed, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, toRefs, useAttrs, computed, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { Motion } from "../motion/index.mjs";
 import { useReorderContext } from "./context.mjs";
 import { useDefaultMotionValue } from "./utils.mjs";
@@ -85,19 +85,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     var _a, _b;
     const props = __props;
     const { style } = toRefs(props);
-    const context = useReorderContext(null);
+    const context = useReorderContext();
     const point = {
       x: useDefaultMotionValue((_a = style.value) == null ? void 0 : _a.x),
       y: useDefaultMotionValue((_b = style.value) == null ? void 0 : _b.y)
     };
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
     function warning() {
-      invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+      invariant(Boolean(context), "Reorder.Item must be a descendant of Reorder.Group");
     }
-    const { axis, registerItem, updateOrder, groupRef } = context || {};
+    warning();
+    const { axis, registerItem, updateOrder, groupRef } = context;
     const attrs = useAttrs();
     function bindProps() {
-      const { value, ...rest } = props;
+      const { value, onDragStart, onDragEnd, onDrag, ...rest } = props;
       return {
         ...attrs,
         ...rest,
@@ -117,6 +118,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const isDragging = ref(false);
     function handleDrag(event, gesturePoint) {
+      var _a2;
       const { velocity, point: pointerPoint } = gesturePoint;
       const offset = point[axis.value].get();
       updateOrder(props.value, offset, velocity[axis.value]);
@@ -126,16 +128,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         axis.value,
         velocity[axis.value]
       );
-      props.onDrag && props.onDrag(event, gesturePoint);
+      if (!isDragging.value)
+        isDragging.value = true;
+      (_a2 = props.onDrag) == null ? void 0 : _a2.call(props, event, gesturePoint);
     }
     function handleDragEnd(event, gesturePoint) {
+      var _a2;
       isDragging.value = false;
       resetAutoScrollState();
-      props.onDragEnd && props.onDragEnd(event, gesturePoint);
+      (_a2 = props.onDragEnd) == null ? void 0 : _a2.call(props, event, gesturePoint);
     }
     function handleDragStart(event, gesturePoint) {
       var _a2;
-      isDragging.value = true;
       (_a2 = props.onDragStart) == null ? void 0 : _a2.call(props, event, gesturePoint);
     }
     return (_ctx, _cache) => {
@@ -145,11 +149,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onDrag: handleDrag,
         onDragEnd: handleDragEnd,
         onDragStart: handleDragStart,
-        onLayoutMeasure: _cache[0] || (_cache[0] = (measured) => unref(registerItem)(_ctx.value, measured))
+        onLayoutMeasure: _cache[0] || (_cache[0] = (measured) => {
+          unref(registerItem)(_ctx.value, measured);
+        })
       }), {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value }),
-          createTextVNode(" " + toDisplayString(warning()), 1)
+          renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value })
         ]),
         _: 3
       }, 16, ["drag"]);