framer-motion 5.2.0 → 5.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.2.0",
+    "version": "5.3.1",
     "description": "A simple and powerful React animation library",
     "main": "dist/framer-motion.cjs.js",
     "module": "dist/es/index.mjs",
@@ -37,11 +37,11 @@
         "test-ci": "yarn test-client && yarn test-server",
         "test-client": "jest --coverage --config jest.config.json --max-workers=2",
         "test-server": "jest --config jest.config.ssr.json",
-        "test-projection": "yarn run collect-projection-tests && start-server-and-test 'python -m SimpleHTTPServer' http://localhost:8000 'yarn run cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://0.0.0.0:8000/'",
+        "test-projection": "yarn run collect-projection-tests && start-server-and-test 'python -m SimpleHTTPServer' http://0.0.0.0:8000 'yarn run cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://localhost:8000/'",
         "test-e2e-chrome": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --browser chrome  --spec \"cypress/integration/layout-relative.chrome.ts\"'",
         "test-e2e-electron": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --config ignoreTestFiles=*.chrome.ts'",
-        "test-e2e": "yarn test-e2e-chrome && yarn test-e2e-electron",
-        "test-e2e-file": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --spec \"cypress/integration/drag-framer-page.ts\"'",
+        "test-e2e": "yarn test-e2e-electron",
+        "test-e2e-file": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --spec \"cypress/integration/while-in-view.ts\"'",
         "test-watch": "jest --watch --coverage --coverageReporters=lcov  --config jest.config.json",
         "projection-dev": "python -m SimpleHTTPServer",
         "collect-projection-tests": "node ./dev/projection/collect-projection-tests.js",
@@ -136,31 +136,31 @@
     "bundlesize": [
         {
             "path": "./dist/framer-motion.js",
-            "maxSize": "34.1 kB"
+            "maxSize": "34.8 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "6.5 kB"
+            "maxSize": "6.0 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "17.2 kB"
+            "maxSize": "16.9 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "28.1 kB"
+            "maxSize": "27.9 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
-            "maxSize": "6.5 kB"
+            "maxSize": "6.3 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19 kB"
+            "maxSize": "19.4 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.4 kB"
+            "maxSize": "31 kB"
         }
     ]
 }

package/types/components/Reorder/Item.d.ts

@@ -15,7 +15,7 @@ export interface Props<V> {
      */
     value: V;
 }
-export declare function ReorderItem<V>({ children, style, value, as, ...props }: Props<V> & HTMLMotionProps<any> & React.PropsWithChildren<{}>, externalRef?: React.Ref<any>): JSX.Element;
+export declare function ReorderItem<V>({ children, style, value, as, onDrag, ...props }: Props<V> & HTMLMotionProps<any> & React.PropsWithChildren<{}>, externalRef?: React.Ref<any>): JSX.Element;
 export declare const Item: React.ForwardRefExoticComponent<Props<unknown> & {
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;

package/types/index.d.ts

@@ -50,6 +50,7 @@ export { createMotionComponent } from "./motion";
 export { visualElement } from "./render";
 export { VisualElement } from "./render/types";
 export { addScaleCorrector } from "./projection/styles/scale-correction";
+export { useInstantTransition } from "./utils/use-instant-transition";
 export { useInstantLayoutTransition } from "./projection/use-instant-layout-transition";
 export { useResetProjection } from "./projection/use-reset-projection";
 /**

package/types/motion/features/types.d.ts

@@ -16,6 +16,7 @@ export declare type FeatureNames = {
     focus: true;
     hover: true;
     pan: true;
+    inView: true;
     measureLayout: true;
 };
 export declare type FeatureComponent = React.ComponentType<FeatureProps>;
@@ -34,6 +35,7 @@ export interface FeatureComponents {
     focus?: FeatureComponent;
     hover?: FeatureComponent;
     pan?: FeatureComponent;
+    inView?: FeatureComponent;
     measureLayout?: FeatureComponent;
 }
 export interface FeatureBundle extends FeatureComponents {

package/types/motion/features/viewport/observers.d.ts

@@ -0,0 +1,3 @@
+declare type IntersectionHandler = (entry: IntersectionObserverEntry) => void;
+export declare function observeIntersection(element: Element, options: IntersectionObserverInit, callback: IntersectionHandler): () => void;
+export {};

package/types/motion/features/viewport/types.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import { TargetAndTransition } from "../../../types";
+import { VariantLabels } from "../../types";
+export declare type ViewportEventHandler = () => void;
+export interface ViewportOptions {
+    root?: RefObject<Element>;
+    once?: boolean;
+    margin?: string;
+    amount?: "some" | "all" | number;
+}
+export interface ViewportProps {
+    whileInView?: VariantLabels | TargetAndTransition;
+    onViewportEnter?: ViewportEventHandler;
+    onViewportLeave?: ViewportEventHandler;
+    viewport?: ViewportOptions;
+}
+export declare type ViewportState = {
+    hasEnteredView: boolean;
+    isInView: boolean;
+};

package/types/motion/features/viewport/use-viewport.d.ts

@@ -0,0 +1,2 @@
+import { FeatureProps } from "../types";
+export declare function useViewport({ visualElement, whileInView, onViewportEnter, onViewportLeave, viewport, }: FeatureProps): void;

package/types/motion/types.d.ts

@@ -7,6 +7,7 @@ import { LayoutProps } from "./features/layout/types";
 import { ResolvedValues } from "../render/types";
 import { VisualElementLifecycles } from "../render/utils/lifecycles";
 import { PanHandlers, TapHandlers, HoverHandlers, FocusHandlers } from "../gestures/types";
+import { ViewportProps } from "./features/viewport/types";
 export declare type MotionStyleProp = string | number | MotionValue;
 /**
  * Either a string, or array of strings, that reference variants defined via the `variants` prop.
@@ -206,7 +207,7 @@ export interface MotionAdvancedProps {
  *
  * @public
  */
-export interface MotionProps extends AnimationProps, VisualElementLifecycles, PanHandlers, TapHandlers, HoverHandlers, FocusHandlers, DraggableProps, LayoutProps, MotionAdvancedProps {
+export interface MotionProps extends AnimationProps, VisualElementLifecycles, PanHandlers, TapHandlers, HoverHandlers, FocusHandlers, ViewportProps, DraggableProps, LayoutProps, MotionAdvancedProps {
     /**
      * Properties, variant label or array of variant labels to start in.
      *

package/types/render/utils/animation-state.d.ts

@@ -15,7 +15,7 @@ export interface AnimationState {
 export declare type AnimationList = string[] | TargetAndTransition[];
 export declare const variantPriorityOrder: AnimationType[];
 export declare function createAnimationState(visualElement: VisualElement): AnimationState;
-export declare function variantsHaveChanged(prev: any, next: any): boolean;
+export declare function checkVariantsDidChange(prev: any, next: any): boolean;
 export interface AnimationTypeState {
     isActive: boolean;
     protectedKeys: {

package/types/render/utils/types.d.ts

@@ -4,5 +4,6 @@ export declare enum AnimationType {
     Tap = "whileTap",
     Drag = "whileDrag",
     Focus = "whileFocus",
+    InView = "whileInView",
     Exit = "exit"
 }

package/types/utils/use-instant-transition-state.d.ts

@@ -0,0 +1,3 @@
+export declare const instantAnimationState: {
+    current: boolean;
+};

package/types/utils/use-instant-transition.d.ts

@@ -0,0 +1 @@
+export declare function useInstantTransition(): (callback: () => void) => void;

package/types/utils/warn-once.d.ts

@@ -0,0 +1,2 @@
+export declare function hasWarned(message: string): boolean;
+export declare function warnOnce(condition: boolean, message: string, element?: Element): void;