@rootnative/inertia 0.0.9 → 0.0.11
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.
- package/CHANGELOG.md +95 -1
- package/README.md +8 -8
- package/dist/{chunk-MFAFB4K7.mjs → chunk-2Q6JMDYZ.mjs} +8 -10
- package/dist/chunk-2UREDR4Z.js +8 -0
- package/dist/{chunk-ZBHQPVWE.js → chunk-3PB27UIE.js} +2 -2
- package/dist/{chunk-IX6SEOSK.mjs → chunk-5EYIZG72.mjs} +60 -45
- package/dist/{chunk-EN4PN7X3.mjs → chunk-7RMSLKQQ.mjs} +1 -1
- package/dist/{chunk-6YIUETBF.mjs → chunk-DT2KVAAO.mjs} +1 -1
- package/dist/{chunk-L4JFECXU.mjs → chunk-FKJLPYGY.mjs} +6 -3
- package/dist/{chunk-E3ALFSH2.js → chunk-HBURWGCZ.js} +86 -71
- package/dist/chunk-JAJHKJC5.js +8 -0
- package/dist/chunk-JBMTTICC.js +8 -0
- package/dist/{chunk-GSUC4HWP.mjs → chunk-JGQ6YRDN.mjs} +1 -1
- package/dist/chunk-KFHZMFAX.js +23 -0
- package/dist/{chunk-M4766VUV.mjs → chunk-LHW4VNWD.mjs} +1 -1
- package/dist/{chunk-MUT6BTZS.js → chunk-NTG6PSGZ.js} +10 -7
- package/dist/chunk-OH46TGEA.mjs +20 -0
- package/dist/{chunk-6AN5X3YE.js → chunk-QDMSFRQR.js} +10 -11
- package/dist/{chunk-W7NTRSPD.mjs → chunk-QIRKPDXA.mjs} +118 -68
- package/dist/{chunk-WNVHPMBI.js → chunk-QX5JHRZ2.js} +118 -66
- package/dist/{chunk-6NOCY764.js → chunk-R7YD6L3D.js} +2 -2
- package/dist/{chunk-JBK5ZLMH.mjs → chunk-RO4XFTQ6.mjs} +1 -1
- package/dist/{chunk-QNLSCOR5.mjs → chunk-UGYBFAVY.mjs} +1 -1
- package/dist/{chunk-IHVMNOS4.js → chunk-XLKI2MSD.js} +2 -2
- package/dist/gestureLayer/index.d.mts +3 -3
- package/dist/gestureLayer/index.d.ts +3 -3
- package/dist/gestureLayer/index.js +12 -18
- package/dist/gestureLayer/index.mjs +5 -11
- package/dist/index.d.mts +108 -49
- package/dist/index.d.ts +108 -49
- package/dist/index.js +114 -91
- package/dist/index.mjs +66 -59
- package/dist/motion/FlatList.d.mts +2 -1
- package/dist/motion/FlatList.d.ts +2 -1
- package/dist/motion/FlatList.js +5 -5
- package/dist/motion/FlatList.mjs +4 -4
- package/dist/motion/Image.d.mts +2 -1
- package/dist/motion/Image.d.ts +2 -1
- package/dist/motion/Image.js +5 -5
- package/dist/motion/Image.mjs +4 -4
- package/dist/motion/Pressable.d.mts +2 -1
- package/dist/motion/Pressable.d.ts +2 -1
- package/dist/motion/Pressable.js +5 -5
- package/dist/motion/Pressable.mjs +4 -4
- package/dist/motion/ScrollView.d.mts +2 -1
- package/dist/motion/ScrollView.d.ts +2 -1
- package/dist/motion/ScrollView.js +5 -5
- package/dist/motion/ScrollView.mjs +4 -4
- package/dist/motion/Text.d.mts +2 -1
- package/dist/motion/Text.d.ts +2 -1
- package/dist/motion/Text.js +5 -5
- package/dist/motion/Text.mjs +4 -4
- package/dist/motion/View.d.mts +2 -1
- package/dist/motion/View.d.ts +2 -1
- package/dist/motion/View.js +5 -5
- package/dist/motion/View.mjs +4 -4
- package/dist/touch/index.d.mts +5 -3
- package/dist/touch/index.d.ts +5 -3
- package/dist/touch/index.js +16 -31
- package/dist/touch/index.mjs +11 -29
- package/dist/{types-DyJpG64F.d.mts → types-C5Zbs9MC.d.mts} +22 -4
- package/dist/{types-DyJpG64F.d.ts → types-C5Zbs9MC.d.ts} +22 -4
- package/dist/{useGesture-DbH46EBp.d.ts → useGesture-Be0ZhCWj.d.ts} +1 -1
- package/dist/{useGesture-CnZQnYHH.d.mts → useGesture-Ve8EGjTr.d.mts} +1 -1
- package/dist/useTranslateStyle-BDrOD97O.d.mts +58 -0
- package/dist/useTranslateStyle-BDrOD97O.d.ts +58 -0
- package/jest-preset.js +31 -2
- package/llms.txt +2 -1
- package/package.json +15 -12
- package/src/config/namedTransitions.ts +7 -9
- package/src/gestureLayer/index.ts +3 -0
- package/src/gestureLayer/useGestureLayer.ts +6 -9
- package/src/gestures/focusVisibility.ts +19 -17
- package/src/gestures/index.ts +1 -1
- package/src/index.ts +12 -0
- package/src/internal/boxShadow.ts +24 -2
- package/src/layout/resolveLayout.ts +4 -1
- package/src/layout/useSharedLayout.ts +2 -1
- package/src/motion/createMotionComponent.tsx +92 -44
- package/src/presence/Presence.tsx +5 -7
- package/src/touch/applyBounds.ts +30 -0
- package/src/touch/index.ts +1 -0
- package/src/touch/useTouchDrag.ts +18 -46
- package/src/transitions/constants.ts +14 -0
- package/src/transitions/easing.ts +23 -11
- package/src/transitions/index.ts +5 -0
- package/src/transitions/keys.ts +0 -2
- package/src/transitions/resolve.ts +86 -11
- package/src/transitions/resolveSequence.ts +45 -3
- package/src/transitions/runtime.ts +4 -7
- package/src/transitions/spring.ts +7 -2
- package/src/types.ts +23 -3
- package/src/values/extrapolation.ts +21 -0
- package/src/values/index.ts +3 -0
- package/src/values/useColorCascade.ts +3 -3
- package/src/values/useColorTransition.ts +17 -2
- package/src/values/useGesture.ts +9 -2
- package/src/values/useInterpolatedStyle.ts +13 -13
- package/src/values/useShadow.ts +36 -9
- package/src/values/useSpring.ts +34 -25
- package/src/values/useTransform.ts +24 -20
- package/src/values/useTranslateStyle.ts +47 -0
- package/dist/chunk-24NUL23E.js +0 -8
- package/dist/chunk-4XBX7KOD.js +0 -8
- package/dist/chunk-Z5USXWTE.js +0 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
3
|
+
var chunkQDMSFRQR_js = require('./chunk-QDMSFRQR.js');
|
|
4
|
+
var chunkQX5JHRZ2_js = require('./chunk-QX5JHRZ2.js');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var Animated = require('react-native-reanimated');
|
|
@@ -45,11 +45,10 @@ function Presence({ children }) {
|
|
|
45
45
|
react.Children.forEach(children, (child) => {
|
|
46
46
|
if (!react.isValidElement(child)) return;
|
|
47
47
|
if (child.key === null) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
48
|
+
chunkQX5JHRZ2_js.warnOnce(
|
|
49
|
+
"presence-keyless-child",
|
|
50
|
+
"[inertia] <Presence> children must have a `key`. Skipping a keyless child."
|
|
51
|
+
);
|
|
53
52
|
return;
|
|
54
53
|
}
|
|
55
54
|
out.push(child);
|
|
@@ -267,7 +266,7 @@ function resolveBoxShadowInput(input) {
|
|
|
267
266
|
offsetY: coerceLength(layer.offsetY, "offsetY"),
|
|
268
267
|
blurRadius: coerceLength(layer.blurRadius, "blurRadius"),
|
|
269
268
|
spreadDistance: coerceLength(layer.spreadDistance, "spreadDistance"),
|
|
270
|
-
color: layer.color
|
|
269
|
+
color: coerceColor(layer.color),
|
|
271
270
|
inset: layer.inset ?? false
|
|
272
271
|
}));
|
|
273
272
|
}
|
|
@@ -298,6 +297,13 @@ function invisibleLayer(inset) {
|
|
|
298
297
|
inset
|
|
299
298
|
};
|
|
300
299
|
}
|
|
300
|
+
function coerceColor(value) {
|
|
301
|
+
if (value === void 0) return "black";
|
|
302
|
+
if (typeof value === "string") return value;
|
|
303
|
+
throw new Error(
|
|
304
|
+
`[inertia] boxShadow: color must be a colour string, got ${typeof value}. PlatformColor and DynamicColorIOS values cannot be interpolated \u2014 pass a string colour on an animated shadow.`
|
|
305
|
+
);
|
|
306
|
+
}
|
|
301
307
|
function coerceLength(value, field) {
|
|
302
308
|
if (value === void 0) return 0;
|
|
303
309
|
if (typeof value === "number") return value;
|
|
@@ -364,15 +370,17 @@ function resolveLayoutTransition(layout) {
|
|
|
364
370
|
const cfg = layout === true ? { type: "spring" } : layout;
|
|
365
371
|
if (cfg.type === "no-animation") return void 0;
|
|
366
372
|
if (cfg.type === "timing") {
|
|
367
|
-
let builder2 = Animated.LinearTransition.duration(
|
|
368
|
-
|
|
373
|
+
let builder2 = Animated.LinearTransition.duration(
|
|
374
|
+
cfg.duration ?? chunkQX5JHRZ2_js.DEFAULT_LAYOUT_DURATION
|
|
375
|
+
);
|
|
376
|
+
const easing = chunkQX5JHRZ2_js.ensureWorkletEasing(cfg.easing);
|
|
369
377
|
if (easing) builder2 = builder2.easing(easing);
|
|
370
378
|
if (cfg.delay) builder2 = builder2.delay(cfg.delay);
|
|
371
379
|
return builder2;
|
|
372
380
|
}
|
|
373
381
|
const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
|
|
374
|
-
const { stiffness, damping, mass } =
|
|
375
|
-
...
|
|
382
|
+
const { stiffness, damping, mass } = chunkQX5JHRZ2_js.springToReanimated({
|
|
383
|
+
...chunkQX5JHRZ2_js.DEFAULT_SPRING,
|
|
376
384
|
...spring
|
|
377
385
|
});
|
|
378
386
|
let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
|
|
@@ -560,14 +568,14 @@ function useSharedLayout(options) {
|
|
|
560
568
|
}
|
|
561
569
|
function legBuilder(transition) {
|
|
562
570
|
if (transition?.type === "timing") {
|
|
563
|
-
const duration = transition.duration ??
|
|
571
|
+
const duration = transition.duration ?? chunkQX5JHRZ2_js.DEFAULT_LAYOUT_DURATION;
|
|
564
572
|
return (from, to) => Animated.withSequence(
|
|
565
573
|
Animated.withTiming(from, { duration: 0 }),
|
|
566
574
|
Animated.withTiming(to, { duration })
|
|
567
575
|
);
|
|
568
576
|
}
|
|
569
|
-
const springCfg = transition?.type === "spring" ? { ...
|
|
570
|
-
const springParams =
|
|
577
|
+
const springCfg = transition?.type === "spring" ? { ...chunkQX5JHRZ2_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkQX5JHRZ2_js.DEFAULT_SPRING };
|
|
578
|
+
const springParams = chunkQX5JHRZ2_js.springToReanimated(springCfg);
|
|
571
579
|
return (from, to) => Animated.withSequence(
|
|
572
580
|
Animated.withTiming(from, { duration: 0 }),
|
|
573
581
|
Animated.withSpring(to, springParams)
|
|
@@ -853,14 +861,14 @@ var DEFAULT_RESTING = {
|
|
|
853
861
|
function transitionFor(prop, transition) {
|
|
854
862
|
if (!transition) return void 0;
|
|
855
863
|
if (typeof transition === "string") return void 0;
|
|
856
|
-
if (
|
|
864
|
+
if (chunkQX5JHRZ2_js.isTopLevelTransition(transition)) return transition;
|
|
857
865
|
if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
|
|
858
866
|
return transition[prop];
|
|
859
867
|
}
|
|
860
868
|
function gestureLayerTransitionFor(layer, transition) {
|
|
861
869
|
if (!transition) return void 0;
|
|
862
870
|
if (typeof transition === "string") return void 0;
|
|
863
|
-
if (
|
|
871
|
+
if (chunkQX5JHRZ2_js.isTopLevelTransition(transition)) return transition;
|
|
864
872
|
return transition[layer];
|
|
865
873
|
}
|
|
866
874
|
function createMotionComponent(Component) {
|
|
@@ -910,12 +918,12 @@ function createMotionComponent(Component) {
|
|
|
910
918
|
onLayout: userOnLayout,
|
|
911
919
|
...rest
|
|
912
920
|
} = props;
|
|
913
|
-
const namedTransitions =
|
|
914
|
-
const transition =
|
|
921
|
+
const namedTransitions = chunkQDMSFRQR_js.useNamedTransitions();
|
|
922
|
+
const transition = chunkQDMSFRQR_js.resolveNamedTransitionProp(
|
|
915
923
|
transitionProp,
|
|
916
924
|
namedTransitions
|
|
917
925
|
);
|
|
918
|
-
const layout = typeof layoutProp === "string" ?
|
|
926
|
+
const layout = typeof layoutProp === "string" ? chunkQDMSFRQR_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
|
|
919
927
|
if (__DEV__ && typeof style === "function") {
|
|
920
928
|
throw new Error(
|
|
921
929
|
"[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
|
|
@@ -923,7 +931,7 @@ function createMotionComponent(Component) {
|
|
|
923
931
|
}
|
|
924
932
|
const presence = usePresence();
|
|
925
933
|
const isExiting = presence !== null && presence.isPresent === false;
|
|
926
|
-
const shouldReduceMotion =
|
|
934
|
+
const shouldReduceMotion = chunkQDMSFRQR_js.useShouldReduceMotion();
|
|
927
935
|
const staggerDelay = useStaggerDelay();
|
|
928
936
|
const onAnimationEndRef = react.useRef(onAnimationEnd);
|
|
929
937
|
onAnimationEndRef.current = onAnimationEnd;
|
|
@@ -980,11 +988,8 @@ function createMotionComponent(Component) {
|
|
|
980
988
|
}
|
|
981
989
|
}
|
|
982
990
|
}
|
|
983
|
-
const
|
|
984
|
-
const
|
|
985
|
-
const hasShadowOffsetRef = react.useRef(false);
|
|
986
|
-
const hasBoxShadowRef = react.useRef(false);
|
|
987
|
-
const prevActive = activeKeysRef.current;
|
|
991
|
+
const activeSetRef = react.useRef(null);
|
|
992
|
+
const prevActive = activeSetRef.current?.keys ?? null;
|
|
988
993
|
let grew = prevActive === null;
|
|
989
994
|
if (!grew && prevActive) {
|
|
990
995
|
for (const k of touched) {
|
|
@@ -997,30 +1002,32 @@ function createMotionComponent(Component) {
|
|
|
997
1002
|
if (grew) {
|
|
998
1003
|
const merged = new Set(prevActive ?? []);
|
|
999
1004
|
for (const k of touched) merged.add(k);
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
(k) => k !== "boxShadow" && k.startsWith("shadow")
|
|
1010
|
-
)) {
|
|
1011
|
-
chunkWNVHPMBI_js.warnOnce(
|
|
1005
|
+
const keys = ALL_KEYS.filter((k) => merged.has(k));
|
|
1006
|
+
activeSetRef.current = {
|
|
1007
|
+
keys,
|
|
1008
|
+
hasTransform: keys.some((k) => TRANSFORM_KEY_SET.has(k)),
|
|
1009
|
+
hasShadowOffset: keys.some((k) => SHADOW_OFFSET_KEY_SET.has(k)),
|
|
1010
|
+
hasBoxShadow: keys.includes("boxShadow")
|
|
1011
|
+
};
|
|
1012
|
+
if (__DEV__ && activeSetRef.current.hasBoxShadow && keys.some((k) => k !== "boxShadow" && k.startsWith("shadow"))) {
|
|
1013
|
+
chunkQX5JHRZ2_js.warnOnce(
|
|
1012
1014
|
"boxShadow-with-native-shadow",
|
|
1013
1015
|
"[inertia] `boxShadow` is animated alongside the native `shadow*` keys on the same element, which applies two shadow systems at once. Pick one: `boxShadow` for the cross-platform CSS form, or the native `shadow*` keys."
|
|
1014
1016
|
);
|
|
1015
1017
|
}
|
|
1016
1018
|
}
|
|
1019
|
+
const activeKeys = activeSetRef.current.keys;
|
|
1020
|
+
const activeSetSV = Animated.useSharedValue(activeSetRef.current);
|
|
1021
|
+
const activeSet = activeSetRef.current;
|
|
1022
|
+
react.useEffect(() => {
|
|
1023
|
+
if (activeSetSV.value !== activeSet) activeSetSV.value = activeSet;
|
|
1024
|
+
}, [activeSetSV, activeSet]);
|
|
1017
1025
|
const drivenNow = /* @__PURE__ */ new Set();
|
|
1018
1026
|
collectTouchedKeys(drivenNow, animateRecord);
|
|
1019
1027
|
if (initialRecord) collectTouchedKeys(drivenNow, initialRecord);
|
|
1020
1028
|
if (isExiting && exitRecord) collectTouchedKeys(drivenNow, exitRecord);
|
|
1021
1029
|
const everDrivenRef = react.useRef(/* @__PURE__ */ new Set());
|
|
1022
1030
|
for (const k of drivenNow) everDrivenRef.current.add(k);
|
|
1023
|
-
const activeKeys = activeKeysRef.current;
|
|
1024
1031
|
const everDriven = everDrivenRef.current;
|
|
1025
1032
|
const styleResting = {};
|
|
1026
1033
|
let styleRestingShadow = null;
|
|
@@ -1076,9 +1083,9 @@ function createMotionComponent(Component) {
|
|
|
1076
1083
|
const boxShadowInsets = Animated.useSharedValue(
|
|
1077
1084
|
boxShadowSeedRef.current.insets
|
|
1078
1085
|
);
|
|
1079
|
-
const styleRestingSig =
|
|
1086
|
+
const styleRestingSig = chunkQX5JHRZ2_js.stableSig(styleResting);
|
|
1080
1087
|
react.useEffect(() => {
|
|
1081
|
-
for (const key of
|
|
1088
|
+
for (const key of activeKeys) {
|
|
1082
1089
|
if (everDrivenRef.current.has(key)) continue;
|
|
1083
1090
|
sharedValues[key].value = styleResting[key] ?? DEFAULT_RESTING[key];
|
|
1084
1091
|
if (key === "boxShadow") {
|
|
@@ -1104,13 +1111,14 @@ function createMotionComponent(Component) {
|
|
|
1104
1111
|
const gestureSV = Animated.useSharedValue(
|
|
1105
1112
|
resolveGestureLayers(gesture)
|
|
1106
1113
|
);
|
|
1107
|
-
const gestureTargetsSig =
|
|
1114
|
+
const gestureTargetsSig = chunkQX5JHRZ2_js.stableSig(gesture);
|
|
1108
1115
|
react.useEffect(() => {
|
|
1109
1116
|
gestureSV.value = resolveGestureLayers(gesture);
|
|
1110
1117
|
}, [gestureTargetsSig]);
|
|
1111
1118
|
const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
|
|
1112
|
-
const baseSig =
|
|
1113
|
-
const transitionSig =
|
|
1119
|
+
const baseSig = chunkQX5JHRZ2_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
|
|
1120
|
+
const transitionSig = chunkQX5JHRZ2_js.stableSig(transition);
|
|
1121
|
+
const hasAnimationEnd = onAnimationEnd !== void 0;
|
|
1114
1122
|
const safeToRemoveRef = react.useRef(void 0);
|
|
1115
1123
|
safeToRemoveRef.current = presence?.safeToRemove;
|
|
1116
1124
|
react.useEffect(() => {
|
|
@@ -1185,8 +1193,8 @@ function createMotionComponent(Component) {
|
|
|
1185
1193
|
isExiting ? onSettle : void 0,
|
|
1186
1194
|
TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
|
|
1187
1195
|
);
|
|
1188
|
-
sharedValues[key].value =
|
|
1189
|
-
|
|
1196
|
+
sharedValues[key].value = chunkQX5JHRZ2_js.applyDelay(
|
|
1197
|
+
chunkQX5JHRZ2_js.resolveAnimatableValue(
|
|
1190
1198
|
COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
|
|
1191
1199
|
cfg,
|
|
1192
1200
|
factory
|
|
@@ -1197,7 +1205,10 @@ function createMotionComponent(Component) {
|
|
|
1197
1205
|
if (isExiting && pending === 0) {
|
|
1198
1206
|
safeToRemoveRef.current?.();
|
|
1199
1207
|
}
|
|
1200
|
-
|
|
1208
|
+
return () => {
|
|
1209
|
+
done = true;
|
|
1210
|
+
};
|
|
1211
|
+
}, [baseSig, transitionSig, hasAnimationEnd]);
|
|
1201
1212
|
useGestureLayerProgress(
|
|
1202
1213
|
pressedProgress,
|
|
1203
1214
|
pressed,
|
|
@@ -1238,7 +1249,7 @@ function createMotionComponent(Component) {
|
|
|
1238
1249
|
if (!hasLayoutId) return void 0;
|
|
1239
1250
|
const out = {};
|
|
1240
1251
|
let any = false;
|
|
1241
|
-
for (const key of
|
|
1252
|
+
for (const key of activeKeys) {
|
|
1242
1253
|
if (!SHARED_STYLE_KEY_SET.has(key)) continue;
|
|
1243
1254
|
const v = sharedValues[key].value;
|
|
1244
1255
|
if (typeof v !== "number" && typeof v !== "string") continue;
|
|
@@ -1250,7 +1261,7 @@ function createMotionComponent(Component) {
|
|
|
1250
1261
|
const sharedLayout = useSharedLayout({
|
|
1251
1262
|
layoutId,
|
|
1252
1263
|
userRef: ref,
|
|
1253
|
-
transition:
|
|
1264
|
+
transition: chunkQX5JHRZ2_js.isTopLevelTransition(transition) ? transition : void 0,
|
|
1254
1265
|
shouldReduceMotion,
|
|
1255
1266
|
userOnLayout,
|
|
1256
1267
|
readStyles: readSharedStyles
|
|
@@ -1258,10 +1269,11 @@ function createMotionComponent(Component) {
|
|
|
1258
1269
|
const flip = sharedLayout.flip;
|
|
1259
1270
|
const carry = sharedLayout.carry;
|
|
1260
1271
|
const animatedStyle = Animated.useAnimatedStyle(() => {
|
|
1261
|
-
const
|
|
1262
|
-
const
|
|
1263
|
-
const
|
|
1264
|
-
const
|
|
1272
|
+
const activeSet2 = activeSetSV.value;
|
|
1273
|
+
const activeKeys2 = activeSet2.keys;
|
|
1274
|
+
const hasTransform = activeSet2.hasTransform;
|
|
1275
|
+
const hasShadowOffset = activeSet2.hasShadowOffset;
|
|
1276
|
+
const hasBoxShadow = activeSet2.hasBoxShadow;
|
|
1265
1277
|
const out = {};
|
|
1266
1278
|
const transform = [];
|
|
1267
1279
|
let shadowOffsetW = 0;
|
|
@@ -1352,7 +1364,7 @@ function createMotionComponent(Component) {
|
|
|
1352
1364
|
setFocusVisible,
|
|
1353
1365
|
setHovered
|
|
1354
1366
|
);
|
|
1355
|
-
const layoutSig =
|
|
1367
|
+
const layoutSig = chunkQX5JHRZ2_js.stableSig(layout);
|
|
1356
1368
|
const layoutTransition = react.useMemo(
|
|
1357
1369
|
() => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
|
|
1358
1370
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -1501,8 +1513,8 @@ function driveBoxShadow(slot, insetSlot, target, cfg, staggerDelay, factory) {
|
|
|
1501
1513
|
);
|
|
1502
1514
|
insetSlot.value = insets;
|
|
1503
1515
|
if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
|
|
1504
|
-
slot.value =
|
|
1505
|
-
|
|
1516
|
+
slot.value = chunkQX5JHRZ2_js.applyDelay(
|
|
1517
|
+
chunkQX5JHRZ2_js.resolveTransition(
|
|
1506
1518
|
cfg,
|
|
1507
1519
|
layersToPayload(to),
|
|
1508
1520
|
factory?.("animation", void 0)
|
|
@@ -1560,12 +1572,7 @@ function stepCountOf(v) {
|
|
|
1560
1572
|
}
|
|
1561
1573
|
function totalIterationsOf(cfg) {
|
|
1562
1574
|
if (!cfg || cfg.type === "no-animation" || cfg.type === "decay") return 1;
|
|
1563
|
-
|
|
1564
|
-
if (r === void 0) return 1;
|
|
1565
|
-
if (r === "infinite") return Number.POSITIVE_INFINITY;
|
|
1566
|
-
if (typeof r === "number") return r;
|
|
1567
|
-
if (r.count === "infinite") return Number.POSITIVE_INFINITY;
|
|
1568
|
-
return r.count;
|
|
1575
|
+
return chunkQX5JHRZ2_js.repeatIterationsOf(cfg.repeat);
|
|
1569
1576
|
}
|
|
1570
1577
|
function reachesTerminalPhase(cfg) {
|
|
1571
1578
|
return Number.isFinite(totalIterationsOf(cfg));
|
|
@@ -1592,16 +1599,21 @@ function useControllerKey(controller) {
|
|
|
1592
1599
|
return controller?.current;
|
|
1593
1600
|
}
|
|
1594
1601
|
function resolveAnimateInput(animate, variants, controllerKey) {
|
|
1602
|
+
if (controllerKey !== void 0 && animate !== void 0) {
|
|
1603
|
+
chunkQX5JHRZ2_js.warnOnce(
|
|
1604
|
+
"controller-and-animate",
|
|
1605
|
+
"[inertia] Both `controller` and `animate` are set on the same primitive. The controller drives the animation and `animate` is ignored \u2014 remove one of the two."
|
|
1606
|
+
);
|
|
1607
|
+
}
|
|
1595
1608
|
if (controllerKey !== void 0 && variants && controllerKey in variants) {
|
|
1596
1609
|
return variants[controllerKey];
|
|
1597
1610
|
}
|
|
1598
1611
|
if (typeof animate === "string") {
|
|
1599
1612
|
if (variants && animate in variants) return variants[animate];
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
}
|
|
1613
|
+
chunkQX5JHRZ2_js.warnOnce(
|
|
1614
|
+
`missing-variant:${animate}`,
|
|
1615
|
+
`[inertia] animate="${animate}" but no matching variant. Did you forget to pass \`variants\`?`
|
|
1616
|
+
);
|
|
1605
1617
|
return void 0;
|
|
1606
1618
|
}
|
|
1607
1619
|
return animate;
|
|
@@ -1628,7 +1640,7 @@ function resolveGestureLayers(gesture) {
|
|
|
1628
1640
|
for (const key of ALL_KEYS) {
|
|
1629
1641
|
if (STRUCTURED_KEY_SET.has(key)) {
|
|
1630
1642
|
if (__DEV__ && subState[key] !== void 0) {
|
|
1631
|
-
|
|
1643
|
+
chunkQX5JHRZ2_js.warnOnce(
|
|
1632
1644
|
`gesture-structured-${layer}-${key}`,
|
|
1633
1645
|
`[inertia] \`${key}\` is not supported inside \`gesture.${layer}\` and will be ignored. Drive it from \`animate\` (optionally via a variant keyed off the same state), or interpolate it yourself with \`useShadow\`.`
|
|
1634
1646
|
);
|
|
@@ -1652,7 +1664,7 @@ function resolveGestureLayers(gesture) {
|
|
|
1652
1664
|
return out;
|
|
1653
1665
|
}
|
|
1654
1666
|
function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
|
|
1655
|
-
const layerCfgSig =
|
|
1667
|
+
const layerCfgSig = chunkQX5JHRZ2_js.stableSig(gestureLayerTransitionFor(layer, transition));
|
|
1656
1668
|
react.useEffect(() => {
|
|
1657
1669
|
if (!declared) return;
|
|
1658
1670
|
if (isExiting) {
|
|
@@ -1661,7 +1673,7 @@ function useGestureLayerProgress(progress, active, declared, layer, transition,
|
|
|
1661
1673
|
}
|
|
1662
1674
|
const target = active ? 1 : 0;
|
|
1663
1675
|
const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
|
|
1664
|
-
progress.value =
|
|
1676
|
+
progress.value = chunkQX5JHRZ2_js.resolveTransition(cfg, target);
|
|
1665
1677
|
}, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
|
|
1666
1678
|
}
|
|
1667
1679
|
function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
|
|
@@ -1669,6 +1681,9 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
|
|
|
1669
1681
|
const hasFocused = gesture?.focused ? 1 : 0;
|
|
1670
1682
|
const hasFocusVisible = gesture?.focusVisible ? 1 : 0;
|
|
1671
1683
|
const hasHovered = gesture?.hovered ? 1 : 0;
|
|
1684
|
+
react.useEffect(() => {
|
|
1685
|
+
if (hasFocusVisible) chunkQDMSFRQR_js.installFocusVisibility();
|
|
1686
|
+
}, [hasFocusVisible]);
|
|
1672
1687
|
return react.useMemo(() => {
|
|
1673
1688
|
if (!gesture) return {};
|
|
1674
1689
|
const handlers = {};
|
|
@@ -1694,7 +1709,7 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
|
|
|
1694
1709
|
if (gesture.focused || gesture.focusVisible) {
|
|
1695
1710
|
handlers.onFocus = compose(rest.onFocus, () => {
|
|
1696
1711
|
if (gesture.focused) setFocused(true);
|
|
1697
|
-
if (gesture.focusVisible &&
|
|
1712
|
+
if (gesture.focusVisible && chunkQDMSFRQR_js.isFocusVisible()) setFocusVisible(true);
|
|
1698
1713
|
});
|
|
1699
1714
|
handlers.onBlur = compose(rest.onBlur, () => {
|
|
1700
1715
|
if (gesture.focused) setFocused(false);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var reactNativeReanimated = require('react-native-reanimated');
|
|
4
|
+
|
|
5
|
+
// src/touch/applyBounds.ts
|
|
6
|
+
function applyBounds(value, min, max, elastic) {
|
|
7
|
+
"worklet";
|
|
8
|
+
if (min !== void 0 && value < min) {
|
|
9
|
+
return elastic > 0 ? min + (value - min) * elastic : min;
|
|
10
|
+
}
|
|
11
|
+
if (max !== void 0 && value > max) {
|
|
12
|
+
return elastic > 0 ? max + (value - max) * elastic : max;
|
|
13
|
+
}
|
|
14
|
+
return value;
|
|
15
|
+
}
|
|
16
|
+
function useTranslateStyle(x, y) {
|
|
17
|
+
return reactNativeReanimated.useAnimatedStyle(() => ({
|
|
18
|
+
transform: [{ translateX: x.value }, { translateY: y.value }]
|
|
19
|
+
}));
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
exports.applyBounds = applyBounds;
|
|
23
|
+
exports.useTranslateStyle = useTranslateStyle;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
3
|
+
var chunkQDMSFRQR_js = require('./chunk-QDMSFRQR.js');
|
|
4
|
+
var chunkQX5JHRZ2_js = require('./chunk-QX5JHRZ2.js');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var reactNativeReanimated = require('react-native-reanimated');
|
|
7
7
|
|
|
@@ -10,12 +10,15 @@ function useGesture(transition) {
|
|
|
10
10
|
const focused = reactNativeReanimated.useSharedValue(0);
|
|
11
11
|
const focusVisible = reactNativeReanimated.useSharedValue(0);
|
|
12
12
|
const hovered = reactNativeReanimated.useSharedValue(0);
|
|
13
|
-
const shouldReduceMotion =
|
|
14
|
-
const resolved =
|
|
13
|
+
const shouldReduceMotion = chunkQDMSFRQR_js.useShouldReduceMotion();
|
|
14
|
+
const resolved = chunkQDMSFRQR_js.resolveNamedTransitionProp(transition, chunkQDMSFRQR_js.useNamedTransitions());
|
|
15
|
+
react.useEffect(() => {
|
|
16
|
+
chunkQDMSFRQR_js.installFocusVisibility();
|
|
17
|
+
}, []);
|
|
15
18
|
const setLayer = react.useCallback(
|
|
16
19
|
(sv, layer, target) => {
|
|
17
20
|
const cfg = shouldReduceMotion ? { type: "no-animation" } : layerTransition(layer, resolved) ?? { type: "spring" };
|
|
18
|
-
sv.value =
|
|
21
|
+
sv.value = chunkQX5JHRZ2_js.resolveTransition(cfg, target);
|
|
19
22
|
},
|
|
20
23
|
// The transition is intentionally read on every call rather than cooked
|
|
21
24
|
// into the dep array — a fresh literal each render would otherwise
|
|
@@ -34,7 +37,7 @@ function useGesture(transition) {
|
|
|
34
37
|
onHoverOut: () => setLayer(hovered, "hovered", 0),
|
|
35
38
|
onFocus: () => {
|
|
36
39
|
setLayer(focused, "focused", 1);
|
|
37
|
-
if (
|
|
40
|
+
if (chunkQDMSFRQR_js.isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
|
|
38
41
|
},
|
|
39
42
|
onBlur: () => {
|
|
40
43
|
setLayer(focused, "focused", 0);
|
|
@@ -47,7 +50,7 @@ function useGesture(transition) {
|
|
|
47
50
|
}
|
|
48
51
|
function layerTransition(layer, transition) {
|
|
49
52
|
if (!transition) return void 0;
|
|
50
|
-
if (
|
|
53
|
+
if (chunkQX5JHRZ2_js.isTopLevelTransition(transition)) return transition;
|
|
51
54
|
return transition[layer];
|
|
52
55
|
}
|
|
53
56
|
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useAnimatedStyle } from 'react-native-reanimated';
|
|
2
|
+
|
|
3
|
+
// src/touch/applyBounds.ts
|
|
4
|
+
function applyBounds(value, min, max, elastic) {
|
|
5
|
+
"worklet";
|
|
6
|
+
if (min !== void 0 && value < min) {
|
|
7
|
+
return elastic > 0 ? min + (value - min) * elastic : min;
|
|
8
|
+
}
|
|
9
|
+
if (max !== void 0 && value > max) {
|
|
10
|
+
return elastic > 0 ? max + (value - max) * elastic : max;
|
|
11
|
+
}
|
|
12
|
+
return value;
|
|
13
|
+
}
|
|
14
|
+
function useTranslateStyle(x, y) {
|
|
15
|
+
return useAnimatedStyle(() => ({
|
|
16
|
+
transform: [{ translateX: x.value }, { translateY: y.value }]
|
|
17
|
+
}));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { applyBounds, useTranslateStyle };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkQX5JHRZ2_js = require('./chunk-QX5JHRZ2.js');
|
|
4
4
|
var react = require('react');
|
|
5
5
|
var reactNativeReanimated = require('react-native-reanimated');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -32,7 +32,7 @@ function MotionConfig({
|
|
|
32
32
|
children
|
|
33
33
|
}) {
|
|
34
34
|
const parent = useMotionConfig();
|
|
35
|
-
const transitionsSig =
|
|
35
|
+
const transitionsSig = chunkQX5JHRZ2_js.stableSig(transitions);
|
|
36
36
|
const value = react.useMemo(
|
|
37
37
|
() => ({
|
|
38
38
|
reducedMotion: reducedMotion ?? parent.reducedMotion,
|
|
@@ -49,11 +49,10 @@ var UNKNOWN_NAME_FALLBACK = { type: "spring" };
|
|
|
49
49
|
function lookupNamedTransition(name, registry) {
|
|
50
50
|
const cfg = registry[name];
|
|
51
51
|
if (cfg) return cfg;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
52
|
+
chunkQX5JHRZ2_js.warnOnce(
|
|
53
|
+
`unknown-transition:${name}`,
|
|
54
|
+
`[inertia] Unknown transition name "${name}" \u2014 falling back to the default spring. Register it on a provider: <MotionConfig transitions={{ '${name}': { ... } }}>.`
|
|
55
|
+
);
|
|
57
56
|
return UNKNOWN_NAME_FALLBACK;
|
|
58
57
|
}
|
|
59
58
|
function resolveNamedTransition(input, registry) {
|
|
@@ -66,7 +65,7 @@ function resolveNamedTransitionProp(transition, registry) {
|
|
|
66
65
|
if (typeof transition === "string") {
|
|
67
66
|
return lookupNamedTransition(transition, registry);
|
|
68
67
|
}
|
|
69
|
-
if (
|
|
68
|
+
if (chunkQX5JHRZ2_js.isTopLevelTransition(transition)) return transition;
|
|
70
69
|
const map = transition;
|
|
71
70
|
let out = null;
|
|
72
71
|
for (const key in map) {
|
|
@@ -86,7 +85,7 @@ function setKeyboard() {
|
|
|
86
85
|
function setPointer() {
|
|
87
86
|
modality = "pointer";
|
|
88
87
|
}
|
|
89
|
-
function
|
|
88
|
+
function installFocusVisibility() {
|
|
90
89
|
if (installed) return;
|
|
91
90
|
if (reactNative.Platform.OS !== "web") return;
|
|
92
91
|
if (typeof document === "undefined") return;
|
|
@@ -96,14 +95,14 @@ function ensureInstalled() {
|
|
|
96
95
|
document.addEventListener("touchstart", setPointer, true);
|
|
97
96
|
installed = true;
|
|
98
97
|
}
|
|
99
|
-
ensureInstalled();
|
|
100
98
|
function isFocusVisible() {
|
|
101
99
|
if (reactNative.Platform.OS !== "web") return true;
|
|
102
|
-
|
|
100
|
+
installFocusVisibility();
|
|
103
101
|
return modality === "keyboard";
|
|
104
102
|
}
|
|
105
103
|
|
|
106
104
|
exports.MotionConfig = MotionConfig;
|
|
105
|
+
exports.installFocusVisibility = installFocusVisibility;
|
|
107
106
|
exports.isFocusVisible = isFocusVisible;
|
|
108
107
|
exports.lookupNamedTransition = lookupNamedTransition;
|
|
109
108
|
exports.resolveNamedTransition = resolveNamedTransition;
|