framer-motion 12.23.28 → 12.24.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.
Files changed (43) hide show
  1. package/dist/cjs/client.js +1 -1
  2. package/dist/cjs/{feature-bundle-Dt2VtvSZ.js → feature-bundle-DhbxBqkJ.js} +30 -13
  3. package/dist/cjs/feature-bundle-DhbxBqkJ.js.map +1 -0
  4. package/dist/cjs/index.js +1 -1
  5. package/dist/cjs/index.js.map +1 -1
  6. package/dist/cjs/m.js +14 -11
  7. package/dist/cjs/m.js.map +1 -1
  8. package/dist/dom-mini.js +1 -1
  9. package/dist/dom.js +1 -1
  10. package/dist/es/components/Reorder/Group.mjs.map +1 -1
  11. package/dist/es/gestures/drag/index.mjs +10 -0
  12. package/dist/es/gestures/drag/index.mjs.map +1 -1
  13. package/dist/es/motion/index.mjs +10 -6
  14. package/dist/es/motion/index.mjs.map +1 -1
  15. package/dist/es/motion/utils/use-visual-element.mjs +2 -1
  16. package/dist/es/motion/utils/use-visual-element.mjs.map +1 -1
  17. package/dist/es/render/dom/create-visual-element.mjs +5 -1
  18. package/dist/es/render/dom/create-visual-element.mjs.map +1 -1
  19. package/dist/es/render/dom/use-render.mjs +2 -4
  20. package/dist/es/render/dom/use-render.mjs.map +1 -1
  21. package/dist/framer-motion.dev.js +67 -34
  22. package/dist/framer-motion.js +1 -1
  23. package/dist/m.d.ts +8 -0
  24. package/dist/mini.js +1 -1
  25. package/dist/size-rollup-animate.js +1 -1
  26. package/dist/size-rollup-animate.js.map +1 -1
  27. package/dist/size-rollup-dom-animation-assets.js +1 -1
  28. package/dist/size-rollup-dom-animation-m.js +1 -1
  29. package/dist/size-rollup-dom-animation.js +1 -1
  30. package/dist/size-rollup-dom-max-assets.js +1 -1
  31. package/dist/size-rollup-dom-max.js +1 -1
  32. package/dist/size-rollup-m.js +1 -1
  33. package/dist/size-rollup-m.js.map +1 -1
  34. package/dist/size-rollup-motion.js +1 -1
  35. package/dist/size-rollup-motion.js.map +1 -1
  36. package/dist/size-rollup-scroll.js.map +1 -1
  37. package/dist/size-rollup-waapi-animate.js +1 -1
  38. package/dist/size-rollup-waapi-animate.js.map +1 -1
  39. package/dist/types/client.d.ts +1 -1
  40. package/dist/types/index.d.ts +13 -5
  41. package/dist/{types.d-C8SDx5n-.d.ts → types.d-a9pt5qxk.d.ts} +5 -0
  42. package/package.json +3 -3
  43. package/dist/cjs/feature-bundle-Dt2VtvSZ.js.map +0 -1
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var featureBundle = require('./feature-bundle-Dt2VtvSZ.js');
5
+ var featureBundle = require('./feature-bundle-DhbxBqkJ.js');
6
6
  require('react');
7
7
  require('motion-dom');
8
8
  require('motion-utils');
@@ -3870,7 +3870,11 @@ function isSVGComponent(Component) {
3870
3870
  }
3871
3871
 
3872
3872
  const createDomVisualElement = (Component, options) => {
3873
- return isSVGComponent(Component)
3873
+ /**
3874
+ * Use explicit isSVG override if provided, otherwise auto-detect
3875
+ */
3876
+ const isSVG = options.isSVG ?? isSVGComponent(Component);
3877
+ return isSVG
3874
3878
  ? new SVGVisualElement(options)
3875
3879
  : new HTMLVisualElement(options, {
3876
3880
  allowProjection: Component !== React.Fragment,
@@ -3979,10 +3983,8 @@ function useSVGProps(props, visualState, _isStatic, Component) {
3979
3983
  return visualProps;
3980
3984
  }
3981
3985
 
3982
- function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false) {
3983
- const useVisualProps = isSVGComponent(Component)
3984
- ? useSVGProps
3985
- : useHTMLProps;
3986
+ function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false, isSVG) {
3987
+ const useVisualProps = (isSVG ?? isSVGComponent(Component)) ? useSVGProps : useHTMLProps;
3986
3988
  const visualProps = useVisualProps(props, latestValues, isStatic, Component);
3987
3989
  const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
3988
3990
  const elementProps = Component !== React.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
@@ -4124,7 +4126,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
4124
4126
  */
4125
4127
  const SwitchLayoutGroupContext = React.createContext({});
4126
4128
 
4127
- function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
4129
+ function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
4128
4130
  const { visualElement: parent } = React.useContext(MotionContext);
4129
4131
  const lazyContext = React.useContext(LazyContext);
4130
4132
  const presenceContext = React.useContext(PresenceContext);
@@ -4146,6 +4148,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
4146
4148
  ? presenceContext.initial === false
4147
4149
  : false,
4148
4150
  reducedMotionConfig,
4151
+ isSVG,
4149
4152
  });
4150
4153
  }
4151
4154
  const visualElement = visualElementRef.current;
@@ -4261,11 +4264,15 @@ function getClosestProjectingNode(visualElement) {
4261
4264
  * Alongside this is a config option which provides a way of rendering the provided
4262
4265
  * component "offline", or outside the React render cycle.
4263
4266
  */
4264
- function createMotionComponent(Component, { forwardMotionProps = false } = {}, preloadedFeatures, createVisualElement) {
4267
+ function createMotionComponent(Component, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
4265
4268
  preloadedFeatures && loadFeatures(preloadedFeatures);
4266
- const useVisualState = isSVGComponent(Component)
4267
- ? useSVGVisualState
4268
- : useHTMLVisualState;
4269
+ /**
4270
+ * Determine whether to use SVG or HTML rendering based on:
4271
+ * 1. Explicit `type` option (highest priority)
4272
+ * 2. Auto-detection via `isSVGComponent`
4273
+ */
4274
+ const isSVG = type ? type === "svg" : isSVGComponent(Component);
4275
+ const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState;
4269
4276
  function MotionDOMComponent(props, externalRef) {
4270
4277
  /**
4271
4278
  * If we need to measure the element we load this functionality in a
@@ -4290,13 +4297,13 @@ function createMotionComponent(Component, { forwardMotionProps = false } = {}, p
4290
4297
  * providing a way of rendering to these APIs outside of the React render loop
4291
4298
  * for more performant animations and interactions
4292
4299
  */
4293
- context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
4300
+ context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode, isSVG);
4294
4301
  }
4295
4302
  /**
4296
4303
  * The mount order and hierarchy is specific to ensure our element ref
4297
4304
  * is hydrated by the time features fire their effects.
4298
4305
  */
4299
- return (jsxRuntime.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsxRuntime.jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] }));
4306
+ return (jsxRuntime.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsxRuntime.jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps, isSVG)] }));
4300
4307
  }
4301
4308
  MotionDOMComponent.displayName = `motion.${typeof Component === "string"
4302
4309
  ? Component
@@ -5828,6 +5835,16 @@ class DragGesture extends Feature {
5828
5835
  }
5829
5836
  this.removeListeners = this.controls.addListeners() || motionUtils.noop;
5830
5837
  }
5838
+ update() {
5839
+ const { dragControls } = this.node.getProps();
5840
+ const { dragControls: prevDragControls } = this.node.prevProps || {};
5841
+ if (dragControls !== prevDragControls) {
5842
+ this.removeGroupControls();
5843
+ if (dragControls) {
5844
+ this.removeGroupControls = dragControls.subscribe(this.controls);
5845
+ }
5846
+ }
5847
+ }
5831
5848
  unmount() {
5832
5849
  this.removeGroupControls();
5833
5850
  this.removeListeners();
@@ -6286,4 +6303,4 @@ exports.useIsPresent = useIsPresent;
6286
6303
  exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
6287
6304
  exports.usePresence = usePresence;
6288
6305
  exports.visualElementStore = visualElementStore;
6289
- //# sourceMappingURL=feature-bundle-Dt2VtvSZ.js.map
6306
+ //# sourceMappingURL=feature-bundle-DhbxBqkJ.js.map