framer-motion 6.3.11 → 6.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "6.3.11",
+    "version": "6.3.12",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -8,14 +8,14 @@
         ".": {
             "require": "./dist/cjs/index.js",
             "import": {
-                "types": "./types/index.d.ts",
+                "types": "./dist/index.d.ts",
                 "default": "./dist/es/index.mjs"
             },
             "default": "./dist/cjs/index.js"
         },
         "./package.json": "./package.json"
     },
-    "types": "types/index.d.ts",
+    "types": "dist/index.d.ts",
     "author": "Framer",
     "license": "MIT",
     "repository": "https://github.com/framer/motion/",
@@ -106,5 +106,5 @@
             "maxSize": "31.6 kB"
         }
     ],
-    "gitHead": "b12b137e1f57d32b04bfec0eba13789c58e99f58"
+    "gitHead": "302ce6a81112c64a332080b87372a7a128f8379d"
 }

package/types/animation/animate.d.ts

@@ -1,54 +0,0 @@
-import { Spring, Tween } from "../types";
-import { MotionValue } from "../value";
-/**
- * @public
- */
-export interface AnimationPlaybackControls {
-    stop: () => void;
-    isAnimating: () => boolean;
-}
-/**
- * @public
- */
-export interface AnimationPlaybackLifecycles<V> {
-    onUpdate?: (latest: V) => void;
-    onPlay?: () => void;
-    onComplete?: () => void;
-    onRepeat?: () => void;
-    onStop?: () => void;
-}
-/**
- * @public
- */
-export declare type AnimationOptions<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
-    delay?: number;
-    type?: "tween" | "spring";
-};
-/**
- * Animate a single value or a `MotionValue`.
- *
- * The first argument is either a `MotionValue` to animate, or an initial animation value.
- *
- * The second is either a value to animate to, or an array of keyframes to animate through.
- *
- * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
- *
- * Returns `AnimationPlaybackControls`, currently just a `stop` method.
- *
- * ```javascript
- * const x = useMotionValue(0)
- *
- * useEffect(() => {
- *   const controls = animate(x, 100, {
- *     type: "spring",
- *     stiffness: 2000,
- *     onComplete: v => {}
- *   })
- *
- *   return controls.stop
- * })
- * ```
- *
- * @public
- */
-export declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: AnimationOptions<V>): AnimationPlaybackControls;

package/types/animation/animation-controls.d.ts

@@ -1,5 +0,0 @@
-import { AnimationControls } from "./types";
-/**
- * @public
- */
-export declare function animationControls(): AnimationControls;

package/types/animation/types.d.ts

@@ -1,79 +0,0 @@
-import { TargetAndTransition, TargetResolver, Transition } from "../types";
-import { VisualElement } from "../render/types";
-/**
- * @public
- */
-export declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
-/**
- * @public
- */
-export declare type PendingAnimations = {
-    animation: [ControlsAnimationDefinition, Transition | undefined];
-    resolve: () => void;
-};
-/**
- * @public
- */
-export interface AnimationControls {
-    /**
-     * Subscribes a component's animation controls to this.
-     *
-     * @param controls - The controls to subscribe
-     * @returns An unsubscribe function.
-     *
-     * @internal
-     */
-    subscribe(visualElement: VisualElement): () => void;
-    /**
-     * Starts an animation on all linked components.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * controls.start("variantLabel")
-     * controls.start({
-     *   x: 0,
-     *   transition: { duration: 1 }
-     * })
-     * ```
-     *
-     * @param definition - Properties or variant label to animate to
-     * @param transition - Optional `transtion` to apply to a variant
-     * @returns - A `Promise` that resolves when all animations have completed.
-     *
-     * @public
-     */
-    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
-    /**
-     * Instantly set to a set of properties or a variant.
-     *
-     * ```jsx
-     * // With properties
-     * controls.set({ opacity: 0 })
-     *
-     * // With variants
-     * controls.set("hidden")
-     * ```
-     *
-     * @internalremarks
-     * We could perform a similar trick to `.start` where this can be called before mount
-     * and we maintain a list of of pending actions that get applied on mount. But the
-     * expectation of `set` is that it happens synchronously and this would be difficult
-     * to do before any children have even attached themselves. It's also poor practise
-     * and we should discourage render-synchronous `.start` calls rather than lean into this.
-     *
-     * @public
-     */
-    set(definition: ControlsAnimationDefinition): void;
-    /**
-     * Stops animations on all linked components.
-     *
-     * ```jsx
-     * controls.stop()
-     * ```
-     *
-     * @public
-     */
-    stop(): void;
-    mount(): () => void;
-}

package/types/animation/use-animated-state.d.ts

@@ -1,6 +0,0 @@
-/**
- * This is not an officially supported API and may be removed
- * on any version.
- * @internal
- */
-export declare function useAnimatedState(initialState: any): any[];

package/types/animation/use-animation.d.ts

@@ -1,31 +0,0 @@
-import { AnimationControls } from "./types";
-/**
- * Creates `AnimationControls`, which can be used to manually start, stop
- * and sequence animations on one or more components.
- *
- * The returned `AnimationControls` should be passed to the `animate` property
- * of the components you want to animate.
- *
- * These components can then be animated with the `start` method.
- *
- * ```jsx
- * import * as React from 'react'
- * import { motion, useAnimation } from 'framer-motion'
- *
- * export function MyComponent(props) {
- *    const controls = useAnimation()
- *
- *    controls.start({
- *        x: 100,
- *        transition: { duration: 0.5 },
- *    })
- *
- *    return <motion.div animate={controls} />
- * }
- * ```
- *
- * @returns Animation controller with `start` and `stop` methods
- *
- * @public
- */
-export declare function useAnimation(): AnimationControls;

package/types/animation/utils/default-transitions.d.ts

@@ -1,19 +0,0 @@
-import { PopmotionTransitionProps, ValueTarget, SingleTarget } from "../../types";
-export declare const underDampedSpring: () => {
-    type: string;
-    stiffness: number;
-    damping: number;
-    restSpeed: number;
-};
-export declare const criticallyDampedSpring: (to: SingleTarget) => {
-    type: string;
-    stiffness: number;
-    damping: number;
-    restSpeed: number;
-};
-export declare const linearTween: () => {
-    type: string;
-    ease: string;
-    duration: number;
-};
-export declare const getDefaultTransition: (valueKey: string, to: ValueTarget) => PopmotionTransitionProps;

package/types/animation/utils/easing.d.ts

@@ -1,3 +0,0 @@
-import { Easing } from "../../types";
-export declare const easingDefinitionToFunction: (definition: Easing) => import("../../types").EasingFunction;
-export declare const isEasingArray: (ease: any) => ease is Easing[];

package/types/animation/utils/is-animatable.d.ts

@@ -1,11 +0,0 @@
-import { ResolvedValueTarget } from "../../types";
-/**
- * Check if a value is animatable. Examples:
- *
- * ✅: 100, "100px", "#fff"
- * ❌: "block", "url(2.jpg)"
- * @param value
- *
- * @internal
- */
-export declare const isAnimatable: (key: string, value: ResolvedValueTarget) => boolean;

package/types/animation/utils/is-animation-controls.d.ts

@@ -1,2 +0,0 @@
-import { AnimationControls } from "../types";
-export declare function isAnimationControls(v?: unknown): v is AnimationControls;

package/types/animation/utils/is-keyframes-target.d.ts

@@ -1,2 +0,0 @@
-import { ValueTarget, KeyframesTarget } from "../../types";
-export declare const isKeyframesTarget: (v: ValueTarget) => v is KeyframesTarget;

package/types/animation/utils/transitions.d.ts

@@ -1,29 +0,0 @@
-import { Transition, PermissiveTransitionDefinition, ResolvedValueTarget } from "../../types";
-import { AnimationOptions } from "popmotion";
-import { MotionValue } from "../../value";
-/**
- * Decide whether a transition is defined on a given Transition.
- * This filters out orchestration options and returns true
- * if any options are left.
- */
-export declare function isTransitionDefined({ when, delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }: Transition): boolean;
-/**
- * Convert Framer Motion's Transition type into Popmotion-compatible options.
- */
-export declare function convertTransitionToAnimationOptions<T>({ ease, times, yoyo, flip, loop, ...transition }: PermissiveTransitionDefinition): AnimationOptions<T>;
-/**
- * Get the delay for a value by checking Transition with decreasing specificity.
- */
-export declare function getDelayFromTransition(transition: Transition, key: string): any;
-export declare function hydrateKeyframes(options: PermissiveTransitionDefinition): PermissiveTransitionDefinition;
-export declare function getPopmotionAnimationOptions(transition: PermissiveTransitionDefinition, options: any, key: string): any;
-export declare function isZero(value: string | number): boolean;
-export declare function getZeroUnit(potentialUnitType: string | number): string | number;
-export declare function getValueTransition(transition: Transition, key: string): any;
-/**
- * Start animation on a MotionValue. This function is an interface between
- * Framer Motion and Popmotion
- *
- * @internal
- */
-export declare function startAnimation(key: string, value: MotionValue, target: ResolvedValueTarget, transition?: Transition): Promise<void>;

package/types/animation/utils/variant-resolvers.d.ts

@@ -1,12 +0,0 @@
-import { MotionValue } from "../../value";
-declare type VariantNameList = string[];
-declare type VariantName = string | VariantNameList;
-declare type UnresolvedVariant = VariantName | MotionValue;
-export declare const resolveVariantLabels: (variant?: UnresolvedVariant | undefined) => VariantNameList;
-/**
- * Hooks in React sometimes accept a dependency array as their final argument. (ie useEffect/useMemo)
- * When values in this array change, React re-runs the dependency. However if the array
- * contains a variable number of items, React throws an error.
- */
-export declare const asDependencyList: (list: VariantNameList) => string[];
-export {};

package/types/components/AnimatePresence/PresenceChild.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { VariantLabels } from "../../motion/types";
-interface PresenceChildProps {
-    children: React.ReactElement<any>;
-    isPresent: boolean;
-    onExitComplete?: () => void;
-    initial?: false | VariantLabels;
-    custom?: any;
-    presenceAffectsLayout: boolean;
-}
-export declare const PresenceChild: ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, }: PresenceChildProps) => JSX.Element;
-export {};

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

@@ -1,36 +0,0 @@
-import * as React from "react";
-import { AnimatePresenceProps } from "./types";
-/**
- * `AnimatePresence` enables the animation of components that have been removed from the tree.
- *
- * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
- *
- * Any `motion` components that have an `exit` property defined will animate out when removed from
- * the tree.
- *
- * ```jsx
- * import { motion, AnimatePresence } from 'framer-motion'
- *
- * export const Items = ({ items }) => (
- *   <AnimatePresence>
- *     {items.map(item => (
- *       <motion.div
- *         key={item.id}
- *         initial={{ opacity: 0 }}
- *         animate={{ opacity: 1 }}
- *         exit={{ opacity: 0 }}
- *       />
- *     ))}
- *   </AnimatePresence>
- * )
- * ```
- *
- * You can sequence exit animations throughout a tree using variants.
- *
- * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
- * once all `motion` components have finished animating out. Likewise, any components using
- * `usePresence` all need to call `safeToRemove`.
- *
- * @public
- */
-export declare const AnimatePresence: React.FunctionComponent<React.PropsWithChildren<AnimatePresenceProps>>;

package/types/components/AnimatePresence/types.d.ts

@@ -1,61 +0,0 @@
-/**
- * @public
- */
-export interface AnimatePresenceProps {
-    /**
-     * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children
-     * that are present when the component is first rendered.
-     *
-     * ```jsx
-     * <AnimatePresence initial={false}>
-     *   {isVisible && (
-     *     <motion.div
-     *       key="modal"
-     *       initial={{ opacity: 0 }}
-     *       animate={{ opacity: 1 }}
-     *       exit={{ opacity: 0 }}
-     *     />
-     *   )}
-     * </AnimatePresence>
-     * ```
-     *
-     * @public
-     */
-    initial?: boolean;
-    /**
-     * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`
-     * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.
-     * This will ensure all leaving components animate using the latest data.
-     *
-     * @public
-     */
-    custom?: any;
-    /**
-     * Fires when all exiting nodes have completed animating out.
-     *
-     * @public
-     */
-    onExitComplete?: () => void;
-    /**
-     * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component
-     * will finish its exit animation before the entering component is rendered.
-     *
-     * ```jsx
-     * const MyComponent = ({ currentItem }) => (
-     *   <AnimatePresence exitBeforeEnter>
-     *     <motion.div key={currentItem} exit={{ opacity: 0 }} />
-     *   </AnimatePresence>
-     * )
-     * ```
-     *
-     * @beta
-     */
-    exitBeforeEnter?: boolean;
-    /**
-     * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
-     * child being removed.
-     *
-     * @internal
-     */
-    presenceAffectsLayout?: boolean;
-}

package/types/components/AnimatePresence/use-presence.d.ts

@@ -1,52 +0,0 @@
-import { PresenceContextProps } from "../../context/PresenceContext";
-export declare type SafeToRemove = () => void;
-declare type AlwaysPresent = [true, null];
-declare type Present = [true];
-declare type NotPresent = [false, SafeToRemove];
-/**
- * When a component is the child of `AnimatePresence`, it can use `usePresence`
- * to access information about whether it's still present in the React tree.
- *
- * ```jsx
- * import { usePresence } from "framer-motion"
- *
- * export const Component = () => {
- *   const [isPresent, safeToRemove] = usePresence()
- *
- *   useEffect(() => {
- *     !isPresent && setTimeout(safeToRemove, 1000)
- *   }, [isPresent])
- *
- *   return <div />
- * }
- * ```
- *
- * If `isPresent` is `false`, it means that a component has been removed the tree, but
- * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
- *
- * @public
- */
-export declare function usePresence(): AlwaysPresent | Present | NotPresent;
-/**
- * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
- * There is no `safeToRemove` function.
- *
- * ```jsx
- * import { useIsPresent } from "framer-motion"
- *
- * export const Component = () => {
- *   const isPresent = useIsPresent()
- *
- *   useEffect(() => {
- *     !isPresent && console.log("I've been removed!")
- *   }, [isPresent])
- *
- *   return <div />
- * }
- * ```
- *
- * @public
- */
-export declare function useIsPresent(): boolean;
-export declare function isPresent(context: PresenceContextProps | null): boolean;
-export {};

package/types/components/AnimateSharedLayout.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare const AnimateSharedLayout: React.FunctionComponent;

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

@@ -1,12 +0,0 @@
-import * as React from "react";
-declare type InheritOption = boolean | "id";
-export interface Props {
-    id?: string;
-    inherit?: InheritOption;
-    /**
-     * @deprecated
-     */
-    inheritId?: boolean;
-}
-export declare const LayoutGroup: React.FunctionComponent<React.PropsWithChildren<Props>>;
-export {};

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

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import { LazyProps } from "./types";
-/**
- * Used in conjunction with the `m` component to reduce bundle size.
- *
- * `m` is a version of the `motion` component that only loads functionality
- * critical for the initial render.
- *
- * `LazyMotion` can then be used to either synchronously or asynchronously
- * load animation and gesture support.
- *
- * ```jsx
- * // Synchronous loading
- * import { LazyMotion, m, domAnimations } from "framer-motion"
- *
- * function App() {
- *   return (
- *     <LazyMotion features={domAnimations}>
- *       <m.div animate={{ scale: 2 }} />
- *     </LazyMotion>
- *   )
- * }
- *
- * // Asynchronous loading
- * import { LazyMotion, m } from "framer-motion"
- *
- * function App() {
- *   return (
- *     <LazyMotion features={() => import('./path/to/domAnimations')}>
- *       <m.div animate={{ scale: 2 }} />
- *     </LazyMotion>
- *   )
- * }
- * ```
- *
- * @public
- */
-export declare function LazyMotion({ children, features, strict }: LazyProps): JSX.Element;

package/types/components/LazyMotion/types.d.ts

@@ -1,54 +0,0 @@
-/// <reference types="react" />
-import { FeatureBundle } from "../../motion/features/types";
-export declare type LazyFeatureBundle = () => Promise<FeatureBundle>;
-/**
- * @public
- */
-export interface LazyProps {
-    children?: React.ReactNode;
-    /**
-     * Can be used to provide a feature bundle synchronously or asynchronously.
-     *
-     * ```jsx
-     * // features.js
-     * import { domAnimations } from "framer-motion"
-     * export default domAnimations
-     *
-     * // index.js
-     * import { LazyMotion, m } from "framer-motion"
-     *
-     * const loadFeatures = import("./features.js")
-     *   .then(res => res.default)
-     *
-     * function Component() {
-     *   return (
-     *     <LazyMotion features={loadFeatures}>
-     *       <m.div animate={{ scale: 1.5 }} />
-     *     </LazyMotion>
-     *   )
-     * }
-     * ```
-     *
-     * @public
-     */
-    features: FeatureBundle | LazyFeatureBundle;
-    /**
-     * If `true`, will throw an error if a `motion` component renders within
-     * a `LazyMotion` component.
-     *
-     * ```jsx
-     * // This component will throw an error that explains using a motion component
-     * // instead of the m component will break the benefits of code-splitting.
-     * function Component() {
-     *   return (
-     *     <LazyMotion features={domAnimation} strict>
-     *       <motion.div />
-     *     </LazyMotion>
-     *   )
-     * }
-     * ```
-     *
-     * @public
-     */
-    strict?: boolean;
-}

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

@@ -1,25 +0,0 @@
-import * as React from "react";
-import { MotionConfigContext } from "../../context/MotionConfigContext";
-import { IsValidProp } from "../../render/dom/utils/filter-props";
-export interface MotionConfigProps extends Partial<MotionConfigContext> {
-    children?: React.ReactNode;
-    isValidProp?: IsValidProp;
-}
-/**
- * `MotionConfig` is used to set configuration options for all children `motion` components.
- *
- * ```jsx
- * import { motion, MotionConfig } from "framer-motion"
- *
- * export function App() {
- *   return (
- *     <MotionConfig transition={{ type: "spring" }}>
- *       <motion.div animate={{ x: 100 }} />
- *     </MotionConfig>
- *   )
- * }
- * ```
- *
- * @public
- */
-export declare function MotionConfig({ children, isValidProp, ...config }: MotionConfigProps): JSX.Element;