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.
Files changed (95) hide show
  1. package/dist/cjs/index.js +728 -624
  2. package/dist/es/animation/use-animated-state.mjs +3 -5
  3. package/dist/es/animation/utils/default-transitions.mjs +1 -1
  4. package/dist/es/animation/utils/transitions.mjs +28 -26
  5. package/dist/es/components/AnimatePresence/PopChild.mjs +3 -2
  6. package/dist/es/components/AnimatePresence/PresenceChild.mjs +5 -2
  7. package/dist/es/components/AnimatePresence/use-presence.mjs +1 -1
  8. package/dist/es/components/LayoutGroup/index.mjs +4 -5
  9. package/dist/es/components/LazyMotion/index.mjs +3 -5
  10. package/dist/es/components/MotionConfig/index.mjs +2 -4
  11. package/dist/es/components/Reorder/Group.mjs +2 -4
  12. package/dist/es/components/Reorder/Item.mjs +6 -8
  13. package/dist/es/context/MotionContext/utils.mjs +3 -2
  14. package/dist/es/gestures/PanSession.mjs +2 -2
  15. package/dist/es/gestures/drag/VisualElementDragControls.mjs +16 -4
  16. package/dist/es/gestures/use-focus-gesture.mjs +3 -4
  17. package/dist/es/gestures/use-hover-gesture.mjs +4 -3
  18. package/dist/es/gestures/use-tap-gesture.mjs +9 -10
  19. package/dist/es/index.mjs +2 -1
  20. package/dist/es/motion/features/animations.mjs +8 -3
  21. package/dist/es/motion/features/definitions.mjs +1 -13
  22. package/dist/es/motion/features/layout/MeasureLayout.mjs +12 -6
  23. package/dist/es/motion/features/load-features.mjs +14 -0
  24. package/dist/es/motion/features/viewport/observers.mjs +4 -7
  25. package/dist/es/motion/features/viewport/use-viewport.mjs +8 -6
  26. package/dist/es/motion/index.mjs +23 -23
  27. package/dist/es/motion/utils/VisualElementHandler.mjs +2 -5
  28. package/dist/es/motion/utils/is-forced-motion-value.mjs +3 -3
  29. package/dist/es/motion/utils/use-motion-ref.mjs +1 -2
  30. package/dist/es/motion/utils/use-visual-element.mjs +14 -12
  31. package/dist/es/motion/utils/use-visual-state.mjs +19 -16
  32. package/dist/es/motion/utils/valid-prop.mjs +22 -17
  33. package/dist/es/projection/node/HTMLProjectionNode.mjs +1 -1
  34. package/dist/es/projection/node/create-projection-node.mjs +34 -16
  35. package/dist/es/projection/use-instant-layout-transition.mjs +2 -2
  36. package/dist/es/render/dom/features-animation.mjs +5 -1
  37. package/dist/es/render/dom/features-max.mjs +6 -1
  38. package/dist/es/render/dom/motion.mjs +6 -1
  39. package/dist/es/render/dom/use-render.mjs +5 -1
  40. package/dist/es/render/dom/utils/camel-to-dash.mjs +1 -3
  41. package/dist/es/render/dom/utils/create-config.mjs +7 -2
  42. package/dist/es/render/dom/utils/css-variables-conversion.mjs +5 -7
  43. package/dist/es/render/dom/utils/unit-conversion.mjs +4 -4
  44. package/dist/es/render/dom/value-types/defaults.mjs +15 -3
  45. package/dist/es/render/dom/value-types/type-int.mjs +4 -1
  46. package/dist/es/render/html/config-motion.mjs +1 -1
  47. package/dist/es/render/html/use-props.mjs +5 -9
  48. package/dist/es/render/html/utils/build-styles.mjs +17 -15
  49. package/dist/es/render/html/utils/build-transform.mjs +8 -18
  50. package/dist/es/render/html/utils/transform.mjs +20 -30
  51. package/dist/es/render/html/visual-element.mjs +8 -9
  52. package/dist/es/render/index.mjs +118 -40
  53. package/dist/es/render/svg/use-props.mjs +5 -2
  54. package/dist/es/render/svg/utils/build-attrs.mjs +3 -5
  55. package/dist/es/render/svg/utils/create-render-state.mjs +4 -1
  56. package/dist/es/render/svg/visual-element.mjs +8 -4
  57. package/dist/es/render/utils/animation-state.mjs +12 -9
  58. package/dist/es/render/utils/animation.mjs +14 -8
  59. package/dist/es/render/utils/is-controlling-variants.mjs +22 -0
  60. package/dist/es/render/utils/is-variant-label.mjs +8 -0
  61. package/dist/es/render/utils/motion-values.mjs +3 -3
  62. package/dist/es/render/utils/resolve-dynamic-variants.mjs +24 -0
  63. package/dist/es/render/utils/resolve-variants.mjs +26 -0
  64. package/dist/es/render/utils/setters.mjs +12 -9
  65. package/dist/es/utils/reduced-motion/index.mjs +19 -0
  66. package/dist/es/utils/reduced-motion/state.mjs +5 -0
  67. package/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs +19 -0
  68. package/dist/es/utils/reduced-motion/use-reduced-motion.mjs +43 -0
  69. package/dist/es/utils/transform.mjs +4 -1
  70. package/dist/es/utils/use-in-view.mjs +1 -2
  71. package/dist/es/value/index.mjs +1 -1
  72. package/dist/es/value/use-scroll.mjs +6 -4
  73. package/dist/es/value/use-spring.mjs +7 -1
  74. package/dist/es/value/use-will-change/index.mjs +4 -4
  75. package/dist/es/value/utils/is-motion-value.mjs +1 -3
  76. package/dist/framer-motion.dev.js +769 -664
  77. package/dist/framer-motion.js +1 -1
  78. package/dist/index.d.ts +55 -52
  79. package/dist/projection.dev.js +368 -210
  80. package/dist/size-rollup-dom-animation-assets.js +1 -0
  81. package/dist/size-rollup-dom-animation-m.js +1 -0
  82. package/dist/size-rollup-dom-animation.js +1 -1
  83. package/dist/size-rollup-dom-max-assets.js +1 -0
  84. package/dist/size-rollup-dom-max.js +1 -1
  85. package/dist/size-rollup-m.js +1 -1
  86. package/dist/size-rollup-motion.js +1 -0
  87. package/dist/size-webpack-dom-animation.js +1 -1
  88. package/dist/size-webpack-dom-max.js +1 -1
  89. package/dist/size-webpack-m.js +1 -1
  90. package/dist/three-entry.d.ts +36 -20
  91. package/package.json +12 -8
  92. package/dist/es/motion/features/use-features.mjs +0 -40
  93. package/dist/es/motion/features/use-projection.mjs +0 -33
  94. package/dist/es/render/utils/variants.mjs +0 -73
  95. 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?: "always" | "never" | "user";
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
- shouldReduceMotion?: boolean | null;
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, shouldReduceMotion, }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;
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 {