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.
Files changed (46) hide show
  1. package/dist/cjs/client.js +1 -1
  2. package/dist/cjs/{create-t9legXtK.js → create-DCF2FFGK.js} +76 -84
  3. package/dist/cjs/dom-mini.js +1 -3
  4. package/dist/cjs/dom.js +18 -24
  5. package/dist/cjs/index.js +21 -57
  6. package/dist/cjs/m.js +113 -115
  7. package/dist/dom.js +1 -1
  8. package/dist/es/animation/animate/single-value.mjs +1 -2
  9. package/dist/es/animation/animate/subject.mjs +1 -1
  10. package/dist/es/animation/sequence/create.mjs +1 -2
  11. package/dist/es/animation/utils/create-visual-element.mjs +2 -2
  12. package/dist/es/components/AnimatePresence/PopChild.mjs +4 -1
  13. package/dist/es/components/Reorder/Item.mjs +1 -1
  14. package/dist/es/index.mjs +0 -1
  15. package/dist/es/projection/node/create-projection-node.mjs +2 -3
  16. package/dist/es/render/VisualElement.mjs +1 -2
  17. package/dist/es/render/dom/DOMVisualElement.mjs +1 -2
  18. package/dist/es/render/dom/resize/handle-element.mjs +2 -2
  19. package/dist/es/render/dom/scroll/offsets/inset.mjs +3 -1
  20. package/dist/es/render/dom/use-render.mjs +2 -2
  21. package/dist/es/render/html/use-props.mjs +1 -1
  22. package/dist/es/render/html/utils/scrape-motion-values.mjs +1 -1
  23. package/dist/es/render/svg/utils/scrape-motion-values.mjs +1 -2
  24. package/dist/es/render/utils/motion-values.mjs +1 -2
  25. package/dist/es/value/use-motion-template.mjs +1 -1
  26. package/dist/es/value/use-spring.mjs +12 -52
  27. package/dist/es/value/use-will-change/is.mjs +1 -1
  28. package/dist/es/value/utils/resolve-motion-value.mjs +1 -1
  29. package/dist/framer-motion.dev.js +768 -710
  30. package/dist/framer-motion.js +1 -1
  31. package/dist/m.d.ts +4 -4
  32. package/dist/size-rollup-animate.js +1 -1
  33. package/dist/size-rollup-dom-animation-assets.js +1 -1
  34. package/dist/size-rollup-dom-animation-m.js +1 -1
  35. package/dist/size-rollup-dom-animation.js +1 -1
  36. package/dist/size-rollup-dom-max-assets.js +1 -1
  37. package/dist/size-rollup-dom-max.js +1 -1
  38. package/dist/size-rollup-m.js +1 -1
  39. package/dist/size-rollup-motion.js +1 -1
  40. package/dist/size-rollup-scroll.js +1 -1
  41. package/dist/types/client.d.ts +2 -2
  42. package/dist/types/index.d.ts +11 -13
  43. package/dist/{types.d-CQt5spQA.d.ts → types.d-CtuPurYT.d.ts} +3 -3
  44. package/package.json +4 -4
  45. package/dist/es/render/dom/utils/is-svg-element.mjs +0 -5
  46. package/dist/es/value/utils/is-motion-value.mjs +0 -3
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var create = require('./create-t9legXtK.js');
5
+ var create = require('./create-DCF2FFGK.js');
6
6
  require('motion-dom');
7
7
  require('motion-utils');
8
8
  require('react/jsx-runtime');
@@ -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;
@@ -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 instanceof SVGElement && "getBBox" in 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 instanceof HTMLElement) {
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-t9legXtK.js');
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 instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
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 create.isMotionValue(value) ? value : useMotionValue(defaultValue);
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 (create.isMotionValue(subject)) {
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 = create.isSVGElement(element)
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 (create.isMotionValue(subject) ||
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 instanceof SVGElement && "getBBox" in 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 instanceof HTMLElement) {
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 += create.isMotionValue(value) ? value.get() : value;
2053
+ output += motionDom.isMotionValue(value) ? value.get() : value;
2052
2054
  }
2053
2055
  }
2054
2056
  return output;
2055
2057
  }
2056
- return useCombineMotionValues(values.filter(create.isMotionValue), buildValue);
2058
+ return useCombineMotionValues(values.filter(motionDom.isMotionValue), buildValue);
2057
2059
  }
2058
2060
 
2059
- function useSpring(source, config = {}) {
2061
+ function useSpring(source, options = {}) {
2060
2062
  const { isStatic } = React.useContext(create.MotionConfigContext);
2061
- const activeSpringAnimation = React.useRef(null);
2062
- const initialValue = create.useConstant(() => create.isMotionValue(source) ? source.get() : source);
2063
- const unit = create.useConstant(() => typeof initialValue === "string"
2064
- ? initialValue.replace(/[\d.-]/g, "")
2065
- : undefined);
2066
- const value = useMotionValue(initialValue);
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 value.attach((v, set) => {
2088
- if (isStatic)
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;