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.
- package/dist/cjs/client.js +1 -1
- package/dist/cjs/{feature-bundle-Dt2VtvSZ.js → feature-bundle-DhbxBqkJ.js} +30 -13
- package/dist/cjs/feature-bundle-DhbxBqkJ.js.map +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/m.js +14 -11
- package/dist/cjs/m.js.map +1 -1
- package/dist/dom-mini.js +1 -1
- package/dist/dom.js +1 -1
- package/dist/es/components/Reorder/Group.mjs.map +1 -1
- package/dist/es/gestures/drag/index.mjs +10 -0
- package/dist/es/gestures/drag/index.mjs.map +1 -1
- package/dist/es/motion/index.mjs +10 -6
- package/dist/es/motion/index.mjs.map +1 -1
- package/dist/es/motion/utils/use-visual-element.mjs +2 -1
- package/dist/es/motion/utils/use-visual-element.mjs.map +1 -1
- package/dist/es/render/dom/create-visual-element.mjs +5 -1
- package/dist/es/render/dom/create-visual-element.mjs.map +1 -1
- package/dist/es/render/dom/use-render.mjs +2 -4
- package/dist/es/render/dom/use-render.mjs.map +1 -1
- package/dist/framer-motion.dev.js +67 -34
- package/dist/framer-motion.js +1 -1
- package/dist/m.d.ts +8 -0
- package/dist/mini.js +1 -1
- package/dist/size-rollup-animate.js +1 -1
- package/dist/size-rollup-animate.js.map +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-m.js.map +1 -1
- package/dist/size-rollup-motion.js +1 -1
- package/dist/size-rollup-motion.js.map +1 -1
- package/dist/size-rollup-scroll.js.map +1 -1
- package/dist/size-rollup-waapi-animate.js +1 -1
- package/dist/size-rollup-waapi-animate.js.map +1 -1
- package/dist/types/client.d.ts +1 -1
- package/dist/types/index.d.ts +13 -5
- package/dist/{types.d-C8SDx5n-.d.ts → types.d-a9pt5qxk.d.ts} +5 -0
- package/package.json +3 -3
- package/dist/cjs/feature-bundle-Dt2VtvSZ.js.map +0 -1
package/dist/cjs/client.js
CHANGED
|
@@ -3870,7 +3870,11 @@ function isSVGComponent(Component) {
|
|
|
3870
3870
|
}
|
|
3871
3871
|
|
|
3872
3872
|
const createDomVisualElement = (Component, options) => {
|
|
3873
|
-
|
|
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
|
-
|
|
4267
|
-
|
|
4268
|
-
|
|
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-
|
|
6306
|
+
//# sourceMappingURL=feature-bundle-DhbxBqkJ.js.map
|