framer-motion 5.3.0 → 5.4.0-beta

package/package.json

@@ -1,166 +1,187 @@
 {
-  "name": "framer-motion",
-  "version": "5.3.0",
-  "description": "A simple and powerful React animation library",
-  "main": "dist/framer-motion.cjs.js",
-  "module": "dist/es/index.mjs",
-  "exports": {
-    ".": {
-      "require": "./dist/framer-motion.cjs.js",
-      "import": "./dist/es/index.mjs",
-      "default": "./dist/framer-motion.cjs.js"
+    "name": "framer-motion",
+    "version": "5.4.0-beta",
+    "description": "A simple and powerful React animation library",
+    "main": "dist/framer-motion.cjs.js",
+    "module": "dist/es/index.mjs",
+    "exports": {
+        ".": {
+            "require": "./dist/framer-motion.cjs.js",
+            "import": "./dist/es/index.mjs",
+            "default": "./dist/framer-motion.cjs.js"
+        },
+        "./three": {
+            "require": "./dist/framer-motion-three.cjs.js",
+            "import": "./dist/es/render/three/index.mjs",
+            "default": "./dist/framer-motion-three.cjs.js"
+        },
+        "./package.json": "./package.json"
     },
-    "./package.json": "./package.json"
-  },
-  "types": "types/index.d.ts",
-  "author": "Framer",
-  "license": "MIT",
-  "repository": "https://github.com/framer/motion/",
-  "sideEffects": false,
-  "keywords": [
-    "react animation",
-    "react",
-    "pose",
-    "react pose",
-    "animation",
-    "gestures",
-    "drag",
-    "spring",
-    "popmotion",
-    "framer"
-  ],
-  "scripts": {
-    "lint": "yarn eslint src/**/*.ts",
-    "test": "yarn build && yarn test-server && yarn test-client && yarn test-projection && yarn test-e2e && yarn measure",
-    "build": "yarn clean && tsc -p . && rollup -c",
-    "clean": "rm -rf types dist lib",
-    "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://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/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",
-    "prettier": "prettier ./src/* --write",
-    "watch": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"",
-    "prepack": "yarn build",
-    "prepublishOnly": "yarn test",
-    "postpublish": "git push --tags",
-    "measure": "webpack --config webpack.size.config.js && bundlesize",
-    "start-dev-server": "webpack serve --config dev/webpack/config.js --hot"
-  },
-  "peerDependencies": {
-    "react": ">=16.8 || ^17.0.0",
-    "react-dom": ">=16.8 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@cypress/webpack-preprocessor": "^4.1.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.3.2",
-    "@testing-library/dom": "^6.10.1",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/react-hooks": "^5.1.0",
-    "@types/jest": "^23.3.9",
-    "@types/node": "12.7.4",
-    "@types/react": "17.0.9",
-    "@types/react-dom": "17.0.6",
-    "@types/styled-components": "^4.1.0",
-    "@typescript-eslint/eslint-plugin": "^1.5.0",
-    "@typescript-eslint/parser": "^1.5.0",
-    "bundlesize": "^0.18.0",
-    "cache-loader": "^1.2.5",
-    "concurrently": "^5.2.0",
-    "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
-    "cypress": "^3.4.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.6.0",
-    "fork-ts-checker-webpack-plugin": "^6.2.0",
-    "husky": "1.1.4",
-    "jest": "^24.8.0",
-    "jest-dom": "^3.5.0",
-    "jest-junit": "^6.4.0",
-    "jest-watch-typeahead": "^0.4.2",
-    "lint-staged": "^8.0.4",
-    "lodash": "^4.17.13",
-    "path-browserify": "^1.0.1",
-    "prettier": "^2.1.0",
-    "react": "^17.0.0-rc.0",
-    "react-dev-utils": "^11.0.4",
-    "react-dom": "^17.0.0-rc.0",
-    "react-refresh": "^0.9.0",
-    "rollup": "^2.10.5",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-visualizer": "^2.4.3",
-    "start-server-and-test": "^1.9.1",
-    "styled-components": "^4.1.1",
-    "ts-jest": "^24.0.2",
-    "ts-loader": "^5.3.0",
-    "type-fest": "^1.0.1",
-    "typescript": "^4.2.3",
-    "webpack": "^5.27.2",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2",
-    "yarn-deduplicate": "^1.1.1"
-  },
-  "dependencies": {
-    "framesync": "6.0.1",
-    "hey-listen": "^1.0.8",
-    "popmotion": "11.0.0",
-    "style-value-types": "5.0.0",
-    "tslib": "^2.1.0"
-  },
-  "optionalDependencies": {
-    "@emotion/is-prop-valid": "^0.8.2"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "linters": {
-      "*.{ts,tsx}": [
-        "prettier --write",
-        "git add"
-      ]
-    }
-  },
-  "bundlesize": [
-    {
-      "path": "./dist/framer-motion.js",
-      "maxSize": "34.7 kB"
+    "types": "types/index.d.ts",
+    "author": "Framer",
+    "license": "MIT",
+    "repository": "https://github.com/framer/motion/",
+    "sideEffects": false,
+    "keywords": [
+        "react animation",
+        "react",
+        "three",
+        "3d",
+        "pose",
+        "react pose",
+        "animation",
+        "gestures",
+        "drag",
+        "spring",
+        "popmotion",
+        "framer"
+    ],
+    "scripts": {
+        "lint": "yarn eslint src/**/*.ts",
+        "test": "yarn build && yarn test-server && yarn test-client && yarn test-projection && yarn test-e2e && yarn measure",
+        "build": "yarn clean && tsc -p . && rollup -c",
+        "clean": "rm -rf types dist lib",
+        "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://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-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",
+        "prettier": "prettier ./src/* --write",
+        "watch": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"",
+        "prepack": "yarn build",
+        "prepublishOnly": "yarn test",
+        "postpublish": "git push --tags",
+        "measure": "webpack --config webpack.size.config.js && bundlesize",
+        "start-dev-server": "webpack serve --config dev/webpack/config.js --hot"
     },
-    {
-      "path": "./dist/size-rollup-m.js",
-      "maxSize": "6.0 kB"
+    "peerDependencies": {
+        "@react-three/fiber": "^7.0.21",
+        "react": ">=16.8 || ^17.0.0",
+        "react-dom": ">=16.8 || ^17.0.0",
+        "three": "^0.135.0"
     },
-    {
-      "path": "./dist/size-rollup-dom-animation.js",
-      "maxSize": "16.9 kB"
+    "peerDependenciesMeta": {
+        "@react-three/fiber": {
+            "optional": true
+        },
+        "three": {
+            "optional": true
+        }
     },
-    {
-      "path": "./dist/size-rollup-dom-max.js",
-      "maxSize": "27.8 kB"
+    "devDependencies": {
+        "@cypress/webpack-preprocessor": "^4.1.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "@react-three/fiber": "^7.0.21",
+        "@react-three/test-renderer": "^7.0.20",
+        "@rollup/plugin-node-resolve": "^8.0.0",
+        "@rollup/plugin-replace": "^2.3.2",
+        "@testing-library/dom": "^6.10.1",
+        "@testing-library/react": "^9.3.2",
+        "@testing-library/react-hooks": "^5.1.0",
+        "@types/jest": "^23.3.9",
+        "@types/node": "12.7.4",
+        "@types/react": "17.0.9",
+        "@types/react-dom": "17.0.6",
+        "@types/styled-components": "^4.1.0",
+        "@types/three": "^0.134.0",
+        "@typescript-eslint/eslint-plugin": "^1.5.0",
+        "@typescript-eslint/parser": "^1.5.0",
+        "bundlesize": "^0.18.0",
+        "cache-loader": "^1.2.5",
+        "concurrently": "^5.2.0",
+        "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
+        "cypress": "^3.4.0",
+        "eslint": "^5.16.0",
+        "eslint-config-prettier": "^4.1.0",
+        "eslint-plugin-import": "^2.16.0",
+        "eslint-plugin-react": "^7.12.4",
+        "eslint-plugin-react-hooks": "^1.6.0",
+        "fork-ts-checker-webpack-plugin": "^6.2.0",
+        "husky": "1.1.4",
+        "jest": "^24.8.0",
+        "jest-dom": "^3.5.0",
+        "jest-junit": "^6.4.0",
+        "jest-watch-typeahead": "^0.4.2",
+        "lint-staged": "^8.0.4",
+        "lodash": "^4.17.13",
+        "path-browserify": "^1.0.1",
+        "prettier": "^2.1.0",
+        "react": "^17.0.0-rc.0",
+        "react-dev-utils": "^11.0.4",
+        "react-dom": "^17.0.0-rc.0",
+        "react-refresh": "^0.9.0",
+        "rollup": "^2.10.5",
+        "rollup-plugin-terser": "^5.3.0",
+        "rollup-plugin-visualizer": "^2.4.3",
+        "start-server-and-test": "^1.9.1",
+        "styled-components": "^4.1.1",
+        "three": "^0.135.0",
+        "ts-jest": "^24.0.2",
+        "ts-loader": "^5.3.0",
+        "type-fest": "^1.0.1",
+        "typescript": "^4.2.3",
+        "webpack": "^5.27.2",
+        "webpack-cli": "^4.5.0",
+        "webpack-dev-server": "^3.11.2",
+        "yarn-deduplicate": "^1.1.1"
     },
-    {
-      "path": "./dist/size-webpack-m.js",
-      "maxSize": "6.3 kB"
+    "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.2",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
     },
-    {
-      "path": "./dist/size-webpack-dom-animation.js",
-      "maxSize": "19.3 kB"
+    "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
     },
-    {
-      "path": "./dist/size-webpack-dom-max.js",
-      "maxSize": "31 kB"
-    }
-  ]
-}
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "lint-staged": {
+        "linters": {
+            "*.{ts,tsx}": [
+                "prettier --write",
+                "git add"
+            ]
+        }
+    },
+    "bundlesize": [
+        {
+            "path": "./dist/framer-motion.js",
+            "maxSize": "34.9 kB"
+        },
+        {
+            "path": "./dist/size-rollup-m.js",
+            "maxSize": "6.1 kB"
+        },
+        {
+            "path": "./dist/size-rollup-dom-animation.js",
+            "maxSize": "16.9 kB"
+        },
+        {
+            "path": "./dist/size-rollup-dom-max.js",
+            "maxSize": "27.9 kB"
+        },
+        {
+            "path": "./dist/size-webpack-m.js",
+            "maxSize": "6.4 kB"
+        },
+        {
+            "path": "./dist/size-webpack-dom-animation.js",
+            "maxSize": "19.4 kB"
+        },
+        {
+            "path": "./dist/size-webpack-dom-max.js",
+            "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

@@ -49,4 +49,4 @@ export declare type FeatureDefinitions = {
 export declare type LoadedFeatures = FeatureDefinitions & {
     projectionNodeConstructor?: any;
 };
-export declare type RenderComponent<Instance, RenderState> = (Component: string | React.ComponentType, props: MotionProps, projectionId: number | undefined, ref: React.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean) => any;
+export declare type RenderComponent<Instance, RenderState> = (Component: string | React.ComponentType, props: MotionProps, projectionId: number | undefined, ref: React.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean, visualElement?: VisualElement) => any;

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

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 import { TargetAndTransition } from "../../../types";
 import { VariantLabels } from "../../types";
-export declare type ViewportEventHandler = () => void;
+export declare type ViewportEventHandler = (entry: IntersectionObserverEntry | null) => void;
 export interface ViewportOptions {
     root?: RefObject<Element>;
     once?: boolean;

package/types/render/three/create-visual-element.d.ts

@@ -0,0 +1,6 @@
+import { CreateVisualElement, ScrapeMotionValuesFromProps } from "../types";
+import { Object3DNode } from "@react-three/fiber";
+export declare const scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps;
+export declare const createRenderState: () => {};
+export declare const threeVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, }: import("../types").VisualElementOptions<Object3DNode<any, any>, any>, options?: {}) => import("../types").VisualElement<Object3DNode<any, any>, any>;
+export declare const createVisualElement: CreateVisualElement<any>;

package/types/render/three/gestures/use-hover.d.ts

@@ -0,0 +1,10 @@
+import { MeshProps, ThreeEvent } from "@react-three/fiber";
+import { VisualElement } from "../../types";
+import { ThreeMotionProps } from "../types";
+export declare function useHover(isStatic: boolean, { whileHover, onHoverStart, onHoverEnd, onPointerOver, onPointerOut, }: ThreeMotionProps & MeshProps, visualElement?: VisualElement): {
+    onPointerOver?: undefined;
+    onPointerOut?: undefined;
+} | {
+    onPointerOver: (event: ThreeEvent<any>) => void;
+    onPointerOut: (event: ThreeEvent<any>) => void;
+};

package/types/render/three/gestures/use-tap.d.ts

@@ -0,0 +1,8 @@
+import { MeshProps } from "@react-three/fiber";
+import { VisualElement } from "../../types";
+import { ThreeMotionProps } from "../types";
+export declare function useTap(isStatic: boolean, { whileTap, onTapStart, onTap, onTapCancel, onPointerDown, }: ThreeMotionProps & MeshProps, visualElement?: VisualElement): {
+    onPointerDown?: undefined;
+} | {
+    onPointerDown: EventListener;
+};

package/types/render/three/motion.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ThreeMotionComponents } from "./types";
+declare function custom<Props>(Component: string): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props & import("../..").MotionProps> & import("react").RefAttributes<any>>;
+export declare const motion: typeof custom & ThreeMotionComponents;
+export {};

package/types/render/three/types.d.ts

@@ -0,0 +1,24 @@
+import { MeshProps } from "@react-three/fiber";
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import { HoverHandlers, TapHandlers } from "../..";
+import { AnimationProps } from "../../motion/types";
+import { ResolvedValues } from "../types";
+import { AnimationLifecycles } from "../utils/lifecycles";
+export interface ThreeMotionProps extends AnimationLifecycles, AnimationProps, TapHandlers, HoverHandlers {
+    onInstanceUpdate?: MeshProps["onUpdate"];
+}
+export interface ThreeRenderState {
+    latestValues: ResolvedValues;
+}
+/**
+ * @public
+ */
+export declare type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+/**
+ * Motion-optimised versions of React's HTML components.
+ *
+ * @public
+ */
+export declare type ThreeMotionComponents = {
+    [K in keyof JSX.IntrinsicElements]: ForwardRefComponent<JSX.IntrinsicElements[K], ThreeMotionProps & Omit<JSX.IntrinsicElements[K], "onUpdate">>;
+};

package/types/render/three/use-render.d.ts

@@ -0,0 +1,4 @@
+import { RenderComponent } from "../..";
+import { ThreeRenderState } from "./types";
+import { Object3DNode } from "@react-three/fiber";
+export declare const useRender: RenderComponent<Object3DNode<any, any>, ThreeRenderState>;

package/types/render/three/utils/read-value.d.ts

@@ -0,0 +1,2 @@
+import { Object3DNode } from "@react-three/fiber";
+export declare function readThreeValue(instance: Object3DNode<any, any>, name: string): any;

package/types/render/three/utils/set-value.d.ts

@@ -0,0 +1,2 @@
+import { ThreeRenderState } from "../types";
+export declare function setThreeValue(instance: any, key: string, values: ThreeRenderState): void;

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/lifecycles.d.ts

@@ -12,12 +12,15 @@ export declare type LayoutAnimationCompleteListener = () => void;
 export declare type SetAxisTargetListener = () => void;
 export declare type RenderListener = () => void;
 export declare type OnViewportBoxUpdate = (box: Axis, delta: Delta) => void;
-/**
- * TODO: Make more of these lifecycle events available as props
- */
-export interface VisualElementLifecycles {
+export interface LayoutLifecycles {
     onBeforeLayoutMeasure?(box: Box): void;
     onLayoutMeasure?(box: Box, prevBox: Box): void;
+    /**
+     * @internal
+     */
+    onLayoutAnimationComplete?(): void;
+}
+export interface AnimationLifecycles {
     /**
      * Callback with latest motion values, fired max once per frame.
      *
@@ -71,15 +74,12 @@ export interface VisualElementLifecycles {
      * ```
      */
     onAnimationComplete?(definition: AnimationDefinition): void;
-    /**
-     * @internal
-     */
-    onLayoutAnimationComplete?(): void;
     /**
      * @internal
      */
     onUnmount?(): void;
 }
+export declare type VisualElementLifecycles = LayoutLifecycles & AnimationLifecycles;
 export interface LifecycleManager {
     onLayoutMeasure: (callback: LayoutMeasureListener) => () => void;
     notifyLayoutMeasure: LayoutMeasureListener;

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

@@ -567,6 +567,7 @@ export declare function getOrigin(target: Target, transition: Transition, visual
     WebkitFontSmoothing?: import("csstype").Property.FontSmooth<string | number> | undefined;
     WebkitFontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
     WebkitHyphens?: import("csstype").Property.Hyphens | undefined;
+    WebkitInitialLetter?: import("csstype").Property.InitialLetter | undefined;
     WebkitJustifyContent?: import("csstype").Property.JustifyContent | undefined;
     WebkitLineBreak?: import("csstype").Property.LineBreak | undefined;
     WebkitLineClamp?: import("csstype").Property.WebkitLineClamp | undefined;

package/types/three-entry.d.ts

@@ -0,0 +1 @@
+export { motion } from "./render/three/motion";

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;