framer-motion 12.23.18 → 12.23.20
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-pqhrS3ID.js → feature-bundle-DzuUB-G1.js} +8 -33
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/m.js +41 -66
- package/dist/dom.js +1 -1
- package/dist/es/motion/utils/use-motion-ref.mjs +8 -15
- package/dist/framer-motion.dev.js +9 -15
- package/dist/framer-motion.js +1 -1
- package/dist/size-rollup-animate.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.js +1 -1
- package/dist/size-rollup-m.js +1 -1
- package/dist/size-rollup-motion.js +1 -1
- package/package.json +3 -3
package/dist/cjs/client.js
CHANGED
|
@@ -5,25 +5,6 @@ var motionDom = require('motion-dom');
|
|
|
5
5
|
var motionUtils = require('motion-utils');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
|
|
8
|
-
function _interopNamespaceDefault(e) {
|
|
9
|
-
var n = Object.create(null);
|
|
10
|
-
if (e) {
|
|
11
|
-
Object.keys(e).forEach(function (k) {
|
|
12
|
-
if (k !== 'default') {
|
|
13
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function () { return e[k]; }
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
n.default = e;
|
|
22
|
-
return Object.freeze(n);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
26
|
-
|
|
27
8
|
const LayoutGroupContext = React.createContext({});
|
|
28
9
|
|
|
29
10
|
/**
|
|
@@ -4088,22 +4069,16 @@ function isRefObject(ref) {
|
|
|
4088
4069
|
* external ref and VisualElement.
|
|
4089
4070
|
*/
|
|
4090
4071
|
function useMotionRef(visualState, visualElement, externalRef) {
|
|
4091
|
-
const currentInstanceRef = React__namespace.useRef(null);
|
|
4092
4072
|
return React.useCallback((instance) => {
|
|
4093
|
-
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
if (
|
|
4073
|
+
if (instance) {
|
|
4074
|
+
visualState.onMount && visualState.onMount(instance);
|
|
4075
|
+
}
|
|
4076
|
+
if (visualElement) {
|
|
4097
4077
|
if (instance) {
|
|
4098
|
-
|
|
4078
|
+
visualElement.mount(instance);
|
|
4099
4079
|
}
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
visualElement.mount(instance);
|
|
4103
|
-
}
|
|
4104
|
-
else {
|
|
4105
|
-
visualElement.unmount();
|
|
4106
|
-
}
|
|
4080
|
+
else {
|
|
4081
|
+
visualElement.unmount();
|
|
4107
4082
|
}
|
|
4108
4083
|
}
|
|
4109
4084
|
if (externalRef) {
|
|
@@ -4119,7 +4094,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
|
|
|
4119
4094
|
* Include externalRef in dependencies to ensure the callback updates
|
|
4120
4095
|
* when the ref changes, allowing proper ref forwarding.
|
|
4121
4096
|
*/
|
|
4122
|
-
[visualElement
|
|
4097
|
+
[visualElement]);
|
|
4123
4098
|
}
|
|
4124
4099
|
|
|
4125
4100
|
/**
|
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 featureBundle = require('./feature-bundle-
|
|
7
|
+
var featureBundle = require('./feature-bundle-DzuUB-G1.js');
|
|
8
8
|
var motionDom = require('motion-dom');
|
|
9
9
|
var motionUtils = require('motion-utils');
|
|
10
10
|
|
package/dist/cjs/m.js
CHANGED
|
@@ -4,42 +4,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var motionUtils = require('motion-utils');
|
|
7
|
-
var
|
|
7
|
+
var react = require('react');
|
|
8
8
|
var motionDom = require('motion-dom');
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
var n = Object.create(null);
|
|
12
|
-
if (e) {
|
|
13
|
-
Object.keys(e).forEach(function (k) {
|
|
14
|
-
if (k !== 'default') {
|
|
15
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
get: function () { return e[k]; }
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
n.default = e;
|
|
24
|
-
return Object.freeze(n);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
10
|
+
const LayoutGroupContext = react.createContext({});
|
|
28
11
|
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
const LazyContext = React.createContext({ strict: false });
|
|
12
|
+
const LazyContext = react.createContext({ strict: false });
|
|
32
13
|
|
|
33
14
|
/**
|
|
34
15
|
* @public
|
|
35
16
|
*/
|
|
36
|
-
const MotionConfigContext =
|
|
17
|
+
const MotionConfigContext = react.createContext({
|
|
37
18
|
transformPagePoint: (p) => p,
|
|
38
19
|
isStatic: false,
|
|
39
20
|
reducedMotion: "never",
|
|
40
21
|
});
|
|
41
22
|
|
|
42
|
-
const MotionContext = /* @__PURE__ */
|
|
23
|
+
const MotionContext = /* @__PURE__ */ react.createContext({});
|
|
43
24
|
|
|
44
25
|
function isAnimationControls(v) {
|
|
45
26
|
return (v !== null &&
|
|
@@ -87,8 +68,8 @@ function getCurrentTreeVariants(props, context) {
|
|
|
87
68
|
}
|
|
88
69
|
|
|
89
70
|
function useCreateMotionContext(props) {
|
|
90
|
-
const { initial, animate } = getCurrentTreeVariants(props,
|
|
91
|
-
return
|
|
71
|
+
const { initial, animate } = getCurrentTreeVariants(props, react.useContext(MotionContext));
|
|
72
|
+
return react.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
|
|
92
73
|
}
|
|
93
74
|
function variantLabelsAsDependency(prop) {
|
|
94
75
|
return Array.isArray(prop) ? prop.join(" ") : prop;
|
|
@@ -233,7 +214,7 @@ function copyRawValuesOnly(target, source, props) {
|
|
|
233
214
|
}
|
|
234
215
|
}
|
|
235
216
|
function useInitialMotionValues({ transformTemplate }, visualState) {
|
|
236
|
-
return
|
|
217
|
+
return react.useMemo(() => {
|
|
237
218
|
const state = createHtmlRenderState();
|
|
238
219
|
buildHTMLStyles(state, visualState, transformTemplate);
|
|
239
220
|
return Object.assign({}, state.vars, state.style);
|
|
@@ -365,7 +346,7 @@ const createSvgRenderState = () => ({
|
|
|
365
346
|
const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
|
|
366
347
|
|
|
367
348
|
function useSVGProps(props, visualState, _isStatic, Component) {
|
|
368
|
-
const visualProps =
|
|
349
|
+
const visualProps = react.useMemo(() => {
|
|
369
350
|
const state = createSvgRenderState();
|
|
370
351
|
buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
|
|
371
352
|
return {
|
|
@@ -558,15 +539,15 @@ function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMo
|
|
|
558
539
|
: useHTMLProps;
|
|
559
540
|
const visualProps = useVisualProps(props, latestValues, isStatic, Component);
|
|
560
541
|
const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
|
|
561
|
-
const elementProps = Component !==
|
|
542
|
+
const elementProps = Component !== react.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
|
|
562
543
|
/**
|
|
563
544
|
* If component has been handed a motion value as its child,
|
|
564
545
|
* memoise its initial value and render that. Subsequent updates
|
|
565
546
|
* will be handled by the onChange handler
|
|
566
547
|
*/
|
|
567
548
|
const { children } = props;
|
|
568
|
-
const renderedChildren =
|
|
569
|
-
return
|
|
549
|
+
const renderedChildren = react.useMemo(() => (motionDom.isMotionValue(children) ? children.get() : children), [children]);
|
|
550
|
+
return react.createElement(Component, {
|
|
570
551
|
...elementProps,
|
|
571
552
|
children: renderedChildren,
|
|
572
553
|
});
|
|
@@ -576,7 +557,7 @@ function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMo
|
|
|
576
557
|
* @public
|
|
577
558
|
*/
|
|
578
559
|
const PresenceContext =
|
|
579
|
-
/* @__PURE__ */
|
|
560
|
+
/* @__PURE__ */ react.createContext(null);
|
|
580
561
|
|
|
581
562
|
function getValueState(visualElement) {
|
|
582
563
|
const state = [{}, {}];
|
|
@@ -617,7 +598,7 @@ function resolveVariantFromProps(props, definition, custom, visualElement) {
|
|
|
617
598
|
* you can ensure that initialisers don't execute twice or more.
|
|
618
599
|
*/
|
|
619
600
|
function useConstant(init) {
|
|
620
|
-
const ref =
|
|
601
|
+
const ref = react.useRef(null);
|
|
621
602
|
if (ref.current === null) {
|
|
622
603
|
ref.current = init();
|
|
623
604
|
}
|
|
@@ -696,8 +677,8 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
|
|
|
696
677
|
return values;
|
|
697
678
|
}
|
|
698
679
|
const makeUseVisualState = (config) => (props, isStatic) => {
|
|
699
|
-
const context =
|
|
700
|
-
const presenceContext =
|
|
680
|
+
const context = react.useContext(MotionContext);
|
|
681
|
+
const presenceContext = react.useContext(PresenceContext);
|
|
701
682
|
const make = () => makeState(config, props, context, presenceContext);
|
|
702
683
|
return isStatic ? make() : useConstant(make);
|
|
703
684
|
};
|
|
@@ -783,22 +764,16 @@ function isRefObject(ref) {
|
|
|
783
764
|
* external ref and VisualElement.
|
|
784
765
|
*/
|
|
785
766
|
function useMotionRef(visualState, visualElement, externalRef) {
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
if (instance !== prevInstance) {
|
|
767
|
+
return react.useCallback((instance) => {
|
|
768
|
+
if (instance) {
|
|
769
|
+
visualState.onMount && visualState.onMount(instance);
|
|
770
|
+
}
|
|
771
|
+
if (visualElement) {
|
|
792
772
|
if (instance) {
|
|
793
|
-
|
|
773
|
+
visualElement.mount(instance);
|
|
794
774
|
}
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
visualElement.mount(instance);
|
|
798
|
-
}
|
|
799
|
-
else {
|
|
800
|
-
visualElement.unmount();
|
|
801
|
-
}
|
|
775
|
+
else {
|
|
776
|
+
visualElement.unmount();
|
|
802
777
|
}
|
|
803
778
|
}
|
|
804
779
|
if (externalRef) {
|
|
@@ -814,7 +789,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
|
|
|
814
789
|
* Include externalRef in dependencies to ensure the callback updates
|
|
815
790
|
* when the ref changes, allowing proper ref forwarding.
|
|
816
791
|
*/
|
|
817
|
-
[visualElement
|
|
792
|
+
[visualElement]);
|
|
818
793
|
}
|
|
819
794
|
|
|
820
795
|
/**
|
|
@@ -828,16 +803,16 @@ const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId
|
|
|
828
803
|
/**
|
|
829
804
|
* Internal, exported only for usage in Framer
|
|
830
805
|
*/
|
|
831
|
-
const SwitchLayoutGroupContext =
|
|
806
|
+
const SwitchLayoutGroupContext = react.createContext({});
|
|
832
807
|
|
|
833
|
-
const useIsomorphicLayoutEffect = isBrowser ?
|
|
808
|
+
const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
|
|
834
809
|
|
|
835
810
|
function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
|
|
836
|
-
const { visualElement: parent } =
|
|
837
|
-
const lazyContext =
|
|
838
|
-
const presenceContext =
|
|
839
|
-
const reducedMotionConfig =
|
|
840
|
-
const visualElementRef =
|
|
811
|
+
const { visualElement: parent } = react.useContext(MotionContext);
|
|
812
|
+
const lazyContext = react.useContext(LazyContext);
|
|
813
|
+
const presenceContext = react.useContext(PresenceContext);
|
|
814
|
+
const reducedMotionConfig = react.useContext(MotionConfigContext).reducedMotion;
|
|
815
|
+
const visualElementRef = react.useRef(null);
|
|
841
816
|
/**
|
|
842
817
|
* If we haven't preloaded a renderer, check to see if we have one lazy-loaded
|
|
843
818
|
*/
|
|
@@ -861,15 +836,15 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
|
|
|
861
836
|
* Load Motion gesture and animation features. These are rendered as renderless
|
|
862
837
|
* components so each feature can optionally make use of React lifecycle methods.
|
|
863
838
|
*/
|
|
864
|
-
const initialLayoutGroupConfig =
|
|
839
|
+
const initialLayoutGroupConfig = react.useContext(SwitchLayoutGroupContext);
|
|
865
840
|
if (visualElement &&
|
|
866
841
|
!visualElement.projection &&
|
|
867
842
|
ProjectionNodeConstructor &&
|
|
868
843
|
(visualElement.type === "html" || visualElement.type === "svg")) {
|
|
869
844
|
createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
|
|
870
845
|
}
|
|
871
|
-
const isMounted =
|
|
872
|
-
|
|
846
|
+
const isMounted = react.useRef(false);
|
|
847
|
+
react.useInsertionEffect(() => {
|
|
873
848
|
/**
|
|
874
849
|
* Check the component has already mounted before calling
|
|
875
850
|
* `update` unnecessarily. This ensures we skip the initial update.
|
|
@@ -883,7 +858,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
|
|
|
883
858
|
* was present on initial render - it will be deleted after this.
|
|
884
859
|
*/
|
|
885
860
|
const optimisedAppearId = props[optimizedAppearDataAttribute];
|
|
886
|
-
const wantsHandoff =
|
|
861
|
+
const wantsHandoff = react.useRef(Boolean(optimisedAppearId) &&
|
|
887
862
|
!window.MotionHandoffIsComplete?.(optimisedAppearId) &&
|
|
888
863
|
window.MotionHasOptimisedAnimation?.(optimisedAppearId));
|
|
889
864
|
useIsomorphicLayoutEffect(() => {
|
|
@@ -907,7 +882,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
|
|
|
907
882
|
visualElement.animationState.animateChanges();
|
|
908
883
|
}
|
|
909
884
|
});
|
|
910
|
-
|
|
885
|
+
react.useEffect(() => {
|
|
911
886
|
if (!visualElement)
|
|
912
887
|
return;
|
|
913
888
|
if (!wantsHandoff.current && visualElement.animationState) {
|
|
@@ -980,7 +955,7 @@ function createMotionComponent(Component, { forwardMotionProps = false } = {}, p
|
|
|
980
955
|
*/
|
|
981
956
|
let MeasureLayout;
|
|
982
957
|
const configAndProps = {
|
|
983
|
-
...
|
|
958
|
+
...react.useContext(MotionConfigContext),
|
|
984
959
|
...props,
|
|
985
960
|
layoutId: useLayoutId(props),
|
|
986
961
|
};
|
|
@@ -1008,18 +983,18 @@ function createMotionComponent(Component, { forwardMotionProps = false } = {}, p
|
|
|
1008
983
|
MotionDOMComponent.displayName = `motion.${typeof Component === "string"
|
|
1009
984
|
? Component
|
|
1010
985
|
: `create(${Component.displayName ?? Component.name ?? ""})`}`;
|
|
1011
|
-
const ForwardRefMotionComponent =
|
|
986
|
+
const ForwardRefMotionComponent = react.forwardRef(MotionDOMComponent);
|
|
1012
987
|
ForwardRefMotionComponent[motionComponentSymbol] = Component;
|
|
1013
988
|
return ForwardRefMotionComponent;
|
|
1014
989
|
}
|
|
1015
990
|
function useLayoutId({ layoutId }) {
|
|
1016
|
-
const layoutGroupId =
|
|
991
|
+
const layoutGroupId = react.useContext(LayoutGroupContext).id;
|
|
1017
992
|
return layoutGroupId && layoutId !== undefined
|
|
1018
993
|
? layoutGroupId + "-" + layoutId
|
|
1019
994
|
: layoutId;
|
|
1020
995
|
}
|
|
1021
996
|
function useStrictMode(configAndProps, preloadedFeatures) {
|
|
1022
|
-
const isStrict =
|
|
997
|
+
const isStrict = react.useContext(LazyContext).strict;
|
|
1023
998
|
/**
|
|
1024
999
|
* If we're in development mode, check to make sure we're not rendering a motion component
|
|
1025
1000
|
* as a child of LazyMotion, as this will break the file-size benefits of using it.
|