motion 11.13.0-beta.0 → 11.13.0
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/.turbo/turbo-build.log +45 -45
- package/dist/cjs/index.js +15 -31
- package/dist/cjs/react-client.js +123 -85
- package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +2 -2
- package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs +2 -2
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +2 -2
- package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/hooks/animation-controls.mjs +1 -1
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs +2 -2
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs +1 -1
- package/dist/es/framer-motion/dist/es/components/AnimateSharedLayout.mjs +1 -1
- package/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs +1 -1
- package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs +1 -1
- package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs +2 -2
- package/dist/es/framer-motion/dist/es/easing/utils/map.mjs +2 -2
- package/dist/es/framer-motion/dist/es/frameloop/frame.mjs +2 -2
- package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +11 -14
- package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs +2 -2
- package/dist/es/framer-motion/dist/es/gestures/hover.mjs +18 -22
- package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs +2 -2
- package/dist/es/framer-motion/dist/es/gestures/press.mjs +3 -3
- package/dist/es/framer-motion/dist/es/motion/index.mjs +1 -1
- package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs +2 -2
- package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +2 -2
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +1 -1
- package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs +2 -2
- package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs +1 -1
- package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs +1 -1
- package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +1 -1
- package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +2 -2
- package/dist/es/framer-motion/dist/es/utils/mix/color.mjs +1 -1
- package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +1 -1
- package/dist/es/framer-motion/dist/es/value/index.mjs +1 -1
- package/dist/es/framer-motion/dist/es/value/use-inverted-scale.mjs +1 -1
- package/dist/es/framer-motion/dist/es/value/use-scroll.mjs +1 -1
- package/dist/es/motion/lib/index.mjs +3 -4
- package/dist/es/motion/lib/react.mjs +3 -5
- package/dist/es/motion-dom/dist/es/gestures/drag/state/is-active.mjs +9 -0
- package/dist/es/motion-dom/dist/es/gestures/drag/state/set-active.mjs +28 -0
- package/dist/es/motion-dom/dist/es/gestures/hover.mjs +46 -0
- package/dist/motion.dev.js +15 -31
- package/dist/motion.js +1 -1
- package/package.json +3 -3
- package/dist/es/dom/dist/es/gestures/hover.mjs +0 -26
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/lock.mjs +0 -53
- /package/dist/es/{dom → motion-dom}/dist/es/utils/resolve-elements.mjs +0 -0
- /package/dist/es/{utils → motion-utils}/dist/es/errors.mjs +0 -0
- /package/dist/es/{utils → motion-utils}/dist/es/noop.mjs +0 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
[36m
|
|
2
|
-
[1mlib/index.js[22m → [1mdist/motion.dev.js[22m...[39m
|
|
3
|
-
[32mcreated [1mdist/motion.dev.js[22m in [
|
|
4
|
-
[36m
|
|
5
|
-
[1mlib/index.js[22m → [1mdist/motion.js[22m...[39m
|
|
6
|
-
[32mcreated [1mdist/motion.js[22m in [
|
|
7
|
-
[36m
|
|
8
|
-
[1mlib/index.js[22m → [1mdist/cjs[22m...[39m
|
|
9
|
-
[32mcreated [1mdist/cjs[22m in [
|
|
10
|
-
[36m
|
|
11
|
-
[1mlib/react-client.js[22m → [1mdist/cjs[22m...[39m
|
|
12
|
-
[32mcreated [1mdist/cjs[22m in [
|
|
13
|
-
[36m
|
|
14
|
-
[1mlib/react.js[22m → [1mdist/cjs[22m...[39m
|
|
15
|
-
[32mcreated [1mdist/cjs[22m in [1m2ms[22m[39m
|
|
16
|
-
[36m
|
|
17
|
-
[1mlib/mini.js[22m → [1mdist/cjs[22m...[39m
|
|
18
|
-
[32mcreated [1mdist/cjs[22m in [
|
|
19
|
-
[36m
|
|
20
|
-
[1mlib/react-mini.js[22m → [1mdist/cjs[22m...[39m
|
|
21
|
-
[32mcreated [1mdist/cjs[22m in [
|
|
22
|
-
[36m
|
|
23
|
-
[1mlib/react-m.js[22m → [1mdist/cjs[22m...[39m
|
|
24
|
-
[32mcreated [1mdist/cjs[22m in [
|
|
25
|
-
[36m
|
|
26
|
-
[1mlib/index.js, lib/mini.js, lib/react.js, lib/react-mini.js, lib/react-client.js, lib/react-m.js[22m → [1mdist/es[22m...[39m
|
|
27
|
-
[32mcreated [1mdist/es[22m in [
|
|
28
|
-
[36m
|
|
29
|
-
[1mtypes/index.d.ts[22m → [1mdist/index.d.ts[22m...[39m
|
|
30
|
-
[32mcreated [1mdist/index.d.ts[22m in [
|
|
31
|
-
[36m
|
|
32
|
-
[1mtypes/react.d.ts[22m → [1mdist/react.d.ts[22m...[39m
|
|
33
|
-
[32mcreated [1mdist/react.d.ts[22m in [
|
|
34
|
-
[36m
|
|
35
|
-
[1mtypes/react-mini.d.ts[22m → [1mdist/react-mini.d.ts[22m...[39m
|
|
36
|
-
[32mcreated [1mdist/react-mini.d.ts[22m in [
|
|
37
|
-
[36m
|
|
38
|
-
[1mtypes/react-m.d.ts[22m → [1mdist/react-m.d.ts[22m...[39m
|
|
39
|
-
[32mcreated [1mdist/react-m.d.ts[22m in [
|
|
40
|
-
[36m
|
|
41
|
-
[1mtypes/mini.d.ts[22m → [1mdist/mini.d.ts[22m...[39m
|
|
42
|
-
[32mcreated [1mdist/mini.d.ts[22m in [
|
|
43
|
-
[36m
|
|
44
|
-
[1mtypes/react-client.d.ts[22m → [1mdist/react-client.d.ts[22m...[39m
|
|
45
|
-
[32mcreated [1mdist/react-client.d.ts[22m in [
|
|
1
|
+
[36m
|
|
2
|
+
[1mlib/index.js[22m → [1mdist/motion.dev.js[22m...[39m
|
|
3
|
+
[32mcreated [1mdist/motion.dev.js[22m in [1m563ms[22m[39m
|
|
4
|
+
[36m
|
|
5
|
+
[1mlib/index.js[22m → [1mdist/motion.js[22m...[39m
|
|
6
|
+
[32mcreated [1mdist/motion.js[22m in [1m897ms[22m[39m
|
|
7
|
+
[36m
|
|
8
|
+
[1mlib/index.js[22m → [1mdist/cjs[22m...[39m
|
|
9
|
+
[32mcreated [1mdist/cjs[22m in [1m237ms[22m[39m
|
|
10
|
+
[36m
|
|
11
|
+
[1mlib/react-client.js[22m → [1mdist/cjs[22m...[39m
|
|
12
|
+
[32mcreated [1mdist/cjs[22m in [1m271ms[22m[39m
|
|
13
|
+
[36m
|
|
14
|
+
[1mlib/react.js[22m → [1mdist/cjs[22m...[39m
|
|
15
|
+
[32mcreated [1mdist/cjs[22m in [1m2ms[22m[39m
|
|
16
|
+
[36m
|
|
17
|
+
[1mlib/mini.js[22m → [1mdist/cjs[22m...[39m
|
|
18
|
+
[32mcreated [1mdist/cjs[22m in [1m64ms[22m[39m
|
|
19
|
+
[36m
|
|
20
|
+
[1mlib/react-mini.js[22m → [1mdist/cjs[22m...[39m
|
|
21
|
+
[32mcreated [1mdist/cjs[22m in [1m76ms[22m[39m
|
|
22
|
+
[36m
|
|
23
|
+
[1mlib/react-m.js[22m → [1mdist/cjs[22m...[39m
|
|
24
|
+
[32mcreated [1mdist/cjs[22m in [1m55ms[22m[39m
|
|
25
|
+
[36m
|
|
26
|
+
[1mlib/index.js, lib/mini.js, lib/react.js, lib/react-mini.js, lib/react-client.js, lib/react-m.js[22m → [1mdist/es[22m...[39m
|
|
27
|
+
[32mcreated [1mdist/es[22m in [1m543ms[22m[39m
|
|
28
|
+
[36m
|
|
29
|
+
[1mtypes/index.d.ts[22m → [1mdist/index.d.ts[22m...[39m
|
|
30
|
+
[32mcreated [1mdist/index.d.ts[22m in [1m8ms[22m[39m
|
|
31
|
+
[36m
|
|
32
|
+
[1mtypes/react.d.ts[22m → [1mdist/react.d.ts[22m...[39m
|
|
33
|
+
[32mcreated [1mdist/react.d.ts[22m in [1m4ms[22m[39m
|
|
34
|
+
[36m
|
|
35
|
+
[1mtypes/react-mini.d.ts[22m → [1mdist/react-mini.d.ts[22m...[39m
|
|
36
|
+
[32mcreated [1mdist/react-mini.d.ts[22m in [1m2ms[22m[39m
|
|
37
|
+
[36m
|
|
38
|
+
[1mtypes/react-m.d.ts[22m → [1mdist/react-m.d.ts[22m...[39m
|
|
39
|
+
[32mcreated [1mdist/react-m.d.ts[22m in [1m1ms[22m[39m
|
|
40
|
+
[36m
|
|
41
|
+
[1mtypes/mini.d.ts[22m → [1mdist/mini.d.ts[22m...[39m
|
|
42
|
+
[32mcreated [1mdist/mini.d.ts[22m in [1m2ms[22m[39m
|
|
43
|
+
[36m
|
|
44
|
+
[1mtypes/react-client.d.ts[22m → [1mdist/react-client.d.ts[22m...[39m
|
|
45
|
+
[32mcreated [1mdist/react-client.d.ts[22m in [1m3ms[22m[39m
|
package/dist/cjs/index.js
CHANGED
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const noop = (any) => any;
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
let warning = noop;
|
|
8
8
|
exports.invariant = noop;
|
|
9
9
|
if (process.env.NODE_ENV !== "production") {
|
|
10
|
-
|
|
10
|
+
warning = (check, message) => {
|
|
11
11
|
if (!check && typeof console !== "undefined") {
|
|
12
12
|
console.warn(message);
|
|
13
13
|
}
|
|
@@ -40,27 +40,12 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
|
40
40
|
return Array.from(elementOrSelector);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return;
|
|
50
|
-
const { target } = enterEvent;
|
|
51
|
-
const onHoverEnd = onHoverStart(enterEvent);
|
|
52
|
-
if (onHoverEnd && target) {
|
|
53
|
-
const onPointerLeave = (leaveEvent) => {
|
|
54
|
-
onHoverEnd(leaveEvent);
|
|
55
|
-
target.removeEventListener("pointerleave", onPointerLeave);
|
|
56
|
-
};
|
|
57
|
-
target.addEventListener("pointerleave", onPointerLeave, options);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
elements.forEach((element) => {
|
|
61
|
-
element.addEventListener("pointerenter", onPointerEnter, options);
|
|
62
|
-
});
|
|
63
|
-
return () => cancelGesture.abort();
|
|
43
|
+
const isDragging = {
|
|
44
|
+
x: false,
|
|
45
|
+
y: false,
|
|
46
|
+
};
|
|
47
|
+
function isDragActive() {
|
|
48
|
+
return isDragging.y;
|
|
64
49
|
}
|
|
65
50
|
|
|
66
51
|
function addUniqueItem(arr, item) {
|
|
@@ -338,7 +323,7 @@ class MotionValue {
|
|
|
338
323
|
* This will be replaced by the build step with the latest version number.
|
|
339
324
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
340
325
|
*/
|
|
341
|
-
this.version = "11.13.0
|
|
326
|
+
this.version = "11.13.0";
|
|
342
327
|
/**
|
|
343
328
|
* Tracks whether this value can output a velocity. Currently this is only true
|
|
344
329
|
* if the value is numerical, but we might be able to widen the scope here and support
|
|
@@ -787,7 +772,7 @@ const safeMin = 0.001;
|
|
|
787
772
|
function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
|
|
788
773
|
let envelope;
|
|
789
774
|
let derivative;
|
|
790
|
-
|
|
775
|
+
warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
|
|
791
776
|
let dampingRatio = 1 - bounce;
|
|
792
777
|
/**
|
|
793
778
|
* Restrict dampingRatio and duration to within acceptable ranges.
|
|
@@ -2458,7 +2443,7 @@ function canAnimate(keyframes, name, type, velocity) {
|
|
|
2458
2443
|
const targetKeyframe = keyframes[keyframes.length - 1];
|
|
2459
2444
|
const isOriginAnimatable = isAnimatable(originKeyframe, name);
|
|
2460
2445
|
const isTargetAnimatable = isAnimatable(targetKeyframe, name);
|
|
2461
|
-
|
|
2446
|
+
warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
|
|
2462
2447
|
// Always skip if any of these are true
|
|
2463
2448
|
if (!isOriginAnimatable || !isTargetAnimatable) {
|
|
2464
2449
|
return false;
|
|
@@ -2761,7 +2746,7 @@ const colorTypes = [hex, rgba, hsla];
|
|
|
2761
2746
|
const getColorType = (v) => colorTypes.find((type) => type.test(v));
|
|
2762
2747
|
function asRGBA(color) {
|
|
2763
2748
|
const type = getColorType(color);
|
|
2764
|
-
|
|
2749
|
+
warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
|
|
2765
2750
|
if (!Boolean(type))
|
|
2766
2751
|
return false;
|
|
2767
2752
|
let model = type.parse(color);
|
|
@@ -2880,7 +2865,7 @@ const mixComplex = (origin, target) => {
|
|
|
2880
2865
|
return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
|
|
2881
2866
|
}
|
|
2882
2867
|
else {
|
|
2883
|
-
|
|
2868
|
+
warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
|
|
2884
2869
|
return mixImmediate(origin, target);
|
|
2885
2870
|
}
|
|
2886
2871
|
};
|
|
@@ -4175,7 +4160,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
4175
4160
|
* and warn against mismatches.
|
|
4176
4161
|
*/
|
|
4177
4162
|
if (process.env.NODE_ENV === "development") {
|
|
4178
|
-
warnOnce(nextValue.version === "11.13.0
|
|
4163
|
+
warnOnce(nextValue.version === "11.13.0", `Attempting to mix Motion versions ${nextValue.version} with 11.13.0 may not work as expected.`);
|
|
4179
4164
|
}
|
|
4180
4165
|
}
|
|
4181
4166
|
else if (isMotionValue(prevValue)) {
|
|
@@ -6196,10 +6181,10 @@ exports.easeOut = easeOut;
|
|
|
6196
6181
|
exports.frame = frame;
|
|
6197
6182
|
exports.frameData = frameData;
|
|
6198
6183
|
exports.frameSteps = frameSteps;
|
|
6199
|
-
exports.hover = hover;
|
|
6200
6184
|
exports.inView = inView;
|
|
6201
6185
|
exports.inertia = inertia;
|
|
6202
6186
|
exports.interpolate = interpolate;
|
|
6187
|
+
exports.isDragActive = isDragActive;
|
|
6203
6188
|
exports.keyframes = keyframes;
|
|
6204
6189
|
exports.mirrorEasing = mirrorEasing;
|
|
6205
6190
|
exports.mix = mix;
|
|
@@ -6207,7 +6192,6 @@ exports.motionValue = motionValue;
|
|
|
6207
6192
|
exports.noop = noop;
|
|
6208
6193
|
exports.pipe = pipe;
|
|
6209
6194
|
exports.progress = progress;
|
|
6210
|
-
exports.resolveElements = resolveElements;
|
|
6211
6195
|
exports.reverseEasing = reverseEasing;
|
|
6212
6196
|
exports.scroll = scroll;
|
|
6213
6197
|
exports.scrollInfo = scrollInfo;
|
package/dist/cjs/react-client.js
CHANGED
|
@@ -3348,7 +3348,7 @@ class MotionValue {
|
|
|
3348
3348
|
* This will be replaced by the build step with the latest version number.
|
|
3349
3349
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
3350
3350
|
*/
|
|
3351
|
-
this.version = "11.13.0
|
|
3351
|
+
this.version = "11.13.0";
|
|
3352
3352
|
/**
|
|
3353
3353
|
* Tracks whether this value can output a velocity. Currently this is only true
|
|
3354
3354
|
* if the value is numerical, but we might be able to widen the scope here and support
|
|
@@ -4254,6 +4254,102 @@ const animations = {
|
|
|
4254
4254
|
},
|
|
4255
4255
|
};
|
|
4256
4256
|
|
|
4257
|
+
function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
4258
|
+
var _a;
|
|
4259
|
+
if (elementOrSelector instanceof Element) {
|
|
4260
|
+
return [elementOrSelector];
|
|
4261
|
+
}
|
|
4262
|
+
else if (typeof elementOrSelector === "string") {
|
|
4263
|
+
let root = document;
|
|
4264
|
+
if (scope) {
|
|
4265
|
+
// TODO: Refactor to utils package
|
|
4266
|
+
// invariant(
|
|
4267
|
+
// Boolean(scope.current),
|
|
4268
|
+
// "Scope provided, but no element detected."
|
|
4269
|
+
// )
|
|
4270
|
+
root = scope.current;
|
|
4271
|
+
}
|
|
4272
|
+
const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
|
|
4273
|
+
return elements ? Array.from(elements) : [];
|
|
4274
|
+
}
|
|
4275
|
+
return Array.from(elementOrSelector);
|
|
4276
|
+
}
|
|
4277
|
+
|
|
4278
|
+
const isDragging = {
|
|
4279
|
+
x: false,
|
|
4280
|
+
y: false,
|
|
4281
|
+
};
|
|
4282
|
+
function isDragActive() {
|
|
4283
|
+
return isDragging.x || isDragging.y;
|
|
4284
|
+
}
|
|
4285
|
+
|
|
4286
|
+
/**
|
|
4287
|
+
* Filter out events that are not pointer events, or are triggering
|
|
4288
|
+
* while a Motion gesture is active.
|
|
4289
|
+
*/
|
|
4290
|
+
function filterEvents(callback) {
|
|
4291
|
+
return (event) => {
|
|
4292
|
+
if (event.pointerType === "touch" || isDragActive())
|
|
4293
|
+
return;
|
|
4294
|
+
callback(event);
|
|
4295
|
+
};
|
|
4296
|
+
}
|
|
4297
|
+
/**
|
|
4298
|
+
* Create a hover gesture. hover() is different to .addEventListener("pointerenter")
|
|
4299
|
+
* in that it has an easier syntax, filters out polyfilled touch events, interoperates
|
|
4300
|
+
* with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
|
|
4301
|
+
*
|
|
4302
|
+
* @public
|
|
4303
|
+
*/
|
|
4304
|
+
function hover(elementOrSelector, onHoverStart, options = {}) {
|
|
4305
|
+
const gestureAbortController = new AbortController();
|
|
4306
|
+
const eventOptions = {
|
|
4307
|
+
passive: true,
|
|
4308
|
+
...options,
|
|
4309
|
+
signal: gestureAbortController.signal,
|
|
4310
|
+
};
|
|
4311
|
+
const onPointerEnter = filterEvents((enterEvent) => {
|
|
4312
|
+
const { target } = enterEvent;
|
|
4313
|
+
const onHoverEnd = onHoverStart(enterEvent);
|
|
4314
|
+
if (!onHoverEnd || !target)
|
|
4315
|
+
return;
|
|
4316
|
+
const onPointerLeave = filterEvents((leaveEvent) => {
|
|
4317
|
+
onHoverEnd(leaveEvent);
|
|
4318
|
+
target.removeEventListener("pointerleave", onPointerLeave);
|
|
4319
|
+
});
|
|
4320
|
+
target.addEventListener("pointerleave", onPointerLeave, eventOptions);
|
|
4321
|
+
});
|
|
4322
|
+
resolveElements(elementOrSelector).forEach((element) => {
|
|
4323
|
+
element.addEventListener("pointerenter", onPointerEnter, eventOptions);
|
|
4324
|
+
});
|
|
4325
|
+
return () => gestureAbortController.abort();
|
|
4326
|
+
}
|
|
4327
|
+
|
|
4328
|
+
function setDragLock(axis) {
|
|
4329
|
+
if (axis === "x" || axis === "y") {
|
|
4330
|
+
if (isDragging[axis]) {
|
|
4331
|
+
return null;
|
|
4332
|
+
}
|
|
4333
|
+
else {
|
|
4334
|
+
isDragging[axis] = true;
|
|
4335
|
+
return () => {
|
|
4336
|
+
isDragging[axis] = false;
|
|
4337
|
+
};
|
|
4338
|
+
}
|
|
4339
|
+
}
|
|
4340
|
+
else {
|
|
4341
|
+
if (isDragging.x || isDragging.y) {
|
|
4342
|
+
return null;
|
|
4343
|
+
}
|
|
4344
|
+
else {
|
|
4345
|
+
isDragging.x = isDragging.y = true;
|
|
4346
|
+
return () => {
|
|
4347
|
+
isDragging.x = isDragging.y = false;
|
|
4348
|
+
};
|
|
4349
|
+
}
|
|
4350
|
+
}
|
|
4351
|
+
}
|
|
4352
|
+
|
|
4257
4353
|
const isPrimaryPointer = (event) => {
|
|
4258
4354
|
if (event.pointerType === "mouse") {
|
|
4259
4355
|
return typeof event.button !== "number" || event.button <= 0;
|
|
@@ -4447,58 +4543,6 @@ function getVelocity(history, timeDelta) {
|
|
|
4447
4543
|
return currentVelocity;
|
|
4448
4544
|
}
|
|
4449
4545
|
|
|
4450
|
-
function createLock(name) {
|
|
4451
|
-
let lock = null;
|
|
4452
|
-
return () => {
|
|
4453
|
-
const openLock = () => {
|
|
4454
|
-
lock = null;
|
|
4455
|
-
};
|
|
4456
|
-
if (lock === null) {
|
|
4457
|
-
lock = name;
|
|
4458
|
-
return openLock;
|
|
4459
|
-
}
|
|
4460
|
-
return false;
|
|
4461
|
-
};
|
|
4462
|
-
}
|
|
4463
|
-
const globalHorizontalLock = createLock("dragHorizontal");
|
|
4464
|
-
const globalVerticalLock = createLock("dragVertical");
|
|
4465
|
-
function getGlobalLock(drag) {
|
|
4466
|
-
let lock = false;
|
|
4467
|
-
if (drag === "y") {
|
|
4468
|
-
lock = globalVerticalLock();
|
|
4469
|
-
}
|
|
4470
|
-
else if (drag === "x") {
|
|
4471
|
-
lock = globalHorizontalLock();
|
|
4472
|
-
}
|
|
4473
|
-
else {
|
|
4474
|
-
const openHorizontal = globalHorizontalLock();
|
|
4475
|
-
const openVertical = globalVerticalLock();
|
|
4476
|
-
if (openHorizontal && openVertical) {
|
|
4477
|
-
lock = () => {
|
|
4478
|
-
openHorizontal();
|
|
4479
|
-
openVertical();
|
|
4480
|
-
};
|
|
4481
|
-
}
|
|
4482
|
-
else {
|
|
4483
|
-
// Release the locks because we don't use them
|
|
4484
|
-
if (openHorizontal)
|
|
4485
|
-
openHorizontal();
|
|
4486
|
-
if (openVertical)
|
|
4487
|
-
openVertical();
|
|
4488
|
-
}
|
|
4489
|
-
}
|
|
4490
|
-
return lock;
|
|
4491
|
-
}
|
|
4492
|
-
function isDragActive() {
|
|
4493
|
-
// Check the gesture lock - if we get it, it means no drag gesture is active
|
|
4494
|
-
// and we can safely fire the tap gesture.
|
|
4495
|
-
const openGestureLock = getGlobalLock(true);
|
|
4496
|
-
if (!openGestureLock)
|
|
4497
|
-
return true;
|
|
4498
|
-
openGestureLock();
|
|
4499
|
-
return false;
|
|
4500
|
-
}
|
|
4501
|
-
|
|
4502
4546
|
function isRefObject(ref) {
|
|
4503
4547
|
return (ref &&
|
|
4504
4548
|
typeof ref === "object" &&
|
|
@@ -4894,10 +4938,7 @@ const elementDragControls = new WeakMap();
|
|
|
4894
4938
|
// let latestPointerEvent: PointerEvent
|
|
4895
4939
|
class VisualElementDragControls {
|
|
4896
4940
|
constructor(visualElement) {
|
|
4897
|
-
|
|
4898
|
-
// can "capture" the drag of one or both axes.
|
|
4899
|
-
// TODO: Look into moving this into pansession?
|
|
4900
|
-
this.openGlobalLock = null;
|
|
4941
|
+
this.openDragLock = null;
|
|
4901
4942
|
this.isDragging = false;
|
|
4902
4943
|
this.currentDirection = null;
|
|
4903
4944
|
this.originPoint = { x: 0, y: 0 };
|
|
@@ -4932,11 +4973,11 @@ class VisualElementDragControls {
|
|
|
4932
4973
|
// Attempt to grab the global drag gesture lock - maybe make this part of PanSession
|
|
4933
4974
|
const { drag, dragPropagation, onDragStart } = this.getProps();
|
|
4934
4975
|
if (drag && !dragPropagation) {
|
|
4935
|
-
if (this.
|
|
4936
|
-
this.
|
|
4937
|
-
this.
|
|
4976
|
+
if (this.openDragLock)
|
|
4977
|
+
this.openDragLock();
|
|
4978
|
+
this.openDragLock = setDragLock(drag);
|
|
4938
4979
|
// If we don 't have the lock, don't start dragging
|
|
4939
|
-
if (!this.
|
|
4980
|
+
if (!this.openDragLock)
|
|
4940
4981
|
return;
|
|
4941
4982
|
}
|
|
4942
4983
|
this.isDragging = true;
|
|
@@ -4978,7 +5019,7 @@ class VisualElementDragControls {
|
|
|
4978
5019
|
// latestPointerEvent = event
|
|
4979
5020
|
const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
|
|
4980
5021
|
// If we didn't successfully receive the gesture lock, early return.
|
|
4981
|
-
if (!dragPropagation && !this.
|
|
5022
|
+
if (!dragPropagation && !this.openDragLock)
|
|
4982
5023
|
return;
|
|
4983
5024
|
const { offset } = info;
|
|
4984
5025
|
// Attempt to detect drag direction if directionLock is true
|
|
@@ -5046,9 +5087,9 @@ class VisualElementDragControls {
|
|
|
5046
5087
|
this.panSession && this.panSession.end();
|
|
5047
5088
|
this.panSession = undefined;
|
|
5048
5089
|
const { dragPropagation } = this.getProps();
|
|
5049
|
-
if (!dragPropagation && this.
|
|
5050
|
-
this.
|
|
5051
|
-
this.
|
|
5090
|
+
if (!dragPropagation && this.openDragLock) {
|
|
5091
|
+
this.openDragLock();
|
|
5092
|
+
this.openDragLock = null;
|
|
5052
5093
|
}
|
|
5053
5094
|
animationState && animationState.setActive("whileDrag", false);
|
|
5054
5095
|
}
|
|
@@ -7686,28 +7727,25 @@ const drag = {
|
|
|
7686
7727
|
},
|
|
7687
7728
|
};
|
|
7688
7729
|
|
|
7689
|
-
function
|
|
7690
|
-
const
|
|
7691
|
-
|
|
7692
|
-
|
|
7693
|
-
|
|
7694
|
-
|
|
7695
|
-
|
|
7696
|
-
|
|
7697
|
-
|
|
7698
|
-
}
|
|
7699
|
-
const callback = props[callbackName];
|
|
7700
|
-
if (callback) {
|
|
7701
|
-
frame.postRender(() => callback(event, info));
|
|
7702
|
-
}
|
|
7703
|
-
};
|
|
7704
|
-
return addPointerEvent(node.current, eventName, handleEvent, {
|
|
7705
|
-
passive: !node.getProps()[callbackName],
|
|
7706
|
-
});
|
|
7730
|
+
function handleHoverEvent(node, event, isActive) {
|
|
7731
|
+
const { props } = node;
|
|
7732
|
+
if (node.animationState && props.whileHover) {
|
|
7733
|
+
node.animationState.setActive("whileHover", isActive);
|
|
7734
|
+
}
|
|
7735
|
+
const callback = props[isActive ? "onHoverStart" : "onHoverEnd"];
|
|
7736
|
+
if (callback) {
|
|
7737
|
+
frame.postRender(() => callback(event, extractEventInfo(event)));
|
|
7738
|
+
}
|
|
7707
7739
|
}
|
|
7708
7740
|
class HoverGesture extends Feature {
|
|
7709
7741
|
mount() {
|
|
7710
|
-
|
|
7742
|
+
const { current, props } = this.node;
|
|
7743
|
+
if (!current)
|
|
7744
|
+
return;
|
|
7745
|
+
this.unmount = hover(current, (startEvent) => {
|
|
7746
|
+
handleHoverEvent(this.node, startEvent, true);
|
|
7747
|
+
return (endEvent) => handleHoverEvent(this.node, endEvent, false);
|
|
7748
|
+
}, { passive: !props.onHoverStart && !props.onHoverEnd });
|
|
7711
7749
|
}
|
|
7712
7750
|
unmount() { }
|
|
7713
7751
|
}
|
|
@@ -9091,7 +9129,7 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
9091
9129
|
* and warn against mismatches.
|
|
9092
9130
|
*/
|
|
9093
9131
|
if (process.env.NODE_ENV === "development") {
|
|
9094
|
-
warnOnce(nextValue.version === "11.13.0
|
|
9132
|
+
warnOnce(nextValue.version === "11.13.0", `Attempting to mix Motion versions ${nextValue.version} with 11.13.0 may not work as expected.`);
|
|
9095
9133
|
}
|
|
9096
9134
|
}
|
|
9097
9135
|
else if (isMotionValue(prevValue)) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { resolveElements } from '../../../../../dom/dist/es/utils/resolve-elements.mjs';
|
|
1
|
+
import { resolveElements } from '../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
|
|
2
2
|
import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
|
|
3
3
|
|
|
4
4
|
function resolveSubjects(subject, keyframes, scope, selectorCache) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { invariant } from '../../../../../utils/dist/es/errors.mjs';
|
|
1
|
+
import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
2
|
import { visualElementStore } from '../../render/store.mjs';
|
|
3
3
|
import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
|
|
4
4
|
import { animateTarget } from '../interfaces/visual-element-target.mjs';
|
|
@@ -2,8 +2,8 @@ import { anticipate } from '../../easing/anticipate.mjs';
|
|
|
2
2
|
import { backInOut } from '../../easing/back.mjs';
|
|
3
3
|
import { circInOut } from '../../easing/circ.mjs';
|
|
4
4
|
import { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver.mjs';
|
|
5
|
-
import '../../../../../utils/dist/es/errors.mjs';
|
|
6
|
-
import { noop } from '../../../../../utils/dist/es/noop.mjs';
|
|
5
|
+
import '../../../../../motion-utils/dist/es/errors.mjs';
|
|
6
|
+
import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
|
|
7
7
|
import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';
|
|
8
8
|
import { isGenerator } from '../generators/utils/is-generator.mjs';
|
|
9
9
|
import { BaseAnimation } from './BaseAnimation.mjs';
|
|
@@ -8,7 +8,7 @@ import { mix } from '../../utils/mix/index.mjs';
|
|
|
8
8
|
import { calcGeneratorDuration } from '../generators/utils/calc-duration.mjs';
|
|
9
9
|
import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';
|
|
10
10
|
import { clamp } from '../../utils/clamp.mjs';
|
|
11
|
-
import { invariant } from '../../../../../utils/dist/es/errors.mjs';
|
|
11
|
+
import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
|
|
12
12
|
import { frameloopDriver } from './drivers/driver-frameloop.mjs';
|
|
13
13
|
import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
|
|
14
14
|
import { isGenerator } from '../generators/utils/is-generator.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { warning } from '../../../../../../utils/dist/es/errors.mjs';
|
|
1
|
+
import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
2
|
import { isGenerator } from '../../generators/utils/is-generator.mjs';
|
|
3
3
|
import { isAnimatable } from '../../utils/is-animatable.mjs';
|
|
4
4
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { startWaapiAnimation } from './index.mjs';
|
|
2
2
|
import { createGeneratorEasing } from '../../../easing/utils/create-generator-easing.mjs';
|
|
3
3
|
import { browserNumberValueTypes } from '../../../render/dom/value-types/number-browser.mjs';
|
|
4
|
-
import { invariant } from '../../../../../../utils/dist/es/errors.mjs';
|
|
5
|
-
import { noop } from '../../../../../../utils/dist/es/noop.mjs';
|
|
4
|
+
import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
|
|
5
|
+
import { noop } from '../../../../../../motion-utils/dist/es/noop.mjs';
|
|
6
6
|
import { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
|
|
7
7
|
import { isGenerator } from '../../generators/utils/is-generator.mjs';
|
|
8
8
|
import { attachTimeline } from './utils/attach-timeline.mjs';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { resolveElements } from '../../../../../../dom/dist/es/utils/resolve-elements.mjs';
|
|
2
|
-
import { invariant } from '../../../../../../utils/dist/es/errors.mjs';
|
|
1
|
+
import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
|
|
2
|
+
import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
|
|
3
3
|
import { secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
|
|
4
4
|
import { getValueTransition } from '../../utils/get-value-transition.mjs';
|
|
5
5
|
import { NativeAnimation } from './NativeAnimation.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { warning } from '../../../../../../utils/dist/es/errors.mjs';
|
|
1
|
+
import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
2
|
import { clamp } from '../../../utils/clamp.mjs';
|
|
3
3
|
import { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
|
|
4
4
|
import { springDefaults } from './defaults.mjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { invariant } from '../../../../../utils/dist/es/errors.mjs';
|
|
1
|
+
import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
2
|
import { setTarget } from '../../render/utils/setters.mjs';
|
|
3
3
|
import { animateVisualElement } from '../interfaces/visual-element.mjs';
|
|
4
4
|
|
|
@@ -3,8 +3,8 @@ import { startWaapiAnimation } from '../animators/waapi/index.mjs';
|
|
|
3
3
|
import { optimizedAppearDataId } from './data-id.mjs';
|
|
4
4
|
import { handoffOptimizedAppearAnimation } from './handoff.mjs';
|
|
5
5
|
import { appearAnimationStore, appearComplete } from './store.mjs';
|
|
6
|
-
import '../../../../../utils/dist/es/errors.mjs';
|
|
7
|
-
import { noop } from '../../../../../utils/dist/es/noop.mjs';
|
|
6
|
+
import '../../../../../motion-utils/dist/es/errors.mjs';
|
|
7
|
+
import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
|
|
8
8
|
import { getOptimisedAppearId } from './get-appear-id.mjs';
|
|
9
9
|
|
|
10
10
|
/**
|
|
@@ -3,7 +3,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useMemo, useRef, useState, useContext } from 'react';
|
|
4
4
|
import { PresenceChild } from './PresenceChild.mjs';
|
|
5
5
|
import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
|
|
6
|
-
import { invariant } from '../../../../../utils/dist/es/errors.mjs';
|
|
6
|
+
import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
|
|
7
7
|
import { useConstant } from '../../utils/use-constant.mjs';
|
|
8
8
|
import { onlyElements, getChildKey } from './utils.mjs';
|
|
9
9
|
import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { invariant } from '../../../../utils/dist/es/errors.mjs';
|
|
2
|
+
import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { useConstant } from '../utils/use-constant.mjs';
|
|
5
5
|
import { LayoutGroup } from './LayoutGroup/index.mjs';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { invariant } from '../../../../../utils/dist/es/errors.mjs';
|
|
3
|
+
import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
|
|
4
4
|
import { forwardRef, useRef, useEffect } from 'react';
|
|
5
5
|
import { ReorderContext } from '../../context/ReorderContext.mjs';
|
|
6
6
|
import { motion } from '../../render/components/motion/proxy.mjs';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { invariant } from '../../../../../utils/dist/es/errors.mjs';
|
|
3
|
+
import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
|
|
4
4
|
import { forwardRef, useContext } from 'react';
|
|
5
5
|
import { ReorderContext } from '../../context/ReorderContext.mjs';
|
|
6
6
|
import { motion } from '../../render/components/motion/proxy.mjs';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { invariant } from '../../../../../utils/dist/es/errors.mjs';
|
|
2
|
-
import { noop } from '../../../../../utils/dist/es/noop.mjs';
|
|
1
|
+
import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
|
|
2
|
+
import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
|
|
3
3
|
import { cubicBezier } from '../cubic-bezier.mjs';
|
|
4
4
|
import { easeIn, easeInOut, easeOut } from '../ease.mjs';
|
|
5
5
|
import { circIn, circInOut, circOut } from '../circ.mjs';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '../../../../utils/dist/es/errors.mjs';
|
|
2
|
-
import { noop } from '../../../../utils/dist/es/noop.mjs';
|
|
1
|
+
import '../../../../motion-utils/dist/es/errors.mjs';
|
|
2
|
+
import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
|
|
3
3
|
import { createRenderBatcher } from './batcher.mjs';
|
|
4
4
|
|
|
5
5
|
const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
|