framer-motion 5.3.2 → 5.4.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.3.2",
+    "version": "5.4.0-beta.2",
     "description": "A simple and powerful React animation library",
     "main": "dist/framer-motion.cjs.js",
     "module": "dist/es/index.mjs",
@@ -10,6 +10,11 @@
             "import": "./dist/es/index.mjs",
             "default": "./dist/framer-motion.cjs.js"
         },
+        "./three": {
+            "require": "./dist/framer-motion-three.cjs.js",
+            "import": "./dist/es/three-entry.mjs",
+            "default": "./dist/framer-motion-three.cjs.js"
+        },
         "./package.json": "./package.json"
     },
     "types": "types/index.d.ts",
@@ -20,6 +25,8 @@
     "keywords": [
         "react animation",
         "react",
+        "three",
+        "3d",
         "pose",
         "react pose",
         "animation",
@@ -54,12 +61,24 @@
         "start-dev-server": "webpack serve --config dev/webpack/config.js --hot"
     },
     "peerDependencies": {
+        "@react-three/fiber": "^7.0.21",
         "react": ">=16.8 || ^17.0.0",
-        "react-dom": ">=16.8 || ^17.0.0"
+        "react-dom": ">=16.8 || ^17.0.0",
+        "three": "^0.135.0"
+    },
+    "peerDependenciesMeta": {
+        "@react-three/fiber": {
+            "optional": true
+        },
+        "three": {
+            "optional": true
+        }
     },
     "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",
@@ -70,6 +89,7 @@
         "@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",
@@ -101,6 +121,7 @@
         "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",
@@ -113,7 +134,7 @@
     "dependencies": {
         "framesync": "6.0.1",
         "hey-listen": "^1.0.8",
-        "popmotion": "11.0.0",
+        "popmotion": "11.0.2",
         "style-value-types": "5.0.0",
         "tslib": "^2.1.0"
     },
@@ -136,11 +157,11 @@
     "bundlesize": [
         {
             "path": "./dist/framer-motion.js",
-            "maxSize": "34.8 kB"
+            "maxSize": "34.9 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "6.0 kB"
+            "maxSize": "6.1 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
@@ -152,7 +173,7 @@
         },
         {
             "path": "./dist/size-webpack-m.js",
-            "maxSize": "6.3 kB"
+            "maxSize": "6.4 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",

package/types/components/MotionCanvas/index.d.ts

@@ -0,0 +1,4 @@
+import { Props } from "@react-three/fiber";
+export interface MotionCanvasProps {
+}
+export declare function MotionCanvas({ children, ...props }: Props & MotionCanvasProps): JSX.Element;

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/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/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,2 @@
+export { motion } from "./render/three/motion";
+export { MotionCanvas, MotionCanvasProps } from "./components/MotionCanvas";