framer-motion 7.2.0 → 7.2.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/index.js +728 -624
- package/dist/es/animation/use-animated-state.mjs +3 -5
- package/dist/es/animation/utils/default-transitions.mjs +1 -1
- package/dist/es/animation/utils/transitions.mjs +28 -26
- package/dist/es/components/AnimatePresence/PopChild.mjs +3 -2
- package/dist/es/components/AnimatePresence/PresenceChild.mjs +5 -2
- package/dist/es/components/AnimatePresence/use-presence.mjs +1 -1
- package/dist/es/components/LayoutGroup/index.mjs +4 -5
- package/dist/es/components/LazyMotion/index.mjs +3 -5
- package/dist/es/components/MotionConfig/index.mjs +2 -4
- package/dist/es/components/Reorder/Group.mjs +2 -4
- package/dist/es/components/Reorder/Item.mjs +6 -8
- package/dist/es/context/MotionContext/utils.mjs +3 -2
- package/dist/es/gestures/PanSession.mjs +2 -2
- package/dist/es/gestures/drag/VisualElementDragControls.mjs +16 -4
- package/dist/es/gestures/use-focus-gesture.mjs +3 -4
- package/dist/es/gestures/use-hover-gesture.mjs +4 -3
- package/dist/es/gestures/use-tap-gesture.mjs +9 -10
- package/dist/es/index.mjs +2 -1
- package/dist/es/motion/features/animations.mjs +8 -3
- package/dist/es/motion/features/definitions.mjs +1 -13
- package/dist/es/motion/features/layout/MeasureLayout.mjs +12 -6
- package/dist/es/motion/features/load-features.mjs +14 -0
- package/dist/es/motion/features/viewport/observers.mjs +4 -7
- package/dist/es/motion/features/viewport/use-viewport.mjs +8 -6
- package/dist/es/motion/index.mjs +23 -23
- package/dist/es/motion/utils/VisualElementHandler.mjs +2 -5
- package/dist/es/motion/utils/is-forced-motion-value.mjs +3 -3
- package/dist/es/motion/utils/use-motion-ref.mjs +1 -2
- package/dist/es/motion/utils/use-visual-element.mjs +14 -12
- package/dist/es/motion/utils/use-visual-state.mjs +19 -16
- package/dist/es/motion/utils/valid-prop.mjs +22 -17
- package/dist/es/projection/node/HTMLProjectionNode.mjs +1 -1
- package/dist/es/projection/node/create-projection-node.mjs +34 -16
- package/dist/es/projection/use-instant-layout-transition.mjs +2 -2
- package/dist/es/render/dom/features-animation.mjs +5 -1
- package/dist/es/render/dom/features-max.mjs +6 -1
- package/dist/es/render/dom/motion.mjs +6 -1
- package/dist/es/render/dom/use-render.mjs +5 -1
- package/dist/es/render/dom/utils/camel-to-dash.mjs +1 -3
- package/dist/es/render/dom/utils/create-config.mjs +7 -2
- package/dist/es/render/dom/utils/css-variables-conversion.mjs +5 -7
- package/dist/es/render/dom/utils/unit-conversion.mjs +4 -4
- package/dist/es/render/dom/value-types/defaults.mjs +15 -3
- package/dist/es/render/dom/value-types/type-int.mjs +4 -1
- package/dist/es/render/html/config-motion.mjs +1 -1
- package/dist/es/render/html/use-props.mjs +5 -9
- package/dist/es/render/html/utils/build-styles.mjs +17 -15
- package/dist/es/render/html/utils/build-transform.mjs +8 -18
- package/dist/es/render/html/utils/transform.mjs +20 -30
- package/dist/es/render/html/visual-element.mjs +8 -9
- package/dist/es/render/index.mjs +118 -40
- package/dist/es/render/svg/use-props.mjs +5 -2
- package/dist/es/render/svg/utils/build-attrs.mjs +3 -5
- package/dist/es/render/svg/utils/create-render-state.mjs +4 -1
- package/dist/es/render/svg/visual-element.mjs +8 -4
- package/dist/es/render/utils/animation-state.mjs +12 -9
- package/dist/es/render/utils/animation.mjs +14 -8
- package/dist/es/render/utils/is-controlling-variants.mjs +22 -0
- package/dist/es/render/utils/is-variant-label.mjs +8 -0
- package/dist/es/render/utils/motion-values.mjs +3 -3
- package/dist/es/render/utils/resolve-dynamic-variants.mjs +24 -0
- package/dist/es/render/utils/resolve-variants.mjs +26 -0
- package/dist/es/render/utils/setters.mjs +12 -9
- package/dist/es/utils/reduced-motion/index.mjs +19 -0
- package/dist/es/utils/reduced-motion/state.mjs +5 -0
- package/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs +19 -0
- package/dist/es/utils/reduced-motion/use-reduced-motion.mjs +43 -0
- package/dist/es/utils/transform.mjs +4 -1
- package/dist/es/utils/use-in-view.mjs +1 -2
- package/dist/es/value/index.mjs +1 -1
- package/dist/es/value/use-scroll.mjs +6 -4
- package/dist/es/value/use-spring.mjs +7 -1
- package/dist/es/value/use-will-change/index.mjs +4 -4
- package/dist/es/value/utils/is-motion-value.mjs +1 -3
- package/dist/framer-motion.dev.js +769 -664
- package/dist/framer-motion.js +1 -1
- package/dist/index.d.ts +55 -52
- package/dist/projection.dev.js +368 -210
- package/dist/size-rollup-dom-animation-assets.js +1 -0
- package/dist/size-rollup-dom-animation-m.js +1 -0
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max-assets.js +1 -0
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-rollup-m.js +1 -1
- package/dist/size-rollup-motion.js +1 -0
- package/dist/size-webpack-dom-animation.js +1 -1
- package/dist/size-webpack-dom-max.js +1 -1
- package/dist/size-webpack-m.js +1 -1
- package/dist/three-entry.d.ts +36 -20
- package/package.json +12 -8
- package/dist/es/motion/features/use-features.mjs +0 -40
- package/dist/es/motion/features/use-projection.mjs +0 -33
- package/dist/es/render/utils/variants.mjs +0 -73
- package/dist/es/utils/use-reduced-motion.mjs +0 -73
package/dist/index.d.ts
CHANGED
|
@@ -2498,6 +2498,7 @@ interface ProjectionNodeOptions {
|
|
|
2498
2498
|
initialPromotionConfig?: InitialPromotionConfig;
|
|
2499
2499
|
}
|
|
2500
2500
|
|
|
2501
|
+
declare type ReducedMotionConfig = "always" | "never" | "user";
|
|
2501
2502
|
/**
|
|
2502
2503
|
* @public
|
|
2503
2504
|
*/
|
|
@@ -2523,7 +2524,7 @@ interface MotionConfigContext {
|
|
|
2523
2524
|
*
|
|
2524
2525
|
* @public
|
|
2525
2526
|
*/
|
|
2526
|
-
reducedMotion?:
|
|
2527
|
+
reducedMotion?: ReducedMotionConfig;
|
|
2527
2528
|
}
|
|
2528
2529
|
/**
|
|
2529
2530
|
* @public
|
|
@@ -2556,6 +2557,55 @@ interface MotionConfigProps extends Partial<MotionConfigContext> {
|
|
|
2556
2557
|
*/
|
|
2557
2558
|
declare function MotionConfig({ children, isValidProp, ...config }: MotionConfigProps): JSX.Element;
|
|
2558
2559
|
|
|
2560
|
+
/**
|
|
2561
|
+
* @public
|
|
2562
|
+
*/
|
|
2563
|
+
interface FeatureProps extends MotionProps {
|
|
2564
|
+
visualElement: VisualElement;
|
|
2565
|
+
}
|
|
2566
|
+
declare type FeatureNames = {
|
|
2567
|
+
animation: true;
|
|
2568
|
+
exit: true;
|
|
2569
|
+
drag: true;
|
|
2570
|
+
tap: true;
|
|
2571
|
+
focus: true;
|
|
2572
|
+
hover: true;
|
|
2573
|
+
pan: true;
|
|
2574
|
+
inView: true;
|
|
2575
|
+
measureLayout: true;
|
|
2576
|
+
};
|
|
2577
|
+
declare type FeatureComponent = React$1.ComponentType<React$1.PropsWithChildren<FeatureProps>>;
|
|
2578
|
+
/**
|
|
2579
|
+
* @public
|
|
2580
|
+
*/
|
|
2581
|
+
interface FeatureDefinition {
|
|
2582
|
+
isEnabled: (props: MotionProps) => boolean;
|
|
2583
|
+
Component?: FeatureComponent;
|
|
2584
|
+
}
|
|
2585
|
+
interface FeatureComponents {
|
|
2586
|
+
animation?: FeatureComponent;
|
|
2587
|
+
exit?: FeatureComponent;
|
|
2588
|
+
drag?: FeatureComponent;
|
|
2589
|
+
tap?: FeatureComponent;
|
|
2590
|
+
focus?: FeatureComponent;
|
|
2591
|
+
hover?: FeatureComponent;
|
|
2592
|
+
pan?: FeatureComponent;
|
|
2593
|
+
inView?: FeatureComponent;
|
|
2594
|
+
measureLayout?: FeatureComponent;
|
|
2595
|
+
}
|
|
2596
|
+
interface FeatureBundle extends FeatureComponents {
|
|
2597
|
+
renderer: CreateVisualElement<any>;
|
|
2598
|
+
projectionNodeConstructor?: any;
|
|
2599
|
+
}
|
|
2600
|
+
declare type LazyFeatureBundle$1 = () => Promise<FeatureBundle>;
|
|
2601
|
+
declare type FeatureDefinitions = {
|
|
2602
|
+
[K in keyof FeatureNames]: FeatureDefinition;
|
|
2603
|
+
};
|
|
2604
|
+
declare type LoadedFeatures = FeatureDefinitions & {
|
|
2605
|
+
projectionNodeConstructor?: any;
|
|
2606
|
+
};
|
|
2607
|
+
declare type RenderComponent<Instance, RenderState> = (Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>, props: MotionProps, projectionId: number | undefined, ref: React$1.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean, visualElement?: VisualElement) => any;
|
|
2608
|
+
|
|
2559
2609
|
interface VisualElement<Instance = any, RenderState = any> extends LifecycleManager {
|
|
2560
2610
|
treeType: string;
|
|
2561
2611
|
depth: number;
|
|
@@ -2577,6 +2627,7 @@ interface VisualElement<Instance = any, RenderState = any> extends LifecycleMana
|
|
|
2577
2627
|
getClosestVariantNode(): VisualElement | undefined;
|
|
2578
2628
|
shouldReduceMotion?: boolean | null;
|
|
2579
2629
|
animateMotionValue?: typeof startAnimation;
|
|
2630
|
+
loadFeatures(props: MotionProps, isStrict?: boolean, preloadedFeatures?: FeatureBundle, projectionId?: number, ProjectionNodeConstructor?: any, initialPromotionConfig?: SwitchLayoutGroupContext): JSX.Element[];
|
|
2580
2631
|
projection?: IProjectionNode;
|
|
2581
2632
|
/**
|
|
2582
2633
|
* Visibility
|
|
@@ -2644,7 +2695,7 @@ declare type VisualElementOptions<Instance, RenderState = any> = {
|
|
|
2644
2695
|
presenceId?: string | undefined;
|
|
2645
2696
|
props: MotionProps;
|
|
2646
2697
|
blockInitialAnimation?: boolean;
|
|
2647
|
-
|
|
2698
|
+
reducedMotionConfig?: ReducedMotionConfig;
|
|
2648
2699
|
};
|
|
2649
2700
|
declare type CreateVisualElement<Instance> = (Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>, options: VisualElementOptions<Instance>) => VisualElement<Instance>;
|
|
2650
2701
|
/**
|
|
@@ -2709,55 +2760,6 @@ declare type SVGMotionComponents = {
|
|
|
2709
2760
|
[K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
|
|
2710
2761
|
};
|
|
2711
2762
|
|
|
2712
|
-
/**
|
|
2713
|
-
* @public
|
|
2714
|
-
*/
|
|
2715
|
-
interface FeatureProps extends MotionProps {
|
|
2716
|
-
visualElement: VisualElement;
|
|
2717
|
-
}
|
|
2718
|
-
declare type FeatureNames = {
|
|
2719
|
-
animation: true;
|
|
2720
|
-
exit: true;
|
|
2721
|
-
drag: true;
|
|
2722
|
-
tap: true;
|
|
2723
|
-
focus: true;
|
|
2724
|
-
hover: true;
|
|
2725
|
-
pan: true;
|
|
2726
|
-
inView: true;
|
|
2727
|
-
measureLayout: true;
|
|
2728
|
-
};
|
|
2729
|
-
declare type FeatureComponent = React$1.ComponentType<React$1.PropsWithChildren<FeatureProps>>;
|
|
2730
|
-
/**
|
|
2731
|
-
* @public
|
|
2732
|
-
*/
|
|
2733
|
-
interface FeatureDefinition {
|
|
2734
|
-
isEnabled: (props: MotionProps) => boolean;
|
|
2735
|
-
Component?: FeatureComponent;
|
|
2736
|
-
}
|
|
2737
|
-
interface FeatureComponents {
|
|
2738
|
-
animation?: FeatureComponent;
|
|
2739
|
-
exit?: FeatureComponent;
|
|
2740
|
-
drag?: FeatureComponent;
|
|
2741
|
-
tap?: FeatureComponent;
|
|
2742
|
-
focus?: FeatureComponent;
|
|
2743
|
-
hover?: FeatureComponent;
|
|
2744
|
-
pan?: FeatureComponent;
|
|
2745
|
-
inView?: FeatureComponent;
|
|
2746
|
-
measureLayout?: FeatureComponent;
|
|
2747
|
-
}
|
|
2748
|
-
interface FeatureBundle extends FeatureComponents {
|
|
2749
|
-
renderer: CreateVisualElement<any>;
|
|
2750
|
-
projectionNodeConstructor?: any;
|
|
2751
|
-
}
|
|
2752
|
-
declare type LazyFeatureBundle$1 = () => Promise<FeatureBundle>;
|
|
2753
|
-
declare type FeatureDefinitions = {
|
|
2754
|
-
[K in keyof FeatureNames]: FeatureDefinition;
|
|
2755
|
-
};
|
|
2756
|
-
declare type LoadedFeatures = FeatureDefinitions & {
|
|
2757
|
-
projectionNodeConstructor?: any;
|
|
2758
|
-
};
|
|
2759
|
-
declare type RenderComponent<Instance, RenderState> = (Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>, props: MotionProps, projectionId: number | undefined, ref: React$1.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean, visualElement?: VisualElement) => any;
|
|
2760
|
-
|
|
2761
2763
|
interface MotionComponentConfig<Instance, RenderState> {
|
|
2762
2764
|
preloadedFeatures?: FeatureBundle;
|
|
2763
2765
|
createVisualElement?: CreateVisualElement<Instance>;
|
|
@@ -3985,6 +3987,7 @@ declare function useWillChange(): WillChange;
|
|
|
3985
3987
|
* @public
|
|
3986
3988
|
*/
|
|
3987
3989
|
declare function useReducedMotion(): boolean | null;
|
|
3990
|
+
|
|
3988
3991
|
declare function useReducedMotionConfig(): boolean | null;
|
|
3989
3992
|
|
|
3990
3993
|
/**
|
|
@@ -4163,7 +4166,7 @@ declare function useInView(ref: RefObject<Element>, { root, margin, amount, once
|
|
|
4163
4166
|
*/
|
|
4164
4167
|
declare function useDomEvent(ref: RefObject<EventTarget>, eventName: string, handler?: EventListener | undefined, options?: AddEventListenerOptions): void;
|
|
4165
4168
|
|
|
4166
|
-
declare const visualElement: <Instance, MutableState, Options>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState,
|
|
4169
|
+
declare const visualElement: <Instance, MutableState, Options>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState, reducedMotionConfig, }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;
|
|
4167
4170
|
|
|
4168
4171
|
declare type ScaleCorrector = (latest: string | number, node: IProjectionNode) => string | number;
|
|
4169
4172
|
interface ScaleCorrectorDefinition {
|