framer-motion 12.11.4 → 12.12.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.
- package/dist/cjs/client.js +1 -1
- package/dist/cjs/{create-t9legXtK.js → create-DCF2FFGK.js} +76 -84
- package/dist/cjs/dom-mini.js +1 -3
- package/dist/cjs/dom.js +18 -24
- package/dist/cjs/index.js +21 -57
- package/dist/cjs/m.js +113 -115
- package/dist/dom.js +1 -1
- package/dist/es/animation/animate/single-value.mjs +1 -2
- package/dist/es/animation/animate/subject.mjs +1 -1
- package/dist/es/animation/sequence/create.mjs +1 -2
- package/dist/es/animation/utils/create-visual-element.mjs +2 -2
- package/dist/es/components/AnimatePresence/PopChild.mjs +4 -1
- package/dist/es/components/Reorder/Item.mjs +1 -1
- package/dist/es/index.mjs +0 -1
- package/dist/es/projection/node/create-projection-node.mjs +2 -3
- package/dist/es/render/VisualElement.mjs +1 -2
- package/dist/es/render/dom/DOMVisualElement.mjs +1 -2
- package/dist/es/render/dom/resize/handle-element.mjs +2 -2
- package/dist/es/render/dom/scroll/offsets/inset.mjs +3 -1
- package/dist/es/render/dom/use-render.mjs +2 -2
- package/dist/es/render/html/use-props.mjs +1 -1
- package/dist/es/render/html/utils/scrape-motion-values.mjs +1 -1
- package/dist/es/render/svg/utils/scrape-motion-values.mjs +1 -2
- package/dist/es/render/utils/motion-values.mjs +1 -2
- package/dist/es/value/use-motion-template.mjs +1 -1
- package/dist/es/value/use-spring.mjs +12 -52
- package/dist/es/value/use-will-change/is.mjs +1 -1
- package/dist/es/value/utils/resolve-motion-value.mjs +1 -1
- package/dist/framer-motion.dev.js +768 -710
- package/dist/framer-motion.js +1 -1
- package/dist/m.d.ts +4 -4
- package/dist/size-rollup-animate.js +1 -1
- package/dist/size-rollup-dom-animation-assets.js +1 -1
- package/dist/size-rollup-dom-animation-m.js +1 -1
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max-assets.js +1 -1
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-rollup-m.js +1 -1
- package/dist/size-rollup-motion.js +1 -1
- package/dist/size-rollup-scroll.js +1 -1
- package/dist/types/client.d.ts +2 -2
- package/dist/types/index.d.ts +11 -13
- package/dist/{types.d-CQt5spQA.d.ts → types.d-CtuPurYT.d.ts} +3 -3
- package/package.json +4 -4
- package/dist/es/render/dom/utils/is-svg-element.mjs +0 -5
- package/dist/es/value/utils/is-motion-value.mjs +0 -3
package/dist/cjs/client.js
CHANGED
|
@@ -156,8 +156,6 @@ function calcRelativePosition(target, layout, parent) {
|
|
|
156
156
|
calcRelativeAxisPosition(target.y, layout.y, parent.y);
|
|
157
157
|
}
|
|
158
158
|
|
|
159
|
-
const isMotionValue = (value) => Boolean(value && value.getVelocity);
|
|
160
|
-
|
|
161
159
|
const isNotNull = (value) => value !== null;
|
|
162
160
|
function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
|
|
163
161
|
const resolvedKeyframes = keyframes.filter(isNotNull);
|
|
@@ -307,7 +305,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
|
|
|
307
305
|
};
|
|
308
306
|
|
|
309
307
|
function animateSingleValue(value, keyframes, options) {
|
|
310
|
-
const motionValue = isMotionValue(value) ? value : motionDom.motionValue(value);
|
|
308
|
+
const motionValue = motionDom.isMotionValue(value) ? value : motionDom.motionValue(value);
|
|
311
309
|
motionValue.start(animateMotionValue("", motionValue, keyframes, options));
|
|
312
310
|
return motionValue.animation;
|
|
313
311
|
}
|
|
@@ -324,10 +322,6 @@ function getOptimisedAppearId(visualElement) {
|
|
|
324
322
|
return visualElement.props[optimizedAppearDataAttribute];
|
|
325
323
|
}
|
|
326
324
|
|
|
327
|
-
function isSVGElement(element) {
|
|
328
|
-
return element instanceof SVGElement && element.tagName !== "svg";
|
|
329
|
-
}
|
|
330
|
-
|
|
331
325
|
const compareByDepth = (a, b) => a.depth - b.depth;
|
|
332
326
|
|
|
333
327
|
class FlatTree {
|
|
@@ -372,7 +366,7 @@ function delay(callback, timeout) {
|
|
|
372
366
|
* TODO: Remove and move to library
|
|
373
367
|
*/
|
|
374
368
|
function resolveMotionValue(value) {
|
|
375
|
-
return isMotionValue(value) ? value.get() : value;
|
|
369
|
+
return motionDom.isMotionValue(value) ? value.get() : value;
|
|
376
370
|
}
|
|
377
371
|
|
|
378
372
|
const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
|
|
@@ -1125,7 +1119,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
|
|
|
1125
1119
|
mount(instance) {
|
|
1126
1120
|
if (this.instance)
|
|
1127
1121
|
return;
|
|
1128
|
-
this.isSVG = isSVGElement(instance);
|
|
1122
|
+
this.isSVG = motionDom.isSVGElement(instance) && !motionDom.isSVGSVGElement(instance);
|
|
1129
1123
|
this.instance = instance;
|
|
1130
1124
|
const { layoutId, layout, visualElement } = this.options;
|
|
1131
1125
|
if (visualElement && !visualElement.current) {
|
|
@@ -2713,14 +2707,14 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
2713
2707
|
for (const key in next) {
|
|
2714
2708
|
const nextValue = next[key];
|
|
2715
2709
|
const prevValue = prev[key];
|
|
2716
|
-
if (isMotionValue(nextValue)) {
|
|
2710
|
+
if (motionDom.isMotionValue(nextValue)) {
|
|
2717
2711
|
/**
|
|
2718
2712
|
* If this is a motion value found in props or style, we want to add it
|
|
2719
2713
|
* to our visual element's motion value map.
|
|
2720
2714
|
*/
|
|
2721
2715
|
element.addValue(key, nextValue);
|
|
2722
2716
|
}
|
|
2723
|
-
else if (isMotionValue(prevValue)) {
|
|
2717
|
+
else if (motionDom.isMotionValue(prevValue)) {
|
|
2724
2718
|
/**
|
|
2725
2719
|
* If we're swapping from a motion value to a static value,
|
|
2726
2720
|
* create a new motion value from that
|
|
@@ -2916,7 +2910,7 @@ class VisualElement {
|
|
|
2916
2910
|
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
|
|
2917
2911
|
for (const key in initialMotionValues) {
|
|
2918
2912
|
const value = initialMotionValues[key];
|
|
2919
|
-
if (latestValues[key] !== undefined && isMotionValue(value)) {
|
|
2913
|
+
if (latestValues[key] !== undefined && motionDom.isMotionValue(value)) {
|
|
2920
2914
|
value.set(latestValues[key], false);
|
|
2921
2915
|
}
|
|
2922
2916
|
}
|
|
@@ -3187,9 +3181,9 @@ class VisualElement {
|
|
|
3187
3181
|
else if (!motionDom.findValueType(value) && motionDom.complex.test(target)) {
|
|
3188
3182
|
value = motionDom.getAnimatableNone(key, target);
|
|
3189
3183
|
}
|
|
3190
|
-
this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
|
|
3184
|
+
this.setBaseTarget(key, motionDom.isMotionValue(value) ? value.get() : value);
|
|
3191
3185
|
}
|
|
3192
|
-
return isMotionValue(value) ? value.get() : value;
|
|
3186
|
+
return motionDom.isMotionValue(value) ? value.get() : value;
|
|
3193
3187
|
}
|
|
3194
3188
|
/**
|
|
3195
3189
|
* Set the base target to later animate back to. This is currently
|
|
@@ -3222,7 +3216,7 @@ class VisualElement {
|
|
|
3222
3216
|
* so we can read the value from an alternative source, try that.
|
|
3223
3217
|
*/
|
|
3224
3218
|
const target = this.getBaseTargetFromProps(this.props, key);
|
|
3225
|
-
if (target !== undefined && !isMotionValue(target))
|
|
3219
|
+
if (target !== undefined && !motionDom.isMotionValue(target))
|
|
3226
3220
|
return target;
|
|
3227
3221
|
/**
|
|
3228
3222
|
* If the value was initially defined on initial, but it doesn't any more,
|
|
@@ -3274,7 +3268,7 @@ class DOMVisualElement extends VisualElement {
|
|
|
3274
3268
|
delete this.childSubscription;
|
|
3275
3269
|
}
|
|
3276
3270
|
const { children } = this.props;
|
|
3277
|
-
if (isMotionValue(children)) {
|
|
3271
|
+
if (motionDom.isMotionValue(children)) {
|
|
3278
3272
|
this.childSubscription = children.on("change", (latest) => {
|
|
3279
3273
|
if (this.current) {
|
|
3280
3274
|
this.current.textContent = `${latest}`;
|
|
@@ -3418,9 +3412,9 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
|
|
|
3418
3412
|
const { style } = props;
|
|
3419
3413
|
const newValues = {};
|
|
3420
3414
|
for (const key in style) {
|
|
3421
|
-
if (isMotionValue(style[key]) ||
|
|
3415
|
+
if (motionDom.isMotionValue(style[key]) ||
|
|
3422
3416
|
(prevProps.style &&
|
|
3423
|
-
isMotionValue(prevProps.style[key])) ||
|
|
3417
|
+
motionDom.isMotionValue(prevProps.style[key])) ||
|
|
3424
3418
|
isForcedMotionValue(key, props) ||
|
|
3425
3419
|
visualElement?.getValue(key)?.liveStyle !== undefined) {
|
|
3426
3420
|
newValues[key] = style[key];
|
|
@@ -3622,7 +3616,7 @@ function setTarget(visualElement, definition) {
|
|
|
3622
3616
|
}
|
|
3623
3617
|
|
|
3624
3618
|
function isWillChangeMotionValue(value) {
|
|
3625
|
-
return Boolean(isMotionValue(value) && value.add);
|
|
3619
|
+
return Boolean(motionDom.isMotionValue(value) && value.add);
|
|
3626
3620
|
}
|
|
3627
3621
|
|
|
3628
3622
|
function addValueToWillChange(visualElement, key) {
|
|
@@ -5715,7 +5709,7 @@ const createHtmlRenderState = () => ({
|
|
|
5715
5709
|
|
|
5716
5710
|
function copyRawValuesOnly(target, source, props) {
|
|
5717
5711
|
for (const key in source) {
|
|
5718
|
-
if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
|
|
5712
|
+
if (!motionDom.isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
|
|
5719
5713
|
target[key] = source[key];
|
|
5720
5714
|
}
|
|
5721
5715
|
}
|
|
@@ -5763,65 +5757,6 @@ function useHTMLProps(props, visualState) {
|
|
|
5763
5757
|
return htmlProps;
|
|
5764
5758
|
}
|
|
5765
5759
|
|
|
5766
|
-
/**
|
|
5767
|
-
* We keep these listed separately as we use the lowercase tag names as part
|
|
5768
|
-
* of the runtime bundle to detect SVG components
|
|
5769
|
-
*/
|
|
5770
|
-
const lowercaseSVGElements = [
|
|
5771
|
-
"animate",
|
|
5772
|
-
"circle",
|
|
5773
|
-
"defs",
|
|
5774
|
-
"desc",
|
|
5775
|
-
"ellipse",
|
|
5776
|
-
"g",
|
|
5777
|
-
"image",
|
|
5778
|
-
"line",
|
|
5779
|
-
"filter",
|
|
5780
|
-
"marker",
|
|
5781
|
-
"mask",
|
|
5782
|
-
"metadata",
|
|
5783
|
-
"path",
|
|
5784
|
-
"pattern",
|
|
5785
|
-
"polygon",
|
|
5786
|
-
"polyline",
|
|
5787
|
-
"rect",
|
|
5788
|
-
"stop",
|
|
5789
|
-
"switch",
|
|
5790
|
-
"symbol",
|
|
5791
|
-
"svg",
|
|
5792
|
-
"text",
|
|
5793
|
-
"tspan",
|
|
5794
|
-
"use",
|
|
5795
|
-
"view",
|
|
5796
|
-
];
|
|
5797
|
-
|
|
5798
|
-
function isSVGComponent(Component) {
|
|
5799
|
-
if (
|
|
5800
|
-
/**
|
|
5801
|
-
* If it's not a string, it's a custom React component. Currently we only support
|
|
5802
|
-
* HTML custom React components.
|
|
5803
|
-
*/
|
|
5804
|
-
typeof Component !== "string" ||
|
|
5805
|
-
/**
|
|
5806
|
-
* If it contains a dash, the element is a custom HTML webcomponent.
|
|
5807
|
-
*/
|
|
5808
|
-
Component.includes("-")) {
|
|
5809
|
-
return false;
|
|
5810
|
-
}
|
|
5811
|
-
else if (
|
|
5812
|
-
/**
|
|
5813
|
-
* If it's in our list of lowercase SVG tags, it's an SVG component
|
|
5814
|
-
*/
|
|
5815
|
-
lowercaseSVGElements.indexOf(Component) > -1 ||
|
|
5816
|
-
/**
|
|
5817
|
-
* If it contains a capital letter, it's an SVG component
|
|
5818
|
-
*/
|
|
5819
|
-
/[A-Z]/u.test(Component)) {
|
|
5820
|
-
return true;
|
|
5821
|
-
}
|
|
5822
|
-
return false;
|
|
5823
|
-
}
|
|
5824
|
-
|
|
5825
5760
|
const dashKeys = {
|
|
5826
5761
|
offset: "stroke-dashoffset",
|
|
5827
5762
|
array: "stroke-dasharray",
|
|
@@ -5928,6 +5863,65 @@ function useSVGProps(props, visualState, _isStatic, Component) {
|
|
|
5928
5863
|
return visualProps;
|
|
5929
5864
|
}
|
|
5930
5865
|
|
|
5866
|
+
/**
|
|
5867
|
+
* We keep these listed separately as we use the lowercase tag names as part
|
|
5868
|
+
* of the runtime bundle to detect SVG components
|
|
5869
|
+
*/
|
|
5870
|
+
const lowercaseSVGElements = [
|
|
5871
|
+
"animate",
|
|
5872
|
+
"circle",
|
|
5873
|
+
"defs",
|
|
5874
|
+
"desc",
|
|
5875
|
+
"ellipse",
|
|
5876
|
+
"g",
|
|
5877
|
+
"image",
|
|
5878
|
+
"line",
|
|
5879
|
+
"filter",
|
|
5880
|
+
"marker",
|
|
5881
|
+
"mask",
|
|
5882
|
+
"metadata",
|
|
5883
|
+
"path",
|
|
5884
|
+
"pattern",
|
|
5885
|
+
"polygon",
|
|
5886
|
+
"polyline",
|
|
5887
|
+
"rect",
|
|
5888
|
+
"stop",
|
|
5889
|
+
"switch",
|
|
5890
|
+
"symbol",
|
|
5891
|
+
"svg",
|
|
5892
|
+
"text",
|
|
5893
|
+
"tspan",
|
|
5894
|
+
"use",
|
|
5895
|
+
"view",
|
|
5896
|
+
];
|
|
5897
|
+
|
|
5898
|
+
function isSVGComponent(Component) {
|
|
5899
|
+
if (
|
|
5900
|
+
/**
|
|
5901
|
+
* If it's not a string, it's a custom React component. Currently we only support
|
|
5902
|
+
* HTML custom React components.
|
|
5903
|
+
*/
|
|
5904
|
+
typeof Component !== "string" ||
|
|
5905
|
+
/**
|
|
5906
|
+
* If it contains a dash, the element is a custom HTML webcomponent.
|
|
5907
|
+
*/
|
|
5908
|
+
Component.includes("-")) {
|
|
5909
|
+
return false;
|
|
5910
|
+
}
|
|
5911
|
+
else if (
|
|
5912
|
+
/**
|
|
5913
|
+
* If it's in our list of lowercase SVG tags, it's an SVG component
|
|
5914
|
+
*/
|
|
5915
|
+
lowercaseSVGElements.indexOf(Component) > -1 ||
|
|
5916
|
+
/**
|
|
5917
|
+
* If it contains a capital letter, it's an SVG component
|
|
5918
|
+
*/
|
|
5919
|
+
/[A-Z]/u.test(Component)) {
|
|
5920
|
+
return true;
|
|
5921
|
+
}
|
|
5922
|
+
return false;
|
|
5923
|
+
}
|
|
5924
|
+
|
|
5931
5925
|
function createUseRender(forwardMotionProps = false) {
|
|
5932
5926
|
const useRender = (Component, props, ref, { latestValues }, isStatic) => {
|
|
5933
5927
|
const useVisualProps = isSVGComponent(Component)
|
|
@@ -5944,7 +5938,7 @@ function createUseRender(forwardMotionProps = false) {
|
|
|
5944
5938
|
* will be handled by the onChange handler
|
|
5945
5939
|
*/
|
|
5946
5940
|
const { children } = props;
|
|
5947
|
-
const renderedChildren = React.useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
|
|
5941
|
+
const renderedChildren = React.useMemo(() => (motionDom.isMotionValue(children) ? children.get() : children), [children]);
|
|
5948
5942
|
return React.createElement(Component, {
|
|
5949
5943
|
...elementProps,
|
|
5950
5944
|
children: renderedChildren,
|
|
@@ -6032,8 +6026,8 @@ const htmlMotionConfig = {
|
|
|
6032
6026
|
function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
|
6033
6027
|
const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
|
|
6034
6028
|
for (const key in props) {
|
|
6035
|
-
if (isMotionValue(props[key]) ||
|
|
6036
|
-
isMotionValue(prevProps[key])) {
|
|
6029
|
+
if (motionDom.isMotionValue(props[key]) ||
|
|
6030
|
+
motionDom.isMotionValue(prevProps[key])) {
|
|
6037
6031
|
const targetKey = motionDom.transformPropOrder.indexOf(key) !== -1
|
|
6038
6032
|
? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
|
|
6039
6033
|
: key;
|
|
@@ -6185,8 +6179,6 @@ exports.getOptimisedAppearId = getOptimisedAppearId;
|
|
|
6185
6179
|
exports.hasReducedMotionListener = hasReducedMotionListener;
|
|
6186
6180
|
exports.initPrefersReducedMotion = initPrefersReducedMotion;
|
|
6187
6181
|
exports.isBrowser = isBrowser;
|
|
6188
|
-
exports.isMotionValue = isMotionValue;
|
|
6189
|
-
exports.isSVGElement = isSVGElement;
|
|
6190
6182
|
exports.isValidMotionProp = isValidMotionProp;
|
|
6191
6183
|
exports.layout = layout;
|
|
6192
6184
|
exports.loadExternalIsValidProp = loadExternalIsValidProp;
|
package/dist/cjs/dom-mini.js
CHANGED
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var motionDom = require('motion-dom');
|
|
6
6
|
var motionUtils = require('motion-utils');
|
|
7
7
|
|
|
8
|
-
const isMotionValue = (value) => Boolean(value && value.getVelocity);
|
|
9
|
-
|
|
10
8
|
function isDOMKeyframes(keyframes) {
|
|
11
9
|
return typeof keyframes === "object" && !Array.isArray(keyframes);
|
|
12
10
|
}
|
|
@@ -229,7 +227,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
|
|
|
229
227
|
maxDuration = Math.max(calculatedDelay + duration, maxDuration);
|
|
230
228
|
totalDuration = Math.max(targetTime, totalDuration);
|
|
231
229
|
};
|
|
232
|
-
if (isMotionValue(subject)) {
|
|
230
|
+
if (motionDom.isMotionValue(subject)) {
|
|
233
231
|
const subjectSequence = getSubjectSequence(subject, sequences);
|
|
234
232
|
resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
|
|
235
233
|
}
|
package/dist/cjs/dom.js
CHANGED
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var motionDom = require('motion-dom');
|
|
6
6
|
var motionUtils = require('motion-utils');
|
|
7
7
|
|
|
8
|
-
const isMotionValue = (value) => Boolean(value && value.getVelocity);
|
|
9
|
-
|
|
10
8
|
function isDOMKeyframes(keyframes) {
|
|
11
9
|
return typeof keyframes === "object" && !Array.isArray(keyframes);
|
|
12
10
|
}
|
|
@@ -229,7 +227,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
|
|
|
229
227
|
maxDuration = Math.max(calculatedDelay + duration, maxDuration);
|
|
230
228
|
totalDuration = Math.max(targetTime, totalDuration);
|
|
231
229
|
};
|
|
232
|
-
if (isMotionValue(subject)) {
|
|
230
|
+
if (motionDom.isMotionValue(subject)) {
|
|
233
231
|
const subjectSequence = getSubjectSequence(subject, sequences);
|
|
234
232
|
resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
|
|
235
233
|
}
|
|
@@ -412,7 +410,7 @@ function setTarget(visualElement, definition) {
|
|
|
412
410
|
}
|
|
413
411
|
|
|
414
412
|
function isWillChangeMotionValue(value) {
|
|
415
|
-
return Boolean(isMotionValue(value) && value.add);
|
|
413
|
+
return Boolean(motionDom.isMotionValue(value) && value.add);
|
|
416
414
|
}
|
|
417
415
|
|
|
418
416
|
function addValueToWillChange(visualElement, key) {
|
|
@@ -667,10 +665,6 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
|
|
|
667
665
|
return animations;
|
|
668
666
|
}
|
|
669
667
|
|
|
670
|
-
function isSVGElement(element) {
|
|
671
|
-
return element instanceof SVGElement && element.tagName !== "svg";
|
|
672
|
-
}
|
|
673
|
-
|
|
674
668
|
/**
|
|
675
669
|
* Bounding boxes tend to be defined as top, left, right, bottom. For various operations
|
|
676
670
|
* it's easier to consider each axis individually. This function returns a bounding box
|
|
@@ -794,14 +788,14 @@ function updateMotionValuesFromProps(element, next, prev) {
|
|
|
794
788
|
for (const key in next) {
|
|
795
789
|
const nextValue = next[key];
|
|
796
790
|
const prevValue = prev[key];
|
|
797
|
-
if (isMotionValue(nextValue)) {
|
|
791
|
+
if (motionDom.isMotionValue(nextValue)) {
|
|
798
792
|
/**
|
|
799
793
|
* If this is a motion value found in props or style, we want to add it
|
|
800
794
|
* to our visual element's motion value map.
|
|
801
795
|
*/
|
|
802
796
|
element.addValue(key, nextValue);
|
|
803
797
|
}
|
|
804
|
-
else if (isMotionValue(prevValue)) {
|
|
798
|
+
else if (motionDom.isMotionValue(prevValue)) {
|
|
805
799
|
/**
|
|
806
800
|
* If we're swapping from a motion value to a static value,
|
|
807
801
|
* create a new motion value from that
|
|
@@ -962,7 +956,7 @@ class VisualElement {
|
|
|
962
956
|
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
|
|
963
957
|
for (const key in initialMotionValues) {
|
|
964
958
|
const value = initialMotionValues[key];
|
|
965
|
-
if (latestValues[key] !== undefined && isMotionValue(value)) {
|
|
959
|
+
if (latestValues[key] !== undefined && motionDom.isMotionValue(value)) {
|
|
966
960
|
value.set(latestValues[key], false);
|
|
967
961
|
}
|
|
968
962
|
}
|
|
@@ -1233,9 +1227,9 @@ class VisualElement {
|
|
|
1233
1227
|
else if (!motionDom.findValueType(value) && motionDom.complex.test(target)) {
|
|
1234
1228
|
value = motionDom.getAnimatableNone(key, target);
|
|
1235
1229
|
}
|
|
1236
|
-
this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
|
|
1230
|
+
this.setBaseTarget(key, motionDom.isMotionValue(value) ? value.get() : value);
|
|
1237
1231
|
}
|
|
1238
|
-
return isMotionValue(value) ? value.get() : value;
|
|
1232
|
+
return motionDom.isMotionValue(value) ? value.get() : value;
|
|
1239
1233
|
}
|
|
1240
1234
|
/**
|
|
1241
1235
|
* Set the base target to later animate back to. This is currently
|
|
@@ -1268,7 +1262,7 @@ class VisualElement {
|
|
|
1268
1262
|
* so we can read the value from an alternative source, try that.
|
|
1269
1263
|
*/
|
|
1270
1264
|
const target = this.getBaseTargetFromProps(this.props, key);
|
|
1271
|
-
if (target !== undefined && !isMotionValue(target))
|
|
1265
|
+
if (target !== undefined && !motionDom.isMotionValue(target))
|
|
1272
1266
|
return target;
|
|
1273
1267
|
/**
|
|
1274
1268
|
* If the value was initially defined on initial, but it doesn't any more,
|
|
@@ -1320,7 +1314,7 @@ class DOMVisualElement extends VisualElement {
|
|
|
1320
1314
|
delete this.childSubscription;
|
|
1321
1315
|
}
|
|
1322
1316
|
const { children } = this.props;
|
|
1323
|
-
if (isMotionValue(children)) {
|
|
1317
|
+
if (motionDom.isMotionValue(children)) {
|
|
1324
1318
|
this.childSubscription = children.on("change", (latest) => {
|
|
1325
1319
|
if (this.current) {
|
|
1326
1320
|
this.current.textContent = `${latest}`;
|
|
@@ -1466,9 +1460,9 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
|
|
|
1466
1460
|
const { style } = props;
|
|
1467
1461
|
const newValues = {};
|
|
1468
1462
|
for (const key in style) {
|
|
1469
|
-
if (isMotionValue(style[key]) ||
|
|
1463
|
+
if (motionDom.isMotionValue(style[key]) ||
|
|
1470
1464
|
(prevProps.style &&
|
|
1471
|
-
isMotionValue(prevProps.style[key])) ||
|
|
1465
|
+
motionDom.isMotionValue(prevProps.style[key])) ||
|
|
1472
1466
|
isForcedMotionValue(key, props) ||
|
|
1473
1467
|
visualElement?.getValue(key)?.liveStyle !== undefined) {
|
|
1474
1468
|
newValues[key] = style[key];
|
|
@@ -1671,8 +1665,8 @@ function renderSVG(element, renderState, _styleProp, projection) {
|
|
|
1671
1665
|
function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
|
1672
1666
|
const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
|
|
1673
1667
|
for (const key in props) {
|
|
1674
|
-
if (isMotionValue(props[key]) ||
|
|
1675
|
-
isMotionValue(prevProps[key])) {
|
|
1668
|
+
if (motionDom.isMotionValue(props[key]) ||
|
|
1669
|
+
motionDom.isMotionValue(prevProps[key])) {
|
|
1676
1670
|
const targetKey = motionDom.transformPropOrder.indexOf(key) !== -1
|
|
1677
1671
|
? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
|
|
1678
1672
|
: key;
|
|
@@ -1730,7 +1724,7 @@ function createDOMVisualElement(element) {
|
|
|
1730
1724
|
latestValues: {},
|
|
1731
1725
|
},
|
|
1732
1726
|
};
|
|
1733
|
-
const node = isSVGElement(element)
|
|
1727
|
+
const node = motionDom.isSVGElement(element) && !motionDom.isSVGSVGElement(element)
|
|
1734
1728
|
? new SVGVisualElement(options)
|
|
1735
1729
|
: new HTMLVisualElement(options);
|
|
1736
1730
|
node.mount(element);
|
|
@@ -1753,13 +1747,13 @@ function createObjectVisualElement(subject) {
|
|
|
1753
1747
|
}
|
|
1754
1748
|
|
|
1755
1749
|
function animateSingleValue(value, keyframes, options) {
|
|
1756
|
-
const motionValue = isMotionValue(value) ? value : motionDom.motionValue(value);
|
|
1750
|
+
const motionValue = motionDom.isMotionValue(value) ? value : motionDom.motionValue(value);
|
|
1757
1751
|
motionValue.start(animateMotionValue("", motionValue, keyframes, options));
|
|
1758
1752
|
return motionValue.animation;
|
|
1759
1753
|
}
|
|
1760
1754
|
|
|
1761
1755
|
function isSingleValue(subject, keyframes) {
|
|
1762
|
-
return (isMotionValue(subject) ||
|
|
1756
|
+
return (motionDom.isMotionValue(subject) ||
|
|
1763
1757
|
typeof subject === "number" ||
|
|
1764
1758
|
(typeof subject === "string" && !isDOMKeyframes(keyframes)));
|
|
1765
1759
|
}
|
|
@@ -1954,7 +1948,7 @@ function getElementSize(target, borderBoxSize) {
|
|
|
1954
1948
|
const { inlineSize, blockSize } = borderBoxSize[0];
|
|
1955
1949
|
return { width: inlineSize, height: blockSize };
|
|
1956
1950
|
}
|
|
1957
|
-
else if (target
|
|
1951
|
+
else if (motionDom.isSVGElement(target) && "getBBox" in target) {
|
|
1958
1952
|
return target.getBBox();
|
|
1959
1953
|
}
|
|
1960
1954
|
else {
|
|
@@ -2096,7 +2090,7 @@ function calcInset(element, container) {
|
|
|
2096
2090
|
const inset = { x: 0, y: 0 };
|
|
2097
2091
|
let current = element;
|
|
2098
2092
|
while (current && current !== container) {
|
|
2099
|
-
if (current
|
|
2093
|
+
if (motionDom.isHTMLElement(current)) {
|
|
2100
2094
|
inset.x += current.offsetLeft;
|
|
2101
2095
|
inset.y += current.offsetTop;
|
|
2102
2096
|
current = current.offsetParent;
|
package/dist/cjs/index.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var create = require('./create-
|
|
7
|
+
var create = require('./create-DCF2FFGK.js');
|
|
8
8
|
var motionDom = require('motion-dom');
|
|
9
9
|
var motionUtils = require('motion-utils');
|
|
10
10
|
|
|
@@ -36,7 +36,9 @@ class PopChildMeasure extends React__namespace.Component {
|
|
|
36
36
|
const element = this.props.childRef.current;
|
|
37
37
|
if (element && prevProps.isPresent && !this.props.isPresent) {
|
|
38
38
|
const parent = element.offsetParent;
|
|
39
|
-
const parentWidth = parent
|
|
39
|
+
const parentWidth = motionDom.isHTMLElement(parent)
|
|
40
|
+
? parent.offsetWidth || 0
|
|
41
|
+
: 0;
|
|
40
42
|
const size = this.props.sizeRef.current;
|
|
41
43
|
size.height = element.offsetHeight || 0;
|
|
42
44
|
size.width = element.offsetWidth || 0;
|
|
@@ -709,7 +711,7 @@ function useListTransform(values, transformer) {
|
|
|
709
711
|
}
|
|
710
712
|
|
|
711
713
|
function useDefaultMotionValue(value, defaultValue = 0) {
|
|
712
|
-
return
|
|
714
|
+
return motionDom.isMotionValue(value) ? value : useMotionValue(defaultValue);
|
|
713
715
|
}
|
|
714
716
|
function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
|
|
715
717
|
const Component = create.useConstant(() => motion[as]);
|
|
@@ -958,7 +960,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
|
|
|
958
960
|
maxDuration = Math.max(calculatedDelay + duration, maxDuration);
|
|
959
961
|
totalDuration = Math.max(targetTime, totalDuration);
|
|
960
962
|
};
|
|
961
|
-
if (
|
|
963
|
+
if (motionDom.isMotionValue(subject)) {
|
|
962
964
|
const subjectSequence = getSubjectSequence(subject, sequences);
|
|
963
965
|
resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
|
|
964
966
|
}
|
|
@@ -1120,7 +1122,7 @@ function createDOMVisualElement(element) {
|
|
|
1120
1122
|
latestValues: {},
|
|
1121
1123
|
},
|
|
1122
1124
|
};
|
|
1123
|
-
const node =
|
|
1125
|
+
const node = motionDom.isSVGElement(element) && !motionDom.isSVGSVGElement(element)
|
|
1124
1126
|
? new create.SVGVisualElement(options)
|
|
1125
1127
|
: new create.HTMLVisualElement(options);
|
|
1126
1128
|
node.mount(element);
|
|
@@ -1143,7 +1145,7 @@ function createObjectVisualElement(subject) {
|
|
|
1143
1145
|
}
|
|
1144
1146
|
|
|
1145
1147
|
function isSingleValue(subject, keyframes) {
|
|
1146
|
-
return (
|
|
1148
|
+
return (motionDom.isMotionValue(subject) ||
|
|
1147
1149
|
typeof subject === "number" ||
|
|
1148
1150
|
(typeof subject === "string" && !isDOMKeyframes(keyframes)));
|
|
1149
1151
|
}
|
|
@@ -1338,7 +1340,7 @@ function getElementSize(target, borderBoxSize) {
|
|
|
1338
1340
|
const { inlineSize, blockSize } = borderBoxSize[0];
|
|
1339
1341
|
return { width: inlineSize, height: blockSize };
|
|
1340
1342
|
}
|
|
1341
|
-
else if (target
|
|
1343
|
+
else if (motionDom.isSVGElement(target) && "getBBox" in target) {
|
|
1342
1344
|
return target.getBBox();
|
|
1343
1345
|
}
|
|
1344
1346
|
else {
|
|
@@ -1480,7 +1482,7 @@ function calcInset(element, container) {
|
|
|
1480
1482
|
const inset = { x: 0, y: 0 };
|
|
1481
1483
|
let current = element;
|
|
1482
1484
|
while (current && current !== container) {
|
|
1483
|
-
if (current
|
|
1485
|
+
if (motionDom.isHTMLElement(current)) {
|
|
1484
1486
|
inset.x += current.offsetLeft;
|
|
1485
1487
|
inset.y += current.offsetTop;
|
|
1486
1488
|
current = current.offsetParent;
|
|
@@ -2048,64 +2050,27 @@ function useMotionTemplate(fragments, ...values) {
|
|
|
2048
2050
|
output += fragments[i];
|
|
2049
2051
|
const value = values[i];
|
|
2050
2052
|
if (value) {
|
|
2051
|
-
output +=
|
|
2053
|
+
output += motionDom.isMotionValue(value) ? value.get() : value;
|
|
2052
2054
|
}
|
|
2053
2055
|
}
|
|
2054
2056
|
return output;
|
|
2055
2057
|
}
|
|
2056
|
-
return useCombineMotionValues(values.filter(
|
|
2058
|
+
return useCombineMotionValues(values.filter(motionDom.isMotionValue), buildValue);
|
|
2057
2059
|
}
|
|
2058
2060
|
|
|
2059
|
-
function useSpring(source,
|
|
2061
|
+
function useSpring(source, options = {}) {
|
|
2060
2062
|
const { isStatic } = React.useContext(create.MotionConfigContext);
|
|
2061
|
-
const
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
const value = useMotionValue(
|
|
2067
|
-
const latestValue = React.useRef(initialValue);
|
|
2068
|
-
const latestSetter = React.useRef(motionUtils.noop);
|
|
2069
|
-
const startAnimation = () => {
|
|
2070
|
-
stopAnimation();
|
|
2071
|
-
activeSpringAnimation.current = new motionDom.JSAnimation({
|
|
2072
|
-
keyframes: [asNumber(value.get()), asNumber(latestValue.current)],
|
|
2073
|
-
velocity: value.getVelocity(),
|
|
2074
|
-
type: "spring",
|
|
2075
|
-
restDelta: 0.001,
|
|
2076
|
-
restSpeed: 0.01,
|
|
2077
|
-
...config,
|
|
2078
|
-
onUpdate: latestSetter.current,
|
|
2079
|
-
});
|
|
2080
|
-
};
|
|
2081
|
-
const stopAnimation = () => {
|
|
2082
|
-
if (activeSpringAnimation.current) {
|
|
2083
|
-
activeSpringAnimation.current.stop();
|
|
2084
|
-
}
|
|
2085
|
-
};
|
|
2063
|
+
const getFromSource = () => (motionDom.isMotionValue(source) ? source.get() : source);
|
|
2064
|
+
// isStatic will never change, allowing early hooks return
|
|
2065
|
+
if (isStatic) {
|
|
2066
|
+
return useTransform(getFromSource);
|
|
2067
|
+
}
|
|
2068
|
+
const value = useMotionValue(getFromSource());
|
|
2086
2069
|
React.useInsertionEffect(() => {
|
|
2087
|
-
return
|
|
2088
|
-
|
|
2089
|
-
return set(v);
|
|
2090
|
-
latestValue.current = v;
|
|
2091
|
-
latestSetter.current = (latest) => set(parseValue(latest, unit));
|
|
2092
|
-
motionDom.frame.postRender(startAnimation);
|
|
2093
|
-
return value.get();
|
|
2094
|
-
}, stopAnimation);
|
|
2095
|
-
}, [JSON.stringify(config)]);
|
|
2096
|
-
create.useIsomorphicLayoutEffect(() => {
|
|
2097
|
-
if (create.isMotionValue(source)) {
|
|
2098
|
-
return source.on("change", (v) => value.set(parseValue(v, unit)));
|
|
2099
|
-
}
|
|
2100
|
-
}, [value, unit]);
|
|
2070
|
+
return motionDom.attachSpring(value, source, options);
|
|
2071
|
+
}, [value, JSON.stringify(options)]);
|
|
2101
2072
|
return value;
|
|
2102
2073
|
}
|
|
2103
|
-
function parseValue(v, unit) {
|
|
2104
|
-
return unit ? v + unit : v;
|
|
2105
|
-
}
|
|
2106
|
-
function asNumber(v) {
|
|
2107
|
-
return typeof v === "number" ? v : parseFloat(v);
|
|
2108
|
-
}
|
|
2109
2074
|
|
|
2110
2075
|
function useAnimationFrame(callback) {
|
|
2111
2076
|
const initialTimestamp = React.useRef(0);
|
|
@@ -2962,7 +2927,6 @@ exports.distance = create.distance;
|
|
|
2962
2927
|
exports.distance2D = create.distance2D;
|
|
2963
2928
|
exports.filterProps = create.filterProps;
|
|
2964
2929
|
exports.isBrowser = create.isBrowser;
|
|
2965
|
-
exports.isMotionValue = create.isMotionValue;
|
|
2966
2930
|
exports.isValidMotionProp = create.isValidMotionProp;
|
|
2967
2931
|
exports.makeUseVisualState = create.makeUseVisualState;
|
|
2968
2932
|
exports.optimizedAppearDataAttribute = create.optimizedAppearDataAttribute;
|