@tamagui/animations-motion 2.7.7 → 3.0.0-beta.637.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,954 +1,1127 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx } from "react/jsx-runtime";
2
2
  import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
3
3
  import { ResetPresence, usePresence } from "@tamagui/use-presence";
4
- import { fixStyles, getConfig, getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useIsomorphicLayoutEffect, useThemeWithState, View } from "@tamagui/web";
5
- import { animate as animateMotionValue, motionValue, useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
6
- import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
4
+ import { Text, View, createRefComponent, fixStyles, getConfig, getSplitStyles, hooks, normalizeValueWithProperty, styleToCSS, transformsToString, useComposedRefs, useIsomorphicLayoutEffect, useThemeWithState } from "@tamagui/web";
5
+ import { animate, motionValue, useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
6
+ import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
7
+
7
8
  function _instanceof(left, right) {
8
- if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
9
- return !!right[Symbol.hasInstance](left);
10
- } else {
11
- return left instanceof right;
12
- }
9
+ if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
10
+ return !!right[Symbol.hasInstance](left);
11
+ } else {
12
+ return left instanceof right;
13
+ }
13
14
  }
14
15
  function _type_of(obj) {
15
- "@swc/helpers - typeof";
16
-
17
- return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
16
+ "@swc/helpers - typeof";
17
+ return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
18
18
  }
19
19
  var isServer = typeof window === "undefined";
20
20
  function useAnimateSSRSafe() {
21
- if (isServer) {
22
- return [useRef(null), function () {}];
23
- }
24
- return useAnimate();
21
+ if (isServer) {
22
+ return [useRef(null), function() {}];
23
+ }
24
+ return useAnimate();
25
25
  }
26
- var MotionValueStrategy = /* @__PURE__ */new WeakMap();
27
- var PendingMotionOnFinish = /* @__PURE__ */new WeakMap();
26
+ var asStyleRecord = function(style) {
27
+ return style && (typeof style === "undefined" ? "undefined" : _type_of(style)) === "object" && !Array.isArray(style) ? style : {};
28
+ };
29
+ function assignInlineStyles(node, styles) {
30
+ for (var key in styles) {
31
+ node.style[key] = normalizeValueWithProperty(styles[key], key);
32
+ }
33
+ }
34
+ var MotionValueStrategy = /* @__PURE__ */ new WeakMap();
35
+ var PendingMotionOnFinish = /* @__PURE__ */ new WeakMap();
28
36
  function settlePendingMotionOnFinish(mv, controls) {
29
- var onFinish = PendingMotionOnFinish.get(mv);
30
- if (!onFinish) return;
31
- PendingMotionOnFinish.delete(mv);
32
- controls.then(function () {
33
- return onFinish();
34
- }).catch(function () {
35
- return onFinish();
36
- });
37
+ var onFinish = PendingMotionOnFinish.get(mv);
38
+ if (!onFinish) return;
39
+ PendingMotionOnFinish.delete(mv);
40
+ controls.then(function() {
41
+ return onFinish();
42
+ }).catch(function() {
43
+ return onFinish();
44
+ });
37
45
  }
38
- var PopperPositionAnims = /* @__PURE__ */new WeakMap();
46
+ var PopperPositionAnims = /* @__PURE__ */ new WeakMap();
39
47
  function parseTranslate(transform) {
40
- if (!transform || transform === "none") return {
41
- x: 0,
42
- y: 0
43
- };
44
- try {
45
- var m = new DOMMatrixReadOnly(transform);
46
- if (!m.is2D || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
47
- return {
48
- x: m.e,
49
- y: m.f
50
- };
51
- } catch (e) {
52
- return null;
53
- }
48
+ if (!transform || transform === "none") return {
49
+ x: 0,
50
+ y: 0
51
+ };
52
+ try {
53
+ var m = new DOMMatrixReadOnly(transform);
54
+ if (!m.is2D || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
55
+ return {
56
+ x: m.e,
57
+ y: m.f
58
+ };
59
+ } catch (e) {
60
+ return null;
61
+ }
54
62
  }
55
63
  function createAnimations(animations) {
56
- var isHydratingGlobal;
57
- var hydratingComponents = /* @__PURE__ */new Set();
58
- return {
59
- View: MotionView,
60
- Text: MotionText,
61
- isReactNative: false,
62
- inputStyle: "css",
63
- outputStyle: "inline",
64
- avoidReRenders: true,
65
- animations,
66
- usePresence,
67
- ResetPresence,
68
- onMount() {
69
- isHydratingGlobal = false;
70
- hydratingComponents.forEach(function (cb) {
71
- return cb();
72
- });
73
- },
74
- useAnimations: function (animationProps) {
75
- if (isHydratingGlobal === void 0 && !getConfig().settings.disableSSR) {
76
- isHydratingGlobal = true;
77
- }
78
- var {
79
- props,
80
- style,
81
- componentState,
82
- stateRef,
83
- useStyleEmitter,
84
- presence,
85
- styleProps
86
- } = animationProps;
87
- var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
88
- var isComponentHydrating = componentState.unmounted === true;
89
- var isMounting = componentState.unmounted === "should-enter";
90
- var isEntering = !!componentState.unmounted;
91
- var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
92
- var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
93
- var refs = useRef(null);
94
- if (!refs.current) {
95
- refs.current = {
96
- isFirstRender: true,
97
- lastDoAnimate: null,
98
- lastDontAnimate: null,
99
- controls: null,
100
- lastAnimateAt: 0,
101
- disposed: false,
102
- wasExiting: false,
103
- isExiting: false,
104
- sendExitComplete: void 0,
105
- animationState: "default",
106
- frozenExitTarget: null,
107
- exitCompleteScheduled: false,
108
- wasEntering: false,
109
- wasDisabled: false,
110
- wasNoClass: !!styleProps.noClass
111
- };
112
- }
113
- var justFinishedEntering = refs.current.wasEntering && !isEntering;
114
- useEffect(function () {
115
- refs.current.wasEntering = isEntering;
116
- });
117
- var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
118
- var disableAnimation = isComponentHydrating || isMounting || !animationKey;
119
- var [scope, animate] = useAnimateSSRSafe();
120
- refs.current.isExiting = isExiting;
121
- refs.current.sendExitComplete = sendExitComplete;
122
- refs.current.animationState = animationState;
123
- var justStartedExiting = isExiting && !refs.current.wasExiting;
124
- var justStoppedExiting = !isExiting && refs.current.wasExiting;
125
- if (justStartedExiting || justStoppedExiting) {
126
- refs.current.frozenExitTarget = null;
127
- refs.current.exitCompleteScheduled = false;
128
- }
129
- useEffect(function () {
130
- refs.current.wasExiting = isExiting;
131
- });
132
- var {
133
- dontAnimate = {},
134
- doAnimate,
135
- animationOptions
136
- } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
137
- var [firstRenderStyle] = useState(style);
138
- if (refs.current.isFirstRender) {
139
- refs.current.lastDontAnimate = firstRenderStyle;
140
- }
141
- var [isHydrating, setIsHydrating] = useState(isHydratingGlobal);
142
- useLayoutEffect(function () {
143
- if (isHydratingGlobal) {
144
- hydratingComponents.add(function () {
145
- setIsHydrating(false);
146
- });
147
- }
148
- return function () {
149
- refs.current.disposed = true;
150
- };
151
- }, []);
152
- var flushAnimation = function (param) {
153
- var {
154
- doAnimate: doAnimateRaw = {},
155
- animationOptions: passedOptions = {},
156
- dontAnimate: dontAnimate2
157
- } = param;
158
- var startedControls = null;
159
- var isCurrentlyExiting = refs.current.isExiting;
160
- var currentSendExitComplete = refs.current.sendExitComplete;
161
- var doAnimate2 = doAnimateRaw;
162
- if (isCurrentlyExiting && refs.current.frozenExitTarget) {
163
- doAnimate2 = refs.current.frozenExitTarget;
164
- }
165
- var _props_transition;
166
- var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
167
- try {
168
- var node = stateRef.current.host;
169
- if (refs.current.isFirstRender) {
170
- refs.current.lastDontAnimate = null;
171
- refs.current.lastDoAnimate = null;
172
- }
173
- if (process.env.NODE_ENV === "development") {
174
- if (props["debug"] && props["debug"] !== "profile") {
175
- console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
176
- console.info({
177
- props,
178
- componentState,
179
- doAnimate: doAnimate2,
180
- dontAnimate: dontAnimate2,
181
- animationOptions: animationOptions2,
182
- animationProps,
183
- lastDoAnimate: {
184
- ...refs.current.lastDoAnimate
185
- },
186
- lastDontAnimate: {
187
- ...refs.current.lastDontAnimate
188
- },
189
- isExiting,
190
- style,
191
- node
192
- });
193
- console.groupCollapsed(`trace >`);
194
- console.trace();
195
- console.groupEnd();
196
- console.groupEnd();
197
- }
198
- }
199
- if (!_instanceof(node, HTMLElement)) {
200
- return;
201
- }
202
- var prevDont = refs.current.lastDontAnimate;
203
- if (dontAnimate2) {
204
- if (prevDont) {
205
- removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
206
- var changed = getDiff(prevDont, dontAnimate2);
207
- if (changed) {
208
- Object.assign(node.style, changed);
209
- }
210
- } else {
211
- Object.assign(node.style, dontAnimate2);
212
- }
213
- }
214
- if (doAnimate2) {
215
- if (prevDont) {
216
- for (var key in prevDont) {
217
- if (key in doAnimate2) {
218
- node.style[key] = prevDont[key];
219
- if (refs.current.lastDoAnimate) {
220
- refs.current.lastDoAnimate[key] = prevDont[key];
221
- }
222
- }
223
- }
224
- }
225
- var lastAnimated = refs.current.lastDoAnimate;
226
- if (lastAnimated) {
227
- removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
228
- }
229
- var diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
230
- if (diff) {
231
- if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
232
- refs.current.frozenExitTarget = {
233
- ...doAnimate2
234
- };
235
- }
236
- var isPopperPosition = node.hasAttribute("data-popper-animate-position");
237
- var popperHandledTransform = false;
238
- if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
239
- var target = parseTranslate(diff.transform);
240
- if (target) {
241
- var entry = PopperPositionAnims.get(node);
242
- if (!entry) {
243
- var seed = target;
244
- try {
245
- var _parseTranslate;
246
- seed = (_parseTranslate = parseTranslate(getComputedStyle(node).transform)) !== null && _parseTranslate !== void 0 ? _parseTranslate : target;
247
- } catch (e) {}
248
- var x = motionValue(seed.x);
249
- var y = motionValue(seed.y);
250
- var write = function () {
251
- node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
252
- };
253
- x.on("change", write);
254
- y.on("change", write);
255
- entry = {
256
- x,
257
- y,
258
- stop: null
259
- };
260
- PopperPositionAnims.set(node, entry);
261
- }
262
- if (!entry.stop) {
263
- try {
264
- var live = parseTranslate(getComputedStyle(node).transform);
265
- if (live) {
266
- entry.x.jump(live.x);
267
- entry.y.jump(live.y);
268
- }
269
- } catch (e) {}
270
- }
271
- var _iteratorNormalCompletion = true,
272
- _didIteratorError = false,
273
- _iteratorError = void 0;
274
- try {
275
- for (var _iterator = node.getAnimations()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
276
- var anim = _step.value;
277
- try {
278
- var _anim_effect_getKeyframes, _anim_effect;
279
- var kf = (_anim_effect = anim.effect) === null || _anim_effect === void 0 ? void 0 : (_anim_effect_getKeyframes = _anim_effect.getKeyframes) === null || _anim_effect_getKeyframes === void 0 ? void 0 : _anim_effect_getKeyframes.call(_anim_effect);
280
- if (kf === null || kf === void 0 ? void 0 : kf.some(function (k) {
281
- return "transform" in k;
282
- })) {
283
- anim.cancel();
284
- }
285
- } catch (e) {}
286
- }
287
- } catch (err) {
288
- _didIteratorError = true;
289
- _iteratorError = err;
290
- } finally {
291
- try {
292
- if (!_iteratorNormalCompletion && _iterator.return != null) {
293
- _iterator.return();
294
- }
295
- } finally {
296
- if (_didIteratorError) {
297
- throw _iteratorError;
298
- }
299
- }
300
- }
301
- var opts = animationOptions2;
302
- var _opts_transform, _ref;
303
- var positionTransition = (_ref = (_opts_transform = opts.transform) !== null && _opts_transform !== void 0 ? _opts_transform : opts.default) !== null && _ref !== void 0 ? _ref : animationOptions2;
304
- var cx = animateMotionValue(entry.x, target.x, positionTransition);
305
- var cy = animateMotionValue(entry.y, target.y, positionTransition);
306
- entry.stop = function () {
307
- cx.stop();
308
- cy.stop();
309
- };
310
- popperHandledTransform = true;
311
- }
312
- }
313
- if (isCurrentlyExiting) {
314
- var entry1 = PopperPositionAnims.get(node);
315
- if (entry1 === null || entry1 === void 0 ? void 0 : entry1.stop) {
316
- entry1.stop();
317
- entry1.stop = null;
318
- }
319
- }
320
- var midFlightValues = null;
321
- if (refs.current.controls) {
322
- try {
323
- var computed = getComputedStyle(node);
324
- midFlightValues = {};
325
- for (var key1 in diff) {
326
- var val = computed[key1];
327
- if (val !== void 0 && val !== "") {
328
- midFlightValues[key1] = val;
329
- }
330
- }
331
- } catch (e) {}
332
- if (isCurrentlyExiting) {
333
- refs.current.controls.stop();
334
- }
335
- if (midFlightValues) {
336
- for (var key2 in midFlightValues) {
337
- if (key2 === "transform" && popperHandledTransform) continue;
338
- node.style[key2] = midFlightValues[key2];
339
- }
340
- }
341
- if (isPopperPosition && !popperHandledTransform) {
342
- var anims = node.getAnimations();
343
- var _iteratorNormalCompletion1 = true,
344
- _didIteratorError1 = false,
345
- _iteratorError1 = void 0;
346
- try {
347
- for (var _iterator1 = anims[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
348
- var anim1 = _step1.value;
349
- anim1.cancel();
350
- }
351
- } catch (err) {
352
- _didIteratorError1 = true;
353
- _iteratorError1 = err;
354
- } finally {
355
- try {
356
- if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
357
- _iterator1.return();
358
- }
359
- } finally {
360
- if (_didIteratorError1) {
361
- throw _iteratorError1;
362
- }
363
- }
364
- }
365
- }
366
- }
367
- var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
368
- var waapiDiff = fixedDiff;
369
- if (popperHandledTransform && "transform" in waapiDiff) {
370
- waapiDiff = {
371
- ...waapiDiff
372
- };
373
- delete waapiDiff.transform;
374
- }
375
- if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && waapiDiff.transform) {
376
- waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
377
- }
378
- if (Object.keys(waapiDiff).length > 0) {
379
- startedControls = animate(scope.current, waapiDiff, animationOptions2);
380
- refs.current.controls = startedControls;
381
- }
382
- refs.current.lastAnimateAt = Date.now();
383
- }
384
- }
385
- refs.current.lastDontAnimate = dontAnimate2 ? {
386
- ...dontAnimate2
387
- } : {};
388
- refs.current.lastDoAnimate = doAnimate2 ? {
389
- ...doAnimate2
390
- } : {};
391
- } finally {
392
- if (isCurrentlyExiting && currentSendExitComplete) {
393
- if (startedControls) {
394
- refs.current.exitCompleteScheduled = true;
395
- startedControls.finished.then(function () {
396
- if (refs.current.isExiting) {
397
- currentSendExitComplete();
398
- }
399
- }).catch(function () {
400
- if (refs.current.isExiting) {
401
- currentSendExitComplete();
402
- }
403
- });
404
- } else if (!refs.current.exitCompleteScheduled) {
405
- currentSendExitComplete();
406
- }
407
- }
408
- }
409
- };
410
- useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, effectiveTransition) {
411
- var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
412
- flushAnimation(_$animationProps);
413
- });
414
- useIsomorphicLayoutEffect(function () {
415
- if (refs.current.isFirstRender) {
416
- refs.current.isFirstRender = false;
417
- refs.current.wasDisabled = disableAnimation;
418
- if (isHydrating) {
419
- if (doAnimate && Object.keys(doAnimate).length > 0) {
420
- refs.current.lastDoAnimate = {
421
- ...doAnimate
422
- };
423
- } else {
424
- refs.current.lastDoAnimate = dontAnimate ? {
425
- ...dontAnimate
426
- } : {};
427
- }
428
- refs.current.lastDontAnimate = dontAnimate ? {
429
- ...dontAnimate
430
- } : {};
431
- refs.current.lastAnimateAt = Date.now();
432
- return;
433
- }
434
- refs.current.lastDontAnimate = dontAnimate ? {
435
- ...dontAnimate
436
- } : {};
437
- refs.current.lastDoAnimate = doAnimate ? {
438
- ...doAnimate
439
- } : {};
440
- return;
441
- }
442
- var justEnabled = refs.current.wasDisabled && !disableAnimation;
443
- refs.current.wasDisabled = disableAnimation;
444
- var justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
445
- refs.current.wasNoClass = !!styleProps.noClass;
446
- if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
447
- var node = stateRef.current.host;
448
- if (_instanceof(node, HTMLElement)) {
449
- if (dontAnimate) Object.assign(node.style, dontAnimate);
450
- if (doAnimate) Object.assign(node.style, doAnimate);
451
- var entry = PopperPositionAnims.get(node);
452
- if (entry) {
453
- var _doAnimate_transform;
454
- var target = parseTranslate((_doAnimate_transform = doAnimate === null || doAnimate === void 0 ? void 0 : doAnimate.transform) !== null && _doAnimate_transform !== void 0 ? _doAnimate_transform : dontAnimate === null || dontAnimate === void 0 ? void 0 : dontAnimate.transform);
455
- if (target) {
456
- var _entry_stop;
457
- (_entry_stop = entry.stop) === null || _entry_stop === void 0 ? void 0 : _entry_stop.call(entry);
458
- entry.stop = null;
459
- entry.x.jump(target.x);
460
- entry.y.jump(target.y);
461
- }
462
- }
463
- }
464
- refs.current.lastDontAnimate = dontAnimate ? {
465
- ...dontAnimate
466
- } : {};
467
- refs.current.lastDoAnimate = doAnimate ? {
468
- ...doAnimate
469
- } : {};
470
- return;
471
- }
472
- flushAnimation({
473
- doAnimate,
474
- dontAnimate,
475
- animationOptions
476
- });
477
- }, [style, isExiting, disableAnimation, styleProps.noClass]);
478
- if (process.env.NODE_ENV === "development") {
479
- if (props["debug"] && props["debug"] !== "profile") {
480
- console.groupCollapsed(`[motion] render`);
481
- console.info({
482
- style,
483
- doAnimate,
484
- dontAnimate,
485
- scope,
486
- animationOptions,
487
- isExiting,
488
- isFirstRender: refs.current.isFirstRender,
489
- animationProps
490
- });
491
- console.groupEnd();
492
- }
493
- }
494
- return {
495
- style: firstRenderStyle,
496
- ref: scope,
497
- render: "div"
498
- };
499
- },
500
- useAnimatedNumber(initial) {
501
- var motionValue2 = useMotionValue(initial);
502
- return React.useMemo(function () {
503
- return {
504
- getInstance() {
505
- return motionValue2;
506
- },
507
- getValue() {
508
- return motionValue2.get();
509
- },
510
- setValue(next) {
511
- var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
512
- type: "spring"
513
- },
514
- onFinish = arguments.length > 2 ? arguments[2] : void 0;
515
- if (config.type === "direct") {
516
- MotionValueStrategy.set(motionValue2, {
517
- type: "direct"
518
- });
519
- motionValue2.set(next);
520
- onFinish === null || onFinish === void 0 ? void 0 : onFinish();
521
- return;
522
- }
523
- MotionValueStrategy.set(motionValue2, config);
524
- if (onFinish) {
525
- var prior = PendingMotionOnFinish.get(motionValue2);
526
- if (prior) {
527
- PendingMotionOnFinish.delete(motionValue2);
528
- prior();
529
- }
530
- PendingMotionOnFinish.set(motionValue2, onFinish);
531
- }
532
- motionValue2.set(next);
533
- },
534
- stop() {
535
- motionValue2.stop();
536
- }
537
- };
538
- }, [motionValue2]);
539
- },
540
- useAnimatedNumberReaction(param, onValue) {
541
- var {
542
- value
543
- } = param;
544
- var instance = value.getInstance();
545
- useMotionValueEvent(instance, "change", onValue);
546
- },
547
- useAnimatedNumberStyle(val, getStyleProp) {
548
- var motionValue2 = val.getInstance();
549
- var getStyleRef = useRef(getStyleProp);
550
- getStyleRef.current = getStyleProp;
551
- return useMemo(function () {
552
- return {
553
- getStyle: function (cur) {
554
- return getStyleRef.current(cur);
555
- },
556
- motionValue: motionValue2
557
- };
558
- }, []);
559
- },
560
- useAnimatedNumbersStyle(vals, getStyleProp) {
561
- var motionValues = vals.map(function (v) {
562
- return v.getInstance();
563
- });
564
- var getStyleRef = useRef(getStyleProp);
565
- getStyleRef.current = getStyleProp;
566
- return useMemo(function () {
567
- return {
568
- getStyle: function () {
569
- for (var _len = arguments.length, currentValues = new Array(_len), _key = 0; _key < _len; _key++) {
570
- currentValues[_key] = arguments[_key];
571
- }
572
- return getStyleRef.current(...currentValues);
573
- },
574
- motionValues
575
- };
576
- }, []);
577
- }
578
- };
579
- function getMotionAnimatedProps(props, style, disable) {
580
- var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default",
581
- transitionOverride = arguments.length > 4 ? arguments[4] : void 0;
582
- if (disable) {
583
- return {
584
- dontAnimate: style
585
- };
586
- }
587
- var _ref;
588
- var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
589
- var dontAnimate;
590
- var doAnimate;
591
- var animateOnly = props.animateOnly;
592
- for (var key in style) {
593
- var value = style[key];
594
- if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
595
- dontAnimate || (dontAnimate = {});
596
- dontAnimate[key] = value;
597
- } else {
598
- doAnimate || (doAnimate = {});
599
- doAnimate[key] = value;
600
- }
601
- }
602
- return {
603
- dontAnimate,
604
- doAnimate,
605
- animationOptions
606
- };
607
- }
608
- function getAnimationOptions(transitionProp) {
609
- var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
610
- var normalized = normalizeTransition(transitionProp);
611
- var effectiveKey = getEffectiveAnimation(normalized, animationState);
612
- if (!effectiveKey && animationState === "default") {
613
- effectiveKey = normalized.enter || normalized.exit || null;
614
- }
615
- var globalConfigOverride = normalized.config ? {
616
- ...normalized.config
617
- } : void 0;
618
- if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
619
- return {};
620
- }
621
- var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
622
- var delay = normalized.delay;
623
- var result = {};
624
- if (defaultConfig) {
625
- Object.assign(result, defaultConfig);
626
- }
627
- if (globalConfigOverride) {
628
- Object.assign(result, globalConfigOverride);
629
- if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
630
- result.type = "tween";
631
- }
632
- }
633
- if (delay) {
634
- result.delay = delay;
635
- }
636
- if (defaultConfig || globalConfigOverride || delay) {
637
- result.default = {
638
- ...defaultConfig,
639
- ...globalConfigOverride,
640
- ...(delay ? {
641
- delay
642
- } : null)
643
- };
644
- }
645
- var _iteratorNormalCompletion = true,
646
- _didIteratorError = false,
647
- _iteratorError = void 0;
648
- try {
649
- for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
650
- var [propName, animationNameOrConfig] = _step.value;
651
- if (typeof animationNameOrConfig === "string") {
652
- result[propName] = withInferredType(animations[animationNameOrConfig]);
653
- } else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
654
- var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
655
- result[propName] = {
656
- ...baseConfig,
657
- ...animationNameOrConfig
658
- };
659
- }
660
- }
661
- } catch (err) {
662
- _didIteratorError = true;
663
- _iteratorError = err;
664
- } finally {
665
- try {
666
- if (!_iteratorNormalCompletion && _iterator.return != null) {
667
- _iterator.return();
668
- }
669
- } finally {
670
- if (_didIteratorError) {
671
- throw _iteratorError;
672
- }
673
- }
674
- }
675
- convertMsToS(result);
676
- convertMsToS(result.default);
677
- for (var key in result) {
678
- if (key !== "default" && _type_of(result[key]) === "object") {
679
- convertMsToS(result[key]);
680
- }
681
- }
682
- return result;
683
- }
64
+ var isHydratingGlobal;
65
+ var hydratingComponents = /* @__PURE__ */ new Set();
66
+ return {
67
+ View: MotionView,
68
+ Text: MotionText,
69
+ isReactNative: false,
70
+ inputStyle: "css",
71
+ outputStyle: "inline",
72
+ avoidReRenders: true,
73
+ animations,
74
+ usePresence,
75
+ ResetPresence,
76
+ onMount() {
77
+ isHydratingGlobal = false;
78
+ hydratingComponents.forEach(function(cb) {
79
+ return cb();
80
+ });
81
+ },
82
+ useAnimations: function(animationProps) {
83
+ if (isHydratingGlobal === void 0 && !getConfig().settings.disableSSR) {
84
+ isHydratingGlobal = true;
85
+ }
86
+ var { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps } = animationProps;
87
+ var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
88
+ var isComponentHydrating = componentState.unmounted === true;
89
+ var isMounting = componentState.unmounted === "should-enter";
90
+ var isEntering = !!componentState.unmounted;
91
+ var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
92
+ var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
93
+ var refs = useRef(null);
94
+ if (!refs.current) {
95
+ refs.current = {
96
+ isFirstRender: true,
97
+ lastDoAnimate: null,
98
+ lastDontAnimate: null,
99
+ controls: null,
100
+ lastAnimateAt: 0,
101
+ disposed: false,
102
+ wasExiting: false,
103
+ isExiting: false,
104
+ sendExitComplete: void 0,
105
+ animationState: "default",
106
+ frozenExitTarget: null,
107
+ exitCompleteScheduled: false,
108
+ enterCompleteScheduled: false,
109
+ disableAnimation: true,
110
+ wasEntering: false,
111
+ wasDisabled: false,
112
+ onTransition: void 0,
113
+ enterStarted: false,
114
+ exitStarted: false,
115
+ updateInFlight: false,
116
+ updateControls: null,
117
+ wasNoClass: !!styleProps.noClass
118
+ };
119
+ }
120
+ var emit = function(phase, cause, finished) {
121
+ var _refs_current_onTransition, _refs_current;
122
+ (_refs_current_onTransition = (_refs_current = refs.current).onTransition) === null || _refs_current_onTransition === void 0 ? void 0 : _refs_current_onTransition.call(_refs_current, phase === "end" ? {
123
+ phase,
124
+ cause,
125
+ finished
126
+ } : {
127
+ phase,
128
+ cause
129
+ });
130
+ };
131
+ var justFinishedEntering = refs.current.wasEntering && !isEntering;
132
+ useEffect(function() {
133
+ refs.current.wasEntering = isEntering;
134
+ });
135
+ var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
136
+ var disableAnimation = isComponentHydrating || isMounting || !animationKey;
137
+ var [scope] = useAnimateSSRSafe();
138
+ refs.current.isExiting = isExiting;
139
+ refs.current.sendExitComplete = sendExitComplete;
140
+ refs.current.animationState = animationState;
141
+ refs.current.disableAnimation = disableAnimation;
142
+ refs.current.onTransition = onTransition;
143
+ var justStartedExiting = isExiting && !refs.current.wasExiting;
144
+ var justStoppedExiting = !isExiting && refs.current.wasExiting;
145
+ if (justStartedExiting || justStoppedExiting) {
146
+ refs.current.frozenExitTarget = null;
147
+ refs.current.exitCompleteScheduled = false;
148
+ refs.current.enterCompleteScheduled = false;
149
+ }
150
+ useEffect(function() {
151
+ refs.current.wasExiting = isExiting;
152
+ });
153
+ useIsomorphicLayoutEffect(function() {
154
+ if (justStoppedExiting && refs.current.exitStarted) {
155
+ refs.current.exitStarted = false;
156
+ emit("end", "exit", false);
157
+ }
158
+ }, [justStoppedExiting]);
159
+ var { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
160
+ var [firstRenderStyle] = useState(style);
161
+ if (refs.current.isFirstRender) {
162
+ refs.current.lastDontAnimate = firstRenderStyle;
163
+ }
164
+ var [isHydrating, setIsHydrating] = useState(isHydratingGlobal);
165
+ useLayoutEffect(function() {
166
+ if (isHydratingGlobal) {
167
+ hydratingComponents.add(function() {
168
+ setIsHydrating(false);
169
+ });
170
+ }
171
+ return function() {
172
+ refs.current.disposed = true;
173
+ };
174
+ }, []);
175
+ var flushAnimation = function(param) {
176
+ var { doAnimate: doAnimateRaw = {}, animationOptions: passedOptions = {}, dontAnimate: dontAnimate2 } = param;
177
+ var startedControls = null;
178
+ var isCurrentlyExiting = refs.current.isExiting;
179
+ var currentSendExitComplete = refs.current.sendExitComplete;
180
+ var currentAnimationState = refs.current.animationState;
181
+ var doAnimate2 = doAnimateRaw;
182
+ if (isCurrentlyExiting && refs.current.frozenExitTarget) {
183
+ doAnimate2 = refs.current.frozenExitTarget;
184
+ }
185
+ var _props_transition;
186
+ var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
187
+ try {
188
+ var node = stateRef.current.host;
189
+ if (refs.current.isFirstRender) {
190
+ refs.current.lastDontAnimate = null;
191
+ refs.current.lastDoAnimate = null;
192
+ }
193
+ if (process.env.NODE_ENV === "development") {
194
+ if (props["debug"] && props["debug"] !== "profile") {
195
+ console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
196
+ console.info({
197
+ props,
198
+ componentState,
199
+ doAnimate: doAnimate2,
200
+ dontAnimate: dontAnimate2,
201
+ animationOptions: animationOptions2,
202
+ animationProps,
203
+ lastDoAnimate: { ...refs.current.lastDoAnimate },
204
+ lastDontAnimate: { ...refs.current.lastDontAnimate },
205
+ isExiting,
206
+ style,
207
+ node
208
+ });
209
+ console.groupCollapsed(`trace >`);
210
+ console.trace();
211
+ console.groupEnd();
212
+ console.groupEnd();
213
+ }
214
+ }
215
+ if (!_instanceof(node, HTMLElement)) {
216
+ return;
217
+ }
218
+ var prevDont = refs.current.lastDontAnimate;
219
+ if (dontAnimate2) {
220
+ if (prevDont) {
221
+ removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
222
+ var changed = getDiff(prevDont, dontAnimate2);
223
+ if (changed) {
224
+ assignInlineStyles(node, changed);
225
+ }
226
+ } else {
227
+ assignInlineStyles(node, dontAnimate2);
228
+ }
229
+ }
230
+ if (doAnimate2) {
231
+ if (prevDont) {
232
+ for (var key in prevDont) {
233
+ if (key in doAnimate2) {
234
+ node.style[key] = normalizeValueWithProperty(prevDont[key], key);
235
+ if (refs.current.lastDoAnimate) {
236
+ refs.current.lastDoAnimate[key] = prevDont[key];
237
+ }
238
+ }
239
+ }
240
+ }
241
+ var lastAnimated = refs.current.lastDoAnimate;
242
+ if (lastAnimated) {
243
+ removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
244
+ }
245
+ var diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
246
+ if (diff) {
247
+ if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
248
+ refs.current.frozenExitTarget = { ...doAnimate2 };
249
+ }
250
+ var isPopperPosition = node.hasAttribute("data-popper-animate-position");
251
+ var popperHandledTransform = false;
252
+ if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
253
+ var target = parseTranslate(diff.transform);
254
+ if (target) {
255
+ var entry = PopperPositionAnims.get(node);
256
+ if (!entry) {
257
+ var seed = target;
258
+ try {
259
+ var _parseTranslate;
260
+ seed = (_parseTranslate = parseTranslate(getComputedStyle(node).transform)) !== null && _parseTranslate !== void 0 ? _parseTranslate : target;
261
+ } catch (e) {}
262
+ var x = motionValue(seed.x);
263
+ var y = motionValue(seed.y);
264
+ var write = function() {
265
+ node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
266
+ };
267
+ x.on("change", write);
268
+ y.on("change", write);
269
+ entry = {
270
+ x,
271
+ y,
272
+ stop: null
273
+ };
274
+ PopperPositionAnims.set(node, entry);
275
+ }
276
+ if (!entry.stop) {
277
+ try {
278
+ var live = parseTranslate(getComputedStyle(node).transform);
279
+ if (live) {
280
+ entry.x.jump(live.x);
281
+ entry.y.jump(live.y);
282
+ }
283
+ } catch (e) {}
284
+ }
285
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
286
+ try {
287
+ for (var _iterator = node.getAnimations()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
288
+ var anim = _step.value;
289
+ try {
290
+ var _anim_effect_getKeyframes, _anim_effect;
291
+ var kf = (_anim_effect = anim.effect) === null || _anim_effect === void 0 ? void 0 : (_anim_effect_getKeyframes = _anim_effect.getKeyframes) === null || _anim_effect_getKeyframes === void 0 ? void 0 : _anim_effect_getKeyframes.call(_anim_effect);
292
+ if (kf === null || kf === void 0 ? void 0 : kf.some(function(k) {
293
+ return "transform" in k;
294
+ })) {
295
+ anim.cancel();
296
+ }
297
+ } catch (e) {}
298
+ }
299
+ } catch (err) {
300
+ _didIteratorError = true;
301
+ _iteratorError = err;
302
+ } finally {
303
+ try {
304
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
305
+ _iterator.return();
306
+ }
307
+ } finally {
308
+ if (_didIteratorError) {
309
+ throw _iteratorError;
310
+ }
311
+ }
312
+ }
313
+ var opts = animationOptions2;
314
+ var _opts_transform, _ref;
315
+ var positionTransition = (_ref = (_opts_transform = opts.transform) !== null && _opts_transform !== void 0 ? _opts_transform : opts.default) !== null && _ref !== void 0 ? _ref : animationOptions2;
316
+ var cx = animate(entry.x, target.x, positionTransition);
317
+ var cy = animate(entry.y, target.y, positionTransition);
318
+ entry.stop = function() {
319
+ cx.stop();
320
+ cy.stop();
321
+ };
322
+ popperHandledTransform = true;
323
+ }
324
+ }
325
+ if (isCurrentlyExiting) {
326
+ var entry1 = PopperPositionAnims.get(node);
327
+ if (entry1 === null || entry1 === void 0 ? void 0 : entry1.stop) {
328
+ entry1.stop();
329
+ entry1.stop = null;
330
+ }
331
+ }
332
+ var midFlightValues = null;
333
+ if (refs.current.controls) {
334
+ try {
335
+ var computed = getComputedStyle(node);
336
+ midFlightValues = {};
337
+ for (var key1 in diff) {
338
+ var val = computed[key1];
339
+ if (val !== void 0 && val !== "") {
340
+ midFlightValues[key1] = val;
341
+ }
342
+ }
343
+ } catch (e) {}
344
+ if (isCurrentlyExiting) {
345
+ refs.current.controls.stop();
346
+ }
347
+ if (midFlightValues) {
348
+ for (var key2 in midFlightValues) {
349
+ if (key2 === "transform" && popperHandledTransform) continue;
350
+ node.style[key2] = midFlightValues[key2];
351
+ }
352
+ }
353
+ if (isPopperPosition && !popperHandledTransform) {
354
+ var anims = node.getAnimations();
355
+ var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
356
+ try {
357
+ for (var _iterator1 = anims[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
358
+ var anim1 = _step1.value;
359
+ anim1.cancel();
360
+ }
361
+ } catch (err) {
362
+ _didIteratorError1 = true;
363
+ _iteratorError1 = err;
364
+ } finally {
365
+ try {
366
+ if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
367
+ _iterator1.return();
368
+ }
369
+ } finally {
370
+ if (_didIteratorError1) {
371
+ throw _iteratorError1;
372
+ }
373
+ }
374
+ }
375
+ }
376
+ }
377
+ var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
378
+ var waapiDiff = Object.fromEntries(Object.entries(fixedDiff).map(function(param2) {
379
+ var [key3, value] = param2;
380
+ return [key3, Array.isArray(value) ? value.map(function(item) {
381
+ return normalizeValueWithProperty(item, key3);
382
+ }) : normalizeValueWithProperty(value, key3)];
383
+ }));
384
+ if (popperHandledTransform && "transform" in waapiDiff) {
385
+ waapiDiff = { ...waapiDiff };
386
+ delete waapiDiff.transform;
387
+ }
388
+ if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && waapiDiff.transform) {
389
+ waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
390
+ }
391
+ if (Object.keys(waapiDiff).length > 0) {
392
+ startedControls = animate(node, waapiDiff, animationOptions2);
393
+ refs.current.controls = startedControls;
394
+ }
395
+ refs.current.lastAnimateAt = Date.now();
396
+ }
397
+ }
398
+ refs.current.lastDontAnimate = dontAnimate2 ? { ...dontAnimate2 } : {};
399
+ refs.current.lastDoAnimate = doAnimate2 ? { ...doAnimate2 } : {};
400
+ } finally {
401
+ if (isCurrentlyExiting && currentSendExitComplete) {
402
+ if (refs.current.enterStarted) {
403
+ refs.current.enterStarted = false;
404
+ emit("end", "enter", false);
405
+ }
406
+ if (startedControls) {
407
+ if (!refs.current.exitStarted) {
408
+ refs.current.exitStarted = true;
409
+ emit("start", "exit");
410
+ }
411
+ refs.current.exitCompleteScheduled = true;
412
+ var complete = function(finished) {
413
+ if (!refs.current.isExiting) return;
414
+ if (refs.current.exitStarted) {
415
+ refs.current.exitStarted = false;
416
+ emit("end", "exit", finished);
417
+ }
418
+ currentSendExitComplete();
419
+ };
420
+ startedControls.finished.then(function() {
421
+ return complete(true);
422
+ }).catch(function() {
423
+ return complete(false);
424
+ });
425
+ } else if (!refs.current.exitCompleteScheduled) {
426
+ emit("start", "exit");
427
+ emit("end", "exit", true);
428
+ currentSendExitComplete();
429
+ }
430
+ } else if (currentAnimationState === "enter") {
431
+ if (startedControls) {
432
+ if (!refs.current.enterStarted) {
433
+ refs.current.enterStarted = true;
434
+ emit("start", "enter");
435
+ }
436
+ refs.current.enterCompleteScheduled = true;
437
+ var complete1 = function(finished) {
438
+ if (refs.current.disposed || refs.current.animationState !== "enter") return;
439
+ if (refs.current.enterStarted) {
440
+ refs.current.enterStarted = false;
441
+ emit("end", "enter", finished);
442
+ }
443
+ };
444
+ startedControls.finished.then(function() {
445
+ return complete1(true);
446
+ }).catch(function() {
447
+ return complete1(false);
448
+ });
449
+ } else if (!refs.current.enterCompleteScheduled && !refs.current.disableAnimation) {
450
+ emit("start", "enter");
451
+ emit("end", "enter", true);
452
+ }
453
+ } else if (startedControls) {
454
+ var controls = startedControls;
455
+ if (refs.current.updateInFlight) {
456
+ emit("end", "update", false);
457
+ }
458
+ refs.current.updateInFlight = true;
459
+ refs.current.updateControls = controls;
460
+ emit("start", "update");
461
+ var settle = function(finished) {
462
+ if (refs.current.updateControls !== controls) return;
463
+ refs.current.updateInFlight = false;
464
+ refs.current.updateControls = null;
465
+ emit("end", "update", finished);
466
+ };
467
+ controls.finished.then(function() {
468
+ return settle(true);
469
+ }).catch(function() {
470
+ return settle(false);
471
+ });
472
+ }
473
+ }
474
+ };
475
+ useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, effectiveTransition) {
476
+ var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
477
+ flushAnimation(_$animationProps);
478
+ });
479
+ useIsomorphicLayoutEffect(function() {
480
+ if (refs.current.isFirstRender) {
481
+ refs.current.isFirstRender = false;
482
+ refs.current.wasDisabled = disableAnimation;
483
+ if (isHydrating) {
484
+ if (doAnimate && Object.keys(doAnimate).length > 0) {
485
+ refs.current.lastDoAnimate = { ...doAnimate };
486
+ } else {
487
+ refs.current.lastDoAnimate = dontAnimate ? { ...dontAnimate } : {};
488
+ }
489
+ refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
490
+ refs.current.lastAnimateAt = Date.now();
491
+ return;
492
+ }
493
+ refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
494
+ refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
495
+ return;
496
+ }
497
+ var justEnabled = refs.current.wasDisabled && !disableAnimation;
498
+ refs.current.wasDisabled = disableAnimation;
499
+ var justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
500
+ refs.current.wasNoClass = !!styleProps.noClass;
501
+ if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
502
+ var node = stateRef.current.host;
503
+ if (_instanceof(node, HTMLElement)) {
504
+ if (dontAnimate) assignInlineStyles(node, dontAnimate);
505
+ if (doAnimate) assignInlineStyles(node, doAnimate);
506
+ var entry = PopperPositionAnims.get(node);
507
+ if (entry) {
508
+ var _doAnimate_transform;
509
+ var target = parseTranslate((_doAnimate_transform = doAnimate === null || doAnimate === void 0 ? void 0 : doAnimate.transform) !== null && _doAnimate_transform !== void 0 ? _doAnimate_transform : dontAnimate === null || dontAnimate === void 0 ? void 0 : dontAnimate.transform);
510
+ if (target) {
511
+ var _entry_stop;
512
+ (_entry_stop = entry.stop) === null || _entry_stop === void 0 ? void 0 : _entry_stop.call(entry);
513
+ entry.stop = null;
514
+ entry.x.jump(target.x);
515
+ entry.y.jump(target.y);
516
+ }
517
+ }
518
+ }
519
+ refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
520
+ refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
521
+ return;
522
+ }
523
+ flushAnimation({
524
+ doAnimate,
525
+ dontAnimate,
526
+ animationOptions
527
+ });
528
+ }, [
529
+ style,
530
+ isExiting,
531
+ disableAnimation,
532
+ styleProps.noClass
533
+ ]);
534
+ if (process.env.NODE_ENV === "development") {
535
+ if (props["debug"] && props["debug"] !== "profile") {
536
+ console.groupCollapsed(`[motion] render`);
537
+ console.info({
538
+ style,
539
+ doAnimate,
540
+ dontAnimate,
541
+ scope,
542
+ animationOptions,
543
+ isExiting,
544
+ isFirstRender: refs.current.isFirstRender,
545
+ animationProps
546
+ });
547
+ console.groupEnd();
548
+ }
549
+ }
550
+ return {
551
+ style: firstRenderStyle,
552
+ ref: scope,
553
+ render: "div"
554
+ };
555
+ },
556
+ useAnimatedNumber(initial) {
557
+ var motionValue2 = useMotionValue(initial);
558
+ return React.useMemo(function() {
559
+ return {
560
+ getInstance() {
561
+ return motionValue2;
562
+ },
563
+ getValue() {
564
+ return motionValue2.get();
565
+ },
566
+ setValue(next) {
567
+ var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { type: "spring" }, onFinish = arguments.length > 2 ? arguments[2] : void 0;
568
+ if (config.type === "direct") {
569
+ MotionValueStrategy.set(motionValue2, { type: "direct" });
570
+ motionValue2.set(next);
571
+ onFinish === null || onFinish === void 0 ? void 0 : onFinish();
572
+ return;
573
+ }
574
+ MotionValueStrategy.set(motionValue2, config);
575
+ if (onFinish) {
576
+ var prior = PendingMotionOnFinish.get(motionValue2);
577
+ if (prior) {
578
+ PendingMotionOnFinish.delete(motionValue2);
579
+ prior();
580
+ }
581
+ PendingMotionOnFinish.set(motionValue2, onFinish);
582
+ }
583
+ motionValue2.set(next);
584
+ },
585
+ stop() {
586
+ motionValue2.stop();
587
+ }
588
+ };
589
+ }, [motionValue2]);
590
+ },
591
+ useAnimatedNumberReaction(param, onValue) {
592
+ var { value } = param;
593
+ var instance = value.getInstance();
594
+ useMotionValueEvent(instance, "change", onValue);
595
+ },
596
+ useAnimatedNumberStyle(val, getStyleProp) {
597
+ var motionValue2 = val.getInstance();
598
+ var getStyleRef = useRef(getStyleProp);
599
+ getStyleRef.current = getStyleProp;
600
+ return useMemo(function() {
601
+ return {
602
+ getStyle: function(cur) {
603
+ return getStyleRef.current(cur);
604
+ },
605
+ motionValue: motionValue2
606
+ };
607
+ }, []);
608
+ },
609
+ useAnimatedNumbersStyle(vals, getStyleProp) {
610
+ var motionValues = vals.map(function(v) {
611
+ return v.getInstance();
612
+ });
613
+ var getStyleRef = useRef(getStyleProp);
614
+ getStyleRef.current = getStyleProp;
615
+ return useMemo(function() {
616
+ return {
617
+ getStyle: function() {
618
+ for (var _len = arguments.length, currentValues = new Array(_len), _key = 0; _key < _len; _key++) {
619
+ currentValues[_key] = arguments[_key];
620
+ }
621
+ return getStyleRef.current(...currentValues);
622
+ },
623
+ motionValues
624
+ };
625
+ }, []);
626
+ }
627
+ };
628
+ function getMotionAnimatedProps(props, style, disable) {
629
+ var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default", transitionOverride = arguments.length > 4 ? arguments[4] : void 0;
630
+ if (disable) {
631
+ return { dontAnimate: style };
632
+ }
633
+ var _ref;
634
+ var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
635
+ var dontAnimate;
636
+ var doAnimate;
637
+ var animateOnly = props.animateOnly;
638
+ for (var key in style) {
639
+ var value = style[key];
640
+ if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
641
+ dontAnimate || (dontAnimate = {});
642
+ dontAnimate[key] = value;
643
+ } else {
644
+ doAnimate || (doAnimate = {});
645
+ doAnimate[key] = value;
646
+ }
647
+ }
648
+ return {
649
+ dontAnimate,
650
+ doAnimate,
651
+ animationOptions
652
+ };
653
+ }
654
+ function getAnimationOptions(transitionProp) {
655
+ var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
656
+ var normalized = normalizeTransition(transitionProp);
657
+ var effectiveKey = getEffectiveAnimation(normalized, animationState);
658
+ if (!effectiveKey && animationState === "default") {
659
+ effectiveKey = normalized.enter || normalized.exit || null;
660
+ }
661
+ var globalConfigOverride = normalized.config ? { ...normalized.config } : void 0;
662
+ if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
663
+ return {};
664
+ }
665
+ var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
666
+ var delay = normalized.delay;
667
+ var result = {};
668
+ if (defaultConfig) {
669
+ Object.assign(result, defaultConfig);
670
+ }
671
+ if (globalConfigOverride) {
672
+ Object.assign(result, globalConfigOverride);
673
+ if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
674
+ result.type = "tween";
675
+ }
676
+ }
677
+ if (delay) {
678
+ result.delay = delay;
679
+ }
680
+ if (defaultConfig || globalConfigOverride || delay) {
681
+ result.default = {
682
+ ...defaultConfig,
683
+ ...globalConfigOverride,
684
+ ...delay ? { delay } : null
685
+ };
686
+ }
687
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
688
+ try {
689
+ for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
690
+ var [propName, animationNameOrConfig] = _step.value;
691
+ if (typeof animationNameOrConfig === "string") {
692
+ result[propName] = withInferredType(animations[animationNameOrConfig]);
693
+ } else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
694
+ var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
695
+ result[propName] = {
696
+ ...baseConfig,
697
+ ...animationNameOrConfig
698
+ };
699
+ }
700
+ }
701
+ } catch (err) {
702
+ _didIteratorError = true;
703
+ _iteratorError = err;
704
+ } finally {
705
+ try {
706
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
707
+ _iterator.return();
708
+ }
709
+ } finally {
710
+ if (_didIteratorError) {
711
+ throw _iteratorError;
712
+ }
713
+ }
714
+ }
715
+ convertMsToS(result);
716
+ convertMsToS(result.default);
717
+ for (var key in result) {
718
+ if (key !== "default" && _type_of(result[key]) === "object") {
719
+ convertMsToS(result[key]);
720
+ }
721
+ }
722
+ return result;
723
+ }
684
724
  }
685
725
  function withInferredType(config) {
686
- if (!config) {
687
- return {
688
- type: "spring"
689
- };
690
- }
691
- var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
692
- return {
693
- type: isTimingBased ? "tween" : "spring",
694
- ...config
695
- };
726
+ if (!config) {
727
+ return { type: "spring" };
728
+ }
729
+ var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
730
+ return {
731
+ type: isTimingBased ? "tween" : "spring",
732
+ ...config
733
+ };
696
734
  }
697
735
  function convertMsToS(config) {
698
- if (!config) return;
699
- if (typeof config.delay === "number") config.delay = config.delay / 1e3;
700
- if (typeof config.duration === "number") {
701
- var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
702
- if (isTimingBased) {
703
- config.duration = config.duration / 1e3;
704
- }
705
- }
736
+ if (!config) return;
737
+ if (typeof config.delay === "number") config.delay = config.delay / 1e3;
738
+ if (typeof config.duration === "number") {
739
+ var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
740
+ if (isTimingBased) {
741
+ config.duration = config.duration / 1e3;
742
+ }
743
+ }
706
744
  }
707
745
  function removeRemovedStyles(prev, next, node, dontClearIfIn) {
708
- for (var key in prev) {
709
- if (!(key in next)) {
710
- if (dontClearIfIn && key in dontClearIfIn) {
711
- continue;
712
- }
713
- node.style[key] = "";
714
- }
715
- }
746
+ for (var key in prev) {
747
+ if (!(key in next)) {
748
+ if (dontClearIfIn && key in dontClearIfIn) {
749
+ continue;
750
+ }
751
+ node.style[key] = "";
752
+ }
753
+ }
754
+ }
755
+ var disableAnimationProps = /* @__PURE__ */ new Set([
756
+ "alignContent",
757
+ "alignItems",
758
+ "boxSizing",
759
+ "contain",
760
+ "containerType",
761
+ "display",
762
+ "flexBasis",
763
+ "flexDirection",
764
+ "fontFamily",
765
+ "justifyContent",
766
+ "overflow",
767
+ "overflowX",
768
+ "overflowY",
769
+ "pointerEvents",
770
+ "position",
771
+ "textWrap",
772
+ "userSelect"
773
+ ]);
774
+ function motionPropsEqual(a, b) {
775
+ for (var key in a) {
776
+ if (!(key in b)) return false;
777
+ }
778
+ for (var key1 in b) {
779
+ if (key1 === "children") continue;
780
+ var av = a[key1];
781
+ var bv = b[key1];
782
+ if (typeof bv === "function" && typeof av === "function") continue;
783
+ if (!Object.is(av, bv)) return false;
784
+ }
785
+ return true;
786
+ }
787
+ function motionStylesEqual(a, b) {
788
+ if (a.length !== b.length) return false;
789
+ for (var i = 0; i < a.length; i++) {
790
+ var sa = a[i];
791
+ var sb = b[i];
792
+ if (sa === sb) continue;
793
+ if (!sa || !sb) return false;
794
+ var aCount = 0;
795
+ for (var key in sa) {
796
+ aCount++;
797
+ if (!Object.is(sa[key], sb[key])) return false;
798
+ }
799
+ var bCount = 0;
800
+ for (var _key in sb) {
801
+ bCount++;
802
+ }
803
+ if (aCount !== bCount) return false;
804
+ }
805
+ return true;
716
806
  }
717
- var disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
718
807
  var MotionView = createMotionView("div");
719
808
  var MotionText = createMotionView("span");
809
+ var transformAliases = {
810
+ x: "translateX",
811
+ y: "translateY",
812
+ scale: "scale",
813
+ scaleX: "scaleX",
814
+ scaleY: "scaleY",
815
+ rotate: "rotate",
816
+ rotateX: "rotateX",
817
+ rotateY: "rotateY",
818
+ rotateZ: "rotateZ",
819
+ skewX: "skewX",
820
+ skewY: "skewY"
821
+ };
822
+ function compileAnimatedStyle(initialSource, initialResolved) {
823
+ var shorthands = getConfig().shorthands;
824
+ var entries = Object.keys(initialSource).map(function(source) {
825
+ var _shorthands_source, _shorthands_source1, _shorthands_source2;
826
+ return {
827
+ source,
828
+ target: (_shorthands_source = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source !== void 0 ? _shorthands_source : source,
829
+ tokenValue: typeof initialSource[source] === "string" && initialResolved[(_shorthands_source1 = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source1 !== void 0 ? _shorthands_source1 : source] !== initialSource[source] ? initialResolved[(_shorthands_source2 = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source2 !== void 0 ? _shorthands_source2 : source] : void 0
830
+ };
831
+ });
832
+ return function(sourceStyle) {
833
+ var resolved = {};
834
+ var transforms = [];
835
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
836
+ try {
837
+ for (var _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
838
+ var entry = _step.value;
839
+ var value = sourceStyle[entry.source];
840
+ if (value === void 0) continue;
841
+ if (entry.source === "transform" && Array.isArray(value)) {
842
+ resolved.transform = transformsToString(value);
843
+ } else if (entry.source in transformAliases) {
844
+ transforms.push({ [transformAliases[entry.source]]: value });
845
+ } else {
846
+ var _entry_tokenValue;
847
+ resolved[entry.target] = (_entry_tokenValue = entry.tokenValue) !== null && _entry_tokenValue !== void 0 ? _entry_tokenValue : normalizeValueWithProperty(value, entry.target);
848
+ }
849
+ }
850
+ } catch (err) {
851
+ _didIteratorError = true;
852
+ _iteratorError = err;
853
+ } finally {
854
+ try {
855
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
856
+ _iterator.return();
857
+ }
858
+ } finally {
859
+ if (_didIteratorError) {
860
+ throw _iteratorError;
861
+ }
862
+ }
863
+ }
864
+ if (transforms.length) resolved.transform = transformsToString(transforms);
865
+ return resolved;
866
+ };
867
+ }
720
868
  function createMotionView(defaultTag) {
721
- var isText = defaultTag === "span";
722
- var Component = /* @__PURE__ */forwardRef(function (propsIn, ref) {
723
- var _hooks_usePropsTransform;
724
- var {
725
- forwardedRef,
726
- animation,
727
- render = defaultTag,
728
- style,
729
- ...propsRest
730
- } = propsIn;
731
- var [scope, animate] = useAnimateSSRSafe();
732
- var hostRef = useRef(null);
733
- var seededNode = useRef(null);
734
- var seededInCurrentFrame = useRef(false);
735
- var queuedAnimationFrames = useRef(/* @__PURE__ */new WeakMap());
736
- var composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope);
737
- var stateRef = useRef(null);
738
- if (!stateRef.current) {
739
- stateRef.current = {
740
- get host() {
741
- return hostRef.current;
742
- }
743
- };
744
- }
745
- var [_, state] = useThemeWithState({});
746
- var styles = Array.isArray(style) ? style : [style];
747
- var [animatedStyle, nonAnimatedStyles] = function () {
748
- var animatedStyle2;
749
- var nonAnimatedStyles2 = [];
750
- var _iteratorNormalCompletion = true,
751
- _didIteratorError = false,
752
- _iteratorError = void 0;
753
- try {
754
- for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
755
- var style2 = _step.value;
756
- if (style2.getStyle) {
757
- animatedStyle2 = style2;
758
- } else {
759
- nonAnimatedStyles2.push(style2);
760
- }
761
- }
762
- } catch (err) {
763
- _didIteratorError = true;
764
- _iteratorError = err;
765
- } finally {
766
- try {
767
- if (!_iteratorNormalCompletion && _iterator.return != null) {
768
- _iterator.return();
769
- }
770
- } finally {
771
- if (_didIteratorError) {
772
- throw _iteratorError;
773
- }
774
- }
775
- }
776
- return [animatedStyle2, nonAnimatedStyles2];
777
- }();
778
- function getProps(props2) {
779
- var out = getSplitStyles(props2, isText ? Text.staticConfig : View.staticConfig, state === null || state === void 0 ? void 0 : state.theme, state === null || state === void 0 ? void 0 : state.name, {
780
- unmounted: false
781
- }, {
782
- isAnimated: false,
783
- noClass: true,
784
- resolveValues: "auto"
785
- });
786
- if (!out) {
787
- return {};
788
- }
789
- if (out.viewProps.style) {
790
- fixStyles(out.viewProps.style);
791
- styleToCSS(out.viewProps.style);
792
- }
793
- return out.viewProps;
794
- }
795
- var props = getProps({
796
- ...propsRest,
797
- style: nonAnimatedStyles
798
- });
799
- var Element = render || "div";
800
- var transformedProps = (_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, render, props, stateRef, false);
801
- useIsomorphicLayoutEffect(function () {
802
- if (!animatedStyle) return;
803
- var node = hostRef.current;
804
- if (_instanceof(node, HTMLElement) && seededNode.current !== node) {
805
- var currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map(function (value) {
806
- return value.get();
807
- })) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
808
- var webStyle = currentStyle && getProps({
809
- style: currentStyle
810
- }).style;
811
- if (webStyle) {
812
- Object.assign(node.style, webStyle);
813
- seededNode.current = node;
814
- seededInCurrentFrame.current = true;
815
- requestAnimationFrame(function () {
816
- if (seededNode.current === node) {
817
- seededInCurrentFrame.current = false;
818
- }
819
- });
820
- }
821
- }
822
- var toTransition = function (animationConfig) {
823
- return (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
824
- type: "tween",
825
- duration: ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) || 0) / 1e3
826
- } : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
827
- type: "tween",
828
- duration: 0
829
- } : {
830
- type: "spring",
831
- ...animationConfig
832
- };
833
- };
834
- var animateNodeTo = function (nextStyle, transition, mv) {
835
- if (!_instanceof(node, HTMLElement) || hostRef.current !== node) return;
836
- var webStyle2 = getProps({
837
- style: nextStyle
838
- }).style;
839
- if (!webStyle2) return;
840
- settlePendingMotionOnFinish(mv, animate(node, webStyle2, transition));
841
- };
842
- var animateChangedValue = function (nextStyle, transition, mv) {
843
- if (seededInCurrentFrame.current && seededNode.current === node) {
844
- var queuedFrame = queuedAnimationFrames.current.get(mv);
845
- if (queuedFrame !== void 0) {
846
- cancelAnimationFrame(queuedFrame);
847
- }
848
- var frame = requestAnimationFrame(function () {
849
- if (queuedAnimationFrames.current.get(mv) !== frame) return;
850
- queuedAnimationFrames.current.delete(mv);
851
- if (hostRef.current === node) {
852
- animateNodeTo(nextStyle, transition, mv);
853
- } else {
854
- var onFinish = PendingMotionOnFinish.get(mv);
855
- PendingMotionOnFinish.delete(mv);
856
- onFinish === null || onFinish === void 0 ? void 0 : onFinish();
857
- }
858
- });
859
- queuedAnimationFrames.current.set(mv, frame);
860
- return;
861
- }
862
- animateNodeTo(nextStyle, transition, mv);
863
- };
864
- if (animatedStyle.motionValues) {
865
- var mvs = animatedStyle.motionValues;
866
- var styleForAll = function () {
867
- return animatedStyle.getStyle(...mvs.map(function (v) {
868
- return v.get();
869
- }));
870
- };
871
- var unsubs = mvs.map(function (mv) {
872
- return mv.on("change", function () {
873
- return animateChangedValue(styleForAll(), toTransition(MotionValueStrategy.get(mv)), mv);
874
- });
875
- });
876
- return function () {
877
- return unsubs.forEach(function (fn) {
878
- return fn();
879
- });
880
- };
881
- }
882
- var motionValue2 = animatedStyle.motionValue;
883
- if (!motionValue2) return;
884
- return motionValue2.on("change", function (value) {
885
- return animateChangedValue(animatedStyle.getStyle(value), toTransition(MotionValueStrategy.get(motionValue2)), motionValue2);
886
- });
887
- }, [animatedStyle]);
888
- return /* @__PURE__ */_jsx(Element, {
889
- ...transformedProps,
890
- ref: composedRefs
891
- });
892
- });
893
- Component["acceptRenderProp"] = true;
894
- return Component;
869
+ var isText = defaultTag === "span";
870
+ var Component = createRefComponent(function(propsIn, ref) {
871
+ var _hooks_usePropsTransform;
872
+ var { forwardedRef, animation, render = defaultTag, style, ...propsRest } = propsIn;
873
+ var [scope, animate] = useAnimateSSRSafe();
874
+ var hostRef = useRef(null);
875
+ var seededNode = useRef(null);
876
+ var seededInCurrentFrame = useRef(false);
877
+ var queuedAnimationFrames = useRef(/* @__PURE__ */ new WeakMap());
878
+ var composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope);
879
+ var stateRef = useRef(null);
880
+ if (!stateRef.current) {
881
+ stateRef.current = { get host() {
882
+ return hostRef.current;
883
+ } };
884
+ }
885
+ var [_, state] = useThemeWithState({});
886
+ var styles = Array.isArray(style) ? style : [style];
887
+ var [animatedStyle, nonAnimatedStyles] = (function() {
888
+ var animatedStyle2;
889
+ var nonAnimatedStyles2 = [];
890
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
891
+ try {
892
+ for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
893
+ var style2 = _step.value;
894
+ if (style2.getStyle) {
895
+ animatedStyle2 = style2;
896
+ } else {
897
+ nonAnimatedStyles2.push(style2);
898
+ }
899
+ }
900
+ } catch (err) {
901
+ _didIteratorError = true;
902
+ _iteratorError = err;
903
+ } finally {
904
+ try {
905
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
906
+ _iterator.return();
907
+ }
908
+ } finally {
909
+ if (_didIteratorError) {
910
+ throw _iteratorError;
911
+ }
912
+ }
913
+ }
914
+ return [animatedStyle2, nonAnimatedStyles2];
915
+ })();
916
+ function getProps(props2) {
917
+ if (process.env.NODE_ENV === "development" && propsIn.debug === "profile" && typeof performance !== "undefined") {
918
+ performance.mark("tamagui-motion-style-split");
919
+ }
920
+ var out = getSplitStyles(props2, isText ? Text.staticConfig : View.staticConfig, state === null || state === void 0 ? void 0 : state.theme, state === null || state === void 0 ? void 0 : state.name, { unmounted: false }, {
921
+ isAnimated: false,
922
+ noClass: true,
923
+ resolveValues: "auto"
924
+ });
925
+ if (!out) {
926
+ return {};
927
+ }
928
+ if (out.viewProps.style) {
929
+ fixStyles(out.viewProps.style);
930
+ styleToCSS(out.viewProps.style);
931
+ }
932
+ return out.viewProps;
933
+ }
934
+ var resolvedAnimatedStyle = useMemo(function() {
935
+ if (!animatedStyle) return null;
936
+ var currentValues = animatedStyle.motionValues ? animatedStyle.motionValues.map(function(value) {
937
+ return value.get();
938
+ }) : animatedStyle.motionValue ? [animatedStyle.motionValue.get()] : [];
939
+ var initialSource = animatedStyle.getStyle(...currentValues);
940
+ var initialResolved = asStyleRecord(getProps({ style: initialSource }).style);
941
+ return {
942
+ initial: initialResolved,
943
+ resolve: compileAnimatedStyle(initialSource, initialResolved)
944
+ };
945
+ }, [
946
+ animatedStyle,
947
+ state === null || state === void 0 ? void 0 : state.theme,
948
+ state === null || state === void 0 ? void 0 : state.name
949
+ ]);
950
+ var memoRef = useRef(null);
951
+ var props;
952
+ var cached = memoRef.current;
953
+ if (cached && cached.theme === (state === null || state === void 0 ? void 0 : state.theme) && cached.themeName === (state === null || state === void 0 ? void 0 : state.name) && motionStylesEqual(cached.styles, nonAnimatedStyles) && motionPropsEqual(cached.propsRest, propsRest)) {
954
+ props = { ...cached.result };
955
+ for (var key in propsRest) {
956
+ var val = propsRest[key];
957
+ if (key === "children" || typeof val === "function") {
958
+ props[key] = val;
959
+ }
960
+ }
961
+ } else {
962
+ props = getProps({
963
+ ...propsRest,
964
+ style: nonAnimatedStyles
965
+ });
966
+ memoRef.current = {
967
+ propsRest,
968
+ styles: nonAnimatedStyles,
969
+ theme: state === null || state === void 0 ? void 0 : state.theme,
970
+ themeName: state === null || state === void 0 ? void 0 : state.name,
971
+ result: props
972
+ };
973
+ }
974
+ if (resolvedAnimatedStyle) {
975
+ props = {
976
+ ...props,
977
+ style: {
978
+ ...asStyleRecord(props.style),
979
+ ...resolvedAnimatedStyle.initial
980
+ }
981
+ };
982
+ }
983
+ var Element = render || "div";
984
+ var transformedProps = (_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, render, props, stateRef, false);
985
+ useIsomorphicLayoutEffect(function() {
986
+ if (!animatedStyle) return;
987
+ var node = hostRef.current;
988
+ if (_instanceof(node, HTMLElement) && seededNode.current !== node) {
989
+ var currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map(function(value) {
990
+ return value.get();
991
+ })) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
992
+ var webStyle = currentStyle && (resolvedAnimatedStyle === null || resolvedAnimatedStyle === void 0 ? void 0 : resolvedAnimatedStyle.resolve(currentStyle));
993
+ if (webStyle) {
994
+ assignInlineStyles(node, webStyle);
995
+ seededNode.current = node;
996
+ seededInCurrentFrame.current = true;
997
+ requestAnimationFrame(function() {
998
+ if (seededNode.current === node) seededInCurrentFrame.current = false;
999
+ });
1000
+ }
1001
+ }
1002
+ var toTransition = function(animationConfig) {
1003
+ return (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
1004
+ type: "tween",
1005
+ duration: (animationConfig.duration || 0) / 1e3
1006
+ } : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
1007
+ type: "tween",
1008
+ duration: 0
1009
+ } : {
1010
+ type: "spring",
1011
+ ...animationConfig
1012
+ };
1013
+ };
1014
+ var animateNodeTo = function(nextStyle, transition, motionValue3) {
1015
+ if (!_instanceof(node, HTMLElement) || hostRef.current !== node) return;
1016
+ var webStyle2 = resolvedAnimatedStyle === null || resolvedAnimatedStyle === void 0 ? void 0 : resolvedAnimatedStyle.resolve(nextStyle);
1017
+ if (!webStyle2) return;
1018
+ settlePendingMotionOnFinish(motionValue3, animate(node, webStyle2, transition));
1019
+ };
1020
+ var animateChangedValue = function(nextStyle, transition, motionValue3) {
1021
+ if (seededInCurrentFrame.current && seededNode.current === node) {
1022
+ var queuedFrame = queuedAnimationFrames.current.get(motionValue3);
1023
+ if (queuedFrame !== void 0) cancelAnimationFrame(queuedFrame);
1024
+ var frame = requestAnimationFrame(function() {
1025
+ if (queuedAnimationFrames.current.get(motionValue3) !== frame) return;
1026
+ queuedAnimationFrames.current.delete(motionValue3);
1027
+ if (hostRef.current === node) {
1028
+ animateNodeTo(nextStyle, transition, motionValue3);
1029
+ } else {
1030
+ var onFinish = PendingMotionOnFinish.get(motionValue3);
1031
+ PendingMotionOnFinish.delete(motionValue3);
1032
+ onFinish === null || onFinish === void 0 ? void 0 : onFinish();
1033
+ }
1034
+ });
1035
+ queuedAnimationFrames.current.set(motionValue3, frame);
1036
+ return;
1037
+ }
1038
+ animateNodeTo(nextStyle, transition, motionValue3);
1039
+ };
1040
+ if (animatedStyle.motionValues) {
1041
+ var mvs = animatedStyle.motionValues;
1042
+ var styleForAll = function() {
1043
+ return animatedStyle.getStyle(...mvs.map(function(value) {
1044
+ return value.get();
1045
+ }));
1046
+ };
1047
+ var unsubs = mvs.map(function(mv) {
1048
+ return mv.on("change", function() {
1049
+ return animateChangedValue(styleForAll(), toTransition(MotionValueStrategy.get(mv)), mv);
1050
+ });
1051
+ });
1052
+ return function() {
1053
+ return unsubs.forEach(function(fn) {
1054
+ return fn();
1055
+ });
1056
+ };
1057
+ }
1058
+ var motionValue2 = animatedStyle.motionValue;
1059
+ if (!motionValue2) return;
1060
+ return motionValue2.on("change", function(value) {
1061
+ return animateChangedValue(animatedStyle.getStyle(value), toTransition(MotionValueStrategy.get(motionValue2)), motionValue2);
1062
+ });
1063
+ }, [animatedStyle, resolvedAnimatedStyle]);
1064
+ return /* @__PURE__ */ jsx(Element, {
1065
+ ...transformedProps,
1066
+ ref: composedRefs
1067
+ });
1068
+ });
1069
+ Component["acceptRenderProp"] = true;
1070
+ return Component;
895
1071
  }
896
1072
  function getDiff(previous, next) {
897
- if (!previous) {
898
- return next;
899
- }
900
- var diff = null;
901
- for (var key in next) {
902
- if (next[key] !== previous[key]) {
903
- diff || (diff = {});
904
- diff[key] = next[key];
905
- }
906
- }
907
- return diff;
1073
+ if (!previous) {
1074
+ return next;
1075
+ }
1076
+ var diff = null;
1077
+ for (var key in next) {
1078
+ if (next[key] !== previous[key]) {
1079
+ diff || (diff = {});
1080
+ diff[key] = next[key];
1081
+ }
1082
+ }
1083
+ return diff;
908
1084
  }
909
1085
  function fixTransparentColors(diff, previous, next) {
910
- var result = diff;
911
- for (var key in diff) {
912
- if (diff[key] === "transparent") {
913
- var fixed = "rgba(0, 0, 0, 0)";
914
- var candidates = [previous === null || previous === void 0 ? void 0 : previous[key], next === null || next === void 0 ? void 0 : next[key]];
915
- var _iteratorNormalCompletion = true,
916
- _didIteratorError = false,
917
- _iteratorError = void 0;
918
- try {
919
- for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
920
- var candidate = _step.value;
921
- if (typeof candidate === "string" && candidate !== "transparent") {
922
- var rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
923
- if (rgbaMatch) {
924
- fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
925
- break;
926
- }
927
- }
928
- }
929
- } catch (err) {
930
- _didIteratorError = true;
931
- _iteratorError = err;
932
- } finally {
933
- try {
934
- if (!_iteratorNormalCompletion && _iterator.return != null) {
935
- _iterator.return();
936
- }
937
- } finally {
938
- if (_didIteratorError) {
939
- throw _iteratorError;
940
- }
941
- }
942
- }
943
- if (result === diff) {
944
- result = {
945
- ...diff
946
- };
947
- }
948
- result[key] = fixed;
949
- }
950
- }
951
- return result;
1086
+ var result = diff;
1087
+ for (var key in diff) {
1088
+ if (diff[key] === "transparent") {
1089
+ var fixed = "rgba(0, 0, 0, 0)";
1090
+ var candidates = [previous === null || previous === void 0 ? void 0 : previous[key], next === null || next === void 0 ? void 0 : next[key]];
1091
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
1092
+ try {
1093
+ for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
1094
+ var candidate = _step.value;
1095
+ if (typeof candidate === "string" && candidate !== "transparent") {
1096
+ var rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
1097
+ if (rgbaMatch) {
1098
+ fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
1099
+ break;
1100
+ }
1101
+ }
1102
+ }
1103
+ } catch (err) {
1104
+ _didIteratorError = true;
1105
+ _iteratorError = err;
1106
+ } finally {
1107
+ try {
1108
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
1109
+ _iterator.return();
1110
+ }
1111
+ } finally {
1112
+ if (_didIteratorError) {
1113
+ throw _iteratorError;
1114
+ }
1115
+ }
1116
+ }
1117
+ if (result === diff) {
1118
+ result = { ...diff };
1119
+ }
1120
+ result[key] = fixed;
1121
+ }
1122
+ }
1123
+ return result;
952
1124
  }
1125
+
953
1126
  export { createAnimations, disableAnimationProps };
954
1127
  //# sourceMappingURL=createAnimations.native.js.map