Merge pull request #174 from motiondivision/chore/update-motion

rick-hup · web-flow · commit 781dd6355e14 · 2025-06-18T15:54:01.000+08:00
feat: update motion to 12.18.1
diff --git a/packages/motion/package.json b/packages/motion/package.json
@@ -74,8 +74,9 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.0.0",
-    "framer-motion": "12.16.0",
-    "hey-listen": "^1.0.8"
+    "framer-motion": "12.18.1",
+    "hey-listen": "^1.0.8",
+    "motion-dom": "12.18.1"
   },
   "devDependencies": {
     "vue": "3.4.38"
diff --git a/packages/motion/src/animation/types.ts b/packages/motion/src/animation/types.ts
@@ -1,5 +1,5 @@
 import type { MotionState } from '@/state'
-import type { $Transition, Options } from '@/types'
+import type { Options } from '@/types'
 /**
  * @public
  */
@@ -35,7 +35,7 @@ export interface AnimationControls {
    */
   start: (
     definition: Options['animate'],
-    transitionOverride?: $Transition
+    transitionOverride?: Options['transition']
   ) => Promise<any>
 
   /**
diff --git a/packages/motion/src/features/animation/animation.ts b/packages/motion/src/features/animation/animation.ts
@@ -7,7 +7,7 @@ import { motionEvent } from '@/state/event'
 import { style } from '@/state/style'
 import { transformResetValue } from '@/state/transform'
 import { hasChanged, resolveVariant } from '@/state/utils'
-import type { $Transition, AnimationFactory, Options, Variant } from '@/types'
+import type { $Transition, AnimationFactory, Options, VariantType } from '@/types'
 import { isDef } from '@vueuse/core'
 import type { VisualElement } from 'framer-motion'
 import { animate, noop } from 'framer-motion/dom'
@@ -202,11 +202,11 @@ export class AnimationFeature extends Feature {
     }: {
       controlActiveState: Partial<Record<string, boolean>> | undefined
       directAnimate: Options['animate']
-      directTransition: $Transition | undefined
+      directTransition: Options['transition'] | undefined
     },
   ) {
     let variantTransition = this.state.options.transition
-    let variant: Variant = {}
+    let variant: VariantType = {}
     const { variants, custom, transition, animatePresenceContext } = this.state.options
     const customValue = custom ?? animatePresenceContext?.custom
 
diff --git a/packages/motion/src/features/animation/types.ts b/packages/motion/src/features/animation/types.ts
@@ -1,4 +1,4 @@
-import type { $Transition, Options } from '@/types'
+import type { Options } from '@/types'
 
 /**
  * Core animation update function that handles all animation state changes and execution
@@ -11,7 +11,7 @@ export interface AnimateUpdatesOptions {
   controlActiveState?: Partial<Record<string, boolean>>
   controlDelay?: number
   directAnimate?: Options['animate']
-  directTransition?: $Transition
+  directTransition?: Options['transition']
   isFallback?: boolean
   isExit?: boolean
 }
diff --git a/packages/motion/src/features/gestures/drag/VisualElementDragControls.ts b/packages/motion/src/features/gestures/drag/VisualElementDragControls.ts
@@ -12,7 +12,7 @@ import { eachAxis } from '@/projection/utils/each-axis'
 import type { Options } from '@/types'
 import { getContextWindow } from '@/utils'
 import { addValueToWillChange } from '@/value/use-will-change/add-will-change'
-import type { Axis, BoundingBox, Point, Transition, VisualElement } from 'framer-motion'
+import type { AnimationGeneratorType, Axis, BoundingBox, Point, Transition, VisualElement } from 'framer-motion'
 import { frame, mixNumber, percent } from 'framer-motion/dom'
 import { measurePageBox } from '@/projection/utils/measure'
 import { convertBoundingBoxToBox, convertBoxToBoundingBox } from '@/projection/conversion'
@@ -419,7 +419,7 @@ export class VisualElementDragControls {
       const bounceDamping = dragElastic ? 40 : 10000000
 
       const inertia = {
-        type: 'inertia',
+        type: 'inertia' as AnimationGeneratorType,
         velocity: dragMomentum ? velocity[axis] : 0,
         bounceStiffness,
         bounceDamping,
diff --git a/packages/motion/src/features/gestures/drag/types.ts b/packages/motion/src/features/gestures/drag/types.ts
@@ -1,6 +1,7 @@
 import type { DragControls } from '@/features/gestures/drag/use-drag-controls'
-import type { Variant, VariantLabels } from '@/types'
+import type { VariantType } from '@/types'
 import type { Axis, BoundingBox, DragElastic, InertiaOptions, PanInfo } from 'framer-motion'
+import type { VariantLabels } from 'motion-dom'
 
 export interface ResolvedConstraints {
   x: Partial<Axis>
@@ -236,5 +237,5 @@ export interface DragProps extends DragHandlers {
    * ```
    */
   dragControls?: DragControls
-  whileDrag?: VariantLabels | Variant
+  whileDrag?: VariantLabels | VariantType
 }
diff --git a/packages/motion/src/features/gestures/focus/types.ts b/packages/motion/src/features/gestures/focus/types.ts
@@ -1,14 +1,15 @@
-import type { Variant, VariantLabels } from '@/types'
+import type { VariantType } from '@/types'
+import type { VariantLabels } from 'motion-dom'
 
 export type FocusProps = {
   /**
    * @deprecated Use `whileFocus` instead.
    */
-  focus?: VariantLabels | Variant
+  focus?: VariantLabels | VariantType
   /**
    * Variant to apply when the element is focused.
    */
-  whileFocus?: VariantLabels | Variant
+  whileFocus?: VariantLabels | VariantType
   onFocus?: (e: FocusEvent) => void
   onBlur?: (e: FocusEvent) => void
 }
diff --git a/packages/motion/src/features/gestures/hover/types.ts b/packages/motion/src/features/gestures/hover/types.ts
@@ -1,17 +1,18 @@
-import type { Variant, VariantLabels } from '@/types'
+import type { VariantType } from '@/types'
 import type { EventInfo } from 'framer-motion'
+import type { VariantLabels } from 'motion-dom'
 
 export type HoverEvent = (event: MouseEvent, info: EventInfo) => void
 
 export interface HoverProps {
   /**
    * @deprecated Use `whileHover` instead.
    */
-  hover?: VariantLabels | Variant
+  hover?: VariantLabels | VariantType
   /**
    * Variant to apply when the element is hovered.
    */
-  whileHover?: VariantLabels | Variant
+  whileHover?: VariantLabels | VariantType
   onHoverStart?: HoverEvent
   onHoverEnd?: HoverEvent
 }
diff --git a/packages/motion/src/features/gestures/in-view/types.ts b/packages/motion/src/features/gestures/in-view/types.ts
@@ -1,4 +1,5 @@
-import type { Variant, VariantLabels } from '@/types'
+import type { VariantType } from '@/types'
+import type { VariantLabels } from 'motion-dom'
 
 type MarginValue = `${number}${'px' | '%'}`
 
@@ -17,11 +18,11 @@ export interface InViewProps {
   /**
    * @deprecated Use `whileInView` instead.
    */
-  inView?: VariantLabels | Variant
+  inView?: VariantLabels | VariantType
   /**
    * Variant to apply when the element is in view.
    */
-  whileInView?: VariantLabels | Variant
+  whileInView?: VariantLabels | VariantType
   onViewportEnter?: ViewportEventHandler
   onViewportLeave?: ViewportEventHandler
 }
diff --git a/packages/motion/src/features/gestures/press/types.ts b/packages/motion/src/features/gestures/press/types.ts
@@ -1,5 +1,6 @@
-import type { Variant, VariantLabels } from '@/types'
+import type { VariantType } from '@/types'
 import type { EventInfo } from 'framer-motion'
+import type { VariantLabels } from 'motion-dom'
 
 export type PressEvent = (
   event: PointerEvent,
@@ -14,11 +15,11 @@ export interface PressProps {
   /**
    * @deprecated Use `whilePress` instead.
    */
-  press?: VariantLabels | Variant
+  press?: VariantLabels | VariantType
   /**
    * Variant to apply when the element is pressed.
    */
-  whilePress?: VariantLabels | Variant
+  whilePress?: VariantLabels | VariantType
   onPressStart?: PressEvent
   onPress?: PressEvent
   onPressCancel?: PressEvent
diff --git a/packages/motion/src/state/event.ts b/packages/motion/src/state/event.ts
@@ -1,9 +1,9 @@
-import type { Variant } from '@/types'
+import type { VariantType } from '@/types'
 
 export type MotionEventNames =
   | 'motionstart'
   | 'motioncomplete'
 
-export function motionEvent(name: MotionEventNames, target: Variant, isExit?: boolean) {
+export function motionEvent(name: MotionEventNames, target: VariantType, isExit?: boolean) {
   return new CustomEvent(name, { detail: { target, isExit } })
 }
diff --git a/packages/motion/src/state/utils.ts b/packages/motion/src/state/utils.ts
@@ -1,19 +1,19 @@
-import type { $Transition, AsTag, Options, Variant } from '@/types'
+import type { $Transition, AsTag, Options, VariantType } from '@/types'
 import type { IntrinsicElementAttributes } from 'vue'
 
 export function resolveVariant(
   definition?: Options['animate'],
   variants?: Options['variants'],
   custom?: Options['custom'],
-): Variant | undefined {
+): VariantType | undefined {
   if (Array.isArray(definition)) {
     return definition.reduce((acc, item) => {
       const resolvedVariant = resolveVariant(item, variants, custom)
       return resolvedVariant ? { ...acc, ...resolvedVariant } : acc
     }, {})
   }
   else if (typeof definition === 'object') {
-    return definition as Variant
+    return definition as VariantType
   }
   else if (definition && variants) {
     const variant = variants[definition as string]
diff --git a/packages/motion/src/state/utils/is-variant-labels.ts b/packages/motion/src/state/utils/is-variant-labels.ts
@@ -1,4 +1,4 @@
-import type { VariantLabels } from '@/types'
+import type { VariantLabels } from 'motion-dom'
 
 export function isVariantLabels(value: any): value is VariantLabels {
   return typeof value === 'string' || value === false || Array.isArray(value)
diff --git a/packages/motion/src/types/framer-motion.ts b/packages/motion/src/types/framer-motion.ts
@@ -1,4 +1,4 @@
-import type { Inertia, Keyframes, None, Repeat, Spring, Tween } from 'framer-motion'
+import type { MotionNodeOptions } from 'motion-dom'
 
 export type { Point } from 'framer-motion'
 
@@ -36,12 +36,4 @@ export interface Orchestration {
   staggerDirection?: number
 }
 
-type PermissiveTransitionDefinition = {
-  [key: string]: any
-}
-type TransitionDefinition = Tween | Spring | Keyframes | Inertia | None | PermissiveTransitionDefinition
-type TransitionMap = Orchestration & TransitionDefinition & {
-  [key: string]: TransitionDefinition
-}
-
-export type $Transition = (Orchestration & Repeat & TransitionDefinition) | (Orchestration & Repeat & TransitionMap)
+export type $Transition = MotionNodeOptions['transition']
diff --git a/packages/motion/src/types/state.ts b/packages/motion/src/types/state.ts
@@ -1,4 +1,4 @@
-import type { DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion'
+import type { DOMKeyframesDefinition, ResolvedValues, VariantLabels } from 'framer-motion'
 import type { MotionValue, TransformProperties, animate } from 'framer-motion/dom'
 import type { LayoutOptions } from '@/features/layout/types'
 import type { DragProps } from '@/features/gestures/drag/types'
@@ -14,23 +14,12 @@ import type { AnimationControls } from '@/animation/types'
 import type { AsTag } from '@/types/common'
 
 type AnimationPlaybackControls = ReturnType<typeof animate>
-
-export type TargetResolver = (
-  custom: any,
-  current: Target,
-  velocity: Target
-) => TargetAndTransition | string
-export interface Variant extends DOMKeyframesDefinition {
-  transition?: $Transition
+export interface VariantType extends DOMKeyframesDefinition {
+  transition?: Options['transition']
   attrX?: DOMKeyframesDefinition['x']
   attrY?: DOMKeyframesDefinition['y']
   attrScale?: DOMKeyframesDefinition['scale']
 }
-/**
- * Either a string, or array of strings, that reference variants defined via the `variants` prop.
- * @public
- */
-export type VariantLabels = string | string[]
 
 interface BoundingBox {
   top: number
@@ -45,7 +34,7 @@ export interface DragOptions {
 
 type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transition'>
 export type MotionStyle = Partial<{
-  [K in keyof Omit<Variant & TransformPropertiesWithoutTransition, 'attrX' | 'attrY' | 'attrScale'>]: string | number | undefined | MotionValue
+  [K in keyof Omit<VariantType & TransformPropertiesWithoutTransition, 'attrX' | 'attrY' | 'attrScale'>]: string | number | undefined | MotionValue
 }>
 
 export interface Options<T = any> extends
@@ -54,11 +43,11 @@ export interface Options<T = any> extends
   PanProps, FocusProps {
   custom?: T
   as?: AsTag
-  initial?: VariantLabels | Variant | boolean
-  animate?: VariantLabels | Variant | AnimationControls
-  exit?: VariantLabels | Variant
+  initial?: VariantLabels | VariantType | boolean
+  animate?: VariantLabels | VariantType | AnimationControls
+  exit?: VariantLabels | VariantType
   variants?: {
-    [k: string]: Variant | ((custom: T) => Variant)
+    [k: string]: VariantType | ((custom: T) => VariantType)
   }
   inherit?: boolean
   style?: MotionStyle
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
