@tamagui/animations-reanimated 2.7.7 → 3.0.0-beta.643.1

package/src/createAnimations.tsx

@@ -11,10 +11,11 @@ import {
   View,
   type AnimationDriver,
   type UniversalAnimatedNumber,
+  createRefComponent,
 } from '@tamagui/core'
 import { ResetPresence, usePresence } from '@tamagui/use-presence'
 import normalizeColor from '@react-native/normalize-colors'
-import React, { forwardRef, useMemo, useRef } from 'react'
+import React, { useMemo, useRef } from 'react'
 import type { SharedValue } from 'react-native-reanimated'
 import Animated_, {
   cancelAnimation,
@@ -83,7 +84,7 @@ type AnimationSnapshot = {
    * for each animated key (transform sub-keys as `transform:key`), the value the
    * previous committed render painted for it, when one exists and is animatable.
    * the worklet animates a mapper-fresh key FROM its seed instead of snapping —
-   * this is how an enterStyle value painted statically during mount becomes the
+   * this is how an enter-clause value painted statically during mount becomes the
    * start point once the key turns animated. keys with no seed paint their target
    * directly (a key appearing from nothing has nothing to animate from).
    */
@@ -199,7 +200,7 @@ const getRemovedAnimatedKeys = (
 }
 
 // implicit start values for style keys that were never painted (e.g. a key
-// introduced by exitStyle with no base value). most numerics default to 0.
+// introduced by an exit clause with no base value). most numerics default to 0.
 const getImplicitDefault = (
   key: string,
   targetValue: number | string
@@ -285,7 +286,11 @@ const buildSnapshot = (
   transforms: Array<Record<string, unknown>>,
   previousKeys: Set<string>,
   lastPainted: Record<string, unknown>
-) => {
+): {
+  value: AnimationSnapshot
+  painted: Record<string, unknown>
+  keys: Set<string>
+} => {
   const snapshotAnimated: Record<string, unknown> = {}
   const snapshotStatics = cloneStyleRecord(statics)
 
@@ -392,13 +397,13 @@ const createReanimatedConfig = (config: TransitionConfig): Record<string, unknow
 /**
  * Apply animation to a value based on config, with optional completion callback
  */
-const applyAnimation = (
-  targetValue: number | string,
+const applyAnimation = <T extends number | string>(
+  targetValue: T,
   config: TransitionConfig,
   callback?: AnimationCallback,
   seedValue?: number | string,
   validateStartAsColor = false
-): number | string => {
+): T => {
   'worklet'
   const delay = config.delay
   const reanimatedConfig = createReanimatedConfig(config)
@@ -416,6 +421,23 @@ const applyAnimation = (
       reanimatedConfig as WithSpringConfig,
       callback
     )
+
+    // reanimated stamps lastTimestamp from performance.now() when an animation
+    // starts outside a frame (an event handler), then steps it on the frame
+    // timestamp, which is the frame's start and lags performance.now() badly
+    // when frames are starved. the delta goes negative, and the closed-form
+    // spring exponentiates instead of decaying: a tooltip crossing triggers on
+    // a loaded machine lands at translate -33,554,430px for a frame before it
+    // relaxes back. reanimated clamps the delta's upper bound only, so hold the
+    // clock monotonic before it reaches the spring math.
+    const innerOnFrame = animatedValue.onFrame
+    animatedValue.onFrame = (animation: any, now: number) => {
+      'worklet'
+      return innerOnFrame(
+        animation,
+        now < animation.lastTimestamp ? animation.lastTimestamp : now
+      )
+    }
   }
 
   // reanimated starts a descriptor from its per-view history for the key — the
@@ -448,7 +470,7 @@ const applyAnimation = (
     animatedValue = withDelay(delay, animatedValue)
   }
 
-  return animatedValue
+  return animatedValue as T
 }
 
 const animateSnapshotValue = (
@@ -461,15 +483,19 @@ const animateSnapshotValue = (
   gated: boolean,
   currentlyExiting: boolean,
   exitCycleId: number,
-  currentlyCompletingAnimation: boolean,
-  didAnimateCycleId: number,
+  currentlyCompletingEnter: boolean,
+  enterCycleId: number,
+  currentlyCompletingUpdate: boolean,
+  updateCycleId: number,
   markExitKeyDone: (key: string, cycleId: number, finished: boolean) => void,
-  markDidAnimateKeyDone: (key: string, cycleId: number, finished: boolean) => void,
+  markEnterKeyDone: (key: string, cycleId: number) => void,
+  markUpdateKeyDone: (key: string, cycleId: number, finished: boolean) => void,
   validateStartAsColor = false
 ): number | string => {
   'worklet'
 
-  const cycleGated = gated && (currentlyExiting || currentlyCompletingAnimation)
+  const cycleGated =
+    gated && (currentlyExiting || currentlyCompletingEnter || currentlyCompletingUpdate)
   if (!previouslyEmitted && seedValue === undefined && !cycleGated) {
     return targetValue
   }
@@ -480,10 +506,15 @@ const animateSnapshotValue = (
       'worklet'
       runOnJS(markExitKeyDone)(key, exitCycleId, finished ?? false)
     }
-  } else if (gated && currentlyCompletingAnimation) {
+  } else if (gated && currentlyCompletingEnter) {
+    callback = () => {
+      'worklet'
+      runOnJS(markEnterKeyDone)(key, enterCycleId)
+    }
+  } else if (gated && currentlyCompletingUpdate) {
     callback = (finished) => {
       'worklet'
-      runOnJS(markDidAnimateKeyDone)(key, didAnimateCycleId, finished ?? false)
+      runOnJS(markUpdateKeyDone)(key, updateCycleId, finished ?? false)
     }
   }
 
@@ -620,7 +651,7 @@ function createWebAnimatedComponent(defaultTag: 'div' | 'span') {
   const isText = defaultTag === 'span'
 
   const Component = Animated.createAnimatedComponent(
-    forwardRef((propsIn: any, ref) => {
+    createRefComponent((propsIn: any, ref) => {
       const { forwardedRef, render = defaultTag, ...rest } = propsIn
       const hostRef = useRef<HTMLElement>(null)
       const composedRefs = useComposedRefs(forwardedRef, ref, hostRef)
@@ -650,8 +681,9 @@ function createWebAnimatedComponent(defaultTag: 'div' | 'span') {
         stateRef as any,
         false
       )
+      const { nativeID, ...webProps } = transformedProps ?? viewProps
 
-      return <Element {...transformedProps} ref={composedRefs} />
+      return <Element {...webProps} ref={composedRefs} />
     })
   )
   ;(Component as any).acceptRenderProp = true
@@ -695,7 +727,7 @@ function buildTransitionConfig<A extends Record<string, TransitionConfig>>(
   }
 
   if (normalized.config) {
-    base = cloneTransitionConfig({ ...base, ...normalized.config })
+    base = cloneTransitionConfig({ ...base, ...normalized.config } as TransitionConfig)
     // infer type: 'timing' if duration is provided without spring params
     if (
       base.type !== 'timing' &&
@@ -931,7 +963,7 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         themeName,
         stateRef,
         styleState,
-        onDidAnimate,
+        onTransition,
       } = animationProps
 
       // State flags
@@ -967,25 +999,46 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
 
       // Get sendExitComplete callback from presence
       const sendExitComplete = presence?.[1]
-      const onDidAnimateRef = useRef(onDidAnimate)
-      useIsomorphicLayoutEffect(() => {
-        onDidAnimateRef.current = onDidAnimate
-      }, [onDidAnimate])
-
-      const didAnimateCycleIdRef = useRef(0)
-      const pendingDidAnimateKeysRef = useRef<Set<string>>(new Set())
-      const didAnimateCompletedRef = useRef(false)
-      const isCompletingAnimationRef = useSharedValue(false)
-      const didAnimateCycleIdShared = useSharedValue(0)
-      const markDidAnimateKeyDone = useEvent(
+      const onTransitionRef = useRef(onTransition)
+      onTransitionRef.current = onTransition
+      const emit = (
+        phase: 'start' | 'end',
+        cause: 'enter' | 'exit' | 'update',
+        finished?: boolean
+      ) => {
+        onTransitionRef.current?.(
+          phase === 'end' ? { phase, cause, finished } : { phase, cause }
+        )
+      }
+      const enterStartedRef = useRef(false)
+      const exitStartedRef = useRef(false)
+      const updateStartedRef = useRef(false)
+      const isExitingJSRef = useRef(false)
+      isExitingJSRef.current = isExiting
+
+      // =========================================================================
+      // Update cycle state: an in-place style transition while mounted (not
+      // enter/exit). drives the onTransition 'update' lifecycle events and the
+      // components (e.g. accordion HeightAnimator) that retain content through
+      // an in-place transition.
+      // =========================================================================
+      const updateCycleIdRef = useRef(0)
+      const pendingUpdateKeysRef = useRef<Set<string>>(new Set())
+      const updateCompletedRef = useRef(false)
+      const isCompletingUpdateRef = useSharedValue(false)
+      const updateCycleIdShared = useSharedValue(0)
+      const markUpdateKeyDone = useEvent(
         (key: string, cycleId: number, finished: boolean) => {
-          if (!finished || cycleId !== didAnimateCycleIdRef.current) return
-          if (didAnimateCompletedRef.current) return
-          pendingDidAnimateKeysRef.current.delete(key)
-          if (pendingDidAnimateKeysRef.current.size === 0) {
-            didAnimateCompletedRef.current = true
-            isCompletingAnimationRef.value = false
-            onDidAnimateRef.current?.()
+          if (!finished || cycleId !== updateCycleIdRef.current) return
+          if (updateCompletedRef.current) return
+          pendingUpdateKeysRef.current.delete(key)
+          if (pendingUpdateKeysRef.current.size === 0) {
+            updateCompletedRef.current = true
+            isCompletingUpdateRef.value = false
+            if (updateStartedRef.current) {
+              updateStartedRef.current = false
+              emit('end', 'update', true)
+            }
           }
         }
       )
@@ -1017,23 +1070,55 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
           // check if all exit animations are done
           if (pendingExitKeysRef.current.size === 0) {
             exitCompletedRef.current = true
+            if (exitStartedRef.current) {
+              exitStartedRef.current = false
+              // exit 'end' fires immediately before presence safeToRemove
+              emit('end', 'exit', true)
+            }
             sendExitComplete?.()
           }
         }
       )
 
+      // =========================================================================
+      // Enter cycle state for the onTransition enter 'end' event
+      // =========================================================================
+      const enterCycleIdRef = useRef(0)
+      const pendingEnterKeysRef = useRef<Set<string>>(new Set())
+      const enterCompletedRef = useRef(false)
+
+      const markEnterKeyDone = useEvent((key: string, cycleId: number) => {
+        if (cycleId !== enterCycleIdRef.current) return
+        if (enterCompletedRef.current) return
+        if (isExitingJSRef.current) return
+
+        pendingEnterKeysRef.current.delete(key)
+
+        if (pendingEnterKeysRef.current.size === 0) {
+          enterCompletedRef.current = true
+          if (enterStartedRef.current) {
+            enterStartedRef.current = false
+            emit('end', 'enter', true)
+          }
+        }
+      })
+
       // SharedValue to pass exit state into worklet
       const isExitingRef = useSharedValue(isExiting)
       const exitCycleIdShared = useSharedValue(exitCycleIdRef.current)
+      const isCompletingEnterRef = useSharedValue(false)
+      const enterCycleIdShared = useSharedValue(enterCycleIdRef.current)
 
       // start new exit cycle only on transition INTO exiting (not every render while exiting)
       if (justStartedExiting) {
         exitCycleIdRef.current++
         exitCompletedRef.current = false
         pendingExitKeysRef.current.clear()
-        didAnimateCycleIdRef.current++
-        pendingDidAnimateKeysRef.current.clear()
-        didAnimateCompletedRef.current = true
+        enterCycleIdRef.current++
+        pendingEnterKeysRef.current.clear()
+        updateCycleIdRef.current++
+        pendingUpdateKeysRef.current.clear()
+        updateCompletedRef.current = true
       }
       // invalidate pending callbacks when exit is canceled/interrupted
       if (justStoppedExiting) {
@@ -1045,11 +1130,28 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
       useIsomorphicLayoutEffect(() => {
         isExitingRef.value = isExiting
         exitCycleIdShared.value = exitCycleIdRef.current
+        isCompletingEnterRef.value =
+          !isExiting && justFinishedEntering && Boolean(onTransitionRef.current)
+        enterCycleIdShared.value = enterCycleIdRef.current
         if (justStartedExiting) {
-          isCompletingAnimationRef.value = false
-          didAnimateCycleIdShared.value = didAnimateCycleIdRef.current
+          isCompletingUpdateRef.value = false
+          updateCycleIdShared.value = updateCycleIdRef.current
+        }
+      }, [
+        isExiting,
+        justFinishedEntering,
+        exitCycleIdRef.current,
+        enterCycleIdRef.current,
+        justStartedExiting,
+      ])
+
+      // exit interrupted by a re-enter: report the exit as finished:false
+      useIsomorphicLayoutEffect(() => {
+        if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
+          exitStartedRef.current = false
+          emit('end', 'exit', false)
         }
-      }, [isExiting, exitCycleIdRef.current, justStartedExiting])
+      }, [justStoppedExiting])
 
       // track previous exiting state
       React.useEffect(() => {
@@ -1083,7 +1185,7 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         // so React's per-key style diff never touches the key again and the
         // mapper's inline writes survive every commit — reanimated's Fabric
         // commit hook provides this guarantee on native, web has no equivalent.
-        // during enter the carry is the enterStyle (the mapper animates over it);
+        // during enter the carry is the enter-clause value (the mapper animates over it);
         // a key appearing post-mount (a just-measured height) paints its value in
         // the same commit the mapper first sees it, a frame before the mapper's
         // first write.
@@ -1162,22 +1264,28 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
       // unmounts immediately (the dialog-exit-snap). mirrored into a plain ref so the
       // emitter callback (which runs outside render) can read it.
       const pseudoActiveRef = useRef(false)
-      const isExitingJSRef = useRef(false)
-      isExitingJSRef.current = isExiting
       // the committed render is the worklet's source of truth whenever the emitter is not
       // latched, so every render must publish its snapshot — not just the renders that drop
       // a latch. animated keys live only in this snapshot after mount (staticStyles carries
       // them during mount only), so a render that never publishes leaves the worklet reading
       // an empty snapshot and the animated properties never reach the screen at all.
+      // The first emitter snapshot can already contain the browser's real media-query state
+      // while the first render still contains mediaQueryDefaultActive for hydration. Publish
+      // that render behind the latch, but do not let it replace the fresher runtime snapshot.
       const publishedSnapshotRef = useRef<object | null>(null)
       useIsomorphicLayoutEffect(() => {
+        const renderChanged = publishedSnapshotRef.current !== renderSnapshot.value
         const droppingLatch =
-          (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null
+          (isExiting ||
+            (!pseudoActiveRef.current &&
+              publishedSnapshotRef.current !== null &&
+              renderChanged)) &&
+          emitterSnapshotRef.value !== null
         // when the latch drops, keys the emitter owned that this render no longer has must
         // be cleared too, otherwise reanimated keeps painting the stale emitted value
         const emitterKeys = droppingLatch ? emitterKeysRef.current : null
 
-        if (droppingLatch || publishedSnapshotRef.current !== renderSnapshot.value) {
+        if (droppingLatch || renderChanged) {
           const removedKeys = emitterKeys
             ? {
                 ...renderSnapshot.value.removedKeys,
@@ -1309,35 +1417,42 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
       // Compute and register exit keys synchronously during render to avoid race conditions
       // This must happen BEFORE useAnimatedStyle runs so callbacks have a populated set
       const exitKeysRegistered = useRef(false)
+      const enterKeysRegistered = useRef(false)
+
+      if (!isExiting && justFinishedEntering && onTransition) {
+        const enterKeys = getGatedKeys(renderSnapshot.value)
+        enterCycleIdRef.current++
+        enterCompletedRef.current = false
+        pendingEnterKeysRef.current = new Set(enterKeys)
+        enterKeysRegistered.current = enterKeys.length > 0
+      }
+
       if (justStartedExiting && sendExitComplete) {
         const exitKeys = getGatedKeys(renderSnapshot.value)
         pendingExitKeysRef.current = new Set(exitKeys)
         exitKeysRegistered.current = exitKeys.length > 0
       }
 
-      // onDidAnimate is an internal completion hook used by components that
-      // need to retain content through an in-place style transition. register
-      // the exact keys that can animate before publishing the cycle to the
-      // worklet; shared values are only written from the layout effect, never
-      // from the mapper that reads them.
-      const previousDidAnimateStyleRef = useRef<string | null>(null)
-      const didAnimateStyle = onDidAnimate ? JSON.stringify(style) : null
-      const previousDidAnimateStyle = previousDidAnimateStyleRef.current
-      const shouldRegisterDidAnimate =
-        didAnimateStyle !== null &&
-        previousDidAnimateStyle !== null &&
-        previousDidAnimateStyle !== didAnimateStyle &&
+      // update cycle: a genuine in-place style change while mounted (not
+      // entering or exiting). register the exact keys that can animate before
+      // publishing the cycle to the worklet; shared values are only written
+      // from the layout effect, never from the mapper that reads them.
+      const previousUpdateStyleRef = useRef<string | null>(null)
+      const updateStyle = onTransition ? JSON.stringify(style) : null
+      const previousUpdateStyle = previousUpdateStyleRef.current
+      const shouldRegisterUpdate =
+        updateStyle !== null &&
+        previousUpdateStyle !== null &&
+        previousUpdateStyle !== updateStyle &&
         !isExiting &&
         !isEntering &&
         !justFinishedEntering
-      const didAnimateKeys = shouldRegisterDidAnimate
-        ? getGatedKeys(renderSnapshot.value)
-        : []
+      const updateKeys = shouldRegisterUpdate ? getGatedKeys(renderSnapshot.value) : []
 
       useIsomorphicLayoutEffect(() => {
-        if (didAnimateStyle === null) {
-          previousDidAnimateStyleRef.current = null
-          isCompletingAnimationRef.value = false
+        if (updateStyle === null) {
+          previousUpdateStyleRef.current = null
+          isCompletingUpdateRef.value = false
           return
         }
 
@@ -1345,33 +1460,82 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         // captured previous value prevents StrictMode's repeated effect from
         // registering the same transition twice.
         const previousStyleStillCurrent =
-          previousDidAnimateStyleRef.current === previousDidAnimateStyle
-        previousDidAnimateStyleRef.current = didAnimateStyle
-        if (!shouldRegisterDidAnimate || !previousStyleStillCurrent) return
-
-        const cycleId = ++didAnimateCycleIdRef.current
-        pendingDidAnimateKeysRef.current = new Set(didAnimateKeys)
-        didAnimateCompletedRef.current = didAnimateKeys.length === 0
-        isCompletingAnimationRef.value = didAnimateKeys.length > 0
-        didAnimateCycleIdShared.value = cycleId
-        if (didAnimateKeys.length === 0) {
-          onDidAnimateRef.current?.()
+          previousUpdateStyleRef.current === previousUpdateStyle
+        previousUpdateStyleRef.current = updateStyle
+        if (!shouldRegisterUpdate || !previousStyleStillCurrent) return
+
+        const cycleId = ++updateCycleIdRef.current
+        pendingUpdateKeysRef.current = new Set(updateKeys)
+        updateCompletedRef.current = updateKeys.length === 0
+        isCompletingUpdateRef.value = updateKeys.length > 0
+        updateCycleIdShared.value = cycleId
+
+        // a superseded in-flight update reports finished:false before the new
+        // cycle starts; a zero-key cycle reports an immediate start/end pair
+        if (updateStartedRef.current) {
+          emit('end', 'update', false)
+        }
+        updateStartedRef.current = true
+        emit('start', 'update')
+        if (updateKeys.length === 0) {
+          updateStartedRef.current = false
+          emit('end', 'update', true)
         }
-      }, [didAnimateStyle, shouldRegisterDidAnimate])
+      }, [updateStyle, shouldRegisterUpdate])
 
       // handle zero-animation case in effect (after render commit)
       React.useEffect(() => {
         if (!justStartedExiting || !sendExitComplete) return
 
+        // enter or update still in flight when exit begins is reported as finished:false
+        if (enterStartedRef.current) {
+          enterStartedRef.current = false
+          emit('end', 'enter', false)
+        }
+        if (updateStartedRef.current) {
+          updateStartedRef.current = false
+          emit('end', 'update', false)
+        }
+
+        // emit exit start once per exit cycle
+        if (onTransitionRef.current && !exitStartedRef.current) {
+          exitStartedRef.current = true
+          emit('start', 'exit')
+        }
+
         // if no keys were registered, complete immediately
         if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
           if (!exitCompletedRef.current) {
             exitCompletedRef.current = true
+            if (exitStartedRef.current) {
+              exitStartedRef.current = false
+              emit('end', 'exit', true)
+            }
             sendExitComplete()
           }
         }
       }, [justStartedExiting, sendExitComplete])
 
+      React.useEffect(() => {
+        if (isExiting || !justFinishedEntering || !onTransition) return
+
+        // emit enter start once per enter cycle
+        if (!enterStartedRef.current) {
+          enterStartedRef.current = true
+          emit('start', 'enter')
+        }
+
+        if (!enterKeysRegistered.current && pendingEnterKeysRef.current.size === 0) {
+          if (!enterCompletedRef.current) {
+            enterCompletedRef.current = true
+            if (enterStartedRef.current) {
+              enterStartedRef.current = false
+              emit('end', 'enter', true)
+            }
+          }
+        }
+      }, [isExiting, justFinishedEntering, onTransition])
+
       // the worklet's own record of which animated keys it has emitted (mirrors
       // reanimated's per-view style history, which resets whenever a key leaves
       // the output). a key not in here is fresh to the mapper no matter what
@@ -1413,11 +1577,13 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
           const animatedValues = snapshot.animated
           const staticValues = snapshot.statics
 
-          // read exit state from shared values
+          // read lifecycle state from shared values
           const currentlyExiting = isExitingRef.value
           const currentCycleId = exitCycleIdShared.value
-          const currentlyCompletingAnimation = isCompletingAnimationRef.value
-          const currentDidAnimateCycleId = didAnimateCycleIdShared.value
+          const currentlyCompletingEnter = isCompletingEnterRef.value
+          const currentEnterCycleId = enterCycleIdShared.value
+          const currentlyCompletingUpdate = isCompletingUpdateRef.value
+          const currentUpdateCycleId = updateCycleIdShared.value
 
           // Include static values from emitter (for hover/press style changes)
           for (const key in staticValues) {
@@ -1449,10 +1615,13 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
               !!snapshot.gatedKeys[key],
               currentlyExiting,
               currentCycleId,
-              currentlyCompletingAnimation,
-              currentDidAnimateCycleId,
+              currentlyCompletingEnter,
+              currentEnterCycleId,
+              currentlyCompletingUpdate,
+              currentUpdateCycleId,
               markExitKeyDone,
-              markDidAnimateKeyDone,
+              markEnterKeyDone,
+              markUpdateKeyDone,
               !!COLOR_STYLE_KEYS[key]
             )
           }
@@ -1487,10 +1656,13 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
                     !!snapshot.gatedKeys[subKey],
                     currentlyExiting,
                     currentCycleId,
-                    currentlyCompletingAnimation,
-                    currentDidAnimateCycleId,
+                    currentlyCompletingEnter,
+                    currentEnterCycleId,
+                    currentlyCompletingUpdate,
+                    currentUpdateCycleId,
                     markExitKeyDone,
-                    markDidAnimateKeyDone
+                    markEnterKeyDone,
+                    markUpdateKeyDone
                   ),
                 })
               } else {
@@ -1516,9 +1688,12 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
               isExitingRef,
               exitCycleIdShared,
               markExitKeyDone,
-              isCompletingAnimationRef,
-              didAnimateCycleIdShared,
-              markDidAnimateKeyDone,
+              isCompletingEnterRef,
+              enterCycleIdShared,
+              markEnterKeyDone,
+              isCompletingUpdateRef,
+              updateCycleIdShared,
+              markUpdateKeyDone,
             ]
           : undefined
       )